@sheetxl/studio-vanilla 0.1.98

package/build/cdn/assets/W3SqjN4yIzwYTvvj.js

@@ -0,0 +1,55 @@
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+import { memo as G, useState as x, useCallback as F, useEffect as H, useMemo as w } from "react";
+import { a7 as l, b3 as K, j as n, d as q, B as P, F as S, b4 as A, b5 as J, f as p, b6 as c, T as Q, as as D, b7 as U } from "./CLdcRW7BQK3JCguC.js";
+/**
+ * @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.0.0
+ *
+ * (C) 2025-present SheetXL Inc. & Michael T. Ford
+ * License: The license can be found at https://www.sheetxl.com/license.
+ */
+/**
+ * @license @sheetxl/studio-mui - Studio - Spreadsheet UI built with SheetXL SDK using React & MUI. - v0.0.0
+ *
+ * (C) 2025-present SheetXL Inc. & Michael T. Ford
+ * License: The license can be found at https://www.sheetxl.com/license.
+ */
+const X = ["Ok", "Cancel"], aa = G(($) => {
+  const { initialValue: I, context: h, onOption: b, onValidateOption: u, onInputOption: C, onDone: d, options: v = X, defaultOption: r = v?.[0], cancelOption: m = "Cancel", sx: j, ...N } = $, [e, T] = x(I), [V, B] = x(!1), g = F(async (a, o) => !0, []), f = l(async (a) => {
+    C?.(e, a), b?.(a, a === m, a === r), d?.();
+  }, [e, C, d, b, m, r]), M = l(async (a) => {
+    a.keyCode === K.Enter && await g?.(e, null) !== !1 && f(r);
+  }, [e, f]), z = l((a) => {
+    T(a.target.value), g?.(a.target.value, null);
+  }, [u]), E = l(async (a) => {
+    let o = await Promise.resolve(u?.(a));
+    try {
+      o !== !1 && (o = await Promise.resolve(g?.(e, a)) ?? !0);
+    } catch {
+    }
+    return o ?? !0;
+  }, [u]), [k, O] = x(n.Styles.lookupStyle(e).formatType ?? n.Type.Custom);
+  H(() => {
+    O(n.Styles.lookupStyle(e).formatType ?? n.Type.Custom);
+  }, [e]);
+  const L = w(() => {
+    const a = n.Styles.lookupPrimary(), o = (i) => t(U, { value: i, children: i }, i), s = Object.keys(a).map((i) => o(a[i].formatType));
+    return s.push(o(n.Type.Custom)), s;
+  }, []), R = F((a) => {
+    const o = a.target.value;
+    O(o);
+    const s = n.Styles.lookupDefault(o);
+    s && T(s);
+  }, []), W = w(() => {
+    const a = h();
+    return a.createTemporaryCell({ value: a.getValue() ?? 12345, style: { numberFormat: e } });
+  }, [k, e, h]);
+  return t(q, { title: "Number Format", options: v, onDone: d, onOption: (a) => f(a), onValidateOption: E, defaultOption: r, cancelOption: m, autoFocusSel: ".autoFocus", sx: { width: "580px", ...j }, ...N, children: y(P, { sx: { paddingTop: (a) => a.spacing(1), paddingBottom: (a) => a.spacing(0), rowGap: (a) => a.spacing(1), display: "flex", flexDirection: "column" }, children: [y(S, { sx: { minWidth: 135 }, size: "small", children: [t(A, { children: "Category" }), t(J, { value: k, label: "Category", onChange: R, sx: { backgroundImage: `linear-gradient(${p("#fff", c(5))}, ${p("#fff", c(5))})` }, children: L })] }), t(S, { sx: { paddingTop: (a) => a.spacing(1.5), minWidth: 135, width: "100%" }, size: "small", children: t(Q, { label: "Code", onFocus: (a) => {
+    V || a.target?.select(), B(!0);
+  }, sx: { "& .MuiFormHelperText-root": { marginTop: (a) => a.spacing(0.5) } }, InputLabelProps: { shrink: !0 }, InputProps: { inputProps: { className: "autoFocus", spellCheck: !1, autoComplete: "off", sx: { paddingTop: (a) => a.spacing(1.25), paddingBottom: (a) => a.spacing(0.75), backgroundImage: `linear-gradient(${p("#fff", c(5))}, ${p("#fff", c(5))})` } } }, value: e, onChange: z, onKeyDown: M, onContextMenu: (a) => {
+    a.stopPropagation();
+  } }) }), y(P, { children: [t(D, { variant: "caption", component: "div", sx: { paddingLeft: (a) => a.spacing(2) }, children: "Preview" }), t(D, { variant: "body2", component: "div", sx: { borderRadius: (a) => `${a.shape.borderRadius}px`, padding: (a) => a.spacing(1), border: (a) => `1px solid ${a.palette.grey[400]}` }, children: W.getNumberFormat().displayText || "(empty)" })] })] }) });
+});
+export {
+  aa as NumberFormatDialog,
+  aa as default
+};