chore: Internal Menu interface for ProLayout usage (#33399)

* test: Update snapshot

* chore: disable tooltip

* chore: rename

components/menu/MenuContext.tsx

@@ -9,6 +9,8 @@ export interface MenuContextProps {
   antdMenuTheme?: MenuTheme;
   direction?: DirectionType;
   firstLevel: boolean;
+  /** @private Internal Usage. Safe to remove */
+  disableMenuItemTitleTooltip?: boolean;
 }
 
 const MenuContext = createContext<MenuContextProps>({

components/menu/MenuItem.tsx

@@ -34,7 +34,8 @@ export default class MenuItem extends React.Component<MenuItemProps> {
   }
 
   renderItem = ({ siderCollapsed }: SiderContextProps) => {
-    const { prefixCls, firstLevel, inlineCollapsed, direction } = this.context;
+    const { prefixCls, firstLevel, inlineCollapsed, direction, disableMenuItemTitleTooltip } =
+      this.context;
     const { className, children } = this.props;
     const { title, icon, danger, ...rest } = this.props;
 
@@ -55,33 +56,42 @@ export default class MenuItem extends React.Component<MenuItemProps> {
       tooltipProps.visible = false;
     }
     const childrenLength = toArray(children).length;
-    return (
+
-      <Tooltip
+    let returnNode = (
-        {...tooltipProps}
+      <Item
-        placement={direction === 'rtl' ? 'left' : 'right'}
+        {...rest}
-        overlayClassName={`${prefixCls}-inline-collapsed-tooltip`}
+        className={classNames(
+          {
+            [`${prefixCls}-item-danger`]: danger,
+            [`${prefixCls}-item-only-child`]: (icon ? childrenLength + 1 : childrenLength) === 1,
+          },
+          className,
+        )}
+        title={typeof title === 'string' ? title : undefined}
       >
-        <Item
+        {cloneElement(icon, {
-          {...rest}
+          className: classNames(
-          className={classNames(
+            isValidElement(icon) ? icon.props?.className : '',
-            {
+            `${prefixCls}-item-icon`,
-              [`${prefixCls}-item-danger`]: danger,
+          ),
-              [`${prefixCls}-item-only-child`]: (icon ? childrenLength + 1 : childrenLength) === 1,
+        })}
-            },
+        {this.renderItemChildren(inlineCollapsed)}
-            className,
+      </Item>
-          )}
-          title={typeof title === 'string' ? title : undefined}
-        >
-          {cloneElement(icon, {
-            className: classNames(
-              isValidElement(icon) ? icon.props?.className : '',
-              `${prefixCls}-item-icon`,
-            ),
-          })}
-          {this.renderItemChildren(inlineCollapsed)}
-        </Item>
-      </Tooltip>
     );
+
+    if (!disableMenuItemTitleTooltip) {
+      returnNode = (
+        <Tooltip
+          {...tooltipProps}
+          placement={direction === 'rtl' ? 'left' : 'right'}
+          overlayClassName={`${prefixCls}-inline-collapsed-tooltip`}
+        >
+          {returnNode}
+        </Tooltip>
+      );
+    }
+
+    return returnNode;
   };
 
   render() {

components/menu/__tests__/__snapshots__/demo.test.js.snap

@@ -879,15 +879,15 @@ Array [
   <br />,
   <br />,
   <ul
-    class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
+    class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
     data-menu-list="true"
     role="menu"
     tabindex="0"
   >
     <li
-      class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal"
+      class="ant-menu-submenu ant-menu-submenu-vertical"
       role="none"
-      style="opacity:1;order:0"
+      style="background:rgba(255,255,255,0.3)"
     >
       <div
         aria-expanded="false"
@@ -926,9 +926,9 @@ Array [
       </div>
     </li>
     <li
-      class="ant-menu-overflow-item ant-menu-submenu ant-menu-submenu-horizontal"
+      class="ant-menu-submenu ant-menu-submenu-vertical"
       role="none"
-      style="opacity:1;order:1"
+      style="background:rgba(255,255,255,0.3)"
     >
       <div
         aria-expanded="false"
@@ -967,64 +967,27 @@ Array [
       </div>
     </li>
     <li
-      class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
+      class="ant-menu-item ant-menu-item-only-child"
       role="menuitem"
-      style="opacity:1;order:2"
+      style="text-decoration:underline"
       tabindex="-1"
-    >
-      <span
-        class="ant-menu-title-content"
-      >
-        Option 11
-      </span>
-    </li>
-    <li
-      class="ant-menu-overflow-item ant-menu-item ant-menu-item-only-child"
-      role="menuitem"
-      style="opacity:1;order:3"
-      tabindex="-1"
-    >
-      <span
-        class="ant-menu-title-content"
-      >
-        Option 12
-      </span>
-    </li>
-    <li
-      aria-hidden="true"
-      class="ant-menu-overflow-item ant-menu-overflow-item-rest ant-menu-submenu ant-menu-submenu-horizontal"
-      role="none"
-      style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
     >
       <div
-        aria-expanded="false"
+        class="ant-menu-inline-collapsed-noicon"
-        aria-haspopup="true"
-        class="ant-menu-submenu-title"
-        role="menuitem"
-        tabindex="-1"
       >
-        <span
+        O
-          aria-label="ellipsis"
+      </div>
-          class="anticon anticon-ellipsis"
+    </li>
-          role="img"
+    <li
-        >
+      class="ant-menu-item ant-menu-item-only-child"
-          <svg
+      role="menuitem"
-            aria-hidden="true"
+      style="text-decoration:underline"
-            data-icon="ellipsis"
+      tabindex="-1"
-            fill="currentColor"
+    >
-            focusable="false"
+      <div
-            height="1em"
+        class="ant-menu-inline-collapsed-noicon"
-            viewBox="64 64 896 896"
+      >
-            width="1em"
+        O
-          >
-            <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-            />
-          </svg>
-        </span>
-        <i
-          class="ant-menu-submenu-arrow"
-        />
       </div>
     </li>
   </ul>,

components/menu/demo/style-debug.md

@@ -14,25 +14,31 @@ buggy!
 
 buggy!
 
-```jsx
+```tsx
-import { Menu, Switch } from 'antd';
+import * as React from 'react';
+import { Menu, MenuProps, Switch } from 'antd';
 import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
 
 const { SubMenu } = Menu;
 
-class Sider extends React.Component {
+interface DemoState {
-  state = {
+  theme: 'light' | 'dark';
+  current: string;
+}
+
+class Demo extends React.Component<{}, DemoState> {
+  state: DemoState = {
     theme: 'dark',
     current: '1',
   };
 
-  changeTheme = value => {
+  changeTheme = (value: boolean) => {
     this.setState({
       theme: value ? 'dark' : 'light',
     });
   };
 
-  handleClick = e => {
+  handleClick: MenuProps['onClick'] = e => {
     console.log('click ', e);
     this.setState({
       current: e.key,
@@ -54,7 +60,28 @@ class Sider extends React.Component {
           theme={this.state.theme}
           onClick={this.handleClick}
           selectedKeys={[this.state.current]}
-          mode="horizontal"
+          mode="inline"
+          inlineCollapsed
+          // Test only. Remove in future.
+          _internalRenderMenuItem={node =>
+            React.cloneElement(node, {
+              style: {
+                ...node.props.style,
+                textDecoration: 'underline',
+              },
+            })
+          }
+          // Test only. Remove in future.
+          _internalRenderSubMenuItem={node =>
+            React.cloneElement(node, {
+              style: {
+                ...node.props.style,
+                background: 'rgba(255,255,255,0.3)',
+              },
+            })
+          }
+          // Test only. Remove in future.
+          _internalDisableMenuItemTitleTooltip
         >
           <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One Long Long Long Long">
             <Menu.Item key="1">Option 1</Menu.Item>
@@ -78,5 +105,5 @@ class Sider extends React.Component {
   }
 }
 
-ReactDOM.render(<Sider />, mountNode);
+ReactDOM.render(<Demo />, mountNode);
 ```

components/menu/index.tsx

@@ -23,6 +23,13 @@ export type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizo
 export interface MenuProps extends RcMenuProps {
   theme?: MenuTheme;
   inlineIndent?: number;
+
+  // >>>>> Private
+  /**
+   * @private Internal Usage. Not promise crash if used in production. Connect with chenshuai2144
+   *   for removing.
+   */
+  _internalDisableMenuItemTitleTooltip?: boolean;
 }
 
 type InternalMenuProps = MenuProps &
@@ -67,6 +74,7 @@ class InternalMenu extends React.Component<InternalMenuProps> {
       className,
       theme,
       expandIcon,
+      _internalDisableMenuItemTitleTooltip,
       ...restProps
     } = this.props;
 
@@ -83,13 +91,14 @@ class InternalMenu extends React.Component<InternalMenuProps> {
     const menuClassName = classNames(`${prefixCls}-${theme}`, className);
 
     // TODO: refactor menu with function component
-    const contextValue = memoize((cls, collapsed, the, dir) => ({
+    const contextValue = memoize((cls, collapsed, the, dir, disableMenuItemTitleTooltip) => ({
       prefixCls: cls,
       inlineCollapsed: collapsed || false,
       antdMenuTheme: the,
       direction: dir,
       firstLevel: true,
-    }))(prefixCls, inlineCollapsed, theme, direction);
+      disableMenuItemTitleTooltip,
+    }))(prefixCls, inlineCollapsed, theme, direction, _internalDisableMenuItemTitleTooltip);
 
     return (
       <MenuContext.Provider value={contextValue}>

package.json

@@ -131,7 +131,7 @@
     "rc-image": "~5.2.5",
     "rc-input-number": "~7.3.0",
     "rc-mentions": "~1.6.1",
-    "rc-menu": "~9.0.12",
+    "rc-menu": "~9.1.1",
     "rc-motion": "^2.4.4",
     "rc-notification": "~4.5.7",
     "rc-pagination": "~3.1.9",