feat(select): virtualization

apps/docs/content/components/autocomplete/virtualization-custom-item-height.raw.jsx

@@ -0,0 +1,53 @@
+import {Autocomplete, AutocompleteItem} 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">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        itemHeight={40}
+        label="Search from 1000 items"
+        maxListboxHeight={400}
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}

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

@@ -1,60 +1,4 @@
-const App = `import {Autocomplete, AutocompleteItem} 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">
-      <Autocomplete 
-        isVirtualized
-        label="Search from 1000 items" 
-        className="max-w-xs"
-        defaultItems={items}
-        placeholder="Search..."
-        maxListboxHeight={400}
-        itemHeight={40}
-      >
-        {(item) => (
-          <AutocompleteItem key={item.value}>
-            {item.label}
-          </AutocompleteItem>
-        )}
-      </Autocomplete>
-    </div>
-  );
-}`;
+import App from "./virtualization-custom-item-height.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/autocomplete/virtualization-max-listbox-height.raw.jsx

@@ -0,0 +1,52 @@
+import {Autocomplete, AutocompleteItem} 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">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        label="Search from 1000 items"
+        maxListboxHeight={400}
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}

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

@@ -1,59 +1,4 @@
-const App = `import {Autocomplete, AutocompleteItem} 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">
-      <Autocomplete 
-        isVirtualized
-        label="Search from 1000 items" 
-        className="max-w-xs"
-        defaultItems={items}
-        placeholder="Search..."
-        maxListboxHeight={400}
-      >
-        {(item) => (
-          <AutocompleteItem key={item.value}>
-            {item.label}
-          </AutocompleteItem>
-        )}
-      </Autocomplete>
-    </div>
-  );
-}`;
+import App from "./virtualization-max-listbox-height.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/autocomplete/virtualization-ten-thousand.raw.jsx

@@ -0,0 +1,51 @@
+import {Autocomplete, AutocompleteItem} 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(10000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        label="Search from 10000 items"
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}

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

@@ -1,58 +1,4 @@
-const App = `import {Autocomplete, AutocompleteItem} 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(10000);
-
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Autocomplete 
-        isVirtualized
-        label="Search from 10000 items" 
-        className="max-w-xs"
-        defaultItems={items}
-        placeholder="Search..."
-      >
-        {(item) => (
-          <AutocompleteItem key={item.value}>
-            {item.label}
-          </AutocompleteItem>
-        )}
-      </Autocomplete>
-    </div>
-  );
-}`;
+import App from "./virtualization-ten-thousand.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/autocomplete/virtualization.raw.jsx

@@ -0,0 +1,51 @@
+import {Autocomplete, AutocompleteItem} 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">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        label="Search from 1000 items"
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}