feat: pass full opt object to itemData in convertItemsToNodes (#867)

* feat: add title property to ItemData and update itemData usage in convertItemsToNodes

* feat: update test to pass all itemData properties in onSelect and onClick when using items prop

* Update src/utils/nodeUtil.tsx

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

---------

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

Author: 3 people

src/MenuItem.tsx

@@ -140,6 +140,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
       label: children,
       itemIcon,
       extra: props.extra,
+      title: props.title,
     };
 
     return {

src/interface.ts

@@ -69,6 +69,7 @@ export type ItemData = {
   itemIcon?: RenderIconType;
   extra?: React.ReactNode;
   key: React.Key;
+  title?: string;
 };
 
 export interface MenuItemGroupType extends ItemSharedProps {

src/utils/nodeUtil.tsx

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

tests/MenuItem.spec.tsx

@@ -181,51 +181,25 @@ describe('MenuItem', () => {
       );
     });
 
-    it('should only pass defined itemData properties in onSelect and onClick', () => {
+    it('should pass all itemData properties in onSelect and onClick when using items prop', () => {
       const onSelect = jest.fn();
       const onClick = jest.fn();
+      const items = [{ key: '1', label: 'Menu Item', foo: '123', title: 'test title' }];
       const { container } = render(
-        <Menu
-          onSelect={onSelect}
-          onClick={onClick}
-          selectable
-          items={[{ key: '1', label: 'Menu Item', foo: '123' }] as any}
-        />,
+        <Menu onSelect={onSelect} onClick={onClick} selectable items={items 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',
-          }),
+          itemData: expect.objectContaining(items[0]),
         }),
       );
       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',
-          }),
+          itemData: expect.objectContaining(items[0]),
         }),
       );
     });