@stll/folio-react 0.6.0 → 0.8.0

package/dist/InsertSymbolDialog-DCFLmfzn.js

@@ -0,0 +1,376 @@
+import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
+import { r as useFolioUI } from "./folio-ui-BgDDRsUX.js";
+import { c as DIALOG_SECONDARY_BUTTON_CLASS, i as DIALOG_INPUT_CLASS, l as DIALOG_TITLE_CLASS, n as DIALOG_BODY_CLASS, o as DIALOG_POPUP_CLASS, r as DIALOG_FOOTER_CLASS, s as DIALOG_PRIMARY_BUTTON_CLASS, t as DIALOG_BACKDROP_CLASS, u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
+import { c } from "react-compiler-runtime";
+import { useState } from "react";
+import { useTranslations } from "use-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SYMBOL_CATEGORIES, filterSymbols } from "@stll/folio-core/symbols";
+//#region src/components/dialogs/InsertSymbolDialog.tsx
+var InsertSymbolDialog_exports = /* @__PURE__ */ __exportAll({ InsertSymbolDialog: () => InsertSymbolDialog });
+const RECENT_LIMIT = 10;
+/** Format a character as its `U+XXXX` code point label. */
+function codePointLabel(char) {
+	return `U+${(char.codePointAt(0) ?? 0).toString(16).toUpperCase().padStart(4, "0")}`;
+}
+function InsertSymbolDialog(t0) {
+	const $ = c(108);
+	const { isOpen, onClose, onInsert } = t0;
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle } = useFolioUI().Dialog;
+	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
+	const t = useTranslations("folio");
+	const [search, setSearch] = useState("");
+	const [activeCategory, setActiveCategory] = useState("Common");
+	const [selectedSymbol, setSelectedSymbol] = useState("");
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[0] = t1;
+	} else t1 = $[0];
+	const [recentSymbols, setRecentSymbols] = useState(t1);
+	let T0;
+	let T1;
+	let T2;
+	let activeSymbols;
+	let insertSymbol;
+	let t10;
+	let t11;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[1] !== Dialog || $[2] !== DialogBackdrop || $[3] !== DialogPopup || $[4] !== DialogPortal || $[5] !== DialogTitle || $[6] !== activeCategory || $[7] !== handleOpenChange || $[8] !== isOpen || $[9] !== onClose || $[10] !== onInsert || $[11] !== search || $[12] !== selectedSymbol || $[13] !== t) {
+		activeSymbols = search ? filterSymbols(search) : SYMBOL_CATEGORIES.find((category) => category.name === activeCategory)?.symbols.map((symbol) => Object.assign({}, symbol, { category: activeCategory })) ?? [];
+		let t12;
+		if ($[29] !== onInsert) {
+			t12 = (symbol_0) => {
+				if (!symbol_0) return;
+				setRecentSymbols((prev) => [symbol_0, ...prev.filter((s) => s !== symbol_0)].slice(0, RECENT_LIMIT));
+				onInsert(symbol_0);
+			};
+			$[29] = onInsert;
+			$[30] = t12;
+		} else t12 = $[30];
+		insertSymbol = t12;
+		T2 = Dialog;
+		t10 = isOpen;
+		t11 = handleOpenChange;
+		T1 = DialogPortal;
+		if ($[31] !== DialogBackdrop) {
+			t9 = /* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS });
+			$[31] = DialogBackdrop;
+			$[32] = t9;
+		} else t9 = $[32];
+		T0 = DialogPopup;
+		t7 = DIALOG_POPUP_CLASS;
+		let t13;
+		if ($[33] !== t) {
+			t13 = t("dialogs.insertSymbol.title");
+			$[33] = t;
+			$[34] = t13;
+		} else t13 = $[34];
+		if ($[35] !== DialogTitle || $[36] !== t13) {
+			t8 = /* @__PURE__ */ jsx(DialogTitle, {
+				className: DIALOG_TITLE_CLASS,
+				children: t13
+			});
+			$[35] = DialogTitle;
+			$[36] = t13;
+			$[37] = t8;
+		} else t8 = $[37];
+		t4 = DIALOG_BODY_CLASS;
+		let t14;
+		if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+			t14 = (event) => setSearch(event.target.value);
+			$[38] = t14;
+		} else t14 = $[38];
+		let t15;
+		if ($[39] !== onClose) {
+			t15 = (event_0) => {
+				if (event_0.key === "Escape") onClose();
+			};
+			$[39] = onClose;
+			$[40] = t15;
+		} else t15 = $[40];
+		let t16;
+		if ($[41] !== t) {
+			t16 = t("dialogs.insertSymbol.searchPlaceholder");
+			$[41] = t;
+			$[42] = t16;
+		} else t16 = $[42];
+		if ($[43] !== search || $[44] !== t15 || $[45] !== t16) {
+			t5 = /* @__PURE__ */ jsx("input", {
+				autoFocus: true,
+				value: search,
+				onChange: t14,
+				onKeyDown: t15,
+				placeholder: t16,
+				className: `${DIALOG_INPUT_CLASS} focus:border-primary w-full`
+			});
+			$[43] = search;
+			$[44] = t15;
+			$[45] = t16;
+			$[46] = t5;
+		} else t5 = $[46];
+		if ($[47] !== activeCategory || $[48] !== search || $[49] !== t) {
+			t6 = !search && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-0.5",
+				children: SYMBOL_CATEGORIES.map((category_0) => {
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setActiveCategory(category_0.name),
+						className: `rounded px-2 py-1 text-[11px] ${activeCategory === category_0.name ? "bg-accent text-accent-foreground font-semibold" : "text-muted-foreground hover:bg-muted"}`,
+						children: t(category_0.nameKey)
+					}, category_0.name);
+				})
+			});
+			$[47] = activeCategory;
+			$[48] = search;
+			$[49] = t;
+			$[50] = t6;
+		} else t6 = $[50];
+		t2 = "grid max-h-60 grid-cols-[repeat(auto-fill,minmax(2.25rem,1fr))] gap-0.5 overflow-y-auto rounded border p-1";
+		let t17;
+		if ($[51] !== insertSymbol || $[52] !== selectedSymbol) {
+			t17 = (symbol_1) => {
+				const selected = selectedSymbol === symbol_1.char;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					title: symbol_1.name,
+					onClick: () => setSelectedSymbol(symbol_1.char),
+					onDoubleClick: () => insertSymbol(symbol_1.char),
+					className: `flex h-9 w-9 items-center justify-center rounded border text-lg ${selected ? "border-primary bg-primary/20" : "hover:bg-muted border-transparent"}`,
+					children: symbol_1.char
+				}, symbol_1.char);
+			};
+			$[51] = insertSymbol;
+			$[52] = selectedSymbol;
+			$[53] = t17;
+		} else t17 = $[53];
+		t3 = activeSymbols.map(t17);
+		$[1] = Dialog;
+		$[2] = DialogBackdrop;
+		$[3] = DialogPopup;
+		$[4] = DialogPortal;
+		$[5] = DialogTitle;
+		$[6] = activeCategory;
+		$[7] = handleOpenChange;
+		$[8] = isOpen;
+		$[9] = onClose;
+		$[10] = onInsert;
+		$[11] = search;
+		$[12] = selectedSymbol;
+		$[13] = t;
+		$[14] = T0;
+		$[15] = T1;
+		$[16] = T2;
+		$[17] = activeSymbols;
+		$[18] = insertSymbol;
+		$[19] = t10;
+		$[20] = t11;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = t9;
+	} else {
+		T0 = $[14];
+		T1 = $[15];
+		T2 = $[16];
+		activeSymbols = $[17];
+		insertSymbol = $[18];
+		t10 = $[19];
+		t11 = $[20];
+		t2 = $[21];
+		t3 = $[22];
+		t4 = $[23];
+		t5 = $[24];
+		t6 = $[25];
+		t7 = $[26];
+		t8 = $[27];
+		t9 = $[28];
+	}
+	let t12;
+	if ($[54] !== activeSymbols.length || $[55] !== search || $[56] !== t) {
+		t12 = activeSymbols.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground col-span-full p-6 text-center text-[13px]",
+			children: search ? t("dialogs.insertSymbol.noResults", { query: search }) : t("dialogs.insertSymbol.noResultsEmpty")
+		});
+		$[54] = activeSymbols.length;
+		$[55] = search;
+		$[56] = t;
+		$[57] = t12;
+	} else t12 = $[57];
+	let t13;
+	if ($[58] !== t12 || $[59] !== t2 || $[60] !== t3) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			className: t2,
+			children: [t3, t12]
+		});
+		$[58] = t12;
+		$[59] = t2;
+		$[60] = t3;
+		$[61] = t13;
+	} else t13 = $[61];
+	let t14;
+	if ($[62] !== selectedSymbol) {
+		t14 = selectedSymbol && /* @__PURE__ */ jsxs("div", {
+			className: "bg-muted flex items-center gap-3 rounded px-3 py-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-3xl leading-none",
+				children: selectedSymbol
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground font-mono text-xs",
+				children: codePointLabel(selectedSymbol)
+			})]
+		});
+		$[62] = selectedSymbol;
+		$[63] = t14;
+	} else t14 = $[63];
+	let t15;
+	if ($[64] !== insertSymbol || $[65] !== recentSymbols || $[66] !== search || $[67] !== t) {
+		t15 = recentSymbols.length > 0 && !search && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground mr-1 text-[11px]",
+				children: t("dialogs.insertSymbol.recent")
+			}), recentSymbols.map((symbol_2) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				title: codePointLabel(symbol_2),
+				onClick: () => setSelectedSymbol(symbol_2),
+				onDoubleClick: () => insertSymbol(symbol_2),
+				className: "hover:bg-muted flex h-7 w-7 items-center justify-center rounded border border-transparent text-sm",
+				children: symbol_2
+			}, symbol_2))]
+		});
+		$[64] = insertSymbol;
+		$[65] = recentSymbols;
+		$[66] = search;
+		$[67] = t;
+		$[68] = t15;
+	} else t15 = $[68];
+	let t16;
+	if ($[69] !== t13 || $[70] !== t14 || $[71] !== t15 || $[72] !== t4 || $[73] !== t5 || $[74] !== t6) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: t4,
+			children: [
+				t5,
+				t6,
+				t13,
+				t14,
+				t15
+			]
+		});
+		$[69] = t13;
+		$[70] = t14;
+		$[71] = t15;
+		$[72] = t4;
+		$[73] = t5;
+		$[74] = t6;
+		$[75] = t16;
+	} else t16 = $[75];
+	let t17;
+	if ($[76] !== t) {
+		t17 = t("common.cancel");
+		$[76] = t;
+		$[77] = t17;
+	} else t17 = $[77];
+	let t18;
+	if ($[78] !== onClose || $[79] !== t17) {
+		t18 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: DIALOG_SECONDARY_BUTTON_CLASS,
+			onClick: onClose,
+			children: t17
+		});
+		$[78] = onClose;
+		$[79] = t17;
+		$[80] = t18;
+	} else t18 = $[80];
+	const t19 = !selectedSymbol;
+	let t20;
+	if ($[81] !== insertSymbol || $[82] !== selectedSymbol) {
+		t20 = () => insertSymbol(selectedSymbol);
+		$[81] = insertSymbol;
+		$[82] = selectedSymbol;
+		$[83] = t20;
+	} else t20 = $[83];
+	let t21;
+	if ($[84] !== t) {
+		t21 = t("common.insert");
+		$[84] = t;
+		$[85] = t21;
+	} else t21 = $[85];
+	let t22;
+	if ($[86] !== t19 || $[87] !== t20 || $[88] !== t21) {
+		t22 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: DIALOG_PRIMARY_BUTTON_CLASS,
+			disabled: t19,
+			onClick: t20,
+			children: t21
+		});
+		$[86] = t19;
+		$[87] = t20;
+		$[88] = t21;
+		$[89] = t22;
+	} else t22 = $[89];
+	let t23;
+	if ($[90] !== t18 || $[91] !== t22) {
+		t23 = /* @__PURE__ */ jsxs("div", {
+			className: DIALOG_FOOTER_CLASS,
+			children: [t18, t22]
+		});
+		$[90] = t18;
+		$[91] = t22;
+		$[92] = t23;
+	} else t23 = $[92];
+	let t24;
+	if ($[93] !== T0 || $[94] !== t16 || $[95] !== t23 || $[96] !== t7 || $[97] !== t8) {
+		t24 = /* @__PURE__ */ jsxs(T0, {
+			className: t7,
+			children: [
+				t8,
+				t16,
+				t23
+			]
+		});
+		$[93] = T0;
+		$[94] = t16;
+		$[95] = t23;
+		$[96] = t7;
+		$[97] = t8;
+		$[98] = t24;
+	} else t24 = $[98];
+	let t25;
+	if ($[99] !== T1 || $[100] !== t24 || $[101] !== t9) {
+		t25 = /* @__PURE__ */ jsxs(T1, { children: [t9, t24] });
+		$[99] = T1;
+		$[100] = t24;
+		$[101] = t9;
+		$[102] = t25;
+	} else t25 = $[102];
+	let t26;
+	if ($[103] !== T2 || $[104] !== t10 || $[105] !== t11 || $[106] !== t25) {
+		t26 = /* @__PURE__ */ jsx(T2, {
+			open: t10,
+			onOpenChange: t11,
+			children: t25
+		});
+		$[103] = T2;
+		$[104] = t10;
+		$[105] = t11;
+		$[106] = t25;
+		$[107] = t26;
+	} else t26 = $[107];
+	return t26;
+}
+//#endregion
+export { InsertSymbolDialog_exports as n, InsertSymbolDialog as t };