@declarion/react 0.65.1 → 0.66.1

package/dist-lib/components/filters/FilterDrawer.js

@@ -0,0 +1,670 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { Btn as n } from "../primitives/Btn.js";
+import { IconBtn as r } from "../primitives/IconBtn.js";
+import { useText as i } from "../../hooks/useText.js";
+import { useResponsiveMode as a } from "../../hooks/useResponsiveMode.js";
+import { MultiSelect as o, Select as s, TextInput as c } from "../primitives/Fields.js";
+import { RefCombobox as l } from "../fields/RefCombobox.js";
+import { MULTI_VALUE_OPS as u, NO_VALUE_OPS as d, flatFieldConditions as f, hasOrGroups as p, removeFilterAtPath as m } from "../../lib/filters.js";
+import { useJsonSnapshot as h } from "../../hooks/useJsonSnapshot.js";
+import { filterOpLabel as g } from "./filter-op-label.js";
+import { FilterConditionValue as _ } from "./FilterConditionValue.js";
+import { useEffect as v, useMemo as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/components/filters/FilterDrawer.tsx
+function w({ open: e, onClose: o, filters: s, onApply: c, availableFields: l, allFields: u = l, fieldLabel: d = (e) => e, resolveValue: g, defaultFilters: w, refs: T }) {
+	let D = i(), O = a().category === "phone", [k, A] = b(s), [j, R] = b(!1), [z, B, V] = h([
+		s,
+		w ?? [],
+		l.map(({ code: e, operators: t }) => ({
+			code: e,
+			operators: t
+		}))
+	]), H = y(() => z.length > 0 || !B?.length ? z : B.flatMap((e) => {
+		let t = V.find((t) => t.code === e);
+		return t ? [{
+			field: e,
+			op: t.operators[0] || "eq"
+		}] : [];
+	}), [
+		z,
+		B,
+		V
+	]);
+	if (v(() => {
+		e && A(H);
+	}, [e, H]), !e) return null;
+	let U = p(k), W = new Set(f(k).filter((e) => e.field).map((e) => e.field)), G = (e = k) => {
+		let t = new Set(f(e).map((e) => e.field).filter(Boolean)), n = l.find((e) => !t.has(e.code)) ?? l[0];
+		return n ? {
+			field: n.code,
+			op: n.operators[0] || "eq"
+		} : {};
+	}, K = (e) => {
+		let t = l.find((t) => t.code === e);
+		if (!t) return;
+		let n = t.operators[0] || "eq";
+		A((t) => [...t, {
+			field: e,
+			op: n
+		}]), R(!1);
+	}, q = () => {
+		let e = k.filter((e) => e.field && e.op), t = k.filter((e) => !e.field || !e.op), n = e.length === 1 ? e[0] : e.length > 1 ? { and: e } : {};
+		A([...t, { or: [n, {}] }]);
+	}, J = (e, t) => {
+		A((n) => F(n, e, (e) => ({
+			...e,
+			...t
+		})));
+	}, Y = (e, t) => {
+		A((n) => I(n, e, t));
+	}, X = (e) => {
+		A((t) => m(t, e));
+	}, Z = (e, t) => {
+		A((n) => F(n, e, (e) => e.or ? {
+			...e,
+			or: [...e.or, t]
+		} : e.and ? {
+			...e,
+			and: [...e.and, t]
+		} : e));
+	}, Q = (e, t) => {
+		let n = [...e, t], r = P(k, n);
+		if (!r) return;
+		let i = G();
+		r.and ? Z(n, i) : r.field || r.op || r.or ? Y(n, { and: [r, i] }) : Y(n, i);
+	}, $ = (e, n) => {
+		if (e.or || e.and) return /* @__PURE__ */ S(N, {
+			node: e,
+			renderNode: $,
+			onRemoveChild: X,
+			onAddCondition: (t) => {
+				e.or && t !== void 0 ? Q(n, t) : Z(n, G(e.or ?? e.and));
+			},
+			onAddBranch: () => Z(n, {}),
+			path: n
+		}, n.join("-"));
+		if (!e.field || !e.op) return /* @__PURE__ */ S("div", { style: { minHeight: 4 } }, n.join("-"));
+		let i = l.find((t) => t.code === e.field);
+		if (!i || !i.operators.includes(e.op)) {
+			let a = u.find((t) => t.code === e.field)?.label ?? d(e.field);
+			return /* @__PURE__ */ C("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 6,
+					minWidth: 0
+				},
+				children: [
+					/* @__PURE__ */ C("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 8,
+							minWidth: 0
+						},
+						children: [/* @__PURE__ */ S("strong", {
+							style: {
+								flex: 1,
+								overflowWrap: "anywhere"
+							},
+							children: a
+						}), /* @__PURE__ */ S(r, {
+							size: 22,
+							icon: /* @__PURE__ */ S(t.x, { size: 12 }),
+							onClick: () => X(n),
+							title: D("filter.drawer.remove_condition", "Remove {field} condition", { field: a })
+						})]
+					}),
+					/* @__PURE__ */ S("span", {
+						style: { overflowWrap: "anywhere" },
+						children: /* @__PURE__ */ S(_, {
+							node: e,
+							resolveValue: g
+						})
+					}),
+					/* @__PURE__ */ S("span", {
+						style: {
+							fontSize: 11,
+							color: "var(--text-3)"
+						},
+						children: i ? D("filter.drawer.operator_readonly", "This condition can't be edited here.") : D("filter.drawer.field_readonly", "This field can't be edited on this screen.")
+					})
+				]
+			}, n.join("-"));
+		}
+		return /* @__PURE__ */ S(M, {
+			node: e,
+			meta: i,
+			refs: T,
+			onUpdate: (e) => J(n, e),
+			onRemove: () => X(n)
+		}, n.join("-"));
+	};
+	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+		onClick: o,
+		style: {
+			position: "fixed",
+			inset: 0,
+			background: "var(--scrim-lite)",
+			zIndex: 40
+		}
+	}), /* @__PURE__ */ C("div", {
+		role: "dialog",
+		"aria-label": D("filter.drawer.title", "Filters"),
+		"aria-modal": "true",
+		"data-testid": "filter-drawer",
+		style: {
+			position: "fixed",
+			top: "calc(var(--topbar-h) + var(--safe-area-top))",
+			right: "var(--safe-area-right)",
+			width: "min(400px, calc(100vw - var(--safe-area-left) - var(--safe-area-right)))",
+			height: "calc(var(--app-height) - var(--topbar-h) - var(--safe-area-top) - var(--safe-area-bottom) - var(--tabbar-h))",
+			maxHeight: "calc(var(--app-height) - var(--topbar-h) - var(--safe-area-top) - var(--safe-area-bottom) - var(--tabbar-h))",
+			background: "var(--surface)",
+			borderLeft: "1px solid var(--border)",
+			boxShadow: "var(--shadow-lg)",
+			zIndex: 50,
+			display: "flex",
+			flexDirection: "column",
+			boxSizing: "border-box",
+			minWidth: 0,
+			overflow: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ C("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					padding: "10px 14px",
+					borderBottom: "1px solid var(--divider)"
+				},
+				children: [/* @__PURE__ */ C("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 8
+					},
+					children: [/* @__PURE__ */ S(t.filter, { size: 14 }), /* @__PURE__ */ S("h3", {
+						style: {
+							margin: 0,
+							fontSize: 13,
+							fontWeight: 600,
+							color: "var(--text)"
+						},
+						children: D("filter.drawer.title", "Filters")
+					})]
+				}), /* @__PURE__ */ S(r, {
+					icon: /* @__PURE__ */ S(t.x, { size: 14 }),
+					onClick: o,
+					title: D("filter.drawer.close", "Close")
+				})]
+			}),
+			/* @__PURE__ */ C("div", {
+				style: {
+					flex: 1,
+					overflowY: "auto",
+					padding: 14,
+					display: "flex",
+					flexDirection: "column",
+					gap: 10,
+					minWidth: 0,
+					minHeight: 0
+				},
+				children: [k.map((e, t) => $(e, [t])), /* @__PURE__ */ S("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 6,
+						paddingTop: 6
+					},
+					children: j ? /* @__PURE__ */ S(L, {
+						fields: l,
+						activeFields: W,
+						compact: O,
+						onSelect: K,
+						onCancel: () => R(!1)
+					}) : /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(n, {
+						icon: /* @__PURE__ */ S(t.plus, { size: 12 }),
+						onClick: () => R(!0),
+						children: D("filter.drawer.add_filter", "Add filter")
+					}), !U && f(k).length > 0 && /* @__PURE__ */ S(n, {
+						kind: "ghost",
+						icon: /* @__PURE__ */ S(t.plus, { size: 12 }),
+						onClick: q,
+						children: D("filter.drawer.add_or_group", "Add OR group")
+					})] })
+				})]
+			}),
+			/* @__PURE__ */ C("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					padding: "10px 14px",
+					borderTop: "1px solid var(--divider)",
+					background: "var(--surface-2)",
+					gap: 6,
+					flexWrap: "wrap",
+					minWidth: 0,
+					paddingBottom: "calc(10px + var(--safe-area-bottom))"
+				},
+				children: [
+					/* @__PURE__ */ S(n, {
+						kind: "ghost",
+						onClick: () => {
+							A([]);
+						},
+						children: D("filter.drawer.reset", "Reset")
+					}),
+					/* @__PURE__ */ S("div", { style: { flex: 1 } }),
+					/* @__PURE__ */ S(n, {
+						onClick: o,
+						children: D("dialog.cancel", "Cancel")
+					}),
+					/* @__PURE__ */ S(n, {
+						kind: "primary",
+						onClick: () => {
+							c(E(k, (e) => {
+								let t = l.find((t) => t.code === e.field);
+								return !!t && !!e.op && t.operators.includes(e.op);
+							})), o();
+						},
+						children: D("filter.drawer.apply", "Apply")
+					})
+				]
+			})
+		]
+	})] });
+}
+function T(e) {
+	return e == null || e === "" ? !1 : !Array.isArray(e) || e.length > 0;
+}
+function E(e, t) {
+	let n = [];
+	for (let r of e) if (r.or) {
+		let e = E(r.or, t);
+		e.length > 0 && n.push({
+			...r,
+			or: e
+		});
+	} else if (r.and) {
+		let e = E(r.and, t);
+		e.length > 0 && n.push({
+			...r,
+			and: e
+		});
+	} else r.field && r.op && (!t(r) || d.has(r.op) || T(r.value)) && n.push(r);
+	return n;
+}
+function D(e, t) {
+	return !t || t.length === 0 ? [] : [
+		{
+			value: "",
+			label: e("filter.value.special", "Special values"),
+			heading: !0
+		},
+		...t.map((t) => ({
+			value: t.code,
+			label: e(t.label) || t.code
+		})),
+		{
+			value: "",
+			label: "",
+			divider: !0
+		}
+	];
+}
+var O = "__custom__";
+function k({ meta: t, value: n, onUpdate: r }) {
+	let a = i(), o = t.specialValues ?? [], l = e(n), u = o.some((e) => e.code === l), [d, f] = b(!u && l !== "");
+	return d ? /* @__PURE__ */ S(c, {
+		"aria-label": a("filter.value.aria", "{field} filter value", { field: t.label }),
+		value: l,
+		onChange: (e) => r({ value: e }),
+		placeholder: a("filter.value.placeholder", "Value…"),
+		autoFocus: !0
+	}) : /* @__PURE__ */ S(s, {
+		"aria-label": a("filter.value.aria", "{field} filter value", { field: t.label }),
+		value: l,
+		options: [
+			{
+				value: "",
+				label: a("filter.value.select", "Select…")
+			},
+			...D(a, o),
+			{
+				value: O,
+				label: a("filter.value.custom", "Custom value…")
+			}
+		],
+		onChange: (e) => {
+			e === O ? (f(!0), r({ value: "" })) : r({ value: e });
+		}
+	});
+}
+function A(t) {
+	return Array.isArray(t) ? t.map((t) => e(t)) : t == null || t === "" ? [] : [e(t)];
+}
+function j(t) {
+	return Array.isArray(t) ? t.length > 0 ? e(t[0]) : "" : e(t);
+}
+function M({ node: n, meta: a, refs: f, onUpdate: p, onRemove: m }) {
+	let h = i(), _ = d.has(n.op), v = u.has(n.op), y = a.operators.map((e) => ({
+		value: e,
+		label: g(h, e)
+	})), b = h("filter.value.aria", "{field} filter value", { field: a.label }), x = (e) => {
+		let t = u.has(n.op), r = u.has(e);
+		p(r === t ? { op: e } : {
+			op: e,
+			value: r ? A(n.value) : j(n.value)
+		});
+	};
+	return /* @__PURE__ */ C("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6,
+			minWidth: 0
+		},
+		children: [/* @__PURE__ */ C("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ S("span", {
+				style: {
+					flex: 1,
+					fontSize: 12.5,
+					fontWeight: 600,
+					color: "var(--text)",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					minWidth: 0
+				},
+				title: a.label,
+				children: a.label
+			}), /* @__PURE__ */ S(r, {
+				size: 22,
+				icon: /* @__PURE__ */ S(t.x, { size: 12 }),
+				onClick: m,
+				title: h("filter.drawer.remove", "Remove")
+			})]
+		}), /* @__PURE__ */ C("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: _ ? "minmax(0, 1fr)" : "minmax(112px, 152px) minmax(0, 1fr)",
+				gap: 6,
+				alignItems: "start",
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ S(s, {
+				"aria-label": h("filter.operator.aria", "{field} filter operator", { field: a.label }),
+				value: n.op ?? y[0]?.value,
+				options: y,
+				onChange: (e) => x(e)
+			}), _ ? null : v && a.options ? /* @__PURE__ */ S(o, {
+				"aria-label": b,
+				value: A(n.value),
+				options: [...D(h, a.specialValues), ...a.options.map((e) => ({
+					value: e.value,
+					label: e.label
+				}))],
+				onChange: (e) => p({ value: e }),
+				placeholder: h("filter.value.select", "Select…")
+			}) : a.type === "ref" && a.ref?.entity ? /* @__PURE__ */ S(l, {
+				ref: a.ref,
+				value: n.value,
+				onChange: (e) => p({ value: e ?? "" }),
+				refs: f,
+				ariaLabel: b,
+				placeholder: h("filter.value.select", "Select…"),
+				specialValues: a.specialValues
+			}) : a.options ? /* @__PURE__ */ S(s, {
+				"aria-label": b,
+				value: e(n.value),
+				options: [...D(h, a.specialValues), ...a.options.map((e) => ({
+					value: e.value,
+					label: e.label
+				}))],
+				onChange: (e) => p({ value: e }),
+				placeholder: h("filter.value.select", "Select…")
+			}) : a.specialValues && a.specialValues.length > 0 ? /* @__PURE__ */ S(k, {
+				meta: a,
+				value: n.value,
+				onUpdate: p
+			}) : /* @__PURE__ */ S(c, {
+				"aria-label": b,
+				value: e(n.value),
+				onChange: (e) => p({ value: e }),
+				placeholder: h("filter.value.placeholder", "Value…")
+			})]
+		})]
+	});
+}
+function N({ node: e, renderNode: a, onRemoveChild: o, onAddCondition: s, onAddBranch: c, path: l }) {
+	let u = i(), d = e.or ?? e.and ?? [], f = e.or !== void 0;
+	return /* @__PURE__ */ C("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		},
+		children: [
+			d.map((e, i) => {
+				let c = [...l, i], d = f && e.and ? e.and : [e];
+				return /* @__PURE__ */ C("div", { children: [f && i > 0 && /* @__PURE__ */ C("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 8,
+						padding: "4px 0"
+					},
+					children: [
+						/* @__PURE__ */ S("div", { style: {
+							flex: 1,
+							borderTop: "1px solid var(--divider)"
+						} }),
+						/* @__PURE__ */ S("span", {
+							style: {
+								fontSize: 11,
+								fontWeight: 600,
+								color: "var(--text-3)",
+								padding: "0 6px"
+							},
+							children: u("filter.join.or", "OR")
+						}),
+						/* @__PURE__ */ S("div", { style: {
+							flex: 1,
+							borderTop: "1px solid var(--divider)"
+						} })
+					]
+				}), /* @__PURE__ */ C("div", {
+					style: {
+						border: "1px solid var(--border)",
+						borderRadius: "var(--radius-md)",
+						padding: 10,
+						display: "flex",
+						flexDirection: "column",
+						gap: 8
+					},
+					children: [
+						f && /* @__PURE__ */ S("div", {
+							style: {
+								fontSize: 10.5,
+								fontWeight: 600,
+								color: "var(--text-3)",
+								textTransform: "uppercase",
+								letterSpacing: "0.08em"
+							},
+							children: u("filter.group.match_all", "Match ALL")
+						}),
+						d.map((t, n) => a(t, f && e.and ? [...c, n] : c)),
+						f && /* @__PURE__ */ S(n, {
+							kind: "ghost",
+							size: "xs",
+							icon: /* @__PURE__ */ S(t.plus, { size: 11 }),
+							onClick: () => s(i),
+							children: u("filter.group.add_condition", "Add condition")
+						}),
+						f && /* @__PURE__ */ S(r, {
+							size: 22,
+							icon: /* @__PURE__ */ S(t.x, { size: 12 }),
+							onClick: () => o(c),
+							title: u("filter.group.remove_alternative", "Remove OR alternative")
+						})
+					]
+				})] }, i);
+			}),
+			!f && /* @__PURE__ */ S(n, {
+				kind: "ghost",
+				size: "xs",
+				icon: /* @__PURE__ */ S(t.plus, { size: 11 }),
+				onClick: () => s(),
+				children: u("filter.group.add_condition", "Add condition")
+			}),
+			f && /* @__PURE__ */ S(n, {
+				kind: "ghost",
+				size: "xs",
+				icon: /* @__PURE__ */ S(t.plus, { size: 11 }),
+				onClick: c,
+				children: u("filter.drawer.add_or_group", "Add OR group")
+			})
+		]
+	});
+}
+function P(e, t) {
+	let n = e, r;
+	for (let e = 0; e < t.length; e += 1) {
+		let i = t[e];
+		if (r = n[i], !r) return;
+		e < t.length - 1 && (n = r.or ?? r.and ?? []);
+	}
+	return r;
+}
+function F(e, t, n) {
+	if (t.length === 0) return e;
+	let [r, ...i] = t;
+	return e.map((e, t) => {
+		if (t !== r) return e;
+		if (i.length === 0) return n(e);
+		let a = e.or ? "or" : "and", o = e.or ?? e.and;
+		if (!o) return e;
+		let s = F(o, i, n);
+		return a === "or" ? {
+			...e,
+			or: s
+		} : {
+			...e,
+			and: s
+		};
+	});
+}
+function I(e, t, n) {
+	if (t.length === 0) return e;
+	let [r, ...i] = t;
+	return e.map((e, t) => {
+		if (t !== r) return e;
+		if (i.length === 0) return n;
+		let a = e.or ?? e.and;
+		if (!a) return e;
+		let o = I(a, i, n);
+		return e.or ? {
+			...e,
+			or: o
+		} : {
+			...e,
+			and: o
+		};
+	});
+}
+function L({ fields: e, activeFields: r, compact: a, onSelect: o, onCancel: s }) {
+	let l = i(), [u, d] = b(""), f = e.filter((e) => !r.has(e.code) && (u === "" || e.label.toLowerCase().includes(u.toLowerCase()) || e.code.toLowerCase().includes(u.toLowerCase())));
+	return /* @__PURE__ */ C("div", {
+		style: {
+			width: "100%",
+			border: "1px solid var(--border)",
+			borderRadius: "var(--radius-md)",
+			padding: 8,
+			display: "flex",
+			flexDirection: "column",
+			gap: 6,
+			minWidth: 0,
+			boxSizing: "border-box"
+		},
+		children: [
+			/* @__PURE__ */ S(c, {
+				value: u,
+				onChange: d,
+				placeholder: l("filter.fields.search", "Search fields…"),
+				prefix: /* @__PURE__ */ S(t.search, { size: 12 }),
+				autoFocus: !0
+			}),
+			/* @__PURE__ */ C("div", {
+				style: {
+					maxHeight: 200,
+					overflow: "auto",
+					display: "flex",
+					flexDirection: "column"
+				},
+				children: [f.map((e) => /* @__PURE__ */ C("button", {
+					"data-testid": `filter-field-${e.code}`,
+					onClick: () => o(e.code),
+					style: {
+						textAlign: "left",
+						padding: "6px 8px",
+						fontSize: 12,
+						background: "transparent",
+						border: 0,
+						color: "var(--text-2)",
+						cursor: "pointer",
+						borderRadius: "var(--radius-sm)",
+						display: "flex",
+						justifyContent: "space-between",
+						gap: 8,
+						minWidth: 0
+					},
+					onMouseEnter: (e) => e.currentTarget.style.background = "var(--surface-3)",
+					onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
+					children: [/* @__PURE__ */ S("span", {
+						style: {
+							minWidth: 0,
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: e.label
+					}), /* @__PURE__ */ S("span", {
+						className: "mono",
+						style: {
+							color: "var(--text-4)",
+							fontSize: 10.5,
+							display: a ? "none" : void 0
+						},
+						children: e.code
+					})]
+				}, e.code)), f.length === 0 && /* @__PURE__ */ S("div", {
+					style: {
+						fontSize: 12,
+						color: "var(--text-3)",
+						padding: "6px 8px"
+					},
+					children: l("filter.fields.none", "No fields available")
+				})]
+			}),
+			/* @__PURE__ */ S(n, {
+				kind: "ghost",
+				size: "xs",
+				onClick: s,
+				style: { justifyContent: "center" },
+				children: l("dialog.cancel", "Cancel")
+			})
+		]
+	});
+}
+//#endregion
+export { w as FilterDrawer };

package/dist-lib/components/filters/FilterOmittedNotice.js

@@ -0,0 +1,14 @@
+import { useText as e } from "../../hooks/useText.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/filters/FilterOmittedNotice.tsx
+function n({ className: n }) {
+	let r = e()("filter.omitted_notice", "Some filter conditions could not be applied.");
+	return /* @__PURE__ */ t("div", {
+		role: "status",
+		"aria-label": r,
+		className: `text-muted-foreground text-xs wrap-anywhere ${n ?? ""}`,
+		children: r
+	});
+}
+//#endregion
+export { n as FilterOmittedNotice };

package/dist-lib/components/filters/filter-op-label.js

@@ -0,0 +1,8 @@
+import { OP_LABELS as e } from "../../lib/filters.js";
+//#region src/components/filters/filter-op-label.ts
+function t(t, n) {
+	let r = e[n];
+	return r ? t(`filter.op.${n}`, r) : n;
+}
+//#endregion
+export { t as filterOpLabel };