@vizejs/ui 0.345.0 → 0.350.2

package/dist/dismissable-layer-CwG1gtdz.mjs

@@ -0,0 +1,488 @@
+import { getCurrentInstance, getCurrentScope, onMounted, onScopeDispose, shallowReadonly, shallowRef, toValue, watch } from "vue";
+//#region src/dismissable-layer-internal.ts
+const optionDiagnostic = "VIZE_UI_DISMISSABLE_LAYER_OPTION";
+const rootDiagnostic = "VIZE_UI_DISMISSABLE_LAYER_ROOT";
+/** Resolve an event target without assuming it comes from the current realm. */
+function eventElement(value) {
+	const candidate = value;
+	return candidate?.nodeType === 1 && typeof candidate.getRootNode === "function" ? candidate : null;
+}
+function readBoolean(source, name, fallback) {
+	const value = toValue(source);
+	if (value === void 0) return fallback;
+	if (typeof value !== "boolean") throw new TypeError(`${optionDiagnostic}: ${name} must resolve to a boolean`);
+	return value;
+}
+function readRoot(source) {
+	const value = toValue(source);
+	if (value === void 0 || value === null) return null;
+	const candidate = value;
+	if (candidate.nodeType !== 1 || !candidate.ownerDocument) throw new TypeError(`${rootDiagnostic}: root must resolve to an Element or null`);
+	return value;
+}
+function readBranches(source, document) {
+	const value = toValue(source) ?? [];
+	if (!Array.isArray(value)) throw new TypeError(`${optionDiagnostic}: branches must resolve to an array of Elements`);
+	return validateBranches(value, document);
+}
+function validateBranches(source, document) {
+	const unique = [...new Set(source)];
+	for (const branch of unique) {
+		const candidate = branch;
+		if (candidate.nodeType !== 1 || !candidate.ownerDocument) throw new TypeError(`${optionDiagnostic}: branches must contain only Elements`);
+		if (document && candidate.ownerDocument !== document) throw new TypeError(`${optionDiagnostic}: branches must share the root Document`);
+	}
+	return unique;
+}
+function validateOptions(options) {
+	if (!options || typeof options !== "object" || Array.isArray(options)) throw new TypeError(`${optionDiagnostic}: options must be an object`);
+	const root = readRoot(options.root);
+	readBranches(options.branches, root?.ownerDocument ?? null);
+	readBoolean(options.enabled, "enabled", true);
+	readBoolean(options.outsidePointerDown, "outsidePointerDown", true);
+	readBoolean(options.outsideFocus, "outsideFocus", true);
+	readBoolean(options.escapeKey, "escapeKey", true);
+	for (const name of [
+		"onPointerDownOutside",
+		"onFocusOutside",
+		"onInteractOutside",
+		"onEscapeKeyDown",
+		"onDismiss"
+	]) if (options[name] !== void 0 && typeof options[name] !== "function") throw new TypeError(`${optionDiagnostic}: ${name} must be a function`);
+}
+function modifier(event, key) {
+	return key in event ? Boolean(event[key]) : false;
+}
+function eventPoint(event) {
+	if ("clientX" in event && "clientY" in event) return {
+		x: Number(event.clientX),
+		y: Number(event.clientY)
+	};
+	if ("changedTouches" in event) {
+		const touch = Array.from(event.changedTouches)[0];
+		if (touch) return {
+			x: touch.clientX,
+			y: touch.clientY
+		};
+	}
+	return null;
+}
+function pointerTypeOf(event) {
+	if ("changedTouches" in event) return "touch";
+	if ("pointerType" in event) {
+		if (event.pointerId === -1 && event.pointerType === "") return "virtual";
+		if (event.pointerType === "mouse" || event.pointerType === "pen") return event.pointerType;
+		if (event.pointerType === "touch") return "touch";
+		return "pointer";
+	}
+	return "mouse";
+}
+function preventable() {
+	let prevented = false;
+	return {
+		get defaultPrevented() {
+			return prevented;
+		},
+		preventDefault: () => {
+			prevented = true;
+		}
+	};
+}
+/** Build an immutable outside pointer event that is stable after native dispatch mutates. */
+function createPointerDownOutsideEvent(originalEvent, target) {
+	const point = eventPoint(originalEvent);
+	const prevention = preventable();
+	return Object.freeze({
+		type: "pointer-down-outside",
+		reason: "pointer-down-outside",
+		target,
+		originalEvent,
+		pointerType: pointerTypeOf(originalEvent),
+		x: point?.x ?? null,
+		y: point?.y ?? null,
+		altKey: modifier(originalEvent, "altKey"),
+		ctrlKey: modifier(originalEvent, "ctrlKey"),
+		metaKey: modifier(originalEvent, "metaKey"),
+		shiftKey: modifier(originalEvent, "shiftKey"),
+		get defaultPrevented() {
+			return prevention.defaultPrevented;
+		},
+		preventDefault: prevention.preventDefault
+	});
+}
+/** Build an immutable outside focus event that preserves related-target evidence. */
+function createFocusOutsideEvent(originalEvent, target) {
+	const prevention = preventable();
+	return Object.freeze({
+		type: "focus-outside",
+		reason: "focus-outside",
+		target,
+		relatedTarget: eventElement(originalEvent.relatedTarget),
+		originalEvent,
+		get defaultPrevented() {
+			return prevention.defaultPrevented;
+		},
+		preventDefault: prevention.preventDefault
+	});
+}
+/** Build an immutable Escape event before dismissal is committed. */
+function createEscapeKeyDownEvent(originalEvent, target) {
+	const prevention = preventable();
+	return Object.freeze({
+		type: "escape-key",
+		reason: "escape-key",
+		target,
+		originalEvent,
+		altKey: modifier(originalEvent, "altKey"),
+		ctrlKey: modifier(originalEvent, "ctrlKey"),
+		metaKey: modifier(originalEvent, "metaKey"),
+		shiftKey: modifier(originalEvent, "shiftKey"),
+		get defaultPrevented() {
+			return prevention.defaultPrevented;
+		},
+		preventDefault: prevention.preventDefault
+	});
+}
+/** Build the final immutable dismissal notification. */
+function createDismissEvent(reason, originalEvent, target) {
+	return Object.freeze({
+		type: "dismiss",
+		reason,
+		target,
+		originalEvent
+	});
+}
+//#endregion
+//#region src/dismissable-layer-stack.ts
+const documentStates = /* @__PURE__ */ new WeakMap();
+function composedParent(element) {
+	if (element.assignedSlot) return element.assignedSlot;
+	if (element.parentElement) return element.parentElement;
+	return element.getRootNode().host ?? null;
+}
+function containsComposed(root, element) {
+	let current = element;
+	while (current) {
+		if (root === current || root.contains(current)) return true;
+		current = composedParent(current);
+	}
+	return false;
+}
+function stackFor(document) {
+	let state = documentStates.get(document);
+	if (!state) {
+		state = {
+			document,
+			lastPointerTime: Number.NEGATIVE_INFINITY,
+			observer: null,
+			queued: false,
+			releaseListeners: [],
+			tokens: []
+		};
+		documentStates.set(document, state);
+	}
+	return state;
+}
+function rootsFor(token) {
+	const root = token.root;
+	if (!root?.isConnected || !token.readEnabled()) return [];
+	return [...new Set([root, ...token.readBranches()])].filter((branch) => branch.isConnected);
+}
+function topLayer(state) {
+	for (let index = state.tokens.length - 1; index >= 0; index--) {
+		const token = state.tokens[index];
+		if (token && rootsFor(token).length > 0) return token;
+	}
+	return null;
+}
+function targetElement(event) {
+	const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+	for (const item of path) {
+		const element = item;
+		if (element.nodeType === 1 && typeof element.getRootNode === "function") return element;
+	}
+	const target = event.target;
+	return target?.nodeType === 1 && typeof target.getRootNode === "function" ? target : null;
+}
+function eventInside(event, target, roots) {
+	const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+	return roots.some((root) => path.includes(root) || containsComposed(root, target));
+}
+function recomputeDismissableLayers(document) {
+	const state = stackFor(document);
+	const owner = topLayer(state);
+	for (const token of state.tokens) token.setTopLayer(token === owner);
+}
+function routePointerDown(state, event) {
+	if (event.defaultPrevented) return;
+	const owner = topLayer(state);
+	if (!owner?.readOutsidePointerDown()) return;
+	const target = targetElement(event);
+	if (!target || eventInside(event, target, rootsFor(owner))) return;
+	owner.handlePointerDownOutside(event, target);
+}
+function routeFocusIn(state, event) {
+	const owner = topLayer(state);
+	if (!owner?.readOutsideFocus()) return;
+	const target = targetElement(event);
+	if (!target || eventInside(event, target, rootsFor(owner))) return;
+	owner.handleFocusOutside(event, target);
+}
+function routeEscape(state, event) {
+	if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+	const owner = topLayer(state);
+	if (!owner?.readEscapeKey()) return;
+	owner.handleEscapeKeyDown(event, targetElement(event));
+}
+function observe(state) {
+	if (state.observer) return;
+	const Observer = state.document.defaultView?.MutationObserver;
+	const root = state.document.documentElement;
+	if (!Observer || !root) return;
+	state.observer = new Observer(() => {
+		if (state.queued) return;
+		state.queued = true;
+		queueMicrotask(() => {
+			state.queued = false;
+			if (state.tokens.length > 0) recomputeDismissableLayers(state.document);
+		});
+	});
+	state.observer.observe(root, {
+		childList: true,
+		subtree: true
+	});
+}
+function addDocumentListeners(state) {
+	if (state.releaseListeners.length > 0) return;
+	const document = state.document;
+	const listen = (type, callback, options) => {
+		document.addEventListener(type, callback, options);
+		state.releaseListeners.push(() => document.removeEventListener(type, callback, options));
+	};
+	listen("pointerdown", ((event) => {
+		state.lastPointerTime = event.timeStamp;
+		routePointerDown(state, event);
+	}), true);
+	listen("mousedown", ((event) => {
+		const view = document.defaultView;
+		const elapsed = event.timeStamp - state.lastPointerTime;
+		if (view && "PointerEvent" in view && elapsed >= 0 && elapsed < 800) return;
+		routePointerDown(state, event);
+	}), true);
+	listen("touchstart", ((event) => {
+		const view = document.defaultView;
+		if (view && "PointerEvent" in view) return;
+		routePointerDown(state, event);
+	}), true);
+	listen("focusin", ((event) => routeFocusIn(state, event)), true);
+	listen("keydown", ((event) => routeEscape(state, event)));
+}
+function removeDocumentListeners(state) {
+	for (const release of state.releaseListeners.splice(0)) release();
+}
+function attachDismissableLayer(token, root) {
+	if (token.document === root.ownerDocument) {
+		token.root = root;
+		recomputeDismissableLayers(root.ownerDocument);
+		return;
+	}
+	detachDismissableLayer(token);
+	const state = stackFor(root.ownerDocument);
+	const wasEmpty = state.tokens.length === 0;
+	token.document = root.ownerDocument;
+	token.root = root;
+	state.tokens.push(token);
+	if (wasEmpty) {
+		addDocumentListeners(state);
+		observe(state);
+	}
+	recomputeDismissableLayers(root.ownerDocument);
+}
+function detachDismissableLayer(token) {
+	const document = token.document;
+	if (!document) {
+		token.root = null;
+		token.setTopLayer(false);
+		return;
+	}
+	const state = stackFor(document);
+	const index = state.tokens.indexOf(token);
+	if (index >= 0) state.tokens.splice(index, 1);
+	token.document = null;
+	token.root = null;
+	token.setTopLayer(false);
+	if (state.tokens.length === 0) {
+		removeDocumentListeners(state);
+		state.observer?.disconnect();
+		state.observer = null;
+		documentStates.delete(document);
+	} else recomputeDismissableLayers(document);
+}
+function refreshDismissableLayer(token) {
+	if (token.document) recomputeDismissableLayers(token.document);
+}
+//#endregion
+//#region src/dismissable-layer.ts
+const disposedDiagnostic = "VIZE_UI_DISMISSABLE_LAYER_DISPOSED";
+const setupDiagnostic = "VIZE_UI_DISMISSABLE_LAYER_SETUP";
+function capture(errors, callback) {
+	try {
+		callback();
+	} catch (error) {
+		errors.push(error);
+	}
+}
+function surfaceErrors(errors, message) {
+	if (errors.length === 1) throw errors[0];
+	if (errors.length < 2) return;
+	throw new AggregateError(errors, message);
+}
+/** Create an SSR-safe, document-scoped dismissal layer for overlays and popups. */
+function createDismissableLayer(options) {
+	validateOptions(options);
+	const activeState = shallowRef(false);
+	const topLayerState = shallowRef(false);
+	const registeredBranches = /* @__PURE__ */ new Set();
+	const token = {
+		document: null,
+		root: null,
+		readBranches: () => readAllBranches(token.document),
+		readEnabled: () => readBoolean(options.enabled, "enabled", true),
+		readEscapeKey: () => readBoolean(options.escapeKey, "escapeKey", true),
+		readOutsideFocus: () => readBoolean(options.outsideFocus, "outsideFocus", true),
+		readOutsidePointerDown: () => readBoolean(options.outsidePointerDown, "outsidePointerDown", true),
+		handleEscapeKeyDown: (originalEvent, target) => {
+			const event = createEscapeKeyDownEvent(originalEvent, target);
+			const errors = [];
+			capture(errors, () => options.onEscapeKeyDown?.(event));
+			dismissIfAllowed(errors, event.defaultPrevented, "escape-key", originalEvent, target);
+			surfaceErrors(errors, "Dismissable layer Escape callbacks failed");
+		},
+		handleFocusOutside: (originalEvent, target) => {
+			const event = createFocusOutsideEvent(originalEvent, target);
+			const errors = [];
+			capture(errors, () => options.onFocusOutside?.(event));
+			notifyOutside(errors, event);
+			dismissIfAllowed(errors, event.defaultPrevented, "focus-outside", originalEvent, target);
+			surfaceErrors(errors, "Dismissable layer focus callbacks failed");
+		},
+		handlePointerDownOutside: (originalEvent, target) => {
+			const event = createPointerDownOutsideEvent(originalEvent, target);
+			const errors = [];
+			capture(errors, () => options.onPointerDownOutside?.(event));
+			notifyOutside(errors, event);
+			dismissIfAllowed(errors, event.defaultPrevented, "pointer-down-outside", originalEvent, target);
+			surfaceErrors(errors, "Dismissable layer pointer callbacks failed");
+		},
+		setTopLayer: (value) => {
+			topLayerState.value = value;
+		}
+	};
+	let disposed = false;
+	const assertAlive = () => {
+		if (disposed) throw new Error(`${disposedDiagnostic}: the controller has been disposed`);
+	};
+	const readAllBranches = (document) => {
+		const reactiveBranches = readBranches(options.branches, document);
+		const imperativeBranches = validateBranches([...registeredBranches], document);
+		return [...new Set([...reactiveBranches, ...imperativeBranches])];
+	};
+	const notifyOutside = (errors, event) => {
+		capture(errors, () => options.onInteractOutside?.(event));
+	};
+	const dismissIfAllowed = (errors, defaultPrevented, reason, originalEvent, target) => {
+		if (errors.length > 0 || defaultPrevented) return;
+		capture(errors, () => options.onDismiss?.(createDismissEvent(reason, originalEvent, target)));
+	};
+	const refresh = () => {
+		assertAlive();
+		if (!activeState.value) return;
+		const nextRoot = readRoot(options.root);
+		readBoolean(options.enabled, "enabled", true);
+		readBoolean(options.escapeKey, "escapeKey", true);
+		readBoolean(options.outsideFocus, "outsideFocus", true);
+		readBoolean(options.outsidePointerDown, "outsidePointerDown", true);
+		readAllBranches(nextRoot?.ownerDocument ?? null);
+		if (nextRoot !== token.root) if (nextRoot) attachDismissableLayer(token, nextRoot);
+		else detachDismissableLayer(token);
+		else refreshDismissableLayer(token);
+	};
+	const activate = () => {
+		assertAlive();
+		if (activeState.value) return;
+		activeState.value = true;
+		try {
+			refresh();
+		} catch (error) {
+			activeState.value = false;
+			detachDismissableLayer(token);
+			throw error;
+		}
+	};
+	const deactivate = () => {
+		assertAlive();
+		if (!activeState.value) return;
+		try {
+			detachDismissableLayer(token);
+		} finally {
+			activeState.value = false;
+		}
+	};
+	const stopWatch = watch(() => [
+		toValue(options.root),
+		toValue(options.branches),
+		toValue(options.enabled),
+		toValue(options.escapeKey),
+		toValue(options.outsideFocus),
+		toValue(options.outsidePointerDown)
+	], () => {
+		if (activeState.value) refresh();
+	}, { flush: "sync" });
+	const registerBranch = (branch) => {
+		assertAlive();
+		validateBranches([branch], token.document);
+		registeredBranches.add(branch);
+		if (activeState.value) refresh();
+		let released = false;
+		return () => {
+			if (released) return;
+			released = true;
+			registeredBranches.delete(branch);
+			if (!disposed && activeState.value) refresh();
+		};
+	};
+	const layerProps = Object.freeze({ "data-vize-dismissable-layer": "" });
+	const branchProps = Object.freeze({ "data-vize-dismissable-branch": "" });
+	return Object.freeze({
+		isActive: shallowReadonly(activeState),
+		isTopLayer: shallowReadonly(topLayerState),
+		layerProps,
+		branchProps,
+		registerBranch,
+		activate,
+		deactivate,
+		refresh,
+		dispose: () => {
+			if (disposed) return;
+			try {
+				detachDismissableLayer(token);
+			} finally {
+				activeState.value = false;
+				disposed = true;
+				registeredBranches.clear();
+				stopWatch();
+			}
+		}
+	});
+}
+/** Create, mount-activate, and scope-dispose a dismissable overlay layer. */
+function useDismissableLayer(options) {
+	if (!getCurrentScope()) throw new Error(`${setupDiagnostic}: use inside component setup or an active effect scope`);
+	const controller = createDismissableLayer(options);
+	if (getCurrentInstance()) onMounted(controller.activate);
+	else controller.activate();
+	onScopeDispose(controller.dispose);
+	return controller;
+}
+//#endregion
+export { useDismissableLayer as n, createDismissableLayer as t };

package/dist/dismissable-layer.d.mts

@@ -0,0 +1,2 @@
+import { a as DismissableLayerDismissEvent, c as DismissableLayerFocusOutsideEvent, d as DismissableLayerOutsideReason, f as DismissableLayerPointerDownOutsideEvent, i as DismissableLayerController, l as DismissableLayerInteractOutsideEvent, m as DismissableLayerProps, n as useDismissableLayer, o as DismissableLayerDismissReason, p as DismissableLayerPointerType, r as DismissableLayerBranchProps, s as DismissableLayerEscapeKeyDownEvent, t as createDismissableLayer, u as DismissableLayerOptions } from "./dismissable-layer-4icKahVs.mjs";
+export { type DismissableLayerBranchProps, type DismissableLayerController, type DismissableLayerDismissEvent, type DismissableLayerDismissReason, type DismissableLayerEscapeKeyDownEvent, type DismissableLayerFocusOutsideEvent, type DismissableLayerInteractOutsideEvent, type DismissableLayerOptions, type DismissableLayerOutsideReason, type DismissableLayerPointerDownOutsideEvent, type DismissableLayerPointerType, type DismissableLayerProps, createDismissableLayer, useDismissableLayer };

package/dist/dismissable-layer.mjs

@@ -0,0 +1,2 @@
+import { n as useDismissableLayer, t as createDismissableLayer } from "./dismissable-layer-CwG1gtdz.mjs";
+export { createDismissableLayer, useDismissableLayer };