downshift 8.5.0 → 9.0.0

package/dist/downshift.esm.js

@@ -1,6 +1,5 @@
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 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 React, { cloneElement, Component, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'react';
@@ -152,7 +151,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;
@@ -440,6 +439,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;
@@ -479,14 +489,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(Downshift, _Component);
     function Downshift(_props) {
       var _this;
       _this = _Component.call(this, _props) || this;
@@ -672,7 +681,7 @@ var Downshift = /*#__PURE__*/function () {
           _ref$refKey = _ref.refKey,
           refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
           ref = _ref.ref,
-          rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+          rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
         var _ref2 = _temp2 === void 0 ? {} : _temp2,
           _ref2$suppressRefErro = _ref2.suppressRefError,
           suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
@@ -853,7 +862,7 @@ var Downshift = /*#__PURE__*/function () {
       _this.buttonHandleKeyDown = function (event) {
         var key = normalizeArrowKey(event);
         if (_this.buttonKeyDownHandlers[key]) {
-          _this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
+          _this.buttonKeyDownHandlers[key].call(_this, event);
         }
       };
       _this.buttonHandleClick = function (event) {
@@ -949,7 +958,7 @@ var Downshift = /*#__PURE__*/function () {
       _this.inputHandleKeyDown = function (event) {
         var key = normalizeArrowKey(event);
         if (key && _this.inputKeyDownHandlers[key]) {
-          _this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event);
+          _this.inputKeyDownHandlers[key].call(_this, event);
         }
       };
       _this.inputHandleChange = function (event) {
@@ -1153,6 +1162,7 @@ var Downshift = /*#__PURE__*/function () {
       _this.state = _state;
       return _this;
     }
+    _inheritsLoose(Downshift, _Component);
     var _proto = Downshift.prototype;
     /**
      * Clear all running timeouts
@@ -1433,7 +1443,7 @@ var Downshift = /*#__PURE__*/function () {
   Downshift.defaultProps = {
     defaultHighlightedIndex: null,
     defaultIsOpen: false,
-    getA11yStatusMessage: getA11yStatusMessage$1,
+    getA11yStatusMessage: getA11yStatusMessage,
     itemToString: function itemToString(i) {
       if (i == null) {
         return '';
@@ -1535,7 +1545,6 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
   }
 }
 
-var _excluded$3 = ["highlightedIndex", "items", "environment"];
 var dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
@@ -1580,23 +1589,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
@@ -1744,7 +1741,6 @@ var defaultProps$3 = {
     return item;
   },
   stateReducer: stateReducer,
-  getA11ySelectionMessage: getA11ySelectionMessage,
   scrollIntoView: scrollIntoView,
   environment: /* istanbul ignore next (ssr) */
   typeof window === 'undefined' || false ? undefined : window
@@ -1928,34 +1924,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(_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.
   useEffect(function () {
-    if (isInitialMount || false || !(environment != null && environment.document)) {
+    if (!getA11yStatusMessage || isInitialMount || false || !document) {
       return;
     }
-    updateA11yStatus(function () {
-      return getA11yMessage(_extends({
-        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.
+  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 = useRef(true);
   // Scroll on highlighted item if change comes from keyboard.
@@ -1977,9 +1986,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 = useRef(props);
     var isInitialMount = useIsInitialMount();
@@ -2160,29 +2169,8 @@ function getItemIndexByCharacterKey(_a) {
     }
     return highlightedIndex;
 }
-var propTypes$2 = __assign(__assign({}, commonDropdownPropTypes), { items: PropTypes.array.isRequired, isItemDisabled: PropTypes.func, getA11ySelectionMessage: PropTypes.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 = __assign(__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage, isItemDisabled: function () {
+var propTypes$2 = __assign(__assign({}, commonDropdownPropTypes), { items: PropTypes.array.isRequired, isItemDisabled: PropTypes.func });
+var defaultProps$2 = __assign(__assign({}, defaultProps$3), { isItemDisabled: function () {
         return false;
     } });
 // eslint-disable-next-line import/no-mutable-exports
@@ -2364,11 +2352,8 @@ function useSelect(userProps) {
   validatePropTypes$2(userProps, useSelect);
   // Props defaults and destructuring.
   var props = _extends({}, 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),
@@ -2386,9 +2371,6 @@ function useSelect(userProps) {
   var clearTimeoutRef = 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 = useRef();
-  var isInitialMount = useIsInitialMount();
   // utility callback to get item element.
   var latest = useLatestRef({
     state: state,
@@ -2401,20 +2383,8 @@ function useSelect(userProps) {
   }, [elementIds]);
 
   // Effects.
-  // Sets a11y status message on changes in state.
-  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
-    previousResultCount: previousResultCountRef.current,
-    items: items,
-    environment: environment,
-    itemToString: itemToString
-  }, state));
-  // Sets a11y status message on changes in selectedItem.
-  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
-    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,
@@ -2424,7 +2394,6 @@ function useSelect(userProps) {
     scrollIntoView: scrollIntoView,
     getItemNodeFromIndex: getItemNodeFromIndex
   });
-
   // Sets cleanup for the keysSoFar callback, debounded after 500ms.
   useEffect(function () {
     // init the clean function here as we need access to dispatch.
@@ -2440,7 +2409,6 @@ function useSelect(userProps) {
       clearTimeoutRef.current.cancel();
     };
   }, []);
-
   // Invokes the keysSoFar callback set up above.
   useEffect(function () {
     if (!inputValue) {
@@ -2452,12 +2420,6 @@ function useSelect(userProps) {
     props: props,
     state: state
   });
-  useEffect(function () {
-    if (isInitialMount) {
-      return;
-    }
-    previousResultCountRef.current = items.length;
-  });
   // Focus the toggle button on first render if required.
   useEffect(function () {
     var focusOnOpen = getInitialValue$1(props, 'isOpen');
@@ -2835,8 +2797,6 @@ function getInitialState$1(props) {
 var propTypes$1 = _extends({}, commonDropdownPropTypes, {
   items: PropTypes.array.isRequired,
   isItemDisabled: PropTypes.func,
-  selectedItemChanged: PropTypes.func,
-  getA11ySelectionMessage: PropTypes.func,
   inputValue: PropTypes.string,
   defaultInputValue: PropTypes.string,
   initialInputValue: PropTypes.string,
@@ -2869,13 +2829,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,
@@ -2898,7 +2852,6 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends({}, defaultProps$3, {
-  getA11yStatusMessage: getA11yStatusMessage$1,
   isItemDisabled: function isItemDisabled() {
     return false;
   }
@@ -3035,9 +2988,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],
@@ -3068,20 +3019,8 @@ function useCombobox(userProps) {
   }, [elementIds]);
 
   // Effects.
-  // Sets a11y status message on changes in state.
-  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
-    previousResultCount: previousResultCountRef.current,
-    items: items,
-    environment: environment,
-    itemToString: itemToString
-  }, state));
-  // Sets a11y status message on changes in selectedItem.
-  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
-    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,
@@ -3504,18 +3443,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.
@@ -3527,11 +3454,14 @@ function getA11yRemovalMessage(selectionParameters) {
 function isStateEqual(prevState, newState) {
   return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
 }
-var propTypes = _extends({}, commonPropTypes, {
+var propTypes = {
+  stateReducer: commonPropTypes.stateReducer,
+  itemToKey: commonPropTypes.itemToKey,
+  environment: commonPropTypes.environment,
   selectedItems: PropTypes.array,
   initialSelectedItems: PropTypes.array,
   defaultSelectedItems: PropTypes.array,
-  getA11yRemovalMessage: PropTypes.func,
+  getA11yStatusMessage: PropTypes.func,
   activeIndex: PropTypes.number,
   initialActiveIndex: PropTypes.number,
   defaultActiveIndex: PropTypes.number,
@@ -3539,13 +3469,11 @@ var propTypes = _extends({}, commonPropTypes, {
   onSelectedItemsChange: PropTypes.func,
   keyNavigationNext: PropTypes.string,
   keyNavigationPrevious: PropTypes.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'
 };
@@ -3712,8 +3640,7 @@ function useMultipleSelection(userProps) {
   validatePropTypes(userProps, useMultipleSelection);
   // Props defaults and destructuring.
   var props = _extends({}, defaultProps, userProps);
-  var getA11yRemovalMessage = props.getA11yRemovalMessage,
-    itemToString = props.itemToString,
+  var getA11yStatusMessage = props.getA11yStatusMessage,
     environment = props.environment,
     keyNavigationNext = props.keyNavigationNext,
     keyNavigationPrevious = props.keyNavigationPrevious;
@@ -3728,7 +3655,6 @@ function useMultipleSelection(userProps) {
   // Refs.
   var isInitialMount = useIsInitialMount();
   var dropdownRef = useRef(null);
-  var previousSelectedItemsRef = useRef(selectedItems);
   var selectedItemRefs = useRef();
   selectedItemRefs.current = [];
   var latest = useLatestRef({
@@ -3737,29 +3663,8 @@ function useMultipleSelection(userProps) {
   });
 
   // Effects.
-  /* Sets a11y status message on changes in selectedItem. */
-  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.
   useEffect(function () {
     if (isInitialMount) {