@patternfly/react-core 5.4.0-prerelease.3 → 5.4.0-prerelease.31

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -52,6 +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> = ({
@@ -72,14 +76,15 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   firstIndex = 0,
   lastIndex = 0,
   isLastFullPageShown = false,
-  itemsTitle = 'items',
+  itemsTitle = '',
   toggleTemplate,
-  onPerPageSelect = () => null as any
+  onPerPageSelect = () => null as any,
+  containerRef,
+  appendTo
 }: PaginationOptionsMenuProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const onToggle = () => {
     setIsOpen((prevState) => !prevState);
@@ -207,19 +212,18 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
     </Menu>
   );
 
+  const containerToAppendTo = appendTo ?? (containerRef?.current || undefined);
   return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        isVisible={isOpen}
-        direction={dropDirection}
-        appendTo={containerRef.current || undefined}
-        minWidth={minWidth !== undefined ? minWidth : 'revert'}
-      />
-    </div>
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      direction={dropDirection}
+      appendTo={containerToAppendTo}
+      minWidth={minWidth !== undefined ? minWidth : 'revert'}
+    />
   );
 };
 

package/src/components/Pagination/__tests__/Generated/PaginationOptionsMenu.test.tsx

@@ -29,8 +29,8 @@ it('PaginationOptionsMenu should match snapshot (auto-generated)', () => {
         <React.Fragment>
           <b>
             {firstIndex} - {lastIndex}
-          </b>Custom toggle template
-          of<b>{itemCount}</b> {itemsTitle}
+          </b>
+          Custom toggle template of<b>{itemCount}</b> {itemsTitle}
         </React.Fragment>
       )}
       onPerPageSelect={() => null as any}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -2,48 +2,49 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <div>
-    <button
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-      id="''-toggle"
-      type="button"
+  <button
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
+    id="''-toggle"
+    type="button"
+  >
+    <span
+      class="pf-v5-c-menu-toggle__text"
+    >
+      <b>
+        0 - 0
+      </b>
+      Custom toggle template of
+      <b>
+        0
+      </b>
+       'items'
+    </span>
+    <span
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__text"
-      >
-        <b>
-          0 - 0
-        </b>
-        Custom toggle template of
-        <b>
-          0
-        </b>
-         'items'
-      </span>
-      <span
-        class="pf-v5-c-menu-toggle__controls"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
-        <span
-          class="pf-v5-c-menu-toggle__toggle-icon"
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 320 512"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 320 512"
-            width="1em"
-          >
-            <path
-              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
       </span>
-    </button>
-  </div>
+    </span>
+  </button>
 </DocumentFragment>
 `;