focus-trap-react 8.8.0 → 8.9.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 8.9.1
+
+### Patch Changes
+
+- 3eb9421: Bump focus-trap to v6.7.2 for bug fix.
+
+## 8.9.0
+
+### Minor Changes
+
+- 83097a5: Delay trap creation until it should be active. This is a change in behavior, however it should not break existing behavior. The delay now allows you to set `active=false` until you have the `focusTrapOptions` set correctly. [#539](https://github.com/focus-trap/focus-trap-react/issues/539)
+
+### Patch Changes
+
+- 16d1ae1: Fix bug where global document was being accessed instead of first checking for `focusTrapOptions.document` option. [#539](https://github.com/focus-trap/focus-trap-react/issues/539)
+
+## 8.8.2
+
+### Patch Changes
+
+- 08a9449: Use `preventScroll` option on deactivation if returning focus.
+
+## 8.8.1
+
+### Patch Changes
+
+- a2806a0: Fix SSR issues when accessing `document` object (#482)
+
 ## 8.8.0
 
 ### Minor Changes

package/README.md

@@ -1,7 +1,7 @@
 # focus-trap-react [![CI](https://github.com/focus-trap/focus-trap-react/workflows/CI/badge.svg?branch=master&event=push)](https://github.com/focus-trap/focus-trap-react/actions?query=workflow:CI+branch:master) [![Codecov](https://img.shields.io/codecov/c/github/focus-trap/focus-trap-react)](https://codecov.io/gh/focus-trap/focus-trap-react) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-19-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 A React component that traps focus.
@@ -191,21 +191,26 @@ In alphabetical order:
     <td align="center"><a href="https://github.com/features/security"><img src="https://avatars1.githubusercontent.com/u/27347476?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dependabot</b></sub></a><br /><a href="#maintenance-dependabot" title="Maintenance">🚧</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://github.com/jhnns"><img src="https://avatars.githubusercontent.com/u/781746?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Johannes Ewald</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=jhnns" title="Code">💻</a></td>
     <td align="center"><a href="http://josuzuki.me"><img src="https://avatars1.githubusercontent.com/u/9583920?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jonathan Suzuki</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3AJoSuzuki" title="Bug reports">🐛</a></td>
     <td align="center"><a href="http://kathleenmcmahon.dev/"><img src="https://avatars1.githubusercontent.com/u/11621935?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kathleen McMahon</b></sub></a><br /><a href="#maintenance-resource11" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="https://github.com/LoganDark"><img src="https://avatars.githubusercontent.com/u/4723091?v=4?s=100" width="100px;" alt=""/><br /><sub><b>LoganDark</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3ALoganDark" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://marais.io/"><img src="https://avatars2.githubusercontent.com/u/599459?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Marais Rossouw</b></sub></a><br /><a href="#infra-maraisr" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
     <td align="center"><a href="https://github.com/liunate"><img src="https://avatars2.githubusercontent.com/u/38996291?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nate Liu</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=liunate" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://www.linkedin.com/in/rivajunior/"><img src="https://avatars1.githubusercontent.com/u/11370172?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rivaldo Junior</b></sub></a><br /><a href="#maintenance-rivajunior" title="Maintenance">🚧</a></td>
-    <td align="center"><a href="https://scottrippey.github.io/"><img src="https://avatars3.githubusercontent.com/u/430608?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Scott Rippey</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=scottrippey" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Ascottrippey" title="Bug reports">🐛</a></td>
-    <td align="center"><a href="https://seanmcp.com/"><img src="https://avatars1.githubusercontent.com/u/6360367?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sean McPherson</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=SeanMcP" title="Code">💻</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://scottrippey.github.io/"><img src="https://avatars3.githubusercontent.com/u/430608?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Scott Rippey</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=scottrippey" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Ascottrippey" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://seanmcp.com/"><img src="https://avatars1.githubusercontent.com/u/6360367?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sean McPherson</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=SeanMcP" title="Code">💻</a></td>
     <td align="center"><a href="https://recollectr.io"><img src="https://avatars2.githubusercontent.com/u/6835891?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Slapbox</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=Slapbox" title="Documentation">📖</a></td>
     <td align="center"><a href="https://stefancameron.com/"><img src="https://avatars3.githubusercontent.com/u/2855350?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Stefan Cameron</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Astefcameron" title="Bug reports">🐛</a> <a href="#infra-stefcameron" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron" title="Documentation">📖</a> <a href="#maintenance-stefcameron" title="Maintenance">🚧</a></td>
     <td align="center"><a href="http://tylerhawkins.info/201R/"><img src="https://avatars0.githubusercontent.com/u/13806458?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tyler Hawkins</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=thawkin3" title="Documentation">📖</a> <a href="#example-thawkin3" title="Examples">💡</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=thawkin3" title="Tests">⚠️</a> <a href="#tool-thawkin3" title="Tools">🔧</a></td>
     <td align="center"><a href="https://github.com/wandroll"><img src="https://avatars.githubusercontent.com/u/4492317?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Wandrille Verlut</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=wandroll" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=wandroll" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/krikienoid"><img src="https://avatars3.githubusercontent.com/u/8528227?v=4?s=100" width="100px;" alt=""/><br /><sub><b>krikienoid</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Akrikienoid" title="Bug reports">🐛</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/syntactic-salt"><img src="https://avatars.githubusercontent.com/u/9385662?v=4?s=100" width="100px;" alt=""/><br /><sub><b>syntactic-salt</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Asyntactic-salt" title="Bug reports">🐛</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

package/dist/focus-trap-react.js

@@ -1,14 +1,14 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+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); }
 
@@ -86,10 +86,23 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     _this.updatePreviousElement();
 
     return _this;
-  } // TODO: Need more test coverage for this function
+  }
+  /**
+   * Gets the configured document.
+   * @returns {Document|undefined} Configured document, falling back to the main
+   *  document, if it exists. During SSR, `undefined` is returned since the
+   *  document doesn't exist.
+   */
 
 
   _createClass(FocusTrap, [{
+    key: "getDocument",
+    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.tailoredFocusTrapOptions[optionName];
@@ -101,7 +114,9 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
       var node = optionValue;
 
       if (typeof optionValue === 'string') {
-        node = document.querySelector(optionValue);
+        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"));
@@ -129,7 +144,7 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "updatePreviousElement",
     value: function updatePreviousElement() {
-      var currentDocument = this.props.focusTrapOptions.document || document;
+      var currentDocument = this.getDocument();
 
       if (currentDocument) {
         this.previouslyFocusedElement = currentDocument.activeElement;
@@ -140,7 +155,10 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     value: function deactivateTrap() {
       var _this2 = this;
 
-      var checkCanReturnFocus = this.tailoredFocusTrapOptions.checkCanReturnFocus;
+      var _this$tailoredFocusTr = this.tailoredFocusTrapOptions,
+          checkCanReturnFocus = _this$tailoredFocusTr.checkCanReturnFocus,
+          _this$tailoredFocusTr2 = _this$tailoredFocusTr.preventScroll,
+          preventScroll = _this$tailoredFocusTr2 === void 0 ? false : _this$tailoredFocusTr2;
 
       if (this.focusTrap) {
         // NOTE: we never let the trap return the focus since we do that ourselves
@@ -156,7 +174,9 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
 
         if (canReturnFocus) {
           /** Returns focus to the element that had focus when the trap was activated. */
-          returnFocusNode.focus();
+          returnFocusNode.focus({
+            preventScroll: preventScroll
+          });
         }
 
         if (_this2.onPostDeactivate) {
@@ -198,7 +218,14 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.setupFocusTrap();
+      if (this.props.active) {
+        this.setupFocusTrap();
+      } // else, wait for later activation in case the `focusTrapOptions` will be updated
+      //  again before the trap is activated (e.g. if waiting to know what the document
+      //  object will be, so the Trap must be rendered, but the consumer is waiting to
+      //  activate until they have obtained the document from a ref)
+      //  @see https://github.com/focus-trap/focus-trap-react/issues/539
+
     }
   }, {
     key: "componentDidUpdate",
@@ -230,9 +257,22 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
         if (hasUnpaused) {
           this.focusTrap.unpause();
         }
-      } else if (prevProps.containerElements !== this.props.containerElements) {
-        this.focusTrapElements = this.props.containerElements;
-        this.setupFocusTrap();
+      } else {
+        // NOTE: if we're in `componentDidUpdate` and we don't have a trap yet,
+        //  it either means it shouldn't be active, or it should be but none of
+        //  of given `containerElements` were present in the DOM the last time
+        //  we tried to create the trap
+        if (prevProps.containerElements !== this.props.containerElements) {
+          this.focusTrapElements = this.props.containerElements;
+        } // don't create the trap unless it should be active in case the consumer
+        //  is still updating `focusTrapOptions`
+        //  @see https://github.com/focus-trap/focus-trap-react/issues/539
+
+
+        if (this.props.active) {
+          this.updatePreviousElement();
+          this.setupFocusTrap();
+        }
       }
     }
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "8.8.0",
+  "version": "8.9.1",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -55,46 +55,46 @@
   },
   "homepage": "https://github.com/focus-trap/focus-trap-react#readme",
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-proposal-class-properties": "^7.12.13",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-react": "^7.14.5",
-    "@changesets/cli": "^2.17.0",
-    "@testing-library/cypress": "^8.0.1",
-    "@testing-library/dom": "^8.5.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jquery": "^3.5.6",
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.7",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
+    "@babel/preset-env": "^7.16.8",
+    "@babel/preset-react": "^7.16.7",
+    "@changesets/cli": "^2.19.0",
+    "@testing-library/cypress": "^8.0.2",
+    "@testing-library/dom": "^8.11.1",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jquery": "^3.5.13",
     "all-contributors-cli": "^6.20.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.2.1",
+    "babel-jest": "^27.4.6",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "budo": "^11.6.4",
-    "cypress": "^8.4.1",
+    "cypress": "^9.2.1",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^7.32.0",
+    "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-react": "^7.26.0",
-    "jest": "^27.2.1",
-    "jest-watch-typeahead": "^0.6.4",
+    "eslint-plugin-react": "^7.28.0",
+    "jest": "^27.4.7",
+    "jest-watch-typeahead": "^1.0.0",
     "onchange": "^7.1.0",
-    "prettier": "^2.4.1",
-    "prop-types": "^15.7.2",
+    "prettier": "^2.5.1",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.4.3"
+    "typescript": "^4.5.4"
   },
   "dependencies": {
-    "focus-trap": "^6.7.1"
+    "focus-trap": "^6.7.2"
   },
   "peerDependencies": {
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   }

package/src/focus-trap-react.js

@@ -53,6 +53,20 @@ class FocusTrap extends React.Component {
     this.updatePreviousElement();
   }
 
+  /**
+   * Gets the configured document.
+   * @returns {Document|undefined} Configured document, falling back to the main
+   *  document, if it exists. During SSR, `undefined` is returned since the
+   *  document doesn't exist.
+   */
+  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
   getNodeForOption(optionName) {
     const optionValue = this.tailoredFocusTrapOptions[optionName];
@@ -63,7 +77,7 @@ class FocusTrap extends React.Component {
     let node = optionValue;
 
     if (typeof optionValue === 'string') {
-      node = document.querySelector(optionValue);
+      node = this.getDocument()?.querySelector(optionValue);
       if (!node) {
         throw new Error(`\`${optionName}\` refers to no known node`);
       }
@@ -87,14 +101,15 @@ class FocusTrap extends React.Component {
 
   /** Update the previously focused element with the currently focused element. */
   updatePreviousElement() {
-    const currentDocument = this.props.focusTrapOptions.document || document;
+    const currentDocument = this.getDocument();
     if (currentDocument) {
       this.previouslyFocusedElement = currentDocument.activeElement;
     }
   }
 
   deactivateTrap() {
-    const { checkCanReturnFocus } = this.tailoredFocusTrapOptions;
+    const { checkCanReturnFocus, preventScroll = false } =
+      this.tailoredFocusTrapOptions;
 
     if (this.focusTrap) {
       // NOTE: we never let the trap return the focus since we do that ourselves
@@ -108,7 +123,9 @@ class FocusTrap extends React.Component {
 
       if (canReturnFocus) {
         /** Returns focus to the element that had focus when the trap was activated. */
-        returnFocusNode.focus();
+        returnFocusNode.focus({
+          preventScroll,
+        });
       }
 
       if (this.onPostDeactivate) {
@@ -155,7 +172,14 @@ class FocusTrap extends React.Component {
   }
 
   componentDidMount() {
-    this.setupFocusTrap();
+    if (this.props.active) {
+      this.setupFocusTrap();
+    }
+    // else, wait for later activation in case the `focusTrapOptions` will be updated
+    //  again before the trap is activated (e.g. if waiting to know what the document
+    //  object will be, so the Trap must be rendered, but the consumer is waiting to
+    //  activate until they have obtained the document from a ref)
+    //  @see https://github.com/focus-trap/focus-trap-react/issues/539
   }
 
   componentDidUpdate(prevProps) {
@@ -186,9 +210,23 @@ class FocusTrap extends React.Component {
       if (hasUnpaused) {
         this.focusTrap.unpause();
       }
-    } else if (prevProps.containerElements !== this.props.containerElements) {
-      this.focusTrapElements = this.props.containerElements;
-      this.setupFocusTrap();
+    } else {
+      // NOTE: if we're in `componentDidUpdate` and we don't have a trap yet,
+      //  it either means it shouldn't be active, or it should be but none of
+      //  of given `containerElements` were present in the DOM the last time
+      //  we tried to create the trap
+
+      if (prevProps.containerElements !== this.props.containerElements) {
+        this.focusTrapElements = this.props.containerElements;
+      }
+
+      // don't create the trap unless it should be active in case the consumer
+      //  is still updating `focusTrapOptions`
+      //  @see https://github.com/focus-trap/focus-trap-react/issues/539
+      if (this.props.active) {
+        this.updatePreviousElement();
+        this.setupFocusTrap();
+      }
     }
   }