focus-trap-react 9.0.0 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 10.0.0
+
+### Major Changes
+
+- af69c14: 🚨 **Breaking:** Underlying `tabbable` dependency has been updated to v6.0.0 and contains a breaking change related to detached nodes with its default `displayCheck` setting. See tabbable's [changelog](https://github.com/focus-trap/tabbable/blob/master/CHANGELOG.md#600) for more information.
+  - The `focus-trap` dependency has also be updated to v7.0.0 but only contains the underlying `tabbable` changes.
+  - The `tabbableOptions.displayCheck` prop type has been updated to include the new "legacy-full" option.
+- 018732c: 🚨 **Breaking:** Dropped support of IE browsers, all versions.
+  - IE11 was [officially retired](https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/) on June 15, 2022 (6 weeks ago). There are no longer any versions of IE that are still maintained or even supported by Microsoft.
+- 018732c: Revised and clarified official browser support (still as broad and deep as _reasonably_ possible).
+
+### Patch Changes
+
+- b0bbbd4: Update README with a note about the `children` prop stating that the trap requires a single child, and that if a component is used, it must be a **functional** component that forwards refs.
+
+## 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

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.
@@ -33,13 +33,21 @@ npm install focus-trap-react
 
 ### React dependency
 
-React `>= 16.0.0`.
+React `>= 16.3.0`
 
 ## Browser Support
 
-Basically IE9+.
+As old and as broad as _reasonably_ possible, excluding browsers that are out of support or have nearly no user base.
 
-Why? Because this module's core functionality comes from focus-trap, which uses [a couple of IE9+ functions](https://github.com/davidtheclark/tabbable#browser-support).
+Focused on desktop browsers, particularly Chrome, Edge, FireFox, Safari, and Opera.
+
+Focus-trap-react is not officially tested on any mobile browsers or devices.
+
+> ⚠️ Microsoft [no longer supports](https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/) any version of IE, so IE is no longer supported by this library.
+
+> 💬 Focus-trap-react relies on focus-trap so its browser support is at least [what focus-trap supports](https://github.com/focus-trap/focus-trap#browser-support).
+
+> 💬 Keep in mind that performance optimization and old browser support are often at odds, so tabbable may not always be able to use the most optimal (typically modern) APIs in all cases.
 
 ## Usage
 
@@ -66,7 +74,7 @@ You can read further code examples in `demo/` (it's very simple), and [see how i
 
 Here's one more simple example:
 
-```js
+```jsx
 const React = require('react');
 const ReactDOM = require('react-dom'); // React 16-17
 const { createRoot } = require('react-dom/client'); // React 18
@@ -139,6 +147,96 @@ createRoot(document.getElementById('root')).render(<Demo />); // React 18
 
 ### Props
 
+#### children
+
+> ⚠️ The `<FocusTrap>` component requires a __single__ child, and this child must __forward refs__ onto the element which will ultimately be considered the trap's container. Since React does not provide for a way to forward refs to class-based components, this means the child must be a __functional__ component that uses the `React.forwardRef()` API.
+>
+> If you must use a __class__-based component as the trap's container, then you will need to get your own ref to it upon render, and use the `containerElements` prop (initially set to an empty array `[]`) in order to provide the ref's element to it once updated by React (hint: use a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)).
+
+> 💬 The child is ignored (but still rendered) if the `containerElements` prop is used to imperatively provide trap container elements.
+
+Example:
+
+```jsx
+const React = require('react');
+const { createRoot } = require('react-dom/client');
+const propTypes = require('prop-types');
+const FocusTrap = require('../../dist/focus-trap-react');
+
+const container = document.getElementById('demo-function-child');
+
+const TrapChild = React.forwardRef(function ({ onDeactivate }, ref) {
+  return (
+    <div ref={ref}>
+      <p>
+        Here is a focus trap <a href="#">with</a> <a href="#">some</a>{' '}
+        <a href="#">focusable</a> parts.
+      </p>
+      <p>
+        <button
+          onClick={onDeactivate}
+          aria-describedby="class-child-heading"
+        >
+          deactivate trap
+        </button>
+      </p>
+    </div>
+  );
+});
+
+TrapChild.displayName = 'TrapChild';
+TrapChild.propTypes = {
+  onDeactivate: propTypes.func,
+};
+
+class DemoFunctionChild extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeTrap: false,
+    };
+
+    this.mountTrap = this.mountTrap.bind(this);
+    this.unmountTrap = this.unmountTrap.bind(this);
+  }
+
+  mountTrap() {
+    this.setState({ activeTrap: true });
+  }
+
+  unmountTrap() {
+    this.setState({ activeTrap: false });
+  }
+
+  render() {
+    const trap = this.state.activeTrap && (
+      <FocusTrap
+        focusTrapOptions={{
+          onDeactivate: this.unmountTrap,
+        }}
+      >
+        <TrapChild />
+      </FocusTrap>
+    );
+
+    return (
+      <div>
+        <p>
+          <button onClick={this.mountTrap} aria-describedby="function-child-heading">
+            activate trap
+          </button>
+        </p>
+        {trap}
+      </div>
+    );
+  }
+}
+
+const root = createRoot(container);
+root.render(<DemoFunctionChild />);
+```
+
 #### focusTrapOptions
 
 Type: `Object`, optional
@@ -165,9 +263,11 @@ If you would like to pause or unpause the focus trap (see [`focus-trap`'s docume
 
 Type: `Array of HTMLElement`, optional
 
-If passed in, these elements will be used as the boundaries for the focus-trap, __instead of the child__.  These get passed as arguments to `focus-trap`'s `updateContainerElements()` method.
+If specified, these elements will be used as the boundaries for the focus-trap, __instead of the child__.  These get passed as arguments to `focus-trap`'s `updateContainerElements()` method.
 
-> Note that when you use `containerElements`, the need for a child is eliminated as the child is __always__ ignored when the prop is specified, even if the prop is `[]` (an empty array). Also note that if the refs you're putting into the array like `containerElements={[ref1.current, ref2.current]}` and one or both refs aren't resolved yet, resulting in `[null, null]` for example, the trap will not get created. The array must contain at least one `HTMLElement` in order for the trap to get updated.
+> 💬 Note that when you use `containerElements`, the need for a child is eliminated as the child is __always__ ignored (though still rendered) when the prop is specified, even if this prop is `[]` (an empty array).
+>
+> Also note that if the refs you're putting into the array, like `containerElements={[ref1.current, ref2.current]}`, aren't resolved yet, resulting in `[null, null]` for example, the trap will not get created. The array must contain at least one valid `HTMLElement` in order for the trap to get created/updated.
 
 If `containerElements` is subsequently updated (i.e. after the trap has been created) to an empty array (or an array of falsy values like `[null, null]`), the trap will still be active, but the TAB key will do nothing because the trap will not contain any tabbable groups of nodes. At this point, the trap can either be deactivated manually or by unmounting, or an updated set of elements can be given to `containerElements` to resume use of the TAB key.
 
@@ -214,19 +314,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="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

@@ -299,7 +299,28 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "setupFocusTrap",
     value: function setupFocusTrap() {
-      if (!this.focusTrap) {
+      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) {
@@ -443,11 +464,12 @@ FocusTrap.propTypes = {
     allowOutsideClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     preventScroll: PropTypes.bool,
     tabbableOptions: PropTypes.shape({
-      displayCheck: PropTypes.oneOf(['full', 'non-zero-area', 'none']),
+      displayCheck: PropTypes.oneOf(['full', 'legacy-full', 'non-zero-area', 'none']),
       getShadowRoot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func])
     })
   }),
   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": "9.0.0",
+  "version": "10.0.0",
   "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"
@@ -57,45 +57,46 @@
   },
   "homepage": "https://github.com/focus-trap/focus-trap-react#readme",
   "devDependencies": {
-    "@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",
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.18.13",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@changesets/cli": "^2.24.3",
     "@testing-library/cypress": "^8.0.3",
-    "@testing-library/dom": "^8.13.0",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.2.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jquery": "^3.5.14",
     "all-contributors-cli": "^6.20.0",
-    "babel-jest": "^28.1.1",
+    "babel-jest": "^28.1.3",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "budo": "^11.7.0",
-    "cypress": "^9.7.0",
+    "cypress": "^10.6.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.17.0",
+    "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.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",
+    "eslint-plugin-jest": "^26.8.7",
+    "eslint-plugin-react": "^7.30.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "jest-watch-typeahead": "^2.0.0",
     "onchange": "^7.1.0",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "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"
+    "typescript": "^4.7.4"
   },
   "dependencies": {
-    "focus-trap": "^6.9.4"
+    "focus-trap": "^7.0.0",
+    "tabbable": "^6.0.0"
   },
   "peerDependencies": {
     "prop-types": "^15.8.1",

package/src/focus-trap-react.js

@@ -270,7 +270,27 @@ class FocusTrap extends React.Component {
   }
 
   setupFocusTrap() {
-    if (!this.focusTrap) {
+    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
@@ -433,11 +453,16 @@ FocusTrap.propTypes = {
     allowOutsideClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     preventScroll: PropTypes.bool,
     tabbableOptions: PropTypes.shape({
-      displayCheck: PropTypes.oneOf(['full', 'non-zero-area', 'none']),
+      displayCheck: PropTypes.oneOf([
+        'full',
+        'legacy-full',
+        'non-zero-area',
+        'none',
+      ]),
       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