@qsxy/element-plus-react 1.0.0-next.8 → 1.0.2

package/dist/Menu/Menu.js

@@ -0,0 +1,281 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2;
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classNames from 'classnames';
+import { addClass, removeClass } from 'dom-lib';
+import { pick } from 'lodash';
+import React, { Children, forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { More } from "../Icon/IconList/More";
+import { mergeDefaultProps } from "../Util";
+import { useClassNames, useControlled } from "../hooks";
+import useCssTransiton from "../hooks/useCssTransiton";
+import { afterEnter, afterLeave, beforeEnter, beforeLeave, onEnter, onLeave } from "./MenuCollapseTransition";
+import { MenuContext } from "./MenuContext";
+import SubMenu from "./SubMenu";
+import useEllipsis from "./useEllipsis";
+var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$style;
+  props = mergeDefaultProps({
+    mode: 'vertical',
+    showTimeout: 150,
+    hideTimeout: 300,
+    uniqueOpened: false,
+    collapseTransition: true,
+    defaultOpeneds: [],
+    ellipsis: false,
+    router: false
+  }, props);
+  var _props = props,
+    _props$classPrefix = _props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'menu' : _props$classPrefix,
+    mode = _props.mode,
+    collapse = _props.collapse,
+    defaultActive = _props.defaultActive,
+    showTimeout = _props.showTimeout,
+    hideTimeout = _props.hideTimeout,
+    uniqueOpened = _props.uniqueOpened,
+    defaultOpeneds = _props.defaultOpeneds,
+    collapseTransition = _props.collapseTransition,
+    onSelect = _props.onSelect,
+    onOpen = _props.onOpen,
+    onClose = _props.onClose,
+    menuTrigger = _props.menuTrigger,
+    popperOffset = _props.popperOffset,
+    router = _props.router,
+    ellipsisIcon = _props.ellipsisIcon;
+  var _useClassNames = useClassNames(classPrefix),
+    b = _useClassNames.b,
+    m = _useClassNames.m;
+  var _useControlled = useControlled(undefined, [defaultActive]),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    active = _useControlled2[0],
+    setActive = _useControlled2[1];
+  var _useState = useState(collapse),
+    _useState2 = _slicedToArray(_useState, 2),
+    _collapse = _useState2[0],
+    setCollapse = _useState2[1];
+  // const [, setItems] = useState<MenuItemRegistered[]>([]);
+
+  var menuRef = useRef(null);
+  var menuItemsRef = useRef([]);
+  var subMenuRef = useRef([]);
+  var openedMenus = useRef({});
+  useCssTransiton({
+    nodeRef: menuRef,
+    visible: collapse,
+    disabled: mode === 'horizontal' || !collapseTransition,
+    duration: 300,
+    beforeLeave: beforeLeave,
+    onLeave: onLeave,
+    afterLeave: afterLeave,
+    beforeEnter: beforeEnter,
+    onEnter: onEnter,
+    afterEnter: afterEnter,
+    done: function done() {
+      setCollapse(collapse);
+      if (collapse) {
+        addClass(menuRef.current, m(_templateObject || (_templateObject = _taggedTemplateLiteral(["collapse"]))));
+      } else {
+        removeClass(menuRef.current, m(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["collapse"]))));
+        subMenuRef.current.forEach(function (sub) {
+          sub.closeMenu(sub.index, sub.indexPath);
+        });
+        for (var key in openedMenus.current) {
+          if (Object.prototype.hasOwnProperty.call(openedMenus.current, key)) {
+            var item = openedMenus.current[key];
+            item.openMenu(item.index, item.indexPath);
+          }
+        }
+      }
+    }
+  });
+  var _useEllipsis = useEllipsis(menuRef, props),
+    sliceIndex = _useEllipsis.sliceIndex;
+  var addItem = useCallback(function (menu) {
+    openedMenus.current = _objectSpread(_objectSpread({}, openedMenus.current), {}, _defineProperty({}, menu.index, menu));
+  }, []);
+  var removeItem = useCallback(function (menu) {
+    delete openedMenus.current[menu.index];
+  }, []);
+  var handleOpenMenu = useCallback(function (index, indexPath, item) {
+    if (mode === 'vertical') {
+      // 折叠模式下，index为子菜单，只能向上逐层打开父菜单
+      if (collapse) {
+        if (uniqueOpened) {
+          subMenuRef.current.forEach(function (sub) {
+            sub.closeMenu(index, indexPath);
+            removeItem(sub);
+          });
+        }
+        indexPath.reduce(function (prev, e) {
+          subMenuRef.current.forEach(function (sub) {
+            if (sub.index === e) {
+              sub.openMenu(e, [].concat(_toConsumableArray(prev), [e]));
+              addItem(sub);
+            }
+          });
+          return [].concat(_toConsumableArray(prev), [e]);
+        }, []);
+      } else {
+        // 正常模式，index为父菜单的index
+        subMenuRef.current.forEach(function (sub) {
+          if (sub.index === index) {
+            sub.openMenu(index, indexPath);
+            addItem(sub);
+          }
+          if (uniqueOpened) {
+            if (sub.index !== index && !indexPath.includes(sub.index)) {
+              sub.closeMenu(index, indexPath);
+              removeItem(sub);
+            }
+          }
+        });
+      }
+    }
+    onOpen === null || onOpen === void 0 || onOpen(index, indexPath, item);
+  }, [addItem, collapse, mode, onOpen, removeItem, uniqueOpened]);
+
+  /** 激活菜单项 */
+  var activeMenus = useCallback(function () {
+    if (defaultActive) {
+      var menu = menuItemsRef.current.find(function (item) {
+        return item.index === defaultActive;
+      });
+      if (menu && menu.indexPath.length > 1) {
+        setActive(menu.indexPath);
+        menu.indexPath.reduce(function (prev, item) {
+          handleOpenMenu(item, [].concat(_toConsumableArray(prev), [item]), {
+            index: item,
+            indexPath: [].concat(_toConsumableArray(prev), [item])
+          });
+          return [].concat(_toConsumableArray(prev), [item]);
+        }, []);
+      }
+    }
+    if (defaultOpeneds.length > 0) {
+      defaultOpeneds.forEach(function (keys) {
+        var sub = subMenuRef.current.find(function (item) {
+          return item.index === keys;
+        });
+        if (sub) {
+          sub.openMenu(sub.index, sub.indexPath);
+          addItem(sub);
+        }
+      });
+    }
+  }, [addItem, defaultActive, defaultOpeneds, handleOpenMenu, setActive]);
+
+  /** 添加子菜单 */
+  var addMenuItem = useCallback(function (menu) {
+    var prev = menuItemsRef.current;
+    if (!prev.some(function (item) {
+      return item.index === menu.index;
+    })) {
+      menuItemsRef.current = [].concat(_toConsumableArray(prev), [menu]);
+      activeMenus();
+    } else {
+      var idx = prev.findIndex(function (item) {
+        return item.index === menu.index;
+      });
+      menuItemsRef.current = prev.splice(idx, 1, menu);
+    }
+  }, [activeMenus]);
+
+  /** 添加父菜单 */
+  var addSubMenu = useCallback(function (sub) {
+    var prev = subMenuRef.current;
+    if (!prev.some(function (item) {
+      return item.index === sub.index;
+    })) {
+      subMenuRef.current = [].concat(_toConsumableArray(prev), [sub]);
+      activeMenus();
+    }
+  }, [activeMenus]);
+
+  /** 展开菜单 */
+  var open = useCallback(function (index) {
+    var menu = subMenuRef.current.find(function (item) {
+      return item.index === index;
+    });
+    if (menu && menu.indexPath.length > 1) {
+      // setActive(menu.indexPath);
+      menu.indexPath.reduce(function (prev, item) {
+        handleOpenMenu(item, [].concat(_toConsumableArray(prev), [item]), {
+          index: item,
+          indexPath: [].concat(_toConsumableArray(prev), [item])
+        });
+        return [].concat(_toConsumableArray(prev), [item]);
+      }, []);
+    }
+  }, [handleOpenMenu]);
+
+  /** 折叠菜单 */
+  var close = useCallback(function (index) {
+    var sub = subMenuRef.current.find(function (item) {
+      return item.index === index;
+    });
+    if (sub) {
+      sub.closeMenu(sub.index, sub.indexPath);
+      removeItem(sub);
+    }
+  }, [removeItem]);
+  useImperativeHandle(ref, function () {
+    return {
+      open: open,
+      close: close
+    };
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ul", {
+      ref: menuRef,
+      className: classNames(b(), m(mode), /* { [m('collapse')]: mounted },  */props.className),
+      style: _objectSpread({
+        '--el-menu-level': 0
+      }, props.style)
+    }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
+      value: {
+        activeIndex: active,
+        setActiveIndex: setActive,
+        parentIndex: [],
+        mode: mode,
+        showTimeout: showTimeout,
+        hideTimeout: hideTimeout,
+        onSelect: onSelect,
+        onOpen: handleOpenMenu,
+        onClose: onClose,
+        addMenuItem: addMenuItem,
+        addSubMenu: addSubMenu,
+        addItem: addItem,
+        removeItem: removeItem,
+        menuTrigger: menuTrigger,
+        popperOffset: popperOffset,
+        router: router,
+        collapse: _collapse,
+        themeStyle: pick((_props$style = props.style) !== null && _props$style !== void 0 ? _props$style : {}, ['--el-menu-active-color', '--el-menu-text-color', '--el-menu-hover-text-color', '--el-menu-bg-color', '--el-menu-hover-bg-color', '--el-menu-item-height', '--el-menu-sub-item-height', '--el-menu-horizontal-height', '--el-menu-horizontal-sub-item-height', '--el-menu-item-font-size', '--el-menu-item-hover-fill', '--el-menu-border-color', '--el-menu-base-level-padding', '--el-menu-level-padding', '--el-menu-icon-width'])
+      }
+    }, sliceIndex > 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, Children.toArray(props.children).slice(0, sliceIndex), /*#__PURE__*/React.createElement(SubMenu, {
+      key: "__el__more",
+      index: "__el__more",
+      title: ellipsisIcon !== null && ellipsisIcon !== void 0 ? ellipsisIcon : /*#__PURE__*/React.createElement(More, null)
+    }, Children.toArray(props.children).slice(sliceIndex))) : props.children))
+  );
+});
+Menu.displayName = 'ElMenu';
+export default Menu;

package/dist/Menu/MenuCollapseTransition.d.ts

@@ -0,0 +1,6 @@
+export declare const beforeEnter: (el: any) => void;
+export declare const onEnter: (el: HTMLElement, done: any) => void;
+export declare const afterEnter: (el: HTMLElement) => void;
+export declare const beforeLeave: (el: any) => void;
+export declare const onLeave: (el: any) => void;
+export declare const afterLeave: (el: any) => void;

package/dist/Menu/MenuCollapseTransition.js

@@ -0,0 +1,40 @@
+import { addClass, hasClass, removeClass } from 'dom-lib';
+import { namespace } from "../hooks/prefix";
+export var beforeEnter = function beforeEnter(el) {
+  el.style.opacity = '0.2';
+};
+export var onEnter = function onEnter(el, done) {
+  addClass(el, "".concat(namespace, "-opacity-transition"));
+  el.style.opacity = '1';
+  done === null || done === void 0 || done();
+};
+export var afterEnter = function afterEnter(el) {
+  removeClass(el, "".concat(namespace, "-opacity-transition"));
+  el.style.opacity = '';
+  el.style.width = '';
+};
+export var beforeLeave = function beforeLeave(el) {
+  if (!el.dataset) {
+    el.dataset = {};
+  }
+  if (hasClass(el, "".concat(namespace, "-menu--collapse"))) {
+    removeClass(el, "".concat(namespace, "-menu--collapse"));
+    el.dataset.oldOverflow = el.style.overflow;
+    el.dataset.scrollWidth = el.clientWidth.toString();
+    addClass(el, "".concat(namespace, "-menu--collapse"));
+  } else {
+    addClass(el, "".concat(namespace, "-menu--collapse"));
+    el.dataset.oldOverflow = el.style.overflow;
+    el.dataset.scrollWidth = el.clientWidth.toString();
+    removeClass(el, "".concat(namespace, "-menu--collapse"));
+  }
+  el.style.width = "".concat(el.scrollWidth, "px");
+  el.style.overflow = 'hidden';
+};
+export var onLeave = function onLeave(el) {
+  addClass(el, 'horizontal-collapse-transition');
+  el.style.width = "".concat(el.dataset.scrollWidth, "px");
+};
+export var afterLeave = function afterLeave(el) {
+  removeClass(el, 'horizontal-collapse-transition');
+};

package/dist/Menu/MenuContext.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { MenuItemRegistered, MenuProps, SubMenuProvider } from './typings';
+interface MenuContextProps extends Pick<MenuProps, 'menuTrigger' | 'onSelect' | 'onOpen' | 'onClose' | 'showTimeout' | 'hideTimeout' | 'popperOffset' | 'router' | 'collapse'> {
+    activeIndex?: string[];
+    setActiveIndex?: (value: string[]) => void;
+    handleSubMenuClick?: () => void;
+    parentIndex?: string[];
+    addMenuItem?: (menu: MenuItemRegistered) => void;
+    addSubMenu?: (sub: SubMenuProvider) => void;
+    /** 菜单展示模式 */
+    mode?: 'horizontal' | 'vertical';
+    addItem?: (menu: SubMenuProvider) => void;
+    removeItem?: (menu: SubMenuProvider) => void;
+    themeStyle?: React.CSSProperties & Partial<Record<'--el-menu-active-color' | '--el-menu-text-color' | '--el-menu-hover-text-color' | '--el-menu-bg-color' | '--el-menu-hover-bg-color' | '--el-menu-item-height' | '--el-menu-sub-item-height' | '--el-menu-horizontal-height' | '--el-menu-horizontal-sub-item-height' | '--el-menu-item-font-size' | '--el-menu-item-hover-fill' | '--el-menu-border-color' | '--el-menu-base-level-padding' | '--el-menu-level-padding' | '--el-menu-icon-width', string>>;
+}
+export declare const MenuContext: React.Context<MenuContextProps>;
+export declare const useMenuContext: () => MenuContextProps;
+export {};

package/dist/Menu/MenuContext.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+export var MenuContext = /*#__PURE__*/createContext({
+  activeIndex: [],
+  parentIndex: [],
+  mode: null,
+  handleSubMenuClick: null,
+  setActiveIndex: null,
+  onSelect: null,
+  onOpen: null,
+  onClose: null,
+  addSubMenu: null,
+  addItem: null,
+  removeItem: null,
+  showTimeout: 300,
+  hideTimeout: 300,
+  themeStyle: {}
+});
+export var useMenuContext = function useMenuContext() {
+  return useContext(MenuContext);
+};

package/dist/Menu/MenuItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MenuItemProps } from './typings';
+declare const MenuItem: {
+    (props: MenuItemProps): React.JSX.Element;
+    displayName: string;
+};
+export default MenuItem;

package/dist/Menu/MenuItem.js

@@ -0,0 +1,77 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { useMount } from 'ahooks';
+import classNames from 'classnames';
+import React, { useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useClassNames } from "../hooks";
+import { useMenuContext } from "./MenuContext";
+var MenuItem = function MenuItem(props) {
+  var _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'menu-item' : _props$classPrefix,
+    index = props.index,
+    route = props.route,
+    disabled = props.disabled,
+    onClick = props.onClick;
+  var _useClassNames = useClassNames(classPrefix),
+    b = _useClassNames.b,
+    is = _useClassNames.is;
+  var _useMenuContext = useMenuContext(),
+    handleSubMenuClick = _useMenuContext.handleSubMenuClick,
+    activeIndex = _useMenuContext.activeIndex,
+    setActiveIndex = _useMenuContext.setActiveIndex,
+    parentIndex = _useMenuContext.parentIndex,
+    addMenuItem = _useMenuContext.addMenuItem,
+    onOpen = _useMenuContext.onOpen,
+    onSelect = _useMenuContext.onSelect,
+    router = _useMenuContext.router;
+  var navigate = useNavigate();
+  var indexPath = useMemo(function () {
+    return [].concat(_toConsumableArray(parentIndex), [index]);
+  }, [index, parentIndex]);
+  var handleMenuItemClick = useCallback(function (evt) {
+    evt.stopPropagation();
+    if (disabled) {
+      return;
+    }
+    setActiveIndex(indexPath);
+    handleSubMenuClick === null || handleSubMenuClick === void 0 || handleSubMenuClick();
+    onClick === null || onClick === void 0 || onClick({
+      index: index,
+      indexPath: indexPath,
+      active: activeIndex.includes(index)
+    });
+    onOpen === null || onOpen === void 0 || onOpen(index, indexPath, {
+      index: index,
+      indexPath: indexPath
+    });
+    onSelect === null || onSelect === void 0 || onSelect(index, indexPath, {
+      index: index,
+      indexPath: indexPath
+    });
+    if (router) {
+      navigate === null || navigate === void 0 || navigate(route !== null && route !== void 0 ? route : index);
+    }
+  }, [activeIndex, disabled, handleSubMenuClick, index, indexPath, navigate, onClick, onOpen, onSelect, route, router, setActiveIndex]);
+  useMount(function () {
+    addMenuItem({
+      index: index,
+      indexPath: indexPath
+    });
+  });
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames(b(), is({
+      disabled: disabled,
+      active: activeIndex.includes(index)
+    }), props.className),
+    style: props.style,
+    role: "menuitem",
+    onClick: handleMenuItemClick
+  }, props.children);
+};
+MenuItem.displayName = 'ElMenuItem';
+export default MenuItem;

package/dist/Menu/MenuItemGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MenuItemGroupProps } from './typings';
+declare const MenuItemGroup: {
+    (props: MenuItemGroupProps): React.JSX.Element;
+    displayName: string;
+};
+export default MenuItemGroup;

package/dist/Menu/MenuItemGroup.js

@@ -0,0 +1,45 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import classNames from 'classnames';
+import React from 'react';
+import { useClassNames } from "../hooks";
+var MenuItemGroup = function MenuItemGroup(props) {
+  var _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'menu-item-group' : _props$classPrefix,
+    title = props.title;
+  var _useClassNames = useClassNames(classPrefix),
+    b = _useClassNames.b,
+    e = _useClassNames.e;
+
+  // const { handleSubMenuClick, activeIndex, setActiveIndex, parentIndex, onSelect } = useMenuContext();
+
+  // const indexPath = useMemo(() => [...parentIndex, index], [index, parentIndex]);
+
+  // const handleMenuItemClick = useCallback(() => {
+  //     if (disabled) {
+  //         return;
+  //     }
+  //     setActiveIndex(indexPath);
+  //     handleSubMenuClick?.();
+  //     onClick?.({
+  //         index,
+  //         indexPath,
+  //         active: activeIndex.includes(index),
+  //     });
+  //     onSelect?.(index, indexPath, { index, indexPath });
+  // }, [activeIndex, disabled, handleSubMenuClick, index, indexPath, onClick, onSelect, setActiveIndex]);
+
+  // useLayoutEffect(() => {
+  //     // console.log(indexPath);
+  // }, []);
+
+  return /*#__PURE__*/React.createElement("li", {
+    className: classNames(b(), props.className),
+    style: props.style,
+    role: "menuitem"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["title"])))
+  }, title), /*#__PURE__*/React.createElement("ul", null, props.children));
+};
+MenuItemGroup.displayName = 'ElMenuItemGroup';
+export default MenuItemGroup;

package/dist/Menu/SubMenu.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SubMenuProps } from './typings';
+declare const SubMenu: {
+    (props: SubMenuProps): React.JSX.Element;
+    displayName: string;
+};
+export default SubMenu;