downshift 9.0.6 → 9.0.7-alpha.0

package/dist/downshift.cjs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var _extends = require('@babel/runtime/helpers/extends');
+var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
 var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
 var PropTypes = require('prop-types');
 var React = require('react');
@@ -11,6 +12,15 @@ var reactIs = require('react-is');
 var computeScrollIntoView = require('compute-scroll-into-view');
 var tslib = require('tslib');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
+var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 var idCounter = 0;
 
 /**
@@ -140,7 +150,7 @@ function generateId() {
  */
 function resetIdCounter() {
   // istanbul ignore next
-  if ('useId' in React) {
+  if ('useId' in React__default["default"]) {
     console.warn("It is not necessary to call resetIdCounter when using React 18+");
     return;
   }
@@ -474,23 +484,23 @@ var touchEnd = process.env.NODE_ENV !== "production" ? '__autocomplete_touchend_
 
 var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  blurButton: blurButton,
-  blurInput: blurInput,
-  changeInput: changeInput,
-  clickButton: clickButton,
-  clickItem: clickItem,
-  controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
+  unknown: unknown,
+  mouseUp: mouseUp,
   itemMouseEnter: itemMouseEnter,
-  keyDownArrowDown: keyDownArrowDown,
   keyDownArrowUp: keyDownArrowUp,
-  keyDownEnd: keyDownEnd,
-  keyDownEnter: keyDownEnter,
+  keyDownArrowDown: keyDownArrowDown,
   keyDownEscape: keyDownEscape,
+  keyDownEnter: keyDownEnter,
   keyDownHome: keyDownHome,
+  keyDownEnd: keyDownEnd,
+  clickItem: clickItem,
+  blurInput: blurInput,
+  changeInput: changeInput,
   keyDownSpaceButton: keyDownSpaceButton,
-  mouseUp: mouseUp,
-  touchEnd: touchEnd,
-  unknown: unknown
+  clickButton: clickButton,
+  blurButton: blurButton,
+  controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
+  touchEnd: touchEnd
 });
 
 var _excluded$3 = ["refKey", "ref"],
@@ -500,6 +510,7 @@ var _excluded$3 = ["refKey", "ref"],
   _excluded5 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"];
 var Downshift = /*#__PURE__*/function () {
   var Downshift = /*#__PURE__*/function (_Component) {
+    _inheritsLoose__default["default"](Downshift, _Component);
     function Downshift(_props) {
       var _this;
       _this = _Component.call(this, _props) || this;
@@ -553,7 +564,7 @@ var Downshift = /*#__PURE__*/function () {
           otherStateToSet = {};
         }
         otherStateToSet = pickState(otherStateToSet);
-        _this.internalSetState(_extends({
+        _this.internalSetState(_extends__default["default"]({
           highlightedIndex: highlightedIndex
         }, otherStateToSet));
       };
@@ -567,7 +578,7 @@ var Downshift = /*#__PURE__*/function () {
       };
       _this.selectItem = function (item, otherStateToSet, cb) {
         otherStateToSet = pickState(otherStateToSet);
-        _this.internalSetState(_extends({
+        _this.internalSetState(_extends__default["default"]({
           isOpen: _this.props.defaultIsOpen,
           highlightedIndex: _this.props.defaultHighlightedIndex,
           selectedItem: item,
@@ -603,7 +614,7 @@ var Downshift = /*#__PURE__*/function () {
         // 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, _extends__default["default"]({}, _this.getStateAndHelpers(), stateToSet));
         }
         return _this.setState(function (state) {
           var _newStateToSet;
@@ -651,7 +662,7 @@ var Downshift = /*#__PURE__*/function () {
           // 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, _extends__default["default"]({}, _this.getStateAndHelpers(), newStateToSet));
           }
           return nextState;
         }, function () {
@@ -685,7 +696,7 @@ var Downshift = /*#__PURE__*/function () {
           _ref$refKey = _ref.refKey,
           refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
           ref = _ref.ref,
-          rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+          rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$3);
         var _ref2 = _temp2 === void 0 ? {} : _temp2,
           _ref2$suppressRefErro = _ref2.suppressRefError,
           suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
@@ -696,7 +707,7 @@ var Downshift = /*#__PURE__*/function () {
         _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 : undefined, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
+        return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : undefined, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
       };
       //\\\\\\\\\\\\\\\\\\\\\\\\\\ ROOT
       _this.keyDownHandlers = {
@@ -775,7 +786,7 @@ var Downshift = /*#__PURE__*/function () {
         },
         Escape: function Escape(event) {
           event.preventDefault();
-          this.reset(_extends({
+          this.reset(_extends__default["default"]({
             type: keyDownEscape
           }, !this.state.isOpen && {
             selectedItem: null,
@@ -784,7 +795,7 @@ var Downshift = /*#__PURE__*/function () {
         }
       };
       //////////////////////////// BUTTON
-      _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
+      _this.buttonKeyDownHandlers = _extends__default["default"]({}, _this.keyDownHandlers, {
         ' ': function _(event) {
           event.preventDefault();
           this.toggleMenu({
@@ -792,7 +803,7 @@ var Downshift = /*#__PURE__*/function () {
           });
         }
       });
-      _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
+      _this.inputKeyDownHandlers = _extends__default["default"]({}, _this.keyDownHandlers, {
         Home: function Home(event) {
           var _this$getState3 = this.getState(),
             isOpen = _this$getState3.isOpen;
@@ -841,7 +852,7 @@ var Downshift = /*#__PURE__*/function () {
           var onKeyDown = _ref3.onKeyDown,
           onKeyUp = _ref3.onKeyUp,
           onBlur = _ref3.onBlur,
-          rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
+          rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded2$3);
         var _this$getState5 = _this.getState(),
           isOpen = _this$getState5.isOpen;
         var enabledEventHandlers = {
@@ -851,7 +862,7 @@ var Downshift = /*#__PURE__*/function () {
           onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
         };
         var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
-        return _extends({
+        return _extends__default["default"]({
           type: 'button',
           role: 'button',
           'aria-label': isOpen ? 'close menu' : 'open menu',
@@ -866,7 +877,7 @@ var Downshift = /*#__PURE__*/function () {
       _this.buttonHandleKeyDown = function (event) {
         var key = normalizeArrowKey(event);
         if (_this.buttonKeyDownHandlers[key]) {
-          _this.buttonKeyDownHandlers[key].call(_this, event);
+          _this.buttonKeyDownHandlers[key].call(_assertThisInitialized__default["default"](_this), event);
         }
       };
       _this.buttonHandleClick = function (event) {
@@ -917,7 +928,7 @@ var Downshift = /*#__PURE__*/function () {
       //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BUTTON
       /////////////////////////////// LABEL
       _this.getLabelProps = function (props) {
-        return _extends({
+        return _extends__default["default"]({
           htmlFor: _this.inputId,
           id: _this.labelId
         }, props);
@@ -931,7 +942,7 @@ var Downshift = /*#__PURE__*/function () {
           onChange = _ref4.onChange,
           onInput = _ref4.onInput;
           _ref4.onChangeText;
-          var rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
+          var rest = _objectWithoutPropertiesLoose__default["default"](_ref4, _excluded3$2);
         var onChangeKey;
         var eventHandlers = {};
 
@@ -947,7 +958,7 @@ var Downshift = /*#__PURE__*/function () {
           var _eventHandlers;
           eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers);
         }
-        return _extends({
+        return _extends__default["default"]({
           'aria-autocomplete': 'list',
           'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : undefined,
           'aria-controls': isOpen ? _this.menuId : undefined,
@@ -962,7 +973,7 @@ var Downshift = /*#__PURE__*/function () {
       _this.inputHandleKeyDown = function (event) {
         var key = normalizeArrowKey(event);
         if (key && _this.inputKeyDownHandlers[key]) {
-          _this.inputKeyDownHandlers[key].call(_this, event);
+          _this.inputKeyDownHandlers[key].call(_assertThisInitialized__default["default"](_this), event);
         }
       };
       _this.inputHandleChange = function (event) {
@@ -1000,14 +1011,14 @@ var Downshift = /*#__PURE__*/function () {
           _ref5$refKey = _ref5.refKey,
           refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
           ref = _ref5.ref,
-          props = _objectWithoutPropertiesLoose(_ref5, _excluded4$2);
+          props = _objectWithoutPropertiesLoose__default["default"](_ref5, _excluded4$2);
         var _ref6 = _temp6 === void 0 ? {} : _temp6,
           _ref6$suppressRefErro = _ref6.suppressRefError,
           suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro;
         _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'] ? undefined : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
+        return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? undefined : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
       };
       //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ MENU
       /////////////////////////////// ITEM
@@ -1021,7 +1032,7 @@ var Downshift = /*#__PURE__*/function () {
           var index = _ref7.index,
           _ref7$item = _ref7.item,
           item = _ref7$item === void 0 ? process.env.NODE_ENV === 'production' ? /* istanbul ignore next */undefined : requiredProp('getItemProps', 'item') : _ref7$item,
-          rest = _objectWithoutPropertiesLoose(_ref7, _excluded5);
+          rest = _objectWithoutPropertiesLoose__default["default"](_ref7, _excluded5);
         if (index === undefined) {
           _this.items.push(item);
           index = _this.items.indexOf(item);
@@ -1068,7 +1079,7 @@ var Downshift = /*#__PURE__*/function () {
         var eventHandlers = rest.disabled ? {
           onMouseDown: enabledEventHandlers.onMouseDown
         } : enabledEventHandlers;
-        return _extends({
+        return _extends__default["default"]({
           id: _this.getItemId(index),
           role: 'option',
           'aria-selected': _this.getState().highlightedIndex === index
@@ -1085,7 +1096,7 @@ var Downshift = /*#__PURE__*/function () {
         otherStateToSet = pickState(otherStateToSet);
         _this.internalSetState(function (_ref8) {
           var selectedItem = _ref8.selectedItem;
-          return _extends({
+          return _extends__default["default"]({
             isOpen: _this.props.defaultIsOpen,
             highlightedIndex: _this.props.defaultHighlightedIndex,
             inputValue: _this.props.itemToString(selectedItem)
@@ -1099,7 +1110,7 @@ var Downshift = /*#__PURE__*/function () {
         otherStateToSet = pickState(otherStateToSet);
         _this.internalSetState(function (_ref9) {
           var isOpen = _ref9.isOpen;
-          return _extends({
+          return _extends__default["default"]({
             isOpen: !isOpen
           }, isOpen && {
             highlightedIndex: _this.props.defaultHighlightedIndex
@@ -1134,7 +1145,7 @@ var Downshift = /*#__PURE__*/function () {
         var state = _this.getState();
         var item = _this.items[state.highlightedIndex];
         var resultCount = _this.getItemCount();
-        var status = _this.props.getA11yStatusMessage(_extends({
+        var status = _this.props.getA11yStatusMessage(_extends__default["default"]({
           itemToString: _this.props.itemToString,
           previousResultCount: _this.previousResultCount,
           resultCount: resultCount,
@@ -1166,7 +1177,6 @@ var Downshift = /*#__PURE__*/function () {
       _this.state = _state;
       return _this;
     }
-    _inheritsLoose(Downshift, _Component);
     var _proto = Downshift.prototype;
     /**
      * Clear all running timeouts
@@ -1479,49 +1489,49 @@ var Downshift = /*#__PURE__*/function () {
   return Downshift;
 }();
 process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
-  children: PropTypes.func,
-  defaultHighlightedIndex: PropTypes.number,
-  defaultIsOpen: PropTypes.bool,
-  initialHighlightedIndex: PropTypes.number,
-  initialSelectedItem: PropTypes.any,
-  initialInputValue: PropTypes.string,
-  initialIsOpen: PropTypes.bool,
-  getA11yStatusMessage: PropTypes.func,
-  itemToString: PropTypes.func,
-  onChange: PropTypes.func,
-  onSelect: PropTypes.func,
-  onStateChange: PropTypes.func,
-  onInputValueChange: PropTypes.func,
-  onUserAction: PropTypes.func,
-  onOuterClick: PropTypes.func,
-  selectedItemChanged: PropTypes.func,
-  stateReducer: PropTypes.func,
-  itemCount: PropTypes.number,
-  id: PropTypes.string,
-  environment: PropTypes.shape({
-    addEventListener: PropTypes.func.isRequired,
-    removeEventListener: PropTypes.func.isRequired,
-    document: PropTypes.shape({
-      createElement: PropTypes.func.isRequired,
-      getElementById: PropTypes.func.isRequired,
-      activeElement: PropTypes.any.isRequired,
-      body: PropTypes.any.isRequired
+  children: PropTypes__default["default"].func,
+  defaultHighlightedIndex: PropTypes__default["default"].number,
+  defaultIsOpen: PropTypes__default["default"].bool,
+  initialHighlightedIndex: PropTypes__default["default"].number,
+  initialSelectedItem: PropTypes__default["default"].any,
+  initialInputValue: PropTypes__default["default"].string,
+  initialIsOpen: PropTypes__default["default"].bool,
+  getA11yStatusMessage: PropTypes__default["default"].func,
+  itemToString: PropTypes__default["default"].func,
+  onChange: PropTypes__default["default"].func,
+  onSelect: PropTypes__default["default"].func,
+  onStateChange: PropTypes__default["default"].func,
+  onInputValueChange: PropTypes__default["default"].func,
+  onUserAction: PropTypes__default["default"].func,
+  onOuterClick: PropTypes__default["default"].func,
+  selectedItemChanged: PropTypes__default["default"].func,
+  stateReducer: PropTypes__default["default"].func,
+  itemCount: PropTypes__default["default"].number,
+  id: PropTypes__default["default"].string,
+  environment: PropTypes__default["default"].shape({
+    addEventListener: PropTypes__default["default"].func.isRequired,
+    removeEventListener: PropTypes__default["default"].func.isRequired,
+    document: PropTypes__default["default"].shape({
+      createElement: PropTypes__default["default"].func.isRequired,
+      getElementById: PropTypes__default["default"].func.isRequired,
+      activeElement: PropTypes__default["default"].any.isRequired,
+      body: PropTypes__default["default"].any.isRequired
     }).isRequired,
-    Node: PropTypes.func.isRequired
+    Node: PropTypes__default["default"].func.isRequired
   }),
-  suppressRefError: PropTypes.bool,
-  scrollIntoView: PropTypes.func,
+  suppressRefError: PropTypes__default["default"].bool,
+  scrollIntoView: PropTypes__default["default"].func,
   // things we keep in state for uncontrolled components
   // but can accept as props for controlled components
   /* eslint-disable react/no-unused-prop-types */
-  selectedItem: PropTypes.any,
-  isOpen: PropTypes.bool,
-  inputValue: PropTypes.string,
-  highlightedIndex: PropTypes.number,
-  labelId: PropTypes.string,
-  inputId: PropTypes.string,
-  menuId: PropTypes.string,
-  getItemId: PropTypes.func
+  selectedItem: PropTypes__default["default"].any,
+  isOpen: PropTypes__default["default"].bool,
+  inputValue: PropTypes__default["default"].string,
+  highlightedIndex: PropTypes__default["default"].number,
+  labelId: PropTypes__default["default"].string,
+  inputId: PropTypes__default["default"].string,
+  menuId: PropTypes__default["default"].string,
+  getItemId: PropTypes__default["default"].func
   /* eslint-enable react/no-unused-prop-types */
 } : void 0;
 var Downshift$1 = Downshift;
@@ -1566,7 +1576,7 @@ function callOnChangeProps(action, state, newState) {
     }
   });
   if (props.onStateChange && Object.keys(changes).length) {
-    props.onStateChange(_extends({
+    props.onStateChange(_extends__default["default"]({
       type: type
     }, changes));
   }
@@ -1576,7 +1586,7 @@ function invokeOnChangeHandler(key, action, state, newState) {
     type = action.type;
   var handler = "on" + capitalizeString(key) + "Change";
   if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
-    props[handler](_extends({
+    props[handler](_extends__default["default"]({
       type: type
     }, newState));
   }
@@ -1604,7 +1614,7 @@ var updateA11yStatus = debounce(function (status, document) {
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 // istanbul ignore next
-var useElementIds = 'useId' in React // Avoid conditional useId call
+var useElementIds = 'useId' in React__default["default"] // Avoid conditional useId call
 ? function useElementIds(_ref) {
   var id = _ref.id,
     labelId = _ref.labelId,
@@ -1613,7 +1623,7 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     toggleButtonId = _ref.toggleButtonId,
     inputId = _ref.inputId;
   // Avoid conditional useId call
-  var reactId = "downshift-" + React.useId();
+  var reactId = "downshift-" + React__default["default"].useId();
   if (!id) {
     id = reactId;
   }
@@ -1695,7 +1705,7 @@ function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
     actionRef.current = action;
     state = getState(state, action.props);
     var changes = reducer(state, action);
-    var newState = action.props.stateReducer(state, _extends({}, action, {
+    var newState = action.props.stateReducer(state, _extends__default["default"]({}, action, {
       changes: changes
     }));
     return newState;
@@ -1705,7 +1715,7 @@ function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
     dispatch = _useReducer[1];
   var propsRef = useLatestRef(props);
   var dispatchWithProps = React.useCallback(function (action) {
-    return dispatch(_extends({
+    return dispatch(_extends__default["default"]({
       props: propsRef.current
     }, action));
   }, [propsRef]);
@@ -1776,7 +1786,7 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
 function getInitialState$2(props) {
   var selectedItem = getInitialValue$1(props, 'selectedItem');
   var isOpen = getInitialValue$1(props, 'isOpen');
-  var highlightedIndex = getInitialHighlightedIndex(props);
+  var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
   var inputValue = getInitialValue$1(props, 'inputValue');
   return {
     highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function (item) {
@@ -1791,7 +1801,6 @@ function getHighlightedIndexOnOpen(props, state, offset) {
   var items = props.items,
     initialHighlightedIndex = props.initialHighlightedIndex,
     defaultHighlightedIndex = props.defaultHighlightedIndex,
-    isItemDisabled = props.isItemDisabled,
     itemToKey = props.itemToKey;
   var selectedItem = state.selectedItem,
     highlightedIndex = state.highlightedIndex;
@@ -1800,10 +1809,10 @@ function getHighlightedIndexOnOpen(props, state, offset) {
   }
 
   // initialHighlightedIndex will give value to highlightedIndex on initial state only.
-  if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex && !isItemDisabled(items[initialHighlightedIndex], initialHighlightedIndex)) {
+  if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
     return initialHighlightedIndex;
   }
-  if (defaultHighlightedIndex !== undefined && !isItemDisabled(items[defaultHighlightedIndex], defaultHighlightedIndex)) {
+  if (defaultHighlightedIndex !== undefined) {
     return defaultHighlightedIndex;
   }
   if (selectedItem) {
@@ -1811,13 +1820,10 @@ function getHighlightedIndexOnOpen(props, state, offset) {
       return itemToKey(selectedItem) === itemToKey(item);
     });
   }
-  if (offset < 0 && !isItemDisabled(items[items.length - 1], items.length - 1)) {
-    return items.length - 1;
-  }
-  if (offset > 0 && !isItemDisabled(items[0], 0)) {
-    return 0;
+  if (offset === 0) {
+    return -1;
   }
-  return -1;
+  return offset < 0 ? items.length - 1 : 0;
 }
 /**
  * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
@@ -1956,7 +1962,7 @@ function useA11yMessageStatus(getA11yStatusMessage, options, dependencyArray, en
     updateA11yStatus(status, document);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, dependencyArray);
+  }, [dependencyArray]);
 
   // Cleanup the status message container.
   React.useEffect(function () {
@@ -2024,10 +2030,10 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) {
     inputValue = true;
   }
   var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0;
-  return _extends({
+  return _extends__default["default"]({
     isOpen: false,
     highlightedIndex: -1
-  }, shouldSelect && _extends({
+  }, shouldSelect && _extends__default["default"]({
     selectedItem: props.items[highlightedIndex],
     isOpen: getDefaultValue$1(props, 'isOpen'),
     highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
@@ -2052,8 +2058,8 @@ function isDropdownsStateEqual(prevState, newState) {
  * Tracks if it's the first render.
  */
 function useIsInitialMount() {
-  var isInitialMountRef = React.useRef(true);
-  React.useEffect(function () {
+  var isInitialMountRef = React__default["default"].useRef(true);
+  React__default["default"].useEffect(function () {
     isInitialMountRef.current = false;
     return function () {
       isInitialMountRef.current = true;
@@ -2062,74 +2068,46 @@ function useIsInitialMount() {
   return isInitialMountRef.current;
 }
 
-/**
- * Returns the new highlightedIndex based on the defaultHighlightedIndex prop, if it's not disabled.
- *
- * @param {Object} props Props from useCombobox or useSelect.
- * @returns {number} The highlighted index.
- */
-function getDefaultHighlightedIndex(props) {
-  var highlightedIndex = getDefaultValue$1(props, 'highlightedIndex');
-  if (highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
-    return -1;
-  }
-  return highlightedIndex;
-}
-
-/**
- * Returns the new highlightedIndex based on the initialHighlightedIndex prop, if not disabled.
- *
- * @param {Object} props Props from useCombobox or useSelect.
- * @returns {number} The highlighted index.
- */
-function getInitialHighlightedIndex(props) {
-  var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
-  if (highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
-    return -1;
-  }
-  return highlightedIndex;
-}
-
 // Shared between all exports.
 var commonPropTypes = {
-  environment: PropTypes.shape({
-    addEventListener: PropTypes.func.isRequired,
-    removeEventListener: PropTypes.func.isRequired,
-    document: PropTypes.shape({
-      createElement: PropTypes.func.isRequired,
-      getElementById: PropTypes.func.isRequired,
-      activeElement: PropTypes.any.isRequired,
-      body: PropTypes.any.isRequired
+  environment: PropTypes__default["default"].shape({
+    addEventListener: PropTypes__default["default"].func.isRequired,
+    removeEventListener: PropTypes__default["default"].func.isRequired,
+    document: PropTypes__default["default"].shape({
+      createElement: PropTypes__default["default"].func.isRequired,
+      getElementById: PropTypes__default["default"].func.isRequired,
+      activeElement: PropTypes__default["default"].any.isRequired,
+      body: PropTypes__default["default"].any.isRequired
     }).isRequired,
-    Node: PropTypes.func.isRequired
+    Node: PropTypes__default["default"].func.isRequired
   }),
-  itemToString: PropTypes.func,
-  itemToKey: PropTypes.func,
-  stateReducer: PropTypes.func
+  itemToString: PropTypes__default["default"].func,
+  itemToKey: PropTypes__default["default"].func,
+  stateReducer: PropTypes__default["default"].func
 };
 
 // Shared between useSelect, useCombobox, Downshift.
-var commonDropdownPropTypes = _extends({}, commonPropTypes, {
-  getA11yStatusMessage: PropTypes.func,
-  highlightedIndex: PropTypes.number,
-  defaultHighlightedIndex: PropTypes.number,
-  initialHighlightedIndex: PropTypes.number,
-  isOpen: PropTypes.bool,
-  defaultIsOpen: PropTypes.bool,
-  initialIsOpen: PropTypes.bool,
-  selectedItem: PropTypes.any,
-  initialSelectedItem: PropTypes.any,
-  defaultSelectedItem: PropTypes.any,
-  id: PropTypes.string,
-  labelId: PropTypes.string,
-  menuId: PropTypes.string,
-  getItemId: PropTypes.func,
-  toggleButtonId: PropTypes.string,
-  onSelectedItemChange: PropTypes.func,
-  onHighlightedIndexChange: PropTypes.func,
-  onStateChange: PropTypes.func,
-  onIsOpenChange: PropTypes.func,
-  scrollIntoView: PropTypes.func
+var commonDropdownPropTypes = _extends__default["default"]({}, commonPropTypes, {
+  getA11yStatusMessage: PropTypes__default["default"].func,
+  highlightedIndex: PropTypes__default["default"].number,
+  defaultHighlightedIndex: PropTypes__default["default"].number,
+  initialHighlightedIndex: PropTypes__default["default"].number,
+  isOpen: PropTypes__default["default"].bool,
+  defaultIsOpen: PropTypes__default["default"].bool,
+  initialIsOpen: PropTypes__default["default"].bool,
+  selectedItem: PropTypes__default["default"].any,
+  initialSelectedItem: PropTypes__default["default"].any,
+  defaultSelectedItem: PropTypes__default["default"].any,
+  id: PropTypes__default["default"].string,
+  labelId: PropTypes__default["default"].string,
+  menuId: PropTypes__default["default"].string,
+  getItemId: PropTypes__default["default"].func,
+  toggleButtonId: PropTypes__default["default"].string,
+  onSelectedItemChange: PropTypes__default["default"].func,
+  onHighlightedIndexChange: PropTypes__default["default"].func,
+  onStateChange: PropTypes__default["default"].func,
+  onIsOpenChange: PropTypes__default["default"].func,
+  scrollIntoView: PropTypes__default["default"].func
 });
 
 function downshiftCommonReducer(state, action, stateChangeTypes) {
@@ -2167,7 +2145,7 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
       break;
     case stateChangeTypes.FunctionSetHighlightedIndex:
       changes = {
-        highlightedIndex: props.isItemDisabled(props.items[action.highlightedIndex], action.highlightedIndex) ? -1 : action.highlightedIndex
+        highlightedIndex: action.highlightedIndex
       };
       break;
     case stateChangeTypes.FunctionSetInputValue:
@@ -2177,7 +2155,7 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
       break;
     case stateChangeTypes.FunctionReset:
       changes = {
-        highlightedIndex: getDefaultHighlightedIndex(props),
+        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
         isOpen: getDefaultValue$1(props, 'isOpen'),
         selectedItem: getDefaultValue$1(props, 'selectedItem'),
         inputValue: getDefaultValue$1(props, 'inputValue')
@@ -2186,7 +2164,7 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
     default:
       throw new Error('Reducer called without proper action type.');
   }
-  return _extends({}, state, changes);
+  return _extends__default["default"]({}, state, changes);
 }
 /* eslint-enable complexity */
 
@@ -2205,7 +2183,7 @@ function getItemIndexByCharacterKey(_a) {
     }
     return highlightedIndex;
 }
-var propTypes$2 = tslib.__assign(tslib.__assign({}, commonDropdownPropTypes), { items: PropTypes.array.isRequired, isItemDisabled: PropTypes.func });
+var propTypes$2 = tslib.__assign(tslib.__assign({}, commonDropdownPropTypes), { items: PropTypes__default["default"].array.isRequired, isItemDisabled: PropTypes__default["default"].func });
 var defaultProps$2 = tslib.__assign(tslib.__assign({}, defaultProps$3), { isItemDisabled: function () {
         return false;
     } });
@@ -2214,7 +2192,7 @@ var validatePropTypes$2 = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
     validatePropTypes$2 = function (options, caller) {
-        PropTypes.checkPropTypes(propTypes$2, options, 'prop', caller.name);
+        PropTypes__default["default"].checkPropTypes(propTypes$2, options, 'prop', caller.name);
     };
 }
 
@@ -2243,28 +2221,28 @@ var FunctionReset$2 = process.env.NODE_ENV !== "production" ? '__function_reset_
 
 var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  FunctionCloseMenu: FunctionCloseMenu$1,
-  FunctionOpenMenu: FunctionOpenMenu$1,
-  FunctionReset: FunctionReset$2,
-  FunctionSelectItem: FunctionSelectItem$1,
-  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
-  FunctionSetInputValue: FunctionSetInputValue$1,
-  FunctionToggleMenu: FunctionToggleMenu$1,
-  ItemClick: ItemClick$1,
-  ItemMouseMove: ItemMouseMove$1,
-  MenuMouseLeave: MenuMouseLeave$1,
-  ToggleButtonBlur: ToggleButtonBlur,
   ToggleButtonClick: ToggleButtonClick$1,
   ToggleButtonKeyDownArrowDown: ToggleButtonKeyDownArrowDown,
   ToggleButtonKeyDownArrowUp: ToggleButtonKeyDownArrowUp,
   ToggleButtonKeyDownCharacter: ToggleButtonKeyDownCharacter,
-  ToggleButtonKeyDownEnd: ToggleButtonKeyDownEnd,
-  ToggleButtonKeyDownEnter: ToggleButtonKeyDownEnter,
   ToggleButtonKeyDownEscape: ToggleButtonKeyDownEscape,
   ToggleButtonKeyDownHome: ToggleButtonKeyDownHome,
-  ToggleButtonKeyDownPageDown: ToggleButtonKeyDownPageDown,
+  ToggleButtonKeyDownEnd: ToggleButtonKeyDownEnd,
+  ToggleButtonKeyDownEnter: ToggleButtonKeyDownEnter,
+  ToggleButtonKeyDownSpaceButton: ToggleButtonKeyDownSpaceButton,
   ToggleButtonKeyDownPageUp: ToggleButtonKeyDownPageUp,
-  ToggleButtonKeyDownSpaceButton: ToggleButtonKeyDownSpaceButton
+  ToggleButtonKeyDownPageDown: ToggleButtonKeyDownPageDown,
+  ToggleButtonBlur: ToggleButtonBlur,
+  MenuMouseLeave: MenuMouseLeave$1,
+  ItemMouseMove: ItemMouseMove$1,
+  ItemClick: ItemClick$1,
+  FunctionToggleMenu: FunctionToggleMenu$1,
+  FunctionOpenMenu: FunctionOpenMenu$1,
+  FunctionCloseMenu: FunctionCloseMenu$1,
+  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
+  FunctionSelectItem: FunctionSelectItem$1,
+  FunctionSetInputValue: FunctionSetInputValue$1,
+  FunctionReset: FunctionReset$2
 });
 
 /* eslint-disable complexity */
@@ -2278,7 +2256,7 @@ function downshiftSelectReducer(state, action) {
     case ItemClick$1:
       changes = {
         isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultHighlightedIndex(props),
+        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
         selectedItem: props.items[action.index]
       };
       break;
@@ -2357,7 +2335,7 @@ function downshiftSelectReducer(state, action) {
       };
       break;
     case ToggleButtonBlur:
-      changes = _extends({
+      changes = _extends__default["default"]({
         isOpen: false,
         highlightedIndex: -1
       }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && {
@@ -2372,7 +2350,7 @@ function downshiftSelectReducer(state, action) {
     default:
       return downshiftCommonReducer(state, action, stateChangeTypes$2);
   }
-  return _extends({}, state, changes);
+  return _extends__default["default"]({}, state, changes);
 }
 /* eslint-enable complexity */
 
@@ -2387,7 +2365,7 @@ function useSelect(userProps) {
   }
   validatePropTypes$2(userProps, useSelect);
   // Props defaults and destructuring.
-  var props = _extends({}, defaultProps$2, userProps);
+  var props = _extends__default["default"]({}, defaultProps$2, userProps);
   var scrollIntoView = props.scrollIntoView,
     environment = props.environment,
     getA11yStatusMessage = props.getA11yStatusMessage;
@@ -2603,12 +2581,12 @@ function useSelect(userProps) {
   var getLabelProps = React.useCallback(function (_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
       onClick = _ref.onClick,
-      labelProps = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      labelProps = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
     var labelHandleClick = function labelHandleClick() {
       var _toggleButtonRef$curr;
       (_toggleButtonRef$curr = toggleButtonRef.current) == null || _toggleButtonRef$curr.focus();
     };
-    return _extends({
+    return _extends__default["default"]({
       id: elementIds.labelId,
       htmlFor: elementIds.toggleButtonId,
       onClick: callAllEventHandlers(onClick, labelHandleClick)
@@ -2621,7 +2599,7 @@ function useSelect(userProps) {
       _ref2$refKey = _ref2.refKey,
       refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,
       ref = _ref2.ref,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref2, _excluded2$2);
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
       _ref3$suppressRefErro = _ref3.suppressRefError,
       suppressRefError = _ref3$suppressRefErro === void 0 ? false : _ref3$suppressRefErro;
@@ -2631,7 +2609,7 @@ function useSelect(userProps) {
       });
     };
     setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
-    return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
+    return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
       menuRef.current = menuNode;
     }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = rest && rest['aria-label'] ? undefined : "" + elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), _extends2), rest);
   }, [dispatch, setGetterPropCallInfo, elementIds]);
@@ -2645,7 +2623,7 @@ function useSelect(userProps) {
       _ref4$refKey = _ref4.refKey,
       refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
       ref = _ref4.ref,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$1);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref4, _excluded3$1);
     var _ref5 = _temp5 === void 0 ? {} : _temp5,
       _ref5$suppressRefErro = _ref5.suppressRefError,
       suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
@@ -2673,7 +2651,7 @@ function useSelect(userProps) {
         });
       }
     };
-    var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
+    var toggleProps = _extends__default["default"]((_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'] = rest && rest['aria-label'] ? undefined : "" + elementIds.labelId, _extends3.id = elementIds.toggleButtonId, _extends3.role = 'combobox', _extends3.tabIndex = 0, _extends3.onBlur = callAllEventHandlers(onBlur, toggleButtonHandleBlur), _extends3), rest);
     if (!rest.disabled) {
@@ -2699,7 +2677,7 @@ function useSelect(userProps) {
       refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
       disabledProp = _ref6.disabled,
       ref = _ref6.ref,
-      rest = _objectWithoutPropertiesLoose(_ref6, _excluded4$1);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref6, _excluded4$1);
     if (disabledProp !== undefined) {
       console.warn('Passing "disabled" as an argument to getItemProps is not supported anymore. Please use the isItemDisabled prop from useSelect.');
     }
@@ -2731,11 +2709,11 @@ function useSelect(userProps) {
       return e.preventDefault();
     }; // keep focus on the toggle after item click select.
 
-    var itemProps = _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (itemNode) {
+    var itemProps = _extends__default["default"]((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
         itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends4['aria-disabled'] = disabled, _extends4['aria-selected'] = item === latestState.selectedItem, _extends4.id = elementIds.getItemId(index), _extends4.role = 'option', _extends4), rest);
+    }), _extends4['aria-disabled'] = disabled, _extends4['aria-selected'] = "" + (item === latestState.selectedItem), _extends4.id = elementIds.getItemId(index), _extends4.role = 'option', _extends4), rest);
     if (!disabled) {
       /* istanbul ignore next (react-native) */
       {
@@ -2794,29 +2772,29 @@ var ControlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ?
 
 var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem,
-  FunctionCloseMenu: FunctionCloseMenu,
-  FunctionOpenMenu: FunctionOpenMenu,
-  FunctionReset: FunctionReset$1,
-  FunctionSelectItem: FunctionSelectItem,
-  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex,
-  FunctionSetInputValue: FunctionSetInputValue,
-  FunctionToggleMenu: FunctionToggleMenu,
-  InputBlur: InputBlur,
-  InputChange: InputChange,
-  InputClick: InputClick,
   InputKeyDownArrowDown: InputKeyDownArrowDown,
   InputKeyDownArrowUp: InputKeyDownArrowUp,
-  InputKeyDownEnd: InputKeyDownEnd,
-  InputKeyDownEnter: InputKeyDownEnter,
   InputKeyDownEscape: InputKeyDownEscape,
   InputKeyDownHome: InputKeyDownHome,
-  InputKeyDownPageDown: InputKeyDownPageDown,
+  InputKeyDownEnd: InputKeyDownEnd,
   InputKeyDownPageUp: InputKeyDownPageUp,
-  ItemClick: ItemClick,
-  ItemMouseMove: ItemMouseMove,
+  InputKeyDownPageDown: InputKeyDownPageDown,
+  InputKeyDownEnter: InputKeyDownEnter,
+  InputChange: InputChange,
+  InputBlur: InputBlur,
+  InputClick: InputClick,
   MenuMouseLeave: MenuMouseLeave,
-  ToggleButtonClick: ToggleButtonClick
+  ItemMouseMove: ItemMouseMove,
+  ItemClick: ItemClick,
+  ToggleButtonClick: ToggleButtonClick,
+  FunctionToggleMenu: FunctionToggleMenu,
+  FunctionOpenMenu: FunctionOpenMenu,
+  FunctionCloseMenu: FunctionCloseMenu,
+  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex,
+  FunctionSelectItem: FunctionSelectItem,
+  FunctionSetInputValue: FunctionSetInputValue,
+  FunctionReset: FunctionReset$1,
+  ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem
 });
 
 function getInitialState$1(props) {
@@ -2826,18 +2804,18 @@ function getInitialState$1(props) {
   if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
     inputValue = props.itemToString(selectedItem);
   }
-  return _extends({}, initialState, {
+  return _extends__default["default"]({}, initialState, {
     inputValue: inputValue
   });
 }
-var propTypes$1 = _extends({}, commonDropdownPropTypes, {
-  items: PropTypes.array.isRequired,
-  isItemDisabled: PropTypes.func,
-  inputValue: PropTypes.string,
-  defaultInputValue: PropTypes.string,
-  initialInputValue: PropTypes.string,
-  inputId: PropTypes.string,
-  onInputValueChange: PropTypes.func
+var propTypes$1 = _extends__default["default"]({}, commonDropdownPropTypes, {
+  items: PropTypes__default["default"].array.isRequired,
+  isItemDisabled: PropTypes__default["default"].func,
+  inputValue: PropTypes__default["default"].string,
+  defaultInputValue: PropTypes__default["default"].string,
+  initialInputValue: PropTypes__default["default"].string,
+  inputId: PropTypes__default["default"].string,
+  onInputValueChange: PropTypes__default["default"].func
 });
 
 /**
@@ -2884,10 +2862,10 @@ var validatePropTypes$1 = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
   validatePropTypes$1 = function validatePropTypes(options, caller) {
-    PropTypes.checkPropTypes(propTypes$1, options, 'prop', caller.name);
+    PropTypes__default["default"].checkPropTypes(propTypes$1, options, 'prop', caller.name);
   };
 }
-var defaultProps$1 = _extends({}, defaultProps$3, {
+var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
   isItemDisabled: function isItemDisabled() {
     return false;
   }
@@ -2904,7 +2882,7 @@ function downshiftUseComboboxReducer(state, action) {
     case ItemClick:
       changes = {
         isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultHighlightedIndex(props),
+        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
         selectedItem: props.items[action.index],
         inputValue: props.itemToString(props.items[action.index])
       };
@@ -2941,7 +2919,7 @@ function downshiftUseComboboxReducer(state, action) {
       changes = getChangesOnSelection(props, state.highlightedIndex);
       break;
     case InputKeyDownEscape:
-      changes = _extends({
+      changes = _extends__default["default"]({
         isOpen: false,
         highlightedIndex: -1
       }, !state.isOpen && {
@@ -2970,7 +2948,7 @@ function downshiftUseComboboxReducer(state, action) {
       };
       break;
     case InputBlur:
-      changes = _extends({
+      changes = _extends__default["default"]({
         isOpen: false,
         highlightedIndex: -1
       }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && {
@@ -2981,7 +2959,7 @@ function downshiftUseComboboxReducer(state, action) {
     case InputChange:
       changes = {
         isOpen: true,
-        highlightedIndex: getDefaultHighlightedIndex(props),
+        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
         inputValue: action.inputValue
       };
       break;
@@ -3005,7 +2983,7 @@ function downshiftUseComboboxReducer(state, action) {
     default:
       return downshiftCommonReducer(state, action, stateChangeTypes$1);
   }
-  return _extends({}, state, changes);
+  return _extends__default["default"]({}, state, changes);
 }
 /* eslint-enable complexity */
 
@@ -3020,7 +2998,7 @@ function useCombobox(userProps) {
   }
   validatePropTypes$1(userProps, useCombobox);
   // Props defaults and destructuring.
-  var props = _extends({}, defaultProps$1, userProps);
+  var props = _extends__default["default"]({}, defaultProps$1, userProps);
   var items = props.items,
     scrollIntoView = props.scrollIntoView,
     environment = props.environment,
@@ -3186,7 +3164,7 @@ function useCombobox(userProps) {
 
   // Getter props.
   var getLabelProps = React.useCallback(function (labelProps) {
-    return _extends({
+    return _extends__default["default"]({
       id: elementIds.labelId,
       htmlFor: elementIds.inputId
     }, labelProps);
@@ -3198,12 +3176,12 @@ function useCombobox(userProps) {
       _ref$refKey = _ref.refKey,
       refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
       ref = _ref.ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
     var _ref2 = _temp2 === void 0 ? {} : _temp2,
       _ref2$suppressRefErro = _ref2.suppressRefError,
       suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
     setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
-    return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
+    return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
       menuRef.current = menuNode;
     }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = rest && rest['aria-label'] ? undefined : "" + elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
       dispatch({
@@ -3224,7 +3202,7 @@ function useCombobox(userProps) {
       onClick = _ref3.onClick;
       _ref3.onPress;
       var disabledProp = _ref3.disabled,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded2$1);
     if (disabledProp !== undefined) {
       console.warn('Passing "disabled" as an argument to getItemProps is not supported anymore. Please use the isItemDisabled prop from useCombobox.');
     }
@@ -3258,11 +3236,11 @@ function useCombobox(userProps) {
       return e.preventDefault();
     }; // keep focus on the input after item click select.
 
-    return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
+    return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
         itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends3['aria-disabled'] = disabled, _extends3['aria-selected'] = index === latestState.highlightedIndex, _extends3.id = elementIds.getItemId(index), _extends3.role = 'option', _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+    }), _extends3['aria-disabled'] = disabled, _extends3['aria-selected'] = "" + (index === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(index), _extends3.role = 'option', _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
@@ -3275,16 +3253,16 @@ function useCombobox(userProps) {
       var _ref5$refKey = _ref5.refKey,
       refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
       ref = _ref5.ref,
-      rest = _objectWithoutPropertiesLoose(_ref5, _excluded3);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref5, _excluded3);
     var latestState = latest.current.state;
     var toggleButtonHandleClick = function toggleButtonHandleClick() {
       dispatch({
         type: ToggleButtonClick
       });
     };
-    return _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
+    return _extends__default["default"]((_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({}, {
+    }), _extends4['aria-controls'] = elementIds.menuId, _extends4['aria-expanded'] = latestState.isOpen, _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends__default["default"]({}, {
       onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
     }), rest);
   }, [dispatch, latest, elementIds]);
@@ -3300,7 +3278,7 @@ function useCombobox(userProps) {
       _ref6$refKey = _ref6.refKey,
       refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
       ref = _ref6.ref,
-      rest = _objectWithoutPropertiesLoose(_ref6, _excluded4);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref6, _excluded4);
     var _ref7 = _temp6 === void 0 ? {} : _temp6,
       _ref7$suppressRefErro = _ref7.suppressRefError,
       suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
@@ -3341,7 +3319,7 @@ function useCombobox(userProps) {
       var _eventHandlers;
       eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers.onClick = callAllEventHandlers(onClick, inputHandleClick), _eventHandlers);
     }
-    return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
+    return _extends__default["default"]((_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'] = rest && rest['aria-label'] ? undefined : elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
   }, [dispatch, elementIds, environment, inputKeyDownHandlers, latest, mouseAndTouchTrackers, setGetterPropCallInfo]);
@@ -3494,17 +3472,17 @@ var propTypes = {
   stateReducer: commonPropTypes.stateReducer,
   itemToKey: commonPropTypes.itemToKey,
   environment: commonPropTypes.environment,
-  selectedItems: PropTypes.array,
-  initialSelectedItems: PropTypes.array,
-  defaultSelectedItems: PropTypes.array,
-  getA11yStatusMessage: PropTypes.func,
-  activeIndex: PropTypes.number,
-  initialActiveIndex: PropTypes.number,
-  defaultActiveIndex: PropTypes.number,
-  onActiveIndexChange: PropTypes.func,
-  onSelectedItemsChange: PropTypes.func,
-  keyNavigationNext: PropTypes.string,
-  keyNavigationPrevious: PropTypes.string
+  selectedItems: PropTypes__default["default"].array,
+  initialSelectedItems: PropTypes__default["default"].array,
+  defaultSelectedItems: PropTypes__default["default"].array,
+  getA11yStatusMessage: PropTypes__default["default"].func,
+  activeIndex: PropTypes__default["default"].number,
+  initialActiveIndex: PropTypes__default["default"].number,
+  defaultActiveIndex: PropTypes__default["default"].number,
+  onActiveIndexChange: PropTypes__default["default"].func,
+  onSelectedItemsChange: PropTypes__default["default"].func,
+  keyNavigationNext: PropTypes__default["default"].string,
+  keyNavigationPrevious: PropTypes__default["default"].string
 };
 var defaultProps = {
   itemToKey: defaultProps$3.itemToKey,
@@ -3519,7 +3497,7 @@ var validatePropTypes = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
   validatePropTypes = function validatePropTypes(options, caller) {
-    PropTypes.checkPropTypes(propTypes, options, 'prop', caller.name);
+    PropTypes__default["default"].checkPropTypes(propTypes, options, 'prop', caller.name);
   };
 }
 
@@ -3539,19 +3517,19 @@ var FunctionReset = process.env.NODE_ENV !== "production" ? '__function_reset__'
 
 var stateChangeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  DropdownClick: DropdownClick,
-  DropdownKeyDownBackspace: DropdownKeyDownBackspace,
+  SelectedItemClick: SelectedItemClick,
+  SelectedItemKeyDownDelete: SelectedItemKeyDownDelete,
+  SelectedItemKeyDownBackspace: SelectedItemKeyDownBackspace,
+  SelectedItemKeyDownNavigationNext: SelectedItemKeyDownNavigationNext,
+  SelectedItemKeyDownNavigationPrevious: SelectedItemKeyDownNavigationPrevious,
   DropdownKeyDownNavigationPrevious: DropdownKeyDownNavigationPrevious,
+  DropdownKeyDownBackspace: DropdownKeyDownBackspace,
+  DropdownClick: DropdownClick,
   FunctionAddSelectedItem: FunctionAddSelectedItem,
   FunctionRemoveSelectedItem: FunctionRemoveSelectedItem,
-  FunctionReset: FunctionReset,
-  FunctionSetActiveIndex: FunctionSetActiveIndex,
   FunctionSetSelectedItems: FunctionSetSelectedItems,
-  SelectedItemClick: SelectedItemClick,
-  SelectedItemKeyDownBackspace: SelectedItemKeyDownBackspace,
-  SelectedItemKeyDownDelete: SelectedItemKeyDownDelete,
-  SelectedItemKeyDownNavigationNext: SelectedItemKeyDownNavigationNext,
-  SelectedItemKeyDownNavigationPrevious: SelectedItemKeyDownNavigationPrevious
+  FunctionSetActiveIndex: FunctionSetActiveIndex,
+  FunctionReset: FunctionReset
 });
 
 /* eslint-disable complexity */
@@ -3591,7 +3569,7 @@ function downshiftMultipleSelectionReducer(state, action) {
         } else if (activeIndex === selectedItems.length - 1) {
           newActiveIndex = selectedItems.length - 2;
         }
-        changes = _extends({
+        changes = _extends__default["default"]({
           selectedItems: [].concat(selectedItems.slice(0, activeIndex), selectedItems.slice(activeIndex + 1))
         }, {
           activeIndex: newActiveIndex
@@ -3663,7 +3641,7 @@ function downshiftMultipleSelectionReducer(state, action) {
     default:
       throw new Error('Reducer called without proper action type.');
   }
-  return _extends({}, state, changes);
+  return _extends__default["default"]({}, state, changes);
 }
 
 var _excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
@@ -3675,7 +3653,7 @@ function useMultipleSelection(userProps) {
   }
   validatePropTypes(userProps, useMultipleSelection);
   // Props defaults and destructuring.
-  var props = _extends({}, defaultProps, userProps);
+  var props = _extends__default["default"]({}, defaultProps, userProps);
   var getA11yStatusMessage = props.getA11yStatusMessage,
     environment = props.environment,
     keyNavigationNext = props.keyNavigationNext,
@@ -3768,7 +3746,7 @@ function useMultipleSelection(userProps) {
       onKeyDown = _ref3.onKeyDown,
       selectedItemProp = _ref3.selectedItem,
       indexProp = _ref3.index,
-      rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded);
     var latestState = latest.current.state;
     var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, 'Pass either item or index to getSelectedItemProps!'),
       index = _getItemAndIndex[1];
@@ -3785,7 +3763,7 @@ function useMultipleSelection(userProps) {
         selectedItemKeyDownHandlers[key](event);
       }
     };
-    return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) {
+    return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) {
       if (selectedItemNode) {
         selectedItemRefs.current.push(selectedItemNode);
       }
@@ -3801,7 +3779,7 @@ function useMultipleSelection(userProps) {
       onClick = _ref4.onClick,
       _ref4$preventKeyActio = _ref4.preventKeyAction,
       preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded2);
+      rest = _objectWithoutPropertiesLoose__default["default"](_ref4, _excluded2);
     var _ref5 = _temp3 === void 0 ? {} : _temp3,
       _ref5$suppressRefErro = _ref5.suppressRefError,
       suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
@@ -3817,7 +3795,7 @@ function useMultipleSelection(userProps) {
         type: DropdownClick
       });
     };
-    return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
+    return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
       if (dropdownNode) {
         dropdownRef.current = dropdownNode;
       }
@@ -3870,7 +3848,7 @@ function useMultipleSelection(userProps) {
   };
 }
 
-exports.default = Downshift$1;
+exports["default"] = Downshift$1;
 exports.resetIdCounter = resetIdCounter;
 exports.useCombobox = useCombobox;
 exports.useMultipleSelection = useMultipleSelection;