focus-trap-react 8.11.3 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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
 
 ### Patch Changes

package/README.md

@@ -220,7 +220,7 @@ In alphabetical order:
   <tr>
     <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="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>

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);
@@ -307,15 +300,11 @@ 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);
+        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 +393,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 +408,7 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
         };
 
         var childWithRef = React.cloneElement(child, {
-          ref: composedRefCallback
+          ref: callbackRef
         });
         return childWithRef;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "8.11.3",
+  "version": "9.0.0",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -99,7 +99,7 @@
   },
   "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);
@@ -277,18 +271,11 @@ 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);
+      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 +365,7 @@ class FocusTrap extends React.Component {
         );
       }
 
-      const composedRefCallback = (element) => {
+      const callbackRef = (element) => {
         const { containerElements } = this.props;
 
         if (child) {
@@ -395,7 +382,7 @@ class FocusTrap extends React.Component {
       };
 
       const childWithRef = React.cloneElement(child, {
-        ref: composedRefCallback,
+        ref: callbackRef,
       });
 
       return childWithRef;