diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx index 6f8451d47e1..bdef6db3779 100644 --- a/packages/react-core/src/components/Pagination/Pagination.tsx +++ b/packages/react-core/src/components/Pagination/Pagination.tsx @@ -169,6 +169,8 @@ export interface PaginationProps extends React.HTMLProps, OUIAPr ouiaId?: number | string; /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ ouiaSafe?: boolean; + /** @beta The container to append the pagination options menu to. */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline'; } const handleInputWidth = (lastPage: number, node: HTMLDivElement) => { @@ -229,6 +231,7 @@ export const Pagination: React.FunctionComponent = ({ ouiaSafe = true, usePageInsets, inset, + menuAppendTo, ...props }: PaginationProps) => { const paginationRef = React.useRef(null); @@ -337,6 +340,7 @@ export const Pagination: React.FunctionComponent = ({ toggleTemplate={toggleTemplate} isDisabled={isDisabled} containerRef={containerRef} + appendTo={menuAppendTo} /> )} ; + /** @beta The container to append the pagination options menu to. Overrides the containerRef prop. */ + appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; } export const PaginationOptionsMenu: React.FunctionComponent = ({ @@ -76,7 +79,8 @@ export const PaginationOptionsMenu: React.FunctionComponent null as any, - containerRef + containerRef, + appendTo }: PaginationOptionsMenuProps) => { const [isOpen, setIsOpen] = React.useState(false); const toggleRef = React.useRef(null); @@ -208,6 +212,7 @@ export const PaginationOptionsMenu: React.FunctionComponent ); + const containerToAppendTo = appendTo ?? (containerRef?.current || undefined); return ( );