focus-trap 7.6.6 → 7.7.0

package/dist/focus-trap.umd.js

@@ -1,5 +1,5 @@
 /*!
-* focus-trap 7.6.6
+* focus-trap 7.7.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 (function (global, factory) {
@@ -21,6 +21,54 @@
   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,
@@ -82,12 +130,18 @@
   }
 
   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) {
@@ -98,13 +152,24 @@
         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);
       }
     }
   };
@@ -167,29 +232,31 @@
       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
 
@@ -198,6 +265,12 @@
       // 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,
@@ -801,6 +874,74 @@
       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;
@@ -869,26 +1010,47 @@
         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) {
@@ -902,6 +1064,15 @@
         }, 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;
@@ -949,8 +1120,14 @@
         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;
@@ -974,11 +1151,13 @@
             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();
@@ -986,6 +1165,27 @@
           }
           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;
+                }
+              }
+            });
+          }
+        }
       }
     });