downshift 5.1.0-beta.0 → 5.2.1

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
@@ -1794,8 +1799,12 @@
     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) {
@@ -2069,6 +2078,10 @@
             }
           },
           Enter: function Enter(event) {
+            if (event.which === 229) {
+              return;
+            }
+
             var _this$getState2 = this.getState(),
                 isOpen = _this$getState2.isOpen,
                 highlightedIndex = _this$getState2.highlightedIndex;
@@ -2946,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,
@@ -2962,7 +3034,6 @@
       toggleButtonId: toggleButtonId || uniqueId + "-toggle-button"
     };
   }
-
   function getItemIndex(index, item, items) {
     if (index !== undefined) {
       return index;
@@ -2991,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);
+  function useControlledState(reducer, initialState, props) {
+    var _useState = react.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 = 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({
@@ -3049,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,
@@ -3085,7 +3112,6 @@
     /* istanbul ignore next (ssr) */
     ? {} : window
   };
-
   function getDefaultValue(props, propKey, defaultStateValues) {
     if (defaultStateValues === void 0) {
       defaultStateValues = dropdownDefaultStateValues;
@@ -3099,7 +3125,6 @@
 
     return defaultStateValues[propKey];
   }
-
   function getInitialValue(props, propKey, defaultStateValues) {
     if (defaultStateValues === void 0) {
       defaultStateValues = dropdownDefaultStateValues;
@@ -3117,7 +3142,6 @@
 
     return getDefaultValue(props, propKey, defaultStateValues);
   }
-
   function getInitialState(props) {
     var selectedItem = getInitialValue(props, 'selectedItem');
     var isOpen = getInitialValue(props, 'isOpen');
@@ -3130,7 +3154,6 @@
       inputValue: inputValue
     };
   }
-
   function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
     var items = props.items,
         initialHighlightedIndex = props.initialHighlightedIndex,
@@ -3237,7 +3260,8 @@
 
   function getA11yStatusMessage$1(_ref) {
     var isOpen = _ref.isOpen,
-        resultCount = _ref.resultCount;
+        resultCount = _ref.resultCount,
+        previousResultCount = _ref.previousResultCount;
 
     if (!isOpen) {
       return '';
@@ -3247,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, {
@@ -3494,24 +3522,23 @@
     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);
@@ -3523,13 +3550,14 @@
       isMouseDown: false,
       isTouchMove: false
     });
-    var elementIds = react.useRef(getElementIds(props)); // Some utils.
+    var elementIds = react.useRef(getElementIds(props));
+    var previousResultCountRef = react.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. */
 
 
     react.useEffect(function () {
@@ -3537,16 +3565,20 @@
         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 () {
@@ -3554,15 +3586,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]);
     /* Sets cleanup for the keysSoFar after 500ms. */
 
@@ -3619,6 +3655,13 @@
       } // eslint-disable-next-line react-hooks/exhaustive-deps
 
     }, [highlightedIndex]);
+    react.useEffect(function () {
+      if (isInitialMount.current) {
+        return;
+      }
+
+      previousResultCountRef.current = items.length;
+    });
     /* Make initial ref false. */
 
     react.useEffect(function () {
@@ -3942,6 +3985,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,
@@ -3954,7 +4042,6 @@
       id: id
     }, rest)));
   }
-
   function getInitialState$1(props) {
     var initialState = getInitialState(props);
     var selectedItem = initialState.selectedItem;
@@ -3968,7 +4055,6 @@
       inputValue: inputValue
     });
   }
-
   var propTypes$2 = {
     items: propTypes.array.isRequired,
     itemToString: propTypes.func,
@@ -4009,55 +4095,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) {
@@ -4197,6 +4271,7 @@
         };
         break;
 
+      case ControlledPropUpdatedSelectedItem:
       case FunctionSetInputValue$1:
         changes = {
           inputValue: action.inputValue
@@ -4237,20 +4312,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 */
 
 
@@ -4267,25 +4342,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 () {
@@ -4293,15 +4373,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. */
 
@@ -4331,8 +4415,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;
     }, []);
@@ -4428,6 +4517,11 @@
         });
       },
       Enter: function Enter(event) {
+        // if IME composing, wait for next Enter keydown event.
+        if (event.which === 229) {
+          return;
+        }
+
         event.preventDefault();
         dispatch({
           type: InputKeyDownEnter,
@@ -4958,11 +5052,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);