diff --git a/.changeset/bumpy-bats-go.md b/.changeset/bumpy-bats-go.md new file mode 100644 index 0000000000..4c406842a4 --- /dev/null +++ b/.changeset/bumpy-bats-go.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/ui": patch +--- + +add per page dropdown target portal diff --git a/packages/ui/src/components/Pagination/PerPage.tsx b/packages/ui/src/components/Pagination/PerPage.tsx index 1a5333e1cf..9ff7867cc4 100644 --- a/packages/ui/src/components/Pagination/PerPage.tsx +++ b/packages/ui/src/components/Pagination/PerPage.tsx @@ -32,6 +32,7 @@ type PerPageProps = { numberOfItemsText?: string page: number numberOfItems: number + portalTarget?: HTMLElement } export const PerPage = ({ @@ -42,6 +43,7 @@ export const PerPage = ({ numberOfItemsText, page, numberOfItems, + portalTarget, }: PerPageProps) => { const handleChange = (value: string) => { const intValue = Number.parseInt(value, 10) @@ -58,6 +60,7 @@ export const PerPage = ({ name="select-items-per-page" onChange={handleChange} options={optionsItemsPerPage} + portalTarget={portalTarget} size="small" style={{ width: 'fit-content', diff --git a/packages/ui/src/components/Pagination/index.tsx b/packages/ui/src/components/Pagination/index.tsx index 94c43e1477..f935971c33 100644 --- a/packages/ui/src/components/Pagination/index.tsx +++ b/packages/ui/src/components/Pagination/index.tsx @@ -52,6 +52,10 @@ type PaginationProps = { * Number of items in the list */ numberOfItems: number + /** + * Defines the target element for the perPage dropdown menu + */ + perPagePortalTarget?: HTMLElement } | { perPage?: never @@ -59,6 +63,7 @@ type PaginationProps = { perPageText?: never numberOfItemsText?: never numberOfItems?: never + perPagePortalTarget?: never } ) @@ -78,6 +83,7 @@ export const Pagination = ({ perPageText, numberOfItemsText, numberOfItems, + perPagePortalTarget, 'data-testid': dataTestId, style, }: PaginationProps) => { @@ -108,6 +114,7 @@ export const Pagination = ({ page={page} perPage={perPageComputed} perPageText={perPageText} + portalTarget={perPagePortalTarget} setPerPage={setPerPage} /> ) : null}