feat: add itemData to onSelect and onClick callback (#864)

* feat: add info.item to onSelect and onClick callback

- Add info.item to MenuInfo interface to expose menu item config (label, icon, disabled, extra, etc.)
- Support both items config and children mode
- Add unit tests for info.item in onSelect and onClick
- Update README documentation

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* feat: update MenuItem type to MenuItemInfo for onSelect and onClick callbacks

* Update src/utils/nodeUtil.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* feat: update MenuItemInfo type and refactor info item handling in nodeUtil

* fix: update key in info.item to use mergedKey in convertItemsToNodes

* feat: update event payload to use itemData instead of info.item in MenuItem

* feat: update MenuItem test to include itemData handling in onSelect and onClick

* chore: trigger CI re-run

---------

Co-authored-by: 刘欢 <lh01217311@antgroup.com>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: 4 people

README.md

@@ -135,13 +135,13 @@ ReactDOM.render(
         </tr>
         <tr>
             <td>onSelect</td>
-            <td>function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]})</td>
+            <td>function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[],ItemData:ItemData})</td>
             <th></th>
             <td>called when select a menu item</td>
         </tr>
         <tr>
             <td>onClick</td>
-            <td>function({key:String, item:ReactComponent, domEvent:Event, keyPath: String[]})</td>
+            <td>function({key:String, item:ReactComponent, domEvent:Event, keyPath: String[], ItemData:ItemData})</td>
             <th></th>
             <td>called when click a menu item</td>
         </tr>

src/MenuItem.tsx

@@ -9,7 +9,7 @@ import PrivateContext from './context/PrivateContext';
 import useActive from './hooks/useActive';
 import useDirectionStyle from './hooks/useDirectionStyle';
 import Icon from './Icon';
-import type { MenuInfo, MenuItemType } from './interface';
+import type { MenuInfo, ItemData, MenuItemType } from './interface';
 import { warnItemProp } from './utils/warnUtil';
 
 export interface MenuItemProps
@@ -29,6 +29,9 @@ export interface MenuItemProps
 
   /** @deprecated No place to use this. Should remove */
   attribute?: Record<string, string>;
+
+  /** @private Origin item config from items prop */
+  itemData?: ItemData;
 }
 
 // Since Menu event provide the `info.item` which point to the MenuItem node instance.
@@ -74,6 +77,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
     disabled,
     itemIcon,
     children,
+    itemData: propsItemData,
 
     // Aria
     role,
@@ -130,12 +134,21 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
   const getEventInfo = (
     e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
   ): MenuInfo => {
+    // If propsInfo exists (items mode), use it; otherwise build from props (children mode)
+    const itemData: ItemData = propsItemData || {
+      key: eventKey || '',
+      label: children,
+      itemIcon,
+      extra: props.extra,
+    };
+
     return {
       key: eventKey,
       // Note: For legacy code is reversed which not like other antd component
       keyPath: [...connectedKeys].reverse(),
       item: legacyMenuItemRef.current,
       domEvent: e,
+      itemData: propsItemData || itemData,
     };
   };
 

src/interface.ts

@@ -63,6 +63,14 @@ export interface MenuItemType extends ItemSharedProps {
   onClick?: MenuClickEventHandler;
 }
 
+/** Info item type passed to onSelect/onClick callbacks, excluding event handlers */
+export type ItemData = {
+  label?: React.ReactNode;
+  itemIcon?: RenderIconType;
+  extra?: React.ReactNode;
+  key: React.Key;
+};
+
 export interface MenuItemGroupType extends ItemSharedProps {
   type: 'group';
 
@@ -99,6 +107,7 @@ export interface MenuInfo {
   /** @deprecated This will not support in future. You should avoid to use this */
   item: React.ReactInstance;
   domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+  itemData: ItemData;
 }
 
 export interface MenuTitleInfo {

src/utils/nodeUtil.tsx

@@ -51,7 +51,12 @@ function convertItemsToNodes(
         const hasExtra = !!extra || extra === 0;
 
         return (
-          <MergedMenuItem key={mergedKey} {...restProps} extra={extra}>
+          <MergedMenuItem
+            key={mergedKey}
+            {...restProps}
+            extra={extra}
+            itemData={{ label, key: mergedKey, itemIcon: restProps?.itemIcon, extra }}
+          >
             {hasExtra ? (
               <>
                 <span className={`${prefixCls}-item-label`}>{label}</span>

tests/MenuItem.spec.tsx

@@ -150,6 +150,87 @@ describe('MenuItem', () => {
     });
   });
 
+  describe('itemData in event', () => {
+    it('should pass itemData in onSelect and onClick with children', () => {
+      const onSelect = jest.fn();
+      const onClick = jest.fn();
+      const { container } = render(
+        <Menu onSelect={onSelect} onClick={onClick} selectable>
+          <MenuItem key="1">Menu Item</MenuItem>
+        </Menu>,
+      );
+
+      fireEvent.click(container.querySelector('.rc-menu-item')!);
+      expect(onSelect).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: '1',
+          itemData: expect.objectContaining({
+            key: '1',
+            label: 'Menu Item',
+          }),
+        }),
+      );
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: '1',
+          itemData: expect.objectContaining({
+            key: '1',
+            label: 'Menu Item',
+          }),
+        }),
+      );
+    });
+
+    it('should only pass defined itemData properties in onSelect and onClick', () => {
+      const onSelect = jest.fn();
+      const onClick = jest.fn();
+      const { container } = render(
+        <Menu
+          onSelect={onSelect}
+          onClick={onClick}
+          selectable
+          items={[{ key: '1', label: 'Menu Item', foo: '123' }] as any}
+        />,
+      );
+
+      fireEvent.click(container.querySelector('.rc-menu-item')!);
+      expect(onSelect).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: '1',
+          itemData: expect.objectContaining({
+            key: '1',
+            label: 'Menu Item',
+          }),
+        }),
+      );
+      expect(onSelect).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: '1',
+          itemData: expect.not.objectContaining({
+            foo: '123',
+          }),
+        }),
+      );
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: '1',
+          itemData: expect.objectContaining({
+            key: '1',
+            label: 'Menu Item',
+          }),
+        }),
+      );
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: '1',
+          itemData: expect.not.objectContaining({
+            foo: '123',
+          }),
+        }),
+      );
+    });
+  });
+
   describe('overwrite default role', () => {
     it('should set role to none if null', () => {
       const { container } = render(