downshift 9.4.0-alpha.2 → 9.4.0

package/dist/downshift.umd.js

@@ -1451,14 +1451,18 @@
     idCounter = 0;
   }
 
-  function useLatestRef(val) {
-    var ref = React__namespace.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__namespace.useLayoutEffect : React__namespace.useEffect;
+
+  function useLatestRef(value) {
+    var ref = React__namespace.useRef(value);
+    useIsomorphicLayoutEffect(function () {
+      ref.current = value;
+    }, [value]);
     return ref;
   }
 
@@ -2977,18 +2981,27 @@
    */
   function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
     var prevStateRef = React__namespace.useRef({});
-    var actionRef = React__namespace.useRef();
-    var enhancedReducer = React__namespace.useCallback(function (state, action) {
-      actionRef.current = action;
+    var enhancedReducer = React__namespace.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__namespace.useReducer(enhancedReducer, props, createInitialState),
-      state = _React$useReducer[0],
+    var _React$useReducer = React__namespace.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__namespace.useCallback(function (action) {
@@ -2996,15 +3009,16 @@
         props: propsRef.current
       }));
     }, [propsRef]);
-    var action = actionRef.current;
     React__namespace.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];
   }
 
@@ -3065,6 +3079,8 @@
         isInitialMountRef.current = true;
       };
     }, []);
+
+    // eslint-disable-next-line react-hooks/refs
     return isInitialMountRef.current;
   }
 
@@ -3244,8 +3260,10 @@
       getItemId = _ref2.getItemId,
       toggleButtonId = _ref2.toggleButtonId,
       inputId = _ref2.inputId;
-    var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
-    var baseId = baseIdRef.current;
+    var _React$useState = React__namespace.useState(function () {
+        return id != null ? id : "downshift-" + generateId();
+      }),
+      baseId = _React$useState[0];
     var elementIds = React__namespace.useMemo(function () {
       return {
         labelId: labelId != null ? labelId : baseId + "-label",
@@ -3319,10 +3337,10 @@
     }
 
     // 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) {
@@ -3394,7 +3412,7 @@
    * @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__namespace.useRef({
@@ -3447,7 +3465,7 @@
         environment.removeEventListener('touchend', onTouchEnd);
       };
     }, [environment, getDownshiftElements, handleBlur]);
-    return mouseAndTouchTrackersRef.current;
+    return mouseAndTouchTrackersRef;
   }
 
   /* istanbul ignore next */
@@ -3502,31 +3520,28 @@
     };
   }
 
-  // istanbul ignore next
-  var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.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__namespace.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;
@@ -3794,7 +3809,7 @@
 
   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) {
@@ -3804,7 +3819,9 @@
     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.
@@ -3825,17 +3842,18 @@
     var clearTimeoutRef = React.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.
     React.useEffect(function () {
       // init the clean function here as we need access to dispatch.
@@ -3872,12 +3890,12 @@
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var handleBlurInTracker = React.useCallback(function handleBlur() {
-      if (latest.current.state.isOpen) {
+      if (stateRef.current.isOpen) {
         dispatch({
           type: ToggleButtonBlur
         });
       }
-    }, [dispatch, latest]);
+    }, [dispatch, stateRef]);
     var downshiftRefs = React.useMemo(function () {
       return [menuRef, toggleButtonRef];
     }, []);
@@ -3920,7 +3938,7 @@
           });
         },
         Escape: function Escape() {
-          if (latest.current.state.isOpen) {
+          if (stateRef.current.isOpen) {
             dispatch({
               type: ToggleButtonKeyDownEscape
             });
@@ -3929,11 +3947,11 @@
         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
@@ -3941,7 +3959,7 @@
           }
         },
         PageDown: function PageDown(event) {
-          if (latest.current.state.isOpen) {
+          if (stateRef.current.isOpen) {
             event.preventDefault();
             dispatch({
               type: ToggleButtonKeyDownPageDown
@@ -3950,7 +3968,7 @@
         },
         ' ': function _(event) {
           event.preventDefault();
-          var currentState = latest.current.state;
+          var currentState = stateRef.current;
           if (!currentState.isOpen) {
             dispatch({
               type: ToggleButtonClick$1
@@ -3969,7 +3987,7 @@
           }
         }
       };
-    }, [dispatch, latest]);
+    }, [dispatch, stateRef]);
 
     // Getter functions.
     var getLabelProps = React.useCallback(function (labelProps) {
@@ -4018,19 +4036,17 @@
         _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
           });
@@ -4049,8 +4065,8 @@
       };
       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, {
@@ -4061,7 +4077,7 @@
       }
       setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
       return toggleProps;
-    }, [dispatch, elementIds, latest, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers]);
+    }, [dispatch, elementIds, isOpen, highlightedIndex, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers, stateRef]);
     var getItemProps = React.useCallback(function (itemProps) {
       var _extends4;
       var _ref6 = itemProps != null ? itemProps : {},
@@ -4079,15 +4095,12 @@
       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();
@@ -4111,7 +4124,7 @@
         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) */
         {
@@ -4121,7 +4134,7 @@
         }
       }
       return resultItemProps;
-    }, [latest, elementIds, mouseAndTouchTrackers, preventScroll, dispatch]);
+    }, [items, isItemDisabled, selectedItem, elementIds, mouseAndTouchTrackers, preventScroll, dispatch, stateRef]);
 
     // Action functions.
     var toggleMenu = React.useCallback(function () {
@@ -4412,8 +4425,8 @@
 
   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) {
@@ -4423,6 +4436,7 @@
     // 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;
@@ -4446,17 +4460,18 @@
     var elementIds = useElementIds$1(props);
     // used to keep track of how many items we had on previous cycle.
     var previousResultCountRef = React.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
@@ -4475,12 +4490,12 @@
       }
     });
     var handleBlurInTracker = React.useCallback(function handleBlur() {
-      if (latest.current.state.isOpen) {
+      if (stateRef.current.isOpen) {
         dispatch({
           type: InputBlur
         });
       }
-    }, [dispatch, latest]);
+    }, [dispatch, stateRef]);
     var downshiftRefs = React.useMemo(function () {
       return [menuRef, toggleButtonRef, inputRef];
     }, []);
@@ -4521,7 +4536,7 @@
           });
         },
         Home: function Home(event) {
-          if (!latest.current.state.isOpen) {
+          if (!stateRef.current.isOpen) {
             return;
           }
           event.preventDefault();
@@ -4530,7 +4545,7 @@
           });
         },
         End: function End(event) {
-          if (!latest.current.state.isOpen) {
+          if (!stateRef.current.isOpen) {
             return;
           }
           event.preventDefault();
@@ -4539,7 +4554,7 @@
           });
         },
         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({
@@ -4548,7 +4563,7 @@
           }
         },
         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.
           ) {
@@ -4560,7 +4575,7 @@
           });
         },
         PageUp: function PageUp(event) {
-          if (latest.current.state.isOpen) {
+          if (stateRef.current.isOpen) {
             event.preventDefault();
             dispatch({
               type: InputKeyDownPageUp
@@ -4568,7 +4583,7 @@
           }
         },
         PageDown: function PageDown(event) {
-          if (latest.current.state.isOpen) {
+          if (stateRef.current.isOpen) {
             event.preventDefault();
             dispatch({
               type: InputKeyDownPageDown
@@ -4576,7 +4591,7 @@
           }
         }
       };
-    }, [dispatch, latest]);
+    }, [dispatch, stateRef]);
 
     // Getter props.
     var getLabelProps = React.useCallback(function (labelProps) {
@@ -4623,17 +4638,14 @@
       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();
@@ -4657,11 +4669,11 @@
         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 = React.useCallback(function (toggleButtonProps) {
       var _extends4;
       var _ref5 = toggleButtonProps != null ? toggleButtonProps : {},
@@ -4670,9 +4682,7 @@
         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
@@ -4680,17 +4690,14 @@
       };
       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 = React.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,
@@ -4705,7 +4712,6 @@
         _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) {
@@ -4721,7 +4727,7 @@
       };
       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,
@@ -4738,14 +4744,14 @@
       /* 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 = React.useCallback(function () {
@@ -5067,12 +5073,13 @@
     // Refs.
     var isInitialMount = useIsInitialMount();
     var dropdownRef = React.useRef(null);
-    var selectedItemRefs = React.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 = React.useRef(null);
+    if (selectedItemRefs.current === null) {
+      selectedItemRefs.current = new Map();
+    }
 
     // Effects.
     // Adds an a11y aria live status message if getA11yStatusMessage is passed.
@@ -5084,8 +5091,9 @@
       }
       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]);
@@ -5145,10 +5153,9 @@
         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,
@@ -5163,10 +5170,12 @@
       };
       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 = React.useCallback(function (_temp2, _temp3) {
       var _extends3;
       var _ref4 = _temp2 === void 0 ? {} : _temp2,
@@ -5354,8 +5363,10 @@
     var id = _ref2.id,
       getTagId = _ref2.getTagId,
       tagGroupId = _ref2.tagGroupId;
-    var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
-    var baseId = baseIdRef.current;
+    var _React$useState = React__namespace.useState(function () {
+        return id != null ? id : "downshift-" + generateId();
+      }),
+      baseId = _React$useState[0];
     var elementIds = React__namespace.useMemo(function () {
       return {
         tagGroupId: tagGroupId != null ? tagGroupId : baseId + "-tag-group",
@@ -5452,10 +5463,6 @@
 
     /* Refs */
 
-    var latest = useLatestRef({
-      state: state,
-      props: props
-    });
     var elementIds = useElementIds({
       getTagId: props.getTagId,
       id: props.id,
@@ -5518,7 +5525,6 @@
       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,
@@ -5532,8 +5538,8 @@
         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 = React.useCallback(function (options) {
       var index = options.index,
         onClick = options.onClick,