diff --git a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx
index 08f101c51..9ffcfacbb 100644
--- a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx
+++ b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx
@@ -46,7 +46,8 @@ const sections = [
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.
|
- |
diff --git a/packages/lib/src/paginator/Paginator.stories.tsx b/packages/lib/src/paginator/Paginator.stories.tsx
index 4bf6702b3..ec0a6f551 100644
--- a/packages/lib/src/paginator/Paginator.stories.tsx
+++ b/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 = () => (
+
+
+ i + 1)} />
+
@@ -76,6 +81,13 @@ type Story = StoryObj;
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);
+ }
+ },
};
diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx
index 28fdba864..c691a766c 100644
--- a/packages/lib/src/paginator/Paginator.tsx
+++ b/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}
/>