@hi-ui/menu 4.1.2 → 4.1.4

package/lib/esm/Menu.js

@@ -31,68 +31,62 @@ var MENU_MORE_ID = "MENU_MORE_" + uuid();
 /**
  * 菜单
  */
-
 var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   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,
-      _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,
-      _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,
-      _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,
-      overlayClassName = _a.overlayClassName,
-      onCollapse = _a.onCollapse,
-      footerRender = _a.footerRender,
-      render = _a.render,
-      extraHeader = _a.extraHeader,
-      onClick = _a.onClick,
-      _a$size = _a.size,
-      size = _a$size === void 0 ? 'lg' : _a$size,
-      rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
-
+    prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'menu' : _a$role,
+    className = _a.className,
+    _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,
+    _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,
+    _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,
+    overlayClassName = _a.overlayClassName,
+    onCollapse = _a.onCollapse,
+    footerRender = _a.footerRender,
+    render = _a.render,
+    extraHeader = _a.extraHeader,
+    onClick = _a.onClick,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? 'lg' : _a$size,
+    rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
   var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
-      activeId = _useUncontrolledState[0],
-      updateActiveId = _useUncontrolledState[1];
-
+    activeId = _useUncontrolledState[0],
+    updateActiveId = _useUncontrolledState[1];
   var _useState = useState(function () {
-    return getAncestorIds(activeId, data);
-  }),
-      activeParents = _useState[0],
-      updateActiveParents = _useState[1];
-
+      return getAncestorIds(activeId, data);
+    }),
+    activeParents = _useState[0],
+    updateActiveParents = _useState[1];
   useEffect(function () {
     updateActiveParents(getAncestorIds(activeId, data));
   }, [activeId, data]);
-
   var _useUncontrolledState2 = useUncontrolledState(function () {
-    return defaultExpandAll ? getTreeNodesWithChildren(data).map(function (node) {
-      return node.id;
-    }) : defaultExpandedIds;
-  }, expandedIdsProp, onExpand),
-      expandedIds = _useUncontrolledState2[0],
-      updateExpandedIds = _useUncontrolledState2[1];
-
+      return defaultExpandAll ? getTreeNodesWithChildren(data).map(function (node) {
+        return node.id;
+      }) : defaultExpandedIds;
+    }, expandedIdsProp, onExpand),
+    expandedIds = _useUncontrolledState2[0],
+    updateExpandedIds = _useUncontrolledState2[1];
   var clickMenu = useCallback(function (id, raw) {
     updateActiveId(id, raw);
   }, [updateActiveId]);
@@ -101,7 +95,6 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       return expandedId !== id;
     }) : expandedIds.concat(id);
     updateExpandedIds(nextExpandedIds);
-
     if (onClickSubMenu) {
       onClickSubMenu(id, nextExpandedIds);
     }
@@ -114,28 +107,23 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   var closeAllPopper = useCallback(function () {
     updateExpandedIds([]);
   }, [updateExpandedIds]);
-
   var _useUncontrolledToggl = useUncontrolledToggle({
-    defaultVisible: defaultCollapsed,
-    visible: collapsed,
-    onToggle: onCollapse
-  }),
-      mini = _useUncontrolledToggl[0],
-      miniToggleAction = _useUncontrolledToggl[1];
-
+      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];
-
+    containerElement = _useState2[0],
+    setContainerElement = _useState2[1];
   var _useState3 = useState(),
-      _useState3$ = _useState3[0],
-      containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
-      setContainerWidth = _useState3[1];
-
+    _useState3$ = _useState3[0],
+    containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
+    setContainerWidth = _useState3[1];
   useResizeObserver({
     element: containerElement,
     disabled: showVertical,
@@ -147,11 +135,9 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       setContainerWidth(width);
     }
   });
-
   var _useState4 = useState(0),
-      tagMaxCount = _useState4[0],
-      setTagMaxCount = _useState4[1];
-
+    tagMaxCount = _useState4[0],
+    setTagMaxCount = _useState4[1];
   var mergedTagList = useMemo(function () {
     if (showVertical) return data;
     if (containerWidth < MIN_WIDTH) return data;
@@ -171,21 +157,16 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   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;
@@ -196,18 +177,16 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       }
     } else {
       tagMaxCount = 0;
-    } // 保底要展示 1 个
-
-
+    }
+    // 保底要展示 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: function onClick() {
-        miniToggleAction.not(); // 关闭所有展开的子菜单，防止切换到 mini 模式后，子菜单还是展开的
-
+        miniToggleAction.not();
+        // 关闭所有展开的子菜单，防止切换到 mini 模式后，子菜单还是展开的
         updateExpandedIds([]);
       }
     }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null)) : null;
@@ -216,7 +195,13 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       collapseNode: collapseNode
     }) : collapseNode);
   };
-
+  var renderItem = useCallback(function (menuItem, level) {
+    // 显示缩略内容
+    if (showMini && level === 1) {
+      return renderMenuItemMini(menuItem);
+    }
+    return isFunction(render) ? render(menuItem, level) : menuItem.title;
+  }, [render, showMini]);
   var cls = cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: useMergeRefs(ref, setContainerElement),
@@ -246,13 +231,13 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       placement: "right"
     }, /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, item, {
       level: 1,
-      render: renderMenuItemMini,
+      render: renderItem,
       raw: item,
       size: size
     }))) : /*#__PURE__*/React.createElement(MenuItem, Object.assign({
       hidden: !showVertical && index >= tagMaxCount
     }, item, {
-      render: render,
+      render: renderItem,
       key: item.id,
       level: 1,
       raw: item,
@@ -267,21 +252,16 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     className: prefixCls + "__footer"
   }, renderFooter())));
 });
-
 if (__DEV__) {
   Menu.displayName = 'Menu';
 }
 /**
  * Mini 模式下渲染 item
  */
-
-
 var renderMenuItemMini = function renderMenuItemMini(menu) {
   if (typeof menu.title === 'string') {
     return menu.title.substring(0, 1);
   }
-
   return menu.title;
 };
-
 export { Menu };

package/lib/esm/MenuItem.js

@@ -27,44 +27,39 @@ var hiddenStyle = {
 };
 var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _cx, _cx2;
-
   var _a$prefixCls = _a.prefixCls,
-      prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
-      className = _a.className,
-      icon = _a.icon,
-      title = _a.title,
-      disabled = _a.disabled,
-      id = _a.id,
-      _a$level = _a.level,
-      level = _a$level === void 0 ? 1 : _a$level,
-      children = _a.children,
-      parentIds = _a.parentIds,
-      _a$hidden = _a.hidden,
-      hidden = _a$hidden === void 0 ? false : _a$hidden,
-      render = _a.render,
-      raw = _a.raw,
-      _a$size = _a.size,
-      size = _a$size === void 0 ? 'lg' : _a$size,
-      rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw", "size"]);
-
+    prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
+    className = _a.className,
+    icon = _a.icon,
+    title = _a.title,
+    disabled = _a.disabled,
+    id = _a.id,
+    _a$level = _a.level,
+    level = _a$level === void 0 ? 1 : _a$level,
+    children = _a.children,
+    parentIds = _a.parentIds,
+    _a$hidden = _a.hidden,
+    hidden = _a$hidden === void 0 ? false : _a$hidden,
+    render = _a.render,
+    raw = _a.raw,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? 'lg' : _a$size,
+    rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw", "size"]);
   var itemRef = useRef(null);
-
   var _useContext = useContext(MenuContext),
-      placement = _useContext.placement,
-      expandedType = _useContext.expandedType,
-      showAllSubMenus = _useContext.showAllSubMenus,
-      mini = _useContext.mini,
-      activeId = _useContext.activeId,
-      closePopper = _useContext.closePopper,
-      expandedIds = _useContext.expandedIds,
-      clickMenu = _useContext.clickMenu,
-      clickSubMenu = _useContext.clickSubMenu,
-      closeAllPopper = _useContext.closeAllPopper,
-      activeParents = _useContext.activeParents,
-      overlayClassName = _useContext.overlayClassName;
-
+    placement = _useContext.placement,
+    expandedType = _useContext.expandedType,
+    showAllSubMenus = _useContext.showAllSubMenus,
+    mini = _useContext.mini,
+    activeId = _useContext.activeId,
+    closePopper = _useContext.closePopper,
+    expandedIds = _useContext.expandedIds,
+    clickMenu = _useContext.clickMenu,
+    clickSubMenu = _useContext.clickSubMenu,
+    closeAllPopper = _useContext.closeAllPopper,
+    activeParents = _useContext.activeParents,
+    overlayClassName = _useContext.overlayClassName;
   var _parentIds = (parentIds || []).concat(id);
-
   var hasChildren = isArrayNonEmpty(children);
   var mergedRef = useMergeRefs(itemRef, ref);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", Object.assign({
@@ -78,7 +73,6 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
         !disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
       } else {
         !disabled && (clickMenu === null || clickMenu === void 0 ? void 0 : clickMenu(id, raw));
-
         if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
           closeAllPopper();
         }
@@ -95,7 +89,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     id: id,
     icon: icon,
     title: title
-  }) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
+  }, level) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
     prefixCls: prefixCls + "-item",
     direction: "up"
   }) : /*#__PURE__*/React.createElement(Arrow, {
@@ -227,7 +221,6 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
       className: prefixCls + "-group-item"
     }, child.title), child && isArrayNonEmpty(child.children) ? /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
       var _cx3;
-
       return /*#__PURE__*/React.createElement("div", {
         onClick: function onClick() {
           if (!item.disabled) {
@@ -299,7 +292,6 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
       className: prefixCls + "-group-item"
     }, child.title), child && isArrayNonEmpty(child.children) ? /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
       var _cx4;
-
       return /*#__PURE__*/React.createElement("div", {
         className: cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4[prefixCls + "-item--disabled"] = item.disabled, _cx4)),
         onClick: function onClick() {
@@ -313,29 +305,23 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
     })) : null);
   }))) : null);
 });
-
 if (__DEV__) {
   MenuItem.displayName = 'MenuItem';
 }
-
 var Arrow = function Arrow(_ref) {
   var prefixCls = _ref.prefixCls,
-      direction = _ref.direction;
+    direction = _ref.direction;
   var icon;
-
   switch (direction) {
     case 'up':
       icon = /*#__PURE__*/React.createElement(UpOutlined, null);
       break;
-
     case 'down':
       icon = /*#__PURE__*/React.createElement(DownOutlined, null);
       break;
-
     default:
       icon = /*#__PURE__*/React.createElement(RightOutlined, null);
   }
-
   return /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "__arrow"
   }, icon);
@@ -343,11 +329,9 @@ var Arrow = function Arrow(_ref) {
 /**
  * 渲染空白占位
  */
-
-
 var renderIndent = function renderIndent(_ref2) {
   var prefixCls = _ref2.prefixCls,
-      depth = _ref2.depth;
+    depth = _ref2.depth;
   return times(depth, function (index) {
     return /*#__PURE__*/React.createElement("span", {
       className: prefixCls + "__indent",
@@ -355,5 +339,4 @@ var renderIndent = function renderIndent(_ref2) {
     });
   });
 };
-
 export { MenuItem };

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

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

package/lib/esm/util.js

@@ -22,20 +22,16 @@ var getParentId = function getParentId(id, data) {
     }
   });
   return parentId;
-}; // 寻找某一节点的所有祖先节点
-
-
+};
+// 寻找某一节点的所有祖先节点
 var getAncestorIds = function getAncestorIds(id, data, arr) {
   if (arr === void 0) {
     arr = [];
   }
-
   if (getParentId(id, data)) {
     arr.push(getParentId(id, data));
     getAncestorIds(getParentId(id, data), data, arr);
   }
-
   return arr;
 };
-
 export { getAncestorIds, getParentId };

package/lib/types/Menu.d.ts

@@ -85,7 +85,7 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
     /**
      * 自定义渲染菜单项
      */
-    render?: (menuItem: MenuDataItem) => React.ReactNode;
+    render?: (menuItem: MenuDataItem, level?: number) => React.ReactNode;
     /**
      * 额外的头部内容
      */

package/lib/types/MenuItem.d.ts

@@ -10,7 +10,7 @@ export interface MenuItemProps extends Omit<HiBaseHTMLProps<'li'>, 'id'> {
     children?: MenuDataItem[];
     level?: number;
     parentIds?: React.ReactText[];
-    render?: (node: MenuDataItem) => React.ReactNode;
+    render?: (node: MenuDataItem, level?: number) => React.ReactNode;
     raw?: MenuDataItem;
     size?: HiBaseSizeEnum;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/menu",
-  "version": "4.1.2",
+  "version": "4.1.4",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -43,30 +43,30 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/array-utils": "^4.0.1",
-    "@hi-ui/classname": "^4.0.1",
-    "@hi-ui/env": "^4.0.1",
-    "@hi-ui/icons": "^4.0.14",
-    "@hi-ui/popper": "^4.1.0",
-    "@hi-ui/times": "^4.0.1",
-    "@hi-ui/tooltip": "^4.0.5",
-    "@hi-ui/tree-utils": "^4.1.1",
-    "@hi-ui/type-assertion": "^4.0.1",
-    "@hi-ui/use-id": "^4.0.1",
-    "@hi-ui/use-merge-refs": "^4.0.1",
-    "@hi-ui/use-resize-observer": "^4.0.1",
-    "@hi-ui/use-toggle": "^4.0.1",
-    "@hi-ui/use-uncontrolled-state": "^4.0.1",
+    "@hi-ui/array-utils": "^4.0.2",
+    "@hi-ui/classname": "^4.0.2",
+    "@hi-ui/env": "^4.0.2",
+    "@hi-ui/icons": "^4.0.16",
+    "@hi-ui/popper": "^4.1.1",
+    "@hi-ui/times": "^4.0.2",
+    "@hi-ui/tooltip": "^4.0.8",
+    "@hi-ui/tree-utils": "^4.1.2",
+    "@hi-ui/type-assertion": "^4.0.2",
+    "@hi-ui/use-id": "^4.0.2",
+    "@hi-ui/use-merge-refs": "^4.0.2",
+    "@hi-ui/use-resize-observer": "^4.0.2",
+    "@hi-ui/use-toggle": "^4.0.2",
+    "@hi-ui/use-uncontrolled-state": "^4.0.2",
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=4.0.0",
+    "@hi-ui/core": ">=4.0.6",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^4.0.4",
-    "@hi-ui/core-css": "^4.1.2",
+    "@hi-ui/core": "^4.0.6",
+    "@hi-ui/core-css": "^4.1.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }