downshift 5.1.0 → 5.2.2

package/dist/downshift.cjs.js

@@ -170,7 +170,8 @@ function resetIdCounter() {
 
 function getA11yStatusMessage(_ref2) {
   var isOpen = _ref2.isOpen,
-      resultCount = _ref2.resultCount;
+      resultCount = _ref2.resultCount,
+      previousResultCount = _ref2.previousResultCount;
 
   if (!isOpen) {
     return '';
@@ -180,7 +181,11 @@ function getA11yStatusMessage(_ref2) {
     return 'No results are available.';
   }
 
-  return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
+  if (resultCount !== previousResultCount) {
+    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
+  }
+
+  return '';
 }
 /**
  * Takes an argument and if it's an array, returns the first item in the array
@@ -1679,6 +1684,65 @@ var dropdownDefaultStateValues = {
   inputValue: ''
 };
 
+function callOnChangeProps(action, state, newState) {
+  var props = action.props,
+      type = action.type;
+  var changes = {};
+  Object.keys(state).forEach(function (key) {
+    invokeOnChangeHandler(key, props, state, newState);
+
+    if (newState[key] !== state[key]) {
+      changes[key] = newState[key];
+    }
+  });
+
+  if (props.onStateChange && Object.keys(changes).length) {
+    props.onStateChange(_extends({
+      type: type
+    }, changes));
+  }
+}
+
+function invokeOnChangeHandler(key, props, state, newState) {
+  var handler = "on" + capitalizeString(key) + "Change";
+
+  if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
+    props[handler](newState);
+  }
+}
+/**
+ * Default state reducer that returns the changes.
+ *
+ * @param {Object} s state.
+ * @param {Object} a action with changes.
+ * @returns {Object} changes.
+ */
+
+
+function stateReducer(s, a) {
+  return a.changes;
+}
+/**
+ * Returns a message to be added to aria-live region when item is selected.
+ *
+ * @param {Object} selectionParameters Parameters required to build the message.
+ * @returns {string} The a11y message.
+ */
+
+
+function getA11ySelectionMessage(selectionParameters) {
+  var selectedItem = selectionParameters.selectedItem,
+      itemToStringLocal = selectionParameters.itemToString;
+  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+}
+/**
+ * Debounced call for updating the a11y message.
+ */
+
+
+var updateA11yStatus = debounce(function (getA11yMessage, document) {
+  setStatus(getA11yMessage(), document);
+}, 200);
 function getElementIds(_ref) {
   var id = _ref.id,
       labelId = _ref.labelId,
@@ -1695,7 +1759,6 @@ function getElementIds(_ref) {
     toggleButtonId: toggleButtonId || uniqueId + "-toggle-button"
   };
 }
-
 function getItemIndex(index, item, items) {
   if (index !== undefined) {
     return index;
@@ -1724,57 +1787,39 @@ function getPropTypesValidator(caller, propTypes) {
     });
   };
 }
-
 function isAcceptedCharacterKey(key) {
   return /^\S{1}$/.test(key);
 }
-
 function capitalizeString(string) {
   return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
 }
+/**
+ * Computes the controlled state using a the previous state, props,
+ * two reducers, one from downshift and an optional one from the user.
+ * Also calls the onChange handlers for state values that have changed.
+ *
+ * @param {Function} reducer Reducer function from downshift.
+ * @param {Object} initialState Initial state of the hook.
+ * @param {Object} props The hook props.
+ * @returns {Array} An array with the state and an action dispatcher.
+ */
 
-function invokeOnChangeHandler(key, props, state, newState) {
-  var handler = "on" + capitalizeString(key) + "Change";
-
-  if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
-    props[handler](newState);
-  }
-}
-
-function callOnChangeProps(action, state, newState) {
-  var props = action.props,
-      type = action.type;
-  var changes = {};
-  Object.keys(state).forEach(function (key) {
-    invokeOnChangeHandler(key, props, state, newState);
-
-    if (newState[key] !== state[key]) {
-      changes[key] = newState[key];
-    }
-  });
+function useControlledState(reducer, initialState, props) {
+  var _useState = react.useState(initialState),
+      uncontrolledState = _useState[0],
+      setState = _useState[1];
 
-  if (props.onStateChange && Object.keys(changes).length) {
-    props.onStateChange(_extends({
-      type: type
-    }, changes));
-  }
-}
+  var state = getState(uncontrolledState, props);
 
-function useEnhancedReducer(reducer, initialState, props) {
-  var enhancedReducer = react.useCallback(function (state, action) {
-    state = getState(state, action.props);
-    var stateReduceLocal = action.props.stateReducer;
+  var dispatch = function (action) {
+    var stateReducerFromProps = action.props.stateReducer;
     var changes = reducer(state, action);
-    var newState = stateReduceLocal(state, _extends({}, action, {
+    var newState = stateReducerFromProps(state, _extends({}, action, {
       changes: changes
     }));
     callOnChangeProps(action, state, newState);
-    return newState;
-  }, [reducer]);
-
-  var _useReducer = react.useReducer(enhancedReducer, initialState),
-      state = _useReducer[0],
-      dispatch = _useReducer[1];
+    setState(newState);
+  };
 
   return [getState(state, props), function dispatchWithProps(action) {
     return dispatch(_extends({
@@ -1782,32 +1827,6 @@ function useEnhancedReducer(reducer, initialState, props) {
     }, action));
   }];
 }
-/**
- * Default state reducer that returns the changes.
- *
- * @param {Object} s state.
- * @param {Object} a action with changes.
- * @returns {Object} changes.
- */
-
-
-function stateReducer(s, a) {
-  return a.changes;
-}
-/**
- * Returns a message to be added to aria-live region when item is selected.
- *
- * @param {Object} selectionParameters Parameters required to build the message.
- * @returns {string} The a11y message.
- */
-
-
-function getA11ySelectionMessage(selectionParameters) {
-  var selectedItem = selectionParameters.selectedItem,
-      itemToStringLocal = selectionParameters.itemToString;
-  return itemToStringLocal(selectedItem) + " has been selected.";
-}
-
 var defaultProps = {
   itemToString: itemToString,
   stateReducer: stateReducer,
@@ -1818,7 +1837,6 @@ var defaultProps = {
   /* istanbul ignore next (ssr) */
   ? {} : window
 };
-
 function getDefaultValue(props, propKey, defaultStateValues) {
   if (defaultStateValues === void 0) {
     defaultStateValues = dropdownDefaultStateValues;
@@ -1832,7 +1850,6 @@ function getDefaultValue(props, propKey, defaultStateValues) {
 
   return defaultStateValues[propKey];
 }
-
 function getInitialValue(props, propKey, defaultStateValues) {
   if (defaultStateValues === void 0) {
     defaultStateValues = dropdownDefaultStateValues;
@@ -1850,7 +1867,6 @@ function getInitialValue(props, propKey, defaultStateValues) {
 
   return getDefaultValue(props, propKey, defaultStateValues);
 }
-
 function getInitialState(props) {
   var selectedItem = getInitialValue(props, 'selectedItem');
   var isOpen = getInitialValue(props, 'isOpen');
@@ -1863,7 +1879,6 @@ function getInitialState(props) {
     inputValue: inputValue
   };
 }
-
 function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
   var items = props.items,
       initialHighlightedIndex = props.initialHighlightedIndex,
@@ -1970,7 +1985,8 @@ var propTypes = {
 
 function getA11yStatusMessage$1(_ref) {
   var isOpen = _ref.isOpen,
-      resultCount = _ref.resultCount;
+      resultCount = _ref.resultCount,
+      previousResultCount = _ref.previousResultCount;
 
   if (!isOpen) {
     return '';
@@ -1980,7 +1996,11 @@ function getA11yStatusMessage$1(_ref) {
     return 'No results are available.';
   }
 
-  return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.";
+  if (resultCount !== previousResultCount) {
+    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.";
+  }
+
+  return '';
 }
 
 var defaultProps$1 = _extends({}, defaultProps, {
@@ -2232,82 +2252,91 @@ function useSelect(userProps) {
   var props = _extends({}, defaultProps$1, {}, userProps);
 
   var items = props.items,
-      itemToString = props.itemToString,
-      getA11yStatusMessage = props.getA11yStatusMessage,
-      getA11ySelectionMessage = props.getA11ySelectionMessage,
       scrollIntoView = props.scrollIntoView,
       environment = props.environment,
       initialIsOpen = props.initialIsOpen,
-      defaultIsOpen = props.defaultIsOpen; // Initial state depending on controlled props.
+      defaultIsOpen = props.defaultIsOpen,
+      itemToString = props.itemToString,
+      getA11ySelectionMessage = props.getA11ySelectionMessage,
+      getA11yStatusMessage = props.getA11yStatusMessage; // Initial state depending on controlled props.
 
   var initialState = getInitialState(props); // Reducer init.
 
-  var _useEnhancedReducer = useEnhancedReducer(downshiftSelectReducer, initialState, props),
-      _useEnhancedReducer$ = _useEnhancedReducer[0],
-      isOpen = _useEnhancedReducer$.isOpen,
-      highlightedIndex = _useEnhancedReducer$.highlightedIndex,
-      selectedItem = _useEnhancedReducer$.selectedItem,
-      inputValue = _useEnhancedReducer$.inputValue,
-      dispatch = _useEnhancedReducer[1];
-  /* Refs */
+  var _useControlledState = useControlledState(downshiftSelectReducer, initialState, props),
+      _useControlledState$ = _useControlledState[0],
+      isOpen = _useControlledState$.isOpen,
+      highlightedIndex = _useControlledState$.highlightedIndex,
+      selectedItem = _useControlledState$.selectedItem,
+      inputValue = _useControlledState$.inputValue,
+      dispatch = _useControlledState[1]; // Refs
 
 
   var toggleButtonRef = react.useRef(null);
   var menuRef = react.useRef(null);
-  var isInitialMount = react.useRef(true);
-  var shouldScroll = react.useRef(true);
-  var clearTimeout = react.useRef(null);
-  var mouseAndTouchTrackers = react.useRef({
+  var isInitialMountRef = react.useRef(true);
+  var shouldScrollRef = react.useRef(true);
+  var shouldBlurRef = react.useRef(true);
+  var clearTimeoutRef = react.useRef(null);
+  var mouseAndTouchTrackersRef = react.useRef({
     isMouseDown: false,
     isTouchMove: false
   });
-  var elementIds = react.useRef(getElementIds(props)); // Some utils.
+  var elementIdsRef = react.useRef(getElementIds(props));
+  var previousResultCountRef = react.useRef(); // Some utils.
 
   var getItemNodeFromIndex = function (index) {
-    return environment.document.getElementById(elementIds.current.getItemId(index));
+    return environment.document.getElementById(elementIdsRef.current.getItemId(index));
   }; // Effects.
 
-  /* Sets a11y status message on changes in isOpen. */
+  /* Sets a11y status message on changes in state. */
 
 
   react.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
-    setStatus(getA11yStatusMessage({
-      highlightedIndex: highlightedIndex,
-      inputValue: inputValue,
-      isOpen: isOpen,
-      itemToString: itemToString,
-      resultCount: items.length,
-      highlightedItem: items[highlightedIndex],
-      selectedItem: selectedItem
-    }), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
+    var previousResultCount = previousResultCountRef.current;
+    updateA11yStatus(function () {
+      return getA11yStatusMessage({
+        isOpen: isOpen,
+        highlightedIndex: highlightedIndex,
+        selectedItem: selectedItem,
+        inputValue: inputValue,
+        highlightedItem: items[highlightedIndex],
+        resultCount: items.length,
+        itemToString: itemToString,
+        previousResultCount: previousResultCount
+      });
+    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, highlightedIndex, selectedItem, inputValue]);
   /* Sets a11y status message on changes in selectedItem. */
 
   react.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
-    setStatus(getA11ySelectionMessage({
-      highlightedIndex: highlightedIndex,
-      inputValue: inputValue,
-      isOpen: isOpen,
-      itemToString: itemToString,
-      resultCount: items.length,
-      highlightedItem: items[highlightedIndex],
-      selectedItem: selectedItem
-    }), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
+    var previousResultCount = previousResultCountRef.current;
+    updateA11yStatus(function () {
+      return getA11ySelectionMessage({
+        isOpen: isOpen,
+        highlightedIndex: highlightedIndex,
+        selectedItem: selectedItem,
+        inputValue: inputValue,
+        highlightedItem: items[highlightedIndex],
+        resultCount: items.length,
+        itemToString: itemToString,
+        previousResultCount: previousResultCount
+      });
+    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedItem]);
   /* Sets cleanup for the keysSoFar after 500ms. */
 
   react.useEffect(function () {
     // init the clean function here as we need access to dispatch.
-    if (isInitialMount.current) {
-      clearTimeout.current = debounce(function (outerDispatch) {
+    if (isInitialMountRef.current) {
+      clearTimeoutRef.current = debounce(function (outerDispatch) {
         outerDispatch({
           type: FunctionSetInputValue,
           inputValue: ''
@@ -2319,13 +2348,13 @@ function useSelect(userProps) {
       return;
     }
 
-    clearTimeout.current(dispatch); // eslint-disable-next-line react-hooks/exhaustive-deps
+    clearTimeoutRef.current(dispatch); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue]);
   /* Controls the focus on the menu or the toggle button. */
 
   react.useEffect(function () {
     // Don't focus menu on first render.
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       // Unless it was initialised as open.
       if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) {
         menuRef.current.focus();
@@ -2333,13 +2362,23 @@ function useSelect(userProps) {
 
       return;
     } // Focus menu on open.
-    // istanbul ignore next
 
 
-    if (isOpen && menuRef.current) {
-      menuRef.current.focus(); // Focus toggleButton on close.
-    } else if (environment.document.activeElement === menuRef.current && toggleButtonRef.current) {
-      toggleButtonRef.current.focus();
+    if (isOpen) {
+      // istanbul ignore else
+      if (menuRef.current) {
+        menuRef.current.focus();
+        return;
+      }
+    } // Focus toggleButton on close, but on if was closed with (Shift+)Tab.
+
+
+    if (environment.document.activeElement === menuRef.current) {
+      // istanbul ignore else
+      if (toggleButtonRef.current) {
+        shouldBlurRef.current = false;
+        toggleButtonRef.current.focus();
+      }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [isOpen]);
@@ -2350,17 +2389,24 @@ function useSelect(userProps) {
       return;
     }
 
-    if (shouldScroll.current === false) {
-      shouldScroll.current = true;
+    if (shouldScrollRef.current === false) {
+      shouldScrollRef.current = true;
     } else {
       scrollIntoView(getItemNodeFromIndex(highlightedIndex), menuRef.current);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [highlightedIndex]);
+  react.useEffect(function () {
+    if (isInitialMountRef.current) {
+      return;
+    }
+
+    previousResultCountRef.current = items.length;
+  });
   /* Make initial ref false. */
 
   react.useEffect(function () {
-    isInitialMount.current = false;
+    isInitialMountRef.current = false;
   }, []);
   /* Add mouse/touch events to document. */
 
@@ -2368,11 +2414,11 @@ function useSelect(userProps) {
     // The same strategy for checking if a click occurred inside or outside downsift
     // as in downshift.js.
     var onMouseDown = function () {
-      mouseAndTouchTrackers.current.isMouseDown = true;
+      mouseAndTouchTrackersRef.current.isMouseDown = true;
     };
 
     var onMouseUp = function (event) {
-      mouseAndTouchTrackers.current.isMouseDown = false;
+      mouseAndTouchTrackersRef.current.isMouseDown = false;
 
       if (isOpen && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document)) {
         dispatch({
@@ -2382,15 +2428,15 @@ function useSelect(userProps) {
     };
 
     var onTouchStart = function () {
-      mouseAndTouchTrackers.current.isTouchMove = false;
+      mouseAndTouchTrackersRef.current.isTouchMove = false;
     };
 
     var onTouchMove = function () {
-      mouseAndTouchTrackers.current.isTouchMove = true;
+      mouseAndTouchTrackersRef.current.isTouchMove = true;
     };
 
     var onTouchEnd = function (event) {
-      if (isOpen && !mouseAndTouchTrackers.current.isTouchMove && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document, false)) {
+      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document, false)) {
         dispatch({
           type: MenuBlur
         });
@@ -2494,7 +2540,13 @@ function useSelect(userProps) {
   };
 
   var menuHandleBlur = function () {
-    var shouldBlur = !mouseAndTouchTrackers.current.isMouseDown;
+    // if the blur was a result of selection, we don't trigger this action.
+    if (shouldBlurRef.current === false) {
+      shouldBlurRef.current = true;
+      return;
+    }
+
+    var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
     /* istanbul ignore else */
 
     if (shouldBlur) {
@@ -2535,7 +2587,7 @@ function useSelect(userProps) {
       return;
     }
 
-    shouldScroll.current = false;
+    shouldScrollRef.current = false;
     dispatch({
       type: ItemMouseMove,
       index: index
@@ -2565,7 +2617,7 @@ function useSelect(userProps) {
 
       var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
         toggleButtonRef.current = toggleButtonNode;
-      }), _extends3.id = elementIds.current.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = isOpen, _extends3['aria-labelledby'] = elementIds.current.labelId + " " + elementIds.current.toggleButtonId, _extends3), rest);
+      }), _extends3.id = elementIdsRef.current.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = isOpen, _extends3['aria-labelledby'] = elementIdsRef.current.labelId + " " + elementIdsRef.current.toggleButtonId, _extends3), rest);
 
       if (!rest.disabled) {
         toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
@@ -2576,8 +2628,8 @@ function useSelect(userProps) {
     },
     getLabelProps: function getLabelProps(labelProps) {
       return _extends({
-        id: elementIds.current.labelId,
-        htmlFor: elementIds.current.toggleButtonId
+        id: elementIdsRef.current.labelId,
+        htmlFor: elementIdsRef.current.toggleButtonId
       }, labelProps);
     },
     getMenuProps: function getMenuProps(_temp) {
@@ -2594,8 +2646,8 @@ function useSelect(userProps) {
 
       return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
         menuRef.current = menuNode;
-      }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
-        'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
+      }), _extends2.id = elementIdsRef.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIdsRef.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
+        'aria-activedescendant': elementIdsRef.current.getItemId(highlightedIndex)
       }, {
         onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
         onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
@@ -2619,7 +2671,7 @@ function useSelect(userProps) {
       var itemProps = _extends({
         role: 'option',
         'aria-selected': "" + (itemIndex === highlightedIndex),
-        id: elementIds.current.getItemId(itemIndex)
+        id: elementIdsRef.current.getItemId(itemIndex)
       }, rest);
 
       if (!rest.disabled) {
@@ -2680,6 +2732,51 @@ function useSelect(userProps) {
   };
 }
 
+var InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
+var InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
+var InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
+var InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
+var InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
+var InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 5;
+var InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 6;
+var InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 7;
+var MenuMouseLeave$1 = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 8;
+var ItemMouseMove$1 = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 9;
+var ItemClick$1 = process.env.NODE_ENV !== "production" ? '__item_click__' : 10;
+var ToggleButtonClick$1 = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 11;
+var FunctionToggleMenu$1 = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 12;
+var FunctionOpenMenu$1 = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 13;
+var FunctionCloseMenu$1 = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 14;
+var FunctionSetHighlightedIndex$1 = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 15;
+var FunctionSelectItem$1 = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 16;
+var FunctionSetInputValue$1 = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 17;
+var FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 18;
+var ControlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__controlled_prop_updated_selected_item__' : 19;
+
+var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  InputKeyDownArrowDown: InputKeyDownArrowDown,
+  InputKeyDownArrowUp: InputKeyDownArrowUp,
+  InputKeyDownEscape: InputKeyDownEscape,
+  InputKeyDownHome: InputKeyDownHome,
+  InputKeyDownEnd: InputKeyDownEnd,
+  InputKeyDownEnter: InputKeyDownEnter,
+  InputChange: InputChange,
+  InputBlur: InputBlur,
+  MenuMouseLeave: MenuMouseLeave$1,
+  ItemMouseMove: ItemMouseMove$1,
+  ItemClick: ItemClick$1,
+  ToggleButtonClick: ToggleButtonClick$1,
+  FunctionToggleMenu: FunctionToggleMenu$1,
+  FunctionOpenMenu: FunctionOpenMenu$1,
+  FunctionCloseMenu: FunctionCloseMenu$1,
+  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
+  FunctionSelectItem: FunctionSelectItem$1,
+  FunctionSetInputValue: FunctionSetInputValue$1,
+  FunctionReset: FunctionReset$1,
+  ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem
+});
+
 function getElementIds$1(_ref) {
   var id = _ref.id,
       inputId = _ref.inputId,
@@ -2692,7 +2789,6 @@ function getElementIds$1(_ref) {
     id: id
   }, rest)));
 }
-
 function getInitialState$1(props) {
   var initialState = getInitialState(props);
   var selectedItem = initialState.selectedItem;
@@ -2706,7 +2802,6 @@ function getInitialState$1(props) {
     inputValue: inputValue
   });
 }
-
 var propTypes$1 = {
   items: PropTypes.array.isRequired,
   itemToString: PropTypes.func,
@@ -2747,55 +2842,43 @@ var propTypes$1 = {
     })
   })
 };
+/**
+ * The useCombobox version of useControlledState, which also
+ * checks if the controlled prop selectedItem changed between
+ * renders. If so, it will also update inputValue with its
+ * string equivalent. It uses the common useControlledState to
+ * compute the rest of the state.
+ *
+ * @param {Function} reducer Reducer function from downshift.
+ * @param {Object} initialState Initial state of the hook.
+ * @param {Object} props The hook props.
+ * @returns {Array} An array with the state and an action dispatcher.
+ */
+
+function useControlledState$1(reducer, initialState, props) {
+  var _useControlledStateCo = useControlledState(reducer, initialState, props),
+      newState = _useControlledStateCo[0],
+      dispatch = _useControlledStateCo[1];
+
+  var previousSelectedItemRef = react.useRef(null);
+  var selectedItem = props.selectedItem,
+      itemToString = props.itemToString; // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
 
+  if (isControlledProp(props, 'selectedItem') && previousSelectedItemRef.current !== selectedItem) {
+    dispatch({
+      type: ControlledPropUpdatedSelectedItem,
+      inputValue: itemToString(selectedItem)
+    });
+  }
+
+  previousSelectedItemRef.current = selectedItem;
+  return [newState, dispatch];
+}
 var defaultProps$2 = _extends({}, defaultProps, {
   getA11yStatusMessage: getA11yStatusMessage,
   circularNavigation: true
 });
 
-var InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
-var InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
-var InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
-var InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
-var InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
-var InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 5;
-var InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 6;
-var InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 7;
-var MenuMouseLeave$1 = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 8;
-var ItemMouseMove$1 = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 9;
-var ItemClick$1 = process.env.NODE_ENV !== "production" ? '__item_click__' : 10;
-var ToggleButtonClick$1 = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 11;
-var FunctionToggleMenu$1 = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 12;
-var FunctionOpenMenu$1 = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 13;
-var FunctionCloseMenu$1 = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 14;
-var FunctionSetHighlightedIndex$1 = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 15;
-var FunctionSelectItem$1 = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 16;
-var FunctionSetInputValue$1 = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 17;
-var FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 18;
-
-var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  InputKeyDownArrowDown: InputKeyDownArrowDown,
-  InputKeyDownArrowUp: InputKeyDownArrowUp,
-  InputKeyDownEscape: InputKeyDownEscape,
-  InputKeyDownHome: InputKeyDownHome,
-  InputKeyDownEnd: InputKeyDownEnd,
-  InputKeyDownEnter: InputKeyDownEnter,
-  InputChange: InputChange,
-  InputBlur: InputBlur,
-  MenuMouseLeave: MenuMouseLeave$1,
-  ItemMouseMove: ItemMouseMove$1,
-  ItemClick: ItemClick$1,
-  ToggleButtonClick: ToggleButtonClick$1,
-  FunctionToggleMenu: FunctionToggleMenu$1,
-  FunctionOpenMenu: FunctionOpenMenu$1,
-  FunctionCloseMenu: FunctionCloseMenu$1,
-  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
-  FunctionSelectItem: FunctionSelectItem$1,
-  FunctionSetInputValue: FunctionSetInputValue$1,
-  FunctionReset: FunctionReset$1
-});
-
 /* eslint-disable complexity */
 
 function downshiftUseComboboxReducer(state, action) {
@@ -2935,6 +3018,7 @@ function downshiftUseComboboxReducer(state, action) {
       };
       break;
 
+    case ControlledPropUpdatedSelectedItem:
     case FunctionSetInputValue$1:
       changes = {
         inputValue: action.inputValue
@@ -2980,20 +3064,20 @@ function useCombobox(userProps) {
       defaultIsOpen = props.defaultIsOpen,
       items = props.items,
       scrollIntoView = props.scrollIntoView,
-      getA11ySelectionMessage = props.getA11ySelectionMessage,
+      environment = props.environment,
       getA11yStatusMessage = props.getA11yStatusMessage,
-      itemToString = props.itemToString,
-      environment = props.environment; // Initial state depending on controlled props.
+      getA11ySelectionMessage = props.getA11ySelectionMessage,
+      itemToString = props.itemToString; // Initial state depending on controlled props.
 
   var initialState = getInitialState$1(props); // Reducer init.
 
-  var _useEnhancedReducer = useEnhancedReducer(downshiftUseComboboxReducer, initialState, props),
-      _useEnhancedReducer$ = _useEnhancedReducer[0],
-      isOpen = _useEnhancedReducer$.isOpen,
-      highlightedIndex = _useEnhancedReducer$.highlightedIndex,
-      selectedItem = _useEnhancedReducer$.selectedItem,
-      inputValue = _useEnhancedReducer$.inputValue,
-      dispatch = _useEnhancedReducer[1];
+  var _useControlledState = useControlledState$1(downshiftUseComboboxReducer, initialState, props),
+      _useControlledState$ = _useControlledState[0],
+      isOpen = _useControlledState$.isOpen,
+      highlightedIndex = _useControlledState$.highlightedIndex,
+      selectedItem = _useControlledState$.selectedItem,
+      inputValue = _useControlledState$.inputValue,
+      dispatch = _useControlledState[1];
   /* Refs */
 
 
@@ -3010,25 +3094,30 @@ function useCombobox(userProps) {
     isTouchMove: false
   });
   var elementIds = react.useRef(getElementIds$1(props));
+  var previousResultCountRef = react.useRef();
   /* Effects */
 
-  /* Sets a11y status message on changes in isOpen. */
+  /* Sets a11y status message on changes in state. */
 
   react.useEffect(function () {
     if (isInitialMount.current) {
       return;
     }
 
-    setStatus(getA11yStatusMessage({
-      highlightedIndex: highlightedIndex,
-      inputValue: inputValue,
-      isOpen: isOpen,
-      itemToString: itemToString,
-      resultCount: items.length,
-      highlightedItem: items[highlightedIndex],
-      selectedItem: selectedItem
-    }), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
+    var previousResultCount = previousResultCountRef.current;
+    updateA11yStatus(function () {
+      return getA11yStatusMessage({
+        isOpen: isOpen,
+        highlightedIndex: highlightedIndex,
+        selectedItem: selectedItem,
+        inputValue: inputValue,
+        highlightedItem: items[highlightedIndex],
+        resultCount: items.length,
+        itemToString: itemToString,
+        previousResultCount: previousResultCount
+      });
+    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, highlightedIndex, selectedItem, inputValue]);
   /* Sets a11y status message on changes in selectedItem. */
 
   react.useEffect(function () {
@@ -3036,15 +3125,19 @@ function useCombobox(userProps) {
       return;
     }
 
-    setStatus(getA11ySelectionMessage({
-      highlightedIndex: highlightedIndex,
-      inputValue: inputValue,
-      isOpen: isOpen,
-      itemToString: itemToString,
-      resultCount: items.length,
-      highlightedItem: items[highlightedIndex],
-      selectedItem: selectedItem
-    }), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
+    var previousResultCount = previousResultCountRef.current;
+    updateA11yStatus(function () {
+      return getA11ySelectionMessage({
+        isOpen: isOpen,
+        highlightedIndex: highlightedIndex,
+        selectedItem: selectedItem,
+        inputValue: inputValue,
+        highlightedItem: items[highlightedIndex],
+        resultCount: items.length,
+        itemToString: itemToString,
+        previousResultCount: previousResultCount
+      });
+    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedItem]);
   /* Scroll on highlighted item if change comes from keyboard. */
 
@@ -3074,8 +3167,13 @@ function useCombobox(userProps) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [isOpen]);
-  /* Make initial ref false. */
+  react.useEffect(function () {
+    if (isInitialMount.current) {
+      return;
+    }
 
+    previousResultCountRef.current = items.length;
+  });
   react.useEffect(function () {
     isInitialMount.current = false;
   }, []);
@@ -3706,11 +3804,11 @@ function useMultipleSelection(userProps) {
       keyNavigationNext = props.keyNavigationNext,
       keyNavigationPrevious = props.keyNavigationPrevious; // Reducer init.
 
-  var _useEnhancedReducer = useEnhancedReducer(downshiftMultipleSelectionReducer, getInitialState$2(props), props),
-      _useEnhancedReducer$ = _useEnhancedReducer[0],
-      activeIndex = _useEnhancedReducer$.activeIndex,
-      selectedItems = _useEnhancedReducer$.selectedItems,
-      dispatch = _useEnhancedReducer[1]; // Refs.
+  var _useControlledState = useControlledState(downshiftMultipleSelectionReducer, getInitialState$2(props), props),
+      _useControlledState$ = _useControlledState[0],
+      activeIndex = _useControlledState$.activeIndex,
+      selectedItems = _useControlledState$.selectedItems,
+      dispatch = _useControlledState[1]; // Refs.
 
 
   var isInitialMount = react.useRef(true);