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

package/dist/{detail-panel-BI_wHSoz.js → detail-panel-DimjnPI8.js}

@@ -1,14 +1,14 @@
-import { r as e } from "./i18n-DpW8lqJ1.js";
+import { r as e } from "./i18n-D7xXDd8-.js";
 import { n as t } from "./badge-pgYVOnZO.js";
-import { t as n } from "./skeleton-DyOwgYmF.js";
+import { t as n } from "./skeleton-DeEOmm1y.js";
 import { n as r } from "./container-WoYiHo50.js";
-import { a as i } from "./page-CfjGviUA.js";
-import { w as a } from "./page-header-w_PFLnLG.js";
-import { a as o, c as s, n as c, o as l, t as u, u as d } from "./section-DY8yPm11.js";
-import { a as f, n as p, o as m, r as h, t as g } from "./tabs-DjEpS9uq.js";
-import { keyedProps as _ } from "@slotted/core/selector-key";
-import { createControllable as v } from "@slotted/core/state";
-import { createContext as y, useCallback as b, useContext as x, useEffect as S, useImperativeHandle as C, useMemo as ee, useRef as w, useState as T } from "react";
+import { a as i } from "./page-CwYmBoZQ.js";
+import { w as a } from "./page-header-CMxCQqu_.js";
+import { a as o, c as s, n as c, o as l, s as u, t as d, u as f } from "./section-DY8yPm11.js";
+import { a as p, n as m, o as h, r as g, t as _ } from "./tabs-DjEpS9uq.js";
+import { keyedProps as v } from "@slotted/core/selector-key";
+import { createControllable as ee } from "@slotted/core/state";
+import { createContext as y, useCallback as b, useContext as x, useEffect as S, useImperativeHandle as C, useMemo as te, useRef as w, useState as T } from "react";
 import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
 import { detailPanelMessages as k } from "@slotted/core/i18n";
 import { findScrollParent as A } from "@slotted/core/sticky-header";
@@ -47,29 +47,29 @@ function F() {
 	return e;
 }
 var I = ":scope > [data-ui=\"page-header\"] [data-part=\"heading\"]";
-function te(e) {
+function ne(e) {
 	return [...e].sort((e, t) => {
 		if (e.element === null || t.element === null) return 0;
 		let n = e.element.compareDocumentPosition(t.element);
 		return n & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : n & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
 	});
 }
-function ne({ "aria-label": t, "aria-labelledby": n, aside: o, children: s, className: c, defaultSection: l, footer: u, layout: d, level: f, loading: p, messages: m, mount: h, onSectionChange: g, recordKey: y, ref: x, render: E, scroll: j, section: N, size: F, status: ne, style: L, ...re }) {
-	let R = M(), z = i(), B = o ?? R.aside, V = d ?? R.layout, H = f ?? R.level, ie = h ?? R.mount, U = j ?? R.scroll, W = F ?? R.size, ae = ne ?? "ready", G = p === !0, oe = e(k, m), [K, se] = T(null), [q, ce] = T(void 0), [J, le] = T(() => /* @__PURE__ */ new Map()), [ue, de] = T(void 0), [fe, pe] = T(l), me = N ?? fe, he = ee(() => te(J.values()), [J]), Y = me ?? (V === "tabs" ? he[0]?.name : void 0), ge = w(/* @__PURE__ */ new Set());
+function L({ "aria-label": t, "aria-labelledby": n, aside: o, children: s, className: c, defaultSection: l, footer: u, layout: d, level: f, loading: p, messages: m, mount: h, onSectionChange: g, recordKey: _, ref: y, render: x, scroll: E, section: j, size: N, status: F, style: L, ...R }) {
+	let z = M(), B = i(), V = o ?? z.aside, H = d ?? z.layout, U = f ?? z.level, re = h ?? z.mount, W = E ?? z.scroll, G = N ?? z.size, ie = F ?? "ready", K = p === !0, ae = e(k, m), [q, oe] = T(null), [se, ce] = T(void 0), [J, le] = T(() => /* @__PURE__ */ new Map()), [ue, de] = T(void 0), [fe, pe] = T(l), me = j ?? fe, he = te(() => ne(J.values()), [J]), Y = me ?? (H === "tabs" ? he[0]?.name : void 0), ge = w(/* @__PURE__ */ new Set());
 	Y !== void 0 && ge.current.add(Y);
 	let X = w({
 		current: Y,
 		onSectionChange: g,
-		section: N
+		section: j
 	});
 	X.current = {
 		current: Y,
 		onSectionChange: g,
-		section: N
+		section: j
 	};
 	let Z = b((e, t, n) => {
 		if (e === X.current.current) return;
-		let r = !1, i = v({
+		let r = !1, i = ee({
 			controlled: X.current.section,
 			initial: X.current.current,
 			onRequest: (e) => {
@@ -87,115 +87,115 @@ function ne({ "aria-label": t, "aria-labelledby": n, aside: o, children: s, clas
 		de(() => e);
 	}, []);
 	S(() => {
-		if (K === null || t !== void 0 || n !== void 0) return;
-		let e = K.querySelector(I);
+		if (q === null || t !== void 0 || n !== void 0) return;
+		let e = q.querySelector(I);
 		ce(e?.id || void 0);
 	}, [
-		K,
+		q,
 		t,
 		n,
-		y,
-		G
+		_,
+		K
 	]);
 	let Q = b(() => {
-		let e = K?.querySelector(I);
+		let e = q?.querySelector(I);
 		e && (e.hasAttribute("tabindex") || e.setAttribute("tabindex", "-1"), e.focus({ preventScroll: !0 }));
-	}, [K]), ye = b(() => K === null ? null : U === "self" ? K : A(K), [K, U]), be = w(y);
+	}, [q]), ye = b(() => q === null ? null : W === "self" ? q : A(q), [q, W]), be = w(_);
 	S(() => {
-		if (be.current === y || (be.current = y, K === null)) return;
-		let e = K.ownerDocument.activeElement;
-		e !== null && K.contains(e) && (ye()?.scrollTo({ top: 0 }), Q());
+		if (be.current === _ || (be.current = _, q === null)) return;
+		let e = q.ownerDocument.activeElement;
+		e !== null && q.contains(e) && (ye()?.scrollTo({ top: 0 }), Q());
 	}, [
-		y,
-		K,
+		_,
+		q,
 		ye,
 		Q
 	]);
 	let $ = w(void 0);
 	S(() => {
-		V === "stacked" && Y !== void 0 && $.current !== Y && ($.current = Y, J.get(Y)?.element?.scrollIntoView({ block: "start" }));
+		H === "stacked" && Y !== void 0 && $.current !== Y && ($.current = Y, J.get(Y)?.element?.scrollIntoView({ block: "start" }));
 	}, [
 		Y,
 		J,
-		V
-	]), C(x, () => ({
+		H
+	]), C(y, () => ({
 		get element() {
-			return K;
+			return q;
 		},
 		focus: Q,
 		scrollToSection: (e) => {
 			$.current = void 0, Z(e, "programmatic", void 0);
 		}
 	}), [
-		K,
+		q,
 		Q,
 		Z
 	]);
 	let xe = {
-		aside: B,
+		aside: V,
 		attachIdentify: ve,
 		current: Y,
 		identify: ue,
-		layout: V,
-		level: H,
-		loading: G,
-		mount: ie,
+		layout: H,
+		level: U,
+		loading: K,
+		mount: re,
 		register: _e,
 		sections: he,
 		seen: (e) => ge.current.has(e),
 		select: Z,
-		size: W,
-		status: ae,
-		t: oe
-	}, Se = _({
-		...re,
-		...t === void 0 ? n === void 0 ? q === void 0 ? G ? { "aria-label": oe("loading") } : {} : { "aria-labelledby": q } : { "aria-labelledby": n } : { "aria-label": t },
-		...G ? {
+		size: G,
+		status: ie,
+		t: ae
+	}, Se = v({
+		...R,
+		...t === void 0 ? n === void 0 ? se === void 0 ? K ? { "aria-label": ae("loading") } : {} : { "aria-labelledby": se } : { "aria-labelledby": n } : { "aria-label": t },
+		...K ? {
 			"aria-busy": !0,
 			"data-loading": ""
 		} : {},
 		children: /* @__PURE__ */ O(a, {
-			level: H,
-			size: W,
+			level: U,
+			size: G,
 			children: [s, u != null && u !== !1 ? /* @__PURE__ */ D("footer", {
 				"data-part": "footer",
 				"data-part-footer": "",
 				children: /* @__PURE__ */ D(r, {
-					inset: z?.inset,
-					size: z?.width,
+					inset: B?.inset,
+					size: B?.width,
 					children: u
 				})
 			}) : null]
 		}),
 		className: c,
-		"data-aside": B,
-		...y === void 0 ? {} : { "data-key": String(y) },
-		"data-layout": V,
-		"data-level": H,
-		"data-mount": ie,
+		"data-aside": V,
+		..._ === void 0 ? {} : { "data-key": String(_) },
+		"data-layout": H,
+		"data-level": U,
+		"data-mount": re,
 		"data-part": "root",
-		"data-scroll": U,
-		"data-size": W,
-		"data-status": ae,
+		"data-scroll": W,
+		"data-size": G,
+		"data-status": ie,
 		"data-ui": "detail-panel",
 		style: L
 	});
 	return /* @__PURE__ */ D(P.Provider, {
 		value: xe,
-		children: E === void 0 ? /* @__PURE__ */ D("article", {
+		children: x === void 0 ? /* @__PURE__ */ D("article", {
 			...Se,
-			ref: se
-		}) : E({
+			ref: oe
+		}) : x({
 			...Se,
-			ref: se
+			ref: oe
 		})
 	});
 }
 //#endregion
 //#region src/detail-panel/detail-panel-parts.tsx
-var L = 3, re = 4;
-function R({ aside: e, banner: t, children: a, className: o, message: s, ref: c, render: l, style: u, ...d }) {
-	let f = F(), p = i(), m = f.status === "ready", h = f.aside !== "none" && (e !== void 0 || f.loading), g = _({
+var R = 3, z = 4;
+function B({ aside: e, banner: t, children: a, className: o, message: s, ref: c, render: l, style: u, ...d }) {
+	let f = F(), p = i(), m = f.status === "ready", h = f.aside !== "none" && (e !== void 0 || f.loading), g = v({
 		...d,
 		children: /* @__PURE__ */ O(r, {
 			inset: p?.inset,
@@ -216,7 +216,7 @@ function R({ aside: e, banner: t, children: a, className: o, message: s, ref: c,
 					"data-part-aside": "",
 					"aria-label": f.t("aside"),
 					children: f.loading ? /* @__PURE__ */ D(n, {
-						lines: re,
+						lines: z,
 						inlineSize: "60%"
 					}) : e
 				}) : null]
@@ -235,30 +235,30 @@ function R({ aside: e, banner: t, children: a, className: o, message: s, ref: c,
 		ref: c
 	}) : l(g);
 }
-function z({ actions: e, children: r, className: i, count: a, disabled: f, label: p, name: m, ref: h, render: g, style: v, ...y }) {
-	let x = F(), C = w(null), ee = b((e) => {
-		C.current = e, typeof h == "function" ? h(e) : h && (h.current = e);
-	}, [h]), { register: T } = x;
+function V({ actions: e, children: r, className: i, count: a, disabled: p, label: m, name: h, ref: g, render: _, style: ee, ...y }) {
+	let x = F(), C = w(null), te = b((e) => {
+		C.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+	}, [g]), { register: T } = x;
 	S(() => T({
-		name: m,
-		label: p,
+		name: h,
+		label: m,
 		count: a,
-		disabled: f,
+		disabled: p,
 		element: C.current
 	}), [
 		T,
+		h,
 		m,
-		p,
 		a,
-		f
+		p
 	]);
-	let k = x.current === m, A = x.layout === "tabs", j = A ? x.identify?.(m) : void 0, M = !A || x.mount === "eager" || k || x.mount === "lazy" && x.seen(m), N = a === void 0 ? null : /* @__PURE__ */ D(t, {
+	let k = x.current === h, A = x.layout === "tabs", j = A ? x.identify?.(h) : void 0, M = !A || x.mount === "eager" || k || x.mount === "lazy" && x.seen(h), N = a === void 0 ? null : /* @__PURE__ */ D(t, {
 		count: a,
 		shape: "pill",
 		size: "sm",
 		tone: "secondary",
 		variant: "soft"
-	}), P = x.loading ? /* @__PURE__ */ D(n, { lines: L }) : null, I = _({
+	}), P = x.loading ? /* @__PURE__ */ D(n, { lines: R }) : null, I = v({
 		...y,
 		...j === void 0 ? {} : {
 			"aria-labelledby": j.tabId,
@@ -268,46 +268,46 @@ function z({ actions: e, children: r, className: i, count: a, disabled: f, label
 			"data-part": "section-actions",
 			"data-part-section-actions": "",
 			children: e
-		}) : null, M ? P ?? r : null] }) : /* @__PURE__ */ O(d, {
+		}) : null, M ? P ?? r : null] }) : /* @__PURE__ */ O(f, {
 			level: String(Math.min(Number(x.level) + 1, 6)),
 			size: x.size,
-			children: [/* @__PURE__ */ O(o, { children: [/* @__PURE__ */ D(s, { children: /* @__PURE__ */ O(l, { children: [p, N === null ? null : /* @__PURE__ */ O(E, { children: [" ", N] })] }) }), e != null && e !== !1 ? /* @__PURE__ */ D(u, { children: e }) : null] }), /* @__PURE__ */ D(c, { children: P ?? r })]
+			children: [/* @__PURE__ */ O(o, { children: [/* @__PURE__ */ O(s, { children: [/* @__PURE__ */ D(l, { children: m }), N === null ? null : /* @__PURE__ */ D(u, { children: N })] }), e != null && e !== !1 ? /* @__PURE__ */ D(d, { children: e }) : null] }), /* @__PURE__ */ D(c, { children: P ?? r })]
 		}),
 		className: i,
 		...k ? { "data-current": "" } : {},
-		"data-name": m,
+		"data-name": h,
 		"data-part": "section",
 		...A ? {
 			hidden: !k,
 			role: "tabpanel",
 			tabIndex: 0
 		} : {},
-		style: v
+		style: ee
 	});
-	return g === void 0 ? /* @__PURE__ */ D("div", {
+	return _ === void 0 ? /* @__PURE__ */ D("div", {
 		...I,
-		ref: ee
-	}) : g(I);
+		ref: te
+	}) : _(I);
 }
-function B() {
-	let e = m(), t = F(), n = w(e.identify);
+function H() {
+	let e = h(), t = F(), n = w(e.identify);
 	n.current = e.identify;
 	let { attachIdentify: r } = t;
 	return S(() => (r((e) => n.current(e)), () => r(void 0)), [r]), null;
 }
-function V({ children: e, label: n }) {
+function U({ children: e, label: n }) {
 	let r = F();
-	return r.layout === "tabs" ? /* @__PURE__ */ O(f, {
+	return r.layout === "tabs" ? /* @__PURE__ */ O(p, {
 		onValueChange: (e, t) => {
 			r.select(e, t.reason, t.source);
 		},
 		track: "none",
 		value: r.current,
 		children: [
-			/* @__PURE__ */ D(B, {}),
-			/* @__PURE__ */ D(h, {
+			/* @__PURE__ */ D(H, {}),
+			/* @__PURE__ */ D(g, {
 				"aria-label": n,
-				children: r.sections.map((e) => /* @__PURE__ */ O(g, {
+				children: r.sections.map((e) => /* @__PURE__ */ O(_, {
 					disabled: e.disabled,
 					value: e.name,
 					children: [e.label, e.count === void 0 ? null : /* @__PURE__ */ O(E, { children: [" ", /* @__PURE__ */ D(t, {
@@ -319,9 +319,9 @@ function V({ children: e, label: n }) {
 					})] })]
 				}, e.name))
 			}),
-			e != null && e !== !1 ? /* @__PURE__ */ D(p, { children: e }) : null
+			e != null && e !== !1 ? /* @__PURE__ */ D(m, { children: e }) : null
 		]
 	}) : null;
 }
 //#endregion
-export { F as a, ne as i, z as n, N as o, V as r, M as s, R as t };
+export { F as a, L as i, V as n, N as o, U as r, M as s, B as t };

package/dist/detail-panel.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./detail-panel-BI_wHSoz.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./detail-panel-DimjnPI8.js";
 export { t as DetailPanel, o as DetailPanelBody, r as DetailPanelDefaultsProvider, n as DetailPanelSection, i as DetailPanelTabs, e as useDetailPanel, a as useDetailPanelDefaults };