focus-trap-react
Advanced tools
focus-trap-react - npm Package Compare versions
Comparing version 8.8.2 to 8.9.0
| # Changelog | ||
| ## 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 | ||
@@ -4,0 +14,0 @@ |
@@ -89,6 +89,19 @@ "use strict"; | ||
| 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", | ||
@@ -105,4 +118,6 @@ value: function getNodeForOption(optionName) { | ||
| 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) { | ||
@@ -134,4 +149,3 @@ throw new Error("`".concat(optionName, "` refers to no known node")); | ||
| value: function updatePreviousElement() { | ||
| // SSR: careful to check if `document` exists before accessing it as a variable | ||
| var currentDocument = this.props.focusTrapOptions.document || (typeof document !== 'undefined' ? document : undefined); | ||
| var currentDocument = this.getDocument(); | ||
@@ -210,3 +224,10 @@ if (currentDocument) { | ||
| 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 | ||
| } | ||
@@ -243,5 +264,18 @@ }, { | ||
| } | ||
| } 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(); | ||
| } | ||
| } | ||
@@ -248,0 +282,0 @@ } |
| { | ||
| "name": "focus-trap-react", | ||
| "version": "8.8.2", | ||
| "version": "8.9.0", | ||
| "description": "A React component that traps focus.", | ||
@@ -58,30 +58,30 @@ "main": "dist/focus-trap-react.js", | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.15.7", | ||
| "@babel/core": "^7.15.8", | ||
| "@babel/plugin-proposal-class-properties": "^7.12.13", | ||
| "@babel/preset-env": "^7.15.8", | ||
| "@babel/preset-react": "^7.14.5", | ||
| "@changesets/cli": "^2.17.0", | ||
| "@testing-library/cypress": "^8.0.1", | ||
| "@testing-library/dom": "^8.7.2", | ||
| "@testing-library/jest-dom": "^5.14.1", | ||
| "@babel/cli": "^7.16.0", | ||
| "@babel/core": "^7.16.0", | ||
| "@babel/eslint-parser": "^7.16.3", | ||
| "@babel/plugin-proposal-class-properties": "^7.16.0", | ||
| "@babel/preset-env": "^7.16.4", | ||
| "@babel/preset-react": "^7.16.0", | ||
| "@changesets/cli": "^2.18.1", | ||
| "@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.3.0", | ||
| "@types/jquery": "^3.5.7", | ||
| "@testing-library/user-event": "^13.5.0", | ||
| "@types/jquery": "^3.5.9", | ||
| "all-contributors-cli": "^6.20.0", | ||
| "babel-eslint": "^10.1.0", | ||
| "babel-jest": "^27.2.5", | ||
| "babel-jest": "^27.4.2", | ||
| "babelify": "^10.0.0", | ||
| "browserify": "^17.0.0", | ||
| "budo": "^11.6.4", | ||
| "cypress": "^8.6.0", | ||
| "cypress": "^9.1.1", | ||
| "cypress-plugin-tab": "^1.0.5", | ||
| "eslint": "^7.32.0", | ||
| "eslint": "^8.4.1", | ||
| "eslint-config-prettier": "^8.3.0", | ||
| "eslint-plugin-cypress": "^2.12.1", | ||
| "eslint-plugin-react": "^7.26.1", | ||
| "jest": "^27.2.5", | ||
| "eslint-plugin-react": "^7.27.1", | ||
| "jest": "^27.4.3", | ||
| "jest-watch-typeahead": "^1.0.0", | ||
| "onchange": "^7.1.0", | ||
| "prettier": "^2.4.1", | ||
| "prettier": "^2.5.1", | ||
| "prop-types": "^15.7.2", | ||
@@ -92,3 +92,3 @@ "react": "^17.0.2", | ||
| "start-server-and-test": "^1.14.0", | ||
| "typescript": "^4.4.4" | ||
| "typescript": "^4.5.2" | ||
| }, | ||
@@ -95,0 +95,0 @@ "dependencies": { |
@@ -56,2 +56,16 @@ const React = require('react'); | ||
| /** | ||
| * 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 | ||
@@ -67,3 +81,3 @@ getNodeForOption(optionName) { | ||
| if (typeof optionValue === 'string') { | ||
| node = document.querySelector(optionValue); | ||
| node = this.getDocument()?.querySelector(optionValue); | ||
| if (!node) { | ||
@@ -92,6 +106,3 @@ throw new Error(`\`${optionName}\` refers to no known node`); | ||
| updatePreviousElement() { | ||
| // SSR: careful to check if `document` exists before accessing it as a variable | ||
| const currentDocument = | ||
| this.props.focusTrapOptions.document || | ||
| (typeof document !== 'undefined' ? document : undefined); | ||
| const currentDocument = this.getDocument(); | ||
| if (currentDocument) { | ||
@@ -167,3 +178,10 @@ this.previouslyFocusedElement = currentDocument.activeElement; | ||
| 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 | ||
| } | ||
@@ -199,5 +217,19 @@ | ||
| } | ||
| } 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(); | ||
| } | ||
| } | ||
@@ -204,0 +236,0 @@ } |
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by6.04%
59012
- Lines of code
- increased by11.09%
581
No dependency changes