focus-trap-react 8.11.2 → 9.0.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 9.0.1
+
+### Patch Changes
+
+- 2d6cd9b: Add explicit dependency on tabbable since the source directly requires it.
+
+## 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
+
+- 9947461: Bump focus-trap dependency to v6.9.4 to get typings fix.
+- 519e5a5: Fix setReturnFocus option as function not being passed node focused prior to activation.
+
 ## 8.11.2
 
 ### Patch 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-23-orange.svg?style=flat-square)](#contributors)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 A React component that traps focus.
@@ -220,13 +220,14 @@ 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="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/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

@@ -22,9 +22,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var React = require('react');
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var ReactDOM = require('react-dom');
+var React = require('react');
 
 var PropTypes = require('prop-types');
 
@@ -32,12 +32,7 @@ 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);
@@ -50,6 +45,49 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, FocusTrap);
 
     _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "getNodeForOption", function (optionName) {
+      var _this$internalOptions;
+
+      // use internal options first, falling back to original options
+      var optionValue = (_this$internalOptions = this.internalOptions[optionName]) !== null && _this$internalOptions !== void 0 ? _this$internalOptions : this.originalOptions[optionName];
+
+      if (typeof optionValue === 'function') {
+        for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          params[_key - 1] = arguments[_key];
+        }
+
+        optionValue = optionValue.apply(void 0, params);
+      }
+
+      if (optionValue === true) {
+        optionValue = undefined; // use default value
+      }
+
+      if (!optionValue) {
+        if (optionValue === undefined || optionValue === false) {
+          return optionValue;
+        } // else, empty string (invalid), null (invalid), 0 (invalid)
+
+
+        throw new Error("`".concat(optionName, "` was specified but was not a node, or did not return a node"));
+      }
+
+      var node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point
+
+      if (typeof optionValue === 'string') {
+        var _this$getDocument;
+
+        node = (_this$getDocument = this.getDocument()) === null || _this$getDocument === void 0 ? void 0 : _this$getDocument.querySelector(optionValue); // resolve to node, or null if fails
+
+        if (!node) {
+          throw new Error("`".concat(optionName, "` as selector refers to no known node"));
+        }
+      }
+
+      return node;
+    });
+
     _this.handleDeactivate = _this.handleDeactivate.bind(_assertThisInitialized(_this));
     _this.handlePostDeactivate = _this.handlePostDeactivate.bind(_assertThisInitialized(_this));
     _this.handleClickOutsideDeactivates = _this.handleClickOutsideDeactivates.bind(_assertThisInitialized(_this)); // focus-trap options used internally when creating the trap
@@ -74,10 +112,10 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     }; // original options provided by the consumer
 
     _this.originalOptions = {
-      // because of the above `tailoredFocusTrapOptions`, we maintain our own flag for
+      // because of the above `internalOptions`, we maintain our own flag for
       //  this option, and default it to `true` because that's focus-trap's default
       returnFocusOnDeactivate: true,
-      // because of the above `tailoredFocusTrapOptions`, we keep these separate since
+      // because of the above `internalOptions`, we keep these separate since
       //  they're part of the deactivation process which we configure (internally) to
       //  be shared between focus-trap and focus-trap-react
       onDeactivate: null,
@@ -95,7 +133,7 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
 
       if (optionName === 'returnFocusOnDeactivate' || optionName === 'onDeactivate' || optionName === 'onPostDeactivate' || optionName === 'checkCanReturnFocus' || optionName === 'clickOutsideDeactivates') {
         _this.originalOptions[optionName] = focusTrapOptions[optionName];
-        continue; // exclude from tailoredFocusTrapOptions
+        continue; // exclude from internalOptions
       }
 
       _this.internalOptions[optionName] = focusTrapOptions[optionName];
@@ -128,44 +166,26 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     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",
-    value: function getNodeForOption(optionName) {
-      var optionValue = this.internalOptions[optionName];
-
-      if (!optionValue) {
-        return null;
-      }
-
-      var node = optionValue;
-
-      if (typeof optionValue === 'string') {
-        var _this$getDocument;
-
-        node = (_this$getDocument = this.getDocument()) === null || _this$getDocument === void 0 ? void 0 : _this$getDocument.querySelector(optionValue);
-
-        if (!node) {
-          throw new Error("`".concat(optionName, "` refers to no known node"));
-        }
-      }
-
-      if (typeof optionValue === 'function') {
-        node = optionValue();
-
-        if (!node) {
-          throw new Error("`".concat(optionName, "` did not return a node"));
-        }
-      }
-
-      return node;
     }
+    /**
+     * Gets the node for the given option, which is expected to be an option that
+     *  can be either a DOM node, a string that is a selector to get a node, `false`
+     *  (if a node is explicitly NOT given), or a function that returns any of these
+     *  values.
+     * @param {string} optionName
+     * @returns {undefined | false | HTMLElement | SVGElement} Returns
+     *  `undefined` if the option is not specified; `false` if the option
+     *  resolved to `false` (node explicitly not given); otherwise, the resolved
+     *  DOM node.
+     * @throws {Error} If the option is set, not `false`, and is not, or does not
+     *  resolve to a node.
+     */
+
   }, {
     key: "getReturnFocusNode",
     value: function getReturnFocusNode() {
-      var node = this.getNodeForOption('setReturnFocus');
-      return node ? node : this.previouslyFocusedElement;
+      var node = this.getNodeForOption('setReturnFocus', this.previouslyFocusedElement);
+      return node ? node : node === false ? false : this.previouslyFocusedElement;
     }
     /** Update the previously focused element with the currently focused element. */
 
@@ -280,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();
@@ -377,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) {
@@ -392,7 +408,7 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
         };
 
         var childWithRef = React.cloneElement(child, {
-          ref: composedRefCallback
+          ref: callbackRef
         });
         return childWithRef;
       }
@@ -417,12 +433,13 @@ FocusTrap.propTypes = {
     onDeactivate: PropTypes.func,
     onPostDeactivate: PropTypes.func,
     checkCanReturnFocus: PropTypes.func,
-    initialFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.func, PropTypes.bool]),
-    fallbackFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.func]),
+    initialFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.bool, PropTypes.func]),
+    fallbackFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, // NOTE: does not support `false` as value (or return value from function)
+    PropTypes.func]),
     escapeDeactivates: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     clickOutsideDeactivates: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     returnFocusOnDeactivate: PropTypes.bool,
-    setReturnFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.func]),
+    setReturnFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.bool, PropTypes.func]),
     allowOutsideClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     preventScroll: PropTypes.bool,
     tabbableOptions: PropTypes.shape({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "8.11.2",
+  "version": "9.0.1",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -59,31 +59,31 @@
   "devDependencies": {
     "@babel/cli": "^7.17.10",
     "@babel/core": "^7.18.2",
-    "@babel/eslint-parser": "^7.17.0",
+    "@babel/eslint-parser": "^7.18.2",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@changesets/cli": "^2.22.0",
-    "@testing-library/cypress": "^8.0.2",
+    "@testing-library/cypress": "^8.0.3",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
+    "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.0",
     "@types/jquery": "^3.5.14",
     "all-contributors-cli": "^6.20.0",
-    "babel-jest": "^28.1.0",
+    "babel-jest": "^28.1.1",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "budo": "^11.7.0",
     "cypress": "^9.7.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.16.0",
+    "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-jest": "^26.2.2",
+    "eslint-plugin-jest": "^26.5.3",
     "eslint-plugin-react": "^7.30.0",
-    "jest": "^28.1.0",
-    "jest-environment-jsdom": "^28.1.0",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
     "jest-watch-typeahead": "^1.1.0",
     "onchange": "^7.1.0",
     "prettier": "^2.6.2",
@@ -92,14 +92,15 @@
     "react-dom": "^18.1.0",
     "regenerator-runtime": "^0.13.9",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.7.2"
+    "typescript": "^4.7.3"
   },
   "dependencies": {
-    "focus-trap": "^6.9.3"
+    "focus-trap": "^6.9.4",
+    "tabbable": "^5.3.3"
   },
   "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);
@@ -42,11 +36,11 @@ class FocusTrap extends React.Component {
 
     // original options provided by the consumer
     this.originalOptions = {
-      // because of the above `tailoredFocusTrapOptions`, we maintain our own flag for
+      // because of the above `internalOptions`, we maintain our own flag for
       //  this option, and default it to `true` because that's focus-trap's default
       returnFocusOnDeactivate: true,
 
-      // because of the above `tailoredFocusTrapOptions`, we keep these separate since
+      // because of the above `internalOptions`, we keep these separate since
       //  they're part of the deactivation process which we configure (internally) to
       //  be shared between focus-trap and focus-trap-react
       onDeactivate: null,
@@ -71,7 +65,7 @@ class FocusTrap extends React.Component {
         optionName === 'clickOutsideDeactivates'
       ) {
         this.originalOptions[optionName] = focusTrapOptions[optionName];
-        continue; // exclude from tailoredFocusTrapOptions
+        continue; // exclude from internalOptions
       }
 
       this.internalOptions[optionName] = focusTrapOptions[optionName];
@@ -106,36 +100,63 @@ class FocusTrap extends React.Component {
     );
   }
 
-  // TODO: Need more test coverage for this function
-  getNodeForOption(optionName) {
-    const optionValue = this.internalOptions[optionName];
-    if (!optionValue) {
-      return null;
+  /**
+   * Gets the node for the given option, which is expected to be an option that
+   *  can be either a DOM node, a string that is a selector to get a node, `false`
+   *  (if a node is explicitly NOT given), or a function that returns any of these
+   *  values.
+   * @param {string} optionName
+   * @returns {undefined | false | HTMLElement | SVGElement} Returns
+   *  `undefined` if the option is not specified; `false` if the option
+   *  resolved to `false` (node explicitly not given); otherwise, the resolved
+   *  DOM node.
+   * @throws {Error} If the option is set, not `false`, and is not, or does not
+   *  resolve to a node.
+   */
+  getNodeForOption = function (optionName, ...params) {
+    // use internal options first, falling back to original options
+    let optionValue =
+      this.internalOptions[optionName] ?? this.originalOptions[optionName];
+
+    if (typeof optionValue === 'function') {
+      optionValue = optionValue(...params);
     }
 
-    let node = optionValue;
+    if (optionValue === true) {
+      optionValue = undefined; // use default value
+    }
 
-    if (typeof optionValue === 'string') {
-      node = this.getDocument()?.querySelector(optionValue);
-      if (!node) {
-        throw new Error(`\`${optionName}\` refers to no known node`);
+    if (!optionValue) {
+      if (optionValue === undefined || optionValue === false) {
+        return optionValue;
       }
+      // else, empty string (invalid), null (invalid), 0 (invalid)
+
+      throw new Error(
+        `\`${optionName}\` was specified but was not a node, or did not return a node`
+      );
     }
 
-    if (typeof optionValue === 'function') {
-      node = optionValue();
+    let node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point
+
+    if (typeof optionValue === 'string') {
+      node = this.getDocument()?.querySelector(optionValue); // resolve to node, or null if fails
       if (!node) {
-        throw new Error(`\`${optionName}\` did not return a node`);
+        throw new Error(
+          `\`${optionName}\` as selector refers to no known node`
+        );
       }
     }
 
     return node;
-  }
+  };
 
   getReturnFocusNode() {
-    const node = this.getNodeForOption('setReturnFocus');
-
-    return node ? node : this.previouslyFocusedElement;
+    const node = this.getNodeForOption(
+      'setReturnFocus',
+      this.previouslyFocusedElement
+    );
+    return node ? node : node === false ? false : this.previouslyFocusedElement;
   }
 
   /** Update the previously focused element with the currently focused element. */
@@ -250,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
         );
 
@@ -351,7 +365,7 @@ class FocusTrap extends React.Component {
         );
       }
 
-      const composedRefCallback = (element) => {
+      const callbackRef = (element) => {
         const { containerElements } = this.props;
 
         if (child) {
@@ -368,7 +382,7 @@ class FocusTrap extends React.Component {
       };
 
       const childWithRef = React.cloneElement(child, {
-        ref: composedRefCallback,
+        ref: callbackRef,
       });
 
       return childWithRef;
@@ -395,12 +409,13 @@ FocusTrap.propTypes = {
     initialFocus: PropTypes.oneOfType([
       PropTypes.instanceOf(ElementType),
       PropTypes.string,
-      PropTypes.func,
       PropTypes.bool,
+      PropTypes.func,
     ]),
     fallbackFocus: PropTypes.oneOfType([
       PropTypes.instanceOf(ElementType),
       PropTypes.string,
+      // NOTE: does not support `false` as value (or return value from function)
       PropTypes.func,
     ]),
     escapeDeactivates: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
@@ -412,6 +427,7 @@ FocusTrap.propTypes = {
     setReturnFocus: PropTypes.oneOfType([
       PropTypes.instanceOf(ElementType),
       PropTypes.string,
+      PropTypes.bool,
       PropTypes.func,
     ]),
     allowOutsideClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),