@hi-ui/menu 4.0.0-beta.2 → 4.0.0-beta.22

package/lib/esm/Menu.js

@@ -16,6 +16,7 @@ import { MenuItem } from './MenuItem.js';
 import MenuContext from './context.js';
 import { getAncestorIds } from './util.js';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import Tooltip from '@hi-ui/tooltip';
 var MENU_PREFIX = getPrefixCls('menu');
 /**
  * TODO: What is Menu
@@ -64,8 +65,8 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     updateActiveId(id);
   }, [updateActiveId]);
   var clickSubMenu = 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);
 
@@ -74,8 +75,8 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   }, [onClickSubMenu, _expandedIds]);
   var closePopper = useCallback(function (id) {
-    updateExpanedIds(_expandedIds.filter(function (expandedid) {
-      return expandedid !== id;
+    updateExpanedIds(_expandedIds.filter(function (expandedId) {
+      return expandedId !== id;
     }));
   }, [_expandedIds]);
   var closeAllPopper = useCallback(function () {
@@ -86,11 +87,12 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       mini = _useState3[0],
       setMini = _useState3[1];
 
-  var cls = cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
+  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;
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
     role: role,
@@ -111,15 +113,21 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
   }, /*#__PURE__*/React.createElement("ul", {
     className: cx(prefixCls + "__wrapper")
-  }, data.map(function (d) {
-    return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, d, {
-      key: d.id,
+  }, data.map(function (item) {
+    return canToggle && mini ? /*#__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, {
+      key: item.id,
       level: 1
     }));
-  })), placement === 'vertical' && showCollapse && /*#__PURE__*/React.createElement("div", {
+  })), canToggle ? /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__toggle"),
     onClick: onToggle
-  }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null))));
+  }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null)) : null));
 });
 
 if (__DEV__) {
@@ -127,4 +135,3 @@ if (__DEV__) {
 }
 
 export { Menu };
-//# sourceMappingURL=Menu.js.map

package/lib/esm/MenuItem.js

@@ -7,28 +7,34 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useRef, useContext } from 'react';
+import { __rest } from 'tslib';
+import React, { forwardRef, useRef, useContext } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
-import { UpOutlined, DownOutlined, RightOutlined } from '@hi-ui/icons';
+import { RightOutlined, DownOutlined, UpOutlined } from '@hi-ui/icons';
 import MenuContext from './context.js';
-import { PopperPortal, Popper } from '@hi-ui/popper';
+import Popper from '@hi-ui/popper';
 import { Expander } from './Expander.js';
+import { isArrayNonEmpty } 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 MenuItem = function MenuItem(_ref) {
+var MenuItem = /*#__PURE__*/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 = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds"]);
+
   var itemRef = useRef(null);
 
   var _useContext = useContext(MenuContext),
@@ -46,13 +52,15 @@ var MenuItem = function MenuItem(_ref) {
 
   var _parentIds = (parentIds || []).concat(id);
 
-  return /*#__PURE__*/React.createElement("li", {
-    ref: itemRef,
-    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.createElement("div", {
-    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 = isArrayNonEmpty(children);
+  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)
+  }, 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() {
-      if (children === null || children === void 0 ? void 0 : children.length) {
+      if (isArrayNonEmpty(children)) {
         if (clickSubMenu) {
           clickSubMenu(id);
         }
@@ -65,21 +73,33 @@ 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.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.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null)), (children === null || children === void 0 ? void 0 : children.length) && mini && level > 1 && placement === 'vertical' && /*#__PURE__*/React.createElement(RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) && /*#__PURE__*/React.createElement(RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && level > 1 && /*#__PURE__*/React.createElement(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.createElement(UpOutlined, {
-    style: {
-      marginLeft: 4
-    }
-  }) : /*#__PURE__*/React.createElement(DownOutlined, {
-    style: {
-      marginLeft: 4
     }
-  }))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' && /*#__PURE__*/React.createElement(Expander, {
+  }, placement === 'vertical' && expandedType === 'collapse' && !mini ? renderIndent({
+    prefixCls: prefixCls + "-item",
+    depth: level - 1
+  }) : null, icon ? /*#__PURE__*/React.createElement("span", {
+    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, {
+    prefixCls: prefixCls + "-item",
+    direction: "up"
+  }) : /*#__PURE__*/React.createElement(Arrow, {
+    prefixCls: prefixCls + "-item",
+    direction: "down"
+  })), hasChildren && mini && level > 1 && placement === 'vertical' ? /*#__PURE__*/React.createElement(Arrow, {
+    prefixCls: prefixCls + "-item"
+  }) : null, hasChildren && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) ? /*#__PURE__*/React.createElement(Arrow, {
+    prefixCls: prefixCls + "-item"
+  }) : null, hasChildren && placement === 'horizontal' && level > 1 ? /*#__PURE__*/React.createElement(Arrow, {
+    prefixCls: prefixCls + "-item"
+  }) : null, hasChildren && placement === 'horizontal' && level === 1 && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
+    prefixCls: prefixCls + "-item",
+    direction: "up"
+  }) : /*#__PURE__*/React.createElement(Arrow, {
+    prefixCls: prefixCls + "-item",
+    direction: "down"
+  }))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? /*#__PURE__*/React.createElement(Expander, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
   }, /*#__PURE__*/React.createElement("ul", {
     className: prefixCls + "-submenu"
@@ -89,7 +109,7 @@ var MenuItem = function MenuItem(_ref) {
       level: level + 1,
       parentIds: _parentIds
     }));
-  }))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React.createElement(PopperPortal, {
+  }))) : 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)),
     attachEl: itemRef.current,
     placement: 'right-start',
@@ -112,6 +132,7 @@ var MenuItem = function MenuItem(_ref) {
     attachEl: itemRef.current,
     placement: 'right-start',
     gutterGap: 16,
+    disabledPortal: true,
     onClose: function onClose() {
       if (closePopper) {
         closePopper(id);
@@ -125,7 +146,7 @@ var MenuItem = function MenuItem(_ref) {
       level: level + 1,
       parentIds: _parentIds
     }));
-  })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React.createElement(PopperPortal, {
+  })))), hasChildren && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'right-start',
@@ -146,6 +167,7 @@ var MenuItem = function MenuItem(_ref) {
   }))) : /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
+    disabledPortal: true,
     placement: 'right-start',
     gutterGap: 16,
     onClose: function onClose() {
@@ -161,7 +183,7 @@ var MenuItem = function MenuItem(_ref) {
       level: level + 1,
       parentIds: _parentIds
     }));
-  })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && showAllSubMenus && /*#__PURE__*/React.createElement(PopperPortal, {
+  })))), hasChildren && placement === 'vertical' && showAllSubMenus ? /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'right-start',
@@ -174,14 +196,12 @@ var MenuItem = function MenuItem(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "-fat-menu"
   }, children.map(function (child) {
-    var _a;
-
     return /*#__PURE__*/React.createElement("div", {
       key: child.id,
       className: prefixCls + "-fat-menu__group"
     }, /*#__PURE__*/React.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.createElement("ul", null, child.children.map(function (item) {
+    }, child.title), child && isArrayNonEmpty(child.children) ? /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
       var _cx3;
 
       return /*#__PURE__*/React.createElement("div", {
@@ -197,8 +217,8 @@ var MenuItem = function MenuItem(_ref) {
         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.createElement(PopperPortal, {
+    })) : null);
+  }))) : null, hasChildren && placement === 'horizontal' && !showAllSubMenus && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: level === 1 ? 'bottom-start' : 'right-start',
@@ -219,6 +239,7 @@ var MenuItem = function MenuItem(_ref) {
   }))) : /*#__PURE__*/React.createElement(Popper, {
     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() {
@@ -234,7 +255,7 @@ var MenuItem = function MenuItem(_ref) {
       level: level + 1,
       parentIds: _parentIds
     }));
-  })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && showAllSubMenus && /*#__PURE__*/React.createElement(PopperPortal, {
+  })))), hasChildren && placement === 'horizontal' && showAllSubMenus ? /*#__PURE__*/React.createElement(Popper, {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'bottom-start',
@@ -247,14 +268,12 @@ var MenuItem = function MenuItem(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "-fat-menu"
   }, children.map(function (child) {
-    var _a;
-
     return /*#__PURE__*/React.createElement("div", {
       key: child.id,
       className: prefixCls + "-fat-menu__group"
     }, /*#__PURE__*/React.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.createElement("ul", null, child.children.map(function (item) {
+    }, child.title), child && isArrayNonEmpty(child.children) ? /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
       var _cx4;
 
       return /*#__PURE__*/React.createElement("div", {
@@ -270,13 +289,50 @@ var MenuItem = function MenuItem(_ref) {
         },
         key: item.id
       }, item.title);
-    })));
-  }))));
-};
+    })) : null);
+  }))) : null);
+});
 
 if (__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.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);
+};
+/**
+ * 渲染空白占位
+ */
+
+
+var renderIndent = function renderIndent(_ref2) {
+  var prefixCls = _ref2.prefixCls,
+      depth = _ref2.depth;
+  return times(depth, function (index) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: prefixCls + "__indent",
+      key: index
+    });
+  });
+};
+
 export { MenuItem };
-//# sourceMappingURL=MenuItem.js.map

package/lib/esm/context.js

@@ -9,5 +9,4 @@
  */
 import { createContext } from 'react';
 var MenuContext = /*#__PURE__*/createContext({});
-export default MenuContext;
-//# sourceMappingURL=context.js.map
+export { MenuContext as default };

package/lib/esm/index.js

@@ -9,4 +9,3 @@
  */
 import './styles/index.scss.js';
 export { Menu, Menu as default } from './Menu.js';
-//# sourceMappingURL=index.js.map

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

@@ -7,11 +7,9 @@
  * 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: #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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      background-color: #e2f3fe;\n      background-color: var(--hi-v4-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: #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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-primary-50, 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-primary-500, 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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        border-bottom: 2px solid #237ffa;\n        border-bottom: 2px solid var(--hi-v4-primary-500, 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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        border-bottom: 2px solid #237ffa;\n        border-bottom: 2px solid var(--hi-v4-primary-500, 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-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.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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-primary-50, 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-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: #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 __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-x: auto; }.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 {margin: 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;-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);
 
-export default css_248z;
-//# sourceMappingURL=index.scss.js.map
+export { css_248z as default };

package/lib/esm/util.js

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

package/lib/types/Menu.d.ts

@@ -1,50 +1,65 @@
 import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import { MenuDataItem } from './types';
 /**
  * TODO: What is Menu
  */
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement | null>>;
-export declare type MenuItemProps = {
+export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
     /**
-     * 组件默认的选择器类
+     * 菜单项数据列表
      */
-    prefixCls?: string;
-    title: React.ReactNode;
-    icon?: React.ReactNode;
-    id: React.ReactText;
-    disabled?: boolean;
-    children?: MenuItemProps[];
-    level?: number;
-    parentIds?: React.ReactText[];
-};
-export interface MenuProps {
+    data: MenuDataItem[];
     /**
-     * 组件默认的选择器类
+     * 默认激活的菜单项 id
      */
-    prefixCls?: string;
+    defaultActiveId?: React.ReactText;
     /**
-     * 组件的语义化 Role 属性
+     * 激活的菜单项 id
      */
-    role?: string;
+    activeId?: React.ReactText;
     /**
-     * 组件的注入选择器类
+     * 设置菜单水平或垂直展示
      */
-    className?: string;
+    placement?: 'horizontal' | 'vertical';
     /**
-     * 组件的注入样式
+     * 是否收起子菜单，菜单垂直展示时有效
      */
-    data: MenuItemProps[];
-    activeId?: React.ReactText;
-    placement?: 'horizontal' | 'vertical';
     collapsed?: boolean;
+    /**
+     * 是否显示收缩开关，菜单垂直展示时有效
+     */
     showCollapse?: boolean;
+    /**
+     * 是否以胖菜单的形式展开所有子菜单（仅在水平菜单时有效）
+     */
     showAllSubMenus?: boolean;
+    /**
+     * 手风琴模式，菜单水平展示时有效
+     */
     accordion?: boolean;
-    style?: React.CSSProperties;
-    onClick?: (menuId: React.ReactText) => void;
-    onClickSubMenu?: (subMenuId: React.ReactText, expandedIds: React.ReactText[]) => void;
-    onCollapse?: (collapsed: boolean) => void;
+    /**
+     * 下拉框根类名
+     */
     overlayClassName?: string;
+    /**
+     * 弹出层展开方式
+     */
     expandedType?: 'collapse' | 'pop';
+    /**
+     * 默认展开菜单项 ids 列表
+     */
     defaultExpandedIds?: React.ReactText[];
-    defaultActiveId?: React.ReactText;
+    /**
+     * 点击菜单选项时的回调
+     */
+    onClick?: (menuId: React.ReactText) => void;
+    /**
+     * 点击父菜单项时的回调
+     */
+    onClickSubMenu?: (subMenuId: React.ReactText, expandedIds: React.ReactText[]) => void;
+    /**
+     * 点击收缩开关时的回调
+     */
+    onCollapse?: (collapsed: boolean) => void;
 }

package/lib/types/MenuItem.d.ts

@@ -1,3 +1,12 @@
 import React from 'react';
-import { MenuItemProps } from './Menu';
-export declare const MenuItem: React.FC<MenuItemProps>;
+import { HiBaseHTMLProps } from '@hi-ui/core';
+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[];
+    level?: number;
+    parentIds?: React.ReactText[];
+}

package/lib/types/index.d.ts

@@ -1,3 +1,4 @@
 import './styles/index.scss';
 export * from './Menu';
 export { Menu as default } from './Menu';
+export * from './types';

package/lib/types/types.d.ts

@@ -1,11 +1,23 @@
 import React from 'react';
 export interface MenuDataItem {
     /**
-     * 节点唯一 id
+     * 菜单项唯一标识
      */
     id: React.ReactText;
     /**
-     * 节点标题
+     * 菜单项标题
      */
     title: React.ReactNode;
+    /**
+     * 菜单项 icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * 菜单项是否禁止点击
+     */
+    disabled?: boolean;
+    /**
+     * 子菜单项配置
+     */
+    children?: MenuDataItem[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/menu",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.22",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,13 +43,18 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
+    "@hi-ui/array-utils": "^4.0.0-beta.8",
     "@hi-ui/classname": "^4.0.0-beta.0",
-    "@hi-ui/core": "^4.0.0-beta.1",
-    "@hi-ui/core-css": "^4.0.0-beta.1",
-    "@hi-ui/env": "^4.0.0-beta.0",
-    "@hi-ui/icons": "^4.0.0-beta.1",
-    "@hi-ui/popper": "^4.0.0-beta.2",
-    "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.0",
+    "@hi-ui/core": "^4.0.0-beta.9",
+    "@hi-ui/core-css": "^4.0.0-beta.5",
+    "@hi-ui/env": "^4.0.0-beta.1",
+    "@hi-ui/icons": "^4.0.0-beta.11",
+    "@hi-ui/popper": "^4.0.0-beta.18",
+    "@hi-ui/times": "^4.0.0-beta.6",
+    "@hi-ui/tooltip": "^4.0.0-beta.23",
+    "@hi-ui/type-assertion": "^4.0.0-beta.5",
+    "@hi-ui/use-merge-refs": "^4.0.0-beta.5",
+    "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5",
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
@@ -57,9 +62,9 @@
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/hi-build": "^4.0.0-beta.0",
+    "@hi-ui/hi-build": "^4.0.0-beta.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "e44279db28297930b5608023f96343780d1f4e1c"
+  "gitHead": "b714e09d5c7a7d4bfe7c03cc58422365b3688f3c"
 }

package/lib/cjs/Expander.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Expander.js","sources":["../../src/Expander.tsx"],"sourcesContent":[null],"names":["Expander","children","visible","className","useState","height","setHeight","React","CSSTransition","in","timeout","classNames","unmountOnExit","onEnter","element","setTimeout","scrollHeight","onEntered","onExit","style","overflow","transition"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGaA,QAAQ,GAA4B,SAApCA,QAAoC,KAAA;MAAGC,gBAAAA;MAAUC,eAAAA;MAASC,iBAAAA;;kBACzCC,cAAAA,CAASF,OAAO,GAAG,MAAH,GAAY,CAA5BE;MAArBC,MAAP;MAAeC,SAAf;;sBAEEC,yBAAAA,cAAAA,CAACC,kCAADD;AACEE,UAAIP;AACJQ,IAAAA,OAAO,EAAE;AACTC,IAAAA,UAAU,EAAER;AACZS,IAAAA,aAAa,EAAE;AACfC,IAAAA,OAAO,EAAE,gBAAA,CAACC,OAAD;AACPR,MAAAA,SAAS,CAAC,CAAD,CAATA;AACAS,MAAAA,UAAU,CAAC;AACTT,QAAAA,SAAS,CAACQ,OAAO,CAACE,YAAT,CAATV;AADQ,OAAA,CAAVS;;AAIFE,IAAAA,SAAS,EAAE,kBAAA;AACTX,MAAAA,SAAS,CAAC,MAAD,CAATA;;AAEFY,IAAAA,MAAM,EAAE,eAAA,CAACJ,OAAD;AACNR,MAAAA,SAAS,CAACQ,OAAO,CAACE,YAAT,CAATV;AACAS,MAAAA,UAAU,CAAC;AACTT,QAAAA,SAAS,CAAC,CAAD,CAATA;AADQ,OAAA,CAAVS;;GAhBJR,eAqBEA,yBAAAA,cAAAA,MAAAA;AAAKY,IAAAA,KAAK,EAAE;AAAEd,MAAAA,MAAM,EAANA,MAAF;AAAUe,MAAAA,QAAQ,EAAE,QAApB;AAA8BC,MAAAA,UAAU,EAAE;AAA1C;GAAZd,EAAqEN,QAArEM,CArBFA;;;"}

package/lib/cjs/Menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.js","sources":["../../src/Menu.tsx"],"sourcesContent":[null],"names":["MENU_PREFIX","getPrefixCls","Menu","forwardRef","_a","ref","prefixCls","role","className","data","placement","showCollapse","expandedType","showAllSubMenus","defaultExpandedIds","defaultActiveId","activeId","onClickSubMenu","onClick","rest","useUncontrolledState","_activeId","updateActiveId","useState","getAncestorIds","activeParents","updateActiveParents","useEffect","_expandedIds","updateExpanedIds","clickMenu","useCallback","id","clickSubMenu","expandedIds","includes","filter","expandedid","concat","closePopper","closeAllPopper","mini","setMini","cls","cx","onToggle","React","MenuContext","Provider","value","map","d","MenuItem","key","level","MenuUnfoldOutlined","MenuFoldOutlined","__DEV__","displayName"],"mappings":"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"}