@hi-ui/menu 4.0.9 → 4.1.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @hi-ui/menu
 
+## 4.1.1
+
+### Patch Changes
+
+- [#2620](https://github.com/XiaoMi/hiui/pull/2620) [`863bcde00`](https://github.com/XiaoMi/hiui/commit/863bcde0033f8bb4c9866e6f975e52726e4a5825) Thanks [@aqiusen](https://github.com/aqiusen)! - fix: 修复 disabled 不生效问题
+
+## 4.1.0
+
+### Minor Changes
+
+- [#2576](https://github.com/XiaoMi/hiui/pull/2576) [`ccb1eec12`](https://github.com/XiaoMi/hiui/commit/ccb1eec122a33466536b365d443f175d1e16dc86) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: 增加 render 和 extraHeader API
+
+- [#2577](https://github.com/XiaoMi/hiui/pull/2577) [`2f094567e`](https://github.com/XiaoMi/hiui/commit/2f094567e678235e75ff5c443dce1ee09c3bd115) Thanks [@zyprepare](https://github.com/zyprepare)! - feat: 增加 size API
+
+### Patch Changes
+
+- Updated dependencies [[`937052db3`](https://github.com/XiaoMi/hiui/commit/937052db36ecfa50fef53df13d159bee0d08fa41), [`ccb1eec12`](https://github.com/XiaoMi/hiui/commit/ccb1eec122a33466536b365d443f175d1e16dc86), [`eee5e6d16`](https://github.com/XiaoMi/hiui/commit/eee5e6d1658685a6119b5aa40038c572145b3b4e)]:
+  - @hi-ui/icons@4.0.14
+  - @hi-ui/popper@4.1.0
+  - @hi-ui/tree-utils@4.1.1
+
 ## 4.0.9
 
 ### Patch Changes

package/lib/cjs/Menu.js

@@ -25,12 +25,6 @@ var icons = require('@hi-ui/icons');
 
 var env = require('@hi-ui/env');
 
-var MenuItem = require('./MenuItem.js');
-
-var context = require('./context.js');
-
-var util = require('./util.js');
-
 var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
 
 var Tooltip = require('@hi-ui/tooltip');
@@ -47,6 +41,12 @@ var useMergeRefs = require('@hi-ui/use-merge-refs');
 
 var useId = require('@hi-ui/use-id');
 
+var MenuItem = require('./MenuItem.js');
+
+var context = require('./context.js');
+
+var util = require('./util.js');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -98,8 +98,12 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       overlayClassName = _a.overlayClassName,
       onCollapse = _a.onCollapse,
       footerRender = _a.footerRender,
+      render = _a.render,
+      extraHeader = _a.extraHeader,
       onClick = _a.onClick,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "onClick"]);
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'lg' : _a$size,
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
 
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
       activeId = _useUncontrolledState[0],
@@ -247,12 +251,12 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }) : collapseNode);
   };
 
-  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
+  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--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
-  }, rest), /*#__PURE__*/React__default["default"].createElement(context["default"].Provider, {
+  }, rest), extraHeader, /*#__PURE__*/React__default["default"].createElement(context["default"].Provider, {
     value: {
       placement: placement,
       expandedType: expandedType,
@@ -277,13 +281,16 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({}, item, {
       level: 1,
       render: renderMenuItemMini,
-      raw: item
+      raw: item,
+      size: size
     }))) : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({
       hidden: !showVertical && index >= tagMaxCount
     }, item, {
+      render: render,
       key: item.id,
       level: 1,
-      raw: item
+      raw: item,
+      size: size
     }));
   }), showVertical || restTagList.length === 0 ? null : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, {
     key: MENU_MORE_ID,
@@ -304,9 +311,6 @@ if (env.__DEV__) {
 
 
 var renderMenuItemMini = function renderMenuItemMini(menu) {
-  // if (typeof menu.icon !== 'undefined') {
-  //   return menu.icon
-  // }
   if (typeof menu.title === 'string') {
     return menu.title.substring(0, 1);
   }

package/lib/cjs/MenuItem.js

@@ -25,18 +25,18 @@ var env = require('@hi-ui/env');
 
 var icons = require('@hi-ui/icons');
 
-var context = require('./context.js');
-
 var Popper = require('@hi-ui/popper');
 
-var Expander = require('./Expander.js');
-
 var typeAssertion = require('@hi-ui/type-assertion');
 
 var arrayUtils = require('@hi-ui/array-utils');
 
 var useMergeRefs = require('@hi-ui/use-merge-refs');
 
+var context = require('./context.js');
+
+var Expander = require('./Expander.js');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -72,7 +72,9 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       hidden = _a$hidden === void 0 ? false : _a$hidden,
       render = _a.render,
       raw = _a.raw,
-      rest = tslib.__rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw"]);
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'lg' : _a$size,
+      rest = tslib.__rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw", "size"]);
 
   var itemRef = React.useRef(null);
 
@@ -102,14 +104,9 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     className: classname.cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2)),
     onClick: function onClick() {
       if (typeAssertion.isArrayNonEmpty(children)) {
-        if (clickSubMenu) {
-          clickSubMenu(id);
-        }
+        !disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
       } else {
-        if (clickMenu) {
-          // @ts-ignore
-          clickMenu(id, raw);
-        }
+        !disabled && (clickMenu === null || clickMenu === void 0 ? void 0 : clickMenu(id, raw));
 
         if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
           closeAllPopper();
@@ -127,7 +124,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     id: id,
     icon: icon,
     title: title
-  }) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
+  }) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
     prefixCls: prefixCls + "-item",
     direction: "up"
   }) : /*#__PURE__*/React__default["default"].createElement(Arrow, {
@@ -139,14 +136,14 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     prefixCls: prefixCls + "-item"
   }) : null, hasChildren && placement === 'horizontal' && level > 1 ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
     prefixCls: prefixCls + "-item"
-  }) : null, hasChildren && placement === 'horizontal' && level === 1 && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
+  }) : null, hasChildren && placement === 'horizontal' && level === 1 && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
     prefixCls: prefixCls + "-item",
     direction: "up"
   }) : /*#__PURE__*/React__default["default"].createElement(Arrow, {
     prefixCls: prefixCls + "-item",
     direction: "down"
   }))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? /*#__PURE__*/React__default["default"].createElement(Expander.Expander, {
-    visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
+    visible: !disabled && !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: prefixCls + "-submenu"
   }, children.map(function (child) {
@@ -154,7 +151,9 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   }))) : null), hasChildren && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -163,18 +162,18 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     gutterGap: 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   }))) : /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -184,18 +183,18 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     disabledPortal: true,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   })))), hasChildren && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -204,18 +203,18 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     gutterGap: 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   }))) : /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -225,18 +224,18 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     gutterGap: 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   })))), hasChildren && placement === 'vertical' && showAllSubMenus ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -245,9 +244,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     gutterGap: 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls + "-fat-menu"
@@ -262,15 +259,12 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
       return /*#__PURE__*/React__default["default"].createElement("div", {
         onClick: function onClick() {
-          if (clickMenu) {
-            clickMenu(item.id, item);
-          }
-
-          if (closePopper) {
-            closePopper(id);
+          if (!item.disabled) {
+            clickMenu === null || clickMenu === void 0 ? void 0 : clickMenu(item.id, item);
+            closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
           }
         },
-        className: classname.cx(prefixCls + "-item", (_cx3 = {}, _cx3[prefixCls + "-item--active"] = activeId === item.id, _cx3)),
+        className: classname.cx(prefixCls + "-item", (_cx3 = {}, _cx3[prefixCls + "-item--active"] = activeId === item.id, _cx3[prefixCls + "-item--disabled"] = item.disabled, _cx3)),
         key: item.id
       }, item.title);
     })) : null);
@@ -281,18 +275,18 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     gutterGap: level === 1 ? 8 : 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   }))) : /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -302,18 +296,18 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     gutterGap: level === 1 ? 8 : 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   })))), hasChildren && placement === 'horizontal' && showAllSubMenus ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -322,9 +316,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     gutterGap: 8,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls + "-fat-menu"
@@ -338,14 +330,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var _cx4;
 
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classname.cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
+        className: classname.cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4[prefixCls + "-item--disabled"] = item.disabled, _cx4)),
         onClick: function onClick() {
-          if (clickMenu) {
-            clickMenu(item.id, item);
-          }
-
-          if (closePopper) {
-            closePopper(id);
+          if (!item.disabled) {
+            clickMenu === null || clickMenu === void 0 ? void 0 : clickMenu(item.id, item);
+            closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
           }
         },
         key: item.id
@@ -361,7 +350,7 @@ if (env.__DEV__) {
 var Arrow = function Arrow(_ref) {
   var prefixCls = _ref.prefixCls,
       direction = _ref.direction;
-  var icon = null;
+  var icon;
 
   switch (direction) {
     case 'up':

package/lib/cjs/styles/index.scss.js

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px); }.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px); }.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-fat-menu ul {padding: 0;margin: 0; }.hi-v4-menu-fat-menu ul li {list-style-type: none; }.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0; }.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu ul {margin: 0;padding: 0; }.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-menu__wrapper {padding: 0;margin: 0; }.hi-v4-menu--horizontal {width: 100%;overflow: hidden; }.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent; }.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none; }.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s; }.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto; }.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden; }.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu__toggle {width: 40px;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);height: 40px;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color; }.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px; }";
+var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px);}.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);}.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-fat-menu .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed;}.hi-v4-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v4-menu-fat-menu ul li {list-style-type: none;}.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0;}.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed;}.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu ul {margin: 0;padding: 0;}.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed;}.hi-v4-menu__wrapper {padding: 0;margin: 0;}.hi-v4-menu--horizontal {width: 100%;overflow: hidden;}.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent;}.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #c9ced6);}.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden;}.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu__toggle {width: 40px;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);height: 40px;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed;}.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}";
 
 var __styleInject__ = require('style-inject')["default"];
 

package/lib/esm/Menu.js

@@ -12,9 +12,6 @@ import React, { forwardRef, useState, useEffect, useCallback, useMemo, useLayout
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
 import { __DEV__ } from '@hi-ui/env';
-import { MenuItem } from './MenuItem.js';
-import MenuContext from './context.js';
-import { getAncestorIds } from './util.js';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import Tooltip from '@hi-ui/tooltip';
 import { useUncontrolledToggle } from '@hi-ui/use-toggle';
@@ -23,6 +20,9 @@ import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
 import { useResizeObserver } from '@hi-ui/use-resize-observer';
 import { useMergeRefs } from '@hi-ui/use-merge-refs';
 import { uuid } from '@hi-ui/use-id';
+import { MenuItem } from './MenuItem.js';
+import MenuContext from './context.js';
+import { getAncestorIds } from './util.js';
 var MENU_PREFIX = getPrefixCls('menu');
 var DEFAULT_EXPANDED_IDS = [];
 var NOOP_ARRAY = [];
@@ -64,8 +64,12 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       overlayClassName = _a.overlayClassName,
       onCollapse = _a.onCollapse,
       footerRender = _a.footerRender,
+      render = _a.render,
+      extraHeader = _a.extraHeader,
       onClick = _a.onClick,
-      rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "onClick"]);
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'lg' : _a$size,
+      rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
 
   var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
       activeId = _useUncontrolledState[0],
@@ -213,12 +217,12 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     }) : collapseNode);
   };
 
-  var cls = cx(prefixCls, className, prefixCls + "--" + placement, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
+  var cls = cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: useMergeRefs(ref, setContainerElement),
     role: role,
     className: cls
-  }, rest), /*#__PURE__*/React.createElement(MenuContext.Provider, {
+  }, rest), extraHeader, /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: {
       placement: placement,
       expandedType: expandedType,
@@ -243,13 +247,16 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     }, /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, item, {
       level: 1,
       render: renderMenuItemMini,
-      raw: item
+      raw: item,
+      size: size
     }))) : /*#__PURE__*/React.createElement(MenuItem, Object.assign({
       hidden: !showVertical && index >= tagMaxCount
     }, item, {
+      render: render,
       key: item.id,
       level: 1,
-      raw: item
+      raw: item,
+      size: size
     }));
   }), showVertical || restTagList.length === 0 ? null : /*#__PURE__*/React.createElement(MenuItem, {
     key: MENU_MORE_ID,
@@ -270,9 +277,6 @@ if (__DEV__) {
 
 
 var renderMenuItemMini = function renderMenuItemMini(menu) {
-  // if (typeof menu.icon !== 'undefined') {
-  //   return menu.icon
-  // }
   if (typeof menu.title === 'string') {
     return menu.title.substring(0, 1);
   }

package/lib/esm/MenuItem.js

@@ -12,12 +12,12 @@ import React, { forwardRef, useRef, useContext } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { RightOutlined, DownOutlined, UpOutlined } from '@hi-ui/icons';
-import MenuContext from './context.js';
 import Popper from '@hi-ui/popper';
-import { Expander } from './Expander.js';
 import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
 import { times } from '@hi-ui/array-utils';
 import { useMergeRefs } from '@hi-ui/use-merge-refs';
+import MenuContext from './context.js';
+import { Expander } from './Expander.js';
 var MENU_PREFIX = getPrefixCls('menu');
 var hiddenStyle = {
   position: 'absolute',
@@ -43,7 +43,9 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
       hidden = _a$hidden === void 0 ? false : _a$hidden,
       render = _a.render,
       raw = _a.raw,
-      rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw"]);
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'lg' : _a$size,
+      rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw", "size"]);
 
   var itemRef = useRef(null);
 
@@ -73,14 +75,9 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     className: cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2)),
     onClick: function onClick() {
       if (isArrayNonEmpty(children)) {
-        if (clickSubMenu) {
-          clickSubMenu(id);
-        }
+        !disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
       } else {
-        if (clickMenu) {
-          // @ts-ignore
-          clickMenu(id, raw);
-        }
+        !disabled && (clickMenu === null || clickMenu === void 0 ? void 0 : clickMenu(id, raw));
 
         if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
           closeAllPopper();
@@ -98,7 +95,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     id: id,
     icon: icon,
     title: title
-  }) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
+  }) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
     prefixCls: prefixCls + "-item",
     direction: "up"
   }) : /*#__PURE__*/React.createElement(Arrow, {
@@ -110,14 +107,14 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     prefixCls: prefixCls + "-item"
   }) : null, hasChildren && placement === 'horizontal' && level > 1 ? /*#__PURE__*/React.createElement(Arrow, {
     prefixCls: prefixCls + "-item"
-  }) : null, hasChildren && placement === 'horizontal' && level === 1 && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
+  }) : null, hasChildren && placement === 'horizontal' && level === 1 && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
     prefixCls: prefixCls + "-item",
     direction: "up"
   }) : /*#__PURE__*/React.createElement(Arrow, {
     prefixCls: prefixCls + "-item",
     direction: "down"
   }))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? /*#__PURE__*/React.createElement(Expander, {
-    visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
+    visible: !disabled && !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
   }, /*#__PURE__*/React.createElement("ul", {
     className: prefixCls + "-submenu"
   }, children.map(function (child) {
@@ -125,7 +122,9 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   }))) : null), hasChildren && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -134,18 +133,18 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     gutterGap: 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   }))) : /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -155,18 +154,18 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     disabledPortal: true,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   })))), hasChildren && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -175,18 +174,18 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     gutterGap: 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   }))) : /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -196,18 +195,18 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     gutterGap: 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   })))), hasChildren && placement === 'vertical' && showAllSubMenus ? /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -216,9 +215,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     gutterGap: 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "-fat-menu"
@@ -233,15 +230,12 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
 
       return /*#__PURE__*/React.createElement("div", {
         onClick: function onClick() {
-          if (clickMenu) {
-            clickMenu(item.id, item);
-          }
-
-          if (closePopper) {
-            closePopper(id);
+          if (!item.disabled) {
+            clickMenu === null || clickMenu === void 0 ? void 0 : clickMenu(item.id, item);
+            closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
           }
         },
-        className: cx(prefixCls + "-item", (_cx3 = {}, _cx3[prefixCls + "-item--active"] = activeId === item.id, _cx3)),
+        className: cx(prefixCls + "-item", (_cx3 = {}, _cx3[prefixCls + "-item--active"] = activeId === item.id, _cx3[prefixCls + "-item--disabled"] = item.disabled, _cx3)),
         key: item.id
       }, item.title);
     })) : null);
@@ -252,18 +246,18 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     gutterGap: level === 1 ? 8 : 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   }))) : /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -273,18 +267,18 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     gutterGap: level === 1 ? 8 : 16,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu"
+    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
   }, children.map(function (child) {
     return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds,
-      raw: child
+      raw: child,
+      render: render,
+      size: size
     }));
   })))), hasChildren && placement === 'horizontal' && showAllSubMenus ? /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -293,9 +287,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     gutterGap: 8,
     className: overlayClassName,
     onClose: function onClose() {
-      if (closePopper) {
-        closePopper(id);
-      }
+      closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "-fat-menu"
@@ -309,14 +301,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
       var _cx4;
 
       return /*#__PURE__*/React.createElement("div", {
-        className: cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
+        className: cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4[prefixCls + "-item--disabled"] = item.disabled, _cx4)),
         onClick: function onClick() {
-          if (clickMenu) {
-            clickMenu(item.id, item);
-          }
-
-          if (closePopper) {
-            closePopper(id);
+          if (!item.disabled) {
+            clickMenu === null || clickMenu === void 0 ? void 0 : clickMenu(item.id, item);
+            closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
           }
         },
         key: item.id
@@ -332,7 +321,7 @@ if (__DEV__) {
 var Arrow = function Arrow(_ref) {
   var prefixCls = _ref.prefixCls,
       direction = _ref.direction;
-  var icon = null;
+  var icon;
 
   switch (direction) {
     case 'up':

package/lib/esm/styles/index.scss.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from 'style-inject';
-var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px); }.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px); }.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-fat-menu ul {padding: 0;margin: 0; }.hi-v4-menu-fat-menu ul li {list-style-type: none; }.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0; }.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu ul {margin: 0;padding: 0; }.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-menu__wrapper {padding: 0;margin: 0; }.hi-v4-menu--horizontal {width: 100%;overflow: hidden; }.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent; }.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none; }.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s; }.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto; }.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden; }.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu__toggle {width: 40px;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);height: 40px;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color; }.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px; }";
+var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px);}.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);}.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-fat-menu .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed;}.hi-v4-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v4-menu-fat-menu ul li {list-style-type: none;}.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0;}.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu-popmenu .hi-v4-menu-item__inner--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed;}.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu ul {margin: 0;padding: 0;}.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed;}.hi-v4-menu__wrapper {padding: 0;margin: 0;}.hi-v4-menu--horizontal {width: 100%;overflow: hidden;}.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem);}.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent;}.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #c9ced6);}.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden;}.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu__toggle {width: 40px;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);height: 40px;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #c9ced6);cursor: not-allowed;}.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}";
 
 __styleInject__(css_248z);
 

package/lib/types/Menu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HiBaseHTMLProps } from '@hi-ui/core';
+import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
 import { MenuDataItem, MenuFooterRenderProps } from './types';
 /**
  * 菜单
@@ -82,4 +82,16 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
      * 底部渲染器
      */
     footerRender?: (props: MenuFooterRenderProps) => React.ReactNode;
+    /**
+     * 自定义渲染菜单项
+     */
+    render?: (menuItem: MenuDataItem) => React.ReactNode;
+    /**
+     * 额外的头部内容
+     */
+    extraHeader?: React.ReactNode;
+    /**
+     * 设置菜单项的尺寸
+     */
+    size?: HiBaseSizeEnum;
 }

package/lib/types/MenuItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HiBaseHTMLProps } from '@hi-ui/core';
+import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
 import { MenuDataItem } from './types';
 export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement | null>>;
 export interface MenuItemProps extends Omit<HiBaseHTMLProps<'li'>, 'id'> {
@@ -12,4 +12,5 @@ export interface MenuItemProps extends Omit<HiBaseHTMLProps<'li'>, 'id'> {
     parentIds?: React.ReactText[];
     render?: (node: MenuDataItem) => React.ReactNode;
     raw?: MenuDataItem;
+    size?: HiBaseSizeEnum;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/menu",
-  "version": "4.0.9",
+  "version": "4.1.1",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -46,11 +46,11 @@
     "@hi-ui/array-utils": "^4.0.1",
     "@hi-ui/classname": "^4.0.1",
     "@hi-ui/env": "^4.0.1",
-    "@hi-ui/icons": "^4.0.4",
-    "@hi-ui/popper": "^4.0.4",
+    "@hi-ui/icons": "^4.0.14",
+    "@hi-ui/popper": "^4.1.0",
     "@hi-ui/times": "^4.0.1",
     "@hi-ui/tooltip": "^4.0.5",
-    "@hi-ui/tree-utils": "^4.0.2",
+    "@hi-ui/tree-utils": "^4.1.1",
     "@hi-ui/type-assertion": "^4.0.1",
     "@hi-ui/use-id": "^4.0.1",
     "@hi-ui/use-merge-refs": "^4.0.1",