downshift 8.5.0 → 9.0.0

package/dist/src/hooks/useSelect/utils.d.ts

@@ -1,24 +1,11 @@
-import { A11yStatusMessageOptions } from '../../types';
 import { GetItemIndexByCharacterKeyOptions } from './types';
 export declare function getItemIndexByCharacterKey<Item>({ keysSoFar, highlightedIndex, items, itemToString, isItemDisabled, }: GetItemIndexByCharacterKeyOptions<Item>): number;
-/**
- * Default implementation for status message. Only added when menu is open.
- * Will specift if there are results in the list, and if so, how many,
- * and what keys are relevant.
- *
- * @param {Object} param the downshift state and other relevant properties
- * @return {String} the a11y status message
- */
-declare function getA11yStatusMessage<Item>({ isOpen, resultCount, previousResultCount, }: A11yStatusMessageOptions<Item>): string;
 export declare const defaultProps: {
-    getA11yStatusMessage: typeof getA11yStatusMessage;
     isItemDisabled(): boolean;
     itemToString(item: any): string;
     itemToKey(item: any): any;
     stateReducer: (s: Object, a: Object) => Object;
-    getA11ySelectionMessage: (selectionParameters: Object) => string;
     scrollIntoView: typeof import("../../utils").scrollIntoView;
     environment: (Window & typeof globalThis) | undefined;
 };
 export declare let validatePropTypes: (options: unknown, caller: Function) => void;
-export {};

package/dist/src/hooks/utils.d.ts

@@ -7,12 +7,10 @@ export function useScrollIntoView({ highlightedIndex, isOpen, itemRefs, getItemN
     menuElement: any;
     scrollIntoView: any;
 }): React.MutableRefObject<boolean>;
-export function useA11yMessageSetter(getA11yMessage: any, dependencyArray: any, { highlightedIndex, items, environment, ...rest }: {
-    [x: string]: any;
-    highlightedIndex: any;
-    items: any;
-    environment: any;
-}): void;
+/**
+ * Debounced call for updating the a11y message.
+ */
+export const updateA11yStatus: Function;
 export function useGetterPropsCalledChecker(): typeof noop;
 /**
  * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
@@ -46,7 +44,6 @@ export namespace defaultProps {
     export function itemToString(item: any): string;
     export function itemToKey(item: any): any;
     export { stateReducer };
-    export { getA11ySelectionMessage };
     export { scrollIntoView };
     export const environment: (Window & typeof globalThis) | undefined;
 }
@@ -166,6 +163,16 @@ export namespace commonPropTypes { }
  * Tracks if it's the first render.
  */
 export function useIsInitialMount(): boolean;
+/**
+ * Adds an a11y aria live status message if getA11yStatusMessage is passed.
+ * @param {(options: Object) => string} getA11yStatusMessage The function that builds the status message.
+ * @param {Object} options The options to be passed to getA11yStatusMessage if called.
+ * @param {Array<unknown>} dependencyArray The dependency array that triggers the status message setter via useEffect.
+ * @param {{document: Document}} environment The environment object containing the document.
+ */
+export function useA11yMessageStatus(getA11yStatusMessage: (options: Object) => string, options: Object, dependencyArray: Array<unknown>, environment?: {
+    document: Document;
+}): void;
 import { noop } from "../utils";
 import React from "react";
 /**
@@ -176,13 +183,6 @@ import React from "react";
  * @returns {Object} changes.
  */
 declare function stateReducer(s: Object, a: Object): Object;
-/**
- * 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.
- */
-declare function getA11ySelectionMessage(selectionParameters: Object): string;
 import { scrollIntoView } from "../utils";
 import PropTypes from "prop-types";
 export {};

package/dist/src/set-a11y-status.d.ts

@@ -2,4 +2,9 @@
  * @param {String} status the status message
  * @param {Object} documentProp document passed by the user.
  */
-export default function setStatus(status: string, documentProp: Object): void;
+export function setStatus(status: string, documentProp: Object): void;
+/**
+ * Removes the status element from the DOM
+ * @param {Document} documentProp
+ */
+export function cleanupStatusDiv(documentProp: Document): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "8.5.0",
+  "version": "9.0.0",
   "description": "🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.",
   "main": "dist/downshift.cjs.js",
   "react-native": "dist/downshift.native.cjs.js",

package/preact/dist/downshift.cjs.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var _extends = require('@babel/runtime/helpers/extends');
-var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
 var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
 var React = require('preact/compat');
 var reactIs = require('react-is');
@@ -16,7 +15,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
 var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
@@ -165,7 +163,7 @@ function resetIdCounter() {
  * @param {Object} param the downshift state and other relevant properties
  * @return {String} the a11y status message
  */
-function getA11yStatusMessage$1(_ref2) {
+function getA11yStatusMessage(_ref2) {
   var isOpen = _ref2.isOpen,
     resultCount = _ref2.resultCount,
     previousResultCount = _ref2.previousResultCount;
@@ -460,6 +458,17 @@ function setStatus(status, documentProp) {
   cleanupStatus(documentProp);
 }
 
+/**
+ * Removes the status element from the DOM
+ * @param {Document} documentProp 
+ */
+function cleanupStatusDiv(documentProp) {
+  var statusDiv = documentProp == null ? void 0 : documentProp.getElementById('a11y-status-message');
+  if (statusDiv) {
+    statusDiv.remove();
+  }
+}
+
 var unknown = process.env.NODE_ENV !== "production" ? '__autocomplete_unknown__' : 0;
 var mouseUp = process.env.NODE_ENV !== "production" ? '__autocomplete_mouseup__' : 1;
 var itemMouseEnter = process.env.NODE_ENV !== "production" ? '__autocomplete_item_mouseenter__' : 2;
@@ -499,14 +508,13 @@ var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
   touchEnd: touchEnd
 });
 
-var _excluded$4 = ["refKey", "ref"],
+var _excluded$3 = ["refKey", "ref"],
   _excluded2$3 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"],
   _excluded3$2 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"],
   _excluded4$2 = ["refKey", "ref"],
   _excluded5 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"];
 var Downshift = /*#__PURE__*/function () {
   var Downshift = /*#__PURE__*/function (_Component) {
-    _inheritsLoose__default["default"](Downshift, _Component);
     function Downshift(_props) {
       var _this;
       _this = _Component.call(this, _props) || this;
@@ -692,7 +700,7 @@ var Downshift = /*#__PURE__*/function () {
           _ref$refKey = _ref.refKey,
           refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
           ref = _ref.ref,
-          rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$4);
+          rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$3);
         var _ref2 = _temp2 === void 0 ? {} : _temp2,
           _ref2$suppressRefErro = _ref2.suppressRefError,
           suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
@@ -873,7 +881,7 @@ var Downshift = /*#__PURE__*/function () {
       _this.buttonHandleKeyDown = function (event) {
         var key = normalizeArrowKey(event);
         if (_this.buttonKeyDownHandlers[key]) {
-          _this.buttonKeyDownHandlers[key].call(_assertThisInitialized__default["default"](_this), event);
+          _this.buttonKeyDownHandlers[key].call(_this, event);
         }
       };
       _this.buttonHandleClick = function (event) {
@@ -969,7 +977,7 @@ var Downshift = /*#__PURE__*/function () {
       _this.inputHandleKeyDown = function (event) {
         var key = normalizeArrowKey(event);
         if (key && _this.inputKeyDownHandlers[key]) {
-          _this.inputKeyDownHandlers[key].call(_assertThisInitialized__default["default"](_this), event);
+          _this.inputKeyDownHandlers[key].call(_this, event);
         }
       };
       _this.inputHandleChange = function (event) {
@@ -1173,6 +1181,7 @@ var Downshift = /*#__PURE__*/function () {
       _this.state = _state;
       return _this;
     }
+    _inheritsLoose__default["default"](Downshift, _Component);
     var _proto = Downshift.prototype;
     /**
      * Clear all running timeouts
@@ -1453,7 +1462,7 @@ var Downshift = /*#__PURE__*/function () {
   Downshift.defaultProps = {
     defaultHighlightedIndex: null,
     defaultIsOpen: false,
-    getA11yStatusMessage: getA11yStatusMessage$1,
+    getA11yStatusMessage: getA11yStatusMessage,
     itemToString: function itemToString(i) {
       if (i == null) {
         return '';
@@ -1509,7 +1518,6 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
   }
 }
 
-var _excluded$3 = ["highlightedIndex", "items", "environment"];
 var dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
@@ -1554,23 +1562,11 @@ 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,
-    itemToString = selectionParameters.itemToString;
-  return selectedItem ? itemToString(selectedItem) + " has been selected." : '';
-}
-
 /**
  * Debounced call for updating the a11y message.
  */
-var updateA11yStatus = debounce(function (getA11yMessage, document) {
-  setStatus(getA11yMessage(), document);
+var updateA11yStatus = debounce(function (status, document) {
+  setStatus(status, document);
 }, 200);
 
 // istanbul ignore next
@@ -1718,7 +1714,6 @@ var defaultProps$3 = {
     return item;
   },
   stateReducer: stateReducer,
-  getA11ySelectionMessage: getA11ySelectionMessage,
   scrollIntoView: scrollIntoView,
   environment: /* istanbul ignore next (ssr) */
   typeof window === 'undefined' || false ? undefined : window
@@ -1902,34 +1897,47 @@ if (process.env.NODE_ENV !== 'production') {
     return setGetterPropCallInfo;
   };
 }
-function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref3) {
-  var highlightedIndex = _ref3.highlightedIndex,
-    items = _ref3.items,
-    environment = _ref3.environment,
-    rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded$3);
+
+/**
+ * Adds an a11y aria live status message if getA11yStatusMessage is passed.
+ * @param {(options: Object) => string} getA11yStatusMessage The function that builds the status message.
+ * @param {Object} options The options to be passed to getA11yStatusMessage if called.
+ * @param {Array<unknown>} dependencyArray The dependency array that triggers the status message setter via useEffect.
+ * @param {{document: Document}} environment The environment object containing the document.
+ */
+function useA11yMessageStatus(getA11yStatusMessage, options, dependencyArray, environment) {
+  if (environment === void 0) {
+    environment = {};
+  }
+  var document = environment.document;
   var isInitialMount = useIsInitialMount();
-  // Sets a11y status message on changes in state.
+
+  // Adds an a11y aria live status message if getA11yStatusMessage is passed.
   React.useEffect(function () {
-    if (isInitialMount || false || !(environment != null && environment.document)) {
+    if (!getA11yStatusMessage || isInitialMount || false || !document) {
       return;
     }
-    updateA11yStatus(function () {
-      return getA11yMessage(_extends__default["default"]({
-        highlightedIndex: highlightedIndex,
-        highlightedItem: items[highlightedIndex],
-        resultCount: items.length
-      }, rest));
-    }, environment.document);
+    var status = getA11yStatusMessage(options);
+    updateA11yStatus(status, document);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, dependencyArray);
-}
-function useScrollIntoView(_ref4) {
-  var highlightedIndex = _ref4.highlightedIndex,
-    isOpen = _ref4.isOpen,
-    itemRefs = _ref4.itemRefs,
-    getItemNodeFromIndex = _ref4.getItemNodeFromIndex,
-    menuElement = _ref4.menuElement,
-    scrollIntoViewProp = _ref4.scrollIntoView;
+  }, [dependencyArray]);
+
+  // Cleanup the status message container.
+  React.useEffect(function () {
+    return function () {
+      updateA11yStatus.cancel();
+      cleanupStatusDiv(document);
+    };
+  }, [document]);
+}
+function useScrollIntoView(_ref3) {
+  var highlightedIndex = _ref3.highlightedIndex,
+    isOpen = _ref3.isOpen,
+    itemRefs = _ref3.itemRefs,
+    getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
+    menuElement = _ref3.menuElement,
+    scrollIntoViewProp = _ref3.scrollIntoView;
   // used not to scroll on highlight by mouse.
   var shouldScrollRef = React.useRef(true);
   // Scroll on highlighted item if change comes from keyboard.
@@ -1951,9 +1959,9 @@ function useScrollIntoView(_ref4) {
 var useControlPropsValidator = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
-  useControlPropsValidator = function useControlPropsValidator(_ref5) {
-    var props = _ref5.props,
-      state = _ref5.state;
+  useControlPropsValidator = function useControlPropsValidator(_ref4) {
+    var props = _ref4.props,
+      state = _ref4.state;
     // used for checking when props are moving from controlled to uncontrolled.
     var prevPropsRef = React.useRef(props);
     var isInitialMount = useIsInitialMount();
@@ -2134,29 +2142,8 @@ function getItemIndexByCharacterKey(_a) {
     }
     return highlightedIndex;
 }
-var propTypes$2 = tslib.__assign(tslib.__assign({}, commonDropdownPropTypes), { items: PropTypes__default["default"].array.isRequired, isItemDisabled: PropTypes__default["default"].func, getA11ySelectionMessage: PropTypes__default["default"].func });
-/**
- * Default implementation for status message. Only added when menu is open.
- * Will specift if there are results in the list, and if so, how many,
- * and what keys are relevant.
- *
- * @param {Object} param the downshift state and other relevant properties
- * @return {String} the a11y status message
- */
-function getA11yStatusMessage(_a) {
-    var isOpen = _a.isOpen, resultCount = _a.resultCount, previousResultCount = _a.previousResultCount;
-    if (!isOpen) {
-        return '';
-    }
-    if (!resultCount) {
-        return 'No results are available.';
-    }
-    if (resultCount !== previousResultCount) {
-        return "".concat(resultCount, " result").concat(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$2 = tslib.__assign(tslib.__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage, isItemDisabled: function () {
+var propTypes$2 = tslib.__assign(tslib.__assign({}, commonDropdownPropTypes), { items: PropTypes__default["default"].array.isRequired, isItemDisabled: PropTypes__default["default"].func });
+var defaultProps$2 = tslib.__assign(tslib.__assign({}, defaultProps$3), { isItemDisabled: function () {
         return false;
     } });
 // eslint-disable-next-line import/no-mutable-exports
@@ -2338,11 +2325,8 @@ function useSelect(userProps) {
   validatePropTypes$2(userProps, useSelect);
   // Props defaults and destructuring.
   var props = _extends__default["default"]({}, defaultProps$2, userProps);
-  var items = props.items,
-    scrollIntoView = props.scrollIntoView,
+  var scrollIntoView = props.scrollIntoView,
     environment = props.environment,
-    itemToString = props.itemToString,
-    getA11ySelectionMessage = props.getA11ySelectionMessage,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
   var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual),
@@ -2360,9 +2344,6 @@ function useSelect(userProps) {
   var clearTimeoutRef = React.useRef(null);
   // prevent id re-generation between renders.
   var elementIds = useElementIds(props);
-  // used to keep track of how many items we had on previous cycle.
-  var previousResultCountRef = React.useRef();
-  var isInitialMount = useIsInitialMount();
   // utility callback to get item element.
   var latest = useLatestRef({
     state: state,
@@ -2375,20 +2356,8 @@ function useSelect(userProps) {
   }, [elementIds]);
 
   // Effects.
-  // Sets a11y status message on changes in state.
-  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default["default"]({
-    previousResultCount: previousResultCountRef.current,
-    items: items,
-    environment: environment,
-    itemToString: itemToString
-  }, state));
-  // Sets a11y status message on changes in selectedItem.
-  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends__default["default"]({
-    previousResultCount: previousResultCountRef.current,
-    items: items,
-    environment: environment,
-    itemToString: itemToString
-  }, state));
+  // Adds an a11y aria live status message if getA11yStatusMessage is passed.
+  useA11yMessageStatus(getA11yStatusMessage, state, [isOpen, highlightedIndex, selectedItem, inputValue], environment);
   // Scroll on highlighted item if change comes from keyboard.
   var shouldScrollRef = useScrollIntoView({
     menuElement: menuRef.current,
@@ -2398,7 +2367,6 @@ function useSelect(userProps) {
     scrollIntoView: scrollIntoView,
     getItemNodeFromIndex: getItemNodeFromIndex
   });
-
   // Sets cleanup for the keysSoFar callback, debounded after 500ms.
   React.useEffect(function () {
     // init the clean function here as we need access to dispatch.
@@ -2414,7 +2382,6 @@ function useSelect(userProps) {
       clearTimeoutRef.current.cancel();
     };
   }, []);
-
   // Invokes the keysSoFar callback set up above.
   React.useEffect(function () {
     if (!inputValue) {
@@ -2426,12 +2393,6 @@ function useSelect(userProps) {
     props: props,
     state: state
   });
-  React.useEffect(function () {
-    if (isInitialMount) {
-      return;
-    }
-    previousResultCountRef.current = items.length;
-  });
   // Focus the toggle button on first render if required.
   React.useEffect(function () {
     var focusOnOpen = getInitialValue$1(props, 'isOpen');
@@ -2809,8 +2770,6 @@ function getInitialState$1(props) {
 var propTypes$1 = _extends__default["default"]({}, commonDropdownPropTypes, {
   items: PropTypes__default["default"].array.isRequired,
   isItemDisabled: PropTypes__default["default"].func,
-  selectedItemChanged: PropTypes__default["default"].func,
-  getA11ySelectionMessage: PropTypes__default["default"].func,
   inputValue: PropTypes__default["default"].string,
   defaultInputValue: PropTypes__default["default"].string,
   initialInputValue: PropTypes__default["default"].string,
@@ -2843,13 +2802,7 @@ function useControlledReducer(reducer, props, createInitialState, isStateEqual)
     }
     if (!isInitialMount // on first mount we already have the proper inputValue for a initial selected item.
     ) {
-      var shouldCallDispatch;
-      if (props.selectedItemChanged === undefined) {
-        shouldCallDispatch = props.itemToKey(props.selectedItem) !== props.itemToKey(previousSelectedItemRef.current);
-      } else {
-        console.warn("The \"selectedItemChanged\" is deprecated. Please use \"itemToKey instead\". https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#selecteditemchanged");
-        shouldCallDispatch = props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem);
-      }
+      var shouldCallDispatch = props.itemToKey(props.selectedItem) !== props.itemToKey(previousSelectedItemRef.current);
       if (shouldCallDispatch) {
         dispatch({
           type: ControlledPropUpdatedSelectedItem,
@@ -2872,7 +2825,6 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
-  getA11yStatusMessage: getA11yStatusMessage$1,
   isItemDisabled: function isItemDisabled() {
     return false;
   }
@@ -3009,9 +2961,7 @@ function useCombobox(userProps) {
   var items = props.items,
     scrollIntoView = props.scrollIntoView,
     environment = props.environment,
-    getA11yStatusMessage = props.getA11yStatusMessage,
-    getA11ySelectionMessage = props.getA11ySelectionMessage,
-    itemToString = props.itemToString;
+    getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
   var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual),
     state = _useControlledReducer[0],
@@ -3042,20 +2992,8 @@ function useCombobox(userProps) {
   }, [elementIds]);
 
   // Effects.
-  // Sets a11y status message on changes in state.
-  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default["default"]({
-    previousResultCount: previousResultCountRef.current,
-    items: items,
-    environment: environment,
-    itemToString: itemToString
-  }, state));
-  // Sets a11y status message on changes in selectedItem.
-  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends__default["default"]({
-    previousResultCount: previousResultCountRef.current,
-    items: items,
-    environment: environment,
-    itemToString: itemToString
-  }, state));
+  // Adds an a11y aria live status message if getA11yStatusMessage is passed.
+  useA11yMessageStatus(getA11yStatusMessage, state, [isOpen, highlightedIndex, selectedItem, inputValue], environment);
   // Scroll on highlighted item if change comes from keyboard.
   var shouldScrollRef = useScrollIntoView({
     menuElement: menuRef.current,
@@ -3478,18 +3416,6 @@ function isKeyDownOperationPermitted(event) {
   return true;
 }
 
-/**
- * Returns a message to be added to aria-live region when item is removed.
- *
- * @param {Object} selectionParameters Parameters required to build the message.
- * @returns {string} The a11y message.
- */
-function getA11yRemovalMessage(selectionParameters) {
-  var removedSelectedItem = selectionParameters.removedSelectedItem,
-    itemToStringLocal = selectionParameters.itemToString;
-  return itemToStringLocal(removedSelectedItem) + " has been removed.";
-}
-
 /**
  * Check if a state is equal for taglist, by comparing active index and selected items.
  * Used by useSelect and useCombobox.
@@ -3501,11 +3427,14 @@ function getA11yRemovalMessage(selectionParameters) {
 function isStateEqual(prevState, newState) {
   return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
 }
-var propTypes = _extends__default["default"]({}, commonPropTypes, {
+var propTypes = {
+  stateReducer: commonPropTypes.stateReducer,
+  itemToKey: commonPropTypes.itemToKey,
+  environment: commonPropTypes.environment,
   selectedItems: PropTypes__default["default"].array,
   initialSelectedItems: PropTypes__default["default"].array,
   defaultSelectedItems: PropTypes__default["default"].array,
-  getA11yRemovalMessage: PropTypes__default["default"].func,
+  getA11yStatusMessage: PropTypes__default["default"].func,
   activeIndex: PropTypes__default["default"].number,
   initialActiveIndex: PropTypes__default["default"].number,
   defaultActiveIndex: PropTypes__default["default"].number,
@@ -3513,13 +3442,11 @@ var propTypes = _extends__default["default"]({}, commonPropTypes, {
   onSelectedItemsChange: PropTypes__default["default"].func,
   keyNavigationNext: PropTypes__default["default"].string,
   keyNavigationPrevious: PropTypes__default["default"].string
-});
+};
 var defaultProps = {
-  itemToString: defaultProps$3.itemToString,
   itemToKey: defaultProps$3.itemToKey,
   stateReducer: defaultProps$3.stateReducer,
   environment: defaultProps$3.environment,
-  getA11yRemovalMessage: getA11yRemovalMessage,
   keyNavigationNext: 'ArrowRight',
   keyNavigationPrevious: 'ArrowLeft'
 };
@@ -3686,8 +3613,7 @@ function useMultipleSelection(userProps) {
   validatePropTypes(userProps, useMultipleSelection);
   // Props defaults and destructuring.
   var props = _extends__default["default"]({}, defaultProps, userProps);
-  var getA11yRemovalMessage = props.getA11yRemovalMessage,
-    itemToString = props.itemToString,
+  var getA11yStatusMessage = props.getA11yStatusMessage,
     environment = props.environment,
     keyNavigationNext = props.keyNavigationNext,
     keyNavigationPrevious = props.keyNavigationPrevious;
@@ -3702,7 +3628,6 @@ function useMultipleSelection(userProps) {
   // Refs.
   var isInitialMount = useIsInitialMount();
   var dropdownRef = React.useRef(null);
-  var previousSelectedItemsRef = React.useRef(selectedItems);
   var selectedItemRefs = React.useRef();
   selectedItemRefs.current = [];
   var latest = useLatestRef({
@@ -3711,29 +3636,8 @@ function useMultipleSelection(userProps) {
   });
 
   // Effects.
-  /* Sets a11y status message on changes in selectedItem. */
-  React.useEffect(function () {
-    if (isInitialMount || false || !(environment != null && environment.document)) {
-      return;
-    }
-    if (selectedItems.length < previousSelectedItemsRef.current.length) {
-      var removedSelectedItem = previousSelectedItemsRef.current.find(function (selectedItem) {
-        return selectedItems.findIndex(function (item) {
-          return props.itemToKey(item) === props.itemToKey(selectedItem);
-        }) < 0;
-      });
-      setStatus(getA11yRemovalMessage({
-        itemToString: itemToString,
-        resultCount: selectedItems.length,
-        removedSelectedItem: removedSelectedItem,
-        activeIndex: activeIndex,
-        activeSelectedItem: selectedItems[activeIndex]
-      }), environment.document);
-    }
-    previousSelectedItemsRef.current = selectedItems;
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedItems.length]);
+  // Adds an a11y aria live status message if getA11yStatusMessage is passed.
+  useA11yMessageStatus(getA11yStatusMessage, state, [activeIndex, selectedItems], environment);
   // Sets focus on active item.
   React.useEffect(function () {
     if (isInitialMount) {