downshift 7.3.3 → 7.4.0

package/dist/downshift.cjs.js

@@ -1944,6 +1944,32 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
+/**
+ * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
+ * In that case, selects the item and resets to defaults for open state and highlighted idex.
+ * @param {Object} props The useCombobox props.
+ * @param {number} highlightedIndex The index from the state.
+ * @param {boolean} inputValue Also return the input value for state.
+ * @returns The changes for the state.
+ */
+function getChangesOnSelection(props, highlightedIndex, inputValue) {
+  var _props$items;
+  if (inputValue === void 0) {
+    inputValue = true;
+  }
+  var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0;
+  return _extends__default["default"]({
+    isOpen: false,
+    highlightedIndex: -1
+  }, shouldSelect && _extends__default["default"]({
+    selectedItem: props.items[highlightedIndex],
+    isOpen: getDefaultValue$1(props, 'isOpen'),
+    highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
+  }, inputValue && {
+    inputValue: props.itemToString(props.items[highlightedIndex])
+  }));
+}
+
 function downshiftCommonReducer(state, action, stateChangeTypes) {
   var type = action.type,
     props = action.props;
@@ -2135,6 +2161,7 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable complexity */
 function downshiftSelectReducer(state, action) {
+  var _props$items;
   var type = action.type,
     props = action.props,
     altKey = action.altKey;
@@ -2177,12 +2204,7 @@ function downshiftSelectReducer(state, action) {
       break;
     case ToggleButtonKeyDownArrowUp:
       if (state.isOpen && altKey) {
-        changes = _extends__default["default"]({
-          isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex]
-        });
+        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);
         changes = {
@@ -2194,12 +2216,7 @@ function downshiftSelectReducer(state, action) {
     // only triggered when menu is open.
     case ToggleButtonKeyDownEnter:
     case ToggleButtonKeyDownSpaceButton:
-      changes = _extends__default["default"]({
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-      }, state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex]
-      });
+      changes = getChangesOnSelection(props, state.highlightedIndex, false);
       break;
     case ToggleButtonKeyDownHome:
       changes = {
@@ -2233,7 +2250,7 @@ function downshiftSelectReducer(state, action) {
       changes = _extends__default["default"]({
         isOpen: false,
         highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && {
+      }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && {
         selectedItem: props.items[state.highlightedIndex]
       });
       break;
@@ -2731,6 +2748,7 @@ function getInitialState$1(props) {
 var propTypes$1 = {
   items: PropTypes__default["default"].array.isRequired,
   itemToString: PropTypes__default["default"].func,
+  selectedItemChanged: PropTypes__default["default"].func,
   getA11yStatusMessage: PropTypes__default["default"].func,
   getA11ySelectionMessage: PropTypes__default["default"].func,
   highlightedIndex: PropTypes__default["default"].number,
@@ -2788,16 +2806,18 @@ function useControlledReducer(reducer, initialState, props) {
 
   // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
   react.useEffect(function () {
-    if (isControlledProp(props, 'selectedItem')) {
-      if (previousSelectedItemRef.current !== props.selectedItem) {
-        dispatch({
-          type: ControlledPropUpdatedSelectedItem,
-          inputValue: props.itemToString(props.selectedItem)
-        });
-      }
-      previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
+    if (!isControlledProp(props, 'selectedItem')) {
+      return;
     }
-  }, [props.selectedItem, state.selectedItem]);
+    if (props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem)) {
+      dispatch({
+        type: ControlledPropUpdatedSelectedItem,
+        inputValue: props.itemToString(props.selectedItem)
+      });
+    }
+    previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.selectedItem, props.selectedItem]);
   return [getState(state, props), dispatch];
 }
 
@@ -2810,11 +2830,15 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
+  selectedItemChanged: function selectedItemChanged(prevItem, item) {
+    return prevItem !== item;
+  },
   getA11yStatusMessage: getA11yStatusMessage$1
 });
 
 /* eslint-disable complexity */
 function downshiftUseComboboxReducer(state, action) {
+  var _props$items;
   var type = action.type,
     props = action.props,
     altKey = action.altKey;
@@ -2843,13 +2867,7 @@ function downshiftUseComboboxReducer(state, action) {
     case InputKeyDownArrowUp:
       if (state.isOpen) {
         if (altKey) {
-          changes = _extends__default["default"]({
-            isOpen: getDefaultValue$1(props, 'isOpen'),
-            highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-          }, state.highlightedIndex >= 0 && {
-            selectedItem: props.items[state.highlightedIndex],
-            inputValue: props.itemToString(props.items[state.highlightedIndex])
-          });
+          changes = getChangesOnSelection(props, state.highlightedIndex);
         } else {
           changes = {
             highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
@@ -2863,13 +2881,7 @@ function downshiftUseComboboxReducer(state, action) {
       }
       break;
     case InputKeyDownEnter:
-      changes = _extends__default["default"]({
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-      }, state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex],
-        inputValue: props.itemToString(props.items[state.highlightedIndex])
-      });
+      changes = getChangesOnSelection(props, state.highlightedIndex);
       break;
     case InputKeyDownEscape:
       changes = _extends__default["default"]({
@@ -2904,7 +2916,7 @@ function downshiftUseComboboxReducer(state, action) {
       changes = _extends__default["default"]({
         isOpen: false,
         highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && action.selectItem && {
+      }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && {
         selectedItem: props.items[state.highlightedIndex],
         inputValue: props.itemToString(props.items[state.highlightedIndex])
       });

package/dist/downshift.esm.js

@@ -1931,6 +1931,32 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
+/**
+ * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
+ * In that case, selects the item and resets to defaults for open state and highlighted idex.
+ * @param {Object} props The useCombobox props.
+ * @param {number} highlightedIndex The index from the state.
+ * @param {boolean} inputValue Also return the input value for state.
+ * @returns The changes for the state.
+ */
+function getChangesOnSelection(props, highlightedIndex, inputValue) {
+  var _props$items;
+  if (inputValue === void 0) {
+    inputValue = true;
+  }
+  var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0;
+  return _extends({
+    isOpen: false,
+    highlightedIndex: -1
+  }, shouldSelect && _extends({
+    selectedItem: props.items[highlightedIndex],
+    isOpen: getDefaultValue$1(props, 'isOpen'),
+    highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
+  }, inputValue && {
+    inputValue: props.itemToString(props.items[highlightedIndex])
+  }));
+}
+
 function downshiftCommonReducer(state, action, stateChangeTypes) {
   var type = action.type,
     props = action.props;
@@ -2122,6 +2148,7 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable complexity */
 function downshiftSelectReducer(state, action) {
+  var _props$items;
   var type = action.type,
     props = action.props,
     altKey = action.altKey;
@@ -2164,12 +2191,7 @@ function downshiftSelectReducer(state, action) {
       break;
     case ToggleButtonKeyDownArrowUp:
       if (state.isOpen && altKey) {
-        changes = _extends({
-          isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex]
-        });
+        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);
         changes = {
@@ -2181,12 +2203,7 @@ function downshiftSelectReducer(state, action) {
     // only triggered when menu is open.
     case ToggleButtonKeyDownEnter:
     case ToggleButtonKeyDownSpaceButton:
-      changes = _extends({
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-      }, state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex]
-      });
+      changes = getChangesOnSelection(props, state.highlightedIndex, false);
       break;
     case ToggleButtonKeyDownHome:
       changes = {
@@ -2220,7 +2237,7 @@ function downshiftSelectReducer(state, action) {
       changes = _extends({
         isOpen: false,
         highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && {
+      }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && {
         selectedItem: props.items[state.highlightedIndex]
       });
       break;
@@ -2718,6 +2735,7 @@ function getInitialState$1(props) {
 var propTypes$1 = {
   items: PropTypes.array.isRequired,
   itemToString: PropTypes.func,
+  selectedItemChanged: PropTypes.func,
   getA11yStatusMessage: PropTypes.func,
   getA11ySelectionMessage: PropTypes.func,
   highlightedIndex: PropTypes.number,
@@ -2775,16 +2793,18 @@ function useControlledReducer(reducer, initialState, props) {
 
   // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
   useEffect(function () {
-    if (isControlledProp(props, 'selectedItem')) {
-      if (previousSelectedItemRef.current !== props.selectedItem) {
-        dispatch({
-          type: ControlledPropUpdatedSelectedItem,
-          inputValue: props.itemToString(props.selectedItem)
-        });
-      }
-      previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
+    if (!isControlledProp(props, 'selectedItem')) {
+      return;
     }
-  }, [props.selectedItem, state.selectedItem]);
+    if (props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem)) {
+      dispatch({
+        type: ControlledPropUpdatedSelectedItem,
+        inputValue: props.itemToString(props.selectedItem)
+      });
+    }
+    previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.selectedItem, props.selectedItem]);
   return [getState(state, props), dispatch];
 }
 
@@ -2797,11 +2817,15 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends({}, defaultProps$3, {
+  selectedItemChanged: function selectedItemChanged(prevItem, item) {
+    return prevItem !== item;
+  },
   getA11yStatusMessage: getA11yStatusMessage$1
 });
 
 /* eslint-disable complexity */
 function downshiftUseComboboxReducer(state, action) {
+  var _props$items;
   var type = action.type,
     props = action.props,
     altKey = action.altKey;
@@ -2830,13 +2854,7 @@ function downshiftUseComboboxReducer(state, action) {
     case InputKeyDownArrowUp:
       if (state.isOpen) {
         if (altKey) {
-          changes = _extends({
-            isOpen: getDefaultValue$1(props, 'isOpen'),
-            highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-          }, state.highlightedIndex >= 0 && {
-            selectedItem: props.items[state.highlightedIndex],
-            inputValue: props.itemToString(props.items[state.highlightedIndex])
-          });
+          changes = getChangesOnSelection(props, state.highlightedIndex);
         } else {
           changes = {
             highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
@@ -2850,13 +2868,7 @@ function downshiftUseComboboxReducer(state, action) {
       }
       break;
     case InputKeyDownEnter:
-      changes = _extends({
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-      }, state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex],
-        inputValue: props.itemToString(props.items[state.highlightedIndex])
-      });
+      changes = getChangesOnSelection(props, state.highlightedIndex);
       break;
     case InputKeyDownEscape:
       changes = _extends({
@@ -2891,7 +2903,7 @@ function downshiftUseComboboxReducer(state, action) {
       changes = _extends({
         isOpen: false,
         highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && action.selectItem && {
+      }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && {
         selectedItem: props.items[state.highlightedIndex],
         inputValue: props.itemToString(props.items[state.highlightedIndex])
       });

package/dist/downshift.native.cjs.js

@@ -1879,6 +1879,32 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
+/**
+ * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
+ * In that case, selects the item and resets to defaults for open state and highlighted idex.
+ * @param {Object} props The useCombobox props.
+ * @param {number} highlightedIndex The index from the state.
+ * @param {boolean} inputValue Also return the input value for state.
+ * @returns The changes for the state.
+ */
+function getChangesOnSelection(props, highlightedIndex, inputValue) {
+  var _props$items;
+  if (inputValue === void 0) {
+    inputValue = true;
+  }
+  var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0;
+  return _extends__default["default"]({
+    isOpen: false,
+    highlightedIndex: -1
+  }, shouldSelect && _extends__default["default"]({
+    selectedItem: props.items[highlightedIndex],
+    isOpen: getDefaultValue$1(props, 'isOpen'),
+    highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
+  }, inputValue && {
+    inputValue: props.itemToString(props.items[highlightedIndex])
+  }));
+}
+
 function downshiftCommonReducer(state, action, stateChangeTypes) {
   var type = action.type,
     props = action.props;
@@ -2070,6 +2096,7 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable complexity */
 function downshiftSelectReducer(state, action) {
+  var _props$items;
   var type = action.type,
     props = action.props,
     altKey = action.altKey;
@@ -2112,12 +2139,7 @@ function downshiftSelectReducer(state, action) {
       break;
     case ToggleButtonKeyDownArrowUp:
       if (state.isOpen && altKey) {
-        changes = _extends__default["default"]({
-          isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex]
-        });
+        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);
         changes = {
@@ -2129,12 +2151,7 @@ function downshiftSelectReducer(state, action) {
     // only triggered when menu is open.
     case ToggleButtonKeyDownEnter:
     case ToggleButtonKeyDownSpaceButton:
-      changes = _extends__default["default"]({
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-      }, state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex]
-      });
+      changes = getChangesOnSelection(props, state.highlightedIndex, false);
       break;
     case ToggleButtonKeyDownHome:
       changes = {
@@ -2168,7 +2185,7 @@ function downshiftSelectReducer(state, action) {
       changes = _extends__default["default"]({
         isOpen: false,
         highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && {
+      }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && {
         selectedItem: props.items[state.highlightedIndex]
       });
       break;
@@ -2653,6 +2670,7 @@ function getInitialState$1(props) {
 var propTypes$1 = {
   items: PropTypes__default["default"].array.isRequired,
   itemToString: PropTypes__default["default"].func,
+  selectedItemChanged: PropTypes__default["default"].func,
   getA11yStatusMessage: PropTypes__default["default"].func,
   getA11ySelectionMessage: PropTypes__default["default"].func,
   highlightedIndex: PropTypes__default["default"].number,
@@ -2710,16 +2728,18 @@ function useControlledReducer(reducer, initialState, props) {
 
   // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
   react.useEffect(function () {
-    if (isControlledProp(props, 'selectedItem')) {
-      if (previousSelectedItemRef.current !== props.selectedItem) {
-        dispatch({
-          type: ControlledPropUpdatedSelectedItem,
-          inputValue: props.itemToString(props.selectedItem)
-        });
-      }
-      previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
+    if (!isControlledProp(props, 'selectedItem')) {
+      return;
     }
-  }, [props.selectedItem, state.selectedItem]);
+    if (props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem)) {
+      dispatch({
+        type: ControlledPropUpdatedSelectedItem,
+        inputValue: props.itemToString(props.selectedItem)
+      });
+    }
+    previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.selectedItem, props.selectedItem]);
   return [getState(state, props), dispatch];
 }
 
@@ -2732,11 +2752,15 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
+  selectedItemChanged: function selectedItemChanged(prevItem, item) {
+    return prevItem !== item;
+  },
   getA11yStatusMessage: getA11yStatusMessage$1
 });
 
 /* eslint-disable complexity */
 function downshiftUseComboboxReducer(state, action) {
+  var _props$items;
   var type = action.type,
     props = action.props,
     altKey = action.altKey;
@@ -2765,13 +2789,7 @@ function downshiftUseComboboxReducer(state, action) {
     case InputKeyDownArrowUp:
       if (state.isOpen) {
         if (altKey) {
-          changes = _extends__default["default"]({
-            isOpen: getDefaultValue$1(props, 'isOpen'),
-            highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-          }, state.highlightedIndex >= 0 && {
-            selectedItem: props.items[state.highlightedIndex],
-            inputValue: props.itemToString(props.items[state.highlightedIndex])
-          });
+          changes = getChangesOnSelection(props, state.highlightedIndex);
         } else {
           changes = {
             highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
@@ -2785,13 +2803,7 @@ function downshiftUseComboboxReducer(state, action) {
       }
       break;
     case InputKeyDownEnter:
-      changes = _extends__default["default"]({
-        isOpen: getDefaultValue$1(props, 'isOpen'),
-        highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-      }, state.highlightedIndex >= 0 && {
-        selectedItem: props.items[state.highlightedIndex],
-        inputValue: props.itemToString(props.items[state.highlightedIndex])
-      });
+      changes = getChangesOnSelection(props, state.highlightedIndex);
       break;
     case InputKeyDownEscape:
       changes = _extends__default["default"]({
@@ -2826,7 +2838,7 @@ function downshiftUseComboboxReducer(state, action) {
       changes = _extends__default["default"]({
         isOpen: false,
         highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && action.selectItem && {
+      }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && {
         selectedItem: props.items[state.highlightedIndex],
         inputValue: props.itemToString(props.items[state.highlightedIndex])
       });

package/dist/downshift.umd.js

@@ -3230,6 +3230,32 @@
     };
   }
 
+  /**
+   * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
+   * In that case, selects the item and resets to defaults for open state and highlighted idex.
+   * @param {Object} props The useCombobox props.
+   * @param {number} highlightedIndex The index from the state.
+   * @param {boolean} inputValue Also return the input value for state.
+   * @returns The changes for the state.
+   */
+  function getChangesOnSelection(props, highlightedIndex, inputValue) {
+    var _props$items;
+    if (inputValue === void 0) {
+      inputValue = true;
+    }
+    var shouldSelect = ((_props$items = props.items) == null ? void 0 : _props$items.length) && highlightedIndex >= 0;
+    return _extends({
+      isOpen: false,
+      highlightedIndex: -1
+    }, shouldSelect && _extends({
+      selectedItem: props.items[highlightedIndex],
+      isOpen: getDefaultValue$1(props, 'isOpen'),
+      highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
+    }, inputValue && {
+      inputValue: props.itemToString(props.items[highlightedIndex])
+    }));
+  }
+
   function downshiftCommonReducer(state, action, stateChangeTypes) {
     var type = action.type,
       props = action.props;
@@ -3447,6 +3473,7 @@
 
   /* eslint-disable complexity */
   function downshiftSelectReducer(state, action) {
+    var _props$items;
     var type = action.type,
       props = action.props,
       altKey = action.altKey;
@@ -3489,12 +3516,7 @@
         break;
       case ToggleButtonKeyDownArrowUp:
         if (state.isOpen && altKey) {
-          changes = _extends({
-            isOpen: getDefaultValue$1(props, 'isOpen'),
-            highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-          }, state.highlightedIndex >= 0 && {
-            selectedItem: props.items[state.highlightedIndex]
-          });
+          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);
           changes = {
@@ -3506,12 +3528,7 @@
       // only triggered when menu is open.
       case ToggleButtonKeyDownEnter:
       case ToggleButtonKeyDownSpaceButton:
-        changes = _extends({
-          isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex]
-        });
+        changes = getChangesOnSelection(props, state.highlightedIndex, false);
         break;
       case ToggleButtonKeyDownHome:
         changes = {
@@ -3545,7 +3562,7 @@
         changes = _extends({
           isOpen: false,
           highlightedIndex: -1
-        }, state.highlightedIndex >= 0 && {
+        }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && {
           selectedItem: props.items[state.highlightedIndex]
         });
         break;
@@ -4043,6 +4060,7 @@
   var propTypes$1 = {
     items: PropTypes.array.isRequired,
     itemToString: PropTypes.func,
+    selectedItemChanged: PropTypes.func,
     getA11yStatusMessage: PropTypes.func,
     getA11ySelectionMessage: PropTypes.func,
     highlightedIndex: PropTypes.number,
@@ -4100,16 +4118,18 @@
 
     // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
     react.useEffect(function () {
-      if (isControlledProp(props, 'selectedItem')) {
-        if (previousSelectedItemRef.current !== props.selectedItem) {
-          dispatch({
-            type: ControlledPropUpdatedSelectedItem,
-            inputValue: props.itemToString(props.selectedItem)
-          });
-        }
-        previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
+      if (!isControlledProp(props, 'selectedItem')) {
+        return;
       }
-    }, [props.selectedItem, state.selectedItem]);
+      if (props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem)) {
+        dispatch({
+          type: ControlledPropUpdatedSelectedItem,
+          inputValue: props.itemToString(props.selectedItem)
+        });
+      }
+      previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state.selectedItem, props.selectedItem]);
     return [getState(state, props), dispatch];
   }
 
@@ -4122,11 +4142,15 @@
     };
   }
   var defaultProps$1 = _extends({}, defaultProps$3, {
+    selectedItemChanged: function selectedItemChanged(prevItem, item) {
+      return prevItem !== item;
+    },
     getA11yStatusMessage: getA11yStatusMessage$1
   });
 
   /* eslint-disable complexity */
   function downshiftUseComboboxReducer(state, action) {
+    var _props$items;
     var type = action.type,
       props = action.props,
       altKey = action.altKey;
@@ -4155,13 +4179,7 @@
       case InputKeyDownArrowUp:
         if (state.isOpen) {
           if (altKey) {
-            changes = _extends({
-              isOpen: getDefaultValue$1(props, 'isOpen'),
-              highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-            }, state.highlightedIndex >= 0 && {
-              selectedItem: props.items[state.highlightedIndex],
-              inputValue: props.itemToString(props.items[state.highlightedIndex])
-            });
+            changes = getChangesOnSelection(props, state.highlightedIndex);
           } else {
             changes = {
               highlightedIndex: getNextWrappingIndex(-1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, true)
@@ -4175,13 +4193,7 @@
         }
         break;
       case InputKeyDownEnter:
-        changes = _extends({
-          isOpen: getDefaultValue$1(props, 'isOpen'),
-          highlightedIndex: getDefaultValue$1(props, 'highlightedIndex')
-        }, state.highlightedIndex >= 0 && {
-          selectedItem: props.items[state.highlightedIndex],
-          inputValue: props.itemToString(props.items[state.highlightedIndex])
-        });
+        changes = getChangesOnSelection(props, state.highlightedIndex);
         break;
       case InputKeyDownEscape:
         changes = _extends({
@@ -4216,7 +4228,7 @@
         changes = _extends({
           isOpen: false,
           highlightedIndex: -1
-        }, state.highlightedIndex >= 0 && action.selectItem && {
+        }, state.highlightedIndex >= 0 && ((_props$items = props.items) == null ? void 0 : _props$items.length) && action.selectItem && {
           selectedItem: props.items[state.highlightedIndex],
           inputValue: props.itemToString(props.items[state.highlightedIndex])
         });