downshift 7.3.2 → 7.3.3

package/dist/downshift.cjs.js

@@ -1603,14 +1603,19 @@ function useElementIds(_ref) {
   });
   return elementIdsRef.current;
 }
-function getItemIndex(index, item, items) {
-  if (index !== undefined) {
-    return index;
-  }
-  if (items.length === 0) {
-    return -1;
+function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
+  var item, index;
+  if (itemProp === undefined) {
+    if (indexProp === undefined) {
+      throw new Error(errorMessage);
+    }
+    item = items[indexProp];
+    index = indexProp;
+  } else {
+    index = indexProp === undefined ? items.indexOf(itemProp) : indexProp;
+    item = itemProp;
   }
-  return items.indexOf(item);
+  return [item, index];
 }
 function itemToString(item) {
   return item ? String(item) : '';
@@ -2600,8 +2605,9 @@ function useSelect(userProps) {
     var _latest$current = latest.current,
       latestState = _latest$current.state,
       latestProps = _latest$current.props;
-    var item = itemProp != null ? itemProp : items[indexProp];
-    var index = getItemIndex(indexProp, item, latestProps.items);
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      item = _getItemAndIndex[0],
+      index = _getItemAndIndex[1];
     var itemHandleMouseMove = function itemHandleMouseMove() {
       if (index === latestState.highlightedIndex) {
         return;
@@ -2619,18 +2625,14 @@ function useSelect(userProps) {
         index: index
       });
     };
-    var itemIndex = getItemIndex(index, item, latestProps.items);
-    if (itemIndex < 0) {
-      throw new Error('Pass either item or item index in getItemProps!');
-    }
     var itemProps = _extends__default["default"]((_extends4 = {
       disabled: disabled,
       role: 'option',
       'aria-selected': "" + (item === selectedItem),
-      id: elementIds.getItemId(itemIndex)
+      id: elementIds.getItemId(index)
     }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
     }), _extends4), rest);
     if (!disabled) {
@@ -2641,7 +2643,7 @@ function useSelect(userProps) {
     }
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     return itemProps;
-  }, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
+  }, [latest, selectedItem, elementIds, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -3170,8 +3172,8 @@ function useCombobox(userProps) {
   var getItemProps = react.useCallback(function (_temp3) {
     var _extends3, _ref4;
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
-      item = _ref3.item,
-      index = _ref3.index,
+      itemProp = _ref3.item,
+      indexProp = _ref3.index,
       _ref3$refKey = _ref3.refKey,
       refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
       ref = _ref3.ref,
@@ -3184,10 +3186,8 @@ function useCombobox(userProps) {
     var _latest$current = latest.current,
       latestProps = _latest$current.props,
       latestState = _latest$current.state;
-    var itemIndex = getItemIndex(index, item, latestProps.items);
-    if (itemIndex < 0) {
-      throw new Error('Pass either item or item index in getItemProps!');
-    }
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      index = _getItemAndIndex[1];
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
@@ -3212,9 +3212,9 @@ function useCombobox(userProps) {
     };
     return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+    }), _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), {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
@@ -3754,14 +3754,13 @@ function useMultipleSelection(userProps) {
       ref = _ref3.ref,
       onClick = _ref3.onClick,
       onKeyDown = _ref3.onKeyDown,
-      selectedItem = _ref3.selectedItem,
-      index = _ref3.index,
+      selectedItemProp = _ref3.selectedItem,
+      indexProp = _ref3.index,
       rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded);
     var latestState = latest.current.state;
-    var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
-    if (itemIndex < 0) {
-      throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
-    }
+    var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, 'Pass either item or index to getSelectedItemProps!'),
+      index = _getItemAndIndex[1];
+    var isFocusable = index > -1 && index === latestState.activeIndex;
     var selectedItemHandleClick = function selectedItemHandleClick() {
       dispatch({
         type: SelectedItemClick,
@@ -3778,7 +3777,7 @@ function useMultipleSelection(userProps) {
       if (selectedItemNode) {
         selectedItemRefs.current.push(selectedItemNode);
       }
-    }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
+    }), _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 _extends3;

package/dist/downshift.esm.js

@@ -1590,14 +1590,19 @@ function useElementIds(_ref) {
   });
   return elementIdsRef.current;
 }
-function getItemIndex(index, item, items) {
-  if (index !== undefined) {
-    return index;
-  }
-  if (items.length === 0) {
-    return -1;
+function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
+  var item, index;
+  if (itemProp === undefined) {
+    if (indexProp === undefined) {
+      throw new Error(errorMessage);
+    }
+    item = items[indexProp];
+    index = indexProp;
+  } else {
+    index = indexProp === undefined ? items.indexOf(itemProp) : indexProp;
+    item = itemProp;
   }
-  return items.indexOf(item);
+  return [item, index];
 }
 function itemToString(item) {
   return item ? String(item) : '';
@@ -2587,8 +2592,9 @@ function useSelect(userProps) {
     var _latest$current = latest.current,
       latestState = _latest$current.state,
       latestProps = _latest$current.props;
-    var item = itemProp != null ? itemProp : items[indexProp];
-    var index = getItemIndex(indexProp, item, latestProps.items);
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      item = _getItemAndIndex[0],
+      index = _getItemAndIndex[1];
     var itemHandleMouseMove = function itemHandleMouseMove() {
       if (index === latestState.highlightedIndex) {
         return;
@@ -2606,18 +2612,14 @@ function useSelect(userProps) {
         index: index
       });
     };
-    var itemIndex = getItemIndex(index, item, latestProps.items);
-    if (itemIndex < 0) {
-      throw new Error('Pass either item or item index in getItemProps!');
-    }
     var itemProps = _extends((_extends4 = {
       disabled: disabled,
       role: 'option',
       'aria-selected': "" + (item === selectedItem),
-      id: elementIds.getItemId(itemIndex)
+      id: elementIds.getItemId(index)
     }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
     }), _extends4), rest);
     if (!disabled) {
@@ -2628,7 +2630,7 @@ function useSelect(userProps) {
     }
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     return itemProps;
-  }, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
+  }, [latest, selectedItem, elementIds, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -3157,8 +3159,8 @@ function useCombobox(userProps) {
   var getItemProps = useCallback(function (_temp3) {
     var _extends3, _ref4;
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
-      item = _ref3.item,
-      index = _ref3.index,
+      itemProp = _ref3.item,
+      indexProp = _ref3.index,
       _ref3$refKey = _ref3.refKey,
       refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
       ref = _ref3.ref,
@@ -3171,10 +3173,8 @@ function useCombobox(userProps) {
     var _latest$current = latest.current,
       latestProps = _latest$current.props,
       latestState = _latest$current.state;
-    var itemIndex = getItemIndex(index, item, latestProps.items);
-    if (itemIndex < 0) {
-      throw new Error('Pass either item or item index in getItemProps!');
-    }
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      index = _getItemAndIndex[1];
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
     var itemHandleMouseMove = function itemHandleMouseMove() {
@@ -3199,9 +3199,9 @@ function useCombobox(userProps) {
     };
     return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+    }), _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), {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
@@ -3741,14 +3741,13 @@ function useMultipleSelection(userProps) {
       ref = _ref3.ref,
       onClick = _ref3.onClick,
       onKeyDown = _ref3.onKeyDown,
-      selectedItem = _ref3.selectedItem,
-      index = _ref3.index,
+      selectedItemProp = _ref3.selectedItem,
+      indexProp = _ref3.index,
       rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
     var latestState = latest.current.state;
-    var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
-    if (itemIndex < 0) {
-      throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
-    }
+    var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, 'Pass either item or index to getSelectedItemProps!'),
+      index = _getItemAndIndex[1];
+    var isFocusable = index > -1 && index === latestState.activeIndex;
     var selectedItemHandleClick = function selectedItemHandleClick() {
       dispatch({
         type: SelectedItemClick,
@@ -3765,7 +3764,7 @@ function useMultipleSelection(userProps) {
       if (selectedItemNode) {
         selectedItemRefs.current.push(selectedItemNode);
       }
-    }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
+    }), _extends2.tabIndex = isFocusable ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
   }, [dispatch, latest, selectedItemKeyDownHandlers]);
   var getDropdownProps = useCallback(function (_temp2, _temp3) {
     var _extends3;

package/dist/downshift.native.cjs.js

@@ -1541,14 +1541,19 @@ function useElementIds(_ref) {
   });
   return elementIdsRef.current;
 }
-function getItemIndex(index, item, items) {
-  if (index !== undefined) {
-    return index;
-  }
-  if (items.length === 0) {
-    return -1;
+function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
+  var item, index;
+  if (itemProp === undefined) {
+    if (indexProp === undefined) {
+      throw new Error(errorMessage);
+    }
+    item = items[indexProp];
+    index = indexProp;
+  } else {
+    index = indexProp === undefined ? items.indexOf(itemProp) : indexProp;
+    item = itemProp;
   }
-  return items.indexOf(item);
+  return [item, index];
 }
 function itemToString(item) {
   return item ? String(item) : '';
@@ -2522,8 +2527,9 @@ function useSelect(userProps) {
     var _latest$current = latest.current,
       latestState = _latest$current.state,
       latestProps = _latest$current.props;
-    var item = itemProp != null ? itemProp : items[indexProp];
-    var index = getItemIndex(indexProp, item, latestProps.items);
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      item = _getItemAndIndex[0],
+      index = _getItemAndIndex[1];
     var itemHandleMouseMove = function itemHandleMouseMove() {
       if (index === latestState.highlightedIndex) {
         return;
@@ -2541,18 +2547,14 @@ function useSelect(userProps) {
         index: index
       });
     };
-    var itemIndex = getItemIndex(index, item, latestProps.items);
-    if (itemIndex < 0) {
-      throw new Error('Pass either item or item index in getItemProps!');
-    }
     var itemProps = _extends__default["default"]((_extends4 = {
       disabled: disabled,
       role: 'option',
       'aria-selected': "" + (item === selectedItem),
-      id: elementIds.getItemId(itemIndex)
+      id: elementIds.getItemId(index)
     }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
     }), _extends4), rest);
     if (!disabled) {
@@ -2563,7 +2565,7 @@ function useSelect(userProps) {
     }
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     return itemProps;
-  }, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
+  }, [latest, selectedItem, elementIds, shouldScrollRef, dispatch]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -3092,8 +3094,8 @@ function useCombobox(userProps) {
   var getItemProps = react.useCallback(function (_temp3) {
     var _extends3, _ref4;
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
-      item = _ref3.item,
-      index = _ref3.index,
+      itemProp = _ref3.item,
+      indexProp = _ref3.index,
       _ref3$refKey = _ref3.refKey,
       refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
       ref = _ref3.ref,
@@ -3106,10 +3108,8 @@ function useCombobox(userProps) {
     var _latest$current = latest.current,
       latestProps = _latest$current.props,
       latestState = _latest$current.state;
-    var itemIndex = getItemIndex(index, item, latestProps.items);
-    if (itemIndex < 0) {
-      throw new Error('Pass either item or item index in getItemProps!');
-    }
+    var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+      index = _getItemAndIndex[1];
     var onSelectKey = /* istanbul ignore next (react-native) */'onPress' ;
     var customClickHandler = /* istanbul ignore next (react-native) */onPress ;
     var itemHandleMouseMove = function itemHandleMouseMove() {
@@ -3134,9 +3134,9 @@ function useCombobox(userProps) {
     };
     return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+    }), _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), {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);
@@ -3688,14 +3688,13 @@ function useMultipleSelection(userProps) {
       ref = _ref3.ref,
       onClick = _ref3.onClick,
       onKeyDown = _ref3.onKeyDown,
-      selectedItem = _ref3.selectedItem,
-      index = _ref3.index,
+      selectedItemProp = _ref3.selectedItem,
+      indexProp = _ref3.index,
       rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded);
     var latestState = latest.current.state;
-    var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
-    if (itemIndex < 0) {
-      throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
-    }
+    var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, 'Pass either item or index to getSelectedItemProps!'),
+      index = _getItemAndIndex[1];
+    var isFocusable = index > -1 && index === latestState.activeIndex;
     var selectedItemHandleClick = function selectedItemHandleClick() {
       dispatch({
         type: SelectedItemClick,
@@ -3712,7 +3711,7 @@ function useMultipleSelection(userProps) {
       if (selectedItemNode) {
         selectedItemRefs.current.push(selectedItemNode);
       }
-    }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
+    }), _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 _extends3;

package/dist/downshift.umd.js

@@ -2889,14 +2889,19 @@
     });
     return elementIdsRef.current;
   }
-  function getItemIndex(index, item, items) {
-    if (index !== undefined) {
-      return index;
-    }
-    if (items.length === 0) {
-      return -1;
+  function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
+    var item, index;
+    if (itemProp === undefined) {
+      if (indexProp === undefined) {
+        throw new Error(errorMessage);
+      }
+      item = items[indexProp];
+      index = indexProp;
+    } else {
+      index = indexProp === undefined ? items.indexOf(itemProp) : indexProp;
+      item = itemProp;
     }
-    return items.indexOf(item);
+    return [item, index];
   }
   function itemToString(item) {
     return item ? String(item) : '';
@@ -3912,8 +3917,9 @@
       var _latest$current = latest.current,
         latestState = _latest$current.state,
         latestProps = _latest$current.props;
-      var item = itemProp != null ? itemProp : items[indexProp];
-      var index = getItemIndex(indexProp, item, latestProps.items);
+      var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+        item = _getItemAndIndex[0],
+        index = _getItemAndIndex[1];
       var itemHandleMouseMove = function itemHandleMouseMove() {
         if (index === latestState.highlightedIndex) {
           return;
@@ -3931,18 +3937,14 @@
           index: index
         });
       };
-      var itemIndex = getItemIndex(index, item, latestProps.items);
-      if (itemIndex < 0) {
-        throw new Error('Pass either item or item index in getItemProps!');
-      }
       var itemProps = _extends((_extends4 = {
         disabled: disabled,
         role: 'option',
         'aria-selected': "" + (item === selectedItem),
-        id: elementIds.getItemId(itemIndex)
+        id: elementIds.getItemId(index)
       }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
         if (itemNode) {
-          itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+          itemRefs.current[elementIds.getItemId(index)] = itemNode;
         }
       }), _extends4), rest);
       if (!disabled) {
@@ -3953,7 +3955,7 @@
       }
       itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
       return itemProps;
-    }, [latest, items, selectedItem, elementIds, shouldScrollRef, dispatch]);
+    }, [latest, selectedItem, elementIds, shouldScrollRef, dispatch]);
     return {
       // prop getters.
       getToggleButtonProps: getToggleButtonProps,
@@ -4482,8 +4484,8 @@
     var getItemProps = react.useCallback(function (_temp3) {
       var _extends3, _ref4;
       var _ref3 = _temp3 === void 0 ? {} : _temp3,
-        item = _ref3.item,
-        index = _ref3.index,
+        itemProp = _ref3.item,
+        indexProp = _ref3.index,
         _ref3$refKey = _ref3.refKey,
         refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
         ref = _ref3.ref,
@@ -4496,10 +4498,8 @@
       var _latest$current = latest.current,
         latestProps = _latest$current.props,
         latestState = _latest$current.state;
-      var itemIndex = getItemIndex(index, item, latestProps.items);
-      if (itemIndex < 0) {
-        throw new Error('Pass either item or item index in getItemProps!');
-      }
+      var _getItemAndIndex = getItemAndIndex(itemProp, indexProp, latestProps.items, 'Pass either item or index to getItemProps!'),
+        index = _getItemAndIndex[1];
       var onSelectKey = 'onClick';
       var customClickHandler = onClick;
       var itemHandleMouseMove = function itemHandleMouseMove() {
@@ -4524,9 +4524,9 @@
       };
       return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
         if (itemNode) {
-          itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
+          itemRefs.current[elementIds.getItemId(index)] = itemNode;
         }
-      }), _extends3.disabled = disabled, _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+      }), _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), {
         onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
         onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
       }, rest);
@@ -5066,14 +5066,13 @@
         ref = _ref3.ref,
         onClick = _ref3.onClick,
         onKeyDown = _ref3.onKeyDown,
-        selectedItem = _ref3.selectedItem,
-        index = _ref3.index,
+        selectedItemProp = _ref3.selectedItem,
+        indexProp = _ref3.index,
         rest = _objectWithoutPropertiesLoose(_ref3, _excluded);
       var latestState = latest.current.state;
-      var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
-      if (itemIndex < 0) {
-        throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
-      }
+      var _getItemAndIndex = getItemAndIndex(selectedItemProp, indexProp, latestState.selectedItems, 'Pass either item or index to getSelectedItemProps!'),
+        index = _getItemAndIndex[1];
+      var isFocusable = index > -1 && index === latestState.activeIndex;
       var selectedItemHandleClick = function selectedItemHandleClick() {
         dispatch({
           type: SelectedItemClick,
@@ -5090,7 +5089,7 @@
         if (selectedItemNode) {
           selectedItemRefs.current.push(selectedItemNode);
         }
-      }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
+      }), _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 _extends3;