focus-trap - npm Package Compare versions

Comparing version 7.1.0 to 7.2.0

CHANGELOG.md

 # Changelog
 
+## 7.2.0
+
+### Minor Changes
+
+- b0482af: Add new `isKeyForward()` and `isKeyBackward()` options ([#612](https://github.com/focus-trap/focus-trap/issues/612))
+
 ## 7.1.0
@@ -4,0 +10,0 @@

dist/focus-trap.esm.js

 /*!
-* focus-trap 7.1.0
+* focus-trap 7.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
@@ -29,2 +29,3 @@ */
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
@@ -42,4 +43,17 @@ Object.defineProperty(obj, key, {
 }
+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;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
-var rooTrapStack = [];
 var activeFocusTraps = {
@@ -81,2 +95,12 @@ activateTrap: function activateTrap(trapStack, trap) {
 };
+
+// checks for TAB by default
+var isKeyForward = function isKeyForward(e) {
+  return isTabEvent(e) && !e.shiftKey;
+};
+
+// checks for SHIFT+TAB by default
+var isKeyBackward = function isKeyBackward(e) {
+  return isTabEvent(e) && e.shiftKey;
+};
 var delay = function delay(fn) {
@@ -125,2 +149,6 @@ return setTimeout(fn, 0);
 };
+
+// NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this
+//  current instance use the same stack if `userOptions.trapStack` isn't specified
+var internalTrapStack = [];
 var createFocusTrap = function createFocusTrap(elements, userOptions) {
@@ -130,7 +158,9 @@ // SSR: a live trap shouldn't be created in this type of environment so this
   var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;
-  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || rooTrapStack;
+  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;
   var config = _objectSpread2({
     returnFocusOnDeactivate: true,
     escapeDeactivates: true,
-    delayInitialFocus: true
+    delayInitialFocus: true,
+    isKeyForward: isKeyForward,
+    isKeyBackward: isKeyBackward
   }, userOptions);
@@ -416,8 +446,9 @@ var state = {
 
-  // Hijack Tab events on the first and last focusable nodes of the trap,
+  // Hijack key nav events on the first and last focusable nodes of the trap,
   // in order to prevent focus from escaping. If it escapes for even a
   // moment it can end up scrolling the page and causing confusion so we
   // kind of need to capture the action at the keydown phase.
-  var checkTab = function checkTab(e) {
-    var target = getActualTarget(e);
+  var checkKeyNav = function checkKeyNav(event) {
+    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var target = getActualTarget(event);
     updateTabbableNodes();
@@ -433,4 +464,4 @@ var destinationNode = null;
         // target not found in any group: quite possible focus has escaped the trap,
-        //  so bring it back in to...
-        if (e.shiftKey) {
+        //  so bring it back into...
+        if (isBackward) {
           // ...the last node in the last group
@@ -442,3 +473,3 @@ destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;
         }
-      } else if (e.shiftKey) {
+      } else if (isBackward) {
         // REVERSE
@@ -467,2 +498,6 @@
           destinationNode = destinationGroup.lastTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target, false);
         }
@@ -493,5 +528,10 @@ } else {
           destinationNode = _destinationGroup.firstTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target);
         }
       }
     } else {
+      // no groups available
       // NOTE: the fallbackFocus option does not support returning false to opt-out
@@ -501,3 +541,9 @@ destinationNode = getNodeForOption('fallbackFocus');
     if (destinationNode) {
-      e.preventDefault();
+      if (isTabEvent(event)) {
+        // since tab natively moves focus, we wouldn't have a destination node unless we
+        //  were on the edge of a container and had to move to the next/previous edge, in
+        //  which case we want to prevent default to keep the browser from moving focus
+        //  to where it normally would
+        event.preventDefault();
+      }
       tryFocus(destinationNode);
@@ -508,11 +554,10 @@ }
 
-  var checkKey = function checkKey(e) {
-    if (isEscapeEvent(e) && valueOrHandler(config.escapeDeactivates, e) !== false) {
-      e.preventDefault();
+  var checkKey = function checkKey(event) {
+    if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {
+      event.preventDefault();
       trap.deactivate();
       return;
     }
-    if (isTabEvent(e)) {
-      checkTab(e);
-      return;
+    if (config.isKeyForward(event) || config.isKeyBackward(event)) {
+      checkKeyNav(event, config.isKeyBackward(event));
     }
@@ -519,0 +564,0 @@ };

dist/focus-trap.esm.min.js

 /*!
-* focus-trap 7.1.0
+* focus-trap 7.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-import{tabbable as e,focusable as t,isTabbable as n,isFocusable as a}from"tabbable";function r(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}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var c=[],u=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var a=e.indexOf(t);-1===a||e.splice(a,1),e.push(t)},s=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},l=function(e){return setTimeout(e,0)},b=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},f=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},v=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},d=function(r,i){var d,p=(null==i?void 0:i.document)||document,h=(null==i?void 0:i.trapStack)||c,m=o({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},i),y={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},O=function(e,t,n){return e&&void 0!==e[t]?e[t]:m[n||t]},g=function(e){return y.containerGroups.findIndex((function(t){var n=t.container,a=t.tabbableNodes;return n.contains(e)||a.find((function(t){return t===e}))}))},w=function(e){var t=m[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),r=1;r<n;r++)a[r-1]=arguments[r];t=t.apply(void 0,a)}if(!0===t&&(t=void 0),!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var o=t;if("string"==typeof t&&!(o=p.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return o},F=function(){var e=w("initialFocus");if(!1===e)return!1;if(void 0===e)if(g(p.activeElement)>=0)e=p.activeElement;else{var t=y.tabbableGroups[0];e=t&&t.firstTabbableNode||w("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},E=function(){if(y.containerGroups=y.containers.map((function(a){var r=e(a,m.tabbableOptions),o=t(a,m.tabbableOptions);return{container:a,tabbableNodes:r,focusableNodes:o,firstTabbableNode:r.length>0?r[0]:null,lastTabbableNode:r.length>0?r[r.length-1]:null,nextTabbableNode:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],a=o.findIndex((function(t){return t===e}));if(!(a<0))return t?o.slice(a+1).find((function(e){return n(e,m.tabbableOptions)})):o.slice(0,a).reverse().find((function(e){return n(e,m.tabbableOptions)}))}}})),y.tabbableGroups=y.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),y.tabbableGroups.length<=0&&!w("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},k=function e(t){!1!==t&&t!==p.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!m.preventScroll}),y.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(F()))},D=function(e){var t=w("setReturnFocus",e);return t||!1!==t&&e},N=function(e){var t=v(e);g(t)>=0||(f(m.clickOutsideDeactivates,e)?d.deactivate({returnFocus:m.returnFocusOnDeactivate&&!a(t,m.tabbableOptions)}):f(m.allowOutsideClick,e)||e.preventDefault())},T=function(e){var t=v(e),n=g(t)>=0;n||t instanceof Document?n&&(y.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),k(y.mostRecentlyFocusedNode||F()))},G=function(e){if(function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e)&&!1!==f(m.escapeDeactivates,e))return e.preventDefault(),void d.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){var t=v(e);E();var r=null;if(y.tabbableGroups.length>0){var o=g(t),i=o>=0?y.containerGroups[o]:void 0;if(o<0)r=e.shiftKey?y.tabbableGroups[y.tabbableGroups.length-1].lastTabbableNode:y.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var c=b(y.tabbableGroups,(function(e){var n=e.firstTabbableNode;return t===n}));if(c<0&&(i.container===t||a(t,m.tabbableOptions)&&!n(t,m.tabbableOptions)&&!i.nextTabbableNode(t,!1))&&(c=o),c>=0){var u=0===c?y.tabbableGroups.length-1:c-1;r=y.tabbableGroups[u].lastTabbableNode}}else{var s=b(y.tabbableGroups,(function(e){var n=e.lastTabbableNode;return t===n}));if(s<0&&(i.container===t||a(t,m.tabbableOptions)&&!n(t,m.tabbableOptions)&&!i.nextTabbableNode(t))&&(s=o),s>=0){var l=s===y.tabbableGroups.length-1?0:s+1;r=y.tabbableGroups[l].firstTabbableNode}}}else r=w("fallbackFocus");r&&(e.preventDefault(),k(r))}(e)},P=function(e){var t=v(e);g(t)>=0||f(m.clickOutsideDeactivates,e)||f(m.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},j=function(){if(y.active)return u(h,d),y.delayInitialFocusTimer=m.delayInitialFocus?l((function(){k(F())})):k(F()),p.addEventListener("focusin",T,!0),p.addEventListener("mousedown",N,{capture:!0,passive:!1}),p.addEventListener("touchstart",N,{capture:!0,passive:!1}),p.addEventListener("click",P,{capture:!0,passive:!1}),p.addEventListener("keydown",G,{capture:!0,passive:!1}),d},C=function(){if(y.active)return p.removeEventListener("focusin",T,!0),p.removeEventListener("mousedown",N,!0),p.removeEventListener("touchstart",N,!0),p.removeEventListener("click",P,!0),p.removeEventListener("keydown",G,!0),d};return(d={get active(){return y.active},get paused(){return y.paused},activate:function(e){if(y.active)return this;var t=O(e,"onActivate"),n=O(e,"onPostActivate"),a=O(e,"checkCanFocusTrap");a||E(),y.active=!0,y.paused=!1,y.nodeFocusedBeforeActivation=p.activeElement,t&&t();var r=function(){a&&E(),j(),n&&n()};return a?(a(y.containers.concat()).then(r,r),this):(r(),this)},deactivate:function(e){if(!y.active)return this;var t=o({onDeactivate:m.onDeactivate,onPostDeactivate:m.onPostDeactivate,checkCanReturnFocus:m.checkCanReturnFocus},e);clearTimeout(y.delayInitialFocusTimer),y.delayInitialFocusTimer=void 0,C(),y.active=!1,y.paused=!1,s(h,d);var n=O(t,"onDeactivate"),a=O(t,"onPostDeactivate"),r=O(t,"checkCanReturnFocus"),i=O(t,"returnFocus","returnFocusOnDeactivate");n&&n();var c=function(){l((function(){i&&k(D(y.nodeFocusedBeforeActivation)),a&&a()}))};return i&&r?(r(D(y.nodeFocusedBeforeActivation)).then(c,c),this):(c(),this)},pause:function(){return y.paused||!y.active||(y.paused=!0,C()),this},unpause:function(){return y.paused&&y.active?(y.paused=!1,E(),j(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return y.containers=t.map((function(e){return"string"==typeof e?p.querySelector(e):e})),y.active&&E(),this}}).updateContainerElements(r),d};export{d as createFocusTrap};
+import{tabbable as e,focusable as t,isTabbable as n,isFocusable as r}from"tabbable";function a(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}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var c=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var r=e.indexOf(t);-1===r||e.splice(r,1),e.push(t)},u=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},s=function(e){return"Tab"===e.key||9===e.keyCode},l=function(e){return s(e)&&!e.shiftKey},b=function(e){return s(e)&&e.shiftKey},f=function(e){return setTimeout(e,0)},v=function(e,t){var n=-1;return e.every((function(e,r){return!t(e)||(n=r,!1)})),n},d=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return"function"==typeof e?e.apply(void 0,n):e},p=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},y=[],h=function(a,i){var h,m=(null==i?void 0:i.document)||document,g=(null==i?void 0:i.trapStack)||y,w=o({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:l,isKeyBackward:b},i),O={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},F=function(e,t,n){return e&&void 0!==e[t]?e[t]:w[n||t]},k=function(e){return O.containerGroups.findIndex((function(t){var n=t.container,r=t.tabbableNodes;return n.contains(e)||r.find((function(t){return t===e}))}))},E=function(e){var t=w[e];if("function"==typeof t){for(var n=arguments.length,r=new Array(n>1?n-1:0),a=1;a<n;a++)r[a-1]=arguments[a];t=t.apply(void 0,r)}if(!0===t&&(t=void 0),!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var o=t;if("string"==typeof t&&!(o=m.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return o},N=function(){var e=E("initialFocus");if(!1===e)return!1;if(void 0===e)if(k(m.activeElement)>=0)e=m.activeElement;else{var t=O.tabbableGroups[0];e=t&&t.firstTabbableNode||E("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},T=function(){if(O.containerGroups=O.containers.map((function(r){var a=e(r,w.tabbableOptions),o=t(r,w.tabbableOptions);return{container:r,tabbableNodes:a,focusableNodes:o,firstTabbableNode:a.length>0?a[0]:null,lastTabbableNode:a.length>0?a[a.length-1]:null,nextTabbableNode:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=o.findIndex((function(t){return t===e}));if(!(r<0))return t?o.slice(r+1).find((function(e){return n(e,w.tabbableOptions)})):o.slice(0,r).reverse().find((function(e){return n(e,w.tabbableOptions)}))}}})),O.tabbableGroups=O.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),O.tabbableGroups.length<=0&&!E("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},D=function e(t){!1!==t&&t!==m.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!w.preventScroll}),O.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(N()))},G=function(e){var t=E("setReturnFocus",e);return t||!1!==t&&e},P=function(e){var t=p(e);k(t)>=0||(d(w.clickOutsideDeactivates,e)?h.deactivate({returnFocus:w.returnFocusOnDeactivate&&!r(t,w.tabbableOptions)}):d(w.allowOutsideClick,e)||e.preventDefault())},j=function(e){var t=p(e),n=k(t)>=0;n||t instanceof Document?n&&(O.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),D(O.mostRecentlyFocusedNode||N()))},C=function(e){if(!(t=e,"Escape"!==t.key&&"Esc"!==t.key&&27!==t.keyCode||!1===d(w.escapeDeactivates,e)))return e.preventDefault(),void h.deactivate();var t;(w.isKeyForward(e)||w.isKeyBackward(e))&&function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=p(e);T();var o=null;if(O.tabbableGroups.length>0){var i=k(a),c=i>=0?O.containerGroups[i]:void 0;if(i<0)o=t?O.tabbableGroups[O.tabbableGroups.length-1].lastTabbableNode:O.tabbableGroups[0].firstTabbableNode;else if(t){var u=v(O.tabbableGroups,(function(e){var t=e.firstTabbableNode;return a===t}));if(u<0&&(c.container===a||r(a,w.tabbableOptions)&&!n(a,w.tabbableOptions)&&!c.nextTabbableNode(a,!1))&&(u=i),u>=0){var l=0===u?O.tabbableGroups.length-1:u-1;o=O.tabbableGroups[l].lastTabbableNode}else s(e)||(o=c.nextTabbableNode(a,!1))}else{var b=v(O.tabbableGroups,(function(e){var t=e.lastTabbableNode;return a===t}));if(b<0&&(c.container===a||r(a,w.tabbableOptions)&&!n(a,w.tabbableOptions)&&!c.nextTabbableNode(a))&&(b=i),b>=0){var f=b===O.tabbableGroups.length-1?0:b+1;o=O.tabbableGroups[f].firstTabbableNode}else s(e)||(o=c.nextTabbableNode(a))}}else o=E("fallbackFocus");o&&(s(e)&&e.preventDefault(),D(o))}(e,w.isKeyBackward(e))},L=function(e){var t=p(e);k(t)>=0||d(w.clickOutsideDeactivates,e)||d(w.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},x=function(){if(O.active)return c(g,h),O.delayInitialFocusTimer=w.delayInitialFocus?f((function(){D(N())})):D(N()),m.addEventListener("focusin",j,!0),m.addEventListener("mousedown",P,{capture:!0,passive:!1}),m.addEventListener("touchstart",P,{capture:!0,passive:!1}),m.addEventListener("click",L,{capture:!0,passive:!1}),m.addEventListener("keydown",C,{capture:!0,passive:!1}),h},I=function(){if(O.active)return m.removeEventListener("focusin",j,!0),m.removeEventListener("mousedown",P,!0),m.removeEventListener("touchstart",P,!0),m.removeEventListener("click",L,!0),m.removeEventListener("keydown",C,!0),h};return(h={get active(){return O.active},get paused(){return O.paused},activate:function(e){if(O.active)return this;var t=F(e,"onActivate"),n=F(e,"onPostActivate"),r=F(e,"checkCanFocusTrap");r||T(),O.active=!0,O.paused=!1,O.nodeFocusedBeforeActivation=m.activeElement,t&&t();var a=function(){r&&T(),x(),n&&n()};return r?(r(O.containers.concat()).then(a,a),this):(a(),this)},deactivate:function(e){if(!O.active)return this;var t=o({onDeactivate:w.onDeactivate,onPostDeactivate:w.onPostDeactivate,checkCanReturnFocus:w.checkCanReturnFocus},e);clearTimeout(O.delayInitialFocusTimer),O.delayInitialFocusTimer=void 0,I(),O.active=!1,O.paused=!1,u(g,h);var n=F(t,"onDeactivate"),r=F(t,"onPostDeactivate"),a=F(t,"checkCanReturnFocus"),i=F(t,"returnFocus","returnFocusOnDeactivate");n&&n();var c=function(){f((function(){i&&D(G(O.nodeFocusedBeforeActivation)),r&&r()}))};return i&&a?(a(G(O.nodeFocusedBeforeActivation)).then(c,c),this):(c(),this)},pause:function(){return O.paused||!O.active||(O.paused=!0,I()),this},unpause:function(){return O.paused&&O.active?(O.paused=!1,T(),x(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return O.containers=t.map((function(e){return"string"==typeof e?m.querySelector(e):e})),O.active&&T(),this}}).updateContainerElements(a),h};export{h as createFocusTrap};
 //# sourceMappingURL=focus-trap.esm.min.js.map

dist/focus-trap.js

 /*!
-* focus-trap 7.1.0
+* focus-trap 7.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
@@ -33,2 +33,3 @@ */
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
@@ -46,4 +47,17 @@ Object.defineProperty(obj, key, {
 }
+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;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
-var rooTrapStack = [];
 var activeFocusTraps = {
@@ -85,2 +99,12 @@ activateTrap: function activateTrap(trapStack, trap) {
 };
+
+// checks for TAB by default
+var isKeyForward = function isKeyForward(e) {
+  return isTabEvent(e) && !e.shiftKey;
+};
+
+// checks for SHIFT+TAB by default
+var isKeyBackward = function isKeyBackward(e) {
+  return isTabEvent(e) && e.shiftKey;
+};
 var delay = function delay(fn) {
@@ -129,2 +153,6 @@ return setTimeout(fn, 0);
 };
+
+// NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this
+//  current instance use the same stack if `userOptions.trapStack` isn't specified
+var internalTrapStack = [];
 var createFocusTrap = function createFocusTrap(elements, userOptions) {
@@ -134,7 +162,9 @@ // SSR: a live trap shouldn't be created in this type of environment so this
   var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;
-  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || rooTrapStack;
+  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;
   var config = _objectSpread2({
     returnFocusOnDeactivate: true,
     escapeDeactivates: true,
-    delayInitialFocus: true
+    delayInitialFocus: true,
+    isKeyForward: isKeyForward,
+    isKeyBackward: isKeyBackward
   }, userOptions);
@@ -420,8 +450,9 @@ var state = {
 
-  // Hijack Tab events on the first and last focusable nodes of the trap,
+  // Hijack key nav events on the first and last focusable nodes of the trap,
   // in order to prevent focus from escaping. If it escapes for even a
   // moment it can end up scrolling the page and causing confusion so we
   // kind of need to capture the action at the keydown phase.
-  var checkTab = function checkTab(e) {
-    var target = getActualTarget(e);
+  var checkKeyNav = function checkKeyNav(event) {
+    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var target = getActualTarget(event);
     updateTabbableNodes();
@@ -437,4 +468,4 @@ var destinationNode = null;
         // target not found in any group: quite possible focus has escaped the trap,
-        //  so bring it back in to...
-        if (e.shiftKey) {
+        //  so bring it back into...
+        if (isBackward) {
           // ...the last node in the last group
@@ -446,3 +477,3 @@ destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;
         }
-      } else if (e.shiftKey) {
+      } else if (isBackward) {
         // REVERSE
@@ -471,2 +502,6 @@
           destinationNode = destinationGroup.lastTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target, false);
         }
@@ -497,5 +532,10 @@ } else {
           destinationNode = _destinationGroup.firstTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target);
         }
       }
     } else {
+      // no groups available
       // NOTE: the fallbackFocus option does not support returning false to opt-out
@@ -505,3 +545,9 @@ destinationNode = getNodeForOption('fallbackFocus');
     if (destinationNode) {
-      e.preventDefault();
+      if (isTabEvent(event)) {
+        // since tab natively moves focus, we wouldn't have a destination node unless we
+        //  were on the edge of a container and had to move to the next/previous edge, in
+        //  which case we want to prevent default to keep the browser from moving focus
+        //  to where it normally would
+        event.preventDefault();
+      }
       tryFocus(destinationNode);
@@ -512,11 +558,10 @@ }
 
-  var checkKey = function checkKey(e) {
-    if (isEscapeEvent(e) && valueOrHandler(config.escapeDeactivates, e) !== false) {
-      e.preventDefault();
+  var checkKey = function checkKey(event) {
+    if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {
+      event.preventDefault();
       trap.deactivate();
       return;
     }
-    if (isTabEvent(e)) {
-      checkTab(e);
-      return;
+    if (config.isKeyForward(event) || config.isKeyBackward(event)) {
+      checkKeyNav(event, config.isKeyBackward(event));
     }
@@ -523,0 +568,0 @@ };

dist/focus-trap.min.js

 /*!
-* focus-trap 7.1.0
+* focus-trap 7.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tabbable");function t(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}function n(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?t(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var r=[],o=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var a=e.indexOf(t);-1===a||e.splice(a,1),e.push(t)},i=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},c=function(e){return setTimeout(e,0)},u=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},s=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},l=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target};exports.createFocusTrap=function(t,a){var b,f=(null==a?void 0:a.document)||document,v=(null==a?void 0:a.trapStack)||r,d=n({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},a),p={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},h=function(e,t,n){return e&&void 0!==e[t]?e[t]:d[n||t]},y=function(e){return p.containerGroups.findIndex((function(t){var n=t.container,a=t.tabbableNodes;return n.contains(e)||a.find((function(t){return t===e}))}))},m=function(e){var t=d[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),r=1;r<n;r++)a[r-1]=arguments[r];t=t.apply(void 0,a)}if(!0===t&&(t=void 0),!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var o=t;if("string"==typeof t&&!(o=f.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return o},O=function(){var e=m("initialFocus");if(!1===e)return!1;if(void 0===e)if(y(f.activeElement)>=0)e=f.activeElement;else{var t=p.tabbableGroups[0];e=t&&t.firstTabbableNode||m("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},g=function(){if(p.containerGroups=p.containers.map((function(t){var n=e.tabbable(t,d.tabbableOptions),a=e.focusable(t,d.tabbableOptions);return{container:t,tabbableNodes:n,focusableNodes:a,firstTabbableNode:n.length>0?n[0]:null,lastTabbableNode:n.length>0?n[n.length-1]:null,nextTabbableNode:function(t){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=a.findIndex((function(e){return e===t}));if(!(r<0))return n?a.slice(r+1).find((function(t){return e.isTabbable(t,d.tabbableOptions)})):a.slice(0,r).reverse().find((function(t){return e.isTabbable(t,d.tabbableOptions)}))}}})),p.tabbableGroups=p.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),p.tabbableGroups.length<=0&&!m("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},F=function e(t){!1!==t&&t!==f.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!d.preventScroll}),p.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(O()))},w=function(e){var t=m("setReturnFocus",e);return t||!1!==t&&e},T=function(t){var n=l(t);y(n)>=0||(s(d.clickOutsideDeactivates,t)?b.deactivate({returnFocus:d.returnFocusOnDeactivate&&!e.isFocusable(n,d.tabbableOptions)}):s(d.allowOutsideClick,t)||t.preventDefault())},E=function(e){var t=l(e),n=y(t)>=0;n||t instanceof Document?n&&(p.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),F(p.mostRecentlyFocusedNode||O()))},k=function(t){if(function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(t)&&!1!==s(d.escapeDeactivates,t))return t.preventDefault(),void b.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(t)&&function(t){var n=l(t);g();var a=null;if(p.tabbableGroups.length>0){var r=y(n),o=r>=0?p.containerGroups[r]:void 0;if(r<0)a=t.shiftKey?p.tabbableGroups[p.tabbableGroups.length-1].lastTabbableNode:p.tabbableGroups[0].firstTabbableNode;else if(t.shiftKey){var i=u(p.tabbableGroups,(function(e){var t=e.firstTabbableNode;return n===t}));if(i<0&&(o.container===n||e.isFocusable(n,d.tabbableOptions)&&!e.isTabbable(n,d.tabbableOptions)&&!o.nextTabbableNode(n,!1))&&(i=r),i>=0){var c=0===i?p.tabbableGroups.length-1:i-1;a=p.tabbableGroups[c].lastTabbableNode}}else{var s=u(p.tabbableGroups,(function(e){var t=e.lastTabbableNode;return n===t}));if(s<0&&(o.container===n||e.isFocusable(n,d.tabbableOptions)&&!e.isTabbable(n,d.tabbableOptions)&&!o.nextTabbableNode(n))&&(s=r),s>=0){var b=s===p.tabbableGroups.length-1?0:s+1;a=p.tabbableGroups[b].firstTabbableNode}}}else a=m("fallbackFocus");a&&(t.preventDefault(),F(a))}(t)},D=function(e){var t=l(e);y(t)>=0||s(d.clickOutsideDeactivates,e)||s(d.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},N=function(){if(p.active)return o(v,b),p.delayInitialFocusTimer=d.delayInitialFocus?c((function(){F(O())})):F(O()),f.addEventListener("focusin",E,!0),f.addEventListener("mousedown",T,{capture:!0,passive:!1}),f.addEventListener("touchstart",T,{capture:!0,passive:!1}),f.addEventListener("click",D,{capture:!0,passive:!1}),f.addEventListener("keydown",k,{capture:!0,passive:!1}),b},G=function(){if(p.active)return f.removeEventListener("focusin",E,!0),f.removeEventListener("mousedown",T,!0),f.removeEventListener("touchstart",T,!0),f.removeEventListener("click",D,!0),f.removeEventListener("keydown",k,!0),b};return(b={get active(){return p.active},get paused(){return p.paused},activate:function(e){if(p.active)return this;var t=h(e,"onActivate"),n=h(e,"onPostActivate"),a=h(e,"checkCanFocusTrap");a||g(),p.active=!0,p.paused=!1,p.nodeFocusedBeforeActivation=f.activeElement,t&&t();var r=function(){a&&g(),N(),n&&n()};return a?(a(p.containers.concat()).then(r,r),this):(r(),this)},deactivate:function(e){if(!p.active)return this;var t=n({onDeactivate:d.onDeactivate,onPostDeactivate:d.onPostDeactivate,checkCanReturnFocus:d.checkCanReturnFocus},e);clearTimeout(p.delayInitialFocusTimer),p.delayInitialFocusTimer=void 0,G(),p.active=!1,p.paused=!1,i(v,b);var a=h(t,"onDeactivate"),r=h(t,"onPostDeactivate"),o=h(t,"checkCanReturnFocus"),u=h(t,"returnFocus","returnFocusOnDeactivate");a&&a();var s=function(){c((function(){u&&F(w(p.nodeFocusedBeforeActivation)),r&&r()}))};return u&&o?(o(w(p.nodeFocusedBeforeActivation)).then(s,s),this):(s(),this)},pause:function(){return p.paused||!p.active||(p.paused=!0,G()),this},unpause:function(){return p.paused&&p.active?(p.paused=!1,g(),N(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return p.containers=t.map((function(e){return"string"==typeof e?f.querySelector(e):e})),p.active&&g(),this}}).updateContainerElements(t),b};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tabbable");function t(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}function n(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?t(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var r=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var a=e.indexOf(t);-1===a||e.splice(a,1),e.push(t)},o=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},i=function(e){return"Tab"===e.key||9===e.keyCode},u=function(e){return i(e)&&!e.shiftKey},c=function(e){return i(e)&&e.shiftKey},s=function(e){return setTimeout(e,0)},l=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},b=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},f=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},v=[];exports.createFocusTrap=function(t,a){var d,p=(null==a?void 0:a.document)||document,y=(null==a?void 0:a.trapStack)||v,h=n({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:u,isKeyBackward:c},a),m={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},g=function(e,t,n){return e&&void 0!==e[t]?e[t]:h[n||t]},O=function(e){return m.containerGroups.findIndex((function(t){var n=t.container,a=t.tabbableNodes;return n.contains(e)||a.find((function(t){return t===e}))}))},w=function(e){var t=h[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),r=1;r<n;r++)a[r-1]=arguments[r];t=t.apply(void 0,a)}if(!0===t&&(t=void 0),!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var o=t;if("string"==typeof t&&!(o=p.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return o},F=function(){var e=w("initialFocus");if(!1===e)return!1;if(void 0===e)if(O(p.activeElement)>=0)e=p.activeElement;else{var t=m.tabbableGroups[0];e=t&&t.firstTabbableNode||w("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},T=function(){if(m.containerGroups=m.containers.map((function(t){var n=e.tabbable(t,h.tabbableOptions),a=e.focusable(t,h.tabbableOptions);return{container:t,tabbableNodes:n,focusableNodes:a,firstTabbableNode:n.length>0?n[0]:null,lastTabbableNode:n.length>0?n[n.length-1]:null,nextTabbableNode:function(t){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=a.findIndex((function(e){return e===t}));if(!(r<0))return n?a.slice(r+1).find((function(t){return e.isTabbable(t,h.tabbableOptions)})):a.slice(0,r).reverse().find((function(t){return e.isTabbable(t,h.tabbableOptions)}))}}})),m.tabbableGroups=m.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),m.tabbableGroups.length<=0&&!w("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},k=function e(t){!1!==t&&t!==p.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!h.preventScroll}),m.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(F()))},E=function(e){var t=w("setReturnFocus",e);return t||!1!==t&&e},N=function(t){var n=f(t);O(n)>=0||(b(h.clickOutsideDeactivates,t)?d.deactivate({returnFocus:h.returnFocusOnDeactivate&&!e.isFocusable(n,h.tabbableOptions)}):b(h.allowOutsideClick,t)||t.preventDefault())},D=function(e){var t=f(e),n=O(t)>=0;n||t instanceof Document?n&&(m.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),k(m.mostRecentlyFocusedNode||F()))},P=function(t){if(!(n=t,"Escape"!==n.key&&"Esc"!==n.key&&27!==n.keyCode||!1===b(h.escapeDeactivates,t)))return t.preventDefault(),void d.deactivate();var n;(h.isKeyForward(t)||h.isKeyBackward(t))&&function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=f(t);T();var r=null;if(m.tabbableGroups.length>0){var o=O(a),u=o>=0?m.containerGroups[o]:void 0;if(o<0)r=n?m.tabbableGroups[m.tabbableGroups.length-1].lastTabbableNode:m.tabbableGroups[0].firstTabbableNode;else if(n){var c=l(m.tabbableGroups,(function(e){var t=e.firstTabbableNode;return a===t}));if(c<0&&(u.container===a||e.isFocusable(a,h.tabbableOptions)&&!e.isTabbable(a,h.tabbableOptions)&&!u.nextTabbableNode(a,!1))&&(c=o),c>=0){var s=0===c?m.tabbableGroups.length-1:c-1;r=m.tabbableGroups[s].lastTabbableNode}else i(t)||(r=u.nextTabbableNode(a,!1))}else{var b=l(m.tabbableGroups,(function(e){var t=e.lastTabbableNode;return a===t}));if(b<0&&(u.container===a||e.isFocusable(a,h.tabbableOptions)&&!e.isTabbable(a,h.tabbableOptions)&&!u.nextTabbableNode(a))&&(b=o),b>=0){var v=b===m.tabbableGroups.length-1?0:b+1;r=m.tabbableGroups[v].firstTabbableNode}else i(t)||(r=u.nextTabbableNode(a))}}else r=w("fallbackFocus");r&&(i(t)&&t.preventDefault(),k(r))}(t,h.isKeyBackward(t))},G=function(e){var t=f(e);O(t)>=0||b(h.clickOutsideDeactivates,e)||b(h.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},j=function(){if(m.active)return r(y,d),m.delayInitialFocusTimer=h.delayInitialFocus?s((function(){k(F())})):k(F()),p.addEventListener("focusin",D,!0),p.addEventListener("mousedown",N,{capture:!0,passive:!1}),p.addEventListener("touchstart",N,{capture:!0,passive:!1}),p.addEventListener("click",G,{capture:!0,passive:!1}),p.addEventListener("keydown",P,{capture:!0,passive:!1}),d},x=function(){if(m.active)return p.removeEventListener("focusin",D,!0),p.removeEventListener("mousedown",N,!0),p.removeEventListener("touchstart",N,!0),p.removeEventListener("click",G,!0),p.removeEventListener("keydown",P,!0),d};return(d={get active(){return m.active},get paused(){return m.paused},activate:function(e){if(m.active)return this;var t=g(e,"onActivate"),n=g(e,"onPostActivate"),a=g(e,"checkCanFocusTrap");a||T(),m.active=!0,m.paused=!1,m.nodeFocusedBeforeActivation=p.activeElement,t&&t();var r=function(){a&&T(),j(),n&&n()};return a?(a(m.containers.concat()).then(r,r),this):(r(),this)},deactivate:function(e){if(!m.active)return this;var t=n({onDeactivate:h.onDeactivate,onPostDeactivate:h.onPostDeactivate,checkCanReturnFocus:h.checkCanReturnFocus},e);clearTimeout(m.delayInitialFocusTimer),m.delayInitialFocusTimer=void 0,x(),m.active=!1,m.paused=!1,o(y,d);var a=g(t,"onDeactivate"),r=g(t,"onPostDeactivate"),i=g(t,"checkCanReturnFocus"),u=g(t,"returnFocus","returnFocusOnDeactivate");a&&a();var c=function(){s((function(){u&&k(E(m.nodeFocusedBeforeActivation)),r&&r()}))};return u&&i?(i(E(m.nodeFocusedBeforeActivation)).then(c,c),this):(c(),this)},pause:function(){return m.paused||!m.active||(m.paused=!0,x()),this},unpause:function(){return m.paused&&m.active?(m.paused=!1,T(),j(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return m.containers=t.map((function(e){return"string"==typeof e?p.querySelector(e):e})),m.active&&T(),this}}).updateContainerElements(t),d};
 //# sourceMappingURL=focus-trap.min.js.map

dist/focus-trap.umd.js

 /*!
-* focus-trap 7.1.0
+* focus-trap 7.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
@@ -38,2 +38,3 @@ */
   function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
     if (key in obj) {
@@ -51,4 +52,17 @@ Object.defineProperty(obj, key, {
   }
+  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;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return typeof key === "symbol" ? key : String(key);
+  }
 
-  var rooTrapStack = [];
   var activeFocusTraps = {
@@ -90,2 +104,12 @@ activateTrap: function activateTrap(trapStack, trap) {
   };
+
+  // checks for TAB by default
+  var isKeyForward = function isKeyForward(e) {
+    return isTabEvent(e) && !e.shiftKey;
+  };
+
+  // checks for SHIFT+TAB by default
+  var isKeyBackward = function isKeyBackward(e) {
+    return isTabEvent(e) && e.shiftKey;
+  };
   var delay = function delay(fn) {
@@ -134,2 +158,6 @@ return setTimeout(fn, 0);
   };
+
+  // NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this
+  //  current instance use the same stack if `userOptions.trapStack` isn't specified
+  var internalTrapStack = [];
   var createFocusTrap = function createFocusTrap(elements, userOptions) {
@@ -139,7 +167,9 @@ // SSR: a live trap shouldn't be created in this type of environment so this
     var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;
-    var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || rooTrapStack;
+    var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;
     var config = _objectSpread2({
       returnFocusOnDeactivate: true,
       escapeDeactivates: true,
-      delayInitialFocus: true
+      delayInitialFocus: true,
+      isKeyForward: isKeyForward,
+      isKeyBackward: isKeyBackward
     }, userOptions);
@@ -425,8 +455,9 @@ var state = {
 
-    // Hijack Tab events on the first and last focusable nodes of the trap,
+    // Hijack key nav events on the first and last focusable nodes of the trap,
     // in order to prevent focus from escaping. If it escapes for even a
     // moment it can end up scrolling the page and causing confusion so we
     // kind of need to capture the action at the keydown phase.
-    var checkTab = function checkTab(e) {
-      var target = getActualTarget(e);
+    var checkKeyNav = function checkKeyNav(event) {
+      var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var target = getActualTarget(event);
       updateTabbableNodes();
@@ -442,4 +473,4 @@ var destinationNode = null;
           // target not found in any group: quite possible focus has escaped the trap,
-          //  so bring it back in to...
-          if (e.shiftKey) {
+          //  so bring it back into...
+          if (isBackward) {
             // ...the last node in the last group
@@ -451,3 +482,3 @@ destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;
           }
-        } else if (e.shiftKey) {
+        } else if (isBackward) {
           // REVERSE
@@ -476,2 +507,6 @@
             destinationNode = destinationGroup.lastTabbableNode;
+          } else if (!isTabEvent(event)) {
+            // user must have customized the nav keys so we have to move focus manually _within_
+            //  the active group: do this based on the order determined by tabbable()
+            destinationNode = containerGroup.nextTabbableNode(target, false);
           }
@@ -502,5 +537,10 @@ } else {
             destinationNode = _destinationGroup.firstTabbableNode;
+          } else if (!isTabEvent(event)) {
+            // user must have customized the nav keys so we have to move focus manually _within_
+            //  the active group: do this based on the order determined by tabbable()
+            destinationNode = containerGroup.nextTabbableNode(target);
           }
         }
       } else {
+        // no groups available
         // NOTE: the fallbackFocus option does not support returning false to opt-out
@@ -510,3 +550,9 @@ destinationNode = getNodeForOption('fallbackFocus');
       if (destinationNode) {
-        e.preventDefault();
+        if (isTabEvent(event)) {
+          // since tab natively moves focus, we wouldn't have a destination node unless we
+          //  were on the edge of a container and had to move to the next/previous edge, in
+          //  which case we want to prevent default to keep the browser from moving focus
+          //  to where it normally would
+          event.preventDefault();
+        }
         tryFocus(destinationNode);
@@ -517,11 +563,10 @@ }
 
-    var checkKey = function checkKey(e) {
-      if (isEscapeEvent(e) && valueOrHandler(config.escapeDeactivates, e) !== false) {
-        e.preventDefault();
+    var checkKey = function checkKey(event) {
+      if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {
+        event.preventDefault();
         trap.deactivate();
         return;
       }
-      if (isTabEvent(e)) {
-        checkTab(e);
-        return;
+      if (config.isKeyForward(event) || config.isKeyBackward(event)) {
+        checkKeyNav(event, config.isKeyBackward(event));
       }
@@ -528,0 +573,0 @@ };

dist/focus-trap.umd.min.js

 /*!
-* focus-trap 7.1.0
+* focus-trap 7.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,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){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}function a(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?n(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):n(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var r=[],i=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var a=e.indexOf(t);-1===a||e.splice(a,1),e.push(t)},c=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},u=function(e){return setTimeout(e,0)},s=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},l=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},b=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target};e.createFocusTrap=function(e,n){var o,f=(null==n?void 0:n.document)||document,d=(null==n?void 0:n.trapStack)||r,v=a({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},n),p={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},h=function(e,t,n){return e&&void 0!==e[t]?e[t]:v[n||t]},y=function(e){return p.containerGroups.findIndex((function(t){var n=t.container,a=t.tabbableNodes;return n.contains(e)||a.find((function(t){return t===e}))}))},m=function(e){var t=v[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),o=1;o<n;o++)a[o-1]=arguments[o];t=t.apply(void 0,a)}if(!0===t&&(t=void 0),!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var r=t;if("string"==typeof t&&!(r=f.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return r},O=function(){var e=m("initialFocus");if(!1===e)return!1;if(void 0===e)if(y(f.activeElement)>=0)e=f.activeElement;else{var t=p.tabbableGroups[0];e=t&&t.firstTabbableNode||m("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},g=function(){if(p.containerGroups=p.containers.map((function(e){var n=t.tabbable(e,v.tabbableOptions),a=t.focusable(e,v.tabbableOptions);return{container:e,tabbableNodes:n,focusableNodes:a,firstTabbableNode:n.length>0?n[0]:null,lastTabbableNode:n.length>0?n[n.length-1]:null,nextTabbableNode:function(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],o=a.findIndex((function(t){return t===e}));if(!(o<0))return n?a.slice(o+1).find((function(e){return t.isTabbable(e,v.tabbableOptions)})):a.slice(0,o).reverse().find((function(e){return t.isTabbable(e,v.tabbableOptions)}))}}})),p.tabbableGroups=p.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),p.tabbableGroups.length<=0&&!m("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},F=function e(t){!1!==t&&t!==f.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!v.preventScroll}),p.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(O()))},T=function(e){var t=m("setReturnFocus",e);return t||!1!==t&&e},w=function(e){var n=b(e);y(n)>=0||(l(v.clickOutsideDeactivates,e)?o.deactivate({returnFocus:v.returnFocusOnDeactivate&&!t.isFocusable(n,v.tabbableOptions)}):l(v.allowOutsideClick,e)||e.preventDefault())},E=function(e){var t=b(e),n=y(t)>=0;n||t instanceof Document?n&&(p.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),F(p.mostRecentlyFocusedNode||O()))},k=function(e){if(function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e)&&!1!==l(v.escapeDeactivates,e))return e.preventDefault(),void o.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){var n=b(e);g();var a=null;if(p.tabbableGroups.length>0){var o=y(n),r=o>=0?p.containerGroups[o]:void 0;if(o<0)a=e.shiftKey?p.tabbableGroups[p.tabbableGroups.length-1].lastTabbableNode:p.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var i=s(p.tabbableGroups,(function(e){var t=e.firstTabbableNode;return n===t}));if(i<0&&(r.container===n||t.isFocusable(n,v.tabbableOptions)&&!t.isTabbable(n,v.tabbableOptions)&&!r.nextTabbableNode(n,!1))&&(i=o),i>=0){var c=0===i?p.tabbableGroups.length-1:i-1;a=p.tabbableGroups[c].lastTabbableNode}}else{var u=s(p.tabbableGroups,(function(e){var t=e.lastTabbableNode;return n===t}));if(u<0&&(r.container===n||t.isFocusable(n,v.tabbableOptions)&&!t.isTabbable(n,v.tabbableOptions)&&!r.nextTabbableNode(n))&&(u=o),u>=0){var l=u===p.tabbableGroups.length-1?0:u+1;a=p.tabbableGroups[l].firstTabbableNode}}}else a=m("fallbackFocus");a&&(e.preventDefault(),F(a))}(e)},D=function(e){var t=b(e);y(t)>=0||l(v.clickOutsideDeactivates,e)||l(v.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},N=function(){if(p.active)return i(d,o),p.delayInitialFocusTimer=v.delayInitialFocus?u((function(){F(O())})):F(O()),f.addEventListener("focusin",E,!0),f.addEventListener("mousedown",w,{capture:!0,passive:!1}),f.addEventListener("touchstart",w,{capture:!0,passive:!1}),f.addEventListener("click",D,{capture:!0,passive:!1}),f.addEventListener("keydown",k,{capture:!0,passive:!1}),o},G=function(){if(p.active)return f.removeEventListener("focusin",E,!0),f.removeEventListener("mousedown",w,!0),f.removeEventListener("touchstart",w,!0),f.removeEventListener("click",D,!0),f.removeEventListener("keydown",k,!0),o};return(o={get active(){return p.active},get paused(){return p.paused},activate:function(e){if(p.active)return this;var t=h(e,"onActivate"),n=h(e,"onPostActivate"),a=h(e,"checkCanFocusTrap");a||g(),p.active=!0,p.paused=!1,p.nodeFocusedBeforeActivation=f.activeElement,t&&t();var o=function(){a&&g(),N(),n&&n()};return a?(a(p.containers.concat()).then(o,o),this):(o(),this)},deactivate:function(e){if(!p.active)return this;var t=a({onDeactivate:v.onDeactivate,onPostDeactivate:v.onPostDeactivate,checkCanReturnFocus:v.checkCanReturnFocus},e);clearTimeout(p.delayInitialFocusTimer),p.delayInitialFocusTimer=void 0,G(),p.active=!1,p.paused=!1,c(d,o);var n=h(t,"onDeactivate"),r=h(t,"onPostDeactivate"),i=h(t,"checkCanReturnFocus"),s=h(t,"returnFocus","returnFocusOnDeactivate");n&&n();var l=function(){u((function(){s&&F(T(p.nodeFocusedBeforeActivation)),r&&r()}))};return s&&i?(i(T(p.nodeFocusedBeforeActivation)).then(l,l),this):(l(),this)},pause:function(){return p.paused||!p.active||(p.paused=!0,G()),this},unpause:function(){return p.paused&&p.active?(p.paused=!1,g(),N(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return p.containers=t.map((function(e){return"string"==typeof e?f.querySelector(e):e})),p.active&&g(),this}}).updateContainerElements(e),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){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}function a(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?n(Object(a),!0).forEach((function(t){r(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):n(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function r(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var o=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var a=e.indexOf(t);-1===a||e.splice(a,1),e.push(t)},i=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},u=function(e){return"Tab"===e.key||9===e.keyCode},c=function(e){return u(e)&&!e.shiftKey},s=function(e){return u(e)&&e.shiftKey},l=function(e){return setTimeout(e,0)},b=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},f=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},d=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},v=[];e.createFocusTrap=function(e,n){var r,p=(null==n?void 0:n.document)||document,y=(null==n?void 0:n.trapStack)||v,h=a({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:c,isKeyBackward:s},n),m={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},g=function(e,t,n){return e&&void 0!==e[t]?e[t]:h[n||t]},O=function(e){return m.containerGroups.findIndex((function(t){var n=t.container,a=t.tabbableNodes;return n.contains(e)||a.find((function(t){return t===e}))}))},w=function(e){var t=h[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),r=1;r<n;r++)a[r-1]=arguments[r];t=t.apply(void 0,a)}if(!0===t&&(t=void 0),!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var o=t;if("string"==typeof t&&!(o=p.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return o},F=function(){var e=w("initialFocus");if(!1===e)return!1;if(void 0===e)if(O(p.activeElement)>=0)e=p.activeElement;else{var t=m.tabbableGroups[0];e=t&&t.firstTabbableNode||w("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},T=function(){if(m.containerGroups=m.containers.map((function(e){var n=t.tabbable(e,h.tabbableOptions),a=t.focusable(e,h.tabbableOptions);return{container:e,tabbableNodes:n,focusableNodes:a,firstTabbableNode:n.length>0?n[0]:null,lastTabbableNode:n.length>0?n[n.length-1]:null,nextTabbableNode:function(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=a.findIndex((function(t){return t===e}));if(!(r<0))return n?a.slice(r+1).find((function(e){return t.isTabbable(e,h.tabbableOptions)})):a.slice(0,r).reverse().find((function(e){return t.isTabbable(e,h.tabbableOptions)}))}}})),m.tabbableGroups=m.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),m.tabbableGroups.length<=0&&!w("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},k=function e(t){!1!==t&&t!==p.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!h.preventScroll}),m.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(F()))},E=function(e){var t=w("setReturnFocus",e);return t||!1!==t&&e},N=function(e){var n=d(e);O(n)>=0||(f(h.clickOutsideDeactivates,e)?r.deactivate({returnFocus:h.returnFocusOnDeactivate&&!t.isFocusable(n,h.tabbableOptions)}):f(h.allowOutsideClick,e)||e.preventDefault())},D=function(e){var t=d(e),n=O(t)>=0;n||t instanceof Document?n&&(m.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),k(m.mostRecentlyFocusedNode||F()))},P=function(e){if(!(n=e,"Escape"!==n.key&&"Esc"!==n.key&&27!==n.keyCode||!1===f(h.escapeDeactivates,e)))return e.preventDefault(),void r.deactivate();var n;(h.isKeyForward(e)||h.isKeyBackward(e))&&function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=d(e);T();var r=null;if(m.tabbableGroups.length>0){var o=O(a),i=o>=0?m.containerGroups[o]:void 0;if(o<0)r=n?m.tabbableGroups[m.tabbableGroups.length-1].lastTabbableNode:m.tabbableGroups[0].firstTabbableNode;else if(n){var c=b(m.tabbableGroups,(function(e){var t=e.firstTabbableNode;return a===t}));if(c<0&&(i.container===a||t.isFocusable(a,h.tabbableOptions)&&!t.isTabbable(a,h.tabbableOptions)&&!i.nextTabbableNode(a,!1))&&(c=o),c>=0){var s=0===c?m.tabbableGroups.length-1:c-1;r=m.tabbableGroups[s].lastTabbableNode}else u(e)||(r=i.nextTabbableNode(a,!1))}else{var l=b(m.tabbableGroups,(function(e){var t=e.lastTabbableNode;return a===t}));if(l<0&&(i.container===a||t.isFocusable(a,h.tabbableOptions)&&!t.isTabbable(a,h.tabbableOptions)&&!i.nextTabbableNode(a))&&(l=o),l>=0){var f=l===m.tabbableGroups.length-1?0:l+1;r=m.tabbableGroups[f].firstTabbableNode}else u(e)||(r=i.nextTabbableNode(a))}}else r=w("fallbackFocus");r&&(u(e)&&e.preventDefault(),k(r))}(e,h.isKeyBackward(e))},G=function(e){var t=d(e);O(t)>=0||f(h.clickOutsideDeactivates,e)||f(h.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},j=function(){if(m.active)return o(y,r),m.delayInitialFocusTimer=h.delayInitialFocus?l((function(){k(F())})):k(F()),p.addEventListener("focusin",D,!0),p.addEventListener("mousedown",N,{capture:!0,passive:!1}),p.addEventListener("touchstart",N,{capture:!0,passive:!1}),p.addEventListener("click",G,{capture:!0,passive:!1}),p.addEventListener("keydown",P,{capture:!0,passive:!1}),r},x=function(){if(m.active)return p.removeEventListener("focusin",D,!0),p.removeEventListener("mousedown",N,!0),p.removeEventListener("touchstart",N,!0),p.removeEventListener("click",G,!0),p.removeEventListener("keydown",P,!0),r};return(r={get active(){return m.active},get paused(){return m.paused},activate:function(e){if(m.active)return this;var t=g(e,"onActivate"),n=g(e,"onPostActivate"),a=g(e,"checkCanFocusTrap");a||T(),m.active=!0,m.paused=!1,m.nodeFocusedBeforeActivation=p.activeElement,t&&t();var r=function(){a&&T(),j(),n&&n()};return a?(a(m.containers.concat()).then(r,r),this):(r(),this)},deactivate:function(e){if(!m.active)return this;var t=a({onDeactivate:h.onDeactivate,onPostDeactivate:h.onPostDeactivate,checkCanReturnFocus:h.checkCanReturnFocus},e);clearTimeout(m.delayInitialFocusTimer),m.delayInitialFocusTimer=void 0,x(),m.active=!1,m.paused=!1,i(y,r);var n=g(t,"onDeactivate"),o=g(t,"onPostDeactivate"),u=g(t,"checkCanReturnFocus"),c=g(t,"returnFocus","returnFocusOnDeactivate");n&&n();var s=function(){l((function(){c&&k(E(m.nodeFocusedBeforeActivation)),o&&o()}))};return c&&u?(u(E(m.nodeFocusedBeforeActivation)).then(s,s),this):(s(),this)},pause:function(){return m.paused||!m.active||(m.paused=!0,x()),this},unpause:function(){return m.paused&&m.active?(m.paused=!1,T(),j(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return m.containers=t.map((function(e){return"string"==typeof e?p.querySelector(e):e})),m.active&&T(),this}}).updateContainerElements(e),r},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=focus-trap.umd.min.js.map

index.d.ts

@@ -182,2 +182,18 @@ import { CheckOptions as TabbableCheckOptions } from 'tabbable';
     trapStack?: Array<FocusTrap>;
+
+    /**
+     * Determines if the given keyboard event is a "tab forward" event that will move
+     * the focus to the next trapped element in tab order. Defaults to the `TAB` key.
+     * Use this to override the trap's behavior if you want to use arrow keys to control
+     * keyboard navigation within the trap, for example. Also see `isKeyBackward()` option.
+     */
+    isKeyForward?: KeyboardEventToBoolean;
+
+    /**
+     * Determines if the given keyboard event is a "tab backward" event that will move
+     * the focus to the previous trapped element in tab order. Defaults to the `SHIFT+TAB` key.
+     * Use this to override the trap's behavior if you want to use arrow keys to control
+     * keyboard navigation within the trap, for example. Also see `isKeyForward()` option.
+     */
+    isKeyBackward?: KeyboardEventToBoolean;
   }
@@ -184,0 +200,0 @@

index.js

 import { tabbable, focusable, isFocusable, isTabbable } from 'tabbable';
 
-const rooTrapStack = [];
-
 const activeFocusTraps = {
@@ -52,2 +50,12 @@ activateTrap(trapStack, trap) {
 
+// checks for TAB by default
+const isKeyForward = function (e) {
+  return isTabEvent(e) && !e.shiftKey;
+};
+
+// checks for SHIFT+TAB by default
+const isKeyBackward = function (e) {
+  return isTabEvent(e) && e.shiftKey;
+};
+
 const delay = function (fn) {
@@ -98,2 +106,6 @@ return setTimeout(fn, 0);
 
+// NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this
+//  current instance use the same stack if `userOptions.trapStack` isn't specified
+const internalTrapStack = [];
+
 const createFocusTrap = function (elements, userOptions) {
@@ -104,3 +116,3 @@ // SSR: a live trap shouldn't be created in this type of environment so this
 
-  const trapStack = userOptions?.trapStack || rooTrapStack;
+  const trapStack = userOptions?.trapStack || internalTrapStack;
 
@@ -111,2 +123,4 @@ const config = {
     delayInitialFocus: true,
+    isKeyForward,
+    isKeyBackward,
     ...userOptions,
@@ -428,8 +442,8 @@ };
 
-  // Hijack Tab events on the first and last focusable nodes of the trap,
+  // Hijack key nav events on the first and last focusable nodes of the trap,
   // in order to prevent focus from escaping. If it escapes for even a
   // moment it can end up scrolling the page and causing confusion so we
   // kind of need to capture the action at the keydown phase.
-  const checkTab = function (e) {
-    const target = getActualTarget(e);
+  const checkKeyNav = function (event, isBackward = false) {
+    const target = getActualTarget(event);
     updateTabbableNodes();
@@ -449,4 +463,4 @@
         // target not found in any group: quite possible focus has escaped the trap,
-        //  so bring it back in to...
-        if (e.shiftKey) {
+        //  so bring it back into...
+        if (isBackward) {
           // ...the last node in the last group
@@ -460,3 +474,3 @@ destinationNode =
         }
-      } else if (e.shiftKey) {
+      } else if (isBackward) {
         // REVERSE
@@ -497,2 +511,6 @@
           destinationNode = destinationGroup.lastTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target, false);
         }
@@ -535,5 +553,10 @@ } else {
           destinationNode = destinationGroup.firstTabbableNode;
+        } else if (!isTabEvent(event)) {
+          // user must have customized the nav keys so we have to move focus manually _within_
+          //  the active group: do this based on the order determined by tabbable()
+          destinationNode = containerGroup.nextTabbableNode(target);
         }
       }
     } else {
+      // no groups available
       // NOTE: the fallbackFocus option does not support returning false to opt-out
@@ -544,3 +567,9 @@ destinationNode = getNodeForOption('fallbackFocus');
     if (destinationNode) {
-      e.preventDefault();
+      if (isTabEvent(event)) {
+        // since tab natively moves focus, we wouldn't have a destination node unless we
+        //  were on the edge of a container and had to move to the next/previous edge, in
+        //  which case we want to prevent default to keep the browser from moving focus
+        //  to where it normally would
+        event.preventDefault();
+      }
       tryFocus(destinationNode);
@@ -551,8 +580,8 @@ }
 
-  const checkKey = function (e) {
+  const checkKey = function (event) {
     if (
-      isEscapeEvent(e) &&
-      valueOrHandler(config.escapeDeactivates, e) !== false
+      isEscapeEvent(event) &&
+      valueOrHandler(config.escapeDeactivates, event) !== false
     ) {
-      e.preventDefault();
+      event.preventDefault();
       trap.deactivate();
@@ -562,5 +591,4 @@ return;
 
-    if (isTabEvent(e)) {
-      checkTab(e);
-      return;
+    if (config.isKeyForward(event) || config.isKeyBackward(event)) {
+      checkKeyNav(event, config.isKeyBackward(event));
     }
@@ -567,0 +595,0 @@ };

package.json

 {
   "name": "focus-trap",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Trap focus within a DOM node.",
@@ -70,10 +70,10 @@ "main": "dist/focus-trap.js",
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-env": "^7.20.2",
     "@changesets/cli": "^2.25.2",
-    "@rollup/plugin-babel": "^6.0.2",
-    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@testing-library/cypress": "^8.0.3",
+    "@testing-library/cypress": "^8.0.7",
     "@types/jquery": "^3.5.14",
@@ -83,19 +83,19 @@ "all-contributors-cli": "^6.24.0",
     "cross-env": "^7.0.3",
-    "cypress": "^10.11.0",
+    "cypress": "^11.2.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.27.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-jest": "^27.1.4",
+    "eslint-plugin-jest": "^27.1.6",
     "onchange": "^7.1.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "rollup": "^2.79.1",
     "rollup-plugin-inject-process-env": "^1.3.1",
     "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-serve": "^2.0.1",
+    "rollup-plugin-serve": "^2.0.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.1",
     "start-server-and-test": "^1.14.0",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.3"
   }
 }

README.md

@@ -124,2 +124,6 @@ # 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)
 - **trapStack** (optional) `{Array<FocusTrap>}`: Define the global trap stack. This makes it possible to share the same stack in multiple instances of `focus-trap` in the same page such that auto-activation/pausing of traps is properly coordinated among all instances as activating a trap when another is already active should result in the other being auto-paused. By default, each instance will have its own internal stack, leading to conflicts if they each try to trap the focus at the same time.
+- **isKeyForward** `{(event: KeyboardEvent) => boolean}`: (optional) Determines if the given keyboard event is a "tab forward" event that will move the focus to the next trapped element in tab order. Defaults to the `TAB` key. Use this to override the trap's behavior if you want to use arrow keys to control keyboard navigation within the trap, for example. Also see `isKeyBackward()` option.
+    - ⚠️ Using this option will not automatically prevent use of the `TAB` key as the browser will continue to respond to it by moving focus forward because that's what using the `TAB` key does in a browser, but it will no longer respect the trap's container edges as it normally would. You will need to add your own `keydown` handler to call `preventDefault()` on a `TAB` key event if you want to completely suppress the use of the `TAB` key.
+- **isKeyBackward** `{(event: KeyboardEvent) => boolean}`: (optional) Determines if the given keyboard event is a "tab backward" event that will move the focus to the previous trapped element in tab order. Defaults to the `SHIFT+TAB` key. Use this to override the trap's behavior if you want to use arrow keys to control keyboard navigation within the trap, for example. Also see `isKeyForward()` option.
+    - ⚠️ Using this option will not automatically prevent use of the `SHIFT+TAB` key as the browser will continue to respond to it by moving focus backward because that's what using the `SHIFT+TAB` key sequence does in a browser, but it will no longer respect the trap's container edges as it normally would. You will need to add your own `keydown` handler to call `preventDefault()` on a `TAB` key event if you want to completely suppress the use of the `SHIFT+TAB` key sequence.
 
@@ -126,0 +130,0 @@ #### Shadow DOM

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

478413

increased by5.65%

Lines of code

3107

increased by5.9%

Number of lines in readme file

364

increased by1.11%

No dependency changes