@declarion/react 0.81.0 → 0.82.0

package/dist-lib/components/list/QuickPeek.js

@@ -9,51 +9,53 @@ import { applyRowState as s, defaultFlatForSlot as c, filterLayoutForSlot as l }
 import { useActionRunner as u } from "../actions/ActionRunner.js";
 import { renderSchemaField as d } from "../file-widgets/host.js";
 import { ResponsiveActionBar as f } from "../actions/ResponsiveActionBar.js";
-import { effectiveScreenForRecord as p, variantActionCodesForRecord as m } from "../../lib/variants.js";
-import { PeekFieldCell as h } from "./PeekFieldCell.js";
-import { useUnsavedInput as g } from "../../hooks/useUnsavedInput.js";
-import { useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useRowTenant as p } from "../../hooks/useRowTenant.js";
+import { effectiveScreenForRecord as m, variantActionCodesForRecord as h } from "../../lib/variants.js";
+import { PeekFieldCell as g } from "./PeekFieldCell.js";
+import { useUnsavedInput as _ } from "../../hooks/useUnsavedInput.js";
+import { useEffect as v, useMemo as y, useRef as b, useState as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/list/QuickPeek.tsx
-var w = {
+var T = {
 	tab: "Tab",
 	esc: "Esc"
 };
-function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarName: j, fields: M, refs: N, screen: P, actions: F, screenActionLayout: I, entityActionLayout: L, executeAction: R, onClose: z, onOpen: B, onSave: V }) {
-	let H = o(), [U, W] = b({ ...O }), [G, K] = b(!1);
-	g(G);
-	let q = y(null), { run: J } = u(), Y = p(T, P, U);
-	_(() => {
-		W({ ...O }), K(!1);
-	}, [O]), _(() => {
-		q.current?.focus();
+function E({ entity: E, entityCode: O, record: k, title: A, recordId: j, avatarName: ee, fields: M, refs: N, screen: P, actions: F, screenActionLayout: I, entityActionLayout: L, executeAction: R, onClose: z, onOpen: B, onSave: V }) {
+	let H = o(), U = p(E), [W, G] = x({ ...k }), [K, q] = x(!1);
+	_(K);
+	let J = b(null), { run: Y } = u(), X = m(E, P, W);
+	v(() => {
+		G({ ...k }), q(!1);
+	}, [k]), v(() => {
+		J.current?.focus();
 	}, []);
-	let X = v(() => {
-		let e = Y?.action_layout ?? I ?? L ?? c(F, "quick_peek"), t = l(e, F, void 0, "quick_peek");
-		return s(H, t, F, void 0, U, [], m(T, U));
+	let Z = y(() => {
+		let e = X?.action_layout ?? I ?? L ?? c(F, "quick_peek"), t = l(e, F, void 0, "quick_peek");
+		return s(H, t, F, void 0, W, [], U, h(E, W));
 	}, [
 		H,
-		Y?.action_layout,
+		X?.action_layout,
 		I,
 		L,
 		F,
-		U,
-		T
-	]), Z = ({ code: e, action: t }) => {
-		J({
+		W,
+		E,
+		U
+	]), Q = ({ code: e, action: t }) => {
+		Y({
 			action: t,
 			title: H(t.display?.name) || e,
-			row: U,
+			row: W,
 			execute: (n) => R(e, t, n)
 		});
-	}, Q = (e, t) => {
+	}, $ = (e, t) => {
 		let n = {
-			...U,
+			...W,
 			[e]: t
 		};
-		W(n), K(!0), V?.(n);
-	}, $ = Y?.quick_peek?.width ?? 480;
-	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+		G(n), q(!0), V?.(n);
+	}, te = X?.quick_peek?.width ?? 480;
+	return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("div", {
 		onClick: z,
 		style: {
 			position: "fixed",
@@ -61,8 +63,8 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 			background: "var(--scrim-lite)",
 			zIndex: 40
 		}
-	}), /* @__PURE__ */ C("aside", {
-		ref: q,
+	}), /* @__PURE__ */ w("aside", {
+		ref: J,
 		role: "dialog",
 		"aria-label": H("list.peek.dialog", "Quick peek"),
 		tabIndex: -1,
@@ -74,7 +76,7 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 			top: "var(--topbar-h)",
 			right: 0,
 			bottom: "var(--tabbar-h)",
-			width: $,
+			width: te,
 			background: "var(--surface)",
 			borderLeft: "1px solid var(--border)",
 			zIndex: 41,
@@ -83,7 +85,7 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 			boxShadow: "var(--shadow-lg)"
 		},
 		children: [
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
 				style: {
 					display: "flex",
 					alignItems: "center",
@@ -92,16 +94,16 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 					gap: 10
 				},
 				children: [
-					/* @__PURE__ */ S(a, {
-						name: j || k,
+					/* @__PURE__ */ C(a, {
+						name: ee || A,
 						size: 28
 					}),
-					/* @__PURE__ */ C("div", {
+					/* @__PURE__ */ w("div", {
 						style: {
 							flex: 1,
 							minWidth: 0
 						},
-						children: [/* @__PURE__ */ S("div", {
+						children: [/* @__PURE__ */ C("div", {
 							style: {
 								fontSize: 14,
 								fontWeight: 600,
@@ -110,29 +112,29 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 								textOverflow: "ellipsis",
 								whiteSpace: "nowrap"
 							},
-							children: k
-						}), A && /* @__PURE__ */ S("div", {
+							children: A
+						}), j && /* @__PURE__ */ C("div", {
 							className: "mono",
 							style: {
 								fontSize: 11,
 								color: "var(--text-4)"
 							},
-							children: A
+							children: j
 						})]
 					}),
-					/* @__PURE__ */ S(r, {
-						icon: /* @__PURE__ */ S(t.external, { size: 13 }),
-						title: G ? H("list.peek.open_in_tab_dirty", "Open in tab (keeps unsaved changes)") : H("list.peek.open_in_tab", "Open in tab"),
-						onClick: () => B(G ? U : null)
+					/* @__PURE__ */ C(r, {
+						icon: /* @__PURE__ */ C(t.external, { size: 13 }),
+						title: K ? H("list.peek.open_in_tab_dirty", "Open in tab (keeps unsaved changes)") : H("list.peek.open_in_tab", "Open in tab"),
+						onClick: () => B(K ? W : null)
 					}),
-					/* @__PURE__ */ S(r, {
-						icon: /* @__PURE__ */ S(t.x, { size: 14 }),
+					/* @__PURE__ */ C(r, {
+						icon: /* @__PURE__ */ C(t.x, { size: 14 }),
 						title: H("list.peek.close", "Close"),
 						onClick: z
 					})
 				]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
 				style: {
 					flex: 1,
 					overflowY: "auto",
@@ -141,7 +143,7 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 					flexDirection: "column",
 					gap: 10
 				},
-				children: [/* @__PURE__ */ C("div", {
+				children: [/* @__PURE__ */ w("div", {
 					style: {
 						padding: "8px 10px",
 						background: "var(--accent-soft)",
@@ -153,39 +155,39 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 						gap: 6
 					},
 					children: [
-						/* @__PURE__ */ S(t.sparkle, { size: 12 }),
+						/* @__PURE__ */ C(t.sparkle, { size: 12 }),
 						" ",
 						H("list.peek.hint", "Inline quick-edit — click any field to change."),
 						e(H("list.peek.keys_hint", "{tab} to move, {esc} to close."), {
-							tab: /* @__PURE__ */ S(i, { children: w.tab }),
-							esc: /* @__PURE__ */ S(i, { children: w.esc })
+							tab: /* @__PURE__ */ C(i, { children: T.tab }),
+							esc: /* @__PURE__ */ C(i, { children: T.esc })
 						})
 					]
-				}), M.map((e) => /* @__PURE__ */ S(E, {
+				}), M.map((e) => /* @__PURE__ */ C(D, {
 					label: e.label,
 					children: e.kind === "file" ? d({
-						entity: T,
-						entityCode: D,
+						entity: E,
+						entityCode: O,
 						fieldName: e.key,
-						record: U,
+						record: W,
 						mode: e.readOnly ? "display" : "edit",
-						onChange: (t) => Q(e.key, t),
+						onChange: (t) => $(e.key, t),
 						refs: N,
 						disabled: e.readOnly,
 						t: H
-					}) : /* @__PURE__ */ S(h, {
+					}) : /* @__PURE__ */ C(g, {
 						field: e.field,
 						fieldName: e.key,
 						label: e.label,
-						value: U[e.key],
-						record: U,
+						value: W[e.key],
+						record: W,
 						refs: N,
 						readOnly: e.readOnly,
-						onCommit: (t) => Q(e.key, t)
+						onCommit: (t) => $(e.key, t)
 					})
 				}, e.key))]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ w("div", {
 				style: {
 					display: "flex",
 					padding: "10px 14px",
@@ -194,7 +196,7 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 					alignItems: "center"
 				},
 				children: [
-					G && /* @__PURE__ */ C("span", {
+					K && /* @__PURE__ */ w("span", {
 						style: {
 							fontSize: 11,
 							color: "var(--warn)",
@@ -202,24 +204,24 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 							alignItems: "center",
 							gap: 4
 						},
-						children: [/* @__PURE__ */ S("span", { style: {
+						children: [/* @__PURE__ */ C("span", { style: {
 							width: 6,
 							height: 6,
 							borderRadius: 999,
 							background: "var(--warn)"
 						} }), H("list.peek.unsaved", "Unsaved")]
 					}),
-					/* @__PURE__ */ S("div", {
+					/* @__PURE__ */ C("div", {
 						style: {
 							flex: 1,
 							minWidth: 0,
 							display: "flex",
 							justifyContent: "flex-end"
 						},
-						children: X.length > 0 && /* @__PURE__ */ S(f, {
-							layout: X,
-							row: U,
-							onRun: (e, t) => Z({
+						children: Z.length > 0 && /* @__PURE__ */ C(f, {
+							layout: Z,
+							row: W,
+							onRun: (e, t) => Q({
 								code: e,
 								action: t
 							}),
@@ -229,10 +231,10 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 							ariaLabel: H("list.peek.actions", "Quick peek actions")
 						})
 					}),
-					/* @__PURE__ */ S(n, {
+					/* @__PURE__ */ C(n, {
 						kind: "primary",
-						icon: /* @__PURE__ */ S(t.edit, { size: 13 }),
-						onClick: () => B(G ? U : null),
+						icon: /* @__PURE__ */ C(t.edit, { size: 13 }),
+						onClick: () => B(K ? W : null),
 						children: H("list.peek.open_full", "Open full")
 					})
 				]
@@ -240,8 +242,8 @@ function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarN
 		]
 	})] });
 }
-function E({ label: e, children: t }) {
-	return /* @__PURE__ */ C("div", {
+function D({ label: e, children: t }) {
+	return /* @__PURE__ */ w("div", {
 		style: {
 			display: "grid",
 			gridTemplateColumns: "120px 1fr",
@@ -249,15 +251,15 @@ function E({ label: e, children: t }) {
 			padding: "4px 0",
 			borderBottom: "1px solid var(--divider)"
 		},
-		children: [/* @__PURE__ */ S("div", {
+		children: [/* @__PURE__ */ C("div", {
 			style: {
 				fontSize: 11.5,
 				color: "var(--text-3)",
 				fontWeight: 500
 			},
 			children: e
-		}), /* @__PURE__ */ S("div", { children: t })]
+		}), /* @__PURE__ */ C("div", { children: t })]
 	});
 }
 //#endregion
-export { E as QEField, T as QuickPeek };
+export { D as QEField, E as QuickPeek };