@wirekyt/dom 0.0.1 → 0.0.2

package/dist/interact-outside-BjqIunFx.js

@@ -0,0 +1,211 @@
+import { N as isShadowRoot, S as getWindow, g as getDocument, k as isHTMLElement, p as contains } from "./dom-query-e7fh0TEH.js";
+import { a as isControlledElement } from "./controller-Dv7lWHDr.js";
+import { p as isTouchDevice } from "./platform-BDB0wXUk.js";
+import { s as getEventTarget, t as addDomEvent, u as isContextMenuEvent } from "./event-bTItRgiw.js";
+import { l as isFocusable } from "./tabbable-CDA1YMjZ.js";
+import { i as raf } from "./raf-Dhvm7f1e.js";
+import { t as getNearestOverflowAncestor } from "./overflow-C-zO1CWA.js";
+import { L as callAll } from "./utils-Cht5XaHf.js";
+//#region src/common/interact-outside/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 src/common/interact-outside/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;
+	if (!isPointInRect({
+		x: ancestor.offsetLeft,
+		y: ancestor.offsetTop,
+		width: ancestor.clientWidth + (isScrollableY ? 16 : 0),
+		height: ancestor.clientHeight + (isScrollableX ? 16 : 0)
+	}, {
+		x: event.clientX,
+		y: event.clientY
+	})) return false;
+	return onScrollbarY || onScrollbarX;
+}
+function trackInteractOutsideImpl(node, options) {
+	const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside, defer, followControlledElements = true } = options;
+	if (!node) return;
+	const doc = getDocument(node);
+	const win = getWindow(node);
+	const frames = getWindowFrames(win);
+	const parentWin = getParentWindow(win);
+	function isEventOutside(event, target) {
+		if (!isHTMLElement(target)) return false;
+		if (!target.isConnected) return false;
+		if (contains(node, target)) return false;
+		if (isEventPointWithin(node, event)) return false;
+		if (followControlledElements && isControlledElement(node, target)) return false;
+		const triggerEl = doc.querySelector(`[aria-controls="${node.id}"]`);
+		if (triggerEl) {
+			if (isEventWithinScrollbar(event, getNearestOverflowAncestor(triggerEl))) return false;
+		}
+		if (isEventWithinScrollbar(event, getNearestOverflowAncestor(node))) return false;
+		return !exclude?.(target);
+	}
+	const pointerdownCleanups = /* @__PURE__ */ new Set();
+	const isInShadowRoot = isShadowRoot(node?.getRootNode());
+	let isPointerDown = false;
+	function onPointerDown(event) {
+		isPointerDown = true;
+		const onPointerUp = () => {
+			isPointerDown = false;
+		};
+		doc.addEventListener("pointerup", onPointerUp, { once: true });
+		win.addEventListener("pointerup", onPointerUp, { once: true });
+		function handler(clickEvent) {
+			const func = defer && !isTouchDevice() ? raf : (v) => v();
+			const evt = clickEvent ?? event;
+			const composedPath = evt?.composedPath?.() ?? [evt?.target];
+			func(() => {
+				const target = isInShadowRoot ? composedPath[0] : getEventTarget(event);
+				if (!node || !isEventOutside(event, target)) return;
+				if (onPointerDownOutside || onInteractOutside) {
+					const handler = callAll(onPointerDownOutside, onInteractOutside);
+					node.addEventListener(POINTER_OUTSIDE_EVENT, handler, { once: true });
+				}
+				fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
+					bubbles: false,
+					cancelable: true,
+					detail: {
+						originalEvent: evt,
+						contextmenu: isContextMenuEvent(evt),
+						focusable: isComposedPathFocusable(composedPath),
+						target
+					}
+				});
+			});
+		}
+		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) {
+		if (isPointerDown) return;
+		(defer ? raf : (v) => v())(() => {
+			const composedPath = event?.composedPath?.() ?? [event?.target];
+			const target = isInShadowRoot ? composedPath[0] : getEventTarget(event);
+			if (!node || !isEventOutside(event, target)) 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(target),
+					target
+				}
+			});
+		});
+	}
+	if (!isTouchDevice()) {
+		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 event = new (el.ownerDocument.defaultView || window).CustomEvent(type, init);
+	return el.dispatchEvent(event);
+}
+//#endregion
+export { trackInteractOutside as t };

package/dist/interact-outside-Dphjr2Zh.cjs

@@ -0,0 +1,216 @@
+const require_dom_query = require("./dom-query-CQzY93XU.cjs");
+const require_controller = require("./controller-B8E8ZJCI.cjs");
+const require_platform = require("./platform-BZS-dkZN.cjs");
+const require_event = require("./event-DDz-mMhM.cjs");
+const require_tabbable = require("./tabbable-Bz1-1GAY.cjs");
+const require_raf = require("./raf-BSDcY4UD.cjs");
+const require_overflow = require("./overflow-BBihfMxX.cjs");
+const require_utils = require("./utils-BH-oBBz2.cjs");
+//#region src/common/interact-outside/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 src/common/interact-outside/index.ts
+const POINTER_OUTSIDE_EVENT = "pointerdown.outside";
+const FOCUS_OUTSIDE_EVENT = "focus.outside";
+function isComposedPathFocusable(composedPath) {
+	for (const node of composedPath) if (require_dom_query.isHTMLElement(node) && require_tabbable.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;
+	if (!isPointInRect({
+		x: ancestor.offsetLeft,
+		y: ancestor.offsetTop,
+		width: ancestor.clientWidth + (isScrollableY ? 16 : 0),
+		height: ancestor.clientHeight + (isScrollableX ? 16 : 0)
+	}, {
+		x: event.clientX,
+		y: event.clientY
+	})) return false;
+	return onScrollbarY || onScrollbarX;
+}
+function trackInteractOutsideImpl(node, options) {
+	const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside, defer, followControlledElements = true } = options;
+	if (!node) return;
+	const doc = require_dom_query.getDocument(node);
+	const win = require_dom_query.getWindow(node);
+	const frames = getWindowFrames(win);
+	const parentWin = getParentWindow(win);
+	function isEventOutside(event, target) {
+		if (!require_dom_query.isHTMLElement(target)) return false;
+		if (!target.isConnected) return false;
+		if (require_dom_query.contains(node, target)) return false;
+		if (isEventPointWithin(node, event)) return false;
+		if (followControlledElements && require_controller.isControlledElement(node, target)) return false;
+		const triggerEl = doc.querySelector(`[aria-controls="${node.id}"]`);
+		if (triggerEl) {
+			if (isEventWithinScrollbar(event, require_overflow.getNearestOverflowAncestor(triggerEl))) return false;
+		}
+		if (isEventWithinScrollbar(event, require_overflow.getNearestOverflowAncestor(node))) return false;
+		return !exclude?.(target);
+	}
+	const pointerdownCleanups = /* @__PURE__ */ new Set();
+	const isInShadowRoot = require_dom_query.isShadowRoot(node?.getRootNode());
+	let isPointerDown = false;
+	function onPointerDown(event) {
+		isPointerDown = true;
+		const onPointerUp = () => {
+			isPointerDown = false;
+		};
+		doc.addEventListener("pointerup", onPointerUp, { once: true });
+		win.addEventListener("pointerup", onPointerUp, { once: true });
+		function handler(clickEvent) {
+			const func = defer && !require_platform.isTouchDevice() ? require_raf.raf : (v) => v();
+			const evt = clickEvent ?? event;
+			const composedPath = evt?.composedPath?.() ?? [evt?.target];
+			func(() => {
+				const target = isInShadowRoot ? composedPath[0] : require_event.getEventTarget(event);
+				if (!node || !isEventOutside(event, target)) return;
+				if (onPointerDownOutside || onInteractOutside) {
+					const handler = require_utils.callAll(onPointerDownOutside, onInteractOutside);
+					node.addEventListener(POINTER_OUTSIDE_EVENT, handler, { once: true });
+				}
+				fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
+					bubbles: false,
+					cancelable: true,
+					detail: {
+						originalEvent: evt,
+						contextmenu: require_event.isContextMenuEvent(evt),
+						focusable: isComposedPathFocusable(composedPath),
+						target
+					}
+				});
+			});
+		}
+		if (event.pointerType === "touch") {
+			pointerdownCleanups.forEach((fn) => fn());
+			pointerdownCleanups.add(require_event.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(require_event.addDomEvent(doc, "pointerdown", onPointerDown, true));
+		cleanups.add(parentWin.addEventListener("pointerdown", onPointerDown, true));
+		cleanups.add(frames.addEventListener("pointerdown", onPointerDown, true));
+	}, 0);
+	function onFocusin(event) {
+		if (isPointerDown) return;
+		(defer ? require_raf.raf : (v) => v())(() => {
+			const composedPath = event?.composedPath?.() ?? [event?.target];
+			const target = isInShadowRoot ? composedPath[0] : require_event.getEventTarget(event);
+			if (!node || !isEventOutside(event, target)) return;
+			if (onFocusOutside || onInteractOutside) {
+				const handler = require_utils.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: require_tabbable.isFocusable(target),
+					target
+				}
+			});
+		});
+	}
+	if (!require_platform.isTouchDevice()) {
+		cleanups.add(require_event.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 ? require_raf.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 event = new (el.ownerDocument.defaultView || window).CustomEvent(type, init);
+	return el.dispatchEvent(event);
+}
+//#endregion
+Object.defineProperty(exports, "trackInteractOutside", {
+	enumerable: true,
+	get: function() {
+		return trackInteractOutside;
+	}
+});

package/dist/interact-outside.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_interact_outside = require("./interact-outside-Dphjr2Zh.cjs");
+exports.trackInteractOutside = require_interact_outside.trackInteractOutside;

package/dist/interact-outside.d.cts

@@ -0,0 +1,2 @@
+import { a as InteractOutsideOptions, c as PointerDownOutsideEvent, i as InteractOutsideHandlers, l as trackInteractOutside, n as FocusOutsideEvent, o as MaybeElement, r as InteractOutsideEvent, s as NodeOrFn, t as EventDetails } from "./index-C2865AJq.cjs";
+export { EventDetails, FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, InteractOutsideOptions, MaybeElement, NodeOrFn, PointerDownOutsideEvent, trackInteractOutside };

package/dist/interact-outside.d.ts

@@ -0,0 +1,2 @@
+import { a as InteractOutsideOptions, c as PointerDownOutsideEvent, i as InteractOutsideHandlers, l as trackInteractOutside, n as FocusOutsideEvent, o as MaybeElement, r as InteractOutsideEvent, s as NodeOrFn, t as EventDetails } from "./index-C2865AJq.js";
+export { EventDetails, FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, InteractOutsideOptions, MaybeElement, NodeOrFn, PointerDownOutsideEvent, trackInteractOutside };

package/dist/interact-outside.js

@@ -0,0 +1,2 @@
+import { t as trackInteractOutside } from "./interact-outside-BjqIunFx.js";
+export { trackInteractOutside };