Added virtualization to DxcSelect

apps/website/screens/components/select/code/SelectCodePage.tsx

@@ -10,6 +10,7 @@ import groups from "./examples/groupedOptions";
 import icons from "./examples/icons";
 import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
 import StatusBadge from "@/common/StatusBadge";
+import virtualized from "./examples/virtualized";
 
 const optionsType = `{ 
     label: string;
@@ -89,6 +90,24 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                height
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              A fixed height must be set to enable virtualization. If no height is provided, the select will
+              automatically adjust to the height of its content, and virtualization will not be applied.
+            </td>
+            <td>
+              <td>-</td>
+            </td>
+          </tr>
           <tr>
             <td>helperText</td>
             <td>
@@ -311,6 +330,10 @@ const sections = [
         title: "Uncontrolled",
         content: <Example example={uncontrolled} defaultIsVisible />,
       },
+      {
+        title: "Virtualized",
+        content: <Example example={virtualized} defaultIsVisible />,
+      },
       {
         title: "Error handling",
         content: <Example example={errorHandling} defaultIsVisible />,

apps/website/screens/components/select/code/examples/virtualized.ts

@@ -0,0 +1,27 @@
+import { DxcSelect, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  const options = [
+    ...Array.from({ length: 10000 }, (_, i) => ({
+      label: \`Option \${String(i + 1).padStart(2, "0")}\`,
+      value: \`\${i + 1}\`,
+    })),
+  ];
+
+  return (
+    <DxcInset space="var(--spacing-padding-xl)">
+      <DxcSelect 
+        label="Select a virtualized value" 
+        options={options} 
+        height="300px" 
+      />
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcSelect,
+  DxcInset,
+};
+
+export default { code, scope };