@zendeskgarden/container-menu - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

dist/index.cjs.js

@@ -229,2 +229,3 @@ /**
   const [menuVisible, setMenuVisible] = React.useState(false);
+  const focusTriggerRef = React.useRef(false);
   const [state, dispatch] = React.useReducer(stateReducer, {
@@ -406,8 +407,8 @@ focusedValue: focusedValue || defaultFocusedValue,
       const type = StateChangeTypes[key === containerUtilities.KEYS.ESCAPE ? 'MenuKeyDownEscape' : 'MenuKeyDownTab'];
+      if (containerUtilities.KEYS.ESCAPE === key) {
+        focusTriggerRef.current = true;
+      }
       closeMenu(type);
-      if (triggerRef?.current && containerUtilities.KEYS.ESCAPE === key) {
-        triggerRef.current.focus();
-      }
     }
-  }, [closeMenu, triggerRef]);
+  }, [closeMenu, focusTriggerRef]);
   const handleMenuBlur = React.useCallback(event => {
@@ -461,2 +462,3 @@ const path = event.composedPath();
       type: changeType,
+      value: item.value,
       ...(!isTransitionItem && {
@@ -506,2 +508,3 @@ isExpanded: false
       changes = {
+        value: item.value,
         ...(!isTransitionItem && {
@@ -514,4 +517,4 @@ isExpanded: false
       };
-      if (triggerRef?.current && !isTransitionItem) {
-        triggerRef.current.focus();
+      if (!isTransitionItem) {
+        focusTriggerRef.current = true;
       }
@@ -525,2 +528,7 @@ } else if (key === containerUtilities.KEYS.RIGHT) {
       }
+      if (changeType) {
+        changes = {
+          value: item.value
+        };
+      }
     } else if (key === containerUtilities.KEYS.LEFT) {
@@ -533,2 +541,7 @@ if (rtl && isNext) {
       }
+      if (changeType) {
+        changes = {
+          value: item.value
+        };
+      }
     } else if (isVerticalArrowKeys || isJumpKey || isAlphanumericChar) {
@@ -575,3 +588,3 @@ changeType = isAlphanumericChar ? StateChangeTypes.MenuItemKeyDown : StateChangeTypes[toMenuItemKeyDownType(key)];
     }
-  }, [rtl, triggerRef, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectedItemsControlled, getNextFocusedValue, getSelectedItems, onChange]);
+  }, [rtl, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectedItemsControlled, focusTriggerRef, getNextFocusedValue, getSelectedItems, onChange]);
   const handleItemMouseEnter = React.useCallback(value => {
@@ -617,3 +630,7 @@ const changeType = StateChangeTypes.MenuItemMouseMove;
     }
-  }, [values, menuVisible, itemRefs, controlledFocusedValue, state.focusOnOpen, controlledIsExpanded]);
+    if (!menuVisible && !controlledIsExpanded && focusTriggerRef.current) {
+      triggerRef?.current?.focus();
+      focusTriggerRef.current = false;
+    }
+  }, [focusTriggerRef, values, menuVisible, itemRefs, controlledFocusedValue, state.focusOnOpen, controlledIsExpanded, triggerRef]);
   React.useEffect(() => {
@@ -660,3 +677,3 @@ const valuesChanged = JSON.stringify(values) !== JSON.stringify(state.valuesRef);
       'data-garden-container-id': 'containers.menu.trigger',
-      'data-garden-container-version': '0.2.2',
+      'data-garden-container-version': '0.3.0',
       ref: triggerRef,
@@ -686,3 +703,3 @@ id: triggerId,
       'data-garden-container-id': 'containers.menu',
-      'data-garden-container-version': '0.2.2',
+      'data-garden-container-version': '0.3.0',
       'aria-labelledby': triggerId,
@@ -702,3 +719,3 @@ tabIndex: -1,
       'data-garden-container-id': 'containers.menu.separator',
-      'data-garden-container-version': '0.2.2',
+      'data-garden-container-version': '0.3.0',
       role: role === null ? undefined : role
@@ -715,3 +732,3 @@ };
       'data-garden-container-id': 'containers.menu.item_group',
-      'data-garden-container-version': '0.2.2',
+      'data-garden-container-version': '0.3.0',
       role: role === null ? undefined : role
@@ -747,3 +764,3 @@ };
       'data-garden-container-id': 'containers.menu.item',
-      'data-garden-container-version': '0.2.2',
+      'data-garden-container-version': '0.3.0',
       'aria-selected': undefined,
@@ -750,0 +767,0 @@ 'aria-checked': selected,

dist/index.esm.js

@@ -8,3 +8,3 @@ /**
 
-import React, { useMemo, createRef, useState, useReducer, useCallback, useEffect } from 'react';
+import React, { useMemo, createRef, useState, useRef, useReducer, useCallback, useEffect } from 'react';
 import { useSelection } from '@zendeskgarden/container-selection';
@@ -228,2 +228,3 @@ import { KEYS, useId, getControlledValue, composeEventHandlers } from '@zendeskgarden/container-utilities';
   const [menuVisible, setMenuVisible] = useState(false);
+  const focusTriggerRef = useRef(false);
   const [state, dispatch] = useReducer(stateReducer, {
@@ -405,8 +406,8 @@ focusedValue: focusedValue || defaultFocusedValue,
       const type = StateChangeTypes[key === KEYS.ESCAPE ? 'MenuKeyDownEscape' : 'MenuKeyDownTab'];
+      if (KEYS.ESCAPE === key) {
+        focusTriggerRef.current = true;
+      }
       closeMenu(type);
-      if (triggerRef?.current && KEYS.ESCAPE === key) {
-        triggerRef.current.focus();
-      }
     }
-  }, [closeMenu, triggerRef]);
+  }, [closeMenu, focusTriggerRef]);
   const handleMenuBlur = useCallback(event => {
@@ -460,2 +461,3 @@ const path = event.composedPath();
       type: changeType,
+      value: item.value,
       ...(!isTransitionItem && {
@@ -505,2 +507,3 @@ isExpanded: false
       changes = {
+        value: item.value,
         ...(!isTransitionItem && {
@@ -513,4 +516,4 @@ isExpanded: false
       };
-      if (triggerRef?.current && !isTransitionItem) {
-        triggerRef.current.focus();
+      if (!isTransitionItem) {
+        focusTriggerRef.current = true;
       }
@@ -524,2 +527,7 @@ } else if (key === KEYS.RIGHT) {
       }
+      if (changeType) {
+        changes = {
+          value: item.value
+        };
+      }
     } else if (key === KEYS.LEFT) {
@@ -532,2 +540,7 @@ if (rtl && isNext) {
       }
+      if (changeType) {
+        changes = {
+          value: item.value
+        };
+      }
     } else if (isVerticalArrowKeys || isJumpKey || isAlphanumericChar) {
@@ -574,3 +587,3 @@ changeType = isAlphanumericChar ? StateChangeTypes.MenuItemKeyDown : StateChangeTypes[toMenuItemKeyDownType(key)];
     }
-  }, [rtl, triggerRef, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectedItemsControlled, getNextFocusedValue, getSelectedItems, onChange]);
+  }, [rtl, state.nestedPathIds, isExpandedControlled, isFocusedValueControlled, isSelectedItemsControlled, focusTriggerRef, getNextFocusedValue, getSelectedItems, onChange]);
   const handleItemMouseEnter = useCallback(value => {
@@ -616,3 +629,7 @@ const changeType = StateChangeTypes.MenuItemMouseMove;
     }
-  }, [values, menuVisible, itemRefs, controlledFocusedValue, state.focusOnOpen, controlledIsExpanded]);
+    if (!menuVisible && !controlledIsExpanded && focusTriggerRef.current) {
+      triggerRef?.current?.focus();
+      focusTriggerRef.current = false;
+    }
+  }, [focusTriggerRef, values, menuVisible, itemRefs, controlledFocusedValue, state.focusOnOpen, controlledIsExpanded, triggerRef]);
   useEffect(() => {
@@ -659,3 +676,3 @@ const valuesChanged = JSON.stringify(values) !== JSON.stringify(state.valuesRef);
       'data-garden-container-id': 'containers.menu.trigger',
-      'data-garden-container-version': '0.2.2',
+      'data-garden-container-version': '0.3.0',
       ref: triggerRef,
@@ -685,3 +702,3 @@ id: triggerId,
       'data-garden-container-id': 'containers.menu',
-      'data-garden-container-version': '0.2.2',
+      'data-garden-container-version': '0.3.0',
       'aria-labelledby': triggerId,
@@ -701,3 +718,3 @@ tabIndex: -1,
       'data-garden-container-id': 'containers.menu.separator',
-      'data-garden-container-version': '0.2.2',
+      'data-garden-container-version': '0.3.0',
       role: role === null ? undefined : role
@@ -714,3 +731,3 @@ };
       'data-garden-container-id': 'containers.menu.item_group',
-      'data-garden-container-version': '0.2.2',
+      'data-garden-container-version': '0.3.0',
       role: role === null ? undefined : role
@@ -746,3 +763,3 @@ };
       'data-garden-container-id': 'containers.menu.item',
-      'data-garden-container-version': '0.2.2',
+      'data-garden-container-version': '0.3.0',
       'aria-selected': undefined,
@@ -749,0 +766,0 @@ 'aria-checked': selected,

dist/typings/types.d.ts

@@ -66,11 +66,13 @@ /**
      * @param {string} changes.type The event type that triggered the change
+     * @param {string} [changes.value] The item value
      * @param {boolean} [changes.isExpanded] The updated menu expansion
-     * @param {ISelectedItem[]} [changes.selectedItems] The updated selection values
      * @param {string | null} [changes.focusedValue] The updated focused value
+     * @param {ISelectedItem[]} [changes.selectedItems] The updated selected items
      */
     onChange?: (changes: {
         type: string;
+        value?: string;
         isExpanded?: boolean;
+        focusedValue?: string | null;
         selectedItems?: ISelectedItem[];
-        focusedValue?: string | null;
     }) => void;
@@ -77,0 +79,0 @@ /** Sets the environment where the menu is rendered */

package.json

 {
   "name": "@zendeskgarden/container-menu",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Containers relating to Menu in the Garden Design System",
@@ -46,3 +46,3 @@ "license": "Apache-2.0",
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d21ab9c9c91476404cf8f8a4773310bfc318f0ff"
+  "gitHead": "987907c6b11d23f3d99dae66573f9ca132aad75b"
 }

No alert changes

Improved metrics

Total package byte prevSize

74044

increased by1.31%

Lines of code

1821

increased by2.02%

No dependency changes