ajo-ui 0.1.0

package/dist/chunks/native-BJdhd9XJ.js

@@ -0,0 +1,20 @@
+//#region packages/ajo-ui/src/native.ts
+/** Checks whether a native popover is currently open. */
+var popoverOpen = (element) => typeof element.matches === "function" && element.matches(":popover-open");
+/** Opens a native popover and reports whether it is open. */
+var openPopover = (element, source) => {
+	if (popoverOpen(element)) return true;
+	if (typeof element.showPopover !== "function") return false;
+	if (source) element.showPopover({ source });
+	else element.showPopover();
+	return popoverOpen(element);
+};
+/** Closes a native popover and reports whether it is closed. */
+var closePopover = (element) => {
+	if (!popoverOpen(element)) return true;
+	if (typeof element.hidePopover !== "function") return false;
+	element.hidePopover();
+	return !popoverOpen(element);
+};
+//#endregion
+export { openPopover as n, popoverOpen as r, closePopover as t };

package/dist/chunks/popup-C8Bb3l_g.js

@@ -0,0 +1,459 @@
+import { popupStyle } from "../utils.js";
+import { n as position } from "./position-D6_i_SRn.js";
+import { n as openPopover, r as popoverOpen, t as closePopover } from "./native-BJdhd9XJ.js";
+import { callRef, controlled, dismiss, dom, hover, id, resize } from "ajo-cloves";
+//#region packages/ajo-ui/src/popup.ts
+/** Builds native/manual popup attrs and a composed content ref. */
+var contentAttrs = (options) => {
+	const { id, open, ref, setContent, style, tabindex } = options;
+	const attrs = {
+		popover: "manual",
+		style: typeof style === "string" ? style : popupStyle()
+	};
+	if ("id" in options) attrs.id = id;
+	if ("open" in options) attrs["data-state"] = open ? "open" : "closed";
+	if ("tabindex" in options) attrs.tabindex = tabindex;
+	if ("ref" in options || "setContent" in options) attrs.ref = (element) => {
+		setContent?.(element);
+		callRef(ref, element);
+	};
+	return attrs;
+};
+var stacks = /* @__PURE__ */ new WeakMap();
+var handled = /* @__PURE__ */ new WeakSet();
+var declaration = (name, value, priority = "") => value ? `${name}:${value}${priority ? "!important" : ""}` : "";
+var contentOwnedStyle = (element, arrow) => [
+	declaration("position", element.style.position),
+	declaration("left", element.style.left),
+	declaration("top", element.style.top),
+	declaration("transform-origin", element.style.transformOrigin),
+	declaration("box-sizing", element.style.boxSizing),
+	declaration("max-width", element.style.maxWidth),
+	declaration("max-height", element.style.maxHeight),
+	declaration("visibility", element.style.visibility, element.style.getPropertyPriority("visibility")),
+	declaration("pointer-events", element.style.pointerEvents, element.style.getPropertyPriority("pointer-events")),
+	declaration("--reference-width", element.style.getPropertyValue("--reference-width")),
+	declaration("--reference-height", element.style.getPropertyValue("--reference-height")),
+	declaration("--available-width", element.style.getPropertyValue("--available-width")),
+	declaration("--available-height", element.style.getPropertyValue("--available-height")),
+	declaration("--popup-arrow-center", element.style.getPropertyValue("--popup-arrow-center")),
+	arrow ? "overflow:visible" : ""
+].filter(Boolean).join(";");
+var arrowOwnedStyle = (element) => element ? [
+	declaration("left", element.style.left),
+	declaration("right", element.style.right),
+	declaration("top", element.style.top),
+	declaration("bottom", element.style.bottom)
+].filter(Boolean).join(";") : "";
+var stack = (element) => {
+	const document = element.ownerDocument;
+	let current = stacks.get(document);
+	if (!current) stacks.set(document, current = []);
+	return current;
+};
+var remove = (view, element) => {
+	if (!element) return;
+	const current = stack(element);
+	const index = current.indexOf(view);
+	if (index >= 0) current.splice(index, 1);
+};
+var push = (view, element) => {
+	const current = stack(element);
+	const index = current.indexOf(view);
+	if (index >= 0) current.splice(index, 1);
+	current.push(view);
+};
+var top = (view, element) => {
+	if (!element) return false;
+	const current = stack(element);
+	return current[current.length - 1] === view;
+};
+/** Private popup Module: Ajo interaction/native lifecycle over the position Adapter. */
+var popup = (host, options) => {
+	const rootId = id(options.prefix);
+	const contentId = `${rootId}-content`;
+	const state = controlled(host, {
+		fallback: options.initialOpen,
+		onChange: options.onOpenChange
+	});
+	let arrow = null;
+	let content = null;
+	let contentInputStyle;
+	let opened = state.value;
+	let overflowElement = null;
+	let preferred = {};
+	let referenceElement = null;
+	let referenceIsHidden = false;
+	let shown = false;
+	let trigger = null;
+	const generatedTriggerId = `${rootId}-trigger`;
+	let triggerId = generatedTriggerId;
+	let version = 0;
+	let view;
+	let opening = false;
+	let positionTask;
+	let reopen = false;
+	let scheduled = false;
+	const inputStyle = dom(host) ? host.ownerDocument.createElement("span").style : null;
+	let inputPointerEvents = {
+		priority: "",
+		value: ""
+	};
+	let inputVisibility = {
+		priority: "",
+		value: ""
+	};
+	const rememberContentStyle = (style) => {
+		contentInputStyle = style;
+		if (!inputStyle) return;
+		inputStyle.cssText = typeof style === "string" ? style : "";
+		inputPointerEvents = {
+			priority: inputStyle.getPropertyPriority("pointer-events"),
+			value: inputStyle.getPropertyValue("pointer-events")
+		};
+		inputVisibility = {
+			priority: inputStyle.getPropertyPriority("visibility"),
+			value: inputStyle.getPropertyValue("visibility")
+		};
+	};
+	const restore = (target, name, input) => {
+		if (input.value) target.style.setProperty(name, input.value, input.priority);
+		else target.style.removeProperty(name);
+	};
+	const conceal = (target, hidden) => {
+		if (hidden) {
+			target.style.setProperty("visibility", "hidden", "important");
+			target.style.setProperty("pointer-events", "none", "important");
+		} else {
+			restore(target, "visibility", inputVisibility);
+			restore(target, "pointer-events", inputPointerEvents);
+		}
+	};
+	const reference = () => options.reference?.(view) ?? referenceElement ?? trigger;
+	const connectedSource = (element) => element?.isConnected ? element : null;
+	const source = () => connectedSource(options.source?.(view)) ?? connectedSource(trigger);
+	const clearOverflow = () => {
+		if (!overflowElement) return;
+		const target = overflowElement;
+		overflowElement = null;
+		if (target === content) target.setAttribute("style", popupStyle(contentInputStyle, contentOwnedStyle(target, false)));
+		else target.style.overflow = "";
+	};
+	const syncOverflow = () => {
+		if (overflowElement && (overflowElement !== content || !arrow)) clearOverflow();
+		if (!content || !arrow) return;
+		overflowElement = content;
+		content.style.overflow = "visible";
+	};
+	const reveal = (target) => {
+		conceal(target, options.referenceHidden === "hide" && referenceIsHidden);
+	};
+	const geometry = position(host, {
+		profile: options.profile,
+		elements: () => ({
+			reference: reference(),
+			floating: content,
+			arrow
+		}),
+		placement: () => preferred.placement,
+		gap: () => preferred.gap,
+		boundary: () => options.boundary?.(view) ?? null,
+		referenceBoundary: () => options.referenceBoundary?.(view) ?? null,
+		referenceHidden(hidden) {
+			referenceIsHidden = hidden;
+			if (!content) return;
+			if (options.referenceHidden === "hide") {
+				if (hidden || shown) conceal(content, hidden);
+			} else if (hidden && options.referenceHidden === "close") view.close();
+		}
+	});
+	const intent = options.hover ? hover(host, {
+		openDelay: options.hover.openDelay,
+		closeDelay: options.hover.closeDelay,
+		onChange: (next, event) => setOpen(next, event)
+	}) : void 0;
+	const closeTarget = (target) => {
+		let error;
+		try {
+			if (!closePopover(target)) error = /* @__PURE__ */ new Error("Failed to close the native popover");
+		} catch (cause) {
+			error = cause;
+		} finally {
+			conceal(target, false);
+		}
+		return error;
+	};
+	const discard = (target) => {
+		remove(view, target);
+		target.dataset.state = "closed";
+		const error = closeTarget(target);
+		if (error !== void 0 && !host.signal.aborted) host.throw(error);
+	};
+	const closeCurrent = (target = content, notify = true) => {
+		const wasShown = shown;
+		if (target) target.dataset.state = "closed";
+		version++;
+		geometry.stop();
+		remove(view, target);
+		shown = false;
+		positionTask = void 0;
+		referenceIsHidden = false;
+		if (!target) return;
+		const error = closeTarget(target);
+		if (wasShown && notify) options.onSync?.(false, view);
+		if (error !== void 0 && !host.signal.aborted) host.throw(error);
+	};
+	const openCurrent = async () => {
+		const target = content;
+		const currentReference = reference();
+		if (!target || !opened || host.signal.aborted) return false;
+		if (!currentReference) {
+			view.close();
+			return false;
+		}
+		const wasShown = shown;
+		const wasNativeOpen = popoverOpen(target);
+		const token = ++version;
+		if (!wasShown) target.dataset.state = "closed";
+		conceal(target, true);
+		try {
+			if (!openPopover(target, source())) throw new Error("Failed to open the native popover");
+			if (!wasNativeOpen) push(view, target);
+			if (!await geometry.start() || token !== version || !opened || content !== target || !popoverOpen(target)) {
+				geometry.stop();
+				if (reopen && opened && !host.signal.aborted) if (content === target) conceal(target, true);
+				else discard(target);
+				else if (opened && content === target && !host.signal.aborted) view.close();
+				else if (content === target) closeCurrent(target);
+				else discard(target);
+				return false;
+			}
+			shown = true;
+			target.dataset.state = "open";
+			reveal(target);
+			options.onPosition?.(view);
+			if (!wasShown) options.onSync?.(true, view);
+			return true;
+		} catch (error) {
+			geometry.stop();
+			if (opened && content === target && !host.signal.aborted) view.close();
+			else if (content === target) closeCurrent(target);
+			else discard(target);
+			throw error;
+		}
+	};
+	const run = async () => {
+		scheduled = false;
+		if (host.signal.aborted) {
+			reopen = false;
+			return;
+		}
+		if (opening) return;
+		opening = true;
+		try {
+			do {
+				reopen = false;
+				if (opened) await openCurrent();
+				else closeCurrent();
+			} while (reopen);
+		} finally {
+			opening = false;
+			if (reopen) schedule();
+		}
+	};
+	function schedule() {
+		if (host.signal.aborted) return;
+		reopen = true;
+		if (scheduled || opening) return;
+		scheduled = true;
+		queueMicrotask(() => {
+			if (host.signal.aborted) {
+				scheduled = false;
+				reopen = false;
+				return;
+			}
+			run().catch(report);
+		});
+	}
+	const report = (error) => {
+		if (host.signal.aborted) return;
+		queueMicrotask(() => {
+			if (!host.signal.aborted) host.throw(error);
+		});
+	};
+	const update = () => {
+		if (!opened || host.signal.aborted) return;
+		if (!shown && !opening) {
+			schedule();
+			return;
+		}
+		const target = content;
+		const pending = geometry.update();
+		if (opening || pending === positionTask) return;
+		positionTask = pending;
+		const clear = () => {
+			if (positionTask === pending) positionTask = void 0;
+		};
+		pending.then((committed) => {
+			clear();
+			if (committed && opened && shown && target === content) options.onPosition?.(view);
+		}, (error) => {
+			clear();
+			report(error);
+		});
+	};
+	const arrowSize = resize(host, {
+		target: () => opened ? arrow : null,
+		onResize: update
+	});
+	const restart = (reopenSource = false) => {
+		if (!opened || host.signal.aborted) return;
+		version++;
+		geometry.stop();
+		positionTask = void 0;
+		referenceIsHidden = false;
+		if (reopenSource && content && popoverOpen(content)) {
+			const error = closeTarget(content);
+			if (error !== void 0) report(error);
+		}
+		if (content) conceal(content, true);
+		schedule();
+	};
+	const setOpen = (next, event) => {
+		if (host.signal.aborted) return;
+		if (options.disabled?.() && next) return;
+		if (next === opened) return;
+		state.set(next, event);
+		opened = state.value;
+		intent?.sync(opened);
+		arrowSize.sync();
+		if (opened) schedule();
+		else closeCurrent();
+	};
+	view = {
+		get open() {
+			return opened;
+		},
+		get trigger() {
+			return trigger;
+		},
+		get content() {
+			return content;
+		},
+		get reference() {
+			return referenceElement;
+		},
+		get triggerId() {
+			return triggerId;
+		},
+		get contentId() {
+			return contentId;
+		},
+		adoptTriggerId(id) {
+			triggerId = typeof id === "string" && id ? id : generatedTriggerId;
+			return triggerId;
+		},
+		contentStyle(style) {
+			rememberContentStyle(style);
+			return popupStyle(style, content ? contentOwnedStyle(content, Boolean(arrow)) : "");
+		},
+		arrowAttrs() {
+			return {
+				ref: setArrow,
+				style: arrowOwnedStyle(arrow)
+			};
+		},
+		sync(open, next = {}) {
+			const changed = preferred.placement !== next.placement || preferred.gap !== next.gap;
+			preferred = next;
+			const previous = opened;
+			opened = state.sync(open ?? void 0);
+			intent?.sync(opened);
+			arrowSize.sync();
+			if (!opened) {
+				if (previous || shown) closeCurrent();
+			} else if (!shown && !opening) schedule();
+			else if (changed) update();
+			return opened;
+		},
+		setOpen,
+		init(open) {
+			if (state.controlled || open === opened) return;
+			state.init(open);
+			opened = open;
+			intent?.sync(opened);
+			arrowSize.sync();
+			if (opened) schedule();
+			else closeCurrent();
+		},
+		close: (event) => setOpen(false, event),
+		hold(zone, event) {
+			if (!options.disabled?.()) intent?.hold(zone, event);
+		},
+		release: (zone, event) => intent?.release(zone, event),
+		cancelHover: () => intent?.cancel(),
+		setTrigger(element) {
+			if (element === trigger) return;
+			const previousReference = reference();
+			const previousSource = source();
+			trigger = element;
+			if (element?.id && element.id !== triggerId) {
+				triggerId = element.id;
+				queueMicrotask(() => host.next());
+			}
+			const referenceChanged = reference() !== previousReference;
+			const sourceChanged = source() !== previousSource;
+			if (referenceChanged || sourceChanged) restart(sourceChanged);
+		},
+		setContent(element) {
+			if (element === content) return;
+			const previous = content;
+			if (previous) closeCurrent(previous, false);
+			content = element;
+			syncOverflow();
+			if (element) element.dataset.state = "closed";
+			if (opened) schedule();
+		},
+		setReference(element) {
+			if (element === referenceElement) return;
+			const previousReference = reference();
+			const previousSource = source();
+			referenceElement = element;
+			const referenceChanged = reference() !== previousReference;
+			const sourceChanged = source() !== previousSource;
+			if (referenceChanged || sourceChanged) restart(sourceChanged || options.reopenOnReferenceChange);
+		},
+		update
+	};
+	function setArrow(element) {
+		if (element === arrow) return;
+		arrow = element;
+		syncOverflow();
+		arrowSize.sync();
+		restart();
+	}
+	if (options.dismiss) dismiss(host, {
+		active: () => opened && Boolean(content && popoverOpen(content)) && top(view, content),
+		inside: () => options.dismiss?.inside?.(view) ?? [trigger, content],
+		prevent: options.dismiss.prevent,
+		escape: options.dismiss.escape ?? "document",
+		outside: options.dismiss.outside,
+		onDismiss(event) {
+			if (handled.has(event)) return;
+			handled.add(event);
+			if (options.dismiss?.onDismiss) options.dismiss.onDismiss(event, view);
+			else view.close(event);
+		}
+	});
+	host.signal.addEventListener("abort", () => {
+		opened = false;
+		reopen = false;
+		scheduled = false;
+		intent?.sync(false);
+		closeCurrent(content, false);
+		clearOverflow();
+	}, { once: true });
+	return view;
+};
+//#endregion
+export { popup as n, contentAttrs as t };

package/dist/chunks/popup-surface-BDCgtVU0.js

@@ -0,0 +1,18 @@
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/popup-surface.tsx
+var probeStyle = "position:absolute;width:14px;height:14px;pointer-events:none;background:transparent;border:0;box-shadow:none;color:transparent;opacity:0";
+/** Internal visual surface and optional transparent Floating UI arrow probe. */
+var PopupSurface = ({ arrow = false, popup }) => {
+	const probe = arrow ? popup?.arrowAttrs() : void 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "popup-surface"
+	}), arrow ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "popup-arrow",
+		ref: probe?.ref,
+		style: [probeStyle, probe?.style].filter(Boolean).join(";")
+	}) : null] });
+};
+//#endregion
+export { PopupSurface as t };