downshift 9.3.1 → 9.4.0-alpha.0

package/dist/downshift.cjs.cjs

@@ -101,7 +101,7 @@ function useLatestRef(val) {
   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];
   }
@@ -123,7 +123,7 @@ function handleRefs$1() {
  * @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];
   }
@@ -145,7 +145,7 @@ function callAllEventHandlers$1() {
  * 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) {
@@ -166,7 +166,7 @@ function debounce$1(fn, time) {
   return wrapper;
 }
 
-var cleanupStatus = debounce$1(function (document) {
+var cleanupStatus = debounce(function (document) {
   getStatusDiv(document).textContent = '';
 }, 500);
 
@@ -247,6 +247,8 @@ function getState(state, props) {
   }
   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];
     }
@@ -278,93 +280,149 @@ function scrollIntoView(node, menuNode) {
 }
 
 /**
- * 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 */
+if (process.env.NODE_ENV !== 'production') {
+  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;
 }
 
 /**
@@ -453,34 +511,6 @@ function pickState(state) {
   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
@@ -490,112 +520,6 @@ function isPlainObject(obj) {
   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 */
-if (process.env.NODE_ENV !== 'production') {
-  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"],
@@ -746,7 +670,7 @@ var Downshift = /*#__PURE__*/function () {
             }
             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];
             }
           });
@@ -1480,7 +1404,7 @@ var Downshift = /*#__PURE__*/function () {
           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)
@@ -1666,7 +1590,7 @@ function callOnChangeProps(action, props, state, newState) {
       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));
@@ -1692,50 +1616,53 @@ function invokeOnChangeHandler(key, action, props, state, newState) {
  * 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),
@@ -1788,16 +1715,8 @@ function useIsInitialMount() {
   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,
@@ -1813,30 +1732,47 @@ var propTypes$5 = {
   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);
 
@@ -1872,7 +1808,7 @@ function useA11yMessageStatus(getA11yStatusMessage, options, dependencyArray, en
 }
 
 // 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,
@@ -1895,62 +1831,145 @@ var propTypes$4 = _extends({}, propTypes$5, {
   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) {
@@ -1958,21 +1977,71 @@ function getHighlightedIndexOnOpen(props, state, offset) {
       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 */
+if (process.env.NODE_ENV !== 'production') {
+  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({
@@ -2036,8 +2105,8 @@ var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
 /**
  * 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 */
 if (process.env.NODE_ENV !== 'production') {
@@ -2073,120 +2142,58 @@ if (process.env.NODE_ENV !== 'production') {
       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 */
-if (process.env.NODE_ENV !== 'production') {
-  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) {
@@ -2207,13 +2214,13 @@ function downshiftCommonReducer(state, props, action, stateChangeTypes) {
     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:
@@ -2222,9 +2229,12 @@ function downshiftCommonReducer(state, props, action, stateChangeTypes) {
       };
       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 = {
@@ -2233,10 +2243,10 @@ function downshiftCommonReducer(state, props, action, stateChangeTypes) {
       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:
@@ -2246,17 +2256,11 @@ function downshiftCommonReducer(state, props, action, stateChangeTypes) {
 }
 /* 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,
@@ -2325,16 +2329,15 @@ var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
 });
 
 /* 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;
@@ -2361,7 +2364,8 @@ function downshiftSelectReducer(state, props, action) {
       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
@@ -2369,20 +2373,23 @@ function downshiftSelectReducer(state, props, action) {
       }
       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 = {
@@ -2416,7 +2423,7 @@ function downshiftSelectReducer(state, props, action) {
       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;
@@ -2432,59 +2439,9 @@ function downshiftSelectReducer(state, props, action) {
 }
 /* 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) {
@@ -2493,22 +2450,23 @@ function useSelect(userProps) {
   }
   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);
@@ -2520,24 +2478,12 @@ function useSelect(userProps) {
     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) {
@@ -2549,7 +2495,8 @@ function useSelect(userProps) {
 
     // 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.
@@ -2557,7 +2504,7 @@ function useSelect(userProps) {
     if (!inputValue) {
       return;
     }
-    clearTimeoutRef.current(dispatch);
+    clearTimeoutRef.current == null || clearTimeoutRef.current(dispatch);
   }, [dispatch, inputValue]);
   useControlPropsValidator({
     props: props,
@@ -2565,7 +2512,7 @@ function useSelect(userProps) {
   });
   // 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();
     }
@@ -2586,7 +2533,7 @@ function useSelect(userProps) {
   // Reset itemRefs on close.
   React.useEffect(function () {
     if (!isOpen) {
-      itemRefs.current = {};
+      itemsRef.current = {};
     }
   }, [isOpen]);
 
@@ -2671,50 +2618,11 @@ function useSelect(userProps) {
     };
   }, [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();
@@ -2723,17 +2631,18 @@ function useSelect(userProps) {
       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() {
@@ -2744,11 +2653,11 @@ function useSelect(userProps) {
     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;
@@ -2756,8 +2665,9 @@ function useSelect(userProps) {
       _ref4$refKey = _ref4.refKey,
       refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
       ref = _ref4.ref,
+      disabled = _ref4.disabled,
       rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
-    var _ref5 = _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;
@@ -2775,9 +2685,9 @@ function useSelect(userProps) {
     };
     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
@@ -2786,20 +2696,22 @@ function useSelect(userProps) {
     };
     var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
       toggleButtonRef.current = toggleButtonNode;
-    }), _extends3['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends3['aria-controls'] = elementIds.menuId, _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-labelledby'] = rest && 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,
@@ -2825,7 +2737,7 @@ function useSelect(userProps) {
       if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
-      shouldScrollRef.current = false;
+      preventScroll();
       dispatch({
         type: ItemMouseMove$1,
         index: index,
@@ -2842,21 +2754,61 @@ function useSelect(userProps) {
       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,
@@ -2879,6 +2831,18 @@ function useSelect(userProps) {
   };
 }
 
+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 = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
 var InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
 var InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
@@ -2930,27 +2894,6 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
   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
@@ -2958,20 +2901,20 @@ var propTypes$2 = _extends({}, propTypes$4, {
  * 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.
@@ -2989,23 +2932,27 @@ function useControlledReducer(reducer, props, createInitialState, isStateEqual)
   }, [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])
       };
@@ -3017,15 +2964,15 @@ function downshiftUseComboboxReducer(state, props, action) {
         };
       } 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)
@@ -3033,13 +2980,13 @@ function downshiftUseComboboxReducer(state, props, action) {
         }
       } 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({
@@ -3074,7 +3021,7 @@ function downshiftUseComboboxReducer(state, props, action) {
       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])
       });
@@ -3082,14 +3029,14 @@ function downshiftUseComboboxReducer(state, props, action) {
     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:
@@ -3110,10 +3057,10 @@ function downshiftUseComboboxReducer(state, props, action) {
 }
 /* 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) {
@@ -3121,13 +3068,13 @@ function useCombobox(userProps) {
   }
   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,
@@ -3137,7 +3084,7 @@ function useCombobox(userProps) {
 
   // 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();
@@ -3151,29 +3098,19 @@ function useCombobox(userProps) {
     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();
     }
@@ -3199,13 +3136,13 @@ function useCombobox(userProps) {
   // 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) {
@@ -3295,29 +3232,30 @@ function useCombobox(userProps) {
       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,
@@ -3345,7 +3283,7 @@ function useCombobox(userProps) {
       if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
         return;
       }
-      shouldScrollRef.current = false;
+      preventScroll();
       dispatch({
         type: ItemMouseMove,
         index: index,
@@ -3364,21 +3302,22 @@ function useCombobox(userProps) {
 
     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() {
@@ -3388,13 +3327,17 @@ function useCombobox(userProps) {
     };
     return _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
       toggleButtonRef.current = toggleButtonNode;
-    }), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !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,
@@ -3405,15 +3348,16 @@ function useCombobox(userProps) {
       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) {
@@ -3441,13 +3385,13 @@ function useCombobox(userProps) {
     /* istanbul ignore next (preact) */
     var onChangeKey = 'onChange';
     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
@@ -3517,31 +3461,6 @@ var defaultStateValues = {
   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.
@@ -3550,8 +3469,8 @@ function getDefaultValue(props, propKey) {
  * @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
@@ -3595,9 +3514,9 @@ function isStateEqual$1(prevState, newState) {
   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,
@@ -3611,9 +3530,9 @@ var propTypes$1 = {
   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'
 };
@@ -3659,10 +3578,11 @@ var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
 });
 
 /* 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;
@@ -3759,8 +3679,8 @@ function downshiftMultipleSelectionReducer(state, props, action) {
       }
     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:
@@ -3992,7 +3912,7 @@ var stateChangeTypes = /*#__PURE__*/Object.freeze({
   TagRemoveClick: TagRemoveClick
 });
 
-function useTagGroupReducer(state, _props, action) {
+function useTagGroupReducer(state, action) {
   var type = action.type;
   var changes;
   switch (type) {
@@ -4053,8 +3973,9 @@ function useTagGroupReducer(state, _props, action) {
   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;
@@ -4229,7 +4150,7 @@ var _useTagGroup = function useTagGroup(userProps) {
       'aria-atomic': 'false',
       'aria-relevant': 'additions',
       role: 'listbox',
-      onKeyDown: callAllEventHandlers$1(onKeyDown, handleKeyDown)
+      onKeyDown: callAllEventHandlers(onKeyDown, handleKeyDown)
     }, rest);
     return tagGroupProps;
   }, [dispatch, elementIds.tagGroupId]);
@@ -4254,11 +4175,11 @@ var _useTagGroup = function useTagGroup(userProps) {
     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,
@@ -4280,7 +4201,7 @@ var _useTagGroup = function useTagGroup(userProps) {
       id: tagRemoveId,
       tabIndex: -1,
       'aria-labelledby': tagRemoveId + " " + tagId,
-      onClick: callAllEventHandlers$1(onClick, handleClick)
+      onClick: callAllEventHandlers(onClick, handleClick)
     }, rest);
   }, [elementIds, dispatch]);