npm - @patternfly/react-templates - Versions diffs - 6.5.0-prerelease.8 → 6.5.0 - Mend

@patternfly/react-templates 6.5.0-prerelease.8 → 6.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap CHANGED Viewed

@@ -5,7 +5,7 @@ exports[`Dropdown items Matches snapshot 1`] = `
   <button
     aria-expanded="true"
     class="pf-v6-c-menu-toggle pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-default-23"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-default-:r4j:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -27,12 +27,24 @@ exports[`Dropdown items Matches snapshot 1`] = `
           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
+            class="pf-v6-icon-default"
+            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>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -45,7 +57,7 @@ exports[`Dropdown toggle Matches snapshot 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-default-14"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-default-:r2d:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     type="button"
@@ -67,12 +79,24 @@ exports[`Dropdown toggle Matches snapshot 1`] = `
           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
+            class="pf-v6-icon-default"
+            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>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>

package/src/components/Select/MultiTypeaheadSelect.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ import {
   TextInputGroupMain,
   TextInputGroupUtilities
 } from '@patternfly/react-core/dist/esm/components/TextInputGroup';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 export interface MultiTypeaheadSelectOption extends Omit<SelectOptionProps, 'content'> {
   /** Content of the select option. */
@@ -333,7 +333,7 @@ export const MultiTypeaheadSelectBase: FunctionComponent<MultiTypeaheadSelectPro
         </TextInputGroupMain>
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
           <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
-            <TimesIcon />
+            <RhMicronsCloseIcon />
           </Button>
         </TextInputGroupUtilities>
       </TextInputGroup>

package/src/components/Select/TypeaheadSelect.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ import {
   TextInputGroupMain,
   TextInputGroupUtilities
 } from '@patternfly/react-core/dist/esm/components/TextInputGroup';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 export interface TypeaheadSelectOption extends Omit<SelectOptionProps, 'content'> {
   /** Content of the select option. */
@@ -195,13 +195,20 @@ export const TypeaheadSelectBase: FunctionComponent<TypeaheadSelectProps> = ({
     }
   };
-  const closeMenu = () => {
+  const closeMenu = (shouldRestoreInput = true) => {
     onToggle && onToggle(false);
     setIsOpen(false);
     resetActiveAndFocusedItem();
-    const option = initialOptions.find((o) => o.value === selected);
-    if (option) {
-      setInputValue(String(option.content));
+    // Only restore input value when user cancels (doesn't select)
+    // Don't restore when explicitly selecting an option (handled by selectOption)
+    if (shouldRestoreInput) {
+      const option = initialOptions.find((o) => o.value === selected);
+      if (option) {
+        setInputValue(String(option.content));
+      }
+      // Clear filter when closing without selecting to show all options on next open
+      setFilterValue('');
     }
   };
@@ -223,7 +230,7 @@ export const TypeaheadSelectBase: FunctionComponent<TypeaheadSelectProps> = ({
     setFilterValue('');
     setSelected(String(option.value));
-    closeMenu();
+    closeMenu(false); // Don't restore - we just set the correct value above
   };
   const _onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
@@ -364,7 +371,12 @@ export const TypeaheadSelectBase: FunctionComponent<TypeaheadSelectProps> = ({
         />
         <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<RhMicronsCloseIcon />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap CHANGED Viewed

@@ -5,7 +5,7 @@ exports[`checkbox select with no props snapshot 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-:r2:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     style="width: 200px;"
@@ -28,12 +28,24 @@ exports[`checkbox select with no props snapshot 1`] = `
           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
+            class="pf-v6-icon-default"
+            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>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -46,7 +58,7 @@ exports[`opened checkbox select snapshot 1`] = `
   <button
     aria-expanded="true"
     class="pf-v6-c-menu-toggle pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-2"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-:r5:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     style="width: 200px;"
@@ -69,12 +81,24 @@ exports[`opened checkbox select snapshot 1`] = `
           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
+            class="pf-v6-icon-default"
+            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>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>

package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap CHANGED Viewed

@@ -34,7 +34,7 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
         <button
           aria-label="Clear input value"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-23"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r4u:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -48,11 +48,11 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 352 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <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"
+                d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
               />
             </svg>
           </span>
@@ -63,7 +63,7 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
       aria-expanded="true"
       aria-label="Multi select Typeahead menu toggle"
       class="pf-v6-c-menu-toggle__button"
-      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-20"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-:r4t:"
       data-ouia-component-type="PF6/MenuToggle"
       data-ouia-safe="true"
       tabindex="-1"
@@ -81,12 +81,24 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
             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
+              class="pf-v6-icon-default"
+              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>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+              />
+            </svg>
           </svg>
         </span>
       </span>

package/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap CHANGED Viewed

@@ -5,7 +5,7 @@ exports[`Matches snapshot 1`] = `
   <button
     aria-expanded="true"
     class="pf-v6-c-menu-toggle pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-13"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-:r22:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     style="width: 200px;"
@@ -28,12 +28,24 @@ exports[`Matches snapshot 1`] = `
           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
+            class="pf-v6-icon-default"
+            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>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>
@@ -46,7 +58,7 @@ exports[`checkbox select with no props snapshot 1`] = `
   <button
     aria-expanded="false"
     class="pf-v6-c-menu-toggle"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-12"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-:r1v:"
     data-ouia-component-type="PF6/MenuToggle"
     data-ouia-safe="true"
     style="width: 200px;"
@@ -69,12 +81,24 @@ exports[`checkbox select with no props snapshot 1`] = `
           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
+            class="pf-v6-icon-default"
+            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>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </span>

package/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap CHANGED Viewed

@@ -34,7 +34,7 @@ exports[`Matches snapshot 1`] = `
         <button
           aria-label="Clear input value"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-18"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r4i:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -48,11 +48,11 @@ exports[`Matches snapshot 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 352 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <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"
+                d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
               />
             </svg>
           </span>
@@ -63,7 +63,7 @@ exports[`Matches snapshot 1`] = `
       aria-expanded="true"
       aria-label="Typeahead menu toggle"
       class="pf-v6-c-menu-toggle__button"
-      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-18"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-:r4h:"
       data-ouia-component-type="PF6/MenuToggle"
       data-ouia-safe="true"
       tabindex="-1"
@@ -81,12 +81,24 @@ exports[`Matches snapshot 1`] = `
             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
+              class="pf-v6-icon-default"
+              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>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+              />
+            </svg>
           </svg>
         </span>
       </span>