downshift 8.5.0 → 9.0.0

package/dist/downshift.native.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 PropTypes = require('prop-types');
 var React = require('react');
@@ -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 PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -154,7 +152,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;
@@ -423,6 +421,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;
@@ -462,14 +471,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;
@@ -655,7 +663,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;
@@ -834,7 +842,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) {
@@ -934,7 +942,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) {
@@ -1138,6 +1146,7 @@ var Downshift = /*#__PURE__*/function () {
       _this.state = _state;
       return _this;
     }
+    _inheritsLoose__default["default"](Downshift, _Component);
     var _proto = Downshift.prototype;
     /**
      * Clear all running timeouts
@@ -1345,7 +1354,7 @@ var Downshift = /*#__PURE__*/function () {
   Downshift.defaultProps = {
     defaultHighlightedIndex: null,
     defaultIsOpen: false,
-    getA11yStatusMessage: getA11yStatusMessage$1,
+    getA11yStatusMessage: getA11yStatusMessage,
     itemToString: function itemToString(i) {
       if (i == null) {
         return '';
@@ -1447,7 +1456,6 @@ function validateGetRootPropsCalledCorrectly(element, _ref13) {
   }
 }
 
-var _excluded$3 = ["highlightedIndex", "items", "environment"];
 var dropdownDefaultStateValues = {
   highlightedIndex: -1,
   isOpen: false,
@@ -1492,23 +1500,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
@@ -1653,7 +1649,6 @@ var defaultProps$3 = {
     return item;
   },
   stateReducer: stateReducer,
-  getA11ySelectionMessage: getA11ySelectionMessage,
   scrollIntoView: scrollIntoView,
   environment: /* istanbul ignore next (ssr) */
   typeof window === 'undefined' || true ? undefined : window
@@ -1799,34 +1794,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 || true || !(environment != null && environment.document)) {
+    if (!getA11yStatusMessage || isInitialMount || true || !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);
+  }, [dependencyArray]);
+
+  // Cleanup the status message container.
+  React.useEffect(function () {
+    return function () {
+      updateA11yStatus.cancel();
+      cleanupStatusDiv(document);
+    };
+  }, [document]);
 }
-function useScrollIntoView(_ref4) {
-  var highlightedIndex = _ref4.highlightedIndex,
-    isOpen = _ref4.isOpen,
-    itemRefs = _ref4.itemRefs,
-    getItemNodeFromIndex = _ref4.getItemNodeFromIndex,
-    menuElement = _ref4.menuElement,
-    scrollIntoViewProp = _ref4.scrollIntoView;
+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.
@@ -1848,9 +1856,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();
@@ -2031,29 +2039,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
@@ -2235,11 +2222,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),
@@ -2257,9 +2241,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,
@@ -2272,20 +2253,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,
@@ -2295,7 +2264,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.
@@ -2311,7 +2279,6 @@ function useSelect(userProps) {
       clearTimeoutRef.current.cancel();
     };
   }, []);
-
   // Invokes the keysSoFar callback set up above.
   React.useEffect(function () {
     if (!inputValue) {
@@ -2323,12 +2290,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');
@@ -2694,8 +2655,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,
@@ -2728,13 +2687,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,
@@ -2757,7 +2710,6 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
-  getA11yStatusMessage: getA11yStatusMessage$1,
   isItemDisabled: function isItemDisabled() {
     return false;
   }
@@ -2894,9 +2846,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],
@@ -2927,20 +2877,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,
@@ -3375,18 +3313,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.
@@ -3398,11 +3324,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,
@@ -3410,13 +3339,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'
 };
@@ -3583,8 +3510,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;
@@ -3599,7 +3525,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({
@@ -3608,29 +3533,8 @@ function useMultipleSelection(userProps) {
   });
 
   // Effects.
-  /* Sets a11y status message on changes in selectedItem. */
-  React.useEffect(function () {
-    if (isInitialMount || true || !(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) {