@destyler/focus-trap 0.2.11 → 0.2.13

package/dist/index.d.mts

@@ -194,10 +194,12 @@ type PauseOptions = Pick<FocusTrapOptions, 'onPause' | 'onPostPause'>;
 type UnpauseOptions = Pick<FocusTrapOptions, 'onUnpause' | 'onPostUnpause'>;
 //#endregion
 //#region src/focus-trap.d.ts
-declare class FocusTrap {
+declare const activationIdKey: unique symbol;
+export declare class FocusTrap {
   private trapStack;
   private config;
   private doc;
+  private [activationIdKey];
   private state;
   get active(): boolean;
   get paused(): boolean;
@@ -230,7 +232,7 @@ declare class FocusTrap {
 //#endregion
 //#region index.d.ts
 type ElementOrGetter = HTMLElement | null | (() => HTMLElement | null);
-interface TrapFocusOptions extends Omit<FocusTrapOptions, 'document'> {}
-declare function trapFocus(el: ElementOrGetter, options?: TrapFocusOptions): () => void;
+export interface TrapFocusOptions extends Omit<FocusTrapOptions, 'document'> {}
+export declare function trapFocus(el: ElementOrGetter, options?: TrapFocusOptions): () => void;
 //#endregion
-export { FocusTrap, type FocusTrapOptions, TrapFocusOptions, trapFocus };
+export type { FocusTrapOptions };

package/dist/index.mjs

@@ -1,5 +1,4 @@
 import { addDomEvent, getActiveElement, getDocument, getEventTarget, getFocusables, getTabIndex, getTabbables, isDocument, isFocusable, isTabbable, raf } from "@destyler/dom";
-
 //#region src/focus-trap.ts
 const isTabEvent = (event) => event.key === "Tab";
 const valueOrHandler = (value, ...params) => typeof value === "function" ? value(...params) : value;
@@ -28,6 +27,7 @@ const activeFocusTraps = {
 	}
 };
 const sharedTrapStack = [];
+const activationIdKey = Symbol("activationId");
 var FocusTrap = class {
 	get active() {
 		return this.state.active;
@@ -36,6 +36,7 @@ var FocusTrap = class {
 		return this.state.paused;
 	}
 	constructor(elements, options) {
+		this[activationIdKey] = 0;
 		this.state = {
 			containers: [],
 			containerGroups: [],
@@ -124,7 +125,8 @@ var FocusTrap = class {
 			}
 		};
 		this.setupMutationObserver = () => {
-			this._mutationObserver = new (this.doc.defaultView || window).MutationObserver((mutations) => {
+			const win = this.doc.defaultView || window;
+			this._mutationObserver = new win.MutationObserver((mutations) => {
 				if (mutations.some((mutation) => {
 					return Array.from(mutation.removedNodes).includes(this.state.mostRecentlyFocusedNode);
 				})) this.tryFocus(this.getInitialFocusNode());
@@ -142,12 +144,13 @@ var FocusTrap = class {
 		this.getInitialFocusNode = () => {
 			let node = this.getNodeForOption("initialFocus", { hasFallback: true });
 			if (node === false) return false;
-			if (node === void 0 || node && !isFocusable(node)) if (this.findContainerIndex(this.doc.activeElement) >= 0) node = this.doc.activeElement;
-			else {
-				const firstTabbableGroup = this.state.tabbableGroups[0];
-				node = firstTabbableGroup && firstTabbableGroup.firstTabbableNode || this.getNodeForOption("fallbackFocus");
-			}
-			else if (node === null) node = this.getNodeForOption("fallbackFocus");
+			if (node === void 0 || node && !isFocusable(node)) {
+				if (this.findContainerIndex(this.doc.activeElement) >= 0) node = this.doc.activeElement;
+				else {
+					const firstTabbableGroup = this.state.tabbableGroups[0];
+					node = firstTabbableGroup && firstTabbableGroup.firstTabbableNode || this.getNodeForOption("fallbackFocus");
+				}
+			} else if (node === null) node = this.getNodeForOption("fallbackFocus");
 			if (!node) throw new Error("Your focus-trap needs to have at least one focusable element");
 			if (!node.isConnected) node = this.getNodeForOption("fallbackFocus");
 			return node;
@@ -165,23 +168,21 @@ var FocusTrap = class {
 		};
 		this.deactivate = (deactivateOptions) => {
 			if (!this.state.active) return this;
-			const options$1 = {
+			const options = {
 				onDeactivate: this.config.onDeactivate,
 				onPostDeactivate: this.config.onPostDeactivate,
 				checkCanReturnFocus: this.config.checkCanReturnFocus,
 				...deactivateOptions
 			};
-			clearTimeout(this.state.delayInitialFocusTimer);
-			this.state.delayInitialFocusTimer = void 0;
 			this.removeListeners();
 			this.state.active = false;
 			this.state.paused = false;
 			this.updateObservedNodes();
 			activeFocusTraps.deactivateTrap(this.trapStack, this);
-			const onDeactivate = this.getOption(options$1, "onDeactivate");
-			const onPostDeactivate = this.getOption(options$1, "onPostDeactivate");
-			const checkCanReturnFocus = this.getOption(options$1, "checkCanReturnFocus");
-			const returnFocus = this.getOption(options$1, "returnFocus", "returnFocusOnDeactivate");
+			const onDeactivate = this.getOption(options, "onDeactivate");
+			const onPostDeactivate = this.getOption(options, "onPostDeactivate");
+			const checkCanReturnFocus = this.getOption(options, "checkCanReturnFocus");
+			const returnFocus = this.getOption(options, "returnFocus", "returnFocusOnDeactivate");
 			onDeactivate?.();
 			const finishDeactivation = () => {
 				delay(() => {
@@ -264,9 +265,10 @@ var FocusTrap = class {
 			if (this.state.tabbableGroups.length > 0) {
 				const containerIndex = this.findContainerIndex(target, event);
 				const containerGroup = containerIndex >= 0 ? this.state.containerGroups[containerIndex] : void 0;
-				if (containerIndex < 0) if (isBackward) destinationNode = this.state.tabbableGroups[this.state.tabbableGroups.length - 1].lastTabbableNode;
-				else destinationNode = this.state.tabbableGroups[0].firstTabbableNode;
-				else if (isBackward) {
+				if (containerIndex < 0) {
+					if (isBackward) destinationNode = this.state.tabbableGroups[this.state.tabbableGroups.length - 1].lastTabbableNode;
+					else destinationNode = this.state.tabbableGroups[0].firstTabbableNode;
+				} else if (isBackward) {
 					let startOfGroupIndex = this.state.tabbableGroups.findIndex(({ firstTabbableNode }) => target === firstTabbableNode);
 					if (startOfGroupIndex < 0 && (containerGroup?.container === target || isFocusable(target) && !isTabbable(target) && !containerGroup?.nextTabbableNode(target, false))) startOfGroupIndex = containerIndex;
 					if (startOfGroupIndex >= 0) {
@@ -316,7 +318,7 @@ var FocusTrap = class {
 			const lastTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : void 0;
 			const firstDomTabbableNode = focusableNodes.find((node) => isTabbable(node));
 			const lastDomTabbableNode = focusableNodes.slice().reverse().find((node) => isTabbable(node));
-			const posTabIndexesFound = !!tabbableNodes.find((node) => getTabIndex(node) > 0);
+			const posTabIndexesFound = tabbableNodes.some((node) => getTabIndex(node) > 0);
 			function nextTabbableNode(node, forward = true) {
 				const nodeIdx = tabbableNodes.indexOf(node);
 				if (nodeIdx < 0) {
@@ -339,7 +341,7 @@ var FocusTrap = class {
 		});
 		this.state.tabbableGroups = this.state.containerGroups.filter((group) => group.tabbableNodes.length > 0);
 		if (this.state.tabbableGroups.length <= 0 && !this.getNodeForOption("fallbackFocus")) throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");
-		if (this.state.containerGroups.find((g) => g.posTabIndexesFound) && this.state.containerGroups.length > 1) throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.");
+		if (this.state.containerGroups.some((g) => g.posTabIndexesFound) && this.state.containerGroups.length > 1) throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.");
 	}
 	addListeners() {
 		if (!this.state.active) return;
@@ -364,6 +366,8 @@ var FocusTrap = class {
 	}
 	removeListeners() {
 		if (!this.state.active) return;
+		clearTimeout(this.state.delayInitialFocusTimer);
+		this.state.delayInitialFocusTimer = void 0;
 		this.listenerCleanups.forEach((cleanup) => cleanup());
 		this.listenerCleanups = [];
 		return this;
@@ -373,12 +377,17 @@ var FocusTrap = class {
 		const onActivate = this.getOption(activateOptions, "onActivate");
 		const onPostActivate = this.getOption(activateOptions, "onPostActivate");
 		const checkCanFocusTrap = this.getOption(activateOptions, "checkCanFocusTrap");
+		const activationId = ++this[activationIdKey];
+		const isCurrentActivation = () => this.state.active && this[activationIdKey] === activationId;
 		if (!checkCanFocusTrap) this.updateTabbableNodes();
+		if (this[activationIdKey] !== activationId) return this;
 		this.state.active = true;
 		this.state.paused = false;
 		this.state.nodeFocusedBeforeActivation = this.doc.activeElement || null;
 		onActivate?.();
+		if (!isCurrentActivation()) return this;
 		const finishActivation = () => {
+			if (!isCurrentActivation()) return;
 			if (checkCanFocusTrap) this.updateTabbableNodes();
 			this.addListeners();
 			this.updateObservedNodes();
@@ -392,7 +401,6 @@ var FocusTrap = class {
 		return this;
 	}
 };
-
 //#endregion
 //#region index.ts
 function trapFocus(el, options = {}) {
@@ -419,6 +427,5 @@ function trapFocus(el, options = {}) {
 		cleanup();
 	};
 }
-
 //#endregion
-export { FocusTrap, trapFocus };
+export { FocusTrap, trapFocus };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/focus-trap",
   "type": "module",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Focus trap util",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/dom": "0.2.11"
+    "@destyler/dom": "0.2.13"
   },
   "publishConfig": {
     "access": "public"