@slotted/react 0.1.0-beta.7 → 0.1.0-beta.9

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

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