downshift 9.3.1 → 9.4.0-alpha.0

package/preact/dist/downshift.umd.js

@@ -370,7 +370,7 @@
     return ref;
   }
 
-  function handleRefs$1() {
+  function handleRefs() {
     for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
       refs[_key] = arguments[_key];
     }
@@ -392,7 +392,7 @@
    * @param fns the event handler functions
    * @return the event handler to add to an element
    */
-  function callAllEventHandlers$1() {
+  function callAllEventHandlers() {
     for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
       fns[_key] = arguments[_key];
     }
@@ -414,7 +414,7 @@
    * function once after the time given has passed since
    * it was last called.
    */
-  function debounce$1(fn, time) {
+  function debounce(fn, time) {
     var timeoutId;
     function cancel() {
       if (timeoutId) {
@@ -435,7 +435,7 @@
     return wrapper;
   }
 
-  var cleanupStatus = debounce$1(function (document) {
+  var cleanupStatus = debounce(function (document) {
     getStatusDiv(document).textContent = '';
   }, 500);
 
@@ -516,6 +516,8 @@
     }
     var keys = Object.keys(state);
     return keys.reduce(function (newState, key) {
+      // state keys could be in props, but with value undefined, which means they should be ignored.
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (props[key] !== undefined) {
         newState[key] = props[key];
       }
@@ -546,93 +548,149 @@
   }
 
   /**
-   * Accepts a parameter and returns it if it's a function
-   * or a noop function if it's not. This allows us to
-   * accept a callback, but not worry about it if it's not
-   * passed.
-   * @param {Function} cb the callback
-   * @return {Function} a function
-   */
-  function cbToCb(cb) {
-    return typeof cb === 'function' ? cb : noop;
-  }
-
-  /**
-   * @param {HTMLElement} parent the parent node
-   * @param {HTMLElement} child the child node
-   * @param {Window} environment The window context where downshift renders.
-   * @return {Boolean} whether the parent is the child or the child is in the parent
+   * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
+   * @param event a keyboardEvent object
+   * @return keyboard key
    */
-  function isOrContainsNode(parent, child, environment) {
-    var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
-    return result;
+  function normalizeArrowKey(event) {
+    var key = event.key,
+      keyCode = event.keyCode;
+    /* istanbul ignore next (ie) */
+    if (keyCode >= 37 && keyCode <= 40 && !key.startsWith('Arrow')) {
+      return "Arrow" + key;
+    }
+    return key;
   }
 
   /**
-   * Simple debounce implementation. Will call the given
-   * function once after the time given has passed since
-   * it was last called.
-   * @param {Function} fn the function to call after the time
-   * @param {Number} time the time to wait
-   * @return {Function} the debounced function
+   * Returns the next non-disabled highlightedIndex value.
+   *
+   * @param start The current highlightedIndex.
+   * @param backwards If true, it will search backwards from the start.
+   * @param items The items array.
+   * @param isItemDisabled Function that tells if an item is disabled or not.
+   * @param circular If the search reaches the end, if it can search again starting from the other end.
+   * @returns The next non-disabled index.
    */
-  function debounce(fn, time) {
-    var timeoutId;
-    function cancel() {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
+  function getNonDisabledIndex(start, backwards, items, isItemDisabled, circular) {
+    if (circular === void 0) {
+      circular = false;
     }
-    function wrapper() {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
+    var count = items.length;
+    if (backwards) {
+      for (var index = start; index >= 0; index--) {
+        if (!isItemDisabled(items[index], index)) {
+          return index;
+        }
+      }
+    } else {
+      for (var _index = start; _index < count; _index++) {
+        if (!isItemDisabled(items[_index], _index)) {
+          return _index;
+        }
       }
-      cancel();
-      timeoutId = setTimeout(function () {
-        timeoutId = null;
-        fn.apply(void 0, args);
-      }, time);
     }
-    wrapper.cancel = cancel;
-    return wrapper;
+    if (circular) {
+      return getNonDisabledIndex(backwards ? count - 1 : 0, backwards, items, isItemDisabled);
+    }
+    return -1;
   }
 
   /**
-   * This is intended to be used to compose event handlers.
-   * They are executed in order until one of them sets
-   * `event.preventDownshiftDefault = true`.
-   * @param {...Function} fns the event handler functions
-   * @return {Function} the event handler to add to an element
+   * Returns the next non-disabled highlightedIndex value.
+   *
+   * @param start The current highlightedIndex.
+   * @param offset The offset from the current highlightedIndex to start searching.
+   * @param items The items array.
+   * @param isItemDisabled Function that tells if an item is disabled or not.
+   * @param circular If the search reaches the end, if it can search again starting from the other end.
+   * @returns The next highlightedIndex.
    */
-  function callAllEventHandlers() {
-    for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      fns[_key2] = arguments[_key2];
+  function getHighlightedIndex(start, offset, items, isItemDisabled, circular) {
+    if (circular === void 0) {
+      circular = false;
     }
-    return function (event) {
-      for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
-        args[_key3 - 1] = arguments[_key3];
-      }
-      return fns.some(function (fn) {
-        if (fn) {
-          fn.apply(void 0, [event].concat(args));
+    var count = items.length;
+    if (count === 0) {
+      return -1;
+    }
+    var itemsLastIndex = count - 1;
+    if (typeof start !== 'number' || start < 0 || start > itemsLastIndex) {
+      start = offset > 0 ? -1 : itemsLastIndex + 1;
+    }
+    var current = start + offset;
+    if (current < 0) {
+      current = circular ? itemsLastIndex : 0;
+    } else if (current > itemsLastIndex) {
+      current = circular ? 0 : itemsLastIndex;
+    }
+    var highlightedIndex = getNonDisabledIndex(current, offset < 0, items, isItemDisabled, circular);
+    if (highlightedIndex === -1) {
+      return start >= count ? -1 : start;
+    }
+    return highlightedIndex;
+  }
+
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+
+  // eslint-disable-next-line import/no-mutable-exports
+  var validateControlledUnchanged = noop;
+  /* istanbul ignore next */
+  {
+    validateControlledUnchanged = function validateControlledUnchanged(state, prevProps, nextProps) {
+      var warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
+      Object.keys(state).forEach(function (propKey) {
+        if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
+          // eslint-disable-next-line no-console
+          console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
+        } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
+          // eslint-disable-next-line no-console
+          console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
         }
-        return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
       });
     };
   }
-  function handleRefs() {
-    for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      refs[_key4] = arguments[_key4];
+
+  /**
+   * Checks if event target is within the downshift elements.
+   *
+   * @param target Target to check.
+   * @param downshiftElements The elements that form downshift (list, toggle button etc).
+   * @param environment The window context where downshift renders.
+   * @param checkActiveElement Whether to also check activeElement.
+   *
+   * @returns Whether or not the target is within downshift elements.
+   */
+  function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
+    if (checkActiveElement === void 0) {
+      checkActiveElement = true;
     }
-    return function (node) {
-      refs.forEach(function (ref) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-      });
-    };
+    return !!environment && downshiftElements.some(function (contextNode) {
+      return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
+    });
+  }
+
+  /**
+   * @param parent the parent node
+   * @param child the child node
+   * @param environment The window context where downshift renders.
+   * @return Whether the parent is the child or the child is in the parent
+   */
+  function isOrContainsNode(parent, child, environment) {
+    var result = parent === child || child instanceof environment.Node && parent.contains(child);
+    return result;
+  }
+
+  /**
+   * Accepts a parameter and returns it if it's a function
+   * or a noop function if it's not. This allows us to
+   * accept a callback, but not worry about it if it's not
+   * passed.
+   * @param {Function} cb the callback
+   * @return {Function} a function
+   */
+  function cbToCb(cb) {
+    return typeof cb === 'function' ? cb : noop;
   }
 
   /**
@@ -728,34 +786,6 @@
     return result;
   }
 
-  /**
-   * This determines whether a prop is a "controlled prop" meaning it is
-   * state which is controlled by the outside of this component rather
-   * than within this component.
-   *
-   * @param {Object} props The props that may contain controlled values.
-   * @param {String} key the key to check
-   * @return {Boolean} whether it is a controlled controlled prop
-   */
-  function isControlledProp(props, key) {
-    return props[key] !== undefined;
-  }
-
-  /**
-   * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
-   * @param {Object} event a keyboardEvent object
-   * @return {String} keyboard key
-   */
-  function normalizeArrowKey(event) {
-    var key = event.key,
-      keyCode = event.keyCode;
-    /* istanbul ignore next (ie) */
-    if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
-      return "Arrow" + key;
-    }
-    return key;
-  }
-
   /**
    * Simple check if the value passed is object literal
    * @param {*} obj any things
@@ -765,112 +795,6 @@
     return Object.prototype.toString.call(obj) === '[object Object]';
   }
 
-  /**
-   * Returns the next non-disabled highlightedIndex value.
-   *
-   * @param {number} start The current highlightedIndex.
-   * @param {number} offset The offset from the current highlightedIndex to start searching.
-   * @param {unknown[]} items The items array.
-   * @param {(item: unknown, index: number) => boolean} isItemDisabled Function that tells if an item is disabled or not.
-   * @param {boolean?} circular If the search reaches the end, if it can search again starting from the other end.
-   * @returns {number} The next highlightedIndex.
-   */
-  function getHighlightedIndex(start, offset, items, isItemDisabled, circular) {
-    if (circular === void 0) {
-      circular = false;
-    }
-    var count = items.length;
-    if (count === 0) {
-      return -1;
-    }
-    var itemsLastIndex = count - 1;
-    if (typeof start !== 'number' || start < 0 || start > itemsLastIndex) {
-      start = offset > 0 ? -1 : itemsLastIndex + 1;
-    }
-    var current = start + offset;
-    if (current < 0) {
-      current = circular ? itemsLastIndex : 0;
-    } else if (current > itemsLastIndex) {
-      current = circular ? 0 : itemsLastIndex;
-    }
-    var highlightedIndex = getNonDisabledIndex(current, offset < 0, items, isItemDisabled, circular);
-    if (highlightedIndex === -1) {
-      return start >= count ? -1 : start;
-    }
-    return highlightedIndex;
-  }
-
-  /**
-   * Returns the next non-disabled highlightedIndex value.
-   *
-   * @param {number} start The current highlightedIndex.
-   * @param {boolean} backwards If true, it will search backwards from the start.
-   * @param {unknown[]} items The items array.
-   * @param {(item: unknown, index: number) => boolean} isItemDisabled Function that tells if an item is disabled or not.
-   * @param {boolean} circular If the search reaches the end, if it can search again starting from the other end.
-   * @returns {number} The next non-disabled index.
-   */
-  function getNonDisabledIndex(start, backwards, items, isItemDisabled, circular) {
-    if (circular === void 0) {
-      circular = false;
-    }
-    var count = items.length;
-    if (backwards) {
-      for (var index = start; index >= 0; index--) {
-        if (!isItemDisabled(items[index], index)) {
-          return index;
-        }
-      }
-    } else {
-      for (var _index = start; _index < count; _index++) {
-        if (!isItemDisabled(items[_index], _index)) {
-          return _index;
-        }
-      }
-    }
-    if (circular) {
-      return getNonDisabledIndex(backwards ? count - 1 : 0, backwards, items, isItemDisabled);
-    }
-    return -1;
-  }
-
-  /**
-   * Checks if event target is within the downshift elements.
-   *
-   * @param {EventTarget} target Target to check.
-   * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
-   * @param {Window} environment The window context where downshift renders.
-   * @param {boolean} checkActiveElement Whether to also check activeElement.
-   *
-   * @returns {boolean} Whether or not the target is within downshift elements.
-   */
-  function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
-    if (checkActiveElement === void 0) {
-      checkActiveElement = true;
-    }
-    return environment && downshiftElements.some(function (contextNode) {
-      return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
-    });
-  }
-
-  // eslint-disable-next-line import/no-mutable-exports
-  var validateControlledUnchanged = noop;
-  /* istanbul ignore next */
-  {
-    validateControlledUnchanged = function validateControlledUnchanged(state, prevProps, nextProps) {
-      var warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
-      Object.keys(state).forEach(function (propKey) {
-        if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
-          // eslint-disable-next-line no-console
-          console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
-        } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
-          // eslint-disable-next-line no-console
-          console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
-        }
-      });
-    };
-  }
-
   var _excluded$4 = ["refKey", "ref"],
     _excluded2$4 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"],
     _excluded3$3 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"],
@@ -1021,7 +945,7 @@
               }
               newStateToSet[key];
               // if it's coming from props, then we don't care to set it internally
-              if (!isControlledProp(_this.props, key)) {
+              if (_this.props[key] === undefined) {
                 nextState[key] = newStateToSet[key];
               }
             });
@@ -1751,7 +1675,7 @@
             validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
           }
         }
-        if (isControlledProp(this.props, 'selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
+        if (this.props.selectedItem !== undefined && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
           this.internalSetState({
             type: controlledPropUpdatedSelectedItem,
             inputValue: this.props.itemToString(this.props.selectedItem)
@@ -1888,7 +1812,7 @@
         changes[key] = newState[key];
       }
     }
-    if (props.onStateChange && Object.keys(changes).length) {
+    if (typeof props.onStateChange === 'function' && Object.keys(changes).length) {
       props.onStateChange(_extends({
         type: type
       }, changes));
@@ -1914,50 +1838,53 @@
    * two reducers, one from downshift and an optional one from the user.
    * Also calls the onChange handlers for state values that have changed.
    *
-   * @param {Function} reducer Reducer function from downshift.
-   * @param {Object} props The hook props, also passed to createInitialState.
-   * @param {Function} createInitialState Function that returns the initial state.
-   * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
-   * @returns {Array} An array with the state and an action dispatcher.
+   * @param reducer Reducer function from downshift.
+   * @param props The hook props, also passed to createInitialState.
+   * @param createInitialState Function that returns the initial state.
+   * @param isStateEqual Function that checks if a previous state is equal to the next.
+   * @returns An array with the state and an action dispatcher.
    */
   function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
-    var prevStateRef = React__namespace.useRef(null);
-    var actionRef = React__namespace.useRef(undefined);
-    var propsRef = useLatestRef(props);
+    var prevStateRef = React__namespace.useRef({});
+    var actionRef = React__namespace.useRef();
     var enhancedReducer = React__namespace.useCallback(function (state, action) {
       actionRef.current = action;
-      state = getState(state, propsRef.current);
-      var changes = reducer(state, propsRef.current, action);
-      var newState = propsRef.current.stateReducer(state, _extends({}, action, {
+      state = getState(state, action.props);
+      var changes = reducer(state, action);
+      var newState = action.props.stateReducer(state, _extends({}, action, {
         changes: changes
       }));
       return _extends({}, state, newState);
-    }, [propsRef, reducer]);
+    }, [reducer]);
     var _React$useReducer = React__namespace.useReducer(enhancedReducer, props, createInitialState),
       state = _React$useReducer[0],
       dispatch = _React$useReducer[1];
+    var propsRef = useLatestRef(props);
+    var dispatchWithProps = React__namespace.useCallback(function (action) {
+      return dispatch(_extends({}, action, {
+        props: propsRef.current
+      }));
+    }, [propsRef]);
     var action = actionRef.current;
     React__namespace.useEffect(function () {
-      var _prevStateRef$current;
-      var prevState = getState((_prevStateRef$current = prevStateRef.current) != null ? _prevStateRef$current : {}, propsRef.current);
-      var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevState, state);
+      var prevState = getState(prevStateRef.current, action == null ? void 0 : action.props);
+      var shouldCallOnChangeProps = action && !isStateEqual(prevState, state);
       if (shouldCallOnChangeProps) {
-        callOnChangeProps(action, propsRef.current, prevState, state);
+        callOnChangeProps(action, action.props, prevState, state);
       }
       prevStateRef.current = state;
-    }, [state, action, isStateEqual, propsRef]);
-    return [state, dispatch];
+    }, [state, action, isStateEqual]);
+    return [state, dispatchWithProps];
   }
 
   /**
    * Wraps the useEnhancedReducer and applies the controlled prop values before
    * returning the new state.
-   *
-   * @param {Function} reducer Reducer function from downshift.
-   * @param {Object} props The hook props, also passed to createInitialState.
-   * @param {Function} createInitialState Function that returns the initial state.
-   * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
-   * @returns {Array} An array with the state and an action dispatcher.
+   * @param reducer Reducer function from downshift.
+   * @param props The hook props, also passed to createInitialState.
+   * @param createInitialState Function that returns the initial state.
+   * @param isStateEqual Function that checks if a previous state is equal to the next.
+   * @returns An array with the state and an action dispatcher.
    */
   function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
     var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
@@ -2010,16 +1937,8 @@
     return isInitialMountRef.current;
   }
 
-  /**
-   * Default state reducer that returns the changes.
-   *
-   */
-  function stateReducer(_s, a) {
-    return a.changes;
-  }
-
   // Shared between all exports.
-  var propTypes$5 = {
+  var propTypes$4 = {
     environment: PropTypes.shape({
       addEventListener: PropTypes.func.isRequired,
       removeEventListener: PropTypes.func.isRequired,
@@ -2035,30 +1954,47 @@
     stateReducer: PropTypes.func
   };
 
-  function getDefaultValue$1(props, propKey, defaultStateValues) {
-    var defaultValue = props["default" + capitalizeString(propKey)];
-    if (defaultValue !== undefined) {
-      return defaultValue;
-    }
-    return defaultStateValues[propKey];
+  /**
+   * Returns the default value based on the defaultProp and defaultStateValue.
+   *
+   * @param defaultProp The default prop value.
+   * @param defaultStateValue The default state value.
+   * @returns The resolved default value.
+   */
+  function getDefaultValue(defaultProp, defaultStateValue) {
+    return defaultProp === undefined ? defaultStateValue : defaultProp;
   }
 
-  function getInitialValue$1(props, propKey, defaultStateValues) {
-    var value = props[propKey];
+  /**
+   * Returns the initial value for a state variable, based on the following precedence:
+   * 1. The controlled value (if it's not undefined)
+   * 2. The initialValue (if it's not undefined)
+   * 3. The defaultValue (if it's not undefined)
+   * 4. The defaultStateValue
+   *
+   * @param value The controlled value of the state variable.
+   * @param initialValue The initial value of the state variable.
+   * @param defaultValue The default value of the state variable.
+   * @param defaultStateValue The default state value to use if all other values are undefined.
+   * @returns The initial value for the state variable.
+   */
+  function getInitialValue(value, initialValue, defaultValue, defaultStateValue) {
     if (value !== undefined) {
       return value;
     }
-    var initialValue = props["initial" + capitalizeString(propKey)];
     if (initialValue !== undefined) {
       return initialValue;
     }
-    return getDefaultValue$1(props, propKey, defaultStateValues);
+    if (defaultValue !== undefined) {
+      return defaultValue;
+    }
+    return defaultStateValue;
   }
 
   /**
    * Debounced call for updating the a11y message.
    */
-  var updateA11yStatus = debounce$1(function (status, document) {
+  var updateA11yStatus = debounce(function (status, document) {
     setStatus(status, document);
   }, 200);
 
@@ -2094,7 +2030,7 @@
   }
 
   // Shared between useSelect, useCombobox, Downshift.
-  var propTypes$4 = _extends({}, propTypes$5, {
+  var dropdownPropTypes = _extends({}, propTypes$4, {
     getA11yStatusMessage: PropTypes.func,
     highlightedIndex: PropTypes.number,
     defaultHighlightedIndex: PropTypes.number,
@@ -2117,62 +2053,145 @@
     scrollIntoView: PropTypes.func
   });
 
-  var defaultProps$3 = {
+  var dropdownDefaultProps = {
     itemToString: function itemToString(item) {
       return item ? String(item) : '';
     },
     itemToKey: function itemToKey(item) {
       return item;
     },
-    stateReducer: stateReducer,
+    isItemDisabled: function isItemDisabled(_item) {
+      return false;
+    },
+    stateReducer: function stateReducer(_state, actionAndChanges) {
+      return actionAndChanges.changes;
+    },
     scrollIntoView: scrollIntoView,
     environment: /* istanbul ignore next (ssr) */
     typeof window === 'undefined' || false ? undefined : window
   };
 
-  var defaultStateValues$1 = {
+  var dropdownDefaultStateValues = {
     highlightedIndex: -1,
     isOpen: false,
     selectedItem: null,
     inputValue: ''
   };
 
-  // istanbul ignore next
-  var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-  function isAcceptedCharacterKey(key) {
-    return /^\S{1}$/.test(key);
+  // https://github.com/downshift-js/downshift/issues/1674#issuecomment-3924320872
+  var SafeReact$1 = _extends({}, React__namespace);
+  var reactUseId$1 = SafeReact$1.useId;
+  var useElementIds$1 = typeof reactUseId$1 === 'function' ? useElementIdsR18$1 : useElementIdsLegacy$1;
+  function useElementIdsR18$1(_ref) {
+    var id = _ref.id,
+      labelId = _ref.labelId,
+      menuId = _ref.menuId,
+      getItemId = _ref.getItemId,
+      toggleButtonId = _ref.toggleButtonId,
+      inputId = _ref.inputId;
+    var reactId = "downshift-" + reactUseId$1();
+    if (!id) {
+      id = reactId;
+    }
+    var elementIds = React__namespace.useMemo(function () {
+      return {
+        labelId: labelId != null ? labelId : id + "-label",
+        menuId: menuId != null ? menuId : id + "-menu",
+        getItemId: getItemId != null ? getItemId : function (index) {
+          return id + "-item-" + index;
+        },
+        toggleButtonId: toggleButtonId != null ? toggleButtonId : id + "-toggle-button",
+        inputId: inputId != null ? inputId : id + "-input"
+      };
+    }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+    return elementIds;
   }
-  function getInitialState$3(props) {
-    var selectedItem = getInitialValue$1(props, 'selectedItem', defaultStateValues$1);
-    var isOpen = getInitialValue$1(props, 'isOpen', defaultStateValues$1);
-    var highlightedIndex = getInitialHighlightedIndex(props);
-    var inputValue = getInitialValue$1(props, 'inputValue', defaultStateValues$1);
-    return {
-      highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function (item) {
-        return props.itemToKey(item) === props.itemToKey(selectedItem);
-      }) : highlightedIndex,
-      isOpen: isOpen,
-      selectedItem: selectedItem,
-      inputValue: inputValue
-    };
+  function useElementIdsLegacy$1(_ref2) {
+    var id = _ref2.id,
+      labelId = _ref2.labelId,
+      menuId = _ref2.menuId,
+      getItemId = _ref2.getItemId,
+      toggleButtonId = _ref2.toggleButtonId,
+      inputId = _ref2.inputId;
+    var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
+    var baseId = baseIdRef.current;
+    var elementIds = React__namespace.useMemo(function () {
+      return {
+        labelId: labelId != null ? labelId : baseId + "-label",
+        menuId: menuId != null ? menuId : baseId + "-menu",
+        getItemId: getItemId != null ? getItemId : function (index) {
+          return baseId + "-item-" + index;
+        },
+        toggleButtonId: toggleButtonId != null ? toggleButtonId : baseId + "-toggle-button",
+        inputId: inputId != null ? inputId : baseId + "-input"
+      };
+    }, [getItemId, inputId, labelId, menuId, toggleButtonId, baseId]);
+    return elementIds;
   }
-  function getHighlightedIndexOnOpen(props, state, offset) {
-    var items = props.items,
-      initialHighlightedIndex = props.initialHighlightedIndex,
-      defaultHighlightedIndex = props.defaultHighlightedIndex,
-      isItemDisabled = props.isItemDisabled,
-      itemToKey = props.itemToKey;
-    var selectedItem = state.selectedItem,
-      highlightedIndex = state.highlightedIndex;
+
+  /**
+   * Returns the new highlightedIndex based on the defaultHighlightedIndex prop, if it's not disabled.
+   *
+   * @param props Props passed to the hook.
+   * @returns The highlighted index.
+   */
+  function getDefaultHighlightedIndex(items, isItemDisabled, defaultHighlightedIndex) {
+    var highlightedIndex = getDefaultValue(defaultHighlightedIndex, dropdownDefaultStateValues.highlightedIndex);
+    if (items[highlightedIndex] && isItemDisabled(items[highlightedIndex], highlightedIndex)) {
+      return -1;
+    }
+    return highlightedIndex;
+  }
+
+  /**
+   * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
+   * In that case, selects the item and resets to defaults for open state and highlighted idex.
+   *
+   * @param props The Dropdown props.
+   * @param highlightedIndex The index from the state.
+   * @param inputValue Also return the input value for state.
+   * @returns The changes for the state.
+   */
+  function getChangesOnSelection(items, itemToString, defaultIsOpen, defaultHighlightedIndex, highlightedIndex, inputValue) {
+    var shouldSelect = items.length && highlightedIndex >= 0;
+    return _extends({
+      isOpen: false,
+      highlightedIndex: -1
+    }, shouldSelect && _extends({
+      selectedItem: items[highlightedIndex],
+      isOpen: getDefaultValue(defaultIsOpen, dropdownDefaultStateValues.isOpen),
+      highlightedIndex: getDefaultValue(defaultHighlightedIndex, dropdownDefaultStateValues.highlightedIndex)
+    }, inputValue && {
+      inputValue: itemToString(items[highlightedIndex])
+    }));
+  }
+
+  /* eslint-disable max-params */
+  /**
+   * Returns the highlighted index when the menu is opened.
+   * Takes into account the initialHighlightedIndex, defaultHighlightedIndex,
+   * selectedItem, and the open direction offset.
+   *
+   * @param items The list of items.
+   * @param initialHighlightedIndex The initial highlighted index prop.
+   * @param defaultHighlightedIndex The default highlighted index prop.
+   * @param isItemDisabled Callback to determine if an item is disabled.
+   * @param itemToKey Callback to get a unique key from an item.
+   * @param selectedItem The currently selected item.
+   * @param highlightedIndex The current highlighted index from state.
+   * @param offset The direction of navigation: positive opens downward, negative opens upward.
+   * @returns The new highlighted index.
+   */
+  function getHighlightedIndexOnOpen(items, initialHighlightedIndex, defaultHighlightedIndex, isItemDisabled, itemToKey, selectedItem, highlightedIndex, offset) {
     if (items.length === 0) {
       return -1;
     }
 
     // initialHighlightedIndex will give value to highlightedIndex on initial state only.
-    if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex && !isItemDisabled(items[initialHighlightedIndex], initialHighlightedIndex)) {
+    if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex && items[initialHighlightedIndex] && !isItemDisabled(items[initialHighlightedIndex], initialHighlightedIndex)) {
       return initialHighlightedIndex;
     }
-    if (defaultHighlightedIndex !== undefined && !isItemDisabled(items[defaultHighlightedIndex], defaultHighlightedIndex)) {
+    if (defaultHighlightedIndex !== undefined && items[defaultHighlightedIndex] && !isItemDisabled(items[defaultHighlightedIndex], defaultHighlightedIndex)) {
       return defaultHighlightedIndex;
     }
     if (selectedItem) {
@@ -2180,21 +2199,71 @@
         return itemToKey(selectedItem) === itemToKey(item);
       });
     }
-    if (offset < 0 && !isItemDisabled(items[items.length - 1], items.length - 1)) {
+    if (offset < 0 && items[items.length - 1] && !isItemDisabled(items[items.length - 1], items.length - 1)) {
       return items.length - 1;
     }
-    if (offset > 0 && !isItemDisabled(items[0], 0)) {
+    if (offset > 0 && items[0] && !isItemDisabled(items[0], 0)) {
       return 0;
     }
     return -1;
   }
+
+  function getInitialState$3(props) {
+    var selectedItem = getInitialValue(props.selectedItem, props.initialSelectedItem, props.defaultSelectedItem, dropdownDefaultStateValues.selectedItem);
+    var isOpen = getInitialValue(props.isOpen, props.initialIsOpen, props.defaultIsOpen, dropdownDefaultStateValues.isOpen);
+    var highlightedIndex = getInitialHighlightedIndex(props);
+    var inputValue = getInitialValue(props.inputValue, props.initialInputValue, props.defaultInputValue, dropdownDefaultStateValues.inputValue);
+    return {
+      highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function (item) {
+        return props.itemToKey(item) === props.itemToKey(selectedItem);
+      }) : highlightedIndex,
+      isOpen: isOpen,
+      selectedItem: selectedItem,
+      inputValue: inputValue
+    };
+  }
+
+  /**
+   * Returns the new highlightedIndex based on the initialHighlightedIndex prop, if not disabled.
+   * @param props Props from useCombobox or useSelect.
+   * @returns The highlighted index.
+   */
+  function getInitialHighlightedIndex(props) {
+    var highlightedIndex = getInitialValue(props.highlightedIndex, props.initialHighlightedIndex, props.defaultHighlightedIndex, dropdownDefaultStateValues.highlightedIndex);
+    if (highlightedIndex > -1 && props.items[highlightedIndex] && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
+      return -1;
+    }
+    return highlightedIndex;
+  }
+
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  // eslint-disable-next-line import/no-mutable-exports
+  var useControlPropsValidator = noop;
+  /* istanbul ignore next */
+  {
+    useControlPropsValidator = function useControlPropsValidator(_ref) {
+      var props = _ref.props,
+        state = _ref.state;
+      // used for checking when props are moving from controlled to uncontrolled.
+      var prevPropsRef = React__namespace.useRef(props);
+      var isInitialMount = useIsInitialMount();
+      React__namespace.useEffect(function () {
+        if (isInitialMount) {
+          return;
+        }
+        validateControlledUnchanged(state, prevPropsRef.current, props);
+        prevPropsRef.current = props;
+      }, [state, props, isInitialMount]);
+    };
+  }
+
   /**
    * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
    *
-   * @param {Window} environment The environment to add the event listeners to, for instance window.
-   * @param {() => void} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
-   * @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.
+   * @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.
    */
   function useMouseAndTouchTracker(environment, handleBlur, downshiftRefs) {
     var mouseAndTouchTrackersRef = React__namespace.useRef({
@@ -2258,8 +2327,8 @@
   /**
    * Custom hook that checks if getter props are called correctly.
    *
-   * @param  {...any} propKeys Getter prop names to be handled.
-   * @returns {Function} Setter function called inside getter props to set call information.
+   * @param propKeys Getter prop names to be handled.
+   * @returns Setter function called inside getter props to set call information.
    */
   /* istanbul ignore next */
   {
@@ -2295,120 +2364,58 @@
         getterPropsCalledRef.current[propKey] = {
           suppressRefError: suppressRefError,
           refKey: refKey,
-          elementRef: elementRef
-        };
-      }, []);
-      return setGetterPropCallInfo;
-    };
-  }
-  function useScrollIntoView(_ref) {
-    var highlightedIndex = _ref.highlightedIndex,
-      isOpen = _ref.isOpen,
-      itemRefs = _ref.itemRefs,
-      getItemNodeFromIndex = _ref.getItemNodeFromIndex,
-      menuElement = _ref.menuElement,
-      scrollIntoViewProp = _ref.scrollIntoView;
-    // 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(itemRefs.current).length) {
-        return;
-      }
-      if (shouldScrollRef.current === false) {
-        shouldScrollRef.current = true;
-      } else {
-        scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [highlightedIndex]);
-    return shouldScrollRef;
-  }
-
-  // eslint-disable-next-line import/no-mutable-exports
-  var useControlPropsValidator = noop;
-  /* istanbul ignore next */
-  {
-    useControlPropsValidator = function useControlPropsValidator(_ref2) {
-      var props = _ref2.props,
-        state = _ref2.state;
-      // used for checking when props are moving from controlled to uncontrolled.
-      var prevPropsRef = React__namespace.useRef(props);
-      var isInitialMount = useIsInitialMount();
-      React__namespace.useEffect(function () {
-        if (isInitialMount) {
-          return;
-        }
-        validateControlledUnchanged(state, prevPropsRef.current, props);
-        prevPropsRef.current = props;
-      }, [state, props, isInitialMount]);
-    };
-  }
-
-  /**
-   * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
-   * In that case, selects the item and resets to defaults for open state and highlighted idex.
-   * @param {Object} props The useCombobox props.
-   * @param {number} highlightedIndex The index from the state.
-   * @param {boolean} inputValue Also return the input value for state.
-   * @returns The changes for the state.
-   */
-  function getChangesOnSelection(props, highlightedIndex, inputValue) {
-    var _props$items;
-    if (inputValue === void 0) {
-      inputValue = true;
-    }
-    var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0;
-    return _extends({
-      isOpen: false,
-      highlightedIndex: -1
-    }, shouldSelect && _extends({
-      selectedItem: props.items[highlightedIndex],
-      isOpen: getDefaultValue$1(props, 'isOpen', defaultStateValues$1),
-      highlightedIndex: getDefaultValue$1(props, 'highlightedIndex', defaultStateValues$1)
-    }, inputValue && {
-      inputValue: props.itemToString(props.items[highlightedIndex])
-    }));
-  }
-
-  /**
-   * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
-   * Used by useSelect and useCombobox.
-   *
-   * @param {Object} prevState
-   * @param {Object} newState
-   * @returns {boolean} Wheather the states are deeply equal.
-   */
-  function isDropdownsStateEqual(prevState, newState) {
-    return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
+          elementRef: elementRef
+        };
+      }, []);
+      return setGetterPropCallInfo;
+    };
   }
 
+  // istanbul ignore next
+  var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+
   /**
-   * Returns the new highlightedIndex based on the defaultHighlightedIndex prop, if it's not disabled.
-   *
-   * @param {Object} props Props from useCombobox or useSelect.
-   * @returns {number} The highlighted index.
+   * 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 getItemId The function to get the item id from index.
+   * @returns Function that when called prevents the scroll.
    */
-  function getDefaultHighlightedIndex(props) {
-    var highlightedIndex = getDefaultValue$1(props, 'highlightedIndex', defaultStateValues$1);
-    if (highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
-      return -1;
-    }
-    return highlightedIndex;
+  function useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuElement, itemElements, 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) {
+        return;
+      }
+      if (shouldScrollRef.current) {
+        var itemElement = itemElements[getItemId(highlightedIndex)];
+        if (itemElement && menuElement) {
+          scrollIntoView(itemElement, menuElement);
+        }
+      } else {
+        shouldScrollRef.current = true;
+      }
+    }, [highlightedIndex]);
+    return React__namespace.useCallback(function preventScroll() {
+      shouldScrollRef.current = false;
+    }, []);
   }
 
   /**
-   * Returns the new highlightedIndex based on the initialHighlightedIndex prop, if not disabled.
+   * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+   * Used by useSelect and useCombobox.
    *
-   * @param {Object} props Props from useCombobox or useSelect.
-   * @returns {number} The highlighted index.
+   * @param prevState The previous dropdown state.
+   * @param newState The new dropdown state.
+   * @returns Wheather the states are deeply equal.
    */
-  function getInitialHighlightedIndex(props) {
-    var highlightedIndex = getInitialValue$1(props, 'highlightedIndex', defaultStateValues$1);
-    if (highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
-      return -1;
-    }
-    return highlightedIndex;
+  function isDropdownStateEqual(prevState, newState) {
+    return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
   }
 
   function downshiftCommonReducer(state, props, action, stateChangeTypes) {
@@ -2429,13 +2436,13 @@
       case stateChangeTypes.FunctionToggleMenu:
         changes = {
           isOpen: !state.isOpen,
-          highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
+          highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props.items, props.initialHighlightedIndex, props.defaultHighlightedIndex, props.isItemDisabled, props.itemToKey, state.selectedItem, state.highlightedIndex, 0)
         };
         break;
       case stateChangeTypes.FunctionOpenMenu:
         changes = {
           isOpen: true,
-          highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
+          highlightedIndex: getHighlightedIndexOnOpen(props.items, props.initialHighlightedIndex, props.defaultHighlightedIndex, props.isItemDisabled, props.itemToKey, state.selectedItem, state.highlightedIndex, 0)
         };
         break;
       case stateChangeTypes.FunctionCloseMenu:
@@ -2444,9 +2451,12 @@
         };
         break;
       case stateChangeTypes.FunctionSetHighlightedIndex:
-        changes = {
-          highlightedIndex: props.isItemDisabled(props.items[action.highlightedIndex], action.highlightedIndex) ? -1 : action.highlightedIndex
-        };
+        {
+          var highlightedIndex = action.highlightedIndex;
+          changes = {
+            highlightedIndex: props.isItemDisabled(props.items[highlightedIndex], highlightedIndex) ? -1 : highlightedIndex
+          };
+        }
         break;
       case stateChangeTypes.FunctionSetInputValue:
         changes = {
@@ -2455,10 +2465,10 @@
         break;
       case stateChangeTypes.FunctionReset:
         changes = {
-          highlightedIndex: getDefaultHighlightedIndex(props),
-          isOpen: getDefaultValue$1(props, 'isOpen', defaultStateValues$1),
-          selectedItem: getDefaultValue$1(props, 'selectedItem', defaultStateValues$1),
-          inputValue: getDefaultValue$1(props, 'inputValue', defaultStateValues$1)
+          highlightedIndex: getDefaultHighlightedIndex(props.items, props.isItemDisabled, props.defaultHighlightedIndex),
+          isOpen: getDefaultValue(props.defaultIsOpen, dropdownDefaultStateValues.isOpen),
+          selectedItem: getDefaultValue(props.defaultSelectedItem, dropdownDefaultStateValues.selectedItem),
+          inputValue: getDefaultValue(props.defaultInputValue, dropdownDefaultStateValues.inputValue)
         };
         break;
       default:
@@ -2468,17 +2478,11 @@
   }
   /* eslint-enable complexity */
 
-  var propTypes$3 = _extends({}, propTypes$4, {
+  var propTypes$3 = _extends({}, dropdownPropTypes, {
     items: PropTypes.array.isRequired,
     isItemDisabled: PropTypes.func
   });
 
-  var defaultProps$2 = _extends({}, defaultProps$3, {
-    isItemDisabled: function isItemDisabled() {
-      return false;
-    }
-  });
-
   function getItemIndexByCharacterKey(_ref) {
     var keysSoFar = _ref.keysSoFar,
       highlightedIndex = _ref.highlightedIndex,
@@ -2547,16 +2551,15 @@
   });
 
   /* eslint-disable complexity */
-  function downshiftSelectReducer(state, props, action) {
-    var _props$items;
+  function downshiftSelectReducer(state, action) {
     var type = action.type,
-      altKey = action.altKey;
+      props = action.props;
     var changes;
     switch (type) {
       case ItemClick$1:
         changes = {
-          isOpen: getDefaultValue$1(props, 'isOpen', defaultStateValues$1),
-          highlightedIndex: getDefaultHighlightedIndex(props),
+          isOpen: getDefaultValue(props.defaultIsOpen, dropdownDefaultStateValues.isOpen),
+          highlightedIndex: getDefaultHighlightedIndex(props.items, props.isItemDisabled, props.defaultHighlightedIndex),
           selectedItem: props.items[action.index]
         };
         break;
@@ -2583,7 +2586,8 @@
         break;
       case ToggleButtonKeyDownArrowDown:
         {
-          var _highlightedIndex = state.isOpen ? getHighlightedIndex(state.highlightedIndex, 1, props.items, props.isItemDisabled) : altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1);
+          var altKey = action.altKey;
+          var _highlightedIndex = state.isOpen ? getHighlightedIndex(state.highlightedIndex, 1, props.items, props.isItemDisabled) : altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props.items, props.initialHighlightedIndex, props.defaultHighlightedIndex, props.isItemDisabled, props.itemToKey, state.selectedItem, state.highlightedIndex, 1);
           changes = {
             highlightedIndex: _highlightedIndex,
             isOpen: true
@@ -2591,20 +2595,23 @@
         }
         break;
       case ToggleButtonKeyDownArrowUp:
-        if (state.isOpen && altKey) {
-          changes = getChangesOnSelection(props, state.highlightedIndex, false);
-        } else {
-          var _highlightedIndex2 = state.isOpen ? getHighlightedIndex(state.highlightedIndex, -1, props.items, props.isItemDisabled) : getHighlightedIndexOnOpen(props, state, -1);
-          changes = {
-            highlightedIndex: _highlightedIndex2,
-            isOpen: true
-          };
+        {
+          var _altKey = action.altKey;
+          if (state.isOpen && _altKey) {
+            changes = getChangesOnSelection(props.items, props.itemToString, props.defaultIsOpen, props.defaultHighlightedIndex, state.highlightedIndex, false);
+          } else {
+            var _highlightedIndex2 = state.isOpen ? getHighlightedIndex(state.highlightedIndex, -1, props.items, props.isItemDisabled) : getHighlightedIndexOnOpen(props.items, props.initialHighlightedIndex, props.defaultHighlightedIndex, props.isItemDisabled, props.itemToKey, state.selectedItem, state.highlightedIndex, -1);
+            changes = {
+              highlightedIndex: _highlightedIndex2,
+              isOpen: true
+            };
+          }
         }
         break;
       // only triggered when menu is open.
       case ToggleButtonKeyDownEnter:
       case ToggleButtonKeyDownSpaceButton:
-        changes = getChangesOnSelection(props, state.highlightedIndex, false);
+        changes = getChangesOnSelection(props.items, props.itemToString, props.defaultIsOpen, props.defaultHighlightedIndex, state.highlightedIndex, false);
         break;
       case ToggleButtonKeyDownHome:
         changes = {
@@ -2638,7 +2645,7 @@
         changes = _extends({
           isOpen: false,
           highlightedIndex: -1
-        }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && {
+        }, state.highlightedIndex >= 0 && props.items.length && {
           selectedItem: props.items[state.highlightedIndex]
         });
         break;
@@ -2654,59 +2661,9 @@
   }
   /* eslint-enable complexity */
 
-  // eslint-disable-next-line @typescript-eslint/dot-notation
-  var reactUseId$1 = React__namespace['useId'];
-  var useElementIds$1 = typeof reactUseId$1 === 'function' ? useElementIdsR18$1 : useElementIdsLegacy$1;
-  function useElementIdsR18$1(_ref) {
-    var id = _ref.id,
-      labelId = _ref.labelId,
-      menuId = _ref.menuId,
-      getItemId = _ref.getItemId,
-      toggleButtonId = _ref.toggleButtonId,
-      inputId = _ref.inputId;
-    var reactId = "downshift-" + reactUseId$1();
-    if (!id) {
-      id = reactId;
-    }
-    var elementIds = React__namespace.useMemo(function () {
-      return {
-        labelId: labelId != null ? labelId : id + "-label",
-        menuId: menuId != null ? menuId : id + "-menu",
-        getItemId: getItemId != null ? getItemId : function (index) {
-          return id + "-item-" + index;
-        },
-        toggleButtonId: toggleButtonId != null ? toggleButtonId : id + "-toggle-button",
-        inputId: inputId != null ? inputId : id + "-input"
-      };
-    }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
-    return elementIds;
-  }
-  function useElementIdsLegacy$1(_ref2) {
-    var id = _ref2.id,
-      labelId = _ref2.labelId,
-      menuId = _ref2.menuId,
-      getItemId = _ref2.getItemId,
-      toggleButtonId = _ref2.toggleButtonId,
-      inputId = _ref2.inputId;
-    var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
-    var baseId = baseIdRef.current;
-    var elementIds = React__namespace.useMemo(function () {
-      return {
-        labelId: labelId != null ? labelId : baseId + "-label",
-        menuId: menuId != null ? menuId : baseId + "-menu",
-        getItemId: getItemId != null ? getItemId : function (index) {
-          return baseId + "-item-" + index;
-        },
-        toggleButtonId: toggleButtonId != null ? toggleButtonId : baseId + "-toggle-button",
-        inputId: inputId != null ? inputId : baseId + "-input"
-      };
-    }, [getItemId, inputId, labelId, menuId, toggleButtonId, baseId]);
-    return elementIds;
-  }
-
   var _excluded$3 = ["onClick"],
-    _excluded2$3 = ["onMouseLeave", "refKey", "ref"],
-    _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
+    _excluded2$3 = ["onMouseLeave", "refKey", "ref", "aria-label"],
+    _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref", "disabled"],
     _excluded4$1 = ["item", "index", "onMouseMove", "onClick", "onMouseDown", "onPress", "refKey", "disabled", "ref"];
   useSelect.stateChangeTypes = stateChangeTypes$3;
   function useSelect(userProps) {
@@ -2715,22 +2672,23 @@
     }
     validatePropTypes$1(userProps, useSelect, propTypes$3);
     // Props defaults and destructuring.
-    var props = _extends({}, defaultProps$2, userProps);
+    var props = _extends({}, dropdownDefaultProps, userProps);
     var scrollIntoView = props.scrollIntoView,
       environment = props.environment,
       getA11yStatusMessage = props.getA11yStatusMessage;
     // Initial state depending on controlled props.
-    var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$3, isDropdownsStateEqual),
+    var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$3, isDropdownStateEqual),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var isOpen = state.isOpen,
       highlightedIndex = state.highlightedIndex,
       selectedItem = state.selectedItem,
       inputValue = state.inputValue;
-    // Element efs.
+
+    // Element refs.
     var toggleButtonRef = React.useRef(null);
     var menuRef = React.useRef(null);
-    var itemRefs = React.useRef({});
+    var itemsRef = React.useRef({});
 
     // used to keep the inputValue clearTimeout object between renders.
     var clearTimeoutRef = React.useRef(null);
@@ -2742,24 +2700,12 @@
       props: props
     });
 
-    // Some utils.
-    var getItemNodeFromIndex = React.useCallback(function (index) {
-      return itemRefs.current[elementIds.getItemId(index)];
-    }, [elementIds]);
-
     // 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 shouldScrollRef = useScrollIntoView({
-      menuElement: menuRef.current,
-      highlightedIndex: highlightedIndex,
-      isOpen: isOpen,
-      itemRefs: itemRefs,
-      scrollIntoView: scrollIntoView,
-      getItemNodeFromIndex: getItemNodeFromIndex
-    });
-    // Sets cleanup for the keysSoFar callback, debounded after 500ms.
+    var preventScroll = useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuRef.current, itemsRef.current, 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.
       clearTimeoutRef.current = debounce(function (outerDispatch) {
@@ -2771,7 +2717,8 @@
 
       // Cancel any pending debounced calls on mount
       return function () {
-        clearTimeoutRef.current.cancel();
+        var _clearTimeoutRef$curr;
+        (_clearTimeoutRef$curr = clearTimeoutRef.current) == null || _clearTimeoutRef$curr.cancel();
       };
     }, []);
     // Invokes the keysSoFar callback set up above.
@@ -2779,7 +2726,7 @@
       if (!inputValue) {
         return;
       }
-      clearTimeoutRef.current(dispatch);
+      clearTimeoutRef.current == null || clearTimeoutRef.current(dispatch);
     }, [dispatch, inputValue]);
     useControlPropsValidator({
       props: props,
@@ -2787,7 +2734,7 @@
     });
     // Focus the toggle button on first render if required.
     React.useEffect(function () {
-      var focusOnOpen = getInitialValue$1(props, 'isOpen', defaultStateValues$1);
+      var focusOnOpen = getInitialValue(props.isOpen, props.initialIsOpen, props.defaultIsOpen, dropdownDefaultStateValues.isOpen);
       if (focusOnOpen && toggleButtonRef.current) {
         toggleButtonRef.current.focus();
       }
@@ -2808,7 +2755,7 @@
     // Reset itemRefs on close.
     React.useEffect(function () {
       if (!isOpen) {
-        itemRefs.current = {};
+        itemsRef.current = {};
       }
     }, [isOpen]);
 
@@ -2893,50 +2840,11 @@
       };
     }, [dispatch, latest]);
 
-    // Action functions.
-    var toggleMenu = React.useCallback(function () {
-      dispatch({
-        type: FunctionToggleMenu$1
-      });
-    }, [dispatch]);
-    var closeMenu = React.useCallback(function () {
-      dispatch({
-        type: FunctionCloseMenu$1
-      });
-    }, [dispatch]);
-    var openMenu = React.useCallback(function () {
-      dispatch({
-        type: FunctionOpenMenu$1
-      });
-    }, [dispatch]);
-    var setHighlightedIndex = React.useCallback(function (newHighlightedIndex) {
-      dispatch({
-        type: FunctionSetHighlightedIndex$1,
-        highlightedIndex: newHighlightedIndex
-      });
-    }, [dispatch]);
-    var selectItem = React.useCallback(function (newSelectedItem) {
-      dispatch({
-        type: FunctionSelectItem$1,
-        selectedItem: newSelectedItem
-      });
-    }, [dispatch]);
-    var reset = React.useCallback(function () {
-      dispatch({
-        type: FunctionReset$2
-      });
-    }, [dispatch]);
-    var setInputValue = React.useCallback(function (newInputValue) {
-      dispatch({
-        type: FunctionSetInputValue$1,
-        inputValue: newInputValue
-      });
-    }, [dispatch]);
     // Getter functions.
-    var getLabelProps = React.useCallback(function (_temp) {
-      var _ref = _temp === void 0 ? {} : _temp,
+    var getLabelProps = React.useCallback(function (labelProps) {
+      var _ref = labelProps != null ? labelProps : {},
         onClick = _ref.onClick,
-        labelProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
       var labelHandleClick = function labelHandleClick() {
         var _toggleButtonRef$curr;
         (_toggleButtonRef$curr = toggleButtonRef.current) == null || _toggleButtonRef$curr.focus();
@@ -2945,17 +2853,18 @@
         id: elementIds.labelId,
         htmlFor: elementIds.toggleButtonId,
         onClick: callAllEventHandlers(onClick, labelHandleClick)
-      }, labelProps);
+      }, rest);
     }, [elementIds]);
-    var getMenuProps = React.useCallback(function (_temp2, _temp3) {
+    var getMenuProps = React.useCallback(function (menuProps, otherProps) {
       var _extends2;
-      var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      var _ref2 = menuProps != null ? menuProps : {},
         onMouseLeave = _ref2.onMouseLeave,
         _ref2$refKey = _ref2.refKey,
         refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,
         ref = _ref2.ref,
+        ariaLabel = _ref2['aria-label'],
         rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
-      var _ref3 = _temp3 === void 0 ? {} : _temp3,
+      var _ref3 = otherProps != null ? otherProps : {},
         _ref3$suppressRefErro = _ref3.suppressRefError,
         suppressRefError = _ref3$suppressRefErro === void 0 ? false : _ref3$suppressRefErro;
       var menuHandleMouseLeave = function menuHandleMouseLeave() {
@@ -2966,11 +2875,11 @@
       setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
       return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
         menuRef.current = menuNode;
-      }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = rest && rest['aria-label'] ? undefined : "" + elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), _extends2), rest);
+      }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-label'] = ariaLabel, _extends2['aria-labelledby'] = ariaLabel ? undefined : "" + elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), _extends2), rest);
     }, [dispatch, setGetterPropCallInfo, elementIds]);
-    var getToggleButtonProps = React.useCallback(function (_temp4, _temp5) {
+    var getToggleButtonProps = React.useCallback(function (toggleButtonProps, otherProps) {
       var _extends3;
-      var _ref4 = _temp4 === void 0 ? {} : _temp4,
+      var _ref4 = toggleButtonProps != null ? toggleButtonProps : {},
         onBlur = _ref4.onBlur,
         onClick = _ref4.onClick;
         _ref4.onPress;
@@ -2978,8 +2887,9 @@
         _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 = _temp5 === void 0 ? {} : _temp5,
+      var _ref5 = otherProps != null ? otherProps : {},
         _ref5$suppressRefErro = _ref5.suppressRefError,
         suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
       var latestState = latest.current.state;
@@ -2997,9 +2907,9 @@
       };
       var toggleButtonHandleKeyDown = function toggleButtonHandleKeyDown(event) {
         var key = normalizeArrowKey(event);
-        if (key && toggleButtonKeyDownHandlers[key]) {
+        if (key && key in toggleButtonKeyDownHandlers) {
           toggleButtonKeyDownHandlers[key](event);
-        } else if (isAcceptedCharacterKey(key)) {
+        } else if (/^\S{1}$/.test(key)) {
           dispatch({
             type: ToggleButtonKeyDownCharacter,
             key: key
@@ -3008,20 +2918,22 @@
       };
       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 && 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) {
+      }), _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) {
         /* istanbul ignore if (react-native) */
         {
-          toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
-          toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
+          Object.assign(toggleProps, {
+            onClick: callAllEventHandlers(onClick, toggleButtonHandleClick),
+            onKeyDown: callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown)
+          });
         }
       }
       setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
       return toggleProps;
     }, [dispatch, elementIds, latest, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers]);
-    var getItemProps = React.useCallback(function (_temp6) {
+    var getItemProps = React.useCallback(function (itemProps) {
       var _extends4;
-      var _ref6 = _temp6 === void 0 ? {} : _temp6,
+      var _ref6 = itemProps != null ? itemProps : {},
         itemProp = _ref6.item,
         indexProp = _ref6.index,
         onMouseMove = _ref6.onMouseMove,
@@ -3047,7 +2959,7 @@
         if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
           return;
         }
-        shouldScrollRef.current = false;
+        preventScroll();
         dispatch({
           type: ItemMouseMove$1,
           index: index,
@@ -3064,21 +2976,61 @@
         return e.preventDefault();
       }; // keep focus on the toggle after item click select.
 
-      var itemProps = _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (itemNode) {
+      var resultItemProps = _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (itemNode) {
         if (itemNode) {
-          itemRefs.current[elementIds.getItemId(index)] = 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), rest);
+      }), _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);
       if (!disabled) {
         /* istanbul ignore next (react-native) */
         {
-          itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
+          Object.assign(resultItemProps, {
+            onClick: callAllEventHandlers(onClick, itemHandleClick)
+          });
         }
       }
-      itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
-      itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown);
-      return itemProps;
-    }, [latest, elementIds, mouseAndTouchTrackers, shouldScrollRef, dispatch]);
+      return resultItemProps;
+    }, [latest, elementIds, mouseAndTouchTrackers, preventScroll, dispatch]);
+
+    // Action functions.
+    var toggleMenu = React.useCallback(function () {
+      dispatch({
+        type: FunctionToggleMenu$1
+      });
+    }, [dispatch]);
+    var closeMenu = React.useCallback(function () {
+      dispatch({
+        type: FunctionCloseMenu$1
+      });
+    }, [dispatch]);
+    var openMenu = React.useCallback(function () {
+      dispatch({
+        type: FunctionOpenMenu$1
+      });
+    }, [dispatch]);
+    var setHighlightedIndex = React.useCallback(function (newHighlightedIndex) {
+      dispatch({
+        type: FunctionSetHighlightedIndex$1,
+        highlightedIndex: newHighlightedIndex
+      });
+    }, [dispatch]);
+    var selectItem = React.useCallback(function (newSelectedItem) {
+      dispatch({
+        type: FunctionSelectItem$1,
+        selectedItem: newSelectedItem
+      });
+    }, [dispatch]);
+    var reset = React.useCallback(function () {
+      dispatch({
+        type: FunctionReset$2
+      });
+    }, [dispatch]);
+    var setInputValue = React.useCallback(function (newInputValue) {
+      dispatch({
+        type: FunctionSetInputValue$1,
+        inputValue: newInputValue
+      });
+    }, [dispatch]);
     return {
       // prop getters.
       getToggleButtonProps: getToggleButtonProps,
@@ -3101,6 +3053,18 @@
     };
   }
 
+  function getInitialState$2(props) {
+    var initialState = getInitialState$3(props);
+    var selectedItem = initialState.selectedItem;
+    var inputValue = initialState.inputValue;
+    if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
+      inputValue = props.itemToString(selectedItem);
+    }
+    return _extends({}, initialState, {
+      inputValue: inputValue
+    });
+  }
+
   var InputKeyDownArrowDown = '__input_keydown_arrow_down__' ;
   var InputKeyDownArrowUp = '__input_keydown_arrow_up__' ;
   var InputKeyDownEscape = '__input_keydown_escape__' ;
@@ -3152,27 +3116,6 @@
     ToggleButtonClick: ToggleButtonClick
   });
 
-  function getInitialState$2(props) {
-    var initialState = getInitialState$3(props);
-    var selectedItem = initialState.selectedItem;
-    var inputValue = initialState.inputValue;
-    if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
-      inputValue = props.itemToString(selectedItem);
-    }
-    return _extends({}, initialState, {
-      inputValue: inputValue
-    });
-  }
-  var propTypes$2 = _extends({}, propTypes$4, {
-    items: PropTypes.array.isRequired,
-    isItemDisabled: PropTypes.func,
-    inputValue: PropTypes.string,
-    defaultInputValue: PropTypes.string,
-    initialInputValue: PropTypes.string,
-    inputId: PropTypes.string,
-    onInputValueChange: PropTypes.func
-  });
-
   /**
    * The useCombobox version of useControlledReducer, which also
    * checks if the controlled prop selectedItem changed between
@@ -3180,20 +3123,20 @@
    * string equivalent. It uses the common useEnhancedReducer to
    * compute the rest of the state.
    *
-   * @param {Function} reducer Reducer function from downshift.
-   * @param {Object} props The hook props, also passed to createInitialState.
-   * @param {Function} createInitialState Function that returns the initial state.
-   * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
-   * @returns {Array} An array with the state and an action dispatcher.
+   * @param reducer Reducer function from downshift.
+   * @param props The hook props, also passed to createInitialState.
+   * @param createInitialState Function that returns the initial state.
+   * @param isStateEqual Function that checks if a previous state is equal to the next.
+   * @returns An array with the state and an action dispatcher.
    */
   function useControlledReducer(reducer, props, createInitialState, isStateEqual) {
-    var previousSelectedItemRef = React.useRef();
+    var previousSelectedItemRef = React.useRef(null);
     var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
       state = _useEnhancedReducer[0],
       dispatch = _useEnhancedReducer[1];
     var isInitialMount = useIsInitialMount();
     React.useEffect(function () {
-      if (!isControlledProp(props, 'selectedItem')) {
+      if (props.selectedItem === undefined) {
         return;
       }
       if (!isInitialMount // on first mount we already have the proper inputValue for a initial selected item.
@@ -3211,23 +3154,27 @@
     }, [state.selectedItem, props.selectedItem]);
     return [getState(state, props), dispatch];
   }
-  var defaultProps$1 = _extends({}, defaultProps$3, {
-    isItemDisabled: function isItemDisabled() {
-      return false;
-    }
+
+  var propTypes$2 = _extends({}, dropdownPropTypes, {
+    items: PropTypes.array.isRequired,
+    isItemDisabled: PropTypes.func,
+    inputValue: PropTypes.string,
+    defaultInputValue: PropTypes.string,
+    initialInputValue: PropTypes.string,
+    inputId: PropTypes.string,
+    onInputValueChange: PropTypes.func
   });
 
   /* eslint-disable complexity */
-  function downshiftUseComboboxReducer(state, props, action) {
-    var _props$items;
+  function downshiftUseComboboxReducer(state, action) {
     var type = action.type,
-      altKey = action.altKey;
+      props = action.props;
     var changes;
     switch (type) {
       case ItemClick:
         changes = {
-          isOpen: getDefaultValue$1(props, 'isOpen', defaultStateValues$1),
-          highlightedIndex: getDefaultHighlightedIndex(props),
+          isOpen: getDefaultValue(props.defaultIsOpen, dropdownDefaultStateValues.isOpen),
+          highlightedIndex: getDefaultHighlightedIndex(props.items, props.isItemDisabled, props.defaultHighlightedIndex),
           selectedItem: props.items[action.index],
           inputValue: props.itemToString(props.items[action.index])
         };
@@ -3239,15 +3186,15 @@
           };
         } else {
           changes = {
-            highlightedIndex: altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1),
+            highlightedIndex: action.altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props.items, props.initialHighlightedIndex, props.defaultHighlightedIndex, props.isItemDisabled, props.itemToKey, state.selectedItem, state.highlightedIndex, 1),
             isOpen: props.items.length >= 0
           };
         }
         break;
       case InputKeyDownArrowUp:
         if (state.isOpen) {
-          if (altKey) {
-            changes = getChangesOnSelection(props, state.highlightedIndex);
+          if (action.altKey) {
+            changes = getChangesOnSelection(props.items, props.itemToString, props.defaultIsOpen, props.defaultHighlightedIndex, state.highlightedIndex, true);
           } else {
             changes = {
               highlightedIndex: getHighlightedIndex(state.highlightedIndex, -1, props.items, props.isItemDisabled, true)
@@ -3255,13 +3202,13 @@
           }
         } else {
           changes = {
-            highlightedIndex: getHighlightedIndexOnOpen(props, state, -1),
+            highlightedIndex: getHighlightedIndexOnOpen(props.items, props.initialHighlightedIndex, props.defaultHighlightedIndex, props.isItemDisabled, props.itemToKey, state.selectedItem, state.highlightedIndex, -1),
             isOpen: props.items.length >= 0
           };
         }
         break;
       case InputKeyDownEnter:
-        changes = getChangesOnSelection(props, state.highlightedIndex);
+        changes = getChangesOnSelection(props.items, props.itemToString, props.defaultIsOpen, props.defaultHighlightedIndex, state.highlightedIndex, true);
         break;
       case InputKeyDownEscape:
         changes = _extends({
@@ -3296,7 +3243,7 @@
         changes = _extends({
           isOpen: false,
           highlightedIndex: -1
-        }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && {
+        }, state.highlightedIndex >= 0 && props.items.length && action.selectItem && {
           selectedItem: props.items[state.highlightedIndex],
           inputValue: props.itemToString(props.items[state.highlightedIndex])
         });
@@ -3304,14 +3251,14 @@
       case InputChange:
         changes = {
           isOpen: true,
-          highlightedIndex: getDefaultHighlightedIndex(props),
+          highlightedIndex: getDefaultHighlightedIndex(props.items, props.isItemDisabled, props.defaultHighlightedIndex),
           inputValue: action.inputValue
         };
         break;
       case InputClick:
         changes = {
           isOpen: !state.isOpen,
-          highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
+          highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props.items, props.initialHighlightedIndex, props.defaultHighlightedIndex, props.isItemDisabled, props.itemToKey, state.selectedItem, state.highlightedIndex, 0)
         };
         break;
       case FunctionSelectItem:
@@ -3332,10 +3279,10 @@
   }
   /* eslint-enable complexity */
 
-  var _excluded$2 = ["onMouseLeave", "refKey", "ref"],
+  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"],
-    _excluded4 = ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "onClick", "refKey", "ref"];
+    _excluded3$1 = ["onClick", "onPress", "refKey", "ref", "disabled"],
+    _excluded4 = ["aria-label", "disabled", "onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "onClick", "refKey", "ref"];
   useCombobox.stateChangeTypes = stateChangeTypes$2;
   function useCombobox(userProps) {
     if (userProps === void 0) {
@@ -3343,13 +3290,13 @@
     }
     validatePropTypes$1(userProps, useCombobox, propTypes$2);
     // Props defaults and destructuring.
-    var props = _extends({}, defaultProps$1, userProps);
+    var props = _extends({}, dropdownDefaultProps, userProps);
     var items = props.items,
       scrollIntoView = props.scrollIntoView,
       environment = props.environment,
       getA11yStatusMessage = props.getA11yStatusMessage;
     // Initial state depending on controlled props.
-    var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$2, isDropdownsStateEqual),
+    var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$2, isDropdownStateEqual),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var isOpen = state.isOpen,
@@ -3359,7 +3306,7 @@
 
     // Element refs.
     var menuRef = React.useRef(null);
-    var itemRefs = React.useRef({});
+    var itemsRef = React.useRef({});
     var inputRef = React.useRef(null);
     var toggleButtonRef = React.useRef(null);
     var isInitialMount = useIsInitialMount();
@@ -3373,29 +3320,19 @@
       state: state,
       props: props
     });
-    var getItemNodeFromIndex = React.useCallback(function (index) {
-      return itemRefs.current[elementIds.getItemId(index)];
-    }, [elementIds]);
 
     // 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 shouldScrollRef = useScrollIntoView({
-      menuElement: menuRef.current,
-      highlightedIndex: highlightedIndex,
-      isOpen: isOpen,
-      itemRefs: itemRefs,
-      scrollIntoView: scrollIntoView,
-      getItemNodeFromIndex: getItemNodeFromIndex
-    });
+    var preventScroll = useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuRef.current, itemsRef.current, elementIds.getItemId);
     useControlPropsValidator({
-      props: props,
-      state: state
+      state: state,
+      props: props
     });
     // Focus the input on first render if required.
     React.useEffect(function () {
-      var focusOnOpen = getInitialValue$1(props, 'isOpen', defaultStateValues$1);
+      var focusOnOpen = getInitialValue(props.isOpen, props.initialIsOpen, props.defaultIsOpen, dropdownDefaultStateValues.isOpen);
       if (focusOnOpen && inputRef.current) {
         inputRef.current.focus();
       }
@@ -3421,13 +3358,13 @@
     // Reset itemRefs on close.
     React.useEffect(function () {
       if (!isOpen) {
-        itemRefs.current = {};
+        itemsRef.current = {};
       }
     }, [isOpen]);
     // Reset itemRefs on close.
     React.useEffect(function () {
       var _inputRef$current;
-      if (!isOpen || !(environment != null && environment.document) || !(inputRef != null && (_inputRef$current = inputRef.current) != null && _inputRef$current.focus)) {
+      if (!isOpen || !(environment != null && environment.document) || !((_inputRef$current = inputRef.current) != null && _inputRef$current.focus)) {
         return;
       }
       if (environment.document.activeElement !== inputRef.current) {
@@ -3517,29 +3454,30 @@
         htmlFor: elementIds.inputId
       }, labelProps);
     }, [elementIds]);
-    var getMenuProps = React.useCallback(function (_temp, _temp2) {
+    var getMenuProps = React.useCallback(function (menuProps, otherProps) {
       var _extends2;
-      var _ref = _temp === void 0 ? {} : _temp,
+      var _ref = menuProps != null ? menuProps : {},
         onMouseLeave = _ref.onMouseLeave,
         _ref$refKey = _ref.refKey,
         refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
         ref = _ref.ref,
+        ariaLabel = _ref['aria-label'],
         rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-      var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      var _ref2 = otherProps != null ? otherProps : {},
         _ref2$suppressRefErro = _ref2.suppressRefError,
         suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
       setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
       return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
         menuRef.current = menuNode;
-      }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = rest && rest['aria-label'] ? undefined : "" + elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
+      }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-label'] = ariaLabel, _extends2['aria-labelledby'] = ariaLabel ? undefined : "" + elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
         dispatch({
           type: MenuMouseLeave
         });
       }), _extends2), rest);
     }, [dispatch, setGetterPropCallInfo, elementIds]);
-    var getItemProps = React.useCallback(function (_temp3) {
+    var getItemProps = React.useCallback(function (itemProps) {
       var _extends3, _ref4;
-      var _ref3 = _temp3 === void 0 ? {} : _temp3,
+      var _ref3 = itemProps != null ? itemProps : {},
         itemProp = _ref3.item,
         indexProp = _ref3.index,
         _ref3$refKey = _ref3.refKey,
@@ -3567,7 +3505,7 @@
         if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
           return;
         }
-        shouldScrollRef.current = false;
+        preventScroll();
         dispatch({
           type: ItemMouseMove,
           index: index,
@@ -3586,21 +3524,22 @@
 
       return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
         if (itemNode) {
-          itemRefs.current[elementIds.getItemId(index)] = 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), {
         onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
         onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
       }, rest);
-    }, [dispatch, elementIds, latest, mouseAndTouchTrackers, shouldScrollRef]);
-    var getToggleButtonProps = React.useCallback(function (_temp4) {
+    }, [dispatch, elementIds, latest, mouseAndTouchTrackers, preventScroll]);
+    var getToggleButtonProps = React.useCallback(function (toggleButtonProps) {
       var _extends4;
-      var _ref5 = _temp4 === void 0 ? {} : _temp4,
+      var _ref5 = toggleButtonProps != null ? toggleButtonProps : {},
         onClick = _ref5.onClick;
         _ref5.onPress;
         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() {
@@ -3610,13 +3549,17 @@
       };
       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), !rest.disabled && _extends({}, {
+      }), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !disabled && _extends({}, {
         onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
-      }), rest);
+      }), {
+        disabled: disabled
+      }, rest);
     }, [dispatch, latest, elementIds]);
-    var getInputProps = React.useCallback(function (_temp5, _temp6) {
+    var getInputProps = React.useCallback(function (inputProps, otherProps) {
       var _extends5;
-      var _ref6 = _temp5 === void 0 ? {} : _temp5,
+      var _ref6 = inputProps != null ? inputProps : {},
+        ariaLabel = _ref6['aria-label'],
+        disabled = _ref6.disabled,
         onKeyDown = _ref6.onKeyDown,
         onChange = _ref6.onChange,
         onInput = _ref6.onInput,
@@ -3627,15 +3570,16 @@
         refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
         ref = _ref6.ref,
         rest = _objectWithoutPropertiesLoose(_ref6, _excluded4);
-      var _ref7 = _temp6 === void 0 ? {} : _temp6,
+      var _ref7 = otherProps != null ? otherProps : {},
         _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 && inputKeyDownHandlers[key]) {
-          inputKeyDownHandlers[key](event);
+        if (key && key in inputKeyDownHandlers) {
+          var validKey = key;
+          inputKeyDownHandlers[validKey](event);
         }
       };
       var inputHandleChange = function inputHandleChange(event) {
@@ -3663,13 +3607,13 @@
       /* istanbul ignore next (preact) */
       var onChangeKey = 'onInput' ;
       var eventHandlers = {};
-      if (!rest.disabled) {
+      if (!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'] = rest && rest['aria-label'] ? undefined : elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
+      }), _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]);
 
     // returns
@@ -3739,31 +3683,6 @@
     selectedItems: []
   };
 
-  /**
-   * Returns the initial value for a state key in the following order:
-   * 1. controlled prop, 2. initial prop, 3. default prop, 4. default
-   * value from Downshift.
-   *
-   * @param {Object} props Props passed to the hook.
-   * @param {string} propKey Props key to generate the value for.
-   * @returns {any} The initial value for that prop.
-   */
-  function getInitialValue(props, propKey) {
-    return getInitialValue$1(props, propKey, defaultStateValues);
-  }
-
-  /**
-   * Returns the default value for a state key in the following order:
-   * 1. controlled prop, 2. default prop, 3. default value from Downshift.
-   *
-   * @param {Object} props Props passed to the hook.
-   * @param {string} propKey Props key to generate the value for.
-   * @returns {any} The initial value for that prop.
-   */
-  function getDefaultValue(props, propKey) {
-    return getDefaultValue$1(props, propKey, defaultStateValues);
-  }
-
   /**
    * Gets the initial state based on the provided props. It uses initial, default
    * and controlled props related to state in order to compute the initial value.
@@ -3772,8 +3691,8 @@
    * @returns {Object} The initial state.
    */
   function getInitialState$1(props) {
-    var activeIndex = getInitialValue(props, 'activeIndex');
-    var selectedItems = getInitialValue(props, 'selectedItems');
+    var activeIndex = getInitialValue(props.activeIndex, props.initialActiveIndex, props.defaultActiveIndex, defaultStateValues.activeIndex);
+    var selectedItems = getInitialValue(props.selectedItems, props.initialSelectedItems, props.defaultSelectedItems, defaultStateValues.selectedItems);
     return {
       activeIndex: activeIndex,
       selectedItems: selectedItems
@@ -3817,9 +3736,9 @@
     return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
   }
   var propTypes$1 = {
-    stateReducer: propTypes$4.stateReducer,
-    itemToKey: propTypes$4.itemToKey,
-    environment: propTypes$4.environment,
+    stateReducer: dropdownPropTypes.stateReducer,
+    itemToKey: dropdownPropTypes.itemToKey,
+    environment: dropdownPropTypes.environment,
     selectedItems: PropTypes.array,
     initialSelectedItems: PropTypes.array,
     defaultSelectedItems: PropTypes.array,
@@ -3833,9 +3752,9 @@
     keyNavigationPrevious: PropTypes.string
   };
   var defaultProps = {
-    itemToKey: defaultProps$3.itemToKey,
-    stateReducer: defaultProps$3.stateReducer,
-    environment: defaultProps$3.environment,
+    itemToKey: dropdownDefaultProps.itemToKey,
+    stateReducer: dropdownDefaultProps.stateReducer,
+    environment: dropdownDefaultProps.environment,
     keyNavigationNext: 'ArrowRight',
     keyNavigationPrevious: 'ArrowLeft'
   };
@@ -3881,10 +3800,11 @@
   });
 
   /* eslint-disable complexity */
-  function downshiftMultipleSelectionReducer(state, props, action) {
+  function downshiftMultipleSelectionReducer(state, action) {
     var type = action.type,
       index = action.index,
-      selectedItem = action.selectedItem;
+      selectedItem = action.selectedItem,
+      props = action.props;
     var activeIndex = state.activeIndex,
       selectedItems = state.selectedItems;
     var changes;
@@ -3981,8 +3901,8 @@
         }
       case FunctionReset:
         changes = {
-          activeIndex: getDefaultValue(props, 'activeIndex'),
-          selectedItems: getDefaultValue(props, 'selectedItems')
+          activeIndex: getDefaultValue(props.defaultActiveIndex, defaultStateValues.activeIndex),
+          selectedItems: getDefaultValue(props.defaultSelectedItems, defaultStateValues.selectedItems)
         };
         break;
       default:
@@ -4214,7 +4134,7 @@
     TagRemoveClick: TagRemoveClick
   });
 
-  function useTagGroupReducer(state, _props, action) {
+  function useTagGroupReducer(state, action) {
     var type = action.type;
     var changes;
     switch (type) {
@@ -4275,8 +4195,9 @@
     return _extends({}, state, changes);
   }
 
-  // eslint-disable-next-line @typescript-eslint/dot-notation
-  var reactUseId = React__namespace['useId'];
+  // https://github.com/downshift-js/downshift/issues/1674#issuecomment-3924320872
+  var SafeReact = _extends({}, React__namespace);
+  var reactUseId = SafeReact.useId;
 
   // istanbul ignore next
   var useElementIds = typeof reactUseId === 'function' ? useElementIdsR18 : useElementIdsLegacy;
@@ -4451,7 +4372,7 @@
         'aria-atomic': 'false',
         'aria-relevant': 'additions',
         role: 'listbox',
-        onKeyDown: callAllEventHandlers$1(onKeyDown, handleKeyDown)
+        onKeyDown: callAllEventHandlers(onKeyDown, handleKeyDown)
       }, rest);
       return tagGroupProps;
     }, [dispatch, elementIds.tagGroupId]);
@@ -4476,11 +4397,11 @@
       var tagId = elementIds.getTagId(index);
       return _extends((_extends2 = {
         'aria-describedby': A11Y_DESCRIPTION_ELEMENT_ID
-      }, _extends2[refKey] = handleRefs$1(ref, function (itemNode) {
+      }, _extends2[refKey] = handleRefs(ref, function (itemNode) {
         if (itemNode) {
           itemRefs.current[tagId] = itemNode;
         }
-      }), _extends2['aria-labelledby'] = tagId, _extends2.role = 'option', _extends2.id = tagId, _extends2.onClick = callAllEventHandlers$1(onClick, handleClick), _extends2.tabIndex = latestState.activeIndex === index ? 0 : -1, _extends2), rest);
+      }), _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]);
     var getTagRemoveProps = React.useCallback(function (options) {
       var index = options.index,
@@ -4502,7 +4423,7 @@
         id: tagRemoveId,
         tabIndex: -1,
         'aria-labelledby': tagRemoveId + " " + tagId,
-        onClick: callAllEventHandlers$1(onClick, handleClick)
+        onClick: callAllEventHandlers(onClick, handleClick)
       }, rest);
     }, [elementIds, dispatch]);