@szhsin/react-menu - npm Package Compare versions

Comparing version 0.10.1 to 0.10.2

dist/index.js

@@ -247,10 +247,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
     }, [isDisabled, hoverIndexDispatch, index]),
-    unsetHover: React.useCallback(function (e) {
-      if (!e.currentTarget.contains(e.relatedTarget)) {
-        hoverIndexDispatch({
-          type: HoverIndexActionTypes.UNSET,
-          index: index
-        });
-      }
-    }, [hoverIndexDispatch, index])
+    unsetHover: React.useCallback(function () {
+      if (!isDisabled) hoverIndexDispatch({
+        type: HoverIndexActionTypes.UNSET,
+        index: index
+      });
+    }, [isDisabled, hoverIndexDispatch, index])
   };
@@ -873,3 +871,8 @@ };
   }, [animation, isMounted, isOpen]);
+  var focusPosition = React.useRef(null);
   React.useEffect(function () {
+    focusPosition.current = menuItemFocus.position;
+  }, [menuItemFocus]);
+  var isResetIndex = hoverIndex === initialHoverIndex;
+  React.useEffect(function () {
     if (!isOpen) hoverIndexDispatch({
@@ -879,14 +882,17 @@ type: HoverIndexActionTypes.RESET
     var id = setTimeout(function () {
-      if (!isOpen || menuRef.current.contains(document.activeElement)) return;
-      menuRef.current.focus();
+      if (isOpen && isResetIndex) {
+        menuRef.current.focus();
 
-      if (menuItemFocus.position === FocusPositions.FIRST) {
-        hoverIndexDispatch({
-          type: HoverIndexActionTypes.FIRST
-        });
-      } else if (menuItemFocus.position === FocusPositions.LAST) {
-        hoverIndexDispatch({
-          type: HoverIndexActionTypes.LAST
-        });
+        if (focusPosition.current === FocusPositions.FIRST) {
+          hoverIndexDispatch({
+            type: HoverIndexActionTypes.FIRST
+          });
+        } else if (focusPosition.current === FocusPositions.LAST) {
+          hoverIndexDispatch({
+            type: HoverIndexActionTypes.LAST
+          });
+        }
       }
+
+      focusPosition.current = null;
     }, 100);
@@ -896,3 +902,3 @@ return function () {
     };
-  }, [isOpen, menuItemFocus]);
+  }, [isOpen, isResetIndex, menuItemFocus]);
   var context = React.useMemo(function () {
@@ -1201,3 +1207,11 @@ return {
   var handleMouseLeave = function handleMouseLeave(e) {
+    if (isDisabled) return;
     clearTimeout(timeoutId.current);
+
+    if (!isOpen) {
+      hoverIndexDispatch({
+        type: HoverIndexActionTypes.UNSET,
+        index: index
+      });
+    }
   };
@@ -1417,2 +1431,3 @@
     onMouseEnter: setHover,
+    onMouseLeave: unsetHover,
     onKeyUp: handleKeyUp,
@@ -1475,2 +1490,9 @@ onBlur: handleBlur,
   }));
+
+  var handleBlur = function handleBlur(e) {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      unsetHover(e);
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement("li", {
@@ -1483,4 +1505,5 @@ className: bem(menuClass, menuItemClass, modifiers)(className),
     onMouseEnter: setHover,
+    onMouseLeave: unsetHover,
     onFocus: setHover,
-    onBlur: unsetHover
+    onBlur: handleBlur
   }, renderChildren);
@@ -1487,0 +1510,0 @@ }), 'FocusableItem');

dist/index.modern.js

@@ -244,10 +244,8 @@ import React, { useCallback, useState, useMemo, useRef, useContext, useEffect, useReducer, useLayoutEffect } from 'react';
     }, [isDisabled, hoverIndexDispatch, index]),
-    unsetHover: useCallback(function (e) {
-      if (!e.currentTarget.contains(e.relatedTarget)) {
-        hoverIndexDispatch({
-          type: HoverIndexActionTypes.UNSET,
-          index: index
-        });
-      }
-    }, [hoverIndexDispatch, index])
+    unsetHover: useCallback(function () {
+      if (!isDisabled) hoverIndexDispatch({
+        type: HoverIndexActionTypes.UNSET,
+        index: index
+      });
+    }, [isDisabled, hoverIndexDispatch, index])
   };
@@ -870,3 +868,8 @@ };
   }, [animation, isMounted, isOpen]);
+  var focusPosition = useRef(null);
   useEffect(function () {
+    focusPosition.current = menuItemFocus.position;
+  }, [menuItemFocus]);
+  var isResetIndex = hoverIndex === initialHoverIndex;
+  useEffect(function () {
     if (!isOpen) hoverIndexDispatch({
@@ -876,14 +879,17 @@ type: HoverIndexActionTypes.RESET
     var id = setTimeout(function () {
-      if (!isOpen || menuRef.current.contains(document.activeElement)) return;
-      menuRef.current.focus();
+      if (isOpen && isResetIndex) {
+        menuRef.current.focus();
 
-      if (menuItemFocus.position === FocusPositions.FIRST) {
-        hoverIndexDispatch({
-          type: HoverIndexActionTypes.FIRST
-        });
-      } else if (menuItemFocus.position === FocusPositions.LAST) {
-        hoverIndexDispatch({
-          type: HoverIndexActionTypes.LAST
-        });
+        if (focusPosition.current === FocusPositions.FIRST) {
+          hoverIndexDispatch({
+            type: HoverIndexActionTypes.FIRST
+          });
+        } else if (focusPosition.current === FocusPositions.LAST) {
+          hoverIndexDispatch({
+            type: HoverIndexActionTypes.LAST
+          });
+        }
       }
+
+      focusPosition.current = null;
     }, 100);
@@ -893,3 +899,3 @@ return function () {
     };
-  }, [isOpen, menuItemFocus]);
+  }, [isOpen, isResetIndex, menuItemFocus]);
   var context = useMemo(function () {
@@ -1198,3 +1204,11 @@ return {
   var handleMouseLeave = function handleMouseLeave(e) {
+    if (isDisabled) return;
     clearTimeout(timeoutId.current);
+
+    if (!isOpen) {
+      hoverIndexDispatch({
+        type: HoverIndexActionTypes.UNSET,
+        index: index
+      });
+    }
   };
@@ -1414,2 +1428,3 @@
     onMouseEnter: setHover,
+    onMouseLeave: unsetHover,
     onKeyUp: handleKeyUp,
@@ -1472,2 +1487,9 @@ onBlur: handleBlur,
   }));
+
+  var handleBlur = function handleBlur(e) {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      unsetHover(e);
+    }
+  };
+
   return /*#__PURE__*/React.createElement("li", {
@@ -1480,4 +1502,5 @@ className: bem(menuClass, menuItemClass, modifiers)(className),
     onMouseEnter: setHover,
+    onMouseLeave: unsetHover,
     onFocus: setHover,
-    onBlur: unsetHover
+    onBlur: handleBlur
   }, renderChildren);
@@ -1484,0 +1507,0 @@ }), 'FocusableItem');

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

108066

increased by1%

Lines of code

3103

increased by1.24%

No dependency changes