focus-trap 7.5.4 → 7.6.1

package/dist/focus-trap.umd.js

@@ -1,5 +1,5 @@
 /*!
-* focus-trap 7.5.4
+* focus-trap 7.6.1
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 (function (global, factory) {
@@ -13,6 +13,28 @@
   })());
 })(this, (function (exports, tabbable) { 'use strict';
 
+  function _arrayLikeToArray(r, a) {
+    (null == a || a > r.length) && (a = r.length);
+    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+    return n;
+  }
+  function _arrayWithoutHoles(r) {
+    if (Array.isArray(r)) return _arrayLikeToArray(r);
+  }
+  function _defineProperty(e, r, t) {
+    return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+      value: t,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }) : e[r] = t, e;
+  }
+  function _iterableToArray(r) {
+    if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+  }
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
   function ownKeys(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -34,33 +56,29 @@
     }
     return e;
   }
-  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 _toConsumableArray(r) {
+    return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
   }
-  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;
+  function _toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+      var i = e.call(t, r || "default");
+      if ("object" != typeof i) return i;
       throw new TypeError("@@toPrimitive must return a primitive value.");
     }
-    return (hint === "string" ? String : Number)(input);
+    return ("string" === r ? String : Number)(t);
   }
-  function _toPropertyKey(arg) {
-    var key = _toPrimitive(arg, "string");
-    return typeof key === "symbol" ? key : String(key);
+  function _toPropertyKey(t) {
+    var i = _toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : i + "";
+  }
+  function _unsupportedIterableToArray(r, a) {
+    if (r) {
+      if ("string" == typeof r) return _arrayLikeToArray(r, a);
+      var t = {}.toString.call(r).slice(8, -1);
+      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+    }
   }
 
   var activeFocusTraps = {
@@ -122,10 +140,8 @@
         idx = i;
         return false; // break
       }
-
       return true; // next
     });
-
     return idx;
   };
 
@@ -238,7 +254,7 @@
       return state.containerGroups.findIndex(function (_ref) {
         var container = _ref.container,
           tabbableNodes = _ref.tabbableNodes;
-        return container.contains(element) || ( // fall back to explicit tabbable search which will take into consideration any
+        return container.contains(element) || (// fall back to explicit tabbable search which will take into consideration any
         //  web components if the `tabbableOptions.getShadowRoot` option was used for
         //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
         //  look inside web components even if open)
@@ -254,25 +270,31 @@
      *  (if a node is explicitly NOT given), or a function that returns any of these
      *  values.
      * @param {string} optionName
-     * @returns {undefined | false | HTMLElement | SVGElement} Returns
-     *  `undefined` if the option is not specified; `false` if the option
-     *  resolved to `false` (node explicitly not given); otherwise, the resolved
-     *  DOM node.
+     * @param {Object} options
+     * @param {boolean} [options.hasFallback] True if the option could be a selector string
+     *  and the option allows for a fallback scenario in the case where the selector is
+     *  valid but does not match a node (i.e. the queried node doesn't exist in the DOM).
+     * @param {Array} [options.params] Params to pass to the option if it's a function.
+     * @returns {undefined | null | false | HTMLElement | SVGElement} Returns
+     *  `undefined` if the option is not specified; `null` if the option didn't resolve
+     *  to a node but `options.hasFallback=true`, `false` if the option resolved to `false`
+     *  (node explicitly not given); otherwise, the resolved DOM node.
      * @throws {Error} If the option is set, not `false`, and is not, or does not
-     *  resolve to a node.
+     *  resolve to a node, unless the option is a selector string and `options.hasFallback=true`.
      */
     var getNodeForOption = function getNodeForOption(optionName) {
+      var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref2$hasFallback = _ref2.hasFallback,
+        hasFallback = _ref2$hasFallback === void 0 ? false : _ref2$hasFallback,
+        _ref2$params = _ref2.params,
+        params = _ref2$params === void 0 ? [] : _ref2$params;
       var optionValue = config[optionName];
       if (typeof optionValue === 'function') {
-        for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          params[_key2 - 1] = arguments[_key2];
-        }
-        optionValue = optionValue.apply(void 0, params);
+        optionValue = optionValue.apply(void 0, _toConsumableArray(params));
       }
       if (optionValue === true) {
         optionValue = undefined; // use default value
       }
-
       if (!optionValue) {
         if (optionValue === undefined || optionValue === false) {
           return optionValue;
@@ -284,21 +306,31 @@
       var node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point
 
       if (typeof optionValue === 'string') {
-        node = doc.querySelector(optionValue); // resolve to node, or null if fails
+        try {
+          node = doc.querySelector(optionValue); // resolve to node, or null if fails
+        } catch (err) {
+          throw new Error("`".concat(optionName, "` appears to be an invalid selector; error=\"").concat(err.message, "\""));
+        }
         if (!node) {
-          throw new Error("`".concat(optionName, "` as selector refers to no known node"));
+          if (!hasFallback) {
+            throw new Error("`".concat(optionName, "` as selector refers to no known node"));
+          }
+          // else, `node` MUST be `null` because that's what `Document.querySelector()` returns
+          //  if the selector is valid but doesn't match anything
         }
       }
       return node;
     };
     var getInitialFocusNode = function getInitialFocusNode() {
-      var node = getNodeForOption('initialFocus');
+      var node = getNodeForOption('initialFocus', {
+        hasFallback: true
+      });
 
       // false explicitly indicates we want no initialFocus at all
       if (node === false) {
         return false;
       }
-      if (node === undefined || !tabbable.isFocusable(node, config.tabbableOptions)) {
+      if (node === undefined || node && !tabbable.isFocusable(node, config.tabbableOptions)) {
         // option not specified nor focusable: use fallback options
         if (findContainerIndex(doc.activeElement) >= 0) {
           node = doc.activeElement;
@@ -309,6 +341,10 @@
           // NOTE: `fallbackFocus` option function cannot return `false` (not supported)
           node = firstTabbableNode || getNodeForOption('fallbackFocus');
         }
+      } else if (node === null) {
+        // option is a VALID selector string that doesn't yield a node: use the `fallbackFocus`
+        //  option instead of the default behavior when the option isn't specified at all
+        node = getNodeForOption('fallbackFocus');
       }
       if (!node) {
         throw new Error('Your focus-trap needs to have at least one focusable element');
@@ -418,25 +454,25 @@
      *
      * @returns {HTMLElement} The element that currently has the focus
      **/
-    var getActiveElement = function getActiveElement(el) {
+    var _getActiveElement = function getActiveElement(el) {
       var activeElement = el.activeElement;
       if (!activeElement) {
         return;
       }
       if (activeElement.shadowRoot && activeElement.shadowRoot.activeElement !== null) {
-        return getActiveElement(activeElement.shadowRoot);
+        return _getActiveElement(activeElement.shadowRoot);
       }
       return activeElement;
     };
-    var tryFocus = function tryFocus(node) {
+    var _tryFocus = function tryFocus(node) {
       if (node === false) {
         return;
       }
-      if (node === getActiveElement(document)) {
+      if (node === _getActiveElement(document)) {
         return;
       }
       if (!node || !node.focus) {
-        tryFocus(getInitialFocusNode());
+        _tryFocus(getInitialFocusNode());
         return;
       }
       node.focus({
@@ -449,7 +485,9 @@
       }
     };
     var getReturnFocusNode = function getReturnFocusNode(previousActiveElement) {
-      var node = getNodeForOption('setReturnFocus', previousActiveElement);
+      var node = getNodeForOption('setReturnFocus', {
+        params: [previousActiveElement]
+      });
       return node ? node : node === false ? false : previousActiveElement;
     };
 
@@ -464,11 +502,11 @@
      * @returns {Node|undefined} The next node, or `undefined` if a next node couldn't be
      *  determined given the current state of the trap.
      */
-    var findNextNavNode = function findNextNavNode(_ref2) {
-      var target = _ref2.target,
-        event = _ref2.event,
-        _ref2$isBackward = _ref2.isBackward,
-        isBackward = _ref2$isBackward === void 0 ? false : _ref2$isBackward;
+    var findNextNavNode = function findNextNavNode(_ref3) {
+      var target = _ref3.target,
+        event = _ref3.event,
+        _ref3$isBackward = _ref3.isBackward,
+        isBackward = _ref3$isBackward === void 0 ? false : _ref3$isBackward;
       target = target || getActualTarget(event);
       updateTabbableNodes();
       var destinationNode = null;
@@ -492,8 +530,8 @@
           // REVERSE
 
           // is the target the first tabbable node in a group?
-          var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
-            var firstTabbableNode = _ref3.firstTabbableNode;
+          var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref4) {
+            var firstTabbableNode = _ref4.firstTabbableNode;
             return target === firstTabbableNode;
           });
           if (startOfGroupIndex < 0 && (containerGroup.container === target || tabbable.isFocusable(target, config.tabbableOptions) && !tabbable.isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {
@@ -521,8 +559,8 @@
           // FORWARD
 
           // is the target the last tabbable node in a group?
-          var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref4) {
-            var lastTabbableNode = _ref4.lastTabbableNode;
+          var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref5) {
+            var lastTabbableNode = _ref5.lastTabbableNode;
             return target === lastTabbableNode;
           });
           if (lastOfGroupIndex < 0 && (containerGroup.container === target || tabbable.isFocusable(target, config.tabbableOptions) && !tabbable.isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {
@@ -680,9 +718,9 @@
           });
         }
         if (nextNode) {
-          tryFocus(nextNode);
+          _tryFocus(nextNode);
         } else {
-          tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
+          _tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
         }
       }
       state.recentNavEvent = undefined; // clear
@@ -707,19 +745,21 @@
           //  to where it normally would
           event.preventDefault();
         }
-        tryFocus(destinationNode);
+        _tryFocus(destinationNode);
       }
       // else, let the browser take care of [shift+]tab and move the focus
     };
+    var checkTabKey = function checkTabKey(event) {
+      if (config.isKeyForward(event) || config.isKeyBackward(event)) {
+        checkKeyNav(event, config.isKeyBackward(event));
+      }
+    };
 
-    var checkKey = function checkKey(event) {
+    // we use a different event phase for the Escape key to allow canceling the event and checking for this in escapeDeactivates
+    var checkEscapeKey = function checkEscapeKey(event) {
       if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {
         event.preventDefault();
         trap.deactivate();
-        return;
-      }
-      if (config.isKeyForward(event) || config.isKeyBackward(event)) {
-        checkKeyNav(event, config.isKeyBackward(event));
       }
     };
     var checkClick = function checkClick(e) {
@@ -752,8 +792,8 @@
       // Delay ensures that the focused element doesn't capture the event
       // that caused the focus trap activation.
       state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {
-        tryFocus(getInitialFocusNode());
-      }) : tryFocus(getInitialFocusNode());
+        _tryFocus(getInitialFocusNode());
+      }) : _tryFocus(getInitialFocusNode());
       doc.addEventListener('focusin', checkFocusIn, true);
       doc.addEventListener('mousedown', checkPointerDown, {
         capture: true,
@@ -767,10 +807,11 @@
         capture: true,
         passive: false
       });
-      doc.addEventListener('keydown', checkKey, {
+      doc.addEventListener('keydown', checkTabKey, {
         capture: true,
         passive: false
       });
+      doc.addEventListener('keydown', checkEscapeKey);
       return trap;
     };
     var removeListeners = function removeListeners() {
@@ -781,7 +822,8 @@
       doc.removeEventListener('mousedown', checkPointerDown, true);
       doc.removeEventListener('touchstart', checkPointerDown, true);
       doc.removeEventListener('click', checkClick, true);
-      doc.removeEventListener('keydown', checkKey, true);
+      doc.removeEventListener('keydown', checkTabKey, true);
+      doc.removeEventListener('keydown', checkEscapeKey);
       return trap;
     };
 
@@ -800,7 +842,7 @@
       // If the currently focused is removed then browsers will move focus to the
       // <body> element. If this happens, try to move focus back into the trap.
       if (isFocusedNodeRemoved) {
-        tryFocus(getInitialFocusNode());
+        _tryFocus(getInitialFocusNode());
       }
     };
 
@@ -886,7 +928,7 @@
         var finishDeactivation = function finishDeactivation() {
           delay(function () {
             if (returnFocus) {
-              tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
+              _tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
             }
             onPostDeactivate === null || onPostDeactivate === void 0 || onPostDeactivate();
           });
@@ -945,7 +987,5 @@
 
   exports.createFocusTrap = createFocusTrap;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));
 //# sourceMappingURL=focus-trap.umd.js.map