downshift 9.0.12 → 9.1.0-alpha.0

package/dist/downshift.cjs.js

@@ -9,27 +9,255 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var reactIs = require('react-is');
 var computeScrollIntoView = require('compute-scroll-into-view');
-var tslib = require('tslib');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var unknown = process.env.NODE_ENV !== "production" ? '__autocomplete_unknown__' : 0;
+var mouseUp = process.env.NODE_ENV !== "production" ? '__autocomplete_mouseup__' : 1;
+var itemMouseEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_item_mouseenter__' : 2;
+var keyDownArrowUp = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_up__' : 3;
+var keyDownArrowDown = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_down__' : 4;
+var keyDownEscape = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_escape__' : 5;
+var keyDownEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_enter__' : 6;
+var keyDownHome = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_home__' : 7;
+var keyDownEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_end__' : 8;
+var clickItem = process.env.NODE_ENV !== "production" ? '__autocomplete_click_item__' : 9;
+var blurInput = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_input__' : 10;
+var changeInput = process.env.NODE_ENV !== "production" ? '__autocomplete_change_input__' : 11;
+var keyDownSpaceButton = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_space_button__' : 12;
+var clickButton = process.env.NODE_ENV !== "production" ? '__autocomplete_click_button__' : 13;
+var blurButton = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_button__' : 14;
+var controlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__autocomplete_controlled_prop_updated_selected_item__' : 15;
+var touchEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_touchend__' : 16;
+
+var stateChangeTypes$4 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  blurButton: blurButton,
+  blurInput: blurInput,
+  changeInput: changeInput,
+  clickButton: clickButton,
+  clickItem: clickItem,
+  controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
+  itemMouseEnter: itemMouseEnter,
+  keyDownArrowDown: keyDownArrowDown,
+  keyDownArrowUp: keyDownArrowUp,
+  keyDownEnd: keyDownEnd,
+  keyDownEnter: keyDownEnter,
+  keyDownEscape: keyDownEscape,
+  keyDownHome: keyDownHome,
+  keyDownSpaceButton: keyDownSpaceButton,
+  mouseUp: mouseUp,
+  touchEnd: touchEnd,
+  unknown: unknown
+});
 
 var idCounter = 0;
 
-/**
- * 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
+/**
+ * This generates a unique ID for an instance of Downshift
+ * @return {string} the unique ID
  */
-function cbToCb(cb) {
-  return typeof cb === 'function' ? cb : noop;
+function generateId() {
+  return String(idCounter++);
+}
+
+/**
+ * Resets idCounter to 0. Used for SSR.
+ */
+function resetIdCounter() {
+  // istanbul ignore next
+  if ('useId' in React__namespace) {
+    console.warn("It is not necessary to call resetIdCounter when using React 18+");
+    return;
+  }
+  idCounter = 0;
+}
+
+function useLatestRef(val) {
+  var ref = React__namespace.useRef(val);
+  // technically this is not "concurrent mode safe" because we're manipulating
+  // the value during render (so it's not idempotent). However, the places this
+  // hook is used is to support memoizing callbacks which will be called
+  // *during* render, so we need the latest values *during* render.
+  // If not for this, then we'd probably want to use useLayoutEffect instead.
+  ref.current = val;
+  return ref;
+}
+
+function handleRefs$1() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return function (node) {
+    refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    });
+  };
+}
+
+/**
+ * This is intended to be used to compose event handlers.
+ * They are executed in order until one of them sets
+ * `event.preventDownshiftDefault = true`.
+ * @param fns the event handler functions
+ * @return the event handler to add to an element
+ */
+function callAllEventHandlers$1() {
+  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
+    fns[_key] = arguments[_key];
+  }
+  return function (event) {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+    return fns.some(function (fn) {
+      if (fn) {
+        fn.apply(void 0, [event].concat(args));
+      }
+      return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
+    });
+  };
+}
+
+/**
+ * Simple debounce implementation. Will call the given
+ * function once after the time given has passed since
+ * it was last called.
+ */
+function debounce$1(fn, time) {
+  var timeoutId;
+  function cancel() {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  }
+  function wrapper() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    cancel();
+    timeoutId = setTimeout(function () {
+      timeoutId = null;
+      fn.apply(void 0, args);
+    }, time);
+  }
+  wrapper.cancel = cancel;
+  return wrapper;
+}
+
+var cleanupStatus = debounce$1(function (document) {
+  getStatusDiv(document).textContent = '';
+}, 500);
+
+/**
+ * Get the status node or create it if it does not already exist.
+ */
+function getStatusDiv(document) {
+  var statusDiv = document.getElementById('a11y-status-message');
+  if (statusDiv) {
+    return statusDiv;
+  }
+  statusDiv = document.createElement('div');
+  statusDiv.setAttribute('id', 'a11y-status-message');
+  statusDiv.setAttribute('role', 'status');
+  statusDiv.setAttribute('aria-live', 'polite');
+  statusDiv.setAttribute('aria-relevant', 'additions text');
+  Object.assign(statusDiv.style, {
+    border: '0',
+    clip: 'rect(0 0 0 0)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: '0',
+    position: 'absolute',
+    width: '1px'
+  });
+  document.body.appendChild(statusDiv);
+  return statusDiv;
 }
+
+/**
+ * Sets aria live status to a div element that's visually hidden.
+ */
+function setStatus(status, document) {
+  if (!status || !document) {
+    return;
+  }
+  var div = getStatusDiv(document);
+  div.textContent = status;
+  cleanupStatus(document);
+}
+
+/**
+ * Removes the status element from the DOM
+ */
+function cleanupStatusDiv(document) {
+  var statusDiv = document == null ? void 0 : document.getElementById('a11y-status-message');
+  if (statusDiv) {
+    statusDiv.remove();
+  }
+}
+
 function noop() {}
 
-/**
- * Scroll node into view if necessary
- * @param {HTMLElement} node the element that should scroll into view
- * @param {HTMLElement} menuNode the menu element of the component
+// eslint-disable-next-line import/no-mutable-exports
+var validatePropTypes$1 = noop;
+/* istanbul ignore next */
+if (process.env.NODE_ENV !== 'production') {
+  validatePropTypes$1 = function validatePropTypes(options, caller, propTypes) {
+    PropTypes.checkPropTypes(propTypes, options, 'prop', caller.name);
+  };
+}
+
+/**
+ * This will perform a shallow merge of the given state object
+ * with the state coming from props
+ * (for the controlled component scenario)
+ * This is used in state updater functions so they're referencing
+ * the right state regardless of where it comes from.
+ *
+ * @param state The state of the component/hook.
+ * @param props The props that may contain controlled values.
+ * @returns The merged controlled state.
+ */
+function getState(state, props) {
+  if (!props) {
+    return state;
+  }
+  var keys = Object.keys(state);
+  return keys.reduce(function (newState, key) {
+    if (props[key] !== undefined) {
+      newState[key] = props[key];
+    }
+    return newState;
+  }, _extends({}, state));
+}
+
+/**
+ * Scroll node into view if necessary
+ * @param {HTMLElement} node the element that should scroll into view
+ * @param {HTMLElement} menuNode the menu element of the component
  */
 function scrollIntoView(node, menuNode) {
   if (!node) {
@@ -49,6 +277,18 @@ 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
@@ -127,26 +367,6 @@ function handleRefs() {
   };
 }
 
-/**
- * This generates a unique ID for an instance of Downshift
- * @return {String} the unique ID
- */
-function generateId() {
-  return String(idCounter++);
-}
-
-/**
- * Resets idCounter to 0. Used for SSR.
- */
-function resetIdCounter() {
-  // istanbul ignore next
-  if ('useId' in React) {
-    console.warn("It is not necessary to call resetIdCounter when using React 18+");
-    return;
-  }
-  idCounter = 0;
-}
-
 /**
  * Default implementation for status message. Only added when menu is open.
  * Will specify if there are results in the list, and if so, how many,
@@ -155,10 +375,10 @@ function resetIdCounter() {
  * @param {Object} param the downshift state and other relevant properties
  * @return {String} the a11y status message
  */
-function getA11yStatusMessage(_ref2) {
-  var isOpen = _ref2.isOpen,
-    resultCount = _ref2.resultCount,
-    previousResultCount = _ref2.previousResultCount;
+function getA11yStatusMessage(_ref) {
+  var isOpen = _ref.isOpen,
+    resultCount = _ref.resultCount,
+    previousResultCount = _ref.previousResultCount;
   if (!isOpen) {
     return '';
   }
@@ -233,27 +453,6 @@ function pickState(state) {
   return result;
 }
 
-/**
- * This will perform a shallow merge of the given state object
- * with the state coming from props
- * (for the controlled component scenario)
- * This is used in state updater functions so they're referencing
- * the right state regardless of where it comes from.
- *
- * @param {Object} state The state of the component/hook.
- * @param {Object} props The props that may contain controlled values.
- * @returns {Object} The merged controlled state.
- */
-function getState(state, props) {
-  if (!state || !props) {
-    return state;
-  }
-  return Object.keys(state).reduce(function (prevState, key) {
-    prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
-    return prevState;
-  }, {});
-}
-
 /**
  * This determines whether a prop is a "controlled prop" meaning it is
  * state which is controlled by the outside of this component rather
@@ -397,105 +596,9 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
-var cleanupStatus = debounce(function (documentProp) {
-  getStatusDiv(documentProp).textContent = '';
-}, 500);
-
-/**
- * Get the status node or create it if it does not already exist.
- * @param {Object} documentProp document passed by the user.
- * @return {HTMLElement} the status node.
- */
-function getStatusDiv(documentProp) {
-  var statusDiv = documentProp.getElementById('a11y-status-message');
-  if (statusDiv) {
-    return statusDiv;
-  }
-  statusDiv = documentProp.createElement('div');
-  statusDiv.setAttribute('id', 'a11y-status-message');
-  statusDiv.setAttribute('role', 'status');
-  statusDiv.setAttribute('aria-live', 'polite');
-  statusDiv.setAttribute('aria-relevant', 'additions text');
-  Object.assign(statusDiv.style, {
-    border: '0',
-    clip: 'rect(0 0 0 0)',
-    height: '1px',
-    margin: '-1px',
-    overflow: 'hidden',
-    padding: '0',
-    position: 'absolute',
-    width: '1px'
-  });
-  documentProp.body.appendChild(statusDiv);
-  return statusDiv;
-}
-
-/**
- * @param {String} status the status message
- * @param {Object} documentProp document passed by the user.
- */
-function setStatus(status, documentProp) {
-  if (!status || !documentProp) {
-    return;
-  }
-  var div = getStatusDiv(documentProp);
-  div.textContent = status;
-  cleanupStatus(documentProp);
-}
-
-/**
- * Removes the status element from the DOM
- * @param {Document} documentProp 
- */
-function cleanupStatusDiv(documentProp) {
-  var statusDiv = documentProp == null ? void 0 : documentProp.getElementById('a11y-status-message');
-  if (statusDiv) {
-    statusDiv.remove();
-  }
-}
-
-var unknown = process.env.NODE_ENV !== "production" ? '__autocomplete_unknown__' : 0;
-var mouseUp = process.env.NODE_ENV !== "production" ? '__autocomplete_mouseup__' : 1;
-var itemMouseEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_item_mouseenter__' : 2;
-var keyDownArrowUp = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_up__' : 3;
-var keyDownArrowDown = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_arrow_down__' : 4;
-var keyDownEscape = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_escape__' : 5;
-var keyDownEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_enter__' : 6;
-var keyDownHome = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_home__' : 7;
-var keyDownEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_end__' : 8;
-var clickItem = process.env.NODE_ENV !== "production" ? '__autocomplete_click_item__' : 9;
-var blurInput = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_input__' : 10;
-var changeInput = process.env.NODE_ENV !== "production" ? '__autocomplete_change_input__' : 11;
-var keyDownSpaceButton = process.env.NODE_ENV !== "production" ? '__autocomplete_keydown_space_button__' : 12;
-var clickButton = process.env.NODE_ENV !== "production" ? '__autocomplete_click_button__' : 13;
-var blurButton = process.env.NODE_ENV !== "production" ? '__autocomplete_blur_button__' : 14;
-var controlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__autocomplete_controlled_prop_updated_selected_item__' : 15;
-var touchEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_touchend__' : 16;
-
-var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  blurButton: blurButton,
-  blurInput: blurInput,
-  changeInput: changeInput,
-  clickButton: clickButton,
-  clickItem: clickItem,
-  controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
-  itemMouseEnter: itemMouseEnter,
-  keyDownArrowDown: keyDownArrowDown,
-  keyDownArrowUp: keyDownArrowUp,
-  keyDownEnd: keyDownEnd,
-  keyDownEnter: keyDownEnter,
-  keyDownEscape: keyDownEscape,
-  keyDownHome: keyDownHome,
-  keyDownSpaceButton: keyDownSpaceButton,
-  mouseUp: mouseUp,
-  touchEnd: touchEnd,
-  unknown: unknown
-});
-
-var _excluded$3 = ["refKey", "ref"],
-  _excluded2$3 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"],
-  _excluded3$2 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"],
+var _excluded$4 = ["refKey", "ref"],
+  _excluded2$4 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"],
+  _excluded3$3 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"],
   _excluded4$2 = ["refKey", "ref"],
   _excluded5 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"];
 var Downshift = /*#__PURE__*/function () {
@@ -685,7 +788,7 @@ var Downshift = /*#__PURE__*/function () {
           _ref$refKey = _ref.refKey,
           refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
           ref = _ref.ref,
-          rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+          rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
         var _ref2 = _temp2 === void 0 ? {} : _temp2,
           _ref2$suppressRefErro = _ref2.suppressRefError,
           suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
@@ -841,7 +944,7 @@ var Downshift = /*#__PURE__*/function () {
           var onKeyDown = _ref3.onKeyDown,
           onKeyUp = _ref3.onKeyUp,
           onBlur = _ref3.onBlur,
-          rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
+          rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
         var _this$getState5 = _this.getState(),
           isOpen = _this$getState5.isOpen;
         var enabledEventHandlers = {
@@ -931,7 +1034,7 @@ var Downshift = /*#__PURE__*/function () {
           onChange = _ref4.onChange,
           onInput = _ref4.onInput;
           _ref4.onChangeText;
-          var rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
+          var rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$3);
         var onChangeKey;
         var eventHandlers = {};
 
@@ -1475,7 +1578,7 @@ var Downshift = /*#__PURE__*/function () {
     suppressRefError: false,
     scrollIntoView: scrollIntoView
   };
-  Downshift.stateChangeTypes = stateChangeTypes$3;
+  Downshift.stateChangeTypes = stateChangeTypes$4;
   return Downshift;
 }();
 process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
@@ -1548,62 +1651,275 @@ function validateGetRootPropsCalledCorrectly(element, _ref11) {
   }
 }
 
-var dropdownDefaultStateValues = {
-  highlightedIndex: -1,
-  isOpen: false,
-  selectedItem: null,
-  inputValue: ''
-};
-function callOnChangeProps(action, state, newState) {
-  var props = action.props,
-    type = action.type;
+function capitalizeString(string) {
+  return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
+}
+
+function callOnChangeProps(action, props, state, newState) {
+  var type = action.type;
   var changes = {};
-  Object.keys(state).forEach(function (key) {
-    invokeOnChangeHandler(key, action, state, newState);
+  var keys = Object.keys(state);
+  for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
+    var key = _keys[_i];
+    invokeOnChangeHandler(key, action, props, state, newState);
     if (newState[key] !== state[key]) {
       changes[key] = newState[key];
     }
-  });
+  }
   if (props.onStateChange && Object.keys(changes).length) {
     props.onStateChange(_extends({
       type: type
     }, changes));
   }
 }
-function invokeOnChangeHandler(key, action, state, newState) {
-  var props = action.props,
-    type = action.type;
-  var handler = "on" + capitalizeString(key) + "Change";
-  if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
-    props[handler](_extends({
-      type: type
-    }, newState));
+function invokeOnChangeHandler(key, action, props, state, newState) {
+  if (newState[key] === state[key]) {
+    return;
   }
+  var handlerKey = "on" + capitalizeString(key) + "Change";
+  var handler = props[handlerKey];
+  if (typeof handler !== 'function') {
+    return;
+  }
+  var type = action.type;
+  handler(_extends({
+    type: type
+  }, newState));
 }
 
-/**
- * Default state reducer that returns the changes.
- *
- * @param {Object} s state.
- * @param {Object} a action with changes.
- * @returns {Object} changes.
+/**
+ * Computes the controlled state using a the previous state, props,
+ * 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.
+ */
+function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
+  var prevStateRef = React__namespace.useRef(null);
+  var actionRef = React__namespace.useRef(undefined);
+  var propsRef = useLatestRef(props);
+  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, {
+      changes: changes
+    }));
+    return _extends({}, state, newState);
+  }, [propsRef, reducer]);
+  var _React$useReducer = React__namespace.useReducer(enhancedReducer, props, createInitialState),
+    state = _React$useReducer[0],
+    dispatch = _React$useReducer[1];
+  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);
+    if (shouldCallOnChangeProps) {
+      callOnChangeProps(action, propsRef.current, prevState, state);
+    }
+    prevStateRef.current = state;
+  }, [state, action, isStateEqual, propsRef]);
+  return [state, dispatch];
+}
+
+/**
+ * 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.
+ */
+function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
+    state = _useEnhancedReducer[0],
+    dispatch = _useEnhancedReducer[1];
+  return [getState(state, props), dispatch];
+}
+
+/**
+ * Returns both the item and index when both or either is passed.
+ *
+ * @param itemProp The item which could be undefined.
+ * @param indexProp The index which could be undefined.
+ * @param items The array of items to get the item based on index.
+ * @param errorMessage The error to be thrown if index and item could not be returned for any reason.
+ * @returns An array with item and index.
+ */
+function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
+  if (itemProp !== undefined && indexProp !== undefined) {
+    return [itemProp, indexProp];
+  }
+  if (itemProp !== undefined) {
+    var index = items.indexOf(itemProp);
+    if (index < 0) {
+      throw new Error(errorMessage);
+    }
+    return [itemProp, items.indexOf(itemProp)];
+  }
+  if (indexProp !== undefined) {
+    var item = items[indexProp];
+    if (item === undefined) {
+      throw new Error(errorMessage);
+    }
+    return [item, indexProp];
+  }
+  throw new Error(errorMessage);
+}
+
+/**
+ * Tracks if it's the first render.
+ */
+function useIsInitialMount() {
+  var isInitialMountRef = React__namespace.useRef(true);
+  React__namespace.useEffect(function () {
+    isInitialMountRef.current = false;
+    return function () {
+      isInitialMountRef.current = true;
+    };
+  }, []);
+  return isInitialMountRef.current;
+}
+
+/**
+ * Default state reducer that returns the changes.
+ *
  */
-function stateReducer(s, a) {
+function stateReducer(_s, a) {
   return a.changes;
 }
 
-/**
- * Debounced call for updating the a11y message.
+// Shared between all exports.
+var propTypes$5 = {
+  environment: PropTypes.shape({
+    addEventListener: PropTypes.func.isRequired,
+    removeEventListener: PropTypes.func.isRequired,
+    document: PropTypes.shape({
+      createElement: PropTypes.func.isRequired,
+      getElementById: PropTypes.func.isRequired,
+      activeElement: PropTypes.any.isRequired,
+      body: PropTypes.any.isRequired
+    }).isRequired,
+    Node: PropTypes.func.isRequired
+  }),
+  itemToKey: PropTypes.func,
+  stateReducer: PropTypes.func
+};
+
+function getDefaultValue$1(props, propKey, defaultStateValues) {
+  var defaultValue = props["default" + capitalizeString(propKey)];
+  if (defaultValue !== undefined) {
+    return defaultValue;
+  }
+  return defaultStateValues[propKey];
+}
+
+function getInitialValue$1(props, propKey, defaultStateValues) {
+  var value = props[propKey];
+  if (value !== undefined) {
+    return value;
+  }
+  var initialValue = props["initial" + capitalizeString(propKey)];
+  if (initialValue !== undefined) {
+    return initialValue;
+  }
+  return getDefaultValue$1(props, propKey, defaultStateValues);
+}
+
+/**
+ * Debounced call for updating the a11y message.
  */
-var updateA11yStatus = debounce(function (status, document) {
+var updateA11yStatus = debounce$1(function (status, document) {
   setStatus(status, document);
 }, 200);
 
+/**
+ * Adds an a11y aria live status message if getA11yStatusMessage is passed.
+ * @param getA11yStatusMessage The function that builds the status message.
+ * @param options The options to be passed to getA11yStatusMessage if called.
+ * @param dependencyArray The dependency array that triggers the status message setter via useEffect.
+ * @param environment The environment object containing the document.
+ */
+function useA11yMessageStatus(getA11yStatusMessage, options, dependencyArray, environment) {
+  var document = environment == null ? void 0 : environment.document;
+  var isInitialMount = useIsInitialMount();
+
+  // Adds an a11y aria live status message if getA11yStatusMessage is passed.
+  React__namespace.useEffect(function () {
+    if (!getA11yStatusMessage || isInitialMount || false || !document) {
+      return;
+    }
+    var status = getA11yStatusMessage(options);
+    updateA11yStatus(status, document);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencyArray);
+
+  // Cleanup the status message container.
+  React__namespace.useEffect(function () {
+    return function () {
+      updateA11yStatus.cancel();
+      cleanupStatusDiv(document);
+    };
+  }, [document]);
+}
+
+// Shared between useSelect, useCombobox, Downshift.
+var propTypes$4 = _extends({}, propTypes$5, {
+  getA11yStatusMessage: PropTypes.func,
+  highlightedIndex: PropTypes.number,
+  defaultHighlightedIndex: PropTypes.number,
+  initialHighlightedIndex: PropTypes.number,
+  isOpen: PropTypes.bool,
+  defaultIsOpen: PropTypes.bool,
+  initialIsOpen: PropTypes.bool,
+  selectedItem: PropTypes.any,
+  initialSelectedItem: PropTypes.any,
+  defaultSelectedItem: PropTypes.any,
+  id: PropTypes.string,
+  labelId: PropTypes.string,
+  menuId: PropTypes.string,
+  getItemId: PropTypes.func,
+  toggleButtonId: PropTypes.string,
+  onSelectedItemChange: PropTypes.func,
+  onHighlightedIndexChange: PropTypes.func,
+  onStateChange: PropTypes.func,
+  onIsOpenChange: PropTypes.func,
+  scrollIntoView: PropTypes.func
+});
+
+var defaultProps$3 = {
+  itemToString: function itemToString(item) {
+    return item ? String(item) : '';
+  },
+  itemToKey: function itemToKey(item) {
+    return item;
+  },
+  stateReducer: stateReducer,
+  scrollIntoView: scrollIntoView,
+  environment: /* istanbul ignore next (ssr) */
+  typeof window === 'undefined' || false ? undefined : window
+};
+
+var defaultStateValues$1 = {
+  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.useLayoutEffect : React.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 
 // istanbul ignore next
-var useElementIds = 'useId' in React // Avoid conditional useId call
+var useElementIds$1 = 'useId' in React__namespace // Avoid conditional useId call
 ? function useElementIds(_ref) {
   var id = _ref.id,
     labelId = _ref.labelId,
@@ -1612,11 +1928,11 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     toggleButtonId = _ref.toggleButtonId,
     inputId = _ref.inputId;
   // Avoid conditional useId call
-  var reactId = "downshift-" + React.useId();
+  var reactId = "downshift-" + React__namespace.useId();
   if (!id) {
     id = reactId;
   }
-  var elementIds = React.useMemo(function () {
+  var elementIds = React__namespace.useMemo(function () {
     return {
       labelId: labelId || id + "-label",
       menuId: menuId || id + "-menu",
@@ -1636,7 +1952,7 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     getItemId = _ref2.getItemId,
     toggleButtonId = _ref2.toggleButtonId,
     inputId = _ref2.inputId;
-  var elementIds = React.useMemo(function () {
+  var elementIds = React__namespace.useMemo(function () {
     return {
       labelId: labelId || id + "-label",
       menuId: menuId || id + "-menu",
@@ -1649,138 +1965,14 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
   }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
   return elementIds;
 };
-function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
-  var item, index;
-  if (itemProp === undefined) {
-    if (indexProp === undefined) {
-      throw new Error(errorMessage);
-    }
-    item = items[indexProp];
-    index = indexProp;
-  } else {
-    index = indexProp === undefined ? items.indexOf(itemProp) : indexProp;
-    item = itemProp;
-  }
-  return [item, index];
-}
 function isAcceptedCharacterKey(key) {
   return /^\S{1}$/.test(key);
 }
-function capitalizeString(string) {
-  return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
-}
-function useLatestRef(val) {
-  var ref = React.useRef(val);
-  // technically this is not "concurrent mode safe" because we're manipulating
-  // the value during render (so it's not idempotent). However, the places this
-  // hook is used is to support memoizing callbacks which will be called
-  // *during* render, so we need the latest values *during* render.
-  // If not for this, then we'd probably want to use useLayoutEffect instead.
-  ref.current = val;
-  return ref;
-}
-
-/**
- * Computes the controlled state using a the previous state, props,
- * 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.
- */
-function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
-  var prevStateRef = React.useRef();
-  var actionRef = React.useRef();
-  var enhancedReducer = React.useCallback(function (state, action) {
-    actionRef.current = action;
-    state = getState(state, action.props);
-    var changes = reducer(state, action);
-    var newState = action.props.stateReducer(state, _extends({}, action, {
-      changes: changes
-    }));
-    return newState;
-  }, [reducer]);
-  var _useReducer = React.useReducer(enhancedReducer, props, createInitialState),
-    state = _useReducer[0],
-    dispatch = _useReducer[1];
-  var propsRef = useLatestRef(props);
-  var dispatchWithProps = React.useCallback(function (action) {
-    return dispatch(_extends({
-      props: propsRef.current
-    }, action));
-  }, [propsRef]);
-  var action = actionRef.current;
-  React.useEffect(function () {
-    var prevState = getState(prevStateRef.current, action == null ? void 0 : action.props);
-    var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevState, state);
-    if (shouldCallOnChangeProps) {
-      callOnChangeProps(action, prevState, state);
-    }
-    prevStateRef.current = state;
-  }, [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.
- */
-function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
-  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
-    state = _useEnhancedReducer[0],
-    dispatch = _useEnhancedReducer[1];
-  return [getState(state, props), dispatch];
-}
-var defaultProps$3 = {
-  itemToString: function itemToString(item) {
-    return item ? String(item) : '';
-  },
-  itemToKey: function itemToKey(item) {
-    return item;
-  },
-  stateReducer: stateReducer,
-  scrollIntoView: scrollIntoView,
-  environment: /* istanbul ignore next (ssr) */
-  typeof window === 'undefined' || false ? undefined : window
-};
-function getDefaultValue$1(props, propKey, defaultStateValues) {
-  if (defaultStateValues === void 0) {
-    defaultStateValues = dropdownDefaultStateValues;
-  }
-  var defaultValue = props["default" + capitalizeString(propKey)];
-  if (defaultValue !== undefined) {
-    return defaultValue;
-  }
-  return defaultStateValues[propKey];
-}
-function getInitialValue$1(props, propKey, defaultStateValues) {
-  if (defaultStateValues === void 0) {
-    defaultStateValues = dropdownDefaultStateValues;
-  }
-  var value = props[propKey];
-  if (value !== undefined) {
-    return value;
-  }
-  var initialValue = props["initial" + capitalizeString(propKey)];
-  if (initialValue !== undefined) {
-    return initialValue;
-  }
-  return getDefaultValue$1(props, propKey, defaultStateValues);
-}
-function getInitialState$2(props) {
-  var selectedItem = getInitialValue$1(props, 'selectedItem');
-  var isOpen = getInitialValue$1(props, 'isOpen');
+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');
+  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);
@@ -1830,20 +2022,18 @@ function getHighlightedIndexOnOpen(props, state, offset) {
  * @param {Array<{current: HTMLElement}>} downshiftElementsRefs The refs for the elements that should not trigger a blur action from mouseDown or touchEnd.
  * @returns {{isMouseDown: boolean, isTouchMove: boolean, isTouchEnd: boolean}} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs) {
-  var mouseAndTouchTrackersRef = React.useRef({
+function useMouseAndTouchTracker(environment, handleBlur, downshiftRefs) {
+  var mouseAndTouchTrackersRef = React__namespace.useRef({
     isMouseDown: false,
     isTouchMove: false,
     isTouchEnd: false
   });
-
-  // the elements should be retrieved the moment they are required because these are refs - they can be mutated
-  function getDownshiftElements() {
-    return downshiftElementsRefs.map(function (ref) {
+  var getDownshiftElements = React__namespace.useCallback(function () {
+    return downshiftRefs.map(function (ref) {
       return ref.current;
     });
-  }
-  React.useEffect(function () {
+  }, [downshiftRefs]);
+  React__namespace.useEffect(function () {
     if (!environment) {
       return noop;
     }
@@ -1882,7 +2072,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
       environment.removeEventListener('touchmove', onTouchMove);
       environment.removeEventListener('touchend', onTouchEnd);
     };
-  }, [downshiftElementsRefs, environment, handleBlur]);
+  }, [environment, getDownshiftElements, handleBlur]);
   return mouseAndTouchTrackersRef.current;
 }
 
@@ -1903,11 +2093,11 @@ if (process.env.NODE_ENV !== 'production') {
     for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
       propKeys[_key] = arguments[_key];
     }
-    var getterPropsCalledRef = React.useRef(propKeys.reduce(function (acc, propKey) {
+    var getterPropsCalledRef = React__namespace.useRef(propKeys.reduce(function (acc, propKey) {
       acc[propKey] = {};
       return acc;
     }, {}));
-    React.useEffect(function () {
+    React__namespace.useEffect(function () {
       Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
         var propCallInfo = getterPropsCalledRef.current[propKey];
         if (!Object.keys(propCallInfo).length) {
@@ -1924,52 +2114,18 @@ if (process.env.NODE_ENV !== 'production') {
         if (!(elementRef != null && elementRef.current)) {
           // eslint-disable-next-line no-console
           console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
-        }
-      });
-    }, []);
-    var setGetterPropCallInfo = React.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
-      getterPropsCalledRef.current[propKey] = {
-        suppressRefError: suppressRefError,
-        refKey: refKey,
-        elementRef: elementRef
-      };
-    }, []);
-    return setGetterPropCallInfo;
-  };
-}
-
-/**
- * Adds an a11y aria live status message if getA11yStatusMessage is passed.
- * @param {(options: Object) => string} getA11yStatusMessage The function that builds the status message.
- * @param {Object} options The options to be passed to getA11yStatusMessage if called.
- * @param {Array<unknown>} dependencyArray The dependency array that triggers the status message setter via useEffect.
- * @param {{document: Document}} environment The environment object containing the document.
- */
-function useA11yMessageStatus(getA11yStatusMessage, options, dependencyArray, environment) {
-  if (environment === void 0) {
-    environment = {};
-  }
-  var document = environment.document;
-  var isInitialMount = useIsInitialMount();
-
-  // Adds an a11y aria live status message if getA11yStatusMessage is passed.
-  React.useEffect(function () {
-    if (!getA11yStatusMessage || isInitialMount || false || !document) {
-      return;
-    }
-    var status = getA11yStatusMessage(options);
-    updateA11yStatus(status, document);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, dependencyArray);
-
-  // Cleanup the status message container.
-  React.useEffect(function () {
-    return function () {
-      updateA11yStatus.cancel();
-      cleanupStatusDiv(document);
-    };
-  }, [document]);
+        }
+      });
+    }, []);
+    var setGetterPropCallInfo = React__namespace.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
+      getterPropsCalledRef.current[propKey] = {
+        suppressRefError: suppressRefError,
+        refKey: refKey,
+        elementRef: elementRef
+      };
+    }, []);
+    return setGetterPropCallInfo;
+  };
 }
 function useScrollIntoView(_ref3) {
   var highlightedIndex = _ref3.highlightedIndex,
@@ -1979,7 +2135,7 @@ function useScrollIntoView(_ref3) {
     menuElement = _ref3.menuElement,
     scrollIntoViewProp = _ref3.scrollIntoView;
   // used not to scroll on highlight by mouse.
-  var shouldScrollRef = React.useRef(true);
+  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) {
@@ -2003,9 +2159,9 @@ if (process.env.NODE_ENV !== 'production') {
     var props = _ref4.props,
       state = _ref4.state;
     // used for checking when props are moving from controlled to uncontrolled.
-    var prevPropsRef = React.useRef(props);
+    var prevPropsRef = React__namespace.useRef(props);
     var isInitialMount = useIsInitialMount();
-    React.useEffect(function () {
+    React__namespace.useEffect(function () {
       if (isInitialMount) {
         return;
       }
@@ -2034,8 +2190,8 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) {
     highlightedIndex: -1
   }, shouldSelect && _extends({
     selectedItem: props.items[highlightedIndex],
-    isOpen: getDefaultValue$1(props, 'isOpen'),
-    highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
+    isOpen: getDefaultValue$1(props, 'isOpen', defaultStateValues$1),
+    highlightedIndex: getDefaultValue$1(props, 'highlightedIndex', defaultStateValues$1)
   }, inputValue && {
     inputValue: props.itemToString(props.items[highlightedIndex])
   }));
@@ -2053,20 +2209,6 @@ function isDropdownsStateEqual(prevState, newState) {
   return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
 }
 
-/**
- * Tracks if it's the first render.
- */
-function useIsInitialMount() {
-  var isInitialMountRef = React.useRef(true);
-  React.useEffect(function () {
-    isInitialMountRef.current = false;
-    return function () {
-      isInitialMountRef.current = true;
-    };
-  }, []);
-  return isInitialMountRef.current;
-}
-
 /**
  * Returns the new highlightedIndex based on the defaultHighlightedIndex prop, if it's not disabled.
  *
@@ -2074,7 +2216,7 @@ function useIsInitialMount() {
  * @returns {number} The highlighted index.
  */
 function getDefaultHighlightedIndex(props) {
-  var highlightedIndex = getDefaultValue$1(props, 'highlightedIndex');
+  var highlightedIndex = getDefaultValue$1(props, 'highlightedIndex', defaultStateValues$1);
   if (highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
     return -1;
   }
@@ -2088,58 +2230,15 @@ function getDefaultHighlightedIndex(props) {
  * @returns {number} The highlighted index.
  */
 function getInitialHighlightedIndex(props) {
-  var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
+  var highlightedIndex = getInitialValue$1(props, 'highlightedIndex', defaultStateValues$1);
   if (highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
     return -1;
   }
   return highlightedIndex;
 }
 
-// Shared between all exports.
-var commonPropTypes = {
-  environment: PropTypes.shape({
-    addEventListener: PropTypes.func.isRequired,
-    removeEventListener: PropTypes.func.isRequired,
-    document: PropTypes.shape({
-      createElement: PropTypes.func.isRequired,
-      getElementById: PropTypes.func.isRequired,
-      activeElement: PropTypes.any.isRequired,
-      body: PropTypes.any.isRequired
-    }).isRequired,
-    Node: PropTypes.func.isRequired
-  }),
-  itemToString: PropTypes.func,
-  itemToKey: PropTypes.func,
-  stateReducer: PropTypes.func
-};
-
-// Shared between useSelect, useCombobox, Downshift.
-var commonDropdownPropTypes = _extends({}, commonPropTypes, {
-  getA11yStatusMessage: PropTypes.func,
-  highlightedIndex: PropTypes.number,
-  defaultHighlightedIndex: PropTypes.number,
-  initialHighlightedIndex: PropTypes.number,
-  isOpen: PropTypes.bool,
-  defaultIsOpen: PropTypes.bool,
-  initialIsOpen: PropTypes.bool,
-  selectedItem: PropTypes.any,
-  initialSelectedItem: PropTypes.any,
-  defaultSelectedItem: PropTypes.any,
-  id: PropTypes.string,
-  labelId: PropTypes.string,
-  menuId: PropTypes.string,
-  getItemId: PropTypes.func,
-  toggleButtonId: PropTypes.string,
-  onSelectedItemChange: PropTypes.func,
-  onHighlightedIndexChange: PropTypes.func,
-  onStateChange: PropTypes.func,
-  onIsOpenChange: PropTypes.func,
-  scrollIntoView: PropTypes.func
-});
-
-function downshiftCommonReducer(state, action, stateChangeTypes) {
-  var type = action.type,
-    props = action.props;
+function downshiftCommonReducer(state, props, action, stateChangeTypes) {
+  var type = action.type;
   var changes;
   switch (type) {
     case stateChangeTypes.ItemMouseMove:
@@ -2183,9 +2282,9 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
     case stateChangeTypes.FunctionReset:
       changes = {
         highlightedIndex: getDefaultHighlightedIndex(props),
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        selectedItem: getDefaultValue$1(props, 'selectedItem'),
-        inputValue: getDefaultValue$1(props, 'inputValue')
+        isOpen: getDefaultValue$1(props, 'isOpen', defaultStateValues$1),
+        selectedItem: getDefaultValue$1(props, 'selectedItem', defaultStateValues$1),
+        inputValue: getDefaultValue$1(props, 'inputValue', defaultStateValues$1)
       };
       break;
     default:
@@ -2195,32 +2294,33 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
 }
 /* eslint-enable complexity */
 
-function getItemIndexByCharacterKey(_a) {
-    var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, isItemDisabled = _a.isItemDisabled;
-    var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
-    for (var index = 0; index < items.length; index++) {
-        // if we already have a search query in progress, we also consider the current highlighted item.
-        var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
-        var item = items[offsetIndex];
-        if (item !== undefined &&
-            itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar) &&
-            !isItemDisabled(item, offsetIndex)) {
-            return offsetIndex;
-        }
+var propTypes$3 = _extends({}, propTypes$4, {
+  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,
+    items = _ref.items,
+    itemToString = _ref.itemToString,
+    isItemDisabled = _ref.isItemDisabled;
+  var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
+  for (var index = 0; index < items.length; index++) {
+    // if we already have a search query in progress, we also consider the current highlighted item.
+    var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
+    var item = items[offsetIndex];
+    if (item !== undefined && itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(item, offsetIndex)) {
+      return offsetIndex;
     }
-    return highlightedIndex;
-}
-var propTypes$2 = tslib.__assign(tslib.__assign({}, commonDropdownPropTypes), { items: PropTypes.array.isRequired, isItemDisabled: PropTypes.func });
-var defaultProps$2 = tslib.__assign(tslib.__assign({}, defaultProps$3), { isItemDisabled: function () {
-        return false;
-    } });
-// eslint-disable-next-line import/no-mutable-exports
-var validatePropTypes$2 = noop;
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== 'production') {
-    validatePropTypes$2 = function (options, caller) {
-        PropTypes.checkPropTypes(propTypes$2, options, 'prop', caller.name);
-    };
+  }
+  return highlightedIndex;
 }
 
 var ToggleButtonClick$1 = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 0;
@@ -2246,7 +2346,7 @@ var FunctionSelectItem$1 = process.env.NODE_ENV !== "production" ? '__function_s
 var FunctionSetInputValue$1 = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 20;
 var FunctionReset$2 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 21;
 
-var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
+var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   FunctionCloseMenu: FunctionCloseMenu$1,
   FunctionOpenMenu: FunctionOpenMenu$1,
@@ -2273,16 +2373,15 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
 });
 
 /* eslint-disable complexity */
-function downshiftSelectReducer(state, action) {
+function downshiftSelectReducer(state, props, action) {
   var _props$items;
   var type = action.type,
-    props = action.props,
     altKey = action.altKey;
   var changes;
   switch (type) {
     case ItemClick$1:
       changes = {
-        isOpen: getDefaultValue$1(props, 'isOpen'),
+        isOpen: getDefaultValue$1(props, 'isOpen', defaultStateValues$1),
         highlightedIndex: getDefaultHighlightedIndex(props),
         selectedItem: props.items[action.index]
       };
@@ -2375,29 +2474,29 @@ function downshiftSelectReducer(state, action) {
       };
       break;
     default:
-      return downshiftCommonReducer(state, action, stateChangeTypes$2);
+      return downshiftCommonReducer(state, props, action, stateChangeTypes$3);
   }
   return _extends({}, state, changes);
 }
 /* eslint-enable complexity */
 
-var _excluded$2 = ["onClick"],
-  _excluded2$2 = ["onMouseLeave", "refKey", "ref"],
-  _excluded3$1 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
+var _excluded$3 = ["onClick"],
+  _excluded2$3 = ["onMouseLeave", "refKey", "ref"],
+  _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
   _excluded4$1 = ["item", "index", "onMouseMove", "onClick", "onMouseDown", "onPress", "refKey", "disabled", "ref"];
-useSelect.stateChangeTypes = stateChangeTypes$2;
+useSelect.stateChangeTypes = stateChangeTypes$3;
 function useSelect(userProps) {
   if (userProps === void 0) {
     userProps = {};
   }
-  validatePropTypes$2(userProps, useSelect);
+  validatePropTypes$1(userProps, useSelect, propTypes$3);
   // Props defaults and destructuring.
   var props = _extends({}, defaultProps$2, userProps);
   var scrollIntoView = props.scrollIntoView,
     environment = props.environment,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual),
+  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$3, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -2412,7 +2511,7 @@ function useSelect(userProps) {
   // used to keep the inputValue clearTimeout object between renders.
   var clearTimeoutRef = React.useRef(null);
   // prevent id re-generation between renders.
-  var elementIds = useElementIds(props);
+  var elementIds = useElementIds$1(props);
   // utility callback to get item element.
   var latest = useLatestRef({
     state: state,
@@ -2464,23 +2563,23 @@ function useSelect(userProps) {
   });
   // Focus the toggle button on first render if required.
   React.useEffect(function () {
-    var focusOnOpen = getInitialValue$1(props, 'isOpen');
+    var focusOnOpen = getInitialValue$1(props, 'isOpen', defaultStateValues$1);
     if (focusOnOpen && toggleButtonRef.current) {
       toggleButtonRef.current.focus();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, React.useCallback(function handleBlur() {
+  var handleBlurInTracker = React.useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
         type: ToggleButtonBlur
       });
     }
-  }, [dispatch, latest]), React.useMemo(function () {
+  }, [dispatch, latest]);
+  var downshiftRefs = React.useMemo(function () {
     return [menuRef, toggleButtonRef];
-  },
-  // dependencies can be left empty because refs are getting mutated
-  []));
+  }, []);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, handleBlurInTracker, downshiftRefs);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -2613,7 +2712,7 @@ function useSelect(userProps) {
   var getLabelProps = React.useCallback(function (_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
       onClick = _ref.onClick,
-      labelProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      labelProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
     var labelHandleClick = function labelHandleClick() {
       var _toggleButtonRef$curr;
       (_toggleButtonRef$curr = toggleButtonRef.current) == null || _toggleButtonRef$curr.focus();
@@ -2631,7 +2730,7 @@ function useSelect(userProps) {
       _ref2$refKey = _ref2.refKey,
       refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,
       ref = _ref2.ref,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
       _ref3$suppressRefErro = _ref3.suppressRefError,
       suppressRefError = _ref3$suppressRefErro === void 0 ? false : _ref3$suppressRefErro;
@@ -2655,7 +2754,7 @@ function useSelect(userProps) {
       _ref4$refKey = _ref4.refKey,
       refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
       ref = _ref4.ref,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$1);
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
     var _ref5 = _temp5 === void 0 ? {} : _temp5,
       _ref5$suppressRefErro = _ref5.suppressRefError,
       suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
@@ -2802,7 +2901,7 @@ var FunctionSetInputValue = process.env.NODE_ENV !== "production" ? '__function_
 var FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 21;
 var ControlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__controlled_prop_updated_selected_item__' : 22;
 
-var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
+var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem,
   FunctionCloseMenu: FunctionCloseMenu,
@@ -2829,8 +2928,8 @@ var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
   ToggleButtonClick: ToggleButtonClick
 });
 
-function getInitialState$1(props) {
-  var initialState = getInitialState$2(props);
+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) {
@@ -2840,7 +2939,7 @@ function getInitialState$1(props) {
     inputValue: inputValue
   });
 }
-var propTypes$1 = _extends({}, commonDropdownPropTypes, {
+var propTypes$2 = _extends({}, propTypes$4, {
   items: PropTypes.array.isRequired,
   isItemDisabled: PropTypes.func,
   inputValue: PropTypes.string,
@@ -2888,15 +2987,6 @@ function useControlledReducer(reducer, props, createInitialState, isStateEqual)
   }, [state.selectedItem, props.selectedItem]);
   return [getState(state, props), dispatch];
 }
-
-// eslint-disable-next-line import/no-mutable-exports
-var validatePropTypes$1 = noop;
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== 'production') {
-  validatePropTypes$1 = function validatePropTypes(options, caller) {
-    PropTypes.checkPropTypes(propTypes$1, options, 'prop', caller.name);
-  };
-}
 var defaultProps$1 = _extends({}, defaultProps$3, {
   isItemDisabled: function isItemDisabled() {
     return false;
@@ -2904,16 +2994,15 @@ var defaultProps$1 = _extends({}, defaultProps$3, {
 });
 
 /* eslint-disable complexity */
-function downshiftUseComboboxReducer(state, action) {
+function downshiftUseComboboxReducer(state, props, action) {
   var _props$items;
   var type = action.type,
-    props = action.props,
     altKey = action.altKey;
   var changes;
   switch (type) {
     case ItemClick:
       changes = {
-        isOpen: getDefaultValue$1(props, 'isOpen'),
+        isOpen: getDefaultValue$1(props, 'isOpen', defaultStateValues$1),
         highlightedIndex: getDefaultHighlightedIndex(props),
         selectedItem: props.items[action.index],
         inputValue: props.itemToString(props.items[action.index])
@@ -3013,22 +3102,22 @@ function downshiftUseComboboxReducer(state, action) {
       };
       break;
     default:
-      return downshiftCommonReducer(state, action, stateChangeTypes$1);
+      return downshiftCommonReducer(state, props, action, stateChangeTypes$2);
   }
   return _extends({}, state, changes);
 }
 /* eslint-enable complexity */
 
-var _excluded$1 = ["onMouseLeave", "refKey", "ref"],
-  _excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onMouseDown", "onClick", "onPress", "disabled"],
-  _excluded3 = ["onClick", "onPress", "refKey", "ref"],
+var _excluded$2 = ["onMouseLeave", "refKey", "ref"],
+  _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"];
-useCombobox.stateChangeTypes = stateChangeTypes$1;
+useCombobox.stateChangeTypes = stateChangeTypes$2;
 function useCombobox(userProps) {
   if (userProps === void 0) {
     userProps = {};
   }
-  validatePropTypes$1(userProps, useCombobox);
+  validatePropTypes$1(userProps, useCombobox, propTypes$2);
   // Props defaults and destructuring.
   var props = _extends({}, defaultProps$1, userProps);
   var items = props.items,
@@ -3036,7 +3125,7 @@ function useCombobox(userProps) {
     environment = props.environment,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
-  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual),
+  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$2, isDropdownsStateEqual),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -3052,7 +3141,7 @@ function useCombobox(userProps) {
   var isInitialMount = useIsInitialMount();
 
   // prevent id re-generation between renders.
-  var elementIds = useElementIds(props);
+  var elementIds = useElementIds$1(props);
   // used to keep track of how many items we had on previous cycle.
   var previousResultCountRef = React.useRef();
   // utility callback to get item element.
@@ -3082,7 +3171,7 @@ function useCombobox(userProps) {
   });
   // Focus the input on first render if required.
   React.useEffect(function () {
-    var focusOnOpen = getInitialValue$1(props, 'isOpen');
+    var focusOnOpen = getInitialValue$1(props, 'isOpen', defaultStateValues$1);
     if (focusOnOpen && inputRef.current) {
       inputRef.current.focus();
     }
@@ -3093,18 +3182,17 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, React.useCallback(function handleBlur() {
+  var handleBlurInTracker = React.useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
-        type: InputBlur,
-        selectItem: false
+        type: InputBlur
       });
     }
-  }, [dispatch, latest]), React.useMemo(function () {
+  }, [dispatch, latest]);
+  var downshiftRefs = React.useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  },
-  // dependencies can be left empty because refs are getting mutated
-  []));
+  }, []);
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, handleBlurInTracker, downshiftRefs);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3212,7 +3300,7 @@ function useCombobox(userProps) {
       _ref$refKey = _ref.refKey,
       refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
       ref = _ref.ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     var _ref2 = _temp2 === void 0 ? {} : _temp2,
       _ref2$suppressRefErro = _ref2.suppressRefError,
       suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
@@ -3238,7 +3326,7 @@ function useCombobox(userProps) {
       onClick = _ref3.onClick;
       _ref3.onPress;
       var disabledProp = _ref3.disabled,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
     if (disabledProp !== undefined) {
       console.warn('Passing "disabled" as an argument to getItemProps is not supported anymore. Please use the isItemDisabled prop from useCombobox.');
     }
@@ -3289,7 +3377,7 @@ function useCombobox(userProps) {
       var _ref5$refKey = _ref5.refKey,
       refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
       ref = _ref5.ref,
-      rest = _objectWithoutPropertiesLoose(_ref5, _excluded3);
+      rest = _objectWithoutPropertiesLoose(_ref5, _excluded3$1);
     var latestState = latest.current.state;
     var toggleButtonHandleClick = function toggleButtonHandleClick() {
       dispatch({
@@ -3459,7 +3547,7 @@ function getDefaultValue(props, propKey) {
  * @param {Object} props Props passed to the hook.
  * @returns {Object} The initial state.
  */
-function getInitialState(props) {
+function getInitialState$1(props) {
   var activeIndex = getInitialValue(props, 'activeIndex');
   var selectedItems = getInitialValue(props, 'selectedItems');
   return {
@@ -3501,13 +3589,13 @@ function isKeyDownOperationPermitted(event) {
  * @param {Object} newState
  * @returns {boolean} Wheather the states are deeply equal.
  */
-function isStateEqual(prevState, newState) {
+function isStateEqual$1(prevState, newState) {
   return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
 }
-var propTypes = {
-  stateReducer: commonPropTypes.stateReducer,
-  itemToKey: commonPropTypes.itemToKey,
-  environment: commonPropTypes.environment,
+var propTypes$1 = {
+  stateReducer: propTypes$4.stateReducer,
+  itemToKey: propTypes$4.itemToKey,
+  environment: propTypes$4.environment,
   selectedItems: PropTypes.array,
   initialSelectedItems: PropTypes.array,
   defaultSelectedItems: PropTypes.array,
@@ -3533,7 +3621,7 @@ var validatePropTypes = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
   validatePropTypes = function validatePropTypes(options, caller) {
-    PropTypes.checkPropTypes(propTypes, options, 'prop', caller.name);
+    PropTypes.checkPropTypes(propTypes$1, options, 'prop', caller.name);
   };
 }
 
@@ -3551,7 +3639,7 @@ var FunctionSetSelectedItems = process.env.NODE_ENV !== "production" ? '__functi
 var FunctionSetActiveIndex = process.env.NODE_ENV !== "production" ? '__function_set_active_index__' : 11;
 var FunctionReset = process.env.NODE_ENV !== "production" ? '__function_reset__' : 12;
 
-var stateChangeTypes = /*#__PURE__*/Object.freeze({
+var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   DropdownClick: DropdownClick,
   DropdownKeyDownBackspace: DropdownKeyDownBackspace,
@@ -3569,10 +3657,9 @@ var stateChangeTypes = /*#__PURE__*/Object.freeze({
 });
 
 /* eslint-disable complexity */
-function downshiftMultipleSelectionReducer(state, action) {
+function downshiftMultipleSelectionReducer(state, props, action) {
   var type = action.type,
     index = action.index,
-    props = action.props,
     selectedItem = action.selectedItem;
   var activeIndex = state.activeIndex,
     selectedItems = state.selectedItems;
@@ -3680,9 +3767,9 @@ function downshiftMultipleSelectionReducer(state, action) {
   return _extends({}, state, changes);
 }
 
-var _excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
-  _excluded2 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
-useMultipleSelection.stateChangeTypes = stateChangeTypes;
+var _excluded$1 = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
+  _excluded2$1 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
+useMultipleSelection.stateChangeTypes = stateChangeTypes$1;
 function useMultipleSelection(userProps) {
   if (userProps === void 0) {
     userProps = {};
@@ -3696,7 +3783,7 @@ function useMultipleSelection(userProps) {
     keyNavigationPrevious = props.keyNavigationPrevious;
 
   // Reducer init.
-  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState, isStateEqual),
+  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState$1, isStateEqual$1),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var activeIndex = state.activeIndex,
@@ -3782,7 +3869,7 @@ function useMultipleSelection(userProps) {
       onKeyDown = _ref3.onKeyDown,
       selectedItemProp = _ref3.selectedItem,
       indexProp = _ref3.index,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+      rest = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
     var latestState = latest.current.state;
     var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, 'Pass either item or index to getSelectedItemProps!'),
       index = _getItemAndIndex[1];
@@ -3815,7 +3902,7 @@ function useMultipleSelection(userProps) {
       onClick = _ref4.onClick,
       _ref4$preventKeyActio = _ref4.preventKeyAction,
       preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded2);
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded2$1);
     var _ref5 = _temp3 === void 0 ? {} : _temp3,
       _ref5$suppressRefErro = _ref5.suppressRefError,
       suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
@@ -3884,8 +3971,333 @@ function useMultipleSelection(userProps) {
   };
 }
 
+var TagClick = process.env.NODE_ENV !== "production" ? '__tag_click__' : 0;
+var TagGroupKeyDownArrowLeft = process.env.NODE_ENV !== "production" ? '__taggroup_keydown_arrowleft__' : 1;
+var TagGroupKeyDownArrowRight = process.env.NODE_ENV !== "production" ? '__taggroup_keydown_arrowright__' : 2;
+var TagGroupKeyDownDelete = process.env.NODE_ENV !== "production" ? '__taggroup_keydown_delete__' : 3;
+var TagGroupKeyDownBackspace = process.env.NODE_ENV !== "production" ? '__taggroup_keydown_backspace__' : 4;
+var TagRemoveClick = process.env.NODE_ENV !== "production" ? '__tagremove_click__' : 5;
+var FunctionAddItem = process.env.NODE_ENV !== "production" ? '__function_add_item__' : 6;
+
+var stateChangeTypes = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  FunctionAddItem: FunctionAddItem,
+  TagClick: TagClick,
+  TagGroupKeyDownArrowLeft: TagGroupKeyDownArrowLeft,
+  TagGroupKeyDownArrowRight: TagGroupKeyDownArrowRight,
+  TagGroupKeyDownBackspace: TagGroupKeyDownBackspace,
+  TagGroupKeyDownDelete: TagGroupKeyDownDelete,
+  TagRemoveClick: TagRemoveClick
+});
+
+function useTagGroupReducer(state, _props, action) {
+  var type = action.type;
+  var changes;
+  switch (type) {
+    case TagClick:
+      changes = {
+        activeIndex: action.index
+      };
+      break;
+    case TagGroupKeyDownArrowLeft:
+      changes = {
+        activeIndex: state.activeIndex === 0 ? state.items.length - 1 : state.activeIndex - 1
+      };
+      break;
+    case TagGroupKeyDownArrowRight:
+      changes = {
+        activeIndex: state.activeIndex === state.items.length - 1 ? 0 : state.activeIndex + 1
+      };
+      break;
+    case TagGroupKeyDownBackspace:
+    case TagGroupKeyDownDelete:
+      {
+        var newItems = [].concat(state.items.slice(0, state.activeIndex), state.items.slice(state.activeIndex + 1));
+        var newActiveIndex = newItems.length === 0 ? -1 : newItems.length === state.activeIndex ? state.activeIndex - 1 : state.activeIndex;
+        changes = {
+          items: [].concat(state.items.slice(0, state.activeIndex), state.items.slice(state.activeIndex + 1)),
+          activeIndex: newActiveIndex
+        };
+        break;
+      }
+    case TagRemoveClick:
+      {
+        var _newItems = [].concat(state.items.slice(0, action.index), state.items.slice(action.index + 1));
+        var _newActiveIndex = _newItems.length === 0 ? -1 : _newItems.length === action.index ? action.index - 1 : action.index;
+        changes = {
+          items: _newItems,
+          activeIndex: _newActiveIndex
+        };
+      }
+      break;
+    case FunctionAddItem:
+      {
+        var _newItems2 = [];
+        if (action.index === undefined) {
+          _newItems2 = [].concat(state.items, [action.item]);
+        } else {
+          _newItems2 = [].concat(state.items.slice(0, action.index), [action.item], state.items.slice(action.index));
+        }
+        var _newActiveIndex2 = state.activeIndex === -1 ? _newItems2.length - 1 : state.activeIndex;
+        changes = {
+          items: _newItems2,
+          activeIndex: _newActiveIndex2
+        };
+        break;
+      }
+    default:
+      throw new Error('Invalid useTagGroup reducer action.');
+  }
+  return _extends({}, state, changes);
+}
+
+// istanbul ignore next
+var useElementIds = 'useId' in React__namespace // Avoid conditional useId call
+? useElementIdsR18 : useElementIdsLegacy;
+function useElementIdsR18(_ref) {
+  var id = _ref.id,
+    tagGroupId = _ref.tagGroupId,
+    getTagId = _ref.getTagId;
+  // Avoid conditional useId call
+  var reactId = "downshift-" + React__namespace.useId();
+  if (!id) {
+    id = reactId;
+  }
+  var elementIdsRef = React__namespace.useRef({
+    tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
+    getTagId: getTagId != null ? getTagId : function (index) {
+      return id + "-tag-" + index;
+    }
+  });
+  return elementIdsRef.current;
+}
+function useElementIdsLegacy(_ref2) {
+  var _ref2$id = _ref2.id,
+    id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
+    getTagId = _ref2.getTagId,
+    tagGroupId = _ref2.tagGroupId;
+  var elementIdsRef = React__namespace.useRef({
+    tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
+    getTagId: getTagId != null ? getTagId : function (index) {
+      return id + "-tag-" + index;
+    }
+  });
+  return elementIdsRef.current;
+}
+
+function getInitialState(props) {
+  var _ref, _props$items, _ref2, _props$activeIndex;
+  var items = (_ref = (_props$items = props.items) != null ? _props$items : props.initialItems) != null ? _ref : [];
+  var activeIndex = (_ref2 = (_props$activeIndex = props.activeIndex) != null ? _props$activeIndex : props.initialActiveIndex) != null ? _ref2 : items.length === 0 ? -1 : 0;
+  return {
+    activeIndex: activeIndex,
+    items: items
+  };
+}
+
+function isStateEqual(oldState, newState) {
+  return oldState.activeIndex === newState.activeIndex && oldState.items === newState.items;
+}
+
+var A11Y_DESCRIPTION_ELEMENT_ID = 'tag-group-a11y-description';
+function useAccessibleDescription(document, description) {
+  React__namespace.useEffect(function () {
+    if (!document) {
+      return;
+    }
+    var accessibleDescriptionElement = document.createElement('div');
+    accessibleDescriptionElement.setAttribute('id', A11Y_DESCRIPTION_ELEMENT_ID);
+    accessibleDescriptionElement.style.display = 'none';
+    accessibleDescriptionElement.textContent = description;
+    document.body.appendChild(accessibleDescriptionElement);
+    return function () {
+      accessibleDescriptionElement.remove();
+    };
+  }, [description, document]);
+}
+
+function getMergedProps(userProps) {
+  return _extends({
+    stateReducer: function stateReducer(_s, _ref) {
+      var changes = _ref.changes;
+      return changes;
+    },
+    environment: /* istanbul ignore next (ssr) */
+    typeof window === 'undefined' || false ? undefined : window,
+    removeElementDescription: 'Press Delete to remove tag.'
+  }, userProps);
+}
+
+var propTypes = {
+  isItemDisabled: PropTypes.func
+};
+
+var _excluded = ["onKeyDown"],
+  _excluded2 = ["index", "refKey", "ref", "onClick"],
+  _excluded3 = ["index", "onClick"];
+var _useTagGroup = function useTagGroup(userProps) {
+  var _props$environment;
+  if (userProps === void 0) {
+    userProps = {};
+  }
+  /* State and Props */
+
+  validatePropTypes$1(userProps, _useTagGroup, propTypes);
+  var props = getMergedProps(userProps);
+  var _useControlledReducer = useControlledReducer$1(useTagGroupReducer, props, getInitialState, isStateEqual),
+    state = _useControlledReducer[0],
+    dispatch = _useControlledReducer[1];
+  var activeIndex = state.activeIndex,
+    items = state.items;
+
+  /* Refs */
+
+  var latest = useLatestRef({
+    state: state,
+    props: props
+  });
+  var elementIds = useElementIds({
+    getTagId: props.getTagId,
+    id: props.id,
+    tagGroupId: props.tagGroupId
+  });
+  var itemRefs = React.useRef({});
+  var previousItemsLengthRef = React.useRef(items.length);
+  var isInitialMount = useIsInitialMount();
+
+  /* Effects */
+
+  useAccessibleDescription((_props$environment = props.environment) == null ? void 0 : _props$environment.document, props.removeElementDescription);
+  React.useEffect(function () {
+    if (isInitialMount) {
+      return;
+    }
+    if (previousItemsLengthRef.current < items.length) {
+      return;
+    }
+    if (activeIndex >= 0 && activeIndex < Object.keys(itemRefs.current).length) {
+      var _itemRefs$current$ele;
+      (_itemRefs$current$ele = itemRefs.current[elementIds.getTagId(activeIndex)]) == null || _itemRefs$current$ele.focus();
+    }
+  }, [activeIndex, elementIds, isInitialMount, items.length]);
+  React.useEffect(function () {
+    previousItemsLengthRef.current = items.length;
+  });
+
+  /* Getter functions */
+
+  var getTagGroupProps = React.useCallback(function (options) {
+    var _ref = options != null ? options : {},
+      onKeyDown = _ref.onKeyDown,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    var handleKeyDown = function handleKeyDown(e) {
+      switch (e.key) {
+        case 'ArrowLeft':
+          dispatch({
+            type: TagGroupKeyDownArrowLeft
+          });
+          break;
+        case 'ArrowRight':
+          dispatch({
+            type: TagGroupKeyDownArrowRight
+          });
+          break;
+        case 'Delete':
+          dispatch({
+            type: TagGroupKeyDownDelete
+          });
+          break;
+        case 'Backspace':
+          dispatch({
+            type: TagGroupKeyDownBackspace
+          });
+          break;
+      }
+    };
+    var tagGroupProps = _extends({
+      id: elementIds.tagGroupId,
+      'aria-live': 'polite',
+      'aria-atomic': 'false',
+      'aria-relevant': 'additions',
+      role: 'listbox',
+      onKeyDown: callAllEventHandlers$1(onKeyDown, handleKeyDown)
+    }, rest);
+    return tagGroupProps;
+  }, [dispatch, elementIds.tagGroupId]);
+  var getTagProps = React.useCallback(function (options) {
+    var _extends2;
+    var index = options.index,
+      _options$refKey = options.refKey,
+      refKey = _options$refKey === void 0 ? 'ref' : _options$refKey,
+      ref = options.ref,
+      onClick = options.onClick,
+      rest = _objectWithoutPropertiesLoose(options, _excluded2);
+    if (!Number.isInteger(index) || index < 0) {
+      throw new Error('Pass correct item index to getTagProps!');
+    }
+    var latestState = latest.current.state;
+    var handleClick = function handleClick() {
+      dispatch({
+        type: TagClick,
+        index: index
+      });
+    };
+    var tagId = elementIds.getTagId(index);
+    return _extends((_extends2 = {
+      'aria-describedby': A11Y_DESCRIPTION_ELEMENT_ID
+    }, _extends2[refKey] = handleRefs$1(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);
+  }, [dispatch, elementIds, latest]);
+  var getTagRemoveProps = React.useCallback(function (options) {
+    var index = options.index,
+      onClick = options.onClick,
+      rest = _objectWithoutPropertiesLoose(options, _excluded3);
+    if (!Number.isInteger(index) || index < 0) {
+      throw new Error('Pass correct item index to getTagRemoveProps!');
+    }
+    var handleClick = function handleClick(event) {
+      event.stopPropagation();
+      dispatch({
+        type: TagRemoveClick,
+        index: index
+      });
+    };
+    var tagId = elementIds.getTagId(index);
+    var tagRemoveId = tagId + "-remove";
+    return _extends({
+      id: tagRemoveId,
+      tabIndex: -1,
+      'aria-labelledby': tagRemoveId + " " + tagId,
+      onClick: callAllEventHandlers$1(onClick, handleClick)
+    }, rest);
+  }, [elementIds, dispatch]);
+
+  /* Imperative Functions */
+
+  var addItem = React.useCallback(function (item, index) {
+    dispatch({
+      type: FunctionAddItem,
+      item: item,
+      index: index
+    });
+  }, [dispatch]);
+  return {
+    activeIndex: activeIndex,
+    addItem: addItem,
+    getTagGroupProps: getTagGroupProps,
+    getTagProps: getTagProps,
+    getTagRemoveProps: getTagRemoveProps,
+    items: items
+  };
+};
+_useTagGroup.stateChangeTypes = stateChangeTypes;
+
 exports.default = Downshift;
 exports.resetIdCounter = resetIdCounter;
 exports.useCombobox = useCombobox;
 exports.useMultipleSelection = useMultipleSelection;
 exports.useSelect = useSelect;
+exports.useTagGroup = _useTagGroup;