focus-trap 7.6.5 → 7.7.0

package/dist/focus-trap.esm.js

@@ -1,5 +1,5 @@
 /*!
-* focus-trap 7.6.5
+* focus-trap 7.7.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 import { tabbable, focusable, isTabbable, getTabIndex, isFocusable } from 'tabbable';
@@ -12,6 +12,54 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithoutHoles(r) {
   if (Array.isArray(r)) return _arrayLikeToArray(r);
 }
+function _createForOfIteratorHelper(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (!t) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+      t && (r = t);
+      var n = 0,
+        F = function () {};
+      return {
+        s: F,
+        n: function () {
+          return n >= r.length ? {
+            done: true
+          } : {
+            done: false,
+            value: r[n++]
+          };
+        },
+        e: function (r) {
+          throw r;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var o,
+    a = true,
+    u = false;
+  return {
+    s: function () {
+      t = t.call(r);
+    },
+    n: function () {
+      var r = t.next();
+      return a = r.done, r;
+    },
+    e: function (r) {
+      u = true, o = r;
+    },
+    f: function () {
+      try {
+        a || null == t.return || t.return();
+      } finally {
+        if (u) throw o;
+      }
+    }
+  };
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -73,12 +121,18 @@ function _unsupportedIterableToArray(r, a) {
 }
 
 var activeFocusTraps = {
+  // Returns the trap from the top of the stack.
+  getActiveTrap: function getActiveTrap(trapStack) {
+    if ((trapStack === null || trapStack === void 0 ? void 0 : trapStack.length) > 0) {
+      return trapStack[trapStack.length - 1];
+    }
+    return null;
+  },
+  // Pauses the currently active trap, then adds a new trap to the stack.
   activateTrap: function activateTrap(trapStack, trap) {
-    if (trapStack.length > 0) {
-      var activeTrap = trapStack[trapStack.length - 1];
-      if (activeTrap !== trap) {
-        activeTrap._setPausedState(true);
-      }
+    var activeTrap = activeFocusTraps.getActiveTrap(trapStack);
+    if (trap !== activeTrap) {
+      activeFocusTraps.pauseTrap(trapStack);
     }
     var trapIndex = trapStack.indexOf(trap);
     if (trapIndex === -1) {
@@ -89,13 +143,24 @@ var activeFocusTraps = {
       trapStack.push(trap);
     }
   },
+  // Removes the trap from the top of the stack, then unpauses the next trap down.
   deactivateTrap: function deactivateTrap(trapStack, trap) {
     var trapIndex = trapStack.indexOf(trap);
     if (trapIndex !== -1) {
       trapStack.splice(trapIndex, 1);
     }
-    if (trapStack.length > 0 && !trapStack[trapStack.length - 1]._isManuallyPaused()) {
-      trapStack[trapStack.length - 1]._setPausedState(false);
+    activeFocusTraps.unpauseTrap(trapStack);
+  },
+  // Pauses the trap at the top of the stack.
+  pauseTrap: function pauseTrap(trapStack) {
+    var activeTrap = activeFocusTraps.getActiveTrap(trapStack);
+    activeTrap === null || activeTrap === void 0 || activeTrap._setPausedState(true);
+  },
+  // Unpauses the trap at the top of the stack.
+  unpauseTrap: function unpauseTrap(trapStack) {
+    var activeTrap = activeFocusTraps.getActiveTrap(trapStack);
+    if (activeTrap && !activeTrap._isManuallyPaused()) {
+      activeTrap._setPausedState(false);
     }
   }
 };
@@ -158,29 +223,31 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     returnFocusOnDeactivate: true,
     escapeDeactivates: true,
     delayInitialFocus: true,
+    isolateSubtrees: false,
     isKeyForward: isKeyForward,
     isKeyBackward: isKeyBackward
   }, userOptions);
   var state = {
     // containers given to createFocusTrap()
-    // @type {Array<HTMLElement>}
+    /** @type {Array<HTMLElement>} */
     containers: [],
     // list of objects identifying tabbable nodes in `containers` in the trap
     // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap
     //  is active, but the trap should never get to a state where there isn't at least one group
     //  with at least one tabbable node in it (that would lead to an error condition that would
     //  result in an error being thrown)
-    // @type {Array<{
-    //   container: HTMLElement,
-    //   tabbableNodes: Array<HTMLElement>, // empty if none
-    //   focusableNodes: Array<HTMLElement>, // empty if none
-    //   posTabIndexesFound: boolean,
-    //   firstTabbableNode: HTMLElement|undefined,
-    //   lastTabbableNode: HTMLElement|undefined,
-    //   firstDomTabbableNode: HTMLElement|undefined,
-    //   lastDomTabbableNode: HTMLElement|undefined,
-    //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
-    // }>}
+    /** @type {Array<{
+     *    container: HTMLElement,
+     *    tabbableNodes: Array<HTMLElement>, // empty if none
+     *    focusableNodes: Array<HTMLElement>, // empty if none
+     *    posTabIndexesFound: boolean,
+     *    firstTabbableNode: HTMLElement|undefined,
+     *    lastTabbableNode: HTMLElement|undefined,
+     *    firstDomTabbableNode: HTMLElement|undefined,
+     *    lastDomTabbableNode: HTMLElement|undefined,
+     *    nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
+     *  }>}
+     */
     containerGroups: [],
     // same order/length as `containers` list
 
@@ -189,6 +256,12 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     // NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
     //  the same length
     tabbableGroups: [],
+    // references to nodes that are siblings to the ancestors of this trap's containers.
+    /** @type {Set<HTMLElement>} */
+    adjacentElements: new Set(),
+    // references to nodes that were inert before the trap was activated.
+    /** @type {Set<HTMLElement>} */
+    alreadyInert: new Set(),
     nodeFocusedBeforeActivation: null,
     mostRecentlyFocusedNode: null,
     active: false,
@@ -792,6 +865,74 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     doc.addEventListener('keydown', checkEscapeKey);
     return trap;
   };
+
+  /**
+   * Traverses up the DOM from each of `containers`, collecting references to
+   * the elements that are siblings to `container` or an ancestor of `container`.
+   * @param {Array<HTMLElement>} containers
+   */
+  var collectAdjacentElements = function collectAdjacentElements(containers) {
+    // Re-activate all adjacent elements & clear previous collection.
+    if (state.active && !state.paused) {
+      trap._setSubtreeIsolation(false);
+    }
+    state.adjacentElements.clear();
+    state.alreadyInert.clear();
+
+    // Collect all ancestors of all containers to avoid redundant processing.
+    var containerAncestors = new Set();
+    var adjacentElements = new Set();
+
+    // Compile all elements adjacent to the focus trap containers & lineage.
+    var _iterator = _createForOfIteratorHelper(containers),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var container = _step.value;
+        containerAncestors.add(container);
+        var insideShadowRoot = typeof ShadowRoot !== 'undefined' && container.getRootNode() instanceof ShadowRoot;
+        var current = container;
+        while (current) {
+          containerAncestors.add(current);
+          var parent = current.parentElement;
+          var siblings = [];
+          if (parent) {
+            siblings = parent.children;
+          } else if (!parent && insideShadowRoot) {
+            siblings = current.getRootNode().children;
+            parent = current.getRootNode().host;
+            insideShadowRoot = typeof ShadowRoot !== 'undefined' && parent.getRootNode() instanceof ShadowRoot;
+          }
+
+          // Add all the children, we'll remove container lineage later.
+          var _iterator2 = _createForOfIteratorHelper(siblings),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var child = _step2.value;
+              adjacentElements.add(child);
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+          current = parent;
+        }
+      }
+
+      // Multi-container traps may overlap.
+      // Remove elements within container lineages.
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    containerAncestors.forEach(function (el) {
+      adjacentElements["delete"](el);
+    });
+    state.adjacentElements = adjacentElements;
+  };
   var removeListeners = function removeListeners() {
     if (!state.active) {
       return;
@@ -860,26 +1001,47 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       var onActivate = getOption(activateOptions, 'onActivate');
       var onPostActivate = getOption(activateOptions, 'onPostActivate');
       var checkCanFocusTrap = getOption(activateOptions, 'checkCanFocusTrap');
-      if (!checkCanFocusTrap) {
-        updateTabbableNodes();
+
+      // If a currently-active trap is isolating its subtree, we need to remove
+      // that isolation to allow the new trap to find tabbable nodes.
+      var preexistingTrap = activeFocusTraps.getActiveTrap(trapStack);
+      var revertState = false;
+      if (preexistingTrap && !preexistingTrap.paused) {
+        preexistingTrap._setSubtreeIsolation(false);
+        revertState = true;
       }
-      state.active = true;
-      state.paused = false;
-      state.nodeFocusedBeforeActivation = _getActiveElement(doc);
-      onActivate === null || onActivate === void 0 || onActivate();
-      var finishActivation = function finishActivation() {
-        if (checkCanFocusTrap) {
+      try {
+        if (!checkCanFocusTrap) {
           updateTabbableNodes();
         }
-        addListeners();
-        updateObservedNodes();
-        onPostActivate === null || onPostActivate === void 0 || onPostActivate();
-      };
-      if (checkCanFocusTrap) {
-        checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
-        return this;
+        state.active = true;
+        state.paused = false;
+        state.nodeFocusedBeforeActivation = _getActiveElement(doc);
+        onActivate === null || onActivate === void 0 || onActivate();
+        var finishActivation = function finishActivation() {
+          if (checkCanFocusTrap) {
+            updateTabbableNodes();
+          }
+          addListeners();
+          updateObservedNodes();
+          if (config.isolateSubtrees) {
+            trap._setSubtreeIsolation(true);
+          }
+          onPostActivate === null || onPostActivate === void 0 || onPostActivate();
+        };
+        if (checkCanFocusTrap) {
+          checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
+          return this;
+        }
+        finishActivation();
+      } catch (error) {
+        // If our activation throws an exception and the stack hasn't changed,
+        // we need to re-enable the prior trap's subtree isolation.
+        if (preexistingTrap === activeFocusTraps.getActiveTrap(trapStack) && revertState) {
+          preexistingTrap._setSubtreeIsolation(true);
+        }
+        throw error;
       }
-      finishActivation();
       return this;
     },
     deactivate: function deactivate(deactivateOptions) {
@@ -893,6 +1055,15 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       }, deactivateOptions);
       clearTimeout(state.delayInitialFocusTimer); // noop if undefined
       state.delayInitialFocusTimer = undefined;
+
+      // Prior to removing this trap from the trapStack, we need to remove any applications of `inert`.
+      // This allows the next trap down to update its tabbable nodes properly.
+      //
+      // If this trap is not top of the stack, don't change any current isolation.
+      if (!state.paused) {
+        trap._setSubtreeIsolation(false);
+      }
+      state.alreadyInert.clear();
       removeListeners();
       state.active = false;
       state.paused = false;
@@ -940,8 +1111,14 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       state.containers = elementsAsArray.map(function (element) {
         return typeof element === 'string' ? doc.querySelector(element) : element;
       });
+      if (config.isolateSubtrees) {
+        collectAdjacentElements(state.containers);
+      }
       if (state.active) {
         updateTabbableNodes();
+        if (config.isolateSubtrees && !state.paused) {
+          trap._setSubtreeIsolation(true);
+        }
       }
       updateObservedNodes();
       return this;
@@ -965,11 +1142,13 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           onPause === null || onPause === void 0 || onPause();
           removeListeners();
           updateObservedNodes();
+          trap._setSubtreeIsolation(false);
           onPostPause === null || onPostPause === void 0 || onPostPause();
         } else {
           var onUnpause = getOption(options, 'onUnpause');
           var onPostUnpause = getOption(options, 'onPostUnpause');
           onUnpause === null || onUnpause === void 0 || onUnpause();
+          trap._setSubtreeIsolation(true);
           updateTabbableNodes();
           addListeners();
           updateObservedNodes();
@@ -977,6 +1156,27 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         }
         return this;
       }
+    },
+    _setSubtreeIsolation: {
+      value: function value(isEnabled) {
+        if (config.isolateSubtrees) {
+          state.adjacentElements.forEach(function (el) {
+            if (isEnabled) {
+              // check both attribute and property to ensure initial state is captured
+              // correctly across different browsers and test environments (like JSDOM)
+              var isInitiallyInert = el.inert || el.hasAttribute('inert');
+              if (isInitiallyInert) {
+                state.alreadyInert.add(el);
+              }
+              el.inert = true;
+            } else {
+              if (state.alreadyInert.has(el)) ; else {
+                el.inert = false;
+              }
+            }
+          });
+        }
+      }
     }
   });