focus-trap-react 10.0.0 → 10.0.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 10.0.2
+
+### Patch Changes
+
+- 0c98e74: Add missing trapStack option from focus-trap 7.1.0, add new isKeyForward and isKeyBackward options from focus-trap 7.2.0, bump focus-trap to 7.2.0.
+
+## 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

package/README.md

@@ -145,9 +145,34 @@ ReactDOM.render(<Demo />, document.getElementById('root')); // React 16-17
 createRoot(document.getElementById('root')).render(<Demo />); // React 18
 ```
 
-### Props
+## ❗️❗️ React 18 Strict Mode ❗️❗️
 
-#### children
+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).
+
+__[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.
 >
@@ -237,7 +262,7 @@ const root = createRoot(container);
 root.render(<DemoFunctionChild />);
 ```
 
-#### focusTrapOptions
+### focusTrapOptions
 
 Type: `Object`, optional
 
@@ -245,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
 
@@ -253,13 +278,13 @@ 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
 

package/dist/focus-trap-react.js

@@ -1,65 +1,42 @@
 "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 _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, _toPropertyKey(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; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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 +44,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 +82,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 +99,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 +153,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 +180,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 +188,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 +212,6 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
           allowDeactivation: allowDeactivation
         };
       }
-
       return allowDeactivation;
     }
   }, {
@@ -258,32 +227,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 +287,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 +310,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 +324,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 +340,6 @@ var FocusTrap = /*#__PURE__*/function (_React$Component) {
         if (hasPaused) {
           this.focusTrap.pause();
         }
-
         if (hasUnpaused) {
           this.focusTrap.unpause();
         }
@@ -384,13 +348,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 +371,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 +385,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 +410,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]),
@@ -466,17 +422,23 @@ FocusTrap.propTypes = {
     tabbableOptions: PropTypes.shape({
       displayCheck: PropTypes.oneOf(['full', 'legacy-full', 'non-zero-area', 'none']),
       getShadowRoot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func])
-    })
+    }),
+    trapStack: PropTypes.array,
+    isKeyForward: PropTypes.func,
+    isKeyBackward: 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": "10.0.0",
+  "version": "10.0.2",
   "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.18.10",
-    "@babel/core": "^7.18.13",
-    "@babel/eslint-parser": "^7.18.9",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.5",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@changesets/cli": "^2.24.3",
-    "@testing-library/cypress": "^8.0.3",
-    "@testing-library/dom": "^8.17.1",
+    "@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.3.0",
+    "@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.3",
+    "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.6.0",
+    "budo": "^11.8.4",
+    "cypress": "^11.2.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.22.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-jest": "^26.8.7",
-    "eslint-plugin-react": "^7.30.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "jest-watch-typeahead": "^2.0.0",
+    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-react": "^7.31.11",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-watch-typeahead": "^2.2.1",
     "onchange": "^7.1.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "regenerator-runtime": "^0.13.9",
+    "regenerator-runtime": "^0.13.11",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.3"
   },
   "dependencies": {
-    "focus-trap": "^7.0.0",
-    "tabbable": "^6.0.0"
+    "focus-trap": "^7.2.0",
+    "tabbable": "^6.0.1"
   },
   "peerDependencies": {
     "prop-types": "^15.8.1",

package/src/focus-trap-react.js

@@ -461,6 +461,9 @@ FocusTrap.propTypes = {
       ]),
       getShadowRoot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     }),
+    trapStack: PropTypes.array,
+    isKeyForward: PropTypes.func,
+    isKeyBackward: PropTypes.func,
   }),
   containerElements: PropTypes.arrayOf(PropTypes.instanceOf(ElementType)), // DOM element ONLY
   children: PropTypes.oneOfType([