@hi-ui/menu 5.0.0-canary.2 → 5.0.0-canary.21

package/CHANGELOG.md

@@ -1,5 +1,255 @@
 # @hi-ui/menu
 
+## 5.0.0-canary.21
+
+### Minor Changes
+
+- d49302358: feat(menu): title 支持显示 2 行 (5.0)
+
+### Patch Changes
+
+- Updated dependencies [3a7186e4b]
+  - @hi-ui/use-merge-semantic@5.0.0-canary.1
+
+## 5.0.0-canary.20
+
+### Minor Changes
+
+- 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
+
+### Patch Changes
+
+- eb17c4697: style: 修复 UI/样式问题 (5.0)
+- Updated dependencies [7f204c892]
+- Updated dependencies [66bc9c3e2]
+- Updated dependencies [eb17c4697]
+- Updated dependencies [eb17c4697]
+- Updated dependencies [c407744fe]
+- Updated dependencies [59cef699f]
+  - @hi-ui/icons@5.0.0-canary.10
+  - @hi-ui/ellipsis-tooltip@5.0.0-canary.7
+  - @hi-ui/core@5.0.0-canary.7
+  - @hi-ui/button@5.0.0-canary.14
+  - @hi-ui/highlighter@5.0.0-canary.5
+  - @hi-ui/icon-button@5.0.0-canary.9
+  - @hi-ui/input@5.0.0-canary.19
+  - @hi-ui/picker@5.0.0-canary.16
+  - @hi-ui/popper@5.0.0-canary.13
+  - @hi-ui/scrollbar@5.0.0-canary.8
+  - @hi-ui/tooltip@5.0.0-canary.11
+  - @hi-ui/use-merge-semantic@5.0.0-canary.0
+
+## 5.0.0-canary.19
+
+### Patch Changes
+
+- ec6005193: style(layout,menu): 样式和示例调整 (5.0)
+- Updated dependencies [8f23e9322]
+- Updated dependencies [b27483796]
+- Updated dependencies [900c6c2f0]
+  - @hi-ui/input@5.0.0-canary.18
+  - @hi-ui/picker@5.0.0-canary.15
+
+## 5.0.0-canary.18
+
+### Patch Changes
+
+- b15a87bd4: style: fix ui bug (5.0)
+
+## 5.0.0-canary.17
+
+### Patch Changes
+
+- 305b4dd37: style: fix ui bug (5.0)
+- Updated dependencies [c6c0159c4]
+- Updated dependencies [305b4dd37]
+  - @hi-ui/icons@5.0.0-canary.9
+  - @hi-ui/tooltip@5.0.0-canary.9
+
+## 5.0.0-canary.16
+
+### Patch Changes
+
+- d1e7ade1e: styles: 主题定制功能完善&&样式变量化写法改造&&兼容 RTL (5.0)
+- Updated dependencies [d1e7ade1e]
+- Updated dependencies [da16450b4]
+- Updated dependencies [1e6276dde]
+  - @hi-ui/button@5.0.0-canary.13
+  - @hi-ui/icon-button@5.0.0-canary.8
+  - @hi-ui/input@5.0.0-canary.17
+  - @hi-ui/picker@5.0.0-canary.14
+  - @hi-ui/popper@5.0.0-canary.12
+  - @hi-ui/scrollbar@5.0.0-canary.7
+  - @hi-ui/tooltip@5.0.0-canary.8
+  - @hi-ui/icons@5.0.0-canary.8
+  - @hi-ui/ellipsis-tooltip@5.0.0-canary.6
+
+## 5.0.0-canary.15
+
+### Patch Changes
+
+- 58db39510: style: fix ui bug (5.0)
+- Updated dependencies [58db39510]
+  - @hi-ui/icons@5.0.0-canary.7
+  - @hi-ui/icon-button@5.0.0-canary.7
+  - @hi-ui/input@5.0.0-canary.16
+  - @hi-ui/popper@5.0.0-canary.11
+
+## 5.0.0-canary.14
+
+### Patch Changes
+
+- 947edaa7e: style: fix ui bug (5.0)
+- 0b67f7083: style: 修改 UI 问题 (5.0)
+- Updated dependencies [947edaa7e]
+- Updated dependencies [0b67f7083]
+  - @hi-ui/tooltip@5.0.0-canary.7
+  - @hi-ui/icons@5.0.0-canary.6
+  - @hi-ui/icon-button@5.0.0-canary.6
+  - @hi-ui/popper@5.0.0-canary.10
+
+## 5.0.0-canary.13
+
+### Patch Changes
+
+- d97cc24eb: chore: 修改 react-compat 依赖管理方式 & 更新 react-transition-group 依赖 (5.0)
+- 1f9c6e335: perf: 优化全局 size 配置,对于组件中没有的 size 值,取最接近的尺寸展示 (5.0)
+- 22db9cf70: style: fix ui bug (5.0)
+- Updated dependencies [d97cc24eb]
+- Updated dependencies [1f9c6e335]
+- Updated dependencies [22db9cf70]
+  - @hi-ui/popper@5.0.0-canary.9
+  - @hi-ui/tooltip@5.0.0-canary.6
+  - @hi-ui/core@5.0.0-canary.6
+  - @hi-ui/button@5.0.0-canary.12
+  - @hi-ui/icon-button@5.0.0-canary.5
+  - @hi-ui/input@5.0.0-canary.15
+  - @hi-ui/picker@5.0.0-canary.13
+  - @hi-ui/scrollbar@5.0.0-canary.6
+
+## 5.0.0-canary.12
+
+### Minor Changes
+
+- 922686dcc: feat(global-context): 增加 size api 全局配置 (5.0)
+
+### Patch Changes
+
+- 86877b241: style: 修改样式问题 (5.0)
+- Updated dependencies [2b706fc6d]
+- Updated dependencies [86877b241]
+- Updated dependencies [922686dcc]
+- Updated dependencies [8e969ad73]
+  - @hi-ui/picker@5.0.0-canary.12
+  - @hi-ui/button@5.0.0-canary.11
+  - @hi-ui/ellipsis-tooltip@5.0.0-canary.5
+  - @hi-ui/highlighter@5.0.0-canary.4
+  - @hi-ui/icon-button@5.0.0-canary.4
+  - @hi-ui/input@5.0.0-canary.14
+  - @hi-ui/popper@5.0.0-canary.8
+  - @hi-ui/scrollbar@5.0.0-canary.5
+  - @hi-ui/tooltip@5.0.0-canary.5
+  - @hi-ui/core@5.0.0-canary.5
+  - @hi-ui/icons@5.0.0-canary.5
+
+## 5.0.0-canary.11
+
+### Minor Changes
+
+- 632895aaf: feat(menu): GroupMenu 组件增加 titleRender 参数 (5.0)
+
+## 5.0.0-canary.10
+
+### Patch Changes
+
+- 3f88c4dca: <br />
+  - perf(layout): 优化导航菜单交互体验 (5.0)
+  - perf(menu): 优化搜索菜单组件的样式和交互逻辑 & 修改分组菜单样式问题 (5.0)
+- Updated dependencies [4dc72a186]
+  - @hi-ui/popper@5.0.0-canary.7
+
+## 5.0.0-canary.9
+
+### Patch Changes
+
+- 282e6c499: perf(layout&menu): 优化 FloatMenuContainer 组件的折叠逻辑 & 修改 SideMenu 组件 hover 样式 (5.0)
+- 4782eb807: style(menu): 优化 GroupMenu 组件的样式和交互逻辑 (5.0)
+- Updated dependencies [19e0da371]
+  - @hi-ui/input@5.0.0-canary.11
+
+## 5.0.0-canary.8
+
+### Patch Changes
+
+- efce04a26: fix: 修改 UI 问题 (5.0)
+- Updated dependencies [efce04a26]
+- Updated dependencies [9106dca82]
+  - @hi-ui/picker@5.0.0-canary.10
+  - @hi-ui/popper@5.0.0-canary.6
+  - @hi-ui/core@5.0.0-canary.3
+  - @hi-ui/input@5.0.0-canary.10
+  - @hi-ui/icons@5.0.0-canary.3
+  - @hi-ui/ellipsis-tooltip@5.0.0-canary.3
+  - @hi-ui/highlighter@5.0.0-canary.3
+  - @hi-ui/icon-button@5.0.0-canary.3
+  - @hi-ui/scrollbar@5.0.0-canary.4
+  - @hi-ui/tooltip@5.0.0-canary.4
+
+## 5.0.0-canary.7
+
+### Minor Changes
+
+- 4075b33da: feat(menu): 增加 GroupMenu 和 SideMenu 组件 (5.0)
+
+## 5.0.0-canary.6
+
+### Patch Changes
+
+- 07e7b975b: style(layout): 修改 Sider 收起时宽度为 60px & 增加 width 参数 (5.0)
+- Updated dependencies [7182c7bb8]
+  - @hi-ui/input@5.0.0-canary.9
+
+## 5.0.0-canary.5
+
+### Minor Changes
+
+- 44c862279: chore(menu): 增加变更记录文件 (5.0)
+
+### Patch Changes
+
+- Updated dependencies [7bc790804]
+  - @hi-ui/picker@5.0.0-canary.9
+  - @hi-ui/popper@5.0.0-canary.5
+
+## 5.0.0-canary.4
+
+### Minor Changes
+
+- 47334c3e0: feat(menu): add showTitleOnMini api (5.0)
+
+## 5.0.0-canary.3
+
+### Patch Changes
+
+- chore: rebase master (5.0)
+- Updated dependencies
+  - @hi-ui/core@5.0.0-canary.2
+  - @hi-ui/use-id@5.0.0-canary.2
+  - @hi-ui/use-merge-refs@5.0.0-canary.2
+  - @hi-ui/use-resize-observer@5.0.0-canary.2
+  - @hi-ui/use-toggle@5.0.0-canary.2
+  - @hi-ui/use-uncontrolled-state@5.0.0-canary.2
+  - @hi-ui/icons@5.0.0-canary.2
+  - @hi-ui/popper@5.0.0-canary.3
+  - @hi-ui/scrollbar@5.0.0-canary.2
+  - @hi-ui/tooltip@5.0.0-canary.3
+  - @hi-ui/array-utils@5.0.0-canary.2
+  - @hi-ui/classname@5.0.0-canary.2
+  - @hi-ui/env@5.0.0-canary.2
+  - @hi-ui/times@5.0.0-canary.2
+  - @hi-ui/tree-utils@5.0.0-canary.2
+  - @hi-ui/type-assertion@5.0.0-canary.2
+
 ## 5.0.0-canary.2
 
 ### Patch Changes

package/lib/cjs/EnterIcon.js

@@ -0,0 +1,44 @@
+/** @LICENSE
+ * @hi-ui/menu
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var EnterIcon = function EnterIcon() {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M4 9L2 7L4 5",
+    stroke: "#91959e",
+    strokeWidth: "1.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M10 3L10 6.25C10 6.66422 9.66423 7 9.25 7L2 7",
+    stroke: "#91959e",
+    strokeWidth: "1.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+exports.EnterIcon = EnterIcon;

package/lib/cjs/Expander.js

@@ -28,12 +28,17 @@ var Expander = function Expander(_ref) {
   var _useState = React.useState(visible ? 'auto' : 0),
     height = _useState[0],
     setHeight = _useState[1];
+  var innerRef = React__default["default"].useRef(null);
   return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
     "in": visible,
     timeout: 200,
     classNames: className,
     unmountOnExit: false,
-    onEnter: function onEnter(element) {
+    // 参考：https://github.com/reactjs/react-transition-group/issues/918
+    nodeRef: innerRef,
+    onEnter: function onEnter() {
+      var element = innerRef.current;
+      if (!element) return;
       setHeight(0);
       setTimeout(function () {
         setHeight(element.scrollHeight);
@@ -42,7 +47,9 @@ var Expander = function Expander(_ref) {
     onEntered: function onEntered() {
       setHeight('auto');
     },
-    onExit: function onExit(element) {
+    onExit: function onExit() {
+      var element = innerRef.current;
+      if (!element) return;
       setHeight(element.scrollHeight);
       setTimeout(function () {
         setHeight(0);
@@ -53,7 +60,8 @@ var Expander = function Expander(_ref) {
       height: height,
       overflow: 'hidden',
       transition: 'all 0.3s'
-    }
+    },
+    ref: innerRef
   }, children));
 };
 exports.Expander = Expander;

package/lib/cjs/GroupMenu.js

@@ -0,0 +1,124 @@
+/** @LICENSE
+ * @hi-ui/menu
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+var core = require('@hi-ui/core');
+var useMergeSemantic = require('@hi-ui/use-merge-semantic');
+var typeAssertion = require('@hi-ui/type-assertion');
+var useLatest = require('@hi-ui/use-latest');
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+var Scrollbar = require('@hi-ui/scrollbar');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Scrollbar__default = /*#__PURE__*/_interopDefaultCompat(Scrollbar);
+var _role = 'group-menu';
+var GROUP_MENU_PREFIX = classname.getPrefixCls(_role);
+/**
+ * 分组菜单
+ */
+var GroupMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? GROUP_MENU_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? _role : _a$role,
+    className = _a.className,
+    style = _a.style,
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
+    _a$data = _a.data,
+    data = _a$data === void 0 ? [] : _a$data,
+    onClick = _a.onClick,
+    _a$defaultActiveId = _a.defaultActiveId,
+    defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
+    activeIdProp = _a.activeId,
+    titleRender = _a.titleRender,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "data", "onClick", "defaultActiveId", "activeId", "titleRender"]);
+  var _useGlobalContext = core.useGlobalContext(),
+    groupMenuConfig = _useGlobalContext.groupMenu;
+  var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
+      classNamesList: [groupMenuConfig === null || groupMenuConfig === void 0 ? void 0 : groupMenuConfig.classNames, classNamesProp],
+      stylesList: [groupMenuConfig === null || groupMenuConfig === void 0 ? void 0 : groupMenuConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          data: data,
+          defaultActiveId: defaultActiveId,
+          activeId: activeIdProp,
+          titleRender: titleRender
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp),
+    activeId = _useUncontrolledState[0],
+    tryChangeActiveId = _useUncontrolledState[1];
+  var handleClick = useLatest.useLatestCallback(function (evt, id, item) {
+    tryChangeActiveId(id);
+    onClick === null || onClick === void 0 ? void 0 : onClick(evt, id, item);
+  });
+  var renderItem = React.useCallback(function (data) {
+    return data.map(function (item) {
+      var _cx;
+      var id = item.id,
+        icon = item.icon,
+        title = item.title,
+        _item$children = item.children,
+        children = _item$children === void 0 ? [] : _item$children,
+        disabled = item.disabled;
+      var isParent = typeAssertion.isArrayNonEmpty(children);
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: id,
+        className: classname.cx(isParent ? prefixCls + "-parent-item" : prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item--active"] = activeId === id, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--empty"] = !title && !icon, _cx), classNames === null || classNames === void 0 ? void 0 : classNames.item),
+        style: styles === null || styles === void 0 ? void 0 : styles.item,
+        onClick: function onClick(evt) {
+          if (disabled || isParent) return;
+          evt.stopPropagation();
+          handleClick(evt, id, item);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: classname.cx(prefixCls + "-item__content", classNames === null || classNames === void 0 ? void 0 : classNames.itemContent),
+        style: styles === null || styles === void 0 ? void 0 : styles.itemContent
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: classname.cx(prefixCls + "-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.itemIcon),
+        style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
+      }, icon), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: classname.cx(prefixCls + "-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.itemTitle),
+        style: styles === null || styles === void 0 ? void 0 : styles.itemTitle
+      }, typeof titleRender === 'function' ? titleRender(item) : title)), isParent && renderItem(children));
+    });
+  }, [activeId, handleClick, prefixCls, titleRender, classNames, styles]);
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    className: classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+    ref: ref,
+    role: role
+  }, rest), /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], {
+    onlyScrollVisible: true,
+    axes: "y",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.wrapper,
+    style: styles === null || styles === void 0 ? void 0 : styles.wrapper
+  }, renderItem(data)));
+});
+if (env.__DEV__) {
+  GroupMenu.displayName = 'GroupMenu';
+}
+exports.GroupMenu = GroupMenu;

package/lib/cjs/Menu.js

@@ -19,6 +19,8 @@ var classname = require('@hi-ui/classname');
 var icons = require('@hi-ui/icons');
 var env = require('@hi-ui/env');
 var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+var core = require('@hi-ui/core');
+var useMergeSemantic = require('@hi-ui/use-merge-semantic');
 var Tooltip = require('@hi-ui/tooltip');
 var useToggle = require('@hi-ui/use-toggle');
 var treeUtils = require('@hi-ui/tree-utils');
@@ -45,11 +47,15 @@ var MENU_MORE_ID = "MENU_MORE_" + useId.uuid();
  * 菜单
  */
 var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b, _c;
   var _a$prefixCls = _a.prefixCls,
     prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
     _a$role = _a.role,
     role = _a$role === void 0 ? 'menu' : _a$role,
     className = _a.className,
+    style = _a.style,
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
     _a$data = _a.data,
     data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
     fieldNames = _a.fieldNames,
@@ -80,12 +86,41 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     render = _a.render,
     extraHeader = _a.extraHeader,
     onClick = _a.onClick,
-    _a$size = _a.size,
-    size = _a$size === void 0 ? 'lg' : _a$size,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
+    sizeProp = _a.size,
+    _a$showTitleOnMini = _a.showTitleOnMini,
+    showTitleOnMini = _a$showTitleOnMini === void 0 ? false : _a$showTitleOnMini,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size", "showTitleOnMini"]);
+  var i18n = core.useLocaleContext();
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
     activeId = _useUncontrolledState[0],
     updateActiveId = _useUncontrolledState[1];
+  var _useGlobalContext = core.useGlobalContext(),
+    globalSize = _useGlobalContext.size,
+    menuConfig = _useGlobalContext.menu;
+  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'lg';
+  if (size === 'xs') {
+    size = 'sm';
+  }
+  var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
+      classNamesList: [menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.classNames, classNamesProp],
+      stylesList: [menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          data: data,
+          placement: placement,
+          size: (_c = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _c !== void 0 ? _c : 'lg',
+          showCollapse: showCollapse,
+          expandedType: expandedType,
+          showAllSubMenus: showAllSubMenus,
+          defaultExpandAll: defaultExpandAll,
+          defaultCollapsed: defaultCollapsed,
+          collapsed: collapsed,
+          showTitleOnMini: showTitleOnMini
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
   var _useState = React.useState(function () {
       return util.getAncestorIds(activeId, data);
     }),
@@ -104,6 +139,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, expandedIdsProp, onExpand),
     expandedIds = _useUncontrolledState2[0],
     updateExpandedIds = _useUncontrolledState2[1];
+  var expandedIdsRef = React.useRef(expandedIds);
   var clickMenu = React.useCallback(function (id, raw) {
     updateActiveId(id, raw);
   }, [updateActiveId]);
@@ -112,14 +148,17 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       return expandedId !== id;
     }) : expandedIds.concat(id);
     updateExpandedIds(nextExpandedIds);
+    expandedIdsRef.current = nextExpandedIds;
     if (onClickSubMenu) {
       onClickSubMenu(id, nextExpandedIds);
     }
   }, [onClickSubMenu, expandedIds, updateExpandedIds]);
   var closePopper = React.useCallback(function (id) {
-    updateExpandedIds(expandedIds.filter(function (expandedId) {
+    var nextExpandedIds = expandedIds.filter(function (expandedId) {
       return expandedId !== id;
-    }));
+    });
+    updateExpandedIds(nextExpandedIds);
+    expandedIdsRef.current = nextExpandedIds;
   }, [expandedIds, updateExpandedIds]);
   var closeAllPopper = React.useCallback(function () {
     updateExpandedIds([]);
@@ -152,6 +191,13 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       setContainerWidth(width);
     }
   });
+  React.useEffect(function () {
+    if (mini) {
+      updateExpandedIds([]);
+    } else {
+      updateExpandedIds(expandedIdsRef.current);
+    }
+  }, [mini, updateExpandedIds]);
   var _useState4 = React.useState(0),
     tagMaxCount = _useState4[0],
     setTagMaxCount = _useState4[1];
@@ -200,11 +246,10 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
   var renderFooter = function renderFooter() {
     var collapseNode = canToggle ? ( /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classname.cx(prefixCls + "__toggle"),
+      className: classname.cx(prefixCls + "__toggle", classNames === null || classNames === void 0 ? void 0 : classNames.toggle),
+      style: styles === null || styles === void 0 ? void 0 : styles.toggle,
       onClick: function onClick() {
-        miniToggleAction.not();
-        // 关闭所有展开的子菜单，防止切换到 mini 模式后，子菜单还是展开的
-        updateExpandedIds([]);
+        return miniToggleAction.not();
       }
     }, mini ? /*#__PURE__*/React__default["default"].createElement(icons.MenuUnfoldOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.MenuFoldOutlined, null))) : null;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, typeAssertion.isFunction(footerRender) ? footerRender({
@@ -214,22 +259,24 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   };
   var renderItem = React.useCallback(function (menuItem, level) {
     // 显示缩略内容
-    if (showMini && level === 1) {
+    if (showMini && level === 1 && !showTitleOnMini) {
       return renderMenuItemMini(menuItem);
     }
     return typeAssertion.isFunction(render) ? render(menuItem, level) : menuItem.title;
-  }, [render, showMini]);
-  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
+  }, [render, showMini, showTitleOnMini]);
+  var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", showTitleOnMini && prefixCls + "--show-title-on-mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: useMergeRefs.useMergeRefs(ref, setContainerElement),
     role: role,
-    className: cls
+    className: cls,
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, rest), extraHeader, /*#__PURE__*/React__default["default"].createElement(context["default"].Provider, {
     value: {
       placement: placement,
       expandedType: expandedType,
       showAllSubMenus: showAllSubMenus,
       mini: mini,
+      showTitleOnMini: showTitleOnMini,
       clickMenu: clickMenu,
       clickSubMenu: clickSubMenu,
       closePopper: closePopper,
@@ -237,10 +284,13 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       activeParents: activeParents,
       activeId: activeId,
       expandedIds: expandedIds,
-      overlayClassName: overlayClassName
+      overlayClassName: overlayClassName,
+      semanticClassNames: classNames,
+      semanticStyles: styles
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: classname.cx(prefixCls + "__wrapper")
+    className: classname.cx(prefixCls + "__wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
+    style: styles === null || styles === void 0 ? void 0 : styles.wrapper
   }, mergedTagList.map(function (item, index) {
     return showMini ? ( /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
       title: item.title,
@@ -263,10 +313,11 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }), showVertical || restTagList.length === 0 ? null : ( /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, {
     key: MENU_MORE_ID,
     id: MENU_MORE_ID,
-    title: "\u66F4\u591A",
+    title: i18n.tabs.more,
     children: restTagList
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: prefixCls + "__footer"
+    className: classname.cx(prefixCls + "__footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
+    style: styles === null || styles === void 0 ? void 0 : styles.footer
   }, renderFooter())));
 });
 if (env.__DEV__) {