downshift 7.2.1 → 7.2.2

package/README.md

@@ -57,7 +57,7 @@ has been around for a while. It established a successful pattern for making
 components accessible and functional while giving developers complete freedom
 when building the UI.
 
-Both _useSelect_ and _useCombobox_ support he latest ARIA combobox patterns for
+Both _useSelect_ and _useCombobox_ support the latest ARIA combobox patterns for
 W3C, which _Downshift_ does not. Consequently, we strongly recommend the you use
 the hooks. The hooks have been migrated to the ARIA 1.2 combobox pattern in the
 version 7 of _downshift_. There is a [Migration Guide][migration-guide-v7] that

package/dist/downshift.cjs.js

@@ -1773,8 +1773,11 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   react.useEffect(function () {
+    if ((environment == null ? void 0 : environment.addEventListener) == null) {
+      return;
+    }
 
-    // The same strategy for checking if a click occurred inside or outside downsift
+    // The same strategy for checking if a click occurred inside or outside downshift
     // as in downshift.js.
     var onMouseDown = function onMouseDown() {
       mouseAndTouchTrackersRef.current.isMouseDown = true;
@@ -3038,13 +3041,14 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   react.useEffect(function () {
+    var _environment$document;
     if (!isOpen) {
       itemRefs.current = {};
-    } else if (document.activeElement !== inputRef.current) {
+    } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) {
       var _inputRef$current;
       inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     }
-  }, [isOpen]);
+  }, [isOpen, environment]);
 
   /* Event handler functions */
   var inputKeyDownHandlers = react.useMemo(function () {

package/dist/downshift.esm.js

@@ -1760,8 +1760,11 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   useEffect(function () {
+    if ((environment == null ? void 0 : environment.addEventListener) == null) {
+      return;
+    }
 
-    // The same strategy for checking if a click occurred inside or outside downsift
+    // The same strategy for checking if a click occurred inside or outside downshift
     // as in downshift.js.
     var onMouseDown = function onMouseDown() {
       mouseAndTouchTrackersRef.current.isMouseDown = true;
@@ -3025,13 +3028,14 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   useEffect(function () {
+    var _environment$document;
     if (!isOpen) {
       itemRefs.current = {};
-    } else if (document.activeElement !== inputRef.current) {
+    } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) {
       var _inputRef$current;
       inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     }
-  }, [isOpen]);
+  }, [isOpen, environment]);
 
   /* Event handler functions */
   var inputKeyDownHandlers = useMemo(function () {

package/dist/downshift.native.cjs.js

@@ -59,6 +59,17 @@ function scrollIntoView(node, menuNode) {
   });
 }
 
+/**
+ * @param {HTMLElement} parent the parent node
+ * @param {HTMLElement} child the child node
+ * @param {Window} environment The window context where downshift renders.
+ * @return {Boolean} whether the parent is the child or the child is in the parent
+ */
+function isOrContainsNode(parent, child, environment) {
+  var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
+  return result;
+}
+
 /**
  * Simple debounce implementation. Will call the given
  * function once after the time given has passed since
@@ -351,6 +362,25 @@ function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFr
   return -1;
 }
 
+/**
+ * Checks if event target is within the downshift elements.
+ *
+ * @param {EventTarget} target Target to check.
+ * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
+ * @param {Window} environment The window context where downshift renders.
+ * @param {boolean} checkActiveElement Whether to also check activeElement.
+ *
+ * @returns {boolean} Whether or not the target is within downshift elements.
+ */
+function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
+  if (checkActiveElement === void 0) {
+    checkActiveElement = true;
+  }
+  return downshiftElements.some(function (contextNode) {
+    return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
+  });
+}
+
 // eslint-disable-next-line import/no-mutable-exports
 var validateControlledUnchanged = noop;
 /* istanbul ignore next */
@@ -1681,10 +1711,50 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   react.useEffect(function () {
-    /* istanbul ignore if (react-native) */
-    {
+    if ((environment == null ? void 0 : environment.addEventListener) == null) {
       return;
     }
+
+    // The same strategy for checking if a click occurred inside or outside downshift
+    // as in downshift.js.
+    var onMouseDown = function onMouseDown() {
+      mouseAndTouchTrackersRef.current.isMouseDown = true;
+    };
+    var onMouseUp = function onMouseUp(event) {
+      mouseAndTouchTrackersRef.current.isMouseDown = false;
+      if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
+        return ref.current;
+      }), environment)) {
+        handleBlur();
+      }
+    };
+    var onTouchStart = function onTouchStart() {
+      mouseAndTouchTrackersRef.current.isTouchMove = false;
+    };
+    var onTouchMove = function onTouchMove() {
+      mouseAndTouchTrackersRef.current.isTouchMove = true;
+    };
+    var onTouchEnd = function onTouchEnd(event) {
+      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
+        return ref.current;
+      }), 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);
+      environment.removeEventListener('touchstart', onTouchStart);
+      environment.removeEventListener('touchmove', onTouchMove);
+      environment.removeEventListener('touchend', onTouchEnd);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, environment]);
   return mouseAndTouchTrackersRef;
@@ -2223,7 +2293,11 @@ function useSelect(userProps) {
     previousResultCountRef.current = items.length;
   });
   // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment);
+  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
+    dispatch({
+      type: ToggleButtonBlur
+    });
+  });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Make initial ref false.
   react.useEffect(function () {
@@ -2889,7 +2963,12 @@ function useCombobox(userProps) {
     previousResultCountRef.current = items.length;
   });
   // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment);
+  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
+    dispatch({
+      type: InputBlur,
+      selectItem: false
+    });
+  });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Make initial ref false.
   react.useEffect(function () {
@@ -2900,13 +2979,14 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   react.useEffect(function () {
+    var _environment$document;
     if (!isOpen) {
       itemRefs.current = {};
-    } else if (document.activeElement !== inputRef.current) {
+    } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) {
       var _inputRef$current;
       inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     }
-  }, [isOpen]);
+  }, [isOpen, environment]);
 
   /* Event handler functions */
   var inputKeyDownHandlers = react.useMemo(function () {

package/dist/downshift.umd.js

@@ -3059,8 +3059,11 @@
       isTouchMove: false
     });
     react.useEffect(function () {
+      if ((environment == null ? void 0 : environment.addEventListener) == null) {
+        return;
+      }
 
-      // The same strategy for checking if a click occurred inside or outside downsift
+      // The same strategy for checking if a click occurred inside or outside downshift
       // as in downshift.js.
       var onMouseDown = function onMouseDown() {
         mouseAndTouchTrackersRef.current.isMouseDown = true;
@@ -4350,13 +4353,14 @@
     }, []);
     // Reset itemRefs on close.
     react.useEffect(function () {
+      var _environment$document;
       if (!isOpen) {
         itemRefs.current = {};
-      } else if (document.activeElement !== inputRef.current) {
+      } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) {
         var _inputRef$current;
         inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
       }
-    }, [isOpen]);
+    }, [isOpen, environment]);
 
     /* Event handler functions */
     var inputKeyDownHandlers = react.useMemo(function () {