feat(Pagination): allowed customizing appendTo of options menu (#10746)

patternfly · Jul 16, 2024 · 2c73dde · 2c73dde
1 parent 8e7d75c
commit 2c73dde
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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<HTMLDivElement>, 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<PaginationProps> = ({
   ouiaSafe = true,
   usePageInsets,
   inset,
+  menuAppendTo,
   ...props
 }: PaginationProps) => {
   const paginationRef = React.useRef<HTMLDivElement>(null);
@@ -337,6 +340,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
           containerRef={containerRef}
+          appendTo={menuAppendTo}
         />
       )}
       <Navigation

diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -52,7 +52,10 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
+  /** React ref for the container to append the options menu to. This is a static ref provided by the main pagination component. */
   containerRef?: React.RefObject<HTMLDivElement>;
+  /** @beta The container to append the pagination options menu to. Overrides the containerRef prop. */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
@@ -76,7 +79,8 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   itemsTitle = '',
   toggleTemplate,
   onPerPageSelect = () => null as any,
-  containerRef
+  containerRef,
+  appendTo
 }: PaginationOptionsMenuProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
@@ -208,6 +212,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
     </Menu>
   );
 
+  const containerToAppendTo = appendTo ?? (containerRef?.current || undefined);
   return (
     <Popper
       trigger={toggle}
@@ -216,7 +221,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
       popperRef={menuRef}
       isVisible={isOpen}
       direction={dropDirection}
-      appendTo={containerRef?.current || undefined}
+      appendTo={containerToAppendTo}
       minWidth={minWidth !== undefined ? minWidth : 'revert'}
     />
   );