@sheetxl/studio-vanilla 0.8.0-beta.10 → 0.8.0-beta.12

package/browser/esm/CE8E_UvKufBd3-Vt.mjs

@@ -0,0 +1,569 @@
+/**
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.12
+*
+* (C) 2026-present SheetXL Inc. & Michael T. Ford
+* License: The license can be found at https://www.sheetxl.com/license.
+*/
+import { r as e } from "./Cf_c9xyOrFxlsKq6.mjs";
+import { i as t, r as n } from "./D29bSsh1Lz8891Rs.mjs";
+import { C as r, m as i } from "./Cif0315haNLmyMj-.mjs";
+import { r as a } from "./BoYTs2k2yWAKW5LM.mjs";
+import { b as o, dt as s, et as c, f as l, gt as u } from "./B1mhVM8eRIyuL-VB.mjs";
+import { J as d, _t as f, m as p } from "./COPR5sXYEAeM73Ep.mjs";
+import { _ as m, g as h, t as g, v as _ } from "./DAOjpr33PSwrKpc0.mjs";
+import { E as v, H as y, M as b, P as x, Q as S, V as C, _t as w, ct as T, f as E, lt as D, ut as O } from "./DJpfJorMrLhI9gOT.mjs";
+import { r as k } from "./CW9UkULY0jchroYa.mjs";
+import { t as A } from "./IHk5INXMVCzM8mcG.mjs";
+import { O as j } from "./_9nyq5XWoIo-JhAp.mjs";
+import { t as M } from "./CImdnjQtd2Yn7uXl.mjs";
+var N = e(t(), 1), P = e(n(), 1), F = S((0, P.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }), "Person");
+function I(e) {
+	return m("MuiAvatar", e);
+}
+h("MuiAvatar", [
+	"root",
+	"colorDefault",
+	"circular",
+	"rounded",
+	"square",
+	"img",
+	"fallback"
+]);
+var L = O("div", {
+	name: "MuiAvatar",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [
+			t.root,
+			t[n.variant],
+			n.colorDefault && t.colorDefault
+		];
+	}
+})(D(({ theme: e }) => ({
+	position: "relative",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	width: 40,
+	height: 40,
+	fontFamily: e.typography.fontFamily,
+	fontSize: e.typography.pxToRem(20),
+	lineHeight: 1,
+	borderRadius: "50%",
+	overflow: "hidden",
+	userSelect: "none",
+	variants: [
+		{
+			props: { variant: "rounded" },
+			style: { borderRadius: (e.vars || e).shape.borderRadius }
+		},
+		{
+			props: { variant: "square" },
+			style: { borderRadius: 0 }
+		},
+		{
+			props: { colorDefault: !0 },
+			style: {
+				color: (e.vars || e).palette.background.default,
+				"@media (forced-colors: active)": {
+					boxSizing: "border-box",
+					border: "1px solid ButtonBorder"
+				},
+				...e.vars ? { backgroundColor: e.vars.palette.Avatar.defaultBg } : {
+					backgroundColor: e.palette.grey[400],
+					...e.applyStyles("dark", { backgroundColor: e.palette.grey[600] })
+				}
+			}
+		}
+	]
+}))), R = O("img", {
+	name: "MuiAvatar",
+	slot: "Img"
+})({
+	width: "100%",
+	height: "100%",
+	textAlign: "center",
+	objectFit: "cover",
+	color: "transparent",
+	textIndent: 1e4
+}), z = O(F, {
+	name: "MuiAvatar",
+	slot: "Fallback"
+})({
+	width: "75%",
+	height: "75%"
+}), B = N.forwardRef(function(e, t) {
+	let n = T({
+		props: e,
+		name: "MuiAvatar"
+	}), { alt: r, children: i, className: a, component: o = "div", slots: s = {}, slotProps: c = {}, sizes: l, src: u, srcSet: d, variant: f = "circular", ...p } = n, m = null, h = {
+		...n,
+		component: o,
+		variant: f
+	}, { crossOrigin: g, referrerPolicy: v } = (typeof c.img == "function" ? c.img(h) : c.img) ?? {}, b = function(e, t, n, r) {
+		let [i, a] = N.useState(!1);
+		return N.useEffect(() => {
+			if (!e && !t) return;
+			a(!1);
+			let i = !0, o = new Image();
+			return o.onload = () => {
+				i && a("loaded");
+			}, o.onerror = () => {
+				i && a("error");
+			}, o.crossOrigin = n, o.referrerPolicy = r, o.src = e, t && (o.srcset = t), () => {
+				i = !1;
+			};
+		}, [
+			n,
+			r,
+			e,
+			t
+		]), i;
+	}(u, d, g, v), x = u || d, S = x && b !== "error";
+	h.colorDefault = !S, delete h.ownerState;
+	let C = ((e) => {
+		let { classes: t, variant: n, colorDefault: r } = e;
+		return w({
+			root: [
+				"root",
+				n,
+				r && "colorDefault"
+			],
+			img: ["img"],
+			fallback: ["fallback"]
+		}, I, t);
+	})(h), E = {
+		slots: s,
+		slotProps: c
+	}, [D, O] = y("root", {
+		ref: t,
+		className: _(C.root, a),
+		elementType: L,
+		externalForwardedProps: {
+			...E,
+			component: o,
+			...p
+		},
+		ownerState: h
+	}), [k, A] = y("img", {
+		className: C.img,
+		elementType: R,
+		externalForwardedProps: E,
+		additionalProps: {
+			alt: r,
+			src: u,
+			srcSet: d,
+			sizes: l
+		},
+		ownerState: h
+	}), [j, M] = y("fallback", {
+		className: C.fallback,
+		elementType: z,
+		externalForwardedProps: E,
+		shouldForwardComponentProp: !0,
+		ownerState: h
+	});
+	return m = S ? (0, P.jsx)(k, { ...A }) : i || i === 0 ? i : x && r ? r[0] : (0, P.jsx)(j, { ...M }), (0, P.jsx)(D, {
+		...O,
+		children: m
+	});
+}), V = {
+	placeholder: i("comment.placeholder"),
+	reply: i("comment.reply"),
+	post: i("comment.post"),
+	save: i("comment.save"),
+	cancel: i("comment.cancel"),
+	edit: i("comment.edit"),
+	delete: i("comment.delete"),
+	resolve: i("comment.resolve"),
+	reopen: i("comment.reopen"),
+	resolved: i("comment.resolved"),
+	more: i("comment.more"),
+	unknownAuthor: i("comment.unknownAuthor")
+}, H = (e) => {
+	let { initialValue: t = "", placeholder: n, submitLabel: r, cancelLabel: i, alwaysShowActions: a = !1, onSubmit: o, onCancel: s, refInput: c } = e, [l, u] = (0, N.useState)(t), d = l.trim().length === 0, f = () => {
+		d || (o(l), u(""));
+	}, p = () => {
+		u(""), s?.();
+	};
+	return (0, P.jsxs)(g, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: .75
+		},
+		children: [(0, P.jsx)(A, {
+			className: "sxl-comment-field",
+			inputRef: c,
+			value: l,
+			placeholder: n,
+			multiline: !0,
+			minRows: 1,
+			maxRows: 8,
+			size: "small",
+			fullWidth: !0,
+			sx: { "& .MuiInputBase-root": {
+				padding: "4px 8px",
+				fontSize: "0.875rem",
+				lineHeight: 1.43
+			} },
+			onChange: (e) => u(e.target.value),
+			onContextMenu: (e) => {
+				e.stopPropagation();
+			},
+			onKeyDown: (e) => {
+				e.stopPropagation(), e.key === "Enter" && (e.ctrlKey || e.metaKey) ? (e.preventDefault(), f()) : e.key !== "Escape" || !s && d || (e.preventDefault(), p());
+			},
+			slotProps: { htmlInput: {
+				"aria-label": n,
+				style: { userSelect: "text" }
+			} }
+		}), a || !d ? (0, P.jsxs)(g, {
+			sx: {
+				display: "flex",
+				justifyContent: "flex-end",
+				gap: .75
+			},
+			children: [(0, P.jsx)(v, {
+				size: "small",
+				onClick: p,
+				children: i
+			}), (0, P.jsx)(v, {
+				size: "small",
+				variant: "contained",
+				disabled: d,
+				onClick: f,
+				children: r
+			})]
+		}) : null]
+	});
+}, U = (e) => {
+	let { author: t, date: n, content: r, editor: i, trailing: o, overhang: c = !1, onMenu: l } = e, p = s(), m = u(), h = t?.getDisplayName() || p(V.unknownAuthor), _ = f(n, { locale: m });
+	return (0, P.jsxs)(g, {
+		className: "sxl-comment-entry",
+		sx: {
+			display: "flex",
+			gap: 1,
+			minWidth: 0
+		},
+		children: [(0, P.jsx)(B, {
+			"aria-hidden": !0,
+			sx: {
+				width: 28,
+				height: 28,
+				fontSize: "0.75rem",
+				bgcolor: "primary.main",
+				color: "primary.contrastText",
+				marginLeft: c ? "-26px" : void 0
+			},
+			children: d(h)
+		}), (0, P.jsxs)(g, {
+			sx: {
+				flex: "1 1 auto",
+				minWidth: 0
+			},
+			children: [
+				(0, P.jsxs)(g, {
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						gap: .75,
+						minHeight: 28
+					},
+					children: [
+						(0, P.jsx)(b, {
+							className: "sxl-comment-author",
+							variant: "subtitle2",
+							sx: {
+								fontWeight: 600,
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: h
+						}),
+						(0, P.jsx)(g, { sx: { flex: "1 1 auto" } }),
+						o,
+						l ? (0, P.jsx)(E, {
+							disableInteractive: !0,
+							title: p(V.more),
+							children: (0, P.jsx)(x, {
+								className: "sxl-comment-menu",
+								size: "small",
+								"aria-label": p(V.more),
+								"aria-haspopup": "menu",
+								sx: {
+									padding: "2px",
+									flexShrink: 0
+								},
+								onClick: (e) => {
+									e.stopPropagation(), l(e.currentTarget);
+								},
+								children: (0, P.jsx)(a, {
+									style: { transform: "scale(0.85)" },
+									iconKey: "MoreHorizontal"
+								})
+							})
+						}) : null
+					]
+				}),
+				i ?? (0, P.jsx)(b, {
+					className: "sxl-comment-text",
+					variant: "body2",
+					sx: {
+						whiteSpace: "pre-wrap",
+						overflowWrap: "anywhere",
+						userSelect: "text"
+					},
+					children: r
+				}),
+				_ ? (0, P.jsx)(E, {
+					disableInteractive: !0,
+					title: _.absolute,
+					placement: "bottom-start",
+					children: (0, P.jsx)(b, {
+						className: "sxl-comment-time",
+						variant: "caption",
+						sx: {
+							display: "inline-block",
+							color: "text.secondary",
+							whiteSpace: "nowrap",
+							mt: .25
+						},
+						children: _.relative
+					})
+				}) : null
+			]
+		})]
+	});
+}, W = (0, N.memo)((e) => {
+	let { sheet: t, coords: n, comment: i, focusRequest: u = 0, highlighted: d = !1, elevated: f = !1, onSelect: m, onClose: h, onPosted: _, className: v, ref: y, ...S } = e, w = s(), T = c(), D = p(i), O = o(l()?.themeScope), [A, F] = (0, N.useState)(null), [I, L] = (0, N.useState)(null), R = (0, N.useRef)(null);
+	(0, N.useEffect)(() => {
+		u && R.current?.focus();
+	}, [u]);
+	let z = (e) => {
+		try {
+			e();
+		} catch (e) {
+			T.showError?.(e);
+		}
+	}, B = t.getRange(r.cellToRange(n)).getAddress(), W = D?.resolved ? "var(--sxl-comment-resolved-indicator, #9e9e9e)" : "var(--sxl-comment-thread-indicator, #7e57c2)", G = !i, K = (0, N.useMemo)(() => G ? t.getWorkbook()?.getPeople().getCurrent() ?? null : null, [G, t]), q = (0, P.jsx)(b, {
+		className: "sxl-comment-address",
+		variant: "caption",
+		sx: {
+			color: "text.secondary",
+			flexShrink: 0
+		},
+		children: B
+	}), J = !!D?.deleted, Y = !J && !!D?.resolved, X = Y && i ? (0, P.jsxs)(g, {
+		className: "sxl-comment-resolved-header",
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			gap: .75,
+			minWidth: 0,
+			pb: .75,
+			borderBottom: 1,
+			borderColor: "divider"
+		},
+		children: [
+			(0, P.jsx)(a, {
+				style: { transform: "scale(0.85)" },
+				iconKey: "Check"
+			}),
+			(0, P.jsx)(b, {
+				variant: "subtitle2",
+				sx: { fontWeight: 600 },
+				children: w(V.resolved)
+			}),
+			(0, P.jsx)(g, { sx: { flex: "1 1 auto" } }),
+			(0, P.jsx)(E, {
+				disableInteractive: !0,
+				title: w(V.reopen),
+				children: (0, P.jsx)(x, {
+					className: "sxl-comment-reopen",
+					size: "small",
+					"aria-label": w(V.reopen),
+					sx: { padding: "2px" },
+					onClick: () => z(() => {
+						i.setResolved(!1);
+					}),
+					children: (0, P.jsx)(a, {
+						style: { transform: "scale(0.85)" },
+						iconKey: "Undo"
+					})
+				})
+			}),
+			(0, P.jsx)(E, {
+				disableInteractive: !0,
+				title: w(V.delete),
+				children: (0, P.jsx)(x, {
+					className: "sxl-comment-delete",
+					size: "small",
+					"aria-label": w(V.delete),
+					sx: { padding: "2px" },
+					onClick: () => z(() => {
+						i.delete();
+					}),
+					children: (0, P.jsx)(a, {
+						style: { transform: "scale(0.85)" },
+						iconKey: "Delete"
+					})
+				})
+			})
+		]
+	}) : null, Z = I?.replyId ? i?.getReply(I.replyId) ?? null : null, Q = (e, t) => (0, P.jsx)(H, {
+		initialValue: e,
+		placeholder: w(V.edit),
+		submitLabel: w(V.save),
+		cancelLabel: w(V.cancel),
+		alwaysShowActions: !0,
+		refInput: (e) => {
+			e?.focus();
+		},
+		onSubmit: (e) => {
+			z(() => t(e)), F(null);
+		},
+		onCancel: () => F(null)
+	});
+	return (0, P.jsxs)(C, {
+		ref: y,
+		tabIndex: -1,
+		elevation: f ? 6 : 0,
+		...S,
+		className: M("sxl-comment-card", v, {
+			"sxl-comment-draft": G,
+			"sxl-comment-resolved": !!D?.resolved,
+			"sxl-comment-highlighted": d
+		}),
+		"data-comment-id": i?.getId(),
+		onClick: (e) => {
+			S.onClick?.(e), m && !e.defaultPrevented && (e.target.closest("input, textarea, button, a, [role=\"button\"], [role=\"menu\"], .MuiFormControl-root") || m());
+		},
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: (e) => e.spacing(1),
+			boxSizing: "border-box",
+			width: f ? 300 : void 0,
+			maxWidth: "100%",
+			padding: (e) => `${e.spacing(1.25)} 12px`,
+			border: `1px solid ${W}`,
+			borderRadius: (e) => e.spacing(1.25),
+			borderLeft: d ? `4px solid ${W}` : void 0,
+			cursor: m ? "pointer" : void 0,
+			"&:focus-within": { outline: `2px solid ${W}` }
+		},
+		children: [
+			G || J ? null : (0, P.jsxs)(P.Fragment, { children: [
+				X,
+				(0, P.jsx)(U, {
+					author: D.author,
+					date: D.date,
+					content: D.content,
+					trailing: q,
+					overhang: !0,
+					editor: A && A.replyId === null ? Q(D.content, (e) => {
+						i.setContent(e);
+					}) : void 0,
+					onMenu: Y ? void 0 : (e) => L({
+						anchor: e,
+						replyId: null
+					})
+				}),
+				D.replies.length > 0 ? (0, P.jsx)(g, {
+					className: "sxl-comment-replies",
+					sx: {
+						display: "flex",
+						flexDirection: "column",
+						gap: 1,
+						pl: 2.5,
+						minWidth: 0
+					},
+					children: D.replies.map((e) => (0, P.jsx)(U, {
+						author: e.getAuthor(),
+						date: e.getCreationDate(),
+						content: e.getContent(),
+						editor: A?.replyId === e.getId() ? Q(e.getContent(), (t) => {
+							e.setContent(t);
+						}) : void 0,
+						onMenu: Y ? void 0 : (t) => L({
+							anchor: t,
+							replyId: e.getId()
+						})
+					}, e.getId()))
+				}) : null
+			] }),
+			G ? (0, P.jsx)(U, {
+				author: K,
+				date: null,
+				content: "",
+				trailing: q,
+				overhang: !0,
+				editor: (0, P.jsx)(H, {
+					placeholder: w(V.placeholder),
+					submitLabel: w(V.post),
+					cancelLabel: w(V.cancel),
+					alwaysShowActions: !0,
+					refInput: R,
+					onSubmit: (e) => {
+						z(() => {
+							let i = t.getComments().add(r.cellToRange(n), e);
+							_?.(i);
+						});
+					},
+					onCancel: h
+				})
+			}) : J || Y ? null : (0, P.jsx)(H, {
+				placeholder: w(V.reply),
+				submitLabel: w(V.post),
+				cancelLabel: w(V.cancel),
+				refInput: R,
+				onSubmit: (e) => z(() => {
+					i.addReply(e);
+				})
+			}),
+			I && i ? (0, P.jsxs)(k, {
+				open: !0,
+				anchorEl: I.anchor,
+				className: O.className,
+				...O.attrs,
+				onClose: () => L(null),
+				onClick: (e) => {
+					e.stopPropagation();
+				},
+				children: [
+					(0, P.jsx)(j, {
+						icon: (0, P.jsx)(a, { iconKey: "CardEdit" }),
+						onClick: () => {
+							F({ replyId: I.replyId }), L(null);
+						},
+						children: w(V.edit)
+					}),
+					I.replyId === null ? (0, P.jsx)(j, {
+						icon: (0, P.jsx)(a, { iconKey: D?.resolved ? "Undo" : "Check" }),
+						onClick: () => {
+							z(() => {
+								i.setResolved(!i.isResolved());
+							}), L(null);
+						},
+						children: w(D?.resolved ? V.reopen : V.resolve)
+					}) : null,
+					(0, P.jsx)(j, {
+						icon: (0, P.jsx)(a, { iconKey: "Delete" }),
+						onClick: () => {
+							z(() => {
+								I.replyId === null ? i.delete() : Z?.delete();
+							}), L(null);
+						},
+						children: w(V.delete)
+					})
+				]
+			}) : null
+		]
+	});
+});
+W.displayName = "CommentCard";
+export { W as t };