ajo-ui 0.1.0

package/dist/chunks/virtual-list-B7hjGkjk.js

@@ -0,0 +1,413 @@
+import { stlx } from "../utils.js";
+import { dom, frame, statefulRootAttrs } from "ajo-cloves";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+import { Virtualizer, defaultRangeExtractor, elementScroll, measureElement, observeElementOffset, observeElementRect } from "@tanstack/virtual-core";
+//#region packages/ajo-ui/src/virtual.ts
+var INDEX_ATTRIBUTE = "data-ajo-virtual-index";
+var TARGET_SHAPE_ERROR = "VirtualList target needs key or index";
+var sameGeometry = (left, right) => {
+	if (left.total !== right.total || left.rows.length !== right.rows.length) return false;
+	for (let index = 0; index < left.rows.length; index++) {
+		const a = left.rows[index];
+		const b = right.rows[index];
+		if (a.key !== b.key || a.index !== b.index || a.start !== b.start || a.size !== b.size) return false;
+	}
+	return true;
+};
+var validateKeys = (keys) => {
+	const indexes = /* @__PURE__ */ new Map();
+	for (let index = 0; index < keys.length; index++) {
+		const key = keys[index];
+		if (typeof key !== "string" && (typeof key !== "number" || !Number.isFinite(key))) throw new TypeError(`VirtualList invalid key at ${index}`);
+		const previous = indexes.get(key);
+		if (previous !== void 0) throw new TypeError(`VirtualList duplicate key ${JSON.stringify(key)} ${previous}/${index}`);
+		indexes.set(key, index);
+	}
+	return indexes;
+};
+var virtual = (host) => {
+	let input;
+	let instance;
+	let keyIndexes = /* @__PURE__ */ new Map();
+	let validatedKeys;
+	let mounted = false;
+	let live = false;
+	let mountCleanup;
+	let postCommitQueued = false;
+	let invalidateQueued = false;
+	let syncing = false;
+	const positiveSizes = /* @__PURE__ */ new Map();
+	let focusedKey;
+	let liveRangeExtractor = defaultRangeExtractor;
+	const elementsByKey = /* @__PURE__ */ new Map();
+	let geometry = {
+		rows: [],
+		total: 0
+	};
+	let rendered = geometry;
+	const estimate = (index) => {
+		const size = input.estimate(index);
+		if (!Number.isFinite(size) || size <= 0) throw new RangeError(`VirtualList invalid estimate at ${index}`);
+		return size;
+	};
+	let getItemKey = (index) => index;
+	const collect = () => {
+		if (!instance) return {
+			rows: [],
+			total: 0
+		};
+		return {
+			rows: instance.getVirtualItems().map((item) => ({
+				index: item.index,
+				key: item.key,
+				size: item.size,
+				start: item.start
+			})),
+			total: instance.getTotalSize()
+		};
+	};
+	const throwAsync = (error) => {
+		if (!host.signal.aborted) host.throw(error);
+	};
+	const renderNext = () => {
+		if (host.signal.aborted) return;
+		try {
+			host.next();
+		} catch (error) {
+			throwAsync(error);
+		}
+	};
+	const schedule = frame(renderNext);
+	const invalidate = (immediate = false) => {
+		if (!immediate) return schedule();
+		schedule.cancel();
+		if (invalidateQueued || host.signal.aborted) return;
+		invalidateQueued = true;
+		queueMicrotask(() => {
+			invalidateQueued = false;
+			renderNext();
+		});
+	};
+	const onChange = () => {
+		if (syncing || host.signal.aborted) return;
+		try {
+			const next = collect();
+			geometry = next;
+			if (sameGeometry(next, rendered)) {
+				schedule.cancel();
+				return;
+			}
+			invalidate();
+		} catch (error) {
+			throwAsync(error);
+		}
+	};
+	const ssrRangeExtractor = (_range) => {
+		const count = Math.min(input.prerender, input.keys.length);
+		return Array.from({ length: count }, (_, index) => index);
+	};
+	const refreshLiveRangeExtractor = () => {
+		const focusedIndex = focusedKey === void 0 ? void 0 : keyIndexes.get(focusedKey);
+		liveRangeExtractor = (range) => {
+			const indexes = defaultRangeExtractor(range);
+			if (focusedIndex === void 0 || indexes.includes(focusedIndex)) return indexes;
+			indexes.push(focusedIndex);
+			indexes.sort((left, right) => left - right);
+			return indexes;
+		};
+	};
+	const focusedRowKey = () => {
+		if (!dom(host)) return void 0;
+		let node = host.ownerDocument.activeElement;
+		while (node && node !== host) {
+			const index = node.getAttribute(INDEX_ATTRIBUTE);
+			if (index !== null) return input?.keys[Number(index)];
+			node = node.parentElement;
+		}
+	};
+	const updateFocus = () => {
+		const next = focusedRowKey();
+		if (next === focusedKey) return;
+		focusedKey = next;
+		refreshLiveRangeExtractor();
+		if (!live || !instance || host.signal.aborted) return;
+		try {
+			syncing = true;
+			applyOptions();
+			geometry = collect();
+		} catch (error) {
+			throwAsync(error);
+		} finally {
+			syncing = false;
+		}
+		if (!sameGeometry(geometry, rendered)) invalidate();
+	};
+	const measure = (node, entry, current) => {
+		const index = current.indexFromElement(node);
+		const key = input?.keys[index];
+		const cached = key === void 0 ? void 0 : positiveSizes.get(key);
+		if (!entry && cached !== void 0) return cached;
+		const size = measureElement(node, entry, current);
+		if (Number.isFinite(size) && size > 0) {
+			if (key !== void 0) positiveSizes.set(key, size);
+			return size;
+		}
+		return key === void 0 ? estimate(index) : positiveSizes.get(key) ?? estimate(index);
+	};
+	const coreOptions = () => {
+		const prerender = Math.min(input.prerender, input.keys.length);
+		let initialHeight = 0;
+		for (let index = 0; index < prerender; index++) initialHeight += estimate(index);
+		return {
+			count: input.keys.length,
+			estimateSize: estimate,
+			getItemKey,
+			getScrollElement: () => dom(host) ? host : null,
+			indexAttribute: INDEX_ATTRIBUTE,
+			initialRect: {
+				height: initialHeight,
+				width: 0
+			},
+			measureElement: measure,
+			observeElementOffset,
+			observeElementRect,
+			onChange,
+			overscan: live ? input.overscan : 0,
+			rangeExtractor: live ? liveRangeExtractor : ssrRangeExtractor,
+			scrollToFn: elementScroll
+		};
+	};
+	const applyOptions = () => {
+		if (!instance) instance = new Virtualizer(coreOptions());
+		else instance.setOptions(coreOptions());
+	};
+	const postCommit = () => {
+		if (postCommitQueued || host.signal.aborted) return;
+		postCommitQueued = true;
+		queueMicrotask(() => {
+			postCommitQueued = false;
+			if (host.signal.aborted || !dom(host) || !host.isConnected || !instance) return;
+			try {
+				syncing = true;
+				const firstMount = !mounted;
+				if (firstMount) {
+					mountCleanup = instance._didMount();
+					mounted = true;
+					focusedKey = focusedRowKey();
+					live = true;
+					refreshLiveRangeExtractor();
+					host.addEventListener("focusin", updateFocus, { signal: host.signal });
+					host.addEventListener("focusout", () => queueMicrotask(updateFocus), { signal: host.signal });
+				}
+				applyOptions();
+				instance._willUpdate();
+				const next = collect();
+				const changed = !sameGeometry(next, rendered);
+				if (changed) geometry = next;
+				if (firstMount || changed) invalidate(firstMount);
+			} catch (error) {
+				throwAsync(error);
+			} finally {
+				syncing = false;
+			}
+		});
+	};
+	host.signal.addEventListener("abort", () => {
+		schedule.cancel();
+		mountCleanup?.();
+		mountCleanup = void 0;
+		mounted = false;
+		live = false;
+		focusedKey = void 0;
+		positiveSizes.clear();
+		elementsByKey.clear();
+		keyIndexes.clear();
+		validatedKeys = void 0;
+		input = void 0;
+		instance = void 0;
+		geometry = rendered = {
+			rows: [],
+			total: 0
+		};
+	}, { once: true });
+	return {
+		get connected() {
+			return mounted && dom(host) && host.isConnected;
+		},
+		get rows() {
+			return geometry.rows;
+		},
+		get total() {
+			return geometry.total;
+		},
+		measure(key, node) {
+			if (!instance) return;
+			if (!node) {
+				instance.measureElement(null);
+				const previous = elementsByKey.get(key);
+				if (previous) queueMicrotask(() => {
+					if (host.signal.aborted || previous.isConnected || elementsByKey.get(key) !== previous) return;
+					elementsByKey.delete(key);
+				});
+				return;
+			}
+			const index = keyIndexes.get(key);
+			if (index === void 0 || host.signal.aborted) return;
+			elementsByKey.set(key, node);
+			node.setAttribute(INDEX_ATTRIBUTE, String(index));
+			instance.measureElement(node);
+		},
+		scrollTo(target, align = "auto") {
+			if (!target || typeof target !== "object") throw new TypeError(TARGET_SHAPE_ERROR);
+			const record = target;
+			const hasIndex = Object.hasOwn(record, "index");
+			const hasKey = Object.hasOwn(record, "key");
+			if (hasIndex === hasKey) throw new TypeError(TARGET_SHAPE_ERROR);
+			let index;
+			if (hasKey) {
+				if (typeof record.key !== "string" && (typeof record.key !== "number" || !Number.isFinite(record.key))) throw new TypeError("VirtualList invalid scroll key");
+				index = keyIndexes.get(record.key);
+			} else {
+				if (typeof record.index !== "number" || !Number.isInteger(record.index)) throw new TypeError("VirtualList invalid scroll index");
+				index = record.index;
+			}
+			if (index === void 0 || index < 0 || index >= (input?.keys.length ?? 0)) return false;
+			if (!instance || !mounted || host.signal.aborted) return false;
+			instance.scrollToIndex(index, {
+				align,
+				behavior: "auto"
+			});
+			return true;
+		},
+		sync(next) {
+			const keysChanged = validatedKeys !== next.keys;
+			if (keysChanged) {
+				const nextIndexes = validateKeys(next.keys);
+				if (focusedKey !== void 0 && !nextIndexes.has(focusedKey)) {
+					const row = elementsByKey.get(focusedKey);
+					const active = dom(host) ? host.ownerDocument.activeElement : null;
+					if (row && active && row.contains(active)) {
+						if (dom(host)) host.focus({ preventScroll: true });
+					}
+					focusedKey = void 0;
+				}
+				for (const key of positiveSizes.keys()) if (!nextIndexes.has(key)) positiveSizes.delete(key);
+				if (instance) {
+					for (const key of instance.itemSizeCache.keys()) if (!nextIndexes.has(key)) instance.itemSizeCache.delete(key);
+				}
+				keyIndexes = nextIndexes;
+				validatedKeys = next.keys;
+				refreshLiveRangeExtractor();
+			}
+			if (keysChanged || input?.estimateToken !== next.estimateToken) {
+				const currentKeys = next.keys;
+				getItemKey = (index) => currentKeys[index] ?? index;
+			}
+			input = next;
+			syncing = true;
+			try {
+				applyOptions();
+				geometry = collect();
+				rendered = geometry;
+			} finally {
+				syncing = false;
+			}
+			postCommit();
+		}
+	};
+};
+//#endregion
+//#region packages/ajo-ui/src/virtual-list.tsx
+var ROOT_STYLE = "position:relative;overflow-x:hidden;overflow-y:auto;overflow-anchor:none;margin:0;padding:0;list-style:none";
+var ITEM_STYLE = "box-sizing:border-box;left:0;position:absolute;width:100%;top:";
+var SIZER_KEY = "\0virtual-list-sizer";
+var SNAPSHOT_ERROR = "VirtualList mutated items";
+var unavailableScroll = () => false;
+var vnodeKey = (key) => `\0virtual-list-item:${typeof key}:${key}`;
+var estimate = (value, item, index) => typeof value === "function" ? value(item, index) : value;
+var assertCountOption = (name, value) => {
+	if (!Number.isInteger(value) || value < 0) throw new RangeError(`VirtualList invalid ${name}`);
+};
+var VirtualListRoot = function* () {
+	const geometry = virtual(this);
+	let source;
+	let sourceLength = 0;
+	let keys = [];
+	let apiReceiver;
+	let estimateInput;
+	let estimateItems;
+	let estimateToken;
+	const snapshotKeys = (items, getItemKey) => {
+		if (items !== source) {
+			source = items;
+			sourceLength = items.length;
+			const next = items.map(getItemKey);
+			if (next.length === keys.length && next.every((key, index) => key === keys[index])) return keys;
+			keys = next;
+			return keys;
+		}
+		if (items.length !== sourceLength) throw new TypeError(SNAPSHOT_ERROR);
+		if (items.length > 0) {
+			const last = items.length - 1;
+			if (getItemKey(items[0], 0) !== keys[0] || getItemKey(items[last], last) !== keys[last]) throw new TypeError(SNAPSHOT_ERROR);
+		}
+		return keys;
+	};
+	const api = { scrollTo: (target, options) => geometry.scrollTo(target, options?.align === "nearest" ? "auto" : options?.align) };
+	this.signal.addEventListener("abort", () => {
+		api.scrollTo = unavailableScroll;
+		source = void 0;
+		keys = [];
+		apiReceiver = void 0;
+	}, { once: true });
+	for (const { estimateSize, getItemKey, items, overscan = 4, prerender = 20, renderItem, setApi } of this) {
+		assertCountOption("overscan", overscan);
+		assertCountOption("prerender", prerender);
+		if (estimateSize !== estimateInput || typeof estimateSize === "function" && items !== estimateItems) {
+			estimateInput = estimateSize;
+			estimateItems = items;
+			estimateToken = {};
+		}
+		geometry.sync({
+			estimate: (index) => estimate(estimateSize, items[index], index),
+			estimateToken,
+			keys: snapshotKeys(items, getItemKey),
+			overscan,
+			prerender
+		});
+		if (geometry.connected && setApi && setApi !== apiReceiver) {
+			apiReceiver = setApi;
+			setApi(api);
+		}
+		yield /* @__PURE__ */ jsxs(Fragment, { children: [geometry.rows.map(({ index, key, start }) => /* @__PURE__ */ jsx("li", {
+			"aria-posinset": index + 1,
+			"aria-setsize": items.length,
+			"data-slot": "virtual-list-item",
+			ref: (element) => geometry.measure(key, element),
+			style: `${ITEM_STYLE}${start}px`,
+			children: renderItem(items[index], index)
+		}, vnodeKey(key))), /* @__PURE__ */ jsx("li", {
+			"aria-hidden": "true",
+			"data-slot": "virtual-list-sizer",
+			role: "none",
+			style: `height:${geometry.total}px;pointer-events:none;visibility:hidden`
+		}, SIZER_KEY)] });
+	}
+};
+VirtualListRoot.is = "ul";
+/** Virtualized native list with stable identity and bounded DOM work. */
+var VirtualList = ({ estimateSize, getItemKey, items, overscan, prerender, renderItem, setApi, style, tabindex = 0, ...attrs }) => /* @__PURE__ */ jsx(VirtualListRoot, {
+	...statefulRootAttrs(attrs),
+	estimateSize,
+	getItemKey,
+	items,
+	overscan,
+	prerender,
+	renderItem,
+	setApi,
+	"attr:data-slot": "virtual-list",
+	"attr:style": stlx(style, ROOT_STYLE),
+	"attr:tabindex": tabindex
+});
+//#endregion
+export { VirtualList as t };

package/dist/collapsible.js

@@ -0,0 +1,106 @@
+import { flag } from "./utils.js";
+import { callHandler, controlled, dom, id, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/collapsible.tsx
+/** Composition context shared by Collapsible parts and derivative families such as Accordion. */
+var CollapsibleContext = context(null);
+var CollapsibleRoot = function* ({ defaultOpen, open }) {
+	const rootId = id("collapsible");
+	let disabled = false;
+	let onOpenChange;
+	const state = controlled(this, {
+		fallback: Boolean(open ?? defaultOpen),
+		onChange: (next, event) => onOpenChange?.(next, event)
+	});
+	const syncRoot = () => {
+		if (!dom(this)) return;
+		if (state.value) this.setAttribute("open", "");
+		else this.removeAttribute("open");
+		this.setAttribute("data-state", state.value ? "open" : "closed");
+		if (disabled) {
+			this.setAttribute("data-disabled", "true");
+			this.setAttribute("aria-disabled", "true");
+		} else {
+			this.removeAttribute("data-disabled");
+			this.removeAttribute("aria-disabled");
+		}
+	};
+	const setOpen = (next, event) => {
+		if (disabled || next === state.value) return;
+		state.set(next, event);
+	};
+	for (const args of this) {
+		disabled = Boolean(args.disabled);
+		onOpenChange = args.onOpenChange;
+		state.sync(args.open != null ? Boolean(args.open) : void 0);
+		syncRoot();
+		CollapsibleContext({
+			contentId: `${rootId}-content`,
+			disabled,
+			open: state.value,
+			setOpen,
+			triggerId: `${rootId}-trigger`
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+CollapsibleRoot.is = "details";
+/** Unstyled collapsible disclosure rendered as a native details element. */
+var Collapsible = ({ children, defaultOpen, disabled, onOpenChange, open, ...attrs }) => {
+	const opened = Boolean(open ?? defaultOpen);
+	const disabledFlag = Boolean(disabled);
+	return /* @__PURE__ */ jsx(CollapsibleRoot, {
+		"attr:data-slot": "collapsible",
+		...statefulRootAttrs(attrs),
+		defaultOpen,
+		disabled: disabledFlag,
+		onOpenChange,
+		open,
+		"attr:aria-disabled": flag(disabledFlag),
+		"attr:data-disabled": flag(disabledFlag),
+		"attr:data-state": opened ? "open" : "closed",
+		"attr:open": opened || void 0,
+		"set:open": opened,
+		children
+	});
+};
+/** Unstyled disclosure trigger rendered as a native summary element. */
+var CollapsibleTrigger = ({ children, disabled, id: idArg, locked, "set:onclick": onClick, ...attrs }) => {
+	const collapsible = CollapsibleContext();
+	const disabledFlag = Boolean(disabled ?? collapsible?.disabled);
+	const unavailable = Boolean(disabledFlag || locked);
+	return /* @__PURE__ */ jsx("summary", {
+		"data-slot": "collapsible-trigger",
+		...attrs,
+		"aria-controls": collapsible?.contentId,
+		"aria-disabled": unavailable ? "true" : void 0,
+		"aria-expanded": collapsible?.open ? "true" : "false",
+		"data-disabled": flag(disabledFlag),
+		"data-state": collapsible?.open ? "open" : "closed",
+		id: idArg ?? collapsible?.triggerId,
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			const prevented = event.defaultPrevented;
+			event.preventDefault();
+			if (prevented || unavailable) return;
+			collapsible?.setOpen(!collapsible.open, event);
+		},
+		tabindex: disabledFlag ? -1 : void 0,
+		children
+	});
+};
+/** Unstyled content panel natively shown or hidden by its details root. */
+var CollapsibleContent = ({ children, ...attrs }) => {
+	const collapsible = CollapsibleContext();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "collapsible-content",
+		...attrs,
+		"aria-labelledby": collapsible?.triggerId,
+		"data-state": collapsible?.open ? "open" : "closed",
+		id: collapsible?.contentId,
+		children
+	});
+};
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleTrigger };