Added virtualization to Paginator Select

apps/website/screens/components/paginator/code/PaginatorCodePage.tsx

@@ -46,7 +46,8 @@ const sections = [
             </td>
             <td>
               An array of numbers representing the items per page options. If undefined, the select with items per page
-              options will not be displayed.
+              options will not be displayed. If there are 100 or more options, the select will be virtualized for better
+              performance.
             </td>
             <td>-</td>
           </tr>

packages/lib/src/paginator/Paginator.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
 import DxcPaginator from "./Paginator";
+import { userEvent, within } from "@storybook/test";
 
 export default {
   title: "Paginator",
@@ -28,6 +29,10 @@ const Paginator = () => (
       <Title title="Default with items per page options" theme="light" level={4} />
       <DxcPaginator itemsPerPageOptions={[5, 10, 15]} />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Default with items per page options virtualized" theme="light" level={4} />
+      <DxcPaginator itemsPerPageOptions={Array.from({ length: 10000 }, (_, i) => i + 1)} />
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="Default with show go to page selector" theme="light" level={4} />
       <DxcPaginator showGoToPage />
@@ -76,6 +81,13 @@ type Story = StoryObj<typeof DxcPaginator>;
 
 export const Chromatic: Story = {
   render: Paginator,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const virtualizedSelect = canvas.getAllByRole("combobox")[1];
+    if (virtualizedSelect) {
+      await userEvent.click(virtualizedSelect);
+    }
+  },
 };
 
 export const ResponsivePaginator: Story = {
@@ -84,4 +96,11 @@ export const ResponsivePaginator: Story = {
     viewport: { viewports: customViewports, defaultViewport: "resizedScreen" },
     chromatic: { viewports: [400] },
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const virtualizedSelect = canvas.getAllByRole("combobox")[1];
+    if (virtualizedSelect) {
+      await userEvent.click(virtualizedSelect);
+    }
+  },
 };

packages/lib/src/paginator/Paginator.tsx

@@ -102,6 +102,7 @@ const DxcPaginator = ({
               value={itemsPerPage.toString()}
               size="fillParent"
               tabIndex={tabIndex}
+              virtualizedHeight={itemsPerPageOptions.length >= 100 ? "304px" : undefined}
             />
           </SelectContainer>
         </ItemsPerPageContainer>