@patternfly/react-core 6.5.0-prerelease.63 → 6.5.0-prerelease.65

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.62","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.64","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.62","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.64","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.62","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.64","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.63",
+  "version": "6.5.0-prerelease.65",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,7 +46,7 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.28",
+    "@patternfly/react-icons": "^6.5.0-prerelease.29",
     "@patternfly/react-styles": "^6.5.0-prerelease.21",
     "@patternfly/react-tokens": "^6.5.0-prerelease.20",
     "focus-trap": "7.6.6",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "b1d4b8d38afd6c84f6d381b610b4af13586dacfe"
+  "gitHead": "ed21bd64eebc14e1c55ee4c171bdc0a5e56f914c"
 }

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

@@ -188,7 +188,7 @@ exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
         width="1em"
       >
         <path
-          d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
+          d="M26.463 16.845a9.635 9.635 0 0 0-.002-1.688l3.41-1.974a.5.5 0 0 0 .235-.548 14.47 14.47 0 0 0-4.142-7.167.5.5 0 0 0-.594-.07l-3.404 1.97c-.469-.326-.96-.61-1.466-.85V2.58a.5.5 0 0 0-.356-.48 14.662 14.662 0 0 0-8.288 0 .5.5 0 0 0-.356.48v3.944c-.513.245-1.003.528-1.462.846L6.63 5.397a.5.5 0 0 0-.594.07 14.47 14.47 0 0 0-4.142 7.168.5.5 0 0 0 .236.548l3.407 1.972a9.635 9.635 0 0 0 .002 1.688l-3.41 1.974a.5.5 0 0 0-.235.548 14.47 14.47 0 0 0 4.142 7.167c.16.154.405.18.594.07l3.404-1.97c.469.326.96.61 1.466.85v3.938a.5.5 0 0 0 .356.48c1.333.398 2.728.6 4.144.6s2.81-.202 4.144-.6a.5.5 0 0 0 .356-.48v-3.944a10.449 10.449 0 0 0 1.462-.846l3.408 1.973a.5.5 0 0 0 .594-.07 14.47 14.47 0 0 0 4.142-7.168.5.5 0 0 0-.236-.548l-3.407-1.972ZM16 21c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5Z"
         />
       </svg>
     </span>

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -40,8 +40,8 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
   const [menuItems, setMenuItems] = useState<React.ReactElement<any>[]>([]);
 
   /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */
-  const menuRef = useRef<HTMLDivElement>(undefined);
-  const textInputGroupRef = useRef<HTMLDivElement>(undefined);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const textInputGroupRef = useRef<HTMLDivElement>(null);
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
@@ -107,7 +107,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
     const divider = <Divider key="divider" />;
 
     setMenuItems([headingItem, divider, ...filteredMenuItems]);
-  }, [inputValue]);
+  }, [inputValue, menuItemsText, selectedKey]);
 
   /** add selected key/value pair as a chip in the chip group */
   const selectValue = (selectedValue: string) => {
@@ -117,22 +117,30 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
 
   /** update the input to show the selected key and the menu to show the values associated with that specific key */
   const selectKey = (selectedText: string) => {
+    const values = data[selectedText];
+
+    if (!values) {
+      return;
+    }
+
     setInputValue(`${selectedText}: `);
     setSelectedKey(selectedText);
-    setMenuItemsText(data[selectedText]);
+    setMenuItemsText(values);
   };
 
   const handleEnter = () => {
-    /** do nothing if the menu contains no real results */
-    if (menuItems.length === 1) {
+    /** bail if heading + divider + first option are not all present */
+    const firstResult = menuItems[2]?.props?.children;
+
+    if (!firstResult) {
       return;
     }
 
     /** perform the appropriate action based on key selection state */
     if (selectedKey.length) {
-      selectValue(menuItems[2].props.children);
+      selectValue(firstResult);
     } else {
-      selectKey(menuItems[2].props.children);
+      selectKey(firstResult);
     }
   };
 
@@ -144,7 +152,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
   };
 
   /** allow the user to select a key by simply typing it and entering a colon, exact (case sensitive) matches only */
-  const handleColon = () => {
+  const handleColon = (event: React.KeyboardEvent) => {
     if (!selectedKey.length && keyNames.includes(inputValue)) {
       selectKey(inputValue);
       event.preventDefault();
@@ -172,7 +180,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
         handleBackspace();
         break;
       case ':':
-        handleColon();
+        handleColon(event);
         break;
       case 'ArrowUp':
       case 'ArrowDown':
@@ -182,24 +190,24 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
   };
 
   /** perform the proper key or value selection when a menu item is selected */
-  const onSelect = (event: React.MouseEvent<Element, MouseEvent>, _itemId: string | number) => {
-    const selectedText = (event.target as HTMLElement).innerText;
+  const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined, _itemId: string | number) => {
+    const selectedText = (event?.target as HTMLElement | undefined)?.innerText.trim() || '';
 
     if (selectedKey.length) {
       selectValue(selectedText);
     } else {
       selectKey(selectedText);
     }
-    event.stopPropagation();
-    textInputGroupRef.current.querySelector('input').focus();
+    event?.stopPropagation();
+    textInputGroupRef.current?.querySelector('input')?.focus();
   };
 
   /** close the menu when a click occurs outside of the menu or text input group */
-  const handleClick = (event: MouseEvent) => {
+  const handleClick = (event: MouseEvent | undefined) => {
     if (
       menuRef.current &&
-      !menuRef.current.contains(event.target as HTMLElement) &&
-      !textInputGroupRef.current.contains(event.target as HTMLElement)
+      !menuRef.current.contains(event?.target as HTMLElement) &&
+      !textInputGroupRef.current?.contains(event?.target as HTMLElement)
     ) {
       setMenuIsOpen(false);
     }