focus-trap 7.0.0 → 7.2.0

package/index.js

@@ -1,38 +1,35 @@
 import { tabbable, focusable, isFocusable, isTabbable } from 'tabbable';
 
-const activeFocusTraps = (function () {
-  const trapQueue = [];
-  return {
-    activateTrap(trap) {
-      if (trapQueue.length > 0) {
-        const activeTrap = trapQueue[trapQueue.length - 1];
-        if (activeTrap !== trap) {
-          activeTrap.pause();
-        }
+const activeFocusTraps = {
+  activateTrap(trapStack, trap) {
+    if (trapStack.length > 0) {
+      const activeTrap = trapStack[trapStack.length - 1];
+      if (activeTrap !== trap) {
+        activeTrap.pause();
       }
+    }
 
-      const trapIndex = trapQueue.indexOf(trap);
-      if (trapIndex === -1) {
-        trapQueue.push(trap);
-      } else {
-        // move this existing trap to the front of the queue
-        trapQueue.splice(trapIndex, 1);
-        trapQueue.push(trap);
-      }
-    },
+    const trapIndex = trapStack.indexOf(trap);
+    if (trapIndex === -1) {
+      trapStack.push(trap);
+    } else {
+      // move this existing trap to the front of the queue
+      trapStack.splice(trapIndex, 1);
+      trapStack.push(trap);
+    }
+  },
 
-    deactivateTrap(trap) {
-      const trapIndex = trapQueue.indexOf(trap);
-      if (trapIndex !== -1) {
-        trapQueue.splice(trapIndex, 1);
-      }
+  deactivateTrap(trapStack, trap) {
+    const trapIndex = trapStack.indexOf(trap);
+    if (trapIndex !== -1) {
+      trapStack.splice(trapIndex, 1);
+    }
 
-      if (trapQueue.length > 0) {
-        trapQueue[trapQueue.length - 1].unpause();
-      }
-    },
-  };
-})();
+    if (trapStack.length > 0) {
+      trapStack[trapStack.length - 1].unpause();
+    }
+  },
+};
 
 const isSelectableInput = function (node) {
   return (
@@ -50,6 +47,16 @@ const isTabEvent = function (e) {
   return e.key === 'Tab' || e.keyCode === 9;
 };
 
+// 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) {
   return setTimeout(fn, 0);
 };
@@ -95,15 +102,23 @@ const getActualTarget = function (event) {
     : event.target;
 };
 
+// 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) {
   // SSR: a live trap shouldn't be created in this type of environment so this
   //  should be safe code to execute if the `document` option isn't specified
   const doc = userOptions?.document || document;
 
+  const trapStack = userOptions?.trapStack || internalTrapStack;
+
   const config = {
     returnFocusOnDeactivate: true,
     escapeDeactivates: true,
     delayInitialFocus: true,
+    isKeyForward,
+    isKeyBackward,
     ...userOptions,
   };
 
@@ -420,12 +435,12 @@ const createFocusTrap = function (elements, userOptions) {
     }
   };
 
-  // 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();
 
     let destinationNode = null;
@@ -440,8 +455,8 @@ const createFocusTrap = function (elements, userOptions) {
 
       if (containerIndex < 0) {
         // 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
           destinationNode =
             state.tabbableGroups[state.tabbableGroups.length - 1]
@@ -450,7 +465,7 @@ const createFocusTrap = function (elements, userOptions) {
           // ...the first node in the first group
           destinationNode = state.tabbableGroups[0].firstTabbableNode;
         }
-      } else if (e.shiftKey) {
+      } else if (isBackward) {
         // REVERSE
 
         // is the target the first tabbable node in a group?
@@ -486,6 +501,10 @@ const createFocusTrap = function (elements, userOptions) {
 
           const destinationGroup = state.tabbableGroups[destinationGroupIndex];
           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);
         }
       } else {
         // FORWARD
@@ -523,33 +542,43 @@ const createFocusTrap = function (elements, userOptions) {
 
           const destinationGroup = state.tabbableGroups[destinationGroupIndex];
           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
       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);
     }
     // else, let the browser take care of [shift+]tab and move the focus
   };
 
-  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();
       return;
     }
 
-    if (isTabEvent(e)) {
-      checkTab(e);
-      return;
+    if (config.isKeyForward(event) || config.isKeyBackward(event)) {
+      checkKeyNav(event, config.isKeyBackward(event));
     }
   };
 
@@ -582,7 +611,7 @@ const createFocusTrap = function (elements, userOptions) {
     }
 
     // There can be only one listening focus trap at a time
-    activeFocusTraps.activateTrap(trap);
+    activeFocusTraps.activateTrap(trapStack, trap);
 
     // Delay ensures that the focused element doesn't capture the event
     // that caused the focus trap activation.
@@ -702,7 +731,7 @@ const createFocusTrap = function (elements, userOptions) {
       state.active = false;
       state.paused = false;
 
-      activeFocusTraps.deactivateTrap(trap);
+      activeFocusTraps.deactivateTrap(trapStack, trap);
 
       const onDeactivate = getOption(options, 'onDeactivate');
       const onPostDeactivate = getOption(options, 'onPostDeactivate');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "description": "Trap focus within a DOM node.",
   "main": "dist/focus-trap.js",
   "module": "dist/focus-trap.esm.js",
@@ -63,37 +63,37 @@
   },
   "homepage": "https://github.com/focus-trap/focus-trap#readme",
   "dependencies": {
-    "tabbable": "^6.0.0"
+    "tabbable": "^6.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.10",
-    "@babel/eslint-parser": "^7.18.9",
-    "@babel/preset-env": "^7.18.10",
-    "@changesets/cli": "^2.24.3",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@testing-library/cypress": "^8.0.3",
+    "@babel/cli": "^7.19.3",
+    "@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.3",
+    "@rollup/plugin-commonjs": "^23.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@testing-library/cypress": "^8.0.7",
     "@types/jquery": "^3.5.14",
-    "all-contributors-cli": "^6.20.0",
-    "babel-loader": "^8.2.5",
+    "all-contributors-cli": "^6.24.0",
+    "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "cypress": "^10.6.0",
+    "cypress": "^11.2.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.22.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-jest": "^26.8.3",
+    "eslint-plugin-jest": "^27.1.6",
     "onchange": "^7.1.0",
-    "prettier": "^2.7.1",
-    "rollup": "^2.78.0",
+    "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.7.4"
+    "typescript": "^4.9.3"
   }
 }