fix: automatic combobox options virtualization

Author: HichamELBSI

docs/stories/03-inputs/TimePicker.stories.tsx

@@ -90,7 +90,7 @@ export const Size = {
 
 export const Steps = {
   args: {
-    step: 60,
+    step: 1,
   },
   name: 'Steps',
 } satisfies Story;

packages/design-system/src/components/Combobox/Combobox.tsx

@@ -66,29 +66,6 @@ interface ComboboxProps
    */
   size?: 'S' | 'M';
   startIcon?: React.ReactNode;
-  /**
-   * Enable virtualization for large lists
-   * @default false
-   */
-  virtualized?: boolean;
-  /**
-   * Estimated size of each item for virtualization
-   * @default 40
-   */
-  estimatedItemSize?: number;
-  /**
-   * Number of items to render outside visible area
-   * @default 5
-   */
-  overscan?: number;
-  /**
-   * For lazy virtualization: total item count
-   */
-  virtualItemCount?: number;
-  /**
-   * For lazy virtualization: function to render item by index
-   */
-  renderVirtualItem?: (index: number) => React.ReactNode;
 }
 
 type ComboboxInputElement = HTMLInputElement;
@@ -123,11 +100,6 @@ const Combobox = React.forwardRef<ComboboxInputElement, ComboboxProps>(
       onChange,
       onClear,
       onCreateOption,
-      virtualized = false,
-      estimatedItemSize = 40,
-      overscan = 5,
-      virtualItemCount,
-      renderVirtualItem,
       onFilterValueChange,
       onInputChange,
       onTextValueChange,
@@ -221,6 +193,24 @@ const Combobox = React.forwardRef<ComboboxInputElement, ComboboxProps>(
     const generatedIntersectionId = useId();
     const intersectionId = `intersection-${stripReactIdOfColon(generatedIntersectionId)}`;
 
+    // Convert children to array for virtualization
+    const childrenArray = React.useMemo(() => {
+      return React.Children.toArray(children);
+    }, [children]);
+
+    const childrenCount = childrenArray.length;
+
+    // Automatically use virtualization for large lists
+    const shouldVirtualize = childrenCount > 100;
+
+    // Lazy render function for automatic virtualization
+    const renderVirtualItem = React.useCallback(
+      (index: number) => {
+        return childrenArray[index];
+      },
+      [childrenArray],
+    );
+
     useIntersection(viewportRef, handleReachEnd, {
       selectorToWatch: `#${intersectionId}`,
       /**
@@ -301,15 +291,13 @@ const Combobox = React.forwardRef<ComboboxInputElement, ComboboxProps>(
           <Content sideOffset={4}>
             <ComboboxPrimitive.Viewport ref={viewportRef}>
               <ScrollAreaCombobox>
-                {virtualized ? (
+                {shouldVirtualize ? (
                   <VirtualizedList
-                    estimatedItemSize={estimatedItemSize}
-                    overscan={overscan}
-                    itemCount={virtualItemCount}
+                    estimatedItemSize={40}
+                    overscan={10}
+                    itemCount={childrenCount}
                     renderItem={renderVirtualItem}
-                  >
-                    {children}
-                  </VirtualizedList>
+                  />
                 ) : (
                   children
                 )}

packages/design-system/src/components/TimePicker/TimePicker.tsx

@@ -74,43 +74,13 @@ export const TimePicker = React.forwardRef<ComboboxInputElement, TimePickerProps
       return separator;
     }, [formatter]);
 
-    // Enable virtualization for small steps that generate many options
-    // step=1 -> 1440 options, step=5 -> 288 options
-    const shouldVirtualize = step <= 5;
-
-    // Increase overscan for smoother scrolling with many items
-    const overscanCount = step === 1 ? 15 : 10;
-
-    // For virtualized lists, generate options lazily to avoid creating 1440 React elements upfront
-    // For non-virtualized lists, generate all options as before
+    // Generate all time options - Combobox will automatically virtualize if > 100
     const timeOptions = React.useMemo(() => {
-      if (!shouldVirtualize) {
-        // Non-virtualized: generate all options as before
-        const stepCount = 60 / step;
-        return [...Array(24).keys()].flatMap((hour) =>
-          [...Array(stepCount).keys()].map((minuteStep) =>
-            formatter.format(new Date(0, 0, 0, hour, minuteStep * step)),
-          ),
-        );
-      }
-
-      // Virtualized: return empty array and generate on-demand
-      return [];
-    }, [step, formatter, shouldVirtualize]);
-
-    // Generate time option on demand for virtualized lists
-    const getTimeOption = React.useCallback(
-      (index: number) => {
-        const stepCount = 60 / step;
-        const hour = Math.floor(index / stepCount);
-        const minuteStep = index % stepCount;
-        return formatter.format(new Date(0, 0, 0, hour, minuteStep * step));
-      },
-      [step, formatter],
-    );
-
-    // Calculate total count for virtualized lists
-    const totalTimeCount = (60 / step) * 24;
+      const stepCount = 60 / step;
+      return [...Array(24).keys()].flatMap((hour) =>
+        [...Array(stepCount).keys()].map((minuteStep) => formatter.format(new Date(0, 0, 0, hour, minuteStep * step))),
+      );
+    }, [step, formatter]);
 
     const handleTextValueChange = (string?: string) => {
       if (!string || isNotAlphabeticalCharacter(string)) {
@@ -167,19 +137,6 @@ export const TimePicker = React.forwardRef<ComboboxInputElement, TimePickerProps
     const escapedSeparator = escapeForRegex(separator);
     const pattern = `\\d{2}${escapedSeparator}\\d{2}`;
 
-    // Render function for lazy virtualization
-    const renderTimeOption = React.useCallback(
-      (index: number) => {
-        const time = getTimeOption(index);
-        return (
-          <ComboboxOption key={time} value={time}>
-            {time}
-          </ComboboxOption>
-        );
-      },
-      [getTimeOption],
-    );
-
     return (
       <TimePickerCombobox
         {...restProps}
@@ -196,17 +153,12 @@ export const TimePicker = React.forwardRef<ComboboxInputElement, TimePickerProps
         textValue={textValue}
         onTextValueChange={handleTextValueChange}
         onBlur={handleBlur}
-        virtualized={shouldVirtualize}
-        overscan={overscanCount}
-        virtualItemCount={shouldVirtualize ? totalTimeCount : undefined}
-        renderVirtualItem={shouldVirtualize ? renderTimeOption : undefined}
       >
-        {!shouldVirtualize &&
-          timeOptions.map((time) => (
-            <ComboboxOption key={time} value={time}>
-              {time}
-            </ComboboxOption>
-          ))}
+        {timeOptions.map((time) => (
+          <ComboboxOption key={time} value={time}>
+            {time}
+          </ComboboxOption>
+        ))}
       </TimePickerCombobox>
     );
   },