focus-trap-react 8.11.3 → 9.0.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 9.0.2
+
+### Patch Changes
+
+- 4d8e041: Fix an issue when running in strict mode which has React immediately unmount/remount the trap, causing it to deactivate and then have to reactivate (per existing component state) on the remount. [#720](https://github.com/focus-trap/focus-trap-react/issues/720)
+
+## 9.0.1
+
+### Patch Changes
+
+- 2d6cd9b: Add explicit dependency on tabbable since the source directly requires it.
+
+## 9.0.0
+
+### Major Changes
+
+- 4a77d87: Stop using the infamous `findDOMNode()` on provided `containerElements`.
+  - There seems to have been no good reason for this as this prop, if specified, is already required to be an array of HTMLElement references, which means these nodes have already been rendered (if they were once React elements). There appears to have been no remaining need for this API.
+  - Furthermore, the minimum supported version of React is now 16.3 as it technically has been for a while now since that is the version that introduced callback refs, which we've been using for quite some time now (so this bump will hopefully not cause any ripples).
+
 ## 8.11.3
 
 ### Patch 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-22-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-24-orange.svg?style=flat-square)](#contributors)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 A React component that traps focus.
@@ -214,19 +214,21 @@ In alphabetical order:
     <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://www.moroshko.me"><img src="https://avatars.githubusercontent.com/u/259753?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Misha Moroshko</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Amoroshko" title="Bug reports">🐛</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>
   </tr>
   <tr>
+    <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>
-    <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="http://smoores.dev"><img src="https://avatars.githubusercontent.com/u/5354254?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shane Moore</b></sub></a><br /><a href="#platform-SMores" title="Packaging/porting to new platform">📦</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> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3ASlapbox" title="Bug reports">🐛</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/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>
     <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>

package/dist/focus-trap-react.js

@@ -26,20 +26,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var React = require('react');
 
-var ReactDOM = require('react-dom');
-
 var PropTypes = require('prop-types');
 
 var _require = require('focus-trap'),
     createFocusTrap = _require.createFocusTrap;
 
 var _require2 = require('tabbable'),
-    isFocusable = _require2.isFocusable; // TODO: These issues are related to older React features which we'll likely need
-//  to fix in order to move the code forward to the next major version of React.
-//  @see https://github.com/davidtheclark/focus-trap-react/issues/77
-
-/* eslint-disable react/no-find-dom-node */
-
+    isFocusable = _require2.isFocusable;
 
 var FocusTrap = /*#__PURE__*/function (_React$Component) {
   _inherits(FocusTrap, _React$Component);
@@ -306,16 +299,33 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "setupFocusTrap",
     value: function setupFocusTrap() {
-      if (!this.focusTrap) {
-        var focusTrapElementDOMNodes = this.focusTrapElements.map( // NOTE: `findDOMNode()` does not support CSS selectors; it'll just return
-        //  a new text node with the text wrapped in it instead of treating the
-        //  string as a selector and resolving it to a node in the DOM
-        ReactDOM.findDOMNode);
-        var nodesExist = focusTrapElementDOMNodes.some(Boolean);
+      if (this.focusTrap) {
+        // trap already exists: it's possible we're in StrictMode and we're being remounted,
+        //  in which case, we will have deactivated the trap when we got unmounted (remember,
+        //  StrictMode, in development, purposely unmounts and remounts components after
+        //  mounting them the first time to make sure they have reusable state,
+        //  @see https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state) so now
+        //  we need to restore the state of the trap according to our component state
+        // NOTE: Strict mode __violates__ assumptions about the `componentWillUnmount()` API
+        //  which clearly states -- even for React 18 -- that, "Once a component instance is
+        //  unmounted, __it will never be mounted again.__" (emphasis ours). So when we get
+        //  unmounted, we assume we're gone forever and we deactivate the trap. But then
+        //  we get remounted and we're supposed to restore state. But if you had paused,
+        //  we've now deactivated (we don't know we're amount to get remounted again)
+        //  which means we need to reactivate and then pause. Otherwise, do nothing.
+        if (this.props.active && !this.focusTrap.active) {
+          this.focusTrap.activate();
+
+          if (this.props.paused) {
+            this.focusTrap.pause();
+          }
+        }
+      } else {
+        var nodesExist = this.focusTrapElements.some(Boolean);
 
         if (nodesExist) {
           // eslint-disable-next-line react/prop-types -- _createFocusTrap is an internal prop
-          this.focusTrap = this.props._createFocusTrap(focusTrapElementDOMNodes, this.internalOptions);
+          this.focusTrap = this.props._createFocusTrap(this.focusTrapElements, this.internalOptions);
 
           if (this.props.active) {
             this.focusTrap.activate();
@@ -404,7 +414,7 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
           throw new Error('A focus-trap cannot use a Fragment as its child container. Try replacing it with a <div> element.');
         }
 
-        var composedRefCallback = function composedRefCallback(element) {
+        var callbackRef = function callbackRef(element) {
           var containerElements = _this3.props.containerElements;
 
           if (child) {
@@ -419,7 +429,7 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
         };
 
         var childWithRef = React.cloneElement(child, {
-          ref: composedRefCallback
+          ref: callbackRef
         });
         return childWithRef;
       }
@@ -459,6 +469,7 @@ FocusTrap.propTypes = {
     })
   }),
   containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)),
+  // DOM element ONLY
   children: PropTypes.oneOfType([PropTypes.element, // React element
   PropTypes.instanceOf(ElementType) // DOM element
   ]) // NOTE: _createFocusTrap is internal, for testing purposes only, so we don't

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "8.11.3",
+  "version": "9.0.2",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -14,8 +14,8 @@
     "index.d.ts"
   ],
   "scripts": {
-    "demo-bundle": "browserify demo/js -t babelify --extension=.jsx -o demo/demo-bundle.js",
-    "start": "yarn build && budo demo/js/index.js:demo-bundle.js --dir demo --live -- -t babelify --extension=.jsx",
+    "demo-bundle": "NODE_ENV=production browserify demo/js -t babelify --extension=.jsx -o demo/demo-bundle.js",
+    "start": "yarn build && NODE_ENV=development budo demo/js/index.js:demo-bundle.js --dir demo --live -- -t babelify --extension=.jsx",
     "lint": "eslint \"*.js\" \"src/**/*.js\" \"test/**/*.js\" \"demo/**/*.js\" \"cypress/**/*.js\"",
     "format": "prettier --write \"{*,src/**/*,test/**/*,demo/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\"",
     "format:check": "prettier --check \"{*,src/**/*,test/**/*,demo/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\"",
@@ -24,10 +24,10 @@
     "test:types": "tsc index.d.ts",
     "test:unit": "jest",
     "test:coverage": "jest --coverage",
-    "test:cypress": "start-server-and-test start 9966 'cypress open'",
-    "test:cypress:ci": "start-server-and-test start 9966 'cypress run --browser $CYPRESS_BROWSER --headless'",
-    "test:chrome": "CYPRESS_BROWSER=chrome yarn test:cypress:ci",
-    "test": "yarn format:check && yarn lint && yarn test:unit && yarn test:types && CYPRESS_BROWSER=chrome yarn test:cypress:ci",
+    "test:e2e": "ELECTRON_ENABLE_LOGGING=1 start-server-and-test start 9966 'cypress run --browser $CYPRESS_BROWSER --headless'",
+    "test:e2e:chrome": "CYPRESS_BROWSER=chrome yarn test:e2e",
+    "test:e2e:dev": "ELECTRON_ENABLE_LOGGING=1 start-server-and-test start 9966 'cypress open --browser --e2e'",
+    "test": "yarn format:check && yarn lint && yarn test:unit && yarn test:types && yarn test:e2e:chrome",
     "prepare": "yarn build",
     "prepublishOnly": "yarn test && yarn build",
     "release": "yarn build && changeset publish"
@@ -58,12 +58,12 @@
   "homepage": "https://github.com/focus-trap/focus-trap-react#readme",
   "devDependencies": {
     "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.2",
+    "@babel/core": "^7.18.5",
     "@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",
+    "@changesets/cli": "^2.23.0",
     "@testing-library/cypress": "^8.0.3",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -75,7 +75,7 @@
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "budo": "^11.7.0",
-    "cypress": "^9.7.0",
+    "cypress": "^10.1.0",
     "cypress-plugin-tab": "^1.0.5",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
@@ -86,20 +86,21 @@
     "jest-environment-jsdom": "^28.1.1",
     "jest-watch-typeahead": "^1.1.0",
     "onchange": "^7.1.0",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.0",
     "prop-types": "^15.8.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.13.9",
     "start-server-and-test": "^1.14.0",
     "typescript": "^4.7.3"
   },
   "dependencies": {
-    "focus-trap": "^6.9.4"
+    "focus-trap": "^6.9.4",
+    "tabbable": "^5.3.3"
   },
   "peerDependencies": {
     "prop-types": "^15.8.1",
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0"
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0"
   }
 }

package/src/focus-trap-react.js

@@ -1,14 +1,8 @@
 const React = require('react');
-const ReactDOM = require('react-dom');
 const PropTypes = require('prop-types');
 const { createFocusTrap } = require('focus-trap');
 const { isFocusable } = require('tabbable');
 
-// TODO: These issues are related to older React features which we'll likely need
-//  to fix in order to move the code forward to the next major version of React.
-//  @see https://github.com/davidtheclark/focus-trap-react/issues/77
-/* eslint-disable react/no-find-dom-node */
-
 class FocusTrap extends React.Component {
   constructor(props) {
     super(props);
@@ -276,19 +270,32 @@ class FocusTrap extends React.Component {
   }
 
   setupFocusTrap() {
-    if (!this.focusTrap) {
-      const focusTrapElementDOMNodes = this.focusTrapElements.map(
-        // NOTE: `findDOMNode()` does not support CSS selectors; it'll just return
-        //  a new text node with the text wrapped in it instead of treating the
-        //  string as a selector and resolving it to a node in the DOM
-        ReactDOM.findDOMNode
-      );
-
-      const nodesExist = focusTrapElementDOMNodes.some(Boolean);
+    if (this.focusTrap) {
+      // trap already exists: it's possible we're in StrictMode and we're being remounted,
+      //  in which case, we will have deactivated the trap when we got unmounted (remember,
+      //  StrictMode, in development, purposely unmounts and remounts components after
+      //  mounting them the first time to make sure they have reusable state,
+      //  @see https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state) so now
+      //  we need to restore the state of the trap according to our component state
+      // NOTE: Strict mode __violates__ assumptions about the `componentWillUnmount()` API
+      //  which clearly states -- even for React 18 -- that, "Once a component instance is
+      //  unmounted, __it will never be mounted again.__" (emphasis ours). So when we get
+      //  unmounted, we assume we're gone forever and we deactivate the trap. But then
+      //  we get remounted and we're supposed to restore state. But if you had paused,
+      //  we've now deactivated (we don't know we're amount to get remounted again)
+      //  which means we need to reactivate and then pause. Otherwise, do nothing.
+      if (this.props.active && !this.focusTrap.active) {
+        this.focusTrap.activate();
+        if (this.props.paused) {
+          this.focusTrap.pause();
+        }
+      }
+    } else {
+      const nodesExist = this.focusTrapElements.some(Boolean);
       if (nodesExist) {
         // eslint-disable-next-line react/prop-types -- _createFocusTrap is an internal prop
         this.focusTrap = this.props._createFocusTrap(
-          focusTrapElementDOMNodes,
+          this.focusTrapElements,
           this.internalOptions
         );
 
@@ -378,7 +385,7 @@ class FocusTrap extends React.Component {
         );
       }
 
-      const composedRefCallback = (element) => {
+      const callbackRef = (element) => {
         const { containerElements } = this.props;
 
         if (child) {
@@ -395,7 +402,7 @@ class FocusTrap extends React.Component {
       };
 
       const childWithRef = React.cloneElement(child, {
-        ref: composedRefCallback,
+        ref: callbackRef,
       });
 
       return childWithRef;
@@ -450,7 +457,7 @@ FocusTrap.propTypes = {
       getShadowRoot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     }),
   }),
-  containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)),
+  containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)), // DOM element ONLY
   children: PropTypes.oneOfType([
     PropTypes.element, // React element
     PropTypes.instanceOf(ElementType), // DOM element