@stll/folio-react 0.25.3 → 0.27.0

package/dist/SetNumberingValueDialog-CDQGDvP1.js

@@ -0,0 +1,233 @@
+import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { a as DIALOG_LABEL_CLASS, 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 { useId, useState } from "react";
+import { useTranslations } from "use-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialogs/SetNumberingValueDialog.tsx
+/** `w:startOverride` is a non-negative decimal; the input stops far below its limit. */
+const MIN_VALUE = 0;
+const MAX_VALUE = 32767;
+const DEFAULT_VALUE = 1;
+/** *Set Numbering Value*: start the selected item's list over at a value. */
+function SetNumberingValueDialog(props) {
+	const $ = c(2);
+	if (!props.isOpen) return null;
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(SetNumberingValueDialogForm, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function SetNumberingValueDialogForm(t0) {
+	const $ = c(59);
+	const { isOpen, onClose, onApply } = 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 [text, setText] = useState(String(DEFAULT_VALUE));
+	const inputId = `${id}-numbering-value`;
+	let t1;
+	if ($[0] !== text) {
+		t1 = text.trim() === "" ? NaN : Number(text);
+		$[0] = text;
+		$[1] = t1;
+	} else t1 = $[1];
+	const parsed = t1;
+	let t2;
+	if ($[2] !== parsed) {
+		t2 = Number.isFinite(parsed);
+		$[2] = parsed;
+		$[3] = t2;
+	} else t2 = $[3];
+	const valid = t2;
+	let t3;
+	if ($[4] !== onApply || $[5] !== onClose || $[6] !== parsed || $[7] !== valid) {
+		t3 = () => {
+			if (!valid) return;
+			onApply(Math.min(MAX_VALUE, Math.max(MIN_VALUE, Math.trunc(parsed))));
+			onClose();
+		};
+		$[4] = onApply;
+		$[5] = onClose;
+		$[6] = parsed;
+		$[7] = valid;
+		$[8] = t3;
+	} else t3 = $[8];
+	const apply = t3;
+	let t4;
+	if ($[9] !== DialogBackdrop) {
+		t4 = /* @__PURE__ */ jsx(DialogBackdrop, { className: DIALOG_BACKDROP_CLASS });
+		$[9] = DialogBackdrop;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t) {
+		t5 = t("dialogs.setNumberingValue.title");
+		$[11] = t;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== DialogTitle || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsx(DialogTitle, {
+			className: DIALOG_TITLE_CLASS,
+			children: t5
+		});
+		$[13] = DialogTitle;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== t) {
+		t7 = t("dialogs.setNumberingValue.valueLabel");
+		$[16] = t;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t7) {
+		t8 = /* @__PURE__ */ jsx("span", {
+			className: DIALOG_LABEL_CLASS,
+			children: t7
+		});
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = (event) => setText(event.target.value);
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== apply) {
+		t10 = (event_0) => {
+			if (event_0.key === "Enter") {
+				event_0.preventDefault();
+				apply();
+			}
+		};
+		$[21] = apply;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== inputId || $[24] !== t10 || $[25] !== text) {
+		t11 = /* @__PURE__ */ jsx("input", {
+			className: DIALOG_INPUT_CLASS,
+			id: inputId,
+			max: MAX_VALUE,
+			min: MIN_VALUE,
+			onChange: t9,
+			onKeyDown: t10,
+			type: "number",
+			value: text
+		});
+		$[23] = inputId;
+		$[24] = t10;
+		$[25] = text;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== inputId || $[28] !== t11 || $[29] !== t8) {
+		t12 = /* @__PURE__ */ jsx("div", {
+			className: DIALOG_BODY_CLASS,
+			children: /* @__PURE__ */ jsxs("label", {
+				className: "flex flex-col gap-1",
+				htmlFor: inputId,
+				children: [t8, t11]
+			})
+		});
+		$[27] = inputId;
+		$[28] = t11;
+		$[29] = t8;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== t) {
+		t13 = t("common.cancel");
+		$[31] = t;
+		$[32] = t13;
+	} else t13 = $[32];
+	let t14;
+	if ($[33] !== DialogClose || $[34] !== t13) {
+		t14 = /* @__PURE__ */ jsx(DialogClose, {
+			className: DIALOG_SECONDARY_BUTTON_CLASS,
+			children: t13
+		});
+		$[33] = DialogClose;
+		$[34] = t13;
+		$[35] = t14;
+	} else t14 = $[35];
+	const t15 = !valid;
+	let t16;
+	if ($[36] !== t) {
+		t16 = t("common.apply");
+		$[36] = t;
+		$[37] = t16;
+	} else t16 = $[37];
+	let t17;
+	if ($[38] !== apply || $[39] !== t15 || $[40] !== t16) {
+		t17 = /* @__PURE__ */ jsx("button", {
+			className: DIALOG_PRIMARY_BUTTON_CLASS,
+			disabled: t15,
+			onClick: apply,
+			type: "button",
+			children: t16
+		});
+		$[38] = apply;
+		$[39] = t15;
+		$[40] = t16;
+		$[41] = t17;
+	} else t17 = $[41];
+	let t18;
+	if ($[42] !== t14 || $[43] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("div", {
+			className: DIALOG_FOOTER_CLASS,
+			children: [t14, t17]
+		});
+		$[42] = t14;
+		$[43] = t17;
+		$[44] = t18;
+	} else t18 = $[44];
+	let t19;
+	if ($[45] !== DialogPopup || $[46] !== t12 || $[47] !== t18 || $[48] !== t6) {
+		t19 = /* @__PURE__ */ jsxs(DialogPopup, {
+			className: DIALOG_POPUP_CLASS,
+			children: [
+				t6,
+				t12,
+				t18
+			]
+		});
+		$[45] = DialogPopup;
+		$[46] = t12;
+		$[47] = t18;
+		$[48] = t6;
+		$[49] = t19;
+	} else t19 = $[49];
+	let t20;
+	if ($[50] !== DialogPortal || $[51] !== t19 || $[52] !== t4) {
+		t20 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t4, t19] });
+		$[50] = DialogPortal;
+		$[51] = t19;
+		$[52] = t4;
+		$[53] = t20;
+	} else t20 = $[53];
+	let t21;
+	if ($[54] !== Dialog || $[55] !== handleOpenChange || $[56] !== isOpen || $[57] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Dialog, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			children: t20
+		});
+		$[54] = Dialog;
+		$[55] = handleOpenChange;
+		$[56] = isOpen;
+		$[57] = t20;
+		$[58] = t21;
+	} else t21 = $[58];
+	return t21;
+}
+//#endregion
+export { SetNumberingValueDialog };

package/dist/TablePropertiesDialog-Vu0HXQz6.js

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

package/dist/{TextContextMenu-Bqth8itn.js → TextContextMenu-DZ3AUFKh.js}

@@ -379,9 +379,11 @@ const TextContextMenu = ({ isOpen, position, hasSelection, isEditable, hasClipbo
 		onAction,
 		onClose
 	]);
-	useEffect(() => {
+	const [previousOpen, setPreviousOpen] = useState(isOpen);
+	if (previousOpen !== isOpen) {
+		setPreviousOpen(isOpen);
 		if (isOpen) setHighlightedIndex(0);
-	}, [isOpen]);
+	}
 	const getMenuStyle = useCallback(() => {
 		const menuWidth = 220;
 		const menuHeight = menuItems.length * 36 + 16;

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-JTB5ldQI.js";
+import { c as DocxEditorRef, i as renderAsync, n as EditorHandle, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle } from "../renderAsync-B9AIgM8K.js";
 import { ReactNode } from "react";
 import { CreateEmptyDocumentOptions, createDocumentWithText, createEmptyDocument } from "@stll/folio-core/utils/createDocument";
 //#region src/compat/eigenpal.d.ts

package/dist/compat/eigenpal.js

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