@stll/folio-react 0.6.0 → 0.7.0

package/dist/TablePropertiesDialog-PQxKKM0Y.js

@@ -0,0 +1,344 @@
+import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
+import { r as useFolioUI } from "./folio-ui-C-85DSuK.js";
+import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
+import { c } from "react-compiler-runtime";
+import { useEffect, useId, useState } from "react";
+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(75);
+	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 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] !== DialogTitle) {
+		t9 = /* @__PURE__ */ jsx(DialogTitle, {
+			className: "border-b px-5 py-3 text-base font-semibold",
+			children: "Table Properties"
+		});
+		$[20] = DialogTitle;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== fieldIds.widthType) {
+		t10 = /* @__PURE__ */ jsx("label", {
+			className: "w-20 text-muted-foreground text-[13px]",
+			htmlFor: fieldIds.widthType,
+			children: "Width type"
+		});
+		$[22] = fieldIds.widthType;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (e) => setWidthType(e.target.value);
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	let t13;
+	let t14;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx("option", {
+			value: "auto",
+			children: "Auto"
+		});
+		t13 = /* @__PURE__ */ jsx("option", {
+			value: "dxa",
+			children: "Fixed (twips)"
+		});
+		t14 = /* @__PURE__ */ jsx("option", {
+			value: "pct",
+			children: "Percentage"
+		});
+		$[25] = t12;
+		$[26] = t13;
+		$[27] = t14;
+	} else {
+		t12 = $[25];
+		t13 = $[26];
+		t14 = $[27];
+	}
+	let t15;
+	if ($[28] !== fieldIds.widthType || $[29] !== widthType) {
+		t15 = /* @__PURE__ */ jsxs("select", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none",
+			id: fieldIds.widthType,
+			onChange: t11,
+			value: widthType,
+			children: [
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[28] = fieldIds.widthType;
+		$[29] = widthType;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== t10 || $[32] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [t10, t15]
+		});
+		$[31] = t10;
+		$[32] = t15;
+		$[33] = t16;
+	} else t16 = $[33];
+	let t17;
+	if ($[34] !== fieldIds.width || $[35] !== width || $[36] !== widthType) {
+		t17 = 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: "Width"
+				}),
+				/* @__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" ? "(50ths of %)" : "tw"
+				})
+			]
+		});
+		$[34] = fieldIds.width;
+		$[35] = width;
+		$[36] = widthType;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== fieldIds.align) {
+		t18 = /* @__PURE__ */ jsx("label", {
+			className: "w-20 text-muted-foreground text-[13px]",
+			htmlFor: fieldIds.align,
+			children: "Alignment"
+		});
+		$[38] = fieldIds.align;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = (e_1) => setJustification(e_1.target.value);
+		$[40] = t19;
+	} else t19 = $[40];
+	let t20;
+	let t21;
+	let t22;
+	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx("option", {
+			value: "left",
+			children: "Left"
+		});
+		t21 = /* @__PURE__ */ jsx("option", {
+			value: "center",
+			children: "Center"
+		});
+		t22 = /* @__PURE__ */ jsx("option", {
+			value: "right",
+			children: "Right"
+		});
+		$[41] = t20;
+		$[42] = t21;
+		$[43] = t22;
+	} else {
+		t20 = $[41];
+		t21 = $[42];
+		t22 = $[43];
+	}
+	let t23;
+	if ($[44] !== fieldIds.align || $[45] !== justification) {
+		t23 = /* @__PURE__ */ jsxs("select", {
+			className: "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none",
+			id: fieldIds.align,
+			onChange: t19,
+			value: justification,
+			children: [
+				t20,
+				t21,
+				t22
+			]
+		});
+		$[44] = fieldIds.align;
+		$[45] = justification;
+		$[46] = t23;
+	} else t23 = $[46];
+	let t24;
+	if ($[47] !== t18 || $[48] !== t23) {
+		t24 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [t18, t23]
+		});
+		$[47] = t18;
+		$[48] = t23;
+		$[49] = t24;
+	} else t24 = $[49];
+	let t25;
+	if ($[50] !== t16 || $[51] !== t17 || $[52] !== t24) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 px-5 py-4",
+			children: [
+				t16,
+				t17,
+				t24
+			]
+		});
+		$[50] = t16;
+		$[51] = t17;
+		$[52] = t24;
+		$[53] = t25;
+	} else t25 = $[53];
+	let t26;
+	if ($[54] !== DialogClose) {
+		t26 = /* @__PURE__ */ jsx(DialogClose, {
+			className: "border-input rounded border px-4 py-1.5 text-[13px]",
+			children: "Cancel"
+		});
+		$[54] = DialogClose;
+		$[55] = t26;
+	} else t26 = $[55];
+	let t27;
+	if ($[56] !== handleApply) {
+		t27 = /* @__PURE__ */ jsx("button", {
+			className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
+			onClick: handleApply,
+			type: "button",
+			children: "Apply"
+		});
+		$[56] = handleApply;
+		$[57] = t27;
+	} else t27 = $[57];
+	let t28;
+	if ($[58] !== t26 || $[59] !== t27) {
+		t28 = /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-end gap-2 border-t px-5 py-3",
+			children: [t26, t27]
+		});
+		$[58] = t26;
+		$[59] = t27;
+		$[60] = t28;
+	} else t28 = $[60];
+	let t29;
+	if ($[61] !== DialogPopup || $[62] !== t25 || $[63] !== t28 || $[64] !== t9) {
+		t29 = /* @__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: [
+				t9,
+				t25,
+				t28
+			]
+		});
+		$[61] = DialogPopup;
+		$[62] = t25;
+		$[63] = t28;
+		$[64] = t9;
+		$[65] = t29;
+	} else t29 = $[65];
+	let t30;
+	if ($[66] !== DialogPortal || $[67] !== t29 || $[68] !== t8) {
+		t30 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t8, t29] });
+		$[66] = DialogPortal;
+		$[67] = t29;
+		$[68] = t8;
+		$[69] = t30;
+	} else t30 = $[69];
+	let t31;
+	if ($[70] !== Dialog || $[71] !== handleOpenChange || $[72] !== isOpen || $[73] !== t30) {
+		t31 = /* @__PURE__ */ jsx(Dialog, {
+			open: isOpen,
+			onOpenChange: handleOpenChange,
+			children: t30
+		});
+		$[70] = Dialog;
+		$[71] = handleOpenChange;
+		$[72] = isOpen;
+		$[73] = t30;
+		$[74] = t31;
+	} else t31 = $[74];
+	return t31;
+}
+//#endregion
+export { TablePropertiesDialog_exports as n, TablePropertiesDialog as t };

package/dist/{TextContextMenu-CG0V37wi.js → TextContextMenu-Ci7-M4oU.js}

@@ -1,3 +1,4 @@
+import { c } from "react-compiler-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ArrowDownToLine, ArrowLeftToLine, ArrowRightToLine, ArrowUpToLine, ClipboardPaste, Copy, Grid3x3, MessageSquarePlus, Scissors, SquareDashed, TextSelect, Trash2 } from "lucide-react";
 import { createPortal } from "react-dom";
@@ -94,67 +95,187 @@ function itemIconColor(item) {
 	if (item.emphasis) return EMPHASIS_COLOR;
 	return "var(--muted-foreground, var(--doc-text-muted, #737373))";
 }
-const MenuItemComponent = ({ item, onClick, isHighlighted, onMouseEnter }) => {
-	if (item.action === "separator") return /* @__PURE__ */ jsx("div", {
-		className: "docx-text-context-menu-separator",
-		style: {
-			height: "1px",
-			backgroundColor: "var(--border, var(--doc-border, #e5e7eb))",
-			margin: "4px 12px"
-		}
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
-		type: "button",
-		className: `docx-text-context-menu-item ${isHighlighted ? "docx-text-context-menu-item-highlighted" : ""} ${item.disabled ? "docx-text-context-menu-item-disabled" : ""}`,
-		onClick,
-		onMouseEnter,
-		disabled: item.disabled,
-		role: "menuitem",
-		"aria-disabled": item.disabled,
-		style: {
+const MenuItemComponent = (t0) => {
+	const $ = c(45);
+	const { item, isHighlighted, navigableIndex, onItemClick, onItemEnter } = t0;
+	let t1;
+	if ($[0] !== item || $[1] !== onItemClick) {
+		t1 = () => onItemClick(item);
+		$[0] = item;
+		$[1] = onItemClick;
+		$[2] = t1;
+	} else t1 = $[2];
+	const handleClick = t1;
+	let t2;
+	if ($[3] !== item.disabled || $[4] !== navigableIndex || $[5] !== onItemEnter) {
+		t2 = () => {
+			if (navigableIndex !== -1 && !item.disabled) onItemEnter(navigableIndex);
+		};
+		$[3] = item.disabled;
+		$[4] = navigableIndex;
+		$[5] = onItemEnter;
+		$[6] = t2;
+	} else t2 = $[6];
+	const handleMouseEnter = t2;
+	if (item.action === "separator") {
+		let t3;
+		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = /* @__PURE__ */ jsx("div", {
+				className: "docx-text-context-menu-separator",
+				style: {
+					height: "1px",
+					backgroundColor: "var(--border, var(--doc-border, #e5e7eb))",
+					margin: "4px 12px"
+				}
+			});
+			$[7] = t3;
+		} else t3 = $[7];
+		return t3;
+	}
+	const t3 = `docx-text-context-menu-item ${isHighlighted ? "docx-text-context-menu-item-highlighted" : ""} ${item.disabled ? "docx-text-context-menu-item-disabled" : ""}`;
+	const t4 = item.disabled;
+	const t5 = item.disabled;
+	const t6 = isHighlighted && !item.disabled ? "var(--accent, var(--doc-primary-light, #f3f4f6))" : "transparent";
+	const t7 = item.disabled ? "not-allowed" : "pointer";
+	let t8;
+	if ($[8] !== item) {
+		t8 = itemTextColor(item);
+		$[8] = item;
+		$[9] = t8;
+	} else t8 = $[9];
+	const t9 = item.emphasis ? 500 : 400;
+	const t10 = item.disabled ? .6 : 1;
+	let t11;
+	if ($[10] !== t10 || $[11] !== t6 || $[12] !== t7 || $[13] !== t8 || $[14] !== t9) {
+		t11 = {
 			display: "flex",
 			alignItems: "center",
 			gap: "10px",
 			width: "100%",
 			padding: "8px 12px",
 			border: "none",
-			background: isHighlighted && !item.disabled ? "var(--accent, var(--doc-primary-light, #f3f4f6))" : "transparent",
-			cursor: item.disabled ? "not-allowed" : "pointer",
+			background: t6,
+			cursor: t7,
 			fontSize: "13px",
-			color: itemTextColor(item),
-			fontWeight: item.emphasis ? 500 : 400,
+			color: t8,
+			fontWeight: t9,
 			textAlign: "left",
-			opacity: item.disabled ? .6 : 1
-		},
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				style: {
-					display: "flex",
-					color: itemIconColor(item)
-				},
-				children: item.icon ?? getActionIcon(item.action)
-			}),
-			/* @__PURE__ */ jsx("span", {
-				style: { flex: 1 },
-				children: item.label
-			}),
-			item.shortcut && /* @__PURE__ */ jsx("span", {
-				style: {
-					fontSize: "11px",
-					color: "var(--muted-foreground, var(--doc-text-subtle, #737373))",
-					fontFamily: "monospace"
-				},
-				children: item.shortcut
-			})
-		]
-	}), item.dividerAfter && /* @__PURE__ */ jsx("div", {
-		className: "docx-text-context-menu-separator",
-		style: {
-			height: "1px",
-			backgroundColor: "var(--border, var(--doc-border, #e5e7eb))",
-			margin: "4px 12px"
-		}
-	})] });
+			opacity: t10
+		};
+		$[10] = t10;
+		$[11] = t6;
+		$[12] = t7;
+		$[13] = t8;
+		$[14] = t9;
+		$[15] = t11;
+	} else t11 = $[15];
+	let t12;
+	if ($[16] !== item) {
+		t12 = itemIconColor(item);
+		$[16] = item;
+		$[17] = t12;
+	} else t12 = $[17];
+	let t13;
+	if ($[18] !== t12) {
+		t13 = {
+			display: "flex",
+			color: t12
+		};
+		$[18] = t12;
+		$[19] = t13;
+	} else t13 = $[19];
+	let t14;
+	if ($[20] !== item.action || $[21] !== item.icon) {
+		t14 = item.icon ?? getActionIcon(item.action);
+		$[20] = item.action;
+		$[21] = item.icon;
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] !== t13 || $[24] !== t14) {
+		t15 = /* @__PURE__ */ jsx("span", {
+			style: t13,
+			children: t14
+		});
+		$[23] = t13;
+		$[24] = t14;
+		$[25] = t15;
+	} else t15 = $[25];
+	let t16;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = { flex: 1 };
+		$[26] = t16;
+	} else t16 = $[26];
+	let t17;
+	if ($[27] !== item.label) {
+		t17 = /* @__PURE__ */ jsx("span", {
+			style: t16,
+			children: item.label
+		});
+		$[27] = item.label;
+		$[28] = t17;
+	} else t17 = $[28];
+	let t18;
+	if ($[29] !== item.shortcut) {
+		t18 = item.shortcut && /* @__PURE__ */ jsx("span", {
+			style: {
+				fontSize: "11px",
+				color: "var(--muted-foreground, var(--doc-text-subtle, #737373))",
+				fontFamily: "monospace"
+			},
+			children: item.shortcut
+		});
+		$[29] = item.shortcut;
+		$[30] = t18;
+	} else t18 = $[30];
+	let t19;
+	if ($[31] !== handleClick || $[32] !== handleMouseEnter || $[33] !== item.disabled || $[34] !== t11 || $[35] !== t15 || $[36] !== t17 || $[37] !== t18 || $[38] !== t3) {
+		t19 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: t3,
+			onClick: handleClick,
+			onMouseEnter: handleMouseEnter,
+			disabled: t4,
+			role: "menuitem",
+			"aria-disabled": t5,
+			style: t11,
+			children: [
+				t15,
+				t17,
+				t18
+			]
+		});
+		$[31] = handleClick;
+		$[32] = handleMouseEnter;
+		$[33] = item.disabled;
+		$[34] = t11;
+		$[35] = t15;
+		$[36] = t17;
+		$[37] = t18;
+		$[38] = t3;
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] !== item.dividerAfter) {
+		t20 = item.dividerAfter && /* @__PURE__ */ jsx("div", {
+			className: "docx-text-context-menu-separator",
+			style: {
+				height: "1px",
+				backgroundColor: "var(--border, var(--doc-border, #e5e7eb))",
+				margin: "4px 12px"
+			}
+		});
+		$[40] = item.dividerAfter;
+		$[41] = t20;
+	} else t20 = $[41];
+	let t21;
+	if ($[42] !== t19 || $[43] !== t20) {
+		t21 = /* @__PURE__ */ jsxs(Fragment, { children: [t19, t20] });
+		$[42] = t19;
+		$[43] = t20;
+		$[44] = t21;
+	} else t21 = $[44];
+	return t21;
 };
 const TextContextMenu = ({ isOpen, position, hasSelection, isEditable, hasClipboardContent = true, onAction, onClose, items, className = "" }) => {
 	const menuRef = useRef(null);
@@ -193,7 +314,7 @@ const TextContextMenu = ({ isOpen, position, hasSelection, isEditable, hasClipbo
 		if (item.dividerAfter !== void 0) menuItem.dividerAfter = item.dividerAfter;
 		return menuItem;
 	});
-	const navigableItems = menuItems.filter((item) => item.action !== "separator");
+	const navigableItems = menuItems.filter((item_0) => item_0.action !== "separator");
 	useEffect(() => {
 		if (!isOpen) return;
 		const handleClickOutside = (e) => {
@@ -209,22 +330,22 @@ const TextContextMenu = ({ isOpen, position, hasSelection, isEditable, hasClipbo
 	}, [isOpen, onClose]);
 	useEffect(() => {
 		if (!isOpen) return;
-		const handleKeyDown = (e) => {
-			switch (e.key) {
+		const handleKeyDown = (e_0) => {
+			switch (e_0.key) {
 				case "Escape":
-					e.preventDefault();
+					e_0.preventDefault();
 					onClose();
 					break;
 				case "ArrowDown":
-					e.preventDefault();
-					setHighlightedIndex((prev) => {
-						let next = (prev + 1) % navigableItems.length;
-						while (navigableItems[next]?.disabled && next !== prev) next = (next + 1) % navigableItems.length;
-						return next;
+					e_0.preventDefault();
+					setHighlightedIndex((prev_0) => {
+						let next_0 = (prev_0 + 1) % navigableItems.length;
+						while (navigableItems[next_0]?.disabled && next_0 !== prev_0) next_0 = (next_0 + 1) % navigableItems.length;
+						return next_0;
 					});
 					break;
 				case "ArrowUp":
-					e.preventDefault();
+					e_0.preventDefault();
 					setHighlightedIndex((prev) => {
 						let next = (prev - 1 + navigableItems.length) % navigableItems.length;
 						while (navigableItems[next]?.disabled && next !== prev) next = (next - 1 + navigableItems.length) % navigableItems.length;
@@ -232,10 +353,10 @@ const TextContextMenu = ({ isOpen, position, hasSelection, isEditable, hasClipbo
 					});
 					break;
 				case "Enter": {
-					e.preventDefault();
-					const item = navigableItems[highlightedIndex];
-					if (item && !item.disabled) {
-						onAction(item.action);
+					e_0.preventDefault();
+					const item_1 = navigableItems[highlightedIndex];
+					if (item_1 && !item_1.disabled) {
+						onAction(item_1.action);
 						onClose();
 					}
 					break;
@@ -282,11 +403,11 @@ const TextContextMenu = ({ isOpen, position, hasSelection, isEditable, hasClipbo
 		position,
 		menuItems.length
 	]);
-	const handleItemClick = (item) => {
-		if (item.disabled) return;
-		onAction(item.action);
+	const handleItemClick = useCallback((item_2) => {
+		if (item_2.disabled) return;
+		onAction(item_2.action);
 		onClose();
-	};
+	}, [onAction, onClose]);
 	if (!isOpen) return null;
 	const menu = /* @__PURE__ */ jsx("div", {
 		ref: menuRef,
@@ -294,16 +415,15 @@ const TextContextMenu = ({ isOpen, position, hasSelection, isEditable, hasClipbo
 		style: getMenuStyle(),
 		role: "menu",
 		"aria-label": "Text editing menu",
-		children: menuItems.map((item, index) => {
-			const navigableIndex = navigableItems.indexOf(item);
+		children: menuItems.map((item_3, index) => {
+			const navigableIndex = navigableItems.indexOf(item_3);
 			return /* @__PURE__ */ jsx(MenuItemComponent, {
-				item,
-				onClick: () => handleItemClick(item),
+				item: item_3,
 				isHighlighted: navigableIndex === highlightedIndex,
-				onMouseEnter: () => {
-					if (navigableIndex !== -1 && !item.disabled) setHighlightedIndex(navigableIndex);
-				}
-			}, `${item.action}-${index}`);
+				navigableIndex,
+				onItemClick: handleItemClick,
+				onItemEnter: setHighlightedIndex
+			}, `${item_3.action}-${index}`);
 		})
 	});
 	if (typeof document === "undefined") return menu;

package/dist/compat/eigenpal.d.ts

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