@destyler/interact-outside 0.2.11 → 0.2.12

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 //#region index.d.ts
-interface InteractOutsideHandlers {
+export interface InteractOutsideHandlers {
   /**
    * Function called when the pointer is pressed down outside the component
    */
@@ -13,20 +13,19 @@ interface InteractOutsideHandlers {
    */
   onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
 }
-interface InteractOutsideOptions extends InteractOutsideHandlers {
+export interface InteractOutsideOptions extends InteractOutsideHandlers {
   exclude?: ((target: HTMLElement) => boolean) | undefined;
   defer?: boolean | undefined;
 }
-interface EventDetails<T> {
+export interface EventDetails<T> {
   originalEvent: T;
   contextmenu: boolean;
   focusable: boolean;
 }
-type PointerDownOutsideEvent = CustomEvent<EventDetails<PointerEvent>>;
-type FocusOutsideEvent = CustomEvent<EventDetails<FocusEvent>>;
-type InteractOutsideEvent = PointerDownOutsideEvent | FocusOutsideEvent;
-type MaybeElement = HTMLElement | null | undefined;
-type NodeOrFn = MaybeElement | (() => MaybeElement);
-declare function trackInteractOutside(nodeOrFn: NodeOrFn, options: InteractOutsideOptions): () => void;
-//#endregion
-export { EventDetails, FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, InteractOutsideOptions, MaybeElement, NodeOrFn, PointerDownOutsideEvent, trackInteractOutside };
+export type PointerDownOutsideEvent = CustomEvent<EventDetails<PointerEvent>>;
+export type FocusOutsideEvent = CustomEvent<EventDetails<FocusEvent>>;
+export type InteractOutsideEvent = PointerDownOutsideEvent | FocusOutsideEvent;
+export type MaybeElement = HTMLElement | null | undefined;
+export type NodeOrFn = MaybeElement | (() => MaybeElement);
+export declare function trackInteractOutside(nodeOrFn: NodeOrFn, options: InteractOutsideOptions): () => void;
+//#endregion

package/dist/index.mjs

@@ -1,6 +1,5 @@
 import { addDomEvent, contains, getDocument, getEventTarget, getNearestOverflowAncestor, getWindow, isContextMenuEvent, isFocusable, isHTMLElement, raf } from "@destyler/dom";
 import { callAll } from "@destyler/utils";
-
 //#region src/frame-utils.ts
 function getWindowFrames(win) {
 	const frames = {
@@ -11,15 +10,29 @@ function getWindowFrames(win) {
 			}
 		},
 		addEventListener(event, listener, options) {
+			const cleanups = /* @__PURE__ */ new Set();
 			frames.each((frame) => {
 				try {
-					frame.document.addEventListener(event, listener, options);
+					const doc = frame.document;
+					doc.addEventListener(event, listener, options);
+					cleanups.add(() => doc.removeEventListener(event, listener, options));
 				} catch {}
 			});
+			let cleaning = false;
 			return () => {
+				if (cleaning) return false;
+				cleaning = true;
 				try {
-					frames.removeEventListener(event, listener, options);
-				} catch {}
+					cleanups.forEach((cleanup) => {
+						try {
+							cleanup();
+							cleanups.delete(cleanup);
+						} catch {}
+					});
+					if (cleanups.size > 0) return false;
+				} finally {
+					cleaning = false;
+				}
 			};
 		},
 		removeEventListener(event, listener, options) {
@@ -42,7 +55,9 @@ function getParentWindow(win) {
 			return () => {
 				try {
 					parent?.removeEventListener(event, listener, options);
-				} catch {}
+				} catch {
+					return false;
+				}
 			};
 		},
 		removeEventListener: (event, listener, options) => {
@@ -52,7 +67,6 @@ function getParentWindow(win) {
 		}
 	};
 }
-
 //#endregion
 //#region index.ts
 const POINTER_OUTSIDE_EVENT = "pointerdown.outside";
@@ -109,15 +123,31 @@ function trackInteractOutsideImpl(node, options) {
 		return !exclude?.(target);
 	}
 	const pointerdownCleanups = /* @__PURE__ */ new Set();
+	const pendingFrames = /* @__PURE__ */ new Set();
+	let disposed = false;
+	let cleaning = false;
+	let cleaned = false;
+	function scheduleOutside(callback) {
+		if (disposed) return;
+		if (!defer) {
+			callback();
+			return;
+		}
+		const cancel = raf(() => {
+			pendingFrames.delete(cancel);
+			if (!disposed) callback();
+		});
+		pendingFrames.add(cancel);
+	}
 	function onPointerDown(event) {
+		if (disposed) return;
 		function handler() {
-			const func = defer ? raf : (v) => v();
 			const composedPath = event.composedPath?.() ?? [event.target];
-			func(() => {
+			scheduleOutside(() => {
 				if (!node || !isEventOutside(event)) return;
 				if (onPointerDownOutside || onInteractOutside) {
-					const handler$1 = callAll(onPointerDownOutside, onInteractOutside);
-					node.addEventListener(POINTER_OUTSIDE_EVENT, handler$1, { once: true });
+					const handler = callAll(onPointerDownOutside, onInteractOutside);
+					node.addEventListener(POINTER_OUTSIDE_EVENT, handler, { once: true });
 				}
 				fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
 					bubbles: false,
@@ -144,7 +174,7 @@ function trackInteractOutsideImpl(node, options) {
 		cleanups.add(frames.addEventListener("pointerdown", onPointerDown, true));
 	}, 0);
 	function onFocusin(event) {
-		(defer ? raf : (v) => v())(() => {
+		scheduleOutside(() => {
 			if (!node || !isEventOutside(event)) return;
 			if (onFocusOutside || onInteractOutside) {
 				const handler = callAll(onFocusOutside, onInteractOutside);
@@ -165,9 +195,25 @@ function trackInteractOutsideImpl(node, options) {
 	cleanups.add(parentWin.addEventListener("focusin", onFocusin, true));
 	cleanups.add(frames.addEventListener("focusin", onFocusin, true));
 	return () => {
-		clearTimeout(timer);
-		pointerdownCleanups.forEach((fn) => fn());
-		cleanups.forEach((fn) => fn());
+		if (cleaning || cleaned) return;
+		disposed = true;
+		cleaning = true;
+		try {
+			pendingFrames.forEach((cancel) => {
+				cancel();
+				pendingFrames.delete(cancel);
+			});
+			clearTimeout(timer);
+			pointerdownCleanups.forEach((cleanup) => {
+				if (cleanup() !== false) pointerdownCleanups.delete(cleanup);
+			});
+			cleanups.forEach((cleanup) => {
+				if (cleanup() !== false) cleanups.delete(cleanup);
+			});
+			cleaned = pointerdownCleanups.size === 0 && cleanups.size === 0;
+		} finally {
+			cleaning = false;
+		}
 	};
 }
 function trackInteractOutside(nodeOrFn, options) {
@@ -186,6 +232,5 @@ function fireCustomEvent(el, type, init) {
 	const event = new (el.ownerDocument.defaultView || window).CustomEvent(type, init);
 	return el.dispatchEvent(event);
 }
-
 //#endregion
-export { trackInteractOutside };
+export { trackInteractOutside };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/interact-outside",
   "type": "module",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,8 +22,8 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/dom": "0.2.11",
-    "@destyler/utils": "0.2.11"
+    "@destyler/dom": "0.2.12",
+    "@destyler/utils": "0.2.12"
   },
   "publishConfig": {
     "access": "public"