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 = () => ( <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); + } + }, }; 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} /> </SelectContainer> </ItemsPerPageContainer>