focus-trap-react
Advanced tools
Comparing version 9.0.1 to 9.0.2
# 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 | ||
@@ -4,0 +10,0 @@ |
@@ -302,3 +302,24 @@ "use strict"; | ||
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); | ||
@@ -452,2 +473,3 @@ | ||
containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)), | ||
// DOM element ONLY | ||
children: PropTypes.oneOfType([PropTypes.element, // React element | ||
@@ -454,0 +476,0 @@ PropTypes.instanceOf(ElementType) // DOM element |
{ | ||
"name": "focus-trap-react", | ||
"version": "9.0.1", | ||
"version": "9.0.2", | ||
"description": "A React component that traps focus.", | ||
@@ -17,4 +17,4 @@ "main": "dist/focus-trap-react.js", | ||
"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\"", | ||
@@ -28,6 +28,6 @@ "format": "prettier --write \"{*,src/**/*,test/**/*,demo/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\"", | ||
"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", | ||
@@ -63,3 +63,3 @@ "prepublishOnly": "yarn test && yarn build", | ||
"@babel/cli": "^7.17.10", | ||
"@babel/core": "^7.18.2", | ||
"@babel/core": "^7.18.5", | ||
"@babel/eslint-parser": "^7.18.2", | ||
@@ -69,3 +69,3 @@ "@babel/plugin-proposal-class-properties": "^7.17.12", | ||
"@babel/preset-react": "^7.17.12", | ||
"@changesets/cli": "^2.22.0", | ||
"@changesets/cli": "^2.23.0", | ||
"@testing-library/cypress": "^8.0.3", | ||
@@ -82,3 +82,3 @@ "@testing-library/dom": "^8.13.0", | ||
"budo": "^11.7.0", | ||
"cypress": "^9.7.0", | ||
"cypress": "^10.1.0", | ||
"cypress-plugin-tab": "^1.0.5", | ||
@@ -94,6 +94,6 @@ "eslint": "^8.17.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", | ||
@@ -100,0 +100,0 @@ "start-server-and-test": "^1.14.0", |
# 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-23-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 --> | ||
@@ -217,6 +217,7 @@ | ||
<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> | ||
@@ -228,5 +229,5 @@ <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://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> | ||
</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> | ||
@@ -233,0 +234,0 @@ <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> |
@@ -273,3 +273,23 @@ const React = require('react'); | ||
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); | ||
@@ -441,3 +461,3 @@ if (nodesExist) { | ||
}), | ||
containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)), | ||
containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)), // DOM element ONLY | ||
children: PropTypes.oneOfType([ | ||
@@ -444,0 +464,0 @@ PropTypes.element, // React element |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
79306
835
240