add virtual list for combobox

apps/dashboard/package.json

@@ -81,6 +81,7 @@
     "pushmodal": "^1.0.3",
     "ramda": "^0.29.1",
     "random-animal-name": "^0.1.1",
+    "rc-virtual-list": "^3.14.5",
     "react": "18.2.0",
     "react-animate-height": "^3.2.3",
     "react-animated-numbers": "^0.18.0",

apps/dashboard/src/components/ui/combobox-advanced.tsx

@@ -1,13 +1,9 @@
 import * as React from 'react';
 import { Badge } from '@/components/ui/badge';
-import {
+import { Command, CommandInput, CommandItem } from '@/components/ui/command';
-  Command,
+import { cn } from '@/utils/cn';
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
 import { ChevronsUpDownIcon } from 'lucide-react';
+import VirtualList from 'rc-virtual-list';
 import { useOnClickOutside } from 'usehooks-ts';
 
 import { Button } from './button';
@@ -71,10 +67,31 @@ export function ComboboxAdvanced({
     );
   };
 
-  const renderUnknownItem = (value: IValue) => {
+  const data = React.useMemo(() => {
-    const item = items.find((item) => item.value === value);
+    return [
-    return item ? renderItem(item) : renderItem({ value, label: value });
+      ...(inputValue === ''
-  };
+        ? []
+        : [
+            {
+              value: inputValue,
+              label: `Pick '${inputValue}'`,
+            },
+          ]),
+      ...value.map((val) => {
+        const item = items.find((item) => item.value === val);
+        return item
+          ? {
+              value: val,
+              label: item.label,
+            }
+          : {
+              value: val,
+              label: val,
+            };
+      }),
+      ...selectables,
+    ].filter((item) => item.value);
+  }, [inputValue, selectables, items]);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -82,7 +99,7 @@ export function ComboboxAdvanced({
         <Button
           variant={'outline'}
           onClick={() => setOpen((prev) => !prev)}
-          className={className}
+          className={cn('h-min-10 h-auto', className)}
         >
           <div className="flex w-full flex-wrap gap-1">
             {value.length === 0 && placeholder}
@@ -104,15 +121,9 @@ export function ComboboxAdvanced({
             value={inputValue}
             onValueChange={setInputValue}
           />
-          <CommandList>
+          <VirtualList height={300} data={data} itemHeight={32} itemKey="value">
-            {inputValue !== '' &&
+            {renderItem}
-              renderItem({
+          </VirtualList>
-                value: inputValue,
-                label: `Pick '${inputValue}'`,
-              })}
-            {value.map(renderUnknownItem)}
-            {selectables.map(renderItem)}
-          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>

apps/dashboard/src/components/ui/combobox.tsx

@@ -6,7 +6,6 @@ import { Button } from '@/components/ui/button';
 import {
   Command,
   CommandEmpty,
-  CommandGroup,
   CommandInput,
   CommandItem,
 } from '@/components/ui/command';
@@ -18,6 +17,7 @@ import {
 import { cn } from '@/utils/cn';
 import type { LucideIcon } from 'lucide-react';
 import { Check, ChevronsUpDown } from 'lucide-react';
+import VirtualList from 'rc-virtual-list';
 
 export interface ComboboxProps<T> {
   placeholder: string;
@@ -123,30 +123,33 @@ export function Combobox<T extends string>({
           ) : (
             <CommandEmpty>Nothing selected</CommandEmpty>
           )}
-          <div className="over-x-hidden max-h-[300px] overflow-y-auto">
+          <VirtualList
-            <CommandGroup>
+            height={300}
-              {items.map((item) => (
+            data={items}
-                <CommandItem
+            itemHeight={32}
-                  key={item.value}
+            itemKey="value"
-                  value={item.value}
+          >
-                  onSelect={(currentValue) => {
+            {(item) => (
-                    const value = find(currentValue)?.value ?? currentValue;
+              <CommandItem
-                    onChange(value as T);
+                key={item.value}
-                    setOpen(false);
+                value={item.value}
-                  }}
+                onSelect={(currentValue) => {
-                  {...(item.disabled && { disabled: true })}
+                  const value = find(currentValue)?.value ?? currentValue;
-                >
+                  onChange(value as T);
-                  <Check
+                  setOpen(false);
-                    className={cn(
+                }}
-                      'mr-2 h-4 w-4 flex-shrink-0',
+                {...(item.disabled && { disabled: true })}
-                      value === item.value ? 'opacity-100' : 'opacity-0'
+              >
-                    )}
+                <Check
-                  />
+                  className={cn(
-                  {item.label}
+                    'mr-2 h-4 w-4 flex-shrink-0',
-                </CommandItem>
+                    value === item.value ? 'opacity-100' : 'opacity-0'
-              ))}
+                  )}
-            </CommandGroup>
+                />
-          </div>
+                {item.label}
+              </CommandItem>
+            )}
+          </VirtualList>
         </Command>
       </PopoverContent>
     </Popover>

pnpm-lock.yaml

@@ -360,6 +360,9 @@ importers:
       random-animal-name:
         specifier: ^0.1.1
         version: 0.1.1
+      rc-virtual-list:
+        specifier: ^3.14.5
+        version: 3.14.5(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: 18.2.0
         version: 18.2.0
@@ -8949,6 +8952,10 @@ packages:
       clsx: 2.0.0
     dev: false
 
+  /classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+    dev: false
+
   /clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -15758,6 +15765,47 @@ packages:
       unpipe: 1.0.0
     dev: false
 
+  /rc-resize-observer@1.4.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.9
+      classnames: 2.5.1
+      rc-util: 5.43.0(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      resize-observer-polyfill: 1.5.1
+    dev: false
+
+  /rc-util@5.43.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.9
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-is: 18.2.0
+    dev: false
+
+  /rc-virtual-list@3.14.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-ZMOnkCLv2wUN8Jz7yI4XiSLa9THlYvf00LuMhb1JlsQCewuU7ydPuHw1rGVPhe9VZYl/5UqODtNd7QKJ2DMGfg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.9
+      classnames: 2.5.1
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.43.0(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
@@ -16509,6 +16557,10 @@ packages:
       '@canvas/image-data': 1.0.0
     dev: false
 
+  /resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+    dev: false
+
   /resolve-from@3.0.0:
     resolution: {integrity: sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==}
     engines: {node: '>=4'}