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>

Author: 刘欢

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[], info:{item:MenuItemType}})</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[], info:{item:MenuItemType}})</td>
             <th></th>
             <td>called when click a menu item</td>
         </tr>

src/MenuItem.tsx

@@ -32,6 +32,9 @@ export interface MenuItemProps
 
   /** @deprecated No place to use this. Should remove */
   attribute?: Record<string, string>;
+
+  /** @private Origin item config from items prop */
+  info?: { item: MenuItemType };
 }
 
 // Since Menu event provide the `info.item` which point to the MenuItem node instance.
@@ -77,6 +80,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
     disabled,
     itemIcon,
     children,
+    info: propsInfo,
 
     // Aria
     role,
@@ -133,12 +137,22 @@ 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 infoItem: MenuItemType = propsInfo?.item || {
+      key: eventKey || '',
+      label: children,
+      disabled,
+      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,
+      info: propsInfo || { item: infoItem },
     };
   };
 

src/interface.ts

@@ -99,6 +99,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>;
+  info: { item: MenuItemType };
 }
 
 export interface MenuTitleInfo {

src/utils/nodeUtil.tsx

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

tests/MenuItem.spec.tsx

@@ -150,6 +150,79 @@ describe('MenuItem', () => {
     });
   });
 
+  describe('info.item in event', () => {
+    it('should pass info.item 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',
+          info: expect.objectContaining({
+            item: expect.objectContaining({
+              key: '1',
+              label: 'Menu Item',
+            }),
+          }),
+        }),
+      );
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: '1',
+          info: expect.objectContaining({
+            item: expect.objectContaining({
+              key: '1',
+              label: 'Menu Item',
+            }),
+          }),
+        }),
+      );
+    });
+
+    it('should pass info.item in onSelect and onClick with items', () => {
+      const onSelect = jest.fn();
+      const onClick = jest.fn();
+      const { container } = render(
+        <Menu
+          onSelect={onSelect}
+          onClick={onClick}
+          selectable
+          items={[{ key: '1', label: 'Menu Item' }]}
+        />,
+      );
+
+      fireEvent.click(container.querySelector('.rc-menu-item')!);
+      expect(onSelect).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: '1',
+          info: expect.objectContaining({
+            item: expect.objectContaining({
+              key: '1',
+              label: 'Menu Item',
+            }),
+          }),
+        }),
+      );
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          key: '1',
+          info: expect.objectContaining({
+            item: expect.objectContaining({
+              key: '1',
+              label: 'Menu Item',
+            }),
+          }),
+        }),
+      );
+    });
+  });
+
   describe('overwrite default role', () => {
     it('should set role to none if null', () => {
       const { container } = render(