downshift 8.1.1 → 8.2.0

package/preact/dist/downshift.esm.js

@@ -2,9 +2,9 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWith
 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 React, { cloneElement, Component, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact';
+import React, { cloneElement, Component, useRef, useEffect, useCallback, useLayoutEffect, useReducer, useMemo } from 'preact/compat';
 import { isForwardRef } from 'react-is';
-import compute from 'compute-scroll-into-view';
+import { compute } from 'compute-scroll-into-view';
 import PropTypes from 'prop-types';
 import { __assign } from 'tslib';
 
@@ -375,7 +375,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));
   });
 }
@@ -402,28 +402,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;
@@ -447,6 +431,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;
@@ -507,7 +504,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)
@@ -601,6 +597,7 @@ var Downshift = /*#__PURE__*/function () {
           _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), stateToSet));
         }
         return _this.setState(function (state) {
+          var _newStateToSet;
           state = _this.getState(state);
           var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet;
 
@@ -619,7 +616,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
@@ -868,8 +865,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
@@ -891,7 +893,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
@@ -961,8 +967,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
             });
@@ -1107,6 +1118,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();
@@ -1119,17 +1134,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,
@@ -1182,7 +1197,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) */
@@ -1269,8 +1284,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)
@@ -1439,7 +1458,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;
     },
@@ -1680,7 +1699,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) {
@@ -1759,7 +1778,7 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   useEffect(function () {
-    if ((environment == null ? void 0 : environment.addEventListener) == null) {
+    if (!environment) {
       return;
     }
 
@@ -1868,7 +1887,7 @@ function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref3) {
     rest = _objectWithoutPropertiesLoose(_ref3, _excluded$3);
   // Sets a11y status message on changes in state.
   useEffect(function () {
-    if (isInitialMount || false) {
+    if (isInitialMount || false || !(environment != null && environment.document)) {
       return;
     }
     updateA11yStatus(function () {
@@ -2065,7 +2084,6 @@ function getItemIndexByCharacterKey(_a) {
     }
     return highlightedIndex;
 }
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 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.
@@ -2256,7 +2274,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;
@@ -2527,10 +2545,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(_ref, _excluded$2);
     var _ref2 = _temp2 === void 0 ? {} : _temp2,
       _ref2$suppressRefErro = _ref2.suppressRefError,
@@ -3024,12 +3040,18 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   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.
+  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]);
 
@@ -3243,7 +3265,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,
@@ -3622,7 +3644,7 @@ function useMultipleSelection(userProps) {
   // Effects.
   /* Sets a11y status message on changes in selectedItem. */
   useEffect(function () {
-    if (isInitialMountRef.current || false) {
+    if (isInitialMountRef.current || false || !(environment != null && environment.document)) {
       return;
     }
     if (selectedItems.length < previousSelectedItemsRef.current.length) {