@slotted/react 0.1.0-beta.1 → 0.1.0-beta.10

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

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

package/dist/table-of-contents.js

@@ -1,2 +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";
+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-BFVERMZy.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

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