@hi-ui/menu 4.0.0-beta.9 → 4.0.0

package/lib/cjs/Expander.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.

package/lib/cjs/Menu.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
@@ -35,6 +35,18 @@ var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
 
 var Tooltip = require('@hi-ui/tooltip');
 
+var useToggle = require('@hi-ui/use-toggle');
+
+var treeUtils = require('@hi-ui/tree-utils');
+
+var typeAssertion = require('@hi-ui/type-assertion');
+
+var useResizeObserver = require('@hi-ui/use-resize-observer');
+
+var useMergeRefs = require('@hi-ui/use-merge-refs');
+
+var useId = require('@hi-ui/use-id');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -46,83 +58,193 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 
 var MENU_PREFIX = classname.getPrefixCls('menu');
+var DEFAULT_EXPANDED_IDS = [];
+var NOOP_ARRAY = [];
+var MIN_WIDTH = 56;
+var MENU_MORE_ID = "MENU_MORE_" + useId.uuid();
 /**
  * TODO: What is Menu
  */
 
 var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _cx;
-
   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,
-      data = _a.data,
+      _a$data = _a.data,
+      data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
       _a$placement = _a.placement,
       placement = _a$placement === void 0 ? 'vertical' : _a$placement,
-      showCollapse = _a.showCollapse,
+      _a$showCollapse = _a.showCollapse,
+      showCollapse = _a$showCollapse === void 0 ? false : _a$showCollapse,
       _a$expandedType = _a.expandedType,
       expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
       _a$showAllSubMenus = _a.showAllSubMenus,
       showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
-      defaultExpandedIds = _a.defaultExpandedIds,
-      defaultActiveId = _a.defaultActiveId,
-      activeId = _a.activeId,
+      _a$defaultExpandAll = _a.defaultExpandAll,
+      defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
+      _a$defaultExpandedIds = _a.defaultExpandedIds,
+      defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
+      expandedIdsProp = _a.expandedIds,
+      onExpand = _a.onExpand,
+      _a$defaultActiveId = _a.defaultActiveId,
+      defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
+      activeIdProp = _a.activeId,
       onClickSubMenu = _a.onClickSubMenu,
+      collapsed = _a.collapsed,
+      _a$defaultCollapsed = _a.defaultCollapsed,
+      defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
+      onCollapse = _a.onCollapse,
+      footerRender = _a.footerRender,
       onClick = _a.onClick,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "onCollapse", "footerRender", "onClick"]);
 
-  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId || '', activeId, onClick),
-      _activeId = _useUncontrolledState[0],
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
+      activeId = _useUncontrolledState[0],
       updateActiveId = _useUncontrolledState[1];
 
-  var _useState = React.useState(util.getAncestorIds(_activeId, data)),
+  var _useState = React.useState(function () {
+    return util.getAncestorIds(activeId, data);
+  }),
       activeParents = _useState[0],
       updateActiveParents = _useState[1];
 
   React.useEffect(function () {
-    updateActiveParents(util.getAncestorIds(_activeId, data));
-  }, [_activeId, data]);
+    updateActiveParents(util.getAncestorIds(activeId, data));
+  }, [activeId, data]);
 
-  var _useState2 = React.useState(defaultExpandedIds || []),
-      _expandedIds = _useState2[0],
-      updateExpanedIds = _useState2[1];
+  var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(function () {
+    return defaultExpandAll ? treeUtils.getTreeNodesWithChildren(data).map(function (node) {
+      return node.id;
+    }) : defaultExpandedIds;
+  }, expandedIdsProp, onExpand),
+      expandedIds = _useUncontrolledState2[0],
+      updateExpandedIds = _useUncontrolledState2[1];
 
-  var clickMenu = React.useCallback(function (id) {
-    updateActiveId(id);
+  var clickMenu = React.useCallback(function (id, raw) {
+    updateActiveId(id, raw);
   }, [updateActiveId]);
   var clickSubMenu = React.useCallback(function (id) {
-    var expandedIds = _expandedIds.includes(id) ? _expandedIds.filter(function (expandedId) {
+    var nextExpandedIds = expandedIds.includes(id) ? expandedIds.filter(function (expandedId) {
       return expandedId !== id;
-    }) : _expandedIds.concat(id);
-    updateExpanedIds(expandedIds);
+    }) : expandedIds.concat(id);
+    updateExpandedIds(nextExpandedIds);
 
     if (onClickSubMenu) {
-      onClickSubMenu(id, expandedIds);
+      onClickSubMenu(id, nextExpandedIds);
     }
-  }, [onClickSubMenu, _expandedIds]);
+  }, [onClickSubMenu, expandedIds, updateExpandedIds]);
   var closePopper = React.useCallback(function (id) {
-    updateExpanedIds(_expandedIds.filter(function (expandedId) {
+    updateExpandedIds(expandedIds.filter(function (expandedId) {
       return expandedId !== id;
     }));
-  }, [_expandedIds]);
+  }, [expandedIds, updateExpandedIds]);
   var closeAllPopper = React.useCallback(function () {
-    updateExpanedIds([]);
-  }, []);
-
-  var _useState3 = React.useState(false),
-      mini = _useState3[0],
-      setMini = _useState3[1];
-
-  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx[prefixCls + "--popup"] = expandedType === 'pop' || showAllSubMenus || mini, _cx));
-  var onToggle = React.useCallback(function () {
-    setMini(!mini);
-    closeAllPopper();
-  }, [mini, closeAllPopper]);
-  var canToggle = placement === 'vertical' && showCollapse;
+    updateExpandedIds([]);
+  }, [updateExpandedIds]);
+
+  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
+    defaultVisible: defaultCollapsed,
+    visible: collapsed,
+    onToggle: onCollapse
+  }),
+      mini = _useUncontrolledToggl[0],
+      miniToggleAction = _useUncontrolledToggl[1];
+
+  var showVertical = placement === 'vertical';
+  var canToggle = showVertical && showCollapse;
+  var showMini = showVertical && mini;
+
+  var _useState2 = React.useState(null),
+      containerElement = _useState2[0],
+      setContainerElement = _useState2[1];
+
+  var _useState3 = React.useState(),
+      _useState3$ = _useState3[0],
+      containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
+      setContainerWidth = _useState3[1];
+
+  useResizeObserver.useResizeObserver({
+    element: containerElement,
+    disabled: showVertical,
+    getSize: function getSize(element) {
+      var itemRect = element.getBoundingClientRect();
+      return itemRect.width;
+    },
+    onResize: function onResize(el, width) {
+      setContainerWidth(width);
+    }
+  });
+
+  var _useState4 = React.useState(0),
+      tagMaxCount = _useState4[0],
+      setTagMaxCount = _useState4[1];
+
+  var mergedTagList = React.useMemo(function () {
+    if (showVertical) return data;
+    if (containerWidth < MIN_WIDTH) return data;
+    return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
+  }, [showVertical, data, containerWidth]);
+  var restTagList = React.useMemo(function () {
+    if (tagMaxCount > 0) return data.slice(tagMaxCount);
+    return [];
+  }, [data, tagMaxCount]);
+  var getTagWidth = React.useCallback(function (index) {
+    if (!containerElement) return MIN_WIDTH;
+    var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
+    var element = elements && elements[index];
+    if (!element) return MIN_WIDTH;
+    return element.getBoundingClientRect().width;
+  }, [containerElement]);
+  React.useLayoutEffect(function () {
+    if (showVertical) return;
+    var tagMaxCount = 0;
+
+    if (typeAssertion.isArrayNonEmpty(mergedTagList)) {
+      var len = mergedTagList.length;
+      var lastIndex = len - 1;
+      var totalWidth = 72; // 更多
+
+      for (var i = 0; i < len; ++i) {
+        var currentTagWidth = getTagWidth(i);
+
+        if (currentTagWidth === undefined) {
+          break;
+        }
+
+        totalWidth += currentTagWidth;
+
+        if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
+          tagMaxCount = lastIndex;
+          break;
+        } else if (totalWidth > containerWidth) {
+          tagMaxCount = i - 1;
+          break;
+        }
+      }
+    } else {
+      tagMaxCount = 0;
+    } // 保底要展示 1 个
+
+
+    setTagMaxCount(typeAssertion.isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount + 1);
+  }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
+
+  var renderFooter = function renderFooter() {
+    var collapseNode = canToggle ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classname.cx(prefixCls + "__toggle"),
+      onClick: 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({
+      collapsed: showMini,
+      collapseNode: collapseNode
+    }) : collapseNode);
+  };
+
+  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    ref: ref,
+    ref: useMergeRefs.useMergeRefs(ref, setContainerElement),
     role: role,
     className: cls
   }, rest), /*#__PURE__*/React__default["default"].createElement(context["default"].Provider, {
@@ -136,30 +258,55 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       closePopper: closePopper,
       closeAllPopper: closeAllPopper,
       activeParents: activeParents,
-      activeId: _activeId,
-      expandedIds: _expandedIds
+      activeId: activeId,
+      expandedIds: expandedIds
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: classname.cx(prefixCls + "__wrapper")
-  }, data.map(function (item) {
-    return canToggle && mini ? /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
+  }, mergedTagList.map(function (item, index) {
+    return showMini ? /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
       title: item.title,
       key: item.id,
       placement: "right"
     }, /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({}, item, {
-      level: 1
-    }))) : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({}, item, {
+      level: 1,
+      render: renderMenuItemMini,
+      raw: item
+    }))) : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({
+      hidden: !showVertical && index >= tagMaxCount
+    }, item, {
       key: item.id,
-      level: 1
+      level: 1,
+      raw: item
     }));
-  })), canToggle ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classname.cx(prefixCls + "__toggle"),
-    onClick: onToggle
-  }, mini ? /*#__PURE__*/React__default["default"].createElement(icons.MenuUnfoldOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.MenuFoldOutlined, null)) : null));
+  }), showVertical || restTagList.length === 0 ? null : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, {
+    key: MENU_MORE_ID,
+    id: MENU_MORE_ID,
+    title: "\u66F4\u591A",
+    children: restTagList
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__footer"
+  }, renderFooter())));
 });
 
 if (env.__DEV__) {
   Menu.displayName = 'Menu';
 }
+/**
+ * Mini 模式下渲染 item
+ */
+
+
+var renderMenuItemMini = function renderMenuItemMini(menu) {
+  if (typeof menu.icon !== 'undefined') {
+    return menu.icon;
+  }
+
+  if (typeof menu.title === 'string') {
+    return menu.title.substring(0, 1);
+  }
+
+  return menu.title;
+};
 
 exports.Menu = Menu;

package/lib/cjs/MenuItem.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
@@ -48,6 +48,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper);
 
 var MENU_PREFIX = classname.getPrefixCls('menu');
+var hiddenStyle = {
+  position: 'absolute',
+  opacity: 0,
+  order: 9999,
+  visibility: 'hidden'
+};
 var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _cx, _cx2;
 
@@ -62,7 +68,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       level = _a$level === void 0 ? 1 : _a$level,
       children = _a.children,
       parentIds = _a.parentIds,
-      rest = tslib.__rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds"]);
+      _a$hidden = _a.hidden,
+      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"]);
 
   var itemRef = React.useRef(null);
 
@@ -85,7 +95,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var mergedRef = useMergeRefs.useMergeRefs(itemRef, ref);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("li", Object.assign({
     ref: mergedRef,
-    className: classname.cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item__inner--mini"] = mini, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--active"] = placement === 'horizontal' && (activeId === id || (activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id))) && level === 1, _cx), className)
+    className: classname.cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item__inner--mini"] = mini, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--active"] = placement === 'horizontal' && (activeId === id || (activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id))) && level === 1, _cx), className),
+    style: hidden ? hiddenStyle : undefined
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     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() {
@@ -95,7 +106,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         }
       } else {
         if (clickMenu) {
-          clickMenu(id);
+          // @ts-ignore
+          clickMenu(id, raw);
         }
 
         if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
@@ -110,7 +122,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     className: prefixCls + "-item__icon"
   }, icon) : null, /*#__PURE__*/React__default["default"].createElement("span", {
     className: prefixCls + "-item__content"
-  }, title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
+  }, typeAssertion.isFunction(render) ? render({
+    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, {
     prefixCls: prefixCls + "-item",
     direction: "up"
   }) : /*#__PURE__*/React__default["default"].createElement(Arrow, {
@@ -136,7 +152,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
-      parentIds: _parentIds
+      parentIds: _parentIds,
+      raw: child
     }));
   }))) : 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)),
@@ -236,7 +253,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         onClick: function onClick() {
           if (clickMenu) {
-            clickMenu(item.id);
+            clickMenu(item.id, item);
           }
 
           if (closePopper) {
@@ -309,7 +326,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         className: classname.cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
         onClick: function onClick() {
           if (clickMenu) {
-            clickMenu(item.id);
+            clickMenu(item.id, item);
           }
 
           if (closePopper) {

package/lib/cjs/context.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.

package/lib/cjs/index.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.

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

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
@@ -12,9 +12,9 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-menu-fat-menu {\n  background-color: var(--hi-v4-color-static-white, #fff);\n  margin: 0;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  padding: var(--hi-v4-spacing-4, 8px);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  border-radius: var(--hi-v4-border-radius-normal, 4px);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap; }\n.hi-v4-menu-fat-menu__group:not(:last-of-type) {\n    margin-right: var(--hi-v4-spacing-18, 36px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-group-item {\n    height: 40px;\n    margin: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    padding: 0 var(--hi-v4-spacing-6, 12px);\n    color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item {\n    height: 40px;\n    margin: 0;\n    border-radius: var(--hi-v4-border-radius-normal, 4px);\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item--active {\n      color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {\n      background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-fat-menu ul {\n    padding: 0;\n    margin: 0; }\n.hi-v4-menu-fat-menu ul li {\n      list-style-type: none; }\n.hi-v4-menu-popmenu {\n  background-color: var(--hi-v4-color-static-white, #fff);\n  border-radius: var(--hi-v4-border-radius-normal, 4px);\n  margin: 0;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  padding: var(--hi-v4-spacing-4, 8px);\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  width: 216px;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n.hi-v4-menu-popmenu .hi-v4-menu-item {\n    height: 40px;\n    margin: 0; }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner {\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      height: 40px;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin-bottom: var(--hi-v4-spacing-4, 8px);\n      padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);\n      border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__content {\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1;\n              flex: 1 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      padding-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu {\n  background-color: var(--hi-v4-color-static-white, #fff);\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n.hi-v4-menu ul {\n    margin: 0;\n    padding: 0; }\n.hi-v4-menu-item {\n    list-style: none;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    cursor: pointer;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-menu-item__icon {\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      -webkit-margin-end: var(--hi-v4-spacing-4, 8px);\n              margin-inline-end: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {\n        font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu-item__arrow {\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu-item__indent {\n      display: inline-block;\n      width: 24px;\n      height: 100%;\n      -ms-flex-negative: 0;\n          flex-shrink: 0; }\n.hi-v4-menu__wrapper {\n    padding: 0;\n    margin: 0; }\n.hi-v4-menu--horizontal {\n    width: 100%;\n    overflow-x: auto; }\n.hi-v4-menu--horizontal .hi-v4-menu__wrapper {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      overflow: visible;\n      width: -webkit-max-content;\n      width: -moz-max-content;\n      width: max-content;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box; }\n.hi-v4-menu--horizontal .hi-v4-menu-item {\n      margin: 0 var(--hi-v4-spacing-10, 20px);\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      height: 56px;\n      border: none;\n      font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {\n        -webkit-margin-start: var(--hi-v4-spacing-2, 4px);\n                margin-inline-start: var(--hi-v4-spacing-2, 4px); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {\n          border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {\n          border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner {\n        height: 100%;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n        border-bottom: 2px solid transparent; }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {\n          border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__content {\n        -webkit-box-flex: 1;\n            -ms-flex: 1 1;\n                flex: 1 1;\n        white-space: nowrap;\n        max-width: none; }\n.hi-v4-menu--vertical {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    padding: var(--hi-v4-spacing-4, 8px);\n    width: 216px;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    height: 100%;\n    -webkit-transition: width 0.3s;\n    transition: width 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu__wrapper {\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1;\n              flex: 1 1;\n      overflow: auto; }\n.hi-v4-menu--vertical.hi-v4-menu--mini {\n      width: 56px;\n      overflow-x: hidden; }\n.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {\n      background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu__toggle {\n      width: 40px;\n      cursor: pointer;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      height: 40px; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner {\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      height: 40px;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin-bottom: var(--hi-v4-spacing-4, 8px);\n      padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__content {\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1;\n              flex: 1 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      text-indent: 0.5px; }\n";
+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 __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
+var __styleInject__ = require('inject-head-style')["default"];
 
 __styleInject__(css_248z);
 

package/lib/cjs/util.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.

package/lib/esm/Expander.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.

package/lib/esm/Menu.js

@@ -2,13 +2,13 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useState, useEffect, useCallback } from 'react';
+import React, { forwardRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
 import { __DEV__ } from '@hi-ui/env';
@@ -17,84 +17,200 @@ 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';
+import { getTreeNodesWithChildren } from '@hi-ui/tree-utils';
+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';
 var MENU_PREFIX = getPrefixCls('menu');
+var DEFAULT_EXPANDED_IDS = [];
+var NOOP_ARRAY = [];
+var MIN_WIDTH = 56;
+var MENU_MORE_ID = "MENU_MORE_" + uuid();
 /**
  * TODO: What is Menu
  */
 
 var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _cx;
-
   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,
-      data = _a.data,
+      _a$data = _a.data,
+      data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
       _a$placement = _a.placement,
       placement = _a$placement === void 0 ? 'vertical' : _a$placement,
-      showCollapse = _a.showCollapse,
+      _a$showCollapse = _a.showCollapse,
+      showCollapse = _a$showCollapse === void 0 ? false : _a$showCollapse,
       _a$expandedType = _a.expandedType,
       expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
       _a$showAllSubMenus = _a.showAllSubMenus,
       showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
-      defaultExpandedIds = _a.defaultExpandedIds,
-      defaultActiveId = _a.defaultActiveId,
-      activeId = _a.activeId,
+      _a$defaultExpandAll = _a.defaultExpandAll,
+      defaultExpandAll = _a$defaultExpandAll === void 0 ? false : _a$defaultExpandAll,
+      _a$defaultExpandedIds = _a.defaultExpandedIds,
+      defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
+      expandedIdsProp = _a.expandedIds,
+      onExpand = _a.onExpand,
+      _a$defaultActiveId = _a.defaultActiveId,
+      defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
+      activeIdProp = _a.activeId,
       onClickSubMenu = _a.onClickSubMenu,
+      collapsed = _a.collapsed,
+      _a$defaultCollapsed = _a.defaultCollapsed,
+      defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
+      onCollapse = _a.onCollapse,
+      footerRender = _a.footerRender,
       onClick = _a.onClick,
-      rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
+      rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "onCollapse", "footerRender", "onClick"]);
 
-  var _useUncontrolledState = useUncontrolledState(defaultActiveId || '', activeId, onClick),
-      _activeId = _useUncontrolledState[0],
+  var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
+      activeId = _useUncontrolledState[0],
       updateActiveId = _useUncontrolledState[1];
 
-  var _useState = useState(getAncestorIds(_activeId, data)),
+  var _useState = useState(function () {
+    return getAncestorIds(activeId, data);
+  }),
       activeParents = _useState[0],
       updateActiveParents = _useState[1];
 
   useEffect(function () {
-    updateActiveParents(getAncestorIds(_activeId, data));
-  }, [_activeId, data]);
+    updateActiveParents(getAncestorIds(activeId, data));
+  }, [activeId, data]);
 
-  var _useState2 = useState(defaultExpandedIds || []),
-      _expandedIds = _useState2[0],
-      updateExpanedIds = _useState2[1];
+  var _useUncontrolledState2 = useUncontrolledState(function () {
+    return defaultExpandAll ? getTreeNodesWithChildren(data).map(function (node) {
+      return node.id;
+    }) : defaultExpandedIds;
+  }, expandedIdsProp, onExpand),
+      expandedIds = _useUncontrolledState2[0],
+      updateExpandedIds = _useUncontrolledState2[1];
 
-  var clickMenu = useCallback(function (id) {
-    updateActiveId(id);
+  var clickMenu = useCallback(function (id, raw) {
+    updateActiveId(id, raw);
   }, [updateActiveId]);
   var clickSubMenu = useCallback(function (id) {
-    var expandedIds = _expandedIds.includes(id) ? _expandedIds.filter(function (expandedId) {
+    var nextExpandedIds = expandedIds.includes(id) ? expandedIds.filter(function (expandedId) {
       return expandedId !== id;
-    }) : _expandedIds.concat(id);
-    updateExpanedIds(expandedIds);
+    }) : expandedIds.concat(id);
+    updateExpandedIds(nextExpandedIds);
 
     if (onClickSubMenu) {
-      onClickSubMenu(id, expandedIds);
+      onClickSubMenu(id, nextExpandedIds);
     }
-  }, [onClickSubMenu, _expandedIds]);
+  }, [onClickSubMenu, expandedIds, updateExpandedIds]);
   var closePopper = useCallback(function (id) {
-    updateExpanedIds(_expandedIds.filter(function (expandedId) {
+    updateExpandedIds(expandedIds.filter(function (expandedId) {
       return expandedId !== id;
     }));
-  }, [_expandedIds]);
+  }, [expandedIds, updateExpandedIds]);
   var closeAllPopper = useCallback(function () {
-    updateExpanedIds([]);
-  }, []);
-
-  var _useState3 = useState(false),
-      mini = _useState3[0],
-      setMini = _useState3[1];
-
-  var cls = cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx[prefixCls + "--popup"] = expandedType === 'pop' || showAllSubMenus || mini, _cx));
-  var onToggle = useCallback(function () {
-    setMini(!mini);
-    closeAllPopper();
-  }, [mini, closeAllPopper]);
-  var canToggle = placement === 'vertical' && showCollapse;
+    updateExpandedIds([]);
+  }, [updateExpandedIds]);
+
+  var _useUncontrolledToggl = useUncontrolledToggle({
+    defaultVisible: defaultCollapsed,
+    visible: collapsed,
+    onToggle: onCollapse
+  }),
+      mini = _useUncontrolledToggl[0],
+      miniToggleAction = _useUncontrolledToggl[1];
+
+  var showVertical = placement === 'vertical';
+  var canToggle = showVertical && showCollapse;
+  var showMini = showVertical && mini;
+
+  var _useState2 = useState(null),
+      containerElement = _useState2[0],
+      setContainerElement = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState3$ = _useState3[0],
+      containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
+      setContainerWidth = _useState3[1];
+
+  useResizeObserver({
+    element: containerElement,
+    disabled: showVertical,
+    getSize: function getSize(element) {
+      var itemRect = element.getBoundingClientRect();
+      return itemRect.width;
+    },
+    onResize: function onResize(el, width) {
+      setContainerWidth(width);
+    }
+  });
+
+  var _useState4 = useState(0),
+      tagMaxCount = _useState4[0],
+      setTagMaxCount = _useState4[1];
+
+  var mergedTagList = useMemo(function () {
+    if (showVertical) return data;
+    if (containerWidth < MIN_WIDTH) return data;
+    return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
+  }, [showVertical, data, containerWidth]);
+  var restTagList = useMemo(function () {
+    if (tagMaxCount > 0) return data.slice(tagMaxCount);
+    return [];
+  }, [data, tagMaxCount]);
+  var getTagWidth = useCallback(function (index) {
+    if (!containerElement) return MIN_WIDTH;
+    var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
+    var element = elements && elements[index];
+    if (!element) return MIN_WIDTH;
+    return element.getBoundingClientRect().width;
+  }, [containerElement]);
+  useLayoutEffect(function () {
+    if (showVertical) return;
+    var tagMaxCount = 0;
+
+    if (isArrayNonEmpty(mergedTagList)) {
+      var len = mergedTagList.length;
+      var lastIndex = len - 1;
+      var totalWidth = 72; // 更多
+
+      for (var i = 0; i < len; ++i) {
+        var currentTagWidth = getTagWidth(i);
+
+        if (currentTagWidth === undefined) {
+          break;
+        }
+
+        totalWidth += currentTagWidth;
+
+        if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
+          tagMaxCount = lastIndex;
+          break;
+        } else if (totalWidth > containerWidth) {
+          tagMaxCount = i - 1;
+          break;
+        }
+      }
+    } else {
+      tagMaxCount = 0;
+    } // 保底要展示 1 个
+
+
+    setTagMaxCount(isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount + 1);
+  }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
+
+  var renderFooter = function renderFooter() {
+    var collapseNode = canToggle ? /*#__PURE__*/React.createElement("div", {
+      className: cx(prefixCls + "__toggle"),
+      onClick: miniToggleAction.not
+    }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null)) : null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isFunction(footerRender) ? footerRender({
+      collapsed: showMini,
+      collapseNode: collapseNode
+    }) : collapseNode);
+  };
+
+  var cls = cx(prefixCls, className, prefixCls + "--" + placement, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
   return /*#__PURE__*/React.createElement("div", Object.assign({
-    ref: ref,
+    ref: useMergeRefs(ref, setContainerElement),
     role: role,
     className: cls
   }, rest), /*#__PURE__*/React.createElement(MenuContext.Provider, {
@@ -108,30 +224,55 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       closePopper: closePopper,
       closeAllPopper: closeAllPopper,
       activeParents: activeParents,
-      activeId: _activeId,
-      expandedIds: _expandedIds
+      activeId: activeId,
+      expandedIds: expandedIds
     }
   }, /*#__PURE__*/React.createElement("ul", {
     className: cx(prefixCls + "__wrapper")
-  }, data.map(function (item) {
-    return canToggle && mini ? /*#__PURE__*/React.createElement(Tooltip, {
+  }, mergedTagList.map(function (item, index) {
+    return showMini ? /*#__PURE__*/React.createElement(Tooltip, {
       title: item.title,
       key: item.id,
       placement: "right"
     }, /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, item, {
-      level: 1
-    }))) : /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, item, {
+      level: 1,
+      render: renderMenuItemMini,
+      raw: item
+    }))) : /*#__PURE__*/React.createElement(MenuItem, Object.assign({
+      hidden: !showVertical && index >= tagMaxCount
+    }, item, {
       key: item.id,
-      level: 1
+      level: 1,
+      raw: item
     }));
-  })), canToggle ? /*#__PURE__*/React.createElement("div", {
-    className: cx(prefixCls + "__toggle"),
-    onClick: onToggle
-  }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null)) : null));
+  }), showVertical || restTagList.length === 0 ? null : /*#__PURE__*/React.createElement(MenuItem, {
+    key: MENU_MORE_ID,
+    id: MENU_MORE_ID,
+    title: "\u66F4\u591A",
+    children: restTagList
+  })), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer"
+  }, renderFooter())));
 });
 
 if (__DEV__) {
   Menu.displayName = 'Menu';
 }
+/**
+ * Mini 模式下渲染 item
+ */
+
+
+var renderMenuItemMini = function renderMenuItemMini(menu) {
+  if (typeof menu.icon !== 'undefined') {
+    return menu.icon;
+  }
+
+  if (typeof menu.title === 'string') {
+    return menu.title.substring(0, 1);
+  }
+
+  return menu.title;
+};
 
 export { Menu };

package/lib/esm/MenuItem.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
@@ -15,10 +15,16 @@ 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 } from '@hi-ui/type-assertion';
+import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
 import { times } from '@hi-ui/array-utils';
 import { useMergeRefs } from '@hi-ui/use-merge-refs';
 var MENU_PREFIX = getPrefixCls('menu');
+var hiddenStyle = {
+  position: 'absolute',
+  opacity: 0,
+  order: 9999,
+  visibility: 'hidden'
+};
 var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _cx, _cx2;
 
@@ -33,7 +39,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
       level = _a$level === void 0 ? 1 : _a$level,
       children = _a.children,
       parentIds = _a.parentIds,
-      rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds"]);
+      _a$hidden = _a.hidden,
+      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"]);
 
   var itemRef = useRef(null);
 
@@ -56,7 +66,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var mergedRef = useMergeRefs(itemRef, ref);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", Object.assign({
     ref: mergedRef,
-    className: cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item__inner--mini"] = mini, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--active"] = placement === 'horizontal' && (activeId === id || (activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id))) && level === 1, _cx), className)
+    className: cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item__inner--mini"] = mini, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--active"] = placement === 'horizontal' && (activeId === id || (activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id))) && level === 1, _cx), className),
+    style: hidden ? hiddenStyle : undefined
   }, rest), /*#__PURE__*/React.createElement("div", {
     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() {
@@ -66,7 +77,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
         }
       } else {
         if (clickMenu) {
-          clickMenu(id);
+          // @ts-ignore
+          clickMenu(id, raw);
         }
 
         if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
@@ -81,7 +93,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     className: prefixCls + "-item__icon"
   }, icon) : null, /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "-item__content"
-  }, title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
+  }, isFunction(render) ? render({
+    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, {
     prefixCls: prefixCls + "-item",
     direction: "up"
   }) : /*#__PURE__*/React.createElement(Arrow, {
@@ -107,7 +123,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
-      parentIds: _parentIds
+      parentIds: _parentIds,
+      raw: child
     }));
   }))) : 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)),
@@ -207,7 +224,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
       return /*#__PURE__*/React.createElement("div", {
         onClick: function onClick() {
           if (clickMenu) {
-            clickMenu(item.id);
+            clickMenu(item.id, item);
           }
 
           if (closePopper) {
@@ -280,7 +297,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
         className: cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
         onClick: function onClick() {
           if (clickMenu) {
-            clickMenu(item.id);
+            clickMenu(item.id, item);
           }
 
           if (closePopper) {

package/lib/esm/context.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.

package/lib/esm/index.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.

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

@@ -2,14 +2,13 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.
  */
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-menu-fat-menu {\n  background-color: var(--hi-v4-color-static-white, #fff);\n  margin: 0;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  padding: var(--hi-v4-spacing-4, 8px);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  border-radius: var(--hi-v4-border-radius-normal, 4px);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap; }\n.hi-v4-menu-fat-menu__group:not(:last-of-type) {\n    margin-right: var(--hi-v4-spacing-18, 36px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-group-item {\n    height: 40px;\n    margin: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    padding: 0 var(--hi-v4-spacing-6, 12px);\n    color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item {\n    height: 40px;\n    margin: 0;\n    border-radius: var(--hi-v4-border-radius-normal, 4px);\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item--active {\n      color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {\n      background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-fat-menu ul {\n    padding: 0;\n    margin: 0; }\n.hi-v4-menu-fat-menu ul li {\n      list-style-type: none; }\n.hi-v4-menu-popmenu {\n  background-color: var(--hi-v4-color-static-white, #fff);\n  border-radius: var(--hi-v4-border-radius-normal, 4px);\n  margin: 0;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  padding: var(--hi-v4-spacing-4, 8px);\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  width: 216px;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n.hi-v4-menu-popmenu .hi-v4-menu-item {\n    height: 40px;\n    margin: 0; }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner {\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      height: 40px;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin-bottom: var(--hi-v4-spacing-4, 8px);\n      padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);\n      border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__content {\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1;\n              flex: 1 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      padding-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu {\n  background-color: var(--hi-v4-color-static-white, #fff);\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n.hi-v4-menu ul {\n    margin: 0;\n    padding: 0; }\n.hi-v4-menu-item {\n    list-style: none;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    cursor: pointer;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-menu-item__icon {\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      -webkit-margin-end: var(--hi-v4-spacing-4, 8px);\n              margin-inline-end: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {\n        font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu-item__arrow {\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu-item__indent {\n      display: inline-block;\n      width: 24px;\n      height: 100%;\n      -ms-flex-negative: 0;\n          flex-shrink: 0; }\n.hi-v4-menu__wrapper {\n    padding: 0;\n    margin: 0; }\n.hi-v4-menu--horizontal {\n    width: 100%;\n    overflow-x: auto; }\n.hi-v4-menu--horizontal .hi-v4-menu__wrapper {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      overflow: visible;\n      width: -webkit-max-content;\n      width: -moz-max-content;\n      width: max-content;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box; }\n.hi-v4-menu--horizontal .hi-v4-menu-item {\n      margin: 0 var(--hi-v4-spacing-10, 20px);\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      height: 56px;\n      border: none;\n      font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {\n        -webkit-margin-start: var(--hi-v4-spacing-2, 4px);\n                margin-inline-start: var(--hi-v4-spacing-2, 4px); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {\n          border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {\n          border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner {\n        height: 100%;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n        border-bottom: 2px solid transparent; }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {\n          border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__content {\n        -webkit-box-flex: 1;\n            -ms-flex: 1 1;\n                flex: 1 1;\n        white-space: nowrap;\n        max-width: none; }\n.hi-v4-menu--vertical {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    padding: var(--hi-v4-spacing-4, 8px);\n    width: 216px;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    height: 100%;\n    -webkit-transition: width 0.3s;\n    transition: width 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu__wrapper {\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1;\n              flex: 1 1;\n      overflow: auto; }\n.hi-v4-menu--vertical.hi-v4-menu--mini {\n      width: 56px;\n      overflow-x: hidden; }\n.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {\n      background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu__toggle {\n      width: 40px;\n      cursor: pointer;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      height: 40px; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner {\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      height: 40px;\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin-bottom: var(--hi-v4-spacing-4, 8px);\n      padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__content {\n      -webkit-box-flex: 1;\n          -ms-flex: 1 1;\n              flex: 1 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      text-indent: 0.5px; }\n";
-
-var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
+import __styleInject__ from 'inject-head-style';
+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; }";
 
 __styleInject__(css_248z);
 

package/lib/esm/util.js

@@ -2,7 +2,7 @@
  * @hi-ui/menu
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * 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.

package/lib/types/Menu.d.ts

@@ -1,23 +1,85 @@
 import React from 'react';
 import { HiBaseHTMLProps } from '@hi-ui/core';
-import { MenuDataItem } from './types';
+import { MenuDataItem, MenuFooterRenderProps } from './types';
 /**
  * TODO: What is Menu
  */
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
+    /**
+     * 菜单项数据列表
+     */
     data: MenuDataItem[];
+    /**
+     * 默认激活的菜单项 id
+     */
+    defaultActiveId?: React.ReactText;
+    /**
+     * 激活的菜单项 id
+     */
     activeId?: React.ReactText;
+    /**
+     * 设置菜单水平或垂直展示
+     */
     placement?: 'horizontal' | 'vertical';
+    /**
+     * 是否收起子菜单，菜单垂直展示时有效
+     */
     collapsed?: boolean;
+    /**
+     * 默认是否收起子菜单，菜单垂直展示时有效
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * 是否显示收缩开关，菜单垂直展示时有效
+     */
     showCollapse?: boolean;
+    /**
+     * 是否以胖菜单的形式展开所有子菜单（仅在水平菜单时有效）
+     */
     showAllSubMenus?: boolean;
+    /**
+     * 手风琴模式，菜单水平展示时有效
+     */
     accordion?: boolean;
-    onClick?: (menuId: React.ReactText) => void;
-    onClickSubMenu?: (subMenuId: React.ReactText, expandedIds: React.ReactText[]) => void;
-    onCollapse?: (collapsed: boolean) => void;
+    /**
+     * 下拉框根类名
+     */
     overlayClassName?: string;
+    /**
+     * 弹出层展开方式
+     */
     expandedType?: 'collapse' | 'pop';
+    /**
+     * 首次渲染默认展开所有菜单项，为非受控模式
+     */
+    defaultExpandAll?: boolean;
+    /**
+     * 首次渲染默认展开菜单项 ids 列表，为非受控模式
+     */
     defaultExpandedIds?: React.ReactText[];
-    defaultActiveId?: React.ReactText;
+    /**
+     * 展开菜单项 ids 列表，开启受控
+     */
+    expandedIds?: React.ReactText[];
+    /**
+     * 展开菜单时回调
+     */
+    onExpand?: (expandedIds: React.ReactText[]) => void;
+    /**
+     * 点击菜单选项时的回调
+     */
+    onClick?: (menuId: React.ReactText, menuItem: MenuDataItem) => void;
+    /**
+     * 点击父菜单项时的回调
+     */
+    onClickSubMenu?: (subMenuId: React.ReactText, expandedIds: React.ReactText[]) => void;
+    /**
+     * 点击收缩开关时的回调
+     */
+    onCollapse?: (collapsed: boolean) => void;
+    /**
+     * 底部渲染器
+     */
+    footerRender?: (props: MenuFooterRenderProps) => React.ReactNode;
 }

package/lib/types/MenuItem.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
 import { HiBaseHTMLProps } 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'> {
     id: React.ReactText;
     title: React.ReactNode;
     icon?: React.ReactNode;
     disabled?: boolean;
-    children?: MenuItemProps[];
+    children?: MenuDataItem[];
     level?: number;
     parentIds?: React.ReactText[];
+    render?: (node: MenuDataItem) => React.ReactNode;
+    raw?: MenuDataItem;
 }

package/lib/types/context.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MenuDataItem } from './types';
 declare const MenuContext: React.Context<{
     placement?: "vertical" | "horizontal" | undefined;
     expandedType?: "collapse" | "pop" | undefined;
@@ -7,7 +8,7 @@ declare const MenuContext: React.Context<{
     expandedIds?: React.ReactText[] | undefined;
     activeId?: React.ReactText | undefined;
     activeParents?: React.ReactText[] | undefined;
-    clickMenu?: ((id: React.ReactText) => void) | undefined;
+    clickMenu?: ((id: React.ReactText, raw: MenuDataItem) => void) | undefined;
     clickSubMenu?: ((id: React.ReactText) => void) | undefined;
     closePopper?: ((id: React.ReactText) => void) | undefined;
     closeAllPopper?: (() => void) | undefined;

package/lib/types/types.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 export interface MenuDataItem {
     /**
-     * 节点唯一 id
+     * 菜单项唯一标识
      */
     id: React.ReactText;
     /**
-     * 节点标题
+     * 菜单项标题
      */
     title: React.ReactNode;
     /**
@@ -21,3 +21,13 @@ export interface MenuDataItem {
      */
     children?: MenuDataItem[];
 }
+export interface MenuFooterRenderProps {
+    /**
+     * 当前菜单收起状态
+     */
+    collapsed?: boolean;
+    /**
+     * 当前菜单收缩控制器节点
+     */
+    collapseNode?: React.ReactNode;
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@hi-ui/menu",
-  "version": "4.0.0-beta.9",
+  "version": "4.0.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
-  "author": "HIUI <mi-hiui@xiaomi.com>",
+  "author": "HiUI <mi-hiui@xiaomi.com>",
   "homepage": "https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme",
   "license": "MIT",
   "directories": {
@@ -43,28 +43,33 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/array-utils": "^4.0.0-beta.5",
-    "@hi-ui/classname": "^4.0.0-beta.0",
-    "@hi-ui/core": "^4.0.0-beta.4",
-    "@hi-ui/core-css": "^4.0.0-beta.3",
-    "@hi-ui/env": "^4.0.0-beta.0",
-    "@hi-ui/icons": "^4.0.0-beta.6",
-    "@hi-ui/popper": "^4.0.0-beta.7",
-    "@hi-ui/times": "^4.0.0-beta.3",
-    "@hi-ui/tooltip": "^4.0.0-beta.10",
-    "@hi-ui/type-assertion": "^4.0.0-beta.2",
-    "@hi-ui/use-merge-refs": "^4.0.0-beta.2",
-    "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.2",
+    "@hi-ui/array-utils": "^4.0.0",
+    "@hi-ui/classname": "^4.0.0",
+    "@hi-ui/env": "^4.0.0",
+    "@hi-ui/icons": "^4.0.0",
+    "@hi-ui/popper": "^4.0.0",
+    "@hi-ui/times": "^4.0.0",
+    "@hi-ui/tooltip": "^4.0.0",
+    "@hi-ui/tree-utils": "^4.0.0",
+    "@hi-ui/type-assertion": "^4.0.0",
+    "@hi-ui/use-id": "^4.0.0",
+    "@hi-ui/use-merge-refs": "^4.0.0",
+    "@hi-ui/use-resize-observer": "^4.0.0",
+    "@hi-ui/use-toggle": "^4.0.0",
+    "@hi-ui/use-uncontrolled-state": "^4.0.0",
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
+    "@hi-ui/core": ">=4.0.0",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/hi-build": "^4.0.0-beta.2",
+    "@hi-ui/core": "^4.0.0",
+    "@hi-ui/core-css": "^4.0.0",
+    "@hi-ui/hi-build": "^4.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "ee153a74347825eed55297d5b55459823f2b6f58"
+  "gitHead": "3530e4f3c0b4394b91d66a4aa749579708ebff84"
 }