@patternfly/react-core 4.202.30 → 4.202.33

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

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`component render custom pagination toggle 1`] = `
-<div>
+exports[`Pagination component render custom pagination toggle 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-13"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-12"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-14"
+    id="pagination-options-menu-13"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
@@ -32,10 +32,10 @@ exports[`component render custom pagination toggle 1`] = `
           aria-expanded="false"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-13"
+          id="pagination-options-menu-toggle-12"
           type="button"
         >
           <span
@@ -70,7 +70,7 @@ exports[`component render custom pagination toggle 1`] = `
           aria-label="Go to first page"
           class="pf-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-55"
+          data-ouia-component-id="OUIA-Generated-Button-plain-51"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           disabled=""
@@ -99,7 +99,7 @@ exports[`component render custom pagination toggle 1`] = `
           aria-label="Go to previous page"
           class="pf-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-56"
+          data-ouia-component-id="OUIA-Generated-Button-plain-52"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           disabled=""
@@ -134,9 +134,7 @@ exports[`component render custom pagination toggle 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          4
+          of 4
         </span>
       </div>
       <div
@@ -147,7 +145,7 @@ exports[`component render custom pagination toggle 1`] = `
           aria-label="Go to next page"
           class="pf-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-57"
+          data-ouia-component-id="OUIA-Generated-Button-plain-53"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           type="button"
@@ -175,7 +173,7 @@ exports[`component render custom pagination toggle 1`] = `
           aria-label="Go to last page"
           class="pf-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-58"
+          data-ouia-component-id="OUIA-Generated-Button-plain-54"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           type="button"
@@ -197,11 +195,11 @@ exports[`component render custom pagination toggle 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render custom perPageOptions 1`] = `
-<div>
+exports[`Pagination component render custom perPageOptions 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-8"
@@ -214,18 +212,13 @@ exports[`component render custom perPageOptions 1`] = `
       class="pf-c-pagination__total-items"
     >
       <b>
-        -9
-         - 
-        10
+        -9 - 10
       </b>
-       
-      of
-       
+       of 
       <b>
         40
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu"
@@ -239,18 +232,13 @@ exports[`component render custom perPageOptions 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            -9
-             - 
-            10
+            -9 - 10
           </b>
-           
-          of
-           
+           of 
           <b>
             40
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
@@ -358,9 +346,7 @@ exports[`component render custom perPageOptions 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          4
+          of 4
         </span>
       </div>
       <div
@@ -421,35 +407,30 @@ exports[`component render custom perPageOptions 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render custom start end 1`] = `
-<div>
+exports[`Pagination component render custom start end 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-11"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-10"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-12"
+    id="pagination-options-menu-11"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
       class="pf-c-pagination__total-items"
     >
       <b>
-        -9
-         - 
-        10
+        -9 - 10
       </b>
-       
-      of
-       
+       of 
       <b>
         40
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu"
@@ -463,27 +444,22 @@ exports[`component render custom start end 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            5
-             - 
-            15
+            5 - 15
           </b>
-           
-          of
-           
+           of 
           <b>
             40
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-11"
+          id="pagination-options-menu-toggle-10"
           type="button"
         >
           <span
@@ -518,7 +494,7 @@ exports[`component render custom start end 1`] = `
           aria-label="Go to first page"
           class="pf-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-47"
+          data-ouia-component-id="OUIA-Generated-Button-plain-43"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           type="button"
@@ -546,7 +522,7 @@ exports[`component render custom start end 1`] = `
           aria-label="Go to previous page"
           class="pf-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-48"
+          data-ouia-component-id="OUIA-Generated-Button-plain-44"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           type="button"
@@ -580,9 +556,7 @@ exports[`component render custom start end 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          4
+          of 4
         </span>
       </div>
       <div
@@ -593,7 +567,7 @@ exports[`component render custom start end 1`] = `
           aria-label="Go to next page"
           class="pf-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-49"
+          data-ouia-component-id="OUIA-Generated-Button-plain-45"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           type="button"
@@ -621,7 +595,7 @@ exports[`component render custom start end 1`] = `
           aria-label="Go to last page"
           class="pf-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-50"
+          data-ouia-component-id="OUIA-Generated-Button-plain-46"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           type="button"
@@ -643,11 +617,11 @@ exports[`component render custom start end 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render empty per page options 1`] = `
-<div>
+exports[`Pagination component render empty per page options 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-9"
@@ -660,18 +634,13 @@ exports[`component render empty per page options 1`] = `
       class="pf-c-pagination__total-items"
     >
       <b>
-        -9
-         - 
-        10
+        -9 - 10
       </b>
-       
-      of
-       
+       of 
       <b>
         40
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu"
@@ -758,9 +727,7 @@ exports[`component render empty per page options 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          4
+          of 4
         </span>
       </div>
       <div
@@ -821,37 +788,11 @@ exports[`component render empty per page options 1`] = `
       </div>
     </nav>
   </div>
-</div>
-`;
-
-exports[`component render indeterminate count (no item count) 1`] = `
-<span
-  className="pf-c-options-menu__toggle-text"
->
-  <ToggleTemplate
-    firstIndex={1}
-    itemsTitle=""
-    lastIndex={10}
-    ofWord="of"
-  >
-    <b>
-      1
-       - 
-      10
-    </b>
-     
-    of
-     
-    <b>
-      0
-    </b>
-     
-  </ToggleTemplate>
-</span>
+</DocumentFragment>
 `;
 
-exports[`component render last page 1`] = `
-<div>
+exports[`Pagination component render last page 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-7"
@@ -864,18 +805,13 @@ exports[`component render last page 1`] = `
       class="pf-c-pagination__total-items"
     >
       <b>
-        11
-         - 
-        20
+        11 - 20
       </b>
-       
-      of
-       
+       of 
       <b>
         20
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu"
@@ -889,18 +825,13 @@ exports[`component render last page 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            11
-             - 
-            20
+            11 - 20
           </b>
-           
-          of
-           
+           of 
           <b>
             20
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
@@ -1006,9 +937,7 @@ exports[`component render last page 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          2
+          of 2
         </span>
       </div>
       <div
@@ -1071,11 +1000,11 @@ exports[`component render last page 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render limited number of pages 1`] = `
-<div>
+exports[`Pagination component render limited number of pages 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-5"
@@ -1088,18 +1017,13 @@ exports[`component render limited number of pages 1`] = `
       class="pf-c-pagination__total-items"
     >
       <b>
-        -19
-         - 
-        20
+        -19 - 20
       </b>
-       
-      of
-       
+       of 
       <b>
         20
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu"
@@ -1113,18 +1037,13 @@ exports[`component render limited number of pages 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            -19
-             - 
-            20
+            -19 - 20
           </b>
-           
-          of
-           
+           of 
           <b>
             20
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
@@ -1233,9 +1152,7 @@ exports[`component render limited number of pages 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          1
+          of 1
         </span>
       </div>
       <div
@@ -1298,238 +1215,11 @@ exports[`component render limited number of pages 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render no items 1`] = `
-<div>
-  <div
-    class="pf-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-10"
-    data-ouia-component-type="PF4/Pagination"
-    data-ouia-safe="true"
-    id="pagination-options-menu-11"
-    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
-  >
-    <div
-      class="pf-c-pagination__total-items"
-    >
-      <b>
-        0
-         - 
-        0
-      </b>
-       
-      of
-       
-      <b>
-        0
-      </b>
-       
-      
-    </div>
-    <div
-      class="pf-c-options-menu"
-      data-ouia-component-type="PF4/PaginationOptionsMenu"
-      data-ouia-safe="true"
-    >
-      <div
-        class="pf-c-options-menu__toggle pf-m-plain pf-m-text"
-      >
-        <span
-          class="pf-c-options-menu__toggle-text"
-        >
-          <b>
-            0
-             - 
-            0
-          </b>
-           
-          of
-           
-          <b>
-            0
-          </b>
-           
-          
-        </span>
-        <button
-          aria-expanded="false"
-          aria-label="Items per page"
-          class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
-          data-ouia-component-type="PF4/DropdownToggle"
-          data-ouia-safe="true"
-          id="pagination-options-menu-toggle-10"
-          type="button"
-        >
-          <span
-            class="pf-c-options-menu__toggle-button-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              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>
-        </button>
-      </div>
-    </div>
-    <nav
-      aria-label="Pagination"
-      class="pf-c-pagination__nav"
-    >
-      <div
-        class="pf-c-pagination__nav-control pf-m-first"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Go to first page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
-          data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-43"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-c-pagination__nav-control"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Go to previous page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
-          data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-44"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-c-pagination__nav-page-select"
-      >
-        <input
-          aria-label="Current page"
-          class="pf-c-form-control"
-          disabled=""
-          max="0"
-          min="1"
-          type="number"
-          value="0"
-        />
-        <span
-          aria-hidden="true"
-        >
-          of
-           
-          0
-        </span>
-      </div>
-      <div
-        class="pf-c-pagination__nav-control"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Go to next page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
-          data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-45"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 256 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </button>
-      </div>
-      <div
-        class="pf-c-pagination__nav-control pf-m-last"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Go to last page"
-          class="pf-c-button pf-m-plain pf-m-disabled"
-          data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-46"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 448 512"
-            width="1em"
-          >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-            />
-          </svg>
-        </button>
-      </div>
-    </nav>
-  </div>
-</div>
-`;
-
-exports[`component render should render correctly bottom 1`] = `
-<div>
+exports[`Pagination component render should render correctly bottom 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination pf-m-bottom"
     data-ouia-component-id="OUIA-Generated-Pagination-bottom-1"
@@ -1550,18 +1240,13 @@ exports[`component render should render correctly bottom 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            -9
-             - 
-            10
+            -9 - 10
           </b>
-           
-          of
-           
+           of 
           <b>
             20
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
@@ -1669,9 +1354,7 @@ exports[`component render should render correctly bottom 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          2
+          of 2
         </span>
       </div>
       <div
@@ -1732,11 +1415,11 @@ exports[`component render should render correctly bottom 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render should render correctly bottom sticky 1`] = `
-<div>
+exports[`Pagination component render should render correctly bottom sticky 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination pf-m-bottom pf-m-sticky"
     data-ouia-component-id="OUIA-Generated-Pagination-bottom-2"
@@ -1757,18 +1440,13 @@ exports[`component render should render correctly bottom sticky 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            -9
-             - 
-            10
+            -9 - 10
           </b>
-           
-          of
-           
+           of 
           <b>
             20
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
@@ -1876,9 +1554,7 @@ exports[`component render should render correctly bottom sticky 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          2
+          of 2
         </span>
       </div>
       <div
@@ -1939,11 +1615,11 @@ exports[`component render should render correctly bottom sticky 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render should render correctly compact 1`] = `
-<div>
+exports[`Pagination component render should render correctly compact 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination pf-m-compact"
     data-ouia-component-id="OUIA-Generated-Pagination-top-2"
@@ -1956,18 +1632,13 @@ exports[`component render should render correctly compact 1`] = `
       class="pf-c-pagination__total-items"
     >
       <b>
-        -9
-         - 
-        10
+        -9 - 10
       </b>
-       
-      of
-       
+       of 
       <b>
         20
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu"
@@ -1981,18 +1652,13 @@ exports[`component render should render correctly compact 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            -9
-             - 
-            10
+            -9 - 10
           </b>
-           
-          of
-           
+           of 
           <b>
             20
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
@@ -2087,11 +1753,11 @@ exports[`component render should render correctly compact 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render should render correctly disabled 1`] = `
-<div>
+exports[`Pagination component render should render correctly disabled 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-4"
@@ -2104,18 +1770,13 @@ exports[`component render should render correctly disabled 1`] = `
       class="pf-c-pagination__total-items"
     >
       <b>
-        -9
-         - 
-        10
+        -9 - 10
       </b>
-       
-      of
-       
+       of 
       <b>
         20
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu"
@@ -2129,18 +1790,13 @@ exports[`component render should render correctly disabled 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            -9
-             - 
-            10
+            -9 - 10
           </b>
-           
-          of
-           
+           of 
           <b>
             20
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
@@ -2250,9 +1906,7 @@ exports[`component render should render correctly disabled 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          2
+          of 2
         </span>
       </div>
       <div
@@ -2315,11 +1969,11 @@ exports[`component render should render correctly disabled 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render should render correctly sticky 1`] = `
-<div>
+exports[`Pagination component render should render correctly sticky 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination pf-m-sticky"
     data-ouia-component-id="OUIA-Generated-Pagination-top-3"
@@ -2332,18 +1986,13 @@ exports[`component render should render correctly sticky 1`] = `
       class="pf-c-pagination__total-items"
     >
       <b>
-        -9
-         - 
-        10
+        -9 - 10
       </b>
-       
-      of
-       
+       of 
       <b>
         20
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu"
@@ -2357,18 +2006,13 @@ exports[`component render should render correctly sticky 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            -9
-             - 
-            10
+            -9 - 10
           </b>
-           
-          of
-           
+           of 
           <b>
             20
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
@@ -2476,9 +2120,7 @@ exports[`component render should render correctly sticky 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          2
+          of 2
         </span>
       </div>
       <div
@@ -2539,11 +2181,11 @@ exports[`component render should render correctly sticky 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render should render correctly top 1`] = `
-<div>
+exports[`Pagination component render should render correctly top 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-1"
@@ -2556,18 +2198,13 @@ exports[`component render should render correctly top 1`] = `
       class="pf-c-pagination__total-items"
     >
       <b>
-        -9
-         - 
-        10
+        -9 - 10
       </b>
-       
-      of
-       
+       of 
       <b>
         20
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu"
@@ -2581,18 +2218,13 @@ exports[`component render should render correctly top 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            -9
-             - 
-            10
+            -9 - 10
           </b>
-           
-          of
-           
+           of 
           <b>
             20
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
@@ -2700,9 +2332,7 @@ exports[`component render should render correctly top 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          2
+          of 2
         </span>
       </div>
       <div
@@ -2763,35 +2393,30 @@ exports[`component render should render correctly top 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render titles 1`] = `
-<div>
+exports[`Pagination component render titles 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-12"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-11"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-13"
+    id="pagination-options-menu-12"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
       class="pf-c-pagination__total-items"
     >
       <b>
-        -9
-         - 
-        10
+        -9 - 10
       </b>
-       
-      of
-       
+       of 
       <b>
         40
       </b>
-       
-      values
+       values
     </div>
     <div
       class="pf-c-options-menu"
@@ -2805,27 +2430,22 @@ exports[`component render titles 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            -9
-             - 
-            10
+            -9 - 10
           </b>
-           
-          of
-           
+           of 
           <b>
             40
           </b>
-           
-          values
+           values
         </span>
         <button
           aria-expanded="false"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-12"
+          id="pagination-options-menu-toggle-11"
           type="button"
         >
           <span
@@ -2860,7 +2480,7 @@ exports[`component render titles 1`] = `
           aria-label="Go to first page"
           class="pf-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-51"
+          data-ouia-component-id="OUIA-Generated-Button-plain-47"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2889,7 +2509,7 @@ exports[`component render titles 1`] = `
           aria-label="Go to previous page"
           class="pf-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-52"
+          data-ouia-component-id="OUIA-Generated-Button-plain-48"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           disabled=""
@@ -2924,9 +2544,7 @@ exports[`component render titles 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          4 bookss
+          of 4 bookss
         </span>
       </div>
       <div
@@ -2937,7 +2555,7 @@ exports[`component render titles 1`] = `
           aria-label="Go to next page"
           class="pf-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-53"
+          data-ouia-component-id="OUIA-Generated-Button-plain-49"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           type="button"
@@ -2965,7 +2583,7 @@ exports[`component render titles 1`] = `
           aria-label="Go to last page"
           class="pf-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-54"
+          data-ouia-component-id="OUIA-Generated-Button-plain-50"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           type="button"
@@ -2987,63 +2605,30 @@ exports[`component render titles 1`] = `
       </div>
     </nav>
   </div>
-</div>
-`;
-
-exports[`component render toggleTemplate toggle text with function 1`] = `
-<span
-  className="pf-c-options-menu__toggle-text"
->
-  <toggleTemplate
-    firstIndex={1}
-    itemsTitle=""
-    lastIndex={10}
-    ofWord="of"
-  >
-    <div>
-      1
-       - 
-      10
-       of many
-    </div>
-  </toggleTemplate>
-</span>
-`;
-
-exports[`component render toggleTemplate toggle text with string 1`] = `
-<span
-  className="pf-c-options-menu__toggle-text"
->
-  I am a string
-</span>
+</DocumentFragment>
 `;
 
-exports[`component render up drop direction 1`] = `
-<div>
+exports[`Pagination component render up drop direction 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-14"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-13"
     data-ouia-component-type="PF4/Pagination"
     data-ouia-safe="true"
-    id="pagination-options-menu-15"
+    id="pagination-options-menu-14"
     style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
   >
     <div
       class="pf-c-pagination__total-items"
     >
       <b>
-        -9
-         - 
-        10
+        -9 - 10
       </b>
-       
-      of
-       
+       of 
       <b>
         40
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu pf-m-top"
@@ -3057,27 +2642,22 @@ exports[`component render up drop direction 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            -9
-             - 
-            10
+            -9 - 10
           </b>
-           
-          of
-           
+           of 
           <b>
             40
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
-          data-ouia-component-id="OUIA-Generated-DropdownToggle-15"
+          data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
           data-ouia-component-type="PF4/DropdownToggle"
           data-ouia-safe="true"
-          id="pagination-options-menu-toggle-14"
+          id="pagination-options-menu-toggle-13"
           type="button"
         >
           <span
@@ -3112,7 +2692,7 @@ exports[`component render up drop direction 1`] = `
           aria-label="Go to first page"
           class="pf-c-button pf-m-plain pf-m-disabled"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-59"
+          data-ouia-component-id="OUIA-Generated-Button-plain-55"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3141,7 +2721,7 @@ exports[`component render up drop direction 1`] = `
           aria-label="Go to previous page"
           class="pf-c-button pf-m-plain pf-m-disabled"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-60"
+          data-ouia-component-id="OUIA-Generated-Button-plain-56"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           disabled=""
@@ -3176,9 +2756,7 @@ exports[`component render up drop direction 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          4
+          of 4
         </span>
       </div>
       <div
@@ -3189,7 +2767,7 @@ exports[`component render up drop direction 1`] = `
           aria-label="Go to next page"
           class="pf-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-61"
+          data-ouia-component-id="OUIA-Generated-Button-plain-57"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           type="button"
@@ -3217,7 +2795,7 @@ exports[`component render up drop direction 1`] = `
           aria-label="Go to last page"
           class="pf-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-62"
+          data-ouia-component-id="OUIA-Generated-Button-plain-58"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           type="button"
@@ -3239,11 +2817,11 @@ exports[`component render up drop direction 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`component render zero results 1`] = `
-<div>
+exports[`Pagination component render zero results 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-pagination"
     data-ouia-component-id="OUIA-Generated-Pagination-top-6"
@@ -3256,18 +2834,13 @@ exports[`component render zero results 1`] = `
       class="pf-c-pagination__total-items"
     >
       <b>
-        0
-         - 
-        0
+        0 - 0
       </b>
-       
-      of
-       
+       of 
       <b>
         0
       </b>
        
-      
     </div>
     <div
       class="pf-c-options-menu"
@@ -3281,18 +2854,13 @@ exports[`component render zero results 1`] = `
           class="pf-c-options-menu__toggle-text"
         >
           <b>
-            0
-             - 
-            0
+            0 - 0
           </b>
-           
-          of
-           
+           of 
           <b>
             0
           </b>
            
-          
         </span>
         <button
           aria-expanded="false"
@@ -3401,9 +2969,7 @@ exports[`component render zero results 1`] = `
         <span
           aria-hidden="true"
         >
-          of
-           
-          0
+          of 0
         </span>
       </div>
       <div
@@ -3466,5 +3032,5 @@ exports[`component render zero results 1`] = `
       </div>
     </nav>
   </div>
-</div>
+</DocumentFragment>
 `;