downshift 8.1.1 → 8.2.1

package/dist/downshift.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'
@@ -382,7 +381,7 @@ function targetWithinDownshift(target, downshiftElements, environment, checkActi
   if (checkActiveElement === void 0) {
     checkActiveElement = true;
   }
-  return downshiftElements.some(function (contextNode) {
+  return environment && downshiftElements.some(function (contextNode) {
     return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
   });
 }
@@ -409,28 +408,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 +437,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 +510,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 +603,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 +622,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
@@ -875,8 +871,13 @@ var Downshift = /*#__PURE__*/function () {
         // handle odd case for Safari and Firefox which
         // don't give the button the focus properly.
         /* istanbul ignore if (can't reasonably test this) */
-        if (_this.props.environment.document.activeElement === _this.props.environment.document.body) {
-          event.target.focus();
+        if (_this.props.environment) {
+          var _this$props$environme = _this.props.environment.document,
+            body = _this$props$environme.body,
+            activeElement = _this$props$environme.activeElement;
+          if (body && body === activeElement) {
+            event.target.focus();
+          }
         }
         // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
         // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
@@ -898,7 +899,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
@@ -968,8 +973,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
             });
@@ -1114,6 +1124,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();
@@ -1126,17 +1140,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,
@@ -1189,7 +1203,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() {
       /* istanbul ignore else (react-native) */
@@ -1276,8 +1290,12 @@ var Downshift = /*#__PURE__*/function () {
         validateGetMenuPropsCalledCorrectly(this._menuNode, this.getMenuProps);
       }
 
-      /* istanbul ignore if (react-native) */
-      {
+      /* istanbul ignore if (react-native or SSR) */
+      if (!this.props.environment) {
+        this.cleanup = function () {
+          _this4.internalClearTimeouts();
+        };
+      } else {
         // this.isMouseDown helps us track whether the mouse is currently held down.
         // This is useful when the user clicks on an item in the list, but holds the mouse
         // down long enough for the list to disappear (because the blur event fires on the input)
@@ -1446,7 +1464,7 @@ var Downshift = /*#__PURE__*/function () {
       return prevItem !== item;
     },
     environment: /* istanbul ignore next (ssr) */
-    typeof window === 'undefined' ? {} : window,
+    typeof window === 'undefined' || false ? undefined : window,
     stateReducer: function stateReducer(state, stateToSet) {
       return stateToSet;
     },
@@ -1733,7 +1751,7 @@ var defaultProps$3 = {
   getA11ySelectionMessage: getA11ySelectionMessage,
   scrollIntoView: scrollIntoView,
   environment: /* istanbul ignore next (ssr) */
-  typeof window === 'undefined' ? {} : window
+  typeof window === 'undefined' || false ? undefined : window
 };
 function getDefaultValue$1(props, propKey, defaultStateValues) {
   if (defaultStateValues === void 0) {
@@ -1812,7 +1830,7 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   React.useEffect(function () {
-    if ((environment == null ? void 0 : environment.addEventListener) == null) {
+    if (!environment) {
       return;
     }
 
@@ -1921,7 +1939,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 || false) {
+    if (isInitialMount || false || !(environment != null && environment.document)) {
       return;
     }
     updateA11yStatus(function () {
@@ -2118,7 +2136,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.
@@ -2309,9 +2326,9 @@ 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"];
+  _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "onMouseDown", "onPress", "refKey", "disabled", "ref"];
 useSelect.stateChangeTypes = stateChangeTypes$2;
 function useSelect(userProps) {
   if (userProps === void 0) {
@@ -2580,10 +2597,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,
@@ -2655,7 +2670,8 @@ function useSelect(userProps) {
       itemProp = _ref5.item,
       indexProp = _ref5.index,
       onMouseMove = _ref5.onMouseMove,
-      onClick = _ref5.onClick;
+      onClick = _ref5.onClick,
+      onMouseDown = _ref5.onMouseDown;
       _ref5.onPress;
       var _ref5$refKey = _ref5.refKey,
       refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
@@ -2689,6 +2705,10 @@ function useSelect(userProps) {
         index: index
       });
     };
+    var itemHandleMouseDown = function itemHandleMouseDown(e) {
+      return e.preventDefault();
+    }; // keep focus on the toggle after item click select.
+
     var itemProps = _extends__default["default"]((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
         itemRefs.current[elementIds.getItemId(index)] = itemNode;
@@ -2701,6 +2721,7 @@ function useSelect(userProps) {
       }
     }
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
+    itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown);
     return itemProps;
   }, [latest, elementIds, shouldScrollRef, dispatch]);
   return {
@@ -3077,12 +3098,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 || _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]);
 
@@ -3233,7 +3260,8 @@ function useCombobox(userProps) {
     };
     var itemHandleMouseDown = function itemHandleMouseDown(e) {
       return e.preventDefault();
-    };
+    }; // keep focus on the input after item click select.
+
     return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
         itemRefs.current[elementIds.getItemId(index)] = itemNode;
@@ -3296,7 +3324,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,
@@ -3675,7 +3703,7 @@ function useMultipleSelection(userProps) {
   // Effects.
   /* Sets a11y status message on changes in selectedItem. */
   React.useEffect(function () {
-    if (isInitialMountRef.current || false) {
+    if (isInitialMountRef.current || false || !(environment != null && environment.document)) {
       return;
     }
     if (selectedItems.length < previousSelectedItemsRef.current.length) {