focus-trap - npm Package Compare versions

Comparing version 6.1.4 to 6.2.0

CHANGELOG.md

 # Changelog
 
+## 6.2.0
+
+### Minor Changes
+
+- 2267d17: Adding support for multiple elements to be passed in #217
+
 ## 6.1.4
@@ -4,0 +10,0 @@

dist/focus-trap.esm.js

 /*!
-* focus-trap 6.1.4
+* focus-trap 6.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
@@ -94,5 +94,4 @@ */
 
-function createFocusTrap(element, userOptions) {
+function createFocusTrap(elements, userOptions) {
   var doc = document;
-  var container = typeof element === 'string' ? doc.querySelector(element) : element;
 
@@ -106,4 +105,6 @@ var config = _objectSpread2({
   var state = {
-    firstTabbableNode: null,
-    lastTabbableNode: null,
+    // @type {Array<HTMLElement>}
+    containers: [],
+    // @type {{ firstTabbableNode: HTMLElement, lastTabbableNode: HTMLElement }}
+    tabbableGroups: [],
     nodeFocusedBeforeActivation: null,
@@ -118,6 +119,21 @@ mostRecentlyFocusedNode: null,
     pause: pause,
-    unpause: unpause
+    unpause: unpause,
+    updateContainerElements: updateContainerElements
   };
+  updateContainerElements(elements);
   return trap;
 
+  function updateContainerElements(containerElements) {
+    var elementsAsArray = [].concat(containerElements).filter(Boolean);
+    state.containers = elementsAsArray.map(function (element) {
+      return typeof element === 'string' ? doc.querySelector(element) : element;
+    });
+
+    if (state.active) {
+      updateTabbableNodes();
+    }
+
+    return trap;
+  }
+
   function activate(activateOptions) {
@@ -164,12 +180,14 @@ if (state.active) return;
   function pause() {
-    if (state.paused || !state.active) return;
+    if (state.paused || !state.active) return trap;
     state.paused = true;
     removeListeners();
+    return trap;
   }
 
   function unpause() {
-    if (!state.paused || !state.active) return;
+    if (!state.paused || !state.active) return trap;
     state.paused = false;
     updateTabbableNodes();
     addListeners();
+    return trap;
   }
@@ -248,6 +266,8 @@
       node = getNodeForOption('initialFocus');
-    } else if (container.contains(doc.activeElement)) {
+    } else if (containersContain(doc.activeElement)) {
       node = doc.activeElement;
     } else {
-      node = state.firstTabbableNode || getNodeForOption('fallbackFocus');
+      var firstTabbableGroup = state.tabbableGroups[0];
+      var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;
+      node = firstTabbableNode || getNodeForOption('fallbackFocus');
     }
@@ -270,3 +290,3 @@
   function checkPointerDown(e) {
-    if (container.contains(e.target)) {
+    if (containersContain(e.target)) {
       // allow the click since it ocurred inside the trap
@@ -310,3 +330,3 @@ return;
     // In Firefox when you Tab out of an iframe the Document is briefly focused.
-    if (container.contains(e.target) || e.target instanceof Document) {
+    if (containersContain(e.target) || e.target instanceof Document) {
       return;
@@ -338,13 +358,32 @@ }
     updateTabbableNodes();
+    var destinationNode = null;
 
-    if (e.shiftKey && e.target === state.firstTabbableNode) {
-      e.preventDefault();
-      tryFocus(state.lastTabbableNode);
-      return;
+    if (e.shiftKey) {
+      var startOfGroupIndex = state.tabbableGroups.findIndex(function (_ref) {
+        var firstTabbableNode = _ref.firstTabbableNode;
+        return e.target === firstTabbableNode;
+      });
+
+      if (startOfGroupIndex >= 0) {
+        var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
+        var destinationGroup = state.tabbableGroups[destinationGroupIndex];
+        destinationNode = destinationGroup.lastTabbableNode;
+      }
+    } else {
+      var lastOfGroupIndex = state.tabbableGroups.findIndex(function (_ref2) {
+        var lastTabbableNode = _ref2.lastTabbableNode;
+        return e.target === lastTabbableNode;
+      });
+
+      if (lastOfGroupIndex >= 0) {
+        var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
+
+        var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
+        destinationNode = _destinationGroup.firstTabbableNode;
+      }
     }
 
-    if (!e.shiftKey && e.target === state.lastTabbableNode) {
+    if (destinationNode) {
       e.preventDefault();
-      tryFocus(state.firstTabbableNode);
-      return;
+      tryFocus(destinationNode);
     }
@@ -355,3 +394,3 @@ }
     if (config.clickOutsideDeactivates) return;
-    if (container.contains(e.target)) return;
+    if (containersContain(e.target)) return;
 
@@ -367,5 +406,9 @@ if (config.allowOutsideClick && (typeof config.allowOutsideClick === 'boolean' ? config.allowOutsideClick : config.allowOutsideClick(e))) {
   function updateTabbableNodes() {
-    var tabbableNodes = tabbable(container);
-    state.firstTabbableNode = tabbableNodes[0] || getInitialFocusNode();
-    state.lastTabbableNode = tabbableNodes[tabbableNodes.length - 1] || getInitialFocusNode();
+    state.tabbableGroups = state.containers.map(function (container) {
+      var tabbableNodes = tabbable(container);
+      return {
+        firstTabbableNode: tabbableNodes[0],
+        lastTabbableNode: tabbableNodes[tabbableNodes.length - 1]
+      };
+    });
   }
@@ -390,2 +433,8 @@
   }
+
+  function containersContain(element) {
+    return state.containers.some(function (container) {
+      return container.contains(element);
+    });
+  }
 }
@@ -392,0 +441,0 @@

dist/focus-trap.esm.min.js

 /*!
-* focus-trap 6.1.4
+* focus-trap 6.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-import{isFocusable as e,tabbable as t}from"tabbable";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}var r,o,i=(o=[],{activateTrap:function(e){if(o.length>0){var t=o[o.length-1];t!==e&&t.pause()}var n=o.indexOf(e);-1===n||o.splice(n,1),o.push(e)},deactivateTrap:function(e){var t=o.indexOf(e);-1!==t&&o.splice(t,1),o.length>0&&o[o.length-1].unpause()}});function c(o,c){var s=document,l="string"==typeof o?s.querySelector(o):o,f=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},c),v={firstTabbableNode:null,lastTabbableNode:null,nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},d={activate:function(e){if(v.active)return;D(),v.active=!0,v.paused=!1,v.nodeFocusedBeforeActivation=s.activeElement;var t=e&&e.onActivate?e.onActivate:f.onActivate;t&&t();return b(),d},deactivate:p,pause:function(){if(v.paused||!v.active)return;v.paused=!0,y()},unpause:function(){if(!v.paused||!v.active)return;v.paused=!1,D(),b()}};return d;function p(e){if(v.active){clearTimeout(r),y(),v.active=!1,v.paused=!1,i.deactivateTrap(d);var t=e&&void 0!==e.onDeactivate?e.onDeactivate:f.onDeactivate;return t&&t(),(e&&void 0!==e.returnFocus?e.returnFocus:f.returnFocusOnDeactivate)&&u((function(){var e;h((e=v.nodeFocusedBeforeActivation,O("setReturnFocus")||e))})),d}}function b(){if(v.active)return i.activateTrap(d),r=f.delayInitialFocus?u((function(){h(m())})):h(m()),s.addEventListener("focusin",g,!0),s.addEventListener("mousedown",w,{capture:!0,passive:!1}),s.addEventListener("touchstart",w,{capture:!0,passive:!1}),s.addEventListener("click",E,{capture:!0,passive:!1}),s.addEventListener("keydown",k,{capture:!0,passive:!1}),d}function y(){if(v.active)return s.removeEventListener("focusin",g,!0),s.removeEventListener("mousedown",w,!0),s.removeEventListener("touchstart",w,!0),s.removeEventListener("click",E,!0),s.removeEventListener("keydown",k,!0),d}function O(e){var t=f[e],n=t;if(!t)return null;if("string"==typeof t&&!(n=s.querySelector(t)))throw new Error("`"+e+"` refers to no known node");if("function"==typeof t&&!(n=t()))throw new Error("`"+e+"` did not return a node");return n}function m(){var e;if(!(e=null!==O("initialFocus")?O("initialFocus"):l.contains(s.activeElement)?s.activeElement:v.firstTabbableNode||O("fallbackFocus")))throw new Error("Your focus-trap needs to have at least one focusable element");return e}function w(t){l.contains(t.target)||(f.clickOutsideDeactivates?p({returnFocus:f.returnFocusOnDeactivate&&!e(t.target)}):f.allowOutsideClick&&("boolean"==typeof f.allowOutsideClick?f.allowOutsideClick:f.allowOutsideClick(t))||t.preventDefault())}function g(e){l.contains(e.target)||e.target instanceof Document||(e.stopImmediatePropagation(),h(v.mostRecentlyFocusedNode||m()))}function k(e){if(!1!==f.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void p();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){if(D(),e.shiftKey&&e.target===v.firstTabbableNode)return e.preventDefault(),void h(v.lastTabbableNode);if(!e.shiftKey&&e.target===v.lastTabbableNode)e.preventDefault(),h(v.firstTabbableNode)}(e)}function E(e){f.clickOutsideDeactivates||l.contains(e.target)||f.allowOutsideClick&&("boolean"==typeof f.allowOutsideClick?f.allowOutsideClick:f.allowOutsideClick(e))||(e.preventDefault(),e.stopImmediatePropagation())}function D(){var e=t(l);v.firstTabbableNode=e[0]||m(),v.lastTabbableNode=e[e.length-1]||m()}function h(e){e!==s.activeElement&&(e&&e.focus?(e.focus({preventScroll:!!f.preventScroll}),v.mostRecentlyFocusedNode=e,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(e)&&e.select()):h(m()))}}function u(e){return setTimeout(e,0)}export{c as createFocusTrap};
+import{isFocusable as e,tabbable as t}from"tabbable";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}var a,o,i=(o=[],{activateTrap:function(e){if(o.length>0){var t=o[o.length-1];t!==e&&t.pause()}var n=o.indexOf(e);-1===n||o.splice(n,1),o.push(e)},deactivateTrap:function(e){var t=o.indexOf(e);-1!==t&&o.splice(t,1),o.length>0&&o[o.length-1].unpause()}});function c(o,c){var s=document,l=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?r(Object(a),!0).forEach((function(t){n(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):r(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},c),f={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},v={activate:function(e){if(f.active)return;h(),f.active=!0,f.paused=!1,f.nodeFocusedBeforeActivation=s.activeElement;var t=e&&e.onActivate?e.onActivate:l.onActivate;t&&t();return b(),v},deactivate:p,pause:function(){return f.paused||!f.active||(f.paused=!0,m()),v},unpause:function(){return f.paused&&f.active?(f.paused=!1,h(),b(),v):v},updateContainerElements:d};return d(o),v;function d(e){var t=[].concat(e).filter(Boolean);return f.containers=t.map((function(e){return"string"==typeof e?s.querySelector(e):e})),f.active&&h(),v}function p(e){if(f.active){clearTimeout(a),m(),f.active=!1,f.paused=!1,i.deactivateTrap(v);var t=e&&void 0!==e.onDeactivate?e.onDeactivate:l.onDeactivate;return t&&t(),(e&&void 0!==e.returnFocus?e.returnFocus:l.returnFocusOnDeactivate)&&u((function(){var e;D((e=f.nodeFocusedBeforeActivation,y("setReturnFocus")||e))})),v}}function b(){if(f.active)return i.activateTrap(v),a=l.delayInitialFocus?u((function(){D(O())})):D(O()),s.addEventListener("focusin",w,!0),s.addEventListener("mousedown",g,{capture:!0,passive:!1}),s.addEventListener("touchstart",g,{capture:!0,passive:!1}),s.addEventListener("click",E,{capture:!0,passive:!1}),s.addEventListener("keydown",k,{capture:!0,passive:!1}),v}function m(){if(f.active)return s.removeEventListener("focusin",w,!0),s.removeEventListener("mousedown",g,!0),s.removeEventListener("touchstart",g,!0),s.removeEventListener("click",E,!0),s.removeEventListener("keydown",k,!0),v}function y(e){var t=l[e],n=t;if(!t)return null;if("string"==typeof t&&!(n=s.querySelector(t)))throw new Error("`"+e+"` refers to no known node");if("function"==typeof t&&!(n=t()))throw new Error("`"+e+"` did not return a node");return n}function O(){var e;if(null!==y("initialFocus"))e=y("initialFocus");else if(F(s.activeElement))e=s.activeElement;else{var t=f.tabbableGroups[0];e=t&&t.firstTabbableNode||y("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e}function g(t){F(t.target)||(l.clickOutsideDeactivates?p({returnFocus:l.returnFocusOnDeactivate&&!e(t.target)}):l.allowOutsideClick&&("boolean"==typeof l.allowOutsideClick?l.allowOutsideClick:l.allowOutsideClick(t))||t.preventDefault())}function w(e){F(e.target)||e.target instanceof Document||(e.stopImmediatePropagation(),D(f.mostRecentlyFocusedNode||O()))}function k(e){if(!1!==l.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void p();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){h();var t=null;if(e.shiftKey){var n=f.tabbableGroups.findIndex((function(t){var n=t.firstTabbableNode;return e.target===n}));if(n>=0){var r=0===n?f.tabbableGroups.length-1:n-1;t=f.tabbableGroups[r].lastTabbableNode}}else{var a=f.tabbableGroups.findIndex((function(t){var n=t.lastTabbableNode;return e.target===n}));if(a>=0){var o=a===f.tabbableGroups.length-1?0:a+1;t=f.tabbableGroups[o].firstTabbableNode}}t&&(e.preventDefault(),D(t))}(e)}function E(e){l.clickOutsideDeactivates||F(e.target)||l.allowOutsideClick&&("boolean"==typeof l.allowOutsideClick?l.allowOutsideClick:l.allowOutsideClick(e))||(e.preventDefault(),e.stopImmediatePropagation())}function h(){f.tabbableGroups=f.containers.map((function(e){var n=t(e);return{firstTabbableNode:n[0],lastTabbableNode:n[n.length-1]}}))}function D(e){e!==s.activeElement&&(e&&e.focus?(e.focus({preventScroll:!!l.preventScroll}),f.mostRecentlyFocusedNode=e,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(e)&&e.select()):D(O()))}function F(e){return f.containers.some((function(t){return t.contains(e)}))}}function u(e){return setTimeout(e,0)}export{c as createFocusTrap};
 //# sourceMappingURL=focus-trap.esm.min.js.map

dist/focus-trap.js

 /*!
-* focus-trap 6.1.4
+* focus-trap 6.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
@@ -98,5 +98,4 @@ */
 
-function createFocusTrap(element, userOptions) {
+function createFocusTrap(elements, userOptions) {
   var doc = document;
-  var container = typeof element === 'string' ? doc.querySelector(element) : element;
 
@@ -110,4 +109,6 @@ var config = _objectSpread2({
   var state = {
-    firstTabbableNode: null,
-    lastTabbableNode: null,
+    // @type {Array<HTMLElement>}
+    containers: [],
+    // @type {{ firstTabbableNode: HTMLElement, lastTabbableNode: HTMLElement }}
+    tabbableGroups: [],
     nodeFocusedBeforeActivation: null,
@@ -122,6 +123,21 @@ mostRecentlyFocusedNode: null,
     pause: pause,
-    unpause: unpause
+    unpause: unpause,
+    updateContainerElements: updateContainerElements
   };
+  updateContainerElements(elements);
   return trap;
 
+  function updateContainerElements(containerElements) {
+    var elementsAsArray = [].concat(containerElements).filter(Boolean);
+    state.containers = elementsAsArray.map(function (element) {
+      return typeof element === 'string' ? doc.querySelector(element) : element;
+    });
+
+    if (state.active) {
+      updateTabbableNodes();
+    }
+
+    return trap;
+  }
+
   function activate(activateOptions) {
@@ -168,12 +184,14 @@ if (state.active) return;
   function pause() {
-    if (state.paused || !state.active) return;
+    if (state.paused || !state.active) return trap;
     state.paused = true;
     removeListeners();
+    return trap;
   }
 
   function unpause() {
-    if (!state.paused || !state.active) return;
+    if (!state.paused || !state.active) return trap;
     state.paused = false;
     updateTabbableNodes();
     addListeners();
+    return trap;
   }
@@ -252,6 +270,8 @@
       node = getNodeForOption('initialFocus');
-    } else if (container.contains(doc.activeElement)) {
+    } else if (containersContain(doc.activeElement)) {
       node = doc.activeElement;
     } else {
-      node = state.firstTabbableNode || getNodeForOption('fallbackFocus');
+      var firstTabbableGroup = state.tabbableGroups[0];
+      var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;
+      node = firstTabbableNode || getNodeForOption('fallbackFocus');
     }
@@ -274,3 +294,3 @@
   function checkPointerDown(e) {
-    if (container.contains(e.target)) {
+    if (containersContain(e.target)) {
       // allow the click since it ocurred inside the trap
@@ -314,3 +334,3 @@ return;
     // In Firefox when you Tab out of an iframe the Document is briefly focused.
-    if (container.contains(e.target) || e.target instanceof Document) {
+    if (containersContain(e.target) || e.target instanceof Document) {
       return;
@@ -342,13 +362,32 @@ }
     updateTabbableNodes();
+    var destinationNode = null;
 
-    if (e.shiftKey && e.target === state.firstTabbableNode) {
-      e.preventDefault();
-      tryFocus(state.lastTabbableNode);
-      return;
+    if (e.shiftKey) {
+      var startOfGroupIndex = state.tabbableGroups.findIndex(function (_ref) {
+        var firstTabbableNode = _ref.firstTabbableNode;
+        return e.target === firstTabbableNode;
+      });
+
+      if (startOfGroupIndex >= 0) {
+        var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
+        var destinationGroup = state.tabbableGroups[destinationGroupIndex];
+        destinationNode = destinationGroup.lastTabbableNode;
+      }
+    } else {
+      var lastOfGroupIndex = state.tabbableGroups.findIndex(function (_ref2) {
+        var lastTabbableNode = _ref2.lastTabbableNode;
+        return e.target === lastTabbableNode;
+      });
+
+      if (lastOfGroupIndex >= 0) {
+        var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
+
+        var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
+        destinationNode = _destinationGroup.firstTabbableNode;
+      }
     }
 
-    if (!e.shiftKey && e.target === state.lastTabbableNode) {
+    if (destinationNode) {
       e.preventDefault();
-      tryFocus(state.firstTabbableNode);
-      return;
+      tryFocus(destinationNode);
     }
@@ -359,3 +398,3 @@ }
     if (config.clickOutsideDeactivates) return;
-    if (container.contains(e.target)) return;
+    if (containersContain(e.target)) return;
 
@@ -371,5 +410,9 @@ if (config.allowOutsideClick && (typeof config.allowOutsideClick === 'boolean' ? config.allowOutsideClick : config.allowOutsideClick(e))) {
   function updateTabbableNodes() {
-    var tabbableNodes = tabbable.tabbable(container);
-    state.firstTabbableNode = tabbableNodes[0] || getInitialFocusNode();
-    state.lastTabbableNode = tabbableNodes[tabbableNodes.length - 1] || getInitialFocusNode();
+    state.tabbableGroups = state.containers.map(function (container) {
+      var tabbableNodes = tabbable.tabbable(container);
+      return {
+        firstTabbableNode: tabbableNodes[0],
+        lastTabbableNode: tabbableNodes[tabbableNodes.length - 1]
+      };
+    });
   }
@@ -394,2 +437,8 @@
   }
+
+  function containersContain(element) {
+    return state.containers.some(function (container) {
+      return container.contains(element);
+    });
+  }
 }
@@ -396,0 +445,0 @@

dist/focus-trap.min.js

 /*!
-* focus-trap 6.1.4
+* focus-trap 6.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tabbable");function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}var r,o=(r=[],{activateTrap:function(e){if(r.length>0){var t=r[r.length-1];t!==e&&t.pause()}var n=r.indexOf(e);-1===n||r.splice(n,1),r.push(e)},deactivateTrap:function(e){var t=r.indexOf(e);-1!==t&&r.splice(t,1),r.length>0&&r[r.length-1].unpause()}});function i(e){return setTimeout(e,0)}exports.createFocusTrap=function(r,c){var u=document,s="string"==typeof r?u.querySelector(r):r,l=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},c),f={firstTabbableNode:null,lastTabbableNode:null,nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},v={activate:function(e){if(f.active)return;E(),f.active=!0,f.paused=!1,f.nodeFocusedBeforeActivation=u.activeElement;var t=e&&e.onActivate?e.onActivate:l.onActivate;t&&t();return p(),v},deactivate:d,pause:function(){if(f.paused||!f.active)return;f.paused=!0,b()},unpause:function(){if(!f.paused||!f.active)return;f.paused=!1,E(),p()}};return v;function d(t){if(f.active){clearTimeout(e),b(),f.active=!1,f.paused=!1,o.deactivateTrap(v);var n=t&&void 0!==t.onDeactivate?t.onDeactivate:l.onDeactivate;return n&&n(),(t&&void 0!==t.returnFocus?t.returnFocus:l.returnFocusOnDeactivate)&&i((function(){var e;D((e=f.nodeFocusedBeforeActivation,y("setReturnFocus")||e))})),v}}function p(){if(f.active)return o.activateTrap(v),e=l.delayInitialFocus?i((function(){D(O())})):D(O()),u.addEventListener("focusin",w,!0),u.addEventListener("mousedown",m,{capture:!0,passive:!1}),u.addEventListener("touchstart",m,{capture:!0,passive:!1}),u.addEventListener("click",k,{capture:!0,passive:!1}),u.addEventListener("keydown",g,{capture:!0,passive:!1}),v}function b(){if(f.active)return u.removeEventListener("focusin",w,!0),u.removeEventListener("mousedown",m,!0),u.removeEventListener("touchstart",m,!0),u.removeEventListener("click",k,!0),u.removeEventListener("keydown",g,!0),v}function y(e){var t=l[e],n=t;if(!t)return null;if("string"==typeof t&&!(n=u.querySelector(t)))throw new Error("`"+e+"` refers to no known node");if("function"==typeof t&&!(n=t()))throw new Error("`"+e+"` did not return a node");return n}function O(){var e;if(!(e=null!==y("initialFocus")?y("initialFocus"):s.contains(u.activeElement)?u.activeElement:f.firstTabbableNode||y("fallbackFocus")))throw new Error("Your focus-trap needs to have at least one focusable element");return e}function m(e){s.contains(e.target)||(l.clickOutsideDeactivates?d({returnFocus:l.returnFocusOnDeactivate&&!t.isFocusable(e.target)}):l.allowOutsideClick&&("boolean"==typeof l.allowOutsideClick?l.allowOutsideClick:l.allowOutsideClick(e))||e.preventDefault())}function w(e){s.contains(e.target)||e.target instanceof Document||(e.stopImmediatePropagation(),D(f.mostRecentlyFocusedNode||O()))}function g(e){if(!1!==l.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void d();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){if(E(),e.shiftKey&&e.target===f.firstTabbableNode)return e.preventDefault(),void D(f.lastTabbableNode);if(!e.shiftKey&&e.target===f.lastTabbableNode)e.preventDefault(),D(f.firstTabbableNode)}(e)}function k(e){l.clickOutsideDeactivates||s.contains(e.target)||l.allowOutsideClick&&("boolean"==typeof l.allowOutsideClick?l.allowOutsideClick:l.allowOutsideClick(e))||(e.preventDefault(),e.stopImmediatePropagation())}function E(){var e=t.tabbable(s);f.firstTabbableNode=e[0]||O(),f.lastTabbableNode=e[e.length-1]||O()}function D(e){e!==u.activeElement&&(e&&e.focus?(e.focus({preventScroll:!!l.preventScroll}),f.mostRecentlyFocusedNode=e,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(e)&&e.select()):D(O()))}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tabbable");function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}var a,o=(a=[],{activateTrap:function(e){if(a.length>0){var t=a[a.length-1];t!==e&&t.pause()}var n=a.indexOf(e);-1===n||a.splice(n,1),a.push(e)},deactivateTrap:function(e){var t=a.indexOf(e);-1!==t&&a.splice(t,1),a.length>0&&a[a.length-1].unpause()}});function i(e){return setTimeout(e,0)}exports.createFocusTrap=function(a,c){var u=document,s=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?r(Object(a),!0).forEach((function(t){n(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):r(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},c),l={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},f={activate:function(e){if(l.active)return;E(),l.active=!0,l.paused=!1,l.nodeFocusedBeforeActivation=u.activeElement;var t=e&&e.onActivate?e.onActivate:s.onActivate;t&&t();return b(),f},deactivate:d,pause:function(){return l.paused||!l.active||(l.paused=!0,p()),f},unpause:function(){return l.paused&&l.active?(l.paused=!1,E(),b(),f):f},updateContainerElements:v};return v(a),f;function v(e){var t=[].concat(e).filter(Boolean);return l.containers=t.map((function(e){return"string"==typeof e?u.querySelector(e):e})),l.active&&E(),f}function d(t){if(l.active){clearTimeout(e),p(),l.active=!1,l.paused=!1,o.deactivateTrap(f);var n=t&&void 0!==t.onDeactivate?t.onDeactivate:s.onDeactivate;return n&&n(),(t&&void 0!==t.returnFocus?t.returnFocus:s.returnFocusOnDeactivate)&&i((function(){var e;F((e=l.nodeFocusedBeforeActivation,y("setReturnFocus")||e))})),f}}function b(){if(l.active)return o.activateTrap(f),e=s.delayInitialFocus?i((function(){F(O())})):F(O()),u.addEventListener("focusin",g,!0),u.addEventListener("mousedown",m,{capture:!0,passive:!1}),u.addEventListener("touchstart",m,{capture:!0,passive:!1}),u.addEventListener("click",k,{capture:!0,passive:!1}),u.addEventListener("keydown",w,{capture:!0,passive:!1}),f}function p(){if(l.active)return u.removeEventListener("focusin",g,!0),u.removeEventListener("mousedown",m,!0),u.removeEventListener("touchstart",m,!0),u.removeEventListener("click",k,!0),u.removeEventListener("keydown",w,!0),f}function y(e){var t=s[e],n=t;if(!t)return null;if("string"==typeof t&&!(n=u.querySelector(t)))throw new Error("`"+e+"` refers to no known node");if("function"==typeof t&&!(n=t()))throw new Error("`"+e+"` did not return a node");return n}function O(){var e;if(null!==y("initialFocus"))e=y("initialFocus");else if(h(u.activeElement))e=u.activeElement;else{var t=l.tabbableGroups[0];e=t&&t.firstTabbableNode||y("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e}function m(e){h(e.target)||(s.clickOutsideDeactivates?d({returnFocus:s.returnFocusOnDeactivate&&!t.isFocusable(e.target)}):s.allowOutsideClick&&("boolean"==typeof s.allowOutsideClick?s.allowOutsideClick:s.allowOutsideClick(e))||e.preventDefault())}function g(e){h(e.target)||e.target instanceof Document||(e.stopImmediatePropagation(),F(l.mostRecentlyFocusedNode||O()))}function w(e){if(!1!==s.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void d();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){E();var t=null;if(e.shiftKey){var n=l.tabbableGroups.findIndex((function(t){var n=t.firstTabbableNode;return e.target===n}));if(n>=0){var r=0===n?l.tabbableGroups.length-1:n-1;t=l.tabbableGroups[r].lastTabbableNode}}else{var a=l.tabbableGroups.findIndex((function(t){var n=t.lastTabbableNode;return e.target===n}));if(a>=0){var o=a===l.tabbableGroups.length-1?0:a+1;t=l.tabbableGroups[o].firstTabbableNode}}t&&(e.preventDefault(),F(t))}(e)}function k(e){s.clickOutsideDeactivates||h(e.target)||s.allowOutsideClick&&("boolean"==typeof s.allowOutsideClick?s.allowOutsideClick:s.allowOutsideClick(e))||(e.preventDefault(),e.stopImmediatePropagation())}function E(){l.tabbableGroups=l.containers.map((function(e){var n=t.tabbable(e);return{firstTabbableNode:n[0],lastTabbableNode:n[n.length-1]}}))}function F(e){e!==u.activeElement&&(e&&e.focus?(e.focus({preventScroll:!!s.preventScroll}),l.mostRecentlyFocusedNode=e,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(e)&&e.select()):F(O()))}function h(e){return l.containers.some((function(t){return t.contains(e)}))}};
 //# sourceMappingURL=focus-trap.min.js.map

dist/focus-trap.umd.js

 /*!
-* focus-trap 6.1.4
+* focus-trap 6.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
@@ -103,5 +103,4 @@ */
 
-  function createFocusTrap(element, userOptions) {
+  function createFocusTrap(elements, userOptions) {
     var doc = document;
-    var container = typeof element === 'string' ? doc.querySelector(element) : element;
 
@@ -115,4 +114,6 @@ var config = _objectSpread2({
     var state = {
-      firstTabbableNode: null,
-      lastTabbableNode: null,
+      // @type {Array<HTMLElement>}
+      containers: [],
+      // @type {{ firstTabbableNode: HTMLElement, lastTabbableNode: HTMLElement }}
+      tabbableGroups: [],
       nodeFocusedBeforeActivation: null,
@@ -127,6 +128,21 @@ mostRecentlyFocusedNode: null,
       pause: pause,
-      unpause: unpause
+      unpause: unpause,
+      updateContainerElements: updateContainerElements
     };
+    updateContainerElements(elements);
     return trap;
 
+    function updateContainerElements(containerElements) {
+      var elementsAsArray = [].concat(containerElements).filter(Boolean);
+      state.containers = elementsAsArray.map(function (element) {
+        return typeof element === 'string' ? doc.querySelector(element) : element;
+      });
+
+      if (state.active) {
+        updateTabbableNodes();
+      }
+
+      return trap;
+    }
+
     function activate(activateOptions) {
@@ -173,12 +189,14 @@ if (state.active) return;
     function pause() {
-      if (state.paused || !state.active) return;
+      if (state.paused || !state.active) return trap;
       state.paused = true;
       removeListeners();
+      return trap;
     }
 
     function unpause() {
-      if (!state.paused || !state.active) return;
+      if (!state.paused || !state.active) return trap;
       state.paused = false;
       updateTabbableNodes();
       addListeners();
+      return trap;
     }
@@ -257,6 +275,8 @@
         node = getNodeForOption('initialFocus');
-      } else if (container.contains(doc.activeElement)) {
+      } else if (containersContain(doc.activeElement)) {
         node = doc.activeElement;
       } else {
-        node = state.firstTabbableNode || getNodeForOption('fallbackFocus');
+        var firstTabbableGroup = state.tabbableGroups[0];
+        var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;
+        node = firstTabbableNode || getNodeForOption('fallbackFocus');
       }
@@ -279,3 +299,3 @@
     function checkPointerDown(e) {
-      if (container.contains(e.target)) {
+      if (containersContain(e.target)) {
         // allow the click since it ocurred inside the trap
@@ -319,3 +339,3 @@ return;
       // In Firefox when you Tab out of an iframe the Document is briefly focused.
-      if (container.contains(e.target) || e.target instanceof Document) {
+      if (containersContain(e.target) || e.target instanceof Document) {
         return;
@@ -347,13 +367,32 @@ }
       updateTabbableNodes();
+      var destinationNode = null;
 
-      if (e.shiftKey && e.target === state.firstTabbableNode) {
-        e.preventDefault();
-        tryFocus(state.lastTabbableNode);
-        return;
+      if (e.shiftKey) {
+        var startOfGroupIndex = state.tabbableGroups.findIndex(function (_ref) {
+          var firstTabbableNode = _ref.firstTabbableNode;
+          return e.target === firstTabbableNode;
+        });
+
+        if (startOfGroupIndex >= 0) {
+          var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
+          var destinationGroup = state.tabbableGroups[destinationGroupIndex];
+          destinationNode = destinationGroup.lastTabbableNode;
+        }
+      } else {
+        var lastOfGroupIndex = state.tabbableGroups.findIndex(function (_ref2) {
+          var lastTabbableNode = _ref2.lastTabbableNode;
+          return e.target === lastTabbableNode;
+        });
+
+        if (lastOfGroupIndex >= 0) {
+          var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
+
+          var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
+          destinationNode = _destinationGroup.firstTabbableNode;
+        }
       }
 
-      if (!e.shiftKey && e.target === state.lastTabbableNode) {
+      if (destinationNode) {
         e.preventDefault();
-        tryFocus(state.firstTabbableNode);
-        return;
+        tryFocus(destinationNode);
       }
@@ -364,3 +403,3 @@ }
       if (config.clickOutsideDeactivates) return;
-      if (container.contains(e.target)) return;
+      if (containersContain(e.target)) return;
 
@@ -376,5 +415,9 @@ if (config.allowOutsideClick && (typeof config.allowOutsideClick === 'boolean' ? config.allowOutsideClick : config.allowOutsideClick(e))) {
     function updateTabbableNodes() {
-      var tabbableNodes = tabbable.tabbable(container);
-      state.firstTabbableNode = tabbableNodes[0] || getInitialFocusNode();
-      state.lastTabbableNode = tabbableNodes[tabbableNodes.length - 1] || getInitialFocusNode();
+      state.tabbableGroups = state.containers.map(function (container) {
+        var tabbableNodes = tabbable.tabbable(container);
+        return {
+          firstTabbableNode: tabbableNodes[0],
+          lastTabbableNode: tabbableNodes[tabbableNodes.length - 1]
+        };
+      });
     }
@@ -399,2 +442,8 @@
     }
+
+    function containersContain(element) {
+      return state.containers.some(function (container) {
+        return container.contains(element);
+      });
+    }
   }
@@ -401,0 +450,0 @@

dist/focus-trap.umd.min.js

 /*!
-* focus-trap 6.1.4
+* focus-trap 6.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tabbable")):"function"==typeof define&&define.amd?define(["exports","tabbable"],t):(e="undefined"!=typeof globalThis?globalThis:e||self,function(){var n=e.focusTrap,o=e.focusTrap={};t(o,e.tabbable),o.noConflict=function(){return e.focusTrap=n,o}}())}(this,(function(e,t){"use strict";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}var a,r,i=(r=[],{activateTrap:function(e){if(r.length>0){var t=r[r.length-1];t!==e&&t.pause()}var n=r.indexOf(e);-1===n||r.splice(n,1),r.push(e)},deactivateTrap:function(e){var t=r.indexOf(e);-1!==t&&r.splice(t,1),r.length>0&&r[r.length-1].unpause()}});function c(e){return setTimeout(e,0)}e.createFocusTrap=function(e,r){var u=document,s="string"==typeof e?u.querySelector(e):e,l=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){n(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},r),f={firstTabbableNode:null,lastTabbableNode:null,nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},d={activate:function(e){if(f.active)return;T(),f.active=!0,f.paused=!1,f.nodeFocusedBeforeActivation=u.activeElement;var t=e&&e.onActivate?e.onActivate:l.onActivate;t&&t();return p(),d},deactivate:v,pause:function(){if(f.paused||!f.active)return;f.paused=!0,b()},unpause:function(){if(!f.paused||!f.active)return;f.paused=!1,T(),p()}};return d;function v(e){if(f.active){clearTimeout(a),b(),f.active=!1,f.paused=!1,i.deactivateTrap(d);var t=e&&void 0!==e.onDeactivate?e.onDeactivate:l.onDeactivate;return t&&t(),(e&&void 0!==e.returnFocus?e.returnFocus:l.returnFocusOnDeactivate)&&c((function(){var e;h((e=f.nodeFocusedBeforeActivation,y("setReturnFocus")||e))})),d}}function p(){if(f.active)return i.activateTrap(d),a=l.delayInitialFocus?c((function(){h(O())})):h(O()),u.addEventListener("focusin",g,!0),u.addEventListener("mousedown",m,{capture:!0,passive:!1}),u.addEventListener("touchstart",m,{capture:!0,passive:!1}),u.addEventListener("click",k,{capture:!0,passive:!1}),u.addEventListener("keydown",w,{capture:!0,passive:!1}),d}function b(){if(f.active)return u.removeEventListener("focusin",g,!0),u.removeEventListener("mousedown",m,!0),u.removeEventListener("touchstart",m,!0),u.removeEventListener("click",k,!0),u.removeEventListener("keydown",w,!0),d}function y(e){var t=l[e],n=t;if(!t)return null;if("string"==typeof t&&!(n=u.querySelector(t)))throw new Error("`"+e+"` refers to no known node");if("function"==typeof t&&!(n=t()))throw new Error("`"+e+"` did not return a node");return n}function O(){var e;if(!(e=null!==y("initialFocus")?y("initialFocus"):s.contains(u.activeElement)?u.activeElement:f.firstTabbableNode||y("fallbackFocus")))throw new Error("Your focus-trap needs to have at least one focusable element");return e}function m(e){s.contains(e.target)||(l.clickOutsideDeactivates?v({returnFocus:l.returnFocusOnDeactivate&&!t.isFocusable(e.target)}):l.allowOutsideClick&&("boolean"==typeof l.allowOutsideClick?l.allowOutsideClick:l.allowOutsideClick(e))||e.preventDefault())}function g(e){s.contains(e.target)||e.target instanceof Document||(e.stopImmediatePropagation(),h(f.mostRecentlyFocusedNode||O()))}function w(e){if(!1!==l.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void v();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){if(T(),e.shiftKey&&e.target===f.firstTabbableNode)return e.preventDefault(),void h(f.lastTabbableNode);if(!e.shiftKey&&e.target===f.lastTabbableNode)e.preventDefault(),h(f.firstTabbableNode)}(e)}function k(e){l.clickOutsideDeactivates||s.contains(e.target)||l.allowOutsideClick&&("boolean"==typeof l.allowOutsideClick?l.allowOutsideClick:l.allowOutsideClick(e))||(e.preventDefault(),e.stopImmediatePropagation())}function T(){var e=t.tabbable(s);f.firstTabbableNode=e[0]||O(),f.lastTabbableNode=e[e.length-1]||O()}function h(e){e!==u.activeElement&&(e&&e.focus?(e.focus({preventScroll:!!l.preventScroll}),f.mostRecentlyFocusedNode=e,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(e)&&e.select()):h(O()))}},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tabbable")):"function"==typeof define&&define.amd?define(["exports","tabbable"],t):(e="undefined"!=typeof globalThis?globalThis:e||self,function(){var n=e.focusTrap,a=e.focusTrap={};t(a,e.tabbable),a.noConflict=function(){return e.focusTrap=n,a}}())}(this,(function(e,t){"use strict";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}var r,o,i=(o=[],{activateTrap:function(e){if(o.length>0){var t=o[o.length-1];t!==e&&t.pause()}var n=o.indexOf(e);-1===n||o.splice(n,1),o.push(e)},deactivateTrap:function(e){var t=o.indexOf(e);-1!==t&&o.splice(t,1),o.length>0&&o[o.length-1].unpause()}});function c(e){return setTimeout(e,0)}e.createFocusTrap=function(e,o){var u=document,s=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},o),l={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1},f={activate:function(e){if(l.active)return;k(),l.active=!0,l.paused=!1,l.nodeFocusedBeforeActivation=u.activeElement;var t=e&&e.onActivate?e.onActivate:s.onActivate;t&&t();return b(),f},deactivate:d,pause:function(){return l.paused||!l.active||(l.paused=!0,p()),f},unpause:function(){return l.paused&&l.active?(l.paused=!1,k(),b(),f):f},updateContainerElements:v};return v(e),f;function v(e){var t=[].concat(e).filter(Boolean);return l.containers=t.map((function(e){return"string"==typeof e?u.querySelector(e):e})),l.active&&k(),f}function d(e){if(l.active){clearTimeout(r),p(),l.active=!1,l.paused=!1,i.deactivateTrap(f);var t=e&&void 0!==e.onDeactivate?e.onDeactivate:s.onDeactivate;return t&&t(),(e&&void 0!==e.returnFocus?e.returnFocus:s.returnFocusOnDeactivate)&&c((function(){var e;E((e=l.nodeFocusedBeforeActivation,y("setReturnFocus")||e))})),f}}function b(){if(l.active)return i.activateTrap(f),r=s.delayInitialFocus?c((function(){E(m())})):E(m()),u.addEventListener("focusin",g,!0),u.addEventListener("mousedown",O,{capture:!0,passive:!1}),u.addEventListener("touchstart",O,{capture:!0,passive:!1}),u.addEventListener("click",h,{capture:!0,passive:!1}),u.addEventListener("keydown",w,{capture:!0,passive:!1}),f}function p(){if(l.active)return u.removeEventListener("focusin",g,!0),u.removeEventListener("mousedown",O,!0),u.removeEventListener("touchstart",O,!0),u.removeEventListener("click",h,!0),u.removeEventListener("keydown",w,!0),f}function y(e){var t=s[e],n=t;if(!t)return null;if("string"==typeof t&&!(n=u.querySelector(t)))throw new Error("`"+e+"` refers to no known node");if("function"==typeof t&&!(n=t()))throw new Error("`"+e+"` did not return a node");return n}function m(){var e;if(null!==y("initialFocus"))e=y("initialFocus");else if(F(u.activeElement))e=u.activeElement;else{var t=l.tabbableGroups[0];e=t&&t.firstTabbableNode||y("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e}function O(e){F(e.target)||(s.clickOutsideDeactivates?d({returnFocus:s.returnFocusOnDeactivate&&!t.isFocusable(e.target)}):s.allowOutsideClick&&("boolean"==typeof s.allowOutsideClick?s.allowOutsideClick:s.allowOutsideClick(e))||e.preventDefault())}function g(e){F(e.target)||e.target instanceof Document||(e.stopImmediatePropagation(),E(l.mostRecentlyFocusedNode||m()))}function w(e){if(!1!==s.escapeDeactivates&&function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e))return e.preventDefault(),void d();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){k();var t=null;if(e.shiftKey){var n=l.tabbableGroups.findIndex((function(t){var n=t.firstTabbableNode;return e.target===n}));if(n>=0){var a=0===n?l.tabbableGroups.length-1:n-1;t=l.tabbableGroups[a].lastTabbableNode}}else{var r=l.tabbableGroups.findIndex((function(t){var n=t.lastTabbableNode;return e.target===n}));if(r>=0){var o=r===l.tabbableGroups.length-1?0:r+1;t=l.tabbableGroups[o].firstTabbableNode}}t&&(e.preventDefault(),E(t))}(e)}function h(e){s.clickOutsideDeactivates||F(e.target)||s.allowOutsideClick&&("boolean"==typeof s.allowOutsideClick?s.allowOutsideClick:s.allowOutsideClick(e))||(e.preventDefault(),e.stopImmediatePropagation())}function k(){l.tabbableGroups=l.containers.map((function(e){var n=t.tabbable(e);return{firstTabbableNode:n[0],lastTabbableNode:n[n.length-1]}}))}function E(e){e!==u.activeElement&&(e&&e.focus?(e.focus({preventScroll:!!s.preventScroll}),l.mostRecentlyFocusedNode=e,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(e)&&e.select()):E(m()))}function F(e){return l.containers.some((function(t){return t.contains(e)}))}},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=focus-trap.umd.min.js.map

index.d.ts

@@ -90,6 +90,7 @@ declare module 'focus-trap' {
   export interface FocusTrap {
-    activate(activateOptions?: ActivateOptions): void;
-    deactivate(deactivateOptions?: DeactivateOptions): void;
-    pause(): void;
-    unpause(): void;
+    activate(activateOptions?: ActivateOptions): FocusTrap;
+    deactivate(deactivateOptions?: DeactivateOptions): FocusTrap;
+    pause(): FocusTrap;
+    unpause(): FocusTrap;
+    updateContainerElements(containerElements: HTMLElement | string | Array<HTMLElement | string>): FocusTrap;
   }
@@ -105,5 +106,5 @@
   export function createFocusTrap(
-    element: HTMLElement | string,
+    element: HTMLElement | string | Array<HTMLElement | string>,
     userOptions?: Options
   ): FocusTrap;
 }

index.js

@@ -39,6 +39,4 @@ import { tabbable, isFocusable } from 'tabbable';
 
-function createFocusTrap(element, userOptions) {
+function createFocusTrap(elements, userOptions) {
   var doc = document;
-  var container =
-    typeof element === 'string' ? doc.querySelector(element) : element;
 
@@ -53,4 +51,6 @@ var config = {
   var state = {
-    firstTabbableNode: null,
-    lastTabbableNode: null,
+    // @type {Array<HTMLElement>}
+    containers: [],
+    // @type {{ firstTabbableNode: HTMLElement, lastTabbableNode: HTMLElement }}
+    tabbableGroups: [],
     nodeFocusedBeforeActivation: null,
@@ -67,6 +67,23 @@ mostRecentlyFocusedNode: null,
     unpause: unpause,
+    updateContainerElements: updateContainerElements,
   };
 
+  updateContainerElements(elements);
+
   return trap;
 
+  function updateContainerElements(containerElements) {
+    var elementsAsArray = [].concat(containerElements).filter(Boolean);
+
+    state.containers = elementsAsArray.map((element) =>
+      typeof element === 'string' ? doc.querySelector(element) : element
+    );
+
+    if (state.active) {
+      updateTabbableNodes();
+    }
+
+    return trap;
+  }
+
   function activate(activateOptions) {
@@ -126,12 +143,16 @@ if (state.active) return;
   function pause() {
-    if (state.paused || !state.active) return;
+    if (state.paused || !state.active) return trap;
     state.paused = true;
     removeListeners();
+
+    return trap;
   }
 
   function unpause() {
-    if (!state.paused || !state.active) return;
+    if (!state.paused || !state.active) return trap;
     state.paused = false;
     updateTabbableNodes();
     addListeners();
+
+    return trap;
   }
@@ -211,6 +232,9 @@
       node = getNodeForOption('initialFocus');
-    } else if (container.contains(doc.activeElement)) {
+    } else if (containersContain(doc.activeElement)) {
       node = doc.activeElement;
     } else {
-      node = state.firstTabbableNode || getNodeForOption('fallbackFocus');
+      var firstTabbableGroup = state.tabbableGroups[0];
+      var firstTabbableNode =
+        firstTabbableGroup && firstTabbableGroup.firstTabbableNode;
+      node = firstTabbableNode || getNodeForOption('fallbackFocus');
     }
@@ -235,3 +259,3 @@
   function checkPointerDown(e) {
-    if (container.contains(e.target)) {
+    if (containersContain(e.target)) {
       // allow the click since it ocurred inside the trap
@@ -280,3 +304,3 @@ return;
     // In Firefox when you Tab out of an iframe the Document is briefly focused.
-    if (container.contains(e.target) || e.target instanceof Document) {
+    if (containersContain(e.target) || e.target instanceof Document) {
       return;
@@ -306,11 +330,39 @@ }
     updateTabbableNodes();
-    if (e.shiftKey && e.target === state.firstTabbableNode) {
-      e.preventDefault();
-      tryFocus(state.lastTabbableNode);
-      return;
+
+    let destinationNode = null;
+
+    if (e.shiftKey) {
+      const startOfGroupIndex = state.tabbableGroups.findIndex(
+        ({ firstTabbableNode }) => e.target === firstTabbableNode
+      );
+
+      if (startOfGroupIndex >= 0) {
+        const destinationGroupIndex =
+          startOfGroupIndex === 0
+            ? state.tabbableGroups.length - 1
+            : startOfGroupIndex - 1;
+
+        const destinationGroup = state.tabbableGroups[destinationGroupIndex];
+        destinationNode = destinationGroup.lastTabbableNode;
+      }
+    } else {
+      const lastOfGroupIndex = state.tabbableGroups.findIndex(
+        ({ lastTabbableNode }) => e.target === lastTabbableNode
+      );
+
+      if (lastOfGroupIndex >= 0) {
+        const destinationGroupIndex =
+          lastOfGroupIndex === state.tabbableGroups.length - 1
+            ? 0
+            : lastOfGroupIndex + 1;
+
+        const destinationGroup = state.tabbableGroups[destinationGroupIndex];
+        destinationNode = destinationGroup.firstTabbableNode;
+      }
     }
-    if (!e.shiftKey && e.target === state.lastTabbableNode) {
+
+    if (destinationNode) {
       e.preventDefault();
-      tryFocus(state.firstTabbableNode);
-      return;
+
+      tryFocus(destinationNode);
     }
@@ -321,3 +373,3 @@ }
     if (config.clickOutsideDeactivates) return;
-    if (container.contains(e.target)) return;
+    if (containersContain(e.target)) return;
     if (
@@ -336,6 +388,10 @@ config.allowOutsideClick &&
   function updateTabbableNodes() {
-    var tabbableNodes = tabbable(container);
-    state.firstTabbableNode = tabbableNodes[0] || getInitialFocusNode();
-    state.lastTabbableNode =
-      tabbableNodes[tabbableNodes.length - 1] || getInitialFocusNode();
+    state.tabbableGroups = state.containers.map((container) => {
+      var tabbableNodes = tabbable(container);
+
+      return {
+        firstTabbableNode: tabbableNodes[0],
+        lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],
+      };
+    });
   }
@@ -355,2 +411,6 @@
   }
+
+  function containersContain(element) {
+    return state.containers.some((container) => container.contains(element));
+  }
 }
@@ -357,0 +417,0 @@

package.json

 {
   "name": "focus-trap",
-  "version": "6.1.4",
+  "version": "6.2.0",
   "description": "Trap focus within a DOM node.",
@@ -65,25 +65,25 @@ "main": "dist/focus-trap.js",
     "@babel/preset-env": "^7.12.1",
-    "@changesets/cli": "^2.11.1",
+    "@changesets/cli": "^2.11.2",
     "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
     "@testing-library/cypress": "^7.0.1",
-    "@types/jquery": "^3.5.3",
+    "@types/jquery": "^3.5.4",
     "all-contributors-cli": "^6.19.0",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.1",
     "babelify": "^10.0.0",
     "budo": "^11.6.4",
-    "cypress": "^5.4.0",
+    "cypress": "^5.6.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^7.11.0",
-    "eslint-config-prettier": "^6.13.0",
+    "eslint": "^7.13.0",
+    "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-cypress": "^2.11.2",
     "prettier": "^2.1.2",
-    "rollup": "^2.32.0",
+    "rollup": "^2.33.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.1",
     "start-server-and-test": "^1.11.5",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.5"
   }
 }

README.md

 # focus-trap [![CI](https://github.com/focus-trap/focus-trap/workflows/CI/badge.svg?branch=master&event=push)](https://github.com/focus-trap/focus-trap/actions?query=workflow:CI+branch:master) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
@@ -66,3 +66,4 @@
 - a DOM node (the focus trap itself) or
-- a selector string (which will be pass to `document.querySelector()` to find the DOM node).
+- a selector string (which will be passed to `document.querySelector()` to find the DOM node) or
+- an array of DOM nodes or selector strings (where the order determines where the focus will go after the last tabbable element of a DOM node/selector is reached).
 
@@ -138,2 +139,12 @@ `createOptions`:
 
+### focusTrap.updateContainerElements()
+
+Update the element(s) that are used as containers for the focus trap.
+
+When you call the function `createFocusTrap`, you pass in an element (or selector), or an array of elements (or selectors) to keep the focus within.  This method simply allows you to update which elements to keep the focus within.
+
+A use case for this is found in focus-trap-react, where React `ref`'s may not be initialized yet, but when they are you want to have them be a container element.
+
+Returns the `focusTrap`.
+
 ## Examples
@@ -223,2 +234,3 @@
     <td align="center"><a href="https://scottblinch.me/"><img src="https://avatars2.githubusercontent.com/u/4682114?v=4" width="100px;" alt=""/><br /><sub><b>Scott Blinch</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=scottblinch" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://clintgoodman.com"><img src="https://avatars3.githubusercontent.com/u/5473697?v=4" width="100px;" alt=""/><br /><sub><b>Clint Goodman</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=cgood92" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=cgood92" title="Documentation">📖</a> <a href="#example-cgood92" title="Examples">💡</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=cgood92" title="Tests">⚠️</a></td>
   </tr>
@@ -225,0 +237,0 @@ </table>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

223142

increased by14.08%

Lines of code

1652

increased by11.92%

Number of lines in readme file

239

increased by5.29%

No dependency changes