themelia-react-ui 2.0.5 → 3.0.0

package/dist/features/resource-assignment.js

@@ -1,148 +1,167 @@
 "use client";
 import { useStrings as e } from "../lib/strings.js";
-import { t } from "../utils-B6kKb8jB.js";
-import { n } from "../buttons-BedGfygC.js";
-import { c as r, o as i } from "../typography-BQnine1k.js";
-import { t as a } from "../structure-DuxKl954.js";
-import { n as o } from "../cards-rNX1M4Xn.js";
-import { r as s } from "../overlays-BSgCtM2v.js";
-import { n as c } from "../display-KsZLw9Ov.js";
-import { s as l } from "../data-display-BdgCAw8T.js";
-import { useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Eye as v, PackageOpen as y } from "lucide-react";
+import { t } from "../utils-BVbAG2J6.js";
+import { c as n, o as r } from "../typography-C0dELqYV.js";
+import { t as i } from "../focus-recipes-DSkiUvUp.js";
+import { n as a } from "../buttons-pZVgPTZn.js";
+import { t as o } from "../structure-DElaQwwN.js";
+import { t as s } from "../smart-card-C59z6KFO.js";
+import { n as c } from "../cards-CgWyqvgZ.js";
+import { r as l } from "../overlays-D-gAIfPF.js";
+import { s as u } from "../data-display-CWe9SOYh.js";
+import { useCallback as d, useEffect as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Eye as b, PackageOpen as x } from "lucide-react";
 //#region src/components/features/resource-assignment/resource-assignment.strings.ts
-var b = {
+var S = {
 	currentlySelected: "Currently selected:",
 	noResourceContent: "No resource content configured.",
 	noResourceSelected: "No resource selected.",
-	changeAction: "Change"
+	assignAction: "Choose",
+	closeLabel: "Close",
+	confirmErrorMessage: "The selection could not be saved. Try again."
 };
 //#endregion
 //#region src/components/features/resource-assignment/hooks/use-shared-resource-card.ts
-function x({ resource: e, mapInitialSelected: t, onConfirmSelection: n, isConfirmDisabled: r, onDialogOpen: i, onDialogClose: a, onError: o, open: s, defaultOpen: c = !1, onOpenChange: l, value: h, defaultValue: g, onValueChange: _ }) {
-	let [v, y] = m(c), [b, x] = m(!1), [S, C] = m(g ?? null), w = s !== void 0, T = h !== void 0, E = w ? s : v, D = T ? h : S, O = e !== null, k = p(!1), A = p(!1), j = p(g !== void 0), M = u((e) => {
-		w || y(e), l?.(e);
-	}, [w, l]), N = u((e) => {
-		T || C(e), _?.(e);
-	}, [T, _]), P = u(() => {
-		M(!0);
-	}, [M]);
-	d(() => {
-		if (!E) {
-			k.current = !1;
+function C({ resource: e, mapInitialSelected: t, onConfirmSelection: n, isConfirmDisabled: r, onDialogOpen: i, onDialogClose: a, onError: o, open: s, defaultOpen: c = !1, onOpenChange: l, value: u, defaultValue: p, onValueChange: _ }) {
+	let [v, y] = g(c), [b, x] = g(!1), [S, C] = g(null), [w, T] = g(p ?? null), E = s !== void 0, D = u !== void 0, O = E ? s : v, k = D ? u : w, A = e !== null, j = h(!1), M = h(!1), ee = h(p !== void 0), N = d((e) => {
+		E || y(e), l?.(e);
+	}, [E, l]), P = d((e) => {
+		C(null), D || T(e), _?.(e);
+	}, [D, _]), F = d(() => {
+		N(!0);
+	}, [N]);
+	f(() => {
+		if (!O) {
+			j.current = !1;
 			return;
 		}
-		if (k.current) return;
-		k.current = !0;
-		let n = !A.current, r;
-		T ? r = h : n && j.current ? r = S : (r = t(e), N(r)), A.current = !0, i?.(r);
+		if (j.current) return;
+		j.current = !0, C(null);
+		let n = !M.current, r;
+		D ? r = u : n && ee.current ? r = w : (r = t(e), P(r)), M.current = !0, i?.(r);
 	}, [
-		S,
-		E,
-		T,
+		w,
+		O,
+		D,
 		t,
 		i,
 		e,
-		N,
-		h
+		P,
+		u
 	]);
-	let F = u(() => {
-		b || (M(!1), N(null), a?.());
+	let I = d(() => {
+		b || (N(!1), P(null), a?.());
 	}, [
 		b,
 		a,
-		N,
-		M
-	]), I = f(() => D === null ? !1 : !r || !r(D), [r, D]), L = u(async () => {
-		if (!b && I && D !== null) {
-			x(!0);
+		P,
+		N
+	]), L = m(() => k === null ? !1 : !r || !r(k), [r, k]), R = d(async () => {
+		if (!b && L && k !== null) {
+			x(!0), C(null);
 			try {
-				await n(D), M(!1), N(null), a?.();
+				await n(k), N(!1), P(null), a?.();
 			} catch (e) {
-				o?.(e, D);
+				C(e ?? /* @__PURE__ */ Error("SharedResourceCard confirmation failed")), o?.(e, k);
 			} finally {
 				x(!1);
 			}
 		}
 	}, [
-		I,
+		L,
 		b,
 		n,
 		a,
 		o,
-		D,
-		N,
-		M
+		k,
+		P,
+		N
 	]);
-	return f(() => ({
+	return m(() => ({
 		resource: e,
-		hasResource: O,
-		isSelectorOpen: E,
+		hasResource: A,
+		isSelectorOpen: O,
 		isConfirming: b,
-		selectedSuggestion: D,
-		setSelectedSuggestion: N,
-		openSelector: P,
-		closeSelector: F,
-		confirmSelection: L,
-		canConfirmSelection: I
+		confirmError: S,
+		selectedSuggestion: k,
+		setSelectedSuggestion: P,
+		openSelector: F,
+		closeSelector: I,
+		confirmSelection: R,
+		canConfirmSelection: L
 	}), [
-		I,
-		F,
 		L,
-		O,
+		I,
+		S,
+		R,
+		A,
 		b,
-		E,
-		P,
+		O,
+		F,
 		e,
-		D,
-		N
+		k,
+		P
 	]);
 }
 //#endregion
+//#region src/components/features/resource-assignment/partials/assignment-surface.ts
+function w(e, n) {
+	return {
+		surface: "flat",
+		padding: "none",
+		"data-component": "content-block",
+		"data-slot": "content-block",
+		className: t("content-block--component", e),
+		headerClassName: "content-block--header",
+		contentClassName: t("content-block--content", n),
+		footerClassName: "content-block--footer"
+	};
+}
+//#endregion
 //#region src/components/features/resource-assignment/partials/default-shared-resource-partials.tsx
-function S({ context: t, strings: n, getSelectionLabel: o }) {
-	let s = e(b, n), c = t.selectedSuggestion;
+function T({ context: t, strings: i, getSelectionLabel: a }) {
+	let s = e(S, i), c = t.selectedSuggestion;
 	if (c === null) return null;
-	let l = o?.(c) ?? (typeof c == "object" && c && "label" in c && typeof c.label == "string" ? c.label : null);
-	return l == null || l === "" ? null : /* @__PURE__ */ _(a, {
+	let l = a?.(c) ?? (typeof c == "object" && c && "label" in c && typeof c.label == "string" ? c.label : null);
+	return l == null || l === "" ? null : /* @__PURE__ */ y(o, {
 		gap: "dense",
 		className: "default-dialog-summary--component shared-resource-card--dialog-summary",
-		children: [/* @__PURE__ */ g(i, { children: s.currentlySelected }), /* @__PURE__ */ g(r, {
+		children: [/* @__PURE__ */ v(r, { children: s.currentlySelected }), /* @__PURE__ */ v(n, {
 			type: "inherit",
 			children: l
 		})]
 	});
 }
-S.displayName = "DefaultDialogSummary";
-function C({ context: t, strings: n }) {
-	let i = e(b, n);
-	return /* @__PURE__ */ g(r, {
+T.displayName = "DefaultDialogSummary";
+function E({ context: t, strings: r }) {
+	let i = e(S, r);
+	return /* @__PURE__ */ v(n, {
 		type: "secondary",
 		className: "default-resource-content--component",
 		children: i.noResourceContent
 	});
 }
-C.displayName = "DefaultResourceContent";
-function w({ context: t, strings: r }) {
-	let i = e(b, r);
-	return /* @__PURE__ */ g(l, {
-		title: i.noResourceSelected,
+E.displayName = "DefaultResourceContent";
+function D({ context: t, strings: n }) {
+	let r = e(S, n);
+	return /* @__PURE__ */ v(u, {
+		title: r.noResourceSelected,
 		description: !1,
-		media: /* @__PURE__ */ g(y, { className: "size-icon" }),
+		media: /* @__PURE__ */ v(x, { className: "size-icon" }),
 		mediaVariant: "icon-soft",
-		actions: /* @__PURE__ */ g(n, {
+		actions: /* @__PURE__ */ v(a, {
 			tone: "secondary",
 			buttonStyle: "outline",
 			onClick: t.openSelector,
 			type: "button",
-			children: i.changeAction
+			children: r.assignAction ?? S.assignAction
 		}),
 		className: "default-empty-content--component"
 	});
 }
-w.displayName = "DefaultEmptyContent";
-function T({ SelectorComponent: e, selectorProps: t, context: n }) {
+D.displayName = "DefaultEmptyContent";
+function O({ SelectorComponent: e, selectorProps: t, context: n }) {
 	let r = {
 		...t ?? {},
 		onSelect: n.setSelectedSuggestion,
@@ -151,110 +170,122 @@ function T({ SelectorComponent: e, selectorProps: t, context: n }) {
 		lockOnSelect: !1,
 		context: "dialog"
 	};
-	return /* @__PURE__ */ g("div", {
+	return /* @__PURE__ */ v("div", {
 		className: "default-dialog-content--component",
-		children: /* @__PURE__ */ g(e, { ...r })
+		children: /* @__PURE__ */ v(e, { ...r })
 	});
 }
-T.displayName = "DefaultDialogContent";
+O.displayName = "DefaultDialogContent";
 //#endregion
 //#region src/components/features/resource-assignment/resource-assignment.tsx
-function E({ icon: i, title: l, description: u, className: d, contentClassName: p, alert: m, alertTone: y, actions: E, headerAction: D, footerText: O, resource: k, selector: A, sections: j, sectionsClassName: M, viewAction: N, viewLink: P, ResourceContentComponent: F, EmptyContentComponent: I, renderResourceContent: L, renderEmptyContent: R, strings: ee }) {
-	let z = e(b, ee), B = x({
-		resource: k,
-		mapInitialSelected: A?.mapInitialSelected ?? (() => null),
-		onConfirmSelection: A?.onConfirmSelection ?? (() => void 0),
-		isConfirmDisabled: A?.isConfirmDisabled,
-		onDialogOpen: A?.onDialogOpen,
-		onDialogClose: A?.onDialogClose,
-		onError: A?.onError,
-		open: A?.open,
-		defaultOpen: A?.defaultOpen,
-		onOpenChange: A?.onOpenChange,
-		value: A?.value,
-		defaultValue: A?.defaultValue,
-		onValueChange: A?.onValueChange
-	}), V = A !== void 0, H = A?.actionLabel?.trim(), U = E?.filter((e) => e.visible !== !1).length ?? 0, W = V && !B.hasResource && !R && !I, G = !!(V && H && U === 0 && !W), K = f(() => {
-		let e = E ?? [];
-		return !V || !H || W || G ? e.length > 0 ? e : void 0 : [...e, {
+function k({ icon: r, title: u, description: f, className: g, contentClassName: x, alert: k, alertTone: A, actions: j, headerAction: M, footerText: ee, resource: N, selector: P, sections: F, sectionsClassName: I, viewAction: L, viewLink: R, ResourceContentComponent: z, EmptyContentComponent: B, renderResourceContent: V, renderEmptyContent: H, strings: te }) {
+	let U = e(S, te), W = h(null), ne = h(null), re = h(null), ie = d(() => {
+		let e = re.current;
+		return e instanceof HTMLElement && e.isConnected && e !== e.ownerDocument.body ? !0 : ne.current ?? W.current;
+	}, []), G = C({
+		resource: N,
+		mapInitialSelected: P?.mapInitialSelected ?? (() => null),
+		onConfirmSelection: P?.onConfirmSelection ?? (() => void 0),
+		isConfirmDisabled: P?.isConfirmDisabled,
+		onDialogOpen: P?.onDialogOpen,
+		onDialogClose: P?.onDialogClose,
+		onError: P?.onError,
+		open: P?.open,
+		defaultOpen: P?.defaultOpen,
+		onOpenChange: P?.onOpenChange,
+		value: P?.value,
+		defaultValue: P?.defaultValue,
+		onValueChange: P?.onValueChange
+	}), ae = G.isSelectorOpen;
+	p(() => {
+		ae && (re.current = W.current?.ownerDocument.activeElement ?? null);
+	}, [ae]);
+	let K = P !== void 0, q = P?.actionLabel?.trim(), oe = j?.filter((e) => e.visible !== !1).length ?? 0, J = K && !G.hasResource && !H && !B, Y = !!(K && q && oe === 0 && !J), se = m(() => {
+		let e = j ?? [];
+		return !K || !q || J || Y ? e.length > 0 ? e : void 0 : [...e, {
 			id: "shared-resource-selector-change",
-			label: H,
-			onClick: B.openSelector
+			label: q,
+			onClick: G.openSelector
 		}];
 	}, [
-		E,
-		V,
-		H,
-		B.openSelector,
-		G,
-		W
-	]), te = D || G ? /* @__PURE__ */ _(h, { children: [D, G && /* @__PURE__ */ g(n, {
+		j,
+		K,
+		q,
+		G.openSelector,
+		Y,
+		J
+	]), ce = M || Y ? /* @__PURE__ */ y(_, { children: [M, Y && /* @__PURE__ */ v(a, {
+		ref: ne,
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "outline",
 		size: "sm",
-		onClick: B.openSelector,
+		onClick: G.openSelector,
 		className: "shared-resource-card--selector-action",
-		children: H
-	})] }) : void 0, ne = f(() => {
-		if (L) return L(B);
-		if (F) return /* @__PURE__ */ g(F, { context: B });
-		if (Array.isArray(j) && j.length > 0) {
-			let e = j.filter((e) => !e.when || e.when(B));
-			if (e.length > 0) return /* @__PURE__ */ g("div", {
-				className: M ?? "grid gap-space-lg",
+		children: q
+	})] }) : void 0, le = m(() => {
+		if (V) return V(G);
+		if (z) return /* @__PURE__ */ v(z, { context: G });
+		if (Array.isArray(F) && F.length > 0) {
+			let e = F.filter((e) => !e.when || e.when(G));
+			if (e.length > 0) return /* @__PURE__ */ v("div", {
+				className: I ?? "grid gap-space-lg",
 				children: e.map((e) => {
 					let t = e.Component;
-					return /* @__PURE__ */ g("div", {
+					return /* @__PURE__ */ v("div", {
 						className: e.className,
-						children: /* @__PURE__ */ g(t, { context: B })
+						children: /* @__PURE__ */ v(t, { context: G })
 					}, e.id);
 				})
 			});
 		}
-		return /* @__PURE__ */ g(C, {
-			context: B,
-			strings: z
+		return /* @__PURE__ */ v(E, {
+			context: G,
+			strings: U
 		});
 	}, [
+		z,
+		V,
 		F,
-		L,
-		j,
-		M,
-		B,
-		z
-	]), re = f(() => R ? R(B) : I ? /* @__PURE__ */ g(I, { context: B }) : V ? /* @__PURE__ */ g(w, {
-		context: B,
-		strings: z
-	}) : /* @__PURE__ */ g(r, {
+		I,
+		G,
+		U
+	]), ue = m(() => H ? H(G) : B ? /* @__PURE__ */ v(B, { context: G }) : K ? /* @__PURE__ */ v(D, {
+		context: G,
+		strings: U
+	}) : /* @__PURE__ */ v(n, {
 		type: "secondary",
-		children: z.noResourceSelected
+		children: U.noResourceSelected
 	}), [
-		I,
-		V,
-		R,
 		B,
-		z
-	]), q = A?.DialogContentComponent, J = A?.DialogSummaryComponent, Y = A?.SelectorComponent, X = A?.selectorProps, ie = A?.dialogContentProps ?? {}, Z = B.hasResource, ae = Z ? ne : re, oe = !!(V && A && Y), Q = N !== void 0, $ = null;
-	Z && Q ? $ = N : Z && P && ($ = /* @__PURE__ */ g(o, {
-		href: P.href,
-		icon: v,
-		children: P.label
+		K,
+		H,
+		G,
+		U
+	]), de = P?.DialogContentComponent, fe = P?.DialogSummaryComponent, X = P?.SelectorComponent, pe = P?.selectorProps, me = P?.dialogContentProps ?? {}, Z = G.hasResource, Q = G.confirmError, he = Q == null ? void 0 : Q instanceof Error && Q.message ? Q.message : U.confirmErrorMessage ?? S.confirmErrorMessage, ge = Z ? le : ue, _e = !!(K && P && X), ve = L !== void 0, $ = null;
+	Z && ve ? $ = L : Z && R && ($ = /* @__PURE__ */ v(c, {
+		href: R.href,
+		icon: b,
+		children: R.label
 	}));
-	let se = $ === null || $ === !1 ? null : /* @__PURE__ */ g("div", {
-		className: t("shared-resource-card--view-action", !Q && P?.className),
+	let ye = $ === null || $ === !1 ? null : /* @__PURE__ */ v("div", {
+		className: t("shared-resource-card--view-action", !ve && R?.className),
 		children: $
-	}), ce = oe && A && Y ? /* @__PURE__ */ g(s, {
-		open: B.isSelectorOpen,
+	}), be = _e && P && X ? /* @__PURE__ */ v(l, {
+		open: G.isSelectorOpen,
 		onOpenChange: (e) => {
-			e || B.closeSelector();
+			e || G.closeSelector();
 		},
-		title: A.title,
-		description: A.description,
-		size: A.dialogSize ?? "2xl",
+		finalFocus: ie,
+		title: P.title,
+		description: P.description,
+		size: P.dialogSize ?? "2xl",
+		strings: { close: U.closeLabel },
+		tone: he ? "destructive" : "neutral",
+		alertMessage: he,
 		showCancel: !1,
 		showConfirm: !1,
-		footer: /* @__PURE__ */ _(a, {
+		footer: /* @__PURE__ */ y(o, {
 			direction: {
 				base: "vertical",
 				sm: "horizontal"
@@ -266,61 +297,62 @@ function E({ icon: i, title: l, description: u, className: d, contentClassName:
 			},
 			justify: "end",
 			className: "w-full",
-			children: [/* @__PURE__ */ g(n, {
+			children: [/* @__PURE__ */ v(a, {
 				tone: "secondary",
 				buttonStyle: "outline",
-				onClick: B.closeSelector,
-				disabled: B.isConfirming,
+				onClick: G.closeSelector,
+				disabled: G.isConfirming,
 				type: "button",
-				children: A.cancelText
-			}), /* @__PURE__ */ g(n, {
+				children: P.cancelText
+			}), /* @__PURE__ */ v(a, {
 				tone: "primary",
 				onClick: () => {
-					B.confirmSelection();
+					G.confirmSelection();
 				},
-				disabled: !B.canConfirmSelection || B.isConfirming,
-				loading: B.isConfirming,
+				disabled: !G.canConfirmSelection || G.isConfirming,
+				loading: G.isConfirming,
 				type: "button",
-				children: A.confirmText
+				children: P.confirmText
 			})]
 		}),
-		children: /* @__PURE__ */ _(a, {
+		children: /* @__PURE__ */ y(o, {
 			gap: "lg",
 			className: "shared-resource-card--dialog-body",
-			children: [q ? /* @__PURE__ */ g(q, {
-				SelectorComponent: Y,
-				selectorProps: X,
-				context: B,
-				...ie
-			}) : /* @__PURE__ */ g(T, {
-				SelectorComponent: Y,
-				selectorProps: X,
-				context: B
-			}), J ? /* @__PURE__ */ g(J, { context: B }) : /* @__PURE__ */ g(S, {
-				context: B,
-				strings: z,
-				getSelectionLabel: A.getSelectionLabel
+			children: [de ? /* @__PURE__ */ v(de, {
+				SelectorComponent: X,
+				selectorProps: pe,
+				context: G,
+				...me
+			}) : /* @__PURE__ */ v(O, {
+				SelectorComponent: X,
+				selectorProps: pe,
+				context: G
+			}), fe ? /* @__PURE__ */ v(fe, { context: G }) : /* @__PURE__ */ v(T, {
+				context: G,
+				strings: U,
+				getSelectionLabel: P.getSelectionLabel
 			})]
 		})
 	}) : null;
-	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _(c, {
-		icon: i,
-		title: l,
-		description: u,
+	return /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ y(s, {
+		ref: W,
+		tabIndex: -1,
 		"data-state": Z ? "selected" : "empty",
-		className: t("shared-resource-card--component", d),
+		...w(t("shared-resource-card--component outline-none", i.edge, g), x),
+		icon: r,
+		title: u,
+		description: f,
 		contentGap: "lg",
-		contentClassName: p,
-		alert: m,
-		alertTone: y,
-		actions: K,
-		headerAction: te,
-		footerText: O,
-		children: [ae, se]
-	}), ce] });
+		alert: k,
+		alertTone: A,
+		actions: se,
+		headerAction: ce,
+		footerSlot: ee,
+		children: [ge, ye]
+	}), be] });
 }
-E.displayName = "SharedResourceCard";
+k.displayName = "SharedResourceCard";
 //#endregion
-export { T as DefaultDialogContent, S as DefaultDialogSummary, w as DefaultEmptyContent, C as DefaultResourceContent, E as SharedResourceCard, b as defaultSharedResourceCardStrings, x as useSharedResourceCard };
+export { O as DefaultDialogContent, T as DefaultDialogSummary, D as DefaultEmptyContent, E as DefaultResourceContent, k as SharedResourceCard, S as defaultSharedResourceCardStrings, C as useSharedResourceCard };
 
 //# sourceMappingURL=resource-assignment.js.map