@funstack/ui 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/toast/toast-viewport.mjs

@@ -0,0 +1,621 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useLatest } from "../internal/use-latest.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { DialogContext } from "../dialog/dialog-context.mjs";
+import { getServerTopmostModal, getTopmostModal, subscribeModals } from "../internal/modal-registry.mjs";
+import { ToastViewportContext } from "./toast-context.mjs";
+import { toast, toastManagerInternals } from "./toast.mjs";
+import { use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/toast/toast-viewport.tsx
+const isDev = process.env.NODE_ENV !== "production";
+const DEFAULT_HOTKEY = ["F8"];
+const MODIFIER_NAMES = {
+	altKey: "Alt",
+	ctrlKey: "Ctrl",
+	metaKey: "Meta",
+	shiftKey: "Shift"
+};
+/** `["altKey", "KeyT"]` → `"Alt+T"`, `["F8"]` → `"F8"`. */
+function hotkeyLabel(hotkey) {
+	return hotkey.map((key) => MODIFIER_NAMES[key] ?? key.replace(/^Key(?=[A-Z]$)/, "").replace(/^Digit/, "")).join("+");
+}
+/** The region's built-in accessible name (conventions 11): `"Notifications (F8)"`. */
+function regionLabel(hotkey) {
+	if (hotkey === null || hotkey.length === 0) return "Notifications";
+	return `Notifications (${hotkeyLabel(hotkey)})`;
+}
+/** The listed keys and modifiers, and no unlisted modifier (Ctrl+F8 is not F8). */
+function matchesHotkey(hotkey, event) {
+	const flags = event;
+	for (const modifier of Object.keys(MODIFIER_NAMES)) if (flags[modifier] === true !== hotkey.includes(modifier)) return false;
+	return hotkey.every((key) => key in MODIFIER_NAMES || event.code === key);
+}
+/** No store: `useSyncExternalStore` only tells the hydration render from a client render. */
+const subscribeNothing = () => () => {};
+const onClient = () => true;
+const onServerOrHydrating = () => false;
+/**
+* The element the region is portalled into for its whole client life. The library moves this
+* element (between its inline anchor and the topmost modal dialog); React never sees the move, so
+* the toasts keep their state (an Undo in flight stays pending). `display: contents`: no box.
+*/
+function createHost() {
+	if (typeof document === "undefined") return null;
+	const host = document.createElement("div");
+	host.style.display = "contents";
+	return host;
+}
+function makeEntry(options, flags) {
+	return {
+		options,
+		...flags,
+		item: {
+			...options,
+			id: options.id,
+			pending: flags.promisePending || flags.actionPending,
+			ending: flags.ending
+		}
+	};
+}
+function withFlags(entry, flags) {
+	return makeEntry(entry.options, {
+		promisePending: flags.promisePending ?? entry.promisePending,
+		actionPending: flags.actionPending ?? entry.actionPending,
+		ending: flags.ending ?? entry.ending
+	});
+}
+/** Rendered entries (the first `limit` open ones plus every ending one) and the queued count. */
+function partition(entries, limit) {
+	const visible = [];
+	const queued = [];
+	let open = 0;
+	for (const entry of entries) if (entry.ending) visible.push(entry);
+	else if (open < limit) {
+		visible.push(entry);
+		open++;
+	} else queued.push(entry);
+	return {
+		visible,
+		queued
+	};
+}
+/** Plain text of a `ReactNode` that is text (queued toasts have no DOM to read yet). */
+function plainText(node) {
+	if (typeof node === "string") return node;
+	if (typeof node === "number" || typeof node === "bigint") return String(node);
+	if (Array.isArray(node)) return node.map(plainText).join("");
+	return "";
+}
+/** Document order. */
+function byDocumentPosition(a, b) {
+	if (a === b) return 0;
+	return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function anyPause(sources) {
+	return sources.hover || sources.focus || sources.hidden || sources.blurred;
+}
+/**
+* The toast region: a `<section popover="manual">` named "Notifications (F8)", shown in the top
+* layer while it has toasts. Owns the queue (urgent state fed by `toast()`), the timers and their
+* pausing, the hotkey, focus return, announcements through `document.ariaNotify()`, and the move
+* into the topmost open modal `Dialog` (a region outside it would be inert).
+*
+* Owned keys (conventions 1.2): `popover`, `aria-label` (the consumer's own `aria-label` wins
+* verbatim), `data-paused`, `data-empty`, and the pointer / focus handlers.
+*/
+function ToastViewport({ manager = toast, limit = 3, duration = 5e3, hotkey = DEFAULT_HOTKEY, announce, children, className, style, render, ...rest }) {
+	const [entries, setEntries] = useState([]);
+	const entriesRef = useRef(entries);
+	const listener = useRef(null);
+	listener.current ??= {
+		restore: (toasts) => handlers.current.restore(toasts),
+		apply: (commands) => handlers.current.apply(commands),
+		retain: () => handlers.current.retain()
+	};
+	const [rejected, setRejected] = useState(() => toastManagerInternals(manager).isTaken(listener.current));
+	const [, startCloseTransition] = useTransition();
+	const regionRef = useRef(null);
+	const roots = useRef(/* @__PURE__ */ new Map());
+	const suspended = useRef(/* @__PURE__ */ new Set());
+	const timers = useRef(/* @__PURE__ */ new Map());
+	const pauses = useRef({
+		hover: false,
+		focus: false,
+		hidden: false,
+		blurred: false
+	});
+	const [paused, setPaused] = useState(false);
+	/** Where focus goes back to once the last toast holding it leaves (design 7). */
+	const returnTarget = useRef(null);
+	const lastAnnounced = useRef(/* @__PURE__ */ new Map());
+	/** Per closing toast: the animations already running before `data-ending` applied. */
+	const exitBaselines = useRef(/* @__PURE__ */ new Map());
+	const announceBatch = useRef([]);
+	const addedSinceEffect = useRef(false);
+	const mounted = useRef(false);
+	const latest = useLatest({
+		limit,
+		duration,
+		hotkey,
+		announce
+	});
+	const container = useSyncExternalStore(subscribeModals, getTopmostModal, getServerTopmostModal);
+	const write = (next) => {
+		entriesRef.current = next;
+		setEntries(next);
+	};
+	const effectiveDuration = (entry) => {
+		const own = entry.options.duration;
+		if (own !== void 0) return own;
+		return entry.options.action !== void 0 ? null : latest.current.duration;
+	};
+	const syncTimers = () => {
+		const map = timers.current;
+		const { visible } = partition(entriesRef.current, latest.current.limit);
+		const now = Date.now();
+		const live = /* @__PURE__ */ new Set();
+		const halted = !mounted.current || anyPause(pauses.current);
+		for (const entry of visible) {
+			if (entry.ending) continue;
+			const id = entry.options.id;
+			const ms = effectiveDuration(entry);
+			if (ms === null) continue;
+			live.add(id);
+			let timer = map.get(id);
+			if (timer === void 0 || timer.duration !== ms) {
+				if (timer?.handle != null) clearTimeout(timer.handle);
+				timer = {
+					duration: ms,
+					remaining: ms,
+					startedAt: 0,
+					handle: null
+				};
+				map.set(id, timer);
+			}
+			const run = !halted && !entry.item.pending && !suspended.current.has(id);
+			if (run && timer.handle === null) {
+				const current = timer;
+				current.startedAt = now;
+				current.handle = setTimeout(() => {
+					current.handle = null;
+					current.remaining = 0;
+					close([id], "timeout", void 0);
+				}, Math.max(0, current.remaining));
+			} else if (!run && timer.handle !== null) {
+				clearTimeout(timer.handle);
+				timer.handle = null;
+				timer.remaining -= now - timer.startedAt;
+			}
+		}
+		for (const [id, timer] of map) {
+			if (live.has(id)) continue;
+			if (timer.handle !== null) clearTimeout(timer.handle);
+			map.delete(id);
+		}
+	};
+	const setPause = (source, value) => {
+		if (pauses.current[source] === value) return;
+		pauses.current[source] = value;
+		syncTimers();
+		setPaused(anyPause(pauses.current));
+	};
+	/** Open toasts' Root elements in document order. */
+	const sortedRoots = (exclude) => {
+		const open = new Set(entriesRef.current.filter((e) => !e.ending).map((e) => e.options.id));
+		const list = [];
+		for (const [id, element] of roots.current) {
+			if (!open.has(id) || exclude?.has(id) || !element.isConnected) continue;
+			list.push({
+				id,
+				element
+			});
+		}
+		return list.sort((a, b) => byDocumentPosition(a.element, b.element));
+	};
+	/**
+	* Before toasts close: if focus is inside one of them, move it to the next toast, else the
+	* previous one, else where it was before the region was entered, else the body (design 7).
+	*/
+	const moveFocusOut = (closing) => {
+		const doc = regionRef.current?.ownerDocument ?? document;
+		const active = doc.activeElement;
+		if (!(active instanceof HTMLElement)) return;
+		const all = sortedRoots();
+		const index = all.findIndex(({ element }) => element.contains(active));
+		if (index === -1 || !closing.has(all[index].id)) return;
+		const after = all.slice(index + 1).find(({ id }) => !closing.has(id));
+		const before = all.slice(0, index).reverse().find(({ id }) => !closing.has(id));
+		const target = after ?? before;
+		if (target !== void 0) {
+			target.element.focus();
+			return;
+		}
+		const stored = returnTarget.current;
+		if (stored !== null && stored.isConnected && !regionRef.current?.contains(stored)) {
+			stored.focus();
+			if (doc.activeElement === stored) return;
+		}
+		active.blur();
+	};
+	/**
+	* Records the animations running in each closing toast before `data-ending` applies: the exit
+	* waits only for the ones the ending state started, not for a running progress bar.
+	*/
+	const snapshotExitBaselines = (ids) => {
+		for (const id of ids) {
+			const element = roots.current.get(id);
+			if (element === void 0 || !element.isConnected) continue;
+			if (typeof element.getAnimations !== "function") continue;
+			exitBaselines.current.set(id, new Set(element.getAnimations({ subtree: true })));
+		}
+	};
+	const clearTimer = (id) => {
+		const timer = timers.current.get(id);
+		if (timer?.handle != null) clearTimeout(timer.handle);
+		timers.current.delete(id);
+	};
+	const scheduleCloseActions = (closed, reason, event) => {
+		for (const entry of closed) {
+			const closeAction = entry.options.closeAction;
+			if (closeAction === void 0) continue;
+			const details = createActionDetails(event, {
+				id: entry.options.id,
+				reason
+			});
+			queueMicrotask(() => {
+				if (!mounted.current) return;
+				startCloseTransition(async () => {
+					await closeAction(details);
+				});
+			});
+		}
+	};
+	const close = (ids, reason, event) => {
+		const wanted = new Set(ids);
+		const closing = entriesRef.current.filter((e) => !e.ending && wanted.has(e.options.id));
+		if (closing.length === 0) return;
+		const closingIds = new Set(closing.map((e) => e.options.id));
+		moveFocusOut(closingIds);
+		snapshotExitBaselines(closingIds);
+		write(entriesRef.current.map((e) => closingIds.has(e.options.id) ? withFlags(e, { ending: true }) : e));
+		syncTimers();
+		scheduleCloseActions(closing, reason, event);
+	};
+	const drop = (id) => {
+		const next = entriesRef.current.filter((e) => !(e.ending && e.options.id === id));
+		if (next.length === entriesRef.current.length) return;
+		lastAnnounced.current.delete(id);
+		exitBaselines.current.delete(id);
+		write(next);
+	};
+	const apply = (commands) => {
+		const next = [...entriesRef.current];
+		const dismissed = [];
+		for (const command of commands) {
+			if (command.kind === "dismiss") {
+				for (let i = 0; i < next.length; i++) {
+					const entry = next[i];
+					if (entry.ending) continue;
+					if (command.id !== void 0 && entry.options.id !== command.id) continue;
+					dismissed.push(entry);
+					next[i] = withFlags(entry, { ending: true });
+				}
+				continue;
+			}
+			const index = next.findIndex((e) => e.options.id === command.id);
+			const existing = index === -1 ? void 0 : next[index];
+			if (command.kind === "add") {
+				const options = {
+					...command.options,
+					id: command.id
+				};
+				if (existing !== void 0 && !existing.ending) {
+					next[index] = makeEntry({
+						...existing.options,
+						...options
+					}, {
+						promisePending: command.pending || existing.promisePending,
+						actionPending: existing.actionPending,
+						ending: false
+					});
+					continue;
+				}
+				if (existing !== void 0) {
+					next.splice(index, 1);
+					clearTimer(command.id);
+					lastAnnounced.current.delete(command.id);
+					exitBaselines.current.delete(command.id);
+				}
+				next.push(makeEntry(options, {
+					promisePending: command.pending,
+					actionPending: false,
+					ending: false
+				}));
+				addedSinceEffect.current = true;
+			} else {
+				if (existing === void 0) {
+					if (isDev && !command.settle) console.error(`toast.update: no toast with id "${command.id}"; the update is ignored.`);
+					continue;
+				}
+				if (existing.ending) continue;
+				next[index] = makeEntry(command.settle ? {
+					...command.options,
+					id: command.id
+				} : {
+					...existing.options,
+					...command.options,
+					id: command.id
+				}, {
+					promisePending: command.settle ? false : existing.promisePending,
+					actionPending: existing.actionPending,
+					ending: false
+				});
+			}
+		}
+		if (dismissed.length === 0) {
+			write(next);
+			return;
+		}
+		const stays = new Set(next.filter((e) => !e.ending).map((e) => e.options.id));
+		const leaving = new Set(dismissed.map((e) => e.options.id).filter((id) => !stays.has(id)));
+		moveFocusOut(leaving);
+		snapshotExitBaselines(leaving);
+		write(next);
+		syncTimers();
+		scheduleCloseActions(dismissed, "dismiss", void 0);
+	};
+	const setActionPending = (id, pending) => {
+		const index = entriesRef.current.findIndex((e) => e.options.id === id);
+		if (index === -1) return;
+		const entry = entriesRef.current[index];
+		if (entry.actionPending === pending) return;
+		const next = [...entriesRef.current];
+		next[index] = withFlags(entry, { actionPending: pending });
+		write(next);
+	};
+	const flushAnnouncements = () => {
+		const batch = announceBatch.current;
+		announceBatch.current = [];
+		if (batch.length === 0) return;
+		const doc = regionRef.current?.ownerDocument ?? document;
+		if (typeof doc.ariaNotify !== "function") return;
+		const priority = batch.some((a) => a.priority === "high") ? "high" : "normal";
+		doc.ariaNotify(batch.map((a) => a.text).join(" "), { priority });
+	};
+	const queueAnnouncement = (id, text, priority) => {
+		const map = lastAnnounced.current;
+		if (map.has(id) && map.get(id) === text) return;
+		map.set(id, text);
+		if (text === null || text.trim() === "") return;
+		if (announceBatch.current.length === 0) queueMicrotask(flushAnnouncements);
+		announceBatch.current.push({
+			text,
+			priority
+		});
+	};
+	const restore = (toasts) => {
+		if (entriesRef.current.length > 0) return;
+		for (const t of toasts) if (t.announced !== void 0) lastAnnounced.current.set(t.options.id, t.announced);
+		write(toasts.map((t) => makeEntry(t.options, {
+			promisePending: t.pending,
+			actionPending: false,
+			ending: false
+		})));
+		addedSinceEffect.current = true;
+	};
+	const retain = () => {
+		const announced = lastAnnounced.current;
+		return entriesRef.current.filter((e) => !e.ending).map((e) => ({
+			options: e.options,
+			pending: e.promisePending,
+			announced: announced.has(e.options.id) ? announced.get(e.options.id) : void 0
+		}));
+	};
+	const handlers = useLatest({
+		apply,
+		restore,
+		retain,
+		close,
+		drop,
+		setActionPending,
+		queueAnnouncement,
+		setPause,
+		syncTimers
+	});
+	const context = useMemo(() => ({
+		close: (ids, reason, event) => handlers.current.close(ids, reason, event),
+		drop: (id) => handlers.current.drop(id),
+		setActionPending: (id, pending) => handlers.current.setActionPending(id, pending),
+		setSuspended: (id, value) => {
+			if (value) suspended.current.add(id);
+			else suspended.current.delete(id);
+			handlers.current.syncTimers();
+		},
+		registerRoot: (id, element) => {
+			if (element === null) roots.current.delete(id);
+			else roots.current.set(id, element);
+		},
+		focusSibling: (id, direction) => {
+			const all = sortedRoots();
+			const index = all.findIndex((r) => r.id === id);
+			if (index === -1) return;
+			all[index + direction]?.element.focus();
+		},
+		announce: (id, text, priority) => handlers.current.queueAnnouncement(id, text, priority),
+		exitBaseline: (id) => exitBaselines.current.get(id),
+		announcer: () => latest.current.announce
+	}), [handlers, latest]);
+	useEffect(() => {
+		const unsubscribe = toastManagerInternals(manager).subscribe(listener.current);
+		if (unsubscribe === null) {
+			setRejected(true);
+			if (isDev) console.error("Toast.Viewport: another Toast.Viewport already renders this manager; this one renders nothing. Use one Viewport per manager, or `createToastManager()` for a second queue.");
+			return;
+		}
+		setRejected(false);
+		return unsubscribe;
+	}, [manager]);
+	useEffect(() => {
+		if (rejected) return;
+		mounted.current = true;
+		const doc = regionRef.current?.ownerDocument ?? document;
+		const view = doc.defaultView ?? window;
+		pauses.current.hidden = doc.visibilityState === "hidden";
+		const onVisibility = () => handlers.current.setPause("hidden", doc.visibilityState === "hidden");
+		const onWindowBlur = (event) => {
+			if (!(event.target instanceof Node)) handlers.current.setPause("blurred", true);
+		};
+		const onWindowFocus = (event) => {
+			if (!(event.target instanceof Node)) handlers.current.setPause("blurred", false);
+		};
+		doc.addEventListener("visibilitychange", onVisibility);
+		view.addEventListener("blur", onWindowBlur);
+		view.addEventListener("focus", onWindowFocus);
+		handlers.current.syncTimers();
+		setPaused(anyPause(pauses.current));
+		const map = timers.current;
+		return () => {
+			mounted.current = false;
+			doc.removeEventListener("visibilitychange", onVisibility);
+			view.removeEventListener("blur", onWindowBlur);
+			view.removeEventListener("focus", onWindowFocus);
+			for (const timer of map.values()) if (timer.handle !== null) clearTimeout(timer.handle);
+			map.clear();
+		};
+	}, [handlers, rejected]);
+	const hotkeyKey = hotkey === null ? null : hotkey.join("\0");
+	useEffect(() => {
+		if (hotkeyKey === null || rejected) return;
+		const keys = hotkeyKey.split("\0");
+		const doc = regionRef.current?.ownerDocument ?? document;
+		const onKeyDown = (event) => {
+			if (event.defaultPrevented || !matchesHotkey(keys, event)) return;
+			const newest = sortedRoots().at(-1);
+			if (newest === void 0) return;
+			event.preventDefault();
+			const active = doc.activeElement;
+			if (active instanceof HTMLElement && !regionRef.current?.contains(active)) returnTarget.current = active;
+			newest.element.focus();
+		};
+		doc.addEventListener("keydown", onKeyDown);
+		return () => doc.removeEventListener("keydown", onKeyDown);
+	}, [hotkeyKey, rejected]);
+	const portalled = useSyncExternalStore(subscribeNothing, onClient, onServerOrHydrating);
+	const [host] = useState(createHost);
+	const anchorRef = useRef(null);
+	useLayoutEffect(() => {
+		if (host === null) return;
+		return () => host.remove();
+	}, [host]);
+	useLayoutEffect(() => {
+		if (host === null || !portalled) return;
+		const target = container ?? anchorRef.current;
+		if (target !== null && host.parentNode !== target) target.append(host);
+	});
+	useLayoutEffect(() => {
+		const region = regionRef.current;
+		const current = entriesRef.current;
+		if (pauses.current.focus && (region === null || !region.contains(region.ownerDocument.activeElement))) {
+			returnTarget.current = null;
+			setPause("focus", false);
+		}
+		if (region !== null && region.isConnected && region.hasAttribute("popover")) {
+			let open = false;
+			try {
+				open = region.matches(":popover-open");
+			} catch {
+				open = false;
+			}
+			try {
+				if (current.length > 0) {
+					if (!open) region.showPopover();
+					else if (addedSinceEffect.current) {
+						region.hidePopover();
+						region.showPopover();
+					}
+				} else if (open) region.hidePopover();
+			} catch {}
+		}
+		addedSinceEffect.current = false;
+		const { visible, queued } = partition(current, latest.current.limit);
+		for (const entry of queued) {
+			const id = entry.options.id;
+			if (lastAnnounced.current.has(id)) continue;
+			const resolver = entry.options.announce ?? latest.current.announce;
+			const text = resolver ? resolver(entry.item) : [plainText(entry.options.title), plainText(entry.options.description)].filter((t) => t !== "").join(" ");
+			queueAnnouncement(id, text, entry.options.priority ?? "normal");
+		}
+		for (const entry of visible) if (entry.ending && !roots.current.has(entry.options.id)) drop(entry.options.id);
+		syncTimers();
+	});
+	const insideDialog = use(DialogContext) !== null;
+	useDevWarning(insideDialog, "Toast.Viewport: rendered inside a Dialog. The region would close with the dialog; render the Viewport once near the root of the app (it moves into open modal Dialogs by itself).");
+	const { visible, queued } = partition(entries, limit);
+	const state = {
+		toasts: visible.map((e) => e.item),
+		queued: queued.length,
+		paused
+	};
+	const regionCallbackRef = useCallback((element) => {
+		regionRef.current = element;
+		return () => {
+			if (regionRef.current === element) regionRef.current = null;
+		};
+	}, []);
+	const onPointerEnter = () => setPause("hover", true);
+	const onPointerLeave = () => setPause("hover", false);
+	const onFocus = (event) => {
+		const region = event.currentTarget;
+		const from = event.relatedTarget;
+		if (!(from instanceof Node) || !region.contains(from)) returnTarget.current ??= from instanceof HTMLElement ? from : null;
+		setPause("focus", true);
+	};
+	const onBlur = (event) => {
+		const to = event.relatedTarget;
+		if (to instanceof Node && event.currentTarget.contains(to)) return;
+		returnTarget.current = null;
+		setPause("focus", false);
+	};
+	const libraryProps = {
+		popover: "manual",
+		"aria-label": rest["aria-label"] ?? regionLabel(hotkey),
+		"data-paused": dataAttr(paused),
+		"data-empty": dataAttr(state.toasts.length === 0),
+		onPointerEnter,
+		onPointerLeave,
+		onFocus,
+		onBlur
+	};
+	const region = useRender({
+		defaultElement: "section",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps,
+		ref: regionCallbackRef
+	});
+	if (rejected) return null;
+	const content = /* @__PURE__ */ jsx(ToastViewportContext, {
+		value: context,
+		children: region
+	});
+	if (!portalled || host === null) return content;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		ref: anchorRef,
+		style: ANCHOR_STYLE
+	}), createPortal(content, host)] });
+}
+const ANCHOR_STYLE = { display: "contents" };
+ToastViewport.displayName = "ToastViewport";
+//#endregion
+export { ToastViewport };
+
+//# sourceMappingURL=toast-viewport.mjs.map