@stll/folio-react 0.7.0 → 0.8.1

package/dist/TablePropertiesDialog-B_AGrPR8.js

@@ -0,0 +1,434 @@
+import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
+import { r as useFolioUI } from "./folio-ui-BgDDRsUX.js";
+import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
+import { c } from "react-compiler-runtime";
+import { useEffect, useId, useState } from "react";
+import { useTranslations } from "use-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialogs/TablePropertiesDialog.tsx
+/**
+* Table Properties Dialog — width type, width value, alignment.
+*/
+var TablePropertiesDialog_exports = /* @__PURE__ */ __exportAll({ TablePropertiesDialog: () => TablePropertiesDialog });
+function TablePropertiesDialog(t0) {
+	const $ = c(115);
+	const { isOpen, onClose, onApply, currentProps } = t0;
+	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
+	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
+	const t = useTranslations("folio");
+	const id = useId();
+	const [width, setWidth] = useState(currentProps?.width ?? 0);
+	const [widthType, setWidthType] = useState(currentProps?.widthType ?? "auto");
+	const [justification, setJustification] = useState(currentProps?.justification ?? "left");
+	let t1;
+	if ($[0] !== currentProps?.justification || $[1] !== currentProps?.width || $[2] !== currentProps?.widthType || $[3] !== isOpen) {
+		t1 = () => {
+			if (isOpen) {
+				setWidth(currentProps?.width ?? 0);
+				setWidthType(currentProps?.widthType ?? "auto");
+				setJustification(currentProps?.justification ?? "left");
+			}
+		};
+		$[0] = currentProps?.justification;
+		$[1] = currentProps?.width;
+		$[2] = currentProps?.widthType;
+		$[3] = isOpen;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== currentProps || $[6] !== isOpen) {
+		t2 = [isOpen, currentProps];
+		$[5] = currentProps;
+		$[6] = isOpen;
+		$[7] = t2;
+	} else t2 = $[7];
+	useEffect(t1, t2);
+	let t3;
+	if ($[8] !== justification || $[9] !== onApply || $[10] !== onClose || $[11] !== width || $[12] !== widthType) {
+		t3 = () => {
+			const props = { justification: justification === "left" || justification === "center" || justification === "right" ? justification : "left" };
+			if (widthType === "auto") {
+				props.width = null;
+				props.widthType = "auto";
+			} else {
+				props.width = width;
+				props.widthType = widthType;
+			}
+			onApply(props);
+			onClose();
+		};
+		$[8] = justification;
+		$[9] = onApply;
+		$[10] = onClose;
+		$[11] = width;
+		$[12] = widthType;
+		$[13] = t3;
+	} else t3 = $[13];
+	const handleApply = t3;
+	const t4 = `${id}-tp-width-type`;
+	const t5 = `${id}-tp-width`;
+	const t6 = `${id}-tp-align`;
+	let t7;
+	if ($[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
+		t7 = {
+			widthType: t4,
+			width: t5,
+			align: t6
+		};
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	const fieldIds = t7;
+	let t8;
+	if ($[18] !== DialogBackdrop) {
+		t8 = /* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" });
+		$[18] = DialogBackdrop;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t) {
+		t9 = t("dialogs.tableProperties.title");
+		$[20] = t;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== DialogTitle || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx(DialogTitle, {
+			className: "border-b px-5 py-3 text-base font-semibold",
+			children: t9
+		});
+		$[22] = DialogTitle;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	const t11 = fieldIds.widthType;
+	let t12;
+	if ($[25] !== t) {
+		t12 = t("dialogs.tableProperties.widthType");
+		$[25] = t;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== fieldIds.widthType || $[28] !== t12) {
+		t13 = /* @__PURE__ */ jsx("label", {
+			className: "w-20 text-muted-foreground text-[13px]",
+			htmlFor: t11,
+			children: t12
+		});
+		$[27] = fieldIds.widthType;
+		$[28] = t12;
+		$[29] = t13;
+	} else t13 = $[29];
+	const t14 = fieldIds.widthType;
+	let t15;
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = (e) => setWidthType(e.target.value);
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== t) {
+		t16 = t("dialogs.tableProperties.widthTypes.auto");
+		$[31] = t;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t16) {
+		t17 = /* @__PURE__ */ jsx("option", {
+			value: "auto",
+			children: t16
+		});
+		$[33] = t16;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t) {
+		t18 = t("dialogs.tableProperties.widthTypes.fixed");
+		$[35] = t;
+		$[36] = t18;
+	} else t18 = $[36];
+	let t19;
+	if ($[37] !== t18) {
+		t19 = /* @__PURE__ */ jsx("option", {
+			value: "dxa",
+			children: t18
+		});
+		$[37] = t18;
+		$[38] = t19;
+	} else t19 = $[38];
+	let t20;
+	if ($[39] !== t) {
+		t20 = t("dialogs.tableProperties.widthTypes.percentage");
+		$[39] = t;
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] !== t20) {
+		t21 = /* @__PURE__ */ jsx("option", {
+			value: "pct",
+			children: t20
+		});
+		$[41] = t20;
+		$[42] = t21;
+	} else t21 = $[42];
+	let t22;
+	if ($[43] !== fieldIds.widthType || $[44] !== t17 || $[45] !== t19 || $[46] !== t21 || $[47] !== widthType) {
+		t22 = /* @__PURE__ */ jsxs("select", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none",
+			id: t14,
+			onChange: t15,
+			value: widthType,
+			children: [
+				t17,
+				t19,
+				t21
+			]
+		});
+		$[43] = fieldIds.widthType;
+		$[44] = t17;
+		$[45] = t19;
+		$[46] = t21;
+		$[47] = widthType;
+		$[48] = t22;
+	} else t22 = $[48];
+	let t23;
+	if ($[49] !== t13 || $[50] !== t22) {
+		t23 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [t13, t22]
+		});
+		$[49] = t13;
+		$[50] = t22;
+		$[51] = t23;
+	} else t23 = $[51];
+	let t24;
+	if ($[52] !== fieldIds.width || $[53] !== t || $[54] !== width || $[55] !== widthType) {
+		t24 = widthType !== "auto" && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ jsx("label", {
+					className: "w-20 text-muted-foreground text-[13px]",
+					htmlFor: fieldIds.width,
+					children: t("dialogs.tableProperties.widthLabel")
+				}),
+				/* @__PURE__ */ jsx("input", {
+					className: "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none",
+					id: fieldIds.width,
+					min: 0,
+					onChange: (e_0) => setWidth(Number(e_0.target.value) || 0),
+					step: widthType === "pct" ? 5 : 100,
+					type: "number",
+					value: width
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-[11px]",
+					children: widthType === "pct" ? t("dialogs.tableProperties.units.fiftiethsPercent") : t("dialogs.tableProperties.units.twips")
+				})
+			]
+		});
+		$[52] = fieldIds.width;
+		$[53] = t;
+		$[54] = width;
+		$[55] = widthType;
+		$[56] = t24;
+	} else t24 = $[56];
+	const t25 = fieldIds.align;
+	let t26;
+	if ($[57] !== t) {
+		t26 = t("dialogs.tableProperties.alignmentLabel");
+		$[57] = t;
+		$[58] = t26;
+	} else t26 = $[58];
+	let t27;
+	if ($[59] !== fieldIds.align || $[60] !== t26) {
+		t27 = /* @__PURE__ */ jsx("label", {
+			className: "w-20 text-muted-foreground text-[13px]",
+			htmlFor: t25,
+			children: t26
+		});
+		$[59] = fieldIds.align;
+		$[60] = t26;
+		$[61] = t27;
+	} else t27 = $[61];
+	const t28 = fieldIds.align;
+	let t29;
+	if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
+		t29 = (e_1) => setJustification(e_1.target.value);
+		$[62] = t29;
+	} else t29 = $[62];
+	let t30;
+	if ($[63] !== t) {
+		t30 = t("dialogs.tableProperties.alignOptions.left");
+		$[63] = t;
+		$[64] = t30;
+	} else t30 = $[64];
+	let t31;
+	if ($[65] !== t30) {
+		t31 = /* @__PURE__ */ jsx("option", {
+			value: "left",
+			children: t30
+		});
+		$[65] = t30;
+		$[66] = t31;
+	} else t31 = $[66];
+	let t32;
+	if ($[67] !== t) {
+		t32 = t("dialogs.tableProperties.alignOptions.center");
+		$[67] = t;
+		$[68] = t32;
+	} else t32 = $[68];
+	let t33;
+	if ($[69] !== t32) {
+		t33 = /* @__PURE__ */ jsx("option", {
+			value: "center",
+			children: t32
+		});
+		$[69] = t32;
+		$[70] = t33;
+	} else t33 = $[70];
+	let t34;
+	if ($[71] !== t) {
+		t34 = t("dialogs.tableProperties.alignOptions.right");
+		$[71] = t;
+		$[72] = t34;
+	} else t34 = $[72];
+	let t35;
+	if ($[73] !== t34) {
+		t35 = /* @__PURE__ */ jsx("option", {
+			value: "right",
+			children: t34
+		});
+		$[73] = t34;
+		$[74] = t35;
+	} else t35 = $[74];
+	let t36;
+	if ($[75] !== fieldIds.align || $[76] !== justification || $[77] !== t31 || $[78] !== t33 || $[79] !== t35) {
+		t36 = /* @__PURE__ */ jsxs("select", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none",
+			id: t28,
+			onChange: t29,
+			value: justification,
+			children: [
+				t31,
+				t33,
+				t35
+			]
+		});
+		$[75] = fieldIds.align;
+		$[76] = justification;
+		$[77] = t31;
+		$[78] = t33;
+		$[79] = t35;
+		$[80] = t36;
+	} else t36 = $[80];
+	let t37;
+	if ($[81] !== t27 || $[82] !== t36) {
+		t37 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [t27, t36]
+		});
+		$[81] = t27;
+		$[82] = t36;
+		$[83] = t37;
+	} else t37 = $[83];
+	let t38;
+	if ($[84] !== t23 || $[85] !== t24 || $[86] !== t37) {
+		t38 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 px-5 py-4",
+			children: [
+				t23,
+				t24,
+				t37
+			]
+		});
+		$[84] = t23;
+		$[85] = t24;
+		$[86] = t37;
+		$[87] = t38;
+	} else t38 = $[87];
+	let t39;
+	if ($[88] !== t) {
+		t39 = t("common.cancel");
+		$[88] = t;
+		$[89] = t39;
+	} else t39 = $[89];
+	let t40;
+	if ($[90] !== DialogClose || $[91] !== t39) {
+		t40 = /* @__PURE__ */ jsx(DialogClose, {
+			className: "border-input rounded border px-4 py-1.5 text-[13px]",
+			children: t39
+		});
+		$[90] = DialogClose;
+		$[91] = t39;
+		$[92] = t40;
+	} else t40 = $[92];
+	let t41;
+	if ($[93] !== t) {
+		t41 = t("common.apply");
+		$[93] = t;
+		$[94] = t41;
+	} else t41 = $[94];
+	let t42;
+	if ($[95] !== handleApply || $[96] !== t41) {
+		t42 = /* @__PURE__ */ jsx("button", {
+			className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
+			onClick: handleApply,
+			type: "button",
+			children: t41
+		});
+		$[95] = handleApply;
+		$[96] = t41;
+		$[97] = t42;
+	} else t42 = $[97];
+	let t43;
+	if ($[98] !== t40 || $[99] !== t42) {
+		t43 = /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-end gap-2 border-t px-5 py-3",
+			children: [t40, t42]
+		});
+		$[98] = t40;
+		$[99] = t42;
+		$[100] = t43;
+	} else t43 = $[100];
+	let t44;
+	if ($[101] !== DialogPopup || $[102] !== t10 || $[103] !== t38 || $[104] !== t43) {
+		t44 = /* @__PURE__ */ jsxs(DialogPopup, {
+			className: "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[440px] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl",
+			children: [
+				t10,
+				t38,
+				t43
+			]
+		});
+		$[101] = DialogPopup;
+		$[102] = t10;
+		$[103] = t38;
+		$[104] = t43;
+		$[105] = t44;
+	} else t44 = $[105];
+	let t45;
+	if ($[106] !== DialogPortal || $[107] !== t44 || $[108] !== t8) {
+		t45 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t8, t44] });
+		$[106] = DialogPortal;
+		$[107] = t44;
+		$[108] = t8;
+		$[109] = t45;
+	} else t45 = $[109];
+	let t46;
+	if ($[110] !== Dialog || $[111] !== handleOpenChange || $[112] !== isOpen || $[113] !== t45) {
+		t46 = /* @__PURE__ */ jsx(Dialog, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			children: t45
+		});
+		$[110] = Dialog;
+		$[111] = handleOpenChange;
+		$[112] = isOpen;
+		$[113] = t45;
+		$[114] = t46;
+	} else t46 = $[114];
+	return t46;
+}
+//#endregion
+export { TablePropertiesDialog_exports as n, TablePropertiesDialog as t };

package/dist/compat/eigenpal.d.ts

@@ -1,4 +1,4 @@
-import { c as DocxEditorRef, i as renderAsync, n as EditorHandle, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle } from "../renderAsync-ChQI9UJG.js";
+import { c as DocxEditorRef, i as renderAsync, n as EditorHandle, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle } from "../renderAsync-BmxQE7iO.js";
 import { ReactNode } from "react";
 import { CreateEmptyDocumentOptions, createDocumentWithText, createEmptyDocument } from "@stll/folio-core/utils/createDocument";
 

package/dist/compat/eigenpal.js

@@ -1,4 +1,4 @@
-import { n as DocxEditor$1, t as renderAsync } from "../renderAsync-evdyE_GW.js";
+import { n as DocxEditor$1, t as renderAsync } from "../renderAsync-BtWYvQMT.js";
 import { t as messages_exports } from "../messages.js";
 import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";