@destyler/interact-outside 0.0.7-beta.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-PRESENT Elone Hoo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+//#region index.d.ts
+interface InteractOutsideHandlers {
+  /**
+   * Function called when the pointer is pressed down outside the component
+   */
+  onPointerDownOutside?: ((event: PointerDownOutsideEvent) => void) | undefined;
+  /**
+   * Function called when the focus is moved outside the component
+   */
+  onFocusOutside?: ((event: FocusOutsideEvent) => void) | undefined;
+  /**
+   * Function called when an interaction happens outside the component
+   */
+  onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
+}
+interface InteractOutsideOptions extends InteractOutsideHandlers {
+  exclude?: ((target: HTMLElement) => boolean) | undefined;
+  defer?: boolean | undefined;
+}
+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 };

package/dist/index.js

@@ -0,0 +1,197 @@
+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 = {
+		each(cb) {
+			for (let i = 0; i < win.frames?.length; i += 1) {
+				const frame = win.frames[i];
+				if (frame) cb(frame);
+			}
+		},
+		addEventListener(event, listener, options) {
+			frames.each((frame) => {
+				try {
+					frame.document.addEventListener(event, listener, options);
+				} catch {}
+			});
+			return () => {
+				try {
+					frames.removeEventListener(event, listener, options);
+				} catch {}
+			};
+		},
+		removeEventListener(event, listener, options) {
+			frames.each((frame) => {
+				try {
+					frame.document.removeEventListener(event, listener, options);
+				} catch {}
+			});
+		}
+	};
+	return frames;
+}
+function getParentWindow(win) {
+	const parent = win.frameElement != null ? win.parent : null;
+	return {
+		addEventListener: (event, listener, options) => {
+			try {
+				parent?.addEventListener(event, listener, options);
+			} catch {}
+			return () => {
+				try {
+					parent?.removeEventListener(event, listener, options);
+				} catch {}
+			};
+		},
+		removeEventListener: (event, listener, options) => {
+			try {
+				parent?.removeEventListener(event, listener, options);
+			} catch {}
+		}
+	};
+}
+
+//#endregion
+//#region index.ts
+const POINTER_OUTSIDE_EVENT = "pointerdown.outside";
+const FOCUS_OUTSIDE_EVENT = "focus.outside";
+function isComposedPathFocusable(composedPath) {
+	for (const node of composedPath) if (isHTMLElement(node) && isFocusable(node)) return true;
+	return false;
+}
+const isPointerEvent = (event) => "clientY" in event;
+function isEventPointWithin(node, event) {
+	if (!isPointerEvent(event) || !node) return false;
+	const rect = node.getBoundingClientRect();
+	if (rect.width === 0 || rect.height === 0) return false;
+	return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
+}
+function isPointInRect(rect, point) {
+	return rect.y <= point.y && point.y <= rect.y + rect.height && rect.x <= point.x && point.x <= rect.x + rect.width;
+}
+function isEventWithinScrollbar(event, ancestor) {
+	if (!ancestor || !isPointerEvent(event)) return false;
+	const isScrollableY = ancestor.scrollHeight > ancestor.clientHeight;
+	const onScrollbarY = isScrollableY && event.clientX > ancestor.offsetLeft + ancestor.clientWidth;
+	const isScrollableX = ancestor.scrollWidth > ancestor.clientWidth;
+	const onScrollbarX = isScrollableX && event.clientY > ancestor.offsetTop + ancestor.clientHeight;
+	const rect = {
+		x: ancestor.offsetLeft,
+		y: ancestor.offsetTop,
+		width: ancestor.clientWidth + (isScrollableY ? 16 : 0),
+		height: ancestor.clientHeight + (isScrollableX ? 16 : 0)
+	};
+	const point = {
+		x: event.clientX,
+		y: event.clientY
+	};
+	if (!isPointInRect(rect, point)) return false;
+	return onScrollbarY || onScrollbarX;
+}
+function trackInteractOutsideImpl(node, options) {
+	const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside, defer } = options;
+	if (!node) return;
+	const doc = getDocument(node);
+	const win = getWindow(node);
+	const frames = getWindowFrames(win);
+	const parentWin = getParentWindow(win);
+	function isEventOutside(event) {
+		const target = getEventTarget(event);
+		if (!isHTMLElement(target)) return false;
+		if (!target.isConnected) return false;
+		if (contains(node, target)) return false;
+		if (isEventPointWithin(node, event)) return false;
+		const triggerEl = doc.querySelector(`[aria-controls="${node.id}"]`);
+		if (triggerEl) {
+			const triggerAncestor = getNearestOverflowAncestor(triggerEl);
+			if (isEventWithinScrollbar(event, triggerAncestor)) return false;
+		}
+		const nodeAncestor = getNearestOverflowAncestor(node);
+		if (isEventWithinScrollbar(event, nodeAncestor)) return false;
+		return !exclude?.(target);
+	}
+	const pointerdownCleanups = /* @__PURE__ */ new Set();
+	function onPointerDown(event) {
+		function handler() {
+			const func = defer ? raf : (v) => v();
+			const composedPath = event.composedPath?.() ?? [event.target];
+			func(() => {
+				if (!node || !isEventOutside(event)) return;
+				if (onPointerDownOutside || onInteractOutside) {
+					const handler$1 = callAll(onPointerDownOutside, onInteractOutside);
+					node.addEventListener(POINTER_OUTSIDE_EVENT, handler$1, { once: true });
+				}
+				fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
+					bubbles: false,
+					cancelable: true,
+					detail: {
+						originalEvent: event,
+						contextmenu: isContextMenuEvent(event),
+						focusable: isComposedPathFocusable(composedPath)
+					}
+				});
+			});
+		}
+		if (event.pointerType === "touch") {
+			pointerdownCleanups.forEach((fn) => fn());
+			pointerdownCleanups.add(addDomEvent(doc, "click", handler, { once: true }));
+			pointerdownCleanups.add(parentWin.addEventListener("click", handler, { once: true }));
+			pointerdownCleanups.add(frames.addEventListener("click", handler, { once: true }));
+		} else handler();
+	}
+	const cleanups = /* @__PURE__ */ new Set();
+	const timer = setTimeout(() => {
+		cleanups.add(addDomEvent(doc, "pointerdown", onPointerDown, true));
+		cleanups.add(parentWin.addEventListener("pointerdown", onPointerDown, true));
+		cleanups.add(frames.addEventListener("pointerdown", onPointerDown, true));
+	}, 0);
+	function onFocusin(event) {
+		const func = defer ? raf : (v) => v();
+		func(() => {
+			if (!node || !isEventOutside(event)) return;
+			if (onFocusOutside || onInteractOutside) {
+				const handler = callAll(onFocusOutside, onInteractOutside);
+				node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true });
+			}
+			fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {
+				bubbles: false,
+				cancelable: true,
+				detail: {
+					originalEvent: event,
+					contextmenu: false,
+					focusable: isFocusable(getEventTarget(event))
+				}
+			});
+		});
+	}
+	cleanups.add(addDomEvent(doc, "focusin", onFocusin, true));
+	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());
+	};
+}
+function trackInteractOutside(nodeOrFn, options) {
+	const { defer } = options;
+	const func = defer ? raf : (v) => v();
+	const cleanups = [];
+	cleanups.push(func(() => {
+		const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
+		cleanups.push(trackInteractOutsideImpl(node, options));
+	}));
+	return () => {
+		cleanups.forEach((fn) => fn?.());
+	};
+}
+function fireCustomEvent(el, type, init) {
+	const win = el.ownerDocument.defaultView || window;
+	const event = new win.CustomEvent(type, init);
+	return el.dispatchEvent(event);
+}
+
+//#endregion
+export { trackInteractOutside };

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@destyler/interact-outside",
+  "type": "module",
+  "version": "0.0.7-beta.9",
+  "description": "",
+  "author": "Elone Hoo <elonehoo@gmail.com>",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "*.d.ts",
+    "dist"
+  ],
+  "dependencies": {
+    "@destyler/dom": "0.0.7-beta.9",
+    "@destyler/utils": "0.0.7-beta.9"
+  },
+  "scripts": {
+    "clear": "rimraf ./dist",
+    "clear:node_modules": "rimraf ./node_modules",
+    "build": "pnpm run clear && tsdown",
+    "watch": "tsdown --watch"
+  }
+}