feat(select): virtualization

apps/docs/content/components/select/index.ts

@@ -27,6 +27,10 @@ import multipleControlledOnChange from "./multiple-controlled-onchange";
 import multipleWithChips from "./multiple-chips";
 import customSelectorIcon from "./custom-selector-icon";
 import customStyles from "./custom-styles";
+import virtualization from "./virtualization";
+import virtualizationTenThousand from "./virtualization-ten-thousand";
+import virtualizationCustomItemHeight from "./virtualization-custom-item-height";
+import virtualizationMaxListboxHeight from "./virtualization-max-listbox-height";
 
 export const selectContent = {
   usage,
@@ -58,4 +62,8 @@ export const selectContent = {
   multipleWithChips,
   customSelectorIcon,
   customStyles,
+  virtualization,
+  virtualizationTenThousand,
+  virtualizationCustomItemHeight,
+  virtualizationMaxListboxHeight,
 };

apps/docs/content/components/select/virtualization-custom-item-height.ts

@@ -0,0 +1,63 @@
+const App = `import {Select, SelectItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: \`\${item}\${i}\`,
+      value: \`\${item.toLowerCase()}\${i}\`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Select
+        isVirtualized
+        itemHeight={40}
+        label={"Select from 1000 items"}
+        maxListboxHeight={400}
+        placeholder="Select..."
+      >
+        {items.map((item, index) => (
+          <SelectItem key={index} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/select/virtualization-max-listbox-height.ts

@@ -0,0 +1,63 @@
+const App = `import {Select, SelectItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: \`\${item}\${i}\`,
+      value: \`\${item.toLowerCase()}\${i}\`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Select
+        isVirtualized
+        label={"Select from 1000 items"}
+        maxListboxHeight={400}
+        placeholder="Select..."
+      >
+        {items.map((item, index) => (
+          <SelectItem key={index} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}
+`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/select/virtualization-ten-thousand.ts

@@ -0,0 +1,57 @@
+const App = `import {Select, SelectItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: \`\${item}\${i}\`,
+      value: \`\${item.toLowerCase()}\${i}\`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Select label={"Select from 10000 items"} isVirtualized placeholder="Select...">
+        {items.map((item, index) => (
+          <SelectItem key={index} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/select/virtualization.ts

@@ -0,0 +1,57 @@
+const App = `import {Select, SelectItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: \`\${item}\${i}\`,
+      value: \`\${item.toLowerCase()}\${i}\`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Select label={"Select from 1000 items"} isVirtualized placeholder="Select...">
+        {items.map((item, index) => (
+          <SelectItem key={index} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/docs/components/select.mdx

@@ -213,6 +213,37 @@ import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
   iframeSrc="/examples/select/async-items-loading"
 />
 
+
+### Virtualization
+
+Select supports virtualization, which allows efficient rendering of large lists by only rendering items that are visible in the viewport. You can enable virtualization by setting the `isVirtualized` prop to `true`.
+
+<CodeDemo
+  title="Virtualization"
+  files={selectContent.virtualization}
+/>
+
+> **Note**: The virtualization strategy is based on the [@tanstack/react-virtual](https://tanstack.com/virtual/latest) package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport.
+
+#### Ten Thousand Items
+
+Here's an example of using virtualization with 10,000 items.
+
+<CodeDemo title="Ten Thousand Items" files={selectContent.virtualizationTenThousand} />
+
+#### Max Listbox Height
+
+The `maxListboxHeight` prop is used to set the maximum height of the listbox. This is required when using virtualization. By default, it's set to `256`.
+
+<CodeDemo title="Max Listbox Height" files={selectContent.virtualizationMaxListboxHeight} />
+
+#### Custom Item Height
+
+The `itemHeight` prop is used to set the height of each item in the listbox. This is required when using virtualization. By default, it's set to `32`.
+
+<CodeDemo title="Custom Item Height" files={selectContent.virtualizationCustomItemHeight} />
+
+
 ### With Sections
 
 You can use the `SelectSection` component to group select items.
@@ -476,6 +507,24 @@ the popover and listbox components.
       description: "A ref to the spinner element.",
       default: "-"
     },
+    {
+      attribute: "maxListboxHeight",
+      type: "number",
+      description: "The maximum height of the listbox in pixels. Required when using virtualization.",
+      default: "256"
+    },
+    {
+      attribute: "itemHeight",
+      type: "number", 
+      description: "The fixed height of each item in pixels. Required when using virtualization.",
+      default: "32"
+    },
+    {
+      attribute: "isVirtualized",
+      type: "boolean",
+      description: "Whether to enable virtualization. By default, it's enabled when the number of items exceeds 50.",
+      default: "undefined"
+    },
     {
       attribute: "fullWidth",
       type: "boolean",

packages/components/select/package.json

@@ -57,7 +57,8 @@
     "@react-aria/interactions": "3.22.4",
     "@react-aria/utils": "3.25.3",
     "@react-aria/visually-hidden": "3.8.17",
-    "@react-types/shared": "3.25.0"
+    "@react-types/shared": "3.25.0",
+    "@tanstack/react-virtual": "^3.10.9"
   },
   "devDependencies": {
     "@nextui-org/avatar": "workspace:*",