focus-trap-react 9.0.2 → 10.0.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 10.0.1
+
+### Patch Changes
+
+- c772db0: Add help for Strict Mode in README [#796](https://github.com/focus-trap/focus-trap-react/issues/796)
+- d0de500: Bump focus-trap to 7.1.0 and tabbable to 6.0.1 for new trap features and bug fixes
+
+## 10.0.0
+
+### Major Changes
+
+- af69c14: 🚨 **Breaking:** Underlying `tabbable` dependency has been updated to v6.0.0 and contains a breaking change related to detached nodes with its default `displayCheck` setting. See tabbable's [changelog](https://github.com/focus-trap/tabbable/blob/master/CHANGELOG.md#600) for more information.
+  - The `focus-trap` dependency has also be updated to v7.0.0 but only contains the underlying `tabbable` changes.
+  - The `tabbableOptions.displayCheck` prop type has been updated to include the new "legacy-full" option.
+- 018732c: 🚨 **Breaking:** Dropped support of IE browsers, all versions.
+  - IE11 was [officially retired](https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/) on June 15, 2022 (6 weeks ago). There are no longer any versions of IE that are still maintained or even supported by Microsoft.
+- 018732c: Revised and clarified official browser support (still as broad and deep as _reasonably_ possible).
+
+### Patch Changes
+
+- b0bbbd4: Update README with a note about the `children` prop stating that the trap requires a single child, and that if a component is used, it must be a **functional** component that forwards refs.
+
 ## 9.0.2
 
 ### Patch Changes

package/README.md

@@ -33,13 +33,21 @@ npm install focus-trap-react
 
 ### React dependency
 
-React `>= 16.0.0`.
+React `>= 16.3.0`
 
 ## Browser Support
 
-Basically IE9+.
+As old and as broad as _reasonably_ possible, excluding browsers that are out of support or have nearly no user base.
 
-Why? Because this module's core functionality comes from focus-trap, which uses [a couple of IE9+ functions](https://github.com/davidtheclark/tabbable#browser-support).
+Focused on desktop browsers, particularly Chrome, Edge, FireFox, Safari, and Opera.
+
+Focus-trap-react is not officially tested on any mobile browsers or devices.
+
+> ⚠️ Microsoft [no longer supports](https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/) any version of IE, so IE is no longer supported by this library.
+
+> 💬 Focus-trap-react relies on focus-trap so its browser support is at least [what focus-trap supports](https://github.com/focus-trap/focus-trap#browser-support).
+
+> 💬 Keep in mind that performance optimization and old browser support are often at odds, so tabbable may not always be able to use the most optimal (typically modern) APIs in all cases.
 
 ## Usage
 
@@ -66,7 +74,7 @@ You can read further code examples in `demo/` (it's very simple), and [see how i
 
 Here's one more simple example:
 
-```js
+```jsx
 const React = require('react');
 const ReactDOM = require('react-dom'); // React 16-17
 const { createRoot } = require('react-dom/client'); // React 18
@@ -137,9 +145,124 @@ ReactDOM.render(<Demo />, document.getElementById('root')); // React 16-17
 createRoot(document.getElementById('root')).render(<Demo />); // React 18
 ```
 
-### Props
+## ❗️❗️ React 18 Strict Mode ❗️❗️
+
+React 18 introduced [new behavior](https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state) in Strict Mode whereby it mimics a possible future behavior where React might optimize an app's performance by unmounting certain components that aren't in use and later remounting them with previous, reused state when the user needs them again. What constitutes "not in use" and "needs them again" is as yet undefined.
+
+_Remounted with reused state_ is the key difference between what is otherwise expected about [unmounted components](https://reactjs.org/docs/react-component.html#componentwillunmount).
 
-#### focusTrapOptions
+__[v9.0.2](https://github.com/focus-trap/focus-trap-react/pull/721) adds support__ for this new Strict Mode behavior: The trap attempts to detect that it has been remounted with previous state: If the `active` prop's value is `true`, and an internal focus trap instance already exists, the focus trap is re-activated on remount in order to reconcile stated expectations.
+
+> 🚨 In Strict Mode (and so in dev builds only, since this behavior of Strict Mode only affects dev builds), the trap __will be deactivated as soon as it is mounted__, and then reactivated again, almost immediately, because React will immediately unmount and remount the trap as soon as it's rendered.
+
+Therefore, __avoid using options like onActivate, onPostActivate, onDeactivate, or onPostDeactivate to affect component state__.
+
+<details>
+<summary>Explanation and sample anti-pattern to <strong>avoid</strong></summary>
+<p>
+See <a href="https://github.com/focus-trap/focus-trap-react/issues/796">this discussion</a> for an example sandbox (issue description) where <code>onDeactivate</code> was used to trigger the close of a dialog when the trap was deactivated (e.g. to react to the user clicking outside the trap with <code>focusTrapOptions.clickOutsideDeactivates=true</code>).
+</p>
+<p>
+The result can be that (depending on how you render the trap) in Strict Mode, the dialog never appears because it gets closed as soon as the trap renders, since the trap is deactivated as soon as it's unmounted, and so the <code>onDeactivate</code> handler is called, thus hiding the dialog...
+</p>
+<p>
+<strong>This is intentional</strong>: If the trap gets unmounted, it has no idea if it's being unmounted <em>for good</em> or if it's going to be remounted <em>at some future point in time</em>. It also has no idea of knowing <em>how long</em> it will be until it's remounted again. So it must be deactivated as though it's going away for good in order to prevent unintentional behavior and memory leaks (from orphaned document event listeners).
+</p>
+</details>
+
+## Props
+
+### children
+
+> ⚠️ The `<FocusTrap>` component requires a __single__ child, and this child must __forward refs__ onto the element which will ultimately be considered the trap's container. Since React does not provide for a way to forward refs to class-based components, this means the child must be a __functional__ component that uses the `React.forwardRef()` API.
+>
+> If you must use a __class__-based component as the trap's container, then you will need to get your own ref to it upon render, and use the `containerElements` prop (initially set to an empty array `[]`) in order to provide the ref's element to it once updated by React (hint: use a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs)).
+
+> 💬 The child is ignored (but still rendered) if the `containerElements` prop is used to imperatively provide trap container elements.
+
+Example:
+
+```jsx
+const React = require('react');
+const { createRoot } = require('react-dom/client');
+const propTypes = require('prop-types');
+const FocusTrap = require('../../dist/focus-trap-react');
+
+const container = document.getElementById('demo-function-child');
+
+const TrapChild = React.forwardRef(function ({ onDeactivate }, ref) {
+  return (
+    <div ref={ref}>
+      <p>
+        Here is a focus trap <a href="#">with</a> <a href="#">some</a>{' '}
+        <a href="#">focusable</a> parts.
+      </p>
+      <p>
+        <button
+          onClick={onDeactivate}
+          aria-describedby="class-child-heading"
+        >
+          deactivate trap
+        </button>
+      </p>
+    </div>
+  );
+});
+
+TrapChild.displayName = 'TrapChild';
+TrapChild.propTypes = {
+  onDeactivate: propTypes.func,
+};
+
+class DemoFunctionChild extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeTrap: false,
+    };
+
+    this.mountTrap = this.mountTrap.bind(this);
+    this.unmountTrap = this.unmountTrap.bind(this);
+  }
+
+  mountTrap() {
+    this.setState({ activeTrap: true });
+  }
+
+  unmountTrap() {
+    this.setState({ activeTrap: false });
+  }
+
+  render() {
+    const trap = this.state.activeTrap && (
+      <FocusTrap
+        focusTrapOptions={{
+          onDeactivate: this.unmountTrap,
+        }}
+      >
+        <TrapChild />
+      </FocusTrap>
+    );
+
+    return (
+      <div>
+        <p>
+          <button onClick={this.mountTrap} aria-describedby="function-child-heading">
+            activate trap
+          </button>
+        </p>
+        {trap}
+      </div>
+    );
+  }
+}
+
+const root = createRoot(container);
+root.render(<DemoFunctionChild />);
+```
+
+### focusTrapOptions
 
 Type: `Object`, optional
 
@@ -147,7 +270,7 @@ Pass any of the options available in focus-trap's [createOptions](https://github
 
 > ⚠️ See notes about __[testing in JSDom](#testing-in-jsdom)__ (e.g. using Jest) if that's what you currently use.
 
-#### active
+### active
 
 Type: `Boolean`, optional
 
@@ -155,19 +278,21 @@ By default, the `FocusTrap` activates when it mounts. So you activate and deacti
 
 See `demo/demo-special-element.js`.
 
-#### paused
+### paused
 
 Type: `Boolean`, optional
 
 If you would like to pause or unpause the focus trap (see [`focus-trap`'s documentation](https://github.com/focus-trap/focus-trap#focustrappause)), toggle this prop.
 
-#### containerElements
+### containerElements
 
 Type: `Array of HTMLElement`, optional
 
-If passed in, these elements will be used as the boundaries for the focus-trap, __instead of the child__.  These get passed as arguments to `focus-trap`'s `updateContainerElements()` method.
+If specified, these elements will be used as the boundaries for the focus-trap, __instead of the child__.  These get passed as arguments to `focus-trap`'s `updateContainerElements()` method.
 
-> Note that when you use `containerElements`, the need for a child is eliminated as the child is __always__ ignored when the prop is specified, even if the prop is `[]` (an empty array). Also note that if the refs you're putting into the array like `containerElements={[ref1.current, ref2.current]}` and one or both refs aren't resolved yet, resulting in `[null, null]` for example, the trap will not get created. The array must contain at least one `HTMLElement` in order for the trap to get updated.
+> 💬 Note that when you use `containerElements`, the need for a child is eliminated as the child is __always__ ignored (though still rendered) when the prop is specified, even if this prop is `[]` (an empty array).
+>
+> Also note that if the refs you're putting into the array, like `containerElements={[ref1.current, ref2.current]}`, aren't resolved yet, resulting in `[null, null]` for example, the trap will not get created. The array must contain at least one valid `HTMLElement` in order for the trap to get created/updated.
 
 If `containerElements` is subsequently updated (i.e. after the trap has been created) to an empty array (or an array of falsy values like `[null, null]`), the trap will still be active, but the TAB key will do nothing because the trap will not contain any tabbable groups of nodes. At this point, the trap can either be deactivated manually or by unmounting, or an updated set of elements can be given to `containerElements` to resume use of the TAB key.
 

package/dist/focus-trap-react.js

@@ -1,65 +1,40 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 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 React = require('react');
-
 var PropTypes = require('prop-types');
-
 var _require = require('focus-trap'),
-    createFocusTrap = _require.createFocusTrap;
-
+  createFocusTrap = _require.createFocusTrap;
 var _require2 = require('tabbable'),
-    isFocusable = _require2.isFocusable;
-
+  isFocusable = _require2.isFocusable;
 var FocusTrap = /*#__PURE__*/function (_React$Component) {
   _inherits(FocusTrap, _React$Component);
-
   var _super = _createSuper(FocusTrap);
-
   function FocusTrap(props) {
     var _this;
-
     _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
       }
@@ -67,31 +42,27 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
       if (!optionValue) {
         if (optionValue === undefined || optionValue === false) {
           return optionValue;
-        } // else, empty string (invalid), null (invalid), 0 (invalid)
-
+        }
+        // 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
+    _this.handleClickOutsideDeactivates = _this.handleClickOutsideDeactivates.bind(_assertThisInitialized(_this));
 
+    // focus-trap options used internally when creating the trap
     _this.internalOptions = {
       // We need to hijack the returnFocusOnDeactivate option,
       // because React can move focus into the element before we arrived at
@@ -109,8 +80,9 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
       //  outside click (otherwise, we'll always think we should return focus because
       //  of how we manage that flag internally here)
       clickOutsideDeactivates: _this.handleClickOutsideDeactivates
-    }; // original options provided by the consumer
+    };
 
+    // original options provided by the consumer
     _this.originalOptions = {
       // 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
@@ -125,48 +97,47 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
       clickOutsideDeactivates: false
     };
     var focusTrapOptions = props.focusTrapOptions;
-
     for (var optionName in focusTrapOptions) {
       if (!Object.prototype.hasOwnProperty.call(focusTrapOptions, optionName)) {
         continue;
       }
-
       if (optionName === 'returnFocusOnDeactivate' || optionName === 'onDeactivate' || optionName === 'onPostDeactivate' || optionName === 'checkCanReturnFocus' || optionName === 'clickOutsideDeactivates') {
         _this.originalOptions[optionName] = focusTrapOptions[optionName];
         continue; // exclude from internalOptions
       }
 
       _this.internalOptions[optionName] = focusTrapOptions[optionName];
-    } // if set, `{ target: Node, allowDeactivation: boolean }` where `target` is the outside
+    }
+
+    // if set, `{ target: Node, allowDeactivation: boolean }` where `target` is the outside
     //  node that was clicked, and `allowDeactivation` is the result of the consumer's
     //  option (stored in `this.originalOptions.clickOutsideDeactivates`, which may be a
     //  function) whether to allow or deny auto-deactivation on click on this outside node
+    _this.outsideClick = null;
 
-
-    _this.outsideClick = null; // elements from which to create the focus trap on mount; if a child is used
+    // elements from which to create the focus trap on mount; if a child is used
     //  instead of the `containerElements` prop, we'll get the child's related
     //  element when the trap renders and then is declared 'mounted'
+    _this.focusTrapElements = props.containerElements || [];
 
-    _this.focusTrapElements = props.containerElements || []; // now we remember what the currently focused element is, not relying on focus-trap
-
+    // now we remember what the currently focused element is, not relying on focus-trap
     _this.updatePreviousElement();
-
     return _this;
   }
+
   /**
    * 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);
     }
+
     /**
      * 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`
@@ -180,20 +151,18 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
      * @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', this.previouslyFocusedElement);
       return node ? node : node === false ? false : this.previouslyFocusedElement;
     }
-    /** Update the previously focused element with the currently focused element. */
 
+    /** Update the previously focused element with the currently focused element. */
   }, {
     key: "updatePreviousElement",
     value: function updatePreviousElement() {
       var currentDocument = this.getDocument();
-
       if (currentDocument) {
         this.previouslyFocusedElement = currentDocument.activeElement;
       }
@@ -209,7 +178,6 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
       if (!this.focusTrap || !this.focusTrap.active) {
         return;
       }
-
       this.focusTrap.deactivate({
         // NOTE: we never let the trap return the focus since we do that ourselves
         returnFocus: false,
@@ -218,13 +186,13 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
         checkCanReturnFocus: null,
         // let it call the user's original deactivate handler, if any, instead of
         //  our own which calls back into this function
-        onDeactivate: this.originalOptions.onDeactivate // NOTE: for post deactivate, don't specify anything so that it calls the
+        onDeactivate: this.originalOptions.onDeactivate
+        // NOTE: for post deactivate, don't specify anything so that it calls the
         //  onPostDeactivate handler specified on `this.internalOptions`
         //  which will always be our own `handlePostDeactivate()` handler, which
         //  will finish things off by calling the user's provided onPostDeactivate
         //  handler, if any, at the right time
         // onPostDeactivate: NOTHING
-
       });
     }
   }, {
@@ -242,7 +210,6 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
           allowDeactivation: allowDeactivation
         };
       }
-
       return allowDeactivation;
     }
   }, {
@@ -258,32 +225,35 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     key: "handlePostDeactivate",
     value: function handlePostDeactivate() {
       var _this2 = this;
-
       var finishDeactivation = function finishDeactivation() {
         var returnFocusNode = _this2.getReturnFocusNode();
+        var canReturnFocus = !!(
+        // did the consumer allow it?
 
-        var canReturnFocus = !!( // did the consumer allow it?
         _this2.originalOptions.returnFocusOnDeactivate && // can we actually focus the node?
-        returnFocusNode !== null && returnFocusNode !== void 0 && returnFocusNode.focus && ( // was there an outside click that allowed deactivation?
-        !_this2.outsideClick || // did the consumer allow deactivation when the outside node was clicked?
-        _this2.outsideClick.allowDeactivation && // is the outside node NOT focusable (implying that it did NOT receive focus
+        returnFocusNode !== null && returnFocusNode !== void 0 && returnFocusNode.focus && (
+        // was there an outside click that allowed deactivation?
+        !_this2.outsideClick ||
+        // did the consumer allow deactivation when the outside node was clicked?
+        _this2.outsideClick.allowDeactivation &&
+        // is the outside node NOT focusable (implying that it did NOT receive focus
         //  as a result of the click-through) -- in which case do NOT restore focus
         //  to `returnFocusNode` because focus should remain on the outside node
-        !isFocusable(_this2.outsideClick.target, _this2.internalOptions.tabbableOptions)) // if no, the restore focus to `returnFocusNode` at this point
+        !isFocusable(_this2.outsideClick.target, _this2.internalOptions.tabbableOptions))
+
+        // if no, the restore focus to `returnFocusNode` at this point
         );
-        var _this2$internalOption = _this2.internalOptions.preventScroll,
-            preventScroll = _this2$internalOption === void 0 ? false : _this2$internalOption;
 
+        var _this2$internalOption = _this2.internalOptions.preventScroll,
+          preventScroll = _this2$internalOption === void 0 ? false : _this2$internalOption;
         if (canReturnFocus) {
           // return focus to the element that had focus when the trap was activated
           returnFocusNode.focus({
             preventScroll: preventScroll
           });
         }
-
         if (_this2.originalOptions.onPostDeactivate) {
           _this2.originalOptions.onPostDeactivate.call(null); // don't call it in context of "this"
-
         }
 
         _this2.outsideClick = null; // reset: no longer needed
@@ -315,22 +285,18 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
         //  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);
-
         if (nodesExist) {
           // eslint-disable-next-line react/prop-types -- _createFocusTrap is an internal prop
           this.focusTrap = this.props._createFocusTrap(this.focusTrapElements, this.internalOptions);
-
           if (this.props.active) {
             this.focusTrap.activate();
           }
-
           if (this.props.paused) {
             this.focusTrap.pause();
           }
@@ -342,12 +308,12 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       if (this.props.active) {
         this.setupFocusTrap();
-      } // else, wait for later activation in case the `focusTrapOptions` will be updated
+      }
+      // 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
-
     }
   }, {
     key: "componentDidUpdate",
@@ -356,17 +322,14 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
         if (prevProps.containerElements !== this.props.containerElements) {
           this.focusTrap.updateContainerElements(this.props.containerElements);
         }
-
         var hasActivated = !prevProps.active && this.props.active;
         var hasDeactivated = prevProps.active && !this.props.active;
         var hasPaused = !prevProps.paused && this.props.paused;
         var hasUnpaused = prevProps.paused && !this.props.paused;
-
         if (hasActivated) {
           this.updatePreviousElement();
           this.focusTrap.activate();
         }
-
         if (hasDeactivated) {
           this.deactivateTrap();
           return; // un/pause does nothing on an inactive trap
@@ -375,7 +338,6 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
         if (hasPaused) {
           this.focusTrap.pause();
         }
-
         if (hasUnpaused) {
           this.focusTrap.unpause();
         }
@@ -384,13 +346,14 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
         //  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
+        }
+
+        // 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();
@@ -406,17 +369,13 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this3 = this;
-
       var child = this.props.children ? React.Children.only(this.props.children) : undefined;
-
       if (child) {
         if (child.type && child.type === React.Fragment) {
           throw new Error('A focus-trap cannot use a Fragment as its child container. Try replacing it with a <div> element.');
         }
-
         var callbackRef = function callbackRef(element) {
           var containerElements = _this3.props.containerElements;
-
           if (child) {
             if (typeof child.ref === 'function') {
               child.ref(element);
@@ -424,24 +383,18 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
               child.ref.current = element;
             }
           }
-
           _this3.focusTrapElements = containerElements ? containerElements : [element];
         };
-
         var childWithRef = React.cloneElement(child, {
           ref: callbackRef
         });
         return childWithRef;
       }
-
       return null;
     }
   }]);
-
   return FocusTrap;
 }(React.Component); // support server-side rendering where `Element` will not be defined
-
-
 var ElementType = typeof Element === 'undefined' ? Function : Element;
 FocusTrap.propTypes = {
   active: PropTypes.bool,
@@ -455,7 +408,8 @@ FocusTrap.propTypes = {
     onPostDeactivate: PropTypes.func,
     checkCanReturnFocus: 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)
+    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]),
@@ -464,19 +418,22 @@ FocusTrap.propTypes = {
     allowOutsideClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     preventScroll: PropTypes.bool,
     tabbableOptions: PropTypes.shape({
-      displayCheck: PropTypes.oneOf(['full', 'non-zero-area', 'none']),
+      displayCheck: PropTypes.oneOf(['full', 'legacy-full', 'non-zero-area', 'none']),
       getShadowRoot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func])
     })
   }),
   containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)),
   // DOM element ONLY
-  children: PropTypes.oneOfType([PropTypes.element, // React element
+  children: PropTypes.oneOfType([PropTypes.element,
+  // React element
   PropTypes.instanceOf(ElementType) // DOM element
-  ]) // NOTE: _createFocusTrap is internal, for testing purposes only, so we don't
+  ])
+
+  // NOTE: _createFocusTrap is internal, for testing purposes only, so we don't
   //  specify it here. It's expected to be set to the function returned from
   //  require('focus-trap'), or one with a compatible interface.
-
 };
+
 FocusTrap.defaultProps = {
   active: true,
   paused: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "9.0.2",
+  "version": "10.0.1",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -57,46 +57,46 @@
   },
   "homepage": "https://github.com/focus-trap/focus-trap-react#readme",
   "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.5",
-    "@babel/eslint-parser": "^7.18.2",
-    "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-react": "^7.17.12",
-    "@changesets/cli": "^2.23.0",
-    "@testing-library/cypress": "^8.0.3",
-    "@testing-library/dom": "^8.13.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.2.0",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@changesets/cli": "^2.25.2",
+    "@testing-library/cypress": "^8.0.7",
+    "@testing-library/dom": "^8.19.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jquery": "^3.5.14",
-    "all-contributors-cli": "^6.20.0",
-    "babel-jest": "^28.1.1",
+    "all-contributors-cli": "^6.24.0",
+    "babel-jest": "^29.3.1",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
-    "budo": "^11.7.0",
-    "cypress": "^10.1.0",
+    "budo": "^11.8.4",
+    "cypress": "^10.11.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.17.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-jest": "^26.5.3",
-    "eslint-plugin-react": "^7.30.0",
-    "jest": "^28.1.1",
-    "jest-environment-jsdom": "^28.1.1",
-    "jest-watch-typeahead": "^1.1.0",
+    "eslint-plugin-jest": "^27.1.5",
+    "eslint-plugin-react": "^7.31.10",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-watch-typeahead": "^2.2.0",
     "onchange": "^7.1.0",
-    "prettier": "^2.7.0",
+    "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "regenerator-runtime": "^0.13.9",
+    "regenerator-runtime": "^0.13.10",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.7.3"
+    "typescript": "^4.9.3"
   },
   "dependencies": {
-    "focus-trap": "^6.9.4",
-    "tabbable": "^5.3.3"
+    "focus-trap": "^7.1.0",
+    "tabbable": "^6.0.1"
   },
   "peerDependencies": {
     "prop-types": "^15.8.1",

package/src/focus-trap-react.js

@@ -453,7 +453,12 @@ FocusTrap.propTypes = {
     allowOutsideClick: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     preventScroll: PropTypes.bool,
     tabbableOptions: PropTypes.shape({
-      displayCheck: PropTypes.oneOf(['full', 'non-zero-area', 'none']),
+      displayCheck: PropTypes.oneOf([
+        'full',
+        'legacy-full',
+        'non-zero-area',
+        'none',
+      ]),
       getShadowRoot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     }),
   }),