acud 0.0.60

package/es/menu/rc-menu/Menu.js

@@ -0,0 +1,423 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import * as React from 'react';
+import classNames from 'classnames';
+import shallowEqual from 'shallowequal';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import warning from "rc-util/es/warning";
+import Overflow from 'rc-overflow';
+import MenuItem from './MenuItem';
+import { parseChildren } from './utils/nodeUtil';
+import MenuContextProvider from './context/MenuContext';
+import useMemoCallback from './hooks/useMemoCallback';
+import { warnItemProp } from './utils/warnUtil';
+import SubMenu from './SubMenu';
+import useAccessibility from './hooks/useAccessibility';
+import useUUID from './hooks/useUUID';
+import { PathRegisterContext, PathUserContext } from './context/PathContext';
+import useKeyRecords, { OVERFLOW_KEY } from './hooks/useKeyRecords';
+import { IdContext } from './context/IdContext';
+/**
+ * Menu modify after refactor:
+ * ## Add
+ * - disabled
+ *
+ * ## Remove
+ * - openTransitionName
+ * - openAnimation
+ * - onDestroy
+ * - siderCollapsed: Seems antd do not use this prop (Need test in antd)
+ * - collapsedWidth: Seems this logic should be handle by antd Layout.Sider
+ */
+// optimize for render
+
+var EMPTY_LIST = [];
+
+var Menu = function Menu(props) {
+  var _classNames;
+
+  var _a;
+
+  var _b = props,
+      _b$prefixCls = _b.prefixCls,
+      prefixCls = _b$prefixCls === void 0 ? 'rc-menu' : _b$prefixCls,
+      style = _b.style,
+      className = _b.className,
+      _b$tabIndex = _b.tabIndex,
+      tabIndex = _b$tabIndex === void 0 ? 0 : _b$tabIndex,
+      children = _b.children,
+      direction = _b.direction,
+      id = _b.id,
+      _b$mode = _b.mode,
+      mode = _b$mode === void 0 ? 'vertical' : _b$mode,
+      inlineCollapsed = _b.inlineCollapsed,
+      disabled = _b.disabled,
+      disabledOverflow = _b.disabledOverflow,
+      _b$subMenuOpenDelay = _b.subMenuOpenDelay,
+      subMenuOpenDelay = _b$subMenuOpenDelay === void 0 ? 0.1 : _b$subMenuOpenDelay,
+      _b$subMenuCloseDelay = _b.subMenuCloseDelay,
+      subMenuCloseDelay = _b$subMenuCloseDelay === void 0 ? 0.1 : _b$subMenuCloseDelay,
+      forceSubMenuRender = _b.forceSubMenuRender,
+      defaultOpenKeys = _b.defaultOpenKeys,
+      openKeys = _b.openKeys,
+      activeKey = _b.activeKey,
+      defaultActiveFirst = _b.defaultActiveFirst,
+      _b$selectable = _b.selectable,
+      selectable = _b$selectable === void 0 ? true : _b$selectable,
+      _b$multiple = _b.multiple,
+      multiple = _b$multiple === void 0 ? false : _b$multiple,
+      defaultSelectedKeys = _b.defaultSelectedKeys,
+      selectedKeys = _b.selectedKeys,
+      onSelect = _b.onSelect,
+      onDeselect = _b.onDeselect,
+      _b$inlineIndent = _b.inlineIndent,
+      inlineIndent = _b$inlineIndent === void 0 ? 24 : _b$inlineIndent,
+      motion = _b.motion,
+      defaultMotions = _b.defaultMotions,
+      _b$triggerSubMenuActi = _b.triggerSubMenuAction,
+      triggerSubMenuAction = _b$triggerSubMenuActi === void 0 ? 'hover' : _b$triggerSubMenuActi,
+      builtinPlacements = _b.builtinPlacements,
+      itemIcon = _b.itemIcon,
+      expandIcon = _b.expandIcon,
+      _b$overflowedIndicato = _b.overflowedIndicator,
+      overflowedIndicator = _b$overflowedIndicato === void 0 ? '...' : _b$overflowedIndicato,
+      overflowedIndicatorPopupClassName = _b.overflowedIndicatorPopupClassName,
+      getPopupContainer = _b.getPopupContainer,
+      onClick = _b.onClick,
+      onOpenChange = _b.onOpenChange,
+      onKeyDown = _b.onKeyDown,
+      openAnimation = _b.openAnimation,
+      openTransitionName = _b.openTransitionName,
+      restProps = __rest(_b, ["prefixCls", "style", "className", "tabIndex", "children", "direction", "id", "mode", "inlineCollapsed", "disabled", "disabledOverflow", "subMenuOpenDelay", "subMenuCloseDelay", "forceSubMenuRender", "defaultOpenKeys", "openKeys", "activeKey", "defaultActiveFirst", "selectable", "multiple", "defaultSelectedKeys", "selectedKeys", "onSelect", "onDeselect", "inlineIndent", "motion", "defaultMotions", "triggerSubMenuAction", "builtinPlacements", "itemIcon", "expandIcon", "overflowedIndicator", "overflowedIndicatorPopupClassName", "getPopupContainer", "onClick", "onOpenChange", "onKeyDown", "openAnimation", "openTransitionName"]);
+
+  var childList = parseChildren(children, EMPTY_LIST);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      mounted = _React$useState2[0],
+      setMounted = _React$useState2[1];
+
+  var containerRef = React.useRef();
+  var uuid = useUUID(id);
+  var isRtl = direction === 'rtl'; // ========================= Warn =========================
+
+  if (process.env.NODE_ENV !== 'production') {
+    warning(!openAnimation && !openTransitionName, '`openAnimation` and `openTransitionName` is removed. Please use `motion` or `defaultMotion` instead.');
+  } // ========================= Mode =========================
+
+
+  var _React$useMemo = React.useMemo(function () {
+    if ((mode === 'inline' || mode === 'vertical') && inlineCollapsed) {
+      return ['vertical', inlineCollapsed];
+    }
+
+    return [mode, false];
+  }, [mode, inlineCollapsed]),
+      _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+      mergedMode = _React$useMemo2[0],
+      mergedInlineCollapsed = _React$useMemo2[1]; // ====================== Responsive ======================
+
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      lastVisibleIndex = _React$useState4[0],
+      setLastVisibleIndex = _React$useState4[1];
+
+  var allVisible = lastVisibleIndex >= childList.length - 1 || mergedMode !== 'horizontal' || disabledOverflow; // ========================= Open =========================
+
+  var _useMergedState = useMergedState(defaultOpenKeys, {
+    value: openKeys,
+    postState: function postState(keys) {
+      return keys || EMPTY_LIST;
+    }
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      mergedOpenKeys = _useMergedState2[0],
+      setMergedOpenKeys = _useMergedState2[1];
+
+  var triggerOpenKeys = function triggerOpenKeys(keys) {
+    setMergedOpenKeys(keys);
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(keys);
+  }; // >>>>> Cache & Reset open keys when inlineCollapsed changed
+
+
+  var _React$useState5 = React.useState(mergedOpenKeys),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      inlineCacheOpenKeys = _React$useState6[0],
+      setInlineCacheOpenKeys = _React$useState6[1];
+
+  var isInlineMode = mergedMode === 'inline';
+  var mountRef = React.useRef(false); // Cache
+
+  React.useEffect(function () {
+    if (isInlineMode) {
+      setInlineCacheOpenKeys(mergedOpenKeys);
+    }
+  }, [mergedOpenKeys]); // Restore
+
+  React.useEffect(function () {
+    if (!mountRef.current) {
+      mountRef.current = true;
+      return;
+    }
+
+    if (isInlineMode) {
+      setMergedOpenKeys(inlineCacheOpenKeys);
+    } else {
+      // Trigger open event in case its in control
+      triggerOpenKeys(EMPTY_LIST);
+    }
+  }, [isInlineMode]); // ========================= Path =========================
+
+  var _useKeyRecords = useKeyRecords(),
+      registerPath = _useKeyRecords.registerPath,
+      unregisterPath = _useKeyRecords.unregisterPath,
+      refreshOverflowKeys = _useKeyRecords.refreshOverflowKeys,
+      isSubPathKey = _useKeyRecords.isSubPathKey,
+      getKeyPath = _useKeyRecords.getKeyPath,
+      getKeys = _useKeyRecords.getKeys,
+      getSubPathKeys = _useKeyRecords.getSubPathKeys;
+
+  var registerPathContext = React.useMemo(function () {
+    return {
+      registerPath: registerPath,
+      unregisterPath: unregisterPath
+    };
+  }, [registerPath, unregisterPath]);
+  var pathUserContext = React.useMemo(function () {
+    return {
+      isSubPathKey: isSubPathKey
+    };
+  }, [isSubPathKey]);
+  React.useEffect(function () {
+    refreshOverflowKeys(allVisible ? EMPTY_LIST : childList.slice(lastVisibleIndex + 1).map(function (child) {
+      return child.key;
+    }));
+  }, [lastVisibleIndex, allVisible]); // ======================== Active ========================
+
+  var _useMergedState3 = useMergedState(activeKey || defaultActiveFirst && ((_a = childList[0]) === null || _a === void 0 ? void 0 : _a.key), {
+    value: activeKey
+  }),
+      _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+      mergedActiveKey = _useMergedState4[0],
+      setMergedActiveKey = _useMergedState4[1];
+
+  var onActive = useMemoCallback(function (key) {
+    setMergedActiveKey(key);
+  });
+  var onInactive = useMemoCallback(function () {
+    setMergedActiveKey(undefined);
+  }); // ======================== Select ========================
+  // >>>>> Select keys
+
+  var _useMergedState5 = useMergedState(defaultSelectedKeys || [], {
+    value: selectedKeys,
+    // Legacy convert key to array
+    postState: function postState(keys) {
+      if (Array.isArray(keys)) {
+        return keys;
+      }
+
+      if (keys === null || keys === undefined) {
+        return EMPTY_LIST;
+      }
+
+      return [keys];
+    }
+  }),
+      _useMergedState6 = _slicedToArray(_useMergedState5, 2),
+      mergedSelectKeys = _useMergedState6[0],
+      setMergedSelectKeys = _useMergedState6[1]; // >>>>> Trigger select
+
+
+  var triggerSelection = function triggerSelection(info) {
+    if (selectable) {
+      // Insert or Remove
+      var targetKey = info.key;
+      var exist = mergedSelectKeys.includes(targetKey);
+      var newSelectKeys;
+
+      if (multiple) {
+        if (exist) {
+          newSelectKeys = mergedSelectKeys.filter(function (key) {
+            return key !== targetKey;
+          });
+        } else {
+          newSelectKeys = [].concat(_toConsumableArray(mergedSelectKeys), [targetKey]);
+        }
+      } else {
+        newSelectKeys = [targetKey];
+      }
+
+      setMergedSelectKeys(newSelectKeys); // Trigger event
+
+      var selectInfo = _extends(_extends({}, info), {
+        selectedKeys: newSelectKeys
+      });
+
+      if (exist) {
+        onDeselect === null || onDeselect === void 0 ? void 0 : onDeselect(selectInfo);
+      } else {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectInfo);
+      }
+    } // Whatever selectable, always close it
+
+
+    if (!multiple && mergedOpenKeys.length && mergedMode !== 'inline') {
+      triggerOpenKeys(EMPTY_LIST);
+    }
+  }; // ========================= Open =========================
+
+  /**
+   * Click for item. SubMenu do not have selection status
+   */
+
+
+  var onInternalClick = useMemoCallback(function (info) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(warnItemProp(info));
+    triggerSelection(info);
+  });
+  var onInternalOpenChange = useMemoCallback(function (key, open) {
+    var newOpenKeys = mergedOpenKeys.filter(function (k) {
+      return k !== key;
+    });
+
+    if (open) {
+      newOpenKeys.push(key);
+    } else if (mergedMode !== 'inline') {
+      // We need find all related popup to close
+      var subPathKeys = getSubPathKeys(key);
+      newOpenKeys = newOpenKeys.filter(function (k) {
+        return !subPathKeys.has(k);
+      });
+    }
+
+    if (!shallowEqual(mergedOpenKeys, newOpenKeys)) {
+      triggerOpenKeys(newOpenKeys);
+    }
+  });
+  var getInternalPopupContainer = useMemoCallback(getPopupContainer); // ==================== Accessibility =====================
+
+  var triggerAccessibilityOpen = function triggerAccessibilityOpen(key, open) {
+    var nextOpen = open !== null && open !== void 0 ? open : !mergedOpenKeys.includes(key);
+    onInternalOpenChange(key, nextOpen);
+  };
+
+  var onInternalKeyDown = useAccessibility(mergedMode, mergedActiveKey, isRtl, uuid, containerRef, getKeys, getKeyPath, setMergedActiveKey, triggerAccessibilityOpen, onKeyDown); // ======================== Effect ========================
+
+  React.useEffect(function () {
+    setMounted(true);
+  }, []); // ======================== Render ========================
+  // >>>>> Children
+
+  var wrappedChildList = mergedMode !== 'horizontal' || disabledOverflow ? childList : // Need wrap for overflow dropdown that do not response for open
+  childList.map(function (child, index) {
+    return (
+      /*#__PURE__*/
+      // Always wrap provider to avoid sub node re-mount
+      React.createElement(MenuContextProvider, {
+        key: child.key,
+        overflowDisabled: index > lastVisibleIndex
+      }, child)
+    );
+  }); // >>>>> Container
+
+  var container = /*#__PURE__*/React.createElement(Overflow, _extends({
+    id: id,
+    ref: containerRef,
+    prefixCls: "".concat(prefixCls, "-overflow"),
+    component: "ul",
+    itemComponent: MenuItem,
+    className: classNames(prefixCls, "".concat(prefixCls, "-root"), "".concat(prefixCls, "-").concat(mergedMode), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-inline-collapsed"), mergedInlineCollapsed), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), isRtl), _classNames)),
+    dir: direction,
+    style: style,
+    role: "menu",
+    tabIndex: tabIndex,
+    data: wrappedChildList,
+    renderRawItem: function renderRawItem(node) {
+      return node;
+    },
+    renderRawRest: function renderRawRest(omitItems) {
+      // We use origin list since wrapped list use context to prevent open
+      var len = omitItems.length;
+      var originOmitItems = len ? childList.slice(-len) : null;
+      return /*#__PURE__*/React.createElement(SubMenu, {
+        eventKey: OVERFLOW_KEY,
+        title: overflowedIndicator,
+        disabled: allVisible,
+        internalPopupClose: len === 0,
+        popupClassName: overflowedIndicatorPopupClassName
+      }, originOmitItems);
+    },
+    maxCount: mergedMode !== 'horizontal' || disabledOverflow ? Overflow.INVALIDATE : Overflow.RESPONSIVE,
+    ssr: "full",
+    "data-menu-list": true,
+    onVisibleChange: function onVisibleChange(newLastIndex) {
+      setLastVisibleIndex(newLastIndex);
+    },
+    onKeyDown: onInternalKeyDown
+  }, restProps)); // >>>>> Render
+
+  return /*#__PURE__*/React.createElement(IdContext.Provider, {
+    value: uuid
+  }, /*#__PURE__*/React.createElement(MenuContextProvider, {
+    prefixCls: prefixCls,
+    mode: mergedMode,
+    inlineCollapsed: mergedInlineCollapsed,
+    openKeys: mergedOpenKeys,
+    rtl: isRtl // Disabled
+    ,
+    disabled: disabled // Motion
+    ,
+    motion: mounted ? motion : null,
+    defaultMotions: mounted ? defaultMotions : null // Active
+    ,
+    activeKey: mergedActiveKey,
+    onActive: onActive,
+    onInactive: onInactive // Selection
+    ,
+    selectedKeys: mergedSelectKeys // Level
+    ,
+    inlineIndent: inlineIndent // Popup
+    ,
+    subMenuOpenDelay: subMenuOpenDelay,
+    subMenuCloseDelay: subMenuCloseDelay,
+    forceSubMenuRender: forceSubMenuRender,
+    builtinPlacements: builtinPlacements,
+    triggerSubMenuAction: triggerSubMenuAction,
+    getPopupContainer: getInternalPopupContainer // Icon
+    ,
+    itemIcon: itemIcon,
+    expandIcon: expandIcon // Events
+    ,
+    onItemClick: onInternalClick,
+    onOpenChange: onInternalOpenChange
+  }, /*#__PURE__*/React.createElement(PathUserContext.Provider, {
+    value: pathUserContext
+  }, container), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'none'
+    },
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(PathRegisterContext.Provider, {
+    value: registerPathContext
+  }, childList))));
+};
+
+export default Menu;

package/es/menu/rc-menu/MenuItem.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { MenuClickEventHandler, MenuHoverEventHandler, RenderIconType } from './interface';
+export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
+    children?: React.ReactNode;
+    /** @private Internal filled key. Do not set it directly */
+    eventKey?: string;
+    /** @private Do not use. Private warning empty usage */
+    warnKey?: boolean;
+    disabled?: boolean;
+    itemIcon?: RenderIconType;
+    /** @deprecated No place to use this. Should remove */
+    attribute?: Record<string, string>;
+    onMouseEnter?: MenuHoverEventHandler;
+    onMouseLeave?: MenuHoverEventHandler;
+    onClick?: MenuClickEventHandler;
+}
+declare function MenuItem(props: MenuItemProps): React.ReactElement;
+export default MenuItem;

package/es/menu/rc-menu/MenuItem.js

@@ -0,0 +1,220 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import * as React from 'react';
+import classNames from 'classnames';
+import Overflow from 'rc-overflow';
+import warning from "rc-util/es/warning";
+import KeyCode from "rc-util/es/KeyCode";
+import omit from "rc-util/es/omit";
+import { MenuContext } from './context/MenuContext';
+import useActive from './hooks/useActive';
+import { warnItemProp } from './utils/warnUtil';
+import Icon from './Icon'; // import useDirectionStyle from './hooks/useDirectionStyle';
+
+import { useFullPath, useMeasure } from './context/PathContext';
+import { useMenuId } from './context/IdContext'; // Since Menu event provide the `info.item` which point to the MenuItem node instance.
+// We have to use class component here.
+// This should be removed from doc & api in future.
+
+var LegacyMenuItem = /*#__PURE__*/function (_React$Component) {
+  _inherits(LegacyMenuItem, _React$Component);
+
+  var _super = _createSuper(LegacyMenuItem);
+
+  function LegacyMenuItem() {
+    _classCallCheck(this, LegacyMenuItem);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(LegacyMenuItem, [{
+    key: "render",
+    value: function render() {
+      var _a = this.props,
+          title = _a.title,
+          attribute = _a.attribute,
+          elementRef = _a.elementRef,
+          restProps = __rest(_a, ["title", "attribute", "elementRef"]);
+
+      var passedProps = omit(restProps, ['eventKey']);
+      warning(!attribute, '`attribute` of Menu.Item is deprecated. Please pass attribute directly.');
+      return /*#__PURE__*/React.createElement(Overflow.Item, _extends({}, attribute, {
+        title: typeof title === 'string' ? title : undefined
+      }, passedProps, {
+        ref: elementRef
+      }));
+    }
+  }]);
+
+  return LegacyMenuItem;
+}(React.Component);
+/**
+ * Real Menu Item component
+ */
+
+
+var InternalMenuItem = function InternalMenuItem(props) {
+  var _classNames;
+
+  var style = props.style,
+      className = props.className,
+      eventKey = props.eventKey,
+      warnKey = props.warnKey,
+      disabled = props.disabled,
+      itemIcon = props.itemIcon,
+      children = props.children,
+      role = props.role,
+      onMouseEnter = props.onMouseEnter,
+      onMouseLeave = props.onMouseLeave,
+      onClick = props.onClick,
+      onKeyDown = props.onKeyDown,
+      onFocus = props.onFocus,
+      restProps = __rest(props, ["style", "className", "eventKey", "warnKey", "disabled", "itemIcon", "children", "role", "onMouseEnter", "onMouseLeave", "onClick", "onKeyDown", "onFocus"]);
+
+  var domDataId = useMenuId(eventKey);
+
+  var _React$useContext = React.useContext(MenuContext),
+      prefixCls = _React$useContext.prefixCls,
+      onItemClick = _React$useContext.onItemClick,
+      contextDisabled = _React$useContext.disabled,
+      overflowDisabled = _React$useContext.overflowDisabled,
+      contextItemIcon = _React$useContext.itemIcon,
+      selectedKeys = _React$useContext.selectedKeys,
+      onActive = _React$useContext.onActive;
+
+  var itemCls = "".concat(prefixCls, "-item");
+  var legacyMenuItemRef = React.useRef();
+  var elementRef = React.useRef();
+  var mergedDisabled = contextDisabled || disabled;
+  var connectedKeys = useFullPath(eventKey); // ================================ Warn ================================
+
+  if (process.env.NODE_ENV !== 'production' && warnKey) {
+    warning(false, 'MenuItem should not leave undefined `key`.');
+  } // ============================= Info =============================
+
+
+  var getEventInfo = function getEventInfo(e) {
+    return {
+      key: eventKey,
+      // Note: For legacy code is reversed which not like other antd component
+      keyPath: _toConsumableArray(connectedKeys).reverse(),
+      item: legacyMenuItemRef.current,
+      domEvent: e
+    };
+  }; // ============================= Icon =============================
+
+
+  var mergedItemIcon = itemIcon || contextItemIcon; // ============================ Active ============================
+
+  var _a = useActive(eventKey, mergedDisabled, onMouseEnter, onMouseLeave),
+      active = _a.active,
+      activeProps = __rest(_a, ["active"]); // ============================ Select ============================
+
+
+  var selected = selectedKeys.includes(eventKey); // ======================== DirectionStyle ========================
+  // const directionStyle = useDirectionStyle(connectedKeys.length);
+  // ============================ Events ============================
+
+  var onInternalClick = function onInternalClick(e) {
+    if (mergedDisabled) {
+      return;
+    }
+
+    var info = getEventInfo(e);
+    onClick === null || onClick === void 0 ? void 0 : onClick(warnItemProp(info));
+    onItemClick(info);
+  };
+
+  var onInternalKeyDown = function onInternalKeyDown(e) {
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+
+    if (e.which === KeyCode.ENTER) {
+      var info = getEventInfo(e); // Legacy. Key will also trigger click event
+
+      onClick === null || onClick === void 0 ? void 0 : onClick(warnItemProp(info));
+      onItemClick(info);
+    }
+  };
+  /**
+   * Used for accessibility. Helper will focus element without key board.
+   * We should manually trigger an active
+   */
+
+
+  var onInternalFocus = function onInternalFocus(e) {
+    onActive(eventKey);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  }; // ============================ Render ============================
+
+
+  var optionRoleProps = {};
+
+  if (props.role === 'option') {
+    optionRoleProps['aria-selected'] = selected;
+  }
+
+  return /*#__PURE__*/React.createElement(LegacyMenuItem, _extends({
+    ref: legacyMenuItemRef,
+    elementRef: elementRef,
+    role: role === null ? 'none' : role || 'menuitem',
+    tabIndex: disabled ? null : -1,
+    "data-menu-id": overflowDisabled && domDataId ? null : domDataId
+  }, restProps, activeProps, optionRoleProps, {
+    component: "li",
+    "aria-disabled": disabled,
+    style: _extends({}, style),
+    className: classNames(itemCls, (_classNames = {}, _defineProperty(_classNames, "".concat(itemCls, "-active"), active), _defineProperty(_classNames, "".concat(itemCls, "-selected"), selected), _defineProperty(_classNames, "".concat(itemCls, "-disabled"), mergedDisabled), _classNames), className),
+    onClick: onInternalClick,
+    onKeyDown: onInternalKeyDown,
+    onFocus: onInternalFocus
+  }), children, /*#__PURE__*/React.createElement(Icon, {
+    props: _extends(_extends({}, props), {
+      isSelected: selected
+    }),
+    icon: mergedItemIcon
+  }));
+};
+
+function MenuItem(props) {
+  var eventKey = props.eventKey; // ==================== Record KeyPath ====================
+
+  var measure = useMeasure();
+  var connectedKeyPath = useFullPath(eventKey); // eslint-disable-next-line consistent-return
+
+  React.useEffect(function () {
+    if (measure) {
+      measure.registerPath(eventKey, connectedKeyPath);
+      return function () {
+        measure.unregisterPath(eventKey, connectedKeyPath);
+      };
+    }
+  }, [connectedKeyPath]);
+
+  if (measure) {
+    return null;
+  } // ======================== Render ========================
+
+
+  return /*#__PURE__*/React.createElement(InternalMenuItem, props);
+}
+
+export default MenuItem;

package/es/menu/rc-menu/MenuItemGroup.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface MenuItemGroupProps {
+    className?: string;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    /** @private Internal filled key. Do not set it directly */
+    eventKey?: string;
+    /** @private Do not use. Private warning empty usage */
+    warnKey?: boolean;
+}
+export default function MenuItemGroup({ children, ...props }: MenuItemGroupProps): React.ReactElement;