downshift 8.1.0 → 8.2.0

package/dist/downshift.native.cjs.js

@@ -9,7 +9,7 @@ var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
 var PropTypes = require('prop-types');
 var React = require('react');
 var reactIs = require('react-is');
-var compute = require('compute-scroll-into-view');
+var computeScrollIntoView = require('compute-scroll-into-view');
 var tslib = require('tslib');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -20,7 +20,6 @@ var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assert
 var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var compute__default = /*#__PURE__*/_interopDefaultLegacy(compute);
 
 var idCounter = 0;
 
@@ -46,7 +45,7 @@ function scrollIntoView(node, menuNode) {
   if (!node) {
     return;
   }
-  var actions = compute__default["default"](node, {
+  var actions = computeScrollIntoView.compute(node, {
     boundary: menuNode,
     block: 'nearest',
     scrollMode: 'if-needed'
@@ -60,17 +59,6 @@ function scrollIntoView(node, menuNode) {
   });
 }
 
-/**
- * @param {HTMLElement} parent the parent node
- * @param {HTMLElement} child the child node
- * @param {Window} environment The window context where downshift renders.
- * @return {Boolean} whether the parent is the child or the child is in the parent
- */
-function isOrContainsNode(parent, child, environment) {
-  var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
-  return result;
-}
-
 /**
  * Simple debounce implementation. Will call the given
  * function once after the time given has passed since
@@ -368,25 +356,6 @@ function getNonDisabledIndex(start, backwards, items, isItemDisabled, circular)
   return -1;
 }
 
-/**
- * Checks if event target is within the downshift elements.
- *
- * @param {EventTarget} target Target to check.
- * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
- * @param {Window} environment The window context where downshift renders.
- * @param {boolean} checkActiveElement Whether to also check activeElement.
- *
- * @returns {boolean} Whether or not the target is within downshift elements.
- */
-function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
-  if (checkActiveElement === void 0) {
-    checkActiveElement = true;
-  }
-  return downshiftElements.some(function (contextNode) {
-    return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
-  });
-}
-
 // eslint-disable-next-line import/no-mutable-exports
 var validateControlledUnchanged = noop;
 /* istanbul ignore next */
@@ -409,28 +378,12 @@ var cleanupStatus = debounce(function (documentProp) {
   getStatusDiv(documentProp).textContent = '';
 }, 500);
 
-/**
- * @param {String} status the status message
- * @param {Object} documentProp document passed by the user.
- */
-function setStatus(status, documentProp) {
-  var div = getStatusDiv(documentProp);
-  if (!status) {
-    return;
-  }
-  div.textContent = status;
-  cleanupStatus(documentProp);
-}
-
 /**
  * Get the status node or create it if it does not already exist.
  * @param {Object} documentProp document passed by the user.
  * @return {HTMLElement} the status node.
  */
 function getStatusDiv(documentProp) {
-  if (documentProp === void 0) {
-    documentProp = document;
-  }
   var statusDiv = documentProp.getElementById('a11y-status-message');
   if (statusDiv) {
     return statusDiv;
@@ -454,6 +407,19 @@ function getStatusDiv(documentProp) {
   return statusDiv;
 }
 
+/**
+ * @param {String} status the status message
+ * @param {Object} documentProp document passed by the user.
+ */
+function setStatus(status, documentProp) {
+  if (!status || !documentProp) {
+    return;
+  }
+  var div = getStatusDiv(documentProp);
+  div.textContent = status;
+  cleanupStatus(documentProp);
+}
+
 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;
@@ -514,7 +480,6 @@ var Downshift = /*#__PURE__*/function () {
       _this.getItemId = _this.props.getItemId || function (index) {
         return _this.id + "-item-" + index;
       };
-      _this.input = null;
       _this.items = [];
       // itemCount can be changed asynchronously
       // from within downshift (so it can't come from a prop)
@@ -608,6 +573,7 @@ var Downshift = /*#__PURE__*/function () {
           _this.props.onInputValueChange(stateToSet.inputValue, _extends__default["default"]({}, _this.getStateAndHelpers(), stateToSet));
         }
         return _this.setState(function (state) {
+          var _newStateToSet;
           state = _this.getState(state);
           var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet;
 
@@ -626,7 +592,7 @@ var Downshift = /*#__PURE__*/function () {
           if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
             onChangeArg = newStateToSet.selectedItem;
           }
-          newStateToSet.type = newStateToSet.type || unknown;
+          (_newStateToSet = newStateToSet).type || (_newStateToSet.type = unknown);
           Object.keys(newStateToSet).forEach(function (key) {
             // onStateChangeArg should only have the state that is
             // actually changing
@@ -890,7 +856,11 @@ var Downshift = /*#__PURE__*/function () {
         var blurTarget = event.target; // Save blur target for comparison with activeElement later
         // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
         _this.internalSetTimeout(function () {
-          if (!_this.isMouseDown && (_this.props.environment.document.activeElement == null || _this.props.environment.document.activeElement.id !== _this.inputId) && _this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
+          if (_this.isMouseDown || !_this.props.environment) {
+            return;
+          }
+          var activeElement = _this.props.environment.document.activeElement;
+          if ((activeElement == null || activeElement.id !== _this.inputId) && activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
           ) {
             _this.reset({
               type: blurButton
@@ -975,8 +945,13 @@ var Downshift = /*#__PURE__*/function () {
       _this.inputHandleBlur = function () {
         // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
         _this.internalSetTimeout(function () {
-          var downshiftButtonIsActive = _this.props.environment.document && !!_this.props.environment.document.activeElement && !!_this.props.environment.document.activeElement.dataset && _this.props.environment.document.activeElement.dataset.toggle && _this._rootNode && _this._rootNode.contains(_this.props.environment.document.activeElement);
-          if (!_this.isMouseDown && !downshiftButtonIsActive) {
+          var _activeElement$datase;
+          if (_this.isMouseDown || !_this.props.environment) {
+            return;
+          }
+          var activeElement = _this.props.environment.document.activeElement;
+          var downshiftButtonIsActive = (activeElement == null || (_activeElement$datase = activeElement.dataset) == null ? void 0 : _activeElement$datase.toggle) && _this._rootNode && _this._rootNode.contains(activeElement);
+          if (!downshiftButtonIsActive) {
             _this.reset({
               type: blurInput
             });
@@ -1121,6 +1096,10 @@ var Downshift = /*#__PURE__*/function () {
         }, cb);
       };
       _this.updateStatus = debounce(function () {
+        var _this$props;
+        if (!((_this$props = _this.props) != null && (_this$props = _this$props.environment) != null && _this$props.document)) {
+          return;
+        }
         var state = _this.getState();
         var item = _this.items[state.highlightedIndex];
         var resultCount = _this.getItemCount();
@@ -1133,17 +1112,17 @@ var Downshift = /*#__PURE__*/function () {
         _this.previousResultCount = resultCount;
         setStatus(status, _this.props.environment.document);
       }, 200);
-      var _this$props = _this.props,
-        defaultHighlightedIndex = _this$props.defaultHighlightedIndex,
-        _this$props$initialHi = _this$props.initialHighlightedIndex,
-        _highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi,
-        defaultIsOpen = _this$props.defaultIsOpen,
-        _this$props$initialIs = _this$props.initialIsOpen,
-        _isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs,
-        _this$props$initialIn = _this$props.initialInputValue,
-        _inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn,
-        _this$props$initialSe = _this$props.initialSelectedItem,
-        _selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe;
+      var _this$props2 = _this.props,
+        defaultHighlightedIndex = _this$props2.defaultHighlightedIndex,
+        _this$props2$initialH = _this$props2.initialHighlightedIndex,
+        _highlightedIndex = _this$props2$initialH === void 0 ? defaultHighlightedIndex : _this$props2$initialH,
+        defaultIsOpen = _this$props2.defaultIsOpen,
+        _this$props2$initialI = _this$props2.initialIsOpen,
+        _isOpen = _this$props2$initialI === void 0 ? defaultIsOpen : _this$props2$initialI,
+        _this$props2$initialI2 = _this$props2.initialInputValue,
+        _inputValue = _this$props2$initialI2 === void 0 ? '' : _this$props2$initialI2,
+        _this$props2$initialS = _this$props2.initialSelectedItem,
+        _selectedItem = _this$props2$initialS === void 0 ? null : _this$props2$initialS;
       var _state = _this.getState({
         highlightedIndex: _highlightedIndex,
         isOpen: _isOpen,
@@ -1196,7 +1175,7 @@ var Downshift = /*#__PURE__*/function () {
       return itemCount;
     };
     _proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
-      return this.props.environment.document.getElementById(this.getItemId(index));
+      return this.props.environment ? this.props.environment.document.getElementById(this.getItemId(index)) : null;
     };
     _proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
     };
@@ -1278,7 +1257,7 @@ var Downshift = /*#__PURE__*/function () {
         validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
       }
 
-      /* istanbul ignore if (react-native) */
+      /* istanbul ignore if (react-native or SSR) */
       {
         this.cleanup = function () {
           _this4.internalClearTimeouts();
@@ -1384,7 +1363,7 @@ var Downshift = /*#__PURE__*/function () {
       return prevItem !== item;
     },
     environment: /* istanbul ignore next (ssr) */
-    typeof window === 'undefined' ? {} : window,
+    typeof window === 'undefined' ? undefined : window,
     stateReducer: function stateReducer(state, stateToSet) {
       return stateToSet;
     },
@@ -1668,7 +1647,7 @@ var defaultProps$3 = {
   getA11ySelectionMessage: getA11ySelectionMessage,
   scrollIntoView: scrollIntoView,
   environment: /* istanbul ignore next (ssr) */
-  typeof window === 'undefined' ? {} : window
+  typeof window === 'undefined' ? undefined : window
 };
 function getDefaultValue$1(props, propKey, defaultStateValues) {
   if (defaultStateValues === void 0) {
@@ -1747,50 +1726,9 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   React.useEffect(function () {
-    if ((environment == null ? void 0 : environment.addEventListener) == null) {
+    {
       return;
     }
-
-    // The same strategy for checking if a click occurred inside or outside downshift
-    // as in downshift.js.
-    var onMouseDown = function onMouseDown() {
-      mouseAndTouchTrackersRef.current.isMouseDown = true;
-    };
-    var onMouseUp = function onMouseUp(event) {
-      mouseAndTouchTrackersRef.current.isMouseDown = false;
-      if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-        return ref.current;
-      }), environment)) {
-        handleBlur();
-      }
-    };
-    var onTouchStart = function onTouchStart() {
-      mouseAndTouchTrackersRef.current.isTouchMove = false;
-    };
-    var onTouchMove = function onTouchMove() {
-      mouseAndTouchTrackersRef.current.isTouchMove = true;
-    };
-    var onTouchEnd = function onTouchEnd(event) {
-      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-        return ref.current;
-      }), environment, false)) {
-        handleBlur();
-      }
-    };
-    environment.addEventListener('mousedown', onMouseDown);
-    environment.addEventListener('mouseup', onMouseUp);
-    environment.addEventListener('touchstart', onTouchStart);
-    environment.addEventListener('touchmove', onTouchMove);
-    environment.addEventListener('touchend', onTouchEnd);
-
-    // eslint-disable-next-line consistent-return
-    return function cleanup() {
-      environment.removeEventListener('mousedown', onMouseDown);
-      environment.removeEventListener('mouseup', onMouseUp);
-      environment.removeEventListener('touchstart', onTouchStart);
-      environment.removeEventListener('touchmove', onTouchMove);
-      environment.removeEventListener('touchend', onTouchEnd);
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, environment]);
   return mouseAndTouchTrackersRef;
@@ -1856,7 +1794,7 @@ function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref3) {
     rest = _objectWithoutPropertiesLoose__default["default"](_ref3, _excluded$3);
   // Sets a11y status message on changes in state.
   React.useEffect(function () {
-    if (isInitialMount || true) {
+    if (isInitialMount || true || !(environment != null && environment.document)) {
       return;
     }
     updateA11yStatus(function () {
@@ -2053,7 +1991,6 @@ function getItemIndexByCharacterKey(_a) {
     }
     return highlightedIndex;
 }
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 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.
@@ -2244,7 +2181,7 @@ function downshiftSelectReducer(state, action) {
 }
 /* eslint-enable complexity */
 
-var _excluded$2 = ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"],
+var _excluded$2 = ["onMouseLeave", "refKey", "ref"],
   _excluded2$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
   _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "onPress", "refKey", "disabled", "ref"];
 useSelect.stateChangeTypes = stateChangeTypes$2;
@@ -2363,11 +2300,7 @@ function useSelect(userProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
-    dispatch({
-      type: ToggleButtonBlur
-    });
-  });
+  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Make initial ref false.
   React.useEffect(function () {
@@ -2515,10 +2448,8 @@ function useSelect(userProps) {
     var _ref = _temp === void 0 ? {} : _temp,
       onMouseLeave = _ref.onMouseLeave,
       _ref$refKey = _ref.refKey,
-      refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey;
-      _ref.onKeyDown;
-      _ref.onBlur;
-      var ref = _ref.ref,
+      refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
+      ref = _ref.ref,
       rest = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
     var _ref2 = _temp2 === void 0 ? {} : _temp2,
       _ref2$suppressRefErro = _ref2.suppressRefError,
@@ -2984,12 +2915,7 @@ function useCombobox(userProps) {
     previousResultCountRef.current = items.length;
   });
   // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
-    dispatch({
-      type: InputBlur,
-      selectItem: false
-    });
-  });
+  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment);
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Make initial ref false.
   React.useEffect(function () {
@@ -3000,12 +2926,18 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   React.useEffect(function () {
-    var _environment$document;
     if (!isOpen) {
       itemRefs.current = {};
-    } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) {
-      var _inputRef$current;
-      inputRef == null || (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+    }
+  }, [isOpen]);
+  // Reset itemRefs on close.
+  React.useEffect(function () {
+    var _inputRef$current;
+    if (!isOpen || !(environment != null && environment.document) || !(inputRef != null && (_inputRef$current = inputRef.current) != null && _inputRef$current.focus)) {
+      return;
+    }
+    if (environment.document.activeElement !== inputRef.current) {
+      inputRef.current.focus();
     }
   }, [isOpen, environment]);
 
@@ -3219,7 +3151,7 @@ function useCombobox(userProps) {
     };
     var inputHandleBlur = function inputHandleBlur(event) {
       /* istanbul ignore else */
-      if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
         var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body;
         dispatch({
           type: InputBlur,
@@ -3610,7 +3542,7 @@ function useMultipleSelection(userProps) {
   // Effects.
   /* Sets a11y status message on changes in selectedItem. */
   React.useEffect(function () {
-    if (isInitialMountRef.current || true) {
+    if (isInitialMountRef.current || true || !(environment != null && environment.document)) {
       return;
     }
     if (selectedItems.length < previousSelectedItemsRef.current.length) {