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

Author: 刘欢

README.md

@@ -135,13 +135,13 @@ ReactDOM.render(
         </tr>
         <tr>
             <td>onSelect</td>
-            <td>function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[], info:{item:MenuItemInfo}})</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[], info:{item:MenuItemInfo}})</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

@@ -12,7 +12,7 @@ import PrivateContext from './context/PrivateContext';
 import useActive from './hooks/useActive';
 import useDirectionStyle from './hooks/useDirectionStyle';
 import Icon from './Icon';
-import type { MenuInfo, MenuItemInfo, MenuItemType } from './interface';
+import type { MenuInfo, ItemData, MenuItemType } from './interface';
 import { warnItemProp } from './utils/warnUtil';
 
 export interface MenuItemProps
@@ -34,7 +34,7 @@ export interface MenuItemProps
   attribute?: Record<string, string>;
 
   /** @private Origin item config from items prop */
-  info?: { item: MenuItemInfo };
+  itemData?: ItemData;
 }
 
 // Since Menu event provide the `info.item` which point to the MenuItem node instance.
@@ -80,7 +80,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
     disabled,
     itemIcon,
     children,
-    info: propsInfo,
+    itemData: propsItemData,
 
     // Aria
     role,
@@ -138,7 +138,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
     e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
   ): MenuInfo => {
     // If propsInfo exists (items mode), use it; otherwise build from props (children mode)
-    const infoItem: MenuItemInfo = propsInfo?.item || {
+    const itemData: ItemData = propsItemData || {
       key: eventKey || '',
       label: children,
       itemIcon,
@@ -151,7 +151,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
       keyPath: [...connectedKeys].reverse(),
       item: legacyMenuItemRef.current,
       domEvent: e,
-      info: propsInfo || { item: infoItem },
+      itemData: propsItemData || itemData,
     };
   };
 

src/interface.ts

@@ -64,7 +64,7 @@ export interface MenuItemType extends ItemSharedProps {
 }
 
 /** Info item type passed to onSelect/onClick callbacks, excluding event handlers */
-export type MenuItemInfo = {
+export type ItemData = {
   label?: React.ReactNode;
   itemIcon?: RenderIconType;
   extra?: React.ReactNode;
@@ -107,7 +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>;
-  info: { item: MenuItemInfo };
+  itemData: ItemData;
 }
 
 export interface MenuTitleInfo {

src/utils/nodeUtil.tsx

@@ -55,7 +55,7 @@ function convertItemsToNodes(
             key={mergedKey}
             {...restProps}
             extra={extra}
-            info={{ item: { label, key: mergedKey, itemIcon: restProps?.itemIcon, extra } }}
+            itemData={{ label, key: mergedKey, itemIcon: restProps?.itemIcon, extra }}
           >
             {hasExtra ? (
               <>

tests/MenuItem.spec.tsx

@@ -150,8 +150,8 @@ describe('MenuItem', () => {
     });
   });
 
-  describe('info.item in event', () => {
-    it('should pass info.item in onSelect and onClick with children', () => {
+  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(
@@ -164,28 +164,24 @@ describe('MenuItem', () => {
       expect(onSelect).toHaveBeenCalledWith(
         expect.objectContaining({
           key: '1',
-          info: expect.objectContaining({
-            item: expect.objectContaining({
-              key: '1',
-              label: 'Menu Item',
-            }),
+          itemData: 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',
-            }),
+          itemData: expect.objectContaining({
+            key: '1',
+            label: 'Menu Item',
           }),
         }),
       );
     });
 
-    it('should pass info.item in onSelect and onClick with items', () => {
+    it('should pass itemData in onSelect and onClick with items', () => {
       const onSelect = jest.fn();
       const onClick = jest.fn();
       const { container } = render(
@@ -201,22 +197,18 @@ describe('MenuItem', () => {
       expect(onSelect).toHaveBeenCalledWith(
         expect.objectContaining({
           key: '1',
-          info: expect.objectContaining({
-            item: expect.objectContaining({
-              key: '1',
-              label: 'Menu Item',
-            }),
+          itemData: 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',
-            }),
+          itemData: expect.objectContaining({
+            key: '1',
+            label: 'Menu Item',
           }),
         }),
       );