downshift 7.6.0 → 8.0.0-beta.0

package/dist/downshift.nativeweb.cjs.js

@@ -7,7 +7,7 @@ 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');
+var React = require('react');
 var reactIs = require('react-is');
 var compute = require('compute-scroll-into-view');
 var tslib = require('tslib');
@@ -19,6 +19,7 @@ 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 compute__default = /*#__PURE__*/_interopDefaultLegacy(compute);
 
 var idCounter = 0;
@@ -149,6 +150,11 @@ function generateId() {
  * Resets idCounter to 0. Used for SSR.
  */
 function resetIdCounter() {
+  // istanbul ignore next
+  if ('useId' in React__default["default"]) {
+    console.warn("It is not necessary to call resetIdCounter when using React 18+");
+    return;
+  }
   idCounter = 0;
 }
 
@@ -294,70 +300,70 @@ function isPlainObject(obj) {
 }
 
 /**
- * Returns the new index in the list, in a circular way. If next value is out of bonds from the total,
- * it will wrap to either 0 or itemCount - 1.
+ * Returns the next non-disabled highlightedIndex value.
  *
- * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
- * @param {number} baseIndex The initial position to move from.
- * @param {number} itemCount The total number of items.
- * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
- * @param {boolean} circular Specify if navigation is circular. Default is true.
- * @returns {number} The new index after the move.
+ * @param {number} start The current highlightedIndex.
+ * @param {number} offset The offset from the current highlightedIndex to start searching.
+ * @param {unknown[]} items The items array.
+ * @param {(item: unknown, index: number) => boolean} isItemDisabled Function that tells if an item is disabled or not.
+ * @param {boolean?} circular If the search reaches the end, if it can search again starting from the other end.
+ * @returns {number} The next highlightedIndex.
  */
-function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
+function getHighlightedIndex(start, offset, items, isItemDisabled, circular) {
   if (circular === void 0) {
-    circular = true;
+    circular = false;
   }
-  if (itemCount === 0) {
+  var count = items.length;
+  if (count === 0) {
     return -1;
   }
-  var itemsLastIndex = itemCount - 1;
-  if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
-    baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
+  var itemsLastIndex = count - 1;
+  if (typeof start !== 'number' || start < 0 || start > itemsLastIndex) {
+    start = offset > 0 ? -1 : itemsLastIndex + 1;
   }
-  var newIndex = baseIndex + moveAmount;
-  if (newIndex < 0) {
-    newIndex = circular ? itemsLastIndex : 0;
-  } else if (newIndex > itemsLastIndex) {
-    newIndex = circular ? 0 : itemsLastIndex;
+  var current = start + offset;
+  if (current < 0) {
+    current = circular ? itemsLastIndex : 0;
+  } else if (current > itemsLastIndex) {
+    current = circular ? 0 : itemsLastIndex;
   }
-  var nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
-  if (nonDisabledNewIndex === -1) {
-    return baseIndex >= itemCount ? -1 : baseIndex;
+  var highlightedIndex = getNonDisabledIndex(current, offset < 0, items, isItemDisabled, circular);
+  if (highlightedIndex === -1) {
+    return start >= count ? -1 : start;
   }
-  return nonDisabledNewIndex;
+  return highlightedIndex;
 }
 
 /**
- * Returns the next index in the list of an item that is not disabled.
+ * Returns the next non-disabled highlightedIndex value.
  *
- * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
- * @param {number} baseIndex The initial position to move from.
- * @param {number} itemCount The total number of items.
- * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
- * @param {boolean} circular Specify if navigation is circular. Default is true.
- * @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1.
+ * @param {number} start The current highlightedIndex.
+ * @param {boolean} backwards If true, it will search backwards from the start.
+ * @param {unknown[]} items The items array.
+ * @param {(item: unknown, index: number) => boolean} isItemDisabled Function that tells if an item is disabled or not.
+ * @param {boolean} circular If the search reaches the end, if it can search again starting from the other end.
+ * @returns {number} The next non-disabled index.
  */
-function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) {
-  var currentElementNode = getItemNodeFromIndex(baseIndex);
-  if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) {
-    return baseIndex;
+function getNonDisabledIndex(start, backwards, items, isItemDisabled, circular) {
+  if (circular === void 0) {
+    circular = false;
   }
-  if (moveAmount > 0) {
-    for (var index = baseIndex + 1; index < itemCount; index++) {
-      if (!getItemNodeFromIndex(index).hasAttribute('disabled')) {
+  var count = items.length;
+  if (backwards) {
+    for (var index = start; index >= 0; index--) {
+      if (!isItemDisabled(items[index], index)) {
         return index;
       }
     }
   } else {
-    for (var _index = baseIndex - 1; _index >= 0; _index--) {
-      if (!getItemNodeFromIndex(_index).hasAttribute('disabled')) {
+    for (var _index = start; _index < count; _index++) {
+      if (!isItemDisabled(items[_index], _index)) {
         return _index;
       }
     }
   }
   if (circular) {
-    return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false);
+    return getNonDisabledIndex(backwards ? count - 1 : 0, backwards, items, isItemDisabled);
   }
   return -1;
 }
@@ -537,6 +543,10 @@ var Downshift = /*#__PURE__*/function () {
       _this.unsetItemCount = function () {
         _this.itemCount = null;
       };
+      _this.isItemDisabled = function (_item, index) {
+        var currentElementNode = _this.getItemNodeFromIndex(index);
+        return currentElementNode && currentElementNode.hasAttribute('disabled');
+      };
       _this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
         if (highlightedIndex === void 0) {
           highlightedIndex = _this.props.defaultHighlightedIndex;
@@ -687,7 +697,7 @@ var Downshift = /*#__PURE__*/function () {
         _this.getRootProps.suppressRefError = suppressRefError;
         var _this$getState = _this.getState(),
           isOpen = _this$getState.isOpen;
-        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 : null, _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 = {
@@ -708,9 +718,9 @@ var Downshift = /*#__PURE__*/function () {
               if (itemCount > 0) {
                 var _this2$getState = _this2.getState(),
                   highlightedIndex = _this2$getState.highlightedIndex;
-                var nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, function (index) {
-                  return _this2.getItemNodeFromIndex(index);
-                });
+                var nextHighlightedIndex = getHighlightedIndex(highlightedIndex, 1, {
+                  length: itemCount
+                }, _this2.isItemDisabled, true);
                 _this2.setHighlightedIndex(nextHighlightedIndex, {
                   type: keyDownArrowDown
                 });
@@ -735,9 +745,9 @@ var Downshift = /*#__PURE__*/function () {
               if (itemCount > 0) {
                 var _this3$getState = _this3.getState(),
                   highlightedIndex = _this3$getState.highlightedIndex;
-                var nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, function (index) {
-                  return _this3.getItemNodeFromIndex(index);
-                });
+                var nextHighlightedIndex = getHighlightedIndex(highlightedIndex, -1, {
+                  length: itemCount
+                }, _this3.isItemDisabled, true);
                 _this3.setHighlightedIndex(nextHighlightedIndex, {
                   type: keyDownArrowUp
                 });
@@ -785,7 +795,6 @@ var Downshift = /*#__PURE__*/function () {
       });
       _this.inputKeyDownHandlers = _extends__default["default"]({}, _this.keyDownHandlers, {
         Home: function Home(event) {
-          var _this4 = this;
           var _this$getState3 = this.getState(),
             isOpen = _this$getState3.isOpen;
           if (!isOpen) {
@@ -798,15 +807,14 @@ var Downshift = /*#__PURE__*/function () {
           }
 
           // 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);
+          var newHighlightedIndex = getNonDisabledIndex(0, false, {
+            length: itemCount
+          }, this.isItemDisabled);
           this.setHighlightedIndex(newHighlightedIndex, {
             type: keyDownHome
           });
         },
         End: function End(event) {
-          var _this5 = this;
           var _this$getState4 = this.getState(),
             isOpen = _this$getState4.isOpen;
           if (!isOpen) {
@@ -819,9 +827,9 @@ var Downshift = /*#__PURE__*/function () {
           }
 
           // 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);
+          var newHighlightedIndex = getNonDisabledIndex(itemCount - 1, true, {
+            length: itemCount
+          }, this.isItemDisabled);
           this.setHighlightedIndex(newHighlightedIndex, {
             type: keyDownEnd
           });
@@ -931,8 +939,8 @@ var Downshift = /*#__PURE__*/function () {
         }
         return _extends__default["default"]({
           'aria-autocomplete': 'list',
-          'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
-          'aria-controls': isOpen ? _this.menuId : null,
+          'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : undefined,
+          'aria-controls': isOpen ? _this.menuId : undefined,
           'aria-labelledby': rest && rest['aria-label'] ? undefined : _this.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
@@ -984,7 +992,7 @@ var Downshift = /*#__PURE__*/function () {
         _this.getMenuProps.called = true;
         _this.getMenuProps.refKey = refKey;
         _this.getMenuProps.suppressRefError = suppressRefError;
-        return _extends__default["default"]((_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 _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
@@ -1189,14 +1197,13 @@ var Downshift = /*#__PURE__*/function () {
       }
     };
     _proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
-      var _this6 = this;
       var itemCount = this.getItemCount();
       var _this$getState8 = this.getState(),
         highlightedIndex = _this$getState8.highlightedIndex;
       if (itemCount > 0) {
-        var nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, function (index) {
-          return _this6.getItemNodeFromIndex(index);
-        });
+        var nextHighlightedIndex = getHighlightedIndex(highlightedIndex, amount, {
+          length: itemCount
+        }, this.isItemDisabled, true);
         this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet);
       }
     };
@@ -1261,7 +1268,7 @@ var Downshift = /*#__PURE__*/function () {
       };
     };
     _proto.componentDidMount = function componentDidMount() {
-      var _this7 = this;
+      var _this4 = this;
       /* istanbul ignore if (react-native) */
       if (process.env.NODE_ENV !== 'production' && !false && this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
         validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
@@ -1275,18 +1282,18 @@ var Downshift = /*#__PURE__*/function () {
         // 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;
+          _this4.isMouseDown = true;
         };
         var onMouseUp = function onMouseUp(event) {
-          _this7.isMouseDown = false;
+          _this4.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({
+          var contextWithinDownshift = targetWithinDownshift(event.target, [_this4._rootNode, _this4._menuNode], _this4.props.environment);
+          if (!contextWithinDownshift && _this4.getState().isOpen) {
+            _this4.reset({
               type: mouseUp
             }, function () {
-              return _this7.props.onOuterClick(_this7.getStateAndHelpers());
+              return _this4.props.onOuterClick(_this4.getStateAndHelpers());
             });
           }
         };
@@ -1297,18 +1304,18 @@ var Downshift = /*#__PURE__*/function () {
         // 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;
+          _this4.isTouchMove = false;
         };
         var onTouchMove = function onTouchMove() {
-          _this7.isTouchMove = true;
+          _this4.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({
+          var contextWithinDownshift = targetWithinDownshift(event.target, [_this4._rootNode, _this4._menuNode], _this4.props.environment, false);
+          if (!_this4.isTouchMove && !contextWithinDownshift && _this4.getState().isOpen) {
+            _this4.reset({
               type: touchEnd
             }, function () {
-              return _this7.props.onOuterClick(_this7.getStateAndHelpers());
+              return _this4.props.onOuterClick(_this4.getStateAndHelpers());
             });
           }
         };
@@ -1319,8 +1326,8 @@ var Downshift = /*#__PURE__*/function () {
         environment.addEventListener('touchmove', onTouchMove);
         environment.addEventListener('touchend', onTouchEnd);
         this.cleanup = function () {
-          _this7.internalClearTimeouts();
-          _this7.updateStatus.cancel();
+          _this4.internalClearTimeouts();
+          _this4.updateStatus.cancel();
           environment.removeEventListener('mousedown', onMouseDown);
           environment.removeEventListener('mouseup', onMouseUp);
           environment.removeEventListener('touchstart', onTouchStart);
@@ -1397,7 +1404,7 @@ var Downshift = /*#__PURE__*/function () {
       } else if (isDOMElement(element)) {
         // they didn't apply the root props, but we can clone
         // this and apply the props ourselves
-        return /*#__PURE__*/react.cloneElement(element, this.getRootProps(getElementProps(element)));
+        return /*#__PURE__*/React.cloneElement(element, this.getRootProps(getElementProps(element)));
       }
 
       /* istanbul ignore else */
@@ -1412,7 +1419,7 @@ var Downshift = /*#__PURE__*/function () {
       return undefined;
     };
     return Downshift;
-  }(react.Component);
+  }(React.Component);
   Downshift.defaultProps = {
     defaultHighlightedIndex: null,
     defaultIsOpen: false,
@@ -1468,13 +1475,15 @@ process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
   itemCount: PropTypes__default["default"].number,
   id: PropTypes__default["default"].string,
   environment: PropTypes__default["default"].shape({
-    addEventListener: PropTypes__default["default"].func,
-    removeEventListener: PropTypes__default["default"].func,
+    addEventListener: PropTypes__default["default"].func.isRequired,
+    removeEventListener: PropTypes__default["default"].func.isRequired,
     document: PropTypes__default["default"].shape({
-      getElementById: PropTypes__default["default"].func,
-      activeElement: PropTypes__default["default"].any,
-      body: PropTypes__default["default"].any
-    })
+      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__default["default"].func.isRequired
   }),
   suppressRefError: PropTypes__default["default"].bool,
   scrollIntoView: PropTypes__default["default"].func,
@@ -1581,16 +1590,23 @@ var updateA11yStatus = debounce(function (getA11yMessage, document) {
 }, 200);
 
 // istanbul ignore next
-var 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,
+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__default["default"] // Avoid conditional useId call
+? function useElementIds(_ref) {
+  var id = _ref.id,
     labelId = _ref.labelId,
     menuId = _ref.menuId,
     getItemId = _ref.getItemId,
     toggleButtonId = _ref.toggleButtonId,
     inputId = _ref.inputId;
-  var elementIdsRef = react.useRef({
+  // Avoid conditional useId call
+  var reactId = "downshift-" + React__default["default"].useId();
+  if (!id) {
+    id = reactId;
+  }
+  var elementIdsRef = React.useRef({
     labelId: labelId || id + "-label",
     menuId: menuId || id + "-menu",
     getItemId: getItemId || function (index) {
@@ -1600,7 +1616,25 @@ function useElementIds(_ref) {
     inputId: inputId || id + "-input"
   });
   return elementIdsRef.current;
-}
+} : function useElementIds(_ref2) {
+  var _ref2$id = _ref2.id,
+    id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
+    labelId = _ref2.labelId,
+    menuId = _ref2.menuId,
+    getItemId = _ref2.getItemId,
+    toggleButtonId = _ref2.toggleButtonId,
+    inputId = _ref2.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"
+  });
+  return elementIdsRef.current;
+};
 function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   var item, index;
   if (itemProp === undefined) {
@@ -1622,7 +1656,7 @@ function capitalizeString(string) {
   return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
 }
 function useLatestRef(val) {
-  var ref = react.useRef(val);
+  var 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
@@ -1643,9 +1677,9 @@ function useLatestRef(val) {
  * @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) {
+  var prevStateRef = React.useRef();
+  var actionRef = React.useRef();
+  var enhancedReducer = React.useCallback(function (state, action) {
     actionRef.current = action;
     state = getState(state, action.props);
     var changes = reducer(state, action);
@@ -1654,17 +1688,17 @@ function useEnhancedReducer(reducer, initialState, props) {
     }));
     return newState;
   }, [reducer]);
-  var _useReducer = react.useReducer(enhancedReducer, initialState),
+  var _useReducer = React.useReducer(enhancedReducer, initialState),
     state = _useReducer[0],
     dispatch = _useReducer[1];
   var propsRef = useLatestRef(props);
-  var dispatchWithProps = react.useCallback(function (action) {
+  var dispatchWithProps = React.useCallback(function (action) {
     return dispatch(_extends__default["default"]({
       props: propsRef.current
     }, action));
   }, [propsRef]);
   var action = actionRef.current;
-  react.useEffect(function () {
+  React.useEffect(function () {
     if (action && prevStateRef.current && prevStateRef.current !== state) {
       callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
     }
@@ -1768,11 +1802,11 @@ function getHighlightedIndexOnOpen(props, state, offset) {
  * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
  */
 function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
-  var mouseAndTouchTrackersRef = react.useRef({
+  var mouseAndTouchTrackersRef = React.useRef({
     isMouseDown: false,
     isTouchMove: false
   });
-  react.useEffect(function () {
+  React.useEffect(function () {
     if ((environment == null ? void 0 : environment.addEventListener) == null) {
       return;
     }
@@ -1836,15 +1870,15 @@ var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
   useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
-    var isInitialMountRef = react.useRef(true);
+    var 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) {
+    var getterPropsCalledRef = React.useRef(propKeys.reduce(function (acc, propKey) {
       acc[propKey] = {};
       return acc;
     }, {}));
-    react.useEffect(function () {
+    React.useEffect(function () {
       Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
         var propCallInfo = getterPropsCalledRef.current[propKey];
         if (isInitialMountRef.current) {
@@ -1864,7 +1898,7 @@ if (process.env.NODE_ENV !== 'production') {
       });
       isInitialMountRef.current = false;
     });
-    var setGetterPropCallInfo = react.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
+    var setGetterPropCallInfo = React.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
       getterPropsCalledRef.current[propKey] = {
         suppressRefError: suppressRefError,
         refKey: refKey,
@@ -1874,14 +1908,14 @@ if (process.env.NODE_ENV !== 'production') {
     return setGetterPropCallInfo;
   };
 }
-function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
-  var isInitialMount = _ref2.isInitialMount,
-    highlightedIndex = _ref2.highlightedIndex,
-    items = _ref2.items,
-    environment = _ref2.environment,
-    rest = _objectWithoutPropertiesLoose__default["default"](_ref2, _excluded$3);
+function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref3) {
+  var isInitialMount = _ref3.isInitialMount,
+    highlightedIndex = _ref3.highlightedIndex,
+    items = _ref3.items,
+    environment = _ref3.environment,
+    rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded$3);
   // Sets a11y status message on changes in state.
-  react.useEffect(function () {
+  React.useEffect(function () {
     if (isInitialMount || false) {
       return;
     }
@@ -1895,15 +1929,15 @@ function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
     // 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;
+function useScrollIntoView(_ref4) {
+  var highlightedIndex = _ref4.highlightedIndex,
+    isOpen = _ref4.isOpen,
+    itemRefs = _ref4.itemRefs,
+    getItemNodeFromIndex = _ref4.getItemNodeFromIndex,
+    menuElement = _ref4.menuElement,
+    scrollIntoViewProp = _ref4.scrollIntoView;
   // used not to scroll on highlight by mouse.
-  var shouldScrollRef = react.useRef(true);
+  var shouldScrollRef = React.useRef(true);
   // Scroll on highlighted item if change comes from keyboard.
   useIsomorphicLayoutEffect(function () {
     if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
@@ -1923,13 +1957,13 @@ function useScrollIntoView(_ref3) {
 var useControlPropsValidator = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
-  useControlPropsValidator = function useControlPropsValidator(_ref4) {
-    var isInitialMount = _ref4.isInitialMount,
-      props = _ref4.props,
-      state = _ref4.state;
+  useControlPropsValidator = function useControlPropsValidator(_ref5) {
+    var isInitialMount = _ref5.isInitialMount,
+      props = _ref5.props,
+      state = _ref5.state;
     // used for checking when props are moving from controlled to uncontrolled.
-    var prevPropsRef = react.useRef(props);
-    react.useEffect(function () {
+    var prevPropsRef = React.useRef(props);
+    React.useEffect(function () {
       if (isInitialMount) {
         return;
       }
@@ -1965,6 +1999,47 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) {
   }));
 }
 
+// Shared between all exports.
+var commonPropTypes = {
+  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__default["default"].func.isRequired
+  }),
+  itemToString: PropTypes__default["default"].func,
+  stateReducer: PropTypes__default["default"].func
+};
+
+// Shared between useSelect, useCombobox, Downshift.
+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) {
   var type = action.type,
     props = action.props;
@@ -2024,56 +2099,22 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
 /* eslint-enable complexity */
 
 function getItemIndexByCharacterKey(_a) {
-    var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, getItemNodeFromIndex = _a.getItemNodeFromIndex;
+    var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, isItemDisabled = _a.isItemDisabled;
     var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
     for (var index = 0; index < items.length; index++) {
         // if we already have a search query in progress, we also consider the current highlighted item.
         var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
         var item = items[offsetIndex];
         if (item !== undefined &&
-            itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar)) {
-            var element = getItemNodeFromIndex(offsetIndex);
-            if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('disabled'))) {
-                return offsetIndex;
-            }
+            itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar) &&
+            !isItemDisabled(item, offsetIndex)) {
+            return offsetIndex;
         }
     }
     return highlightedIndex;
 }
-var propTypes$2 = {
-    items: PropTypes__default["default"].array.isRequired,
-    itemToString: PropTypes__default["default"].func,
-    getA11yStatusMessage: PropTypes__default["default"].func,
-    getA11ySelectionMessage: PropTypes__default["default"].func,
-    highlightedIndex: PropTypes__default["default"].number,
-    defaultHighlightedIndex: PropTypes__default["default"].number,
-    initialHighlightedIndex: PropTypes__default["default"].number,
-    isOpen: PropTypes__default["default"].bool,
-    defaultIsOpen: PropTypes__default["default"].bool,
-    initialIsOpen: PropTypes__default["default"].bool,
-    selectedItem: PropTypes__default["default"].any,
-    initialSelectedItem: PropTypes__default["default"].any,
-    defaultSelectedItem: PropTypes__default["default"].any,
-    id: PropTypes__default["default"].string,
-    labelId: PropTypes__default["default"].string,
-    menuId: PropTypes__default["default"].string,
-    getItemId: PropTypes__default["default"].func,
-    toggleButtonId: PropTypes__default["default"].string,
-    stateReducer: PropTypes__default["default"].func,
-    onSelectedItemChange: PropTypes__default["default"].func,
-    onHighlightedIndexChange: PropTypes__default["default"].func,
-    onStateChange: PropTypes__default["default"].func,
-    onIsOpenChange: PropTypes__default["default"].func,
-    environment: PropTypes__default["default"].shape({
-        addEventListener: PropTypes__default["default"].func,
-        removeEventListener: PropTypes__default["default"].func,
-        document: PropTypes__default["default"].shape({
-            getElementById: PropTypes__default["default"].func,
-            activeElement: PropTypes__default["default"].any,
-            body: PropTypes__default["default"].any
-        })
-    })
-};
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+var propTypes$2 = tslib.__assign(tslib.__assign({}, commonDropdownPropTypes), { items: PropTypes__default["default"].array.isRequired, isItemDisabled: PropTypes__default["default"].func, getA11ySelectionMessage: PropTypes__default["default"].func });
 /**
  * Default implementation for status message. Only added when menu is open.
  * Will specift if there are results in the list, and if so, how many,
@@ -2095,7 +2136,9 @@ function getA11yStatusMessage(_a) {
     }
     return '';
 }
-var defaultProps$2 = tslib.__assign(tslib.__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage });
+var defaultProps$2 = tslib.__assign(tslib.__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage, isItemDisabled: function () {
+        return false;
+    } });
 // eslint-disable-next-line import/no-mutable-exports
 var validatePropTypes$2 = noop;
 /* istanbul ignore next */
@@ -2179,7 +2222,7 @@ function downshiftSelectReducer(state, action) {
           highlightedIndex: prevHighlightedIndex,
           items: props.items,
           itemToString: props.itemToString,
-          getItemNodeFromIndex: action.getItemNodeFromIndex
+          isItemDisabled: props.isItemDisabled
         });
         changes = {
           inputValue: inputValue,
@@ -2190,7 +2233,7 @@ function downshiftSelectReducer(state, action) {
       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);
+        var _highlightedIndex = state.isOpen ? getHighlightedIndex(state.highlightedIndex, 1, props.items, props.isItemDisabled) : altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1);
         changes = {
           highlightedIndex: _highlightedIndex,
           isOpen: true
@@ -2201,7 +2244,7 @@ function downshiftSelectReducer(state, action) {
       if (state.isOpen && altKey) {
         changes = getChangesOnSelection(props, state.highlightedIndex, false);
       } else {
-        var _highlightedIndex2 = state.isOpen ? getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false) : getHighlightedIndexOnOpen(props, state, -1);
+        var _highlightedIndex2 = state.isOpen ? getHighlightedIndex(state.highlightedIndex, -1, props.items, props.isItemDisabled) : getHighlightedIndexOnOpen(props, state, -1);
         changes = {
           highlightedIndex: _highlightedIndex2,
           isOpen: true
@@ -2215,24 +2258,24 @@ function downshiftSelectReducer(state, action) {
       break;
     case ToggleButtonKeyDownHome:
       changes = {
-        highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false),
+        highlightedIndex: getNonDisabledIndex(0, false, props.items, props.isItemDisabled),
         isOpen: true
       };
       break;
     case ToggleButtonKeyDownEnd:
       changes = {
-        highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false),
+        highlightedIndex: getNonDisabledIndex(props.items.length - 1, true, props.items, props.isItemDisabled),
         isOpen: true
       };
       break;
     case ToggleButtonKeyDownPageUp:
       changes = {
-        highlightedIndex: getNextWrappingIndex(-10, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false)
+        highlightedIndex: getHighlightedIndex(state.highlightedIndex, -10, props.items, props.isItemDisabled)
       };
       break;
     case ToggleButtonKeyDownPageDown:
       changes = {
-        highlightedIndex: getNextWrappingIndex(10, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false)
+        highlightedIndex: getHighlightedIndex(state.highlightedIndex, 10, props.items, props.isItemDisabled)
       };
       break;
     case ToggleButtonKeyDownEscape:
@@ -2263,7 +2306,7 @@ function downshiftSelectReducer(state, action) {
 
 var _excluded$2 = ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"],
   _excluded2$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
-  _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "onPress", "refKey", "ref", "disabled"];
+  _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "onPress", "refKey", "disabled", "ref"];
 useSelect.stateChangeTypes = stateChangeTypes$2;
 function useSelect(userProps) {
   if (userProps === void 0) {
@@ -2289,16 +2332,16 @@ function useSelect(userProps) {
     inputValue = state.inputValue;
 
   // Element efs.
-  var toggleButtonRef = react.useRef(null);
-  var menuRef = react.useRef(null);
-  var itemRefs = react.useRef({});
+  var toggleButtonRef = React.useRef(null);
+  var menuRef = React.useRef(null);
+  var itemRefs = React.useRef({});
   // used to keep the inputValue clearTimeout object between renders.
-  var clearTimeoutRef = react.useRef(null);
+  var clearTimeoutRef = React.useRef(null);
   // prevent id re-generation between renders.
   var elementIds = useElementIds(props);
   // used to keep track of how many items we had on previous cycle.
-  var previousResultCountRef = react.useRef();
-  var isInitialMountRef = react.useRef(true);
+  var previousResultCountRef = React.useRef();
+  var isInitialMountRef = React.useRef(true);
   // utility callback to get item element.
   var latest = useLatestRef({
     state: state,
@@ -2306,7 +2349,7 @@ function useSelect(userProps) {
   });
 
   // Some utils.
-  var getItemNodeFromIndex = react.useCallback(function (index) {
+  var getItemNodeFromIndex = React.useCallback(function (index) {
     return itemRefs.current[elementIds.getItemId(index)];
   }, [elementIds]);
 
@@ -2338,7 +2381,7 @@ function useSelect(userProps) {
   });
 
   // Sets cleanup for the keysSoFar callback, debounded after 500ms.
-  react.useEffect(function () {
+  React.useEffect(function () {
     // init the clean function here as we need access to dispatch.
     clearTimeoutRef.current = debounce(function (outerDispatch) {
       outerDispatch({
@@ -2354,7 +2397,7 @@ function useSelect(userProps) {
   }, []);
 
   // Invokes the keysSoFar callback set up above.
-  react.useEffect(function () {
+  React.useEffect(function () {
     if (!inputValue) {
       return;
     }
@@ -2365,7 +2408,7 @@ function useSelect(userProps) {
     props: props,
     state: state
   });
-  react.useEffect(function () {
+  React.useEffect(function () {
     if (isInitialMountRef.current) {
       return;
     }
@@ -2379,27 +2422,26 @@ function useSelect(userProps) {
   });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Make initial ref false.
-  react.useEffect(function () {
+  React.useEffect(function () {
     isInitialMountRef.current = false;
     return function () {
       isInitialMountRef.current = true;
     };
   }, []);
   // Reset itemRefs on close.
-  react.useEffect(function () {
+  React.useEffect(function () {
     if (!isOpen) {
       itemRefs.current = {};
     }
   }, [isOpen]);
 
   // Event handler functions.
-  var toggleButtonKeyDownHandlers = react.useMemo(function () {
+  var toggleButtonKeyDownHandlers = React.useMemo(function () {
     return {
       ArrowDown: function ArrowDown(event) {
         event.preventDefault();
         dispatch({
           type: ToggleButtonKeyDownArrowDown,
-          getItemNodeFromIndex: getItemNodeFromIndex,
           altKey: event.altKey
         });
       },
@@ -2407,22 +2449,19 @@ function useSelect(userProps) {
         event.preventDefault();
         dispatch({
           type: ToggleButtonKeyDownArrowUp,
-          getItemNodeFromIndex: getItemNodeFromIndex,
           altKey: event.altKey
         });
       },
       Home: function Home(event) {
         event.preventDefault();
         dispatch({
-          type: ToggleButtonKeyDownHome,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: ToggleButtonKeyDownHome
         });
       },
       End: function End(event) {
         event.preventDefault();
         dispatch({
-          type: ToggleButtonKeyDownEnd,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: ToggleButtonKeyDownEnd
         });
       },
       Escape: function Escape() {
@@ -2442,8 +2481,7 @@ function useSelect(userProps) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
           dispatch({
-            type: ToggleButtonKeyDownPageUp,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: ToggleButtonKeyDownPageUp
           });
         }
       },
@@ -2451,8 +2489,7 @@ function useSelect(userProps) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
           dispatch({
-            type: ToggleButtonKeyDownPageDown,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: ToggleButtonKeyDownPageDown
           });
         }
       },
@@ -2468,8 +2505,7 @@ function useSelect(userProps) {
         if (currentState.inputValue) {
           dispatch({
             type: ToggleButtonKeyDownCharacter,
-            key: ' ',
-            getItemNodeFromIndex: getItemNodeFromIndex
+            key: ' '
           });
         } else {
           dispatch({
@@ -2478,55 +2514,55 @@ function useSelect(userProps) {
         }
       }
     };
-  }, [dispatch, getItemNodeFromIndex, latest]);
+  }, [dispatch, latest]);
 
   // Action functions.
-  var toggleMenu = react.useCallback(function () {
+  var toggleMenu = React.useCallback(function () {
     dispatch({
       type: FunctionToggleMenu$1
     });
   }, [dispatch]);
-  var closeMenu = react.useCallback(function () {
+  var closeMenu = React.useCallback(function () {
     dispatch({
       type: FunctionCloseMenu$1
     });
   }, [dispatch]);
-  var openMenu = react.useCallback(function () {
+  var openMenu = React.useCallback(function () {
     dispatch({
       type: FunctionOpenMenu$1
     });
   }, [dispatch]);
-  var setHighlightedIndex = react.useCallback(function (newHighlightedIndex) {
+  var setHighlightedIndex = React.useCallback(function (newHighlightedIndex) {
     dispatch({
       type: FunctionSetHighlightedIndex$1,
       highlightedIndex: newHighlightedIndex
     });
   }, [dispatch]);
-  var selectItem = react.useCallback(function (newSelectedItem) {
+  var selectItem = React.useCallback(function (newSelectedItem) {
     dispatch({
       type: FunctionSelectItem$1,
       selectedItem: newSelectedItem
     });
   }, [dispatch]);
-  var reset = react.useCallback(function () {
+  var reset = React.useCallback(function () {
     dispatch({
       type: FunctionReset$2
     });
   }, [dispatch]);
-  var setInputValue = react.useCallback(function (newInputValue) {
+  var setInputValue = React.useCallback(function (newInputValue) {
     dispatch({
       type: FunctionSetInputValue$1,
       inputValue: newInputValue
     });
   }, [dispatch]);
   // Getter functions.
-  var getLabelProps = react.useCallback(function (labelProps) {
+  var getLabelProps = React.useCallback(function (labelProps) {
     return _extends__default["default"]({
       id: elementIds.labelId,
       htmlFor: elementIds.toggleButtonId
     }, labelProps);
   }, [elementIds]);
-  var getMenuProps = react.useCallback(function (_temp, _temp2) {
+  var getMenuProps = React.useCallback(function (_temp, _temp2) {
     var _extends2;
     var _ref = _temp === void 0 ? {} : _temp,
       onMouseLeave = _ref.onMouseLeave,
@@ -2549,7 +2585,7 @@ function useSelect(userProps) {
       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]);
-  var getToggleButtonProps = react.useCallback(function (_temp3, _temp4) {
+  var getToggleButtonProps = React.useCallback(function (_temp3, _temp4) {
     var _extends3;
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
       onBlur = _ref3.onBlur;
@@ -2587,8 +2623,8 @@ function useSelect(userProps) {
     }
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
-  }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers, getItemNodeFromIndex]);
-  var getItemProps = react.useCallback(function (_temp5) {
+  }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers]);
+  var getItemProps = React.useCallback(function (_temp5) {
     var _extends4;
     var _ref5 = _temp5 === void 0 ? {} : _temp5,
       itemProp = _ref5.item,
@@ -2598,15 +2634,19 @@ function useSelect(userProps) {
       var onPress = _ref5.onPress,
       _ref5$refKey = _ref5.refKey,
       refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
+      disabledProp = _ref5.disabled,
       ref = _ref5.ref,
-      disabled = _ref5.disabled,
       rest = _objectWithoutPropertiesLoose__default["default"](_ref5, _excluded3$1);
+    if (disabledProp !== undefined) {
+      console.warn('Passing "disabled" as an argument to getItemProps is not supported anymore. Please use the isItemDisabled prop from useSelect.');
+    }
     var _latest$current = latest.current,
       latestState = _latest$current.state,
       latestProps = _latest$current.props;
     var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
       item = _getItemAndIndex[0],
       index = _getItemAndIndex[1];
+    var disabled = latestProps.isItemDisabled(item, index);
     var itemHandleMouseMove = function itemHandleMouseMove() {
       if (index === latestState.highlightedIndex) {
         return;
@@ -2624,16 +2664,11 @@ function useSelect(userProps) {
         index: index
       });
     };
-    var itemProps = _extends__default["default"]((_extends4 = {
-      disabled: disabled,
-      role: 'option',
-      'aria-selected': "" + (item === selectedItem),
-      id: elementIds.getItemId(index)
-    }, _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), 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) */
       {
@@ -2642,7 +2677,7 @@ function useSelect(userProps) {
     }
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     return itemProps;
-  }, [latest, selectedItem, elementIds, shouldScrollRef, dispatch]);
+  }, [latest, elementIds, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -2675,7 +2710,7 @@ var InputKeyDownPageDown = process.env.NODE_ENV !== "production" ? '__input_keyd
 var InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 7;
 var InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 8;
 var InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 9;
-var InputFocus = process.env.NODE_ENV !== "production" ? '__input_focus__' : 10;
+var InputClick = process.env.NODE_ENV !== "production" ? '__input_click__' : 10;
 var MenuMouseLeave = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 11;
 var ItemMouseMove = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 12;
 var ItemClick = process.env.NODE_ENV !== "production" ? '__item_click__' : 13;
@@ -2701,7 +2736,7 @@ var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
   InputKeyDownEnter: InputKeyDownEnter,
   InputChange: InputChange,
   InputBlur: InputBlur,
-  InputFocus: InputFocus,
+  InputClick: InputClick,
   MenuMouseLeave: MenuMouseLeave,
   ItemMouseMove: ItemMouseMove,
   ItemClick: ItemClick,
@@ -2727,46 +2762,17 @@ function getInitialState$1(props) {
     inputValue: inputValue
   });
 }
-var propTypes$1 = {
+var propTypes$1 = _extends__default["default"]({}, commonDropdownPropTypes, {
   items: PropTypes__default["default"].array.isRequired,
-  itemToString: PropTypes__default["default"].func,
+  isItemDisabled: PropTypes__default["default"].func,
   selectedItemChanged: PropTypes__default["default"].func,
-  getA11yStatusMessage: PropTypes__default["default"].func,
   getA11ySelectionMessage: 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,
   inputValue: PropTypes__default["default"].string,
   defaultInputValue: PropTypes__default["default"].string,
   initialInputValue: PropTypes__default["default"].string,
-  id: PropTypes__default["default"].string,
-  labelId: PropTypes__default["default"].string,
-  menuId: PropTypes__default["default"].string,
-  getItemId: PropTypes__default["default"].func,
   inputId: PropTypes__default["default"].string,
-  toggleButtonId: PropTypes__default["default"].string,
-  stateReducer: PropTypes__default["default"].func,
-  onSelectedItemChange: PropTypes__default["default"].func,
-  onHighlightedIndexChange: PropTypes__default["default"].func,
-  onStateChange: PropTypes__default["default"].func,
-  onIsOpenChange: PropTypes__default["default"].func,
-  onInputValueChange: PropTypes__default["default"].func,
-  environment: PropTypes__default["default"].shape({
-    addEventListener: PropTypes__default["default"].func,
-    removeEventListener: PropTypes__default["default"].func,
-    document: PropTypes__default["default"].shape({
-      getElementById: PropTypes__default["default"].func,
-      activeElement: PropTypes__default["default"].any,
-      body: PropTypes__default["default"].any
-    })
-  })
-};
+  onInputValueChange: PropTypes__default["default"].func
+});
 
 /**
  * The useCombobox version of useControlledReducer, which also
@@ -2781,13 +2787,13 @@ var propTypes$1 = {
  * @returns {Array} An array with the state and an action dispatcher.
  */
 function useControlledReducer(reducer, initialState, props) {
-  var previousSelectedItemRef = react.useRef();
+  var previousSelectedItemRef = React.useRef();
   var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
 
   // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
-  react.useEffect(function () {
+  React.useEffect(function () {
     if (!isControlledProp(props, 'selectedItem')) {
       return;
     }
@@ -2815,7 +2821,10 @@ var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
   selectedItemChanged: function selectedItemChanged(prevItem, item) {
     return prevItem !== item;
   },
-  getA11yStatusMessage: getA11yStatusMessage$1
+  getA11yStatusMessage: getA11yStatusMessage$1,
+  isItemDisabled: function isItemDisabled() {
+    return false;
+  }
 });
 
 /* eslint-disable complexity */
@@ -2837,11 +2846,11 @@ function downshiftUseComboboxReducer(state, action) {
     case InputKeyDownArrowDown:
       if (state.isOpen) {
         changes = {
-          highlightedIndex: getNextWrappingIndex(1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
+          highlightedIndex: getHighlightedIndex(state.highlightedIndex, 1, props.items, props.isItemDisabled, true)
         };
       } else {
         changes = {
-          highlightedIndex: altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
+          highlightedIndex: altKey && state.selectedItem == null ? -1 : getHighlightedIndexOnOpen(props, state, 1),
           isOpen: props.items.length >= 0
         };
       }
@@ -2852,12 +2861,12 @@ function downshiftUseComboboxReducer(state, action) {
           changes = getChangesOnSelection(props, state.highlightedIndex);
         } else {
           changes = {
-            highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
+            highlightedIndex: getHighlightedIndex(state.highlightedIndex, -1, props.items, props.isItemDisabled, true)
           };
         }
       } else {
         changes = {
-          highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex),
+          highlightedIndex: getHighlightedIndexOnOpen(props, state, -1),
           isOpen: props.items.length >= 0
         };
       }
@@ -2876,22 +2885,22 @@ function downshiftUseComboboxReducer(state, action) {
       break;
     case InputKeyDownPageUp:
       changes = {
-        highlightedIndex: getNextWrappingIndex(-10, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false)
+        highlightedIndex: getHighlightedIndex(state.highlightedIndex, -10, props.items, props.isItemDisabled, true)
       };
       break;
     case InputKeyDownPageDown:
       changes = {
-        highlightedIndex: getNextWrappingIndex(10, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, false)
+        highlightedIndex: getHighlightedIndex(state.highlightedIndex, 10, props.items, props.isItemDisabled, true)
       };
       break;
     case InputKeyDownHome:
       changes = {
-        highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
+        highlightedIndex: getNonDisabledIndex(0, false, props.items, props.isItemDisabled)
       };
       break;
     case InputKeyDownEnd:
       changes = {
-        highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
+        highlightedIndex: getNonDisabledIndex(props.items.length - 1, true, props.items, props.isItemDisabled)
       };
       break;
     case InputBlur:
@@ -2910,10 +2919,10 @@ function downshiftUseComboboxReducer(state, action) {
         inputValue: action.inputValue
       };
       break;
-    case InputFocus:
+    case InputClick:
       changes = {
-        isOpen: true,
-        highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
+        isOpen: !state.isOpen,
+        highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
       };
       break;
     case FunctionSelectItem:
@@ -2937,7 +2946,7 @@ function downshiftUseComboboxReducer(state, action) {
 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"];
+  _excluded4 = ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "onClick", "refKey", "ref"];
 useCombobox.stateChangeTypes = stateChangeTypes$1;
 function useCombobox(userProps) {
   if (userProps === void 0) {
@@ -2965,21 +2974,21 @@ function useCombobox(userProps) {
     inputValue = state.inputValue;
 
   // 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);
+  var menuRef = React.useRef(null);
+  var itemRefs = React.useRef({});
+  var inputRef = React.useRef(null);
+  var toggleButtonRef = React.useRef(null);
+  var isInitialMountRef = React.useRef(true);
   // prevent id re-generation between renders.
   var elementIds = useElementIds(props);
   // used to keep track of how many items we had on previous cycle.
-  var previousResultCountRef = react.useRef();
+  var previousResultCountRef = React.useRef();
   // utility callback to get item element.
   var latest = useLatestRef({
     state: state,
     props: props
   });
-  var getItemNodeFromIndex = react.useCallback(function (index) {
+  var getItemNodeFromIndex = React.useCallback(function (index) {
     return itemRefs.current[elementIds.getItemId(index)];
   }, [elementIds]);
 
@@ -3015,14 +3024,14 @@ function useCombobox(userProps) {
     state: state
   });
   // Focus the input on first render if required.
-  react.useEffect(function () {
+  React.useEffect(function () {
     var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
     if (focusOnOpen && inputRef.current) {
       inputRef.current.focus();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  react.useEffect(function () {
+  React.useEffect(function () {
     if (isInitialMountRef.current) {
       return;
     }
@@ -3037,14 +3046,14 @@ function useCombobox(userProps) {
   });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Make initial ref false.
-  react.useEffect(function () {
+  React.useEffect(function () {
     isInitialMountRef.current = false;
     return function () {
       isInitialMountRef.current = true;
     };
   }, []);
   // Reset itemRefs on close.
-  react.useEffect(function () {
+  React.useEffect(function () {
     var _environment$document;
     if (!isOpen) {
       itemRefs.current = {};
@@ -3055,22 +3064,20 @@ function useCombobox(userProps) {
   }, [isOpen, environment]);
 
   /* Event handler functions */
-  var inputKeyDownHandlers = react.useMemo(function () {
+  var inputKeyDownHandlers = React.useMemo(function () {
     return {
       ArrowDown: function ArrowDown(event) {
         event.preventDefault();
         dispatch({
           type: InputKeyDownArrowDown,
-          altKey: event.altKey,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          altKey: event.altKey
         });
       },
       ArrowUp: function ArrowUp(event) {
         event.preventDefault();
         dispatch({
           type: InputKeyDownArrowUp,
-          altKey: event.altKey,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          altKey: event.altKey
         });
       },
       Home: function Home(event) {
@@ -3079,8 +3086,7 @@ function useCombobox(userProps) {
         }
         event.preventDefault();
         dispatch({
-          type: InputKeyDownHome,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: InputKeyDownHome
         });
       },
       End: function End(event) {
@@ -3089,8 +3095,7 @@ function useCombobox(userProps) {
         }
         event.preventDefault();
         dispatch({
-          type: InputKeyDownEnd,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: InputKeyDownEnd
         });
       },
       Escape: function Escape(event) {
@@ -3111,16 +3116,14 @@ function useCombobox(userProps) {
         }
         event.preventDefault();
         dispatch({
-          type: InputKeyDownEnter,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: InputKeyDownEnter
         });
       },
       PageUp: function PageUp(event) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
           dispatch({
-            type: InputKeyDownPageUp,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: InputKeyDownPageUp
           });
         }
       },
@@ -3128,22 +3131,21 @@ function useCombobox(userProps) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
           dispatch({
-            type: InputKeyDownPageDown,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: InputKeyDownPageDown
           });
         }
       }
     };
-  }, [dispatch, latest, getItemNodeFromIndex]);
+  }, [dispatch, latest]);
 
   // Getter props.
-  var getLabelProps = react.useCallback(function (labelProps) {
+  var getLabelProps = React.useCallback(function (labelProps) {
     return _extends__default["default"]({
       id: elementIds.labelId,
       htmlFor: elementIds.inputId
     }, labelProps);
   }, [elementIds]);
-  var getMenuProps = react.useCallback(function (_temp, _temp2) {
+  var getMenuProps = React.useCallback(function (_temp, _temp2) {
     var _extends2;
     var _ref = _temp === void 0 ? {} : _temp,
       onMouseLeave = _ref.onMouseLeave,
@@ -3163,7 +3165,7 @@ function useCombobox(userProps) {
       });
     }), _extends2), rest);
   }, [dispatch, setGetterPropCallInfo, elementIds]);
-  var getItemProps = react.useCallback(function (_temp3) {
+  var getItemProps = React.useCallback(function (_temp3) {
     var _extends3, _ref4;
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
       itemProp = _ref3.item,
@@ -3175,14 +3177,19 @@ function useCombobox(userProps) {
       onMouseDown = _ref3.onMouseDown,
       onClick = _ref3.onClick;
       _ref3.onPress;
-      var disabled = _ref3.disabled,
+      var disabledProp = _ref3.disabled,
       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.');
+    }
     var _latest$current = latest.current,
       latestProps = _latest$current.props,
       latestState = _latest$current.state;
     var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      item = _getItemAndIndex[0],
       index = _getItemAndIndex[1];
-    var onSelectKey = /* istanbul ignore next (react-native) */'onPress' ;
+    var disabled = latestProps.isItemDisabled(item, index);
+    var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
       if (index === latestState.highlightedIndex) {
@@ -3208,12 +3215,12 @@ function useCombobox(userProps) {
       if (itemNode) {
         itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (index === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(index), _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);
   }, [dispatch, latest, shouldScrollRef, elementIds]);
-  var getToggleButtonProps = react.useCallback(function (_temp4) {
+  var getToggleButtonProps = React.useCallback(function (_temp4) {
     var _extends4;
     var _ref5 = _temp4 === void 0 ? {} : _temp4;
       _ref5.onClick;
@@ -3234,16 +3241,16 @@ function useCombobox(userProps) {
       onPress: callAllEventHandlers(onPress, toggleButtonHandleClick)
     } ), rest);
   }, [dispatch, latest, elementIds]);
-  var getInputProps = react.useCallback(function (_temp5, _temp6) {
+  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,
+      var onClick = _ref6.onClick,
+      _ref6$refKey = _ref6.refKey,
       refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
       ref = _ref6.ref,
       rest = _objectWithoutPropertiesLoose__default["default"](_ref6, _excluded4);
@@ -3273,12 +3280,10 @@ function useCombobox(userProps) {
         });
       }
     };
-    var inputHandleFocus = function inputHandleFocus() {
-      if (!latestState.isOpen) {
-        dispatch({
-          type: InputFocus
-        });
-      }
+    var inputHandleClick = function inputHandleClick() {
+      dispatch({
+        type: InputClick
+      });
     };
 
     /* istanbul ignore next (preact) */
@@ -3286,48 +3291,48 @@ function useCombobox(userProps) {
     var 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 = (_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__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);
+    }), _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, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
 
   // returns
-  var toggleMenu = react.useCallback(function () {
+  var toggleMenu = React.useCallback(function () {
     dispatch({
       type: FunctionToggleMenu
     });
   }, [dispatch]);
-  var closeMenu = react.useCallback(function () {
+  var closeMenu = React.useCallback(function () {
     dispatch({
       type: FunctionCloseMenu
     });
   }, [dispatch]);
-  var openMenu = react.useCallback(function () {
+  var openMenu = React.useCallback(function () {
     dispatch({
       type: FunctionOpenMenu
     });
   }, [dispatch]);
-  var setHighlightedIndex = react.useCallback(function (newHighlightedIndex) {
+  var setHighlightedIndex = React.useCallback(function (newHighlightedIndex) {
     dispatch({
       type: FunctionSetHighlightedIndex,
       highlightedIndex: newHighlightedIndex
     });
   }, [dispatch]);
-  var selectItem = react.useCallback(function (newSelectedItem) {
+  var selectItem = React.useCallback(function (newSelectedItem) {
     dispatch({
       type: FunctionSelectItem,
       selectedItem: newSelectedItem
     });
   }, [dispatch]);
-  var setInputValue = react.useCallback(function (newInputValue) {
+  var setInputValue = React.useCallback(function (newInputValue) {
     dispatch({
       type: FunctionSetInputValue,
       inputValue: newInputValue
     });
   }, [dispatch]);
-  var reset = react.useCallback(function () {
+  var reset = React.useCallback(function () {
     dispatch({
       type: FunctionReset$1
     });
@@ -3437,30 +3442,19 @@ function getA11yRemovalMessage(selectionParameters) {
     itemToStringLocal = selectionParameters.itemToString;
   return itemToStringLocal(removedSelectedItem) + " has been removed.";
 }
-var propTypes = {
+var propTypes = _extends__default["default"]({}, commonPropTypes, {
   selectedItems: PropTypes__default["default"].array,
   initialSelectedItems: PropTypes__default["default"].array,
   defaultSelectedItems: PropTypes__default["default"].array,
-  itemToString: PropTypes__default["default"].func,
   getA11yRemovalMessage: PropTypes__default["default"].func,
-  stateReducer: PropTypes__default["default"].func,
   activeIndex: PropTypes__default["default"].number,
   initialActiveIndex: PropTypes__default["default"].number,
   defaultActiveIndex: PropTypes__default["default"].number,
   onActiveIndexChange: PropTypes__default["default"].func,
   onSelectedItemsChange: PropTypes__default["default"].func,
   keyNavigationNext: PropTypes__default["default"].string,
-  keyNavigationPrevious: PropTypes__default["default"].string,
-  environment: PropTypes__default["default"].shape({
-    addEventListener: PropTypes__default["default"].func,
-    removeEventListener: PropTypes__default["default"].func,
-    document: PropTypes__default["default"].shape({
-      getElementById: PropTypes__default["default"].func,
-      activeElement: PropTypes__default["default"].any,
-      body: PropTypes__default["default"].any
-    })
-  })
-};
+  keyNavigationPrevious: PropTypes__default["default"].string
+});
 var defaultProps = {
   itemToString: defaultProps$3.itemToString,
   stateReducer: defaultProps$3.stateReducer,
@@ -3644,10 +3638,10 @@ function useMultipleSelection(userProps) {
     selectedItems = state.selectedItems;
 
   // Refs.
-  var isInitialMountRef = react.useRef(true);
-  var dropdownRef = react.useRef(null);
-  var previousSelectedItemsRef = react.useRef(selectedItems);
-  var selectedItemRefs = react.useRef();
+  var isInitialMountRef = React.useRef(true);
+  var dropdownRef = React.useRef(null);
+  var previousSelectedItemsRef = React.useRef(selectedItems);
+  var selectedItemRefs = React.useRef();
   selectedItemRefs.current = [];
   var latest = useLatestRef({
     state: state,
@@ -3656,7 +3650,7 @@ function useMultipleSelection(userProps) {
 
   // Effects.
   /* Sets a11y status message on changes in selectedItem. */
-  react.useEffect(function () {
+  React.useEffect(function () {
     if (isInitialMountRef.current || false) {
       return;
     }
@@ -3677,7 +3671,7 @@ function useMultipleSelection(userProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedItems.length]);
   // Sets focus on active item.
-  react.useEffect(function () {
+  React.useEffect(function () {
     if (isInitialMountRef.current) {
       return;
     }
@@ -3694,7 +3688,7 @@ function useMultipleSelection(userProps) {
   });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps');
   // Make initial ref false.
-  react.useEffect(function () {
+  React.useEffect(function () {
     isInitialMountRef.current = false;
     return function () {
       isInitialMountRef.current = true;
@@ -3702,7 +3696,7 @@ function useMultipleSelection(userProps) {
   }, []);
 
   // Event handler functions.
-  var selectedItemKeyDownHandlers = react.useMemo(function () {
+  var selectedItemKeyDownHandlers = React.useMemo(function () {
     var _ref;
     return _ref = {}, _ref[keyNavigationPrevious] = function () {
       dispatch({
@@ -3722,7 +3716,7 @@ function useMultipleSelection(userProps) {
       });
     }, _ref;
   }, [dispatch, keyNavigationNext, keyNavigationPrevious]);
-  var dropdownKeyDownHandlers = react.useMemo(function () {
+  var dropdownKeyDownHandlers = React.useMemo(function () {
     var _ref2;
     return _ref2 = {}, _ref2[keyNavigationPrevious] = function (event) {
       if (isKeyDownOperationPermitted(event)) {
@@ -3740,7 +3734,7 @@ function useMultipleSelection(userProps) {
   }, [dispatch, keyNavigationPrevious]);
 
   // Getter props.
-  var getSelectedItemProps = react.useCallback(function (_temp) {
+  var getSelectedItemProps = React.useCallback(function (_temp) {
     var _extends2;
     var _ref3 = _temp === void 0 ? {} : _temp,
       _ref3$refKey = _ref3.refKey,
@@ -3773,7 +3767,7 @@ function useMultipleSelection(userProps) {
       }
     }), _extends2.tabIndex = isFocusable ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
   }, [dispatch, latest, selectedItemKeyDownHandlers]);
-  var getDropdownProps = react.useCallback(function (_temp2, _temp3) {
+  var getDropdownProps = React.useCallback(function (_temp2, _temp3) {
     var _extends3;
     var _ref4 = _temp2 === void 0 ? {} : _temp2,
       _ref4$refKey = _ref4.refKey,
@@ -3810,31 +3804,31 @@ function useMultipleSelection(userProps) {
   }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]);
 
   // returns
-  var addSelectedItem = react.useCallback(function (selectedItem) {
+  var addSelectedItem = React.useCallback(function (selectedItem) {
     dispatch({
       type: FunctionAddSelectedItem,
       selectedItem: selectedItem
     });
   }, [dispatch]);
-  var removeSelectedItem = react.useCallback(function (selectedItem) {
+  var removeSelectedItem = React.useCallback(function (selectedItem) {
     dispatch({
       type: FunctionRemoveSelectedItem,
       selectedItem: selectedItem
     });
   }, [dispatch]);
-  var setSelectedItems = react.useCallback(function (newSelectedItems) {
+  var setSelectedItems = React.useCallback(function (newSelectedItems) {
     dispatch({
       type: FunctionSetSelectedItems,
       selectedItems: newSelectedItems
     });
   }, [dispatch]);
-  var setActiveIndex = react.useCallback(function (newActiveIndex) {
+  var setActiveIndex = React.useCallback(function (newActiveIndex) {
     dispatch({
       type: FunctionSetActiveIndex,
       activeIndex: newActiveIndex
     });
   }, [dispatch]);
-  var reset = react.useCallback(function () {
+  var reset = React.useCallback(function () {
     dispatch({
       type: FunctionReset
     });