@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/es/layout/components/SiderMenu/BaseMenu.js

@@ -1,15 +1,10 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { createFromIconfontCN } from '@ant-design/icons';
+import { useControlledState } from '@rc-component/util';
 import { Menu, Skeleton, Tooltip } from 'antd';
-import classNames from 'classnames';
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { clsx } from 'clsx';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ProProvider } from "../../../provider";
-import { isImg, isUrl, useMountMergeState } from "../../../utils";
+import { isImg, isUrl } from "../../../utils";
 import { defaultSettings } from "../../defaultSettings";
 import { getOpenKeysFromMenuData } from "../../utils/utils";
 import { useStyle } from "./style/menu";
@@ -18,18 +13,12 @@ import { useStyle } from "./style/menu";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-var MenuItemTooltip = function MenuItemTooltip(props) {
-  var _useState = useState(props.collapsed),
-    _useState2 = _slicedToArray(_useState, 2),
-    collapsed = _useState2[0],
-    setCollapsed = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    open = _useState4[0],
-    setOpen = _useState4[1];
-  useEffect(function () {
+const MenuItemTooltip = props => {
+  const [collapsed, setCollapsed] = useState(props.collapsed);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
     setOpen(false);
-    setTimeout(function () {
+    setTimeout(() => {
       setCollapsed(props.collapsed);
     }, 400);
   }, [props.collapsed]);
@@ -44,7 +33,7 @@ var MenuItemTooltip = function MenuItemTooltip(props) {
     children: props.children
   });
 };
-var IconFont = createFromIconfontCN({
+let IconFont = createFromIconfontCN({
   scriptUrl: defaultSettings.iconfontUrl
 });
 
@@ -54,9 +43,7 @@ var IconFont = createFromIconfontCN({
 //   icon: 'http://demo.com/icon.png',
 //   icon: '/favicon.png',
 //   icon: <Icon type="setting" />,
-var getIcon = function getIcon(icon) {
-  var iconPrefixes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'icon-';
-  var className = arguments.length > 2 ? arguments[2] : undefined;
+const getIcon = (icon, iconPrefixes = 'icon-', className) => {
   if (typeof icon === 'string' && icon !== '') {
     if (isUrl(icon) || isImg(icon)) {
       return /*#__PURE__*/_jsx("img", {
@@ -74,157 +61,170 @@ var getIcon = function getIcon(icon) {
   }
   return icon;
 };
-var getMenuTitleSymbol = function getMenuTitleSymbol(title) {
+const getMenuTitleSymbol = title => {
   if (title && typeof title === 'string') {
-    var symbol = title.substring(0, 1).toUpperCase();
+    const symbol = title.substring(0, 1).toUpperCase();
     return symbol;
   }
   return null;
 };
-var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(props) {
-  var _this = this;
-  _classCallCheck(this, MenuUtil);
-  _defineProperty(this, "props", void 0);
-  _defineProperty(this, "getNavMenuItems", function () {
-    var menusData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    var level = arguments.length > 1 ? arguments[1] : undefined;
-    var noGroupLevel = arguments.length > 2 ? arguments[2] : undefined;
-    return menusData.map(function (item) {
-      return _this.getSubMenuOrItem(item, level, noGroupLevel);
-    }).filter(function (item) {
-      return item;
-    }).flat(1);
-  });
+class MenuUtil {
+  props;
+  constructor(props) {
+    this.props = props;
+  }
+  getNavMenuItems = (menusData = [], level, noGroupLevel) => menusData.map(item => this.getSubMenuOrItem(item, level, noGroupLevel)).filter(item => item).flat(1);
+
   /** Get SubMenu or Item */
-  _defineProperty(this, "getSubMenuOrItem", function (item, level, noGroupLevel) {
-    var _this$props = _this.props,
-      subMenuItemRender = _this$props.subMenuItemRender,
-      baseClassName = _this$props.baseClassName,
-      prefixCls = _this$props.prefixCls,
-      collapsed = _this$props.collapsed,
-      menu = _this$props.menu,
-      iconPrefixes = _this$props.iconPrefixes,
-      layout = _this$props.layout;
-    var isGroup = (menu === null || menu === void 0 ? void 0 : menu.type) === 'group' && layout !== 'top';
-    var designToken = _this.props.token;
-    var name = _this.getIntlName(item);
-    var children = item === null || item === void 0 ? void 0 : item.children;
-    var menuType = isGroup && level === 0 ? 'group' : undefined;
+  getSubMenuOrItem = (item, level, noGroupLevel) => {
+    const {
+      subMenuItemRender,
+      baseClassName,
+      prefixCls,
+      collapsed,
+      menu,
+      iconPrefixes,
+      layout
+    } = this.props;
+    const isGroup = menu?.type === 'group' && layout !== 'top';
+    const designToken = this.props.token;
+    const name = this.getIntlName(item);
+    const children = item?.children;
+    const menuType = isGroup && level === 0 ? 'group' : undefined;
     if (Array.isArray(children) && children.length > 0) {
-      var _this$props2, _this$props3, _this$props4, _this$props5, _designToken$layout;
       /** Menu 第一级可以有icon，或者 isGroup 时第二级别也要有 */
-      var shouldHasIcon = level === 0 || isGroup && level === 1;
+      const shouldHasIcon = level === 0 || isGroup && level === 1;
 
       //  get defaultTitle by menuItemRender
-      var iconDom = getIcon(item.icon, iconPrefixes, "".concat(baseClassName, "-icon ").concat((_this$props2 = _this.props) === null || _this$props2 === void 0 ? void 0 : _this$props2.hashId));
+      const iconDom = getIcon(item.icon, iconPrefixes, `${baseClassName}-icon ${this.props?.hashId}`);
       /**
        * 如果没有icon在收起的时候用首字母代替
        */
-      var defaultIcon = collapsed && shouldHasIcon ? getMenuTitleSymbol(name) : null;
-      var defaultTitle = /*#__PURE__*/_jsxs("div", {
-        className: classNames("".concat(baseClassName, "-item-title"), (_this$props3 = _this.props) === null || _this$props3 === void 0 ? void 0 : _this$props3.hashId, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName, "-item-title-collapsed"), collapsed), "".concat(baseClassName, "-item-title-collapsed-level-").concat(noGroupLevel), collapsed), "".concat(baseClassName, "-group-item-title"), menuType === 'group'), "".concat(baseClassName, "-item-collapsed-show-title"), (menu === null || menu === void 0 ? void 0 : menu.collapsedShowTitle) && collapsed)),
+      const defaultIcon = collapsed && shouldHasIcon ? getMenuTitleSymbol(name) : null;
+      const defaultTitle = /*#__PURE__*/_jsxs("div", {
+        className: clsx(`${baseClassName}-item-title`, this.props?.hashId, {
+          [`${baseClassName}-item-title-collapsed`]: collapsed,
+          [`${baseClassName}-item-title-collapsed-level-${noGroupLevel}`]: collapsed,
+          [`${baseClassName}-group-item-title`]: menuType === 'group',
+          [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
+        }),
         children: [menuType === 'group' && collapsed ? null : shouldHasIcon && iconDom ? /*#__PURE__*/_jsx("span", {
-          className: "".concat(baseClassName, "-item-icon ").concat((_this$props4 = _this.props) === null || _this$props4 === void 0 ? void 0 : _this$props4.hashId).trim(),
+          className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
           children: iconDom
         }) : defaultIcon, /*#__PURE__*/_jsx("span", {
-          className: classNames("".concat(baseClassName, "-item-text"), (_this$props5 = _this.props) === null || _this$props5 === void 0 ? void 0 : _this$props5.hashId, _defineProperty({}, "".concat(baseClassName, "-item-text-has-icon"), menuType !== 'group' && shouldHasIcon && (iconDom || defaultIcon))),
+          className: clsx(`${baseClassName}-item-text`, this.props?.hashId, {
+            [`${baseClassName}-item-text-has-icon`]: menuType !== 'group' && shouldHasIcon && (iconDom || defaultIcon)
+          }),
           children: name
         })]
       });
 
       // subMenu only title render
-      var title = subMenuItemRender ? subMenuItemRender(_objectSpread(_objectSpread({}, item), {}, {
+      const title = subMenuItemRender ? subMenuItemRender({
+        ...item,
         isUrl: false
-      }), defaultTitle, _this.props) : defaultTitle;
+      }, defaultTitle, this.props) : defaultTitle;
 
       // 如果收起来，没有子菜单了，就不需要展示 group，所以 level 不增加
-      if (isGroup && level === 0 && _this.props.collapsed && !menu.collapsedShowGroupTitle) {
-        return _this.getNavMenuItems(children, level + 1, level);
+      if (isGroup && level === 0 && this.props.collapsed && !menu.collapsedShowGroupTitle) {
+        return this.getNavMenuItems(children, level + 1, level);
       }
-      var childrenList = _this.getNavMenuItems(children, level + 1, isGroup && level === 0 && _this.props.collapsed ? level : level + 1);
+      const childrenList = this.getNavMenuItems(children, level + 1, isGroup && level === 0 && this.props.collapsed ? level : level + 1);
       return [{
         type: menuType,
         key: item.key || item.path,
         label: title,
         onClick: isGroup ? undefined : item.onTitleClick,
         children: childrenList,
-        className: classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName, "-group"), menuType === 'group'), "".concat(baseClassName, "-submenu"), menuType !== 'group'), "".concat(baseClassName, "-submenu-has-icon"), menuType !== 'group' && shouldHasIcon && iconDom))
+        className: clsx({
+          [`${baseClassName}-group`]: menuType === 'group',
+          [`${baseClassName}-submenu`]: menuType !== 'group',
+          [`${baseClassName}-submenu-has-icon`]: menuType !== 'group' && shouldHasIcon && iconDom
+        })
       }, isGroup && level === 0 ? {
         type: 'divider',
-        prefixCls: prefixCls,
-        className: "".concat(baseClassName, "-divider"),
+        prefixCls,
+        className: `${baseClassName}-divider`,
         key: (item.key || item.path) + '-group-divider',
         style: {
           padding: 0,
           borderBlockEnd: 0,
-          margin: _this.props.collapsed ? '4px' : '6px 16px',
-          marginBlockStart: _this.props.collapsed ? 4 : 8,
-          borderColor: designToken === null || designToken === void 0 || (_designToken$layout = designToken.layout) === null || _designToken$layout === void 0 || (_designToken$layout = _designToken$layout.sider) === null || _designToken$layout === void 0 ? void 0 : _designToken$layout.colorMenuItemDivider
+          margin: this.props.collapsed ? '4px' : '6px 16px',
+          marginBlockStart: this.props.collapsed ? 4 : 8,
+          borderColor: designToken?.layout?.sider?.colorMenuItemDivider
         }
       } : undefined].filter(Boolean);
     }
     return {
-      className: "".concat(baseClassName, "-menu-item"),
+      className: `${baseClassName}-menu-item`,
       disabled: item.disabled,
       key: item.key || item.path,
       onClick: item.onTitleClick,
       // eslint-disable-next-line react/no-is-mounted
-      label: _this.getMenuItemPath(item, level, noGroupLevel)
+      label: this.getMenuItemPath(item, level, noGroupLevel)
     };
-  });
-  _defineProperty(this, "getIntlName", function (item) {
-    var name = item.name,
-      locale = item.locale;
-    var _this$props6 = _this.props,
-      menu = _this$props6.menu,
-      formatMessage = _this$props6.formatMessage;
-    var finalName = name;
-    if (locale && (menu === null || menu === void 0 ? void 0 : menu.locale) !== false) {
-      finalName = formatMessage === null || formatMessage === void 0 ? void 0 : formatMessage({
+  };
+  getIntlName = item => {
+    const {
+      name,
+      locale
+    } = item;
+    const {
+      menu,
+      formatMessage
+    } = this.props;
+    let finalName = name;
+    if (locale && menu?.locale !== false) {
+      finalName = formatMessage?.({
         id: locale,
         defaultMessage: name
       });
     }
-    if (_this.props.menuTextRender) {
-      return _this.props.menuTextRender(item, finalName, _this.props);
+    if (this.props.menuTextRender) {
+      return this.props.menuTextRender(item, finalName, this.props);
     }
     return finalName;
-  });
+  };
+
   /**
    * 判断是否是http链接.返回 Link 或 a Judge whether it is http link.return a or Link
    *
    * @memberof SiderMenu
    */
-  _defineProperty(this, "getMenuItemPath", function (item, level, noGroupLevel) {
-    var _this$props9, _this$props10, _this$props11, _this$props12;
-    var itemPath = _this.conversionPath(item.path || '/');
-    var _this$props7 = _this.props,
-      _this$props7$location = _this$props7.location,
-      location = _this$props7$location === void 0 ? {
+  getMenuItemPath = (item, level, noGroupLevel) => {
+    const itemPath = this.conversionPath(item.path || '/');
+    const {
+      location = {
         pathname: '/'
-      } : _this$props7$location,
-      isMobile = _this$props7.isMobile,
-      onCollapse = _this$props7.onCollapse,
-      menuItemRender = _this$props7.menuItemRender,
-      iconPrefixes = _this$props7.iconPrefixes;
+      },
+      isMobile,
+      onCollapse,
+      menuItemRender,
+      iconPrefixes
+    } = this.props;
 
     // if local is true formatMessage all name。
-    var menuItemTitle = _this.getIntlName(item);
-    var _this$props8 = _this.props,
-      baseClassName = _this$props8.baseClassName,
-      menu = _this$props8.menu,
-      collapsed = _this$props8.collapsed;
-    var isGroup = (menu === null || menu === void 0 ? void 0 : menu.type) === 'group';
+    const menuItemTitle = this.getIntlName(item);
+    const {
+      baseClassName,
+      menu,
+      collapsed
+    } = this.props;
+    const isGroup = menu?.type === 'group';
     /** Menu 第一级可以有icon，或者 isGroup 时第二级别也要有 */
-    var hasIcon = level === 0 || isGroup && level === 1;
-    var icon = !hasIcon ? null : getIcon(item.icon, iconPrefixes, "".concat(baseClassName, "-icon ").concat((_this$props9 = _this.props) === null || _this$props9 === void 0 ? void 0 : _this$props9.hashId));
+    const hasIcon = level === 0 || isGroup && level === 1;
+    const icon = !hasIcon ? null : getIcon(item.icon, iconPrefixes, `${baseClassName}-icon ${this.props?.hashId}`);
 
     // 如果没有 icon 在收起的时候用首字母代替
-    var defaultIcon = collapsed && hasIcon ? getMenuTitleSymbol(menuItemTitle) : null;
-    var defaultItem = /*#__PURE__*/_jsxs("div", {
-      className: classNames("".concat(baseClassName, "-item-title"), (_this$props10 = _this.props) === null || _this$props10 === void 0 ? void 0 : _this$props10.hashId, _defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName, "-item-title-collapsed"), collapsed), "".concat(baseClassName, "-item-title-collapsed-level-").concat(noGroupLevel), collapsed), "".concat(baseClassName, "-item-collapsed-show-title"), (menu === null || menu === void 0 ? void 0 : menu.collapsedShowTitle) && collapsed)),
+    const defaultIcon = collapsed && hasIcon ? getMenuTitleSymbol(menuItemTitle) : null;
+    let defaultItem = /*#__PURE__*/_jsxs("div", {
+      className: clsx(`${baseClassName}-item-title`, this.props?.hashId, {
+        [`${baseClassName}-item-title-collapsed`]: collapsed,
+        [`${baseClassName}-item-title-collapsed-level-${noGroupLevel}`]: collapsed,
+        [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
+      }),
       children: [/*#__PURE__*/_jsx("span", {
-        className: "".concat(baseClassName, "-item-icon ").concat((_this$props11 = _this.props) === null || _this$props11 === void 0 ? void 0 : _this$props11.hashId).trim(),
+        className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
         style: {
           display: defaultIcon === null && !icon ? 'none' : ''
         },
@@ -233,23 +233,28 @@ var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(props) {
           children: defaultIcon
         })
       }), /*#__PURE__*/_jsx("span", {
-        className: classNames("".concat(baseClassName, "-item-text"), (_this$props12 = _this.props) === null || _this$props12 === void 0 ? void 0 : _this$props12.hashId, _defineProperty({}, "".concat(baseClassName, "-item-text-has-icon"), hasIcon && (icon || defaultIcon))),
+        className: clsx(`${baseClassName}-item-text`, this.props?.hashId, {
+          [`${baseClassName}-item-text-has-icon`]: hasIcon && (icon || defaultIcon)
+        }),
         children: menuItemTitle
       })]
     }, itemPath);
-    var isHttpUrl = isUrl(itemPath);
+    const isHttpUrl = isUrl(itemPath);
 
     // Is it a http link
     if (isHttpUrl) {
-      var _this$props13, _this$props14, _this$props15;
       defaultItem = /*#__PURE__*/_jsxs("span", {
-        onClick: function onClick() {
-          var _window, _window$open;
-          (_window = window) === null || _window === void 0 || (_window$open = _window.open) === null || _window$open === void 0 || _window$open.call(_window, itemPath, '_blank');
+        onClick: () => {
+          window?.open?.(itemPath, '_blank');
         },
-        className: classNames("".concat(baseClassName, "-item-title"), (_this$props13 = _this.props) === null || _this$props13 === void 0 ? void 0 : _this$props13.hashId, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName, "-item-title-collapsed"), collapsed), "".concat(baseClassName, "-item-title-collapsed-level-").concat(noGroupLevel), collapsed), "".concat(baseClassName, "-item-link"), true), "".concat(baseClassName, "-item-collapsed-show-title"), (menu === null || menu === void 0 ? void 0 : menu.collapsedShowTitle) && collapsed)),
+        className: clsx(`${baseClassName}-item-title`, this.props?.hashId, {
+          [`${baseClassName}-item-title-collapsed`]: collapsed,
+          [`${baseClassName}-item-title-collapsed-level-${noGroupLevel}`]: collapsed,
+          [`${baseClassName}-item-link`]: true,
+          [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
+        }),
         children: [/*#__PURE__*/_jsx("span", {
-          className: "".concat(baseClassName, "-item-icon ").concat((_this$props14 = _this.props) === null || _this$props14 === void 0 ? void 0 : _this$props14.hashId).trim(),
+          className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
           style: {
             display: defaultIcon === null && !icon ? 'none' : ''
           },
@@ -258,28 +263,29 @@ var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(props) {
             children: defaultIcon
           })
         }), /*#__PURE__*/_jsx("span", {
-          className: classNames("".concat(baseClassName, "-item-text"), (_this$props15 = _this.props) === null || _this$props15 === void 0 ? void 0 : _this$props15.hashId, _defineProperty({}, "".concat(baseClassName, "-item-text-has-icon"), hasIcon && (icon || defaultIcon))),
+          className: clsx(`${baseClassName}-item-text`, this.props?.hashId, {
+            [`${baseClassName}-item-text-has-icon`]: hasIcon && (icon || defaultIcon)
+          }),
           children: menuItemTitle
         })]
       }, itemPath);
     }
     if (menuItemRender) {
-      var renderItemProps = _objectSpread(_objectSpread({}, item), {}, {
+      const renderItemProps = {
+        ...item,
         isUrl: isHttpUrl,
-        itemPath: itemPath,
-        isMobile: isMobile,
+        itemPath,
+        isMobile,
         replace: itemPath === location.pathname,
-        onClick: function onClick() {
-          return onCollapse && onCollapse(true);
-        },
+        onClick: () => onCollapse && onCollapse(true),
         children: undefined
-      });
+      };
       return level === 0 ? /*#__PURE__*/_jsx(MenuItemTooltip, {
         collapsed: collapsed,
         title: menuItemTitle,
         disable: item.disabledTooltip,
-        children: menuItemRender(renderItemProps, defaultItem, _this.props)
-      }) : menuItemRender(renderItemProps, defaultItem, _this.props);
+        children: menuItemRender(renderItemProps, defaultItem, this.props)
+      }) : menuItemRender(renderItemProps, defaultItem, this.props);
     }
     return level === 0 ? /*#__PURE__*/_jsx(MenuItemTooltip, {
       collapsed: collapsed,
@@ -287,83 +293,85 @@ var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(props) {
       disable: item.disabledTooltip,
       children: defaultItem
     }) : defaultItem;
-  });
-  _defineProperty(this, "conversionPath", function (path) {
+  };
+  conversionPath = path => {
     if (path && path.indexOf('http') === 0) {
       return path;
     }
-    return "/".concat(path || '').replace(/\/+/g, '/');
-  });
-  this.props = props;
-});
+    return `/${path || ''}`.replace(/\/+/g, '/');
+  };
+}
+
 /**
  * 生成openKeys 的对象，因为设置了openKeys 就会变成受控，所以需要一个空对象
  *
  * @param BaseMenuProps
  */
-var getOpenKeysProps = function getOpenKeysProps(openKeys, _ref) {
-  var layout = _ref.layout,
-    collapsed = _ref.collapsed;
-  var openKeysProps = {};
+const getOpenKeysProps = (openKeys, {
+  layout,
+  collapsed
+}) => {
+  let openKeysProps = {};
   if (openKeys && !collapsed && ['side', 'mix'].includes(layout || 'mix')) {
     openKeysProps = {
-      openKeys: openKeys
+      openKeys
     };
   }
   return openKeysProps;
 };
-var BaseMenu = function BaseMenu(props) {
-  var mode = props.mode,
-    className = props.className,
-    handleOpenChange = props.handleOpenChange,
-    style = props.style,
-    menuData = props.menuData,
-    prefixCls = props.prefixCls,
-    menu = props.menu,
-    matchMenuKeys = props.matchMenuKeys,
-    iconfontUrl = props.iconfontUrl,
-    propsSelectedKeys = props.selectedKeys,
-    onSelect = props.onSelect,
-    menuRenderType = props.menuRenderType,
-    propsOpenKeys = props.openKeys;
-  var _useContext = useContext(ProProvider),
-    dark = _useContext.dark,
-    designToken = _useContext.token;
-  var baseClassName = "".concat(prefixCls, "-base-menu-").concat(mode);
+const BaseMenu = props => {
+  const {
+    mode,
+    className,
+    onOpenChange,
+    style,
+    menuData,
+    prefixCls,
+    menu,
+    matchMenuKeys,
+    iconfontUrl,
+    selectedKeys: propsSelectedKeys,
+    onSelect,
+    menuRenderType,
+    openKeys: propsOpenKeys
+  } = props;
+  const {
+    dark,
+    token: designToken
+  } = useContext(ProProvider);
+  const baseClassName = `${prefixCls}-base-menu-${mode}`;
   // 用于减少 defaultOpenKeys 计算的组件
-  var defaultOpenKeysRef = useRef([]);
-  var _useMountMergeState = useMountMergeState(menu === null || menu === void 0 ? void 0 : menu.defaultOpenAll),
-    _useMountMergeState2 = _slicedToArray(_useMountMergeState, 2),
-    defaultOpenAll = _useMountMergeState2[0],
-    setDefaultOpenAll = _useMountMergeState2[1];
-  var _useMountMergeState3 = useMountMergeState(function () {
-      if (menu !== null && menu !== void 0 && menu.defaultOpenAll) {
-        return getOpenKeysFromMenuData(menuData) || [];
-      }
-      if (propsOpenKeys === false) {
-        return false;
+  const defaultOpenKeysRef = useRef([]);
+  const [defaultOpenAll, setDefaultOpenAll] = useState(menu?.defaultOpenAll);
+  const openKeysValue = propsOpenKeys === false ? undefined : propsOpenKeys;
+  const [openKeys, setOpenKeysInner] = useControlledState(() => {
+    if (menu?.defaultOpenAll) {
+      return getOpenKeysFromMenuData(menuData) || [];
+    }
+    if (propsOpenKeys === false) {
+      return false;
+    }
+    return [];
+  }, openKeysValue);
+  const setOpenKeys = useCallback(updater => {
+    setOpenKeysInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onOpenChange?.(next);
+      return next;
+    });
+  }, [onOpenChange]);
+  const [selectedKeys, setSelectedKeysInner] = useControlledState([], propsSelectedKeys);
+  const setSelectedKeys = useCallback(updater => {
+    setSelectedKeysInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      if (onSelect && next) {
+        onSelect(next);
       }
-      return [];
-    }, {
-      value: propsOpenKeys === false ? undefined : propsOpenKeys,
-      onChange: handleOpenChange
-    }),
-    _useMountMergeState4 = _slicedToArray(_useMountMergeState3, 2),
-    openKeys = _useMountMergeState4[0],
-    setOpenKeys = _useMountMergeState4[1];
-  var _useMountMergeState5 = useMountMergeState([], {
-      value: propsSelectedKeys,
-      onChange: onSelect ? function (keys) {
-        if (onSelect && keys) {
-          onSelect(keys);
-        }
-      } : undefined
-    }),
-    _useMountMergeState6 = _slicedToArray(_useMountMergeState5, 2),
-    selectedKeys = _useMountMergeState6[0],
-    setSelectedKeys = _useMountMergeState6[1];
-  useEffect(function () {
-    if (menu !== null && menu !== void 0 && menu.defaultOpenAll || propsOpenKeys === false) {
+      return next;
+    });
+  }, [onSelect]);
+  useEffect(() => {
+    if (menu?.defaultOpenAll || propsOpenKeys === false) {
       return;
     }
     if (matchMenuKeys) {
@@ -372,7 +380,7 @@ var BaseMenu = function BaseMenu(props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [matchMenuKeys.join('-')]);
-  useEffect(function () {
+  useEffect(() => {
     // reset IconFont
     if (iconfontUrl) {
       IconFont = createFromIconfontCN({
@@ -380,19 +388,19 @@ var BaseMenu = function BaseMenu(props) {
       });
     }
   }, [iconfontUrl]);
-  useEffect(function () {
+  useEffect(() => {
     // if pathname can't match, use the nearest parent's key
     if (matchMenuKeys.join('-') !== (selectedKeys || []).join('-')) {
       setSelectedKeys(matchMenuKeys);
     }
     if (!defaultOpenAll && propsOpenKeys !== false && matchMenuKeys.join('-') !== (openKeys || []).join('-')) {
-      var newKeys = matchMenuKeys;
+      let newKeys = matchMenuKeys;
       // 如果不自动关闭，我需要把 openKeys 放进去
-      if ((menu === null || menu === void 0 ? void 0 : menu.autoClose) === false) {
-        newKeys = Array.from(new Set([].concat(_toConsumableArray(matchMenuKeys), _toConsumableArray(openKeys || []))));
+      if (menu?.autoClose === false) {
+        newKeys = Array.from(new Set([...matchMenuKeys, ...(openKeys || [])]));
       }
       setOpenKeys(newKeys);
-    } else if (menu !== null && menu !== void 0 && menu.ignoreFlatMenu && defaultOpenAll && !props.collapsed) {
+    } else if (menu?.ignoreFlatMenu && defaultOpenAll && !props.collapsed) {
       // 忽略用户手动折叠过的菜单状态，折叠按钮切换之后也可实现默认展开所有菜单
       // 但是如果用户手动点击关闭菜单，则应该遵循用户的选择
       setOpenKeys(getOpenKeysFromMenuData(menuData));
@@ -402,25 +410,25 @@ var BaseMenu = function BaseMenu(props) {
   },
   // 依赖项加上 props.collapsed，保证折叠时能正确响应
   [matchMenuKeys.join('-'), props.collapsed]);
-  var openKeysProps = useMemo(function () {
-    return getOpenKeysProps(openKeys, props);
-  },
+  const openKeysProps = useMemo(() => getOpenKeysProps(openKeys, props),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [openKeys && openKeys.join(','), props.layout, props.collapsed]);
-  var _useStyle = useStyle(baseClassName, mode),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var menuUtils = useMemo(function () {
-    return new MenuUtil(_objectSpread(_objectSpread({}, props), {}, {
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(baseClassName, mode);
+  const menuUtils = useMemo(() => {
+    return new MenuUtil({
+      ...props,
       token: designToken,
-      menuRenderType: menuRenderType,
-      baseClassName: baseClassName,
-      hashId: hashId
-    }));
+      menuRenderType,
+      baseClassName,
+      hashId
+    });
   }, [props, designToken, menuRenderType, baseClassName, hashId]);
-  if (menu !== null && menu !== void 0 && menu.loading) {
+  if (menu?.loading) {
     return /*#__PURE__*/_jsx("div", {
-      style: mode !== null && mode !== void 0 && mode.includes('inline') ? {
+      style: mode?.includes('inline') ? {
         padding: 24
       } : {
         marginBlockStart: 16
@@ -429,7 +437,7 @@ var BaseMenu = function BaseMenu(props) {
         active: true,
         title: false,
         paragraph: {
-          rows: mode !== null && mode !== void 0 && mode.includes('inline') ? 6 : 1
+          rows: mode?.includes('inline') ? 6 : 1
         }
       })
     });
@@ -438,14 +446,15 @@ var BaseMenu = function BaseMenu(props) {
   // 这次 openKeys === false 的时候的情况，这种情况下帮用户选中一次
   // 第二此不会使用，所以用了 defaultOpenKeys
   // 这里返回 null，是为了让 defaultOpenKeys 生效
-  if (props.openKeys === false && !props.handleOpenChange) {
+  if (props.openKeys === false && !props.onOpenChange) {
     defaultOpenKeysRef.current = matchMenuKeys;
   }
-  var finallyData = props.postMenuData ? props.postMenuData(menuData) : menuData;
-  if (finallyData && (finallyData === null || finallyData === void 0 ? void 0 : finallyData.length) < 1) {
+  const finallyData = props.postMenuData ? props.postMenuData(menuData) : menuData;
+  if (finallyData && finallyData?.length < 1) {
     return null;
   }
-  return wrapSSR( /*#__PURE__*/_createElement(Menu, _objectSpread(_objectSpread({}, openKeysProps), {}, {
+  return wrapSSR( /*#__PURE__*/_createElement(Menu, {
+    ...openKeysProps,
     _internalDisableMenuItemTitleTooltip: true,
     key: "Menu",
     mode: mode,
@@ -453,13 +462,17 @@ var BaseMenu = function BaseMenu(props) {
     defaultOpenKeys: defaultOpenKeysRef.current,
     theme: dark ? 'dark' : 'light',
     selectedKeys: selectedKeys,
-    style: _objectSpread({
+    style: {
       backgroundColor: 'transparent',
-      border: 'none'
-    }, style),
-    className: classNames(className, hashId, baseClassName, _defineProperty(_defineProperty({}, "".concat(baseClassName, "-horizontal"), mode === 'horizontal'), "".concat(baseClassName, "-collapsed"), props.collapsed)),
+      border: 'none',
+      ...style
+    },
+    className: clsx(className, hashId, baseClassName, {
+      [`${baseClassName}-horizontal`]: mode === 'horizontal',
+      [`${baseClassName}-collapsed`]: props.collapsed
+    }),
     items: menuUtils.getNavMenuItems(finallyData, 0, 0),
-    onOpenChange: function onOpenChange(_openKeys) {
+    onOpenChange: _openKeys => {
       if (!props.collapsed) {
         // 如果用户手动关闭所有菜单，则关闭自动展开
         if (_openKeys.length === 0) {
@@ -467,7 +480,8 @@ var BaseMenu = function BaseMenu(props) {
         }
         setOpenKeys(_openKeys);
       }
-    }
-  }, props.menuProps)));
+    },
+    ...props.menuProps
+  }));
 };
 export { BaseMenu };