@hi-ui/menu 4.0.0-beta.0 → 4.0.0-beta.11

package/lib/cjs/Expander.js

@@ -36,7 +36,7 @@ var Expander = function Expander(_ref) {
       height = _useState[0],
       setHeight = _useState[1];
 
-  return /*#__PURE__*/React__default['default'].createElement(reactTransitionGroup.CSSTransition, {
+  return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
     "in": visible,
     timeout: 200,
     classNames: className,
@@ -56,7 +56,7 @@ var Expander = function Expander(_ref) {
         setHeight(0);
       });
     }
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       height: height,
       overflow: 'hidden',
@@ -66,4 +66,3 @@ var Expander = function Expander(_ref) {
 };
 
 exports.Expander = Expander;
-//# sourceMappingURL=Expander.js.map

package/lib/cjs/Menu.js

@@ -33,6 +33,8 @@ var util = require('./util.js');
 
 var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
 
+var Tooltip = require('@hi-ui/tooltip');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -41,6 +43,8 @@ function _interopDefaultLegacy(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
+
 var MENU_PREFIX = classname.getPrefixCls('menu');
 /**
  * TODO: What is Menu
@@ -89,8 +93,8 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     updateActiveId(id);
   }, [updateActiveId]);
   var clickSubMenu = React.useCallback(function (id) {
-    var expandedIds = _expandedIds.includes(id) ? _expandedIds.filter(function (expandedid) {
-      return expandedid !== id;
+    var expandedIds = _expandedIds.includes(id) ? _expandedIds.filter(function (expandedId) {
+      return expandedId !== id;
     }) : _expandedIds.concat(id);
     updateExpanedIds(expandedIds);
 
@@ -99,8 +103,8 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
   }, [onClickSubMenu, _expandedIds]);
   var closePopper = React.useCallback(function (id) {
-    updateExpanedIds(_expandedIds.filter(function (expandedid) {
-      return expandedid !== id;
+    updateExpanedIds(_expandedIds.filter(function (expandedId) {
+      return expandedId !== id;
     }));
   }, [_expandedIds]);
   var closeAllPopper = React.useCallback(function () {
@@ -111,16 +115,17 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       mini = _useState3[0],
       setMini = _useState3[1];
 
-  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
+  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]);
-  return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
+  var canToggle = placement === 'vertical' && showCollapse;
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     role: role,
     className: cls
-  }, rest), /*#__PURE__*/React__default['default'].createElement(context['default'].Provider, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(context["default"].Provider, {
     value: {
       placement: placement,
       expandedType: expandedType,
@@ -134,17 +139,23 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       activeId: _activeId,
       expandedIds: _expandedIds
     }
-  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: classname.cx(prefixCls + "__wrapper")
-  }, data.map(function (d) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuItem.MenuItem, Object.assign({}, d, {
-      key: d.id,
+  }, data.map(function (item) {
+    return canToggle && mini ? /*#__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, {
+      key: item.id,
       level: 1
     }));
-  })), placement === 'vertical' && showCollapse && /*#__PURE__*/React__default['default'].createElement("div", {
+  })), 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))));
+  }, mini ? /*#__PURE__*/React__default["default"].createElement(icons.MenuUnfoldOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.MenuFoldOutlined, null)) : null));
 });
 
 if (env.__DEV__) {
@@ -152,4 +163,3 @@ if (env.__DEV__) {
 }
 
 exports.Menu = Menu;
-//# sourceMappingURL=Menu.js.map

package/lib/cjs/MenuItem.js

@@ -15,6 +15,8 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
+var tslib = require('tslib');
+
 var React = require('react');
 
 var classname = require('@hi-ui/classname');
@@ -25,10 +27,16 @@ var icons = require('@hi-ui/icons');
 
 var context = require('./context.js');
 
-var popper = require('@hi-ui/popper');
+var Popper = require('@hi-ui/popper');
 
 var Expander = require('./Expander.js');
 
+var typeAssertion = require('@hi-ui/type-assertion');
+
+var arrayUtils = require('@hi-ui/array-utils');
+
+var useMergeRefs = require('@hi-ui/use-merge-refs');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -37,24 +45,28 @@ function _interopDefaultLegacy(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var MENU_PREFIX = classname.getPrefixCls('menu');
+var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper);
 
-var MenuItem = function MenuItem(_ref) {
+var MENU_PREFIX = classname.getPrefixCls('menu');
+var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _cx, _cx2;
 
-  var _ref$prefixCls = _ref.prefixCls,
-      prefixCls = _ref$prefixCls === void 0 ? MENU_PREFIX : _ref$prefixCls,
-      icon = _ref.icon,
-      title = _ref.title,
-      disabled = _ref.disabled,
-      id = _ref.id,
-      _ref$level = _ref.level,
-      level = _ref$level === void 0 ? 1 : _ref$level,
-      children = _ref.children,
-      parentIds = _ref.parentIds;
+  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,
+      rest = tslib.__rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds"]);
+
   var itemRef = React.useRef(null);
 
-  var _useContext = React.useContext(context['default']),
+  var _useContext = React.useContext(context["default"]),
       placement = _useContext.placement,
       expandedType = _useContext.expandedType,
       showAllSubMenus = _useContext.showAllSubMenus,
@@ -69,13 +81,15 @@ var MenuItem = function MenuItem(_ref) {
 
   var _parentIds = (parentIds || []).concat(id);
 
-  return /*#__PURE__*/React__default['default'].createElement("li", {
-    ref: itemRef,
-    className: classname.cx(prefixCls + "-item", (_cx = {}, _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))
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classname.cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--mini"] = mini, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2)),
+  var hasChildren = typeAssertion.isArrayNonEmpty(children);
+  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)
+  }, 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() {
-      if (children === null || children === void 0 ? void 0 : children.length) {
+      if (typeAssertion.isArrayNonEmpty(children)) {
         if (clickSubMenu) {
           clickSubMenu(id);
         }
@@ -88,31 +102,43 @@ var MenuItem = function MenuItem(_ref) {
           closeAllPopper();
         }
       }
-    },
-    style: placement === 'vertical' && expandedType === 'collapse' && !mini ? {
-      paddingLeft: level > 1 ? 12 + (level - 1 > 0 ? 1 : 0) * 20 + (level - 2 || 0) * 16 : 12
-    } : {}
-  }, icon, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: prefixCls + "-item__content"
-  }, title), (children === null || children === void 0 ? void 0 : children.length) && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null)), (children === null || children === void 0 ? void 0 : children.length) && mini && level > 1 && placement === 'vertical' && /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) && /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && level > 1 && /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && level === 1 && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, {
-    style: {
-      marginLeft: 4
-    }
-  }) : /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, {
-    style: {
-      marginLeft: 4
     }
-  }))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' && /*#__PURE__*/React__default['default'].createElement(Expander.Expander, {
+  }, placement === 'vertical' && expandedType === 'collapse' && !mini ? renderIndent({
+    prefixCls: prefixCls + "-item",
+    depth: level - 1
+  }) : null, icon ? /*#__PURE__*/React__default["default"].createElement("span", {
+    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, {
+    prefixCls: prefixCls + "-item",
+    direction: "up"
+  }) : /*#__PURE__*/React__default["default"].createElement(Arrow, {
+    prefixCls: prefixCls + "-item",
+    direction: "down"
+  })), hasChildren && mini && level > 1 && placement === 'vertical' ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
+    prefixCls: prefixCls + "-item"
+  }) : null, hasChildren && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
+    prefixCls: prefixCls + "-item"
+  }) : null, hasChildren && placement === 'horizontal' && level > 1 ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
+    prefixCls: prefixCls + "-item"
+  }) : null, hasChildren && placement === 'horizontal' && level === 1 && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React__default["default"].createElement(Arrow, {
+    prefixCls: prefixCls + "-item",
+    direction: "up"
+  }) : /*#__PURE__*/React__default["default"].createElement(Arrow, {
+    prefixCls: prefixCls + "-item",
+    direction: "down"
+  }))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? /*#__PURE__*/React__default["default"].createElement(Expander.Expander, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
-  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: prefixCls + "-submenu"
   }, children.map(function (child) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds
     }));
-  }))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React__default['default'].createElement(popper.PopperPortal, {
+  }))) : 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)),
     attachEl: itemRef.current,
     placement: 'right-start',
@@ -122,33 +148,34 @@ var MenuItem = function MenuItem(_ref) {
         closePopper(id);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: prefixCls + "-popmenu"
   }, children.map(function (child) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds
     }));
-  }))) : /*#__PURE__*/React__default['default'].createElement(popper.Popper, {
+  }))) : /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'right-start',
     gutterGap: 16,
+    disabledPortal: true,
     onClose: function onClose() {
       if (closePopper) {
         closePopper(id);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: prefixCls + "-popmenu"
   }, children.map(function (child) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds
     }));
-  })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React__default['default'].createElement(popper.PopperPortal, {
+  })))), hasChildren && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'right-start',
@@ -158,17 +185,18 @@ var MenuItem = function MenuItem(_ref) {
         closePopper(id);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: prefixCls + "-popmenu"
   }, children.map(function (child) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds
     }));
-  }))) : /*#__PURE__*/React__default['default'].createElement(popper.Popper, {
+  }))) : /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
+    disabledPortal: true,
     placement: 'right-start',
     gutterGap: 16,
     onClose: function onClose() {
@@ -176,15 +204,15 @@ var MenuItem = function MenuItem(_ref) {
         closePopper(id);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: prefixCls + "-popmenu"
   }, children.map(function (child) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds
     }));
-  })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && showAllSubMenus && /*#__PURE__*/React__default['default'].createElement(popper.PopperPortal, {
+  })))), hasChildren && placement === 'vertical' && showAllSubMenus ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'right-start',
@@ -194,20 +222,18 @@ var MenuItem = function MenuItem(_ref) {
         closePopper(id);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls + "-fat-menu"
   }, children.map(function (child) {
-    var _a;
-
-    return /*#__PURE__*/React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       key: child.id,
       className: prefixCls + "-fat-menu__group"
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: prefixCls + "-group-item"
-    }, child.title), ((_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a.length) && /*#__PURE__*/React__default['default'].createElement("ul", null, child.children.map(function (item) {
+    }, child.title), child && typeAssertion.isArrayNonEmpty(child.children) ? /*#__PURE__*/React__default["default"].createElement("ul", null, child.children.map(function (item) {
       var _cx3;
 
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         onClick: function onClick() {
           if (clickMenu) {
             clickMenu(item.id);
@@ -220,8 +246,8 @@ var MenuItem = function MenuItem(_ref) {
         className: classname.cx(prefixCls + "-item", (_cx3 = {}, _cx3[prefixCls + "-item--active"] = activeId === item.id, _cx3)),
         key: item.id
       }, item.title);
-    })));
-  }))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && !showAllSubMenus && (level === 1 ? /*#__PURE__*/React__default['default'].createElement(popper.PopperPortal, {
+    })) : null);
+  }))) : null, hasChildren && placement === 'horizontal' && !showAllSubMenus && (level === 1 ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: level === 1 ? 'bottom-start' : 'right-start',
@@ -231,17 +257,18 @@ var MenuItem = function MenuItem(_ref) {
         closePopper(id);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: prefixCls + "-popmenu"
   }, children.map(function (child) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds
     }));
-  }))) : /*#__PURE__*/React__default['default'].createElement(popper.Popper, {
+  }))) : /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
+    disabledPortal: true,
     placement: level === 1 ? 'bottom-start' : 'right-start',
     gutterGap: level === 1 ? 8 : 16,
     onClose: function onClose() {
@@ -249,15 +276,15 @@ var MenuItem = function MenuItem(_ref) {
         closePopper(id);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: prefixCls + "-popmenu"
   }, children.map(function (child) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuItem, Object.assign({}, child, {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
       parentIds: _parentIds
     }));
-  })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && showAllSubMenus && /*#__PURE__*/React__default['default'].createElement(popper.PopperPortal, {
+  })))), hasChildren && placement === 'horizontal' && showAllSubMenus ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'bottom-start',
@@ -267,20 +294,18 @@ var MenuItem = function MenuItem(_ref) {
         closePopper(id);
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: prefixCls + "-fat-menu"
   }, children.map(function (child) {
-    var _a;
-
-    return /*#__PURE__*/React__default['default'].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       key: child.id,
       className: prefixCls + "-fat-menu__group"
-    }, /*#__PURE__*/React__default['default'].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: prefixCls + "-group-item"
-    }, child.title), ((_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a.length) && /*#__PURE__*/React__default['default'].createElement("ul", null, child.children.map(function (item) {
+    }, child.title), child && typeAssertion.isArrayNonEmpty(child.children) ? /*#__PURE__*/React__default["default"].createElement("ul", null, child.children.map(function (item) {
       var _cx4;
 
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classname.cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
         onClick: function onClick() {
           if (clickMenu) {
@@ -293,13 +318,50 @@ var MenuItem = function MenuItem(_ref) {
         },
         key: item.id
       }, item.title);
-    })));
-  }))));
-};
+    })) : null);
+  }))) : null);
+});
 
 if (env.__DEV__) {
   MenuItem.displayName = 'MenuItem';
 }
 
+var Arrow = function Arrow(_ref) {
+  var prefixCls = _ref.prefixCls,
+      direction = _ref.direction;
+  var icon = null;
+
+  switch (direction) {
+    case 'up':
+      icon = /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null);
+      break;
+
+    case 'down':
+      icon = /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null);
+      break;
+
+    default:
+      icon = /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("span", {
+    className: prefixCls + "__arrow"
+  }, icon);
+};
+/**
+ * 渲染空白占位
+ */
+
+
+var renderIndent = function renderIndent(_ref2) {
+  var prefixCls = _ref2.prefixCls,
+      depth = _ref2.depth;
+  return arrayUtils.times(depth, function (index) {
+    return /*#__PURE__*/React__default["default"].createElement("span", {
+      className: prefixCls + "__indent",
+      key: index
+    });
+  });
+};
+
 exports.MenuItem = MenuItem;
-//# sourceMappingURL=MenuItem.js.map

package/lib/cjs/context.js

@@ -17,4 +17,3 @@ var React = require('react');
 
 var MenuContext = /*#__PURE__*/React.createContext({});
 exports["default"] = MenuContext;
-//# sourceMappingURL=context.js.map

package/lib/cjs/index.js

@@ -19,4 +19,3 @@ var Menu = require('./Menu.js');
 
 exports.Menu = Menu.Menu;
 exports["default"] = Menu.Menu;
-//# sourceMappingURL=index.js.map

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

@@ -12,11 +12,10 @@
 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: #fff;\n  background-color: var(--hi-v4-color-static-white, #fff);\n  margin: 0;\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  padding: 8px;\n  padding: var(--hi-v4-spacing-4, 8px);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  color: #1f2733;\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  border-radius: 4px;\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: 36px;\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 12px;\n    padding: 0 var(--hi-v4-spacing-6, 12px);\n    color: #929aa6;\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: 4px;\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 12px;\n    padding: 0 var(--hi-v4-spacing-6, 12px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item--active {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa);\n      background-color: #e2f3fe;\n      background-color: 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: #f2f4f7;\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: #fff;\n  background-color: var(--hi-v4-color-static-white, #fff);\n  border-radius: 4px;\n  border-radius: var(--hi-v4-border-radius-normal, 4px);\n  margin: 0;\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  padding: 8px;\n  padding: var(--hi-v4-spacing-4, 8px);\n  color: #1f2733;\n  color: var(--hi-v4-color-gray-700, #1f2733); }\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: 8px;\n      margin-bottom: var(--hi-v4-spacing-4, 8px);\n      padding: 0 12px;\n      padding: 0 var(--hi-v4-spacing-6, 12px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n        background-color: #f2f4f7;\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: 100px;\n      padding-right: 8px;\n      padding-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu {\n  background-color: #fff;\n  background-color: var(--hi-v4-color-static-white, #fff);\n  color: #1f2733;\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  line-height: 1.375rem;\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__wrapper {\n    padding: 0;\n    margin: 0; }\n.hi-v4-menu--horizontal {\n    width: 100%;\n    overflow: auto; }\n.hi-v4-menu--horizontal .hi-v4-menu__wrapper {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex; }\n.hi-v4-menu--horizontal .hi-v4-menu-item {\n      margin: 0 20px;\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-bottom: 2px solid transparent;\n      font-size: 1rem;\n      font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        border-bottom: 2px solid #237ffa;\n        border-bottom: 2px solid var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        border-bottom: 2px solid #237ffa;\n        border-bottom: 2px solid var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {\n        color: #237ffa;\n        color: 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.hi-v4-menu--horizontal .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: 100px; }\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: 8px;\n    padding: var(--hi-v4-spacing-4, 8px);\n    width: 232px;\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__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: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      height: 40px; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {\n        background-color: #f2f4f7;\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: 8px;\n      margin-bottom: var(--hi-v4-spacing-4, 8px);\n      padding: 0 12px;\n      padding: 0 var(--hi-v4-spacing-6, 12px);\n      border-radius: 4px;\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: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {\n        color: #237ffa;\n        color: 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: #f2f4f7;\n        background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item svg[class^=hi-v4-icon] {\n      -ms-flex-negative: 0;\n          flex-shrink: 0;\n      margin-right: 8px;\n      margin-right: var(--hi-v4-spacing-4, 8px);\n      margin-left: 1px; }\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 = "@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-md, 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-md, 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-md, 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-md, 4px);\n  margin: 0;\n  font-size: var(--hi-v4-text-size-md, 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-md, 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-md, 0.875rem);\n  line-height: var(--hi-v4-text-lineheight-md, 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-md, 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-md, 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"];
 
 __styleInject__(css_248z);
 
 exports["default"] = css_248z;
-//# sourceMappingURL=index.scss.js.map

package/lib/cjs/util.js

@@ -45,4 +45,3 @@ var getAncestorIds = function getAncestorIds(id, data, arr) {
 
 exports.getAncestorIds = getAncestorIds;
 exports.getParentId = getParentId;
-//# sourceMappingURL=util.js.map

package/lib/esm/Expander.js

@@ -49,4 +49,3 @@ var Expander = function Expander(_ref) {
 };
 
 export { Expander };
-//# sourceMappingURL=Expander.js.map