rc-menu - npm Package Compare versions

Comparing version 9.13.0 to 9.14.0

es/interface.d.ts

 import type * as React from 'react';
 interface ItemSharedProps {
+    ref?: React.Ref<HTMLLIElement | null>;
     style?: React.CSSProperties;
@@ -7,2 +8,3 @@ className?: string;
 export interface SubMenuType extends ItemSharedProps {
+    type?: 'submenu';
     label?: React.ReactNode;
@@ -26,2 +28,3 @@ children: ItemType[];
 export interface MenuItemType extends ItemSharedProps {
+    type?: 'item';
     label?: React.ReactNode;
@@ -40,3 +43,3 @@ disabled?: boolean;
 }
-export interface MenuDividerType extends ItemSharedProps {
+export interface MenuDividerType extends Omit<ItemSharedProps, 'ref'> {
     type: 'divider';
@@ -83,2 +86,4 @@ }
 };
+export type ComponentType = 'submenu' | 'item' | 'group' | 'divider';
+export type Components = Partial<Record<ComponentType, React.ComponentType<any>>>;
 export {};

es/Menu.d.ts

 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
-import type { BuiltinPlacements, ItemType, MenuClickEventHandler, MenuMode, MenuRef, RenderIconType, SelectEventHandler, TriggerSubMenuAction } from './interface';
+import type { BuiltinPlacements, Components, ItemType, MenuClickEventHandler, MenuMode, MenuRef, RenderIconType, SelectEventHandler, TriggerSubMenuAction } from './interface';
 export interface MenuProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
@@ -64,4 +64,11 @@ prefixCls?: string;
     }) => React.ReactElement;
+    /**
+     * @private NEVER! EVER! USE IN PRODUCTION!!!
+     * This is a hack API for `antd` to fix `findDOMNode` issue.
+     * Not use it! Not accept any PR try to make it as normal API.
+     * By zombieJ
+     */
+    _internalComponents?: Components;
 }
 declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<MenuRef>>;
 export default Menu;

es/Menu.js

@@ -7,3 +7,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "rootClassName", "style", "className", "tabIndex", "items", "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", "_internalRenderMenuItem", "_internalRenderSubMenuItem"];
+var _excluded = ["prefixCls", "rootClassName", "style", "className", "tabIndex", "items", "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", "_internalRenderMenuItem", "_internalRenderSubMenuItem", "_internalComponents"];
 import classNames from 'classnames';
@@ -101,6 +101,10 @@ import Overflow from 'rc-overflow';
     _internalRenderSubMenuItem = _ref._internalRenderSubMenuItem,
+    _internalComponents = _ref._internalComponents,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  var childList = React.useMemo(function () {
-    return parseItems(children, items, EMPTY_LIST);
-  }, [children, items]);
+  var _React$useMemo = React.useMemo(function () {
+      return [parseItems(children, items, EMPTY_LIST, _internalComponents), parseItems(children, items, EMPTY_LIST, {})];
+    }, [children, items, _internalComponents]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+    childList = _React$useMemo2[0],
+    measureChildList = _React$useMemo2[1];
   var _React$useState = React.useState(false),
@@ -153,3 +157,3 @@ _React$useState2 = _slicedToArray(_React$useState, 2),
   // ========================= Mode =========================
-  var _React$useMemo = React.useMemo(function () {
+  var _React$useMemo3 = React.useMemo(function () {
       if ((mode === 'inline' || mode === 'vertical') && inlineCollapsed) {
@@ -160,5 +164,5 @@ return ['vertical', inlineCollapsed];
     }, [mode, inlineCollapsed]),
-    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
-    mergedMode = _React$useMemo2[0],
-    mergedInlineCollapsed = _React$useMemo2[1];
+    _React$useMemo4 = _slicedToArray(_React$useMemo3, 2),
+    mergedMode = _React$useMemo4[0],
+    mergedInlineCollapsed = _React$useMemo4[1];
   var isInlineMode = mergedMode === 'inline';
@@ -479,4 +483,4 @@ var _React$useState5 = React.useState(mergedMode),
     value: registerPathContext
-  }, childList)))));
+  }, measureChildList)))));
 });
 export default Menu;

es/MenuItem.d.ts

 import * as React from 'react';
 import type { MenuItemType } from './interface';
-export interface MenuItemProps extends Omit<MenuItemType, 'label' | 'key'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
+export interface MenuItemProps extends Omit<MenuItemType, 'label' | 'key' | 'ref'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
     children?: React.ReactNode;
@@ -5,0 +5,0 @@ /** @private Internal filled key. Do not set it directly */

es/MenuItemGroup.d.ts

@@ -11,2 +11,3 @@ import * as React from 'react';
 }
-export default function MenuItemGroup({ children, ...props }: MenuItemGroupProps): React.ReactElement;
+declare const MenuItemGroup: React.ForwardRefExoticComponent<Omit<MenuItemGroupProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export default MenuItemGroup;

es/MenuItemGroup.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "title", "eventKey", "children"],
-  _excluded2 = ["children"];
+var _excluded = ["className", "title", "eventKey", "children"];
 import classNames from 'classnames';
@@ -11,8 +10,8 @@ import omit from "rc-util/es/omit";
 import { parseChildren } from "./utils/commonUtil";
-var InternalMenuItemGroup = function InternalMenuItemGroup(_ref) {
-  var className = _ref.className,
-    title = _ref.title,
-    eventKey = _ref.eventKey,
-    children = _ref.children,
-    restProps = _objectWithoutProperties(_ref, _excluded);
+var InternalMenuItemGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    title = props.title,
+    eventKey = props.eventKey,
+    children = props.children,
+    restProps = _objectWithoutProperties(props, _excluded);
   var _React$useContext = React.useContext(MenuContext),
@@ -22,2 +21,3 @@ prefixCls = _React$useContext.prefixCls;
   return /*#__PURE__*/React.createElement("li", _extends({
+    ref: ref,
     role: "presentation"
@@ -37,7 +37,7 @@ }, restProps, {
   }, children));
-};
-export default function MenuItemGroup(_ref2) {
-  var children = _ref2.children,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  var connectedKeyPath = useFullPath(props.eventKey);
+});
+var MenuItemGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var eventKey = props.eventKey,
+    children = props.children;
+  var connectedKeyPath = useFullPath(eventKey);
   var childList = parseChildren(children, connectedKeyPath);
@@ -48,3 +48,9 @@ var measure = useMeasure();
   }
-  return /*#__PURE__*/React.createElement(InternalMenuItemGroup, omit(props, ['warnKey']), childList);
-}
+  return /*#__PURE__*/React.createElement(InternalMenuItemGroup, _extends({
+    ref: ref
+  }, omit(props, ['warnKey'])), childList);
+});
+if (process.env.NODE_ENV !== 'production') {
+  MenuItemGroup.displayName = 'MenuItemGroup';
+}
+export default MenuItemGroup;

es/SubMenu/index.d.ts

@@ -13,2 +13,3 @@ import * as React from 'react';
 }
-export default function SubMenu(props: SubMenuProps): React.JSX.Element;
+declare const SubMenu: React.ForwardRefExoticComponent<Omit<SubMenuProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export default SubMenu;

es/SubMenu/index.js

@@ -25,3 +25,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import PrivateContext from "../context/PrivateContext";
-var InternalSubMenu = function InternalSubMenu(props) {
+var InternalSubMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
@@ -231,2 +231,3 @@ className = props.className,
   var listNode = /*#__PURE__*/React.createElement(Overflow.Item, _extends({
+    ref: ref,
     role: "none"
@@ -260,4 +261,4 @@ }, restProps, {
   }, listNode);
-};
-export default function SubMenu(props) {
+});
+var SubMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var eventKey = props.eventKey,
@@ -286,3 +287,5 @@ children = props.children;
   } else {
-    renderNode = /*#__PURE__*/React.createElement(InternalSubMenu, props, childList);
+    renderNode = /*#__PURE__*/React.createElement(InternalSubMenu, _extends({
+      ref: ref
+    }, props), childList);
   }
@@ -292,2 +295,6 @@ return /*#__PURE__*/React.createElement(PathTrackerContext.Provider, {
   }, renderNode);
-}
+});
+if (process.env.NODE_ENV !== 'production') {
+  SubMenu.displayName = 'SubMenu';
+}
+export default SubMenu;

es/utils/nodeUtil.d.ts

 import * as React from 'react';
-import type { ItemType } from '../interface';
-export declare function parseItems(children: React.ReactNode | undefined, items: ItemType[] | undefined, keyPath: string[]): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+import type { Components, ItemType } from '../interface';
+export declare function parseItems(children: React.ReactNode | undefined, items: ItemType[] | undefined, keyPath: string[], components: Components): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

es/utils/nodeUtil.js

@@ -0,1 +1,2 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _extends from "@babel/runtime/helpers/esm/extends";
@@ -6,8 +7,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
+import Divider from "../Divider";
+import MenuItem from "../MenuItem";
 import MenuItemGroup from "../MenuItemGroup";
 import SubMenu from "../SubMenu";
-import Divider from "../Divider";
-import MenuItem from "../MenuItem";
 import { parseChildren } from "./commonUtil";
-function convertItemsToNodes(list) {
+function convertItemsToNodes(list, components) {
+  var MergedMenuItem = components.item,
+    MergedMenuItemGroup = components.group,
+    MergedSubMenu = components.submenu,
+    MergedDivider = components.divider;
   return (list || []).map(function (opt, index) {
@@ -27,15 +32,15 @@ if (opt && _typeof(opt) === 'object') {
           // Group
-          return /*#__PURE__*/React.createElement(MenuItemGroup, _extends({
+          return /*#__PURE__*/React.createElement(MergedMenuItemGroup, _extends({
             key: mergedKey
           }, restProps, {
             title: label
-          }), convertItemsToNodes(children));
+          }), convertItemsToNodes(children, components));
         }
 
         // Sub Menu
-        return /*#__PURE__*/React.createElement(SubMenu, _extends({
+        return /*#__PURE__*/React.createElement(MergedSubMenu, _extends({
           key: mergedKey
         }, restProps, {
           title: label
-        }), convertItemsToNodes(children));
+        }), convertItemsToNodes(children, components));
       }
@@ -45,7 +50,7 @@
       if (type === 'divider') {
-        return /*#__PURE__*/React.createElement(Divider, _extends({
+        return /*#__PURE__*/React.createElement(MergedDivider, _extends({
           key: mergedKey
         }, restProps));
       }
-      return /*#__PURE__*/React.createElement(MenuItem, _extends({
+      return /*#__PURE__*/React.createElement(MergedMenuItem, _extends({
         key: mergedKey
@@ -59,8 +64,14 @@ }, restProps), label);
 }
-export function parseItems(children, items, keyPath) {
+export function parseItems(children, items, keyPath, components) {
   var childNodes = children;
+  var mergedComponents = _objectSpread({
+    divider: Divider,
+    item: MenuItem,
+    group: MenuItemGroup,
+    submenu: SubMenu
+  }, components);
   if (items) {
-    childNodes = convertItemsToNodes(items);
+    childNodes = convertItemsToNodes(items, mergedComponents);
   }
   return parseChildren(childNodes, keyPath);
 }

lib/interface.d.ts

 import type * as React from 'react';
 interface ItemSharedProps {
+    ref?: React.Ref<HTMLLIElement | null>;
     style?: React.CSSProperties;
@@ -7,2 +8,3 @@ className?: string;
 export interface SubMenuType extends ItemSharedProps {
+    type?: 'submenu';
     label?: React.ReactNode;
@@ -26,2 +28,3 @@ children: ItemType[];
 export interface MenuItemType extends ItemSharedProps {
+    type?: 'item';
     label?: React.ReactNode;
@@ -40,3 +43,3 @@ disabled?: boolean;
 }
-export interface MenuDividerType extends ItemSharedProps {
+export interface MenuDividerType extends Omit<ItemSharedProps, 'ref'> {
     type: 'divider';
@@ -83,2 +86,4 @@ }
 };
+export type ComponentType = 'submenu' | 'item' | 'group' | 'divider';
+export type Components = Partial<Record<ComponentType, React.ComponentType<any>>>;
 export {};

lib/Menu.d.ts

 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
-import type { BuiltinPlacements, ItemType, MenuClickEventHandler, MenuMode, MenuRef, RenderIconType, SelectEventHandler, TriggerSubMenuAction } from './interface';
+import type { BuiltinPlacements, Components, ItemType, MenuClickEventHandler, MenuMode, MenuRef, RenderIconType, SelectEventHandler, TriggerSubMenuAction } from './interface';
 export interface MenuProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
@@ -64,4 +64,11 @@ prefixCls?: string;
     }) => React.ReactElement;
+    /**
+     * @private NEVER! EVER! USE IN PRODUCTION!!!
+     * This is a hack API for `antd` to fix `findDOMNode` issue.
+     * Not use it! Not accept any PR try to make it as normal API.
+     * By zombieJ
+     */
+    _internalComponents?: Components;
 }
 declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<MenuRef>>;
 export default Menu;

lib/Menu.js

@@ -35,3 +35,3 @@ "use strict";
 var _warnUtil = require("./utils/warnUtil");
-var _excluded = ["prefixCls", "rootClassName", "style", "className", "tabIndex", "items", "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", "_internalRenderMenuItem", "_internalRenderSubMenuItem"];
+var _excluded = ["prefixCls", "rootClassName", "style", "className", "tabIndex", "items", "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", "_internalRenderMenuItem", "_internalRenderSubMenuItem", "_internalComponents"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -110,6 +110,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
     _internalRenderSubMenuItem = _ref._internalRenderSubMenuItem,
+    _internalComponents = _ref._internalComponents,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var childList = React.useMemo(function () {
-    return (0, _nodeUtil.parseItems)(children, items, EMPTY_LIST);
-  }, [children, items]);
+  var _React$useMemo = React.useMemo(function () {
+      return [(0, _nodeUtil.parseItems)(children, items, EMPTY_LIST, _internalComponents), (0, _nodeUtil.parseItems)(children, items, EMPTY_LIST, {})];
+    }, [children, items, _internalComponents]),
+    _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 2),
+    childList = _React$useMemo2[0],
+    measureChildList = _React$useMemo2[1];
   var _React$useState = React.useState(false),
@@ -162,3 +166,3 @@ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
   // ========================= Mode =========================
-  var _React$useMemo = React.useMemo(function () {
+  var _React$useMemo3 = React.useMemo(function () {
       if ((mode === 'inline' || mode === 'vertical') && inlineCollapsed) {
@@ -169,5 +173,5 @@ return ['vertical', inlineCollapsed];
     }, [mode, inlineCollapsed]),
-    _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 2),
-    mergedMode = _React$useMemo2[0],
-    mergedInlineCollapsed = _React$useMemo2[1];
+    _React$useMemo4 = (0, _slicedToArray2.default)(_React$useMemo3, 2),
+    mergedMode = _React$useMemo4[0],
+    mergedInlineCollapsed = _React$useMemo4[1];
   var isInlineMode = mergedMode === 'inline';
@@ -488,4 +492,4 @@ var _React$useState5 = React.useState(mergedMode),
     value: registerPathContext
-  }, childList)))));
+  }, measureChildList)))));
 });
 var _default = exports.default = Menu;

lib/MenuItem.d.ts

 import * as React from 'react';
 import type { MenuItemType } from './interface';
-export interface MenuItemProps extends Omit<MenuItemType, 'label' | 'key'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
+export interface MenuItemProps extends Omit<MenuItemType, 'label' | 'key' | 'ref'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
     children?: React.ReactNode;
@@ -5,0 +5,0 @@ /** @private Internal filled key. Do not set it directly */

lib/MenuItemGroup.d.ts

@@ -11,2 +11,3 @@ import * as React from 'react';
 }
-export default function MenuItemGroup({ children, ...props }: MenuItemGroupProps): React.ReactElement;
+declare const MenuItemGroup: React.ForwardRefExoticComponent<Omit<MenuItemGroupProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export default MenuItemGroup;

lib/MenuItemGroup.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = MenuItemGroup;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -18,12 +18,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _commonUtil = require("./utils/commonUtil");
-var _excluded = ["className", "title", "eventKey", "children"],
-  _excluded2 = ["children"];
+var _excluded = ["className", "title", "eventKey", "children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var InternalMenuItemGroup = function InternalMenuItemGroup(_ref) {
-  var className = _ref.className,
-    title = _ref.title,
-    eventKey = _ref.eventKey,
-    children = _ref.children,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var InternalMenuItemGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    title = props.title,
+    eventKey = props.eventKey,
+    children = props.children,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _React$useContext = React.useContext(_MenuContext.MenuContext),
@@ -33,2 +32,3 @@ prefixCls = _React$useContext.prefixCls;
   return /*#__PURE__*/React.createElement("li", (0, _extends2.default)({
+    ref: ref,
     role: "presentation"
@@ -48,7 +48,7 @@ }, restProps, {
   }, children));
-};
-function MenuItemGroup(_ref2) {
-  var children = _ref2.children,
-    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  var connectedKeyPath = (0, _PathContext.useFullPath)(props.eventKey);
+});
+var MenuItemGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var eventKey = props.eventKey,
+    children = props.children;
+  var connectedKeyPath = (0, _PathContext.useFullPath)(eventKey);
   var childList = (0, _commonUtil.parseChildren)(children, connectedKeyPath);
@@ -59,3 +59,9 @@ var measure = (0, _PathContext.useMeasure)();
   }
-  return /*#__PURE__*/React.createElement(InternalMenuItemGroup, (0, _omit.default)(props, ['warnKey']), childList);
-}
+  return /*#__PURE__*/React.createElement(InternalMenuItemGroup, (0, _extends2.default)({
+    ref: ref
+  }, (0, _omit.default)(props, ['warnKey'])), childList);
+});
+if (process.env.NODE_ENV !== 'production') {
+  MenuItemGroup.displayName = 'MenuItemGroup';
+}
+var _default = exports.default = MenuItemGroup;

lib/SubMenu/index.d.ts

@@ -13,2 +13,3 @@ import * as React from 'react';
 }
-export default function SubMenu(props: SubMenuProps): React.JSX.Element;
+declare const SubMenu: React.ForwardRefExoticComponent<Omit<SubMenuProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export default SubMenu;

lib/SubMenu/index.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = SubMenu;
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -36,3 +36,3 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var InternalSubMenu = function InternalSubMenu(props) {
+var InternalSubMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var style = props.style,
@@ -242,2 +242,3 @@ className = props.className,
   var listNode = /*#__PURE__*/React.createElement(_rcOverflow.default.Item, (0, _extends2.default)({
+    ref: ref,
     role: "none"
@@ -271,4 +272,4 @@ }, restProps, {
   }, listNode);
-};
-function SubMenu(props) {
+});
+var SubMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var eventKey = props.eventKey,
@@ -297,3 +298,5 @@ children = props.children;
   } else {
-    renderNode = /*#__PURE__*/React.createElement(InternalSubMenu, props, childList);
+    renderNode = /*#__PURE__*/React.createElement(InternalSubMenu, (0, _extends2.default)({
+      ref: ref
+    }, props), childList);
   }
@@ -303,2 +306,6 @@ return /*#__PURE__*/React.createElement(_PathContext.PathTrackerContext.Provider, {
   }, renderNode);
-}
+});
+if (process.env.NODE_ENV !== 'production') {
+  SubMenu.displayName = 'SubMenu';
+}
+var _default = exports.default = SubMenu;

lib/utils/nodeUtil.d.ts

 import * as React from 'react';
-import type { ItemType } from '../interface';
-export declare function parseItems(children: React.ReactNode | undefined, items: ItemType[] | undefined, keyPath: string[]): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+import type { Components, ItemType } from '../interface';
+export declare function parseItems(children: React.ReactNode | undefined, items: ItemType[] | undefined, keyPath: string[], components: Components): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

lib/utils/nodeUtil.js

@@ -9,2 +9,3 @@ "use strict";
 exports.parseItems = parseItems;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -14,6 +15,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
+var _Divider = _interopRequireDefault(require("../Divider"));
+var _MenuItem = _interopRequireDefault(require("../MenuItem"));
 var _MenuItemGroup = _interopRequireDefault(require("../MenuItemGroup"));
 var _SubMenu = _interopRequireDefault(require("../SubMenu"));
-var _Divider = _interopRequireDefault(require("../Divider"));
-var _MenuItem = _interopRequireDefault(require("../MenuItem"));
 var _commonUtil = require("./commonUtil");
@@ -23,3 +24,7 @@ var _excluded = ["label", "children", "key", "type"];
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function convertItemsToNodes(list) {
+function convertItemsToNodes(list, components) {
+  var MergedMenuItem = components.item,
+    MergedMenuItemGroup = components.group,
+    MergedSubMenu = components.submenu,
+    MergedDivider = components.divider;
   return (list || []).map(function (opt, index) {
@@ -39,15 +44,15 @@ if (opt && (0, _typeof2.default)(opt) === 'object') {
           // Group
-          return /*#__PURE__*/React.createElement(_MenuItemGroup.default, (0, _extends2.default)({
+          return /*#__PURE__*/React.createElement(MergedMenuItemGroup, (0, _extends2.default)({
             key: mergedKey
           }, restProps, {
             title: label
-          }), convertItemsToNodes(children));
+          }), convertItemsToNodes(children, components));
         }
 
         // Sub Menu
-        return /*#__PURE__*/React.createElement(_SubMenu.default, (0, _extends2.default)({
+        return /*#__PURE__*/React.createElement(MergedSubMenu, (0, _extends2.default)({
           key: mergedKey
         }, restProps, {
           title: label
-        }), convertItemsToNodes(children));
+        }), convertItemsToNodes(children, components));
       }
@@ -57,7 +62,7 @@
       if (type === 'divider') {
-        return /*#__PURE__*/React.createElement(_Divider.default, (0, _extends2.default)({
+        return /*#__PURE__*/React.createElement(MergedDivider, (0, _extends2.default)({
           key: mergedKey
         }, restProps));
       }
-      return /*#__PURE__*/React.createElement(_MenuItem.default, (0, _extends2.default)({
+      return /*#__PURE__*/React.createElement(MergedMenuItem, (0, _extends2.default)({
         key: mergedKey
@@ -71,8 +76,14 @@ }, restProps), label);
 }
-function parseItems(children, items, keyPath) {
+function parseItems(children, items, keyPath, components) {
   var childNodes = children;
+  var mergedComponents = (0, _objectSpread2.default)({
+    divider: _Divider.default,
+    item: _MenuItem.default,
+    group: _MenuItemGroup.default,
+    submenu: _SubMenu.default
+  }, components);
   if (items) {
-    childNodes = convertItemsToNodes(items);
+    childNodes = convertItemsToNodes(items, mergedComponents);
   }
   return (0, _commonUtil.parseChildren)(childNodes, keyPath);
 }

package.json

 {
   "name": "rc-menu",
-  "version": "9.13.0",
+  "version": "9.14.0",
   "description": "menu ui component for react",
@@ -56,3 +56,3 @@ "keywords": [
     "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^15.0.7",
     "@types/jest": "^29.5.2",
@@ -72,4 +72,4 @@ "@types/react": "^18.2.14",
     "rc-test": "^7.0.14",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "regenerator-runtime": "^0.14.0",
@@ -76,0 +76,0 @@ "typescript": "^5.1.6"

README.md

@@ -76,2 +76,8 @@ # rc-menu
         <tr>
+          <td>ref</td>
+          <td>React.HTMLLIElement</td>
+          <td></td>
+          <td>get dom node</td>
+        </tr>
+        <tr>
           <td>className</td>
@@ -299,2 +305,8 @@ <td>String</td>
         <tr>
+          <td>ref</td>
+          <td>React.HTMLLIElement</td>
+          <td></td>
+          <td>get dom node</td>
+        </tr>
+        <tr>
           <td>popupClassName</td>
@@ -403,2 +415,8 @@ <td>String</td>
         <tr>
+          <td>ref</td>
+          <td>React.HTMLLIElement</td>
+          <td></td>
+          <td>get dom node</td>
+        </tr>
+        <tr>
             <td>title</td>
@@ -405,0 +423,0 @@ <td>String|React.Element</td>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

254657

increased by1.69%

Lines of code

5449

increased by1.57%

Number of lines in readme file

464

increased by4.04%

Worsened metrics

Number of low supply chain risk alerts

16

increased by33.33%

No dependency changes