feat: select virtual

Author: yoannfleurydev

app/components/ui/select.stories.tsx

@@ -1,12 +1,18 @@
 import { faker } from '@faker-js/faker';
-import { ComboboxButton } from '@headlessui/react';
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOptions,
+} from '@headlessui/react';
 import { Meta } from '@storybook/react';
 import { ArrowDown, CheckIcon } from 'lucide-react';
 import { useState } from 'react';
 
 import { cn } from '@/lib/tailwind/utils';
 
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { ComboboxOption, Select } from '@/components/ui/select';
 
 export default {
@@ -216,7 +222,7 @@ export const Customization = () => {
   );
 };
 
-const lotsOfOptions = Array.from({ length: 1_000 }, () => ({
+const lotsOfOptions = Array.from({ length: 10_000 }, () => ({
   label: `${faker.person.firstName()} ${faker.person.lastName()}`,
   id: window.crypto.randomUUID(),
 }));
@@ -225,6 +231,11 @@ export const LotsOfOptions = () => {
   const [bear, setBear] = useState<Bear | null>(null);
 
   return (
-    <Select options={lotsOfOptions} value={bear} onChange={(v) => setBear(v)} />
+    <Select
+      options={lotsOfOptions}
+      value={bear}
+      onChange={(v) => setBear(v)}
+      mode="virtual"
+    />
   );
 };

app/components/ui/select.tsx

@@ -10,7 +10,7 @@ import {
 } from '@headlessui/react';
 import { ChevronDown, X } from 'lucide-react';
 import { ChangeEvent, ComponentProps, ReactNode, useState } from 'react';
-import { isNonNullish, isNullish } from 'remeda';
+import { isEmpty, isNonNullish, isNullish } from 'remeda';
 
 import { cn } from '@/lib/tailwind/utils';
 import { getUiState } from '@/lib/ui-state';
@@ -34,7 +34,9 @@ type SelectProps<TValue extends TValueBase> = ComboboxProps<TValue, false> &
     renderEmpty?: (search: string) => ReactNode;
     /** Allow the user to provide a custom value */
     allowCustomValue?: boolean;
+    /** Allow you to provide custom ComboboxOption */
     renderOption?: (option: OptionBase) => ReactNode;
+    mode?: 'default' | 'virtual';
   };
 
 export const Select = <TValue extends TValueBase>({
@@ -49,19 +51,13 @@ export const Select = <TValue extends TValueBase>({
   value,
   defaultValue,
   allowCustomValue = false,
+  mode = 'default',
   ...props
 }: SelectProps<TValue>) => {
-  const [items, setItems] = useState(options);
   const [search, setSearch] = useState('');
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSearch(event.target.value);
-
-    setItems(
-      options.filter((item) =>
-        item.label.toLowerCase().includes(event.target.value.toLowerCase())
-      )
-    );
   };
 
   const handleOnValueChange: SelectProps<TValue>['onChange'] = (value) => {
@@ -74,9 +70,12 @@ export const Select = <TValue extends TValueBase>({
    */
   const handleOnClose = () => {
     setSearch('');
-    setItems(options);
   };
 
+  const items = options.filter((item) =>
+    item.label.toLowerCase().includes(search.toLowerCase())
+  );
+
   const ui = getUiState((set) => {
     if (items.length === 0 && allowCustomValue && search.length > 0) {
       return set('create-search', { search });
@@ -90,6 +89,10 @@ export const Select = <TValue extends TValueBase>({
       return set('empty-override', { renderEmpty });
     }
 
+    if (mode === 'virtual' && !isEmpty(items)) {
+      return set('virtual');
+    }
+
     if (items.length !== 0 && isNonNullish(renderOption)) {
       return set('render-option', { renderOption });
     }
@@ -107,6 +110,11 @@ export const Select = <TValue extends TValueBase>({
       value={value ?? null}
       onChange={(v) => handleOnValueChange(v)}
       onClose={handleOnClose}
+      virtual={
+        mode === 'virtual' && isNonNullish(items) && !isEmpty(items)
+          ? { options: items, disabled: (o) => o?.disabled }
+          : undefined
+      }
       {...props}
     >
       <div className="relative">
@@ -157,6 +165,9 @@ export const Select = <TValue extends TValueBase>({
                 Create <span className="font-bold">{search}</span>
               </ComboboxOption>
             ))
+            .match('virtual', () => ({ option }: { option: OptionBase }) => (
+              <ComboboxOption value={option}>{option.label}</ComboboxOption>
+            ))
             .match('render-option', ({ renderOption }) =>
               items.map((item) => renderOption(item))
             )
@@ -188,7 +199,7 @@ export function ComboboxOption({
         'flex cursor-pointer gap-1 rounded-sm px-3 py-1.5',
         'data-[focus]:bg-neutral-50 dark:data-[focus]:bg-neutral-800',
         'data-[selected]:bg-neutral-100 data-[selected]:font-medium dark:data-[selected]:bg-neutral-700',
-        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        'data-disabled:cursor-not-allowed data-disabled:opacity-50',
         'text-sm hover:bg-neutral-50 dark:hover:bg-neutral-800',
         props.className
       )}

app/lib/ui-state.ts

@@ -22,7 +22,7 @@ type UiState<
         Extract<UiState<Status, Data>['state'], { __status: S }>,
         '__status'
       >
-    ) => React.ReactNode,
+    ) => React.ReactNode | ((...args: ExplicitAny[]) => React.ReactNode),
     __matched?: boolean,
     run?: () => React.ReactNode
   ) => {