focus-trap 8.2.0 → 8.2.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 8.2.1
+
+### Patch Changes
+
+- 7e0e518: Fixes lifecycle ordering bug introduced in v8.0.0 that always delays the order even if `delayInitialFocus=false`, `delayReturnFocus=false`, `checkCanFocusTrap=undefined`, `checkCanReturnFocus=undefined` (which would indicate a fully synchronous activation/pause/unpause/deactivation process) [#1862](https://github.com/focus-trap/focus-trap/issues/1862)
+- 2cba31e: Improve shadow DOM focus handling for nested traps by ensuring a parent trap resumes using the innermost active element ([#1885](https://github.com/focus-trap/focus-trap/issues/1885))
+
 ## 8.2.0
 
 ### Minor Changes

package/README.md

@@ -607,7 +607,7 @@ In alphabetical order:
       <td align="center" valign="top" width="14.28%"><a href="http://davidtheclark.com/"><img src="https://avatars2.githubusercontent.com/u/628431?v=4?s=100" width="100px;" alt="David Clark"/><br /><sub><b>David Clark</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=davidtheclark" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Adavidtheclark" title="Bug reports">🐛</a> <a href="#infra-davidtheclark" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=davidtheclark" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=davidtheclark" title="Documentation">📖</a> <a href="#maintenance-davidtheclark" title="Maintenance">🚧</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/features/security"><img src="https://avatars1.githubusercontent.com/u/27347476?v=4?s=100" width="100px;" alt="Dependabot"/><br /><sub><b>Dependabot</b></sub></a><br /><a href="#maintenance-dependabot" title="Maintenance">🚧</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ShGKme"><img src="https://avatars.githubusercontent.com/u/25978914?v=4?s=100" width="100px;" alt="Grigorii K. Shartsev"/><br /><sub><b>Grigorii K. Shartsev</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3AShGKme" title="Bug reports">🐛</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/jcfranco"><img src="https://avatars.githubusercontent.com/u/197440?v=4?s=100" width="100px;" alt="JC Franco"/><br /><sub><b>JC Franco</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=jcfranco" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/jcfranco"><img src="https://avatars.githubusercontent.com/u/197440?v=4?s=100" width="100px;" alt="JC Franco"/><br /><sub><b>JC Franco</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=jcfranco" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Ajcfranco" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://www.schilljs.com/"><img src="https://avatars.githubusercontent.com/u/213943?v=4?s=100" width="100px;" alt="Joas Schilling"/><br /><sub><b>Joas Schilling</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/pulls?q=is%3Apr+reviewed-by%3Anickvergessen" title="Reviewed Pull Requests">👀</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/skjnldsv"><img src="https://avatars.githubusercontent.com/u/14975046?v=4?s=100" width="100px;" alt="John Molakvoæ"/><br /><sub><b>John Molakvoæ</b></sub></a><br /><a href="#ideas-skjnldsv" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>

package/dist/focus-trap.esm.js

@@ -1,5 +1,5 @@
 /*!
-* focus-trap 8.2.0
+* focus-trap 8.2.1
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 import { tabbable, focusable, isTabbable, getTabIndex, isFocusable } from 'tabbable';
@@ -12,31 +12,6 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithoutHoles(r) {
   if (Array.isArray(r)) return _arrayLikeToArray(r);
 }
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-  try {
-    var i = n[a](c),
-      u = i.value;
-  } catch (n) {
-    return void e(n);
-  }
-  i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-  return function () {
-    var t = this,
-      e = arguments;
-    return new Promise(function (r, o) {
-      var a = n.apply(t, e);
-      function _next(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-      }
-      function _throw(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-      }
-      _next(void 0);
-    });
-  };
-}
 function _createForOfIteratorHelper(r, e) {
   var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (!t) {
@@ -120,114 +95,6 @@ function _objectSpread2(e) {
   }
   return e;
 }
-function _regenerator() {
-  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
-  var e,
-    t,
-    r = "function" == typeof Symbol ? Symbol : {},
-    n = r.iterator || "@@iterator",
-    o = r.toStringTag || "@@toStringTag";
-  function i(r, n, o, i) {
-    var c = n && n.prototype instanceof Generator ? n : Generator,
-      u = Object.create(c.prototype);
-    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
-      var i,
-        c,
-        u,
-        f = 0,
-        p = o || [],
-        y = false,
-        G = {
-          p: 0,
-          n: 0,
-          v: e,
-          a: d,
-          f: d.bind(e, 4),
-          d: function (t, r) {
-            return i = t, c = 0, u = e, G.n = r, a;
-          }
-        };
-      function d(r, n) {
-        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
-          var o,
-            i = p[t],
-            d = G.p,
-            l = i[2];
-          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
-        }
-        if (o || r > 1) return a;
-        throw y = true, n;
-      }
-      return function (o, p, l) {
-        if (f > 1) throw TypeError("Generator is already running");
-        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
-          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
-          try {
-            if (f = 2, i) {
-              if (c || (o = "next"), t = i[o]) {
-                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
-                if (!t.done) return t;
-                u = t.value, c < 2 && (c = 0);
-              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
-              i = e;
-            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
-          } catch (t) {
-            i = e, c = 1, u = t;
-          } finally {
-            f = 1;
-          }
-        }
-        return {
-          value: t,
-          done: y
-        };
-      };
-    }(r, o, i), true), u;
-  }
-  var a = {};
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-  t = Object.getPrototypeOf;
-  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
-      return this;
-    }), t),
-    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
-  function f(e) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
-  }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
-    return this;
-  }), _regeneratorDefine(u, "toString", function () {
-    return "[object Generator]";
-  }), (_regenerator = function () {
-    return {
-      w: i,
-      m: f
-    };
-  })();
-}
-function _regeneratorDefine(e, r, n, t) {
-  var i = Object.defineProperty;
-  try {
-    i({}, "", {});
-  } catch (e) {
-    i = 0;
-  }
-  _regeneratorDefine = function (e, r, n, t) {
-    function o(r, n) {
-      _regeneratorDefine(e, r, function (e) {
-        return this._invoke(r, n, e);
-      });
-    }
-    r ? i ? i(e, r, {
-      value: n,
-      enumerable: !t,
-      configurable: !t,
-      writable: !t
-    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
-  }, _regeneratorDefine(e, r, n, t);
-}
 function _toConsumableArray(r) {
   return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
@@ -506,6 +373,25 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     }
     return node;
   };
+
+  /**
+   * Gets the current activeElement. If it's a web-component and has open shadow-root
+   * it will recursively search inside shadow roots for the "true" activeElement.
+   *
+   * @param {Document | ShadowRoot} el
+   *
+   * @returns {HTMLElement|null} The element that currently has the focus. `null` if a focused element isn't found.
+   **/
+  var _getActiveElement = function getActiveElement(el) {
+    var activeElement = el.activeElement;
+    if (!activeElement) {
+      return null;
+    }
+    if (activeElement.shadowRoot && activeElement.shadowRoot.activeElement !== null) {
+      return _getActiveElement(activeElement.shadowRoot);
+    }
+    return activeElement;
+  };
   var getInitialFocusNode = function getInitialFocusNode() {
     var node = getNodeForOption('initialFocus', {
       hasFallback: true
@@ -516,9 +402,11 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       return false;
     }
     if (node === undefined || node && !isFocusable(node, config.tabbableOptions)) {
+      var activeElement = _getActiveElement(doc);
+
       // option not specified nor focusable: use fallback options
-      if (findContainerIndex(doc.activeElement) >= 0) {
-        node = doc.activeElement;
+      if (findContainerIndex(activeElement) >= 0) {
+        node = activeElement;
       } else {
         var firstTabbableGroup = state.tabbableGroups[0];
         var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;
@@ -630,25 +518,6 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.");
     }
   };
-
-  /**
-   * Gets the current activeElement. If it's a web-component and has open shadow-root
-   * it will recursively search inside shadow roots for the "true" activeElement.
-   *
-   * @param {Document | ShadowRoot} el
-   *
-   * @returns {HTMLElement} The element that currently has the focus
-   **/
-  var _getActiveElement = function getActiveElement(el) {
-    var activeElement = el.activeElement;
-    if (!activeElement) {
-      return;
-    }
-    if (activeElement.shadowRoot && activeElement.shadowRoot.activeElement !== null) {
-      return _getActiveElement(activeElement.shadowRoot);
-    }
-    return activeElement;
-  };
   var _tryFocus = function tryFocus(node) {
     if (node === false) {
       return;
@@ -969,12 +838,13 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   /**
    * Adds listeners to the document necessary for trapping focus and attempts to set focus
    *  to the configured initial focus node. Does nothing if the trap isn't active.
-   * @returns {Promise<void>} Resolved (always) once the initial focus node has been focused.
-   *  Also resolved if the trap isn't active.
+   * @returns {Promise<void> | undefined} A promise resolved once the initial focus node has
+   *  been focused when `delayInitialFocus=true`; `undefined` when focus is set synchronously
+   *  or the trap isn't active.
    */
   var addListeners = function addListeners() {
     if (!state.active) {
-      return Promise.resolve();
+      return;
     }
 
     // There can be only one listening focus trap at a time
@@ -982,7 +852,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 
     // Delay ensures that the focused element doesn't capture the event
     // that caused the focus trap activation.
-    /** @type {Promise<void>} */
+    /** @type {Promise<void> | undefined} */
     var promise;
     if (config.delayInitialFocus) {
       // NOTE: Promise constructor callback is called synchronously, which is what we want
@@ -994,7 +864,6 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         });
       });
     } else {
-      promise = Promise.resolve();
       _tryFocus(getInitialFocusNode());
     }
     doc.addEventListener('focusin', checkFocusIn, true);
@@ -1186,37 +1055,30 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         onActivate === null || onActivate === void 0 || onActivate({
           trap: trap
         });
-        var finishActivation = /*#__PURE__*/function () {
-          var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-            return _regenerator().w(function (_context) {
-              while (1) switch (_context.n) {
-                case 0:
-                  if (checkCanFocusTrap) {
-                    updateTabbableNodes();
-                  }
-
-                  // NOTE: wait for initial focus node to get focused before we potentially isolate
-                  //  the subtrees with aria-hidden while focus is still in some other subtree and
-                  //  not yet in the trap, resulting in some browsers (e.g. Chrome) logging to the
-                  //  console that they, "Blocked aria-hidden on an element because its descendant
-                  //  retained focus..."
-                  _context.n = 1;
-                  return addListeners();
-                case 1:
-                  trap._setSubtreeIsolation(true);
-                  updateObservedNodes();
-                  onPostActivate === null || onPostActivate === void 0 || onPostActivate({
-                    trap: trap
-                  });
-                case 2:
-                  return _context.a(2);
-              }
-            }, _callee);
-          }));
-          return function finishActivation() {
-            return _ref6.apply(this, arguments);
+        var finishActivation = function finishActivation() {
+          if (checkCanFocusTrap) {
+            updateTabbableNodes();
+          }
+          var afterListeners = function afterListeners() {
+            trap._setSubtreeIsolation(true);
+            updateObservedNodes();
+            onPostActivate === null || onPostActivate === void 0 || onPostActivate({
+              trap: trap
+            });
           };
-        }();
+
+          // NOTE: wait for initial focus node to get focused (whether activation is fully,
+          //  partially, or not asynchronous) before we potentially isolate the subtrees
+          //  with aria-hidden while focus is still in some other subtree and not yet in
+          //  the trap, resulting in some browsers (e.g. Chrome) logging to the console that
+          //  they, "Blocked aria-hidden on an element because its descendant retained focus..."
+          var listenersPromise = addListeners();
+          if (listenersPromise) {
+            listenersPromise.then(afterListeners);
+          } else {
+            afterListeners();
+          }
+        };
         if (checkCanFocusTrap) {
           checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
           return this;
@@ -1356,35 +1218,28 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           onUnpause === null || onUnpause === void 0 || onUnpause({
             trap: trap
           });
-          var finishUnpause = /*#__PURE__*/function () {
-            var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-              return _regenerator().w(function (_context2) {
-                while (1) switch (_context2.n) {
-                  case 0:
-                    updateTabbableNodes();
-
-                    // NOTE: wait for initial focus node to get focused before we potentially isolate
-                    //  the subtrees with aria-hidden while focus is still in some other subtree and
-                    //  not yet in the trap, resulting in some browsers (e.g. Chrome) logging to the
-                    //  console that they, "Blocked aria-hidden on an element because its descendant
-                    //  retained focus..."
-                    _context2.n = 1;
-                    return addListeners();
-                  case 1:
-                    trap._setSubtreeIsolation(true);
-                    updateObservedNodes();
-                    onPostUnpause === null || onPostUnpause === void 0 || onPostUnpause({
-                      trap: trap
-                    });
-                  case 2:
-                    return _context2.a(2);
-                }
-              }, _callee2);
-            }));
-            return function finishUnpause() {
-              return _ref7.apply(this, arguments);
+          var finishUnpause = function finishUnpause() {
+            updateTabbableNodes();
+            var afterListeners = function afterListeners() {
+              trap._setSubtreeIsolation(true);
+              updateObservedNodes();
+              onPostUnpause === null || onPostUnpause === void 0 || onPostUnpause({
+                trap: trap
+              });
             };
-          }();
+
+            // NOTE: wait for initial focus node to get focused (whether activation is fully,
+            //  partially, or not asynchronous) before we potentially isolate the subtrees
+            //  with aria-hidden while focus is still in some other subtree and not yet in
+            //  the trap, resulting in some browsers (e.g. Chrome) logging to the console that
+            //  they, "Blocked aria-hidden on an element because its descendant retained focus..."
+            var listenersPromise = addListeners();
+            if (listenersPromise) {
+              listenersPromise.then(afterListeners);
+            } else {
+              afterListeners();
+            }
+          };
           finishUnpause();
         }
         return this;