@szhsin/react-menu - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

dist/index.js

@@ -133,2 +133,29 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 };
+var attachHandlerProps = function attachHandlerProps(handlers, props) {
+  var result = {};
+
+  var _loop = function _loop() {
+    var handlerName = _Object$keys[_i];
+    var handler = handlers[handlerName];
+    var propHandler = props[handlerName];
+    var attachedHandler = void 0;
+
+    if (typeof propHandler === 'function') {
+      attachedHandler = function attachedHandler(e) {
+        propHandler(e);
+        handler(e);
+      };
+    } else {
+      attachedHandler = handler;
+    }
+
+    result[handlerName] = attachedHandler;
+  };
+
+  for (var _i = 0, _Object$keys = Object.keys(handlers); _i < _Object$keys.length; _i++) {
+    _loop();
+  }
+
+  return result;
+};
 var bem = function bem(block, element, modifiers) {
@@ -143,4 +170,4 @@ if (modifiers === void 0) {
 
-    for (var _i = 0, _Object$keys = Object.keys(modifiers); _i < _Object$keys.length; _i++) {
-      var name = _Object$keys[_i];
+    for (var _i2 = 0, _Object$keys2 = Object.keys(modifiers); _i2 < _Object$keys2.length; _i2++) {
+      var name = _Object$keys2[_i2];
       var value = modifiers[name];
@@ -177,4 +204,4 @@
 
-  for (var _i2 = 0, _Object$keys2 = Object.keys(styles); _i2 < _Object$keys2.length; _i2++) {
-    var prop = _Object$keys2[_i2];
+  for (var _i3 = 0, _Object$keys3 = Object.keys(styles); _i3 < _Object$keys3.length; _i3++) {
+    var prop = _Object$keys3[_i3];
     var value = styles[prop];
@@ -186,4 +213,4 @@
       if (typeof modifierValue === 'string') {
-        for (var _i3 = 0, _Object$keys3 = Object.keys(value); _i3 < _Object$keys3.length; _i3++) {
-          var nestedProp = _Object$keys3[_i3];
+        for (var _i4 = 0, _Object$keys4 = Object.keys(value); _i4 < _Object$keys4.length; _i4++) {
+          var nestedProp = _Object$keys4[_i4];
           var nestedValue = value[nestedProp];
@@ -385,4 +412,3 @@
 var MenuButton = defineName( /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef(function MenuButton(_ref, ref) {
-  var id = _ref.id,
-      className = _ref.className,
+  var className = _ref.className,
       styles = _ref.styles,
@@ -392,22 +418,19 @@ isOpen = _ref.isOpen,
       children = _ref.children,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown;
+      restProps = _objectWithoutPropertiesLoose(_ref, ["className", "styles", "isOpen", "disabled", "children"]);
+
   var modifiers = Object.freeze({
     open: isOpen
   });
-  return /*#__PURE__*/React__default.createElement("button", {
-    id: id,
-    className: bem(menuButtonClass, null, modifiers)(className),
-    style: flatStyles(styles, modifiers),
+  return /*#__PURE__*/React__default.createElement("button", _extends({
     "aria-haspopup": "true",
     "aria-expanded": isOpen,
     "aria-disabled": disabled,
+    disabled: disabled
+  }, restProps, {
     ref: ref,
-    disabled: disabled,
-    onClick: onClick,
-    onKeyDown: onKeyDown
-  }, children);
+    className: bem(menuButtonClass, null, modifiers)(className),
+    style: flatStyles(styles, modifiers)
+  }), children);
 })), 'MenuButton');
 MenuButton.propTypes = _extends({}, stylePropTypes(), {
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   isOpen: PropTypes.bool,
@@ -441,6 +464,4 @@ disabled: PropTypes.bool,
       children = _ref.children,
-      onKeyDown = _ref.onKeyDown,
-      onAnimationEnd = _ref.onAnimationEnd,
       onClose = _ref.onClose,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["ariaLabel", "className", "styles", "arrowClassName", "arrowStyles", "anchorPoint", "anchorRef", "containerRef", "arrow", "align", "direction", "position", "overflow", "isOpen", "isMounted", "isDisabled", "menuItemFocus", "offsetX", "offsetY", "children", "onKeyDown", "onAnimationEnd", "onClose"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["ariaLabel", "className", "styles", "arrowClassName", "arrowStyles", "anchorPoint", "anchorRef", "containerRef", "arrow", "align", "direction", "position", "overflow", "isOpen", "isMounted", "isDisabled", "menuItemFocus", "offsetX", "offsetY", "children", "onClose"]);
 
@@ -611,7 +632,5 @@ var _useState = React.useState({
     }
-
-    safeCall(onKeyDown, e);
   };
 
-  var handleAnimationEnd = function handleAnimationEnd(e) {
+  var handleAnimationEnd = function handleAnimationEnd() {
     if (isClosing) {
@@ -621,4 +640,2 @@ setClosing(false);
     }
-
-    safeCall(onAnimationEnd, e);
   };
@@ -1088,11 +1105,14 @@
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isMounted && /*#__PURE__*/React__default.createElement("ul", _extends({}, restProps, {
-    className: bem(menuClass, null, modifiers)(className, userModifiers),
+  var handlers = attachHandlerProps({
+    onKeyDown: handleKeyDown,
+    onAnimationEnd: handleAnimationEnd
+  }, restProps);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isMounted && /*#__PURE__*/React__default.createElement("ul", _extends({
     role: "menu",
     tabIndex: "-1",
     "aria-disabled": isDisabled,
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel
+  }, restProps, handlers, {
     ref: menuRef,
-    onKeyDown: handleKeyDown,
-    onAnimationEnd: handleAnimationEnd,
+    className: bem(menuClass, null, modifiers)(className, userModifiers),
     style: _extends({}, flatStyles(styles, userModifiers), overflowStyles, {
@@ -1115,3 +1135,3 @@ left: menuPosition.x + "px",
 
-var useMenuList = function useMenuList(menuListProps, id, animation, debugging, viewScroll, children, onClick, onClose, skipClick) {
+var useMenuList = function useMenuList(menuListProps, id, animation, debugging, viewScroll, onClick, onClose, skipClick) {
   var containerRef = React.useRef(null);
@@ -1188,3 +1208,3 @@ var settings = React.useMemo(function () {
     onClose: onClose
-  }), children))));
+  })))));
 };
@@ -1195,6 +1215,2 @@
       id = _ref.id,
-      className = _ref.className,
-      styles = _ref.styles,
-      arrowClassName = _ref.arrowClassName,
-      arrowStyles = _ref.arrowStyles,
       animation = _ref.animation,
@@ -1204,13 +1220,6 @@ debugging = _ref.debugging,
       keepMounted = _ref.keepMounted,
-      arrow = _ref.arrow,
-      align = _ref.align,
-      direction = _ref.direction,
-      position = _ref.position,
-      overflow = _ref.overflow,
       menuButton = _ref.menuButton,
-      offsetX = _ref.offsetX,
-      offsetY = _ref.offsetY,
-      children = _ref.children,
       onClick = _ref.onClick,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["aria-label", "id", "animation", "debugging", "viewScroll", "keepMounted", "menuButton", "onClick", "onChange"]);
 
@@ -1257,8 +1266,8 @@ var _useMenuState = useMenuState(keepMounted),
   var renderButton = React.useMemo(function () {
-    if (!button) return null;
-    var buttonProps = {
-      ref: buttonRef,
+    var buttonProps = _extends({
+      ref: buttonRef
+    }, attachHandlerProps({
       onClick: handleClick,
       onKeyDown: handleKeyDown
-    };
+    }, button.props));
 
@@ -1271,20 +1280,9 @@ if (button.type.__name__ === 'MenuButton') {
   }, [button, isOpen, handleClick, handleKeyDown]);
-  var menuList = useMenuList({
+  var menuList = useMenuList(_extends({}, restProps, {
     ariaLabel: ariaLabel || (typeof button.props.children === 'string' ? button.props.children : 'Menu'),
-    className: className,
-    styles: styles,
-    arrowClassName: arrowClassName,
-    arrowStyles: arrowStyles,
     anchorRef: buttonRef,
-    arrow: arrow,
-    align: align,
-    direction: direction,
-    position: position,
-    overflow: overflow,
     isOpen: isOpen,
     isMounted: isMounted,
-    menuItemFocus: menuItemFocus,
-    offsetX: offsetX,
-    offsetY: offsetY
-  }, id, animation, debugging, viewScroll, children, onClick, handleClose, skipClick);
+    menuItemFocus: menuItemFocus
+  }), id, animation, debugging, viewScroll, onClick, handleClose, skipClick);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderButton, menuList);
@@ -1304,45 +1302,12 @@ });
       id = _ref.id,
-      className = _ref.className,
-      styles = _ref.styles,
-      arrowClassName = _ref.arrowClassName,
-      arrowStyles = _ref.arrowStyles,
       animation = _ref.animation,
       debugging = _ref.debugging,
       viewScroll = _ref.viewScroll,
-      anchorPoint = _ref.anchorPoint,
-      anchorRef = _ref.anchorRef,
-      arrow = _ref.arrow,
-      align = _ref.align,
-      direction = _ref.direction,
-      position = _ref.position,
-      overflow = _ref.overflow,
-      isOpen = _ref.isOpen,
-      isMounted = _ref.isMounted,
-      menuItemFocus = _ref.menuItemFocus,
-      offsetX = _ref.offsetX,
-      offsetY = _ref.offsetY,
-      children = _ref.children,
       onClick = _ref.onClick,
       onClose = _ref.onClose,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["aria-label", "id", "className", "styles", "arrowClassName", "arrowStyles", "animation", "debugging", "viewScroll", "anchorPoint", "anchorRef", "arrow", "align", "direction", "position", "overflow", "isOpen", "isMounted", "menuItemFocus", "offsetX", "offsetY", "children", "onClick", "onClose"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, ["aria-label", "id", "animation", "debugging", "viewScroll", "onClick", "onClose"]);
 
   return useMenuList(_extends({}, restProps, {
-    ariaLabel: ariaLabel || 'Menu',
-    className: className,
-    styles: styles,
-    arrowClassName: arrowClassName,
-    arrowStyles: arrowStyles,
-    anchorPoint: anchorPoint,
-    anchorRef: anchorRef,
-    arrow: arrow,
-    align: align,
-    direction: direction,
-    position: position,
-    overflow: overflow,
-    isOpen: isOpen,
-    isMounted: isMounted,
-    menuItemFocus: menuItemFocus,
-    offsetX: offsetX,
-    offsetY: offsetY
-  }), id, animation, debugging, viewScroll, children, onClick, onClose);
+    ariaLabel: ariaLabel || 'Menu'
+  }), id, animation, debugging, viewScroll, onClick, onClose);
 });
@@ -1371,15 +1336,4 @@ ControlledMenu.propTypes = _extends({}, menuPropTypesBase, {
   var ariaLabel = _ref['aria-label'],
-      className = _ref.className,
-      styles = _ref.styles,
-      arrowClassName = _ref.arrowClassName,
-      arrowStyles = _ref.arrowStyles,
       itemClassName = _ref.itemClassName,
       itemStyles = _ref.itemStyles,
-      arrow = _ref.arrow,
-      align = _ref.align,
-      direction = _ref.direction,
-      position = _ref.position,
-      overflow = _ref.overflow,
-      offsetX = _ref.offsetX,
-      offsetY = _ref.offsetY,
       disabled = _ref.disabled,
@@ -1389,4 +1343,4 @@ keepMounted = _ref.keepMounted,
       index = _ref.index,
-      children = _ref.children,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["aria-label", "itemClassName", "itemStyles", "disabled", "keepMounted", "label", "index", "onChange"]);
 
@@ -1531,17 +1485,6 @@ var _useMenuState = useMenuState(keepMounted),
     onKeyUp: handleKeyUp
-  }, activeStateHandlers), safeCall(label, modifiers)), /*#__PURE__*/React__default.createElement(MenuList, {
+  }, activeStateHandlers), safeCall(label, modifiers)), /*#__PURE__*/React__default.createElement(MenuList, _extends({}, restProps, {
     ariaLabel: ariaLabel || (typeof label === 'string' ? label : 'Submenu'),
-    className: className,
-    styles: styles,
-    arrowClassName: arrowClassName,
-    arrowStyles: arrowStyles,
     anchorRef: itemRef,
     containerRef: containerRef,
-    arrow: arrow,
-    align: align,
-    direction: direction,
-    position: position,
-    overflow: overflow,
-    offsetX: offsetX,
-    offsetY: offsetY,
     isOpen: isOpen,
@@ -1552,3 +1495,3 @@ isMounted: isMounted,
     onClose: handleClose
-  }, children));
+  })));
 }), 'SubMenu');
@@ -1655,11 +1598,3 @@ SubMenu.propTypes = _extends({}, sharedMenuPropTypes, stylePropTypes('item'), {
   });
-
-  var menuItemProps = _extends({
-    className: bem(menuClass, menuItemClass, modifiers)(className),
-    style: flatStyles(styles, modifiers),
-    role: isRadio ? 'menuitemradio' : isCheckBox ? 'menuitemcheckbox' : 'menuitem',
-    'aria-checked': modifiers.checked,
-    'aria-disabled': isDisabled,
-    tabIndex: isHovering ? 0 : -1,
-    ref: ref,
+  var handlers = attachHandlerProps(_extends({}, activeStateHandlers, {
     onMouseEnter: setHover,
@@ -1672,4 +1607,15 @@ onMouseLeave: unsetHover,
     }
-  }, activeStateHandlers);
+  }), restProps);
 
+  var menuItemProps = _extends({
+    role: isRadio ? 'menuitemradio' : isCheckBox ? 'menuitemcheckbox' : 'menuitem',
+    'aria-checked': modifiers.checked,
+    'aria-disabled': isDisabled,
+    tabIndex: isHovering ? 0 : -1
+  }, restProps, handlers, {
+    ref: ref,
+    className: bem(menuClass, menuItemClass, modifiers)(className),
+    style: flatStyles(styles, modifiers)
+  });
+
   var renderChildren = safeCall(children, modifiers);
@@ -1680,5 +1626,5 @@
       role: "presentation"
-    }, /*#__PURE__*/React__default.createElement("a", _extends({}, restProps, {
+    }, /*#__PURE__*/React__default.createElement("a", _extends({}, menuItemProps, {
       href: href
-    }, menuItemProps), renderChildren));
+    }), renderChildren));
   } else {
@@ -1703,3 +1649,4 @@ return /*#__PURE__*/React__default.createElement("li", menuItemProps, renderChildren);
       index = _ref.index,
-      children = _ref.children;
+      children = _ref.children,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["className", "styles", "disabled", "index", "children"]);
 
@@ -1734,12 +1681,15 @@ var _useItemState = useItemState(disabled, index),
 
-  return /*#__PURE__*/React__default.createElement("li", {
-    className: bem(menuClass, menuItemClass, modifiers)(className),
-    style: flatStyles(styles, modifiers),
-    "aria-disabled": isDisabled,
-    role: "menuitem",
-    tabIndex: "-1",
+  var handlers = attachHandlerProps({
     onMouseEnter: setHover,
     onFocus: setHover,
     onBlur: handleBlur
-  }, renderChildren);
+  }, restProps);
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    "aria-disabled": isDisabled,
+    role: "menuitem",
+    tabIndex: "-1"
+  }, restProps, handlers, {
+    className: bem(menuClass, menuItemClass, modifiers)(className),
+    style: flatStyles(styles, modifiers)
+  }), renderChildren);
 }), 'FocusableItem');
@@ -1753,8 +1703,11 @@ FocusableItem.propTypes = _extends({}, stylePropTypes(), {
   var className = _ref.className,
-      styles = _ref.styles;
-  return /*#__PURE__*/React__default.createElement("li", {
+      styles = _ref.styles,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["className", "styles"]);
+
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    role: "separator"
+  }, restProps, {
     className: bem(menuClass, menuDividerClass)(className),
-    style: flatStyles(styles),
-    role: "separator"
-  });
+    style: flatStyles(styles)
+  }));
 }), 'MenuDivider');
@@ -1766,8 +1719,11 @@ MenuDivider.propTypes = _extends({}, stylePropTypes());
       styles = _ref.styles,
-      children = _ref.children;
-  return /*#__PURE__*/React__default.createElement("li", {
+      children = _ref.children,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["className", "styles", "children"]);
+
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    role: "presentation"
+  }, restProps, {
     className: bem(menuClass, menuHeaderClass)(className),
-    style: flatStyles(styles),
-    role: "presentation"
-  }, children);
+    style: flatStyles(styles)
+  }), children);
 }), 'MenuHeader');
@@ -1783,3 +1739,5 @@ MenuHeader.propTypes = _extends({}, stylePropTypes());
       children = _ref.children,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["aria-label", "className", "styles", "name", "value", "children", "onChange"]);
+
   var contextValue = React.useMemo(function () {
@@ -1794,8 +1752,9 @@ return {
     role: "presentation"
-  }, /*#__PURE__*/React__default.createElement("ul", {
-    className: bem(menuClass, radioGroupClass)(className),
-    style: flatStyles(styles),
+  }, /*#__PURE__*/React__default.createElement("ul", _extends({
     role: "group",
     "aria-label": ariaLabel || name || 'Radio group'
-  }, /*#__PURE__*/React__default.createElement(RadioGroupContext.Provider, {
+  }, restProps, {
+    className: bem(menuClass, radioGroupClass)(className),
+    style: flatStyles(styles)
+  }), /*#__PURE__*/React__default.createElement(RadioGroupContext.Provider, {
     value: contextValue
@@ -1802,0 +1761,0 @@ }, children)));

dist/index.modern.js

@@ -89,2 +89,24 @@ import React, { useCallback, useState, useMemo, useRef, useContext, useEffect, useReducer, useLayoutEffect } from 'react';
 const safeCall = (fn, ...args) => typeof fn === 'function' ? fn(...args) : fn;
+const attachHandlerProps = (handlers, props) => {
+  const result = {};
+
+  for (const handlerName of Object.keys(handlers)) {
+    const handler = handlers[handlerName];
+    const propHandler = props[handlerName];
+    let attachedHandler;
+
+    if (typeof propHandler === 'function') {
+      attachedHandler = e => {
+        propHandler(e);
+        handler(e);
+      };
+    } else {
+      attachedHandler = handler;
+    }
+
+    result[handlerName] = attachedHandler;
+  }
+
+  return result;
+};
 const bem = (block, element, modifiers = {}) => (userClassName, userModifiers) => {
@@ -300,3 +322,2 @@ let blockElement = element ? `${block}__${element}` : block;
 const MenuButton = defineName( /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function MenuButton({
-  id,
   className,
@@ -307,4 +328,3 @@ styles,
   children,
-  onClick,
-  onKeyDown
+  ...restProps
 }, ref) {
@@ -314,17 +334,14 @@ const modifiers = Object.freeze({
   });
-  return /*#__PURE__*/React.createElement("button", {
-    id: id,
-    className: bem(menuButtonClass, null, modifiers)(className),
-    style: flatStyles(styles, modifiers),
+  return /*#__PURE__*/React.createElement("button", Object.assign({
     "aria-haspopup": "true",
     "aria-expanded": isOpen,
     "aria-disabled": disabled,
+    disabled: disabled
+  }, restProps, {
     ref: ref,
-    disabled: disabled,
-    onClick: onClick,
-    onKeyDown: onKeyDown
-  }, children);
+    className: bem(menuButtonClass, null, modifiers)(className),
+    style: flatStyles(styles, modifiers)
+  }), children);
 })), 'MenuButton');
 MenuButton.propTypes = { ...stylePropTypes(),
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   isOpen: PropTypes.bool,
@@ -358,4 +375,2 @@ disabled: PropTypes.bool,
   children,
-  onKeyDown,
-  onAnimationEnd,
   onClose,
@@ -510,7 +525,5 @@ ...restProps
     }
-
-    safeCall(onKeyDown, e);
   };
 
-  const handleAnimationEnd = e => {
+  const handleAnimationEnd = () => {
     if (isClosing) {
@@ -520,4 +533,2 @@ setClosing(false);
     }
-
-    safeCall(onAnimationEnd, e);
   };
@@ -985,11 +996,14 @@
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isMounted && /*#__PURE__*/React.createElement("ul", Object.assign({}, restProps, {
-    className: bem(menuClass, null, modifiers)(className, userModifiers),
+  const handlers = attachHandlerProps({
+    onKeyDown: handleKeyDown,
+    onAnimationEnd: handleAnimationEnd
+  }, restProps);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isMounted && /*#__PURE__*/React.createElement("ul", Object.assign({
     role: "menu",
     tabIndex: "-1",
     "aria-disabled": isDisabled,
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel
+  }, restProps, handlers, {
     ref: menuRef,
-    onKeyDown: handleKeyDown,
-    onAnimationEnd: handleAnimationEnd,
+    className: bem(menuClass, null, modifiers)(className, userModifiers),
     style: { ...flatStyles(styles, userModifiers),
@@ -1013,3 +1027,3 @@ ...overflowStyles,
 
-const useMenuList = (menuListProps, id, animation, debugging, viewScroll, children, onClick, onClose, skipClick) => {
+const useMenuList = (menuListProps, id, animation, debugging, viewScroll, onClick, onClose, skipClick) => {
   const containerRef = useRef(null);
@@ -1082,3 +1096,3 @@ const settings = useMemo(() => ({
     onClose: onClose
-  }), children))));
+  })))));
 };
@@ -1089,6 +1103,2 @@
   id,
-  className,
-  styles,
-  arrowClassName,
-  arrowStyles,
   animation,
@@ -1098,13 +1108,6 @@ debugging,
   keepMounted,
-  arrow,
-  align,
-  direction,
-  position,
-  overflow,
   menuButton,
-  offsetX,
-  offsetY,
-  children,
   onClick,
-  onChange
+  onChange,
+  ...restProps
 }) {
@@ -1151,7 +1154,8 @@ const {
   const renderButton = useMemo(() => {
-    if (!button) return null;
     const buttonProps = {
       ref: buttonRef,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown
+      ...attachHandlerProps({
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+      }, button.props)
     };
@@ -1165,20 +1169,9 @@
   }, [button, isOpen, handleClick, handleKeyDown]);
-  const menuList = useMenuList({
+  const menuList = useMenuList({ ...restProps,
     ariaLabel: ariaLabel || (typeof button.props.children === 'string' ? button.props.children : 'Menu'),
-    className,
-    styles,
-    arrowClassName,
-    arrowStyles,
     anchorRef: buttonRef,
-    arrow,
-    align,
-    direction,
-    position,
-    overflow,
     isOpen,
     isMounted,
-    menuItemFocus,
-    offsetX,
-    offsetY
-  }, id, animation, debugging, viewScroll, children, onClick, handleClose, skipClick);
+    menuItemFocus
+  }, id, animation, debugging, viewScroll, onClick, handleClose, skipClick);
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderButton, menuList);
@@ -1198,22 +1191,5 @@ });
   id,
-  className,
-  styles,
-  arrowClassName,
-  arrowStyles,
   animation,
   debugging,
   viewScroll,
-  anchorPoint,
-  anchorRef,
-  arrow,
-  align,
-  direction,
-  position,
-  overflow,
-  isOpen,
-  isMounted,
-  menuItemFocus,
-  offsetX,
-  offsetY,
-  children,
   onClick,
@@ -1224,20 +1200,4 @@ onClose,
   return useMenuList({ ...restProps,
-    ariaLabel: ariaLabel || 'Menu',
-    className,
-    styles,
-    arrowClassName,
-    arrowStyles,
-    anchorPoint,
-    anchorRef,
-    arrow,
-    align,
-    direction,
-    position,
-    overflow,
-    isOpen,
-    isMounted,
-    menuItemFocus,
-    offsetX,
-    offsetY
-  }, id, animation, debugging, viewScroll, children, onClick, onClose);
+    ariaLabel: ariaLabel || 'Menu'
+  }, id, animation, debugging, viewScroll, onClick, onClose);
 });
@@ -1266,15 +1226,4 @@ ControlledMenu.propTypes = { ...menuPropTypesBase,
   'aria-label': ariaLabel,
-  className,
-  styles,
-  arrowClassName,
-  arrowStyles,
   itemClassName,
   itemStyles,
-  arrow,
-  align,
-  direction,
-  position,
-  overflow,
-  offsetX,
-  offsetY,
   disabled,
@@ -1284,4 +1233,4 @@ keepMounted,
   index,
-  children,
-  onChange
+  onChange,
+  ...restProps
 }) {
@@ -1423,17 +1372,6 @@ const {
     onKeyUp: handleKeyUp
-  }, activeStateHandlers), safeCall(label, modifiers)), /*#__PURE__*/React.createElement(MenuList, {
+  }, activeStateHandlers), safeCall(label, modifiers)), /*#__PURE__*/React.createElement(MenuList, Object.assign({}, restProps, {
     ariaLabel: ariaLabel || (typeof label === 'string' ? label : 'Submenu'),
-    className: className,
-    styles: styles,
-    arrowClassName: arrowClassName,
-    arrowStyles: arrowStyles,
     anchorRef: itemRef,
     containerRef: containerRef,
-    arrow: arrow,
-    align: align,
-    direction: direction,
-    position: position,
-    overflow: overflow,
-    offsetX: offsetX,
-    offsetY: offsetY,
     isOpen: isOpen,
@@ -1444,3 +1382,3 @@ isMounted: isMounted,
     onClose: handleClose
-  }, children));
+  })));
 }), 'SubMenu');
@@ -1547,5 +1485,10 @@ SubMenu.propTypes = { ...sharedMenuPropTypes,
   });
+  const handlers = attachHandlerProps({ ...activeStateHandlers,
+    onMouseEnter: setHover,
+    onMouseLeave: unsetHover,
+    onKeyUp: handleKeyUp,
+    onBlur: handleBlur,
+    onClick: () => handleClick()
+  }, restProps);
   const menuItemProps = {
-    className: bem(menuClass, menuItemClass, modifiers)(className),
-    style: flatStyles(styles, modifiers),
     role: isRadio ? 'menuitemradio' : isCheckBox ? 'menuitemcheckbox' : 'menuitem',
@@ -1555,9 +1498,7 @@ 'aria-checked': modifiers.checked,
     tabIndex: isHovering ? 0 : -1,
+    ...restProps,
+    ...handlers,
     ref,
-    onMouseEnter: setHover,
-    onMouseLeave: unsetHover,
-    onKeyUp: handleKeyUp,
-    onBlur: handleBlur,
-    onClick: () => handleClick(),
-    ...activeStateHandlers
+    className: bem(menuClass, menuItemClass, modifiers)(className),
+    style: flatStyles(styles, modifiers)
   };
@@ -1569,5 +1510,5 @@ const renderChildren = safeCall(children, modifiers);
       role: "presentation"
-    }, /*#__PURE__*/React.createElement("a", Object.assign({}, restProps, {
+    }, /*#__PURE__*/React.createElement("a", Object.assign({}, menuItemProps, {
       href: href
-    }, menuItemProps), renderChildren));
+    }), renderChildren));
   } else {
@@ -1592,3 +1533,4 @@ return /*#__PURE__*/React.createElement("li", menuItemProps, renderChildren);
   index,
-  children
+  children,
+  ...restProps
 }) {
@@ -1623,12 +1565,15 @@ const {
 
-  return /*#__PURE__*/React.createElement("li", {
-    className: bem(menuClass, menuItemClass, modifiers)(className),
-    style: flatStyles(styles, modifiers),
-    "aria-disabled": isDisabled,
-    role: "menuitem",
-    tabIndex: "-1",
+  const handlers = attachHandlerProps({
     onMouseEnter: setHover,
     onFocus: setHover,
     onBlur: handleBlur
-  }, renderChildren);
+  }, restProps);
+  return /*#__PURE__*/React.createElement("li", Object.assign({
+    "aria-disabled": isDisabled,
+    role: "menuitem",
+    tabIndex: "-1"
+  }, restProps, handlers, {
+    className: bem(menuClass, menuItemClass, modifiers)(className),
+    style: flatStyles(styles, modifiers)
+  }), renderChildren);
 }), 'FocusableItem');
@@ -1642,9 +1587,11 @@ FocusableItem.propTypes = { ...stylePropTypes(),
   className,
-  styles
+  styles,
+  ...restProps
 }) {
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React.createElement("li", Object.assign({
+    role: "separator"
+  }, restProps, {
     className: bem(menuClass, menuDividerClass)(className),
-    style: flatStyles(styles),
-    role: "separator"
-  });
+    style: flatStyles(styles)
+  }));
 }), 'MenuDivider');
@@ -1657,9 +1604,11 @@ MenuDivider.propTypes = { ...stylePropTypes()
   styles,
-  children
+  children,
+  ...restProps
 }) {
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React.createElement("li", Object.assign({
+    role: "presentation"
+  }, restProps, {
     className: bem(menuClass, menuHeaderClass)(className),
-    style: flatStyles(styles),
-    role: "presentation"
-  }, children);
+    style: flatStyles(styles)
+  }), children);
 }), 'MenuHeader');
@@ -1676,3 +1625,4 @@ MenuHeader.propTypes = { ...stylePropTypes()
   children,
-  onChange
+  onChange,
+  ...restProps
 }) {
@@ -1686,8 +1636,9 @@ const contextValue = useMemo(() => ({
     role: "presentation"
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: bem(menuClass, radioGroupClass)(className),
-    style: flatStyles(styles),
+  }, /*#__PURE__*/React.createElement("ul", Object.assign({
     role: "group",
     "aria-label": ariaLabel || name || 'Radio group'
-  }, /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
+  }, restProps, {
+    className: bem(menuClass, radioGroupClass)(className),
+    style: flatStyles(styles)
+  }), /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
     value: contextValue
@@ -1694,0 +1645,0 @@ }, children)));

package.json

 {
   "name": "@szhsin/react-menu",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "An accessible, responsive, and customisable React menu library.",
@@ -22,3 +22,3 @@ "author": "Zheng Song",
     "test:coverage": "jest --coverage=true",
-    "test:lint": "eslint .",
+    "lint": "eslint .",
     "example": "npm start --prefix example",
@@ -25,0 +25,0 @@ "predeploy": "cd example && npm run build",

No alert changes

Worsened metrics

Total package byte prevSize

108868

decreased by-1.24%

Lines of code

3362

decreased by-2.89%

No dependency changes