focus-trap 6.4.0 → 6.6.1

package/index.js

@@ -1,7 +1,5 @@
 import { tabbable, isFocusable } from 'tabbable';
 
-let activeFocusDelay;
-
 const activeFocusTraps = (function () {
   const trapQueue = [];
   return {
@@ -111,10 +109,21 @@ const createFocusTrap = function (elements, userOptions) {
     mostRecentlyFocusedNode: null,
     active: false,
     paused: false,
+
+    // timer ID for when delayInitialFocus is true and initial focus in this trap
+    //  has been delayed during activation
+    delayInitialFocusTimer: undefined,
   };
 
   let trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later
 
+  const getOption = (configOverrideOptions, optionName, configOptionName) => {
+    return configOverrideOptions &&
+      configOverrideOptions[optionName] !== undefined
+      ? configOverrideOptions[optionName]
+      : config[configOptionName || optionName];
+  };
+
   const containersContain = function (element) {
     return state.containers.some((container) => container.contains(element));
   };
@@ -147,6 +156,11 @@ const createFocusTrap = function (elements, userOptions) {
   const getInitialFocusNode = function () {
     let node;
 
+    // false indicates we want no initialFocus at all
+    if (getOption({}, 'initialFocus') === false) {
+      return false;
+    }
+
     if (getNodeForOption('initialFocus') !== null) {
       node = getNodeForOption('initialFocus');
     } else if (containersContain(doc.activeElement)) {
@@ -196,9 +210,14 @@ const createFocusTrap = function (elements, userOptions) {
   };
 
   const tryFocus = function (node) {
+    if (node === false) {
+      return;
+    }
+
     if (node === doc.activeElement) {
       return;
     }
+
     if (!node || !node.focus) {
       tryFocus(getInitialFocusNode());
       return;
@@ -376,7 +395,10 @@ const createFocusTrap = function (elements, userOptions) {
   };
 
   const checkKey = function (e) {
-    if (config.escapeDeactivates !== false && isEscapeEvent(e)) {
+    if (
+      isEscapeEvent(e) &&
+      valueOrHandler(config.escapeDeactivates) !== false
+    ) {
       e.preventDefault();
       trap.deactivate();
       return;
@@ -419,7 +441,7 @@ const createFocusTrap = function (elements, userOptions) {
 
     // Delay ensures that the focused element doesn't capture the event
     // that caused the focus trap activation.
-    activeFocusDelay = config.delayInitialFocus
+    state.delayInitialFocusTimer = config.delayInitialFocus
       ? delay(function () {
           tryFocus(getInitialFocusNode());
         })
@@ -470,21 +492,41 @@ const createFocusTrap = function (elements, userOptions) {
         return this;
       }
 
-      updateTabbableNodes();
+      const onActivate = getOption(activateOptions, 'onActivate');
+      const onPostActivate = getOption(activateOptions, 'onPostActivate');
+      const checkCanFocusTrap = getOption(activateOptions, 'checkCanFocusTrap');
+
+      if (!checkCanFocusTrap) {
+        updateTabbableNodes();
+      }
 
       state.active = true;
       state.paused = false;
       state.nodeFocusedBeforeActivation = doc.activeElement;
 
-      const onActivate =
-        activateOptions && activateOptions.onActivate
-          ? activateOptions.onActivate
-          : config.onActivate;
       if (onActivate) {
         onActivate();
       }
 
-      addListeners();
+      const finishActivation = () => {
+        if (checkCanFocusTrap) {
+          updateTabbableNodes();
+        }
+        addListeners();
+        if (onPostActivate) {
+          onPostActivate();
+        }
+      };
+
+      if (checkCanFocusTrap) {
+        checkCanFocusTrap(state.containers.concat()).then(
+          finishActivation,
+          finishActivation
+        );
+        return this;
+      }
+
+      finishActivation();
       return this;
     },
 
@@ -493,7 +535,8 @@ const createFocusTrap = function (elements, userOptions) {
         return this;
       }
 
-      clearTimeout(activeFocusDelay);
+      clearTimeout(state.delayInitialFocusTimer); // noop if undefined
+      state.delayInitialFocusTimer = undefined;
 
       removeListeners();
       state.active = false;
@@ -501,25 +544,42 @@ const createFocusTrap = function (elements, userOptions) {
 
       activeFocusTraps.deactivateTrap(trap);
 
-      const onDeactivate =
-        deactivateOptions && deactivateOptions.onDeactivate !== undefined
-          ? deactivateOptions.onDeactivate
-          : config.onDeactivate;
+      const onDeactivate = getOption(deactivateOptions, 'onDeactivate');
+      const onPostDeactivate = getOption(deactivateOptions, 'onPostDeactivate');
+      const checkCanReturnFocus = getOption(
+        deactivateOptions,
+        'checkCanReturnFocus'
+      );
+
       if (onDeactivate) {
         onDeactivate();
       }
 
-      const returnFocus =
-        deactivateOptions && deactivateOptions.returnFocus !== undefined
-          ? deactivateOptions.returnFocus
-          : config.returnFocusOnDeactivate;
+      const returnFocus = getOption(
+        deactivateOptions,
+        'returnFocus',
+        'returnFocusOnDeactivate'
+      );
 
-      if (returnFocus) {
-        delay(function () {
-          tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
+      const finishDeactivation = () => {
+        delay(() => {
+          if (returnFocus) {
+            tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
+          }
+          if (onPostDeactivate) {
+            onPostDeactivate();
+          }
         });
+      };
+
+      if (returnFocus && checkCanReturnFocus) {
+        checkCanReturnFocus(
+          getReturnFocusNode(state.nodeFocusedBeforeActivation)
+        ).then(finishDeactivation, finishDeactivation);
+        return this;
       }
 
+      finishDeactivation();
       return this;
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap",
-  "version": "6.4.0",
+  "version": "6.6.1",
   "description": "Trap focus within a DOM node.",
   "main": "dist/focus-trap.js",
   "module": "dist/focus-trap.esm.js",
@@ -17,18 +17,18 @@
     "dist"
   ],
   "scripts": {
-    "demo-bundle": "browserify demo/js/index.js -o demo/demo-bundle.js",
-    "format": "prettier --write \"{*,src/**/*,test/**/*,demo/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\"",
-    "format:check": "prettier --check \"{*,src/**/*,test/**/*,demo/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\"",
-    "format:watch": "onchange \"{*,src/**/*,test/**/*,demo/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\" -- prettier --write {{changed}}",
-    "lint": "eslint \"*.js\" \"demo/**/*.js\" \"cypress/**/*.js\"",
+    "demo-bundle": "browserify docs/js/index.js -o docs/demo-bundle.js",
+    "format": "prettier --write \"{*,src/**/*,test/**/*,docs/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\"",
+    "format:check": "prettier --check \"{*,src/**/*,test/**/*,docs/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\"",
+    "format:watch": "onchange \"{*,src/**/*,test/**/*,docs/js/**/*,.github/workflows/*,cypress/**/*}.+(js|yml)\" -- prettier --write {{changed}}",
+    "lint": "eslint \"*.js\" \"docs/js/**/*.js\" \"cypress/**/*.js\"",
     "clean": "rm -rf ./dist",
-    "compile:esm": "BUILD_ENV=esm BABEL_ENV=esm rollup -c",
-    "compile:cjs": "BUILD_ENV=cjs BABEL_ENV=es5 rollup -c",
-    "compile:umd": "BUILD_ENV=umd BABEL_ENV=es5 rollup -c",
+    "compile:esm": "cross-env BUILD_ENV=esm BABEL_ENV=esm rollup -c",
+    "compile:cjs": "cross-env BUILD_ENV=cjs BABEL_ENV=es5 rollup -c",
+    "compile:umd": "cross-env BUILD_ENV=umd BABEL_ENV=es5 rollup -c",
     "compile": "yarn compile:esm && yarn compile:cjs && yarn compile:umd",
     "build": "yarn clean && yarn compile",
-    "start": "yarn compile:cjs && budo demo/js/index.js:demo-bundle.js --dir demo --live -- -t babelify",
+    "start": "yarn compile:cjs && budo docs/js/index.js:demo-bundle.js --dir docs --live -- -t babelify",
     "test:types": "tsc index.d.ts",
     "test:unit": "echo \"No unit tests to run!\"",
     "test:cypress": "start-server-and-test start 9966 'cypress open'",
@@ -60,35 +60,36 @@
   },
   "homepage": "https://github.com/focus-trap/focus-trap#readme",
   "dependencies": {
-    "tabbable": "^5.2.0"
+    "tabbable": "^5.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.14",
-    "@babel/core": "^7.13.15",
-    "@babel/preset-env": "^7.13.15",
+    "@babel/cli": "^7.14.8",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
     "@changesets/cli": "^2.16.0",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^18.0.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@testing-library/cypress": "^7.0.5",
-    "@types/jquery": "^3.5.5",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@testing-library/cypress": "^8.0.0",
+    "@types/jquery": "^3.5.6",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "budo": "^11.6.4",
-    "cypress": "^7.1.0",
+    "cross-env": "^7.0.3",
+    "cypress": "^8.2.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-cypress": "^2.11.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-cypress": "^2.11.3",
     "onchange": "^7.1.0",
-    "prettier": "^2.2.1",
-    "rollup": "^2.45.2",
+    "prettier": "^2.3.2",
+    "rollup": "^2.56.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.1",
-    "start-server-and-test": "^1.12.1",
-    "typescript": "^4.2.4"
+    "start-server-and-test": "^1.13.1",
+    "typescript": "^4.3.5"
   }
 }