downshift 9.0.7-alpha.0 → 9.0.7-alpha.2

package/dist/downshift.cjs.js

@@ -1786,7 +1786,7 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
 function getInitialState$2(props) {
   var selectedItem = getInitialValue$1(props, 'selectedItem');
   var isOpen = getInitialValue$1(props, 'isOpen');
-  var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
+  var highlightedIndex = getInitialHighlightedIndex(props);
   var inputValue = getInitialValue$1(props, 'inputValue');
   return {
     highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function (item) {
@@ -1801,6 +1801,7 @@ function getHighlightedIndexOnOpen(props, state, offset) {
   var items = props.items,
     initialHighlightedIndex = props.initialHighlightedIndex,
     defaultHighlightedIndex = props.defaultHighlightedIndex,
+    isItemDisabled = props.isItemDisabled,
     itemToKey = props.itemToKey;
   var selectedItem = state.selectedItem,
     highlightedIndex = state.highlightedIndex;
@@ -1809,10 +1810,10 @@ function getHighlightedIndexOnOpen(props, state, offset) {
   }
 
   // initialHighlightedIndex will give value to highlightedIndex on initial state only.
-  if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
+  if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex && !isItemDisabled(items[initialHighlightedIndex], initialHighlightedIndex)) {
     return initialHighlightedIndex;
   }
-  if (defaultHighlightedIndex !== undefined) {
+  if (defaultHighlightedIndex !== undefined && !isItemDisabled(items[defaultHighlightedIndex], defaultHighlightedIndex)) {
     return defaultHighlightedIndex;
   }
   if (selectedItem) {
@@ -1820,20 +1821,23 @@ function getHighlightedIndexOnOpen(props, state, offset) {
       return itemToKey(selectedItem) === itemToKey(item);
     });
   }
-  if (offset === 0) {
-    return -1;
+  if (offset < 0 && !isItemDisabled(items[items.length - 1], items.length - 1)) {
+    return items.length - 1;
+  }
+  if (offset > 0 && !isItemDisabled(items[0], 0)) {
+    return 0;
   }
-  return offset < 0 ? items.length - 1 : 0;
+  return -1;
 }
 /**
  * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
  *
- * @param {Object} environment The environment to add the event listeners to, for instance window.
- * @param {Array<HTMLElement>} downshiftElementRefs The refs for the element that should not trigger a blur action from mouseDown or touchEnd.
- * @param {Function} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
- * @returns {Object} The mouse and touch events information, if any of are happening.
+ * @param {Window} environment The environment to add the event listeners to, for instance window.
+ * @param {() => void} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
+ * @param {Array<{current: HTMLElement}>} downshiftElementsRefs The refs for the elements that should not trigger a blur action from mouseDown or touchEnd.
+ * @returns {{isMouseDown: boolean, isTouchMove: boolean, isTouchEnd: boolean}} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur) {
+function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs) {
   var mouseAndTouchTrackersRef = React.useRef({
     isMouseDown: false,
     isTouchMove: false,
@@ -1843,7 +1847,7 @@ function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur)
     if (!environment) {
       return noop;
     }
-    var downshiftElements = downshiftElementRefs.map(function (ref) {
+    var downshiftElements = downshiftElementsRefs.map(function (ref) {
       return ref.current;
     });
     function onMouseDown() {
@@ -1881,8 +1885,7 @@ function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur)
       environment.removeEventListener('touchmove', onTouchMove);
       environment.removeEventListener('touchend', onTouchEnd);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- refs don't change
-  }, [environment, handleBlur]);
+  }, [downshiftElementsRefs, environment, handleBlur]);
   return mouseAndTouchTrackersRef.current;
 }
 
@@ -1962,7 +1965,7 @@ function useA11yMessageStatus(getA11yStatusMessage, options, dependencyArray, en
     updateA11yStatus(status, document);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dependencyArray]);
+  }, dependencyArray);
 
   // Cleanup the status message container.
   React.useEffect(function () {
@@ -2068,6 +2071,34 @@ function useIsInitialMount() {
   return isInitialMountRef.current;
 }
 
+/**
+ * Returns the new highlightedIndex based on the defaultHighlightedIndex prop, if it's not disabled.
+ *
+ * @param {Object} props Props from useCombobox or useSelect.
+ * @returns {number} The highlighted index.
+ */
+function getDefaultHighlightedIndex(props) {
+  var highlightedIndex = getDefaultValue$1(props, 'highlightedIndex');
+  if (highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
+    return -1;
+  }
+  return highlightedIndex;
+}
+
+/**
+ * Returns the new highlightedIndex based on the initialHighlightedIndex prop, if not disabled.
+ *
+ * @param {Object} props Props from useCombobox or useSelect.
+ * @returns {number} The highlighted index.
+ */
+function getInitialHighlightedIndex(props) {
+  var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
+  if (highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
+    return -1;
+  }
+  return highlightedIndex;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes__default["default"].shape({
@@ -2145,7 +2176,7 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
       break;
     case stateChangeTypes.FunctionSetHighlightedIndex:
       changes = {
-        highlightedIndex: action.highlightedIndex
+        highlightedIndex: props.isItemDisabled(props.items[action.highlightedIndex], action.highlightedIndex) ? -1 : action.highlightedIndex
       };
       break;
     case stateChangeTypes.FunctionSetInputValue:
@@ -2155,7 +2186,7 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
       break;
     case stateChangeTypes.FunctionReset:
       changes = {
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+        highlightedIndex: getDefaultHighlightedIndex(props),
         isOpen: getDefaultValue$1(props, 'isOpen'),
         selectedItem: getDefaultValue$1(props, 'selectedItem'),
         inputValue: getDefaultValue$1(props, 'inputValue')
@@ -2256,7 +2287,7 @@ function downshiftSelectReducer(state, action) {
     case ItemClick$1:
       changes = {
         isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+        highlightedIndex: getDefaultHighlightedIndex(props),
         selectedItem: props.items[action.index]
       };
       break;
@@ -2381,6 +2412,7 @@ function useSelect(userProps) {
   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);
   // prevent id re-generation between renders.
@@ -2442,13 +2474,15 @@ function useSelect(userProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef], React.useCallback(function handleBlur() {
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, React.useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
         type: ToggleButtonBlur
       });
     }
-  }, [dispatch, latest]));
+  }, [dispatch, latest]), React.useMemo(function () {
+    return [menuRef, toggleButtonRef];
+  }, []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -2713,7 +2747,7 @@ function useSelect(userProps) {
       if (itemNode) {
         itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends4['aria-disabled'] = disabled, _extends4['aria-selected'] = "" + (item === latestState.selectedItem), _extends4.id = elementIds.getItemId(index), _extends4.role = 'option', _extends4), rest);
+    }), _extends4['aria-disabled'] = disabled, _extends4['aria-selected'] = item === latestState.selectedItem, _extends4.id = elementIds.getItemId(index), _extends4.role = 'option', _extends4), rest);
     if (!disabled) {
       /* istanbul ignore next (react-native) */
       {
@@ -2882,7 +2916,7 @@ function downshiftUseComboboxReducer(state, action) {
     case ItemClick:
       changes = {
         isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+        highlightedIndex: getDefaultHighlightedIndex(props),
         selectedItem: props.items[action.index],
         inputValue: props.itemToString(props.items[action.index])
       };
@@ -2959,7 +2993,7 @@ function downshiftUseComboboxReducer(state, action) {
     case InputChange:
       changes = {
         isOpen: true,
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+        highlightedIndex: getDefaultHighlightedIndex(props),
         inputValue: action.inputValue
       };
       break;
@@ -3061,14 +3095,16 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef, inputRef], React.useCallback(function handleBlur() {
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, React.useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
         type: InputBlur,
         selectItem: false
       });
     }
-  }, [dispatch, latest]));
+  }, [dispatch, latest]), React.useMemo(function () {
+    return [menuRef, toggleButtonRef, inputRef];
+  }, []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3240,7 +3276,7 @@ function useCombobox(userProps) {
       if (itemNode) {
         itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends3['aria-disabled'] = disabled, _extends3['aria-selected'] = "" + (index === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(index), _extends3.role = 'option', _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+    }), _extends3['aria-disabled'] = disabled, _extends3['aria-selected'] = index === latestState.highlightedIndex, _extends3.id = elementIds.getItemId(index), _extends3.role = 'option', _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);

package/dist/downshift.esm.js

@@ -1773,7 +1773,7 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
 function getInitialState$2(props) {
   var selectedItem = getInitialValue$1(props, 'selectedItem');
   var isOpen = getInitialValue$1(props, 'isOpen');
-  var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
+  var highlightedIndex = getInitialHighlightedIndex(props);
   var inputValue = getInitialValue$1(props, 'inputValue');
   return {
     highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function (item) {
@@ -1788,6 +1788,7 @@ function getHighlightedIndexOnOpen(props, state, offset) {
   var items = props.items,
     initialHighlightedIndex = props.initialHighlightedIndex,
     defaultHighlightedIndex = props.defaultHighlightedIndex,
+    isItemDisabled = props.isItemDisabled,
     itemToKey = props.itemToKey;
   var selectedItem = state.selectedItem,
     highlightedIndex = state.highlightedIndex;
@@ -1796,10 +1797,10 @@ function getHighlightedIndexOnOpen(props, state, offset) {
   }
 
   // initialHighlightedIndex will give value to highlightedIndex on initial state only.
-  if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
+  if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex && !isItemDisabled(items[initialHighlightedIndex], initialHighlightedIndex)) {
     return initialHighlightedIndex;
   }
-  if (defaultHighlightedIndex !== undefined) {
+  if (defaultHighlightedIndex !== undefined && !isItemDisabled(items[defaultHighlightedIndex], defaultHighlightedIndex)) {
     return defaultHighlightedIndex;
   }
   if (selectedItem) {
@@ -1807,20 +1808,23 @@ function getHighlightedIndexOnOpen(props, state, offset) {
       return itemToKey(selectedItem) === itemToKey(item);
     });
   }
-  if (offset === 0) {
-    return -1;
+  if (offset < 0 && !isItemDisabled(items[items.length - 1], items.length - 1)) {
+    return items.length - 1;
+  }
+  if (offset > 0 && !isItemDisabled(items[0], 0)) {
+    return 0;
   }
-  return offset < 0 ? items.length - 1 : 0;
+  return -1;
 }
 /**
  * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
  *
- * @param {Object} environment The environment to add the event listeners to, for instance window.
- * @param {Array<HTMLElement>} downshiftElementRefs The refs for the element that should not trigger a blur action from mouseDown or touchEnd.
- * @param {Function} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
- * @returns {Object} The mouse and touch events information, if any of are happening.
+ * @param {Window} environment The environment to add the event listeners to, for instance window.
+ * @param {() => void} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
+ * @param {Array<{current: HTMLElement}>} downshiftElementsRefs The refs for the elements that should not trigger a blur action from mouseDown or touchEnd.
+ * @returns {{isMouseDown: boolean, isTouchMove: boolean, isTouchEnd: boolean}} The mouse and touch events information, if any of are happening.
  */
-function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur) {
+function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs) {
   var mouseAndTouchTrackersRef = useRef({
     isMouseDown: false,
     isTouchMove: false,
@@ -1830,7 +1834,7 @@ function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur)
     if (!environment) {
       return noop;
     }
-    var downshiftElements = downshiftElementRefs.map(function (ref) {
+    var downshiftElements = downshiftElementsRefs.map(function (ref) {
       return ref.current;
     });
     function onMouseDown() {
@@ -1868,8 +1872,7 @@ function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur)
       environment.removeEventListener('touchmove', onTouchMove);
       environment.removeEventListener('touchend', onTouchEnd);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- refs don't change
-  }, [environment, handleBlur]);
+  }, [downshiftElementsRefs, environment, handleBlur]);
   return mouseAndTouchTrackersRef.current;
 }
 
@@ -1949,7 +1952,7 @@ function useA11yMessageStatus(getA11yStatusMessage, options, dependencyArray, en
     updateA11yStatus(status, document);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dependencyArray]);
+  }, dependencyArray);
 
   // Cleanup the status message container.
   useEffect(function () {
@@ -2055,6 +2058,34 @@ function useIsInitialMount() {
   return isInitialMountRef.current;
 }
 
+/**
+ * Returns the new highlightedIndex based on the defaultHighlightedIndex prop, if it's not disabled.
+ *
+ * @param {Object} props Props from useCombobox or useSelect.
+ * @returns {number} The highlighted index.
+ */
+function getDefaultHighlightedIndex(props) {
+  var highlightedIndex = getDefaultValue$1(props, 'highlightedIndex');
+  if (highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
+    return -1;
+  }
+  return highlightedIndex;
+}
+
+/**
+ * Returns the new highlightedIndex based on the initialHighlightedIndex prop, if not disabled.
+ *
+ * @param {Object} props Props from useCombobox or useSelect.
+ * @returns {number} The highlighted index.
+ */
+function getInitialHighlightedIndex(props) {
+  var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
+  if (highlightedIndex > -1 && props.isItemDisabled(props.items[highlightedIndex], highlightedIndex)) {
+    return -1;
+  }
+  return highlightedIndex;
+}
+
 // Shared between all exports.
 var commonPropTypes = {
   environment: PropTypes.shape({
@@ -2132,7 +2163,7 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
       break;
     case stateChangeTypes.FunctionSetHighlightedIndex:
       changes = {
-        highlightedIndex: action.highlightedIndex
+        highlightedIndex: props.isItemDisabled(props.items[action.highlightedIndex], action.highlightedIndex) ? -1 : action.highlightedIndex
       };
       break;
     case stateChangeTypes.FunctionSetInputValue:
@@ -2142,7 +2173,7 @@ function downshiftCommonReducer(state, action, stateChangeTypes) {
       break;
     case stateChangeTypes.FunctionReset:
       changes = {
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+        highlightedIndex: getDefaultHighlightedIndex(props),
         isOpen: getDefaultValue$1(props, 'isOpen'),
         selectedItem: getDefaultValue$1(props, 'selectedItem'),
         inputValue: getDefaultValue$1(props, 'inputValue')
@@ -2243,7 +2274,7 @@ function downshiftSelectReducer(state, action) {
     case ItemClick$1:
       changes = {
         isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+        highlightedIndex: getDefaultHighlightedIndex(props),
         selectedItem: props.items[action.index]
       };
       break;
@@ -2368,6 +2399,7 @@ function useSelect(userProps) {
   var toggleButtonRef = useRef(null);
   var menuRef = useRef(null);
   var itemRefs = useRef({});
+
   // used to keep the inputValue clearTimeout object between renders.
   var clearTimeoutRef = useRef(null);
   // prevent id re-generation between renders.
@@ -2429,13 +2461,15 @@ function useSelect(userProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef], useCallback(function handleBlur() {
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
         type: ToggleButtonBlur
       });
     }
-  }, [dispatch, latest]));
+  }, [dispatch, latest]), useMemo(function () {
+    return [menuRef, toggleButtonRef];
+  }, []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   useEffect(function () {
@@ -2700,7 +2734,7 @@ function useSelect(userProps) {
       if (itemNode) {
         itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends4['aria-disabled'] = disabled, _extends4['aria-selected'] = "" + (item === latestState.selectedItem), _extends4.id = elementIds.getItemId(index), _extends4.role = 'option', _extends4), rest);
+    }), _extends4['aria-disabled'] = disabled, _extends4['aria-selected'] = item === latestState.selectedItem, _extends4.id = elementIds.getItemId(index), _extends4.role = 'option', _extends4), rest);
     if (!disabled) {
       /* istanbul ignore next (react-native) */
       {
@@ -2869,7 +2903,7 @@ function downshiftUseComboboxReducer(state, action) {
     case ItemClick:
       changes = {
         isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+        highlightedIndex: getDefaultHighlightedIndex(props),
         selectedItem: props.items[action.index],
         inputValue: props.itemToString(props.items[action.index])
       };
@@ -2946,7 +2980,7 @@ function downshiftUseComboboxReducer(state, action) {
     case InputChange:
       changes = {
         isOpen: true,
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
+        highlightedIndex: getDefaultHighlightedIndex(props),
         inputValue: action.inputValue
       };
       break;
@@ -3048,14 +3082,16 @@ function useCombobox(userProps) {
       previousResultCountRef.current = items.length;
     }
   });
-  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef, inputRef], useCallback(function handleBlur() {
+  var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, useCallback(function handleBlur() {
     if (latest.current.state.isOpen) {
       dispatch({
         type: InputBlur,
         selectItem: false
       });
     }
-  }, [dispatch, latest]));
+  }, [dispatch, latest]), useMemo(function () {
+    return [menuRef, toggleButtonRef, inputRef];
+  }, []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   useEffect(function () {
@@ -3227,7 +3263,7 @@ function useCombobox(userProps) {
       if (itemNode) {
         itemRefs.current[elementIds.getItemId(index)] = itemNode;
       }
-    }), _extends3['aria-disabled'] = disabled, _extends3['aria-selected'] = "" + (index === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(index), _extends3.role = 'option', _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
+    }), _extends3['aria-disabled'] = disabled, _extends3['aria-selected'] = index === latestState.highlightedIndex, _extends3.id = elementIds.getItemId(index), _extends3.role = 'option', _extends3), !disabled && (_ref4 = {}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
       onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
     }, rest);