downshift 8.1.0 → 8.2.0

package/dist/src/hooks/useSelect/utils.d.ts

@@ -17,7 +17,7 @@ export declare const defaultProps: {
     stateReducer: (s: Object, a: Object) => Object;
     getA11ySelectionMessage: (selectionParameters: Object) => string;
     scrollIntoView: typeof import("../../utils").scrollIntoView;
-    environment: {};
+    environment: (Window & typeof globalThis) | undefined;
 };
 export declare let validatePropTypes: (options: unknown, caller: Function) => void;
 export {};

package/dist/src/hooks/utils.d.ts

@@ -49,7 +49,7 @@ export namespace defaultProps {
     export { stateReducer };
     export { getA11ySelectionMessage };
     export { scrollIntoView };
-    export const environment: {};
+    export const environment: (Window & typeof globalThis) | undefined;
 }
 /**
  * Wraps the useEnhancedReducer and applies the controlled prop values before

package/dist/src/set-a11y-status.d.ts

@@ -1,6 +1,5 @@
-export default setStatus;
 /**
  * @param {String} status the status message
  * @param {Object} documentProp document passed by the user.
  */
-declare function setStatus(status: string, documentProp: Object): void;
+export default function setStatus(status: string, documentProp: Object): void;

package/dist/test/setup.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.",
   "main": "dist/downshift.cjs.js",
   "react-native": "dist/downshift.native.cjs.js",
@@ -34,7 +34,7 @@
     "docs:serve": "docusaurus serve --port 6006",
     "docs:clear": "docusaurus clear",
     "setup": "npm install && npm run validate",
-    "validate": "kcd-scripts validate lint,build-and-test,test:cover,test:ts,test:flow:coverage,test:ssr,test:cypress"
+    "validate": "kcd-scripts validate lint,build-and-test,test:cover,test:ts,test:ssr,test:cypress"
   },
   "husky": {
     "hooks": {
@@ -68,62 +68,66 @@
     "react": ">=16.12.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.14.8",
-    "compute-scroll-into-view": "^2.0.4",
-    "prop-types": "^15.7.2",
-    "react-is": "^17.0.2",
-    "tslib": "^2.3.0"
+    "@babel/runtime": "^7.22.15",
+    "compute-scroll-into-view": "^3.0.3",
+    "prop-types": "^15.8.1",
+    "react-is": "^18.2.0",
+    "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@babel/helpers": "^7.14.8",
+    "@babel/helpers": "^7.22.15",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@cypress/webpack-preprocessor": "^5.14.0",
-    "@docusaurus/core": "^2.0.1",
-    "@docusaurus/module-type-aliases": "^2.0.1",
-    "@docusaurus/preset-classic": "^2.0.1",
-    "@mdx-js/react": "^1.6.22",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@testing-library/cypress": "^8.0.0",
-    "@testing-library/dom": "^8.1.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@cypress/webpack-preprocessor": "^6.0.0",
+    "@docusaurus/core": "3.0.0-alpha.0",
+    "@docusaurus/module-type-aliases": "3.0.0-alpha.0",
+    "@docusaurus/preset-classic": "3.0.0-alpha.0",
+    "@mdx-js/react": "^2.3.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-typescript": "^11.1.3",
+    "@testing-library/cypress": "^10.0.1",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/preact": "^2.0.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^26.0.24",
-    "@types/react": "^17.0.15",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
+    "@types/jest": "^29.5.4",
+    "@types/react": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-no-side-effect-class-properties": "0.0.7",
     "babel-preset-react-native": "^4.0.1",
     "buble": "^0.20.0",
-    "cpy-cli": "^3.1.1",
+    "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
-    "cypress": "10.8.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-cypress": "^2.11.3",
-    "eslint-plugin-react": "7.24.0",
-    "flow-bin": "^0.156.0",
+    "cypress": "13.2.0",
+    "eslint": "^8.49.0",
+    "eslint-plugin-cypress": "^2.14.0",
+    "eslint-plugin-react": "7.33.2",
+    "flow-bin": "^0.216.1",
     "flow-coverage-report": "^0.8.0",
-    "get-pkg-repo": "4.1.1",
-    "kcd-scripts": "^11.2.0",
-    "node-polyfill-webpack-plugin": "^2.0.0",
+    "get-pkg-repo": "5.0.0",
+    "kcd-scripts": "^14.0.0",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "npm-run-all": "^4.1.5",
-    "preact": "^10.5.14",
-    "prism-react-renderer": "^1.3.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-native": "^0.68.0",
-    "react-test-renderer": "^17.0.2",
-    "serve": "^12.0.0",
-    "start-server-and-test": "^1.13.1",
-    "typescript": "^4.3.5"
+    "preact": "^10.17.1",
+    "prism-react-renderer": "^2.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "^0.72.4",
+    "react-test-renderer": "^18.2.0",
+    "serve": "^14.2.1",
+    "start-server-and-test": "^2.0.0",
+    "typescript": "^5.2.2"
   },
   "eslintConfig": {
+    "parserOptions": {
+      "ecmaVersion": 2023,
+      "project": "./tsconfig.json",
+      "sourceType": "module"
+    },
     "settings": {
       "import/no-unresolved": [
         2,

package/preact/dist/downshift.cjs.js

@@ -6,9 +6,9 @@ var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithou
 var _extends = require('@babel/runtime/helpers/extends');
 var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
 var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
-var React = require('preact');
+var React = require('preact/compat');
 var reactIs = require('react-is');
-var compute = require('compute-scroll-into-view');
+var computeScrollIntoView = require('compute-scroll-into-view');
 var PropTypes = require('prop-types');
 var tslib = require('tslib');
 
@@ -19,7 +19,6 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
 var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var compute__default = /*#__PURE__*/_interopDefaultLegacy(compute);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 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'
@@ -389,7 +388,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));
   });
 }
@@ -416,28 +415,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;
@@ -461,6 +444,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;
@@ -521,7 +517,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)
@@ -615,6 +610,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;
 
@@ -633,7 +629,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
@@ -882,8 +878,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
@@ -905,7 +906,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 +980,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 +1131,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 +1147,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 +1210,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) */
@@ -1283,8 +1297,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)
@@ -1453,7 +1471,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;
     },
@@ -1694,7 +1712,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) {
@@ -1773,7 +1791,7 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   React.useEffect(function () {
-    if ((environment == null ? void 0 : environment.addEventListener) == null) {
+    if (!environment) {
       return;
     }
 
@@ -1882,7 +1900,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 () {
@@ -2079,7 +2097,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.
@@ -2270,7 +2287,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;
@@ -2541,10 +2558,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,
@@ -3038,12 +3053,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]);
 
@@ -3257,7 +3278,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,
@@ -3636,7 +3657,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) {