focus-trap-react
Advanced tools
focus-trap-react - npm Package Compare versions
Comparing version 8.11.3 to 9.0.0
| # Changelog | ||
| ## 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 | ||
@@ -4,0 +12,0 @@ |
@@ -29,4 +29,2 @@ "use strict"; | ||
| var ReactDOM = require('react-dom'); | ||
| var PropTypes = require('prop-types'); | ||
@@ -38,9 +36,4 @@ | ||
| 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 | ||
| isFocusable = _require2.isFocusable; | ||
| /* eslint-disable react/no-find-dom-node */ | ||
| var FocusTrap = /*#__PURE__*/function (_React$Component) { | ||
@@ -312,11 +305,7 @@ _inherits(FocusTrap, _React$Component); | ||
| 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); | ||
| 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); | ||
@@ -410,3 +399,3 @@ if (this.props.active) { | ||
| var composedRefCallback = function composedRefCallback(element) { | ||
| var callbackRef = function callbackRef(element) { | ||
| var containerElements = _this3.props.containerElements; | ||
@@ -426,3 +415,3 @@ | ||
| var childWithRef = React.cloneElement(child, { | ||
| ref: composedRefCallback | ||
| ref: callbackRef | ||
| }); | ||
@@ -429,0 +418,0 @@ return childWithRef; |
| { | ||
| "name": "focus-trap-react", | ||
| "version": "8.11.3", | ||
| "version": "9.0.0", | ||
| "description": "A React component that traps focus.", | ||
@@ -102,5 +102,5 @@ "main": "dist/focus-trap-react.js", | ||
| "prop-types": "^15.8.1", | ||
| "react": ">=16.0.0", | ||
| "react-dom": ">=16.0.0" | ||
| "react": ">=16.3.0", | ||
| "react-dom": ">=16.3.0" | ||
| } | ||
| } |
@@ -223,3 +223,3 @@ # focus-trap-react [](https://github.com/focus-trap/focus-trap-react/actions?query=workflow:CI+branch:master) [](https://codecov.io/gh/focus-trap/focus-trap-react) [](./LICENSE) | ||
| <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://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> | ||
@@ -226,0 +226,0 @@ <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> |
| const React = require('react'); | ||
| const ReactDOM = require('react-dom'); | ||
| const PropTypes = require('prop-types'); | ||
@@ -7,7 +6,2 @@ const { createFocusTrap } = require('focus-trap'); | ||
| // 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 { | ||
@@ -281,14 +275,7 @@ constructor(props) { | ||
| 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); | ||
| 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 | ||
@@ -383,3 +370,3 @@ ); | ||
| const composedRefCallback = (element) => { | ||
| const callbackRef = (element) => { | ||
| const { containerElements } = this.props; | ||
@@ -401,3 +388,3 @@ | ||
| const childWithRef = React.cloneElement(child, { | ||
| ref: composedRefCallback, | ||
| ref: callbackRef, | ||
| }); | ||
@@ -404,0 +391,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
Worsened metrics
- Total package byte prevSize
- decreased by-0.74%
75470
- Lines of code
- decreased by-2.34%
794