@szhsin/react-menu - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.js

@@ -206,3 +206,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var useActiveState = function useActiveState(isHovering, customKey) {
+var useActiveState = function useActiveState(isHovering, isDisabled, customKey) {
   var _useState = React.useState(false),
@@ -215,19 +215,17 @@ active = _useState[0],
   }, [customKey]);
+  var cancelActive = React.useCallback(function () {
+    return setActive(false);
+  }, []);
   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 () {
-      setActive(false);
-    }, []),
+    onPointerDown: React.useCallback(function () {
+      if (!isDisabled) setActive(true);
+    }, [isDisabled]),
+    onPointerUp: cancelActive,
+    onPointerLeave: cancelActive,
     onKeyDown: React.useCallback(function (e) {
-      if (isHovering && activeKeys.includes(e.key)) {
+      if (isHovering && !isDisabled && activeKeys.includes(e.key)) {
         setActive(true);
       }
-    }, [isHovering, activeKeys]),
+    }, [isHovering, isDisabled, activeKeys]),
     onKeyUp: React.useCallback(function (e) {
@@ -238,4 +236,6 @@ if (activeKeys.includes(e.key)) {
     }, [activeKeys]),
-    onBlur: React.useCallback(function () {
-      setActive(false);
+    onBlur: React.useCallback(function (e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        setActive(false);
+      }
     }, [])
@@ -271,7 +271,7 @@ };
     unsetHover: React.useCallback(function () {
-      if (!isDisabled) hoverIndexDispatch({
+      hoverIndexDispatch({
         type: HoverIndexActionTypes.UNSET,
         index: index
       });
-    }, [isDisabled, hoverIndexDispatch, index])
+    }, [hoverIndexDispatch, index])
   };
@@ -1392,8 +1392,8 @@ };
   var isHovering = hoverIndex === index;
+  var isDisabled = disabled ? true : undefined;
 
-  var _useActiveState = useActiveState(isHovering, Keys.RIGHT),
+  var _useActiveState = useActiveState(isHovering, isDisabled, Keys.RIGHT),
       isActive = _useActiveState.isActive,
       onKeyUp = _useActiveState.onKeyUp,
-      onBlur = _useActiveState.onBlur,
-      activeStateHandlers = _objectWithoutPropertiesLoose(_useActiveState, ["isActive", "onKeyUp", "onBlur"]);
+      activeStateHandlers = _objectWithoutPropertiesLoose(_useActiveState, ["isActive", "onKeyUp"]);
 
@@ -1403,3 +1403,2 @@ var containerRef = React.useRef(null);
   var timeoutId = React.useRef();
-  var isDisabled = disabled ? true : undefined;
   useMenuChange(onChange, isOpen);
@@ -1423,3 +1422,2 @@ var handleClose = React.useCallback(function () {
   var handleMouseLeave = function handleMouseLeave() {
-    if (isDisabled) return;
     clearTimeout(timeoutId.current);
@@ -1435,7 +1433,2 @@
 
-  var handleClick = function handleClick() {
-    if (isDisabled) return;
-    openMenu();
-  };
-
   var handleKeyDown = function handleKeyDown(e) {
@@ -1478,3 +1471,2 @@ var handled = false;
   var handleBlur = function handleBlur(e) {
-    onBlur(e);
     if (debugging) return;
@@ -1488,3 +1480,3 @@
       });
-    } else if (itemRef.current === e.relatedTarget) {
+    } else if (itemRef.current.contains(e.relatedTarget)) {
       closeMenu();
@@ -1504,3 +1496,3 @@ }
     hover: isHovering,
-    active: isActive && !isDisabled,
+    active: isActive,
     disabled: isDisabled
@@ -1525,3 +1517,5 @@ });
     onMouseLeave: handleMouseLeave,
-    onClick: handleClick,
+    onClick: function onClick() {
+      return !isDisabled && openMenu();
+    },
     onKeyUp: handleKeyUp
@@ -1584,3 +1578,3 @@ }, activeStateHandlers), safeCall(label, modifiers)), /*#__PURE__*/React__default.createElement(MenuList, {
 
-  var _useActiveState = useActiveState(isHovering),
+  var _useActiveState = useActiveState(isHovering, isDisabled),
       isActive = _useActiveState.isActive,
@@ -1637,3 +1631,6 @@ onKeyUp = _useActiveState.onKeyUp,
     onBlur(e);
-    unsetHover(e);
+
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      unsetHover(e);
+    }
   };
@@ -1645,3 +1642,3 @@
     hover: isHovering,
-    active: isActive && !isDisabled,
+    active: isActive,
     checked: isRadio ? radioGroup.value === value : isCheckBox ? !!checked : undefined,
@@ -1648,0 +1645,0 @@ anchor: isAnchor

dist/index.modern.js

@@ -151,22 +151,18 @@ import React, { useCallback, useState, useMemo, useRef, useContext, useEffect, useReducer, useLayoutEffect } from 'react';
 
-const useActiveState = (isHovering, customKey) => {
+const useActiveState = (isHovering, isDisabled, customKey) => {
   const [active, setActive] = useState(false);
   const activeKeys = useMemo(() => [Keys.SPACE, Keys.ENTER, ...(customKey ? [customKey] : [])], [customKey]);
+  const cancelActive = useCallback(() => setActive(false), []);
   return {
     isActive: active,
-    onPointerDown: useCallback(e => {
-      e.currentTarget.setPointerCapture(e.pointerId);
-      setActive(true);
-    }, []),
-    onPointerUp: useCallback(e => {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    }, []),
-    onLostPointerCapture: useCallback(() => {
-      setActive(false);
-    }, []),
+    onPointerDown: useCallback(() => {
+      if (!isDisabled) setActive(true);
+    }, [isDisabled]),
+    onPointerUp: cancelActive,
+    onPointerLeave: cancelActive,
     onKeyDown: useCallback(e => {
-      if (isHovering && activeKeys.includes(e.key)) {
+      if (isHovering && !isDisabled && activeKeys.includes(e.key)) {
         setActive(true);
       }
-    }, [isHovering, activeKeys]),
+    }, [isHovering, isDisabled, activeKeys]),
     onKeyUp: useCallback(e => {
@@ -177,4 +173,6 @@ if (activeKeys.includes(e.key)) {
     }, [activeKeys]),
-    onBlur: useCallback(() => {
-      setActive(false);
+    onBlur: useCallback(e => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        setActive(false);
+      }
     }, [])
@@ -209,7 +207,7 @@ };
     unsetHover: useCallback(() => {
-      if (!isDisabled) hoverIndexDispatch({
+      hoverIndexDispatch({
         type: HoverIndexActionTypes.UNSET,
         index
       });
-    }, [isDisabled, hoverIndexDispatch, index])
+    }, [hoverIndexDispatch, index])
   };
@@ -1289,12 +1287,11 @@ };
   const isHovering = hoverIndex === index;
+  const isDisabled = disabled ? true : undefined;
   const {
     isActive,
     onKeyUp,
-    onBlur,
     ...activeStateHandlers
-  } = useActiveState(isHovering, Keys.RIGHT);
+  } = useActiveState(isHovering, isDisabled, Keys.RIGHT);
   const containerRef = useRef(null);
   const itemRef = useRef(null);
   const timeoutId = useRef();
-  const isDisabled = disabled ? true : undefined;
   useMenuChange(onChange, isOpen);
@@ -1318,3 +1315,2 @@ const handleClose = useCallback(() => {
   const handleMouseLeave = () => {
-    if (isDisabled) return;
     clearTimeout(timeoutId.current);
@@ -1330,7 +1326,2 @@
 
-  const handleClick = () => {
-    if (isDisabled) return;
-    openMenu();
-  };
-
   const handleKeyDown = e => {
@@ -1373,3 +1364,2 @@ let handled = false;
   const handleBlur = e => {
-    onBlur(e);
     if (debugging) return;
@@ -1383,3 +1373,3 @@
       });
-    } else if (itemRef.current === e.relatedTarget) {
+    } else if (itemRef.current.contains(e.relatedTarget)) {
       closeMenu();
@@ -1399,3 +1389,3 @@ }
     hover: isHovering,
-    active: isActive && !isDisabled,
+    active: isActive,
     disabled: isDisabled
@@ -1420,3 +1410,3 @@ });
     onMouseLeave: handleMouseLeave,
-    onClick: handleClick,
+    onClick: () => !isDisabled && openMenu(),
     onKeyUp: handleKeyUp
@@ -1484,3 +1474,3 @@ }, activeStateHandlers), safeCall(label, modifiers)), /*#__PURE__*/React.createElement(MenuList, {
     ...activeStateHandlers
-  } = useActiveState(isHovering);
+  } = useActiveState(isHovering, isDisabled);
   const isRadio = type === 'radio';
@@ -1532,3 +1522,6 @@ const isCheckBox = type === 'checkbox';
     onBlur(e);
-    unsetHover(e);
+
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      unsetHover(e);
+    }
   };
@@ -1540,3 +1533,3 @@
     hover: isHovering,
-    active: isActive && !isDisabled,
+    active: isActive,
     checked: isRadio ? radioGroup.value === value : isCheckBox ? !!checked : undefined,
@@ -1543,0 +1536,0 @@ anchor: isAnchor

package.json

 {
   "name": "@szhsin/react-menu",
-  "version": "1.0.1",
-  "description": "An accessible, responsive, and customisable React menu library",
+  "version": "1.0.2",
+  "description": "An accessible, responsive, and customisable React menu library.",
   "author": "Zheng Song",
@@ -23,2 +23,3 @@ "license": "MIT",
     "test:lint": "eslint .",
+    "example": "npm start --prefix example",
     "predeploy": "cd example && npm run build",
@@ -25,0 +26,0 @@ "deploy": "gh-pages -d example/build"

No alert changes

Worsened metrics

Total package byte prevSize

109814

decreased by-0.08%

Lines of code

3460

decreased by-0.29%

No dependency changes