downshift 8.4.0 → 8.5.0

package/dist/downshift.nativeweb.cjs.js

@@ -1823,17 +1823,15 @@ function getHighlightedIndexOnOpen(props, state, offset) {
   }
   return offset < 0 ? items.length - 1 : 0;
 }
-
 /**
- * Reuse the movement tracking of mouse and touch events.
+ * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
  *
- * @param {boolean} isOpen Whether the dropdown is open or not.
- * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
- * @param {Object} environment Environment where component/hook exists.
- * @param {Function} handleBlur Handler on blur from mouse or touch.
- * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
+ * @param {Object} environment The environment to add the event listeners to, for instance window.
+ * @param {Array<HTMLElement>} downshiftElementRefs The refs for the element that should not trigger a blur action from mouseDown or touchEnd.
+ * @param {Function} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
+ * @returns {Object} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
+function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur) {
   var mouseAndTouchTrackersRef = React.useRef({
     isMouseDown: false,
     isTouchMove: false,
@@ -1841,45 +1839,39 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
   });
   React.useEffect(function () {
     if (!environment) {
-      return;
+      return noop;
     }
-
-    // The same strategy for checking if a click occurred inside or outside downshift
-    // as in downshift.js.
-    var onMouseDown = function onMouseDown() {
+    var downshiftElements = downshiftElementRefs.map(function (ref) {
+      return ref.current;
+    });
+    function onMouseDown() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true;
-    };
-    var onMouseUp = function onMouseUp(event) {
+    }
+    function onMouseUp(event) {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
-      if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-        return ref.current;
-      }), environment)) {
+      if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
         handleBlur();
       }
-    };
-    var onTouchStart = function onTouchStart() {
+    }
+    function onTouchStart() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false;
       mouseAndTouchTrackersRef.current.isTouchMove = false;
-    };
-    var onTouchMove = function onTouchMove() {
+    }
+    function onTouchMove() {
       mouseAndTouchTrackersRef.current.isTouchMove = true;
-    };
-    var onTouchEnd = function onTouchEnd(event) {
+    }
+    function onTouchEnd(event) {
       mouseAndTouchTrackersRef.current.isTouchEnd = true;
-      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-        return ref.current;
-      }), environment, false)) {
+      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
         handleBlur();
       }
-    };
+    }
     environment.addEventListener('mousedown', onMouseDown);
     environment.addEventListener('mouseup', onMouseUp);
     environment.addEventListener('touchstart', onTouchStart);
     environment.addEventListener('touchmove', onTouchMove);
     environment.addEventListener('touchend', onTouchEnd);
-
-    // eslint-disable-next-line consistent-return
     return function cleanup() {
       environment.removeEventListener('mousedown', onMouseDown);
       environment.removeEventListener('mouseup', onMouseUp);
@@ -1887,9 +1879,9 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
       environment.removeEventListener('touchmove', onTouchMove);
       environment.removeEventListener('touchend', onTouchEnd);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, environment]);
-  return mouseAndTouchTrackersRef;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- refs don't change
+  }, [environment, handleBlur]);
+  return mouseAndTouchTrackersRef.current;
 }
 
 /* istanbul ignore next */
@@ -2482,12 +2474,13 @@ function useSelect(userProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
-    dispatch({
-      type: ToggleButtonBlur
-    });
-  });
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef], React.useCallback(function handleBlur() {
+    if (latest.current.state.isOpen) {
+      dispatch({
+        type: ToggleButtonBlur
+      });
+    }
+  }, [dispatch, latest]));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -2673,7 +2666,7 @@ function useSelect(userProps) {
       });
     };
     var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
-      if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
         dispatch({
           type: ToggleButtonBlur
         });
@@ -2690,7 +2683,7 @@ function useSelect(userProps) {
     }
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
-  }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers]);
   var getItemProps = React.useCallback(function (_temp6) {
     var _extends4;
     var _ref6 = _temp6 === void 0 ? {} : _temp6,
@@ -2716,7 +2709,7 @@ function useSelect(userProps) {
       index = _getItemAndIndex[1];
     var disabled = latestProps.isItemDisabled(item, index);
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -2750,7 +2743,7 @@ function useSelect(userProps) {
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown);
     return itemProps;
-  }, [latest, elementIds, mouseAndTouchTrackersRef, shouldScrollRef, dispatch]);
+  }, [latest, elementIds, mouseAndTouchTrackers, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -3111,13 +3104,14 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
-    dispatch({
-      type: InputBlur,
-      selectItem: false
-    });
-  });
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef, inputRef], React.useCallback(function handleBlur() {
+    if (latest.current.state.isOpen) {
+      dispatch({
+        type: InputBlur,
+        selectItem: false
+      });
+    }
+  }, [dispatch, latest]));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3265,7 +3259,7 @@ function useCombobox(userProps) {
     var onSelectKey = /* istanbul ignore next (react-native) */'onPress' ;
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
       shouldScrollRef.current = false;
@@ -3293,7 +3287,7 @@ function useCombobox(userProps) {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
-  }, [dispatch, elementIds, latest, mouseAndTouchTrackersRef, shouldScrollRef]);
+  }, [dispatch, elementIds, latest, mouseAndTouchTrackers, shouldScrollRef]);
   var getToggleButtonProps = React.useCallback(function (_temp4) {
     var _extends4;
     var _ref5 = _temp4 === void 0 ? {} : _temp4;
@@ -3347,7 +3341,7 @@ function useCombobox(userProps) {
     };
     var inputHandleBlur = function inputHandleBlur(event) {
       /* istanbul ignore else */
-      if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
         var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body;
         dispatch({
           type: InputBlur,
@@ -3371,7 +3365,7 @@ function useCombobox(userProps) {
     return _extends__default["default"]((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
       inputRef.current = inputNode;
     }), _extends5['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = latestState.isOpen, _extends5['aria-labelledby'] = rest && rest['aria-label'] ? undefined : elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
-  }, [setGetterPropCallInfo, latest, elementIds, inputKeyDownHandlers, dispatch, mouseAndTouchTrackersRef, environment]);
+  }, [dispatch, elementIds, environment, inputKeyDownHandlers, latest, mouseAndTouchTrackers, setGetterPropCallInfo]);
 
   // returns
   var toggleMenu = React.useCallback(function () {

package/dist/downshift.umd.js

@@ -3181,17 +3181,15 @@
     }
     return offset < 0 ? items.length - 1 : 0;
   }
-
   /**
-   * Reuse the movement tracking of mouse and touch events.
+   * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
    *
-   * @param {boolean} isOpen Whether the dropdown is open or not.
-   * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
-   * @param {Object} environment Environment where component/hook exists.
-   * @param {Function} handleBlur Handler on blur from mouse or touch.
-   * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
+   * @param {Object} environment The environment to add the event listeners to, for instance window.
+   * @param {Array<HTMLElement>} downshiftElementRefs The refs for the element that should not trigger a blur action from mouseDown or touchEnd.
+   * @param {Function} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
+   * @returns {Object} The mouse and touch events information, if any of are happening.
    */
-  function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
+  function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur) {
     var mouseAndTouchTrackersRef = React.useRef({
       isMouseDown: false,
       isTouchMove: false,
@@ -3199,45 +3197,39 @@
     });
     React.useEffect(function () {
       if (!environment) {
-        return;
+        return noop;
       }
-
-      // The same strategy for checking if a click occurred inside or outside downshift
-      // as in downshift.js.
-      var onMouseDown = function onMouseDown() {
+      var downshiftElements = downshiftElementRefs.map(function (ref) {
+        return ref.current;
+      });
+      function onMouseDown() {
         mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
         mouseAndTouchTrackersRef.current.isMouseDown = true;
-      };
-      var onMouseUp = function onMouseUp(event) {
+      }
+      function onMouseUp(event) {
         mouseAndTouchTrackersRef.current.isMouseDown = false;
-        if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-          return ref.current;
-        }), environment)) {
+        if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
           handleBlur();
         }
-      };
-      var onTouchStart = function onTouchStart() {
+      }
+      function onTouchStart() {
         mouseAndTouchTrackersRef.current.isTouchEnd = false;
         mouseAndTouchTrackersRef.current.isTouchMove = false;
-      };
-      var onTouchMove = function onTouchMove() {
+      }
+      function onTouchMove() {
         mouseAndTouchTrackersRef.current.isTouchMove = true;
-      };
-      var onTouchEnd = function onTouchEnd(event) {
+      }
+      function onTouchEnd(event) {
         mouseAndTouchTrackersRef.current.isTouchEnd = true;
-        if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-          return ref.current;
-        }), environment, false)) {
+        if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
           handleBlur();
         }
-      };
+      }
       environment.addEventListener('mousedown', onMouseDown);
       environment.addEventListener('mouseup', onMouseUp);
       environment.addEventListener('touchstart', onTouchStart);
       environment.addEventListener('touchmove', onTouchMove);
       environment.addEventListener('touchend', onTouchEnd);
-
-      // eslint-disable-next-line consistent-return
       return function cleanup() {
         environment.removeEventListener('mousedown', onMouseDown);
         environment.removeEventListener('mouseup', onMouseUp);
@@ -3245,9 +3237,9 @@
         environment.removeEventListener('touchmove', onTouchMove);
         environment.removeEventListener('touchend', onTouchEnd);
       };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isOpen, environment]);
-    return mouseAndTouchTrackersRef;
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- refs don't change
+    }, [environment, handleBlur]);
+    return mouseAndTouchTrackersRef.current;
   }
 
   /* istanbul ignore next */
@@ -3871,12 +3863,13 @@
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    // Add mouse/touch events to document.
-    var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
-      dispatch({
-        type: ToggleButtonBlur
-      });
-    });
+    var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef], React.useCallback(function handleBlur() {
+      if (latest.current.state.isOpen) {
+        dispatch({
+          type: ToggleButtonBlur
+        });
+      }
+    }, [dispatch, latest]));
     var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
     // Reset itemRefs on close.
     React.useEffect(function () {
@@ -4062,7 +4055,7 @@
         });
       };
       var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
-        if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+        if (latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
           dispatch({
             type: ToggleButtonBlur
           });
@@ -4091,7 +4084,7 @@
       }
       setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
       return toggleProps;
-    }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers]);
+    }, [dispatch, elementIds, latest, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers]);
     var getItemProps = React.useCallback(function (_temp6) {
       var _extends4;
       var _ref6 = _temp6 === void 0 ? {} : _temp6,
@@ -4117,7 +4110,7 @@
         index = _getItemAndIndex[1];
       var disabled = latestProps.isItemDisabled(item, index);
       var itemHandleMouseMove = function itemHandleMouseMove() {
-        if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+        if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
           return;
         }
         shouldScrollRef.current = false;
@@ -4151,7 +4144,7 @@
       itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
       itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown);
       return itemProps;
-    }, [latest, elementIds, mouseAndTouchTrackersRef, shouldScrollRef, dispatch]);
+    }, [latest, elementIds, mouseAndTouchTrackers, shouldScrollRef, dispatch]);
     return {
       // prop getters.
       getToggleButtonProps: getToggleButtonProps,
@@ -4512,13 +4505,14 @@
         previousResultCountRef.current = items.length;
       }
     });
-    // Add mouse/touch events to document.
-    var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
-      dispatch({
-        type: InputBlur,
-        selectItem: false
-      });
-    });
+    var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef, inputRef], React.useCallback(function handleBlur() {
+      if (latest.current.state.isOpen) {
+        dispatch({
+          type: InputBlur,
+          selectItem: false
+        });
+      }
+    }, [dispatch, latest]));
     var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
     // Reset itemRefs on close.
     React.useEffect(function () {
@@ -4666,7 +4660,7 @@
       var onSelectKey = 'onClick';
       var customClickHandler = onClick;
       var itemHandleMouseMove = function itemHandleMouseMove() {
-        if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+        if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
           return;
         }
         shouldScrollRef.current = false;
@@ -4694,7 +4688,7 @@
         onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
         onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
       }, rest);
-    }, [dispatch, elementIds, latest, mouseAndTouchTrackersRef, shouldScrollRef]);
+    }, [dispatch, elementIds, latest, mouseAndTouchTrackers, shouldScrollRef]);
     var getToggleButtonProps = React.useCallback(function (_temp4) {
       var _extends4;
       var _ref5 = _temp4 === void 0 ? {} : _temp4,
@@ -4748,7 +4742,7 @@
       };
       var inputHandleBlur = function inputHandleBlur(event) {
         /* istanbul ignore else */
-        if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+        if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
           var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body;
           dispatch({
             type: InputBlur,
@@ -4772,7 +4766,7 @@
       return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
         inputRef.current = inputNode;
       }), _extends5['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = latestState.isOpen, _extends5['aria-labelledby'] = rest && rest['aria-label'] ? undefined : elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
-    }, [setGetterPropCallInfo, latest, elementIds, inputKeyDownHandlers, dispatch, mouseAndTouchTrackersRef, environment]);
+    }, [dispatch, elementIds, environment, inputKeyDownHandlers, latest, mouseAndTouchTrackers, setGetterPropCallInfo]);
 
     // returns
     var toggleMenu = React.useCallback(function () {