downshift 9.0.11 → 9.0.13

package/dist/downshift.cjs.js

@@ -1616,16 +1616,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 } : function useElementIds(_ref2) {
   var _ref2$id = _ref2.id,
     id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
@@ -1634,16 +1636,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     getItemId = _ref2.getItemId,
     toggleButtonId = _ref2.toggleButtonId,
     inputId = _ref2.inputId;
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 };
 function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   var item, index;
@@ -1826,19 +1830,17 @@ function getHighlightedIndexOnOpen(props, state, offset) {
  * @param {Array<{current: HTMLElement}>} downshiftElementsRefs The refs for the elements that should not trigger a blur action from mouseDown or touchEnd.
  * @returns {{isMouseDown: boolean, isTouchMove: boolean, isTouchEnd: boolean}} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs) {
+function useMouseAndTouchTracker(environment, handleBlur, downshiftRefs) {
   var mouseAndTouchTrackersRef = React.useRef({
     isMouseDown: false,
     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) {
+  var getDownshiftElements = React.useCallback(function () {
+    return downshiftRefs.map(function (ref) {
       return ref.current;
     });
-  }
+  }, [downshiftRefs]);
   React.useEffect(function () {
     if (!environment) {
       return noop;
@@ -1878,7 +1880,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
       environment.removeEventListener('touchmove', onTouchMove);
       environment.removeEventListener('touchend', onTouchEnd);
     };
-  }, [downshiftElementsRefs, environment, handleBlur]);
+  }, [environment, getDownshiftElements, handleBlur]);
   return mouseAndTouchTrackersRef.current;
 }
 
@@ -2466,17 +2468,17 @@ function useSelect(userProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, React.useCallback(function handleBlur() {
+  var handleBlurInTracker = React.useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
         type: ToggleButtonBlur
       });
     }
-  }, [dispatch, latest]), React.useMemo(function () {
+  }, [dispatch, latest]);
+  var downshiftRefs = React.useMemo(function () {
     return [menuRef, toggleButtonRef];
-  },
-  // dependencies can be left empty because refs are getting mutated
-  []));
+  }, []);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, handleBlurInTracker, downshiftRefs);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3089,18 +3091,17 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, React.useCallback(function handleBlur() {
+  var handleBlurInTracker = React.useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
-        type: InputBlur,
-        selectItem: false
+        type: InputBlur
       });
     }
-  }, [dispatch, latest]), React.useMemo(function () {
+  }, [dispatch, latest]);
+  var downshiftRefs = React.useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  },
-  // dependencies can be left empty because refs are getting mutated
-  []));
+  }, []);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, handleBlurInTracker, downshiftRefs);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {

package/dist/downshift.esm.js

@@ -2,7 +2,7 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWith
 import _extends from '@babel/runtime/helpers/esm/extends';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import PropTypes from 'prop-types';
-import React, { cloneElement, Component, useRef, useEffect, useLayoutEffect, useCallback, useReducer, useMemo } from 'react';
+import React, { cloneElement, Component, useMemo, useRef, useEffect, useLayoutEffect, useCallback, useReducer } from 'react';
 import { isForwardRef } from 'react-is';
 import { compute } from 'compute-scroll-into-view';
 import { __assign } from 'tslib';
@@ -1612,16 +1612,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 } : function useElementIds(_ref2) {
   var _ref2$id = _ref2.id,
     id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
@@ -1630,16 +1632,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     getItemId = _ref2.getItemId,
     toggleButtonId = _ref2.toggleButtonId,
     inputId = _ref2.inputId;
-  var elementIdsRef = useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 };
 function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   var item, index;
@@ -1822,19 +1826,17 @@ function getHighlightedIndexOnOpen(props, state, offset) {
  * @param {Array<{current: HTMLElement}>} downshiftElementsRefs The refs for the elements that should not trigger a blur action from mouseDown or touchEnd.
  * @returns {{isMouseDown: boolean, isTouchMove: boolean, isTouchEnd: boolean}} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs) {
+function useMouseAndTouchTracker(environment, handleBlur, downshiftRefs) {
   var mouseAndTouchTrackersRef = useRef({
     isMouseDown: false,
     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) {
+  var getDownshiftElements = useCallback(function () {
+    return downshiftRefs.map(function (ref) {
       return ref.current;
     });
-  }
+  }, [downshiftRefs]);
   useEffect(function () {
     if (!environment) {
       return noop;
@@ -1874,7 +1876,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
       environment.removeEventListener('touchmove', onTouchMove);
       environment.removeEventListener('touchend', onTouchEnd);
     };
-  }, [downshiftElementsRefs, environment, handleBlur]);
+  }, [environment, getDownshiftElements, handleBlur]);
   return mouseAndTouchTrackersRef.current;
 }
 
@@ -2462,17 +2464,17 @@ function useSelect(userProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, useCallback(function handleBlur() {
+  var handleBlurInTracker = useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
         type: ToggleButtonBlur
       });
     }
-  }, [dispatch, latest]), useMemo(function () {
+  }, [dispatch, latest]);
+  var downshiftRefs = useMemo(function () {
     return [menuRef, toggleButtonRef];
-  },
-  // dependencies can be left empty because refs are getting mutated
-  []));
+  }, []);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, handleBlurInTracker, downshiftRefs);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   useEffect(function () {
@@ -3085,18 +3087,17 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, useCallback(function handleBlur() {
+  var handleBlurInTracker = useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
-        type: InputBlur,
-        selectItem: false
+        type: InputBlur
       });
     }
-  }, [dispatch, latest]), useMemo(function () {
+  }, [dispatch, latest]);
+  var downshiftRefs = useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  },
-  // dependencies can be left empty because refs are getting mutated
-  []));
+  }, []);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, handleBlurInTracker, downshiftRefs);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   useEffect(function () {

package/dist/downshift.native.cjs.js

@@ -1506,16 +1506,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 } : function useElementIds(_ref2) {
   var _ref2$id = _ref2.id,
     id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
@@ -1524,16 +1526,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     getItemId = _ref2.getItemId,
     toggleButtonId = _ref2.toggleButtonId,
     inputId = _ref2.inputId;
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 };
 function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   var item, index;
@@ -1713,17 +1717,22 @@ function getHighlightedIndexOnOpen(props, state, offset) {
  * @param {Array<{current: HTMLElement}>} downshiftElementsRefs The refs for the elements that should not trigger a blur action from mouseDown or touchEnd.
  * @returns {{isMouseDown: boolean, isTouchMove: boolean, isTouchEnd: boolean}} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs) {
+function useMouseAndTouchTracker(environment, handleBlur, downshiftRefs) {
   var mouseAndTouchTrackersRef = React.useRef({
     isMouseDown: false,
     isTouchMove: false,
     isTouchEnd: false
   });
+  var getDownshiftElements = React.useCallback(function () {
+    return downshiftRefs.map(function (ref) {
+      return ref.current;
+    });
+  }, [downshiftRefs]);
   React.useEffect(function () {
     {
       return noop;
     }
-  }, [downshiftElementsRefs, environment, handleBlur]);
+  }, [environment, getDownshiftElements, handleBlur]);
   return mouseAndTouchTrackersRef.current;
 }
 
@@ -2309,17 +2318,17 @@ function useSelect(userProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, React.useCallback(function handleBlur() {
+  var handleBlurInTracker = React.useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
         type: ToggleButtonBlur
       });
     }
-  }, [dispatch, latest]), React.useMemo(function () {
+  }, [dispatch, latest]);
+  var downshiftRefs = React.useMemo(function () {
     return [menuRef, toggleButtonRef];
-  },
-  // dependencies can be left empty because refs are getting mutated
-  []));
+  }, []);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, handleBlurInTracker, downshiftRefs);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -2920,18 +2929,17 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, React.useCallback(function handleBlur() {
+  var handleBlurInTracker = React.useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
-        type: InputBlur,
-        selectItem: false
+        type: InputBlur
       });
     }
-  }, [dispatch, latest]), React.useMemo(function () {
+  }, [dispatch, latest]);
+  var downshiftRefs = React.useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  },
-  // dependencies can be left empty because refs are getting mutated
-  []));
+  }, []);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, handleBlurInTracker, downshiftRefs);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {

package/dist/downshift.nativeweb.cjs.js

@@ -1614,16 +1614,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 } : function useElementIds(_ref2) {
   var _ref2$id = _ref2.id,
     id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
@@ -1632,16 +1634,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     getItemId = _ref2.getItemId,
     toggleButtonId = _ref2.toggleButtonId,
     inputId = _ref2.inputId;
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 };
 function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   var item, index;
@@ -1821,19 +1825,17 @@ function getHighlightedIndexOnOpen(props, state, offset) {
  * @param {Array<{current: HTMLElement}>} downshiftElementsRefs The refs for the elements that should not trigger a blur action from mouseDown or touchEnd.
  * @returns {{isMouseDown: boolean, isTouchMove: boolean, isTouchEnd: boolean}} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs) {
+function useMouseAndTouchTracker(environment, handleBlur, downshiftRefs) {
   var mouseAndTouchTrackersRef = React.useRef({
     isMouseDown: false,
     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) {
+  var getDownshiftElements = React.useCallback(function () {
+    return downshiftRefs.map(function (ref) {
       return ref.current;
     });
-  }
+  }, [downshiftRefs]);
   React.useEffect(function () {
     if (!environment) {
       return noop;
@@ -1873,7 +1875,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
       environment.removeEventListener('touchmove', onTouchMove);
       environment.removeEventListener('touchend', onTouchEnd);
     };
-  }, [downshiftElementsRefs, environment, handleBlur]);
+  }, [environment, getDownshiftElements, handleBlur]);
   return mouseAndTouchTrackersRef.current;
 }
 
@@ -2461,17 +2463,17 @@ function useSelect(userProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, React.useCallback(function handleBlur() {
+  var handleBlurInTracker = React.useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
         type: ToggleButtonBlur
       });
     }
-  }, [dispatch, latest]), React.useMemo(function () {
+  }, [dispatch, latest]);
+  var downshiftRefs = React.useMemo(function () {
     return [menuRef, toggleButtonRef];
-  },
-  // dependencies can be left empty because refs are getting mutated
-  []));
+  }, []);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, handleBlurInTracker, downshiftRefs);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3072,18 +3074,17 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, React.useCallback(function handleBlur() {
+  var handleBlurInTracker = React.useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
-        type: InputBlur,
-        selectItem: false
+        type: InputBlur
       });
     }
-  }, [dispatch, latest]), React.useMemo(function () {
+  }, [dispatch, latest]);
+  var downshiftRefs = React.useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  },
-  // dependencies can be left empty because refs are getting mutated
-  []));
+  }, []);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, handleBlurInTracker, downshiftRefs);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {