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

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

@@ -1,461 +0,0 @@
-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 };