@szhsin/react-menu - npm Package Compare versions

Comparing version 0.9.2 to 0.10.0

dist/index.js

@@ -186,2 +186,84 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var useActiveState = function useActiveState(customKeyCode) {
+  var _useState = React.useState(false),
+      active = _useState[0],
+      setActive = _useState[1];
+
+  var activeKeyCodes = React.useMemo(function () {
+    return [KeyCodes.SPACE, KeyCodes.RETURN].concat(customKeyCode ? [customKeyCode] : []);
+  }, [customKeyCode]);
+  return {
+    isActive: active,
+    onPointerDown: React.useCallback(function (e) {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      setActive(true);
+    }, []),
+    onPointerUp: React.useCallback(function (e) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }, []),
+    onLostPointerCapture: React.useCallback(function (e) {
+      setActive(false);
+    }, []),
+    onKeyDown: React.useCallback(function (e) {
+      if (activeKeyCodes.includes(e.keyCode)) {
+        setActive(true);
+      }
+    }, [activeKeyCodes]),
+    onKeyUp: React.useCallback(function (e) {
+      if (activeKeyCodes.includes(e.keyCode)) {
+        setActive(false);
+      }
+    }, [activeKeyCodes]),
+    onBlur: React.useCallback(function (e) {
+      setActive(false);
+    }, [])
+  };
+};
+
+var useItemState = function useItemState(disabled, index) {
+  var ref = React.useRef(null);
+
+  var _useContext = React.useContext(MenuListContext),
+      isParentOpen = _useContext.isParentOpen,
+      hoverIndex = _useContext.hoverIndex,
+      hoverIndexDispatch = _useContext.hoverIndexDispatch;
+
+  var isHovering = hoverIndex === index;
+  var isDisabled = disabled ? true : undefined;
+  React.useEffect(function () {
+    if (isHovering && isParentOpen) {
+      ref.current && ref.current.focus();
+    }
+  }, [isHovering, isParentOpen]);
+  return {
+    ref: ref,
+    isHovering: isHovering,
+    isDisabled: isDisabled,
+    setHover: React.useCallback(function () {
+      if (!isDisabled) hoverIndexDispatch({
+        type: HoverIndexActionTypes.SET,
+        index: index
+      });
+    }, [isDisabled, hoverIndexDispatch, index]),
+    unsetHover: React.useCallback(function (e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        hoverIndexDispatch({
+          type: HoverIndexActionTypes.UNSET,
+          index: index
+        });
+      }
+    }, [hoverIndexDispatch, index])
+  };
+};
+
+var useMenuChange = function useMenuChange(onChange, isOpen) {
+  var prevOpen = React.useRef(isOpen);
+  React.useEffect(function () {
+    if (prevOpen.current !== isOpen) safeCall(onChange, {
+      open: isOpen
+    });
+    prevOpen.current = isOpen;
+  }, [onChange, isOpen]);
+};
+
 var FocusPositions = Object.freeze({
@@ -279,38 +361,2 @@ 'INITIAL': 'initial',
 
-var useActiveState = function useActiveState(customKeyCode) {
-  var _useState = React.useState(false),
-      active = _useState[0],
-      setActive = _useState[1];
-
-  var activeKeyCodes = React.useMemo(function () {
-    return [KeyCodes.SPACE, KeyCodes.RETURN].concat(customKeyCode ? [customKeyCode] : []);
-  }, [customKeyCode]);
-  return {
-    isActive: active,
-    onPointerDown: React.useCallback(function (e) {
-      e.currentTarget.setPointerCapture(e.pointerId);
-      setActive(true);
-    }, []),
-    onPointerUp: React.useCallback(function (e) {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    }, []),
-    onLostPointerCapture: React.useCallback(function (e) {
-      setActive(false);
-    }, []),
-    onKeyDown: React.useCallback(function (e) {
-      if (activeKeyCodes.includes(e.keyCode)) {
-        setActive(true);
-      }
-    }, [activeKeyCodes]),
-    onKeyUp: React.useCallback(function (e) {
-      if (activeKeyCodes.includes(e.keyCode)) {
-        setActive(false);
-      }
-    }, [activeKeyCodes]),
-    onBlur: React.useCallback(function (e) {
-      setActive(false);
-    }, [])
-  };
-};
-
 var MenuButton = defineName(React__default.memo(React__default.forwardRef(function MenuButton(_ref, ref) {
@@ -438,3 +484,3 @@ var id = _ref.id,
     var index = 0;
-    var permittedChildren = ['MenuDivider', 'MenuHeader', 'MenuItem', 'MenuRadioGroup', 'SubMenu'];
+    var permittedChildren = ['MenuDivider', 'MenuHeader', 'MenuItem', 'FocusableItem', 'MenuRadioGroup', 'SubMenu'];
 
@@ -513,3 +559,6 @@ var validateChildren = function validateChildren(parent, child, permitted) {
       case KeyCodes.RETURN:
-        if (e.currentTarget.contains(e.target)) e.preventDefault();
+        if (e.target && e.target.className.includes(menuClass)) {
+          e.preventDefault();
+        }
+
         break;
@@ -833,3 +882,3 @@ }
     var id = setTimeout(function () {
-      if (!isOpen) return;
+      if (!isOpen || menuRef.current.contains(document.activeElement)) return;
       menuRef.current.focus();
@@ -904,2 +953,8 @@
         if (!isStopPropagation) safeCall(onClick, event);
+      },
+      handleClose: function handleClose(keyCode) {
+        safeCall(onClose, {
+          keyCode: keyCode,
+          reason: CloseReason.CLICK
+        });
       }
@@ -975,2 +1030,3 @@ };
 
+  useMenuChange(onChange, isOpen);
   var skipClick = React.useRef(false);
@@ -1032,7 +1088,2 @@ var buttonRef = React.useRef(null);
   }, id, animation, debugging, children, onClick, handleClose, skipClick);
-  React.useEffect(function () {
-    safeCall(onChange, {
-      open: isOpen
-    });
-  }, [onChange, isOpen]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderButton, menuList);
@@ -1140,2 +1191,3 @@ });
   var isDisabled = disabled ? true : undefined;
+  useMenuChange(onChange, isOpen);
 
@@ -1222,7 +1274,2 @@ var handleMouseEnter = function handleMouseEnter(e) {
   }, [isHovering, isParentOpen, closeMenu]);
-  React.useEffect(function () {
-    safeCall(onChange, {
-      open: isOpen
-    });
-  }, [onChange, isOpen]);
   var modifiers = Object.freeze({
@@ -1293,9 +1340,9 @@ open: isOpen,
 
-  var itemRef = React.useRef(null);
+  var _useItemState = useItemState(disabled, index),
+      ref = _useItemState.ref,
+      isHovering = _useItemState.isHovering,
+      isDisabled = _useItemState.isDisabled,
+      setHover = _useItemState.setHover,
+      unsetHover = _useItemState.unsetHover;
 
-  var _useContext = React.useContext(MenuListContext),
-      isParentOpen = _useContext.isParentOpen,
-      hoverIndex = _useContext.hoverIndex,
-      hoverIndexDispatch = _useContext.hoverIndexDispatch;
-
   var eventHandlers = React.useContext(EventHandlersContext);
@@ -1310,6 +1357,4 @@ var radioGroup = React.useContext(RadioGroupContext);
 
-  var isHovering = hoverIndex === index;
   var isRadio = type === 'radio';
   var isCheckBox = type === 'checkbox';
-  var isDisabled = disabled ? true : undefined;
   var isAnchor = href && !isDisabled && !isRadio && !isCheckBox;
@@ -1348,3 +1393,3 @@
         if (isAnchor) {
-          itemRef.current.click();
+          ref.current.click();
         } else {
@@ -1358,23 +1403,7 @@ handleClick(e.keyCode);
 
-  var handleMouseEnter = function handleMouseEnter(e) {
-    if (isDisabled) return;
-    hoverIndexDispatch({
-      type: HoverIndexActionTypes.SET,
-      index: index
-    });
-  };
-
   var handleBlur = function handleBlur(e) {
     onBlur(e);
-    hoverIndexDispatch({
-      type: HoverIndexActionTypes.UNSET,
-      index: index
-    });
+    unsetHover(e);
   };
 
-  React.useEffect(function () {
-    if (isHovering && isParentOpen) {
-      itemRef.current.focus();
-    }
-  }, [isHovering, isParentOpen]);
   var modifiers = Object.freeze({
@@ -1396,4 +1425,4 @@ type: type,
     tabIndex: isHovering ? 0 : -1,
-    ref: itemRef,
-    onMouseEnter: handleMouseEnter,
+    ref: ref,
+    onMouseEnter: setHover,
     onKeyUp: handleKeyUp,
@@ -1428,4 +1457,48 @@ onBlur: handleBlur,
 
-var MenuDivider = defineName(function MenuDivider(_ref) {
+var FocusableItem = defineName(React__default.memo(function FocusableItem(_ref) {
   var className = _ref.className,
+      styles = _ref.styles,
+      disabled = _ref.disabled,
+      index = _ref.index,
+      children = _ref.children;
+
+  var _useItemState = useItemState(disabled, index),
+      ref = _useItemState.ref,
+      isHovering = _useItemState.isHovering,
+      isDisabled = _useItemState.isDisabled,
+      setHover = _useItemState.setHover,
+      unsetHover = _useItemState.unsetHover;
+
+  var _useContext = React.useContext(EventHandlersContext),
+      handleClose = _useContext.handleClose;
+
+  var baseParams = {
+    disabled: isDisabled,
+    hover: isHovering
+  };
+  var modifiers = Object.freeze(_extends({}, baseParams, {
+    focusable: true
+  }));
+  var renderChildren = safeCall(children, _extends({}, baseParams, {
+    ref: ref,
+    closeMenu: handleClose
+  }));
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: bem(menuClass, menuItemClass, modifiers)(className),
+    style: flatStyles(styles, modifiers),
+    "aria-disabled": isDisabled,
+    role: "menuitem",
+    tabIndex: "-1",
+    onMouseEnter: setHover,
+    onFocus: setHover,
+    onBlur: unsetHover
+  }, renderChildren);
+}), 'FocusableItem');
+FocusableItem.propTypes = _extends({}, stylePropTypes, {
+  disabled: PropTypes.bool,
+  children: PropTypes.func.isRequired
+});
+
+var MenuDivider = defineName(React__default.memo(function MenuDivider(_ref) {
+  var className = _ref.className,
       styles = _ref.styles;
@@ -1437,6 +1510,6 @@ return /*#__PURE__*/React__default.createElement("li", {
   });
-}, 'MenuDivider');
+}), 'MenuDivider');
 MenuDivider.propTypes = _extends({}, stylePropTypes);
 
-var MenuHeader = defineName(function MenuHeader(_ref) {
+var MenuHeader = defineName(React__default.memo(function MenuHeader(_ref) {
   var className = _ref.className,
@@ -1450,3 +1523,3 @@ styles = _ref.styles,
   }, children);
-}, 'MenuHeader');
+}), 'MenuHeader');
 MenuHeader.propTypes = _extends({}, stylePropTypes);
@@ -1489,2 +1562,3 @@
 exports.ControlledMenu = ControlledMenu;
+exports.FocusableItem = FocusableItem;
 exports.Menu = Menu;
@@ -1491,0 +1565,0 @@ exports.MenuButton = MenuButton;

dist/index.modern.js

@@ -1,2 +0,2 @@
-import React, { useState, useReducer, useCallback, useMemo, useContext, useRef, useLayoutEffect, useEffect } from 'react';
+import React, { useCallback, useState, useMemo, useRef, useContext, useEffect, useReducer, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -183,2 +183,84 @@
 
+var useActiveState = function useActiveState(customKeyCode) {
+  var _useState = useState(false),
+      active = _useState[0],
+      setActive = _useState[1];
+
+  var activeKeyCodes = useMemo(function () {
+    return [KeyCodes.SPACE, KeyCodes.RETURN].concat(customKeyCode ? [customKeyCode] : []);
+  }, [customKeyCode]);
+  return {
+    isActive: active,
+    onPointerDown: useCallback(function (e) {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      setActive(true);
+    }, []),
+    onPointerUp: useCallback(function (e) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }, []),
+    onLostPointerCapture: useCallback(function (e) {
+      setActive(false);
+    }, []),
+    onKeyDown: useCallback(function (e) {
+      if (activeKeyCodes.includes(e.keyCode)) {
+        setActive(true);
+      }
+    }, [activeKeyCodes]),
+    onKeyUp: useCallback(function (e) {
+      if (activeKeyCodes.includes(e.keyCode)) {
+        setActive(false);
+      }
+    }, [activeKeyCodes]),
+    onBlur: useCallback(function (e) {
+      setActive(false);
+    }, [])
+  };
+};
+
+var useItemState = function useItemState(disabled, index) {
+  var ref = useRef(null);
+
+  var _useContext = useContext(MenuListContext),
+      isParentOpen = _useContext.isParentOpen,
+      hoverIndex = _useContext.hoverIndex,
+      hoverIndexDispatch = _useContext.hoverIndexDispatch;
+
+  var isHovering = hoverIndex === index;
+  var isDisabled = disabled ? true : undefined;
+  useEffect(function () {
+    if (isHovering && isParentOpen) {
+      ref.current && ref.current.focus();
+    }
+  }, [isHovering, isParentOpen]);
+  return {
+    ref: ref,
+    isHovering: isHovering,
+    isDisabled: isDisabled,
+    setHover: useCallback(function () {
+      if (!isDisabled) hoverIndexDispatch({
+        type: HoverIndexActionTypes.SET,
+        index: index
+      });
+    }, [isDisabled, hoverIndexDispatch, index]),
+    unsetHover: useCallback(function (e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        hoverIndexDispatch({
+          type: HoverIndexActionTypes.UNSET,
+          index: index
+        });
+      }
+    }, [hoverIndexDispatch, index])
+  };
+};
+
+var useMenuChange = function useMenuChange(onChange, isOpen) {
+  var prevOpen = useRef(isOpen);
+  useEffect(function () {
+    if (prevOpen.current !== isOpen) safeCall(onChange, {
+      open: isOpen
+    });
+    prevOpen.current = isOpen;
+  }, [onChange, isOpen]);
+};
+
 var FocusPositions = Object.freeze({
@@ -276,38 +358,2 @@ 'INITIAL': 'initial',
 
-var useActiveState = function useActiveState(customKeyCode) {
-  var _useState = useState(false),
-      active = _useState[0],
-      setActive = _useState[1];
-
-  var activeKeyCodes = useMemo(function () {
-    return [KeyCodes.SPACE, KeyCodes.RETURN].concat(customKeyCode ? [customKeyCode] : []);
-  }, [customKeyCode]);
-  return {
-    isActive: active,
-    onPointerDown: useCallback(function (e) {
-      e.currentTarget.setPointerCapture(e.pointerId);
-      setActive(true);
-    }, []),
-    onPointerUp: useCallback(function (e) {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    }, []),
-    onLostPointerCapture: useCallback(function (e) {
-      setActive(false);
-    }, []),
-    onKeyDown: useCallback(function (e) {
-      if (activeKeyCodes.includes(e.keyCode)) {
-        setActive(true);
-      }
-    }, [activeKeyCodes]),
-    onKeyUp: useCallback(function (e) {
-      if (activeKeyCodes.includes(e.keyCode)) {
-        setActive(false);
-      }
-    }, [activeKeyCodes]),
-    onBlur: useCallback(function (e) {
-      setActive(false);
-    }, [])
-  };
-};
-
 var MenuButton = defineName(React.memo(React.forwardRef(function MenuButton(_ref, ref) {
@@ -435,3 +481,3 @@ var id = _ref.id,
     var index = 0;
-    var permittedChildren = ['MenuDivider', 'MenuHeader', 'MenuItem', 'MenuRadioGroup', 'SubMenu'];
+    var permittedChildren = ['MenuDivider', 'MenuHeader', 'MenuItem', 'FocusableItem', 'MenuRadioGroup', 'SubMenu'];
 
@@ -510,3 +556,6 @@ var validateChildren = function validateChildren(parent, child, permitted) {
       case KeyCodes.RETURN:
-        if (e.currentTarget.contains(e.target)) e.preventDefault();
+        if (e.target && e.target.className.includes(menuClass)) {
+          e.preventDefault();
+        }
+
         break;
@@ -830,3 +879,3 @@ }
     var id = setTimeout(function () {
-      if (!isOpen) return;
+      if (!isOpen || menuRef.current.contains(document.activeElement)) return;
       menuRef.current.focus();
@@ -901,2 +950,8 @@
         if (!isStopPropagation) safeCall(onClick, event);
+      },
+      handleClose: function handleClose(keyCode) {
+        safeCall(onClose, {
+          keyCode: keyCode,
+          reason: CloseReason.CLICK
+        });
       }
@@ -972,2 +1027,3 @@ };
 
+  useMenuChange(onChange, isOpen);
   var skipClick = useRef(false);
@@ -1029,7 +1085,2 @@ var buttonRef = useRef(null);
   }, id, animation, debugging, children, onClick, handleClose, skipClick);
-  useEffect(function () {
-    safeCall(onChange, {
-      open: isOpen
-    });
-  }, [onChange, isOpen]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderButton, menuList);
@@ -1137,2 +1188,3 @@ });
   var isDisabled = disabled ? true : undefined;
+  useMenuChange(onChange, isOpen);
 
@@ -1219,7 +1271,2 @@ var handleMouseEnter = function handleMouseEnter(e) {
   }, [isHovering, isParentOpen, closeMenu]);
-  useEffect(function () {
-    safeCall(onChange, {
-      open: isOpen
-    });
-  }, [onChange, isOpen]);
   var modifiers = Object.freeze({
@@ -1290,9 +1337,9 @@ open: isOpen,
 
-  var itemRef = useRef(null);
+  var _useItemState = useItemState(disabled, index),
+      ref = _useItemState.ref,
+      isHovering = _useItemState.isHovering,
+      isDisabled = _useItemState.isDisabled,
+      setHover = _useItemState.setHover,
+      unsetHover = _useItemState.unsetHover;
 
-  var _useContext = useContext(MenuListContext),
-      isParentOpen = _useContext.isParentOpen,
-      hoverIndex = _useContext.hoverIndex,
-      hoverIndexDispatch = _useContext.hoverIndexDispatch;
-
   var eventHandlers = useContext(EventHandlersContext);
@@ -1307,6 +1354,4 @@ var radioGroup = useContext(RadioGroupContext);
 
-  var isHovering = hoverIndex === index;
   var isRadio = type === 'radio';
   var isCheckBox = type === 'checkbox';
-  var isDisabled = disabled ? true : undefined;
   var isAnchor = href && !isDisabled && !isRadio && !isCheckBox;
@@ -1345,3 +1390,3 @@
         if (isAnchor) {
-          itemRef.current.click();
+          ref.current.click();
         } else {
@@ -1355,23 +1400,7 @@ handleClick(e.keyCode);
 
-  var handleMouseEnter = function handleMouseEnter(e) {
-    if (isDisabled) return;
-    hoverIndexDispatch({
-      type: HoverIndexActionTypes.SET,
-      index: index
-    });
-  };
-
   var handleBlur = function handleBlur(e) {
     onBlur(e);
-    hoverIndexDispatch({
-      type: HoverIndexActionTypes.UNSET,
-      index: index
-    });
+    unsetHover(e);
   };
 
-  useEffect(function () {
-    if (isHovering && isParentOpen) {
-      itemRef.current.focus();
-    }
-  }, [isHovering, isParentOpen]);
   var modifiers = Object.freeze({
@@ -1393,4 +1422,4 @@ type: type,
     tabIndex: isHovering ? 0 : -1,
-    ref: itemRef,
-    onMouseEnter: handleMouseEnter,
+    ref: ref,
+    onMouseEnter: setHover,
     onKeyUp: handleKeyUp,
@@ -1425,4 +1454,48 @@ onBlur: handleBlur,
 
-var MenuDivider = defineName(function MenuDivider(_ref) {
+var FocusableItem = defineName(React.memo(function FocusableItem(_ref) {
   var className = _ref.className,
+      styles = _ref.styles,
+      disabled = _ref.disabled,
+      index = _ref.index,
+      children = _ref.children;
+
+  var _useItemState = useItemState(disabled, index),
+      ref = _useItemState.ref,
+      isHovering = _useItemState.isHovering,
+      isDisabled = _useItemState.isDisabled,
+      setHover = _useItemState.setHover,
+      unsetHover = _useItemState.unsetHover;
+
+  var _useContext = useContext(EventHandlersContext),
+      handleClose = _useContext.handleClose;
+
+  var baseParams = {
+    disabled: isDisabled,
+    hover: isHovering
+  };
+  var modifiers = Object.freeze(_extends({}, baseParams, {
+    focusable: true
+  }));
+  var renderChildren = safeCall(children, _extends({}, baseParams, {
+    ref: ref,
+    closeMenu: handleClose
+  }));
+  return /*#__PURE__*/React.createElement("li", {
+    className: bem(menuClass, menuItemClass, modifiers)(className),
+    style: flatStyles(styles, modifiers),
+    "aria-disabled": isDisabled,
+    role: "menuitem",
+    tabIndex: "-1",
+    onMouseEnter: setHover,
+    onFocus: setHover,
+    onBlur: unsetHover
+  }, renderChildren);
+}), 'FocusableItem');
+FocusableItem.propTypes = _extends({}, stylePropTypes, {
+  disabled: PropTypes.bool,
+  children: PropTypes.func.isRequired
+});
+
+var MenuDivider = defineName(React.memo(function MenuDivider(_ref) {
+  var className = _ref.className,
       styles = _ref.styles;
@@ -1434,6 +1507,6 @@ return /*#__PURE__*/React.createElement("li", {
   });
-}, 'MenuDivider');
+}), 'MenuDivider');
 MenuDivider.propTypes = _extends({}, stylePropTypes);
 
-var MenuHeader = defineName(function MenuHeader(_ref) {
+var MenuHeader = defineName(React.memo(function MenuHeader(_ref) {
   var className = _ref.className,
@@ -1447,3 +1520,3 @@ styles = _ref.styles,
   }, children);
-}, 'MenuHeader');
+}), 'MenuHeader');
 MenuHeader.propTypes = _extends({}, stylePropTypes);
@@ -1485,2 +1558,2 @@
 
-export { ControlledMenu, Menu, MenuButton, MenuDivider, MenuHeader, MenuItem, MenuRadioGroup, SubMenu, useMenuState };
+export { ControlledMenu, FocusableItem, Menu, MenuButton, MenuDivider, MenuHeader, MenuItem, MenuRadioGroup, SubMenu, useMenuState };

package.json

 {
   "name": "@szhsin/react-menu",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "React menu components",
@@ -5,0 +5,0 @@ "author": "Zheng Song",

README.md

@@ -13,7 +13,7 @@ # React-Menu
 - Unlimited levels of submenu.
-- Radio and checkbox menu items.
+- Supports radio and checkbox menu items.
 - Supports context menu.
 - Customisable styling.
-- Comprehensive keyboard interaction.
-- Built to comply with [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#menu).
+- Comprehensive keyboard interactions.
+- Adheres to [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#menu).
 
@@ -20,0 +20,0 @@ ## Installation

No alert changes

Improved metrics

Total package byte prevSize

107368

increased by4.82%

Lines of code

3067

increased by4.68%

No dependency changes