@sheetxl/studio-vanilla/browser/esm/F1_2bhj4CuJxHuo-.mjs

SheetXL Studio - Vanilla entry point for integrating SheetXL UI.

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