downshift 9.0.10 → 9.0.11

package/README.md

@@ -1093,7 +1093,7 @@ platforms:
 > 🚨 We're in the process of moving all examples to the
 > [downshift-examples](https://github.com/downshift-js/downshift-examples) repo
 > (which you can open, interact with, and contribute back to live on
-> [codesandbox](https://codesandbox.io/s/github/kentcdodds/downshift-examples))
+> [codesandbox](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Findex.js&moduleview=1))
 
 > 🚨 We're also in the process of updating our examples from the
 > [downshift-docs](https://github.com/downshift-js/downshift-docs) repo which is
@@ -1105,18 +1105,18 @@ platforms:
 
 If you're just learning downshift, review these in order:
 
-0.  [basic automplete with getRootProps](https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/00-get-root-props-example.js) -
+0.  [basic automplete with getRootProps](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F00-get-root-props-example.js%3A11%2C21&moduleview=1) -
     the same as example #1 but using the correct HTML structure as suggested by
     ARIA-WCAG.
-1.  [basic autocomplete](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F01-basic-autocomplete.js&moduleview=1) -
+1.  [basic autocomplete](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F01-basic-autocomplete.js&moduleview=1) -
     very bare bones, not styled at all. Good place to start.
-2.  [styled autocomplete](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F02-complete-autocomplete.js&moduleview=1) -
+2.  [styled autocomplete](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F02-complete-autocomplete.js&moduleview=1) -
     more complete autocomplete solution using emotion for styling and
     match-sorter for filtering the items.
-3.  [typeahead](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F03-typeahead.js&moduleview=1) -
+3.  [typeahead](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F03-typeahead.js&moduleview=1) -
     Shows how to control the `selectedItem` so the selected item can be one of
     your items or whatever the user types.
-4.  [multi-select](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F04-multi-select.js&moduleview=1) -
+4.  [multi-select](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F04-multi-select.js&moduleview=1) -
     Shows how to create a MultiDownshift component that allows for an array of
     selectedItems for multiple selection using a state reducer
 
@@ -1124,16 +1124,16 @@ If you're just learning downshift, review these in order:
 
 Check out these examples of more advanced use/edge cases:
 
-- [dropdown with select by key](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fother-examples%2Fdropdown-select-by-key%2FCustomDropdown%2Findex.js) -
+- [dropdown with select by key](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fother-examples%2Fdropdown-select-by-key%2FCustomDropdown%2Findex.js&moduleview=1) -
   An example of using the render prop pattern to utilize a reusable component to
   provide the downshift dropdown component with the functionality of being able
   to highlight a selection item that starts with the key pressed.
-- [using actions](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fother-examples%2Fusing-actions.js&moduleview=1) -
+- [using actions](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fother-examples%2Fusing-actions.js&moduleview=1) -
   An example of using one of downshift's actions as an event handler.
-- [gmail's composition recipients field](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fother-examples%2Fgmail%2Findex.js&moduleview=1) -
+- [gmail's composition recipients field](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fother-examples%2Fgmail%2Findex.js&moduleview=1) -
   An example of a highly complex autocomplete component featuring asynchronously
   loading items, multiple selection, and windowing (with react-virtualized)
-- [Downshift HOC and Compound Components](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fother-examples%2Fhoc%2Findex.js&moduleview=1) -
+- [Downshift HOC and Compound Components](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fother-examples%2Fhoc%2Findex.js&moduleview=1) -
   An example of how to implementat compound components with
   `React.createContext` and a downshift higher order component. This is
   generally not recommended because the render prop API exported by downshift is
@@ -1144,7 +1144,7 @@ Check out these examples of more advanced use/edge cases:
 
 _🚨 This is a great contribution opportunity!_ These are examples that have not
 yet been migrated to
-[downshift-examples](https://codesandbox.io/s/github/kentcdodds/downshift-examples).
+[downshift-examples](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Findex.js&moduleview=1).
 You're more than welcome to make PRs to the examples repository to move these
 examples over there.
 [Watch this to learn how to contribute completely in the browser](https://www.youtube.com/watch?v=3PAQbhdkTtI&index=2&t=21s&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u)
@@ -1526,8 +1526,8 @@ MIT
   https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
 [docsite]: https://downshift-js.com/
 [code-sandbox-try-it-out]:
-  https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/00-get-root-props-example.js
+  https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F00-get-root-props-example.js&moduleview=1
 [code-sandbox-no-get-root-props]:
-  https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/01-basic-autocomplete.js
+  https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F01-basic-autocomplete.js&moduleview=1
 [migration-guide-v7]:
   https://github.com/downshift-js/downshift/tree/master/src/hooks/MIGRATION_V7.md

package/dist/downshift.cjs.js

@@ -1832,20 +1832,24 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     isTouchMove: false,
     isTouchEnd: false
   });
+
+  // the elements should be retrieved the moment they are required because these are refs - they can be mutated
+  function getDownshiftElements() {
+    return downshiftElementsRefs.map(function (ref) {
+      return ref.current;
+    });
+  }
   React.useEffect(function () {
     if (!environment) {
       return noop;
     }
-    var downshiftElements = downshiftElementsRefs.map(function (ref) {
-      return ref.current;
-    });
     function onMouseDown() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true;
     }
     function onMouseUp(event) {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
-      if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
+      if (!targetWithinDownshift(event.target, getDownshiftElements(), environment)) {
         handleBlur();
       }
     }
@@ -1858,7 +1862,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     }
     function onTouchEnd(event) {
       mouseAndTouchTrackersRef.current.isTouchEnd = true;
-      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
+      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, getDownshiftElements(), environment, false)) {
         handleBlur();
       }
     }
@@ -2470,7 +2474,9 @@ function useSelect(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef];
-  }, [menuRef.current, toggleButtonRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3092,7 +3098,9 @@ function useCombobox(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  }, [menuRef.current, toggleButtonRef.current, inputRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {

package/dist/downshift.esm.js

@@ -1828,20 +1828,24 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     isTouchMove: false,
     isTouchEnd: false
   });
+
+  // the elements should be retrieved the moment they are required because these are refs - they can be mutated
+  function getDownshiftElements() {
+    return downshiftElementsRefs.map(function (ref) {
+      return ref.current;
+    });
+  }
   useEffect(function () {
     if (!environment) {
       return noop;
     }
-    var downshiftElements = downshiftElementsRefs.map(function (ref) {
-      return ref.current;
-    });
     function onMouseDown() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true;
     }
     function onMouseUp(event) {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
-      if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
+      if (!targetWithinDownshift(event.target, getDownshiftElements(), environment)) {
         handleBlur();
       }
     }
@@ -1854,7 +1858,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     }
     function onTouchEnd(event) {
       mouseAndTouchTrackersRef.current.isTouchEnd = true;
-      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
+      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, getDownshiftElements(), environment, false)) {
         handleBlur();
       }
     }
@@ -2466,7 +2470,9 @@ function useSelect(userProps) {
     }
   }, [dispatch, latest]), useMemo(function () {
     return [menuRef, toggleButtonRef];
-  }, [menuRef.current, toggleButtonRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   useEffect(function () {
@@ -3088,7 +3094,9 @@ function useCombobox(userProps) {
     }
   }, [dispatch, latest]), useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  }, [menuRef.current, toggleButtonRef.current, inputRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   useEffect(function () {

package/dist/downshift.native.cjs.js

@@ -2317,7 +2317,9 @@ function useSelect(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef];
-  }, [menuRef.current, toggleButtonRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -2927,7 +2929,9 @@ function useCombobox(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  }, [menuRef.current, toggleButtonRef.current, inputRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {

package/dist/downshift.nativeweb.cjs.js

@@ -1827,20 +1827,24 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     isTouchMove: false,
     isTouchEnd: false
   });
+
+  // the elements should be retrieved the moment they are required because these are refs - they can be mutated
+  function getDownshiftElements() {
+    return downshiftElementsRefs.map(function (ref) {
+      return ref.current;
+    });
+  }
   React.useEffect(function () {
     if (!environment) {
       return noop;
     }
-    var downshiftElements = downshiftElementsRefs.map(function (ref) {
-      return ref.current;
-    });
     function onMouseDown() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true;
     }
     function onMouseUp(event) {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
-      if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
+      if (!targetWithinDownshift(event.target, getDownshiftElements(), environment)) {
         handleBlur();
       }
     }
@@ -1853,7 +1857,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     }
     function onTouchEnd(event) {
       mouseAndTouchTrackersRef.current.isTouchEnd = true;
-      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
+      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, getDownshiftElements(), environment, false)) {
         handleBlur();
       }
     }
@@ -2465,7 +2469,9 @@ function useSelect(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef];
-  }, [menuRef.current, toggleButtonRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3075,7 +3081,9 @@ function useCombobox(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  }, [menuRef.current, toggleButtonRef.current, inputRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {

package/dist/downshift.umd.js

@@ -3169,20 +3169,24 @@
       isTouchMove: false,
       isTouchEnd: false
     });
+
+    // the elements should be retrieved the moment they are required because these are refs - they can be mutated
+    function getDownshiftElements() {
+      return downshiftElementsRefs.map(function (ref) {
+        return ref.current;
+      });
+    }
     React.useEffect(function () {
       if (!environment) {
         return noop;
       }
-      var downshiftElements = downshiftElementsRefs.map(function (ref) {
-        return ref.current;
-      });
       function onMouseDown() {
         mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
         mouseAndTouchTrackersRef.current.isMouseDown = true;
       }
       function onMouseUp(event) {
         mouseAndTouchTrackersRef.current.isMouseDown = false;
-        if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
+        if (!targetWithinDownshift(event.target, getDownshiftElements(), environment)) {
           handleBlur();
         }
       }
@@ -3195,7 +3199,7 @@
       }
       function onTouchEnd(event) {
         mouseAndTouchTrackersRef.current.isTouchEnd = true;
-        if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
+        if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, getDownshiftElements(), environment, false)) {
           handleBlur();
         }
       }
@@ -3840,7 +3844,9 @@
       }
     }, [dispatch, latest]), React.useMemo(function () {
       return [menuRef, toggleButtonRef];
-    }, [menuRef.current, toggleButtonRef.current]));
+    },
+    // dependencies can be left empty because refs are getting mutated
+    []));
     var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
     // Reset itemRefs on close.
     React.useEffect(function () {
@@ -4462,7 +4468,9 @@
       }
     }, [dispatch, latest]), React.useMemo(function () {
       return [menuRef, toggleButtonRef, inputRef];
-    }, [menuRef.current, toggleButtonRef.current, inputRef.current]));
+    },
+    // dependencies can be left empty because refs are getting mutated
+    []));
     var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
     // Reset itemRefs on close.
     React.useEffect(function () {