downshift 8.5.0 → 9.0.0

package/dist/downshift.umd.js

@@ -36,13 +36,6 @@
     return _extends.apply(this, arguments);
   }
 
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-    return self;
-  }
-
   function _setPrototypeOf(o, p) {
     _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
@@ -1525,7 +1518,7 @@
    * @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;
@@ -1813,6 +1806,17 @@
     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 = '__autocomplete_unknown__' ;
   var mouseUp = '__autocomplete_mouseup__' ;
   var itemMouseEnter = '__autocomplete_item_mouseenter__' ;
@@ -1852,14 +1856,13 @@
     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;
@@ -2045,7 +2048,7 @@
             _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;
@@ -2226,7 +2229,7 @@
         _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) {
@@ -2318,7 +2321,7 @@
         _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) {
@@ -2522,6 +2525,7 @@
         _this.state = _state;
         return _this;
       }
+      _inheritsLoose(Downshift, _Component);
       var _proto = Downshift.prototype;
       /**
        * Clear all running timeouts
@@ -2799,7 +2803,7 @@
     Downshift.defaultProps = {
       defaultHighlightedIndex: null,
       defaultIsOpen: false,
-      getA11yStatusMessage: getA11yStatusMessage$1,
+      getA11yStatusMessage: getA11yStatusMessage,
       itemToString: function itemToString(i) {
         if (i == null) {
           return '';
@@ -2901,7 +2905,6 @@
     }
   }
 
-  var _excluded$3 = ["highlightedIndex", "items", "environment"];
   var dropdownDefaultStateValues = {
     highlightedIndex: -1,
     isOpen: false,
@@ -2946,23 +2949,11 @@
     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
@@ -3110,7 +3101,6 @@
       return item;
     },
     stateReducer: stateReducer,
-    getA11ySelectionMessage: getA11ySelectionMessage,
     scrollIntoView: scrollIntoView,
     environment: /* istanbul ignore next (ssr) */
     typeof window === 'undefined' || false ? undefined : window
@@ -3294,34 +3284,47 @@
       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.
     React.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);
+    }, [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.
@@ -3343,9 +3346,9 @@
   var useControlPropsValidator = noop;
   /* istanbul ignore next */
   {
-    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();
@@ -3557,29 +3560,8 @@
       }
       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
@@ -3761,11 +3743,8 @@
     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),
@@ -3783,9 +3762,6 @@
     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,
@@ -3798,20 +3774,8 @@
     }, [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,
@@ -3821,7 +3785,6 @@
       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.
@@ -3837,7 +3800,6 @@
         clearTimeoutRef.current.cancel();
       };
     }, []);
-
     // Invokes the keysSoFar callback set up above.
     React.useEffect(function () {
       if (!inputValue) {
@@ -3849,12 +3811,6 @@
       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');
@@ -4232,8 +4188,6 @@
   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,
@@ -4266,13 +4220,7 @@
       }
       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,
@@ -4295,7 +4243,6 @@
     };
   }
   var defaultProps$1 = _extends({}, defaultProps$3, {
-    getA11yStatusMessage: getA11yStatusMessage$1,
     isItemDisabled: function isItemDisabled() {
       return false;
     }
@@ -4432,9 +4379,7 @@
     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],
@@ -4465,20 +4410,8 @@
     }, [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,
@@ -4901,18 +4834,6 @@
     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.
@@ -4924,11 +4845,14 @@
   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,
@@ -4936,13 +4860,11 @@
     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'
   };
@@ -5109,8 +5031,7 @@
     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;
@@ -5125,7 +5046,6 @@
     // Refs.
     var isInitialMount = useIsInitialMount();
     var dropdownRef = React.useRef(null);
-    var previousSelectedItemsRef = React.useRef(selectedItems);
     var selectedItemRefs = React.useRef();
     selectedItemRefs.current = [];
     var latest = useLatestRef({
@@ -5134,29 +5054,8 @@
     });
 
     // 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) {