themelia-react-ui 2.0.0 → 2.0.1

package/dist/mentions-D-uyCh01.js

@@ -0,0 +1,568 @@
+"use client";
+import { useStrings as e } from "./lib/strings.js";
+import { t } from "./utils-l5LpDw2z.js";
+import { n } from "./buttons-SbIcm1HJ.js";
+import { a as r, s as i, t as a } from "./typography-DTRkE9zL.js";
+import { t as o } from "./focus-recipes-B653VaLq.js";
+import { t as s } from "./structure-DC2dygdA.js";
+import { a as c } from "./surface-recipes-BKRVW8Os.js";
+import { n as l, r as u, t as d } from "./popover.recipes-Bdyhj2db.js";
+import { t as f } from "./interaction-recipes-CHr0dJUs.js";
+import { t as p } from "./sanitize-html-DsQmI48u.js";
+import { t as m } from "./content-typography-CnwgMJ37.js";
+import { t as h } from "./badge-MrKVNzW9.js";
+import { a as g, i as _, n as v, o as y, r as b, t as x } from "./command-kNR20o7x.js";
+import { i as S, t as C } from "./popover-Di55PyAI.js";
+import { t as w } from "./use-debounced-callback-Cx1h-hdv.js";
+import { Fragment as T, useCallback as E, useEffect as D, useMemo as O, useRef as k, useState as A } from "react";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+import { Loader2 as P } from "lucide-react";
+//#region src/components/features/mentions/hooks/use-mentions-search.ts
+function F(e) {
+	return !!(e && e.name === "AbortError");
+}
+function I(e = {}) {
+	let { resources: t, onResourceSearch: n, initialMentions: r, debounceMs: i = 300, onError: a } = e, o = JSON.stringify(Object.keys(t ?? {})), s = O(() => JSON.parse(o), [o]), [c, l] = A(() => s[0] ?? null), [u, d] = A(!1), [f, p] = A(""), [m, h] = A({}), [g, _] = A(!1), [v, y] = A(null), [b, x] = A({}), [S, C] = A(0), [T, j] = A(() => r ? [...r] : []), M = k(0), N = k(null), P = k(t), I = k(n), L = k(a);
+	P.current = t, I.current = n, L.current = a, D(() => {
+		if (s.length === 0) {
+			l(null);
+			return;
+		}
+		(!c || !s.includes(c)) && l(s[0]);
+	}, [c, s]);
+	let R = O(() => c && t ? t[c] ?? null : null, [c, t]), z = E(async (e, t, n) => {
+		let r = P.current?.[e];
+		if (r?.search) return (await r.search(t, {
+			kind: e,
+			signal: n
+		})).map((t) => ({
+			...t,
+			kind: e
+		}));
+		if (r?.suggestions) {
+			let n = r.suggestions;
+			return (t.trim().length === 0 ? n : n.filter((e) => e.label.toLowerCase().includes(t.toLowerCase()))).map((t) => ({
+				...t,
+				kind: e
+			}));
+		}
+		return I.current ? (await I.current(t, e, {
+			kind: e,
+			signal: n
+		})).map((t) => ({
+			...t,
+			kind: e
+		})) : [];
+	}, []), B = w((e, t, n, r) => {
+		(async () => {
+			_(!0);
+			try {
+				let i = await Promise.all(e.map(async (e) => {
+					try {
+						return {
+							kind: e,
+							list: await z(e, t, r),
+							error: null
+						};
+					} catch (t) {
+						return {
+							kind: e,
+							list: [],
+							error: t
+						};
+					}
+				}));
+				if (n !== M.current || r.aborted) return;
+				let a = {}, o = {}, s = null;
+				for (let e of i) a[e.kind] = e.list, e.error !== null && !F(e.error) && (o[e.kind] = e.error, s ??= e.error, L.current?.(e.error, {
+					query: t,
+					kind: e.kind
+				}));
+				h(a), x(o), y(s);
+			} finally {
+				n === M.current && !r.aborted && _(!1);
+			}
+		})();
+	}, i);
+	D(() => {
+		let e = new AbortController();
+		N.current = e;
+		let t = () => {
+			e.abort(), N.current === e && (N.current = null);
+		};
+		if (s.length === 0) return h({}), _(!1), y(null), x({}), t;
+		let n = ++M.current;
+		return y(null), x({}), B(s, f, n, e.signal), () => {
+			B.cancel(), t();
+		};
+	}, [
+		s,
+		f,
+		S,
+		B
+	]);
+	let V = E(() => {
+		C((e) => e + 1);
+	}, []);
+	D(() => {
+		if (u || !c || (m[c] ?? []).length > 0) return;
+		let e = s.find((e) => (m[e]?.length ?? 0) > 0);
+		e && e !== c && l(e);
+	}, [
+		c,
+		s,
+		u,
+		m
+	]);
+	let H = E((e) => {
+		l(e);
+	}, []), U = E((e) => {
+		p(e);
+	}, []), W = E((e) => {
+		j((t) => t.some((t) => t.id === e.id) ? t : [...t, e]);
+	}, []), G = E((e) => {
+		j((t) => t.filter((t) => t.id !== e));
+	}, []), K = E((e) => {
+		j([...e]);
+	}, []), q = E(() => {
+		N.current?.abort(), j([]), p(""), d(!1), h({}), _(!1), y(null), x({}), M.current++;
+	}, []), J = E((e) => {
+		let n = e.kind ?? c, r = `${n}:${e.id}`, i = t?.[n], a = e.href ?? i?.buildHref?.(e), o = {
+			id: r,
+			kind: n,
+			label: e.label,
+			href: a,
+			data: e.data
+		};
+		return W(o), o;
+	}, [
+		c,
+		W,
+		t
+	]);
+	return {
+		kinds: s,
+		activeKind: c,
+		setActiveKind: H,
+		activeResource: R,
+		query: f,
+		setQuery: U,
+		suggestions: O(() => c ? m[c] ?? [] : [], [c, m]),
+		suggestionsByKind: m,
+		isLoading: g,
+		error: v,
+		isError: v !== null,
+		errorsByKind: b,
+		retry: V,
+		mentions: T,
+		addMention: W,
+		removeMention: G,
+		setMentions: K,
+		reset: q,
+		selectSuggestion: J,
+		manualKindOverride: u,
+		setManualKindOverride: d
+	};
+}
+//#endregion
+//#region src/components/features/mentions/utils/build-mention-html.ts
+function L(e, t) {
+	let n = String(e.label ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), r = String(e.id).replace(/"/g, "&quot;"), i = String(e.kind).replace(/"/g, "&quot;"), a = t?.tone ? String(t.tone).replace(/"/g, "&quot;") : "", o = t?.triggerChar ?? (e.kind === "user" ? "@" : "");
+	return `<span class="rsc-mention" data-ref-id="${r}" data-ref-kind="${i}"${a ? ` data-ref-tone="${a}"` : ""} contenteditable="false">${o}${n}</span>&nbsp;`;
+}
+//#endregion
+//#region src/components/features/mentions/hooks/use-mentions.ts
+function R(e = {}) {
+	let t = e.resources, n = e.onResourceSearch, r = I({
+		...e,
+		resources: t,
+		onResourceSearch: n
+	}), [i, a] = A(!1), [o, s] = A(!1), c = k(null), l = k(null), u = E((e) => {
+		a(e), e || (c.current = null, l.current = null, s(!1), r.setManualKindOverride(!1));
+	}, [r]), d = e.editorRef, f = E(() => {
+		if (!t) return;
+		let e = {};
+		for (let [n, r] of Object.entries(t)) {
+			let t = r?.trigger;
+			typeof t == "string" && t.length > 0 && (e[t] = n);
+		}
+		if (Object.keys(e).length === 0) return;
+		let n = d?.current?.getCaretContext();
+		if (!n) {
+			c.current && (c.current = null, u(!1));
+			return;
+		}
+		let i = Object.keys(e).map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join(""), o = RegExp(`(?:^|\\s)([${i}])([\\p{L}\\p{N}_-]*)$`, "u"), f = n.textBefore.match(o);
+		if (!f) {
+			c.current && (c.current = null, u(!1));
+			return;
+		}
+		let p = f[1], m = f[2] ?? "", h = e[p], g = p.length + m.length;
+		c.current = {
+			kind: h,
+			triggerChar: p,
+			consumedLength: g
+		}, s(!0), l.current !== p && (r.activeKind !== h && r.setActiveKind(h), r.setManualKindOverride(!1), l.current = p), r.query !== m && r.setQuery(m), a(!0);
+	}, [
+		d,
+		t,
+		r,
+		u
+	]), p = E((e) => {
+		let n = r.selectSuggestion(e), i = c.current, a = t?.[n.kind]?.tone, o = L(n, {
+			triggerChar: i?.triggerChar,
+			tone: a
+		});
+		return i && i.consumedLength > 0 && d?.current ? (d.current.replaceBeforeCaret(i.consumedLength, o), c.current = null) : d?.current && d.current.insertHTML(o), u(!1), n;
+	}, [
+		d,
+		t,
+		r,
+		u
+	]);
+	return {
+		...r,
+		pickerOpen: i,
+		setPickerOpen: u,
+		triggerActive: o,
+		handleCaretChange: f,
+		pickSuggestion: p
+	};
+}
+//#endregion
+//#region src/components/features/mentions/partials/mention-chip.tsx
+var z = {
+	primary: "secondary",
+	success: "success",
+	warning: "warning",
+	destructive: "destructive",
+	info: "info",
+	secondary: "secondary"
+}, B = ({ mention: e, resource: n, asLink: r = !0, onClick: o, trailing: s, className: c }) => {
+	if (n?.renderChip) return /* @__PURE__ */ M(j, { children: n.renderChip(e) });
+	let l = z[n?.tone ?? "secondary"] ?? z.secondary, u = n?.icon, d = /* @__PURE__ */ N(h, {
+		tone: l,
+		size: "sm",
+		inline: !0,
+		"data-ref-id": e.id,
+		"data-ref-kind": e.kind,
+		className: t("mention-chip--component", "align-[-0.15em] cursor-default whitespace-nowrap", c),
+		children: [
+			u ? /* @__PURE__ */ M(u, {
+				className: "size-icon-sm shrink-0",
+				"aria-hidden": !0
+			}) : null,
+			/* @__PURE__ */ M(i, {
+				tag: "span",
+				size: "inherit",
+				weight: "medium",
+				lineHeight: "none",
+				className: "max-w-[14rem] truncate text-inherit",
+				children: e.label
+			}),
+			s
+		]
+	});
+	return r && e.href ? /* @__PURE__ */ M(a, {
+		href: e.href,
+		size: "inherit",
+		underline: !1,
+		target: "_blank",
+		rel: "noreferrer noopener",
+		onClick: o,
+		className: "inline align-baseline no-underline hover:opacity-90",
+		children: d
+	}) : o ? /* @__PURE__ */ M("span", {
+		onClick: o,
+		className: "inline align-baseline",
+		children: d
+	}) : d;
+}, V = /<(span|a)\b([^>]*?)data-ref-id\s*=\s*"([^"]+)"([^>]*)>([\s\S]*?)<\/\1>/gi;
+function H(e) {
+	if (!e) return [];
+	let t = [], n = 0, r;
+	for (V.lastIndex = 0; (r = V.exec(e)) !== null;) {
+		let [i, , , a] = r, o = e.slice(n, r.index);
+		o.length > 0 && t.push({
+			kind: "html",
+			value: o
+		}), t.push({
+			kind: "mention",
+			refId: a,
+			fallback: i
+		}), n = r.index + i.length;
+	}
+	let i = e.slice(n);
+	return i.length > 0 && t.push({
+		kind: "html",
+		value: i
+	}), t;
+}
+//#endregion
+//#region src/components/features/mentions/partials/mention-content.tsx
+var U = m;
+function W(e) {
+	let { html: n, mentions: r, resources: a, renderMention: o, sanitizer: s, className: c, prose: l = !0 } = e, u = a, d = s ? s(n ?? "") : p(n ?? ""), f = /* @__PURE__ */ new Map();
+	for (let e of r ?? []) f.set(e.id, e);
+	let m = f.size > 0 ? H(d) : [{
+		kind: "html",
+		value: d
+	}], h = (e) => {
+		if (o) return o(e);
+		let t = u?.[e.kind];
+		return /* @__PURE__ */ M(B, {
+			mention: e,
+			resource: t
+		});
+	}, g = m.map((e, t) => {
+		if (e.kind === "mention") {
+			let n = f.get(e.refId);
+			return n ? /* @__PURE__ */ M(T, { children: h(n) }, `ref-${t}-${e.refId}`) : /* @__PURE__ */ M("span", { dangerouslySetInnerHTML: { __html: e.fallback } }, `fallback-${t}`);
+		}
+		return /* @__PURE__ */ M("span", { dangerouslySetInnerHTML: { __html: e.value } }, `html-${t}`);
+	});
+	return l ? /* @__PURE__ */ M(i, {
+		tag: "div",
+		className: t("mention-content--component", U, c),
+		children: g
+	}) : /* @__PURE__ */ M(j, { children: g });
+}
+//#endregion
+//#region src/components/features/mentions/partials/mention-kind-toggles.tsx
+function G({ kinds: e, activeKind: t, resources: r, counts: a, onKindChange: o }) {
+	return /* @__PURE__ */ M("div", {
+		className: "mention-kind-toggles--component flex flex-wrap gap-space-xs",
+		children: e.map((e) => {
+			let s = r?.[e], c = s?.icon, l = e === t, u = a?.[e]?.length ?? 0;
+			return /* @__PURE__ */ N(n, {
+				type: "button",
+				"aria-pressed": l,
+				tone: "secondary",
+				buttonStyle: "ghost",
+				size: "sm",
+				className: l ? f.togglePressed : f.toggleHoverButton,
+				onClick: () => o(e),
+				children: [
+					c ? /* @__PURE__ */ M(c, { className: "size-icon-sm" }) : null,
+					/* @__PURE__ */ M(i, {
+						tag: "span",
+						size: "inherit",
+						weight: "medium",
+						className: "text-inherit",
+						children: s?.label ?? String(e)
+					}),
+					u > 0 && /* @__PURE__ */ M(i, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						className: "tabular-nums",
+						children: u
+					})
+				]
+			}, e);
+		})
+	});
+}
+//#endregion
+//#region src/components/features/mentions/mentions.strings.ts
+var K = {
+	title: "Insert reference",
+	searchPlaceholder: "Search…",
+	empty: "No matches.",
+	loading: "Searching…"
+}, q = {
+	title: "Insert reference",
+	empty: "No matches.",
+	loading: "Searching…"
+};
+//#endregion
+//#region src/components/features/mentions/partials/mention-picker.tsx
+function J({ open: n, activeKind: a, setActiveKind: o, kinds: c, resources: l, query: u, setQuery: d, suggestions: f, loading: p, onSelect: m, strings: h, className: w }) {
+	let T = e(K, h);
+	return n ? /* @__PURE__ */ N(C, {
+		align: "start",
+		inset: "flush",
+		type: "menu",
+		className: t("mention-picker--component", "w-72 gap-0 overflow-hidden", w),
+		children: [/* @__PURE__ */ M(S, { children: /* @__PURE__ */ N(s, {
+			gap: "sm",
+			children: [/* @__PURE__ */ M(r, { children: T.title }), c.length > 1 && /* @__PURE__ */ M(G, {
+				kinds: c,
+				activeKind: a,
+				resources: l,
+				onKindChange: o
+			})]
+		}) }), /* @__PURE__ */ N(x, {
+			shouldFilter: !1,
+			inset: "flush",
+			className: "rounded-none",
+			children: [/* @__PURE__ */ M(_, {
+				placeholder: T.searchPlaceholder,
+				value: u,
+				onValueChange: d
+			}), /* @__PURE__ */ N(y, { children: [
+				p ? /* @__PURE__ */ N(s, {
+					direction: "horizontal",
+					align: "center",
+					gap: "sm",
+					className: "px-row-x py-row-y text-muted-foreground",
+					children: [/* @__PURE__ */ M(P, {
+						className: "size-icon-sm animate-spin",
+						"aria-hidden": !0
+					}), /* @__PURE__ */ M(i, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						children: T.loading
+					})]
+				}) : null,
+				/* @__PURE__ */ M(v, { children: T.empty }),
+				/* @__PURE__ */ M(b, { children: f.map((e) => {
+					let t = e.kind ?? a ?? "";
+					return /* @__PURE__ */ M(g, {
+						value: `${t}:${e.id}`,
+						onSelect: () => m(e),
+						children: /* @__PURE__ */ N(s, {
+							gap: "dense",
+							className: "flex min-w-0 flex-1 flex-col leading-tight",
+							children: [/* @__PURE__ */ M(i, {
+								tag: "span",
+								weight: "medium",
+								className: "truncate",
+								children: e.label
+							}), e.description ? /* @__PURE__ */ M(i, {
+								tag: "span",
+								size: "xs",
+								type: "secondary",
+								className: "truncate",
+								children: e.description
+							}) : null]
+						})
+					}, `${t}:${e.id}`);
+				}) })
+			] })]
+		})]
+	}) : null;
+}
+//#endregion
+//#region src/components/features/mentions/partials/mention-inline-suggestions.tsx
+function Y({ open: n, activeKind: a, setActiveKind: p, kinds: m, resources: h, suggestionsByKind: g, suggestions: _, loading: v, query: y, onManualKindChange: b, onSelect: x, strings: S, className: C }) {
+	let w = e(q, S);
+	return n ? /* @__PURE__ */ N("div", {
+		onMouseDown: (e) => e.preventDefault(),
+		className: t("mention-inline-suggestions--component", u.surface, "absolute left-0 top-full z-50 mt-space-xs w-80 max-w-[min(theme(spacing.96),100%)]", "overflow-hidden", C),
+		children: [/* @__PURE__ */ M("div", {
+			className: t("mention-inline-suggestions--header", u.menuRegion, c.anchored.header),
+			children: /* @__PURE__ */ N(s, {
+				gap: "sm",
+				className: "px-row-x",
+				children: [/* @__PURE__ */ N(s, {
+					direction: "horizontal",
+					align: "baseline",
+					justify: "between",
+					gap: "md",
+					children: [/* @__PURE__ */ M(r, { children: w.title }), y ? /* @__PURE__ */ N(i, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						className: "truncate font-mono",
+						children: [
+							"“",
+							y,
+							"”"
+						]
+					}) : null]
+				}), m.length > 1 && /* @__PURE__ */ M(G, {
+					kinds: m,
+					activeKind: a,
+					resources: h,
+					counts: g,
+					onKindChange: (e) => {
+						p(e), b?.();
+					}
+				})]
+			})
+		}), /* @__PURE__ */ N("div", {
+			className: t("mention-inline-suggestions--list max-h-72 overflow-y-auto", u.menu),
+			..._.length > 0 ? {
+				role: "listbox",
+				"aria-label": w.title
+			} : {},
+			children: [
+				v ? /* @__PURE__ */ N(s, {
+					direction: "horizontal",
+					align: "center",
+					gap: "sm",
+					className: "px-row-x py-row-y text-muted-foreground",
+					children: [/* @__PURE__ */ M(P, {
+						className: "size-icon-sm animate-spin",
+						"aria-hidden": !0
+					}), /* @__PURE__ */ M(i, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						children: w.loading
+					})]
+				}) : null,
+				!v && _.length === 0 ? /* @__PURE__ */ M(i, {
+					tag: "div",
+					size: "xs",
+					type: "secondary",
+					className: "px-row-x py-row-y",
+					children: w.empty
+				}) : null,
+				_.map((e) => {
+					let n = e.kind ?? a ?? "";
+					return /* @__PURE__ */ M("button", {
+						type: "button",
+						role: "option",
+						"aria-selected": !1,
+						"data-ref-id": `${n}:${e.id}`,
+						onClick: () => x(e),
+						className: t("mention-inline-suggestions--option w-full min-w-0 cursor-pointer border-0 bg-transparent text-left", l("compact"), d.interactive, f.rowHover, o.inset),
+						children: /* @__PURE__ */ N(s, {
+							gap: "dense",
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ M(i, {
+								tag: "span",
+								weight: "medium",
+								className: "truncate",
+								children: e.label
+							}), e.description ? /* @__PURE__ */ M(i, {
+								tag: "span",
+								size: "xs",
+								type: "secondary",
+								className: "truncate",
+								children: e.description
+							}) : null]
+						})
+					}, `${n}:${e.id}`);
+				})
+			]
+		})]
+	}) : null;
+}
+//#endregion
+//#region src/components/features/mentions/utils/parse-mentions-from-html.ts
+var X = /<(?:span|a)\b[^>]*?data-ref-id\s*=\s*"([^"]+)"[^>]*?>([\s\S]*?)<\/(?:span|a)>/gi, Z = /data-ref-kind\s*=\s*"([^"]+)"/i;
+function Q(e) {
+	let t = [];
+	if (!e) return t;
+	let n = /* @__PURE__ */ new Set(), r;
+	for (X.lastIndex = 0; (r = X.exec(e)) !== null;) {
+		let [e, i, a] = r;
+		if (n.has(i)) continue;
+		n.add(i);
+		let o = e.match(Z)?.[1] ?? i.split(":")[0] ?? "", s = (a ?? "").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").replace(/^[@#$&%!~]\s*/, "").trim();
+		t.push({
+			id: i,
+			kind: o,
+			label: s
+		});
+	}
+	return t;
+}
+//#endregion
+export { K as a, B as c, I as d, q as i, R as l, Y as n, W as o, J as r, H as s, Q as t, L as u };
+
+//# sourceMappingURL=mentions-D-uyCh01.js.map