downshift 7.0.0-beta.0 → 7.0.0

package/dist/downshift.umd.js

@@ -1266,6 +1266,7 @@
   function t(t){return "object"==typeof t&&null!=t&&1===t.nodeType}function e(t,e){return (!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return e(r.overflowY,n)||e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return !1}function r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}function computeScrollIntoView(e,i){var o=window,l=i.scrollMode,d=i.block,u=i.inline,h=i.boundary,a=i.skipOverflowHiddenElements,c="function"==typeof h?h:function(t){return t!==h};if(!t(e))throw new TypeError("Invalid target");for(var f=document.scrollingElement||document.documentElement,s=[],p=e;t(p)&&c(p);){if((p=p.parentElement)===f){s.push(p);break}null!=p&&p===document.body&&n(p)&&!n(document.documentElement)||null!=p&&n(p,a)&&s.push(p);}for(var m=o.visualViewport?o.visualViewport.width:innerWidth,g=o.visualViewport?o.visualViewport.height:innerHeight,w=window.scrollX||pageXOffset,v=window.scrollY||pageYOffset,W=e.getBoundingClientRect(),b=W.height,H=W.width,y=W.top,E=W.right,M=W.bottom,V=W.left,x="start"===d||"nearest"===d?y:"end"===d?M:y+b/2,I="center"===u?V+H/2:"end"===u?E:V,C=[],T=0;T<s.length;T++){var k=s[T],B=k.getBoundingClientRect(),D=B.height,O=B.width,R=B.top,X=B.right,Y=B.bottom,L=B.left;if("if-needed"===l&&y>=0&&V>=0&&M<=g&&E<=m&&y>=R&&M<=Y&&V>=L&&E<=X)return C;var S=getComputedStyle(k),j=parseInt(S.borderLeftWidth,10),q=parseInt(S.borderTopWidth,10),z=parseInt(S.borderRightWidth,10),A=parseInt(S.borderBottomWidth,10),F=0,G=0,J="offsetWidth"in k?k.offsetWidth-k.clientWidth-j-z:0,K="offsetHeight"in k?k.offsetHeight-k.clientHeight-q-A:0;if(f===k)F="start"===d?x:"end"===d?x-g:"nearest"===d?r(v,v+g,g,q,A,v+x,v+x+b,b):x-g/2,G="start"===u?I:"center"===u?I-m/2:"end"===u?I-m:r(w,w+m,m,j,z,w+I,w+I+H,H),F=Math.max(0,F+v),G=Math.max(0,G+w);else {F="start"===d?x-R-q:"end"===d?x-Y+A+K:"nearest"===d?r(R,Y,D,q,A+K,x,x+b,b):x-(R+D/2)+K/2,G="start"===u?I-L-j:"center"===u?I-(L+O/2)+J/2:"end"===u?I-X+z+J:r(L,X,O,j,z+J,I,I+H,H);var N=k.scrollLeft,P=k.scrollTop;x+=P-(F=Math.max(0,Math.min(P+F,k.scrollHeight-D+K))),I+=N-(G=Math.max(0,Math.min(N+G,k.scrollWidth-O+J)));}C.push({el:k,top:F,left:G});}return C}
 
   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
@@ -1274,24 +1275,20 @@
    * @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(node, {
       boundary: menuNode,
       block: 'nearest',
@@ -1307,18 +1304,18 @@
       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
@@ -1327,32 +1324,27 @@
    * @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
@@ -1360,33 +1352,26 @@
    * @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') {
@@ -1397,23 +1382,22 @@
       });
     };
   }
+
   /**
    * 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,
@@ -1422,29 +1406,24 @@
    * @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
@@ -1452,64 +1431,52 @@
    * @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)) {
@@ -1518,6 +1485,7 @@
     });
     return result;
   }
+
   /**
    * This will perform a shallow merge of the given state object
    * with the state coming from props
@@ -1529,14 +1497,13 @@
    * @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
@@ -1546,41 +1513,36 @@
    * @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.
@@ -1592,39 +1554,30 @@
    * @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.
    *
@@ -1635,15 +1588,11 @@
    * @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')) {
@@ -1657,13 +1606,12 @@
         }
       }
     }
-
     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.
    *
@@ -1674,20 +1622,16 @@
    *
    * @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 */
-
   {
     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`;
@@ -1706,39 +1650,33 @@
   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');
@@ -1798,27 +1736,22 @@
   });
 
   /* 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);
@@ -1826,32 +1759,25 @@
           }, 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,
@@ -1860,7 +1786,6 @@
             isOpen: this.props.defaultIsOpen
           }, cb);
         };
-
         this.selectItem = (item, otherStateToSet, cb) => {
           otherStateToSet = pickState(otherStateToSet);
           this.internalSetState({
@@ -1871,114 +1796,105 @@
             ...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',
@@ -1993,11 +1909,9 @@
           _this.getRootProps.called = true;
           _this.getRootProps.refKey = refKey;
           _this.getRootProps.suppressRefError = suppressRefError;
-
           const {
             isOpen
           } = _this.getState();
-
           return {
             [refKey]: handleRefs(ref, _this.rootRef),
             role: 'combobox',
@@ -2008,11 +1922,9 @@
             ...rest
           };
         };
-
         this.keyDownHandlers = {
           ArrowDown(event) {
             event.preventDefault();
-
             if (this.getState().isOpen) {
               const amount = event.shiftKey ? 5 : 1;
               this.moveHighlightedIndex(amount, {
@@ -2024,7 +1936,6 @@
                 type: keyDownArrowDown
               }, () => {
                 const itemCount = this.getItemCount();
-
                 if (itemCount > 0) {
                   const {
                     highlightedIndex
@@ -2037,10 +1948,8 @@
               });
             }
           },
-
           ArrowUp(event) {
             event.preventDefault();
-
             if (this.getState().isOpen) {
               const amount = event.shiftKey ? -5 : -1;
               this.moveHighlightedIndex(amount, {
@@ -2052,7 +1961,6 @@
                 type: keyDownArrowUp
               }, () => {
                 const itemCount = this.getItemCount();
-
                 if (itemCount > 0) {
                   const {
                     highlightedIndex
@@ -2065,32 +1973,26 @@
               });
             }
           },
-
           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({
@@ -2101,68 +2003,57 @@
               })
             });
           }
-
         };
-        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,
@@ -2172,11 +2063,9 @@
             onBlur,
             ...rest
           } = _temp3 === void 0 ? {} : _temp3;
-
           const {
             isOpen
           } = _this.getState();
-
           const enabledEventHandlers = {
             onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
             onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
@@ -2194,33 +2083,27 @@
             ...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.
-
-
           {
             // Ensure that toggle of menu occurs after the potential blur event in iOS
             this.internalSetTimeout(() => this.toggleMenu({
@@ -2228,11 +2111,9 @@
             }));
           }
         };
-
         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)
             ) {
@@ -2242,7 +2123,6 @@
             }
           });
         };
-
         this.getLabelProps = props => {
           return {
             htmlFor: this.inputId,
@@ -2250,7 +2130,6 @@
             ...props
           };
         };
-
         this.getInputProps = function (_temp4) {
           let {
             onKeyDown,
@@ -2262,18 +2141,16 @@
           } = _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),
@@ -2281,7 +2158,6 @@
               onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
             };
           }
-
           return {
             'aria-autocomplete': 'list',
             'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
@@ -2296,15 +2172,12 @@
             ...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,
@@ -2313,12 +2186,10 @@
             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
@@ -2326,11 +2197,9 @@
             }
           });
         };
-
         this.menuRef = node => {
           this._menuNode = node;
         };
-
         this.getMenuProps = function (_temp5, _temp6) {
           let {
             refKey = 'ref',
@@ -2351,7 +2220,6 @@
             ...props
           };
         };
-
         this.getItemProps = function (_temp7) {
           let {
             onMouseMove,
@@ -2362,15 +2230,12 @@
             item = 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 = {
@@ -2381,17 +2246,15 @@
               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 => {
@@ -2405,9 +2268,10 @@
                 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;
@@ -2419,18 +2283,14 @@
             ...rest
           };
         };
-
         this.clearItems = () => {
           this.items = [];
         };
-
         this.reset = function (otherStateToSet, cb) {
           if (otherStateToSet === void 0) {
             otherStateToSet = {};
           }
-
           otherStateToSet = pickState(otherStateToSet);
-
           _this.internalSetState(_ref => {
             let {
               selectedItem
@@ -2443,14 +2303,11 @@
             };
           }, cb);
         };
-
         this.toggleMenu = function (otherStateToSet, cb) {
           if (otherStateToSet === void 0) {
             otherStateToSet = {};
           }
-
           otherStateToSet = pickState(otherStateToSet);
-
           _this.internalSetState(_ref2 => {
             let {
               isOpen
@@ -2467,29 +2324,24 @@
               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];
@@ -2515,21 +2367,17 @@
           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
        */
@@ -2539,6 +2387,7 @@
         });
         this.timeoutIds = [];
       }
+
       /**
        * Gets the state based on internal state or props
        * If a state value is passed via props, then that
@@ -2548,36 +2397,28 @@
        * @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) */
         {
@@ -2585,19 +2426,16 @@
           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,
@@ -2664,17 +2502,17 @@
           isOpen,
           selectedItem
         };
-      } //////////////////////////// ROOT
+      }
 
+      //////////////////////////// ROOT
 
       componentDidMount() {
         /* istanbul ignore if (react-native) */
         if (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
@@ -2684,44 +2522,37 @@
           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;
@@ -2730,7 +2561,6 @@
           environment.addEventListener('touchstart', onTouchStart);
           environment.addEventListener('touchmove', onTouchMove);
           environment.addEventListener('touchend', onTouchEnd);
-
           this.cleanup = () => {
             this.internalClearTimeouts();
             this.updateStatus.cancel();
@@ -2742,7 +2572,6 @@
           };
         }
       }
-
       shouldScroll(prevState, prevProps) {
         const {
           highlightedIndex: currentHighlightedIndex
@@ -2754,89 +2583,78 @@
         const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
         return scrollWhenOpen || scrollWhenNavigating;
       }
-
       componentDidUpdate(prevProps, prevState) {
         {
           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 (!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 */
         {
           // 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');
         }
       }
-
     }
-
     Downshift.defaultProps = {
       defaultHighlightedIndex: null,
       defaultIsOpen: false,
@@ -2845,12 +2663,10 @@
         if (i == null) {
           return '';
         }
-
         if (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,
@@ -2860,8 +2676,7 @@
       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,
@@ -2870,7 +2685,6 @@
     Downshift.stateChangeTypes = stateChangeTypes$3;
     return Downshift;
   })();
-
   Downshift.propTypes = {
     children: PropTypes.func,
     defaultHighlightedIndex: PropTypes.number,
@@ -2904,7 +2718,6 @@
     scrollIntoView: PropTypes.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.any,
     isOpen: PropTypes.bool,
@@ -2915,28 +2728,23 @@
     menuId: PropTypes.string,
     getItemId: PropTypes.func
     /* eslint-enable react/no-unused-prop-types */
-
   } ;
   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.exports.isForwardRef(element)) {
       // eslint-disable-next-line no-console
       console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
@@ -2944,7 +2752,6 @@
       // 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.exports.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.`);
@@ -2957,7 +2764,6 @@
     selectedItem: null,
     inputValue: ''
   };
-
   function callOnChangeProps(action, state, newState) {
     const {
       props,
@@ -2966,12 +2772,10 @@
     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,
@@ -2979,14 +2783,12 @@
       });
     }
   }
-
   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,
@@ -2994,6 +2796,7 @@
       });
     }
   }
+
   /**
    * Default state reducer that returns the changes.
    *
@@ -3001,19 +2804,16 @@
    * @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,
@@ -3021,17 +2821,16 @@
     } = 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()}`,
@@ -3050,41 +2849,35 @@
     });
     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.
@@ -3095,8 +2888,6 @@
    * @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();
@@ -3104,7 +2895,8 @@
       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;
@@ -3120,11 +2912,11 @@
       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.
@@ -3134,57 +2926,42 @@
    * @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');
@@ -3197,7 +2974,6 @@
       inputValue
     };
   }
-
   function getHighlightedIndexOnOpen(props, state, offset) {
     const {
       items,
@@ -3208,30 +2984,26 @@
       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.
    *
@@ -3241,8 +3013,6 @@
    * @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,
@@ -3254,29 +3024,23 @@
       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);
@@ -3288,14 +3052,14 @@
         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.
@@ -3303,18 +3067,13 @@
    * @param  {...any} propKeys Getter prop names to be handled.
    * @returns {Function} Setter function called inside getter props to set call information.
    */
-
   /* istanbul ignore next */
-
-
   {
     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;
@@ -3322,7 +3081,6 @@
       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
@@ -3330,13 +3088,11 @@
               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.`);
@@ -3354,7 +3110,6 @@
       return setGetterPropCallInfo;
     };
   }
-
   function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
     let {
       isInitialMount,
@@ -3368,16 +3123,15 @@
       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,
@@ -3388,27 +3142,25 @@
       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 */
-
   {
     useControlPropsValidator = _ref4 => {
       let {
@@ -3422,7 +3174,6 @@
         if (isInitialMount) {
           return;
         }
-
         validateControlledUnchanged(state, prevPropsRef.current, props);
         prevPropsRef.current = props;
       }, [state, props, isInitialMount]);
@@ -3435,20 +3186,17 @@
       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 = {
@@ -3456,32 +3204,27 @@
           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'),
@@ -3490,12 +3233,11 @@
           inputValue: getDefaultValue$1(props, 'inputValue')
         };
         break;
-
       default:
         throw new Error('Reducer called without proper action type.');
     }
-
-    return { ...state,
+    return {
+      ...state,
       ...changes
     };
   }
@@ -3660,7 +3402,6 @@
   });
 
   /* eslint-disable complexity */
-
   function downshiftSelectReducer(state, action) {
     const {
       type,
@@ -3668,7 +3409,6 @@
       altKey
     } = action;
     let changes;
-
     switch (type) {
       case ItemClick$1:
         changes = {
@@ -3677,7 +3417,6 @@
           selectedItem: props.items[action.index]
         };
         break;
-
       case ToggleButtonKeyDownCharacter:
         {
           const lowercasedKey = action.key;
@@ -3697,7 +3436,6 @@
           };
         }
         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);
@@ -3707,7 +3445,6 @@
           };
         }
         break;
-
       case ToggleButtonKeyDownArrowUp:
         if (state.isOpen && altKey) {
           changes = {
@@ -3724,10 +3461,8 @@
             isOpen: true
           };
         }
-
         break;
       // only triggered when menu is open.
-
       case ToggleButtonKeyDownEnter:
       case ToggleButtonKeyDownSpaceButton:
         changes = {
@@ -3738,40 +3473,34 @@
           })
         };
         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,
@@ -3781,33 +3510,30 @@
           })
         };
         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 {
@@ -3817,8 +3543,8 @@
       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 {
@@ -3826,27 +3552,30 @@
       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,
@@ -3854,8 +3583,8 @@
       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,
@@ -3863,8 +3592,8 @@
       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,
@@ -3872,8 +3601,9 @@
       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 => {
@@ -3881,18 +3611,19 @@
           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({
@@ -3904,27 +3635,27 @@
       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();
@@ -3934,7 +3665,6 @@
           altKey: event.altKey
         });
       },
-
       ArrowUp(event) {
         event.preventDefault();
         dispatch({
@@ -3943,7 +3673,6 @@
           altKey: event.altKey
         });
       },
-
       Home(event) {
         event.preventDefault();
         dispatch({
@@ -3951,7 +3680,6 @@
           getItemNodeFromIndex
         });
       },
-
       End(event) {
         event.preventDefault();
         dispatch({
@@ -3959,7 +3687,6 @@
           getItemNodeFromIndex
         });
       },
-
       Escape() {
         if (latest.current.state.isOpen) {
           dispatch({
@@ -3967,7 +3694,6 @@
           });
         }
       },
-
       Enter(event) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
@@ -3976,7 +3702,6 @@
           });
         }
       },
-
       PageUp(event) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
@@ -3986,7 +3711,6 @@
           });
         }
       },
-
       PageDown(event) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
@@ -3996,7 +3720,6 @@
           });
         }
       },
-
       ' '(event) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
@@ -4005,9 +3728,9 @@
           });
         }
       }
+    }), [dispatch, getItemNodeFromIndex, latest]);
 
-    }), [dispatch, getItemNodeFromIndex, latest]); // Action functions.
-
+    // Action functions.
     const toggleMenu = react.useCallback(() => {
       dispatch({
         type: FunctionToggleMenu$1
@@ -4045,8 +3768,8 @@
         type: FunctionSetInputValue$1,
         inputValue: newInputValue
       });
-    }, [dispatch]); // Getter functions.
-
+    }, [dispatch]);
+    // Getter functions.
     const getLabelProps = react.useCallback(labelProps => ({
       id: elementIds.labelId,
       htmlFor: elementIds.toggleButtonId,
@@ -4064,13 +3787,11 @@
       let {
         suppressRefError = false
       } = _temp2 === void 0 ? {} : _temp2;
-
       const menuHandleMouseLeave = () => {
         dispatch({
           type: MenuMouseLeave$1
         });
       };
-
       setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
       return {
         [refKey]: handleRefs(ref, menuNode => {
@@ -4097,13 +3818,11 @@
         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({
@@ -4111,10 +3830,8 @@
           });
         }
       };
-
       const toggleButtonHandleKeyDown = event => {
         const key = normalizeArrowKey(event);
-
         if (key && toggleButtonKeyDownHandlers[key]) {
           toggleButtonKeyDownHandlers[key](event);
         } else if (isAcceptedCharacterKey(key)) {
@@ -4125,7 +3842,6 @@
           });
         }
       };
-
       const toggleProps = {
         [refKey]: handleRefs(ref, toggleButtonNode => {
           toggleButtonRef.current = toggleButtonNode;
@@ -4141,12 +3857,10 @@
         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]);
@@ -4167,12 +3881,10 @@
       } = 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,
@@ -4180,20 +3892,16 @@
           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',
@@ -4206,11 +3914,9 @@
         }),
         ...rest
       };
-
       if (!disabled) {
         itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
       }
-
       itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
       return itemProps;
     }, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
@@ -4295,16 +4001,14 @@
     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.array.isRequired,
     itemToString: PropTypes.func,
@@ -4344,6 +4048,7 @@
       })
     })
   };
+
   /**
    * The useCombobox version of useControlledReducer, which also
    * checks if the controlled prop selectedItem changed between
@@ -4356,11 +4061,11 @@
    * @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) {
@@ -4369,29 +4074,26 @@
             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 */
-
   {
     validatePropTypes$1 = (options, caller) => {
       PropTypes.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,
@@ -4399,7 +4101,6 @@
       altKey
     } = action;
     let changes;
-
     switch (type) {
       case ItemClick:
         changes = {
@@ -4409,7 +4110,6 @@
           inputValue: props.itemToString(props.items[action.index])
         };
         break;
-
       case InputKeyDownArrowDown:
         if (state.isOpen) {
           changes = {
@@ -4421,9 +4121,7 @@
             isOpen: props.items.length >= 0
           };
         }
-
         break;
-
       case InputKeyDownArrowUp:
         if (state.isOpen) {
           if (altKey) {
@@ -4446,9 +4144,7 @@
             isOpen: props.items.length >= 0
           };
         }
-
         break;
-
       case InputKeyDownEnter:
         changes = {
           isOpen: getDefaultValue$1(props, 'isOpen'),
@@ -4459,7 +4155,6 @@
           })
         };
         break;
-
       case InputKeyDownEscape:
         changes = {
           isOpen: false,
@@ -4470,31 +4165,26 @@
           })
         };
         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,
@@ -4505,7 +4195,6 @@
           })
         };
         break;
-
       case InputChange:
         changes = {
           isOpen: true,
@@ -4513,32 +4202,28 @@
           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
     };
   }
@@ -4546,15 +4231,14 @@
 
   /* 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 {
@@ -4566,8 +4250,8 @@
       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 {
@@ -4575,25 +4259,27 @@
       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,
@@ -4601,8 +4287,8 @@
       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,
@@ -4610,8 +4296,8 @@
       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,
@@ -4624,47 +4310,44 @@
       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();
@@ -4674,7 +4357,6 @@
           getItemNodeFromIndex
         });
       },
-
       ArrowUp(event) {
         event.preventDefault();
         dispatch({
@@ -4683,34 +4365,28 @@
           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({
@@ -4718,22 +4394,19 @@
           });
         }
       },
-
       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();
@@ -4743,7 +4416,6 @@
           });
         }
       },
-
       PageDown(event) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
@@ -4753,9 +4425,9 @@
           });
         }
       }
+    }), [dispatch, latest, getItemNodeFromIndex]);
 
-    }), [dispatch, latest, getItemNodeFromIndex]); // Getter props.
-
+    // Getter props.
     const getLabelProps = react.useCallback(labelProps => ({
       id: elementIds.labelId,
       htmlFor: elementIds.inputId,
@@ -4805,19 +4477,15 @@
         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,
@@ -4825,16 +4493,13 @@
           disabled
         });
       };
-
       const itemHandleClick = () => {
         dispatch({
           type: ItemClick,
           index
         });
       };
-
       const itemHandleMouseDown = e => e.preventDefault();
-
       return {
         [refKey]: handleRefs(ref, itemNode => {
           if (itemNode) {
@@ -4862,13 +4527,11 @@
         ...rest
       } = _temp4 === void 0 ? {} : _temp4;
       const latestState = latest.current.state;
-
       const toggleButtonHandleClick = () => {
         dispatch({
           type: ToggleButtonClick
         });
       };
-
       return {
         [refKey]: handleRefs(ref, toggleButtonNode => {
           toggleButtonRef.current = toggleButtonNode;
@@ -4877,7 +4540,8 @@
         'aria-expanded': latestState.isOpen,
         id: elementIds.toggleButtonId,
         tabIndex: -1,
-        ...(!rest.disabled && { ...({
+        ...(!rest.disabled && {
+          ...({
             onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
           })
         }),
@@ -4901,22 +4565,18 @@
       } = _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) {
@@ -4926,7 +4586,6 @@
           });
         }
       };
-
       const inputHandleFocus = () => {
         if (!latestState.isOpen) {
           dispatch({
@@ -4934,12 +4593,10 @@
           });
         }
       };
-      /* istanbul ignore next (preact) */
-
 
+      /* istanbul ignore next (preact) */
       const onChangeKey = 'onChange';
       let eventHandlers = {};
-
       if (!rest.disabled) {
         eventHandlers = {
           [onChangeKey]: callAllEventHandlers(onChange, onInput, inputHandleChange),
@@ -4948,7 +4605,6 @@
           onFocus: callAllEventHandlers(onFocus, inputHandleFocus)
         };
       }
-
       return {
         [refKey]: handleRefs(ref, inputNode => {
           inputRef.current = inputNode;
@@ -4967,8 +4623,9 @@
         ...eventHandlers,
         ...rest
       };
-    }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]); // returns
+    }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
 
+    // returns
     const toggleMenu = react.useCallback(() => {
       dispatch({
         type: FunctionToggleMenu
@@ -5034,6 +4691,7 @@
     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
@@ -5043,10 +4701,10 @@
    * @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.
@@ -5055,11 +4713,10 @@
    * @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.
@@ -5067,8 +4724,6 @@
    * @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');
@@ -5077,6 +4732,7 @@
       selectedItems
     };
   }
+
   /**
    * Returns true if dropdown keydown operation is permitted. Should not be
    * allowed on keydown with modifier keys (ctrl, alt, shift, meta), on
@@ -5086,32 +4742,28 @@
    * @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,
@@ -5119,7 +4771,6 @@
     } = selectionParameters;
     return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
   }
-
   const propTypes = {
     selectedItems: PropTypes.array,
     initialSelectedItems: PropTypes.array,
@@ -5151,11 +4802,11 @@
     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 */
-
   {
     validatePropTypes = (options, caller) => {
       PropTypes.checkPropTypes(propTypes, options, 'prop', caller.name);
@@ -5194,7 +4845,6 @@
   });
 
   /* eslint-disable complexity */
-
   function downshiftMultipleSelectionReducer(state, action) {
     const {
       type,
@@ -5207,37 +4857,31 @@
       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)],
             ...{
@@ -5246,52 +4890,43 @@
           };
           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 {
@@ -5302,7 +4937,6 @@
           };
           break;
         }
-
       case FunctionSetActiveIndex:
         {
           const {
@@ -5313,33 +4947,30 @@
           };
           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 {
@@ -5348,14 +4979,16 @@
       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);
@@ -5364,15 +4997,14 @@
     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({
@@ -5383,15 +5015,15 @@
           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]) {
@@ -5403,37 +5035,34 @@
       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) {
@@ -5443,7 +5072,6 @@
           });
         }
       },
-
       Backspace(event) {
         if (isKeyDownOperationPermitted(event)) {
           dispatch({
@@ -5451,9 +5079,9 @@
           });
         }
       }
+    }), [dispatch, keyNavigationPrevious]);
 
-    }), [dispatch, keyNavigationPrevious]); // Getter props.
-
+    // Getter props.
     const getSelectedItemProps = react.useCallback(function (_temp) {
       let {
         refKey = 'ref',
@@ -5468,26 +5096,21 @@
         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) {
@@ -5513,21 +5136,17 @@
         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) {
@@ -5540,8 +5159,9 @@
         }),
         ...rest
       };
-    }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns
+    }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]);
 
+    // returns
     const addSelectedItem = react.useCallback(selectedItem => {
       dispatch({
         type: FunctionAddSelectedItem,