@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

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

@@ -9,106 +9,118 @@ exports[`SearchInput advanced search 1`] = `
       class="pf-v5-c-input-group"
     >
       <div
-        class="pf-v5-c-text-input-group"
+        class="pf-v5-c-input-group__item pf-m-fill"
       >
         <div
-          class="pf-v5-c-text-input-group__main pf-m-icon"
+          class="pf-v5-c-text-input-group"
         >
-          <span
-            class="pf-v5-c-text-input-group__text"
+          <div
+            class="pf-v5-c-text-input-group__main pf-m-icon"
           >
             <span
-              class="pf-v5-c-text-input-group__icon"
+              class="pf-v5-c-text-input-group__text"
+            >
+              <span
+                class="pf-v5-c-text-input-group__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 512 512"
+                >
+                  <path
+                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  />
+                </svg>
+              </span>
+              <input
+                aria-label="Search input"
+                class="pf-v5-c-text-input-group__text-input"
+                type="text"
+                value="username:player firstname:john"
+              />
+            </span>
+          </div>
+          <div
+            class="pf-v5-c-text-input-group__utilities"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Reset"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-17"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
             >
               <svg
                 aria-hidden="true"
                 class="pf-v5-svg"
                 fill="currentColor"
                 role="img"
-                viewBox="0 0 512 512"
+                viewBox="0 0 352 512"
               >
                 <path
-                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                 />
               </svg>
-            </span>
-            <input
-              aria-label="Search input"
-              class="pf-v5-c-text-input-group__text-input"
-              type="text"
-              value="username:player firstname:john"
-            />
-          </span>
-        </div>
-        <div
-          class="pf-v5-c-text-input-group__utilities"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Reset"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-17"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 352 512"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
-      <button
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-label="Open advanced search"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-10"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 320 512"
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-label="Open advanced search"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-10"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <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>
-      </button>
-      <button
-        aria-disabled="false"
-        aria-label="Search"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-11"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="submit"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 320 512"
+          >
+            <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>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 448 512"
+        <button
+          aria-disabled="false"
+          aria-label="Search"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-11"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
         >
-          <path
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-          />
-        </svg>
-      </button>
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -124,106 +136,118 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       class="pf-v5-c-input-group"
     >
       <div
-        class="pf-v5-c-text-input-group"
+        class="pf-v5-c-input-group__item pf-m-fill"
       >
         <div
-          class="pf-v5-c-text-input-group__main pf-m-icon"
+          class="pf-v5-c-text-input-group"
         >
-          <span
-            class="pf-v5-c-text-input-group__text"
+          <div
+            class="pf-v5-c-text-input-group__main pf-m-icon"
           >
             <span
-              class="pf-v5-c-text-input-group__icon"
+              class="pf-v5-c-text-input-group__text"
+            >
+              <span
+                class="pf-v5-c-text-input-group__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 512 512"
+                >
+                  <path
+                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  />
+                </svg>
+              </span>
+              <input
+                aria-label="Search input"
+                class="pf-v5-c-text-input-group__text-input"
+                type="text"
+                value="username:player firstname:john"
+              />
+            </span>
+          </div>
+          <div
+            class="pf-v5-c-text-input-group__utilities"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Reset"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-18"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
             >
               <svg
                 aria-hidden="true"
                 class="pf-v5-svg"
                 fill="currentColor"
                 role="img"
-                viewBox="0 0 512 512"
+                viewBox="0 0 352 512"
               >
                 <path
-                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                 />
               </svg>
-            </span>
-            <input
-              aria-label="Search input"
-              class="pf-v5-c-text-input-group__text-input"
-              type="text"
-              value="username:player firstname:john"
-            />
-          </span>
-        </div>
-        <div
-          class="pf-v5-c-text-input-group__utilities"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Reset"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-18"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 352 512"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
-      <button
-        aria-disabled="false"
-        aria-expanded="true"
-        aria-label="Open advanced search"
-        class="pf-v5-c-button pf-m-control pf-m-expanded"
-        data-ouia-component-id="OUIA-Generated-Button-control-12"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 320 512"
+        <button
+          aria-disabled="false"
+          aria-expanded="true"
+          aria-label="Open advanced search"
+          class="pf-v5-c-button pf-m-control pf-m-expanded"
+          data-ouia-component-id="OUIA-Generated-Button-control-12"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <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>
-      </button>
-      <button
-        aria-disabled="false"
-        aria-label="Search"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-13"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="submit"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 320 512"
+          >
+            <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>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 448 512"
+        <button
+          aria-disabled="false"
+          aria-label="Search"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-13"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
         >
-          <path
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-          />
-        </svg>
-      </button>
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
     <div
       class=""
@@ -266,16 +290,19 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 <div
                   class="pf-v5-c-form__group-control"
                 >
-                  <input
-                    aria-invalid="false"
+                  <div
                     class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    id="username_0"
-                    type="text"
-                    value="player"
-                  />
+                  >
+                    <input
+                      aria-invalid="false"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      id="username_0"
+                      type="text"
+                      value="player"
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -299,16 +326,19 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 <div
                   class="pf-v5-c-form__group-control"
                 >
-                  <input
-                    aria-invalid="false"
+                  <div
                     class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    id="firstname_1"
-                    type="text"
-                    value="john"
-                  />
+                  >
+                    <input
+                      aria-invalid="false"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      id="firstname_1"
+                      type="text"
+                      value="john"
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -332,16 +362,19 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 <div
                   class="pf-v5-c-form__group-control"
                 >
-                  <input
-                    aria-invalid="false"
+                  <div
                     class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    id="pf-random-id-2"
-                    type="text"
-                    value=""
-                  />
+                  >
+                    <input
+                      aria-invalid="false"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      id="pf-random-id-2"
+                      type="text"
+                      value=""
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -427,45 +460,224 @@ exports[`SearchInput renders search input in strict mode 1`] = `
       class="pf-v5-c-input-group"
     >
       <div
-        class="pf-v5-c-text-input-group"
+        class="pf-v5-c-input-group__item pf-m-fill"
       >
         <div
-          class="pf-v5-c-text-input-group__main pf-m-icon"
+          class="pf-v5-c-text-input-group"
         >
-          <span
-            class="pf-v5-c-text-input-group__text"
+          <div
+            class="pf-v5-c-text-input-group__main pf-m-icon"
           >
             <span
-              class="pf-v5-c-text-input-group__icon"
+              class="pf-v5-c-text-input-group__text"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 512 512"
+              <span
+                class="pf-v5-c-text-input-group__icon"
               >
-                <path
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 512 512"
+                >
+                  <path
+                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  />
+                </svg>
+              </span>
+              <input
+                aria-label="Search input"
+                class="pf-v5-c-text-input-group__text-input"
+                type="text"
+                value="username:player firstname:john"
+              />
+            </span>
+          </div>
+          <div
+            class="pf-v5-c-text-input-group__utilities"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Reset"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-11"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 352 512"
+              >
+                <path
+                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
+      >
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-label="Open advanced search"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-5"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 320 512"
+          >
+            <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>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-input-group__item pf-m-plain"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Search"
+          class="pf-v5-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-7"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SearchInput search input with hint 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-input-group"
+  >
+    <div
+      class="pf-v5-c-input-group__item pf-m-fill"
+    >
+      <div
+        class="pf-v5-c-text-input-group"
+      >
+        <div
+          class="pf-v5-c-text-input-group__main pf-m-icon"
+        >
+          <span
+            class="pf-v5-c-text-input-group__text"
+          >
+            <input
+              aria-hidden="true"
+              class="pf-v5-c-text-input-group__text-input pf-m-hint"
+              disabled=""
+              type="text"
+              value="test hint"
+            />
+            <span
+              class="pf-v5-c-text-input-group__icon"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 512 512"
+              >
+                <path
                   d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
                 />
               </svg>
             </span>
             <input
-              aria-label="Search input"
+              aria-label="simple text input"
               class="pf-v5-c-text-input-group__text-input"
               type="text"
-              value="username:player firstname:john"
+              value="test input"
             />
           </span>
         </div>
         <div
           class="pf-v5-c-text-input-group__utilities"
         >
+          <div
+            class="pf-v5-c-text-input-group__group"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Previous"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-4"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 320 512"
+              >
+                <path
+                  d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-disabled="false"
+              aria-label="Next"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-5"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 320 512"
+              >
+                <path
+                  d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                />
+              </svg>
+            </button>
+          </div>
           <button
             aria-disabled="false"
             aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-11"
+            data-ouia-component-id="OUIA-Generated-Button-plain-6"
             data-ouia-component-type="PF4/Button"
             data-ouia-safe="true"
             type="button"
@@ -484,33 +696,15 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           </button>
         </div>
       </div>
-      <button
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-label="Open advanced search"
-        class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-5"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 320 512"
-        >
-          <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>
-      </button>
+    </div>
+    <div
+      class="pf-v5-c-input-group__item pf-m-plain"
+    >
       <button
         aria-disabled="false"
         aria-label="Search"
         class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-7"
+        data-ouia-component-id="OUIA-Generated-Button-control-2"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
         type="submit"
@@ -532,82 +726,100 @@ exports[`SearchInput renders search input in strict mode 1`] = `
 </DocumentFragment>
 `;
 
-exports[`SearchInput search input with hint 1`] = `
+exports[`SearchInput simple search input 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-input-group"
   >
     <div
-      class="pf-v5-c-text-input-group"
+      class="pf-v5-c-input-group__item pf-m-fill"
     >
       <div
-        class="pf-v5-c-text-input-group__main pf-m-icon"
+        class="pf-v5-c-text-input-group"
       >
-        <span
-          class="pf-v5-c-text-input-group__text"
+        <div
+          class="pf-v5-c-text-input-group__main pf-m-icon"
         >
-          <input
-            aria-hidden="true"
-            class="pf-v5-c-text-input-group__text-input pf-m-hint"
-            disabled=""
-            type="text"
-            value="test hint"
-          />
           <span
-            class="pf-v5-c-text-input-group__icon"
+            class="pf-v5-c-text-input-group__text"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 512 512"
+            <span
+              class="pf-v5-c-text-input-group__icon"
             >
-              <path
-                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                />
+              </svg>
+            </span>
+            <input
+              aria-label="simple text input"
+              class="pf-v5-c-text-input-group__text-input"
+              type="text"
+              value="test input"
+            />
           </span>
-          <input
-            aria-label="simple text input"
-            class="pf-v5-c-text-input-group__text-input"
-            type="text"
-            value="test input"
-          />
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-text-input-group__utilities"
-      >
+        </div>
         <div
-          class="pf-v5-c-text-input-group__group"
+          class="pf-v5-c-text-input-group__utilities"
         >
-          <button
-            aria-disabled="false"
-            aria-label="Previous"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-4"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
+          <div
+            class="pf-v5-c-text-input-group__group"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 320 512"
+            <button
+              aria-disabled="false"
+              aria-label="Previous"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-              />
-            </svg>
-          </button>
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 320 512"
+              >
+                <path
+                  d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-disabled="false"
+              aria-label="Next"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-2"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                role="img"
+                viewBox="0 0 320 512"
+              >
+                <path
+                  d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                />
+              </svg>
+            </button>
+          </div>
           <button
             aria-disabled="false"
-            aria-label="Next"
+            aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-5"
+            data-ouia-component-id="OUIA-Generated-Button-plain-3"
             data-ouia-component-type="PF4/Button"
             data-ouia-safe="true"
             type="button"
@@ -617,192 +829,41 @@ exports[`SearchInput search input with hint 1`] = `
               class="pf-v5-svg"
               fill="currentColor"
               role="img"
-              viewBox="0 0 320 512"
+              viewBox="0 0 352 512"
             >
               <path
-                d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
               />
             </svg>
           </button>
         </div>
-        <button
-          aria-disabled="false"
-          aria-label="Reset"
-          class="pf-v5-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-6"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 352 512"
-          >
-            <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-            />
-          </svg>
-        </button>
       </div>
     </div>
-    <button
-      aria-disabled="false"
-      aria-label="Search"
-      class="pf-v5-c-button pf-m-control"
-      data-ouia-component-id="OUIA-Generated-Button-control-2"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      type="submit"
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        role="img"
-        viewBox="0 0 448 512"
-      >
-        <path
-          d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-        />
-      </svg>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`SearchInput simple search input 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-input-group"
-  >
     <div
-      class="pf-v5-c-text-input-group"
+      class="pf-v5-c-input-group__item pf-m-plain"
     >
-      <div
-        class="pf-v5-c-text-input-group__main pf-m-icon"
+      <button
+        aria-disabled="false"
+        aria-label="Search"
+        class="pf-v5-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="submit"
       >
-        <span
-          class="pf-v5-c-text-input-group__text"
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 448 512"
         >
-          <span
-            class="pf-v5-c-text-input-group__icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 512 512"
-            >
-              <path
-                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-              />
-            </svg>
-          </span>
-          <input
-            aria-label="simple text input"
-            class="pf-v5-c-text-input-group__text-input"
-            type="text"
-            value="test input"
+          <path
+            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
           />
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-text-input-group__utilities"
-      >
-        <div
-          class="pf-v5-c-text-input-group__group"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Previous"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 320 512"
-            >
-              <path
-                d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-              />
-            </svg>
-          </button>
-          <button
-            aria-disabled="false"
-            aria-label="Next"
-            class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-2"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              role="img"
-              viewBox="0 0 320 512"
-            >
-              <path
-                d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-              />
-            </svg>
-          </button>
-        </div>
-        <button
-          aria-disabled="false"
-          aria-label="Reset"
-          class="pf-v5-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-3"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 352 512"
-          >
-            <path
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-            />
-          </svg>
-        </button>
-      </div>
+        </svg>
+      </button>
     </div>
-    <button
-      aria-disabled="false"
-      aria-label="Search"
-      class="pf-v5-c-button pf-m-control"
-      data-ouia-component-id="OUIA-Generated-Button-control-1"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      type="submit"
-    >
-      <svg
-        aria-hidden="true"
-        class="pf-v5-svg"
-        fill="currentColor"
-        role="img"
-        viewBox="0 0 448 512"
-      >
-        <path
-          d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-        />
-      </svg>
-    </button>
   </div>
 </DocumentFragment>
 `;