@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/table-of-contents-DfAeYtFJ.js

@@ -0,0 +1,461 @@
+import { n as e, t } from "./icon-T9Yt4tnm.js";
+import { r as n } from "./i18n-DpW8lqJ1.js";
+import { i as r } from "./skeleton-2LSpg84Z.js";
+import { createControllable as i } from "@slotted/core/state";
+import { createContext as a, useCallback as o, useContext as s, useEffect as c, useId as l, useImperativeHandle as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { Fragment as ee, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { createDismissableLayer as te } from "@slotted/core/dismissable-layer";
+import { tableOfContentsMessages as ne } from "@slotted/core/i18n";
+import { DEFAULT_LEVELS as re, collectOutline as ie } from "@slotted/core/outline";
+import { createScrollSpy as ae, focusTarget as oe, landOn as se, prefersReducedMotion as ce, readStickyTop as _, resolveScroller as le } from "@slotted/core/scroll-spy";
+//#region src/table-of-contents/table-of-contents-context.ts
+var ue = a(void 0);
+function v() {
+	let e = s(ue);
+	if (e === void 0) throw Error("Every table-of-contents part must be rendered inside TableOfContents.");
+	return e;
+}
+var y = a(void 0);
+function b() {
+	let e = s(y);
+	if (e === void 0) throw Error("Every link must be rendered inside a TableOfContentsItem.");
+	return e;
+}
+function x(e) {
+	return e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey;
+}
+//#endregion
+//#region src/table-of-contents/table-of-contents-defaults.tsx
+var S = {
+	history: "push",
+	landmark: !0,
+	layout: "vertical",
+	levels: re,
+	numbered: !1,
+	offset: 0,
+	size: "md",
+	sticky: !1
+}, de = a(S);
+function fe() {
+	return s(de);
+}
+function pe({ children: e, ...t }) {
+	let n = fe(), r = f(() => ({
+		history: t.history ?? n.history,
+		landmark: t.landmark ?? n.landmark,
+		layout: t.layout ?? n.layout,
+		levels: t.levels ?? n.levels,
+		numbered: t.numbered ?? n.numbered,
+		offset: t.offset ?? n.offset,
+		size: t.size ?? n.size,
+		sticky: t.sticky ?? n.sticky
+	}), [
+		t.history,
+		t.landmark,
+		t.layout,
+		t.levels,
+		t.numbered,
+		t.offset,
+		t.size,
+		t.sticky,
+		n
+	]);
+	return /* @__PURE__ */ h(de.Provider, {
+		value: r,
+		children: e
+	});
+}
+//#endregion
+//#region src/table-of-contents/table-of-contents-parts.tsx
+function me(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function C({ children: e, className: t, ref: n, render: r, style: i, value: a, ...o }) {
+	let c = v(), l = (s(y)?.depth ?? 0) + 1, u = c.value === a, d = f(() => ({
+		current: u,
+		depth: l,
+		value: a
+	}), [
+		u,
+		l,
+		a
+	]), p = {
+		...o,
+		children: e,
+		className: t,
+		...u ? { "data-current": "" } : {},
+		"data-depth": l,
+		"data-part": "item",
+		"data-value": a,
+		ref: n,
+		style: i
+	};
+	return /* @__PURE__ */ h(y.Provider, {
+		value: d,
+		children: r === void 0 ? /* @__PURE__ */ h("li", { ...p }) : r(p)
+	});
+}
+function he({ children: e, className: t, href: n, onClick: r, ref: i, render: a, style: o, ...s }) {
+	let l = v(), u = b(), d = p(null);
+	c(() => l.registerLink(u.value, () => d.current?.textContent?.trim() ?? ""), [u.value, l.registerLink]);
+	let f = (e) => {
+		r?.(e), !(e.defaultPrevented || x(e)) && (e.preventDefault(), l.navigate(u.value, me(e), e.nativeEvent));
+	}, m = {
+		...s,
+		...u.current ? { "aria-current": "location" } : {},
+		children: e,
+		className: t,
+		...u.current ? { "data-current": "" } : {},
+		"data-part": "link",
+		href: n ?? `#${u.value}`,
+		onClick: f,
+		ref: (e) => {
+			d.current = e, typeof i == "function" ? i(e) : i != null && (i.current = e);
+		},
+		style: o
+	};
+	return a === void 0 ? /* @__PURE__ */ h("a", { ...m }) : a(m);
+}
+function ge({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let o = {
+		...a,
+		children: e,
+		className: t,
+		"data-part": "group",
+		ref: n,
+		style: i
+	};
+	return r === void 0 ? /* @__PURE__ */ h("ol", { ...o }) : r(o);
+}
+//#endregion
+//#region src/table-of-contents/table-of-contents.tsx
+var _e = 4, ve = [
+	"72%",
+	"56%",
+	"80%",
+	"48%"
+];
+function ye(e) {
+	return e == null || e instanceof HTMLElement ? e : e.current;
+}
+function be(e) {
+	return e.map((e) => /* @__PURE__ */ g(C, {
+		value: e.id,
+		children: [/* @__PURE__ */ h(he, { children: e.label }), e.children !== void 0 && e.children.length > 0 ? /* @__PURE__ */ h(ge, { children: be(e.children) }) : null]
+	}, e.id));
+}
+function xe(e) {
+	return e.map((e) => ({
+		id: e.id,
+		label: e.label,
+		children: xe(e.children)
+	}));
+}
+function Se({ children: a, className: s, defaultOpen: re, defaultValue: v, exclude: y, history: b, items: x, label: S, landmark: de, layout: pe, levels: me, loading: C = !1, messages: he, numbered: ge, offset: _e, onKeyDown: Se, onOpenChange: Ce, onValueChange: we, open: w, ref: Te, render: Ee, scroller: De, size: Oe, source: ke, sticky: Ae, style: je, value: T, ...E }) {
+	let D = fe(), O = b ?? D.history, Me = de ?? D.landmark, k = pe ?? D.layout, Ne = me ?? D.levels, A = ge ?? D.numbered, j = _e ?? D.offset, M = Oe ?? D.size, Pe = Ae ?? D.sticky, Fe = n(ne, he), [Ie, Le] = m(v ?? null), [Re, ze] = m(re ?? !1), N = T === void 0 ? Ie : T, P = w === void 0 ? Re : w, F = k === "collapsed", I = !F || P, Be = l(), Ve = `${Be}-panel`, L = `${Be}-label`, [R, He] = m(null), [z, Ue] = m(null), We = p(null), B = p(null), [Ge, Ke] = m([]), [V, H] = m(0), U = p(!1), W = p(/* @__PURE__ */ new Map()), qe = o((e, t) => (W.current.set(e, t), H((e) => e + 1), () => {
+		W.current.delete(e), H((e) => e + 1);
+	}), []), G = p({
+		currentOpen: P,
+		currentValue: N,
+		open: w,
+		value: T
+	});
+	G.current = {
+		currentOpen: P,
+		currentValue: N,
+		open: w,
+		value: T
+	};
+	let K = o((e, t, n) => {
+		i({
+			controlled: G.current.value,
+			initial: G.current.currentValue,
+			onRequest: (e) => we?.(e.value, e)
+		}).request(e, t, n) && Le(e);
+	}, [we]), q = o((e, t, n) => {
+		i({
+			controlled: G.current.open,
+			initial: G.current.currentOpen,
+			onRequest: (e) => Ce?.(e.value, e)
+		}).request(e, t, n) && ze(e);
+	}, [Ce]), Je = o(() => {
+		if (R === null) return [];
+		let e = R.ownerDocument;
+		return [...W.current.keys()].map((t) => e.getElementById(t)).filter((e) => e !== null).sort((e, t) => e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+	}, [R]), J = p(null), Y = ye(De), Ye = o(() => J.current?.scroller() ?? Y ?? null, [Y]), X = ye(ke);
+	c(() => {
+		if (X == null) return;
+		let e = () => Ke(ie(X, {
+			levels: Ne,
+			...y === void 0 ? {} : { exclude: y }
+		}));
+		if (e(), typeof MutationObserver > "u") return;
+		let t = new MutationObserver(e);
+		return t.observe(X, {
+			childList: !0,
+			subtree: !0,
+			characterData: !0
+		}), () => t.disconnect();
+	}, [
+		y,
+		Ne,
+		X
+	]), c(() => {
+		if (R === null || W.current.size === 0) return;
+		let e = R.ownerDocument, t = Y === void 0 ? le(Je()) : Y, n = ae({
+			targets: Je,
+			scroller: t,
+			line: () => _(t, e) + j + 4,
+			onChange: (e) => K(e, "scroll"),
+			own: R
+		});
+		J.current = n;
+		let r = e.defaultView?.location.hash.slice(1) ?? "";
+		if (r !== "" && W.current.has(r)) {
+			let t = e.getElementById(r);
+			t !== null && se(t, {
+				scroller: n.scroller(),
+				chrome: _(n.scroller(), e),
+				offset: j,
+				behavior: "instant"
+			});
+		}
+		return () => {
+			n.destroy(), J.current = null;
+		};
+	}, [
+		V,
+		K,
+		j,
+		Y,
+		R,
+		Je
+	]);
+	let Z = o((e, t, n) => {
+		if (R === null) return;
+		let r = R.ownerDocument, i = r.defaultView, a = r.getElementById(e);
+		if (K(e, t, n), a === null || i === null) return;
+		J.current?.pin(e);
+		let o = Ye();
+		if (se(a, {
+			scroller: o,
+			chrome: _(o, r),
+			offset: j,
+			behavior: ce(i) ? "instant" : "smooth"
+		}), t !== "programmatic" && O !== "none") {
+			let t = `#${e}`;
+			O === "push" ? i.history.pushState(null, "", t) : i.history.replaceState(null, "", t);
+		}
+		oe(a), F && G.current.currentOpen && q(!1, "select", n);
+	}, [
+		F,
+		q,
+		K,
+		O,
+		j,
+		R,
+		Ye
+	]);
+	d(() => {
+		let e = We.current;
+		if (z === null || e === null) return;
+		let t = () => {
+			let t = z.querySelector("[data-part=\"link\"][data-current]");
+			if (t === null) {
+				e.style.removeProperty("--_marker-start"), e.style.removeProperty("--_marker-size");
+				return;
+			}
+			let n = z.getBoundingClientRect(), r = t.getBoundingClientRect(), i = getComputedStyle(z).direction === "rtl";
+			if (k === "horizontal") {
+				let t = i ? n.right - r.right - z.scrollLeft : r.left - n.left + z.scrollLeft;
+				e.style.setProperty("--_marker-start", `${t}px`), e.style.setProperty("--_marker-size", `${r.width}px`);
+				let a = i ? n.right - r.right : r.left - n.left, o = n.width;
+				if (a < 0 || a + r.width > o) {
+					let e = a < 0 ? a : a + r.width - o;
+					z.scrollBy({
+						left: i ? -e : e,
+						behavior: "smooth"
+					});
+				}
+			} else {
+				let t = r.top - n.top + z.scrollTop;
+				e.style.setProperty("--_marker-start", `${t}px`), e.style.setProperty("--_marker-size", `${r.height}px`);
+				let i = r.top - n.top;
+				z.scrollHeight > z.clientHeight && (i < 0 ? z.scrollBy({
+					top: i,
+					behavior: "smooth"
+				}) : i + r.height > n.height && z.scrollBy({
+					top: i + r.height - n.height,
+					behavior: "smooth"
+				}));
+			}
+		};
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		n.observe(z);
+		let r = z.ownerDocument.fonts, i = !0;
+		return r !== void 0 && r.ready.then(() => {
+			i && t();
+		}), () => {
+			i = !1, n.disconnect();
+		};
+	}, [
+		N,
+		z,
+		V,
+		k,
+		I
+	]), c(() => {
+		if (z === null || k !== "horizontal") return;
+		let e = () => {
+			let e = z.scrollWidth - z.clientWidth;
+			if (e <= 1) {
+				z.removeAttribute("data-overflow");
+				return;
+			}
+			let t = Math.abs(z.scrollLeft), n = t <= 1, r = t >= e - 1;
+			z.setAttribute("data-overflow", n ? "end" : r ? "start" : "both");
+		};
+		e(), z.addEventListener("scroll", e, { passive: !0 });
+		let t = typeof ResizeObserver > "u" ? null : new ResizeObserver(e);
+		return t?.observe(z), () => {
+			z.removeEventListener("scroll", e), t?.disconnect();
+		};
+	}, [
+		z,
+		V,
+		k
+	]), c(() => {
+		if (!F || !P || z === null) return;
+		let e = B.current, t = te(z, {
+			branches: e === null ? [] : [e],
+			onDismiss: (t) => {
+				(t.reason === "escape" || t.reason === "outsidePress") && (q(!1, t.reason, t.source), t.reason === "escape" && e?.focus());
+			}
+		});
+		return () => t.destroy();
+	}, [
+		F,
+		P,
+		z,
+		q
+	]), c(() => {
+		U.current && P && z !== null && (U.current = !1, z.querySelector("[data-part=\"link\"]")?.focus());
+	}, [P, z]);
+	let Q = o(() => z === null || !I ? [] : [...z.querySelectorAll("[data-part=\"link\"]")], [z, I]), Xe = (e) => {
+		if (Se?.(e), e.defaultPrevented) return;
+		let t = e.target;
+		if (t === B.current) {
+			e.key === "ArrowDown" && !P && (e.preventDefault(), U.current = !0, q(!0, "keyboard", e.nativeEvent));
+			return;
+		}
+		if (!t.matches("[data-part=\"link\"]")) return;
+		let n = k === "horizontal", r = n ? "ArrowRight" : "ArrowDown", i = n ? "ArrowLeft" : "ArrowUp", a = e.key === r || e.key === "ArrowDown" ? 1 : e.key === i || e.key === "ArrowUp" ? -1 : 0;
+		if (a === 0 && e.key !== "Home" && e.key !== "End") return;
+		let o = Q();
+		if (o.length === 0) return;
+		e.preventDefault();
+		let s = o.indexOf(t);
+		o[e.key === "Home" ? 0 : e.key === "End" ? o.length - 1 : Math.min(o.length - 1, Math.max(0, s + a))]?.focus();
+	};
+	u(Te, () => ({
+		focus: () => F ? B.current?.focus() : Q()[0]?.focus(),
+		refresh: () => {
+			J.current?.refresh(), H((e) => e + 1);
+		},
+		scrollTo: (e) => Z(e, "programmatic"),
+		root: R
+	}), [
+		F,
+		Q,
+		Z,
+		R
+	]);
+	let Ze = f(() => ({
+		layout: k,
+		navigate: Z,
+		numbered: A,
+		registerLink: qe,
+		size: M,
+		value: N
+	}), [
+		N,
+		Z,
+		qe,
+		k,
+		A,
+		M
+	]), Qe = a ?? be(x ?? xe(Ge)), $e = V > 0, et = a == null ? x === void 0 ? Ge.length : x.length : 1, tt = !C && ($e ? W.current.size : et) === 0, nt = N === null ? "" : W.current.get(N)?.() ?? "", $ = S != null, rt = {
+		...E,
+		...Me ? $ ? { "aria-labelledby": E["aria-labelledby"] ?? L } : { "aria-label": E["aria-label"] ?? Fe("navigation") } : {},
+		...C ? { "aria-busy": !0 } : {},
+		className: s,
+		...tt ? { "data-empty": "" } : {},
+		"data-layout": k,
+		...C ? { "data-loading": "" } : {},
+		...A ? { "data-numbered": "" } : {},
+		...F && P ? { "data-open": "" } : {},
+		"data-part": "root",
+		"data-size": M,
+		...Pe && !F ? { "data-sticky": "" } : {},
+		"data-ui": "table-of-contents",
+		onKeyDown: Xe,
+		style: je,
+		children: /* @__PURE__ */ g(ee, { children: [F ? /* @__PURE__ */ g("button", {
+			"aria-controls": Ve,
+			"aria-expanded": P,
+			"data-part": "trigger",
+			onClick: (e) => q(!P, e.detail === 0 ? "keyboard" : "pointer", e.nativeEvent),
+			ref: B,
+			type: "button",
+			children: [
+				/* @__PURE__ */ h("span", {
+					"data-part": "label",
+					id: L,
+					children: $ ? S : Fe("navigation")
+				}),
+				/* @__PURE__ */ h("span", {
+					"data-part": "current",
+					children: nt
+				}),
+				/* @__PURE__ */ h("span", {
+					"aria-hidden": "true",
+					"data-part": "indicator",
+					children: /* @__PURE__ */ h(t, { children: /* @__PURE__ */ h(e, { name: "chevron-down" }) })
+				})
+			]
+		}) : $ ? /* @__PURE__ */ h("div", {
+			"data-part": "label",
+			id: L,
+			children: S
+		}) : null, /* @__PURE__ */ g("div", {
+			"data-part": "panel",
+			id: Ve,
+			ref: Ue,
+			children: [/* @__PURE__ */ h("div", {
+				"aria-hidden": "true",
+				"data-part": "marker",
+				ref: We
+			}), /* @__PURE__ */ h("ol", {
+				"data-part": "list",
+				children: C ? ve.map((e) => /* @__PURE__ */ h("li", {
+					"aria-hidden": "true",
+					"data-part": "skeleton",
+					children: /* @__PURE__ */ h(r, {
+						inlineSize: e,
+						shape: "text"
+					})
+				}, e)) : Qe
+			})]
+		})] })
+	}, it = Me ? "nav" : "div";
+	return /* @__PURE__ */ h(ue.Provider, {
+		value: Ze,
+		children: Ee === void 0 ? /* @__PURE__ */ h(it, {
+			...rt,
+			ref: He
+		}) : Ee(rt)
+	});
+}
+//#endregion
+export { he as a, fe as c, b as d, C as i, x as l, Se as n, S as o, ge as r, pe as s, _e as t, v as u };

package/dist/table-of-contents.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "./table-of-contents-DfAeYtFJ.js";
+export { l as TABLE_OF_CONTENTS_BOUNDS, o as TABLE_OF_CONTENTS_FALLBACK, a as TableOfContents, c as TableOfContentsDefaultsProvider, s as TableOfContentsGroup, r as TableOfContentsItem, e as TableOfContentsLink, i as platformClick, u as useTableOfContents, t as useTableOfContentsDefaults, n as useTableOfContentsItem };

package/dist/table.js

@@ -0,0 +1,2 @@
+import { A as e, C as t, D as n, E as r, M as i, N as a, O as o, S as s, T as c, _ as l, a as u, b as d, c as f, d as p, f as m, g as h, h as g, i as _, j as v, k as y, l as b, m as x, n as S, o as C, p as w, r as T, s as E, t as D, u as O, v as k, w as A, x as j, y as M } from "./table-CzBIw9ng.js";
+export { o as TABLE_ROW_SELECTOR, y as Table, f as TableBody, D as TableBooleanFilter, b as TableCaption, O as TableCell, p as TableColumnActions, m as TableColumnHeader, n as TableContent, S as TableDateFilter, T as TableDateTimeFilter, i as TableDefaultsProvider, w as TableDetail, x as TableEmpty, g as TableExpander, h as TableFooter, l as TableHead, k as TableLoader, _ as TableNumberFilter, M as TableRow, d as TableRowHeader, j as TableSelect, s as TableSelectAll, u as TableSetFilter, t as TableSort, A as TableSummary, C as TableTextFilter, E as TableTimeFilter, e as useOptionalTable, v as useTable, c as useTableColumn, a as useTableDefaults, r as useTableRow };