downshift 7.1.2 → 7.1.3-alpha.1

package/dist/downshift.umd.js

@@ -4,55 +4,6 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Downshift = {}, global.React));
 })(this, (function (exports, react) { 'use strict';
 
-  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 ? Object.assign.bind() : 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 ? Object.setPrototypeOf.bind() : 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 propTypes$3 = {exports: {}};
 
   var reactIs$1 = {exports: {}};
@@ -1312,9 +1263,9 @@
     reactIs.exports = reactIs_development;
   }
 
-  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}var i=function(e,i){var o=window,l=i.scrollMode,d=i.block,f=i.inline,h=i.boundary,u=i.skipOverflowHiddenElements,s="function"==typeof h?h:function(t){return t!==h};if(!t(e))throw new TypeError("Invalid target");for(var a,c,g=document.scrollingElement||document.documentElement,p=[],m=e;t(m)&&s(m);){if((m=null==(c=(a=m).parentElement)?a.getRootNode().host||null:c)===g){p.push(m);break}null!=m&&m===document.body&&n(m)&&!n(document.documentElement)||null!=m&&n(m,u)&&p.push(m);}for(var w=o.visualViewport?o.visualViewport.width:innerWidth,v=o.visualViewport?o.visualViewport.height:innerHeight,W=window.scrollX||pageXOffset,H=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),y=b.height,E=b.width,M=b.top,V=b.right,x=b.bottom,I=b.left,C="start"===d||"nearest"===d?M:"end"===d?x:M+y/2,R="center"===f?I+E/2:"end"===f?V:I,T=[],k=0;k<p.length;k++){var B=p[k],D=B.getBoundingClientRect(),O=D.height,X=D.width,Y=D.top,L=D.right,S=D.bottom,j=D.left;if("if-needed"===l&&M>=0&&I>=0&&x<=v&&V<=w&&M>=Y&&x<=S&&I>=j&&V<=L)return T;var N=getComputedStyle(B),q=parseInt(N.borderLeftWidth,10),z=parseInt(N.borderTopWidth,10),A=parseInt(N.borderRightWidth,10),F=parseInt(N.borderBottomWidth,10),G=0,J=0,K="offsetWidth"in B?B.offsetWidth-B.clientWidth-q-A:0,P="offsetHeight"in B?B.offsetHeight-B.clientHeight-z-F:0,Q="offsetWidth"in B?0===B.offsetWidth?0:X/B.offsetWidth:0,U="offsetHeight"in B?0===B.offsetHeight?0:O/B.offsetHeight:0;if(g===B)G="start"===d?C:"end"===d?C-v:"nearest"===d?r(H,H+v,v,z,F,H+C,H+C+y,y):C-v/2,J="start"===f?R:"center"===f?R-w/2:"end"===f?R-w:r(W,W+w,w,q,A,W+R,W+R+E,E),G=Math.max(0,G+H),J=Math.max(0,J+W);else {G="start"===d?C-Y-z:"end"===d?C-S+F+P:"nearest"===d?r(Y,S,O,z,F+P,C,C+y,y):C-(Y+O/2)+P/2,J="start"===f?R-j-q:"center"===f?R-(j+X/2)+K/2:"end"===f?R-L+A+K:r(j,L,X,q,A+K,R,R+E,E);var Z=B.scrollLeft,$=B.scrollTop;C+=$-(G=Math.max(0,Math.min($+G/U,B.scrollHeight-O/U+P))),R+=Z-(J=Math.max(0,Math.min(Z+J/Q,B.scrollWidth-X/Q+K)));}T.push({el:B,top:G,left:J});}return T};
+  let e=e=>"object"==typeof e&&null!=e&&1===e.nodeType,t=(e,t)=>(!t||"hidden"!==e)&&("visible"!==e&&"clip"!==e),n=(e,n)=>{if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){let l=getComputedStyle(e,null);return t(l.overflowY,n)||t(l.overflowX,n)||(e=>{let t=(e=>{if(!e.ownerDocument||!e.ownerDocument.defaultView)return null;try{return e.ownerDocument.defaultView.frameElement}catch(e){return null}})(e);return !!t&&(t.clientHeight<e.scrollHeight||t.clientWidth<e.scrollWidth)})(e)}return !1},l=(e,t,n,l,i,o,r,d)=>o<e&&r>t||o>e&&r<t?0:o<=e&&d<=n||r>=t&&d>=n?o-e-l:r>t&&d<n||o<e&&d>n?r-t+i:0,i=e=>{let t=e.parentElement;return null==t?e.getRootNode().host||null:t};var o=(t,o)=>{var r,d,h,f,u,s;if("undefined"==typeof document)return [];let{scrollMode:a,block:c,inline:g,boundary:m,skipOverflowHiddenElements:p}=o,w="function"==typeof m?m:e=>e!==m;if(!e(t))throw new TypeError("Invalid target");let W=document.scrollingElement||document.documentElement,H=[],b=t;for(;e(b)&&w(b);){if(b=i(b),b===W){H.push(b);break}null!=b&&b===document.body&&n(b)&&!n(document.documentElement)||null!=b&&n(b,p)&&H.push(b);}let v=null!=(d=null==(r=window.visualViewport)?void 0:r.width)?d:innerWidth,y=null!=(f=null==(h=window.visualViewport)?void 0:h.height)?f:innerHeight,E=null!=(u=window.scrollX)?u:pageXOffset,M=null!=(s=window.scrollY)?s:pageYOffset,{height:x,width:I,top:C,right:R,bottom:T,left:V}=t.getBoundingClientRect(),k="start"===c||"nearest"===c?C:"end"===c?T:C+x/2,B="center"===g?V+I/2:"end"===g?R:V,D=[];for(let e=0;e<H.length;e++){let t=H[e],{height:n,width:i,top:o,right:r,bottom:d,left:h}=t.getBoundingClientRect();if("if-needed"===a&&C>=0&&V>=0&&T<=y&&R<=v&&C>=o&&T<=d&&V>=h&&R<=r)return D;let f=getComputedStyle(t),u=parseInt(f.borderLeftWidth,10),s=parseInt(f.borderTopWidth,10),m=parseInt(f.borderRightWidth,10),p=parseInt(f.borderBottomWidth,10),w=0,b=0,O="offsetWidth"in t?t.offsetWidth-t.clientWidth-u-m:0,X="offsetHeight"in t?t.offsetHeight-t.clientHeight-s-p:0,Y="offsetWidth"in t?0===t.offsetWidth?0:i/t.offsetWidth:0,L="offsetHeight"in t?0===t.offsetHeight?0:n/t.offsetHeight:0;if(W===t)w="start"===c?k:"end"===c?k-y:"nearest"===c?l(M,M+y,y,s,p,M+k,M+k+x,x):k-y/2,b="start"===g?B:"center"===g?B-v/2:"end"===g?B-v:l(E,E+v,v,u,m,E+B,E+B+I,I),w=Math.max(0,w+M),b=Math.max(0,b+E);else {w="start"===c?k-o-s:"end"===c?k-d+p+X:"nearest"===c?l(o,d,n,s,p+X,k,k+x,x):k-(o+n/2)+X/2,b="start"===g?B-h-u:"center"===g?B-(h+i/2)+O/2:"end"===g?B-r+m+O:l(h,r,i,u,m+O,B,B+I,I);let{scrollLeft:e,scrollTop:f}=t;w=Math.max(0,Math.min(f+w/L,t.scrollHeight-n/L+X)),b=Math.max(0,Math.min(e+b/Y,t.scrollWidth-i/Y+O)),k+=f-w,B+=e-b;}D.push({el:t,top:w,left:b});}return D};
 
-  var idCounter = 0;
+  let idCounter = 0;
 
   /**
    * Accepts a parameter and returns it if it's a function
@@ -1338,15 +1289,17 @@
     if (!node) {
       return;
     }
-    var actions = i(node, {
+    const actions = o(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;
     });
@@ -1359,7 +1312,7 @@
    * @return {Boolean} whether the parent is the child or the child is in the parent
    */
   function isOrContainsNode(parent, child, environment) {
-    var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
+    const result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
     return result;
   }
 
@@ -1372,7 +1325,7 @@
    * @return {Function} the debounced function
    */
   function debounce(fn, time) {
-    var timeoutId;
+    let timeoutId;
     function cancel() {
       if (timeoutId) {
         clearTimeout(timeoutId);
@@ -1383,9 +1336,9 @@
         args[_key] = arguments[_key];
       }
       cancel();
-      timeoutId = setTimeout(function () {
+      timeoutId = setTimeout(() => {
         timeoutId = null;
-        fn.apply(void 0, args);
+        fn(...args);
       }, time);
     }
     wrapper.cancel = cancel;
@@ -1407,9 +1360,9 @@
       for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
         args[_key3 - 1] = arguments[_key3];
       }
-      return fns.some(function (fn) {
+      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;
       });
@@ -1419,8 +1372,8 @@
     for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
       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) {
@@ -1454,9 +1407,11 @@
    * @return {String} the a11y status message
    */
   function getA11yStatusMessage$1(_ref2) {
-    var isOpen = _ref2.isOpen,
-      resultCount = _ref2.resultCount,
-      previousResultCount = _ref2.previousResultCount;
+    let {
+      isOpen,
+      resultCount,
+      previousResultCount
+    } = _ref2;
     if (!isOpen) {
       return '';
     }
@@ -1464,7 +1419,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 key to select.";
+      return `${resultCount} result${resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
     }
     return '';
   }
@@ -1511,9 +1466,9 @@
    */
   function requiredProp(fnName, propName) {
     // eslint-disable-next-line no-console
-    console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
+    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
@@ -1522,8 +1477,8 @@
     if (state === void 0) {
       state = {};
     }
-    var result = {};
-    stateKeys.forEach(function (k) {
+    const result = {};
+    stateKeys.forEach(k => {
       if (state.hasOwnProperty(k)) {
         result[k] = state[k];
       }
@@ -1543,7 +1498,7 @@
    * @returns {Object} The merged controlled state.
    */
   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;
     }, {});
@@ -1568,11 +1523,13 @@
    * @return {String} keyboard key
    */
   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) {
-      return "Arrow" + key;
+      return `Arrow${key}`;
     }
     return key;
   }
@@ -1604,17 +1561,17 @@
     if (itemCount === 0) {
       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;
     } else if (newIndex > itemsLastIndex) {
       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;
     }
@@ -1632,20 +1589,20 @@
    * @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1.
    */
   function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
-    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;
         }
       }
     }
@@ -1669,30 +1626,28 @@
     if (checkActiveElement === void 0) {
       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);
+          console.error(`downshift: A component has changed the controlled prop "${propKey}" to be uncontrolled. ${warningDescription}`);
         } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
           // eslint-disable-next-line no-console
-          console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
+          console.error(`downshift: A component has changed the uncontrolled prop "${propKey}" to be controlled. ${warningDescription}`);
         }
       });
     };
   }
 
-  var cleanupStatus = debounce(function (documentProp) {
+  const cleanupStatus = debounce(documentProp => {
     getStatusDiv(documentProp).textContent = '';
   }, 500);
 
@@ -1701,7 +1656,7 @@
    * @param {Object} documentProp document passed by the user.
    */
   function setStatus(status, documentProp) {
-    var div = getStatusDiv(documentProp);
+    const div = getStatusDiv(documentProp);
     if (!status) {
       return;
     }
@@ -1718,7 +1673,7 @@
     if (documentProp === void 0) {
       documentProp = document;
     }
-    var statusDiv = documentProp.getElementById('a11y-status-message');
+    let statusDiv = documentProp.getElementById('a11y-status-message');
     if (statusDiv) {
       return statusDiv;
     }
@@ -1741,23 +1696,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,
@@ -1780,48 +1735,37 @@
     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 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"];
-  var Downshift = /*#__PURE__*/function () {
-    var Downshift = /*#__PURE__*/function (_Component) {
-      _inheritsLoose(Downshift, _Component);
-      function Downshift(_props) {
+  /* eslint camelcase:0 */
+  const Downshift = /*#__PURE__*/(() => {
+    class Downshift extends react.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";
-        _this.getItemId = _this.props.getItemId || function (index) {
-          return _this.id + "-item-" + index;
-        };
-        _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;
-            });
+        super(_props);
+        _this = this;
+        this.id = this.props.id || `downshift-${generateId()}`;
+        this.menuId = this.props.menuId || `${this.id}-menu`;
+        this.labelId = this.props.labelId || `${this.id}-label`;
+        this.inputId = this.props.inputId || `${this.id}-input`;
+        this.getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`);
+        this.input = null;
+        this.items = [];
+        this.itemCount = null;
+        this.previousResultCount = 0;
+        this.timeoutIds = [];
+        this.internalSetTimeout = (fn, time) => {
+          const id = setTimeout(() => {
+            this.timeoutIds = this.timeoutIds.filter(i => i !== id);
             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;
           }
@@ -1829,41 +1773,43 @@
             otherStateToSet = {};
           }
           otherStateToSet = pickState(otherStateToSet);
-          _this.internalSetState(_extends({
-            highlightedIndex: highlightedIndex
-          }, otherStateToSet));
-        };
-        _this.clearSelection = function (cb) {
           _this.internalSetState({
+            highlightedIndex,
+            ...otherStateToSet
+          });
+        };
+        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';
+        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
@@ -1871,21 +1817,24 @@
           // 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;
+          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);
+            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 = {};
+            const nextState = {};
             // we need to call on change if the outside world is controlling any of our state
             // and we're trying to update that state. OR if the selection has changed and we're
             // trying to update the selection
@@ -1893,7 +1842,7 @@
               onChangeArg = newStateToSet.selectedItem;
             }
             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]) {
@@ -1910,7 +1859,7 @@
               }
               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];
               }
             });
@@ -1918,58 +1867,66 @@
             // 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;
-          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);
+          const {
+            isOpen
+          } = _this.getState();
+          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
               });
@@ -1977,26 +1934,24 @@
               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
               });
@@ -2004,32 +1959,32 @@
               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;
               }
@@ -2038,109 +1993,112 @@
               });
             }
           },
-          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);
-          if (_this.buttonKeyDownHandlers[key]) {
-            _this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
+        this.buttonHandleKeyDown = event => {
+          const key = normalizeArrowKey(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
@@ -2148,55 +2106,59 @@
           // when building for production and should therefore have no impact on production code.
           {
             // Ensure that toggle of menu occurs after the potential blur event in iOS
-            _this.internalSetTimeout(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 = 'onChange';
           }
-          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,
@@ -2205,76 +2167,82 @@
             // 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);
-          if (key && _this.inputKeyDownHandlers[key]) {
-            _this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
+        this.inputHandleKeyDown = event => {
+          const key = normalizeArrowKey(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);
-            if (!_this.isMouseDown && !downshiftButtonIsActive) {
-              _this.reset({
+          this.internalSetTimeout(() => {
+            const downshiftButtonIsActive = this.props.environment.document && !!this.props.environment.document.activeElement && !!this.props.environment.document.activeElement.dataset && this.props.environment.document.activeElement.dataset.toggle && this._rootNode && this._rootNode.contains(this.props.environment.document.activeElement);
+            if (!this.isMouseDown && !downshiftButtonIsActive) {
+              this.reset({
                 type: blurInput
               });
             }
           });
         };
-        _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);
+        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);
             index = _this.items.indexOf(item);
           } else {
             _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;
               }
@@ -2287,66 +2255,75 @@
               // from under the user which is currently scrolling/moving the
               // cursor
               _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
           // 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') {
                 _this.setHighlightedIndex(highlightedIndex, otherStateToSet);
@@ -2355,58 +2332,57 @@
             cbToCb(cb)();
           });
         };
-        _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 = [];
@@ -2420,113 +2396,117 @@
        *
        * @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;
         } else if (this.props.itemCount !== undefined) {
           itemCount = this.props.itemCount;
         }
         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);
@@ -2539,20 +2519,18 @@
           // 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;
+          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);
-            if (!contextWithinDownshift && _this7.getState().isOpen) {
-              _this7.reset({
+            const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment);
+            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
@@ -2561,31 +2539,31 @@
           // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
           // If the user taps outside of Downshift, the component should be reset,
           // but not if the user is swiping
-          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);
-            if (!_this7.isTouchMove && !contextWithinDownshift && _this7.getState().isOpen) {
-              _this7.reset({
+          const onTouchEnd = event => {
+            const contextWithinDownshift = targetWithinDownshift(event.target, [this._rootNode, this._menuNode], this.props.environment, false);
+            if (!this.isTouchMove && !contextWithinDownshift && this.getState().isOpen) {
+              this.reset({
                 type: touchEnd
-              }, 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);
@@ -2593,17 +2571,19 @@
             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) */
@@ -2625,12 +2605,13 @@
         {
           this.updateStatus();
         }
-      };
-      _proto.componentWillUnmount = function componentWillUnmount() {
+      }
+      componentWillUnmount() {
         this.cleanup(); // avoids memory leak
-      };
-      _proto.render = function render() {
-        var children = unwrapArray(this.props.children, noop);
+      }
+
+      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.
@@ -2650,7 +2631,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;
         }
@@ -2672,14 +2653,13 @@
 
           throw new Error('downshift: If you return a non-DOM element, you must apply the getRootProps function');
         }
-      };
-      return Downshift;
-    }(react.Component);
+      }
+    }
     Downshift.defaultProps = {
       defaultHighlightedIndex: null,
       defaultIsOpen: false,
       getA11yStatusMessage: getA11yStatusMessage$1,
-      itemToString: function itemToString(i) {
+      itemToString: i => {
         if (i == null) {
           return '';
         }
@@ -2695,20 +2675,16 @@
       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;
-  }();
+  })();
   Downshift.propTypes = {
     children: PropTypes.func,
     defaultHighlightedIndex: PropTypes.number,
@@ -2754,61 +2730,70 @@
     /* eslint-enable react/no-unused-prop-types */
   } ;
   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
-      console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
+      console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
     }
   }
-  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
       console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
     } else if (!isComposite && refKeySpecified) {
       // eslint-disable-next-line no-console
-      console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
+      console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
     }
     if (!reactIs.exports.isForwardRef(element) && !getElementProps(element)[refKey]) {
       // eslint-disable-next-line no-console
-      console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element.");
+      console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
     }
   }
 
-  var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
-  var dropdownDefaultStateValues = {
+  const dropdownDefaultStateValues = {
     highlightedIndex: -1,
     isOpen: false,
     selectedItem: null,
     inputValue: ''
   };
   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]) {
         changes[key] = newState[key];
       }
     });
     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
+      });
     }
   }
 
@@ -2830,36 +2815,37 @@
    * @returns {string} The a11y message.
    */
   function getA11ySelectionMessage(selectionParameters) {
-    var selectedItem = selectionParameters.selectedItem,
-      itemToStringLocal = selectionParameters.itemToString;
-    return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+    const {
+      selectedItem,
+      itemToString: itemToStringLocal
+    } = selectionParameters;
+    return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
   }
 
   /**
    * Debounced call for updating the a11y message.
    */
-  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' ? react.useLayoutEffect : react.useEffect;
+  const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? react.useLayoutEffect : react.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 = react.useRef({
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
+    let {
+      id = `downshift-${generateId()}`,
+      labelId,
+      menuId,
+      getItemId,
+      toggleButtonId,
+      inputId
+    } = _ref;
+    const elementIdsRef = react.useRef({
+      labelId: labelId || `${id}-label`,
+      menuId: menuId || `${id}-menu`,
+      getItemId: getItemId || (index => `${id}-item-${index}`),
+      toggleButtonId: toggleButtonId || `${id}-toggle-button`,
+      inputId: inputId || `${id}-input`
     });
     return elementIdsRef.current;
   }
@@ -2879,10 +2865,10 @@
     return /^\S{1}$/.test(key);
   }
   function capitalizeString(string) {
-    return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
+    return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
   }
   function useLatestRef(val) {
-    var ref = react.useRef(val);
+    const ref = react.useRef(val);
     // technically this is not "concurrent mode safe" because we're manipulating
     // the value during render (so it's not idempotent). However, the places this
     // hook is used is to support memoizing callbacks which will be called
@@ -2903,28 +2889,26 @@
    * @returns {Array} An array with the state and an action dispatcher.
    */
   function useEnhancedReducer(reducer, initialState, props) {
-    var prevStateRef = react.useRef();
-    var actionRef = react.useRef();
-    var enhancedReducer = react.useCallback(function (state, action) {
+    const prevStateRef = react.useRef();
+    const actionRef = react.useRef();
+    const enhancedReducer = react.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 = react.useReducer(enhancedReducer, initialState),
-      state = _useReducer[0],
-      dispatch = _useReducer[1];
-    var propsRef = useLatestRef(props);
-    var dispatchWithProps = react.useCallback(function (action) {
-      return dispatch(_extends({
-        props: propsRef.current
-      }, action));
-    }, [propsRef]);
-    var action = actionRef.current;
-    react.useEffect(function () {
+    const [state, dispatch] = react.useReducer(enhancedReducer, initialState);
+    const propsRef = useLatestRef(props);
+    const dispatchWithProps = react.useCallback(action => dispatch({
+      props: propsRef.current,
+      ...action
+    }), [propsRef]);
+    const action = actionRef.current;
+    react.useEffect(() => {
       if (action && prevStateRef.current && prevStateRef.current !== state) {
         callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
       }
@@ -2943,16 +2927,14 @@
    * @returns {Array} An array with the state and an action dispatcher.
    */
   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,
     environment: /* istanbul ignore next (ssr) */
     typeof window === 'undefined' ? {} : window
   };
@@ -2960,7 +2942,7 @@
     if (defaultStateValues === void 0) {
       defaultStateValues = dropdownDefaultStateValues;
     }
-    var defaultValue = props["default" + capitalizeString(propKey)];
+    const defaultValue = props[`default${capitalizeString(propKey)}`];
     if (defaultValue !== undefined) {
       return defaultValue;
     }
@@ -2970,34 +2952,38 @@
     if (defaultStateValues === void 0) {
       defaultStateValues = dropdownDefaultStateValues;
     }
-    var value = props[propKey];
+    const value = props[propKey];
     if (value !== undefined) {
       return value;
     }
-    var initialValue = props["initial" + capitalizeString(propKey)];
+    const initialValue = props[`initial${capitalizeString(propKey)}`];
     if (initialValue !== undefined) {
       return initialValue;
     }
     return getDefaultValue$1(props, propKey, defaultStateValues);
   }
   function getInitialState$2(props) {
-    var selectedItem = getInitialValue$1(props, 'selectedItem');
-    var isOpen = getInitialValue$1(props, 'isOpen');
-    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) {
-    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;
     }
@@ -3028,34 +3014,30 @@
    * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
    */
   function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
-    var mouseAndTouchTrackersRef = react.useRef({
+    const mouseAndTouchTrackersRef = react.useRef({
       isMouseDown: false,
       isTouchMove: false
     });
-    react.useEffect(function () {
+    react.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();
         }
       };
@@ -3078,9 +3060,7 @@
 
   /* istanbul ignore next */
   // 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.
    *
@@ -3089,77 +3069,82 @@
    */
   /* istanbul ignore next */
   {
-    useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
-      var isInitialMountRef = react.useRef(true);
+    useGetterPropsCalledChecker = function () {
+      const isInitialMountRef = react.useRef(true);
       for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
         propKeys[_key] = arguments[_key];
       }
-      var getterPropsCalledRef = react.useRef(propKeys.reduce(function (acc, propKey) {
+      const getterPropsCalledRef = react.useRef(propKeys.reduce((acc, propKey) => {
         acc[propKey] = {};
         return acc;
       }, {}));
-      react.useEffect(function () {
-        Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
-          var propCallInfo = getterPropsCalledRef.current[propKey];
+      react.useEffect(() => {
+        Object.keys(getterPropsCalledRef.current).forEach(propKey => {
+          const propCallInfo = getterPropsCalledRef.current[propKey];
           if (isInitialMountRef.current) {
             if (!Object.keys(propCallInfo).length) {
               // eslint-disable-next-line no-console
-              console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
+              console.error(`downshift: You forgot to call the ${propKey} getter function on your component / element.`);
               return;
             }
           }
-          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
-            console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
+            console.error(`downshift: The ref prop "${refKey}" from ${propKey} was not applied correctly on your element.`);
           }
         });
         isInitialMountRef.current = false;
       });
-      var setGetterPropCallInfo = react.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
+      const setGetterPropCallInfo = react.useCallback((propKey, suppressRefError, refKey, elementRef) => {
         getterPropsCalledRef.current[propKey] = {
-          suppressRefError: suppressRefError,
-          refKey: refKey,
-          elementRef: elementRef
+          suppressRefError,
+          refKey,
+          elementRef
         };
       }, []);
       return setGetterPropCallInfo;
     };
   }
   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.
-    react.useEffect(function () {
+    react.useEffect(() => {
       if (isInitialMount || false) {
         return;
       }
-      updateA11yStatus(function () {
-        return getA11yMessage(_extends({
-          highlightedIndex: highlightedIndex,
-          highlightedItem: items[highlightedIndex],
-          resultCount: items.length
-        }, rest));
-      }, environment.document);
+      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 = react.useRef(true);
+    const shouldScrollRef = react.useRef(true);
     // Scroll on highlighted item if change comes from keyboard.
-    useIsomorphicLayoutEffect(function () {
+    useIsomorphicLayoutEffect(() => {
       if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
         return;
       }
@@ -3174,16 +3159,18 @@
   }
 
   // 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 = react.useRef(props);
-      react.useEffect(function () {
+      const prevPropsRef = react.useRef(props);
+      react.useEffect(() => {
         if (isInitialMount) {
           return;
         }
@@ -3194,9 +3181,11 @@
   }
 
   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:
         changes = {
@@ -3247,7 +3236,10 @@
       default:
         throw new Error('Reducer called without proper action type.');
     }
-    return _extends({}, state, changes);
+    return {
+      ...state,
+      ...changes
+    };
   }
   /* eslint-enable complexity */
 
@@ -3359,28 +3351,28 @@
       };
   }
 
-  var ToggleButtonClick$1 = '__togglebutton_click__' ;
-  var ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__' ;
-  var ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__' ;
-  var ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__' ;
-  var ToggleButtonKeyDownEscape = '__togglebutton_keydown_escape__' ;
-  var ToggleButtonKeyDownHome = '__togglebutton_keydown_home__' ;
-  var ToggleButtonKeyDownEnd = '__togglebutton_keydown_end__' ;
-  var ToggleButtonKeyDownEnter = '__togglebutton_keydown_enter__' ;
-  var ToggleButtonKeyDownSpaceButton = '__togglebutton_keydown_space_button__' ;
-  var ToggleButtonKeyDownPageUp = '__togglebutton_keydown_page_up__' ;
-  var ToggleButtonKeyDownPageDown = '__togglebutton_keydown_page_down__' ;
-  var ToggleButtonBlur = '__togglebutton_blur__' ;
-  var MenuMouseLeave$1 = '__menu_mouse_leave__' ;
-  var ItemMouseMove$1 = '__item_mouse_move__' ;
-  var ItemClick$1 = '__item_click__' ;
-  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 ToggleButtonClick$1 = '__togglebutton_click__' ;
+  const ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__' ;
+  const ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__' ;
+  const ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__' ;
+  const ToggleButtonKeyDownEscape = '__togglebutton_keydown_escape__' ;
+  const ToggleButtonKeyDownHome = '__togglebutton_keydown_home__' ;
+  const ToggleButtonKeyDownEnd = '__togglebutton_keydown_end__' ;
+  const ToggleButtonKeyDownEnter = '__togglebutton_keydown_enter__' ;
+  const ToggleButtonKeyDownSpaceButton = '__togglebutton_keydown_space_button__' ;
+  const ToggleButtonKeyDownPageUp = '__togglebutton_keydown_page_up__' ;
+  const ToggleButtonKeyDownPageDown = '__togglebutton_keydown_page_down__' ;
+  const ToggleButtonBlur = '__togglebutton_blur__' ;
+  const MenuMouseLeave$1 = '__menu_mouse_leave__' ;
+  const ItemMouseMove$1 = '__item_mouse_move__' ;
+  const ItemClick$1 = '__item_click__' ;
+  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,
@@ -3410,10 +3402,12 @@
 
   /* eslint-disable complexity */
   function downshiftSelectReducer(state, action) {
-    var type = action.type,
-      props = action.props,
-      altKey = action.altKey;
-    var changes;
+    const {
+      type,
+      props,
+      altKey
+    } = action;
+    let changes;
     switch (type) {
       case ItemClick$1:
         changes = {
@@ -3424,10 +3418,10 @@
         break;
       case ToggleButtonKeyDownCharacter:
         {
-          var lowercasedKey = action.key;
-          var inputValue = "" + state.inputValue + lowercasedKey;
-          var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.indexOf(state.selectedItem) : state.highlightedIndex;
-          var highlightedIndex = getItemIndexByCharacterKey({
+          const lowercasedKey = action.key;
+          const inputValue = `${state.inputValue}${lowercasedKey}`;
+          const prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.indexOf(state.selectedItem) : state.highlightedIndex;
+          const highlightedIndex = getItemIndexByCharacterKey({
             keysSoFar: inputValue,
             highlightedIndex: prevHighlightedIndex,
             items: props.items,
@@ -3435,33 +3429,34 @@
             getItemNodeFromIndex: action.getItemNodeFromIndex
           });
           changes = {
-            inputValue: inputValue,
-            highlightedIndex: highlightedIndex,
+            inputValue,
+            highlightedIndex,
             isOpen: true
           };
         }
         break;
       case ToggleButtonKeyDownArrowDown:
         {
-          var _highlightedIndex = state.isOpen ? getNextWrappingIndex(1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1);
+          const highlightedIndex = state.isOpen ? getNextWrappingIndex(1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1);
           changes = {
-            highlightedIndex: _highlightedIndex,
+            highlightedIndex,
             isOpen: true
           };
         }
         break;
       case ToggleButtonKeyDownArrowUp:
         if (state.isOpen && altKey) {
-          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]
+            })
+          };
         } else {
-          var _highlightedIndex2 = state.isOpen ? getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : getHighlightedIndexOnOpen(props, state, -1);
+          const highlightedIndex = state.isOpen ? getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : getHighlightedIndexOnOpen(props, state, -1);
           changes = {
-            highlightedIndex: _highlightedIndex2,
+            highlightedIndex,
             isOpen: true
           };
         }
@@ -3469,12 +3464,13 @@
       // only triggered when menu is open.
       case ToggleButtonKeyDownEnter:
       case ToggleButtonKeyDownSpaceButton:
-        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 ToggleButtonKeyDownHome:
         changes = {
@@ -3505,12 +3501,13 @@
         };
         break;
       case ToggleButtonBlur:
-        changes = _extends({
+        changes = {
           isOpen: false,
-          highlightedIndex: -1
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex]
-        });
+          highlightedIndex: -1,
+          ...(state.highlightedIndex >= 0 && {
+            selectedItem: props.items[state.highlightedIndex]
+          })
+        };
         break;
       case FunctionSelectItem$1:
         changes = {
@@ -3520,13 +3517,13 @@
       default:
         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 = ["onBlur", "onClick", "onKeyDown", "refKey", "ref"],
-    _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "refKey", "ref", "disabled"];
   useSelect.stateChangeTypes = stateChangeTypes$2;
   function useSelect(userProps) {
     if (userProps === void 0) {
@@ -3534,76 +3531,81 @@
     }
     validatePropTypes$2(userProps, useSelect);
     // Props defaults and destructuring.
-    var props = _extends({}, defaultProps$2, userProps);
-    var items = props.items,
-      scrollIntoView = props.scrollIntoView,
-      environment = props.environment,
-      itemToString = props.itemToString,
-      getA11ySelectionMessage = props.getA11ySelectionMessage,
-      getA11yStatusMessage = props.getA11yStatusMessage;
+    const props = {
+      ...defaultProps$2,
+      ...userProps
+    };
+    const {
+      items,
+      scrollIntoView,
+      environment,
+      itemToString,
+      getA11ySelectionMessage,
+      getA11yStatusMessage
+    } = props;
     // 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;
+    const initialState = getInitialState$2(props);
+    const [state, dispatch] = useControlledReducer$1(downshiftSelectReducer, initialState, props);
+    const {
+      isOpen,
+      highlightedIndex,
+      selectedItem,
+      inputValue
+    } = state;
 
     // Element efs.
-    var toggleButtonRef = react.useRef(null);
-    var menuRef = react.useRef(null);
-    var itemRefs = react.useRef({});
+    const toggleButtonRef = react.useRef(null);
+    const menuRef = react.useRef(null);
+    const itemRefs = react.useRef({});
     // used to keep the inputValue clearTimeout object between renders.
-    var clearTimeoutRef = react.useRef(null);
+    const clearTimeoutRef = react.useRef(null);
     // prevent id re-generation between renders.
-    var elementIds = useElementIds(props);
+    const elementIds = useElementIds(props);
     // used to keep track of how many items we had on previous cycle.
-    var previousResultCountRef = react.useRef();
-    var isInitialMountRef = react.useRef(true);
+    const previousResultCountRef = react.useRef();
+    const isInitialMountRef = react.useRef(true);
     // utility callback to get item element.
-    var latest = useLatestRef({
-      state: state,
-      props: props
+    const latest = useLatestRef({
+      state,
+      props
     });
 
     // Some utils.
-    var getItemNodeFromIndex = react.useCallback(function (index) {
-      return itemRefs.current[elementIds.getItemId(index)];
-    }, [elementIds]);
+    const getItemNodeFromIndex = react.useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]);
 
     // Effects.
     // Sets a11y status message on changes in state.
-    useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
+    useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
       isInitialMount: isInitialMountRef.current,
       previousResultCount: previousResultCountRef.current,
-      items: items,
-      environment: environment,
-      itemToString: itemToString
-    }, state));
+      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));
+      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.
-    react.useEffect(function () {
+    react.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: ''
@@ -3611,13 +3613,13 @@
       }, 500);
 
       // Cancel any pending debounced calls on mount
-      return function () {
+      return () => {
         clearTimeoutRef.current.cancel();
       };
     }, []);
 
     // Invokes the keysSoFar callback set up above.
-    react.useEffect(function () {
+    react.useEffect(() => {
       if (!inputValue) {
         return;
       }
@@ -3625,234 +3627,249 @@
     }, [dispatch, inputValue]);
     useControlPropsValidator({
       isInitialMount: isInitialMountRef.current,
-      props: props,
-      state: state
+      props,
+      state
     });
-    react.useEffect(function () {
+    react.useEffect(() => {
       if (isInitialMountRef.current) {
         return;
       }
       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: ToggleButtonBlur
       });
     });
-    var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
+    const setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
     // Make initial ref false.
-    react.useEffect(function () {
+    react.useEffect(() => {
       isInitialMountRef.current = false;
-      return function () {
+      return () => {
         isInitialMountRef.current = true;
       };
     }, []);
     // Reset itemRefs on close.
-    react.useEffect(function () {
+    react.useEffect(() => {
       if (!isOpen) {
         itemRefs.current = {};
       }
     }, [isOpen]);
 
     // Event handler functions.
-    var toggleButtonKeyDownHandlers = react.useMemo(function () {
-      return {
-        ArrowDown: function ArrowDown(event) {
-          event.preventDefault();
+    const toggleButtonKeyDownHandlers = react.useMemo(() => ({
+      ArrowDown(event) {
+        event.preventDefault();
+        dispatch({
+          type: ToggleButtonKeyDownArrowDown,
+          getItemNodeFromIndex,
+          altKey: event.altKey
+        });
+      },
+      ArrowUp(event) {
+        event.preventDefault();
+        dispatch({
+          type: ToggleButtonKeyDownArrowUp,
+          getItemNodeFromIndex,
+          altKey: event.altKey
+        });
+      },
+      Home(event) {
+        event.preventDefault();
+        dispatch({
+          type: ToggleButtonKeyDownHome,
+          getItemNodeFromIndex
+        });
+      },
+      End(event) {
+        event.preventDefault();
+        dispatch({
+          type: ToggleButtonKeyDownEnd,
+          getItemNodeFromIndex
+        });
+      },
+      Escape() {
+        if (latest.current.state.isOpen) {
           dispatch({
-            type: ToggleButtonKeyDownArrowDown,
-            getItemNodeFromIndex: getItemNodeFromIndex,
-            altKey: event.altKey
+            type: ToggleButtonKeyDownEscape
           });
-        },
-        ArrowUp: function ArrowUp(event) {
+        }
+      },
+      Enter(event) {
+        event.preventDefault();
+        dispatch({
+          type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
+        });
+      },
+      PageUp(event) {
+        if (latest.current.state.isOpen) {
           event.preventDefault();
           dispatch({
-            type: ToggleButtonKeyDownArrowUp,
-            getItemNodeFromIndex: getItemNodeFromIndex,
-            altKey: event.altKey
+            type: ToggleButtonKeyDownPageUp,
+            getItemNodeFromIndex
           });
-        },
-        Home: function Home(event) {
+        }
+      },
+      PageDown(event) {
+        if (latest.current.state.isOpen) {
           event.preventDefault();
           dispatch({
-            type: ToggleButtonKeyDownHome,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: ToggleButtonKeyDownPageDown,
+            getItemNodeFromIndex
           });
-        },
-        End: function End(event) {
-          event.preventDefault();
+        }
+      },
+      ' '(event) {
+        event.preventDefault();
+        const currentState = latest.current.state;
+        if (!currentState.isOpen) {
           dispatch({
-            type: ToggleButtonKeyDownEnd,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: ToggleButtonClick$1
           });
-        },
-        Escape: function Escape() {
-          if (latest.current.state.isOpen) {
-            dispatch({
-              type: ToggleButtonKeyDownEscape
-            });
-          }
-        },
-        Enter: function Enter(event) {
-          event.preventDefault();
+          return;
+        }
+        if (currentState.inputValue) {
           dispatch({
-            type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
+            type: ToggleButtonKeyDownCharacter,
+            key: ' ',
+            getItemNodeFromIndex
+          });
+        } else {
+          dispatch({
+            type: ToggleButtonKeyDownSpaceButton
           });
-        },
-        PageUp: function PageUp(event) {
-          if (latest.current.state.isOpen) {
-            event.preventDefault();
-            dispatch({
-              type: ToggleButtonKeyDownPageUp,
-              getItemNodeFromIndex: getItemNodeFromIndex
-            });
-          }
-        },
-        PageDown: function PageDown(event) {
-          if (latest.current.state.isOpen) {
-            event.preventDefault();
-            dispatch({
-              type: ToggleButtonKeyDownPageDown,
-              getItemNodeFromIndex: getItemNodeFromIndex
-            });
-          }
-        },
-        ' ': function _(event) {
-          event.preventDefault();
-          var currentState = latest.current.state;
-          if (!currentState.isOpen) {
-            dispatch({
-              type: ToggleButtonClick$1
-            });
-            return;
-          }
-          if (currentState.inputValue) {
-            dispatch({
-              type: ToggleButtonKeyDownCharacter,
-              key: ' ',
-              getItemNodeFromIndex: getItemNodeFromIndex
-            });
-          } else {
-            dispatch({
-              type: ToggleButtonKeyDownSpaceButton
-            });
-          }
         }
-      };
-    }, [dispatch, getItemNodeFromIndex, latest]);
+      }
+    }), [dispatch, getItemNodeFromIndex, latest]);
 
     // Action functions.
-    var toggleMenu = react.useCallback(function () {
+    const toggleMenu = react.useCallback(() => {
       dispatch({
         type: FunctionToggleMenu$1
       });
     }, [dispatch]);
-    var closeMenu = react.useCallback(function () {
+    const closeMenu = react.useCallback(() => {
       dispatch({
         type: FunctionCloseMenu$1
       });
     }, [dispatch]);
-    var openMenu = react.useCallback(function () {
+    const openMenu = react.useCallback(() => {
       dispatch({
         type: FunctionOpenMenu$1
       });
     }, [dispatch]);
-    var setHighlightedIndex = react.useCallback(function (newHighlightedIndex) {
+    const setHighlightedIndex = react.useCallback(newHighlightedIndex => {
       dispatch({
         type: FunctionSetHighlightedIndex$1,
         highlightedIndex: newHighlightedIndex
       });
     }, [dispatch]);
-    var selectItem = react.useCallback(function (newSelectedItem) {
+    const selectItem = react.useCallback(newSelectedItem => {
       dispatch({
         type: FunctionSelectItem$1,
         selectedItem: newSelectedItem
       });
     }, [dispatch]);
-    var reset = react.useCallback(function () {
+    const reset = react.useCallback(() => {
       dispatch({
         type: FunctionReset$2
       });
     }, [dispatch]);
-    var setInputValue = react.useCallback(function (newInputValue) {
+    const setInputValue = react.useCallback(newInputValue => {
       dispatch({
         type: FunctionSetInputValue$1,
         inputValue: newInputValue
       });
     }, [dispatch]);
     // Getter functions.
-    var getLabelProps = react.useCallback(function (labelProps) {
-      return _extends({
-        id: elementIds.labelId,
-        htmlFor: elementIds.toggleButtonId
-      }, labelProps);
-    }, [elementIds]);
-    var getMenuProps = react.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.onKeyDown;
-        _ref.onBlur;
-        var 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 menuHandleMouseLeave = function menuHandleMouseLeave() {
+    const getLabelProps = react.useCallback(labelProps => ({
+      id: elementIds.labelId,
+      htmlFor: elementIds.toggleButtonId,
+      ...labelProps
+    }), [elementIds]);
+    const getMenuProps = react.useCallback(function (_temp, _temp2) {
+      let {
+        onMouseLeave,
+        refKey = 'ref',
+        onKeyDown,
+        onBlur,
+        ref,
+        ...rest
+      } = _temp === void 0 ? {} : _temp;
+      let {
+        suppressRefError = false
+      } = _temp2 === void 0 ? {} : _temp2;
+      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.onMouseLeave = callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), _extends2), rest);
+      return {
+        [refKey]: handleRefs(ref, menuNode => {
+          menuRef.current = menuNode;
+        }),
+        id: elementIds.menuId,
+        role: 'listbox',
+        'aria-labelledby': elementIds.labelId,
+        tabIndex: -1,
+        onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
+        ...rest
+      };
     }, [dispatch, setGetterPropCallInfo, elementIds]);
-    var getToggleButtonProps = react.useCallback(function (_temp3, _temp4) {
-      var _extends3;
-      var _ref3 = _temp3 === void 0 ? {} : _temp3,
-        onBlur = _ref3.onBlur,
-        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 latestState = latest.current.state;
-      var toggleButtonHandleClick = function toggleButtonHandleClick() {
+    const getToggleButtonProps = react.useCallback(function (_temp3, _temp4) {
+      let {
+        onBlur,
+        onClick,
+        onKeyDown,
+        refKey = 'ref',
+        ref,
+        ...rest
+      } = _temp3 === void 0 ? {} : _temp3;
+      let {
+        suppressRefError = false
+      } = _temp4 === void 0 ? {} : _temp4;
+      const latestState = latest.current.state;
+      const toggleButtonHandleClick = () => {
         dispatch({
           type: ToggleButtonClick$1
         });
       };
-      var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
+      const toggleButtonHandleBlur = () => {
         if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
           dispatch({
             type: ToggleButtonBlur
           });
         }
       };
-      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['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends3['aria-controls'] = elementIds.menuId, _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-labelledby'] = "" + elementIds.labelId, _extends3.id = elementIds.toggleButtonId, _extends3.role = 'combobox', _extends3.tabIndex = 0, _extends3.onBlur = callAllEventHandlers(onBlur, toggleButtonHandleBlur), _extends3), rest);
+      const toggleProps = {
+        [refKey]: handleRefs(ref, toggleButtonNode => {
+          toggleButtonRef.current = toggleButtonNode;
+        }),
+        'aria-activedescendant': latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '',
+        'aria-controls': elementIds.menuId,
+        'aria-expanded': latest.current.state.isOpen,
+        'aria-haspopup': 'listbox',
+        'aria-labelledby': `${elementIds.labelId}`,
+        id: elementIds.toggleButtonId,
+        role: 'combobox',
+        tabIndex: 0,
+        onBlur: callAllEventHandlers(onBlur, toggleButtonHandleBlur),
+        ...rest
+      };
       if (!rest.disabled) {
         toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
         toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
@@ -3860,54 +3877,56 @@
       setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
       return toggleProps;
     }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers, getItemNodeFromIndex]);
-    var getItemProps = react.useCallback(function (_temp5) {
-      var _extends4;
-      var _ref5 = _temp5 === void 0 ? {} : _temp5,
-        itemProp = _ref5.item,
-        indexProp = _ref5.index,
-        onMouseMove = _ref5.onMouseMove,
-        onClick = _ref5.onClick,
-        _ref5$refKey = _ref5.refKey,
-        refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
-        ref = _ref5.ref,
-        disabled = _ref5.disabled,
-        rest = _objectWithoutPropertiesLoose(_ref5, _excluded3$1);
-      var _latest$current = latest.current,
-        latestState = _latest$current.state,
-        latestProps = _latest$current.props;
-      var item = itemProp != null ? itemProp : items[indexProp];
-      var index = getItemIndex(indexProp, item, latestProps.items);
-      var itemHandleMouseMove = function itemHandleMouseMove() {
+    const getItemProps = react.useCallback(function (_temp5) {
+      let {
+        item: itemProp,
+        index: indexProp,
+        onMouseMove,
+        onClick,
+        refKey = 'ref',
+        ref,
+        disabled,
+        ...rest
+      } = _temp5 === void 0 ? {} : _temp5;
+      const {
+        state: latestState,
+        props: latestProps
+      } = latest.current;
+      const item = itemProp ?? items[indexProp];
+      const index = getItemIndex(indexProp, item, latestProps.items);
+      const itemHandleMouseMove = () => {
         if (index === latestState.highlightedIndex) {
           return;
         }
         shouldScrollRef.current = false;
         dispatch({
           type: ItemMouseMove$1,
-          index: index,
-          disabled: disabled
+          index,
+          disabled
         });
       };
-      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 = {
-        disabled: disabled,
+      const itemProps = {
+        disabled,
         role: 'option',
-        'aria-selected': "" + (item === selectedItem),
-        id: elementIds.getItemId(itemIndex)
-      }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
-        if (itemNode) {
-          itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
-        }
-      }), _extends4), rest);
+        'aria-selected': `${item === selectedItem}`,
+        id: elementIds.getItemId(itemIndex),
+        [refKey]: handleRefs(ref, itemNode => {
+          if (itemNode) {
+            itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+          }
+        }),
+        ...rest
+      };
       if (!disabled) {
         itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
       }
@@ -3916,49 +3935,49 @@
     }, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
     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 InputKeyDownPageUp = '__input_keydown_page_up__' ;
-  var InputKeyDownPageDown = '__input_keydown_page_down__' ;
-  var InputKeyDownEnter = '__input_keydown_enter__' ;
-  var InputChange = '__input_change__' ;
-  var InputBlur = '__input_blur__' ;
-  var InputFocus = '__input_focus__' ;
-  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 InputKeyDownPageUp = '__input_keydown_page_up__' ;
+  const InputKeyDownPageDown = '__input_keydown_page_down__' ;
+  const InputKeyDownEnter = '__input_keydown_enter__' ;
+  const InputChange = '__input_change__' ;
+  const InputBlur = '__input_blur__' ;
+  const InputFocus = '__input_focus__' ;
+  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,
@@ -3988,17 +4007,22 @@
   });
 
   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 = {
+  const propTypes$1 = {
     items: PropTypes.array.isRequired,
     itemToString: PropTypes.func,
     getA11yStatusMessage: PropTypes.func,
@@ -4051,13 +4075,11 @@
    * @returns {Array} An array with the state and an action dispatcher.
    */
   function useControlledReducer(reducer, initialState, props) {
-    var previousSelectedItemRef = react.useRef();
-    var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
-      state = _useEnhancedReducer[0],
-      dispatch = _useEnhancedReducer[1];
+    const previousSelectedItemRef = react.useRef();
+    const [state, dispatch] = useEnhancedReducer(reducer, initialState, props);
 
     // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
-    react.useEffect(function () {
+    react.useEffect(() => {
       if (isControlledProp(props, 'selectedItem')) {
         if (previousSelectedItemRef.current !== props.selectedItem) {
           dispatch({
@@ -4072,23 +4094,26 @@
   }
 
   // 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) {
+    validatePropTypes$1 = (options, caller) => {
       PropTypes.checkPropTypes(propTypes$1, options, 'prop', caller.name);
     };
   }
-  var defaultProps$1 = _extends({}, defaultProps$3, {
+  const defaultProps$1 = {
+    ...defaultProps$3,
     getA11yStatusMessage: getA11yStatusMessage$1
-  });
+  };
 
   /* eslint-disable complexity */
   function downshiftUseComboboxReducer(state, action) {
-    var type = action.type,
-      props = action.props,
-      altKey = action.altKey;
-    var changes;
+    const {
+      type,
+      props,
+      altKey
+    } = action;
+    let changes;
     switch (type) {
       case ItemClick:
         changes = {
@@ -4113,13 +4138,14 @@
       case InputKeyDownArrowUp:
         if (state.isOpen) {
           if (altKey) {
-            changes = _extends({
+            changes = {
               isOpen: getDefaultValue$1(props, 'isOpen'),
-              highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-            }, state.highlightedIndex >= 0 && {
-              selectedItem: props.items[state.highlightedIndex],
-              inputValue: props.itemToString(props.items[state.highlightedIndex])
-            });
+              highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+              ...(state.highlightedIndex >= 0 && {
+                selectedItem: props.items[state.highlightedIndex],
+                inputValue: props.itemToString(props.items[state.highlightedIndex])
+              })
+            };
           } else {
             changes = {
               highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
@@ -4133,22 +4159,24 @@
         }
         break;
       case InputKeyDownEnter:
-        changes = _extends({
+        changes = {
           isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex],
-          inputValue: props.itemToString(props.items[state.highlightedIndex])
-        });
+          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+          ...(state.highlightedIndex >= 0 && {
+            selectedItem: props.items[state.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 InputKeyDownPageUp:
         changes = {
@@ -4171,13 +4199,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:
         changes = {
@@ -4206,14 +4235,14 @@
       default:
         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", "onMouseDown", "onClick", "onPress", "disabled"],
-    _excluded3 = ["onClick", "onPress", "refKey", "ref"],
-    _excluded4 = ["onKeyDown", "onChange", "onInput", "onFocus", "onBlur", "onChangeText", "refKey", "ref"];
+  /* eslint-disable max-statements */
   useCombobox.stateChangeTypes = stateChangeTypes$1;
   function useCombobox(userProps) {
     if (userProps === void 0) {
@@ -4221,327 +4250,349 @@
     }
     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;
+    const props = {
+      ...defaultProps$1,
+      ...userProps
+    };
+    const {
+      initialIsOpen,
+      defaultIsOpen,
+      items,
+      scrollIntoView,
+      environment,
+      getA11yStatusMessage,
+      getA11ySelectionMessage,
+      itemToString
+    } = props;
     // 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;
+    const initialState = getInitialState$1(props);
+    const [state, dispatch] = useControlledReducer(downshiftUseComboboxReducer, initialState, props);
+    const {
+      isOpen,
+      highlightedIndex,
+      selectedItem,
+      inputValue
+    } = state;
 
     // Element refs.
-    var menuRef = react.useRef(null);
-    var itemRefs = react.useRef({});
-    var inputRef = react.useRef(null);
-    var toggleButtonRef = react.useRef(null);
-    var isInitialMountRef = react.useRef(true);
+    const menuRef = react.useRef(null);
+    const itemRefs = react.useRef({});
+    const inputRef = react.useRef(null);
+    const toggleButtonRef = react.useRef(null);
+    const isInitialMountRef = react.useRef(true);
     // prevent id re-generation between renders.
-    var elementIds = useElementIds(props);
+    const elementIds = useElementIds(props);
     // used to keep track of how many items we had on previous cycle.
-    var previousResultCountRef = react.useRef();
+    const previousResultCountRef = react.useRef();
     // utility callback to get item element.
-    var latest = useLatestRef({
-      state: state,
-      props: props
+    const latest = useLatestRef({
+      state,
+      props
     });
-    var getItemNodeFromIndex = react.useCallback(function (index) {
-      return itemRefs.current[elementIds.getItemId(index)];
-    }, [elementIds]);
+    const getItemNodeFromIndex = react.useCallback(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]);
 
     // Effects.
     // Sets a11y status message on changes in state.
-    useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
+    useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
       isInitialMount: isInitialMountRef.current,
       previousResultCount: previousResultCountRef.current,
-      items: items,
-      environment: environment,
-      itemToString: itemToString
-    }, state));
+      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));
+      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.
-    react.useEffect(function () {
-      var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
+    react.useEffect(() => {
+      const focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
       if (focusOnOpen && inputRef.current) {
         inputRef.current.focus();
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    react.useEffect(function () {
+    react.useEffect(() => {
       if (isInitialMountRef.current) {
         return;
       }
       previousResultCountRef.current = items.length;
     });
     // Add mouse/touch events to document.
-    var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
+    const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, () => {
       dispatch({
         type: InputBlur,
         selectItem: false
       });
     });
-    var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
+    const setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
     // Make initial ref false.
-    react.useEffect(function () {
+    react.useEffect(() => {
       isInitialMountRef.current = false;
-      return function () {
+      return () => {
         isInitialMountRef.current = true;
       };
     }, []);
     // Reset itemRefs on close.
-    react.useEffect(function () {
+    react.useEffect(() => {
       if (!isOpen) {
         itemRefs.current = {};
       } else if (document.activeElement !== inputRef.current) {
-        var _inputRef$current;
-        inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+        inputRef?.current?.focus();
       }
     }, [isOpen]);
 
     /* Event handler functions */
-    var inputKeyDownHandlers = react.useMemo(function () {
-      return {
-        ArrowDown: function ArrowDown(event) {
-          event.preventDefault();
-          dispatch({
-            type: InputKeyDownArrowDown,
-            altKey: event.altKey,
-            getItemNodeFromIndex: getItemNodeFromIndex
-          });
-        },
-        ArrowUp: function ArrowUp(event) {
-          event.preventDefault();
-          dispatch({
-            type: InputKeyDownArrowUp,
-            altKey: event.altKey,
-            getItemNodeFromIndex: getItemNodeFromIndex
-          });
-        },
-        Home: function Home(event) {
-          if (!latest.current.state.isOpen) {
-            return;
-          }
+    const inputKeyDownHandlers = react.useMemo(() => ({
+      ArrowDown(event) {
+        event.preventDefault();
+        dispatch({
+          type: InputKeyDownArrowDown,
+          altKey: event.altKey,
+          getItemNodeFromIndex
+        });
+      },
+      ArrowUp(event) {
+        event.preventDefault();
+        dispatch({
+          type: InputKeyDownArrowUp,
+          altKey: event.altKey,
+          getItemNodeFromIndex
+        });
+      },
+      Home(event) {
+        if (!latest.current.state.isOpen) {
+          return;
+        }
+        event.preventDefault();
+        dispatch({
+          type: InputKeyDownHome,
+          getItemNodeFromIndex
+        });
+      },
+      End(event) {
+        if (!latest.current.state.isOpen) {
+          return;
+        }
+        event.preventDefault();
+        dispatch({
+          type: InputKeyDownEnd,
+          getItemNodeFromIndex
+        });
+      },
+      Escape(event) {
+        const latestState = latest.current.state;
+        if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
           event.preventDefault();
           dispatch({
-            type: InputKeyDownHome,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: InputKeyDownEscape
           });
-        },
-        End: function End(event) {
-          if (!latest.current.state.isOpen) {
-            return;
-          }
+        }
+      },
+      Enter(event) {
+        const latestState = latest.current.state;
+        // if closed or no highlighted index, do nothing.
+        if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event.
+        ) {
+          return;
+        }
+        event.preventDefault();
+        dispatch({
+          type: InputKeyDownEnter,
+          getItemNodeFromIndex
+        });
+      },
+      PageUp(event) {
+        if (latest.current.state.isOpen) {
           event.preventDefault();
           dispatch({
-            type: InputKeyDownEnd,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: InputKeyDownPageUp,
+            getItemNodeFromIndex
           });
-        },
-        Escape: function Escape(event) {
-          var latestState = latest.current.state;
-          if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
-            event.preventDefault();
-            dispatch({
-              type: InputKeyDownEscape
-            });
-          }
-        },
-        Enter: function Enter(event) {
-          var latestState = latest.current.state;
-          // if closed or no highlighted index, do nothing.
-          if (!latestState.isOpen || event.which === 229 // if IME composing, wait for next Enter keydown event.
-          ) {
-            return;
-          }
+        }
+      },
+      PageDown(event) {
+        if (latest.current.state.isOpen) {
           event.preventDefault();
           dispatch({
-            type: InputKeyDownEnter,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: InputKeyDownPageDown,
+            getItemNodeFromIndex
           });
-        },
-        PageUp: function PageUp(event) {
-          if (latest.current.state.isOpen) {
-            event.preventDefault();
-            dispatch({
-              type: InputKeyDownPageUp,
-              getItemNodeFromIndex: getItemNodeFromIndex
-            });
-          }
-        },
-        PageDown: function PageDown(event) {
-          if (latest.current.state.isOpen) {
-            event.preventDefault();
-            dispatch({
-              type: InputKeyDownPageDown,
-              getItemNodeFromIndex: getItemNodeFromIndex
-            });
-          }
         }
-      };
-    }, [dispatch, latest, getItemNodeFromIndex]);
+      }
+    }), [dispatch, latest, getItemNodeFromIndex]);
 
     // Getter props.
-    var getLabelProps = react.useCallback(function (labelProps) {
-      return _extends({
-        id: elementIds.labelId,
-        htmlFor: elementIds.inputId
-      }, labelProps);
-    }, [elementIds]);
-    var getMenuProps = react.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;
+    const getLabelProps = react.useCallback(labelProps => ({
+      id: elementIds.labelId,
+      htmlFor: elementIds.inputId,
+      ...labelProps
+    }), [elementIds]);
+    const getMenuProps = react.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 _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 () {
-        dispatch({
-          type: MenuMouseLeave
-        });
-      }), _extends2), rest);
+      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 = react.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,
-        onMouseDown = _ref3.onMouseDown,
-        onClick = _ref3.onClick;
-        _ref3.onPress;
-        var disabled = _ref3.disabled,
-        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 = react.useCallback(function (_temp3) {
+      let {
+        item,
+        index,
+        refKey = 'ref',
+        ref,
+        onMouseMove,
+        onMouseDown,
+        onClick,
+        onPress,
+        disabled,
+        ...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;
-      var itemHandleMouseMove = function itemHandleMouseMove() {
+      const onSelectKey = 'onClick';
+      const customClickHandler = onClick;
+      const itemHandleMouseMove = () => {
         if (index === latestState.highlightedIndex) {
           return;
         }
         shouldScrollRef.current = false;
         dispatch({
           type: ItemMouseMove,
-          index: index,
-          disabled: disabled
+          index,
+          disabled
         });
       };
-      var itemHandleClick = function itemHandleClick() {
+      const itemHandleClick = () => {
         dispatch({
           type: ItemClick,
-          index: index
+          index
         });
       };
-      var itemHandleMouseDown = function itemHandleMouseDown(e) {
-        return e.preventDefault();
-      };
-      return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
-        if (itemNode) {
-          itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
-        }
-      }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+      const itemHandleMouseDown = e => e.preventDefault();
+      return {
+        [refKey]: handleRefs(ref, itemNode => {
+          if (itemNode) {
+            itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+          }
+        }),
+        disabled,
+        role: 'option',
+        'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
+        id: elementIds.getItemId(itemIndex),
+        ...(!disabled && {
+          [onSelectKey]: callAllEventHandlers(customClickHandler, itemHandleClick)
+        }),
         onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
-        onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
-      }, rest);
+        onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown),
+        ...rest
+      };
     }, [dispatch, latest, shouldScrollRef, elementIds]);
-    var getToggleButtonProps = react.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 latestState = latest.current.state;
-      var toggleButtonHandleClick = function toggleButtonHandleClick() {
+    const getToggleButtonProps = react.useCallback(function (_temp4) {
+      let {
+        onClick,
+        onPress,
+        refKey = 'ref',
+        ref,
+        ...rest
+      } = _temp4 === void 0 ? {} : _temp4;
+      const latestState = latest.current.state;
+      const toggleButtonHandleClick = () => {
         dispatch({
           type: ToggleButtonClick
         });
       };
-      return _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
-        toggleButtonRef.current = toggleButtonNode;
-      }), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends({}, {
-        onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
-      }), rest);
+      return {
+        [refKey]: handleRefs(ref, toggleButtonNode => {
+          toggleButtonRef.current = toggleButtonNode;
+        }),
+        'aria-controls': elementIds.menuId,
+        'aria-expanded': latestState.isOpen,
+        id: elementIds.toggleButtonId,
+        tabIndex: -1,
+        ...(!rest.disabled && {
+          ...({
+            onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
+          })
+        }),
+        ...rest
+      };
     }, [dispatch, latest, elementIds]);
-    var getInputProps = react.useCallback(function (_temp5, _temp6) {
-      var _extends5;
-      var _ref6 = _temp5 === void 0 ? {} : _temp5,
-        onKeyDown = _ref6.onKeyDown,
-        onChange = _ref6.onChange,
-        onInput = _ref6.onInput,
-        onFocus = _ref6.onFocus,
-        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 = react.useCallback(function (_temp5, _temp6) {
+      let {
+        onKeyDown,
+        onChange,
+        onInput,
+        onFocus,
+        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;
-      var inputHandleKeyDown = function inputHandleKeyDown(event) {
-        var key = normalizeArrowKey(event);
+      const latestState = latest.current.state;
+      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({
@@ -4550,7 +4601,7 @@
           });
         }
       };
-      var inputHandleFocus = function inputHandleFocus() {
+      const inputHandleFocus = () => {
         if (!latestState.isOpen) {
           dispatch({
             type: InputFocus
@@ -4559,80 +4610,99 @@
       };
 
       /* istanbul ignore next (preact) */
-      var onChangeKey = 'onChange';
-      var eventHandlers = {};
+      const onChangeKey = 'onChange';
+      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.onFocus = callAllEventHandlers(onFocus, inputHandleFocus), _eventHandlers);
+        eventHandlers = {
+          [onChangeKey]: callAllEventHandlers(onChange, onInput, inputHandleChange),
+          onKeyDown: callAllEventHandlers(onKeyDown, inputHandleKeyDown),
+          onBlur: callAllEventHandlers(onBlur, inputHandleBlur),
+          onFocus: callAllEventHandlers(onFocus, inputHandleFocus)
+        };
       }
-      return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
-        inputRef.current = inputNode;
-      }), _extends5['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = latestState.isOpen, _extends5['aria-labelledby'] = elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
+      return {
+        [refKey]: handleRefs(ref, inputNode => {
+          inputRef.current = inputNode;
+        }),
+        'aria-activedescendant': latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '',
+        'aria-autocomplete': 'list',
+        'aria-controls': elementIds.menuId,
+        'aria-expanded': latestState.isOpen,
+        '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',
+        id: elementIds.inputId,
+        role: 'combobox',
+        value: latestState.inputValue,
+        ...eventHandlers,
+        ...rest
+      };
     }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
 
     // returns
-    var toggleMenu = react.useCallback(function () {
+    const toggleMenu = react.useCallback(() => {
       dispatch({
         type: FunctionToggleMenu
       });
     }, [dispatch]);
-    var closeMenu = react.useCallback(function () {
+    const closeMenu = react.useCallback(() => {
       dispatch({
         type: FunctionCloseMenu
       });
     }, [dispatch]);
-    var openMenu = react.useCallback(function () {
+    const openMenu = react.useCallback(() => {
       dispatch({
         type: FunctionOpenMenu
       });
     }, [dispatch]);
-    var setHighlightedIndex = react.useCallback(function (newHighlightedIndex) {
+    const setHighlightedIndex = react.useCallback(newHighlightedIndex => {
       dispatch({
         type: FunctionSetHighlightedIndex,
         highlightedIndex: newHighlightedIndex
       });
     }, [dispatch]);
-    var selectItem = react.useCallback(function (newSelectedItem) {
+    const selectItem = react.useCallback(newSelectedItem => {
       dispatch({
         type: FunctionSelectItem,
         selectedItem: newSelectedItem
       });
     }, [dispatch]);
-    var setInputValue = react.useCallback(function (newInputValue) {
+    const setInputValue = react.useCallback(newInputValue => {
       dispatch({
         type: FunctionSetInputValue,
         inputValue: newInputValue
       });
     }, [dispatch]);
-    var reset = react.useCallback(function () {
+    const reset = react.useCallback(() => {
       dispatch({
         type: FunctionReset$1
       });
     }, [dispatch]);
     return {
       // prop getters.
-      getItemProps: getItemProps,
-      getLabelProps: getLabelProps,
-      getMenuProps: getMenuProps,
-      getInputProps: getInputProps,
-      getToggleButtonProps: getToggleButtonProps,
+      getItemProps,
+      getLabelProps,
+      getMenuProps,
+      getInputProps,
+      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: []
   };
@@ -4670,11 +4740,11 @@
    * @returns {Object} The initial state.
    */
   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
     };
   }
 
@@ -4691,7 +4761,7 @@
     if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
       return false;
     }
-    var element = event.target;
+    const element = event.target;
     if (element instanceof HTMLInputElement &&
     // if element is a text input
     element.value !== '' && (
@@ -4710,11 +4780,13 @@
    * @returns {string} The a11y message.
    */
   function getA11yRemovalMessage(selectionParameters) {
-    var removedSelectedItem = selectionParameters.removedSelectedItem,
-      itemToStringLocal = selectionParameters.itemToString;
-    return itemToStringLocal(removedSelectedItem) + " has been removed.";
+    const {
+      removedSelectedItem,
+      itemToString: itemToStringLocal
+    } = selectionParameters;
+    return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
   }
-  var propTypes = {
+  const propTypes = {
     selectedItems: PropTypes.array,
     initialSelectedItems: PropTypes.array,
     defaultSelectedItems: PropTypes.array,
@@ -4738,37 +4810,37 @@
       })
     })
   };
-  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) {
+    validatePropTypes = (options, caller) => {
       PropTypes.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,
@@ -4789,13 +4861,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:
         changes = {
@@ -4818,17 +4894,18 @@
           if (activeIndex < 0) {
             break;
           }
-          var newActiveIndex = activeIndex;
+          let newActiveIndex = activeIndex;
           if (selectedItems.length === 1) {
             newActiveIndex = -1;
           } else if (activeIndex === selectedItems.length - 1) {
             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;
         }
       case DropdownKeyDownNavigationPrevious:
@@ -4843,7 +4920,7 @@
         break;
       case FunctionAddSelectedItem:
         changes = {
-          selectedItems: [].concat(selectedItems, [selectedItem])
+          selectedItems: [...selectedItems, selectedItem]
         };
         break;
       case DropdownClick:
@@ -4853,25 +4930,27 @@
         break;
       case FunctionRemoveSelectedItem:
         {
-          var _newActiveIndex = activeIndex;
-          var selectedItemIndex = selectedItems.indexOf(selectedItem);
+          let newActiveIndex = activeIndex;
+          const selectedItemIndex = selectedItems.indexOf(selectedItem);
           if (selectedItemIndex < 0) {
             break;
           }
           if (selectedItems.length === 1) {
-            _newActiveIndex = -1;
+            newActiveIndex = -1;
           } else if (selectedItemIndex === selectedItems.length - 1) {
-            _newActiveIndex = selectedItems.length - 2;
+            newActiveIndex = selectedItems.length - 2;
           }
           changes = {
-            selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1)),
-            activeIndex: _newActiveIndex
+            selectedItems: [...selectedItems.slice(0, selectedItemIndex), ...selectedItems.slice(selectedItemIndex + 1)],
+            activeIndex: newActiveIndex
           };
           break;
         }
       case FunctionSetSelectedItems:
         {
-          var newSelectedItems = action.selectedItems;
+          const {
+            selectedItems: newSelectedItems
+          } = action;
           changes = {
             selectedItems: newSelectedItems
           };
@@ -4879,9 +4958,11 @@
         }
       case FunctionSetActiveIndex:
         {
-          var _newActiveIndex2 = action.activeIndex;
+          const {
+            activeIndex: newActiveIndex
+          } = action;
           changes = {
-            activeIndex: _newActiveIndex2
+            activeIndex: newActiveIndex
           };
           break;
         }
@@ -4894,11 +4975,12 @@
       default:
         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) {
     if (userProps === void 0) {
@@ -4906,46 +4988,49 @@
     }
     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;
+    const props = {
+      ...defaultProps,
+      ...userProps
+    };
+    const {
+      getA11yRemovalMessage,
+      itemToString,
+      environment,
+      keyNavigationNext,
+      keyNavigationPrevious
+    } = props;
 
     // Reducer init.
-    var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props),
-      state = _useControlledReducer[0],
-      dispatch = _useControlledReducer[1];
-    var activeIndex = state.activeIndex,
-      selectedItems = state.selectedItems;
+    const [state, dispatch] = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props);
+    const {
+      activeIndex,
+      selectedItems
+    } = state;
 
     // Refs.
-    var isInitialMountRef = react.useRef(true);
-    var dropdownRef = react.useRef(null);
-    var previousSelectedItemsRef = react.useRef(selectedItems);
-    var selectedItemRefs = react.useRef();
+    const isInitialMountRef = react.useRef(true);
+    const dropdownRef = react.useRef(null);
+    const previousSelectedItemsRef = react.useRef(selectedItems);
+    const selectedItemRefs = react.useRef();
     selectedItemRefs.current = [];
-    var latest = useLatestRef({
-      state: state,
-      props: props
+    const latest = useLatestRef({
+      state,
+      props
     });
 
     // Effects.
     /* Sets a11y status message on changes in selectedItem. */
-    react.useEffect(function () {
+    react.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);
       }
@@ -4954,7 +5039,7 @@
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedItems.length]);
     // Sets focus on active item.
-    react.useEffect(function () {
+    react.useEffect(() => {
       if (isInitialMountRef.current) {
         return;
       }
@@ -4966,167 +5051,178 @@
     }, [activeIndex]);
     useControlPropsValidator({
       isInitialMount: isInitialMountRef.current,
-      props: props,
-      state: state
+      props,
+      state
     });
-    var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps');
+    const setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps');
     // Make initial ref false.
-    react.useEffect(function () {
+    react.useEffect(() => {
       isInitialMountRef.current = false;
-      return function () {
+      return () => {
         isInitialMountRef.current = true;
       };
     }, []);
 
     // Event handler functions.
-    var selectedItemKeyDownHandlers = react.useMemo(function () {
-      var _ref;
-      return _ref = {}, _ref[keyNavigationPrevious] = function () {
+    const selectedItemKeyDownHandlers = react.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 = react.useMemo(function () {
-      var _ref2;
-      return _ref2 = {}, _ref2[keyNavigationPrevious] = function (event) {
+      }
+    }), [dispatch, keyNavigationNext, keyNavigationPrevious]);
+    const dropdownKeyDownHandlers = react.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]);
+      }
+    }), [dispatch, keyNavigationPrevious]);
 
     // Getter props.
-    var getSelectedItemProps = react.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);
+    const getSelectedItemProps = react.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 = react.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 = react.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 = react.useCallback(function (selectedItem) {
+    const addSelectedItem = react.useCallback(selectedItem => {
       dispatch({
         type: FunctionAddSelectedItem,
-        selectedItem: selectedItem
+        selectedItem
       });
     }, [dispatch]);
-    var removeSelectedItem = react.useCallback(function (selectedItem) {
+    const removeSelectedItem = react.useCallback(selectedItem => {
       dispatch({
         type: FunctionRemoveSelectedItem,
-        selectedItem: selectedItem
+        selectedItem
       });
     }, [dispatch]);
-    var setSelectedItems = react.useCallback(function (newSelectedItems) {
+    const setSelectedItems = react.useCallback(newSelectedItems => {
       dispatch({
         type: FunctionSetSelectedItems,
         selectedItems: newSelectedItems
       });
     }, [dispatch]);
-    var setActiveIndex = react.useCallback(function (newActiveIndex) {
+    const setActiveIndex = react.useCallback(newActiveIndex => {
       dispatch({
         type: FunctionSetActiveIndex,
         activeIndex: newActiveIndex
       });
     }, [dispatch]);
-    var reset = react.useCallback(function () {
+    const reset = react.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
     };
   }