downshift 5.1.0-beta.0 → 5.2.1

package/dist/downshift.esm.js

@@ -3,7 +3,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import PropTypes from 'prop-types';
-import { cloneElement, Component, useCallback, useReducer, useRef, useEffect } from 'react';
+import { cloneElement, Component, useState, useRef, useEffect } from 'react';
 import { isForwardRef } from 'react-is';
 import computeScrollIntoView from 'compute-scroll-into-view';
 
@@ -164,7 +164,8 @@ function resetIdCounter() {
 
 function getA11yStatusMessage(_ref2) {
   var isOpen = _ref2.isOpen,
-      resultCount = _ref2.resultCount;
+      resultCount = _ref2.resultCount,
+      previousResultCount = _ref2.previousResultCount;
 
   if (!isOpen) {
     return '';
@@ -174,7 +175,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
@@ -498,8 +503,12 @@ var stateChangeTypes = /*#__PURE__*/Object.freeze({
   touchEnd: touchEnd
 });
 
-var Downshift = /*#__PURE__*/function () {
-  var Downshift = /*#__PURE__*/function (_Component) {
+var Downshift =
+/*#__PURE__*/
+function () {
+  var Downshift =
+  /*#__PURE__*/
+  function (_Component) {
     _inheritsLoose(Downshift, _Component);
 
     function Downshift(_props) {
@@ -773,6 +782,10 @@ var Downshift = /*#__PURE__*/function () {
           }
         },
         Enter: function Enter(event) {
+          if (event.which === 229) {
+            return;
+          }
+
           var _this$getState2 = this.getState(),
               isOpen = _this$getState2.isOpen,
               highlightedIndex = _this$getState2.highlightedIndex;
@@ -1665,6 +1678,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,
@@ -1681,7 +1753,6 @@ function getElementIds(_ref) {
     toggleButtonId: toggleButtonId || uniqueId + "-toggle-button"
   };
 }
-
 function getItemIndex(index, item, items) {
   if (index !== undefined) {
     return index;
@@ -1710,57 +1781,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);
+function useControlledState(reducer, initialState, props) {
+  var _useState = useState(initialState),
+      uncontrolledState = _useState[0],
+      setState = _useState[1];
 
-    if (newState[key] !== state[key]) {
-      changes[key] = newState[key];
-    }
-  });
+  var state = getState(uncontrolledState, props);
 
-  if (props.onStateChange && Object.keys(changes).length) {
-    props.onStateChange(_extends({
-      type: type
-    }, changes));
-  }
-}
-
-function useEnhancedReducer(reducer, initialState, props) {
-  var enhancedReducer = 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 = useReducer(enhancedReducer, initialState),
-      state = _useReducer[0],
-      dispatch = _useReducer[1];
+    setState(newState);
+  };
 
   return [getState(state, props), function dispatchWithProps(action) {
     return dispatch(_extends({
@@ -1768,32 +1821,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,
@@ -1804,7 +1831,6 @@ var defaultProps = {
   /* istanbul ignore next (ssr) */
   ? {} : window
 };
-
 function getDefaultValue(props, propKey, defaultStateValues) {
   if (defaultStateValues === void 0) {
     defaultStateValues = dropdownDefaultStateValues;
@@ -1818,7 +1844,6 @@ function getDefaultValue(props, propKey, defaultStateValues) {
 
   return defaultStateValues[propKey];
 }
-
 function getInitialValue(props, propKey, defaultStateValues) {
   if (defaultStateValues === void 0) {
     defaultStateValues = dropdownDefaultStateValues;
@@ -1836,7 +1861,6 @@ function getInitialValue(props, propKey, defaultStateValues) {
 
   return getDefaultValue(props, propKey, defaultStateValues);
 }
-
 function getInitialState(props) {
   var selectedItem = getInitialValue(props, 'selectedItem');
   var isOpen = getInitialValue(props, 'isOpen');
@@ -1849,7 +1873,6 @@ function getInitialState(props) {
     inputValue: inputValue
   };
 }
-
 function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
   var items = props.items,
       initialHighlightedIndex = props.initialHighlightedIndex,
@@ -1956,7 +1979,8 @@ var propTypes = {
 
 function getA11yStatusMessage$1(_ref) {
   var isOpen = _ref.isOpen,
-      resultCount = _ref.resultCount;
+      resultCount = _ref.resultCount,
+      previousResultCount = _ref.previousResultCount;
 
   if (!isOpen) {
     return '';
@@ -1966,7 +1990,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, {
@@ -2218,24 +2246,23 @@ 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 = useRef(null);
@@ -2247,13 +2274,14 @@ function useSelect(userProps) {
     isMouseDown: false,
     isTouchMove: false
   });
-  var elementIds = useRef(getElementIds(props)); // Some utils.
+  var elementIds = useRef(getElementIds(props));
+  var previousResultCountRef = useRef(); // Some utils.
 
   var getItemNodeFromIndex = function (index) {
     return environment.document.getElementById(elementIds.current.getItemId(index));
   }; // Effects.
 
-  /* Sets a11y status message on changes in isOpen. */
+  /* Sets a11y status message on changes in state. */
 
 
   useEffect(function () {
@@ -2261,16 +2289,20 @@ function useSelect(userProps) {
       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. */
 
   useEffect(function () {
@@ -2278,15 +2310,19 @@ function useSelect(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]);
   /* Sets cleanup for the keysSoFar after 500ms. */
 
@@ -2343,6 +2379,13 @@ function useSelect(userProps) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [highlightedIndex]);
+  useEffect(function () {
+    if (isInitialMount.current) {
+      return;
+    }
+
+    previousResultCountRef.current = items.length;
+  });
   /* Make initial ref false. */
 
   useEffect(function () {
@@ -2666,6 +2709,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,
@@ -2678,7 +2766,6 @@ function getElementIds$1(_ref) {
     id: id
   }, rest)));
 }
-
 function getInitialState$1(props) {
   var initialState = getInitialState(props);
   var selectedItem = initialState.selectedItem;
@@ -2692,7 +2779,6 @@ function getInitialState$1(props) {
     inputValue: inputValue
   });
 }
-
 var propTypes$1 = {
   items: PropTypes.array.isRequired,
   itemToString: PropTypes.func,
@@ -2733,55 +2819,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 = 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) {
@@ -2921,6 +2995,7 @@ function downshiftUseComboboxReducer(state, action) {
       };
       break;
 
+    case ControlledPropUpdatedSelectedItem:
     case FunctionSetInputValue$1:
       changes = {
         inputValue: action.inputValue
@@ -2966,20 +3041,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 */
 
 
@@ -2996,25 +3071,30 @@ function useCombobox(userProps) {
     isTouchMove: false
   });
   var elementIds = useRef(getElementIds$1(props));
+  var previousResultCountRef = useRef();
   /* Effects */
 
-  /* Sets a11y status message on changes in isOpen. */
+  /* Sets a11y status message on changes in state. */
 
   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. */
 
   useEffect(function () {
@@ -3022,15 +3102,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. */
 
@@ -3060,8 +3144,13 @@ function useCombobox(userProps) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [isOpen]);
-  /* Make initial ref false. */
+  useEffect(function () {
+    if (isInitialMount.current) {
+      return;
+    }
 
+    previousResultCountRef.current = items.length;
+  });
   useEffect(function () {
     isInitialMount.current = false;
   }, []);
@@ -3157,6 +3246,11 @@ function useCombobox(userProps) {
       });
     },
     Enter: function Enter(event) {
+      // if IME composing, wait for next Enter keydown event.
+      if (event.which === 229) {
+        return;
+      }
+
       event.preventDefault();
       dispatch({
         type: InputKeyDownEnter,
@@ -3687,11 +3781,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 = useRef(true);