downshift 7.0.0-alpha.1 → 7.0.0

package/dist/downshift.cjs.js

@@ -14,6 +14,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var computeScrollIntoView__default = /*#__PURE__*/_interopDefaultLegacy(computeScrollIntoView);
 
 let 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
@@ -22,24 +23,20 @@ let idCounter = 0;
  * @param {Function} cb the callback
  * @return {Function} a function
  */
-
 function cbToCb(cb) {
   return typeof cb === 'function' ? cb : noop;
 }
-
 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
  */
-
-
 function scrollIntoView(node, menuNode) {
   if (!node) {
     return;
   }
-
   const actions = computeScrollIntoView__default["default"](node, {
     boundary: menuNode,
     block: 'nearest',
@@ -55,18 +52,18 @@ function scrollIntoView(node, menuNode) {
     el.scrollLeft = left;
   });
 }
+
 /**
  * @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
  */
-
-
 function isOrContainsNode(parent, child, environment) {
   const result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
   return result;
 }
+
 /**
  * Simple debounce implementation. Will call the given
  * function once after the time given has passed since
@@ -75,32 +72,27 @@ function isOrContainsNode(parent, child, environment) {
  * @param {Number} time the time to wait
  * @return {Function} the debounced function
  */
-
-
 function debounce(fn, time) {
   let 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(() => {
       timeoutId = null;
       fn(...args);
     }, time);
   }
-
   wrapper.cancel = cancel;
   return wrapper;
 }
+
 /**
  * This is intended to be used to compose event handlers.
  * They are executed in order until one of them sets
@@ -108,33 +100,26 @@ function debounce(fn, time) {
  * @param {...Function} fns the event handler functions
  * @return {Function} the event handler to add to an element
  */
-
-
 function callAllEventHandlers() {
   for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     fns[_key2] = arguments[_key2];
   }
-
   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(fn => {
       if (fn) {
         fn(event, ...args);
       }
-
       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];
   }
-
   return node => {
     refs.forEach(ref => {
       if (typeof ref === 'function') {
@@ -145,23 +130,22 @@ 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() {
   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,
@@ -170,29 +154,24 @@ function resetIdCounter() {
  * @param {Object} param the downshift state and other relevant properties
  * @return {String} the a11y status message
  */
-
-
 function getA11yStatusMessage$1(_ref2) {
   let {
     isOpen,
     resultCount,
     previousResultCount
   } = _ref2;
-
   if (!isOpen) {
     return '';
   }
-
   if (!resultCount) {
     return 'No results are available.';
   }
-
   if (resultCount !== previousResultCount) {
     return `${resultCount} result${resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
   }
-
   return '';
 }
+
 /**
  * Takes an argument and if it's an array, returns the first item in the array
  * otherwise returns the argument
@@ -200,64 +179,52 @@ function getA11yStatusMessage$1(_ref2) {
  * @param {*} defaultValue the value if arg is falsey not defined
  * @return {*} the arg or it's first item
  */
-
-
 function unwrapArray(arg, defaultValue) {
-  arg = Array.isArray(arg) ?
-  /* istanbul ignore next (preact) */
-  arg[0] : arg;
-
+  arg = Array.isArray(arg) ? /* istanbul ignore next (preact) */arg[0] : arg;
   if (!arg && defaultValue) {
     return defaultValue;
   } else {
     return arg;
   }
 }
+
 /**
  * @param {Object} element (P)react element
  * @return {Boolean} whether it's a DOM element
  */
-
-
 function isDOMElement(element) {
 
-
+  // then we assume this is react
   return typeof element.type === 'string';
 }
+
 /**
  * @param {Object} element (P)react element
  * @return {Object} the props
  */
-
-
 function getElementProps(element) {
-
   return element.props;
 }
+
 /**
  * Throws a helpful error message for required properties. Useful
  * to be used as a default in destructuring or object params.
  * @param {String} fnName the function name
  * @param {String} propName the prop name
  */
-
-
 function requiredProp(fnName, propName) {
   // eslint-disable-next-line no-console
   console.error(`The property "${propName}" is required in "${fnName}"`);
 }
-
 const stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
 /**
  * @param {Object} state the state object
  * @return {Object} state that is relevant to downshift
  */
-
 function pickState(state) {
   if (state === void 0) {
     state = {};
   }
-
   const result = {};
   stateKeys.forEach(k => {
     if (state.hasOwnProperty(k)) {
@@ -266,6 +233,7 @@ function pickState(state) {
   });
   return result;
 }
+
 /**
  * This will perform a shallow merge of the given state object
  * with the state coming from props
@@ -277,14 +245,13 @@ function pickState(state) {
  * @param {Object} props The props that may contain controlled values.
  * @returns {Object} The merged controlled state.
  */
-
-
 function getState(state, props) {
   return Object.keys(state).reduce((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
@@ -294,41 +261,36 @@ function getState(state, props) {
  * @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) {
   const {
     key,
     keyCode
   } = event;
   /* 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
  * @return {Boolean} whether it's object literal
  */
-
-
 function isPlainObject(obj) {
   return Object.prototype.toString.call(obj) === '[object Object]';
 }
+
 /**
  * Returns the new index in the list, in a circular way. If next value is out of bonds from the total,
  * it will wrap to either 0 or itemCount - 1.
@@ -340,39 +302,30 @@ function isPlainObject(obj) {
  * @param {boolean} circular Specify if navigation is circular. Default is true.
  * @returns {number} The new index after the move.
  */
-
-
 function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
   if (circular === void 0) {
     circular = true;
   }
-
   if (itemCount === 0) {
     return -1;
   }
-
   const itemsLastIndex = itemCount - 1;
-
   if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
     baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
   }
-
   let newIndex = baseIndex + moveAmount;
-
   if (newIndex < 0) {
     newIndex = circular ? itemsLastIndex : 0;
   } else if (newIndex > itemsLastIndex) {
     newIndex = circular ? 0 : itemsLastIndex;
   }
-
   const nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
-
   if (nonDisabledNewIndex === -1) {
     return baseIndex >= itemCount ? -1 : baseIndex;
   }
-
   return nonDisabledNewIndex;
 }
+
 /**
  * Returns the next index in the list of an item that is not disabled.
  *
@@ -383,15 +336,11 @@ function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromI
  * @param {boolean} circular Specify if navigation is circular. Default is true.
  * @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1.
  */
-
-
 function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
   const currentElementNode = getItemNodeFromIndex(baseIndex);
-
   if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
     return baseIndex;
   }
-
   if (moveAmount > 0) {
     for (let index = baseIndex + 1; index < itemCount; index++) {
       if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
@@ -405,13 +354,12 @@ function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFr
       }
     }
   }
-
   if (circular) {
     return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false);
   }
-
   return -1;
 }
+
 /**
  * Checks if event target is within the downshift elements.
  *
@@ -422,20 +370,16 @@ function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFr
  *
  * @returns {boolean} Whether or not the target is within downshift elements.
  */
-
-
 function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
   if (checkActiveElement === void 0) {
     checkActiveElement = true;
   }
-
   return downshiftElements.some(contextNode => contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment)));
-} // eslint-disable-next-line import/no-mutable-exports
-
+}
 
+// eslint-disable-next-line import/no-mutable-exports
 let validateControlledUnchanged = noop;
 /* istanbul ignore next */
-
 if (process.env.NODE_ENV !== 'production') {
   validateControlledUnchanged = (state, prevProps, nextProps) => {
     const 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`;
@@ -454,39 +398,33 @@ if (process.env.NODE_ENV !== 'production') {
 const cleanupStatus = debounce(documentProp => {
   getStatusDiv(documentProp).textContent = '';
 }, 500);
+
 /**
  * @param {String} status the status message
  * @param {Object} documentProp document passed by the user.
  */
-
 function setStatus(status, documentProp) {
   const div = getStatusDiv(documentProp);
-
   if (!status) {
     return;
   }
-
   div.textContent = status;
   cleanupStatus(documentProp);
 }
+
 /**
  * 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) {
   if (documentProp === void 0) {
     documentProp = document;
   }
-
   let statusDiv = documentProp.getElementById('a11y-status-message');
-
   if (statusDiv) {
     return statusDiv;
   }
-
   statusDiv = documentProp.createElement('div');
   statusDiv.setAttribute('id', 'a11y-status-message');
   statusDiv.setAttribute('role', 'status');
@@ -546,27 +484,22 @@ var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
 });
 
 /* eslint camelcase:0 */
-
 const Downshift = /*#__PURE__*/(() => {
   class Downshift extends react.Component {
     constructor(_props) {
       var _this;
-
       super(_props);
       _this = this;
       this.id = this.props.id || `downshift-${generateId()}`;
       this.menuId = this.props.menuId || `${this.id}-menu`;
       this.labelId = this.props.labelId || `${this.id}-label`;
       this.inputId = this.props.inputId || `${this.id}-input`;
-
       this.getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`);
-
       this.input = null;
       this.items = [];
       this.itemCount = null;
       this.previousResultCount = 0;
       this.timeoutIds = [];
-
       this.internalSetTimeout = (fn, time) => {
         const id = setTimeout(() => {
           this.timeoutIds = this.timeoutIds.filter(i => i !== id);
@@ -574,32 +507,25 @@ const Downshift = /*#__PURE__*/(() => {
         }, time);
         this.timeoutIds.push(id);
       };
-
       this.setItemCount = count => {
         this.itemCount = count;
       };
-
       this.unsetItemCount = () => {
         this.itemCount = null;
       };
-
       this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
         if (highlightedIndex === void 0) {
           highlightedIndex = _this.props.defaultHighlightedIndex;
         }
-
         if (otherStateToSet === void 0) {
           otherStateToSet = {};
         }
-
         otherStateToSet = pickState(otherStateToSet);
-
         _this.internalSetState({
           highlightedIndex,
           ...otherStateToSet
         });
       };
-
       this.clearSelection = cb => {
         this.internalSetState({
           selectedItem: null,
@@ -608,7 +534,6 @@ const Downshift = /*#__PURE__*/(() => {
           isOpen: this.props.defaultIsOpen
         }, cb);
       };
-
       this.selectItem = (item, otherStateToSet, cb) => {
         otherStateToSet = pickState(otherStateToSet);
         this.internalSetState({
@@ -619,114 +544,105 @@ const Downshift = /*#__PURE__*/(() => {
           ...otherStateToSet
         }, cb);
       };
-
       this.selectItemAtIndex = (itemIndex, otherStateToSet, cb) => {
         const item = this.items[itemIndex];
-
         if (item == null) {
           return;
         }
-
         this.selectItem(item, otherStateToSet, cb);
       };
-
       this.selectHighlightedItem = (otherStateToSet, cb) => {
         return this.selectItemAtIndex(this.getState().highlightedIndex, otherStateToSet, cb);
       };
-
       this.internalSetState = (stateToSet, cb) => {
         let isItemSelected, onChangeArg;
         const onStateChangeArg = {};
-        const isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
+        const isStateToSetFunction = typeof stateToSet === 'function';
+
+        // we want to call `onInputValueChange` before the `setState` call
         // so someone controlling the `inputValue` state gets notified of
         // the input change as soon as possible. This avoids issues with
         // preserving the cursor position.
         // See https://github.com/downshift-js/downshift/issues/217 for more info.
-
         if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
-          this.props.onInputValueChange(stateToSet.inputValue, { ...this.getStateAndHelpers(),
+          this.props.onInputValueChange(stateToSet.inputValue, {
+            ...this.getStateAndHelpers(),
             ...stateToSet
           });
         }
-
         return this.setState(state => {
           state = this.getState(state);
-          let newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
+          let newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet;
+
+          // Your own function that could modify the state that will be set.
+          newStateToSet = this.props.stateReducer(state, newStateToSet);
 
-          newStateToSet = this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
+          // checks if an item is selected, regardless of if it's different from
           // what was selected before
           // used to determine if onSelect and onChange callbacks should be called
-
-          isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
-
-          const nextState = {}; // this is just used to tell whether the state changed
+          isItemSelected = newStateToSet.hasOwnProperty('selectedItem');
+          // this keeps track of the object we want to call with setState
+          const nextState = {};
+          // we need to call on change if the outside world is controlling any of our state
           // and we're trying to update that state. OR if the selection has changed and we're
           // trying to update the selection
-
           if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
             onChangeArg = newStateToSet.selectedItem;
           }
-
           newStateToSet.type = newStateToSet.type || unknown;
           Object.keys(newStateToSet).forEach(key => {
             // onStateChangeArg should only have the state that is
             // actually changing
             if (state[key] !== newStateToSet[key]) {
               onStateChangeArg[key] = newStateToSet[key];
-            } // the type is useful for the onStateChangeArg
+            }
+            // the type is useful for the onStateChangeArg
             // but we don't actually want to set it in internal state.
             // this is an undocumented feature for now... Not all internalSetState
             // calls support it and I'm not certain we want them to yet.
             // But it enables users controlling the isOpen state to know when
             // the isOpen state changes due to mouseup events which is quite handy.
-
-
             if (key === 'type') {
               return;
             }
-
-            newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
-
+            newStateToSet[key];
+            // if it's coming from props, then we don't care to set it internally
             if (!isControlledProp(this.props, key)) {
               nextState[key] = newStateToSet[key];
             }
-          }); // if stateToSet is a function, then we weren't able to call onInputValueChange
-          // earlier, so we'll call it now that we know what the inputValue state will be.
+          });
 
+          // if stateToSet is a function, then we weren't able to call onInputValueChange
+          // earlier, so we'll call it now that we know what the inputValue state will be.
           if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
-            this.props.onInputValueChange(newStateToSet.inputValue, { ...this.getStateAndHelpers(),
+            this.props.onInputValueChange(newStateToSet.inputValue, {
+              ...this.getStateAndHelpers(),
               ...newStateToSet
             });
           }
-
           return nextState;
         }, () => {
           // call the provided callback if it's a function
-          cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
-          // we have relevant information to pass them.
+          cbToCb(cb)();
 
+          // only call the onStateChange and onChange callbacks if
+          // we have relevant information to pass them.
           const hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
-
           if (hasMoreStateThanType) {
             this.props.onStateChange(onStateChangeArg, this.getStateAndHelpers());
           }
-
           if (isItemSelected) {
             this.props.onSelect(stateToSet.selectedItem, this.getStateAndHelpers());
           }
-
           if (onChangeArg !== undefined) {
             this.props.onChange(onChangeArg, this.getStateAndHelpers());
-          } // this is currently undocumented and therefore subject to change
+          }
+          // this is currently undocumented and therefore subject to change
           // We'll try to not break it, but just be warned.
-
-
           this.props.onUserAction(onStateChangeArg, this.getStateAndHelpers());
         });
       };
-
       this.rootRef = node => this._rootNode = node;
-
       this.getRootProps = function (_temp, _temp2) {
         let {
           refKey = 'ref',
@@ -741,11 +657,9 @@ const Downshift = /*#__PURE__*/(() => {
         _this.getRootProps.called = true;
         _this.getRootProps.refKey = refKey;
         _this.getRootProps.suppressRefError = suppressRefError;
-
         const {
           isOpen
         } = _this.getState();
-
         return {
           [refKey]: handleRefs(ref, _this.rootRef),
           role: 'combobox',
@@ -756,11 +670,9 @@ const Downshift = /*#__PURE__*/(() => {
           ...rest
         };
       };
-
       this.keyDownHandlers = {
         ArrowDown(event) {
           event.preventDefault();
-
           if (this.getState().isOpen) {
             const amount = event.shiftKey ? 5 : 1;
             this.moveHighlightedIndex(amount, {
@@ -772,7 +684,6 @@ const Downshift = /*#__PURE__*/(() => {
               type: keyDownArrowDown
             }, () => {
               const itemCount = this.getItemCount();
-
               if (itemCount > 0) {
                 const {
                   highlightedIndex
@@ -785,10 +696,8 @@ const Downshift = /*#__PURE__*/(() => {
             });
           }
         },
-
         ArrowUp(event) {
           event.preventDefault();
-
           if (this.getState().isOpen) {
             const amount = event.shiftKey ? -5 : -1;
             this.moveHighlightedIndex(amount, {
@@ -800,7 +709,6 @@ const Downshift = /*#__PURE__*/(() => {
               type: keyDownArrowUp
             }, () => {
               const itemCount = this.getItemCount();
-
               if (itemCount > 0) {
                 const {
                   highlightedIndex
@@ -813,32 +721,26 @@ const Downshift = /*#__PURE__*/(() => {
             });
           }
         },
-
         Enter(event) {
           if (event.which === 229) {
             return;
           }
-
           const {
             isOpen,
             highlightedIndex
           } = this.getState();
-
           if (isOpen && highlightedIndex != null) {
             event.preventDefault();
             const item = this.items[highlightedIndex];
             const itemNode = this.getItemNodeFromIndex(highlightedIndex);
-
             if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
               return;
             }
-
             this.selectHighlightedItem({
               type: keyDownEnter
             });
           }
         },
-
         Escape(event) {
           event.preventDefault();
           this.reset({
@@ -849,68 +751,57 @@ const Downshift = /*#__PURE__*/(() => {
             })
           });
         }
-
       };
-      this.buttonKeyDownHandlers = { ...this.keyDownHandlers,
-
+      this.buttonKeyDownHandlers = {
+        ...this.keyDownHandlers,
         ' '(event) {
           event.preventDefault();
           this.toggleMenu({
             type: keyDownSpaceButton
           });
         }
-
       };
-      this.inputKeyDownHandlers = { ...this.keyDownHandlers,
-
+      this.inputKeyDownHandlers = {
+        ...this.keyDownHandlers,
         Home(event) {
           const {
             isOpen
           } = this.getState();
-
           if (!isOpen) {
             return;
           }
-
           event.preventDefault();
           const itemCount = this.getItemCount();
-
           if (itemCount <= 0 || !isOpen) {
             return;
-          } // get next non-disabled starting downwards from 0 if that's disabled.
-
+          }
 
+          // get next non-disabled starting downwards from 0 if that's disabled.
           const newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, index => this.getItemNodeFromIndex(index), false);
           this.setHighlightedIndex(newHighlightedIndex, {
             type: keyDownHome
           });
         },
-
         End(event) {
           const {
             isOpen
           } = this.getState();
-
           if (!isOpen) {
             return;
           }
-
           event.preventDefault();
           const itemCount = this.getItemCount();
-
           if (itemCount <= 0 || !isOpen) {
             return;
-          } // get next non-disabled starting upwards from last index if that's disabled.
-
+          }
 
+          // get next non-disabled starting upwards from last index if that's disabled.
           const newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, index => this.getItemNodeFromIndex(index), false);
           this.setHighlightedIndex(newHighlightedIndex, {
             type: keyDownEnd
           });
         }
-
       };
-
       this.getToggleButtonProps = function (_temp3) {
         let {
           onClick,
@@ -920,11 +811,9 @@ const Downshift = /*#__PURE__*/(() => {
           onBlur,
           ...rest
         } = _temp3 === void 0 ? {} : _temp3;
-
         const {
           isOpen
         } = _this.getState();
-
         const enabledEventHandlers = {
           onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
           onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
@@ -942,33 +831,27 @@ const Downshift = /*#__PURE__*/(() => {
           ...rest
         };
       };
-
       this.buttonHandleKeyUp = event => {
         // Prevent click event from emitting in Firefox
         event.preventDefault();
       };
-
       this.buttonHandleKeyDown = event => {
         const key = normalizeArrowKey(event);
-
         if (this.buttonKeyDownHandlers[key]) {
           this.buttonKeyDownHandlers[key].call(this, event);
         }
       };
-
       this.buttonHandleClick = event => {
-        event.preventDefault(); // handle odd case for Safari and Firefox which
+        event.preventDefault();
+        // handle odd case for Safari and Firefox which
         // don't give the button the focus properly.
-
         /* istanbul ignore if (can't reasonably test this) */
-
         if (this.props.environment.document.activeElement === this.props.environment.document.body) {
           event.target.focus();
-        } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
+        }
+        // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
         // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
         // when building for production and should therefore have no impact on production code.
-
-
         if (process.env.NODE_ENV === 'test') {
           this.toggleMenu({
             type: clickButton
@@ -980,11 +863,9 @@ const Downshift = /*#__PURE__*/(() => {
           }));
         }
       };
-
       this.buttonHandleBlur = event => {
         const blurTarget = event.target; // Save blur target for comparison with activeElement later
         // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
-
         this.internalSetTimeout(() => {
           if (!this.isMouseDown && (this.props.environment.document.activeElement == null || this.props.environment.document.activeElement.id !== this.inputId) && this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
           ) {
@@ -994,7 +875,6 @@ const Downshift = /*#__PURE__*/(() => {
           }
         });
       };
-
       this.getLabelProps = props => {
         return {
           htmlFor: this.inputId,
@@ -1002,7 +882,6 @@ const Downshift = /*#__PURE__*/(() => {
           ...props
         };
       };
-
       this.getInputProps = function (_temp4) {
         let {
           onKeyDown,
@@ -1014,18 +893,16 @@ const Downshift = /*#__PURE__*/(() => {
         } = _temp4 === void 0 ? {} : _temp4;
         let onChangeKey;
         let eventHandlers = {};
-        /* istanbul ignore next (preact) */
 
+        /* istanbul ignore next (preact) */
         {
           onChangeKey = 'onChange';
         }
-
         const {
           inputValue,
           isOpen,
           highlightedIndex
         } = _this.getState();
-
         if (!rest.disabled) {
           eventHandlers = {
             [onChangeKey]: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
@@ -1033,7 +910,6 @@ const Downshift = /*#__PURE__*/(() => {
             onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
           };
         }
-
         return {
           'aria-autocomplete': 'list',
           'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
@@ -1048,15 +924,12 @@ const Downshift = /*#__PURE__*/(() => {
           ...rest
         };
       };
-
       this.inputHandleKeyDown = event => {
         const key = normalizeArrowKey(event);
-
         if (key && this.inputKeyDownHandlers[key]) {
           this.inputKeyDownHandlers[key].call(this, event);
         }
       };
-
       this.inputHandleChange = event => {
         this.internalSetState({
           type: changeInput,
@@ -1065,12 +938,10 @@ const Downshift = /*#__PURE__*/(() => {
           highlightedIndex: this.props.defaultHighlightedIndex
         });
       };
-
       this.inputHandleBlur = () => {
         // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
         this.internalSetTimeout(() => {
           const downshiftButtonIsActive = this.props.environment.document && !!this.props.environment.document.activeElement && !!this.props.environment.document.activeElement.dataset && this.props.environment.document.activeElement.dataset.toggle && this._rootNode && this._rootNode.contains(this.props.environment.document.activeElement);
-
           if (!this.isMouseDown && !downshiftButtonIsActive) {
             this.reset({
               type: blurInput
@@ -1078,11 +949,9 @@ const Downshift = /*#__PURE__*/(() => {
           }
         });
       };
-
       this.menuRef = node => {
         this._menuNode = node;
       };
-
       this.getMenuProps = function (_temp5, _temp6) {
         let {
           refKey = 'ref',
@@ -1103,7 +972,6 @@ const Downshift = /*#__PURE__*/(() => {
           ...props
         };
       };
-
       this.getItemProps = function (_temp7) {
         let {
           onMouseMove,
@@ -1111,20 +979,15 @@ const Downshift = /*#__PURE__*/(() => {
           onClick,
           onPress,
           index,
-          item = process.env.NODE_ENV === 'production' ?
-          /* istanbul ignore next */
-          undefined : requiredProp('getItemProps', 'item'),
+          item = process.env.NODE_ENV === 'production' ? /* istanbul ignore next */undefined : requiredProp('getItemProps', 'item'),
           ...rest
         } = _temp7 === void 0 ? {} : _temp7;
-
         if (index === undefined) {
           _this.items.push(item);
-
           index = _this.items.indexOf(item);
         } else {
           _this.items[index] = item;
         }
-
         const onSelectKey = 'onClick';
         const customClickHandler = onClick;
         const enabledEventHandlers = {
@@ -1135,17 +998,15 @@ const Downshift = /*#__PURE__*/(() => {
             if (index === _this.getState().highlightedIndex) {
               return;
             }
-
             _this.setHighlightedIndex(index, {
               type: itemMouseEnter
-            }); // We never want to manually scroll when changing state based
+            });
+
+            // We never want to manually scroll when changing state based
             // on `onMouseMove` because we will be moving the element out
             // from under the user which is currently scrolling/moving the
             // cursor
-
-
             _this.avoidScrolling = true;
-
             _this.internalSetTimeout(() => _this.avoidScrolling = false, 250);
           }),
           onMouseDown: callAllEventHandlers(onMouseDown, event => {
@@ -1159,9 +1020,10 @@ const Downshift = /*#__PURE__*/(() => {
               type: clickItem
             });
           })
-        }; // Passing down the onMouseDown handler to prevent redirect
-        // of the activeElement if clicking on disabled items
+        };
 
+        // Passing down the onMouseDown handler to prevent redirect
+        // of the activeElement if clicking on disabled items
         const eventHandlers = rest.disabled ? {
           onMouseDown: enabledEventHandlers.onMouseDown
         } : enabledEventHandlers;
@@ -1173,18 +1035,14 @@ const Downshift = /*#__PURE__*/(() => {
           ...rest
         };
       };
-
       this.clearItems = () => {
         this.items = [];
       };
-
       this.reset = function (otherStateToSet, cb) {
         if (otherStateToSet === void 0) {
           otherStateToSet = {};
         }
-
         otherStateToSet = pickState(otherStateToSet);
-
         _this.internalSetState(_ref => {
           let {
             selectedItem
@@ -1197,14 +1055,11 @@ const Downshift = /*#__PURE__*/(() => {
           };
         }, cb);
       };
-
       this.toggleMenu = function (otherStateToSet, cb) {
         if (otherStateToSet === void 0) {
           otherStateToSet = {};
         }
-
         otherStateToSet = pickState(otherStateToSet);
-
         _this.internalSetState(_ref2 => {
           let {
             isOpen
@@ -1221,29 +1076,24 @@ const Downshift = /*#__PURE__*/(() => {
             isOpen,
             highlightedIndex
           } = _this.getState();
-
           if (isOpen) {
             if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
               _this.setHighlightedIndex(highlightedIndex, otherStateToSet);
             }
           }
-
           cbToCb(cb)();
         });
       };
-
       this.openMenu = cb => {
         this.internalSetState({
           isOpen: true
         }, cb);
       };
-
       this.closeMenu = cb => {
         this.internalSetState({
           isOpen: false
         }, cb);
       };
-
       this.updateStatus = debounce(() => {
         const state = this.getState();
         const item = this.items[state.highlightedIndex];
@@ -1269,21 +1119,17 @@ const Downshift = /*#__PURE__*/(() => {
         initialInputValue: _inputValue = '',
         initialSelectedItem: _selectedItem = null
       } = this.props;
-
       const _state = this.getState({
         highlightedIndex: _highlightedIndex,
         isOpen: _isOpen,
         inputValue: _inputValue,
         selectedItem: _selectedItem
       });
-
       if (_state.selectedItem != null && this.props.initialInputValue === undefined) {
         _state.inputValue = this.props.itemToString(_state.selectedItem);
       }
-
       this.state = _state;
     }
-
     /**
      * Clear all running timeouts
      */
@@ -1293,6 +1139,7 @@ const Downshift = /*#__PURE__*/(() => {
       });
       this.timeoutIds = [];
     }
+
     /**
      * Gets the state based on internal state or props
      * If a state value is passed via props, then that
@@ -1302,36 +1149,28 @@ const Downshift = /*#__PURE__*/(() => {
      * @param {Object} stateToMerge defaults to this.state
      * @return {Object} the state
      */
-
-
     getState(stateToMerge) {
       if (stateToMerge === void 0) {
         stateToMerge = this.state;
       }
-
       return getState(stateToMerge, this.props);
     }
-
     getItemCount() {
       // things read better this way. They're in priority order:
       // 1. `this.itemCount`
       // 2. `this.props.itemCount`
       // 3. `this.items.length`
       let itemCount = this.items.length;
-
       if (this.itemCount != null) {
         itemCount = this.itemCount;
       } else if (this.props.itemCount !== undefined) {
         itemCount = this.props.itemCount;
       }
-
       return itemCount;
     }
-
     getItemNodeFromIndex(index) {
       return this.props.environment.document.getElementById(this.getItemId(index));
     }
-
     scrollHighlightedItemIntoView() {
       /* istanbul ignore else (react-native) */
       {
@@ -1339,19 +1178,16 @@ const Downshift = /*#__PURE__*/(() => {
         this.props.scrollIntoView(node, this._menuNode);
       }
     }
-
     moveHighlightedIndex(amount, otherStateToSet) {
       const itemCount = this.getItemCount();
       const {
         highlightedIndex
       } = this.getState();
-
       if (itemCount > 0) {
         const nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
         this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
       }
     }
-
     getStateAndHelpers() {
       const {
         highlightedIndex,
@@ -1418,17 +1254,17 @@ const Downshift = /*#__PURE__*/(() => {
         isOpen,
         selectedItem
       };
-    } //////////////////////////// ROOT
+    }
 
+    //////////////////////////// ROOT
 
     componentDidMount() {
       /* istanbul ignore if (react-native) */
       if (process.env.NODE_ENV !== 'production' && !false && this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
         validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
       }
-      /* istanbul ignore if (react-native) */
-
 
+      /* istanbul ignore if (react-native) */
       {
         // this.isMouseDown helps us track whether the mouse is currently held down.
         // This is useful when the user clicks on an item in the list, but holds the mouse
@@ -1438,44 +1274,37 @@ const Downshift = /*#__PURE__*/(() => {
         const onMouseDown = () => {
           this.isMouseDown = true;
         };
-
         const onMouseUp = event => {
-          this.isMouseDown = false; // if the target element or the activeElement is within a downshift node
+          this.isMouseDown = false;
+          // if the target element or the activeElement is within a downshift node
           // then we don't want to reset downshift
-
           const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment);
-
           if (!contextWithinDownshift && this.getState().isOpen) {
             this.reset({
               type: mouseUp
             }, () => this.props.onOuterClick(this.getStateAndHelpers()));
           }
-        }; // Touching an element in iOS gives focus and hover states, but touching out of
+        };
+        // Touching an element in iOS gives focus and hover states, but touching out of
         // the element will remove hover, and persist the focus state, resulting in the
         // blur event not being triggered.
         // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
         // If the user taps outside of Downshift, the component should be reset,
         // but not if the user is swiping
-
-
         const onTouchStart = () => {
           this.isTouchMove = false;
         };
-
         const onTouchMove = () => {
           this.isTouchMove = true;
         };
-
         const onTouchEnd = event => {
           const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment, false);
-
           if (!this.isTouchMove && !contextWithinDownshift && this.getState().isOpen) {
             this.reset({
               type: touchEnd
             }, () => this.props.onOuterClick(this.getStateAndHelpers()));
           }
         };
-
         const {
           environment
         } = this.props;
@@ -1484,7 +1313,6 @@ const Downshift = /*#__PURE__*/(() => {
         environment.addEventListener('touchstart', onTouchStart);
         environment.addEventListener('touchmove', onTouchMove);
         environment.addEventListener('touchend', onTouchEnd);
-
         this.cleanup = () => {
           this.internalClearTimeouts();
           this.updateStatus.cancel();
@@ -1496,7 +1324,6 @@ const Downshift = /*#__PURE__*/(() => {
         };
       }
     }
-
     shouldScroll(prevState, prevProps) {
       const {
         highlightedIndex: currentHighlightedIndex
@@ -1508,93 +1335,81 @@ const Downshift = /*#__PURE__*/(() => {
       const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
       return scrollWhenOpen || scrollWhenNavigating;
     }
-
     componentDidUpdate(prevProps, prevState) {
       if (process.env.NODE_ENV !== 'production') {
         validateControlledUnchanged(this.state, prevProps, this.props);
         /* istanbul ignore if (react-native) */
-
         if (this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
           validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
         }
       }
-
       if (isControlledProp(this.props, 'selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
         this.internalSetState({
           type: controlledPropUpdatedSelectedItem,
           inputValue: this.props.itemToString(this.props.selectedItem)
         });
       }
-
       if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
         this.scrollHighlightedItemIntoView();
       }
-      /* istanbul ignore else (react-native) */
-
 
+      /* istanbul ignore else (react-native) */
       {
         this.updateStatus();
       }
     }
-
     componentWillUnmount() {
       this.cleanup(); // avoids memory leak
     }
 
     render() {
-      const children = unwrapArray(this.props.children, noop); // because the items are rerendered every time we call the children
+      const children = unwrapArray(this.props.children, noop);
+      // because the items are rerendered every time we call the children
       // we clear this out each render and it will be populated again as
       // getItemProps is called.
-
-      this.clearItems(); // we reset this so we know whether the user calls getRootProps during
+      this.clearItems();
+      // we reset this so we know whether the user calls getRootProps during
       // this render. If they do then we don't need to do anything,
       // if they don't then we need to clone the element they return and
       // apply the props for them.
-
       this.getRootProps.called = false;
       this.getRootProps.refKey = undefined;
-      this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps
-
+      this.getRootProps.suppressRefError = undefined;
+      // we do something similar for getMenuProps
       this.getMenuProps.called = false;
       this.getMenuProps.refKey = undefined;
-      this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps
-
-      this.getLabelProps.called = false; // and something similar for getInputProps
-
+      this.getMenuProps.suppressRefError = undefined;
+      // we do something similar for getLabelProps
+      this.getLabelProps.called = false;
+      // and something similar for getInputProps
       this.getInputProps.called = false;
       const element = unwrapArray(children(this.getStateAndHelpers()));
-
       if (!element) {
         return null;
       }
-
       if (this.getRootProps.called || this.props.suppressRefError) {
         if (process.env.NODE_ENV !== 'production' && !this.getRootProps.suppressRefError && !this.props.suppressRefError) {
           validateGetRootPropsCalledCorrectly(element, this.getRootProps);
         }
-
         return element;
       } else if (isDOMElement(element)) {
         // they didn't apply the root props, but we can clone
         // this and apply the props ourselves
         return /*#__PURE__*/react.cloneElement(element, this.getRootProps(getElementProps(element)));
       }
-      /* istanbul ignore else */
-
 
+      /* istanbul ignore else */
       if (process.env.NODE_ENV !== 'production') {
         // they didn't apply the root props, but they need to
         // otherwise we can't query around the autocomplete
+
         throw new Error('downshift: If you return a non-DOM element, you must apply the getRootProps function');
       }
-      /* istanbul ignore next */
-
 
+      /* istanbul ignore next */
       return undefined;
     }
-
   }
-
   Downshift.defaultProps = {
     defaultHighlightedIndex: null,
     defaultIsOpen: false,
@@ -1603,12 +1418,10 @@ const Downshift = /*#__PURE__*/(() => {
       if (i == null) {
         return '';
       }
-
       if (process.env.NODE_ENV !== 'production' && isPlainObject(i) && !i.hasOwnProperty('toString')) {
         // eslint-disable-next-line no-console
         console.warn('downshift: An object was passed to the default implementation of `itemToString`. You should probably provide your own `itemToString` implementation. Please refer to the `itemToString` API documentation.', 'The object that was passed:', i);
       }
-
       return String(i);
     },
     onStateChange: noop,
@@ -1618,8 +1431,7 @@ const Downshift = /*#__PURE__*/(() => {
     onSelect: noop,
     onOuterClick: noop,
     selectedItemChanged: (prevItem, item) => prevItem !== item,
-    environment:
-    /* istanbul ignore next (ssr) */
+    environment: /* istanbul ignore next (ssr) */
     typeof window === 'undefined' ? {} : window,
     stateReducer: (state, stateToSet) => stateToSet,
     suppressRefError: false,
@@ -1628,7 +1440,6 @@ const Downshift = /*#__PURE__*/(() => {
   Downshift.stateChangeTypes = stateChangeTypes$3;
   return Downshift;
 })();
-
 process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
   children: PropTypes__default["default"].func,
   defaultHighlightedIndex: PropTypes__default["default"].number,
@@ -1662,7 +1473,6 @@ process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
   scrollIntoView: PropTypes__default["default"].func,
   // things we keep in state for uncontrolled components
   // but can accept as props for controlled components
-
   /* eslint-disable react/no-unused-prop-types */
   selectedItem: PropTypes__default["default"].any,
   isOpen: PropTypes__default["default"].bool,
@@ -1673,28 +1483,23 @@ process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
   menuId: PropTypes__default["default"].string,
   getItemId: PropTypes__default["default"].func
   /* eslint-enable react/no-unused-prop-types */
-
 } : void 0;
 var Downshift$1 = Downshift;
-
 function validateGetMenuPropsCalledCorrectly(node, _ref3) {
   let {
     refKey
   } = _ref3;
-
   if (!node) {
     // eslint-disable-next-line no-console
     console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
   }
 }
-
 function validateGetRootPropsCalledCorrectly(element, _ref4) {
   let {
     refKey
   } = _ref4;
   const refKeySpecified = refKey !== 'ref';
   const isComposite = !isDOMElement(element);
-
   if (isComposite && !refKeySpecified && !reactIs.isForwardRef(element)) {
     // eslint-disable-next-line no-console
     console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
@@ -1702,7 +1507,6 @@ function validateGetRootPropsCalledCorrectly(element, _ref4) {
     // eslint-disable-next-line no-console
     console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
   }
-
   if (!reactIs.isForwardRef(element) && !getElementProps(element)[refKey]) {
     // eslint-disable-next-line no-console
     console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
@@ -1715,7 +1519,6 @@ const dropdownDefaultStateValues = {
   selectedItem: null,
   inputValue: ''
 };
-
 function callOnChangeProps(action, state, newState) {
   const {
     props,
@@ -1724,12 +1527,10 @@ function callOnChangeProps(action, state, newState) {
   const changes = {};
   Object.keys(state).forEach(key => {
     invokeOnChangeHandler(key, action, state, newState);
-
     if (newState[key] !== state[key]) {
       changes[key] = newState[key];
     }
   });
-
   if (props.onStateChange && Object.keys(changes).length) {
     props.onStateChange({
       type,
@@ -1737,14 +1538,12 @@ function callOnChangeProps(action, state, newState) {
     });
   }
 }
-
 function invokeOnChangeHandler(key, action, state, newState) {
   const {
     props,
     type
   } = action;
   const handler = `on${capitalizeString(key)}Change`;
-
   if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
     props[handler]({
       type,
@@ -1752,6 +1551,7 @@ function invokeOnChangeHandler(key, action, state, newState) {
     });
   }
 }
+
 /**
  * Default state reducer that returns the changes.
  *
@@ -1759,19 +1559,16 @@ function invokeOnChangeHandler(key, action, state, newState) {
  * @param {Object} a action with changes.
  * @returns {Object} changes.
  */
-
-
 function stateReducer(s, a) {
   return a.changes;
 }
+
 /**
  * Returns a message to be added to aria-live region when item is selected.
  *
  * @param {Object} selectionParameters Parameters required to build the message.
  * @returns {string} The a11y message.
  */
-
-
 function getA11ySelectionMessage(selectionParameters) {
   const {
     selectedItem,
@@ -1779,17 +1576,16 @@ function getA11ySelectionMessage(selectionParameters) {
   } = selectionParameters;
   return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
 }
+
 /**
  * Debounced call for updating the a11y message.
  */
-
-
 const updateA11yStatus = debounce((getA11yMessage, document) => {
   setStatus(getA11yMessage(), document);
-}, 200); // istanbul ignore next
+}, 200);
 
+// istanbul ignore next
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? react.useLayoutEffect : react.useEffect;
-
 function useElementIds(_ref) {
   let {
     id = `downshift-${generateId()}`,
@@ -1808,41 +1604,35 @@ function useElementIds(_ref) {
   });
   return elementIdsRef.current;
 }
-
 function getItemIndex(index, item, items) {
   if (index !== undefined) {
     return index;
   }
-
   if (items.length === 0) {
     return -1;
   }
-
   return items.indexOf(item);
 }
-
 function itemToString(item) {
   return item ? String(item) : '';
 }
-
 function isAcceptedCharacterKey(key) {
   return /^\S{1}$/.test(key);
 }
-
 function capitalizeString(string) {
   return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
 }
-
 function useLatestRef(val) {
-  const ref = react.useRef(val); // technically this is not "concurrent mode safe" because we're manipulating
+  const 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.
@@ -1853,8 +1643,6 @@ function useLatestRef(val) {
  * @param {Object} props The hook props.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-
-
 function useEnhancedReducer(reducer, initialState, props) {
   const prevStateRef = react.useRef();
   const actionRef = react.useRef();
@@ -1862,7 +1650,8 @@ function useEnhancedReducer(reducer, initialState, props) {
     actionRef.current = action;
     state = getState(state, action.props);
     const changes = reducer(state, action);
-    const newState = action.props.stateReducer(state, { ...action,
+    const newState = action.props.stateReducer(state, {
+      ...action,
       changes
     });
     return newState;
@@ -1878,11 +1667,11 @@ function useEnhancedReducer(reducer, initialState, props) {
     if (action && prevStateRef.current && prevStateRef.current !== state) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
-
     prevStateRef.current = state;
   }, [state, props, action]);
   return [state, dispatchWithProps];
 }
+
 /**
  * Wraps the useEnhancedReducer and applies the controlled prop values before
  * returning the new state.
@@ -1892,57 +1681,42 @@ function useEnhancedReducer(reducer, initialState, props) {
  * @param {Object} props The hook props.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-
-
 function useControlledReducer$1(reducer, initialState, props) {
   const [state, dispatch] = useEnhancedReducer(reducer, initialState, props);
   return [getState(state, props), dispatch];
 }
-
 const defaultProps$3 = {
   itemToString,
   stateReducer,
   getA11ySelectionMessage,
   scrollIntoView,
-  environment:
-  /* istanbul ignore next (ssr) */
+  environment: /* istanbul ignore next (ssr) */
   typeof window === 'undefined' ? {} : window
 };
-
 function getDefaultValue$1(props, propKey, defaultStateValues) {
   if (defaultStateValues === void 0) {
     defaultStateValues = dropdownDefaultStateValues;
   }
-
   const 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;
   }
-
   const value = props[propKey];
-
   if (value !== undefined) {
     return value;
   }
-
   const initialValue = props[`initial${capitalizeString(propKey)}`];
-
   if (initialValue !== undefined) {
     return initialValue;
   }
-
   return getDefaultValue$1(props, propKey, defaultStateValues);
 }
-
 function getInitialState$2(props) {
   const selectedItem = getInitialValue$1(props, 'selectedItem');
   const isOpen = getInitialValue$1(props, 'isOpen');
@@ -1955,7 +1729,6 @@ function getInitialState$2(props) {
     inputValue
   };
 }
-
 function getHighlightedIndexOnOpen(props, state, offset) {
   const {
     items,
@@ -1966,30 +1739,26 @@ function getHighlightedIndexOnOpen(props, state, offset) {
     selectedItem,
     highlightedIndex
   } = state;
-
   if (items.length === 0) {
     return -1;
-  } // initialHighlightedIndex will give value to highlightedIndex on initial state only.
-
+  }
 
+  // initialHighlightedIndex will give value to highlightedIndex on initial state only.
   if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
     return initialHighlightedIndex;
   }
-
   if (defaultHighlightedIndex !== undefined) {
     return defaultHighlightedIndex;
   }
-
   if (selectedItem) {
     return items.indexOf(selectedItem);
   }
-
   if (offset === 0) {
     return -1;
   }
-
   return offset < 0 ? items.length - 1 : 0;
 }
+
 /**
  * Reuse the movement tracking of mouse and touch events.
  *
@@ -1999,8 +1768,6 @@ function getHighlightedIndexOnOpen(props, state, offset) {
  * @param {Function} handleBlur Handler on blur from mouse or touch.
  * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
  */
-
-
 function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
   const mouseAndTouchTrackersRef = react.useRef({
     isMouseDown: false,
@@ -2012,29 +1779,23 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     const onMouseDown = () => {
       mouseAndTouchTrackersRef.current.isMouseDown = true;
     };
-
     const onMouseUp = event => {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
-
       if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment)) {
         handleBlur();
       }
     };
-
     const onTouchStart = () => {
       mouseAndTouchTrackersRef.current.isTouchMove = false;
     };
-
     const onTouchMove = () => {
       mouseAndTouchTrackersRef.current.isTouchMove = true;
     };
-
     const onTouchEnd = event => {
       if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment, false)) {
         handleBlur();
       }
     };
-
     environment.addEventListener('mousedown', onMouseDown);
     environment.addEventListener('mouseup', onMouseUp);
     environment.addEventListener('touchstart', onTouchStart);
@@ -2046,14 +1807,14 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
       environment.removeEventListener('touchstart', onTouchStart);
       environment.removeEventListener('touchmove', onTouchMove);
       environment.removeEventListener('touchend', onTouchEnd);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, environment]);
   return mouseAndTouchTrackersRef;
 }
+
 /* istanbul ignore next */
 // eslint-disable-next-line import/no-mutable-exports
-
-
 let useGetterPropsCalledChecker = () => noop;
 /**
  * Custom hook that checks if getter props are called correctly.
@@ -2061,18 +1822,13 @@ let useGetterPropsCalledChecker = () => noop;
  * @param  {...any} propKeys Getter prop names to be handled.
  * @returns {Function} Setter function called inside getter props to set call information.
  */
-
 /* istanbul ignore next */
-
-
 if (process.env.NODE_ENV !== 'production') {
   useGetterPropsCalledChecker = function () {
     const isInitialMountRef = react.useRef(true);
-
     for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
       propKeys[_key] = arguments[_key];
     }
-
     const getterPropsCalledRef = react.useRef(propKeys.reduce((acc, propKey) => {
       acc[propKey] = {};
       return acc;
@@ -2080,7 +1836,6 @@ if (process.env.NODE_ENV !== 'production') {
     react.useEffect(() => {
       Object.keys(getterPropsCalledRef.current).forEach(propKey => {
         const propCallInfo = getterPropsCalledRef.current[propKey];
-
         if (isInitialMountRef.current) {
           if (!Object.keys(propCallInfo).length) {
             // eslint-disable-next-line no-console
@@ -2088,13 +1843,11 @@ if (process.env.NODE_ENV !== 'production') {
             return;
           }
         }
-
         const {
           suppressRefError,
           refKey,
           elementRef
         } = propCallInfo;
-
         if ((!elementRef || !elementRef.current) && !suppressRefError) {
           // eslint-disable-next-line no-console
           console.error(`downshift: The ref prop "${refKey}" from ${propKey} was not applied correctly on your element.`);
@@ -2112,7 +1865,6 @@ if (process.env.NODE_ENV !== 'production') {
     return setGetterPropCallInfo;
   };
 }
-
 function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
   let {
     isInitialMount,
@@ -2126,16 +1878,15 @@ function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
     if (isInitialMount || false) {
       return;
     }
-
     updateA11yStatus(() => getA11yMessage({
       highlightedIndex,
       highlightedItem: items[highlightedIndex],
       resultCount: items.length,
       ...rest
-    }), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
+    }), environment.document);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencyArray);
 }
-
 function useScrollIntoView(_ref3) {
   let {
     highlightedIndex,
@@ -2146,27 +1897,25 @@ function useScrollIntoView(_ref3) {
     scrollIntoView: scrollIntoViewProp
   } = _ref3;
   // used not to scroll on highlight by mouse.
-  const shouldScrollRef = react.useRef(true); // Scroll on highlighted item if change comes from keyboard.
-
+  const shouldScrollRef = react.useRef(true);
+  // Scroll on highlighted item if change comes from keyboard.
   useIsomorphicLayoutEffect(() => {
     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
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [highlightedIndex]);
   return shouldScrollRef;
-} // eslint-disable-next-line import/no-mutable-exports
-
+}
 
+// eslint-disable-next-line import/no-mutable-exports
 let useControlPropsValidator = noop;
 /* istanbul ignore next */
-
 if (process.env.NODE_ENV !== 'production') {
   useControlPropsValidator = _ref4 => {
     let {
@@ -2180,7 +1929,6 @@ if (process.env.NODE_ENV !== 'production') {
       if (isInitialMount) {
         return;
       }
-
       validateControlledUnchanged(state, prevPropsRef.current, props);
       prevPropsRef.current = props;
     }, [state, props, isInitialMount]);
@@ -2193,20 +1941,17 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
     props
   } = action;
   let changes;
-
   switch (type) {
     case stateChangeTypes.ItemMouseMove:
       changes = {
         highlightedIndex: action.disabled ? -1 : action.index
       };
       break;
-
     case stateChangeTypes.MenuMouseLeave:
       changes = {
         highlightedIndex: -1
       };
       break;
-
     case stateChangeTypes.ToggleButtonClick:
     case stateChangeTypes.FunctionToggleMenu:
       changes = {
@@ -2214,32 +1959,27 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
         highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
       };
       break;
-
     case stateChangeTypes.FunctionOpenMenu:
       changes = {
         isOpen: true,
         highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
       };
       break;
-
     case stateChangeTypes.FunctionCloseMenu:
       changes = {
         isOpen: false
       };
       break;
-
     case stateChangeTypes.FunctionSetHighlightedIndex:
       changes = {
         highlightedIndex: action.highlightedIndex
       };
       break;
-
     case stateChangeTypes.FunctionSetInputValue:
       changes = {
         inputValue: action.inputValue
       };
       break;
-
     case stateChangeTypes.FunctionReset:
       changes = {
         highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
@@ -2248,12 +1988,11 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
         inputValue: getDefaultValue$1(props, 'inputValue')
       };
       break;
-
     default:
       throw new Error('Reducer called without proper action type.');
   }
-
-  return { ...state,
+  return {
+    ...state,
     ...changes
   };
 }
@@ -2392,7 +2131,6 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
 });
 
 /* eslint-disable complexity */
-
 function downshiftSelectReducer(state, action) {
   const {
     type,
@@ -2400,7 +2138,6 @@ function downshiftSelectReducer(state, action) {
     altKey
   } = action;
   let changes;
-
   switch (type) {
     case ItemClick$1:
       changes = {
@@ -2409,7 +2146,6 @@ function downshiftSelectReducer(state, action) {
         selectedItem: props.items[action.index]
       };
       break;
-
     case ToggleButtonKeyDownCharacter:
       {
         const lowercasedKey = action.key;
@@ -2429,7 +2165,6 @@ function downshiftSelectReducer(state, action) {
         };
       }
       break;
-
     case ToggleButtonKeyDownArrowDown:
       {
         const highlightedIndex = state.isOpen ? getNextWrappingIndex(1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1);
@@ -2439,7 +2174,6 @@ function downshiftSelectReducer(state, action) {
         };
       }
       break;
-
     case ToggleButtonKeyDownArrowUp:
       if (state.isOpen && altKey) {
         changes = {
@@ -2456,10 +2190,8 @@ function downshiftSelectReducer(state, action) {
           isOpen: true
         };
       }
-
       break;
     // only triggered when menu is open.
-
     case ToggleButtonKeyDownEnter:
     case ToggleButtonKeyDownSpaceButton:
       changes = {
@@ -2470,40 +2202,34 @@ function downshiftSelectReducer(state, action) {
         })
       };
       break;
-
     case ToggleButtonKeyDownHome:
       changes = {
         highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false),
         isOpen: true
       };
       break;
-
     case ToggleButtonKeyDownEnd:
       changes = {
         highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false),
         isOpen: true
       };
       break;
-
     case ToggleButtonKeyDownPageUp:
       changes = {
         highlightedIndex: getNextWrappingIndex(-10, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false)
       };
       break;
-
     case ToggleButtonKeyDownPageDown:
       changes = {
         highlightedIndex: getNextWrappingIndex(10, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false)
       };
       break;
-
     case ToggleButtonKeyDownEscape:
       changes = {
         isOpen: false,
         highlightedIndex: -1
       };
       break;
-
     case ToggleButtonBlur:
       changes = {
         isOpen: false,
@@ -2513,33 +2239,30 @@ function downshiftSelectReducer(state, action) {
         })
       };
       break;
-
     case FunctionSelectItem$1:
       changes = {
         selectedItem: action.selectedItem
       };
       break;
-
     default:
       return downshiftCommonReducer(state, action, stateChangeTypes$2);
   }
-
-  return { ...state,
+  return {
+    ...state,
     ...changes
   };
 }
 /* eslint-enable complexity */
 
 useSelect.stateChangeTypes = stateChangeTypes$2;
-
 function useSelect(userProps) {
   if (userProps === void 0) {
     userProps = {};
   }
-
-  validatePropTypes$2(userProps, useSelect); // Props defaults and destructuring.
-
-  const props = { ...defaultProps$2,
+  validatePropTypes$2(userProps, useSelect);
+  // Props defaults and destructuring.
+  const props = {
+    ...defaultProps$2,
     ...userProps
   };
   const {
@@ -2549,8 +2272,8 @@ function useSelect(userProps) {
     itemToString,
     getA11ySelectionMessage,
     getA11yStatusMessage
-  } = props; // Initial state depending on controlled props.
-
+  } = props;
+  // Initial state depending on controlled props.
   const initialState = getInitialState$2(props);
   const [state, dispatch] = useControlledReducer$1(downshiftSelectReducer, initialState, props);
   const {
@@ -2558,27 +2281,30 @@ function useSelect(userProps) {
     highlightedIndex,
     selectedItem,
     inputValue
-  } = state; // Element efs.
+  } = state;
 
+  // Element efs.
   const toggleButtonRef = react.useRef(null);
   const menuRef = react.useRef(null);
-  const itemRefs = react.useRef({}); // used to keep the inputValue clearTimeout object between renders.
-
-  const clearTimeoutRef = react.useRef(null); // prevent id re-generation between renders.
-
-  const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
-
+  const itemRefs = react.useRef({});
+  // used to keep the inputValue clearTimeout object between renders.
+  const clearTimeoutRef = react.useRef(null);
+  // prevent id re-generation between renders.
+  const elementIds = useElementIds(props);
+  // used to keep track of how many items we had on previous cycle.
   const previousResultCountRef = react.useRef();
-  const isInitialMountRef = react.useRef(true); // utility callback to get item element.
-
+  const isInitialMountRef = react.useRef(true);
+  // utility callback to get item element.
   const latest = useLatestRef({
     state,
     props
-  }); // Some utils.
+  });
 
-  const getItemNodeFromIndex = react.useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
-  // Sets a11y status message on changes in state.
+  // Some utils.
+  const getItemNodeFromIndex = react.useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]);
 
+  // Effects.
+  // Sets a11y status message on changes in state.
   useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
     isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
@@ -2586,8 +2312,8 @@ function useSelect(userProps) {
     environment,
     itemToString,
     ...state
-  }); // Sets a11y status message on changes in selectedItem.
-
+  });
+  // Sets a11y status message on changes in selectedItem.
   useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
     isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
@@ -2595,8 +2321,8 @@ function useSelect(userProps) {
     environment,
     itemToString,
     ...state
-  }); // Scroll on highlighted item if change comes from keyboard.
-
+  });
+  // Scroll on highlighted item if change comes from keyboard.
   const shouldScrollRef = useScrollIntoView({
     menuElement: menuRef.current,
     highlightedIndex,
@@ -2604,8 +2330,9 @@ function useSelect(userProps) {
     itemRefs,
     scrollIntoView,
     getItemNodeFromIndex
-  }); // Sets cleanup for the keysSoFar callback, debounded after 500ms.
+  });
 
+  // Sets cleanup for the keysSoFar callback, debounded after 500ms.
   react.useEffect(() => {
     // init the clean function here as we need access to dispatch.
     clearTimeoutRef.current = debounce(outerDispatch => {
@@ -2613,18 +2340,19 @@ function useSelect(userProps) {
         type: FunctionSetInputValue$1,
         inputValue: ''
       });
-    }, 500); // Cancel any pending debounced calls on mount
+    }, 500);
 
+    // Cancel any pending debounced calls on mount
     return () => {
       clearTimeoutRef.current.cancel();
     };
-  }, []); // Invokes the keysSoFar callback set up above.
+  }, []);
 
+  // Invokes the keysSoFar callback set up above.
   react.useEffect(() => {
     if (!inputValue) {
       return;
     }
-
     clearTimeoutRef.current(dispatch);
   }, [dispatch, inputValue]);
   useControlPropsValidator({
@@ -2636,27 +2364,27 @@ function useSelect(userProps) {
     if (isInitialMountRef.current) {
       return;
     }
-
     previousResultCountRef.current = items.length;
-  }); // Add mouse/touch events to document.
-
+  });
+  // Add mouse/touch events to document.
   const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, () => {
     dispatch({
       type: ToggleButtonBlur
     });
   });
-  const setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.
-
+  const setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
+  // Make initial ref false.
   react.useEffect(() => {
     isInitialMountRef.current = false;
-  }, []); // Reset itemRefs on close.
-
+  }, []);
+  // Reset itemRefs on close.
   react.useEffect(() => {
     if (!isOpen) {
       itemRefs.current = {};
     }
-  }, [isOpen]); // Event handler functions.
+  }, [isOpen]);
 
+  // Event handler functions.
   const toggleButtonKeyDownHandlers = react.useMemo(() => ({
     ArrowDown(event) {
       event.preventDefault();
@@ -2666,7 +2394,6 @@ function useSelect(userProps) {
         altKey: event.altKey
       });
     },
-
     ArrowUp(event) {
       event.preventDefault();
       dispatch({
@@ -2675,7 +2402,6 @@ function useSelect(userProps) {
         altKey: event.altKey
       });
     },
-
     Home(event) {
       event.preventDefault();
       dispatch({
@@ -2683,7 +2409,6 @@ function useSelect(userProps) {
         getItemNodeFromIndex
       });
     },
-
     End(event) {
       event.preventDefault();
       dispatch({
@@ -2691,7 +2416,6 @@ function useSelect(userProps) {
         getItemNodeFromIndex
       });
     },
-
     Escape() {
       if (latest.current.state.isOpen) {
         dispatch({
@@ -2699,7 +2423,6 @@ function useSelect(userProps) {
         });
       }
     },
-
     Enter(event) {
       if (latest.current.state.isOpen) {
         event.preventDefault();
@@ -2708,7 +2431,6 @@ function useSelect(userProps) {
         });
       }
     },
-
     PageUp(event) {
       if (latest.current.state.isOpen) {
         event.preventDefault();
@@ -2718,7 +2440,6 @@ function useSelect(userProps) {
         });
       }
     },
-
     PageDown(event) {
       if (latest.current.state.isOpen) {
         event.preventDefault();
@@ -2728,7 +2449,6 @@ function useSelect(userProps) {
         });
       }
     },
-
     ' '(event) {
       if (latest.current.state.isOpen) {
         event.preventDefault();
@@ -2737,9 +2457,9 @@ function useSelect(userProps) {
         });
       }
     }
+  }), [dispatch, getItemNodeFromIndex, latest]);
 
-  }), [dispatch, getItemNodeFromIndex, latest]); // Action functions.
-
+  // Action functions.
   const toggleMenu = react.useCallback(() => {
     dispatch({
       type: FunctionToggleMenu$1
@@ -2777,8 +2497,8 @@ function useSelect(userProps) {
       type: FunctionSetInputValue$1,
       inputValue: newInputValue
     });
-  }, [dispatch]); // Getter functions.
-
+  }, [dispatch]);
+  // Getter functions.
   const getLabelProps = react.useCallback(labelProps => ({
     id: elementIds.labelId,
     htmlFor: elementIds.toggleButtonId,
@@ -2796,13 +2516,11 @@ function useSelect(userProps) {
     let {
       suppressRefError = false
     } = _temp2 === void 0 ? {} : _temp2;
-
     const menuHandleMouseLeave = () => {
       dispatch({
         type: MenuMouseLeave$1
       });
     };
-
     setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
     return {
       [refKey]: handleRefs(ref, menuNode => {
@@ -2829,13 +2547,11 @@ function useSelect(userProps) {
       suppressRefError = false
     } = _temp4 === void 0 ? {} : _temp4;
     const latestState = latest.current.state;
-
     const toggleButtonHandleClick = () => {
       dispatch({
         type: ToggleButtonClick$1
       });
     };
-
     const toggleButtonHandleBlur = () => {
       if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
         dispatch({
@@ -2843,10 +2559,8 @@ function useSelect(userProps) {
         });
       }
     };
-
     const toggleButtonHandleKeyDown = event => {
       const key = normalizeArrowKey(event);
-
       if (key && toggleButtonKeyDownHandlers[key]) {
         toggleButtonKeyDownHandlers[key](event);
       } else if (isAcceptedCharacterKey(key)) {
@@ -2857,7 +2571,6 @@ function useSelect(userProps) {
         });
       }
     };
-
     const toggleProps = {
       [refKey]: handleRefs(ref, toggleButtonNode => {
         toggleButtonRef.current = toggleButtonNode;
@@ -2873,12 +2586,10 @@ function useSelect(userProps) {
       onBlur: callAllEventHandlers(onBlur, toggleButtonHandleBlur),
       ...rest
     };
-
     if (!rest.disabled) {
       toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
       toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
     }
-
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
   }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers, getItemNodeFromIndex]);
@@ -2899,12 +2610,10 @@ function useSelect(userProps) {
     } = latest.current;
     const item = itemProp ?? items[indexProp];
     const index = getItemIndex(indexProp, item, latestProps.items);
-
     const itemHandleMouseMove = () => {
       if (index === latestState.highlightedIndex) {
         return;
       }
-
       shouldScrollRef.current = false;
       dispatch({
         type: ItemMouseMove$1,
@@ -2912,20 +2621,16 @@ function useSelect(userProps) {
         disabled
       });
     };
-
     const itemHandleClick = () => {
       dispatch({
         type: ItemClick$1,
         index
       });
     };
-
     const itemIndex = getItemIndex(index, item, latestProps.items);
-
     if (itemIndex < 0) {
       throw new Error('Pass either item or item index in getItemProps!');
     }
-
     const itemProps = {
       disabled,
       role: 'option',
@@ -2938,11 +2643,9 @@ function useSelect(userProps) {
       }),
       ...rest
     };
-
     if (!disabled) {
       itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
     }
-
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     return itemProps;
   }, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
@@ -3027,16 +2730,14 @@ function getInitialState$1(props) {
   let {
     inputValue
   } = initialState;
-
   if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
     inputValue = props.itemToString(selectedItem);
   }
-
-  return { ...initialState,
+  return {
+    ...initialState,
     inputValue
   };
 }
-
 const propTypes$1 = {
   items: PropTypes__default["default"].array.isRequired,
   itemToString: PropTypes__default["default"].func,
@@ -3076,6 +2777,7 @@ const propTypes$1 = {
     })
   })
 };
+
 /**
  * The useCombobox version of useControlledReducer, which also
  * checks if the controlled prop selectedItem changed between
@@ -3088,11 +2790,11 @@ const propTypes$1 = {
  * @param {Object} props The hook props.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-
 function useControlledReducer(reducer, initialState, props) {
   const previousSelectedItemRef = react.useRef();
-  const [state, dispatch] = useEnhancedReducer(reducer, initialState, props); // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
+  const [state, dispatch] = useEnhancedReducer(reducer, initialState, props);
 
+  // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
   react.useEffect(() => {
     if (isControlledProp(props, 'selectedItem')) {
       if (previousSelectedItemRef.current !== props.selectedItem) {
@@ -3101,29 +2803,26 @@ function useControlledReducer(reducer, initialState, props) {
           inputValue: props.itemToString(props.selectedItem)
         });
       }
-
       previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
     }
   });
   return [getState(state, props), dispatch];
-} // eslint-disable-next-line import/no-mutable-exports
-
+}
 
+// eslint-disable-next-line import/no-mutable-exports
 let validatePropTypes$1 = noop;
 /* istanbul ignore next */
-
 if (process.env.NODE_ENV !== 'production') {
   validatePropTypes$1 = (options, caller) => {
     PropTypes__default["default"].checkPropTypes(propTypes$1, options, 'prop', caller.name);
   };
 }
-
-const defaultProps$1 = { ...defaultProps$3,
+const defaultProps$1 = {
+  ...defaultProps$3,
   getA11yStatusMessage: getA11yStatusMessage$1
 };
 
 /* eslint-disable complexity */
-
 function downshiftUseComboboxReducer(state, action) {
   const {
     type,
@@ -3131,7 +2830,6 @@ function downshiftUseComboboxReducer(state, action) {
     altKey
   } = action;
   let changes;
-
   switch (type) {
     case ItemClick:
       changes = {
@@ -3141,7 +2839,6 @@ function downshiftUseComboboxReducer(state, action) {
         inputValue: props.itemToString(props.items[action.index])
       };
       break;
-
     case InputKeyDownArrowDown:
       if (state.isOpen) {
         changes = {
@@ -3153,9 +2850,7 @@ function downshiftUseComboboxReducer(state, action) {
           isOpen: props.items.length >= 0
         };
       }
-
       break;
-
     case InputKeyDownArrowUp:
       if (state.isOpen) {
         if (altKey) {
@@ -3178,9 +2873,7 @@ function downshiftUseComboboxReducer(state, action) {
           isOpen: props.items.length >= 0
         };
       }
-
       break;
-
     case InputKeyDownEnter:
       changes = {
         isOpen: getDefaultValue$1(props, 'isOpen'),
@@ -3191,7 +2884,6 @@ function downshiftUseComboboxReducer(state, action) {
         })
       };
       break;
-
     case InputKeyDownEscape:
       changes = {
         isOpen: false,
@@ -3202,31 +2894,26 @@ function downshiftUseComboboxReducer(state, action) {
         })
       };
       break;
-
     case InputKeyDownPageUp:
       changes = {
         highlightedIndex: getNextWrappingIndex(-10, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false)
       };
       break;
-
     case InputKeyDownPageDown:
       changes = {
         highlightedIndex: getNextWrappingIndex(10, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false)
       };
       break;
-
     case InputKeyDownHome:
       changes = {
         highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
       };
       break;
-
     case InputKeyDownEnd:
       changes = {
         highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
       };
       break;
-
     case InputBlur:
       changes = {
         isOpen: false,
@@ -3237,7 +2924,6 @@ function downshiftUseComboboxReducer(state, action) {
         })
       };
       break;
-
     case InputChange:
       changes = {
         isOpen: true,
@@ -3245,32 +2931,28 @@ function downshiftUseComboboxReducer(state, action) {
         inputValue: action.inputValue
       };
       break;
-
     case InputFocus:
       changes = {
         isOpen: true,
         highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
       };
       break;
-
     case FunctionSelectItem:
       changes = {
         selectedItem: action.selectedItem,
         inputValue: props.itemToString(action.selectedItem)
       };
       break;
-
     case ControlledPropUpdatedSelectedItem:
       changes = {
         inputValue: action.inputValue
       };
       break;
-
     default:
       return downshiftCommonReducer(state, action, stateChangeTypes$1);
   }
-
-  return { ...state,
+  return {
+    ...state,
     ...changes
   };
 }
@@ -3278,15 +2960,14 @@ function downshiftUseComboboxReducer(state, action) {
 
 /* eslint-disable max-statements */
 useCombobox.stateChangeTypes = stateChangeTypes$1;
-
 function useCombobox(userProps) {
   if (userProps === void 0) {
     userProps = {};
   }
-
-  validatePropTypes$1(userProps, useCombobox); // Props defaults and destructuring.
-
-  const props = { ...defaultProps$1,
+  validatePropTypes$1(userProps, useCombobox);
+  // Props defaults and destructuring.
+  const props = {
+    ...defaultProps$1,
     ...userProps
   };
   const {
@@ -3298,8 +2979,8 @@ function useCombobox(userProps) {
     getA11yStatusMessage,
     getA11ySelectionMessage,
     itemToString
-  } = props; // Initial state depending on controlled props.
-
+  } = props;
+  // Initial state depending on controlled props.
   const initialState = getInitialState$1(props);
   const [state, dispatch] = useControlledReducer(downshiftUseComboboxReducer, initialState, props);
   const {
@@ -3307,25 +2988,27 @@ function useCombobox(userProps) {
     highlightedIndex,
     selectedItem,
     inputValue
-  } = state; // Element refs.
+  } = state;
 
+  // Element refs.
   const menuRef = react.useRef(null);
   const itemRefs = react.useRef({});
   const inputRef = react.useRef(null);
   const toggleButtonRef = react.useRef(null);
-  const isInitialMountRef = react.useRef(true); // prevent id re-generation between renders.
-
-  const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
-
-  const previousResultCountRef = react.useRef(); // utility callback to get item element.
-
+  const isInitialMountRef = react.useRef(true);
+  // prevent id re-generation between renders.
+  const elementIds = useElementIds(props);
+  // used to keep track of how many items we had on previous cycle.
+  const previousResultCountRef = react.useRef();
+  // utility callback to get item element.
   const latest = useLatestRef({
     state,
     props
   });
-  const getItemNodeFromIndex = react.useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
-  // Sets a11y status message on changes in state.
+  const getItemNodeFromIndex = react.useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]);
 
+  // Effects.
+  // Sets a11y status message on changes in state.
   useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
     isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
@@ -3333,8 +3016,8 @@ function useCombobox(userProps) {
     environment,
     itemToString,
     ...state
-  }); // Sets a11y status message on changes in selectedItem.
-
+  });
+  // Sets a11y status message on changes in selectedItem.
   useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
     isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
@@ -3342,8 +3025,8 @@ function useCombobox(userProps) {
     environment,
     itemToString,
     ...state
-  }); // Scroll on highlighted item if change comes from keyboard.
-
+  });
+  // Scroll on highlighted item if change comes from keyboard.
   const shouldScrollRef = useScrollIntoView({
     menuElement: menuRef.current,
     highlightedIndex,
@@ -3356,47 +3039,44 @@ function useCombobox(userProps) {
     isInitialMount: isInitialMountRef.current,
     props,
     state
-  }); // Focus the input on first render if required.
-
+  });
+  // Focus the input on first render if required.
   react.useEffect(() => {
     const focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
-
     if (focusOnOpen && inputRef.current) {
       inputRef.current.focus();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   react.useEffect(() => {
     if (isInitialMountRef.current) {
       return;
     }
-
     previousResultCountRef.current = items.length;
-  }); // Add mouse/touch events to document.
-
+  });
+  // Add mouse/touch events to document.
   const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, () => {
     dispatch({
       type: InputBlur,
       selectItem: false
     });
   });
-  const setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps'); // Make initial ref false.
-
+  const setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
+  // Make initial ref false.
   react.useEffect(() => {
     isInitialMountRef.current = false;
-  }, []); // Reset itemRefs on close.
-
+  }, []);
+  // Reset itemRefs on close.
   react.useEffect(() => {
     if (!isOpen) {
       itemRefs.current = {};
     } else if (document.activeElement !== inputRef.current) {
       var _inputRef$current;
-
       inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     }
   }, [isOpen]);
-  /* Event handler functions */
 
+  /* Event handler functions */
   const inputKeyDownHandlers = react.useMemo(() => ({
     ArrowDown(event) {
       event.preventDefault();
@@ -3406,7 +3086,6 @@ function useCombobox(userProps) {
         getItemNodeFromIndex
       });
     },
-
     ArrowUp(event) {
       event.preventDefault();
       dispatch({
@@ -3415,34 +3094,28 @@ function useCombobox(userProps) {
         getItemNodeFromIndex
       });
     },
-
     Home(event) {
       if (!latest.current.state.isOpen) {
         return;
       }
-
       event.preventDefault();
       dispatch({
         type: InputKeyDownHome,
         getItemNodeFromIndex
       });
     },
-
     End(event) {
       if (!latest.current.state.isOpen) {
         return;
       }
-
       event.preventDefault();
       dispatch({
         type: InputKeyDownEnd,
         getItemNodeFromIndex
       });
     },
-
     Escape(event) {
       const latestState = latest.current.state;
-
       if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
         event.preventDefault();
         dispatch({
@@ -3450,22 +3123,19 @@ function useCombobox(userProps) {
         });
       }
     },
-
     Enter(event) {
-      const latestState = latest.current.state; // if closed or no highlighted index, do nothing.
-
+      const latestState = latest.current.state;
+      // if closed or no highlighted index, do nothing.
       if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event.
       ) {
         return;
       }
-
       event.preventDefault();
       dispatch({
         type: InputKeyDownEnter,
         getItemNodeFromIndex
       });
     },
-
     PageUp(event) {
       if (latest.current.state.isOpen) {
         event.preventDefault();
@@ -3475,7 +3145,6 @@ function useCombobox(userProps) {
         });
       }
     },
-
     PageDown(event) {
       if (latest.current.state.isOpen) {
         event.preventDefault();
@@ -3485,9 +3154,9 @@ function useCombobox(userProps) {
         });
       }
     }
+  }), [dispatch, latest, getItemNodeFromIndex]);
 
-  }), [dispatch, latest, getItemNodeFromIndex]); // Getter props.
-
+  // Getter props.
   const getLabelProps = react.useCallback(labelProps => ({
     id: elementIds.labelId,
     htmlFor: elementIds.inputId,
@@ -3537,19 +3206,15 @@ function useCombobox(userProps) {
       state: latestState
     } = latest.current;
     const itemIndex = getItemIndex(index, item, latestProps.items);
-
     if (itemIndex < 0) {
       throw new Error('Pass either item or item index in getItemProps!');
     }
-
     const onSelectKey = 'onClick';
     const customClickHandler = onClick;
-
     const itemHandleMouseMove = () => {
       if (index === latestState.highlightedIndex) {
         return;
       }
-
       shouldScrollRef.current = false;
       dispatch({
         type: ItemMouseMove,
@@ -3557,16 +3222,13 @@ function useCombobox(userProps) {
         disabled
       });
     };
-
     const itemHandleClick = () => {
       dispatch({
         type: ItemClick,
         index
       });
     };
-
     const itemHandleMouseDown = e => e.preventDefault();
-
     return {
       [refKey]: handleRefs(ref, itemNode => {
         if (itemNode) {
@@ -3594,13 +3256,11 @@ function useCombobox(userProps) {
       ...rest
     } = _temp4 === void 0 ? {} : _temp4;
     const latestState = latest.current.state;
-
     const toggleButtonHandleClick = () => {
       dispatch({
         type: ToggleButtonClick
       });
     };
-
     return {
       [refKey]: handleRefs(ref, toggleButtonNode => {
         toggleButtonRef.current = toggleButtonNode;
@@ -3609,7 +3269,8 @@ function useCombobox(userProps) {
       'aria-expanded': latestState.isOpen,
       id: elementIds.toggleButtonId,
       tabIndex: -1,
-      ...(!rest.disabled && { ...({
+      ...(!rest.disabled && {
+        ...({
           onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
         })
       }),
@@ -3633,22 +3294,18 @@ function useCombobox(userProps) {
     } = _temp6 === void 0 ? {} : _temp6;
     setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
     const latestState = latest.current.state;
-
     const inputHandleKeyDown = event => {
       const key = normalizeArrowKey(event);
-
       if (key && inputKeyDownHandlers[key]) {
         inputKeyDownHandlers[key](event);
       }
     };
-
     const inputHandleChange = event => {
       dispatch({
         type: InputChange,
         inputValue: event.target.value
       });
     };
-
     const inputHandleBlur = () => {
       /* istanbul ignore else */
       if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
@@ -3658,7 +3315,6 @@ function useCombobox(userProps) {
         });
       }
     };
-
     const inputHandleFocus = () => {
       if (!latestState.isOpen) {
         dispatch({
@@ -3666,12 +3322,10 @@ function useCombobox(userProps) {
         });
       }
     };
-    /* istanbul ignore next (preact) */
-
 
+    /* istanbul ignore next (preact) */
     const onChangeKey = 'onChange';
     let eventHandlers = {};
-
     if (!rest.disabled) {
       eventHandlers = {
         [onChangeKey]: callAllEventHandlers(onChange, onInput, inputHandleChange),
@@ -3680,7 +3334,6 @@ function useCombobox(userProps) {
         onFocus: callAllEventHandlers(onFocus, inputHandleFocus)
       };
     }
-
     return {
       [refKey]: handleRefs(ref, inputNode => {
         inputRef.current = inputNode;
@@ -3699,8 +3352,9 @@ function useCombobox(userProps) {
       ...eventHandlers,
       ...rest
     };
-  }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]); // returns
+  }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
 
+  // returns
   const toggleMenu = react.useCallback(() => {
     dispatch({
       type: FunctionToggleMenu
@@ -3766,6 +3420,7 @@ const defaultStateValues = {
   activeIndex: -1,
   selectedItems: []
 };
+
 /**
  * Returns the initial value for a state key in the following order:
  * 1. controlled prop, 2. initial prop, 3. default prop, 4. default
@@ -3775,10 +3430,10 @@ const defaultStateValues = {
  * @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.
@@ -3787,11 +3442,10 @@ function getInitialValue(props, propKey) {
  * @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.
@@ -3799,8 +3453,6 @@ function getDefaultValue(props, propKey) {
  * @param {Object} props Props passed to the hook.
  * @returns {Object} The initial state.
  */
-
-
 function getInitialState(props) {
   const activeIndex = getInitialValue(props, 'activeIndex');
   const selectedItems = getInitialValue(props, 'selectedItems');
@@ -3809,6 +3461,7 @@ function getInitialState(props) {
     selectedItems
   };
 }
+
 /**
  * Returns true if dropdown keydown operation is permitted. Should not be
  * allowed on keydown with modifier keys (ctrl, alt, shift, meta), on
@@ -3818,32 +3471,28 @@ function getInitialState(props) {
  * @param {KeyboardEvent} event The event from keydown.
  * @returns {boolean} Whether the operation is allowed.
  */
-
-
 function isKeyDownOperationPermitted(event) {
   if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
     return false;
   }
-
   const element = event.target;
-
-  if (element instanceof HTMLInputElement && // if element is a text input
-  element.value !== '' && ( // and we have text in it
+  if (element instanceof HTMLInputElement &&
+  // if element is a text input
+  element.value !== '' && (
+  // and we have text in it
   // and cursor is either not at the start or is currently highlighting text.
   element.selectionStart !== 0 || element.selectionEnd !== 0)) {
     return false;
   }
-
   return true;
 }
+
 /**
  * Returns a message to be added to aria-live region when item is removed.
  *
  * @param {Object} selectionParameters Parameters required to build the message.
  * @returns {string} The a11y message.
  */
-
-
 function getA11yRemovalMessage(selectionParameters) {
   const {
     removedSelectedItem,
@@ -3851,7 +3500,6 @@ function getA11yRemovalMessage(selectionParameters) {
   } = selectionParameters;
   return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
 }
-
 const propTypes = {
   selectedItems: PropTypes__default["default"].array,
   initialSelectedItems: PropTypes__default["default"].array,
@@ -3883,11 +3531,11 @@ const defaultProps = {
   getA11yRemovalMessage,
   keyNavigationNext: 'ArrowRight',
   keyNavigationPrevious: 'ArrowLeft'
-}; // eslint-disable-next-line import/no-mutable-exports
+};
 
+// eslint-disable-next-line import/no-mutable-exports
 let validatePropTypes = noop;
 /* istanbul ignore next */
-
 if (process.env.NODE_ENV !== 'production') {
   validatePropTypes = (options, caller) => {
     PropTypes__default["default"].checkPropTypes(propTypes, options, 'prop', caller.name);
@@ -3926,7 +3574,6 @@ var stateChangeTypes = /*#__PURE__*/Object.freeze({
 });
 
 /* eslint-disable complexity */
-
 function downshiftMultipleSelectionReducer(state, action) {
   const {
     type,
@@ -3939,37 +3586,31 @@ function downshiftMultipleSelectionReducer(state, action) {
     selectedItems
   } = state;
   let changes;
-
   switch (type) {
     case SelectedItemClick:
       changes = {
         activeIndex: index
       };
       break;
-
     case SelectedItemKeyDownNavigationPrevious:
       changes = {
         activeIndex: activeIndex - 1 < 0 ? 0 : activeIndex - 1
       };
       break;
-
     case SelectedItemKeyDownNavigationNext:
       changes = {
         activeIndex: activeIndex + 1 >= selectedItems.length ? -1 : activeIndex + 1
       };
       break;
-
     case SelectedItemKeyDownBackspace:
     case SelectedItemKeyDownDelete:
       {
         let newActiveIndex = activeIndex;
-
         if (selectedItems.length === 1) {
           newActiveIndex = -1;
         } else if (activeIndex === selectedItems.length - 1) {
           newActiveIndex = selectedItems.length - 2;
         }
-
         changes = {
           selectedItems: [...selectedItems.slice(0, activeIndex), ...selectedItems.slice(activeIndex + 1)],
           ...{
@@ -3978,52 +3619,43 @@ function downshiftMultipleSelectionReducer(state, action) {
         };
         break;
       }
-
     case DropdownKeyDownNavigationPrevious:
       changes = {
         activeIndex: selectedItems.length - 1
       };
       break;
-
     case DropdownKeyDownBackspace:
       changes = {
         selectedItems: selectedItems.slice(0, selectedItems.length - 1)
       };
       break;
-
     case FunctionAddSelectedItem:
       changes = {
         selectedItems: [...selectedItems, selectedItem]
       };
       break;
-
     case DropdownClick:
       changes = {
         activeIndex: -1
       };
       break;
-
     case FunctionRemoveSelectedItem:
       {
         let newActiveIndex = activeIndex;
         const selectedItemIndex = selectedItems.indexOf(selectedItem);
-
         if (selectedItemIndex >= 0) {
           if (selectedItems.length === 1) {
             newActiveIndex = -1;
           } else if (selectedItemIndex === selectedItems.length - 1) {
             newActiveIndex = selectedItems.length - 2;
           }
-
           changes = {
             selectedItems: [...selectedItems.slice(0, selectedItemIndex), ...selectedItems.slice(selectedItemIndex + 1)],
             activeIndex: newActiveIndex
           };
         }
-
         break;
       }
-
     case FunctionSetSelectedItems:
       {
         const {
@@ -4034,7 +3666,6 @@ function downshiftMultipleSelectionReducer(state, action) {
         };
         break;
       }
-
     case FunctionSetActiveIndex:
       {
         const {
@@ -4045,33 +3676,30 @@ function downshiftMultipleSelectionReducer(state, action) {
         };
         break;
       }
-
     case FunctionReset:
       changes = {
         activeIndex: getDefaultValue(props, 'activeIndex'),
         selectedItems: getDefaultValue(props, 'selectedItems')
       };
       break;
-
     default:
       throw new Error('Reducer called without proper action type.');
   }
-
-  return { ...state,
+  return {
+    ...state,
     ...changes
   };
 }
 
 useMultipleSelection.stateChangeTypes = stateChangeTypes;
-
 function useMultipleSelection(userProps) {
   if (userProps === void 0) {
     userProps = {};
   }
-
-  validatePropTypes(userProps, useMultipleSelection); // Props defaults and destructuring.
-
-  const props = { ...defaultProps,
+  validatePropTypes(userProps, useMultipleSelection);
+  // Props defaults and destructuring.
+  const props = {
+    ...defaultProps,
     ...userProps
   };
   const {
@@ -4080,14 +3708,16 @@ function useMultipleSelection(userProps) {
     environment,
     keyNavigationNext,
     keyNavigationPrevious
-  } = props; // Reducer init.
+  } = props;
 
+  // Reducer init.
   const [state, dispatch] = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props);
   const {
     activeIndex,
     selectedItems
-  } = state; // Refs.
+  } = state;
 
+  // Refs.
   const isInitialMountRef = react.useRef(true);
   const dropdownRef = react.useRef(null);
   const previousSelectedItemsRef = react.useRef(selectedItems);
@@ -4096,15 +3726,14 @@ function useMultipleSelection(userProps) {
   const latest = useLatestRef({
     state,
     props
-  }); // Effects.
+  });
 
+  // Effects.
   /* Sets a11y status message on changes in selectedItem. */
-
   react.useEffect(() => {
     if (isInitialMountRef.current) {
       return;
     }
-
     if (selectedItems.length < previousSelectedItemsRef.current.length) {
       const removedSelectedItem = previousSelectedItemsRef.current.find(item => selectedItems.indexOf(item) < 0);
       setStatus(getA11yRemovalMessage({
@@ -4115,15 +3744,15 @@ function useMultipleSelection(userProps) {
         activeSelectedItem: selectedItems[activeIndex]
       }), environment.document);
     }
+    previousSelectedItemsRef.current = selectedItems;
 
-    previousSelectedItemsRef.current = selectedItems; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedItems.length]); // Sets focus on active item.
-
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedItems.length]);
+  // Sets focus on active item.
   react.useEffect(() => {
     if (isInitialMountRef.current) {
       return;
     }
-
     if (activeIndex === -1 && dropdownRef.current) {
       dropdownRef.current.focus();
     } else if (selectedItemRefs.current[activeIndex]) {
@@ -4135,37 +3764,34 @@ function useMultipleSelection(userProps) {
     props,
     state
   });
-  const setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
-
+  const setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps');
+  // Make initial ref false.
   react.useEffect(() => {
     isInitialMountRef.current = false;
-  }, []); // Event handler functions.
+  }, []);
 
+  // Event handler functions.
   const selectedItemKeyDownHandlers = react.useMemo(() => ({
     [keyNavigationPrevious]() {
       dispatch({
         type: SelectedItemKeyDownNavigationPrevious
       });
     },
-
     [keyNavigationNext]() {
       dispatch({
         type: SelectedItemKeyDownNavigationNext
       });
     },
-
     Delete() {
       dispatch({
         type: SelectedItemKeyDownDelete
       });
     },
-
     Backspace() {
       dispatch({
         type: SelectedItemKeyDownBackspace
       });
     }
-
   }), [dispatch, keyNavigationNext, keyNavigationPrevious]);
   const dropdownKeyDownHandlers = react.useMemo(() => ({
     [keyNavigationPrevious](event) {
@@ -4175,7 +3801,6 @@ function useMultipleSelection(userProps) {
         });
       }
     },
-
     Backspace(event) {
       if (isKeyDownOperationPermitted(event)) {
         dispatch({
@@ -4183,9 +3808,9 @@ function useMultipleSelection(userProps) {
         });
       }
     }
+  }), [dispatch, keyNavigationPrevious]);
 
-  }), [dispatch, keyNavigationPrevious]); // Getter props.
-
+  // Getter props.
   const getSelectedItemProps = react.useCallback(function (_temp) {
     let {
       refKey = 'ref',
@@ -4200,26 +3825,21 @@ function useMultipleSelection(userProps) {
       state: latestState
     } = latest.current;
     const itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
-
     if (itemIndex < 0) {
       throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
     }
-
     const selectedItemHandleClick = () => {
       dispatch({
         type: SelectedItemClick,
         index
       });
     };
-
     const selectedItemHandleKeyDown = event => {
       const key = normalizeArrowKey(event);
-
       if (key && selectedItemKeyDownHandlers[key]) {
         selectedItemKeyDownHandlers[key](event);
       }
     };
-
     return {
       [refKey]: handleRefs(ref, selectedItemNode => {
         if (selectedItemNode) {
@@ -4245,21 +3865,17 @@ function useMultipleSelection(userProps) {
       suppressRefError = false
     } = _temp3 === void 0 ? {} : _temp3;
     setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
-
     const dropdownHandleKeyDown = event => {
       const key = normalizeArrowKey(event);
-
       if (key && dropdownKeyDownHandlers[key]) {
         dropdownKeyDownHandlers[key](event);
       }
     };
-
     const dropdownHandleClick = () => {
       dispatch({
         type: DropdownClick
       });
     };
-
     return {
       [refKey]: handleRefs(ref, dropdownNode => {
         if (dropdownNode) {
@@ -4272,8 +3888,9 @@ function useMultipleSelection(userProps) {
       }),
       ...rest
     };
-  }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns
+  }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]);
 
+  // returns
   const addSelectedItem = react.useCallback(selectedItem => {
     dispatch({
       type: FunctionAddSelectedItem,