downshift 9.4.0-alpha.2 → 9.4.0

package/dist/downshift.esm.mjs

@@ -68,14 +68,18 @@ function resetIdCounter() {
   idCounter = 0;
 }
 
-function useLatestRef(val) {
-  var ref = React.useRef(val);
-  // technically this is not "concurrent mode safe" because we're manipulating
-  // the value during render (so it's not idempotent). However, the places this
-  // hook is used is to support memoizing callbacks which will be called
-  // *during* render, so we need the latest values *during* render.
-  // If not for this, then we'd probably want to use useLayoutEffect instead.
-  ref.current = val;
+// istanbul ignore next
+var canUseDOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+// React Native supports layout effects even though it does not have a DOM.
+// istanbul ignore next
+var useIsomorphicLayoutEffect = canUseDOM || false ? React.useLayoutEffect : React.useEffect;
+
+function useLatestRef(value) {
+  var ref = React.useRef(value);
+  useIsomorphicLayoutEffect(function () {
+    ref.current = value;
+  }, [value]);
   return ref;
 }
 
@@ -1602,18 +1606,27 @@ function invokeOnChangeHandler(key, action, props, state, newState) {
  */
 function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
   var prevStateRef = React.useRef({});
-  var actionRef = React.useRef();
-  var enhancedReducer = React.useCallback(function (state, action) {
-    actionRef.current = action;
+  var enhancedReducer = React.useCallback(function (_ref, action) {
+    var state = _ref.state;
     state = getState(state, action.props);
     var changes = reducer(state, action);
     var newState = action.props.stateReducer(state, _extends({}, action, {
       changes: changes
     }));
-    return _extends({}, state, newState);
+    return {
+      state: _extends({}, state, newState),
+      lastAction: action
+    };
   }, [reducer]);
-  var _React$useReducer = React.useReducer(enhancedReducer, props, createInitialState),
-    state = _React$useReducer[0],
+  var _React$useReducer = React.useReducer(enhancedReducer, props, function (p) {
+      return {
+        state: createInitialState(p),
+        lastAction: undefined
+      };
+    }),
+    _React$useReducer$ = _React$useReducer[0],
+    state = _React$useReducer$.state,
+    lastAction = _React$useReducer$.lastAction,
     dispatch = _React$useReducer[1];
   var propsRef = useLatestRef(props);
   var dispatchWithProps = React.useCallback(function (action) {
@@ -1621,15 +1634,16 @@ function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
       props: propsRef.current
     }));
   }, [propsRef]);
-  var action = actionRef.current;
   React.useEffect(function () {
-    var prevState = getState(prevStateRef.current, action == null ? void 0 : action.props);
-    var shouldCallOnChangeProps = action && !isStateEqual(prevState, state);
-    if (shouldCallOnChangeProps) {
-      callOnChangeProps(action, action.props, prevState, state);
+    if (lastAction) {
+      var prevState = getState(prevStateRef.current, lastAction.props);
+      var shouldCallOnChangeProps = !isStateEqual(prevState, state);
+      if (shouldCallOnChangeProps) {
+        callOnChangeProps(lastAction, lastAction.props, prevState, state);
+      }
     }
     prevStateRef.current = state;
-  }, [state, action, isStateEqual]);
+  }, [state, lastAction, isStateEqual]);
   return [state, dispatchWithProps];
 }
 
@@ -1690,6 +1704,8 @@ function useIsInitialMount() {
       isInitialMountRef.current = true;
     };
   }, []);
+
+  // eslint-disable-next-line react-hooks/refs
   return isInitialMountRef.current;
 }
 
@@ -1869,8 +1885,10 @@ function useElementIdsLegacy$1(_ref2) {
     getItemId = _ref2.getItemId,
     toggleButtonId = _ref2.toggleButtonId,
     inputId = _ref2.inputId;
-  var baseIdRef = React.useRef(id != null ? id : "downshift-" + generateId());
-  var baseId = baseIdRef.current;
+  var _React$useState = React.useState(function () {
+      return id != null ? id : "downshift-" + generateId();
+    }),
+    baseId = _React$useState[0];
   var elementIds = React.useMemo(function () {
     return {
       labelId: labelId != null ? labelId : baseId + "-label",
@@ -1944,10 +1962,10 @@ function getHighlightedIndexOnOpen(items, initialHighlightedIndex, defaultHighli
   }
 
   // initialHighlightedIndex will give value to highlightedIndex on initial state only.
-  if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex && items[initialHighlightedIndex] && !isItemDisabled(items[initialHighlightedIndex], initialHighlightedIndex)) {
+  if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex && (initialHighlightedIndex === -1 || items[initialHighlightedIndex] !== undefined && !isItemDisabled(items[initialHighlightedIndex], initialHighlightedIndex))) {
     return initialHighlightedIndex;
   }
-  if (defaultHighlightedIndex !== undefined && items[defaultHighlightedIndex] && !isItemDisabled(items[defaultHighlightedIndex], defaultHighlightedIndex)) {
+  if (defaultHighlightedIndex !== undefined && (defaultHighlightedIndex === -1 || items[defaultHighlightedIndex] !== undefined && !isItemDisabled(items[defaultHighlightedIndex], defaultHighlightedIndex))) {
     return defaultHighlightedIndex;
   }
   if (selectedItem) {
@@ -2019,7 +2037,7 @@ if (process.env.NODE_ENV !== 'production') {
  * @param environment The environment to add the event listeners to, for instance window.
  * @param handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
  * @param downshiftRefs The refs for the elements that should not trigger a blur action from mouseDown or touchEnd.
- * @returns The mouse and touch events information.
+ * @returns A ref holding the mouse and touch events information. Read `.current` only inside event handlers/effects.
  */
 function useMouseAndTouchTracker(environment, handleBlur, downshiftRefs) {
   var mouseAndTouchTrackersRef = React.useRef({
@@ -2072,7 +2090,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftRefs) {
       environment.removeEventListener('touchend', onTouchEnd);
     };
   }, [environment, getDownshiftElements, handleBlur]);
-  return mouseAndTouchTrackersRef.current;
+  return mouseAndTouchTrackersRef;
 }
 
 /* istanbul ignore next */
@@ -2127,31 +2145,28 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
-// istanbul ignore next
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 /**
  * Utility hook that scrolls an item from a menu into view.
  * @param scrollIntoView The function that does the scroll.
  * @param highlightedIndex The index of the item that should be scrolled.
  * @param isOpen If the menu is open or not.
- * @param menuElement The menu element.
- * @param itemElements The object containing item elements.
+ * @param menuRef The ref to the menu element.
+ * @param itemsRef The ref to the object containing item elements.
  * @param getItemId The function to get the item id from index.
  * @returns Function that when called prevents the scroll.
  */
-function useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuElement, itemElements, getItemId) {
+function useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuRef, itemsRef, getItemId) {
   // used not to scroll on highlight by mouse.
   var shouldScrollRef = React.useRef(true);
   // Scroll on highlighted item if change comes from keyboard.
   useIsomorphicLayoutEffect(function () {
-    if (highlightedIndex < 0 || !isOpen || !Object.keys(itemElements).length) {
+    if (highlightedIndex < 0 || !isOpen || !Object.keys(itemsRef.current).length) {
       return;
     }
     if (shouldScrollRef.current) {
-      var itemElement = itemElements[getItemId(highlightedIndex)];
-      if (itemElement && menuElement) {
-        scrollIntoView(itemElement, menuElement);
+      var itemElement = itemsRef.current[getItemId(highlightedIndex)];
+      if (itemElement && menuRef.current) {
+        scrollIntoView(itemElement, menuRef.current);
       }
     } else {
       shouldScrollRef.current = true;
@@ -2419,7 +2434,7 @@ function downshiftSelectReducer(state, action) {
 
 var _excluded$3 = ["onClick"],
   _excluded2$3 = ["onMouseLeave", "refKey", "ref", "aria-label"],
-  _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref", "disabled"],
+  _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
   _excluded4$1 = ["item", "index", "onMouseMove", "onClick", "onMouseDown", "onPress", "refKey", "disabled", "ref"];
 useSelect.stateChangeTypes = stateChangeTypes$3;
 function useSelect(userProps) {
@@ -2429,7 +2444,9 @@ function useSelect(userProps) {
   validatePropTypes$1(userProps, useSelect, propTypes$3);
   // Props defaults and destructuring.
   var props = _extends({}, dropdownDefaultProps, userProps);
-  var scrollIntoView = props.scrollIntoView,
+  var items = props.items,
+    isItemDisabled = props.isItemDisabled,
+    scrollIntoView = props.scrollIntoView,
     environment = props.environment,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
@@ -2450,17 +2467,18 @@ function useSelect(userProps) {
   var clearTimeoutRef = useRef(null);
   // prevent id re-generation between renders.
   var elementIds = useElementIds$1(props);
-  // utility callback to get item element.
-  var latest = useLatestRef({
-    state: state,
-    props: props
-  });
+  /**
+   * Ref to read `state` in handlers to preserve referential identity.
+   * Only to be used in handlers and effects.
+   * **never access this in getters**
+   */
+  var stateRef = useLatestRef(state);
 
   // Effects.
   // Adds an a11y aria live status message if getA11yStatusMessage is passed.
   useA11yMessageStatus(getA11yStatusMessage, state, [isOpen, highlightedIndex, selectedItem, inputValue], environment);
   // Scroll on highlighted item if change comes from keyboard.
-  var preventScroll = useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuRef.current, itemsRef.current, elementIds.getItemId);
+  var preventScroll = useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuRef, itemsRef, elementIds.getItemId);
   // Sets cleanup for the keysSoFar callback, debounced after 500ms.
   useEffect(function () {
     // init the clean function here as we need access to dispatch.
@@ -2497,12 +2515,12 @@ function useSelect(userProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var handleBlurInTracker = useCallback(function handleBlur() {
-    if (latest.current.state.isOpen) {
+    if (stateRef.current.isOpen) {
       dispatch({
         type: ToggleButtonBlur
       });
     }
-  }, [dispatch, latest]);
+  }, [dispatch, stateRef]);
   var downshiftRefs = useMemo(function () {
     return [menuRef, toggleButtonRef];
   }, []);
@@ -2545,7 +2563,7 @@ function useSelect(userProps) {
         });
       },
       Escape: function Escape() {
-        if (latest.current.state.isOpen) {
+        if (stateRef.current.isOpen) {
           dispatch({
             type: ToggleButtonKeyDownEscape
           });
@@ -2554,11 +2572,11 @@ function useSelect(userProps) {
       Enter: function Enter(event) {
         event.preventDefault();
         dispatch({
-          type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
+          type: stateRef.current.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
         });
       },
       PageUp: function PageUp(event) {
-        if (latest.current.state.isOpen) {
+        if (stateRef.current.isOpen) {
           event.preventDefault();
           dispatch({
             type: ToggleButtonKeyDownPageUp
@@ -2566,7 +2584,7 @@ function useSelect(userProps) {
         }
       },
       PageDown: function PageDown(event) {
-        if (latest.current.state.isOpen) {
+        if (stateRef.current.isOpen) {
           event.preventDefault();
           dispatch({
             type: ToggleButtonKeyDownPageDown
@@ -2575,7 +2593,7 @@ function useSelect(userProps) {
       },
       ' ': function _(event) {
         event.preventDefault();
-        var currentState = latest.current.state;
+        var currentState = stateRef.current;
         if (!currentState.isOpen) {
           dispatch({
             type: ToggleButtonClick$1
@@ -2594,7 +2612,7 @@ function useSelect(userProps) {
         }
       }
     };
-  }, [dispatch, latest]);
+  }, [dispatch, stateRef]);
 
   // Getter functions.
   var getLabelProps = useCallback(function (labelProps) {
@@ -2643,19 +2661,17 @@ function useSelect(userProps) {
       _ref4$refKey = _ref4.refKey,
       refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
       ref = _ref4.ref,
-      disabled = _ref4.disabled,
       rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
     var _ref5 = otherProps != null ? otherProps : {},
       _ref5$suppressRefErro = _ref5.suppressRefError,
       suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
-    var latestState = latest.current.state;
     var toggleButtonHandleClick = function toggleButtonHandleClick() {
       dispatch({
         type: ToggleButtonClick$1
       });
     };
     var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
-      if (latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
+      if (stateRef.current.isOpen && !mouseAndTouchTrackers.current.isMouseDown) {
         dispatch({
           type: ToggleButtonBlur
         });
@@ -2674,8 +2690,8 @@ function useSelect(userProps) {
     };
     var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
       toggleButtonRef.current = toggleButtonNode;
-    }), _extends3['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends3['aria-controls'] = elementIds.menuId, _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-labelledby'] = rest['aria-label'] ? undefined : "" + elementIds.labelId, _extends3.id = elementIds.toggleButtonId, _extends3.role = 'combobox', _extends3.tabIndex = 0, _extends3.onBlur = callAllEventHandlers(onBlur, toggleButtonHandleBlur), _extends3.disabled = disabled, _extends3), rest);
-    if (!disabled) {
+    }), _extends3['aria-activedescendant'] = isOpen && highlightedIndex > -1 ? elementIds.getItemId(highlightedIndex) : '', _extends3['aria-controls'] = elementIds.menuId, _extends3['aria-expanded'] = isOpen, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-labelledby'] = rest['aria-label'] ? undefined : "" + elementIds.labelId, _extends3.id = elementIds.toggleButtonId, _extends3.role = 'combobox', _extends3.tabIndex = 0, _extends3.onBlur = callAllEventHandlers(onBlur, toggleButtonHandleBlur), _extends3), rest);
+    if (!rest.disabled) {
       /* istanbul ignore if (react-native) */
       {
         Object.assign(toggleProps, {
@@ -2686,7 +2702,7 @@ function useSelect(userProps) {
     }
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
-  }, [dispatch, elementIds, latest, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers]);
+  }, [dispatch, elementIds, isOpen, highlightedIndex, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers, stateRef]);
   var getItemProps = useCallback(function (itemProps) {
     var _extends4;
     var _ref6 = itemProps != null ? itemProps : {},
@@ -2704,15 +2720,12 @@ function useSelect(userProps) {
     if (disabledProp !== undefined) {
       console.warn('Passing "disabled" as an argument to getItemProps is not supported anymore. Please use the isItemDisabled prop from useSelect.');
     }
-    var _latest$current = latest.current,
-      latestState = _latest$current.state,
-      latestProps = _latest$current.props;
-    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, items, 'Pass either item or index to getItemProps!'),
       item = _getItemAndIndex[0],
       index = _getItemAndIndex[1];
-    var disabled = latestProps.isItemDisabled(item, index);
+    var disabled = isItemDisabled(item, index);
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackers.current.isTouchEnd || index === stateRef.current.highlightedIndex) {
         return;
       }
       preventScroll();
@@ -2736,7 +2749,7 @@ function useSelect(userProps) {
       if (itemNode) {
         itemsRef.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends4['aria-disabled'] = disabled, _extends4['aria-selected'] = item === latestState.selectedItem, _extends4.id = elementIds.getItemId(index), _extends4.role = 'option', _extends4.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove), _extends4.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown), _extends4), rest);
+    }), _extends4['aria-disabled'] = disabled, _extends4['aria-selected'] = item === selectedItem, _extends4.id = elementIds.getItemId(index), _extends4.role = 'option', _extends4.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove), _extends4.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown), _extends4), rest);
     if (!disabled) {
       /* istanbul ignore next (react-native) */
       {
@@ -2746,7 +2759,7 @@ function useSelect(userProps) {
       }
     }
     return resultItemProps;
-  }, [latest, elementIds, mouseAndTouchTrackers, preventScroll, dispatch]);
+  }, [items, isItemDisabled, selectedItem, elementIds, mouseAndTouchTrackers, preventScroll, dispatch, stateRef]);
 
   // Action functions.
   var toggleMenu = useCallback(function () {
@@ -3037,8 +3050,8 @@ function downshiftUseComboboxReducer(state, action) {
 
 var _excluded$2 = ["onMouseLeave", "refKey", "ref", "aria-label"],
   _excluded2$2 = ["item", "index", "refKey", "ref", "onMouseMove", "onMouseDown", "onClick", "onPress", "disabled"],
-  _excluded3$1 = ["onClick", "onPress", "refKey", "ref", "disabled"],
-  _excluded4 = ["aria-label", "disabled", "onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "onClick", "refKey", "ref"];
+  _excluded3$1 = ["onClick", "onPress", "refKey", "ref"],
+  _excluded4 = ["aria-label", "onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "onClick", "refKey", "ref"];
 useCombobox.stateChangeTypes = stateChangeTypes$2;
 function useCombobox(userProps) {
   if (userProps === void 0) {
@@ -3048,6 +3061,7 @@ function useCombobox(userProps) {
   // Props defaults and destructuring.
   var props = _extends({}, dropdownDefaultProps, userProps);
   var items = props.items,
+    isItemDisabled = props.isItemDisabled,
     scrollIntoView = props.scrollIntoView,
     environment = props.environment,
     getA11yStatusMessage = props.getA11yStatusMessage;
@@ -3071,17 +3085,18 @@ function useCombobox(userProps) {
   var elementIds = useElementIds$1(props);
   // used to keep track of how many items we had on previous cycle.
   var previousResultCountRef = useRef();
-  // utility callback to get item element.
-  var latest = useLatestRef({
-    state: state,
-    props: props
-  });
+  /**
+   * Ref to read `state` in handlers to preserve referential identity.
+   * Only to be used in handlers and effects.
+   * **never access this in getters**
+   */
+  var stateRef = useLatestRef(state);
 
   // Effects.
   // Adds an a11y aria live status message if getA11yStatusMessage is passed.
   useA11yMessageStatus(getA11yStatusMessage, state, [isOpen, highlightedIndex, selectedItem, inputValue], environment);
   // Scroll on highlighted item if change comes from keyboard.
-  var preventScroll = useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuRef.current, itemsRef.current, elementIds.getItemId);
+  var preventScroll = useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuRef, itemsRef, elementIds.getItemId);
   useControlPropsValidator({
     state: state,
     props: props
@@ -3100,12 +3115,12 @@ function useCombobox(userProps) {
     }
   });
   var handleBlurInTracker = useCallback(function handleBlur() {
-    if (latest.current.state.isOpen) {
+    if (stateRef.current.isOpen) {
       dispatch({
         type: InputBlur
       });
     }
-  }, [dispatch, latest]);
+  }, [dispatch, stateRef]);
   var downshiftRefs = useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
   }, []);
@@ -3146,7 +3161,7 @@ function useCombobox(userProps) {
         });
       },
       Home: function Home(event) {
-        if (!latest.current.state.isOpen) {
+        if (!stateRef.current.isOpen) {
           return;
         }
         event.preventDefault();
@@ -3155,7 +3170,7 @@ function useCombobox(userProps) {
         });
       },
       End: function End(event) {
-        if (!latest.current.state.isOpen) {
+        if (!stateRef.current.isOpen) {
           return;
         }
         event.preventDefault();
@@ -3164,7 +3179,7 @@ function useCombobox(userProps) {
         });
       },
       Escape: function Escape(event) {
-        var latestState = latest.current.state;
+        var latestState = stateRef.current;
         if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
           event.preventDefault();
           dispatch({
@@ -3173,7 +3188,7 @@ function useCombobox(userProps) {
         }
       },
       Enter: function Enter(event) {
-        var latestState = latest.current.state;
+        var latestState = stateRef.current;
         // if closed or no highlighted index, do nothing.
         if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event.
         ) {
@@ -3185,7 +3200,7 @@ function useCombobox(userProps) {
         });
       },
       PageUp: function PageUp(event) {
-        if (latest.current.state.isOpen) {
+        if (stateRef.current.isOpen) {
           event.preventDefault();
           dispatch({
             type: InputKeyDownPageUp
@@ -3193,7 +3208,7 @@ function useCombobox(userProps) {
         }
       },
       PageDown: function PageDown(event) {
-        if (latest.current.state.isOpen) {
+        if (stateRef.current.isOpen) {
           event.preventDefault();
           dispatch({
             type: InputKeyDownPageDown
@@ -3201,7 +3216,7 @@ function useCombobox(userProps) {
         }
       }
     };
-  }, [dispatch, latest]);
+  }, [dispatch, stateRef]);
 
   // Getter props.
   var getLabelProps = useCallback(function (labelProps) {
@@ -3248,17 +3263,14 @@ function useCombobox(userProps) {
     if (disabledProp !== undefined) {
       console.warn('Passing "disabled" as an argument to getItemProps is not supported anymore. Please use the isItemDisabled prop from useCombobox.');
     }
-    var _latest$current = latest.current,
-      latestProps = _latest$current.props,
-      latestState = _latest$current.state;
-    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, items, 'Pass either item or index to getItemProps!'),
       item = _getItemAndIndex[0],
       index = _getItemAndIndex[1];
-    var disabled = latestProps.isItemDisabled(item, index);
+    var disabled = isItemDisabled(item, index);
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
-      if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
+      if (mouseAndTouchTrackers.current.isTouchEnd || index === stateRef.current.highlightedIndex) {
         return;
       }
       preventScroll();
@@ -3282,11 +3294,11 @@ function useCombobox(userProps) {
       if (itemNode) {
         itemsRef.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends3['aria-disabled'] = disabled, _extends3['aria-selected'] = index === latestState.highlightedIndex, _extends3.id = elementIds.getItemId(index), _extends3.role = 'option', _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+    }), _extends3['aria-disabled'] = disabled, _extends3['aria-selected'] = index === highlightedIndex, _extends3.id = elementIds.getItemId(index), _extends3.role = 'option', _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
-  }, [dispatch, elementIds, latest, mouseAndTouchTrackers, preventScroll]);
+  }, [dispatch, elementIds, items, isItemDisabled, highlightedIndex, mouseAndTouchTrackers, preventScroll, stateRef]);
   var getToggleButtonProps = useCallback(function (toggleButtonProps) {
     var _extends4;
     var _ref5 = toggleButtonProps != null ? toggleButtonProps : {},
@@ -3295,9 +3307,7 @@ function useCombobox(userProps) {
       var _ref5$refKey = _ref5.refKey,
       refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
       ref = _ref5.ref,
-      disabled = _ref5.disabled,
       rest = _objectWithoutPropertiesLoose(_ref5, _excluded3$1);
-    var latestState = latest.current.state;
     var toggleButtonHandleClick = function toggleButtonHandleClick() {
       dispatch({
         type: ToggleButtonClick
@@ -3305,17 +3315,14 @@ function useCombobox(userProps) {
     };
     return _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
       toggleButtonRef.current = toggleButtonNode;
-    }), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !disabled && _extends({}, {
+    }), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends({}, {
       onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
-    }), {
-      disabled: disabled
-    }, rest);
-  }, [dispatch, latest, elementIds]);
+    }), rest);
+  }, [dispatch, isOpen, elementIds]);
   var getInputProps = useCallback(function (inputProps, otherProps) {
     var _extends5;
     var _ref6 = inputProps != null ? inputProps : {},
       ariaLabel = _ref6['aria-label'],
-      disabled = _ref6.disabled,
       onKeyDown = _ref6.onKeyDown,
       onChange = _ref6.onChange,
       onInput = _ref6.onInput,
@@ -3330,7 +3337,6 @@ function useCombobox(userProps) {
       _ref7$suppressRefErro = _ref7.suppressRefError,
       suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
     setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
-    var latestState = latest.current.state;
     var inputHandleKeyDown = function inputHandleKeyDown(event) {
       var key = normalizeArrowKey(event);
       if (key && key in inputKeyDownHandlers) {
@@ -3346,7 +3352,7 @@ function useCombobox(userProps) {
     };
     var inputHandleBlur = function inputHandleBlur(event) {
       /* istanbul ignore else */
-      if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
+      if (environment != null && environment.document && stateRef.current.isOpen && !mouseAndTouchTrackers.current.isMouseDown) {
         var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body;
         dispatch({
           type: InputBlur,
@@ -3363,14 +3369,14 @@ function useCombobox(userProps) {
     /* istanbul ignore next (preact) */
     var onChangeKey = 'onChange';
     var eventHandlers = {};
-    if (!disabled) {
+    if (!rest.disabled) {
       var _eventHandlers;
       eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers.onClick = callAllEventHandlers(onClick, inputHandleClick), _eventHandlers);
     }
     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'] = ariaLabel ? undefined : elementIds.labelId, _extends5['aria-label'] = ariaLabel, _extends5.autoComplete = 'off', _extends5.disabled = disabled, _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
-  }, [dispatch, elementIds, environment, inputKeyDownHandlers, latest, mouseAndTouchTrackers, setGetterPropCallInfo]);
+    }), _extends5['aria-activedescendant'] = isOpen && highlightedIndex > -1 ? elementIds.getItemId(highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = isOpen, _extends5['aria-labelledby'] = ariaLabel ? undefined : elementIds.labelId, _extends5['aria-label'] = ariaLabel, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = inputValue, _extends5), eventHandlers, rest);
+  }, [dispatch, elementIds, environment, inputKeyDownHandlers, isOpen, highlightedIndex, inputValue, mouseAndTouchTrackers, setGetterPropCallInfo, stateRef]);
 
   // returns
   var toggleMenu = useCallback(function () {
@@ -3692,12 +3698,13 @@ function useMultipleSelection(userProps) {
   // Refs.
   var isInitialMount = useIsInitialMount();
   var dropdownRef = useRef(null);
-  var selectedItemRefs = useRef();
-  selectedItemRefs.current = [];
-  var latest = useLatestRef({
-    state: state,
-    props: props
-  });
+  // Map of selected-item index -> DOM node. Populated by the ref callback in
+  // getSelectedItemProps and read by the focus effect. Keyed by
+  // index so we never reset it during render.
+  var selectedItemRefs = useRef(null);
+  if (selectedItemRefs.current === null) {
+    selectedItemRefs.current = new Map();
+  }
 
   // Effects.
   // Adds an a11y aria live status message if getA11yStatusMessage is passed.
@@ -3709,8 +3716,9 @@ function useMultipleSelection(userProps) {
     }
     if (activeIndex === -1 && dropdownRef.current) {
       dropdownRef.current.focus();
-    } else if (selectedItemRefs.current[activeIndex]) {
-      selectedItemRefs.current[activeIndex].focus();
+    } else {
+      var _selectedItemRefs$cur;
+      (_selectedItemRefs$cur = selectedItemRefs.current.get(activeIndex)) == null || _selectedItemRefs$cur.focus();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeIndex]);
@@ -3770,10 +3778,9 @@ function useMultipleSelection(userProps) {
       selectedItemProp = _ref3.selectedItem,
       indexProp = _ref3.index,
       rest = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
-    var latestState = latest.current.state;
-    var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, 'Pass either item or index to getSelectedItemProps!'),
+    var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, selectedItems, 'Pass either item or index to getSelectedItemProps!'),
       index = _getItemAndIndex[1];
-    var isFocusable = index > -1 && index === latestState.activeIndex;
+    var isFocusable = index > -1 && index === activeIndex;
     var selectedItemHandleClick = function selectedItemHandleClick() {
       dispatch({
         type: SelectedItemClick,
@@ -3788,10 +3795,12 @@ function useMultipleSelection(userProps) {
     };
     return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) {
       if (selectedItemNode) {
-        selectedItemRefs.current.push(selectedItemNode);
+        selectedItemRefs.current.set(index, selectedItemNode);
+      } else {
+        selectedItemRefs.current["delete"](index);
       }
     }), _extends2.tabIndex = isFocusable ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
-  }, [dispatch, latest, selectedItemKeyDownHandlers]);
+  }, [dispatch, selectedItems, activeIndex, selectedItemKeyDownHandlers]);
   var getDropdownProps = useCallback(function (_temp2, _temp3) {
     var _extends3;
     var _ref4 = _temp2 === void 0 ? {} : _temp2,
@@ -3979,8 +3988,10 @@ function useElementIdsLegacy(_ref2) {
   var id = _ref2.id,
     getTagId = _ref2.getTagId,
     tagGroupId = _ref2.tagGroupId;
-  var baseIdRef = React.useRef(id != null ? id : "downshift-" + generateId());
-  var baseId = baseIdRef.current;
+  var _React$useState = React.useState(function () {
+      return id != null ? id : "downshift-" + generateId();
+    }),
+    baseId = _React$useState[0];
   var elementIds = React.useMemo(function () {
     return {
       tagGroupId: tagGroupId != null ? tagGroupId : baseId + "-tag-group",
@@ -4077,10 +4088,6 @@ var _useTagGroup = function useTagGroup(userProps) {
 
   /* Refs */
 
-  var latest = useLatestRef({
-    state: state,
-    props: props
-  });
   var elementIds = useElementIds({
     getTagId: props.getTagId,
     id: props.id,
@@ -4143,7 +4150,6 @@ var _useTagGroup = function useTagGroup(userProps) {
     if (!Number.isInteger(index) || index < 0) {
       throw new Error('Pass correct item index to getTagProps!');
     }
-    var latestState = latest.current.state;
     var handleClick = function handleClick() {
       dispatch({
         type: TagClick,
@@ -4157,8 +4163,8 @@ var _useTagGroup = function useTagGroup(userProps) {
       if (itemNode) {
         itemRefs.current[tagId] = itemNode;
       }
-    }), _extends2['aria-labelledby'] = tagId, _extends2.role = 'option', _extends2.id = tagId, _extends2.onClick = callAllEventHandlers(onClick, handleClick), _extends2.tabIndex = latestState.activeIndex === index ? 0 : -1, _extends2), rest);
-  }, [dispatch, elementIds, latest, itemRefs]);
+    }), _extends2['aria-labelledby'] = tagId, _extends2.role = 'option', _extends2.id = tagId, _extends2.onClick = callAllEventHandlers(onClick, handleClick), _extends2.tabIndex = activeIndex === index ? 0 : -1, _extends2), rest);
+  }, [dispatch, elementIds, activeIndex, itemRefs]);
   var getTagRemoveProps = useCallback(function (options) {
     var index = options.index,
       onClick = options.onClick,