refactor: rename item.title to item.label to avoid conflict with antd (#439)

* chore: move title to label

* docs: update doc

* chore: reorder

Author: zombieJ

assets/index.less

@@ -98,7 +98,7 @@
       color: #777 !important;
     }
   }
-  & > &-item-divider {
+  &-item-divider {
     height: 1px;
     margin: 1px 0;
     overflow: hidden;

docs/demo/items.md

@@ -0,0 +1,3 @@
+## items
+
+<code src="../examples/items.tsx">

docs/demo/options.md

@@ -6,25 +6,25 @@ import '../../assets/index.less';
 
 export default () => (
   <Menu
-    options={[
+    items={[
       {
         // MenuItem
-        title: 'Top Menu Item',
+        label: 'Top Menu Item',
         key: 'top',
       },
       {
         // MenuGroup
         type: 'group',
-        title: 'Top Menu Group without children',
+        label: 'Top Menu Group without children',
       },
       {
         // MenuGroup
         type: 'group',
-        title: 'Top Menu Group with children',
+        label: 'Top Menu Group with children',
         children: [
           {
             // MenuItem
-            title: 'Menu Item 1',
+            label: 'Menu Item 1',
             key: 'inner1',
           },
           {
@@ -33,30 +33,30 @@ export default () => (
           },
           {
             // MenuItem
-            title: 'Menu Item 2',
+            label: 'Menu Item 2',
             key: 'inner2',
           },
         ],
       },
       {
         // SubMenu
-        title: 'SubMenu',
+        label: 'SubMenu',
         key: 'sub1',
         children: [
           {
             // MenuItem
-            title: 'Menu Item 1-1',
+            label: 'Menu Item 1-1',
             key: 'inner11',
           },
 
           {
             // SubMenu
-            title: 'SubMenu inner',
+            label: 'SubMenu inner',
             key: 'sub1-1',
             children: [
               {
                 // MenuItem
-                title: 'Menu Item 111',
+                label: 'Menu Item 111',
                 key: 'inner1-1-1',
               },
             ],

docs/examples/options.tsx renamed to docs/examples/items.tsx

@@ -15,7 +15,7 @@ import { useMenuId } from './context/IdContext';
 import PrivateContext from './context/PrivateContext';
 
 export interface MenuItemProps
-  extends Omit<MenuItemType, 'title' | 'key'>,
+  extends Omit<MenuItemType, 'label' | 'key'>,
     Omit<
       React.HTMLAttributes<HTMLLIElement>,
       'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'

src/MenuItem.tsx

@@ -7,7 +7,9 @@ import { useFullPath, useMeasure } from './context/PathContext';
 import type { MenuItemGroupType } from './interface';
 
 export interface MenuItemGroupProps
-  extends Omit<MenuItemGroupType, 'type' | 'children'> {
+  extends Omit<MenuItemGroupType, 'type' | 'children' | 'label'> {
+  title?: React.ReactNode;
+
   children?: React.ReactNode;
 
   /** @private Internal filled key. Do not set it directly */

src/MenuItemGroup.tsx

@@ -22,7 +22,10 @@ import {
 import { useMenuId } from '../context/IdContext';
 import PrivateContext from '../context/PrivateContext';
 
-export interface SubMenuProps extends Omit<SubMenuType, 'key' | 'children'> {
+export interface SubMenuProps
+  extends Omit<SubMenuType, 'key' | 'children' | 'label'> {
+  title?: React.ReactNode;
+
   children?: React.ReactNode;
 
   /** @private Used for rest popup. Do not use in your prod */

src/SubMenu/index.tsx

@@ -7,7 +7,7 @@ interface ItemSharedProps {
 }
 
 export interface SubMenuType extends ItemSharedProps {
-  title?: React.ReactNode;
+  label?: React.ReactNode;
 
   children: ItemType[];
 
@@ -35,7 +35,7 @@ export interface SubMenuType extends ItemSharedProps {
 }
 
 export interface MenuItemType extends ItemSharedProps {
-  title?: React.ReactNode;
+  label?: React.ReactNode;
 
   disabled?: boolean;
 
@@ -54,7 +54,7 @@ export interface MenuItemType extends ItemSharedProps {
 export interface MenuItemGroupType extends ItemSharedProps {
   type: 'group';
 
-  title?: React.ReactNode;
+  label?: React.ReactNode;
 
   children?: ItemType[];
 }

src/interface.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import toArray from 'rc-util/lib/Children/toArray';
-import type { MenuItemType, ItemType } from '../interface';
+import type { ItemType } from '../interface';
 import { Divider, MenuItem, MenuItemGroup, SubMenu } from '..';
 
 export function parseChildren(
@@ -38,23 +38,23 @@ function convertItemsToNodes(list: ItemType[]) {
   return (list || [])
     .map((opt, index) => {
       if (opt && typeof opt === 'object') {
-        const { children, key, type, ...restProps } = opt as any;
+        const { label, children, key, type, ...restProps } = opt as any;
         const mergedKey = key ?? `tmp-${index}`;
 
         // MenuItemGroup & SubMenuItem
         if (children || type === 'group') {
           if (type === 'group') {
             // Group
             return (
-              <MenuItemGroup key={mergedKey} {...restProps}>
+              <MenuItemGroup key={mergedKey} {...restProps} title={label}>
                 {convertItemsToNodes(children)}
               </MenuItemGroup>
             );
           }
 
           // Sub Menu
           return (
-            <SubMenu key={mergedKey} {...restProps}>
+            <SubMenu key={mergedKey} {...restProps} title={label}>
               {convertItemsToNodes(children)}
             </SubMenu>
           );
@@ -65,10 +65,9 @@ function convertItemsToNodes(list: ItemType[]) {
           return <Divider key={mergedKey} {...restProps} />;
         }
 
-        const { title, ...restMenuItemProps } = restProps as MenuItemType;
         return (
-          <MenuItem key={mergedKey} {...restMenuItemProps}>
-            {title}
+          <MenuItem key={mergedKey} {...restProps}>
+            {label}
           </MenuItem>
         );
       }

src/utils/nodeUtil.tsx

@@ -13,19 +13,19 @@ describe('Options', () => {
           // Invalid
           null,
           {
-            title: 'SubMenu',
+            label: 'SubMenu',
             key: 'sub1',
             children: [
               {
                 type: 'group',
-                title: 'Menu Group',
+                label: 'Menu Group',
                 children: [
                   {
-                    title: 'Menu Item 1',
+                    label: 'Menu Item 1',
                     key: '1',
                   },
                   {
-                    title: 'Menu Item 2',
+                    label: 'Menu Item 2',
                     key: '2',
                   },
                 ],