@hi-ui/menu 4.0.0-beta.3 → 4.0.0-beta.30

package/lib/esm/Menu.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useState, useEffect, useCallback } from 'react';
+import React, { forwardRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
 import { __DEV__ } from '@hi-ui/env';
@@ -16,83 +16,199 @@ import { MenuItem } from './MenuItem.js';
 import MenuContext from './context.js';
 import { getAncestorIds } from './util.js';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import Tooltip from '@hi-ui/tooltip';
+import { useUncontrolledToggle } from '@hi-ui/use-toggle';
+import { getTreeNodesWithChildren } from '@hi-ui/tree-utils';
+import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
+import { useResizeObserver } from '@hi-ui/use-resize-observer';
+import { useMergeRefs } from '@hi-ui/use-merge-refs';
 var MENU_PREFIX = getPrefixCls('menu');
+var DEFAULT_EXPANDED_IDS = [];
+var NOOP_ARRAY = [];
+var MIN_WIDTH = 56;
 /**
  * TODO: What is Menu
  */
 
 var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _cx;
-
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
       _a$role = _a.role,
       role = _a$role === void 0 ? 'menu' : _a$role,
       className = _a.className,
-      data = _a.data,
+      _a$data = _a.data,
+      data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
       _a$placement = _a.placement,
       placement = _a$placement === void 0 ? 'vertical' : _a$placement,
-      showCollapse = _a.showCollapse,
+      _a$showCollapse = _a.showCollapse,
+      showCollapse = _a$showCollapse === void 0 ? false : _a$showCollapse,
       _a$expandedType = _a.expandedType,
       expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
       _a$showAllSubMenus = _a.showAllSubMenus,
       showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
-      defaultExpandedIds = _a.defaultExpandedIds,
-      defaultActiveId = _a.defaultActiveId,
-      activeId = _a.activeId,
+      _a$defaultExpandedAll = _a.defaultExpandedAll,
+      defaultExpandedAll = _a$defaultExpandedAll === void 0 ? false : _a$defaultExpandedAll,
+      _a$defaultExpandedIds = _a.defaultExpandedIds,
+      defaultExpandedIds = _a$defaultExpandedIds === void 0 ? DEFAULT_EXPANDED_IDS : _a$defaultExpandedIds,
+      expandedIdsProp = _a.expandedIds,
+      onExpand = _a.onExpand,
+      _a$defaultActiveId = _a.defaultActiveId,
+      defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
+      activeIdProp = _a.activeId,
       onClickSubMenu = _a.onClickSubMenu,
+      collapsed = _a.collapsed,
+      _a$defaultCollapsed = _a.defaultCollapsed,
+      defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
+      onCollapse = _a.onCollapse,
+      footerRender = _a.footerRender,
       onClick = _a.onClick,
-      rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
+      rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "onCollapse", "footerRender", "onClick"]);
 
-  var _useUncontrolledState = useUncontrolledState(defaultActiveId || '', activeId, onClick),
-      _activeId = _useUncontrolledState[0],
+  var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
+      activeId = _useUncontrolledState[0],
       updateActiveId = _useUncontrolledState[1];
 
-  var _useState = useState(getAncestorIds(_activeId, data)),
+  var _useState = useState(function () {
+    return getAncestorIds(activeId, data);
+  }),
       activeParents = _useState[0],
       updateActiveParents = _useState[1];
 
   useEffect(function () {
-    updateActiveParents(getAncestorIds(_activeId, data));
-  }, [_activeId, data]);
+    updateActiveParents(getAncestorIds(activeId, data));
+  }, [activeId, data]);
 
-  var _useState2 = useState(defaultExpandedIds || []),
-      _expandedIds = _useState2[0],
-      updateExpanedIds = _useState2[1];
+  var _useUncontrolledState2 = useUncontrolledState(function () {
+    return defaultExpandedAll ? getTreeNodesWithChildren(data).map(function (node) {
+      return node.id;
+    }) : defaultExpandedIds;
+  }, expandedIdsProp, onExpand),
+      expandedIds = _useUncontrolledState2[0],
+      updateExpandedIds = _useUncontrolledState2[1];
 
-  var clickMenu = useCallback(function (id) {
-    updateActiveId(id);
+  var clickMenu = useCallback(function (id, raw) {
+    updateActiveId(id, raw);
   }, [updateActiveId]);
   var clickSubMenu = useCallback(function (id) {
-    var expandedIds = _expandedIds.includes(id) ? _expandedIds.filter(function (expandedid) {
-      return expandedid !== id;
-    }) : _expandedIds.concat(id);
-    updateExpanedIds(expandedIds);
+    var nextExpandedIds = expandedIds.includes(id) ? expandedIds.filter(function (expandedId) {
+      return expandedId !== id;
+    }) : expandedIds.concat(id);
+    updateExpandedIds(nextExpandedIds);
 
     if (onClickSubMenu) {
-      onClickSubMenu(id, expandedIds);
+      onClickSubMenu(id, nextExpandedIds);
     }
-  }, [onClickSubMenu, _expandedIds]);
+  }, [onClickSubMenu, expandedIds, updateExpandedIds]);
   var closePopper = useCallback(function (id) {
-    updateExpanedIds(_expandedIds.filter(function (expandedid) {
-      return expandedid !== id;
+    updateExpandedIds(expandedIds.filter(function (expandedId) {
+      return expandedId !== id;
     }));
-  }, [_expandedIds]);
+  }, [expandedIds, updateExpandedIds]);
   var closeAllPopper = useCallback(function () {
-    updateExpanedIds([]);
-  }, []);
-
-  var _useState3 = useState(false),
-      mini = _useState3[0],
-      setMini = _useState3[1];
-
-  var cls = cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
-  var onToggle = useCallback(function () {
-    setMini(!mini);
-    closeAllPopper();
-  }, [mini, closeAllPopper]);
+    updateExpandedIds([]);
+  }, [updateExpandedIds]);
+
+  var _useUncontrolledToggl = useUncontrolledToggle({
+    defaultVisible: defaultCollapsed,
+    visible: collapsed,
+    onToggle: onCollapse
+  }),
+      mini = _useUncontrolledToggl[0],
+      miniToggleAction = _useUncontrolledToggl[1];
+
+  var showVertical = placement === 'vertical';
+  var canToggle = showVertical && showCollapse;
+  var showMini = showVertical && mini;
+
+  var _useState2 = useState(null),
+      containerElement = _useState2[0],
+      setContainerElement = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState3$ = _useState3[0],
+      containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
+      setContainerWidth = _useState3[1];
+
+  useResizeObserver({
+    element: containerElement,
+    disabled: showVertical,
+    getSize: function getSize(element) {
+      var itemRect = element.getBoundingClientRect();
+      return itemRect.width;
+    },
+    onResize: function onResize(el, width) {
+      setContainerWidth(width);
+    }
+  });
+
+  var _useState4 = useState(0),
+      tagMaxCount = _useState4[0],
+      setTagMaxCount = _useState4[1];
+
+  var mergedTagList = useMemo(function () {
+    if (showVertical) return data;
+    if (containerWidth < MIN_WIDTH) return data;
+    return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
+  }, [showVertical, data, containerWidth]);
+  var restTagList = useMemo(function () {
+    if (tagMaxCount > 0) return data.slice(tagMaxCount);
+    return [];
+  }, [data, tagMaxCount]);
+  var getTagWidth = useCallback(function (index) {
+    if (!containerElement) return MIN_WIDTH;
+    var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
+    var element = elements && elements[index];
+    if (!element) return MIN_WIDTH;
+    return element.getBoundingClientRect().width;
+  }, [containerElement]);
+  useLayoutEffect(function () {
+    if (showVertical) return;
+    var tagMaxCount = 0;
+
+    if (isArrayNonEmpty(mergedTagList)) {
+      var len = mergedTagList.length;
+      var lastIndex = len - 1;
+      var totalWidth = 72; // 更多
+
+      for (var i = 0; i < len; ++i) {
+        var currentTagWidth = getTagWidth(i);
+
+        if (currentTagWidth === undefined) {
+          break;
+        }
+
+        totalWidth += currentTagWidth;
+
+        if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
+          tagMaxCount = lastIndex;
+          break;
+        } else if (totalWidth > containerWidth) {
+          tagMaxCount = i - 1;
+          break;
+        }
+      }
+    } else {
+      tagMaxCount = 0;
+    } // 保底要展示 1 个
+
+
+    setTagMaxCount(isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount + 1);
+  }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
+
+  var renderFooter = function renderFooter() {
+    var collapseNode = canToggle ? /*#__PURE__*/React.createElement("div", {
+      className: cx(prefixCls + "__toggle"),
+      onClick: miniToggleAction.not
+    }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null)) : null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isFunction(footerRender) ? footerRender({
+      collapsed: showMini,
+      collapseNode: collapseNode
+    }) : collapseNode);
+  };
+
+  var cls = cx(prefixCls, className, prefixCls + "--" + placement, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
   return /*#__PURE__*/React.createElement("div", Object.assign({
-    ref: ref,
+    ref: useMergeRefs(ref, setContainerElement),
     role: role,
     className: cls
   }, rest), /*#__PURE__*/React.createElement(MenuContext.Provider, {
@@ -106,25 +222,55 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       closePopper: closePopper,
       closeAllPopper: closeAllPopper,
       activeParents: activeParents,
-      activeId: _activeId,
-      expandedIds: _expandedIds
+      activeId: activeId,
+      expandedIds: expandedIds
     }
   }, /*#__PURE__*/React.createElement("ul", {
     className: cx(prefixCls + "__wrapper")
-  }, data.map(function (d) {
-    return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, d, {
-      key: d.id,
-      level: 1
+  }, mergedTagList.map(function (item, index) {
+    return showMini ? /*#__PURE__*/React.createElement(Tooltip, {
+      title: item.title,
+      key: item.id,
+      placement: "right"
+    }, /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, item, {
+      level: 1,
+      render: renderMenuItemMini,
+      raw: item
+    }))) : /*#__PURE__*/React.createElement(MenuItem, Object.assign({
+      hidden: !showVertical && index >= tagMaxCount
+    }, item, {
+      key: item.id,
+      level: 1,
+      raw: item
     }));
-  })), placement === 'vertical' && showCollapse && /*#__PURE__*/React.createElement("div", {
-    className: cx(prefixCls + "__toggle"),
-    onClick: onToggle
-  }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null))));
+  }), /*#__PURE__*/React.createElement(MenuItem, {
+    hidden: showVertical || restTagList.length === 0,
+    id: "hi-v4-menu-more",
+    title: "\u66F4\u591A",
+    children: restTagList
+  })), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer"
+  }, renderFooter())));
 });
 
 if (__DEV__) {
   Menu.displayName = 'Menu';
 }
+/**
+ * Mini 模式下渲染 item
+ */
+
+
+var renderMenuItemMini = function renderMenuItemMini(menu) {
+  if (typeof menu.icon !== 'undefined') {
+    return menu.icon;
+  }
+
+  if (typeof menu.title === 'string') {
+    return menu.title.substring(0, 1);
+  }
+
+  return menu.title;
+};
 
 export { Menu };
-//# sourceMappingURL=Menu.js.map

package/lib/esm/MenuItem.js

@@ -7,28 +7,44 @@
  * 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, isFunction } from '@hi-ui/type-assertion';
+import { times } from '@hi-ui/array-utils';
+import { useMergeRefs } from '@hi-ui/use-merge-refs';
 var MENU_PREFIX = getPrefixCls('menu');
-
-var MenuItem = function MenuItem(_ref) {
+var hiddenStyle = {
+  position: 'absolute',
+  opacity: 0,
+  order: 9999,
+  visibility: 'hidden'
+};
+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,
+      _a$hidden = _a.hidden,
+      hidden = _a$hidden === void 0 ? false : _a$hidden,
+      render = _a.render,
+      raw = _a.raw,
+      rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw"]);
+
   var itemRef = useRef(null);
 
   var _useContext = useContext(MenuContext),
@@ -46,40 +62,60 @@ 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),
+    style: hidden ? hiddenStyle : undefined
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2)),
     onClick: function onClick() {
-      if (children === null || children === void 0 ? void 0 : children.length) {
+      if (isArrayNonEmpty(children)) {
         if (clickSubMenu) {
           clickSubMenu(id);
         }
       } else {
         if (clickMenu) {
-          clickMenu(id);
+          // @ts-ignore
+          clickMenu(id, raw);
         }
 
         if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
           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"
+  }, isFunction(render) ? render({
+    id: id,
+    icon: icon,
+    title: title
+  }) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
+    prefixCls: prefixCls + "-item",
+    direction: "up"
+  }) : /*#__PURE__*/React.createElement(Arrow, {
+    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"
@@ -87,9 +123,10 @@ var MenuItem = function MenuItem(_ref) {
     return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
       level: level + 1,
-      parentIds: _parentIds
+      parentIds: _parentIds,
+      raw: child
     }));
-  }))), (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 +149,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 +163,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 +184,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 +200,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,20 +213,18 @@ 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", {
         onClick: function onClick() {
           if (clickMenu) {
-            clickMenu(item.id);
+            clickMenu(item.id, item);
           }
 
           if (closePopper) {
@@ -197,8 +234,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 +256,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 +272,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,21 +285,19 @@ 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", {
         className: cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
         onClick: function onClick() {
           if (clickMenu) {
-            clickMenu(item.id);
+            clickMenu(item.id, item);
           }
 
           if (closePopper) {
@@ -270,13 +306,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