downshift 7.6.0 → 8.0.0-beta.0

package/dist/downshift.esm.js

@@ -3,7 +3,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import PropTypes from 'prop-types';
-import { cloneElement, Component, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'react';
+import React, { cloneElement, Component, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'react';
 import { isForwardRef } from 'react-is';
 import compute from 'compute-scroll-into-view';
 import { __assign } from 'tslib';
@@ -136,6 +136,11 @@ function generateId() {
  * Resets idCounter to 0. Used for SSR.
  */
 function resetIdCounter() {
+  // istanbul ignore next
+  if ('useId' in React) {
+    console.warn("It is not necessary to call resetIdCounter when using React 18+");
+    return;
+  }
   idCounter = 0;
 }
 
@@ -281,70 +286,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;
 }
@@ -524,6 +529,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;
@@ -674,7 +683,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 : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
+        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);
       };
       //\\\\\\\\\\\\\\\\\\\\\\\\\\ ROOT
       _this.keyDownHandlers = {
@@ -695,9 +704,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
                 });
@@ -722,9 +731,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
                 });
@@ -772,7 +781,6 @@ var Downshift = /*#__PURE__*/function () {
       });
       _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
         Home: function Home(event) {
-          var _this4 = this;
           var _this$getState3 = this.getState(),
             isOpen = _this$getState3.isOpen;
           if (!isOpen) {
@@ -785,15 +793,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) {
@@ -806,9 +813,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
           });
@@ -920,8 +927,8 @@ var Downshift = /*#__PURE__*/function () {
         }
         return _extends({
           '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
@@ -973,7 +980,7 @@ var Downshift = /*#__PURE__*/function () {
         _this.getMenuProps.called = true;
         _this.getMenuProps.refKey = refKey;
         _this.getMenuProps.suppressRefError = suppressRefError;
-        return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
+        return _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);
       };
       //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ MENU
       /////////////////////////////// ITEM
@@ -1178,14 +1185,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);
       }
     };
@@ -1250,7 +1256,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);
@@ -1264,18 +1270,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());
             });
           }
         };
@@ -1286,18 +1292,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());
             });
           }
         };
@@ -1308,8 +1314,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);
@@ -1457,13 +1463,15 @@ process.env.NODE_ENV !== "production" ? Downshift.propTypes = {
   itemCount: PropTypes.number,
   id: PropTypes.string,
   environment: PropTypes.shape({
-    addEventListener: PropTypes.func,
-    removeEventListener: PropTypes.func,
+    addEventListener: PropTypes.func.isRequired,
+    removeEventListener: PropTypes.func.isRequired,
     document: PropTypes.shape({
-      getElementById: PropTypes.func,
-      activeElement: PropTypes.any,
-      body: PropTypes.any
-    })
+      createElement: PropTypes.func.isRequired,
+      getElementById: PropTypes.func.isRequired,
+      activeElement: PropTypes.any.isRequired,
+      body: PropTypes.any.isRequired
+    }).isRequired,
+    Node: PropTypes.func.isRequired
   }),
   suppressRefError: PropTypes.bool,
   scrollIntoView: PropTypes.func,
@@ -1571,14 +1579,21 @@ var updateA11yStatus = debounce(function (getA11yMessage, document) {
 
 // istanbul ignore next
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? useLayoutEffect : useEffect;
-function useElementIds(_ref) {
-  var _ref$id = _ref.id,
-    id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id,
+
+// istanbul ignore next
+var useElementIds = 'useId' in React // 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;
+  // Avoid conditional useId call
+  var reactId = "downshift-" + React.useId();
+  if (!id) {
+    id = reactId;
+  }
   var elementIdsRef = useRef({
     labelId: labelId || id + "-label",
     menuId: menuId || id + "-menu",
@@ -1589,7 +1604,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 = 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) {
@@ -1866,12 +1899,12 @@ 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(_ref2, _excluded$3);
+function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref3) {
+  var isInitialMount = _ref3.isInitialMount,
+    highlightedIndex = _ref3.highlightedIndex,
+    items = _ref3.items,
+    environment = _ref3.environment,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded$3);
   // Sets a11y status message on changes in state.
   useEffect(function () {
     if (isInitialMount || false) {
@@ -1887,13 +1920,13 @@ 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 = useRef(true);
   // Scroll on highlighted item if change comes from keyboard.
@@ -1915,10 +1948,10 @@ 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 = useRef(props);
     useEffect(function () {
@@ -1957,6 +1990,47 @@ function getChangesOnSelection(props, highlightedIndex, inputValue) {
   }));
 }
 
+// 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
+    }).isRequired,
+    Node: PropTypes.func.isRequired
+  }),
+  itemToString: PropTypes.func,
+  stateReducer: PropTypes.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
+});
+
 function downshiftCommonReducer(state, action, stateChangeTypes) {
   var type = action.type,
     props = action.props;
@@ -2016,56 +2090,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.array.isRequired,
-    itemToString: PropTypes.func,
-    getA11yStatusMessage: PropTypes.func,
-    getA11ySelectionMessage: 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,
-    stateReducer: PropTypes.func,
-    onSelectedItemChange: PropTypes.func,
-    onHighlightedIndexChange: PropTypes.func,
-    onStateChange: PropTypes.func,
-    onIsOpenChange: PropTypes.func,
-    environment: PropTypes.shape({
-        addEventListener: PropTypes.func,
-        removeEventListener: PropTypes.func,
-        document: PropTypes.shape({
-            getElementById: PropTypes.func,
-            activeElement: PropTypes.any,
-            body: PropTypes.any
-        })
-    })
-};
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+var propTypes$2 = __assign(__assign({}, commonDropdownPropTypes), { items: PropTypes.array.isRequired, isItemDisabled: PropTypes.func, getA11ySelectionMessage: PropTypes.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,
@@ -2087,7 +2127,9 @@ function getA11yStatusMessage(_a) {
     }
     return '';
 }
-var defaultProps$2 = __assign(__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage });
+var defaultProps$2 = __assign(__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage, isItemDisabled: function () {
+        return false;
+    } });
 // eslint-disable-next-line import/no-mutable-exports
 var validatePropTypes$2 = noop;
 /* istanbul ignore next */
@@ -2171,7 +2213,7 @@ function downshiftSelectReducer(state, action) {
           highlightedIndex: prevHighlightedIndex,
           items: props.items,
           itemToString: props.itemToString,
-          getItemNodeFromIndex: action.getItemNodeFromIndex
+          isItemDisabled: props.isItemDisabled
         });
         changes = {
           inputValue: inputValue,
@@ -2182,7 +2224,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
@@ -2193,7 +2235,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
@@ -2207,24 +2249,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:
@@ -2255,7 +2297,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) {
@@ -2391,7 +2433,6 @@ function useSelect(userProps) {
         event.preventDefault();
         dispatch({
           type: ToggleButtonKeyDownArrowDown,
-          getItemNodeFromIndex: getItemNodeFromIndex,
           altKey: event.altKey
         });
       },
@@ -2399,22 +2440,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() {
@@ -2434,8 +2472,7 @@ function useSelect(userProps) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
           dispatch({
-            type: ToggleButtonKeyDownPageUp,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: ToggleButtonKeyDownPageUp
           });
         }
       },
@@ -2443,8 +2480,7 @@ function useSelect(userProps) {
         if (latest.current.state.isOpen) {
           event.preventDefault();
           dispatch({
-            type: ToggleButtonKeyDownPageDown,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: ToggleButtonKeyDownPageDown
           });
         }
       },
@@ -2460,8 +2496,7 @@ function useSelect(userProps) {
         if (currentState.inputValue) {
           dispatch({
             type: ToggleButtonKeyDownCharacter,
-            key: ' ',
-            getItemNodeFromIndex: getItemNodeFromIndex
+            key: ' '
           });
         } else {
           dispatch({
@@ -2470,7 +2505,7 @@ function useSelect(userProps) {
         }
       }
     };
-  }, [dispatch, getItemNodeFromIndex, latest]);
+  }, [dispatch, latest]);
 
   // Action functions.
   var toggleMenu = useCallback(function () {
@@ -2575,8 +2610,7 @@ function useSelect(userProps) {
       } else if (isAcceptedCharacterKey(key)) {
         dispatch({
           type: ToggleButtonKeyDownCharacter,
-          key: key,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          key: key
         });
       }
     };
@@ -2592,7 +2626,7 @@ function useSelect(userProps) {
     }
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
-  }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers, getItemNodeFromIndex]);
+  }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers]);
   var getItemProps = useCallback(function (_temp5) {
     var _extends4;
     var _ref5 = _temp5 === void 0 ? {} : _temp5,
@@ -2603,15 +2637,19 @@ function useSelect(userProps) {
       _ref5.onPress;
       var _ref5$refKey = _ref5.refKey,
       refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
+      disabledProp = _ref5.disabled,
       ref = _ref5.ref,
-      disabled = _ref5.disabled,
       rest = _objectWithoutPropertiesLoose(_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;
@@ -2629,16 +2667,11 @@ function useSelect(userProps) {
         index: index
       });
     };
-    var itemProps = _extends((_extends4 = {
-      disabled: disabled,
-      role: 'option',
-      'aria-selected': "" + (item === selectedItem),
-      id: elementIds.getItemId(index)
-    }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
+    var itemProps = _extends((_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) */
       {
@@ -2647,7 +2680,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,
@@ -2680,7 +2713,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;
@@ -2706,7 +2739,7 @@ var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
   InputKeyDownEnter: InputKeyDownEnter,
   InputChange: InputChange,
   InputBlur: InputBlur,
-  InputFocus: InputFocus,
+  InputClick: InputClick,
   MenuMouseLeave: MenuMouseLeave,
   ItemMouseMove: ItemMouseMove,
   ItemClick: ItemClick,
@@ -2732,46 +2765,17 @@ function getInitialState$1(props) {
     inputValue: inputValue
   });
 }
-var propTypes$1 = {
+var propTypes$1 = _extends({}, commonDropdownPropTypes, {
   items: PropTypes.array.isRequired,
-  itemToString: PropTypes.func,
+  isItemDisabled: PropTypes.func,
   selectedItemChanged: PropTypes.func,
-  getA11yStatusMessage: PropTypes.func,
   getA11ySelectionMessage: 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,
   inputValue: PropTypes.string,
   defaultInputValue: PropTypes.string,
   initialInputValue: PropTypes.string,
-  id: PropTypes.string,
-  labelId: PropTypes.string,
-  menuId: PropTypes.string,
-  getItemId: PropTypes.func,
   inputId: PropTypes.string,
-  toggleButtonId: PropTypes.string,
-  stateReducer: PropTypes.func,
-  onSelectedItemChange: PropTypes.func,
-  onHighlightedIndexChange: PropTypes.func,
-  onStateChange: PropTypes.func,
-  onIsOpenChange: PropTypes.func,
-  onInputValueChange: PropTypes.func,
-  environment: PropTypes.shape({
-    addEventListener: PropTypes.func,
-    removeEventListener: PropTypes.func,
-    document: PropTypes.shape({
-      getElementById: PropTypes.func,
-      activeElement: PropTypes.any,
-      body: PropTypes.any
-    })
-  })
-};
+  onInputValueChange: PropTypes.func
+});
 
 /**
  * The useCombobox version of useControlledReducer, which also
@@ -2820,7 +2824,10 @@ var defaultProps$1 = _extends({}, defaultProps$3, {
   selectedItemChanged: function selectedItemChanged(prevItem, item) {
     return prevItem !== item;
   },
-  getA11yStatusMessage: getA11yStatusMessage$1
+  getA11yStatusMessage: getA11yStatusMessage$1,
+  isItemDisabled: function isItemDisabled() {
+    return false;
+  }
 });
 
 /* eslint-disable complexity */
@@ -2842,11 +2849,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
         };
       }
@@ -2857,12 +2864,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
         };
       }
@@ -2881,22 +2888,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:
@@ -2915,10 +2922,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:
@@ -2942,7 +2949,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) {
@@ -3066,16 +3073,14 @@ function useCombobox(userProps) {
         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) {
@@ -3084,8 +3089,7 @@ function useCombobox(userProps) {
         }
         event.preventDefault();
         dispatch({
-          type: InputKeyDownHome,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: InputKeyDownHome
         });
       },
       End: function End(event) {
@@ -3094,8 +3098,7 @@ function useCombobox(userProps) {
         }
         event.preventDefault();
         dispatch({
-          type: InputKeyDownEnd,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: InputKeyDownEnd
         });
       },
       Escape: function Escape(event) {
@@ -3116,16 +3119,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
           });
         }
       },
@@ -3133,13 +3134,12 @@ 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 = useCallback(function (labelProps) {
@@ -3180,13 +3180,18 @@ function useCombobox(userProps) {
       onMouseDown = _ref3.onMouseDown,
       onClick = _ref3.onClick;
       _ref3.onPress;
-      var disabled = _ref3.disabled,
+      var disabledProp = _ref3.disabled,
       rest = _objectWithoutPropertiesLoose(_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 disabled = latestProps.isItemDisabled(item, index);
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
@@ -3213,7 +3218,7 @@ 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);
@@ -3245,10 +3250,10 @@ function useCombobox(userProps) {
       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(_ref6, _excluded4);
@@ -3278,12 +3283,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) */
@@ -3291,11 +3294,11 @@ 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((_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
@@ -3442,30 +3445,19 @@ function getA11yRemovalMessage(selectionParameters) {
     itemToStringLocal = selectionParameters.itemToString;
   return itemToStringLocal(removedSelectedItem) + " has been removed.";
 }
-var propTypes = {
+var propTypes = _extends({}, commonPropTypes, {
   selectedItems: PropTypes.array,
   initialSelectedItems: PropTypes.array,
   defaultSelectedItems: PropTypes.array,
-  itemToString: PropTypes.func,
   getA11yRemovalMessage: PropTypes.func,
-  stateReducer: PropTypes.func,
   activeIndex: PropTypes.number,
   initialActiveIndex: PropTypes.number,
   defaultActiveIndex: PropTypes.number,
   onActiveIndexChange: PropTypes.func,
   onSelectedItemsChange: PropTypes.func,
   keyNavigationNext: PropTypes.string,
-  keyNavigationPrevious: PropTypes.string,
-  environment: PropTypes.shape({
-    addEventListener: PropTypes.func,
-    removeEventListener: PropTypes.func,
-    document: PropTypes.shape({
-      getElementById: PropTypes.func,
-      activeElement: PropTypes.any,
-      body: PropTypes.any
-    })
-  })
-};
+  keyNavigationPrevious: PropTypes.string
+});
 var defaultProps = {
   itemToString: defaultProps$3.itemToString,
   stateReducer: defaultProps$3.stateReducer,