downshift 5.1.0 → 5.2.2

package/dist/downshift.umd.js

@@ -1460,7 +1460,8 @@
 
   function getA11yStatusMessage(_ref2) {
     var isOpen = _ref2.isOpen,
-        resultCount = _ref2.resultCount;
+        resultCount = _ref2.resultCount,
+        previousResultCount = _ref2.previousResultCount;
 
     if (!isOpen) {
       return '';
@@ -1470,7 +1471,11 @@
       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
@@ -2954,6 +2959,65 @@
     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,
@@ -2970,7 +3034,6 @@
       toggleButtonId: toggleButtonId || uniqueId + "-toggle-button"
     };
   }
-
   function getItemIndex(index, item, items) {
     if (index !== undefined) {
       return index;
@@ -2999,57 +3062,39 @@
       });
     };
   }
-
   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({
@@ -3057,32 +3102,6 @@
       }, 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,
@@ -3093,7 +3112,6 @@
     /* istanbul ignore next (ssr) */
     ? {} : window
   };
-
   function getDefaultValue(props, propKey, defaultStateValues) {
     if (defaultStateValues === void 0) {
       defaultStateValues = dropdownDefaultStateValues;
@@ -3107,7 +3125,6 @@
 
     return defaultStateValues[propKey];
   }
-
   function getInitialValue(props, propKey, defaultStateValues) {
     if (defaultStateValues === void 0) {
       defaultStateValues = dropdownDefaultStateValues;
@@ -3125,7 +3142,6 @@
 
     return getDefaultValue(props, propKey, defaultStateValues);
   }
-
   function getInitialState(props) {
     var selectedItem = getInitialValue(props, 'selectedItem');
     var isOpen = getInitialValue(props, 'isOpen');
@@ -3138,7 +3154,6 @@
       inputValue: inputValue
     };
   }
-
   function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
     var items = props.items,
         initialHighlightedIndex = props.initialHighlightedIndex,
@@ -3245,7 +3260,8 @@
 
   function getA11yStatusMessage$1(_ref) {
     var isOpen = _ref.isOpen,
-        resultCount = _ref.resultCount;
+        resultCount = _ref.resultCount,
+        previousResultCount = _ref.previousResultCount;
 
     if (!isOpen) {
       return '';
@@ -3255,7 +3271,11 @@
       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, {
@@ -3502,82 +3522,91 @@
     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: ''
@@ -3589,13 +3618,13 @@
         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();
@@ -3603,13 +3632,23 @@
 
         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]);
@@ -3620,17 +3659,24 @@
         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. */
 
@@ -3638,11 +3684,11 @@
       // 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({
@@ -3652,15 +3698,15 @@
       };
 
       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
           });
@@ -3764,7 +3810,13 @@
     };
 
     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) {
@@ -3805,7 +3857,7 @@
         return;
       }
 
-      shouldScroll.current = false;
+      shouldScrollRef.current = false;
       dispatch({
         type: ItemMouseMove,
         index: index
@@ -3835,7 +3887,7 @@
 
         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);
@@ -3846,8 +3898,8 @@
       },
       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) {
@@ -3864,8 +3916,8 @@
 
         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),
@@ -3889,7 +3941,7 @@
         var itemProps = _extends({
           role: 'option',
           'aria-selected': "" + (itemIndex === highlightedIndex),
-          id: elementIds.current.getItemId(itemIndex)
+          id: elementIdsRef.current.getItemId(itemIndex)
         }, rest);
 
         if (!rest.disabled) {
@@ -3950,6 +4002,51 @@
     };
   }
 
+  var InputKeyDownArrowDown = '__input_keydown_arrow_down__';
+  var InputKeyDownArrowUp = '__input_keydown_arrow_up__';
+  var InputKeyDownEscape = '__input_keydown_escape__';
+  var InputKeyDownHome = '__input_keydown_home__';
+  var InputKeyDownEnd = '__input_keydown_end__';
+  var InputKeyDownEnter = '__input_keydown_enter__';
+  var InputChange = '__input_change__';
+  var InputBlur = '__input_blur__';
+  var MenuMouseLeave$1 = '__menu_mouse_leave__';
+  var ItemMouseMove$1 = '__item_mouse_move__';
+  var ItemClick$1 = '__item_click__';
+  var ToggleButtonClick$1 = '__togglebutton_click__';
+  var FunctionToggleMenu$1 = '__function_toggle_menu__';
+  var FunctionOpenMenu$1 = '__function_open_menu__';
+  var FunctionCloseMenu$1 = '__function_close_menu__';
+  var FunctionSetHighlightedIndex$1 = '__function_set_highlighted_index__';
+  var FunctionSelectItem$1 = '__function_select_item__';
+  var FunctionSetInputValue$1 = '__function_set_input_value__';
+  var FunctionReset$1 = '__function_reset__';
+  var ControlledPropUpdatedSelectedItem = '__controlled_prop_updated_selected_item__';
+
+  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,
@@ -3962,7 +4059,6 @@
       id: id
     }, rest)));
   }
-
   function getInitialState$1(props) {
     var initialState = getInitialState(props);
     var selectedItem = initialState.selectedItem;
@@ -3976,7 +4072,6 @@
       inputValue: inputValue
     });
   }
-
   var propTypes$2 = {
     items: propTypes.array.isRequired,
     itemToString: propTypes.func,
@@ -4017,55 +4112,43 @@
       })
     })
   };
+  /**
+   * 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 = '__input_keydown_arrow_down__';
-  var InputKeyDownArrowUp = '__input_keydown_arrow_up__';
-  var InputKeyDownEscape = '__input_keydown_escape__';
-  var InputKeyDownHome = '__input_keydown_home__';
-  var InputKeyDownEnd = '__input_keydown_end__';
-  var InputKeyDownEnter = '__input_keydown_enter__';
-  var InputChange = '__input_change__';
-  var InputBlur = '__input_blur__';
-  var MenuMouseLeave$1 = '__menu_mouse_leave__';
-  var ItemMouseMove$1 = '__item_mouse_move__';
-  var ItemClick$1 = '__item_click__';
-  var ToggleButtonClick$1 = '__togglebutton_click__';
-  var FunctionToggleMenu$1 = '__function_toggle_menu__';
-  var FunctionOpenMenu$1 = '__function_open_menu__';
-  var FunctionCloseMenu$1 = '__function_close_menu__';
-  var FunctionSetHighlightedIndex$1 = '__function_set_highlighted_index__';
-  var FunctionSelectItem$1 = '__function_select_item__';
-  var FunctionSetInputValue$1 = '__function_set_input_value__';
-  var FunctionReset$1 = '__function_reset__';
-
-  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) {
@@ -4205,6 +4288,7 @@
         };
         break;
 
+      case ControlledPropUpdatedSelectedItem:
       case FunctionSetInputValue$1:
         changes = {
           inputValue: action.inputValue
@@ -4245,20 +4329,20 @@
         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 */
 
 
@@ -4275,25 +4359,30 @@
       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 () {
@@ -4301,15 +4390,19 @@
         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. */
 
@@ -4339,8 +4432,13 @@
       } // 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;
     }, []);
@@ -4971,11 +5069,11 @@
         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);