downshift 6.1.6 → 6.1.9

package/preact/dist/downshift.umd.js

@@ -2,68 +2,12 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('preact'), require('prop-types')) :
   typeof define === 'function' && define.amd ? define(['exports', 'preact', 'prop-types'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Downshift = {}, global.preact, global.PropTypes));
-}(this, (function (exports, preact, PropTypes) { 'use strict';
+})(this, (function (exports, preact, PropTypes) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-
-    return target;
-  }
-
-  function _extends() {
-    _extends = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-
-    return _extends.apply(this, arguments);
-  }
-
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-
-    return self;
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
-  }
-
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    _setPrototypeOf(subClass, superClass);
-  }
-
   var reactIs = {exports: {}};
 
   /** @license React v17.0.2
@@ -305,7 +249,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}
 
-  var idCounter = 0;
+  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
@@ -332,15 +276,17 @@
       return;
     }
 
-    var actions = computeScrollIntoView(node, {
+    const actions = computeScrollIntoView(node, {
       boundary: menuNode,
       block: 'nearest',
       scrollMode: 'if-needed'
     });
-    actions.forEach(function (_ref) {
-      var el = _ref.el,
-          top = _ref.top,
-          left = _ref.left;
+    actions.forEach(_ref => {
+      let {
+        el,
+        top,
+        left
+      } = _ref;
       el.scrollTop = top;
       el.scrollLeft = left;
     });
@@ -354,7 +300,7 @@
 
 
   function isOrContainsNode(parent, child, environment) {
-    var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
+    const result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
     return result;
   }
   /**
@@ -368,7 +314,7 @@
 
 
   function debounce(fn, time) {
-    var timeoutId;
+    let timeoutId;
 
     function cancel() {
       if (timeoutId) {
@@ -382,9 +328,9 @@
       }
 
       cancel();
-      timeoutId = setTimeout(function () {
+      timeoutId = setTimeout(() => {
         timeoutId = null;
-        fn.apply(void 0, args);
+        fn(...args);
       }, time);
     }
 
@@ -410,9 +356,9 @@
         args[_key3 - 1] = arguments[_key3];
       }
 
-      return fns.some(function (fn) {
+      return fns.some(fn => {
         if (fn) {
-          fn.apply(void 0, [event].concat(args));
+          fn(event, ...args);
         }
 
         return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault;
@@ -425,8 +371,8 @@
       refs[_key4] = arguments[_key4];
     }
 
-    return function (node) {
-      refs.forEach(function (ref) {
+    return node => {
+      refs.forEach(ref => {
         if (typeof ref === 'function') {
           ref(node);
         } else if (ref) {
@@ -463,9 +409,11 @@
 
 
   function getA11yStatusMessage$1(_ref2) {
-    var isOpen = _ref2.isOpen,
-        resultCount = _ref2.resultCount,
-        previousResultCount = _ref2.previousResultCount;
+    let {
+      isOpen,
+      resultCount,
+      previousResultCount
+    } = _ref2;
 
     if (!isOpen) {
       return '';
@@ -541,7 +489,7 @@
     console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
   }
 
-  var stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
+  const stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
   /**
    * @param {Object} state the state object
    * @return {Object} state that is relevant to downshift
@@ -552,8 +500,8 @@
       state = {};
     }
 
-    var result = {};
-    stateKeys.forEach(function (k) {
+    const result = {};
+    stateKeys.forEach(k => {
       if (state.hasOwnProperty(k)) {
         result[k] = state[k];
       }
@@ -574,7 +522,7 @@
 
 
   function getState(state, props) {
-    return Object.keys(state).reduce(function (prevState, key) {
+    return Object.keys(state).reduce((prevState, key) => {
       prevState[key] = isControlledProp(props, key) ? props[key] : state[key];
       return prevState;
     }, {});
@@ -601,8 +549,10 @@
 
 
   function normalizeArrowKey(event) {
-    var key = event.key,
-        keyCode = event.keyCode;
+    const {
+      key,
+      keyCode
+    } = event;
     /* istanbul ignore next (ie) */
 
     if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
@@ -643,13 +593,13 @@
       return -1;
     }
 
-    var itemsLastIndex = itemCount - 1;
+    const itemsLastIndex = itemCount - 1;
 
     if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
       baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
     }
 
-    var newIndex = baseIndex + moveAmount;
+    let newIndex = baseIndex + moveAmount;
 
     if (newIndex < 0) {
       newIndex = circular ? itemsLastIndex : 0;
@@ -657,7 +607,7 @@
       newIndex = circular ? 0 : itemsLastIndex;
     }
 
-    var nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
+    const nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
 
     if (nonDisabledNewIndex === -1) {
       return baseIndex >= itemCount ? -1 : baseIndex;
@@ -678,22 +628,22 @@
 
 
   function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
-    var currentElementNode = getItemNodeFromIndex(baseIndex);
+    const currentElementNode = getItemNodeFromIndex(baseIndex);
 
     if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
       return baseIndex;
     }
 
     if (moveAmount > 0) {
-      for (var index = baseIndex + 1; index < itemCount; index++) {
+      for (let index = baseIndex + 1; index < itemCount; index++) {
         if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
           return index;
         }
       }
     } else {
-      for (var _index = baseIndex - 1; _index >= 0; _index--) {
-        if (!getItemNodeFromIndex(_index).hasAttribute('disabled')) {
-          return _index;
+      for (let index = baseIndex - 1; index >= 0; index--) {
+        if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
+          return index;
         }
       }
     }
@@ -721,19 +671,17 @@
       checkActiveElement = true;
     }
 
-    return downshiftElements.some(function (contextNode) {
-      return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
-    });
+    return downshiftElements.some(contextNode => contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment)));
   } // eslint-disable-next-line import/no-mutable-exports
 
 
-  var validateControlledUnchanged = noop;
+  let validateControlledUnchanged = noop;
   /* istanbul ignore next */
 
   {
-    validateControlledUnchanged = function validateControlledUnchanged(state, prevProps, nextProps) {
-      var warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
-      Object.keys(state).forEach(function (propKey) {
+    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";
+      Object.keys(state).forEach(propKey => {
         if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
           // eslint-disable-next-line no-console
           console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
@@ -745,7 +693,7 @@
     };
   }
 
-  var cleanupStatus = debounce(function (documentProp) {
+  const cleanupStatus = debounce(documentProp => {
     getStatusDiv(documentProp).textContent = '';
   }, 500);
   /**
@@ -754,7 +702,7 @@
    */
 
   function setStatus(status, documentProp) {
-    var div = getStatusDiv(documentProp);
+    const div = getStatusDiv(documentProp);
 
     if (!status) {
       return;
@@ -775,7 +723,7 @@
       documentProp = document;
     }
 
-    var statusDiv = documentProp.getElementById('a11y-status-message');
+    let statusDiv = documentProp.getElementById('a11y-status-message');
 
     if (statusDiv) {
       return statusDiv;
@@ -800,23 +748,23 @@
     return statusDiv;
   }
 
-  var unknown = '__autocomplete_unknown__' ;
-  var mouseUp = '__autocomplete_mouseup__' ;
-  var itemMouseEnter = '__autocomplete_item_mouseenter__' ;
-  var keyDownArrowUp = '__autocomplete_keydown_arrow_up__' ;
-  var keyDownArrowDown = '__autocomplete_keydown_arrow_down__' ;
-  var keyDownEscape = '__autocomplete_keydown_escape__' ;
-  var keyDownEnter = '__autocomplete_keydown_enter__' ;
-  var keyDownHome = '__autocomplete_keydown_home__' ;
-  var keyDownEnd = '__autocomplete_keydown_end__' ;
-  var clickItem = '__autocomplete_click_item__' ;
-  var blurInput = '__autocomplete_blur_input__' ;
-  var changeInput = '__autocomplete_change_input__' ;
-  var keyDownSpaceButton = '__autocomplete_keydown_space_button__' ;
-  var clickButton = '__autocomplete_click_button__' ;
-  var blurButton = '__autocomplete_blur_button__' ;
-  var controlledPropUpdatedSelectedItem = '__autocomplete_controlled_prop_updated_selected_item__' ;
-  var touchEnd = '__autocomplete_touchend__' ;
+  const unknown = '__autocomplete_unknown__' ;
+  const mouseUp = '__autocomplete_mouseup__' ;
+  const itemMouseEnter = '__autocomplete_item_mouseenter__' ;
+  const keyDownArrowUp = '__autocomplete_keydown_arrow_up__' ;
+  const keyDownArrowDown = '__autocomplete_keydown_arrow_down__' ;
+  const keyDownEscape = '__autocomplete_keydown_escape__' ;
+  const keyDownEnter = '__autocomplete_keydown_enter__' ;
+  const keyDownHome = '__autocomplete_keydown_home__' ;
+  const keyDownEnd = '__autocomplete_keydown_end__' ;
+  const clickItem = '__autocomplete_click_item__' ;
+  const blurInput = '__autocomplete_blur_input__' ;
+  const changeInput = '__autocomplete_change_input__' ;
+  const keyDownSpaceButton = '__autocomplete_keydown_space_button__' ;
+  const clickButton = '__autocomplete_click_button__' ;
+  const blurButton = '__autocomplete_blur_button__' ;
+  const controlledPropUpdatedSelectedItem = '__autocomplete_controlled_prop_updated_selected_item__' ;
+  const touchEnd = '__autocomplete_touchend__' ;
 
   var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -839,58 +787,45 @@
     touchEnd: touchEnd
   });
 
-  var _excluded$4 = ["refKey", "ref"],
-      _excluded2$3 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"],
-      _excluded3$2 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"],
-      _excluded4$1 = ["refKey", "ref"],
-      _excluded5$1 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"];
+  /* eslint camelcase:0 */
 
-  var Downshift = /*#__PURE__*/function () {
-    var Downshift = /*#__PURE__*/function (_Component) {
-      _inheritsLoose(Downshift, _Component);
-
-      function Downshift(_props) {
+  const Downshift = /*#__PURE__*/(() => {
+    class Downshift extends preact.Component {
+      constructor(_props) {
         var _this;
 
-        _this = _Component.call(this, _props) || this; // fancy destructuring + defaults + aliases
-        // this basically says each value of state should either be set to
-        // the initial value or the default value if the initial value is not provided
-
-        _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";
+        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 || function (index) {
-          return _this.id + "-item-" + index;
-        };
+        this.getItemId = this.props.getItemId || (index => this.id + "-item-" + index);
 
-        _this.input = null;
-        _this.items = [];
-        _this.itemCount = null;
-        _this.previousResultCount = 0;
-        _this.timeoutIds = [];
+        this.input = null;
+        this.items = [];
+        this.itemCount = null;
+        this.previousResultCount = 0;
+        this.timeoutIds = [];
 
-        _this.internalSetTimeout = function (fn, time) {
-          var id = setTimeout(function () {
-            _this.timeoutIds = _this.timeoutIds.filter(function (i) {
-              return i !== id;
-            });
+        this.internalSetTimeout = (fn, time) => {
+          const id = setTimeout(() => {
+            this.timeoutIds = this.timeoutIds.filter(i => i !== id);
             fn();
           }, time);
-
-          _this.timeoutIds.push(id);
+          this.timeoutIds.push(id);
         };
 
-        _this.setItemCount = function (count) {
-          _this.itemCount = count;
+        this.setItemCount = count => {
+          this.itemCount = count;
         };
 
-        _this.unsetItemCount = function () {
-          _this.itemCount = null;
+        this.unsetItemCount = () => {
+          this.itemCount = null;
         };
 
-        _this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
+        this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
           if (highlightedIndex === void 0) {
             highlightedIndex = _this.props.defaultHighlightedIndex;
           }
@@ -901,71 +836,72 @@
 
           otherStateToSet = pickState(otherStateToSet);
 
-          _this.internalSetState(_extends({
-            highlightedIndex: highlightedIndex
-          }, otherStateToSet));
+          _this.internalSetState({
+            highlightedIndex,
+            ...otherStateToSet
+          });
         };
 
-        _this.clearSelection = function (cb) {
-          _this.internalSetState({
+        this.clearSelection = cb => {
+          this.internalSetState({
             selectedItem: null,
             inputValue: '',
-            highlightedIndex: _this.props.defaultHighlightedIndex,
-            isOpen: _this.props.defaultIsOpen
+            highlightedIndex: this.props.defaultHighlightedIndex,
+            isOpen: this.props.defaultIsOpen
           }, cb);
         };
 
-        _this.selectItem = function (item, otherStateToSet, cb) {
+        this.selectItem = (item, otherStateToSet, cb) => {
           otherStateToSet = pickState(otherStateToSet);
-
-          _this.internalSetState(_extends({
-            isOpen: _this.props.defaultIsOpen,
-            highlightedIndex: _this.props.defaultHighlightedIndex,
+          this.internalSetState({
+            isOpen: this.props.defaultIsOpen,
+            highlightedIndex: this.props.defaultHighlightedIndex,
             selectedItem: item,
-            inputValue: _this.props.itemToString(item)
-          }, otherStateToSet), cb);
+            inputValue: this.props.itemToString(item),
+            ...otherStateToSet
+          }, cb);
         };
 
-        _this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
-          var item = _this.items[itemIndex];
+        this.selectItemAtIndex = (itemIndex, otherStateToSet, cb) => {
+          const item = this.items[itemIndex];
 
           if (item == null) {
             return;
           }
 
-          _this.selectItem(item, otherStateToSet, cb);
+          this.selectItem(item, otherStateToSet, cb);
         };
 
-        _this.selectHighlightedItem = function (otherStateToSet, cb) {
-          return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
+        this.selectHighlightedItem = (otherStateToSet, cb) => {
+          return this.selectItemAtIndex(this.getState().highlightedIndex, otherStateToSet, cb);
         };
 
-        _this.internalSetState = function (stateToSet, cb) {
-          var isItemSelected, onChangeArg;
-          var onStateChangeArg = {};
-          var isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
+        this.internalSetState = (stateToSet, cb) => {
+          let isItemSelected, onChangeArg;
+          const onStateChangeArg = {};
+          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, _extends({}, _this.getStateAndHelpers(), stateToSet));
+            this.props.onInputValueChange(stateToSet.inputValue, { ...this.getStateAndHelpers(),
+              ...stateToSet
+            });
           }
 
-          return _this.setState(function (state) {
-            state = _this.getState(state);
-            var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
+          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.
 
-            newStateToSet = _this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
+            newStateToSet = this.props.stateReducer(state, newStateToSet); // 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
 
-            var nextState = {}; // this is just used to tell whether the state changed
-
-            var nextFullState = {}; // we need to call on change if the outside world is controlling any of our state
+            const nextState = {}; // this is just used to tell whether the state changed
             // and we're trying to update that state. OR if the selection has changed and we're
             // trying to update the selection
 
@@ -974,7 +910,7 @@
             }
 
             newStateToSet.type = newStateToSet.type || unknown;
-            Object.keys(newStateToSet).forEach(function (key) {
+            Object.keys(newStateToSet).forEach(key => {
               // onStateChangeArg should only have the state that is
               // actually changing
               if (state[key] !== newStateToSet[key]) {
@@ -991,81 +927,84 @@
                 return;
               }
 
-              nextFullState[key] = 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)) {
+              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 (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
-              _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), newStateToSet));
+              this.props.onInputValueChange(newStateToSet.inputValue, { ...this.getStateAndHelpers(),
+                ...newStateToSet
+              });
             }
 
             return nextState;
-          }, function () {
+          }, () => {
             // 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.
 
-            var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
+            const hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
 
             if (hasMoreStateThanType) {
-              _this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers());
+              this.props.onStateChange(onStateChangeArg, this.getStateAndHelpers());
             }
 
             if (isItemSelected) {
-              _this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers());
+              this.props.onSelect(stateToSet.selectedItem, this.getStateAndHelpers());
             }
 
             if (onChangeArg !== undefined) {
-              _this.props.onChange(onChangeArg, _this.getStateAndHelpers());
+              this.props.onChange(onChangeArg, this.getStateAndHelpers());
             } // 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.props.onUserAction(onStateChangeArg, this.getStateAndHelpers());
           });
         };
 
-        _this.rootRef = function (node) {
-          return _this._rootNode = node;
-        };
-
-        _this.getRootProps = function (_temp, _temp2) {
-          var _extends2;
-
-          var _ref = _temp === void 0 ? {} : _temp,
-              _ref$refKey = _ref.refKey,
-              refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
-              ref = _ref.ref,
-              rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-
-          var _ref2 = _temp2 === void 0 ? {} : _temp2,
-              _ref2$suppressRefErro = _ref2.suppressRefError,
-              suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
-
+        this.rootRef = node => this._rootNode = node;
+
+        this.getRootProps = function (_temp, _temp2) {
+          let {
+            refKey = 'ref',
+            ref,
+            ...rest
+          } = _temp === void 0 ? {} : _temp;
+          let {
+            suppressRefError = false
+          } = _temp2 === void 0 ? {} : _temp2;
           // this is used in the render to know whether the user has called getRootProps.
           // It uses that to know whether to apply the props automatically
           _this.getRootProps.called = true;
           _this.getRootProps.refKey = refKey;
           _this.getRootProps.suppressRefError = suppressRefError;
 
-          var _this$getState = _this.getState(),
-              isOpen = _this$getState.isOpen;
+          const {
+            isOpen
+          } = _this.getState();
 
-          return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
+          return {
+            [refKey]: handleRefs(ref, _this.rootRef),
+            role: 'combobox',
+            'aria-expanded': isOpen,
+            'aria-haspopup': 'listbox',
+            'aria-owns': isOpen ? _this.menuId : null,
+            'aria-labelledby': _this.labelId,
+            ...rest
+          };
         };
 
-        _this.keyDownHandlers = {
-          ArrowDown: function ArrowDown(event) {
-            var _this2 = this;
-
+        this.keyDownHandlers = {
+          ArrowDown(event) {
             event.preventDefault();
 
             if (this.getState().isOpen) {
-              var amount = event.shiftKey ? 5 : 1;
+              const amount = event.shiftKey ? 5 : 1;
               this.moveHighlightedIndex(amount, {
                 type: keyDownArrowDown
               });
@@ -1073,31 +1012,27 @@
               this.internalSetState({
                 isOpen: true,
                 type: keyDownArrowDown
-              }, function () {
-                var itemCount = _this2.getItemCount();
+              }, () => {
+                const itemCount = this.getItemCount();
 
                 if (itemCount > 0) {
-                  var _this2$getState = _this2.getState(),
-                      highlightedIndex = _this2$getState.highlightedIndex;
-
-                  var nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, function (index) {
-                    return _this2.getItemNodeFromIndex(index);
-                  });
-
-                  _this2.setHighlightedIndex(nextHighlightedIndex, {
+                  const {
+                    highlightedIndex
+                  } = this.getState();
+                  const nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
+                  this.setHighlightedIndex(nextHighlightedIndex, {
                     type: keyDownArrowDown
                   });
                 }
               });
             }
           },
-          ArrowUp: function ArrowUp(event) {
-            var _this3 = this;
 
+          ArrowUp(event) {
             event.preventDefault();
 
             if (this.getState().isOpen) {
-              var amount = event.shiftKey ? -5 : -1;
+              const amount = event.shiftKey ? -5 : -1;
               this.moveHighlightedIndex(amount, {
                 type: keyDownArrowUp
               });
@@ -1105,37 +1040,36 @@
               this.internalSetState({
                 isOpen: true,
                 type: keyDownArrowUp
-              }, function () {
-                var itemCount = _this3.getItemCount();
+              }, () => {
+                const itemCount = this.getItemCount();
 
                 if (itemCount > 0) {
-                  var _this3$getState = _this3.getState(),
-                      highlightedIndex = _this3$getState.highlightedIndex;
-
-                  var nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, function (index) {
-                    return _this3.getItemNodeFromIndex(index);
-                  });
-
-                  _this3.setHighlightedIndex(nextHighlightedIndex, {
+                  const {
+                    highlightedIndex
+                  } = this.getState();
+                  const nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
+                  this.setHighlightedIndex(nextHighlightedIndex, {
                     type: keyDownArrowUp
                   });
                 }
               });
             }
           },
-          Enter: function Enter(event) {
+
+          Enter(event) {
             if (event.which === 229) {
               return;
             }
 
-            var _this$getState2 = this.getState(),
-                isOpen = _this$getState2.isOpen,
-                highlightedIndex = _this$getState2.highlightedIndex;
+            const {
+              isOpen,
+              highlightedIndex
+            } = this.getState();
 
             if (isOpen && highlightedIndex != null) {
               event.preventDefault();
-              var item = this.items[highlightedIndex];
-              var itemNode = this.getItemNodeFromIndex(highlightedIndex);
+              const item = this.items[highlightedIndex];
+              const itemNode = this.getItemNodeFromIndex(highlightedIndex);
 
               if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
                 return;
@@ -1146,125 +1080,131 @@
               });
             }
           },
-          Escape: function Escape(event) {
+
+          Escape(event) {
             event.preventDefault();
-            this.reset(_extends({
-              type: keyDownEscape
-            }, !this.state.isOpen && {
-              selectedItem: null,
-              inputValue: ''
-            }));
+            this.reset({
+              type: keyDownEscape,
+              ...(!this.state.isOpen && {
+                selectedItem: null,
+                inputValue: ''
+              })
+            });
           }
+
         };
-        _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
-          ' ': function _(event) {
+        this.buttonKeyDownHandlers = { ...this.keyDownHandlers,
+
+          ' '(event) {
             event.preventDefault();
             this.toggleMenu({
               type: keyDownSpaceButton
             });
           }
-        });
-        _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
-          Home: function Home(event) {
-            var _this4 = this;
 
-            var _this$getState3 = this.getState(),
-                isOpen = _this$getState3.isOpen;
+        };
+        this.inputKeyDownHandlers = { ...this.keyDownHandlers,
+
+          Home(event) {
+            const {
+              isOpen
+            } = this.getState();
 
             if (!isOpen) {
               return;
             }
 
             event.preventDefault();
-            var itemCount = this.getItemCount();
+            const itemCount = this.getItemCount();
 
             if (itemCount <= 0 || !isOpen) {
               return;
             } // get next non-disabled starting downwards from 0 if that's disabled.
 
 
-            var newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, function (index) {
-              return _this4.getItemNodeFromIndex(index);
-            }, false);
+            const newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, index => this.getItemNodeFromIndex(index), false);
             this.setHighlightedIndex(newHighlightedIndex, {
               type: keyDownHome
             });
           },
-          End: function End(event) {
-            var _this5 = this;
 
-            var _this$getState4 = this.getState(),
-                isOpen = _this$getState4.isOpen;
+          End(event) {
+            const {
+              isOpen
+            } = this.getState();
 
             if (!isOpen) {
               return;
             }
 
             event.preventDefault();
-            var itemCount = this.getItemCount();
+            const itemCount = this.getItemCount();
 
             if (itemCount <= 0 || !isOpen) {
               return;
             } // get next non-disabled starting upwards from last index if that's disabled.
 
 
-            var newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, function (index) {
-              return _this5.getItemNodeFromIndex(index);
-            }, false);
+            const newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, index => this.getItemNodeFromIndex(index), false);
             this.setHighlightedIndex(newHighlightedIndex, {
               type: keyDownEnd
             });
           }
-        });
 
-        _this.getToggleButtonProps = function (_temp3) {
-          var _ref3 = _temp3 === void 0 ? {} : _temp3,
-              onClick = _ref3.onClick;
-              _ref3.onPress;
-              var onKeyDown = _ref3.onKeyDown,
-              onKeyUp = _ref3.onKeyUp,
-              onBlur = _ref3.onBlur,
-              rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
-
-          var _this$getState5 = _this.getState(),
-              isOpen = _this$getState5.isOpen;
+        };
 
-          var enabledEventHandlers = {
+        this.getToggleButtonProps = function (_temp3) {
+          let {
+            onClick,
+            onPress,
+            onKeyDown,
+            onKeyUp,
+            onBlur,
+            ...rest
+          } = _temp3 === void 0 ? {} : _temp3;
+
+          const {
+            isOpen
+          } = _this.getState();
+
+          const enabledEventHandlers = {
             onClick: callAllEventHandlers(onClick, _this.buttonHandleClick),
             onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown),
             onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp),
             onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
           };
-          var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
-          return _extends({
+          const eventHandlers = rest.disabled ? {} : enabledEventHandlers;
+          return {
             type: 'button',
             role: 'button',
             'aria-label': isOpen ? 'close menu' : 'open menu',
             'aria-haspopup': true,
-            'data-toggle': true
-          }, eventHandlers, rest);
+            'data-toggle': true,
+            ...eventHandlers,
+            ...rest
+          };
         };
 
-        _this.buttonHandleKeyUp = function (event) {
+        this.buttonHandleKeyUp = event => {
           // Prevent click event from emitting in Firefox
           event.preventDefault();
         };
 
-        _this.buttonHandleKeyDown = function (event) {
-          var key = normalizeArrowKey(event);
+        this.buttonHandleKeyDown = event => {
+          const key = normalizeArrowKey(event);
 
-          if (_this.buttonKeyDownHandlers[key]) {
-            _this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
+          if (this.buttonKeyDownHandlers[key]) {
+            this.buttonKeyDownHandlers[key].call(this, event);
           }
         };
 
-        _this.buttonHandleClick = function (event) {
+        this.buttonHandleClick = event => {
           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) {
+          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
           // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
@@ -1273,64 +1213,66 @@
 
           {
             // Ensure that toggle of menu occurs after the potential blur event in iOS
-            _this.internalSetTimeout(function () {
-              return _this.toggleMenu({
-                type: clickButton
-              });
-            });
+            this.internalSetTimeout(() => this.toggleMenu({
+              type: clickButton
+            }));
           }
         };
 
-        _this.buttonHandleBlur = function (event) {
-          var blurTarget = event.target; // Save blur target for comparison with activeElement later
+        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(function () {
-            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)
+          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)
             ) {
-              _this.reset({
+              this.reset({
                 type: blurButton
               });
             }
           });
         };
 
-        _this.getLabelProps = function (props) {
-          return _extends({
-            htmlFor: _this.inputId,
-            id: _this.labelId
-          }, props);
+        this.getLabelProps = props => {
+          return {
+            htmlFor: this.inputId,
+            id: this.labelId,
+            ...props
+          };
         };
 
-        _this.getInputProps = function (_temp4) {
-          var _ref4 = _temp4 === void 0 ? {} : _temp4,
-              onKeyDown = _ref4.onKeyDown,
-              onBlur = _ref4.onBlur,
-              onChange = _ref4.onChange,
-              onInput = _ref4.onInput;
-              _ref4.onChangeText;
-              var rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
-
-          var onChangeKey;
-          var eventHandlers = {};
+        this.getInputProps = function (_temp4) {
+          let {
+            onKeyDown,
+            onBlur,
+            onChange,
+            onInput,
+            onChangeText,
+            ...rest
+          } = _temp4 === void 0 ? {} : _temp4;
+          let onChangeKey;
+          let eventHandlers = {};
           /* istanbul ignore next (preact) */
 
           {
             onChangeKey = 'onInput';
           }
 
-          var _this$getState6 = _this.getState(),
-              inputValue = _this$getState6.inputValue,
-              isOpen = _this$getState6.isOpen,
-              highlightedIndex = _this$getState6.highlightedIndex;
+          const {
+            inputValue,
+            isOpen,
+            highlightedIndex
+          } = _this.getState();
 
           if (!rest.disabled) {
-            var _eventHandlers;
-
-            eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
+            eventHandlers = {
+              [onChangeKey]: callAllEventHandlers(onChange, onInput, _this.inputHandleChange),
+              onKeyDown: callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown),
+              onBlur: callAllEventHandlers(onBlur, _this.inputHandleBlur)
+            };
           }
 
-          return _extends({
+          return {
             'aria-autocomplete': 'list',
             'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
             'aria-controls': isOpen ? _this.menuId : null,
@@ -1339,75 +1281,77 @@
             // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
             autoComplete: 'off',
             value: inputValue,
-            id: _this.inputId
-          }, eventHandlers, rest);
+            id: _this.inputId,
+            ...eventHandlers,
+            ...rest
+          };
         };
 
-        _this.inputHandleKeyDown = function (event) {
-          var key = normalizeArrowKey(event);
+        this.inputHandleKeyDown = event => {
+          const key = normalizeArrowKey(event);
 
-          if (key && _this.inputKeyDownHandlers[key]) {
-            _this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
+          if (key && this.inputKeyDownHandlers[key]) {
+            this.inputKeyDownHandlers[key].call(this, event);
           }
         };
 
-        _this.inputHandleChange = function (event) {
-          _this.internalSetState({
+        this.inputHandleChange = event => {
+          this.internalSetState({
             type: changeInput,
             isOpen: true,
             inputValue: event.target.value,
-            highlightedIndex: _this.props.defaultHighlightedIndex
+            highlightedIndex: this.props.defaultHighlightedIndex
           });
         };
 
-        _this.inputHandleBlur = function () {
+        this.inputHandleBlur = () => {
           // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
-          _this.internalSetTimeout(function () {
-            var 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);
+          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({
+            if (!this.isMouseDown && !downshiftButtonIsActive) {
+              this.reset({
                 type: blurInput
               });
             }
           });
         };
 
-        _this.menuRef = function (node) {
-          _this._menuNode = node;
+        this.menuRef = node => {
+          this._menuNode = node;
         };
 
-        _this.getMenuProps = function (_temp5, _temp6) {
-          var _extends3;
-
-          var _ref5 = _temp5 === void 0 ? {} : _temp5,
-              _ref5$refKey = _ref5.refKey,
-              refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
-              ref = _ref5.ref,
-              props = _objectWithoutPropertiesLoose(_ref5, _excluded4$1);
-
-          var _ref6 = _temp6 === void 0 ? {} : _temp6,
-              _ref6$suppressRefErro = _ref6.suppressRefError,
-              suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
-
+        this.getMenuProps = function (_temp5, _temp6) {
+          let {
+            refKey = 'ref',
+            ref,
+            ...props
+          } = _temp5 === void 0 ? {} : _temp5;
+          let {
+            suppressRefError = false
+          } = _temp6 === void 0 ? {} : _temp6;
           _this.getMenuProps.called = true;
           _this.getMenuProps.refKey = refKey;
           _this.getMenuProps.suppressRefError = suppressRefError;
-          return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
+          return {
+            [refKey]: handleRefs(ref, _this.menuRef),
+            role: 'listbox',
+            'aria-labelledby': props && props['aria-label'] ? null : _this.labelId,
+            id: _this.menuId,
+            ...props
+          };
         };
 
-        _this.getItemProps = function (_temp7) {
-          var _enabledEventHandlers;
-
-          var _ref7 = _temp7 === void 0 ? {} : _temp7,
-              onMouseMove = _ref7.onMouseMove,
-              onMouseDown = _ref7.onMouseDown,
-              onClick = _ref7.onClick;
-              _ref7.onPress;
-              var index = _ref7.index,
-              _ref7$item = _ref7.item,
-              item = _ref7$item === void 0 ? requiredProp('getItemProps', 'item') : _ref7$item,
-              rest = _objectWithoutPropertiesLoose(_ref7, _excluded5$1);
+        this.getItemProps = function (_temp7) {
+          let {
+            onMouseMove,
+            onMouseDown,
+            onClick,
+            onPress,
+            index,
+            item = requiredProp('getItemProps', 'item'),
+            ...rest
+          } = _temp7 === void 0 ? {} : _temp7;
 
           if (index === undefined) {
             _this.items.push(item);
@@ -1417,13 +1361,13 @@
             _this.items[index] = item;
           }
 
-          var onSelectKey = 'onClick';
-          var customClickHandler = onClick;
-          var enabledEventHandlers = (_enabledEventHandlers = {
+          const onSelectKey = 'onClick';
+          const customClickHandler = onClick;
+          const enabledEventHandlers = {
             // onMouseMove is used over onMouseEnter here. onMouseMove
             // is only triggered on actual mouse movement while onMouseEnter
             // can fire on DOM changes, interrupting keyboard navigation
-            onMouseMove: callAllEventHandlers(onMouseMove, function () {
+            onMouseMove: callAllEventHandlers(onMouseMove, () => {
               if (index === _this.getState().highlightedIndex) {
                 return;
               }
@@ -1438,72 +1382,81 @@
 
               _this.avoidScrolling = true;
 
-              _this.internalSetTimeout(function () {
-                return _this.avoidScrolling = false;
-              }, 250);
+              _this.internalSetTimeout(() => _this.avoidScrolling = false, 250);
             }),
-            onMouseDown: callAllEventHandlers(onMouseDown, function (event) {
+            onMouseDown: callAllEventHandlers(onMouseDown, event => {
               // This prevents the activeElement from being changed
               // to the item so it can remain with the current activeElement
               // which is a more common use case.
               event.preventDefault();
+            }),
+            [onSelectKey]: callAllEventHandlers(customClickHandler, () => {
+              _this.selectItemAtIndex(index, {
+                type: clickItem
+              });
             })
-          }, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () {
-            _this.selectItemAtIndex(index, {
-              type: clickItem
-            });
-          }), _enabledEventHandlers); // Passing down the onMouseDown handler to prevent redirect
+          }; // Passing down the onMouseDown handler to prevent redirect
           // of the activeElement if clicking on disabled items
 
-          var eventHandlers = rest.disabled ? {
+          const eventHandlers = rest.disabled ? {
             onMouseDown: enabledEventHandlers.onMouseDown
           } : enabledEventHandlers;
-          return _extends({
+          return {
             id: _this.getItemId(index),
             role: 'option',
-            'aria-selected': _this.getState().highlightedIndex === index
-          }, eventHandlers, rest);
+            'aria-selected': _this.getState().highlightedIndex === index,
+            ...eventHandlers,
+            ...rest
+          };
         };
 
-        _this.clearItems = function () {
-          _this.items = [];
+        this.clearItems = () => {
+          this.items = [];
         };
 
-        _this.reset = function (otherStateToSet, cb) {
+        this.reset = function (otherStateToSet, cb) {
           if (otherStateToSet === void 0) {
             otherStateToSet = {};
           }
 
           otherStateToSet = pickState(otherStateToSet);
 
-          _this.internalSetState(function (_ref8) {
-            var selectedItem = _ref8.selectedItem;
-            return _extends({
+          _this.internalSetState(_ref => {
+            let {
+              selectedItem
+            } = _ref;
+            return {
               isOpen: _this.props.defaultIsOpen,
               highlightedIndex: _this.props.defaultHighlightedIndex,
-              inputValue: _this.props.itemToString(selectedItem)
-            }, otherStateToSet);
+              inputValue: _this.props.itemToString(selectedItem),
+              ...otherStateToSet
+            };
           }, cb);
         };
 
-        _this.toggleMenu = function (otherStateToSet, cb) {
+        this.toggleMenu = function (otherStateToSet, cb) {
           if (otherStateToSet === void 0) {
             otherStateToSet = {};
           }
 
           otherStateToSet = pickState(otherStateToSet);
 
-          _this.internalSetState(function (_ref9) {
-            var isOpen = _ref9.isOpen;
-            return _extends({
-              isOpen: !isOpen
-            }, isOpen && {
-              highlightedIndex: _this.props.defaultHighlightedIndex
-            }, otherStateToSet);
-          }, function () {
-            var _this$getState7 = _this.getState(),
-                isOpen = _this$getState7.isOpen,
-                highlightedIndex = _this$getState7.highlightedIndex;
+          _this.internalSetState(_ref2 => {
+            let {
+              isOpen
+            } = _ref2;
+            return {
+              isOpen: !isOpen,
+              ...(isOpen && {
+                highlightedIndex: _this.props.defaultHighlightedIndex
+              }),
+              ...otherStateToSet
+            };
+          }, () => {
+            const {
+              isOpen,
+              highlightedIndex
+            } = _this.getState();
 
             if (isOpen) {
               if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') {
@@ -1515,70 +1468,63 @@
           });
         };
 
-        _this.openMenu = function (cb) {
-          _this.internalSetState({
+        this.openMenu = cb => {
+          this.internalSetState({
             isOpen: true
           }, cb);
         };
 
-        _this.closeMenu = function (cb) {
-          _this.internalSetState({
+        this.closeMenu = cb => {
+          this.internalSetState({
             isOpen: false
           }, cb);
         };
 
-        _this.updateStatus = debounce(function () {
-          var state = _this.getState();
-
-          var item = _this.items[state.highlightedIndex];
-
-          var resultCount = _this.getItemCount();
-
-          var status = _this.props.getA11yStatusMessage(_extends({
-            itemToString: _this.props.itemToString,
-            previousResultCount: _this.previousResultCount,
-            resultCount: resultCount,
-            highlightedItem: item
-          }, state));
-
-          _this.previousResultCount = resultCount;
-          setStatus(status, _this.props.environment.document);
+        this.updateStatus = debounce(() => {
+          const state = this.getState();
+          const item = this.items[state.highlightedIndex];
+          const resultCount = this.getItemCount();
+          const status = this.props.getA11yStatusMessage({
+            itemToString: this.props.itemToString,
+            previousResultCount: this.previousResultCount,
+            resultCount,
+            highlightedItem: item,
+            ...state
+          });
+          this.previousResultCount = resultCount;
+          setStatus(status, this.props.environment.document);
         }, 200);
-
-        var _this$props = _this.props,
-            defaultHighlightedIndex = _this$props.defaultHighlightedIndex,
-            _this$props$initialHi = _this$props.initialHighlightedIndex,
-            _highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi,
-            defaultIsOpen = _this$props.defaultIsOpen,
-            _this$props$initialIs = _this$props.initialIsOpen,
-            _isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs,
-            _this$props$initialIn = _this$props.initialInputValue,
-            _inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn,
-            _this$props$initialSe = _this$props.initialSelectedItem,
-            _selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe;
-
-        var _state = _this.getState({
+        // fancy destructuring + defaults + aliases
+        // this basically says each value of state should either be set to
+        // the initial value or the default value if the initial value is not provided
+        const {
+          defaultHighlightedIndex,
+          initialHighlightedIndex: _highlightedIndex = defaultHighlightedIndex,
+          defaultIsOpen,
+          initialIsOpen: _isOpen = defaultIsOpen,
+          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);
+        if (_state.selectedItem != null && this.props.initialInputValue === undefined) {
+          _state.inputValue = this.props.itemToString(_state.selectedItem);
         }
 
-        _this.state = _state;
-        return _this;
+        this.state = _state;
       }
 
-      var _proto = Downshift.prototype;
-
       /**
        * Clear all running timeouts
        */
-      _proto.internalClearTimeouts = function internalClearTimeouts() {
-        this.timeoutIds.forEach(function (id) {
+      internalClearTimeouts() {
+        this.timeoutIds.forEach(id => {
           clearTimeout(id);
         });
         this.timeoutIds = [];
@@ -1592,22 +1538,22 @@
        * @param {Object} stateToMerge defaults to this.state
        * @return {Object} the state
        */
-      ;
 
-      _proto.getState = function getState$1(stateToMerge) {
+
+      getState(stateToMerge) {
         if (stateToMerge === void 0) {
           stateToMerge = this.state;
         }
 
         return getState(stateToMerge, this.props);
-      };
+      }
 
-      _proto.getItemCount = function getItemCount() {
+      getItemCount() {
         // things read better this way. They're in priority order:
         // 1. `this.itemCount`
         // 2. `this.props.itemCount`
         // 3. `this.items.length`
-        var itemCount = this.items.length;
+        let itemCount = this.items.length;
 
         if (this.itemCount != null) {
           itemCount = this.itemCount;
@@ -1616,102 +1562,102 @@
         }
 
         return itemCount;
-      };
+      }
 
-      _proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
+      getItemNodeFromIndex(index) {
         return this.props.environment.document.getElementById(this.getItemId(index));
-      };
+      }
 
-      _proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
+      scrollHighlightedItemIntoView() {
         /* istanbul ignore else (react-native) */
         {
-          var node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
+          const node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
           this.props.scrollIntoView(node, this._menuNode);
         }
-      };
-
-      _proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
-        var _this6 = this;
-
-        var itemCount = this.getItemCount();
+      }
 
-        var _this$getState8 = this.getState(),
-            highlightedIndex = _this$getState8.highlightedIndex;
+      moveHighlightedIndex(amount, otherStateToSet) {
+        const itemCount = this.getItemCount();
+        const {
+          highlightedIndex
+        } = this.getState();
 
         if (itemCount > 0) {
-          var nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, function (index) {
-            return _this6.getItemNodeFromIndex(index);
-          });
+          const nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, index => this.getItemNodeFromIndex(index));
           this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
         }
-      };
+      }
 
-      _proto.getStateAndHelpers = function getStateAndHelpers() {
-        var _this$getState9 = this.getState(),
-            highlightedIndex = _this$getState9.highlightedIndex,
-            inputValue = _this$getState9.inputValue,
-            selectedItem = _this$getState9.selectedItem,
-            isOpen = _this$getState9.isOpen;
-
-        var itemToString = this.props.itemToString;
-        var id = this.id;
-        var getRootProps = this.getRootProps,
-            getToggleButtonProps = this.getToggleButtonProps,
-            getLabelProps = this.getLabelProps,
-            getMenuProps = this.getMenuProps,
-            getInputProps = this.getInputProps,
-            getItemProps = this.getItemProps,
-            openMenu = this.openMenu,
-            closeMenu = this.closeMenu,
-            toggleMenu = this.toggleMenu,
-            selectItem = this.selectItem,
-            selectItemAtIndex = this.selectItemAtIndex,
-            selectHighlightedItem = this.selectHighlightedItem,
-            setHighlightedIndex = this.setHighlightedIndex,
-            clearSelection = this.clearSelection,
-            clearItems = this.clearItems,
-            reset = this.reset,
-            setItemCount = this.setItemCount,
-            unsetItemCount = this.unsetItemCount,
-            setState = this.internalSetState;
+      getStateAndHelpers() {
+        const {
+          highlightedIndex,
+          inputValue,
+          selectedItem,
+          isOpen
+        } = this.getState();
+        const {
+          itemToString
+        } = this.props;
+        const {
+          id
+        } = this;
+        const {
+          getRootProps,
+          getToggleButtonProps,
+          getLabelProps,
+          getMenuProps,
+          getInputProps,
+          getItemProps,
+          openMenu,
+          closeMenu,
+          toggleMenu,
+          selectItem,
+          selectItemAtIndex,
+          selectHighlightedItem,
+          setHighlightedIndex,
+          clearSelection,
+          clearItems,
+          reset,
+          setItemCount,
+          unsetItemCount,
+          internalSetState: setState
+        } = this;
         return {
           // prop getters
-          getRootProps: getRootProps,
-          getToggleButtonProps: getToggleButtonProps,
-          getLabelProps: getLabelProps,
-          getMenuProps: getMenuProps,
-          getInputProps: getInputProps,
-          getItemProps: getItemProps,
+          getRootProps,
+          getToggleButtonProps,
+          getLabelProps,
+          getMenuProps,
+          getInputProps,
+          getItemProps,
           // actions
-          reset: reset,
-          openMenu: openMenu,
-          closeMenu: closeMenu,
-          toggleMenu: toggleMenu,
-          selectItem: selectItem,
-          selectItemAtIndex: selectItemAtIndex,
-          selectHighlightedItem: selectHighlightedItem,
-          setHighlightedIndex: setHighlightedIndex,
-          clearSelection: clearSelection,
-          clearItems: clearItems,
-          setItemCount: setItemCount,
-          unsetItemCount: unsetItemCount,
-          setState: setState,
+          reset,
+          openMenu,
+          closeMenu,
+          toggleMenu,
+          selectItem,
+          selectItemAtIndex,
+          selectHighlightedItem,
+          setHighlightedIndex,
+          clearSelection,
+          clearItems,
+          setItemCount,
+          unsetItemCount,
+          setState,
           // props
-          itemToString: itemToString,
+          itemToString,
           // derived
-          id: id,
+          id,
           // state
-          highlightedIndex: highlightedIndex,
-          inputValue: inputValue,
-          isOpen: isOpen,
-          selectedItem: selectedItem
+          highlightedIndex,
+          inputValue,
+          isOpen,
+          selectedItem
         };
       } //////////////////////////// ROOT
-      ;
 
-      _proto.componentDidMount = function componentDidMount() {
-        var _this7 = this;
 
+      componentDidMount() {
         /* istanbul ignore if (react-native) */
         if (this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
           validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
@@ -1725,22 +1671,20 @@
           // down long enough for the list to disappear (because the blur event fires on the input)
           // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
           // trigger hiding the menu.
-          var onMouseDown = function onMouseDown() {
-            _this7.isMouseDown = true;
+          const onMouseDown = () => {
+            this.isMouseDown = true;
           };
 
-          var onMouseUp = function onMouseUp(event) {
-            _this7.isMouseDown = false; // if the target element or the activeElement is within a downshift node
+          const onMouseUp = event => {
+            this.isMouseDown = false; // if the target element or the activeElement is within a downshift node
             // then we don't want to reset downshift
 
-            var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment);
+            const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment);
 
-            if (!contextWithinDownshift && _this7.getState().isOpen) {
-              _this7.reset({
+            if (!contextWithinDownshift && this.getState().isOpen) {
+              this.reset({
                 type: mouseUp
-              }, function () {
-                return _this7.props.onOuterClick(_this7.getStateAndHelpers());
-              });
+              }, () => this.props.onOuterClick(this.getStateAndHelpers()));
             }
           }; // 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
@@ -1750,38 +1694,36 @@
           // but not if the user is swiping
 
 
-          var onTouchStart = function onTouchStart() {
-            _this7.isTouchMove = false;
+          const onTouchStart = () => {
+            this.isTouchMove = false;
           };
 
-          var onTouchMove = function onTouchMove() {
-            _this7.isTouchMove = true;
+          const onTouchMove = () => {
+            this.isTouchMove = true;
           };
 
-          var onTouchEnd = function onTouchEnd(event) {
-            var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment, false);
+          const onTouchEnd = event => {
+            const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment, false);
 
-            if (!_this7.isTouchMove && !contextWithinDownshift && _this7.getState().isOpen) {
-              _this7.reset({
+            if (!this.isTouchMove && !contextWithinDownshift && this.getState().isOpen) {
+              this.reset({
                 type: touchEnd
-              }, function () {
-                return _this7.props.onOuterClick(_this7.getStateAndHelpers());
-              });
+              }, () => this.props.onOuterClick(this.getStateAndHelpers()));
             }
           };
 
-          var environment = this.props.environment;
+          const {
+            environment
+          } = this.props;
           environment.addEventListener('mousedown', onMouseDown);
           environment.addEventListener('mouseup', onMouseUp);
           environment.addEventListener('touchstart', onTouchStart);
           environment.addEventListener('touchmove', onTouchMove);
           environment.addEventListener('touchend', onTouchEnd);
 
-          this.cleanup = function () {
-            _this7.internalClearTimeouts();
-
-            _this7.updateStatus.cancel();
-
+          this.cleanup = () => {
+            this.internalClearTimeouts();
+            this.updateStatus.cancel();
             environment.removeEventListener('mousedown', onMouseDown);
             environment.removeEventListener('mouseup', onMouseUp);
             environment.removeEventListener('touchstart', onTouchStart);
@@ -1789,21 +1731,21 @@
             environment.removeEventListener('touchend', onTouchEnd);
           };
         }
-      };
-
-      _proto.shouldScroll = function shouldScroll(prevState, prevProps) {
-        var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
-            currentHighlightedIndex = _ref10.highlightedIndex;
-
-        var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
-            prevHighlightedIndex = _ref11.highlightedIndex;
+      }
 
-        var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
-        var scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
+      shouldScroll(prevState, prevProps) {
+        const {
+          highlightedIndex: currentHighlightedIndex
+        } = this.props.highlightedIndex === undefined ? this.getState() : this.props;
+        const {
+          highlightedIndex: prevHighlightedIndex
+        } = prevProps.highlightedIndex === undefined ? prevState : prevProps;
+        const scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
+        const scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
         return scrollWhenOpen || scrollWhenNavigating;
-      };
+      }
 
-      _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+      componentDidUpdate(prevProps, prevState) {
         {
           validateControlledUnchanged(this.state, prevProps, this.props);
           /* istanbul ignore if (react-native) */
@@ -1829,14 +1771,14 @@
         {
           this.updateStatus();
         }
-      };
+      }
 
-      _proto.componentWillUnmount = function componentWillUnmount() {
+      componentWillUnmount() {
         this.cleanup(); // avoids memory leak
-      };
+      }
 
-      _proto.render = function render() {
-        var children = unwrapArray(this.props.children, noop); // because the items are rerendered every time we call the children
+      render() {
+        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.
 
@@ -1856,7 +1798,7 @@
         this.getLabelProps.called = false; // and something similar for getInputProps
 
         this.getInputProps.called = false;
-        var element = unwrapArray(children(this.getStateAndHelpers()));
+        const element = unwrapArray(children(this.getStateAndHelpers()));
 
         if (!element) {
           return null;
@@ -1881,16 +1823,15 @@
           // 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');
         }
-      };
+      }
 
-      return Downshift;
-    }(preact.Component);
+    }
 
     Downshift.defaultProps = {
       defaultHighlightedIndex: null,
       defaultIsOpen: false,
       getA11yStatusMessage: getA11yStatusMessage$1,
-      itemToString: function itemToString(i) {
+      itemToString: i => {
         if (i == null) {
           return '';
         }
@@ -1908,26 +1849,24 @@
       onChange: noop,
       onSelect: noop,
       onOuterClick: noop,
-      selectedItemChanged: function selectedItemChanged(prevItem, item) {
-        return prevItem !== item;
-      },
+      selectedItemChanged: (prevItem, item) => prevItem !== item,
       environment:
       /* istanbul ignore next (ssr) */
       typeof window === 'undefined' ? {} : window,
-      stateReducer: function stateReducer(state, stateToSet) {
-        return stateToSet;
-      },
+      stateReducer: (state, stateToSet) => stateToSet,
       suppressRefError: false,
-      scrollIntoView: scrollIntoView
+      scrollIntoView
     };
     Downshift.stateChangeTypes = stateChangeTypes$3;
     return Downshift;
-  }();
+  })();
 
   var Downshift$1 = Downshift;
 
-  function validateGetMenuPropsCalledCorrectly(node, _ref12) {
-    var refKey = _ref12.refKey;
+  function validateGetMenuPropsCalledCorrectly(node, _ref3) {
+    let {
+      refKey
+    } = _ref3;
 
     if (!node) {
       // eslint-disable-next-line no-console
@@ -1935,10 +1874,12 @@
     }
   }
 
-  function validateGetRootPropsCalledCorrectly(element, _ref13) {
-    var refKey = _ref13.refKey;
-    var refKeySpecified = refKey !== 'ref';
-    var isComposite = !isDOMElement(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
@@ -1954,8 +1895,7 @@
     }
   }
 
-  var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
-  var dropdownDefaultStateValues = {
+  const dropdownDefaultStateValues = {
     highlightedIndex: -1,
     isOpen: false,
     selectedItem: null,
@@ -1963,10 +1903,12 @@
   };
 
   function callOnChangeProps(action, state, newState) {
-    var props = action.props,
-        type = action.type;
-    var changes = {};
-    Object.keys(state).forEach(function (key) {
+    const {
+      props,
+      type
+    } = action;
+    const changes = {};
+    Object.keys(state).forEach(key => {
       invokeOnChangeHandler(key, action, state, newState);
 
       if (newState[key] !== state[key]) {
@@ -1975,21 +1917,25 @@
     });
 
     if (props.onStateChange && Object.keys(changes).length) {
-      props.onStateChange(_extends({
-        type: type
-      }, changes));
+      props.onStateChange({
+        type,
+        ...changes
+      });
     }
   }
 
   function invokeOnChangeHandler(key, action, state, newState) {
-    var props = action.props,
-        type = action.type;
-    var handler = "on" + capitalizeString(key) + "Change";
+    const {
+      props,
+      type
+    } = action;
+    const handler = "on" + capitalizeString(key) + "Change";
 
     if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
-      props[handler](_extends({
-        type: type
-      }, newState));
+      props[handler]({
+        type,
+        ...newState
+      });
     }
   }
   /**
@@ -2013,8 +1959,10 @@
 
 
   function getA11ySelectionMessage(selectionParameters) {
-    var selectedItem = selectionParameters.selectedItem,
-        itemToStringLocal = selectionParameters.itemToString;
+    const {
+      selectedItem,
+      itemToString: itemToStringLocal
+    } = selectionParameters;
     return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
   }
   /**
@@ -2022,26 +1970,25 @@
    */
 
 
-  var updateA11yStatus = debounce(function (getA11yMessage, document) {
+  const updateA11yStatus = debounce((getA11yMessage, document) => {
     setStatus(getA11yMessage(), document);
   }, 200); // istanbul ignore next
 
-  var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? preact.useLayoutEffect : preact.useEffect;
+  const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? preact.useLayoutEffect : preact.useEffect;
 
   function useElementIds(_ref) {
-    var _ref$id = _ref.id,
-        id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id,
-        labelId = _ref.labelId,
-        menuId = _ref.menuId,
-        getItemId = _ref.getItemId,
-        toggleButtonId = _ref.toggleButtonId,
-        inputId = _ref.inputId;
-    var elementIdsRef = preact.useRef({
+    let {
+      id = "downshift-" + generateId(),
+      labelId,
+      menuId,
+      getItemId,
+      toggleButtonId,
+      inputId
+    } = _ref;
+    const elementIdsRef = preact.useRef({
       labelId: labelId || id + "-label",
       menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
+      getItemId: getItemId || (index => id + "-item-" + index),
       toggleButtonId: toggleButtonId || id + "-toggle-button",
       inputId: inputId || id + "-input"
     });
@@ -2073,7 +2020,7 @@
   }
 
   function useLatestRef(val) {
-    var ref = preact.useRef(val); // technically this is not "concurrent mode safe" because we're manipulating
+    const ref = preact.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.
@@ -2095,30 +2042,25 @@
 
 
   function useEnhancedReducer(reducer, initialState, props) {
-    var prevStateRef = preact.useRef();
-    var actionRef = preact.useRef();
-    var enhancedReducer = preact.useCallback(function (state, action) {
+    const prevStateRef = preact.useRef();
+    const actionRef = preact.useRef();
+    const enhancedReducer = preact.useCallback((state, action) => {
       actionRef.current = action;
       state = getState(state, action.props);
-      var changes = reducer(state, action);
-      var newState = action.props.stateReducer(state, _extends({}, action, {
-        changes: changes
-      }));
+      const changes = reducer(state, action);
+      const newState = action.props.stateReducer(state, { ...action,
+        changes
+      });
       return newState;
     }, [reducer]);
-
-    var _useReducer = preact.useReducer(enhancedReducer, initialState),
-        state = _useReducer[0],
-        dispatch = _useReducer[1];
-
-    var propsRef = useLatestRef(props);
-    var dispatchWithProps = preact.useCallback(function (action) {
-      return dispatch(_extends({
-        props: propsRef.current
-      }, action));
-    }, [propsRef]);
-    var action = actionRef.current;
-    preact.useEffect(function () {
+    const [state, dispatch] = preact.useReducer(enhancedReducer, initialState);
+    const propsRef = useLatestRef(props);
+    const dispatchWithProps = preact.useCallback(action => dispatch({
+      props: propsRef.current,
+      ...action
+    }), [propsRef]);
+    const action = actionRef.current;
+    preact.useEffect(() => {
       if (action && prevStateRef.current && prevStateRef.current !== state) {
         callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
       }
@@ -2139,18 +2081,15 @@
 
 
   function useControlledReducer$1(reducer, initialState, props) {
-    var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
-        state = _useEnhancedReducer[0],
-        dispatch = _useEnhancedReducer[1];
-
+    const [state, dispatch] = useEnhancedReducer(reducer, initialState, props);
     return [getState(state, props), dispatch];
   }
 
-  var defaultProps$3 = {
-    itemToString: itemToString,
-    stateReducer: stateReducer,
-    getA11ySelectionMessage: getA11ySelectionMessage,
-    scrollIntoView: scrollIntoView,
+  const defaultProps$3 = {
+    itemToString,
+    stateReducer,
+    getA11ySelectionMessage,
+    scrollIntoView,
     circularNavigation: false,
     environment:
     /* istanbul ignore next (ssr) */
@@ -2162,10 +2101,10 @@
       defaultStateValues = dropdownDefaultStateValues;
     }
 
-    var defaultPropKey = "default" + capitalizeString(propKey);
+    const defaultValue = props["default" + capitalizeString(propKey)];
 
-    if (defaultPropKey in props) {
-      return props[defaultPropKey];
+    if (defaultValue !== undefined) {
+      return defaultValue;
     }
 
     return defaultStateValues[propKey];
@@ -2176,38 +2115,44 @@
       defaultStateValues = dropdownDefaultStateValues;
     }
 
-    if (propKey in props) {
-      return props[propKey];
+    const value = props[propKey];
+
+    if (value !== undefined) {
+      return value;
     }
 
-    var initialPropKey = "initial" + capitalizeString(propKey);
+    const initialValue = props["initial" + capitalizeString(propKey)];
 
-    if (initialPropKey in props) {
-      return props[initialPropKey];
+    if (initialValue !== undefined) {
+      return initialValue;
     }
 
     return getDefaultValue$1(props, propKey, defaultStateValues);
   }
 
   function getInitialState$2(props) {
-    var selectedItem = getInitialValue$1(props, 'selectedItem');
-    var isOpen = getInitialValue$1(props, 'isOpen');
-    var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
-    var inputValue = getInitialValue$1(props, 'inputValue');
+    const selectedItem = getInitialValue$1(props, 'selectedItem');
+    const isOpen = getInitialValue$1(props, 'isOpen');
+    const highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
+    const inputValue = getInitialValue$1(props, 'inputValue');
     return {
       highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
-      isOpen: isOpen,
-      selectedItem: selectedItem,
-      inputValue: inputValue
+      isOpen,
+      selectedItem,
+      inputValue
     };
   }
 
   function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
-    var items = props.items,
-        initialHighlightedIndex = props.initialHighlightedIndex,
-        defaultHighlightedIndex = props.defaultHighlightedIndex;
-    var selectedItem = state.selectedItem,
-        highlightedIndex = state.highlightedIndex;
+    const {
+      items,
+      initialHighlightedIndex,
+      defaultHighlightedIndex
+    } = props;
+    const {
+      selectedItem,
+      highlightedIndex
+    } = state;
 
     if (items.length === 0) {
       return -1;
@@ -2248,39 +2193,35 @@
 
 
   function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
-    var mouseAndTouchTrackersRef = preact.useRef({
+    const mouseAndTouchTrackersRef = preact.useRef({
       isMouseDown: false,
       isTouchMove: false
     });
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       // The same strategy for checking if a click occurred inside or outside downsift
       // as in downshift.js.
-      var onMouseDown = function onMouseDown() {
+      const onMouseDown = () => {
         mouseAndTouchTrackersRef.current.isMouseDown = true;
       };
 
-      var onMouseUp = function onMouseUp(event) {
+      const onMouseUp = event => {
         mouseAndTouchTrackersRef.current.isMouseDown = false;
 
-        if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-          return ref.current;
-        }), environment)) {
+        if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment)) {
           handleBlur();
         }
       };
 
-      var onTouchStart = function onTouchStart() {
+      const onTouchStart = () => {
         mouseAndTouchTrackersRef.current.isTouchMove = false;
       };
 
-      var onTouchMove = function onTouchMove() {
+      const onTouchMove = () => {
         mouseAndTouchTrackersRef.current.isTouchMove = true;
       };
 
-      var onTouchEnd = function onTouchEnd(event) {
-        if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-          return ref.current;
-        }), environment, false)) {
+      const onTouchEnd = event => {
+        if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment, false)) {
           handleBlur();
         }
       };
@@ -2304,9 +2245,7 @@
   // eslint-disable-next-line import/no-mutable-exports
 
 
-  var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
-    return noop;
-  };
+  let useGetterPropsCalledChecker = () => noop;
   /**
    * Custom hook that checks if getter props are called correctly.
    *
@@ -2318,20 +2257,20 @@
 
 
   {
-    useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
-      var isInitialMountRef = preact.useRef(true);
+    useGetterPropsCalledChecker = function () {
+      const isInitialMountRef = preact.useRef(true);
 
       for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
         propKeys[_key] = arguments[_key];
       }
 
-      var getterPropsCalledRef = preact.useRef(propKeys.reduce(function (acc, propKey) {
+      const getterPropsCalledRef = preact.useRef(propKeys.reduce((acc, propKey) => {
         acc[propKey] = {};
         return acc;
       }, {}));
-      preact.useEffect(function () {
-        Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
-          var propCallInfo = getterPropsCalledRef.current[propKey];
+      preact.useEffect(() => {
+        Object.keys(getterPropsCalledRef.current).forEach(propKey => {
+          const propCallInfo = getterPropsCalledRef.current[propKey];
 
           if (isInitialMountRef.current) {
             if (!Object.keys(propCallInfo).length) {
@@ -2341,9 +2280,11 @@
             }
           }
 
-          var suppressRefError = propCallInfo.suppressRefError,
-              refKey = propCallInfo.refKey,
-              elementRef = propCallInfo.elementRef;
+          const {
+            suppressRefError,
+            refKey,
+            elementRef
+          } = propCallInfo;
 
           if ((!elementRef || !elementRef.current) && !suppressRefError) {
             // eslint-disable-next-line no-console
@@ -2352,11 +2293,11 @@
         });
         isInitialMountRef.current = false;
       });
-      var setGetterPropCallInfo = preact.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
+      const setGetterPropCallInfo = preact.useCallback((propKey, suppressRefError, refKey, elementRef) => {
         getterPropsCalledRef.current[propKey] = {
-          suppressRefError: suppressRefError,
-          refKey: refKey,
-          elementRef: elementRef
+          suppressRefError,
+          refKey,
+          elementRef
         };
       }, []);
       return setGetterPropCallInfo;
@@ -2364,39 +2305,41 @@
   }
 
   function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
-    var isInitialMount = _ref2.isInitialMount,
-        highlightedIndex = _ref2.highlightedIndex,
-        items = _ref2.items,
-        environment = _ref2.environment,
-        rest = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
-
+    let {
+      isInitialMount,
+      highlightedIndex,
+      items,
+      environment,
+      ...rest
+    } = _ref2;
     // Sets a11y status message on changes in state.
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       if (isInitialMount || false) {
         return;
       }
 
-      updateA11yStatus(function () {
-        return getA11yMessage(_extends({
-          highlightedIndex: highlightedIndex,
-          highlightedItem: items[highlightedIndex],
-          resultCount: items.length
-        }, rest));
-      }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
+      updateA11yStatus(() => getA11yMessage({
+        highlightedIndex,
+        highlightedItem: items[highlightedIndex],
+        resultCount: items.length,
+        ...rest
+      }), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
     }, dependencyArray);
   }
 
   function useScrollIntoView(_ref3) {
-    var highlightedIndex = _ref3.highlightedIndex,
-        isOpen = _ref3.isOpen,
-        itemRefs = _ref3.itemRefs,
-        getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
-        menuElement = _ref3.menuElement,
-        scrollIntoViewProp = _ref3.scrollIntoView;
+    let {
+      highlightedIndex,
+      isOpen,
+      itemRefs,
+      getItemNodeFromIndex,
+      menuElement,
+      scrollIntoView: scrollIntoViewProp
+    } = _ref3;
     // used not to scroll on highlight by mouse.
-    var shouldScrollRef = preact.useRef(true); // Scroll on highlighted item if change comes from keyboard.
+    const shouldScrollRef = preact.useRef(true); // Scroll on highlighted item if change comes from keyboard.
 
-    useIsomorphicLayoutEffect(function () {
+    useIsomorphicLayoutEffect(() => {
       if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
         return;
       }
@@ -2412,17 +2355,19 @@
   } // eslint-disable-next-line import/no-mutable-exports
 
 
-  var useControlPropsValidator = noop;
+  let useControlPropsValidator = noop;
   /* istanbul ignore next */
 
   {
-    useControlPropsValidator = function useControlPropsValidator(_ref4) {
-      var isInitialMount = _ref4.isInitialMount,
-          props = _ref4.props,
-          state = _ref4.state;
+    useControlPropsValidator = _ref4 => {
+      let {
+        isInitialMount,
+        props,
+        state
+      } = _ref4;
       // used for checking when props are moving from controlled to uncontrolled.
-      var prevPropsRef = preact.useRef(props);
-      preact.useEffect(function () {
+      const prevPropsRef = preact.useRef(props);
+      preact.useEffect(() => {
         if (isInitialMount) {
           return;
         }
@@ -2436,9 +2381,11 @@
   /* eslint-disable complexity */
 
   function downshiftCommonReducer(state, action, stateChangeTypes) {
-    var type = action.type,
-        props = action.props;
-    var changes;
+    const {
+      type,
+      props
+    } = action;
+    let changes;
 
     switch (type) {
       case stateChangeTypes.ItemMouseMove:
@@ -2499,11 +2446,13 @@
         throw new Error('Reducer called without proper action type.');
     }
 
-    return _extends({}, state, changes);
+    return { ...state,
+      ...changes
+    };
   }
   /* eslint-enable complexity */
 
-  /*! *****************************************************************************
+  /******************************************************************************
   Copyright (c) Microsoft Corporation.
 
   Permission to use, copy, modify, and/or distribute this software for any
@@ -2548,37 +2497,37 @@
       return highlightedIndex;
   }
   var propTypes$2 = {
-      items: PropTypes__default['default'].array.isRequired,
-      itemToString: PropTypes__default['default'].func,
-      getA11yStatusMessage: PropTypes__default['default'].func,
-      getA11ySelectionMessage: PropTypes__default['default'].func,
-      circularNavigation: PropTypes__default['default'].bool,
-      highlightedIndex: PropTypes__default['default'].number,
-      defaultHighlightedIndex: PropTypes__default['default'].number,
-      initialHighlightedIndex: PropTypes__default['default'].number,
-      isOpen: PropTypes__default['default'].bool,
-      defaultIsOpen: PropTypes__default['default'].bool,
-      initialIsOpen: PropTypes__default['default'].bool,
-      selectedItem: PropTypes__default['default'].any,
-      initialSelectedItem: PropTypes__default['default'].any,
-      defaultSelectedItem: PropTypes__default['default'].any,
-      id: PropTypes__default['default'].string,
-      labelId: PropTypes__default['default'].string,
-      menuId: PropTypes__default['default'].string,
-      getItemId: PropTypes__default['default'].func,
-      toggleButtonId: PropTypes__default['default'].string,
-      stateReducer: PropTypes__default['default'].func,
-      onSelectedItemChange: PropTypes__default['default'].func,
-      onHighlightedIndexChange: PropTypes__default['default'].func,
-      onStateChange: PropTypes__default['default'].func,
-      onIsOpenChange: PropTypes__default['default'].func,
-      environment: PropTypes__default['default'].shape({
-          addEventListener: PropTypes__default['default'].func,
-          removeEventListener: PropTypes__default['default'].func,
-          document: PropTypes__default['default'].shape({
-              getElementById: PropTypes__default['default'].func,
-              activeElement: PropTypes__default['default'].any,
-              body: PropTypes__default['default'].any
+      items: PropTypes__default["default"].array.isRequired,
+      itemToString: PropTypes__default["default"].func,
+      getA11yStatusMessage: PropTypes__default["default"].func,
+      getA11ySelectionMessage: PropTypes__default["default"].func,
+      circularNavigation: PropTypes__default["default"].bool,
+      highlightedIndex: PropTypes__default["default"].number,
+      defaultHighlightedIndex: PropTypes__default["default"].number,
+      initialHighlightedIndex: PropTypes__default["default"].number,
+      isOpen: PropTypes__default["default"].bool,
+      defaultIsOpen: PropTypes__default["default"].bool,
+      initialIsOpen: PropTypes__default["default"].bool,
+      selectedItem: PropTypes__default["default"].any,
+      initialSelectedItem: PropTypes__default["default"].any,
+      defaultSelectedItem: PropTypes__default["default"].any,
+      id: PropTypes__default["default"].string,
+      labelId: PropTypes__default["default"].string,
+      menuId: PropTypes__default["default"].string,
+      getItemId: PropTypes__default["default"].func,
+      toggleButtonId: PropTypes__default["default"].string,
+      stateReducer: PropTypes__default["default"].func,
+      onSelectedItemChange: PropTypes__default["default"].func,
+      onHighlightedIndexChange: PropTypes__default["default"].func,
+      onStateChange: PropTypes__default["default"].func,
+      onIsOpenChange: PropTypes__default["default"].func,
+      environment: PropTypes__default["default"].shape({
+          addEventListener: PropTypes__default["default"].func,
+          removeEventListener: PropTypes__default["default"].func,
+          document: PropTypes__default["default"].shape({
+              getElementById: PropTypes__default["default"].func,
+              activeElement: PropTypes__default["default"].any,
+              body: PropTypes__default["default"].any
           })
       })
   };
@@ -2599,7 +2548,7 @@
           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 or Space Bar keys to select.";
+          return "".concat(resultCount, " result").concat(resultCount === 1 ? ' is' : 's are', " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.");
       }
       return '';
   }
@@ -2609,33 +2558,33 @@
   /* istanbul ignore next */
   {
       validatePropTypes$2 = function (options, caller) {
-          PropTypes__default['default'].checkPropTypes(propTypes$2, options, 'prop', caller.name);
+          PropTypes__default["default"].checkPropTypes(propTypes$2, options, 'prop', caller.name);
       };
   }
 
-  var MenuKeyDownArrowDown = '__menu_keydown_arrow_down__' ;
-  var MenuKeyDownArrowUp = '__menu_keydown_arrow_up__' ;
-  var MenuKeyDownEscape = '__menu_keydown_escape__' ;
-  var MenuKeyDownHome = '__menu_keydown_home__' ;
-  var MenuKeyDownEnd = '__menu_keydown_end__' ;
-  var MenuKeyDownEnter = '__menu_keydown_enter__' ;
-  var MenuKeyDownSpaceButton = '__menu_keydown_space_button__' ;
-  var MenuKeyDownCharacter = '__menu_keydown_character__' ;
-  var MenuBlur = '__menu_blur__' ;
-  var MenuMouseLeave$1 = '__menu_mouse_leave__' ;
-  var ItemMouseMove$1 = '__item_mouse_move__' ;
-  var ItemClick$1 = '__item_click__' ;
-  var ToggleButtonClick$1 = '__togglebutton_click__' ;
-  var ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__' ;
-  var ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__' ;
-  var ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__' ;
-  var FunctionToggleMenu$1 = '__function_toggle_menu__' ;
-  var FunctionOpenMenu$1 = '__function_open_menu__' ;
-  var FunctionCloseMenu$1 = '__function_close_menu__' ;
-  var FunctionSetHighlightedIndex$1 = '__function_set_highlighted_index__' ;
-  var FunctionSelectItem$1 = '__function_select_item__' ;
-  var FunctionSetInputValue$1 = '__function_set_input_value__' ;
-  var FunctionReset$2 = '__function_reset__' ;
+  const MenuKeyDownArrowDown = '__menu_keydown_arrow_down__' ;
+  const MenuKeyDownArrowUp = '__menu_keydown_arrow_up__' ;
+  const MenuKeyDownEscape = '__menu_keydown_escape__' ;
+  const MenuKeyDownHome = '__menu_keydown_home__' ;
+  const MenuKeyDownEnd = '__menu_keydown_end__' ;
+  const MenuKeyDownEnter = '__menu_keydown_enter__' ;
+  const MenuKeyDownSpaceButton = '__menu_keydown_space_button__' ;
+  const MenuKeyDownCharacter = '__menu_keydown_character__' ;
+  const MenuBlur = '__menu_blur__' ;
+  const MenuMouseLeave$1 = '__menu_mouse_leave__' ;
+  const ItemMouseMove$1 = '__item_mouse_move__' ;
+  const ItemClick$1 = '__item_click__' ;
+  const ToggleButtonClick$1 = '__togglebutton_click__' ;
+  const ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__' ;
+  const ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__' ;
+  const ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__' ;
+  const FunctionToggleMenu$1 = '__function_toggle_menu__' ;
+  const FunctionOpenMenu$1 = '__function_open_menu__' ;
+  const FunctionCloseMenu$1 = '__function_close_menu__' ;
+  const FunctionSetHighlightedIndex$1 = '__function_set_highlighted_index__' ;
+  const FunctionSelectItem$1 = '__function_select_item__' ;
+  const FunctionSetInputValue$1 = '__function_set_input_value__' ;
+  const FunctionReset$2 = '__function_reset__' ;
 
   var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -2667,10 +2616,12 @@
   /* eslint-disable complexity */
 
   function downshiftSelectReducer(state, action) {
-    var type = action.type,
-        props = action.props,
-        shiftKey = action.shiftKey;
-    var changes;
+    const {
+      type,
+      props,
+      shiftKey
+    } = action;
+    let changes;
 
     switch (type) {
       case ItemClick$1:
@@ -2683,20 +2634,21 @@
 
       case ToggleButtonKeyDownCharacter:
         {
-          var lowercasedKey = action.key;
-          var inputValue = "" + state.inputValue + lowercasedKey;
-          var itemIndex = getItemIndexByCharacterKey({
+          const lowercasedKey = action.key;
+          const inputValue = "" + state.inputValue + lowercasedKey;
+          const itemIndex = getItemIndexByCharacterKey({
             keysSoFar: inputValue,
             highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1,
             items: props.items,
             itemToString: props.itemToString,
             getItemNodeFromIndex: action.getItemNodeFromIndex
           });
-          changes = _extends({
-            inputValue: inputValue
-          }, itemIndex >= 0 && {
-            selectedItem: props.items[itemIndex]
-          });
+          changes = {
+            inputValue,
+            ...(itemIndex >= 0 && {
+              selectedItem: props.items[itemIndex]
+            })
+          };
         }
         break;
 
@@ -2716,12 +2668,13 @@
 
       case MenuKeyDownEnter:
       case MenuKeyDownSpaceButton:
-        changes = _extends({
+        changes = {
           isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex]
-        });
+          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+          ...(state.highlightedIndex >= 0 && {
+            selectedItem: props.items[state.highlightedIndex]
+          })
+        };
         break;
 
       case MenuKeyDownHome:
@@ -2752,22 +2705,21 @@
 
       case MenuKeyDownCharacter:
         {
-          var _lowercasedKey = action.key;
-
-          var _inputValue = "" + state.inputValue + _lowercasedKey;
-
-          var highlightedIndex = getItemIndexByCharacterKey({
-            keysSoFar: _inputValue,
+          const lowercasedKey = action.key;
+          const inputValue = "" + state.inputValue + lowercasedKey;
+          const highlightedIndex = getItemIndexByCharacterKey({
+            keysSoFar: inputValue,
             highlightedIndex: state.highlightedIndex,
             items: props.items,
             itemToString: props.itemToString,
             getItemNodeFromIndex: action.getItemNodeFromIndex
           });
-          changes = _extends({
-            inputValue: _inputValue
-          }, highlightedIndex >= 0 && {
-            highlightedIndex: highlightedIndex
-          });
+          changes = {
+            inputValue,
+            ...(highlightedIndex >= 0 && {
+              highlightedIndex
+            })
+          };
         }
         break;
 
@@ -2793,13 +2745,13 @@
         return downshiftCommonReducer(state, action, stateChangeTypes$2);
     }
 
-    return _extends({}, state, changes);
+    return { ...state,
+      ...changes
+    };
   }
   /* eslint-enable complexity */
 
-  var _excluded$2 = ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"],
-      _excluded2$2 = ["onClick", "onKeyDown", "refKey", "ref"],
-      _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "refKey", "ref"];
+  /* eslint-disable max-statements */
   useSelect.stateChangeTypes = stateChangeTypes$2;
 
   function useSelect(userProps) {
@@ -2809,91 +2761,92 @@
 
     validatePropTypes$2(userProps, useSelect); // Props defaults and destructuring.
 
-    var props = _extends({}, defaultProps$2, userProps);
-
-    var items = props.items,
-        scrollIntoView = props.scrollIntoView,
-        environment = props.environment,
-        initialIsOpen = props.initialIsOpen,
-        defaultIsOpen = props.defaultIsOpen,
-        itemToString = props.itemToString,
-        getA11ySelectionMessage = props.getA11ySelectionMessage,
-        getA11yStatusMessage = props.getA11yStatusMessage; // Initial state depending on controlled props.
-
-    var initialState = getInitialState$2(props);
-
-    var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, initialState, props),
-        state = _useControlledReducer[0],
-        dispatch = _useControlledReducer[1];
-
-    var isOpen = state.isOpen,
-        highlightedIndex = state.highlightedIndex,
-        selectedItem = state.selectedItem,
-        inputValue = state.inputValue; // Element efs.
-
-    var toggleButtonRef = preact.useRef(null);
-    var menuRef = preact.useRef(null);
-    var itemRefs = preact.useRef({}); // used not to trigger menu blur action in some scenarios.
-
-    var shouldBlurRef = preact.useRef(true); // used to keep the inputValue clearTimeout object between renders.
-
-    var clearTimeoutRef = preact.useRef(null); // prevent id re-generation between renders.
-
-    var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
-
-    var previousResultCountRef = preact.useRef();
-    var isInitialMountRef = preact.useRef(true); // utility callback to get item element.
-
-    var latest = useLatestRef({
-      state: state,
-      props: props
+    const props = { ...defaultProps$2,
+      ...userProps
+    };
+    const {
+      items,
+      scrollIntoView,
+      environment,
+      initialIsOpen,
+      defaultIsOpen,
+      itemToString,
+      getA11ySelectionMessage,
+      getA11yStatusMessage
+    } = props; // Initial state depending on controlled props.
+
+    const initialState = getInitialState$2(props);
+    const [state, dispatch] = useControlledReducer$1(downshiftSelectReducer, initialState, props);
+    const {
+      isOpen,
+      highlightedIndex,
+      selectedItem,
+      inputValue
+    } = state; // Element efs.
+
+    const toggleButtonRef = preact.useRef(null);
+    const menuRef = preact.useRef(null);
+    const itemRefs = preact.useRef({}); // used not to trigger menu blur action in some scenarios.
+
+    const shouldBlurRef = preact.useRef(true); // used to keep the inputValue clearTimeout object between renders.
+
+    const clearTimeoutRef = preact.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 = preact.useRef();
+    const isInitialMountRef = preact.useRef(true); // utility callback to get item element.
+
+    const latest = useLatestRef({
+      state,
+      props
     }); // Some utils.
 
-    var getItemNodeFromIndex = preact.useCallback(function (index) {
-      return itemRefs.current[elementIds.getItemId(index)];
-    }, [elementIds]); // Effects.
+    const getItemNodeFromIndex = preact.useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
     // Sets a11y status message on changes in state.
 
-    useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
+    useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
       isInitialMount: isInitialMountRef.current,
       previousResultCount: previousResultCountRef.current,
-      items: items,
-      environment: environment,
-      itemToString: itemToString
-    }, state)); // Sets a11y status message on changes in selectedItem.
+      items,
+      environment,
+      itemToString,
+      ...state
+    }); // Sets a11y status message on changes in selectedItem.
 
-    useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
+    useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
       isInitialMount: isInitialMountRef.current,
       previousResultCount: previousResultCountRef.current,
-      items: items,
-      environment: environment,
-      itemToString: itemToString
-    }, state)); // Scroll on highlighted item if change comes from keyboard.
+      items,
+      environment,
+      itemToString,
+      ...state
+    }); // Scroll on highlighted item if change comes from keyboard.
 
-    var shouldScrollRef = useScrollIntoView({
+    const shouldScrollRef = useScrollIntoView({
       menuElement: menuRef.current,
-      highlightedIndex: highlightedIndex,
-      isOpen: isOpen,
-      itemRefs: itemRefs,
-      scrollIntoView: scrollIntoView,
-      getItemNodeFromIndex: getItemNodeFromIndex
+      highlightedIndex,
+      isOpen,
+      itemRefs,
+      scrollIntoView,
+      getItemNodeFromIndex
     }); // Sets cleanup for the keysSoFar callback, debounded after 500ms.
 
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       // init the clean function here as we need access to dispatch.
-      clearTimeoutRef.current = debounce(function (outerDispatch) {
+      clearTimeoutRef.current = debounce(outerDispatch => {
         outerDispatch({
           type: FunctionSetInputValue$1,
           inputValue: ''
         });
       }, 500); // Cancel any pending debounced calls on mount
 
-      return function () {
+      return () => {
         clearTimeoutRef.current.cancel();
       };
     }, []); // Invokes the keysSoFar callback set up above.
 
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       if (!inputValue) {
         return;
       }
@@ -2902,12 +2855,12 @@
     }, [dispatch, inputValue]);
     useControlPropsValidator({
       isInitialMount: isInitialMountRef.current,
-      props: props,
-      state: state
+      props,
+      state
     });
     /* Controls the focus on the menu or the toggle button. */
 
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       // Don't focus menu on first render.
       if (isInitialMountRef.current) {
         // Unless it was initialised as open.
@@ -2938,7 +2891,7 @@
       } // eslint-disable-next-line react-hooks/exhaustive-deps
 
     }, [isOpen]);
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       if (isInitialMountRef.current) {
         return;
       }
@@ -2946,180 +2899,180 @@
       previousResultCountRef.current = items.length;
     }); // Add mouse/touch events to document.
 
-    var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
+    const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, () => {
       dispatch({
         type: MenuBlur
       });
     });
-    var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.
+    const setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.
 
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       isInitialMountRef.current = false;
     }, []); // Reset itemRefs on close.
 
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       if (!isOpen) {
         itemRefs.current = {};
       }
     }, [isOpen]); // Event handler functions.
 
-    var toggleButtonKeyDownHandlers = preact.useMemo(function () {
-      return {
-        ArrowDown: function ArrowDown(event) {
-          event.preventDefault();
-          dispatch({
-            type: ToggleButtonKeyDownArrowDown,
-            getItemNodeFromIndex: getItemNodeFromIndex,
-            shiftKey: event.shiftKey
-          });
-        },
-        ArrowUp: function ArrowUp(event) {
-          event.preventDefault();
-          dispatch({
-            type: ToggleButtonKeyDownArrowUp,
-            getItemNodeFromIndex: getItemNodeFromIndex,
-            shiftKey: event.shiftKey
-          });
-        }
-      };
-    }, [dispatch, getItemNodeFromIndex]);
-    var menuKeyDownHandlers = preact.useMemo(function () {
-      return {
-        ArrowDown: function ArrowDown(event) {
-          event.preventDefault();
-          dispatch({
-            type: MenuKeyDownArrowDown,
-            getItemNodeFromIndex: getItemNodeFromIndex,
-            shiftKey: event.shiftKey
-          });
-        },
-        ArrowUp: function ArrowUp(event) {
-          event.preventDefault();
-          dispatch({
-            type: MenuKeyDownArrowUp,
-            getItemNodeFromIndex: getItemNodeFromIndex,
-            shiftKey: event.shiftKey
-          });
-        },
-        Home: function Home(event) {
-          event.preventDefault();
-          dispatch({
-            type: MenuKeyDownHome,
-            getItemNodeFromIndex: getItemNodeFromIndex
-          });
-        },
-        End: function End(event) {
-          event.preventDefault();
-          dispatch({
-            type: MenuKeyDownEnd,
-            getItemNodeFromIndex: getItemNodeFromIndex
-          });
-        },
-        Escape: function Escape() {
-          dispatch({
-            type: MenuKeyDownEscape
-          });
-        },
-        Enter: function Enter(event) {
-          event.preventDefault();
-          dispatch({
-            type: MenuKeyDownEnter
-          });
-        },
-        ' ': function _(event) {
-          event.preventDefault();
-          dispatch({
-            type: MenuKeyDownSpaceButton
-          });
-        }
-      };
-    }, [dispatch, getItemNodeFromIndex]); // Action functions.
+    const toggleButtonKeyDownHandlers = preact.useMemo(() => ({
+      ArrowDown(event) {
+        event.preventDefault();
+        dispatch({
+          type: ToggleButtonKeyDownArrowDown,
+          getItemNodeFromIndex,
+          shiftKey: event.shiftKey
+        });
+      },
+
+      ArrowUp(event) {
+        event.preventDefault();
+        dispatch({
+          type: ToggleButtonKeyDownArrowUp,
+          getItemNodeFromIndex,
+          shiftKey: event.shiftKey
+        });
+      }
+
+    }), [dispatch, getItemNodeFromIndex]);
+    const menuKeyDownHandlers = preact.useMemo(() => ({
+      ArrowDown(event) {
+        event.preventDefault();
+        dispatch({
+          type: MenuKeyDownArrowDown,
+          getItemNodeFromIndex,
+          shiftKey: event.shiftKey
+        });
+      },
+
+      ArrowUp(event) {
+        event.preventDefault();
+        dispatch({
+          type: MenuKeyDownArrowUp,
+          getItemNodeFromIndex,
+          shiftKey: event.shiftKey
+        });
+      },
+
+      Home(event) {
+        event.preventDefault();
+        dispatch({
+          type: MenuKeyDownHome,
+          getItemNodeFromIndex
+        });
+      },
 
-    var toggleMenu = preact.useCallback(function () {
+      End(event) {
+        event.preventDefault();
+        dispatch({
+          type: MenuKeyDownEnd,
+          getItemNodeFromIndex
+        });
+      },
+
+      Escape() {
+        dispatch({
+          type: MenuKeyDownEscape
+        });
+      },
+
+      Enter(event) {
+        event.preventDefault();
+        dispatch({
+          type: MenuKeyDownEnter
+        });
+      },
+
+      ' '(event) {
+        event.preventDefault();
+        dispatch({
+          type: MenuKeyDownSpaceButton
+        });
+      }
+
+    }), [dispatch, getItemNodeFromIndex]); // Action functions.
+
+    const toggleMenu = preact.useCallback(() => {
       dispatch({
         type: FunctionToggleMenu$1
       });
     }, [dispatch]);
-    var closeMenu = preact.useCallback(function () {
+    const closeMenu = preact.useCallback(() => {
       dispatch({
         type: FunctionCloseMenu$1
       });
     }, [dispatch]);
-    var openMenu = preact.useCallback(function () {
+    const openMenu = preact.useCallback(() => {
       dispatch({
         type: FunctionOpenMenu$1
       });
     }, [dispatch]);
-    var setHighlightedIndex = preact.useCallback(function (newHighlightedIndex) {
+    const setHighlightedIndex = preact.useCallback(newHighlightedIndex => {
       dispatch({
         type: FunctionSetHighlightedIndex$1,
         highlightedIndex: newHighlightedIndex
       });
     }, [dispatch]);
-    var selectItem = preact.useCallback(function (newSelectedItem) {
+    const selectItem = preact.useCallback(newSelectedItem => {
       dispatch({
         type: FunctionSelectItem$1,
         selectedItem: newSelectedItem
       });
     }, [dispatch]);
-    var reset = preact.useCallback(function () {
+    const reset = preact.useCallback(() => {
       dispatch({
         type: FunctionReset$2
       });
     }, [dispatch]);
-    var setInputValue = preact.useCallback(function (newInputValue) {
+    const setInputValue = preact.useCallback(newInputValue => {
       dispatch({
         type: FunctionSetInputValue$1,
         inputValue: newInputValue
       });
     }, [dispatch]); // Getter functions.
 
-    var getLabelProps = preact.useCallback(function (labelProps) {
-      return _extends({
-        id: elementIds.labelId,
-        htmlFor: elementIds.toggleButtonId
-      }, labelProps);
-    }, [elementIds]);
-    var getMenuProps = preact.useCallback(function (_temp, _temp2) {
-      var _extends2;
-
-      var _ref = _temp === void 0 ? {} : _temp,
-          onMouseLeave = _ref.onMouseLeave,
-          _ref$refKey = _ref.refKey,
-          refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
-          onKeyDown = _ref.onKeyDown,
-          onBlur = _ref.onBlur,
-          ref = _ref.ref,
-          rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
-      var _ref2 = _temp2 === void 0 ? {} : _temp2,
-          _ref2$suppressRefErro = _ref2.suppressRefError,
-          suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
-
-      var latestState = latest.current.state;
-
-      var menuHandleKeyDown = function menuHandleKeyDown(event) {
-        var key = normalizeArrowKey(event);
+    const getLabelProps = preact.useCallback(labelProps => ({
+      id: elementIds.labelId,
+      htmlFor: elementIds.toggleButtonId,
+      ...labelProps
+    }), [elementIds]);
+    const getMenuProps = preact.useCallback(function (_temp, _temp2) {
+      let {
+        onMouseLeave,
+        refKey = 'ref',
+        onKeyDown,
+        onBlur,
+        ref,
+        ...rest
+      } = _temp === void 0 ? {} : _temp;
+      let {
+        suppressRefError = false
+      } = _temp2 === void 0 ? {} : _temp2;
+      const latestState = latest.current.state;
+
+      const menuHandleKeyDown = event => {
+        const key = normalizeArrowKey(event);
 
         if (key && menuKeyDownHandlers[key]) {
           menuKeyDownHandlers[key](event);
         } else if (isAcceptedCharacterKey(key)) {
           dispatch({
             type: MenuKeyDownCharacter,
-            key: key,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            key,
+            getItemNodeFromIndex
           });
         }
       };
 
-      var menuHandleBlur = function menuHandleBlur() {
+      const menuHandleBlur = () => {
         // if the blur was a result of selection, we don't trigger this action.
         if (shouldBlurRef.current === false) {
           shouldBlurRef.current = true;
           return;
         }
 
-        var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
+        const shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
         /* istanbul ignore else */
 
         if (shouldBlur) {
@@ -3129,61 +3082,72 @@
         }
       };
 
-      var menuHandleMouseLeave = function menuHandleMouseLeave() {
+      const menuHandleMouseLeave = () => {
         dispatch({
           type: MenuMouseLeave$1
         });
       };
 
       setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
-      return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
-        menuRef.current = menuNode;
-      }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.tabIndex = -1, _extends2), latestState.isOpen && latestState.highlightedIndex > -1 && {
-        'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
-      }, {
+      return {
+        [refKey]: handleRefs(ref, menuNode => {
+          menuRef.current = menuNode;
+        }),
+        id: elementIds.menuId,
+        role: 'listbox',
+        'aria-labelledby': elementIds.labelId,
+        tabIndex: -1,
+        ...(latestState.isOpen && latestState.highlightedIndex > -1 && {
+          'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
+        }),
         onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
         onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
-        onBlur: callAllEventHandlers(onBlur, menuHandleBlur)
-      }, rest);
+        onBlur: callAllEventHandlers(onBlur, menuHandleBlur),
+        ...rest
+      };
     }, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
-    var getToggleButtonProps = preact.useCallback(function (_temp3, _temp4) {
-      var _extends3;
-
-      var _ref3 = _temp3 === void 0 ? {} : _temp3,
-          onClick = _ref3.onClick,
-          onKeyDown = _ref3.onKeyDown,
-          _ref3$refKey = _ref3.refKey,
-          refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
-          ref = _ref3.ref,
-          rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
-
-      var _ref4 = _temp4 === void 0 ? {} : _temp4,
-          _ref4$suppressRefErro = _ref4.suppressRefError,
-          suppressRefError = _ref4$suppressRefErro === void 0 ? false : _ref4$suppressRefErro;
-
-      var toggleButtonHandleClick = function toggleButtonHandleClick() {
+    const getToggleButtonProps = preact.useCallback(function (_temp3, _temp4) {
+      let {
+        onClick,
+        onKeyDown,
+        refKey = 'ref',
+        ref,
+        ...rest
+      } = _temp3 === void 0 ? {} : _temp3;
+      let {
+        suppressRefError = false
+      } = _temp4 === void 0 ? {} : _temp4;
+
+      const toggleButtonHandleClick = () => {
         dispatch({
           type: ToggleButtonClick$1
         });
       };
 
-      var toggleButtonHandleKeyDown = function toggleButtonHandleKeyDown(event) {
-        var key = normalizeArrowKey(event);
+      const toggleButtonHandleKeyDown = event => {
+        const key = normalizeArrowKey(event);
 
         if (key && toggleButtonKeyDownHandlers[key]) {
           toggleButtonKeyDownHandlers[key](event);
         } else if (isAcceptedCharacterKey(key)) {
           dispatch({
             type: ToggleButtonKeyDownCharacter,
-            key: key,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            key,
+            getItemNodeFromIndex
           });
         }
       };
 
-      var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
-        toggleButtonRef.current = toggleButtonNode;
-      }), _extends3.id = elementIds.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-labelledby'] = elementIds.labelId + " " + elementIds.toggleButtonId, _extends3), rest);
+      const toggleProps = {
+        [refKey]: handleRefs(ref, toggleButtonNode => {
+          toggleButtonRef.current = toggleButtonNode;
+        }),
+        id: elementIds.toggleButtonId,
+        'aria-haspopup': 'listbox',
+        'aria-expanded': latest.current.state.isOpen,
+        'aria-labelledby': elementIds.labelId + " " + elementIds.toggleButtonId,
+        ...rest
+      };
 
       if (!rest.disabled) {
         toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
@@ -3193,24 +3157,22 @@
       setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
       return toggleProps;
     }, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
-    var getItemProps = preact.useCallback(function (_temp5) {
-      var _extends4;
-
-      var _ref5 = _temp5 === void 0 ? {} : _temp5,
-          item = _ref5.item,
-          index = _ref5.index,
-          onMouseMove = _ref5.onMouseMove,
-          onClick = _ref5.onClick,
-          _ref5$refKey = _ref5.refKey,
-          refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
-          ref = _ref5.ref,
-          rest = _objectWithoutPropertiesLoose(_ref5, _excluded3$1);
-
-      var _latest$current = latest.current,
-          latestState = _latest$current.state,
-          latestProps = _latest$current.props;
-
-      var itemHandleMouseMove = function itemHandleMouseMove() {
+    const getItemProps = preact.useCallback(function (_temp5) {
+      let {
+        item,
+        index,
+        onMouseMove,
+        onClick,
+        refKey = 'ref',
+        ref,
+        ...rest
+      } = _temp5 === void 0 ? {} : _temp5;
+      const {
+        state: latestState,
+        props: latestProps
+      } = latest.current;
+
+      const itemHandleMouseMove = () => {
         if (index === latestState.highlightedIndex) {
           return;
         }
@@ -3218,32 +3180,34 @@
         shouldScrollRef.current = false;
         dispatch({
           type: ItemMouseMove$1,
-          index: index
+          index
         });
       };
 
-      var itemHandleClick = function itemHandleClick() {
+      const itemHandleClick = () => {
         dispatch({
           type: ItemClick$1,
-          index: index
+          index
         });
       };
 
-      var itemIndex = getItemIndex(index, item, latestProps.items);
+      const itemIndex = getItemIndex(index, item, latestProps.items);
 
       if (itemIndex < 0) {
         throw new Error('Pass either item or item index in getItemProps!');
       }
 
-      var itemProps = _extends((_extends4 = {
+      const itemProps = {
         role: 'option',
         'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
-        id: elementIds.getItemId(itemIndex)
-      }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
-        if (itemNode) {
-          itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
-        }
-      }), _extends4), rest);
+        id: elementIds.getItemId(itemIndex),
+        [refKey]: handleRefs(ref, itemNode => {
+          if (itemNode) {
+            itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+          }
+        }),
+        ...rest
+      };
 
       if (!rest.disabled) {
         itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
@@ -3254,46 +3218,46 @@
     }, [dispatch, latest, shouldScrollRef, elementIds]);
     return {
       // prop getters.
-      getToggleButtonProps: getToggleButtonProps,
-      getLabelProps: getLabelProps,
-      getMenuProps: getMenuProps,
-      getItemProps: getItemProps,
+      getToggleButtonProps,
+      getLabelProps,
+      getMenuProps,
+      getItemProps,
       // actions.
-      toggleMenu: toggleMenu,
-      openMenu: openMenu,
-      closeMenu: closeMenu,
-      setHighlightedIndex: setHighlightedIndex,
-      selectItem: selectItem,
-      reset: reset,
-      setInputValue: setInputValue,
+      toggleMenu,
+      openMenu,
+      closeMenu,
+      setHighlightedIndex,
+      selectItem,
+      reset,
+      setInputValue,
       // state.
-      highlightedIndex: highlightedIndex,
-      isOpen: isOpen,
-      selectedItem: selectedItem,
-      inputValue: inputValue
+      highlightedIndex,
+      isOpen,
+      selectedItem,
+      inputValue
     };
   }
 
-  var InputKeyDownArrowDown = '__input_keydown_arrow_down__' ;
-  var InputKeyDownArrowUp = '__input_keydown_arrow_up__' ;
-  var InputKeyDownEscape = '__input_keydown_escape__' ;
-  var InputKeyDownHome = '__input_keydown_home__' ;
-  var InputKeyDownEnd = '__input_keydown_end__' ;
-  var InputKeyDownEnter = '__input_keydown_enter__' ;
-  var InputChange = '__input_change__' ;
-  var InputBlur = '__input_blur__' ;
-  var MenuMouseLeave = '__menu_mouse_leave__' ;
-  var ItemMouseMove = '__item_mouse_move__' ;
-  var ItemClick = '__item_click__' ;
-  var ToggleButtonClick = '__togglebutton_click__' ;
-  var FunctionToggleMenu = '__function_toggle_menu__' ;
-  var FunctionOpenMenu = '__function_open_menu__' ;
-  var FunctionCloseMenu = '__function_close_menu__' ;
-  var FunctionSetHighlightedIndex = '__function_set_highlighted_index__' ;
-  var FunctionSelectItem = '__function_select_item__' ;
-  var FunctionSetInputValue = '__function_set_input_value__' ;
-  var FunctionReset$1 = '__function_reset__' ;
-  var ControlledPropUpdatedSelectedItem = '__controlled_prop_updated_selected_item__' ;
+  const InputKeyDownArrowDown = '__input_keydown_arrow_down__' ;
+  const InputKeyDownArrowUp = '__input_keydown_arrow_up__' ;
+  const InputKeyDownEscape = '__input_keydown_escape__' ;
+  const InputKeyDownHome = '__input_keydown_home__' ;
+  const InputKeyDownEnd = '__input_keydown_end__' ;
+  const InputKeyDownEnter = '__input_keydown_enter__' ;
+  const InputChange = '__input_change__' ;
+  const InputBlur = '__input_blur__' ;
+  const MenuMouseLeave = '__menu_mouse_leave__' ;
+  const ItemMouseMove = '__item_mouse_move__' ;
+  const ItemClick = '__item_click__' ;
+  const ToggleButtonClick = '__togglebutton_click__' ;
+  const FunctionToggleMenu = '__function_toggle_menu__' ;
+  const FunctionOpenMenu = '__function_open_menu__' ;
+  const FunctionCloseMenu = '__function_close_menu__' ;
+  const FunctionSetHighlightedIndex = '__function_set_highlighted_index__' ;
+  const FunctionSelectItem = '__function_select_item__' ;
+  const FunctionSetInputValue = '__function_set_input_value__' ;
+  const FunctionReset$1 = '__function_reset__' ;
+  const ControlledPropUpdatedSelectedItem = '__controlled_prop_updated_selected_item__' ;
 
   var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -3320,56 +3284,60 @@
   });
 
   function getInitialState$1(props) {
-    var initialState = getInitialState$2(props);
-    var selectedItem = initialState.selectedItem;
-    var inputValue = initialState.inputValue;
+    const initialState = getInitialState$2(props);
+    const {
+      selectedItem
+    } = initialState;
+    let {
+      inputValue
+    } = initialState;
 
     if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
       inputValue = props.itemToString(selectedItem);
     }
 
-    return _extends({}, initialState, {
-      inputValue: inputValue
-    });
+    return { ...initialState,
+      inputValue
+    };
   }
 
-  var propTypes$1 = {
-    items: PropTypes__default['default'].array.isRequired,
-    itemToString: PropTypes__default['default'].func,
-    getA11yStatusMessage: PropTypes__default['default'].func,
-    getA11ySelectionMessage: PropTypes__default['default'].func,
-    circularNavigation: PropTypes__default['default'].bool,
-    highlightedIndex: PropTypes__default['default'].number,
-    defaultHighlightedIndex: PropTypes__default['default'].number,
-    initialHighlightedIndex: PropTypes__default['default'].number,
-    isOpen: PropTypes__default['default'].bool,
-    defaultIsOpen: PropTypes__default['default'].bool,
-    initialIsOpen: PropTypes__default['default'].bool,
-    selectedItem: PropTypes__default['default'].any,
-    initialSelectedItem: PropTypes__default['default'].any,
-    defaultSelectedItem: PropTypes__default['default'].any,
-    inputValue: PropTypes__default['default'].string,
-    defaultInputValue: PropTypes__default['default'].string,
-    initialInputValue: PropTypes__default['default'].string,
-    id: PropTypes__default['default'].string,
-    labelId: PropTypes__default['default'].string,
-    menuId: PropTypes__default['default'].string,
-    getItemId: PropTypes__default['default'].func,
-    inputId: PropTypes__default['default'].string,
-    toggleButtonId: PropTypes__default['default'].string,
-    stateReducer: PropTypes__default['default'].func,
-    onSelectedItemChange: PropTypes__default['default'].func,
-    onHighlightedIndexChange: PropTypes__default['default'].func,
-    onStateChange: PropTypes__default['default'].func,
-    onIsOpenChange: PropTypes__default['default'].func,
-    onInputValueChange: PropTypes__default['default'].func,
-    environment: PropTypes__default['default'].shape({
-      addEventListener: PropTypes__default['default'].func,
-      removeEventListener: PropTypes__default['default'].func,
-      document: PropTypes__default['default'].shape({
-        getElementById: PropTypes__default['default'].func,
-        activeElement: PropTypes__default['default'].any,
-        body: PropTypes__default['default'].any
+  const propTypes$1 = {
+    items: PropTypes__default["default"].array.isRequired,
+    itemToString: PropTypes__default["default"].func,
+    getA11yStatusMessage: PropTypes__default["default"].func,
+    getA11ySelectionMessage: PropTypes__default["default"].func,
+    circularNavigation: PropTypes__default["default"].bool,
+    highlightedIndex: PropTypes__default["default"].number,
+    defaultHighlightedIndex: PropTypes__default["default"].number,
+    initialHighlightedIndex: PropTypes__default["default"].number,
+    isOpen: PropTypes__default["default"].bool,
+    defaultIsOpen: PropTypes__default["default"].bool,
+    initialIsOpen: PropTypes__default["default"].bool,
+    selectedItem: PropTypes__default["default"].any,
+    initialSelectedItem: PropTypes__default["default"].any,
+    defaultSelectedItem: PropTypes__default["default"].any,
+    inputValue: PropTypes__default["default"].string,
+    defaultInputValue: PropTypes__default["default"].string,
+    initialInputValue: PropTypes__default["default"].string,
+    id: PropTypes__default["default"].string,
+    labelId: PropTypes__default["default"].string,
+    menuId: PropTypes__default["default"].string,
+    getItemId: PropTypes__default["default"].func,
+    inputId: PropTypes__default["default"].string,
+    toggleButtonId: PropTypes__default["default"].string,
+    stateReducer: PropTypes__default["default"].func,
+    onSelectedItemChange: PropTypes__default["default"].func,
+    onHighlightedIndexChange: PropTypes__default["default"].func,
+    onStateChange: PropTypes__default["default"].func,
+    onIsOpenChange: PropTypes__default["default"].func,
+    onInputValueChange: PropTypes__default["default"].func,
+    environment: PropTypes__default["default"].shape({
+      addEventListener: PropTypes__default["default"].func,
+      removeEventListener: PropTypes__default["default"].func,
+      document: PropTypes__default["default"].shape({
+        getElementById: PropTypes__default["default"].func,
+        activeElement: PropTypes__default["default"].any,
+        body: PropTypes__default["default"].any
       })
     })
   };
@@ -3387,14 +3355,10 @@
    */
 
   function useControlledReducer(reducer, initialState, props) {
-    var previousSelectedItemRef = preact.useRef();
-
-    var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
-        state = _useEnhancedReducer[0],
-        dispatch = _useEnhancedReducer[1]; // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
+    const previousSelectedItemRef = preact.useRef();
+    const [state, dispatch] = useEnhancedReducer(reducer, initialState, props); // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
 
-
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       if (isControlledProp(props, 'selectedItem')) {
         if (previousSelectedItemRef.current !== props.selectedItem) {
           dispatch({
@@ -3410,27 +3374,29 @@
   } // eslint-disable-next-line import/no-mutable-exports
 
 
-  var validatePropTypes$1 = noop;
+  let validatePropTypes$1 = noop;
   /* istanbul ignore next */
 
   {
-    validatePropTypes$1 = function validatePropTypes(options, caller) {
-      PropTypes__default['default'].checkPropTypes(propTypes$1, options, 'prop', caller.name);
+    validatePropTypes$1 = (options, caller) => {
+      PropTypes__default["default"].checkPropTypes(propTypes$1, options, 'prop', caller.name);
     };
   }
 
-  var defaultProps$1 = _extends({}, defaultProps$3, {
+  const defaultProps$1 = { ...defaultProps$3,
     getA11yStatusMessage: getA11yStatusMessage$1,
     circularNavigation: true
-  });
+  };
 
   /* eslint-disable complexity */
 
   function downshiftUseComboboxReducer(state, action) {
-    var type = action.type,
-        props = action.props,
-        shiftKey = action.shiftKey;
-    var changes;
+    const {
+      type,
+      props,
+      shiftKey
+    } = action;
+    let changes;
 
     switch (type) {
       case ItemClick:
@@ -3471,22 +3437,24 @@
         break;
 
       case InputKeyDownEnter:
-        changes = _extends({}, state.isOpen && state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex],
-          isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
-          inputValue: props.itemToString(props.items[state.highlightedIndex])
-        });
+        changes = { ...(state.isOpen && state.highlightedIndex >= 0 && {
+            selectedItem: props.items[state.highlightedIndex],
+            isOpen: getDefaultValue$1(props, 'isOpen'),
+            highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+            inputValue: props.itemToString(props.items[state.highlightedIndex])
+          })
+        };
         break;
 
       case InputKeyDownEscape:
-        changes = _extends({
+        changes = {
           isOpen: false,
-          highlightedIndex: -1
-        }, !state.isOpen && {
-          selectedItem: null,
-          inputValue: ''
-        });
+          highlightedIndex: -1,
+          ...(!state.isOpen && {
+            selectedItem: null,
+            inputValue: ''
+          })
+        };
         break;
 
       case InputKeyDownHome:
@@ -3502,13 +3470,14 @@
         break;
 
       case InputBlur:
-        changes = _extends({
+        changes = {
           isOpen: false,
-          highlightedIndex: -1
-        }, state.highlightedIndex >= 0 && action.selectItem && {
-          selectedItem: props.items[state.highlightedIndex],
-          inputValue: props.itemToString(props.items[state.highlightedIndex])
-        });
+          highlightedIndex: -1,
+          ...(state.highlightedIndex >= 0 && action.selectItem && {
+            selectedItem: props.items[state.highlightedIndex],
+            inputValue: props.itemToString(props.items[state.highlightedIndex])
+          })
+        };
         break;
 
       case InputChange:
@@ -3536,15 +3505,13 @@
         return downshiftCommonReducer(state, action, stateChangeTypes$1);
     }
 
-    return _extends({}, state, changes);
+    return { ...state,
+      ...changes
+    };
   }
   /* eslint-enable complexity */
 
-  var _excluded$1 = ["onMouseLeave", "refKey", "ref"],
-      _excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onClick", "onPress"],
-      _excluded3 = ["onClick", "onPress", "refKey", "ref"],
-      _excluded4 = ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "refKey", "ref"],
-      _excluded5 = ["refKey", "ref"];
+  /* eslint-disable max-statements */
   useCombobox.stateChangeTypes = stateChangeTypes$1;
 
   function useCombobox(userProps) {
@@ -3554,87 +3521,88 @@
 
     validatePropTypes$1(userProps, useCombobox); // Props defaults and destructuring.
 
-    var props = _extends({}, defaultProps$1, userProps);
-
-    var initialIsOpen = props.initialIsOpen,
-        defaultIsOpen = props.defaultIsOpen,
-        items = props.items,
-        scrollIntoView = props.scrollIntoView,
-        environment = props.environment,
-        getA11yStatusMessage = props.getA11yStatusMessage,
-        getA11ySelectionMessage = props.getA11ySelectionMessage,
-        itemToString = props.itemToString; // Initial state depending on controlled props.
-
-    var initialState = getInitialState$1(props);
-
-    var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, initialState, props),
-        state = _useControlledReducer[0],
-        dispatch = _useControlledReducer[1];
-
-    var isOpen = state.isOpen,
-        highlightedIndex = state.highlightedIndex,
-        selectedItem = state.selectedItem,
-        inputValue = state.inputValue; // Element refs.
-
-    var menuRef = preact.useRef(null);
-    var itemRefs = preact.useRef({});
-    var inputRef = preact.useRef(null);
-    var toggleButtonRef = preact.useRef(null);
-    var comboboxRef = preact.useRef(null);
-    var isInitialMountRef = preact.useRef(true); // prevent id re-generation between renders.
-
-    var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
-
-    var previousResultCountRef = preact.useRef(); // utility callback to get item element.
-
-    var latest = useLatestRef({
-      state: state,
-      props: props
+    const props = { ...defaultProps$1,
+      ...userProps
+    };
+    const {
+      initialIsOpen,
+      defaultIsOpen,
+      items,
+      scrollIntoView,
+      environment,
+      getA11yStatusMessage,
+      getA11ySelectionMessage,
+      itemToString
+    } = props; // Initial state depending on controlled props.
+
+    const initialState = getInitialState$1(props);
+    const [state, dispatch] = useControlledReducer(downshiftUseComboboxReducer, initialState, props);
+    const {
+      isOpen,
+      highlightedIndex,
+      selectedItem,
+      inputValue
+    } = state; // Element refs.
+
+    const menuRef = preact.useRef(null);
+    const itemRefs = preact.useRef({});
+    const inputRef = preact.useRef(null);
+    const toggleButtonRef = preact.useRef(null);
+    const comboboxRef = preact.useRef(null);
+    const isInitialMountRef = preact.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 = preact.useRef(); // utility callback to get item element.
+
+    const latest = useLatestRef({
+      state,
+      props
     });
-    var getItemNodeFromIndex = preact.useCallback(function (index) {
-      return itemRefs.current[elementIds.getItemId(index)];
-    }, [elementIds]); // Effects.
+    const getItemNodeFromIndex = preact.useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
     // Sets a11y status message on changes in state.
 
-    useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
+    useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
       isInitialMount: isInitialMountRef.current,
       previousResultCount: previousResultCountRef.current,
-      items: items,
-      environment: environment,
-      itemToString: itemToString
-    }, state)); // Sets a11y status message on changes in selectedItem.
+      items,
+      environment,
+      itemToString,
+      ...state
+    }); // Sets a11y status message on changes in selectedItem.
 
-    useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
+    useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
       isInitialMount: isInitialMountRef.current,
       previousResultCount: previousResultCountRef.current,
-      items: items,
-      environment: environment,
-      itemToString: itemToString
-    }, state)); // Scroll on highlighted item if change comes from keyboard.
+      items,
+      environment,
+      itemToString,
+      ...state
+    }); // Scroll on highlighted item if change comes from keyboard.
 
-    var shouldScrollRef = useScrollIntoView({
+    const shouldScrollRef = useScrollIntoView({
       menuElement: menuRef.current,
-      highlightedIndex: highlightedIndex,
-      isOpen: isOpen,
-      itemRefs: itemRefs,
-      scrollIntoView: scrollIntoView,
-      getItemNodeFromIndex: getItemNodeFromIndex
+      highlightedIndex,
+      isOpen,
+      itemRefs,
+      scrollIntoView,
+      getItemNodeFromIndex
     });
     useControlPropsValidator({
       isInitialMount: isInitialMountRef.current,
-      props: props,
-      state: state
+      props,
+      state
     }); // Focus the input on first render if required.
 
-    preact.useEffect(function () {
-      var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
+    preact.useEffect(() => {
+      const focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
 
       if (focusOnOpen && inputRef.current) {
         inputRef.current.focus();
       } // eslint-disable-next-line react-hooks/exhaustive-deps
 
     }, []);
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       if (isInitialMountRef.current) {
         return;
       }
@@ -3642,147 +3610,151 @@
       previousResultCountRef.current = items.length;
     }); // Add mouse/touch events to document.
 
-    var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, function () {
+    const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, () => {
       dispatch({
         type: InputBlur,
         selectItem: false
       });
     });
-    var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false.
+    const setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false.
 
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       isInitialMountRef.current = false;
     }, []); // Reset itemRefs on close.
 
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       if (!isOpen) {
         itemRefs.current = {};
       }
     }, [isOpen]);
     /* Event handler functions */
 
-    var inputKeyDownHandlers = preact.useMemo(function () {
-      return {
-        ArrowDown: function ArrowDown(event) {
-          event.preventDefault();
-          dispatch({
-            type: InputKeyDownArrowDown,
-            shiftKey: event.shiftKey,
-            getItemNodeFromIndex: getItemNodeFromIndex
-          });
-        },
-        ArrowUp: function ArrowUp(event) {
-          event.preventDefault();
-          dispatch({
-            type: InputKeyDownArrowUp,
-            shiftKey: event.shiftKey,
-            getItemNodeFromIndex: getItemNodeFromIndex
-          });
-        },
-        Home: function Home(event) {
-          if (!latest.current.state.isOpen) {
-            return;
-          }
+    const inputKeyDownHandlers = preact.useMemo(() => ({
+      ArrowDown(event) {
+        event.preventDefault();
+        dispatch({
+          type: InputKeyDownArrowDown,
+          shiftKey: event.shiftKey,
+          getItemNodeFromIndex
+        });
+      },
 
-          event.preventDefault();
-          dispatch({
-            type: InputKeyDownHome,
-            getItemNodeFromIndex: getItemNodeFromIndex
-          });
-        },
-        End: function End(event) {
-          if (!latest.current.state.isOpen) {
-            return;
-          }
+      ArrowUp(event) {
+        event.preventDefault();
+        dispatch({
+          type: InputKeyDownArrowUp,
+          shiftKey: event.shiftKey,
+          getItemNodeFromIndex
+        });
+      },
 
-          event.preventDefault();
-          dispatch({
-            type: InputKeyDownEnd,
-            getItemNodeFromIndex: getItemNodeFromIndex
-          });
-        },
-        Escape: function Escape() {
-          var latestState = latest.current.state;
+      Home(event) {
+        if (!latest.current.state.isOpen) {
+          return;
+        }
 
-          if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
-            dispatch({
-              type: InputKeyDownEscape
-            });
-          }
-        },
-        Enter: function Enter(event) {
-          var latestState = latest.current.state; // if closed or no highlighted index, do nothing.
+        event.preventDefault();
+        dispatch({
+          type: InputKeyDownHome,
+          getItemNodeFromIndex
+        });
+      },
 
-          if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
-          ) {
-            return;
-          }
+      End(event) {
+        if (!latest.current.state.isOpen) {
+          return;
+        }
 
-          event.preventDefault();
+        event.preventDefault();
+        dispatch({
+          type: InputKeyDownEnd,
+          getItemNodeFromIndex
+        });
+      },
+
+      Escape() {
+        const latestState = latest.current.state;
+
+        if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
           dispatch({
-            type: InputKeyDownEnter,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: InputKeyDownEscape
           });
         }
-      };
-    }, [dispatch, latest, getItemNodeFromIndex]); // Getter props.
-
-    var getLabelProps = preact.useCallback(function (labelProps) {
-      return _extends({
-        id: elementIds.labelId,
-        htmlFor: elementIds.inputId
-      }, labelProps);
-    }, [elementIds]);
-    var getMenuProps = preact.useCallback(function (_temp, _temp2) {
-      var _extends2;
-
-      var _ref = _temp === void 0 ? {} : _temp,
-          onMouseLeave = _ref.onMouseLeave,
-          _ref$refKey = _ref.refKey,
-          refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
-          ref = _ref.ref,
-          rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
-      var _ref2 = _temp2 === void 0 ? {} : _temp2,
-          _ref2$suppressRefErro = _ref2.suppressRefError,
-          suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
+      },
 
-      setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
-      return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
-        menuRef.current = menuNode;
-      }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
+      Enter(event) {
+        const latestState = latest.current.state; // if closed or no highlighted index, do nothing.
+
+        if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
+        ) {
+          return;
+        }
+
+        event.preventDefault();
         dispatch({
-          type: MenuMouseLeave
+          type: InputKeyDownEnter,
+          getItemNodeFromIndex
         });
-      }), _extends2), rest);
+      }
+
+    }), [dispatch, latest, getItemNodeFromIndex]); // Getter props.
+
+    const getLabelProps = preact.useCallback(labelProps => ({
+      id: elementIds.labelId,
+      htmlFor: elementIds.inputId,
+      ...labelProps
+    }), [elementIds]);
+    const getMenuProps = preact.useCallback(function (_temp, _temp2) {
+      let {
+        onMouseLeave,
+        refKey = 'ref',
+        ref,
+        ...rest
+      } = _temp === void 0 ? {} : _temp;
+      let {
+        suppressRefError = false
+      } = _temp2 === void 0 ? {} : _temp2;
+      setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
+      return {
+        [refKey]: handleRefs(ref, menuNode => {
+          menuRef.current = menuNode;
+        }),
+        id: elementIds.menuId,
+        role: 'listbox',
+        'aria-labelledby': elementIds.labelId,
+        onMouseLeave: callAllEventHandlers(onMouseLeave, () => {
+          dispatch({
+            type: MenuMouseLeave
+          });
+        }),
+        ...rest
+      };
     }, [dispatch, setGetterPropCallInfo, elementIds]);
-    var getItemProps = preact.useCallback(function (_temp3) {
-      var _extends3, _ref4;
-
-      var _ref3 = _temp3 === void 0 ? {} : _temp3,
-          item = _ref3.item,
-          index = _ref3.index,
-          _ref3$refKey = _ref3.refKey,
-          refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
-          ref = _ref3.ref,
-          onMouseMove = _ref3.onMouseMove,
-          onClick = _ref3.onClick;
-          _ref3.onPress;
-          var rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
-
-      var _latest$current = latest.current,
-          latestProps = _latest$current.props,
-          latestState = _latest$current.state;
-      var itemIndex = getItemIndex(index, item, latestProps.items);
+    const getItemProps = preact.useCallback(function (_temp3) {
+      let {
+        item,
+        index,
+        refKey = 'ref',
+        ref,
+        onMouseMove,
+        onClick,
+        onPress,
+        ...rest
+      } = _temp3 === void 0 ? {} : _temp3;
+      const {
+        props: latestProps,
+        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!');
       }
 
-      var onSelectKey = 'onClick';
-      var customClickHandler = onClick;
+      const onSelectKey = 'onClick';
+      const customClickHandler = onClick;
 
-      var itemHandleMouseMove = function itemHandleMouseMove() {
+      const itemHandleMouseMove = () => {
         if (index === latestState.highlightedIndex) {
           return;
         }
@@ -3790,14 +3762,14 @@
         shouldScrollRef.current = false;
         dispatch({
           type: ItemMouseMove,
-          index: index
+          index
         });
       };
 
-      var itemHandleClick = function itemHandleClick() {
+      const itemHandleClick = () => {
         dispatch({
           type: ItemClick,
-          index: index
+          index
         });
 
         if (inputRef.current) {
@@ -3805,26 +3777,32 @@
         }
       };
 
-      return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
-        if (itemNode) {
-          itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
-        }
-      }), _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !rest.disabled && (_ref4 = {
-        onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove)
-      }, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), rest);
+      return {
+        [refKey]: handleRefs(ref, itemNode => {
+          if (itemNode) {
+            itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+          }
+        }),
+        role: 'option',
+        'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+        id: elementIds.getItemId(itemIndex),
+        ...(!rest.disabled && {
+          onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
+          [onSelectKey]: callAllEventHandlers(customClickHandler, itemHandleClick)
+        }),
+        ...rest
+      };
     }, [dispatch, latest, shouldScrollRef, elementIds]);
-    var getToggleButtonProps = preact.useCallback(function (_temp4) {
-      var _extends4;
-
-      var _ref5 = _temp4 === void 0 ? {} : _temp4,
-          onClick = _ref5.onClick;
-          _ref5.onPress;
-          var _ref5$refKey = _ref5.refKey,
-          refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
-          ref = _ref5.ref,
-          rest = _objectWithoutPropertiesLoose(_ref5, _excluded3);
-
-      var toggleButtonHandleClick = function toggleButtonHandleClick() {
+    const getToggleButtonProps = preact.useCallback(function (_temp4) {
+      let {
+        onClick,
+        onPress,
+        refKey = 'ref',
+        ref,
+        ...rest
+      } = _temp4 === void 0 ? {} : _temp4;
+
+      const toggleButtonHandleClick = () => {
         dispatch({
           type: ToggleButtonClick
         });
@@ -3834,49 +3812,52 @@
         }
       };
 
-      return _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
-        toggleButtonRef.current = toggleButtonNode;
-      }), _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends({}, {
-        onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
-      }), rest);
+      return {
+        [refKey]: handleRefs(ref, toggleButtonNode => {
+          toggleButtonRef.current = toggleButtonNode;
+        }),
+        id: elementIds.toggleButtonId,
+        tabIndex: -1,
+        ...(!rest.disabled && { ...({
+            onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
+          })
+        }),
+        ...rest
+      };
     }, [dispatch, latest, elementIds]);
-    var getInputProps = preact.useCallback(function (_temp5, _temp6) {
-      var _extends5;
-
-      var _ref6 = _temp5 === void 0 ? {} : _temp5,
-          onKeyDown = _ref6.onKeyDown,
-          onChange = _ref6.onChange,
-          onInput = _ref6.onInput,
-          onBlur = _ref6.onBlur;
-          _ref6.onChangeText;
-          var _ref6$refKey = _ref6.refKey,
-          refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
-          ref = _ref6.ref,
-          rest = _objectWithoutPropertiesLoose(_ref6, _excluded4);
-
-      var _ref7 = _temp6 === void 0 ? {} : _temp6,
-          _ref7$suppressRefErro = _ref7.suppressRefError,
-          suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
-
+    const getInputProps = preact.useCallback(function (_temp5, _temp6) {
+      let {
+        onKeyDown,
+        onChange,
+        onInput,
+        onBlur,
+        onChangeText,
+        refKey = 'ref',
+        ref,
+        ...rest
+      } = _temp5 === void 0 ? {} : _temp5;
+      let {
+        suppressRefError = false
+      } = _temp6 === void 0 ? {} : _temp6;
       setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
-      var latestState = latest.current.state;
+      const latestState = latest.current.state;
 
-      var inputHandleKeyDown = function inputHandleKeyDown(event) {
-        var key = normalizeArrowKey(event);
+      const inputHandleKeyDown = event => {
+        const key = normalizeArrowKey(event);
 
         if (key && inputKeyDownHandlers[key]) {
           inputKeyDownHandlers[key](event);
         }
       };
 
-      var inputHandleChange = function inputHandleChange(event) {
+      const inputHandleChange = event => {
         dispatch({
           type: InputChange,
           inputValue: event.target.value
         });
       };
 
-      var inputHandleBlur = function inputHandleBlur() {
+      const inputHandleBlur = () => {
         /* istanbul ignore else */
         if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
           dispatch({
@@ -3888,109 +3869,121 @@
       /* istanbul ignore next (preact) */
 
 
-      var onChangeKey = 'onInput' ;
-      var eventHandlers = {};
+      const onChangeKey = 'onInput' ;
+      let eventHandlers = {};
 
       if (!rest.disabled) {
-        var _eventHandlers;
-
-        eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers);
+        eventHandlers = {
+          [onChangeKey]: callAllEventHandlers(onChange, onInput, inputHandleChange),
+          onKeyDown: callAllEventHandlers(onKeyDown, inputHandleKeyDown),
+          onBlur: callAllEventHandlers(onBlur, inputHandleBlur)
+        };
       }
 
-      return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
-        inputRef.current = inputNode;
-      }), _extends5.id = elementIds.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5), latestState.isOpen && latestState.highlightedIndex > -1 && {
-        'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
-      }, {
+      return {
+        [refKey]: handleRefs(ref, inputNode => {
+          inputRef.current = inputNode;
+        }),
+        id: elementIds.inputId,
+        'aria-autocomplete': 'list',
+        'aria-controls': elementIds.menuId,
+        ...(latestState.isOpen && latestState.highlightedIndex > -1 && {
+          'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
+        }),
         'aria-labelledby': elementIds.labelId,
         // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
         // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
         autoComplete: 'off',
-        value: latestState.inputValue
-      }, eventHandlers, rest);
+        value: latestState.inputValue,
+        ...eventHandlers,
+        ...rest
+      };
     }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
-    var getComboboxProps = preact.useCallback(function (_temp7, _temp8) {
-      var _extends6;
-
-      var _ref8 = _temp7 === void 0 ? {} : _temp7,
-          _ref8$refKey = _ref8.refKey,
-          refKey = _ref8$refKey === void 0 ? 'ref' : _ref8$refKey,
-          ref = _ref8.ref,
-          rest = _objectWithoutPropertiesLoose(_ref8, _excluded5);
-
-      var _ref9 = _temp8 === void 0 ? {} : _temp8,
-          _ref9$suppressRefErro = _ref9.suppressRefError,
-          suppressRefError = _ref9$suppressRefErro === void 0 ? false : _ref9$suppressRefErro;
-
+    const getComboboxProps = preact.useCallback(function (_temp7, _temp8) {
+      let {
+        refKey = 'ref',
+        ref,
+        ...rest
+      } = _temp7 === void 0 ? {} : _temp7;
+      let {
+        suppressRefError = false
+      } = _temp8 === void 0 ? {} : _temp8;
       setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef);
-      return _extends((_extends6 = {}, _extends6[refKey] = handleRefs(ref, function (comboboxNode) {
-        comboboxRef.current = comboboxNode;
-      }), _extends6.role = 'combobox', _extends6['aria-haspopup'] = 'listbox', _extends6['aria-owns'] = elementIds.menuId, _extends6['aria-expanded'] = latest.current.state.isOpen, _extends6), rest);
+      return {
+        [refKey]: handleRefs(ref, comboboxNode => {
+          comboboxRef.current = comboboxNode;
+        }),
+        role: 'combobox',
+        'aria-haspopup': 'listbox',
+        'aria-owns': elementIds.menuId,
+        'aria-expanded': latest.current.state.isOpen,
+        ...rest
+      };
     }, [latest, setGetterPropCallInfo, elementIds]); // returns
 
-    var toggleMenu = preact.useCallback(function () {
+    const toggleMenu = preact.useCallback(() => {
       dispatch({
         type: FunctionToggleMenu
       });
     }, [dispatch]);
-    var closeMenu = preact.useCallback(function () {
+    const closeMenu = preact.useCallback(() => {
       dispatch({
         type: FunctionCloseMenu
       });
     }, [dispatch]);
-    var openMenu = preact.useCallback(function () {
+    const openMenu = preact.useCallback(() => {
       dispatch({
         type: FunctionOpenMenu
       });
     }, [dispatch]);
-    var setHighlightedIndex = preact.useCallback(function (newHighlightedIndex) {
+    const setHighlightedIndex = preact.useCallback(newHighlightedIndex => {
       dispatch({
         type: FunctionSetHighlightedIndex,
         highlightedIndex: newHighlightedIndex
       });
     }, [dispatch]);
-    var selectItem = preact.useCallback(function (newSelectedItem) {
+    const selectItem = preact.useCallback(newSelectedItem => {
       dispatch({
         type: FunctionSelectItem,
         selectedItem: newSelectedItem
       });
     }, [dispatch]);
-    var setInputValue = preact.useCallback(function (newInputValue) {
+    const setInputValue = preact.useCallback(newInputValue => {
       dispatch({
         type: FunctionSetInputValue,
         inputValue: newInputValue
       });
     }, [dispatch]);
-    var reset = preact.useCallback(function () {
+    const reset = preact.useCallback(() => {
       dispatch({
         type: FunctionReset$1
       });
     }, [dispatch]);
     return {
       // prop getters.
-      getItemProps: getItemProps,
-      getLabelProps: getLabelProps,
-      getMenuProps: getMenuProps,
-      getInputProps: getInputProps,
-      getComboboxProps: getComboboxProps,
-      getToggleButtonProps: getToggleButtonProps,
+      getItemProps,
+      getLabelProps,
+      getMenuProps,
+      getInputProps,
+      getComboboxProps,
+      getToggleButtonProps,
       // actions.
-      toggleMenu: toggleMenu,
-      openMenu: openMenu,
-      closeMenu: closeMenu,
-      setHighlightedIndex: setHighlightedIndex,
-      setInputValue: setInputValue,
-      selectItem: selectItem,
-      reset: reset,
+      toggleMenu,
+      openMenu,
+      closeMenu,
+      setHighlightedIndex,
+      setInputValue,
+      selectItem,
+      reset,
       // state.
-      highlightedIndex: highlightedIndex,
-      isOpen: isOpen,
-      selectedItem: selectedItem,
-      inputValue: inputValue
+      highlightedIndex,
+      isOpen,
+      selectedItem,
+      inputValue
     };
   }
 
-  var defaultStateValues = {
+  const defaultStateValues = {
     activeIndex: -1,
     selectedItems: []
   };
@@ -4030,11 +4023,11 @@
 
 
   function getInitialState(props) {
-    var activeIndex = getInitialValue(props, 'activeIndex');
-    var selectedItems = getInitialValue(props, 'selectedItems');
+    const activeIndex = getInitialValue(props, 'activeIndex');
+    const selectedItems = getInitialValue(props, 'selectedItems');
     return {
-      activeIndex: activeIndex,
-      selectedItems: selectedItems
+      activeIndex,
+      selectedItems
     };
   }
   /**
@@ -4053,10 +4046,12 @@
       return false;
     }
 
-    var element = event.target;
+    const element = event.target;
 
     if (element instanceof HTMLInputElement && // if element is a text input
-    element.value !== '' && (element.selectionStart !== 0 || element.selectionEnd !== 0)) {
+    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;
     }
 
@@ -4071,66 +4066,68 @@
 
 
   function getA11yRemovalMessage(selectionParameters) {
-    var removedSelectedItem = selectionParameters.removedSelectedItem,
-        itemToStringLocal = selectionParameters.itemToString;
+    const {
+      removedSelectedItem,
+      itemToString: itemToStringLocal
+    } = selectionParameters;
     return itemToStringLocal(removedSelectedItem) + " has been removed.";
   }
 
-  var propTypes = {
-    selectedItems: PropTypes__default['default'].array,
-    initialSelectedItems: PropTypes__default['default'].array,
-    defaultSelectedItems: PropTypes__default['default'].array,
-    itemToString: PropTypes__default['default'].func,
-    getA11yRemovalMessage: PropTypes__default['default'].func,
-    stateReducer: PropTypes__default['default'].func,
-    activeIndex: PropTypes__default['default'].number,
-    initialActiveIndex: PropTypes__default['default'].number,
-    defaultActiveIndex: PropTypes__default['default'].number,
-    onActiveIndexChange: PropTypes__default['default'].func,
-    onSelectedItemsChange: PropTypes__default['default'].func,
-    keyNavigationNext: PropTypes__default['default'].string,
-    keyNavigationPrevious: PropTypes__default['default'].string,
-    environment: PropTypes__default['default'].shape({
-      addEventListener: PropTypes__default['default'].func,
-      removeEventListener: PropTypes__default['default'].func,
-      document: PropTypes__default['default'].shape({
-        getElementById: PropTypes__default['default'].func,
-        activeElement: PropTypes__default['default'].any,
-        body: PropTypes__default['default'].any
+  const propTypes = {
+    selectedItems: PropTypes__default["default"].array,
+    initialSelectedItems: PropTypes__default["default"].array,
+    defaultSelectedItems: PropTypes__default["default"].array,
+    itemToString: PropTypes__default["default"].func,
+    getA11yRemovalMessage: PropTypes__default["default"].func,
+    stateReducer: PropTypes__default["default"].func,
+    activeIndex: PropTypes__default["default"].number,
+    initialActiveIndex: PropTypes__default["default"].number,
+    defaultActiveIndex: PropTypes__default["default"].number,
+    onActiveIndexChange: PropTypes__default["default"].func,
+    onSelectedItemsChange: PropTypes__default["default"].func,
+    keyNavigationNext: PropTypes__default["default"].string,
+    keyNavigationPrevious: PropTypes__default["default"].string,
+    environment: PropTypes__default["default"].shape({
+      addEventListener: PropTypes__default["default"].func,
+      removeEventListener: PropTypes__default["default"].func,
+      document: PropTypes__default["default"].shape({
+        getElementById: PropTypes__default["default"].func,
+        activeElement: PropTypes__default["default"].any,
+        body: PropTypes__default["default"].any
       })
     })
   };
-  var defaultProps = {
+  const defaultProps = {
     itemToString: defaultProps$3.itemToString,
     stateReducer: defaultProps$3.stateReducer,
     environment: defaultProps$3.environment,
-    getA11yRemovalMessage: getA11yRemovalMessage,
+    getA11yRemovalMessage,
     keyNavigationNext: 'ArrowRight',
     keyNavigationPrevious: 'ArrowLeft'
   }; // eslint-disable-next-line import/no-mutable-exports
 
-  var validatePropTypes = noop;
+  let validatePropTypes = noop;
   /* istanbul ignore next */
 
   {
-    validatePropTypes = function validatePropTypes(options, caller) {
-      PropTypes__default['default'].checkPropTypes(propTypes, options, 'prop', caller.name);
+    validatePropTypes = (options, caller) => {
+      PropTypes__default["default"].checkPropTypes(propTypes, options, 'prop', caller.name);
     };
   }
 
-  var SelectedItemClick = '__selected_item_click__' ;
-  var SelectedItemKeyDownDelete = '__selected_item_keydown_delete__' ;
-  var SelectedItemKeyDownBackspace = '__selected_item_keydown_backspace__' ;
-  var SelectedItemKeyDownNavigationNext = '__selected_item_keydown_navigation_next__' ;
-  var SelectedItemKeyDownNavigationPrevious = '__selected_item_keydown_navigation_previous__' ;
-  var DropdownKeyDownNavigationPrevious = '__dropdown_keydown_navigation_previous__' ;
-  var DropdownKeyDownBackspace = '__dropdown_keydown_backspace__' ;
-  var DropdownClick = '__dropdown_click__' ;
-  var FunctionAddSelectedItem = '__function_add_selected_item__' ;
-  var FunctionRemoveSelectedItem = '__function_remove_selected_item__' ;
-  var FunctionSetSelectedItems = '__function_set_selected_items__' ;
-  var FunctionSetActiveIndex = '__function_set_active_index__' ;
-  var FunctionReset = '__function_reset__' ;
+  const SelectedItemClick = '__selected_item_click__' ;
+  const SelectedItemKeyDownDelete = '__selected_item_keydown_delete__' ;
+  const SelectedItemKeyDownBackspace = '__selected_item_keydown_backspace__' ;
+  const SelectedItemKeyDownNavigationNext = '__selected_item_keydown_navigation_next__' ;
+  const SelectedItemKeyDownNavigationPrevious = '__selected_item_keydown_navigation_previous__' ;
+  const DropdownKeyDownNavigationPrevious = '__dropdown_keydown_navigation_previous__' ;
+  const DropdownKeyDownBackspace = '__dropdown_keydown_backspace__' ;
+  const DropdownClick = '__dropdown_click__' ;
+  const FunctionAddSelectedItem = '__function_add_selected_item__' ;
+  const FunctionRemoveSelectedItem = '__function_remove_selected_item__' ;
+  const FunctionSetSelectedItems = '__function_set_selected_items__' ;
+  const FunctionSetActiveIndex = '__function_set_active_index__' ;
+  const FunctionReset = '__function_reset__' ;
 
   var stateChangeTypes = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -4152,13 +4149,17 @@
   /* eslint-disable complexity */
 
   function downshiftMultipleSelectionReducer(state, action) {
-    var type = action.type,
-        index = action.index,
-        props = action.props,
-        selectedItem = action.selectedItem;
-    var activeIndex = state.activeIndex,
-        selectedItems = state.selectedItems;
-    var changes;
+    const {
+      type,
+      index,
+      props,
+      selectedItem
+    } = action;
+    const {
+      activeIndex,
+      selectedItems
+    } = state;
+    let changes;
 
     switch (type) {
       case SelectedItemClick:
@@ -4182,7 +4183,7 @@
       case SelectedItemKeyDownBackspace:
       case SelectedItemKeyDownDelete:
         {
-          var newActiveIndex = activeIndex;
+          let newActiveIndex = activeIndex;
 
           if (selectedItems.length === 1) {
             newActiveIndex = -1;
@@ -4190,11 +4191,12 @@
             newActiveIndex = selectedItems.length - 2;
           }
 
-          changes = _extends({
-            selectedItems: [].concat(selectedItems.slice(0, activeIndex), selectedItems.slice(activeIndex + 1))
-          }, {
-            activeIndex: newActiveIndex
-          });
+          changes = {
+            selectedItems: [...selectedItems.slice(0, activeIndex), ...selectedItems.slice(activeIndex + 1)],
+            ...{
+              activeIndex: newActiveIndex
+            }
+          };
           break;
         }
 
@@ -4212,7 +4214,7 @@
 
       case FunctionAddSelectedItem:
         changes = {
-          selectedItems: [].concat(selectedItems, [selectedItem])
+          selectedItems: [...selectedItems, selectedItem]
         };
         break;
 
@@ -4224,26 +4226,30 @@
 
       case FunctionRemoveSelectedItem:
         {
-          var _newActiveIndex = activeIndex;
-          var selectedItemIndex = selectedItems.indexOf(selectedItem);
+          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;
+            }
 
-          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
+            };
           }
 
-          changes = _extends({
-            selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1))
-          }, {
-            activeIndex: _newActiveIndex
-          });
           break;
         }
 
       case FunctionSetSelectedItems:
         {
-          var newSelectedItems = action.selectedItems;
+          const {
+            selectedItems: newSelectedItems
+          } = action;
           changes = {
             selectedItems: newSelectedItems
           };
@@ -4252,9 +4258,11 @@
 
       case FunctionSetActiveIndex:
         {
-          var _newActiveIndex2 = action.activeIndex;
+          const {
+            activeIndex: newActiveIndex
+          } = action;
           changes = {
-            activeIndex: _newActiveIndex2
+            activeIndex: newActiveIndex
           };
           break;
         }
@@ -4270,11 +4278,11 @@
         throw new Error('Reducer called without proper action type.');
     }
 
-    return _extends({}, state, changes);
+    return { ...state,
+      ...changes
+    };
   }
 
-  var _excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
-      _excluded2 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
   useMultipleSelection.stateChangeTypes = stateChangeTypes;
 
   function useMultipleSelection(userProps) {
@@ -4284,47 +4292,47 @@
 
     validatePropTypes(userProps, useMultipleSelection); // Props defaults and destructuring.
 
-    var props = _extends({}, defaultProps, userProps);
-
-    var getA11yRemovalMessage = props.getA11yRemovalMessage,
-        itemToString = props.itemToString,
-        environment = props.environment,
-        keyNavigationNext = props.keyNavigationNext,
-        keyNavigationPrevious = props.keyNavigationPrevious; // Reducer init.
-
-    var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props),
-        state = _useControlledReducer[0],
-        dispatch = _useControlledReducer[1];
-
-    var activeIndex = state.activeIndex,
-        selectedItems = state.selectedItems; // Refs.
-
-    var isInitialMountRef = preact.useRef(true);
-    var dropdownRef = preact.useRef(null);
-    var previousSelectedItemsRef = preact.useRef(selectedItems);
-    var selectedItemRefs = preact.useRef();
+    const props = { ...defaultProps,
+      ...userProps
+    };
+    const {
+      getA11yRemovalMessage,
+      itemToString,
+      environment,
+      keyNavigationNext,
+      keyNavigationPrevious
+    } = props; // Reducer init.
+
+    const [state, dispatch] = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props);
+    const {
+      activeIndex,
+      selectedItems
+    } = state; // Refs.
+
+    const isInitialMountRef = preact.useRef(true);
+    const dropdownRef = preact.useRef(null);
+    const previousSelectedItemsRef = preact.useRef(selectedItems);
+    const selectedItemRefs = preact.useRef();
     selectedItemRefs.current = [];
-    var latest = useLatestRef({
-      state: state,
-      props: props
+    const latest = useLatestRef({
+      state,
+      props
     }); // Effects.
 
     /* Sets a11y status message on changes in selectedItem. */
 
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       if (isInitialMountRef.current) {
         return;
       }
 
       if (selectedItems.length < previousSelectedItemsRef.current.length) {
-        var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) {
-          return selectedItems.indexOf(item) < 0;
-        });
+        const removedSelectedItem = previousSelectedItemsRef.current.find(item => selectedItems.indexOf(item) < 0);
         setStatus(getA11yRemovalMessage({
-          itemToString: itemToString,
+          itemToString,
           resultCount: selectedItems.length,
-          removedSelectedItem: removedSelectedItem,
-          activeIndex: activeIndex,
+          removedSelectedItem,
+          activeIndex,
           activeSelectedItem: selectedItems[activeIndex]
         }), environment.document);
       }
@@ -4332,7 +4340,7 @@
       previousSelectedItemsRef.current = selectedItems; // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedItems.length]); // Sets focus on active item.
 
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       if (isInitialMountRef.current) {
         return;
       }
@@ -4345,181 +4353,191 @@
     }, [activeIndex]);
     useControlPropsValidator({
       isInitialMount: isInitialMountRef.current,
-      props: props,
-      state: state
+      props,
+      state
     });
-    var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
+    const setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
 
-    preact.useEffect(function () {
+    preact.useEffect(() => {
       isInitialMountRef.current = false;
     }, []); // Event handler functions.
 
-    var selectedItemKeyDownHandlers = preact.useMemo(function () {
-      var _ref;
-
-      return _ref = {}, _ref[keyNavigationPrevious] = function () {
+    const selectedItemKeyDownHandlers = preact.useMemo(() => ({
+      [keyNavigationPrevious]() {
         dispatch({
           type: SelectedItemKeyDownNavigationPrevious
         });
-      }, _ref[keyNavigationNext] = function () {
+      },
+
+      [keyNavigationNext]() {
         dispatch({
           type: SelectedItemKeyDownNavigationNext
         });
-      }, _ref.Delete = function Delete() {
+      },
+
+      Delete() {
         dispatch({
           type: SelectedItemKeyDownDelete
         });
-      }, _ref.Backspace = function Backspace() {
+      },
+
+      Backspace() {
         dispatch({
           type: SelectedItemKeyDownBackspace
         });
-      }, _ref;
-    }, [dispatch, keyNavigationNext, keyNavigationPrevious]);
-    var dropdownKeyDownHandlers = preact.useMemo(function () {
-      var _ref2;
+      }
 
-      return _ref2 = {}, _ref2[keyNavigationPrevious] = function (event) {
+    }), [dispatch, keyNavigationNext, keyNavigationPrevious]);
+    const dropdownKeyDownHandlers = preact.useMemo(() => ({
+      [keyNavigationPrevious](event) {
         if (isKeyDownOperationPermitted(event)) {
           dispatch({
             type: DropdownKeyDownNavigationPrevious
           });
         }
-      }, _ref2.Backspace = function Backspace(event) {
+      },
+
+      Backspace(event) {
         if (isKeyDownOperationPermitted(event)) {
           dispatch({
             type: DropdownKeyDownBackspace
           });
         }
-      }, _ref2;
-    }, [dispatch, keyNavigationPrevious]); // Getter props.
-
-    var getSelectedItemProps = preact.useCallback(function (_temp) {
-      var _extends2;
-
-      var _ref3 = _temp === void 0 ? {} : _temp,
-          _ref3$refKey = _ref3.refKey,
-          refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
-          ref = _ref3.ref,
-          onClick = _ref3.onClick,
-          onKeyDown = _ref3.onKeyDown,
-          selectedItem = _ref3.selectedItem,
-          index = _ref3.index,
-          rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+      }
 
-      var latestState = latest.current.state;
-      var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
+    }), [dispatch, keyNavigationPrevious]); // Getter props.
+
+    const getSelectedItemProps = preact.useCallback(function (_temp) {
+      let {
+        refKey = 'ref',
+        ref,
+        onClick,
+        onKeyDown,
+        selectedItem,
+        index,
+        ...rest
+      } = _temp === void 0 ? {} : _temp;
+      const {
+        state: latestState
+      } = latest.current;
+      const itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
 
       if (itemIndex < 0) {
         throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
       }
 
-      var selectedItemHandleClick = function selectedItemHandleClick() {
+      const selectedItemHandleClick = () => {
         dispatch({
           type: SelectedItemClick,
-          index: index
+          index
         });
       };
 
-      var selectedItemHandleKeyDown = function selectedItemHandleKeyDown(event) {
-        var key = normalizeArrowKey(event);
+      const selectedItemHandleKeyDown = event => {
+        const key = normalizeArrowKey(event);
 
         if (key && selectedItemKeyDownHandlers[key]) {
           selectedItemKeyDownHandlers[key](event);
         }
       };
 
-      return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) {
-        if (selectedItemNode) {
-          selectedItemRefs.current.push(selectedItemNode);
-        }
-      }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
+      return {
+        [refKey]: handleRefs(ref, selectedItemNode => {
+          if (selectedItemNode) {
+            selectedItemRefs.current.push(selectedItemNode);
+          }
+        }),
+        tabIndex: index === latestState.activeIndex ? 0 : -1,
+        onClick: callAllEventHandlers(onClick, selectedItemHandleClick),
+        onKeyDown: callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown),
+        ...rest
+      };
     }, [dispatch, latest, selectedItemKeyDownHandlers]);
-    var getDropdownProps = preact.useCallback(function (_temp2, _temp3) {
-      var _extends3;
-
-      var _ref4 = _temp2 === void 0 ? {} : _temp2,
-          _ref4$refKey = _ref4.refKey,
-          refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
-          ref = _ref4.ref,
-          onKeyDown = _ref4.onKeyDown,
-          onClick = _ref4.onClick,
-          _ref4$preventKeyActio = _ref4.preventKeyAction,
-          preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio,
-          rest = _objectWithoutPropertiesLoose(_ref4, _excluded2);
-
-      var _ref5 = _temp3 === void 0 ? {} : _temp3,
-          _ref5$suppressRefErro = _ref5.suppressRefError,
-          suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
-
+    const getDropdownProps = preact.useCallback(function (_temp2, _temp3) {
+      let {
+        refKey = 'ref',
+        ref,
+        onKeyDown,
+        onClick,
+        preventKeyAction = false,
+        ...rest
+      } = _temp2 === void 0 ? {} : _temp2;
+      let {
+        suppressRefError = false
+      } = _temp3 === void 0 ? {} : _temp3;
       setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
 
-      var dropdownHandleKeyDown = function dropdownHandleKeyDown(event) {
-        var key = normalizeArrowKey(event);
+      const dropdownHandleKeyDown = event => {
+        const key = normalizeArrowKey(event);
 
         if (key && dropdownKeyDownHandlers[key]) {
           dropdownKeyDownHandlers[key](event);
         }
       };
 
-      var dropdownHandleClick = function dropdownHandleClick() {
+      const dropdownHandleClick = () => {
         dispatch({
           type: DropdownClick
         });
       };
 
-      return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
-        if (dropdownNode) {
-          dropdownRef.current = dropdownNode;
-        }
-      }), _extends3), !preventKeyAction && {
-        onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
-        onClick: callAllEventHandlers(onClick, dropdownHandleClick)
-      }, rest);
+      return {
+        [refKey]: handleRefs(ref, dropdownNode => {
+          if (dropdownNode) {
+            dropdownRef.current = dropdownNode;
+          }
+        }),
+        ...(!preventKeyAction && {
+          onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
+          onClick: callAllEventHandlers(onClick, dropdownHandleClick)
+        }),
+        ...rest
+      };
     }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns
 
-    var addSelectedItem = preact.useCallback(function (selectedItem) {
+    const addSelectedItem = preact.useCallback(selectedItem => {
       dispatch({
         type: FunctionAddSelectedItem,
-        selectedItem: selectedItem
+        selectedItem
       });
     }, [dispatch]);
-    var removeSelectedItem = preact.useCallback(function (selectedItem) {
+    const removeSelectedItem = preact.useCallback(selectedItem => {
       dispatch({
         type: FunctionRemoveSelectedItem,
-        selectedItem: selectedItem
+        selectedItem
       });
     }, [dispatch]);
-    var setSelectedItems = preact.useCallback(function (newSelectedItems) {
+    const setSelectedItems = preact.useCallback(newSelectedItems => {
       dispatch({
         type: FunctionSetSelectedItems,
         selectedItems: newSelectedItems
       });
     }, [dispatch]);
-    var setActiveIndex = preact.useCallback(function (newActiveIndex) {
+    const setActiveIndex = preact.useCallback(newActiveIndex => {
       dispatch({
         type: FunctionSetActiveIndex,
         activeIndex: newActiveIndex
       });
     }, [dispatch]);
-    var reset = preact.useCallback(function () {
+    const reset = preact.useCallback(() => {
       dispatch({
         type: FunctionReset
       });
     }, [dispatch]);
     return {
-      getSelectedItemProps: getSelectedItemProps,
-      getDropdownProps: getDropdownProps,
-      addSelectedItem: addSelectedItem,
-      removeSelectedItem: removeSelectedItem,
-      setSelectedItems: setSelectedItems,
-      setActiveIndex: setActiveIndex,
-      reset: reset,
-      selectedItems: selectedItems,
-      activeIndex: activeIndex
+      getSelectedItemProps,
+      getDropdownProps,
+      addSelectedItem,
+      removeSelectedItem,
+      setSelectedItems,
+      setActiveIndex,
+      reset,
+      selectedItems,
+      activeIndex
     };
   }
 
-  exports['default'] = Downshift$1;
+  exports["default"] = Downshift$1;
   exports.resetIdCounter = resetIdCounter;
   exports.useCombobox = useCombobox;
   exports.useMultipleSelection = useMultipleSelection;
@@ -4527,5 +4545,5 @@
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=downshift.umd.js.map