@declarion/react 0.48.2 → 0.49.0

package/dist-lib/RefreshControl-B_2eW53M.js

@@ -0,0 +1,430 @@
+import { s as e } from "./DynamicIcon-Dc2j-rg_.js";
+import { $n as t, dr as n, ir as r, pt as i, rr as a, ur as o } from "./useCurrentScreen-C5Oio-1G.js";
+import { A as s, B as c, C as l } from "./field-classification-DTgUnbzd.js";
+import { useCallback as u, useEffect as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
+import { useLocation as g } from "react-router";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { createPortal as b } from "react-dom";
+//#region src/components/primitives/Avatar.tsx
+function x({ name: e, size: t = 22, color: n }) {
+	let r = e.split(/\s+/).map((e) => e[0]).slice(0, 2).join("").toUpperCase(), i = e.split("").reduce((e, t) => e + t.charCodeAt(0), 0), a = [
+		"#DCE4F6",
+		"#E4DCF6",
+		"#F6DCE4",
+		"#F6E4DC",
+		"#DCF6E4",
+		"#DCF6F1",
+		"#F1F6DC",
+		"#F6DCF1"
+	], o = n || a[i % a.length];
+	return /* @__PURE__ */ v("span", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: t,
+			height: t,
+			borderRadius: 999,
+			background: o,
+			color: "#1E2A4A",
+			fontSize: t < 20 ? 9.5 : 10.5,
+			fontWeight: 600,
+			flexShrink: 0
+		},
+		children: r
+	});
+}
+//#endregion
+//#region src/components/primitives/Tooltip.tsx
+var ee = 350, S = 80, C = 260, w = 6, T = 4;
+function E(e, t) {
+	let [n, r] = h(!1), [i, a] = h(null), o = m(null), s = m(null), c = m(null), l = f(), p = u(() => {
+		s.current && clearTimeout(s.current), c.current && clearTimeout(c.current), s.current = null, c.current = null;
+	}, []), g = u(() => {
+		let t = e.current;
+		if (!t) return;
+		let n = t.getBoundingClientRect(), r = o.current, i = r?.offsetWidth ?? C, s = r?.offsetHeight ?? 0, c = n.left + n.width / 2 - i / 2;
+		c = Math.max(T, Math.min(c, window.innerWidth - i - T));
+		let l = n.top - w - s < T ? n.bottom + w : n.top - w - s;
+		a({
+			left: c,
+			top: l
+		});
+	}, [e]), _ = u((e) => {
+		t && (p(), e ? r(!0) : s.current = setTimeout(() => r(!0), ee));
+	}, [p, t]), y = u(() => {
+		p(), c.current = setTimeout(() => r(!1), S);
+	}, [p]);
+	d(() => {
+		if (!n) {
+			a(null);
+			return;
+		}
+		g();
+		let e = () => g();
+		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+		};
+	}, [n, g]), d(() => p, [p]), d(() => {
+		if (!n) return;
+		let t = (t) => {
+			let n = e.current;
+			n && t.target instanceof Node && n.contains(t.target) || r(!1);
+		};
+		return document.addEventListener("pointerdown", t, !0), () => document.removeEventListener("pointerdown", t, !0);
+	}, [n, e]);
+	let x = {
+		position: "fixed",
+		left: i?.left ?? 0,
+		top: i?.top ?? 0,
+		zIndex: 1e3,
+		maxWidth: C,
+		padding: "5px 8px",
+		borderRadius: 6,
+		background: "var(--surface-inverse, #1f2430)",
+		color: "var(--text-inverse, #f5f6f8)",
+		fontSize: 12,
+		lineHeight: 1.4,
+		boxShadow: "0 4px 14px rgba(0,0,0,0.18)",
+		pointerEvents: "none",
+		visibility: i ? "visible" : "hidden",
+		whiteSpace: "normal"
+	}, E = n && t ? b(/* @__PURE__ */ v("div", {
+		ref: o,
+		id: l,
+		role: "tooltip",
+		style: x,
+		children: t
+	}), document.body) : null;
+	return {
+		open: n,
+		triggerHandlers: {
+			onMouseEnter: () => _(!1),
+			onMouseLeave: y,
+			onFocus: () => _(!0),
+			onBlur: y,
+			onPointerUp: (e) => {
+				e.pointerType === "mouse" || !t || (p(), r((e) => !e));
+			}
+		},
+		describedBy: n && t ? l : void 0,
+		portal: E
+	};
+}
+function D({ content: e, children: t, triggerProps: n }) {
+	let r = m(null), { triggerHandlers: i, describedBy: a, portal: o } = E(r, e);
+	return e ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("span", {
+		...n,
+		ref: r,
+		"aria-describedby": a,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			...n?.style ?? {}
+		},
+		...i,
+		children: t
+	}), o] }) : /* @__PURE__ */ v(_, { children: t });
+}
+function O({ label: t, size: n = 14, ...r }) {
+	return /* @__PURE__ */ v(D, {
+		content: t,
+		children: /* @__PURE__ */ v("span", {
+			tabIndex: 0,
+			role: "note",
+			"aria-label": t,
+			"data-testid": r["data-testid"],
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				color: "var(--text-3)",
+				cursor: "help"
+			},
+			children: /* @__PURE__ */ v(e.info, { size: n })
+		})
+	});
+}
+//#endregion
+//#region src/lib/branding.ts
+var k = "branding";
+function A(e, t) {
+	return e?.parameters.find((e) => e.code === t)?.value;
+}
+function j(e) {
+	return M(A(e, k));
+}
+function M(e) {
+	if (P(e)) return e;
+}
+function N(e) {
+	let t = j(e)?.identity;
+	return P(t) ? t : void 0;
+}
+function P(e) {
+	return !!e && typeof e == "object" && !Array.isArray(e);
+}
+function F(e) {
+	if (!e) return !1;
+	let t = e.trim();
+	return t ? t.startsWith("/") || t.startsWith("http://") || t.startsWith("https://") || t.startsWith("data:image/") : !1;
+}
+//#endregion
+//#region src/hooks/useBranding.ts
+function I() {
+	let e = c(k);
+	return {
+		branding: M(e.value),
+		isLoading: e.loading
+	};
+}
+function L() {
+	return I().branding?.identity;
+}
+function R() {
+	return I().branding?.chrome;
+}
+//#endregion
+//#region src/hooks/useBrandingChrome.ts
+function z() {
+	let e = i(), t = R();
+	return (e.enabled ? t?.embed?.viewport : t?.full?.viewport) ?? "auto";
+}
+function B(e, t) {
+	return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : t;
+}
+function V() {
+	let e = i(), t = R(), n = e.enabled ? t?.embed?.breakpoints : t?.full?.breakpoints, r = n?.phone_max, a = n?.tablet_max, o = n?.landscape_phone_max_height;
+	return p(() => H({
+		phone_max: r,
+		tablet_max: a,
+		landscape_phone_max_height: o
+	}), [
+		r,
+		a,
+		o
+	]);
+}
+function H(e) {
+	let t = B(e?.phone_max, r.phoneMax), n = B(e?.tablet_max, r.tabletMax), i = t < n;
+	return i || console.error(`branding.chrome breakpoints: phone_max (${t}) must be below tablet_max (${n}), or no viewport can ever resolve to the tablet class. Both bounds fall back to the SDK defaults.`), {
+		phoneMax: i ? t : r.phoneMax,
+		tabletMax: i ? n : r.tabletMax,
+		landscapePhoneMaxHeight: B(e?.landscape_phone_max_height, r.landscapePhoneMaxHeight)
+	};
+}
+function U(e) {
+	let t = i(), n = R();
+	return p(() => {
+		let r = { ...t.enabled ? n?.embed?.surfaces?.[e] : n?.full?.surfaces?.[e] };
+		return {
+			...r,
+			isVisible: (e) => r[e] !== !1
+		};
+	}, [
+		n,
+		t.enabled,
+		e
+	]);
+}
+function W() {
+	let e = R();
+	return p(() => {
+		let t = { ...e?.full?.shell };
+		return {
+			...t,
+			isVisible: (e) => t[e] !== !1
+		};
+	}, [e]);
+}
+//#endregion
+//#region src/lib/scroll-restoration.ts
+var G = "scroll", K = 120, q = 24, J = 600;
+function Y(e, t) {
+	return Number.isFinite(e) ? Math.max(0, Math.min(e, Number.isFinite(t) && t > 0 ? t : 0)) : 0;
+}
+function X(e, t, n) {
+	let r = Number.isFinite(e) ? e : 0;
+	if (t) {
+		let e = n[t.index];
+		if (e !== void 0) return {
+			key: e,
+			delta: Math.max(0, r - t.start),
+			offset: r
+		};
+	}
+	return {
+		key: "",
+		delta: 0,
+		offset: r
+	};
+}
+function Z(e, t, n, r) {
+	if (!e) return null;
+	if (e.key) {
+		let i = t.indexOf(e.key);
+		if (i >= 0) {
+			let t = n(i);
+			if (t !== void 0) return Y(t + e.delta, r);
+		}
+	}
+	return Y(e.offset, r);
+}
+function Q(e = G) {
+	let t = g(), n = m(null);
+	if (n.current === null) {
+		let r = l(t), i = s.getState().read(r, e);
+		n.current = i && Number.isFinite(i.offset) ? Math.max(0, i.offset) : 0;
+	}
+	return n.current;
+}
+function te(e) {
+	let t = 0, n = null, r = () => {
+		n = null, t = Date.now(), e();
+	};
+	return {
+		trigger() {
+			let e = Date.now() - t;
+			e >= K ? r() : n === null && (n = setTimeout(r, K - e));
+		},
+		flush() {
+			n !== null && (clearTimeout(n), n = null), e();
+		},
+		cancel() {
+			n !== null && (clearTimeout(n), n = null);
+		}
+	};
+}
+function ne(e) {
+	let { virtualizer: t, scrollElementRef: n, rowKeys: r } = e, i = e.stateKey ?? "scroll", a = e.enabled ?? !0, o = g(), c = l(o), u = m(t);
+	u.current = t;
+	let f = m(r);
+	f.current = r;
+	let p = m(null);
+	d(() => {
+		p.current !== c && (p.current = null);
+	}, [c]), d(() => {
+		if (!a) return;
+		let e = u.current;
+		if (!e || r.length === 0) return;
+		let t = s.getState().read(c, i), n = p.current !== c;
+		if (p.current = c, !t) {
+			n && e.scrollToOffset(0, {
+				align: "start",
+				behavior: "auto"
+			});
+			return;
+		}
+		let o = 0, l = 0, d = NaN, m = () => {
+			let e = u.current;
+			if (!e) return;
+			let n = Z(t, f.current, (t) => e.getOffsetForIndex(t, "start")?.[0], e.getTotalSize());
+			n !== null && (Number.isNaN(d) || Math.abs(n - d) > 1) && (e.scrollToOffset(n, {
+				align: "start",
+				behavior: "auto"
+			}), d = n, l++ < q && (o = requestAnimationFrame(m)));
+		};
+		return m(), () => {
+			o && cancelAnimationFrame(o);
+		};
+	}, [
+		a,
+		c,
+		r,
+		i
+	]), $(n, a, c, i, (e) => {
+		let t = u.current;
+		if (!t) return null;
+		let n = e.scrollTop, r = n > 0 ? n : t.scrollOffset ?? 0;
+		return X(r, t.getVirtualItemForOffset(r), f.current);
+	});
+}
+function $(e, t, n, r, i) {
+	let a = m(i);
+	a.current = i, d(() => {
+		if (!t) return;
+		let i = 0, o = J, c = null, l = null, u = (e) => {
+			let t = a.current(e);
+			t && s.getState().set(n, r, t);
+		}, d = () => l?.trigger(), f = () => {
+			let t = e.current;
+			if (!t) {
+				o-- > 0 && (i = requestAnimationFrame(f));
+				return;
+			}
+			c = t, l = te(() => u(t)), t.addEventListener("scroll", d, { passive: !0 });
+		};
+		return f(), () => {
+			i && cancelAnimationFrame(i), c && c.removeEventListener("scroll", d), l?.flush();
+		};
+	}, [
+		t,
+		e,
+		n,
+		r
+	]);
+}
+function re(e) {
+	let { scrollElementRef: t } = e, n = e.stateKey ?? "scroll", r = e.enabled ?? !0, i = g(), a = l(i), o = m(null);
+	d(() => {
+		if (!r || o.current === a) return;
+		let e = 0, i = J, c = () => {
+			let r = t.current;
+			if (!r) {
+				i-- > 0 && (e = requestAnimationFrame(c));
+				return;
+			}
+			o.current = a;
+			let l = s.getState().read(a, n);
+			l && (r.scrollTop = Number.isFinite(l.offset) ? Math.max(0, l.offset) : 0);
+		};
+		return c(), () => {
+			e && cancelAnimationFrame(e);
+		};
+	}, [
+		r,
+		a,
+		n,
+		t
+	]), $(t, r, a, n, (e) => ({
+		key: "",
+		delta: 0,
+		offset: e.scrollTop
+	}));
+}
+//#endregion
+//#region src/components/shared/RefreshControl.tsx
+function ie({ liveObject: r, realtime: i = !0 }) {
+	let { isPhone: s } = a(), c = r.isLive ? s ? void 0 : "Live" : "Updates paused";
+	return /* @__PURE__ */ y("span", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 8
+		},
+		children: [/* @__PURE__ */ v(n, {
+			icon: r.isFetching ? /* @__PURE__ */ v("span", {
+				"data-testid": "refresh-spinner",
+				style: { display: "inline-flex" },
+				children: /* @__PURE__ */ v(t, { size: 14 })
+			}) : /* @__PURE__ */ v(e.refresh, { size: 14 }),
+			title: "Refresh",
+			disabled: r.isLoading || r.isFetching,
+			onClick: () => {
+				r.refetch();
+			}
+		}), i && /* @__PURE__ */ v("span", {
+			"data-testid": "live-indicator",
+			role: "status",
+			"aria-label": r.isLive ? "Live" : "Updates paused",
+			title: r.isLive ? "This view updates automatically in realtime." : "Realtime updates are paused. Refresh manually to load the latest data.",
+			children: /* @__PURE__ */ v(o, {
+				tone: r.isLive ? "emerald" : "amber",
+				size: "xs",
+				dot: !0,
+				children: c
+			})
+		})]
+	});
+}
+//#endregion
+export { x as _, ne as a, W as c, L as d, N as f, E as g, D as h, Q as i, z as l, O as m, G as n, V as o, F as p, re as r, U as s, ie as t, I as u };