From 0ba7e5c3486cc1c7a3a42aeb6ca06deea1eb2436 Mon Sep 17 00:00:00 2001
From: Titani Labaj <39532947+tlabaj@users.noreply.github.com>
Date: Fri, 3 May 2024 11:14:32 -0400
Subject: [PATCH] "fix(Pagination): Fix bottom pagination layout" (#10315)

* fix(Pgination): Fix bottom pagination layout

* fix(Pgination): Fix bottom pagination layout
---
 .../src/components/Pagination/Pagination.tsx  |    2 +
 .../Pagination/PaginationOptionsMenu.tsx      |   27 +-
 .../PaginationOptionsMenu.test.tsx.snap       |   74 +-
 .../__snapshots__/Pagination.test.tsx.snap    | 1468 ++++++++---------
 4 files changed, 765 insertions(+), 806 deletions(-)

diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx
index f4c412da26e..6f8451d47e1 100644
--- a/packages/react-core/src/components/Pagination/Pagination.tsx
+++ b/packages/react-core/src/components/Pagination/Pagination.tsx
@@ -232,6 +232,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   ...props
 }: PaginationProps) => {
   const paginationRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const getLastPage = () =>
     // when itemCount is not known let's set lastPage as page+1 as we don't know the total count
@@ -335,6 +336,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
           widgetId={`${widgetId}-${variant}`}
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
+          containerRef={containerRef}
         />
       )}
       <Navigation
diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
index a3d400773c5..85156c296b9 100644
--- a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
+++ b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx
@@ -52,6 +52,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
+  containerRef?: React.RefObject<HTMLDivElement>;
 }
 
 export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
@@ -74,12 +75,12 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   isLastFullPageShown = false,
   itemsTitle = 'items',
   toggleTemplate,
-  onPerPageSelect = () => null as any
+  onPerPageSelect = () => null as any,
+  containerRef
 }: 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);
@@ -208,18 +209,16 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   );
 
   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={containerRef?.current || undefined}
+      minWidth={minWidth !== undefined ? minWidth : 'revert'}
+    />
   );
 };
 
diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
index 1167a78ce3f..2318ccc5400 100644
--- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap
@@ -2,48 +2,46 @@
 
 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"
+    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>
 `;
diff --git a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index 242c3a314d0..4b903de5555 100644
--- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -22,49 +22,47 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          0
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -230,49 +228,47 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          0
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -438,49 +434,47 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          0
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -646,49 +640,47 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          0
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -854,49 +846,47 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          0
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -1062,49 +1052,47 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          0
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -1263,42 +1251,40 @@ exports[`Pagination component render custom pagination toggle 1`] = `
     >
       1 - 10 - 40 - 
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        1 - 10 - 40 - 
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          1 - 10 - 40 - 
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -1468,49 +1454,47 @@ exports[`Pagination component render custom perPageOptions 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          40
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            40
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -1680,49 +1664,47 @@ exports[`Pagination component render custom start end 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          5 - 15
+        </b>
+         of 
+        <b>
+          40
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            5 - 15
-          </b>
-           of 
-          <b>
-            40
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -2059,49 +2041,47 @@ exports[`Pagination component render last page 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          11 - 20
+        </b>
+         of 
+        <b>
+          20
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            11 - 20
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -2271,49 +2251,47 @@ exports[`Pagination component render limited number of pages 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 20
+        </b>
+         of 
+        <b>
+          20
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 20
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -2474,49 +2452,47 @@ exports[`Pagination component render should render correctly bottom 1`] = `
     id="options-menu-bottom-pagination"
     style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-bottom-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-bottom-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          20
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -2674,49 +2650,47 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
     id="options-menu-bottom-pagination"
     style="--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-bottom-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-bottom-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          20
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -2886,49 +2860,47 @@ exports[`Pagination component render should render correctly compact 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          20
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -3017,50 +2989,48 @@ exports[`Pagination component render should render correctly disabled 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
-        disabled=""
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
+      disabled=""
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          20
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -3233,49 +3203,47 @@ exports[`Pagination component render should render correctly sticky 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          20
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -3445,49 +3413,47 @@ exports[`Pagination component render should render correctly top 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          20
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            20
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -3657,49 +3623,47 @@ exports[`Pagination component render titles 1`] = `
       </b>
        values
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          40
+        </b>
+         values
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            40
-          </b>
-           values
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -3869,49 +3833,47 @@ exports[`Pagination component render up drop direction 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          1 - 10
+        </b>
+         of 
+        <b>
+          40
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            1 - 10
-          </b>
-           of 
-          <b>
-            40
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"
@@ -4081,49 +4043,47 @@ exports[`Pagination component render zero results 1`] = `
       </b>
        
     </div>
-    <div>
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-        id="options-menu-top-toggle"
-        type="button"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      id="options-menu-top-toggle"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__text"
+      >
+        <b>
+          0 - 0
+        </b>
+         of 
+        <b>
+          0
+        </b>
+         
+      </span>
+      <span
+        class="pf-v5-c-menu-toggle__controls"
       >
         <span
-          class="pf-v5-c-menu-toggle__text"
-        >
-          <b>
-            0 - 0
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           
-        </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>
     <nav
       aria-label="Pagination"
       class="pf-v5-c-pagination__nav"