feat(menu): passes clicked item's value to onChange (#604)

zendeskgarden · Oct 5, 2023 · ccb8729 · ccb8729
1 parent 207880d
commit ccb8729
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 8 deletions.
diff --git a/packages/menu/.size-snapshot.json b/packages/menu/.size-snapshot.json
@@ -1,13 +1,13 @@
 {
   "index.cjs.js": {
-    "bundled": 26382,
-    "minified": 13587,
-    "gzipped": 3731
+    "bundled": 26616,
+    "minified": 13661,
+    "gzipped": 3743
   },
   "index.esm.js": {
-    "bundled": 25440,
-    "minified": 12644,
-    "gzipped": 3713,
+    "bundled": 25674,
+    "minified": 12718,
+    "gzipped": 3725,
     "treeshaked": {
       "rollup": {
         "code": 386,

diff --git a/packages/menu/src/MenuContainer.spec.tsx b/packages/menu/src/MenuContainer.spec.tsx
@@ -892,6 +892,37 @@ describe('MenuContainer', () => {
         expect(changeTypes).toContain(StateChangeTypes.TriggerClick);
       });
 
+      it('calls onChange with selected value on item mouse click', async () => {
+        const { getByText } = render(
+          <TestMenu items={ITEMS} onChange={onChange} isExpanded focusedValue="plant-01" />
+        );
+
+        const item = getByText('Kale');
+
+        await act(() => user.click(item));
+
+        const values = onChange.mock.calls.map(([change]) => change.value);
+
+        expect(values).toContain('vegetable-04');
+      });
+
+      it('calls onChange with selected value on item keyboard selection', async () => {
+        const { getByTestId } = render(
+          <TestMenu items={ITEMS} onChange={onChange} focusedValue="plant-01" />
+        );
+
+        const trigger = getByTestId('trigger');
+
+        trigger.focus();
+
+        await act(() => user.keyboard('{ArrowDown}'));
+        await act(() => user.keyboard('{Enter}'));
+
+        const values = onChange.mock.calls.map(([change]) => change.value);
+
+        expect(values).toContain('plant-01');
+      });
+
       it.each([
         ['Space', ' ', StateChangeTypes.TriggerKeyDownSpace],
         ['Enter', '{Enter}', StateChangeTypes.TriggerKeyDownEnter],

diff --git a/packages/menu/src/types.ts b/packages/menu/src/types.ts
@@ -70,15 +70,17 @@ export interface IUseMenuProps<T = HTMLButtonElement, M = HTMLElement> {
    * Handles menu state changes
    *
    * @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;
-    selectedItems?: ISelectedItem[];
     focusedValue?: string | null;
+    selectedItems?: ISelectedItem[];
   }) => void;
   /** Sets the environment where the menu is rendered */
   environment?: Window;

diff --git a/packages/menu/src/useMenu.ts b/packages/menu/src/useMenu.ts
@@ -372,6 +372,7 @@ export const useMenu = <T extends HTMLElement = HTMLElement, M extends HTMLEleme
 
       onChange({
         type: changeType,
+        value: item.value,
         ...(!isTransitionItem && { isExpanded: false }),
         ...(nextSelection && { selectedItems: nextSelection })
       });
@@ -417,6 +418,7 @@ export const useMenu = <T extends HTMLElement = HTMLElement, M extends HTMLEleme
         };
 
         changes = {
+          value: item.value,
           ...(!isTransitionItem && { isExpanded: false }),
           ...(nextSelection && { selectedItems: nextSelection })
         };
@@ -432,6 +434,10 @@ export const useMenu = <T extends HTMLElement = HTMLElement, M extends HTMLEleme
         if (!rtl && isNext) {
           changeType = StateChangeTypes.MenuItemKeyDownNext;
         }
+
+        if (changeType) {
+          changes = { value: item.value };
+        }
       } else if (key === KEYS.LEFT) {
         if (rtl && isNext) {
           changeType = StateChangeTypes.MenuItemKeyDownNext;
@@ -440,6 +446,10 @@ export const useMenu = <T extends HTMLElement = HTMLElement, M extends HTMLEleme
         if (!rtl && isPrevious) {
           changeType = StateChangeTypes.MenuItemKeyDownPrevious;
         }
+
+        if (changeType) {
+          changes = { value: item.value };
+        }
       } else if (isVerticalArrowKeys || isJumpKey || isAlphanumericChar) {
         changeType = isAlphanumericChar
           ? StateChangeTypes.MenuItemKeyDown