focus-trap-react 8.11.0 → 8.11.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 8.11.3
+
+### Patch Changes
+
+- 9947461: Bump focus-trap dependency to v6.9.4 to get typings fix.
+- 519e5a5: Fix setReturnFocus option as function not being passed node focused prior to activation.
+
+## 8.11.2
+
+### Patch Changes
+
+- 7547d93: Bumps focus-trap to v6.9.3 to pick-up some small bug fixes from underlying tabbable.
+
+## 8.11.1
+
+### Patch Changes
+
+- 040813a: Bumps focus-trap to v6.9.1 to pick-up a fix to tabbable in v5.3.2 regarding the `displayCheck=full` (default) option behavior that caused issues with detached nodes.
+
 ## 8.11.0
 
 ### Minor Changes

package/dist/focus-trap-react.js

@@ -10,7 +10,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -20,7 +20,9 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var React = require('react');
 
@@ -50,6 +52,49 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, FocusTrap);
 
     _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "getNodeForOption", function (optionName) {
+      var _this$internalOptions;
+
+      // use internal options first, falling back to original options
+      var optionValue = (_this$internalOptions = this.internalOptions[optionName]) !== null && _this$internalOptions !== void 0 ? _this$internalOptions : this.originalOptions[optionName];
+
+      if (typeof optionValue === 'function') {
+        for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          params[_key - 1] = arguments[_key];
+        }
+
+        optionValue = optionValue.apply(void 0, params);
+      }
+
+      if (optionValue === true) {
+        optionValue = undefined; // use default value
+      }
+
+      if (!optionValue) {
+        if (optionValue === undefined || optionValue === false) {
+          return optionValue;
+        } // else, empty string (invalid), null (invalid), 0 (invalid)
+
+
+        throw new Error("`".concat(optionName, "` was specified but was not a node, or did not return a node"));
+      }
+
+      var node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point
+
+      if (typeof optionValue === 'string') {
+        var _this$getDocument;
+
+        node = (_this$getDocument = this.getDocument()) === null || _this$getDocument === void 0 ? void 0 : _this$getDocument.querySelector(optionValue); // resolve to node, or null if fails
+
+        if (!node) {
+          throw new Error("`".concat(optionName, "` as selector refers to no known node"));
+        }
+      }
+
+      return node;
+    });
+
     _this.handleDeactivate = _this.handleDeactivate.bind(_assertThisInitialized(_this));
     _this.handlePostDeactivate = _this.handlePostDeactivate.bind(_assertThisInitialized(_this));
     _this.handleClickOutsideDeactivates = _this.handleClickOutsideDeactivates.bind(_assertThisInitialized(_this)); // focus-trap options used internally when creating the trap
@@ -74,10 +119,10 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     }; // original options provided by the consumer
 
     _this.originalOptions = {
-      // because of the above `tailoredFocusTrapOptions`, we maintain our own flag for
+      // because of the above `internalOptions`, we maintain our own flag for
       //  this option, and default it to `true` because that's focus-trap's default
       returnFocusOnDeactivate: true,
-      // because of the above `tailoredFocusTrapOptions`, we keep these separate since
+      // because of the above `internalOptions`, we keep these separate since
       //  they're part of the deactivation process which we configure (internally) to
       //  be shared between focus-trap and focus-trap-react
       onDeactivate: null,
@@ -95,7 +140,7 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
 
       if (optionName === 'returnFocusOnDeactivate' || optionName === 'onDeactivate' || optionName === 'onPostDeactivate' || optionName === 'checkCanReturnFocus' || optionName === 'clickOutsideDeactivates') {
         _this.originalOptions[optionName] = focusTrapOptions[optionName];
-        continue; // exclude from tailoredFocusTrapOptions
+        continue; // exclude from internalOptions
       }
 
       _this.internalOptions[optionName] = focusTrapOptions[optionName];
@@ -128,44 +173,26 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     value: function getDocument() {
       // SSR: careful to check if `document` exists before accessing it as a variable
       return this.props.focusTrapOptions.document || (typeof document !== 'undefined' ? document : undefined);
-    } // TODO: Need more test coverage for this function
-
-  }, {
-    key: "getNodeForOption",
-    value: function getNodeForOption(optionName) {
-      var optionValue = this.internalOptions[optionName];
-
-      if (!optionValue) {
-        return null;
-      }
-
-      var node = optionValue;
-
-      if (typeof optionValue === 'string') {
-        var _this$getDocument;
-
-        node = (_this$getDocument = this.getDocument()) === null || _this$getDocument === void 0 ? void 0 : _this$getDocument.querySelector(optionValue);
-
-        if (!node) {
-          throw new Error("`".concat(optionName, "` refers to no known node"));
-        }
-      }
-
-      if (typeof optionValue === 'function') {
-        node = optionValue();
-
-        if (!node) {
-          throw new Error("`".concat(optionName, "` did not return a node"));
-        }
-      }
-
-      return node;
     }
+    /**
+     * Gets the node for the given option, which is expected to be an option that
+     *  can be either a DOM node, a string that is a selector to get a node, `false`
+     *  (if a node is explicitly NOT given), or a function that returns any of these
+     *  values.
+     * @param {string} optionName
+     * @returns {undefined | false | HTMLElement | SVGElement} Returns
+     *  `undefined` if the option is not specified; `false` if the option
+     *  resolved to `false` (node explicitly not given); otherwise, the resolved
+     *  DOM node.
+     * @throws {Error} If the option is set, not `false`, and is not, or does not
+     *  resolve to a node.
+     */
+
   }, {
     key: "getReturnFocusNode",
     value: function getReturnFocusNode() {
-      var node = this.getNodeForOption('setReturnFocus');
-      return node ? node : this.previouslyFocusedElement;
+      var node = this.getNodeForOption('setReturnFocus', this.previouslyFocusedElement);
+      return node ? node : node === false ? false : this.previouslyFocusedElement;
     }
     /** Update the previously focused element with the currently focused element. */
 
@@ -417,12 +444,13 @@ FocusTrap.propTypes = {
     onDeactivate: PropTypes.func,
     onPostDeactivate: PropTypes.func,
     checkCanReturnFocus: PropTypes.func,
-    initialFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.func, PropTypes.bool]),
-    fallbackFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.func]),
+    initialFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.bool, PropTypes.func]),
+    fallbackFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, // NOTE: does not support `false` as value (or return value from function)
+    PropTypes.func]),
     escapeDeactivates: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     clickOutsideDeactivates: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     returnFocusOnDeactivate: PropTypes.bool,
-    setReturnFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.func]),
+    setReturnFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.bool, PropTypes.func]),
     allowOutsideClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     preventScroll: PropTypes.bool,
     tabbableOptions: PropTypes.shape({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "8.11.0",
+  "version": "8.11.3",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -57,43 +57,45 @@
   },
   "homepage": "https://github.com/focus-trap/focus-trap-react#readme",
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.9",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.5",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.2",
+    "@babel/eslint-parser": "^7.18.2",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
     "@changesets/cli": "^2.22.0",
-    "@testing-library/cypress": "^8.0.2",
+    "@testing-library/cypress": "^8.0.3",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/user-event": "^14.1.1",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.0",
     "@types/jquery": "^3.5.14",
     "all-contributors-cli": "^6.20.0",
-    "babel-jest": "^28.0.2",
+    "babel-jest": "^28.1.1",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "budo": "^11.7.0",
-    "cypress": "^9.6.0",
+    "cypress": "^9.7.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.14.0",
+    "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-react": "^7.29.4",
-    "jest": "^27.5.1",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-react": "^7.30.0",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
     "jest-watch-typeahead": "^1.1.0",
     "onchange": "^7.1.0",
     "prettier": "^2.6.2",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.1.0",
     "regenerator-runtime": "^0.13.9",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.6.3"
+    "typescript": "^4.7.3"
   },
   "dependencies": {
-    "focus-trap": "^6.9.0"
+    "focus-trap": "^6.9.4"
   },
   "peerDependencies": {
     "prop-types": "^15.8.1",

package/src/focus-trap-react.js

@@ -42,11 +42,11 @@ class FocusTrap extends React.Component {
 
     // original options provided by the consumer
     this.originalOptions = {
-      // because of the above `tailoredFocusTrapOptions`, we maintain our own flag for
+      // because of the above `internalOptions`, we maintain our own flag for
       //  this option, and default it to `true` because that's focus-trap's default
       returnFocusOnDeactivate: true,
 
-      // because of the above `tailoredFocusTrapOptions`, we keep these separate since
+      // because of the above `internalOptions`, we keep these separate since
       //  they're part of the deactivation process which we configure (internally) to
       //  be shared between focus-trap and focus-trap-react
       onDeactivate: null,
@@ -71,7 +71,7 @@ class FocusTrap extends React.Component {
         optionName === 'clickOutsideDeactivates'
       ) {
         this.originalOptions[optionName] = focusTrapOptions[optionName];
-        continue; // exclude from tailoredFocusTrapOptions
+        continue; // exclude from internalOptions
       }
 
       this.internalOptions[optionName] = focusTrapOptions[optionName];
@@ -106,36 +106,63 @@ class FocusTrap extends React.Component {
     );
   }
 
-  // TODO: Need more test coverage for this function
-  getNodeForOption(optionName) {
-    const optionValue = this.internalOptions[optionName];
-    if (!optionValue) {
-      return null;
+  /**
+   * Gets the node for the given option, which is expected to be an option that
+   *  can be either a DOM node, a string that is a selector to get a node, `false`
+   *  (if a node is explicitly NOT given), or a function that returns any of these
+   *  values.
+   * @param {string} optionName
+   * @returns {undefined | false | HTMLElement | SVGElement} Returns
+   *  `undefined` if the option is not specified; `false` if the option
+   *  resolved to `false` (node explicitly not given); otherwise, the resolved
+   *  DOM node.
+   * @throws {Error} If the option is set, not `false`, and is not, or does not
+   *  resolve to a node.
+   */
+  getNodeForOption = function (optionName, ...params) {
+    // use internal options first, falling back to original options
+    let optionValue =
+      this.internalOptions[optionName] ?? this.originalOptions[optionName];
+
+    if (typeof optionValue === 'function') {
+      optionValue = optionValue(...params);
     }
 
-    let node = optionValue;
+    if (optionValue === true) {
+      optionValue = undefined; // use default value
+    }
 
-    if (typeof optionValue === 'string') {
-      node = this.getDocument()?.querySelector(optionValue);
-      if (!node) {
-        throw new Error(`\`${optionName}\` refers to no known node`);
+    if (!optionValue) {
+      if (optionValue === undefined || optionValue === false) {
+        return optionValue;
       }
+      // else, empty string (invalid), null (invalid), 0 (invalid)
+
+      throw new Error(
+        `\`${optionName}\` was specified but was not a node, or did not return a node`
+      );
     }
 
-    if (typeof optionValue === 'function') {
-      node = optionValue();
+    let node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point
+
+    if (typeof optionValue === 'string') {
+      node = this.getDocument()?.querySelector(optionValue); // resolve to node, or null if fails
       if (!node) {
-        throw new Error(`\`${optionName}\` did not return a node`);
+        throw new Error(
+          `\`${optionName}\` as selector refers to no known node`
+        );
       }
     }
 
     return node;
-  }
+  };
 
   getReturnFocusNode() {
-    const node = this.getNodeForOption('setReturnFocus');
-
-    return node ? node : this.previouslyFocusedElement;
+    const node = this.getNodeForOption(
+      'setReturnFocus',
+      this.previouslyFocusedElement
+    );
+    return node ? node : node === false ? false : this.previouslyFocusedElement;
   }
 
   /** Update the previously focused element with the currently focused element. */
@@ -395,12 +422,13 @@ FocusTrap.propTypes = {
     initialFocus: PropTypes.oneOfType([
       PropTypes.instanceOf(ElementType),
       PropTypes.string,
-      PropTypes.func,
       PropTypes.bool,
+      PropTypes.func,
     ]),
     fallbackFocus: PropTypes.oneOfType([
       PropTypes.instanceOf(ElementType),
       PropTypes.string,
+      // NOTE: does not support `false` as value (or return value from function)
       PropTypes.func,
     ]),
     escapeDeactivates: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
@@ -412,6 +440,7 @@ FocusTrap.propTypes = {
     setReturnFocus: PropTypes.oneOfType([
       PropTypes.instanceOf(ElementType),
       PropTypes.string,
+      PropTypes.bool,
       PropTypes.func,
     ]),
     allowOutsideClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),