@owp/core 2.5.9 → 2.5.11

package/dist/features/themePreview/components/ThemePreviewColorField.js

@@ -1,16 +1,16 @@
-var J = Object.defineProperty;
-var l = (t, e) => J(t, "name", { value: e, configurable: !0 });
-import { jsx as o, jsxs as c, Fragment as Q } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
-import { IconButton as X, Typography as v, InputAdornment as Z, MenuItem as ee, TextField as L, Box as h, Divider as re, Popover as te, Button as le } from "@mui/material";
-import oe from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/RestartAltOutlined.js";
-import { blue as ne, lightBlue as ae, cyan as ie, teal as ue, green as ce, amber as se, orange as pe, deepOrange as de, red as me, pink as he, purple as fe, deepPurple as xe, indigo as ge, grey as be, blueGrey as Pe } from "@mui/material/colors";
-import { useState as x, useRef as ve, useEffect as w } from "react";
-import { getThemePreviewPaletteValue as we } from "../utils/themePreviewSettings.js";
-import { getColorAlphaValue as ye, toColorPickerValue as z, applyColorPickerValue as N } from "../utils/color.js";
-const ke = {
+var oe = Object.defineProperty;
+var l = (t, e) => oe(t, "name", { value: e, configurable: !0 });
+import { jsx as n, jsxs as d, Fragment as ae } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { IconButton as ie, Typography as k, InputAdornment as ue, MenuItem as ce, TextField as Q, Box as g, Divider as se, Popover as pe, Button as de } from "@mui/material";
+import me from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/RestartAltOutlined.js";
+import { blue as he, lightBlue as fe, cyan as xe, teal as ge, green as we, amber as be, orange as ve, deepOrange as Pe, red as ye, pink as Ce, purple as ke, deepPurple as Te, indigo as Ve, grey as Ie, blueGrey as Ee } from "@mui/material/colors";
+import { useState as w, useRef as T, useEffect as b } from "react";
+import { getThemePreviewPaletteValue as Ae } from "../utils/themePreviewSettings.js";
+import { getColorAlphaValue as Me, toColorPickerValue as V, applyColorPickerValue as X } from "../utils/color.js";
+const Be = {
   "px-number": "px",
   "rem-number": "rem"
-}, Ce = [
+}, Re = [
   "50",
   "100",
   "200",
@@ -25,103 +25,122 @@ const ke = {
   "A200",
   "A400",
   "A700"
-], Te = [
-  ["Blue", ne],
-  ["Light Blue", ae],
-  ["Cyan", ie],
-  ["Teal", ue],
-  ["Green", ce],
-  ["Amber", se],
-  ["Orange", pe],
-  ["Deep Orange", de],
-  ["Red", me],
-  ["Pink", he],
-  ["Purple", fe],
-  ["Deep Purple", xe],
-  ["Indigo", ge],
-  ["Grey", be],
-  ["Blue Grey", Pe]
-], Ie = Te.map(([t, e]) => ({
+], ze = [
+  ["Blue", he],
+  ["Light Blue", fe],
+  ["Cyan", xe],
+  ["Teal", ge],
+  ["Green", we],
+  ["Amber", be],
+  ["Orange", ve],
+  ["Deep Orange", Pe],
+  ["Red", ye],
+  ["Pink", Ce],
+  ["Purple", ke],
+  ["Deep Purple", Te],
+  ["Indigo", Ve],
+  ["Grey", Ie],
+  ["Blue Grey", Ee]
+], re = ze.map(([t, e]) => ({
   label: t,
-  colors: Ce.reduce((n, s) => {
-    const m = e[s];
-    return m && n.push({
-      key: `${t}-${s}`,
-      shade: s,
-      value: m
-    }), n;
+  colors: Re.reduce((o, m) => {
+    const f = e[m];
+    return f && o.push({
+      key: `${t}-${m}`,
+      shade: m,
+      value: f
+    }), o;
   }, [])
-})), Ee = 500, G = 32, j = 20;
-function Ve(t, e) {
+})), De = new Set(
+  re.flatMap(
+    (t) => t.colors.map((e) => e.value.toLowerCase())
+  )
+), Se = 500, Z = 32, ee = 20;
+function _e(t, e) {
   return t.replace(new RegExp(`${e}$`, "i"), "");
 }
-l(Ve, "getUnitInputDisplayValue");
-function K(t) {
-  const e = t.replace(/[^0-9.,]/g, "").replace(/,/g, "."), n = e.indexOf(".");
-  if (n < 0)
+l(_e, "getUnitInputDisplayValue");
+function te(t) {
+  const e = t.replace(/[^0-9.,]/g, "").replace(/,/g, "."), o = e.indexOf(".");
+  if (o < 0)
     return e;
-  const s = e.slice(0, n), m = e.slice(n + 1).replace(/\./g, "");
-  return `${s}.${m}`;
+  const m = e.slice(0, o), f = e.slice(o + 1).replace(/\./g, "");
+  return `${m}.${f}`;
 }
-l(K, "normalizeUnitInputDisplayValue");
-function Ae(t) {
-  const e = K(t);
+l(te, "normalizeUnitInputDisplayValue");
+function We(t) {
+  const e = te(t);
   return !e || e === "." ? "" : e.startsWith(".") ? `0${e}` : e.endsWith(".") ? e.slice(0, -1) : e;
 }
-l(Ae, "normalizeCommittedUnitInputDisplayValue");
-function Be(t, e) {
-  const n = Ae(t);
-  return n ? `${n}${e}` : "";
+l(We, "normalizeCommittedUnitInputDisplayValue");
+function Oe(t, e) {
+  const o = We(t);
+  return o ? `${o}${e}` : "";
 }
-l(Be, "normalizeUnitInputValue");
-function ze(t) {
-  return (t ? ke[t] : null) ?? null;
+l(Oe, "normalizeUnitInputValue");
+function $e(t) {
+  return (t ? Be[t] : null) ?? null;
 }
-l(ze, "getUnitValueFormat");
-function Se({
+l($e, "getUnitValueFormat");
+function qe({
   disabled: t = !1,
   definition: e,
-  resetVersion: n,
-  sectionKey: s,
-  settings: m,
-  onChange: g,
-  onReset: y
+  resetVersion: o,
+  sectionKey: m,
+  settings: f,
+  onChange: v,
+  onReset: I
 }) {
-  var F, U;
-  const [D, k] = x(null), i = we(m, s, e.path), u = ze(e.valueFormat), M = e.showColorPicker !== !1, R = e.allowAlpha ? ye(i) : null, _ = [e.description];
-  e.allowAlpha && _.push(
-    R ? `알파값은 ${R}로 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다.` : "알파값은 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다."
+  var Y, J;
+  const [P, E] = w(null), W = T(null), a = Ae(f, m, e.path), c = $e(e.valueFormat), O = e.showColorPicker !== !1, $ = e.allowAlpha ? Me(a) : null, F = [e.description];
+  e.allowAlpha && F.push(
+    $ ? `알파값은 ${$}로 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다.` : "알파값은 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다."
   );
-  const Y = _.filter(Boolean).join(" "), C = !!((F = e.options) != null && F.length), T = !!(e.allowAlpha && M && !C && !u), f = u ? Ve(i, u) : i, q = M, p = !C && !T, [I, E] = x(f), [W, b] = x(!1), [O, V] = x(z(i)), [A, B] = x(!1), a = ve(null);
-  w(() => {
-    !p || W || E(f);
-  }, [p, f, W]), w(() => {
-    A || V(z(i));
-  }, [A, i]), w(() => () => {
-    a.current && window.clearTimeout(a.current);
-  }, []), w(() => {
-    typeof n > "u" || (a.current && (window.clearTimeout(a.current), a.current = null), E(f), b(!1), V(z(i)), B(!1));
-  }, [n]);
-  const H = /* @__PURE__ */ l((r) => {
-    g(
+  const le = F.filter(Boolean).join(" "), A = !!((Y = e.options) != null && Y.length), M = !!(e.allowAlpha && O && !A && !c), x = c ? _e(a, c) : a, H = O, B = H ? V(a).toLowerCase() : null, y = B && De.has(B) ? B : null, h = !A && !M, [R, z] = w(x), [L, C] = w(!1), [U, D] = w(V(a)), [S, _] = w(!1), i = T(null), N = T(x), G = T(a);
+  N.current = x, G.current = a, b(() => {
+    !h || L || z(x);
+  }, [h, x, L]), b(() => {
+    S || D(V(a));
+  }, [S, a]), b(() => () => {
+    i.current && window.clearTimeout(i.current);
+  }, []), b(() => {
+    if (!P || !y)
+      return;
+    const r = window.requestAnimationFrame(() => {
+      var s;
+      const u = (s = W.current) == null ? void 0 : s.querySelector(
+        `[data-mui-palette-value="${y}"]`
+      );
+      u == null || u.scrollIntoView({
+        block: "center",
+        inline: "nearest"
+      });
+    });
+    return () => {
+      window.cancelAnimationFrame(r);
+    };
+  }, [y, P]), b(() => {
+    typeof o > "u" || (i.current && (window.clearTimeout(i.current), i.current = null), z(N.current), C(!1), D(V(G.current)), _(!1));
+  }, [o]);
+  const j = /* @__PURE__ */ l((r) => {
+    v(
       e.path,
-      u ? Be(r, u) : r
+      c ? Oe(r, c) : r
     );
-  }, "commitBufferedTextValue"), $ = /* @__PURE__ */ l((r) => {
-    a.current && (window.clearTimeout(a.current), a.current = null), B(!1), g(e.path, N(i, r));
-  }, "commitBufferedPickerValue"), S = y || u ? /* @__PURE__ */ o(Z, { position: "end", children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-    y ? /* @__PURE__ */ o(
-      X,
+  }, "commitBufferedTextValue"), K = /* @__PURE__ */ l((r) => {
+    i.current && (window.clearTimeout(i.current), i.current = null), _(!1), v(e.path, X(a, r));
+  }, "commitBufferedPickerValue"), q = I || c ? /* @__PURE__ */ n(ue, { position: "end", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-6 pr-2", children: [
+    I ? /* @__PURE__ */ n(
+      ie,
       {
         size: "small",
         "aria-label": `${e.label} reset`,
         disabled: t,
-        edge: "end",
         onMouseDown: /* @__PURE__ */ l((r) => {
           r.preventDefault();
         }, "onMouseDown"),
         onClick: /* @__PURE__ */ l(() => {
-          y(e.path);
+          I(e.path);
         }, "onClick"),
         sx: {
           border: "1px solid #cbd5e1",
@@ -129,62 +148,62 @@ function Se({
           color: "#6b7280",
           p: 0.25
         },
-        children: /* @__PURE__ */ o(oe, { sx: { fontSize: 16 } })
+        children: /* @__PURE__ */ n(me, { sx: { fontSize: 16 } })
       }
     ) : null,
-    u ? /* @__PURE__ */ o(v, { variant: "body2", children: u }) : null
+    c ? /* @__PURE__ */ n(k, { variant: "body2", sx: { whiteSpace: "nowrap" }, children: c }) : null
   ] }) }) : void 0;
-  return /* @__PURE__ */ c("div", { className: "grid grid-cols-[minmax(0,1fr)_144px] items-start gap-12", children: [
-    /* @__PURE__ */ o(
-      L,
+  return /* @__PURE__ */ d("div", { className: "grid grid-cols-[minmax(0,1fr)_144px] items-start gap-12", children: [
+    /* @__PURE__ */ n(
+      Q,
       {
-        select: C,
+        select: A,
         label: e.label,
         size: "small",
-        value: p ? I : f,
+        value: h ? R : x,
         disabled: t,
         onChange: /* @__PURE__ */ l((r) => {
-          if (T)
+          if (M)
             return;
-          const d = u ? K(r.target.value) : r.target.value;
-          if (p) {
-            E(d);
+          const u = c ? te(r.target.value) : r.target.value;
+          if (h) {
+            z(u);
             return;
           }
-          g(e.path, d);
+          v(e.path, u);
         }, "onChange"),
         onFocus: /* @__PURE__ */ l(() => {
-          p && b(!0);
+          h && C(!0);
         }, "onFocus"),
         onBlur: /* @__PURE__ */ l(() => {
-          p && (b(!1), H(I));
+          h && (C(!1), j(R));
         }, "onBlur"),
         onKeyDown: /* @__PURE__ */ l((r) => {
-          !p || r.key !== "Enter" || (r.preventDefault(), b(!1), H(I), r.currentTarget.blur());
+          !h || r.key !== "Enter" || (r.preventDefault(), C(!1), j(R), r.currentTarget.blur());
         }, "onKeyDown"),
-        helperText: Y,
+        helperText: le,
         slotProps: {
           htmlInput: {
-            ...u ? {
+            ...c ? {
               inputMode: "decimal"
             } : {},
-            ...T ? {
+            ...M ? {
               readOnly: !0
             } : {}
           },
           input: {
-            ...S ? {
-              endAdornment: S
+            ...q ? {
+              endAdornment: q
             } : {}
           }
         },
-        children: (U = e.options) == null ? void 0 : U.map((r) => /* @__PURE__ */ o(ee, { value: r.value, children: r.label }, r.value))
+        children: (J = e.options) == null ? void 0 : J.map((r) => /* @__PURE__ */ n(ce, { value: r.value, children: r.label }, r.value))
       }
     ),
-    q ? /* @__PURE__ */ c("div", { className: "grid grid-cols-2 gap-6", children: [
-      /* @__PURE__ */ c(Q, { children: [
-        /* @__PURE__ */ o(
-          le,
+    H ? /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ d(ae, { children: [
+        /* @__PURE__ */ n(
+          de,
           {
             size: "small",
             fullWidth: !0,
@@ -192,31 +211,31 @@ function Se({
             disabled: t,
             sx: {
               fontSize: "1.2rem",
-              height: G,
+              height: Z,
               minWidth: 0
             },
             onClick: /* @__PURE__ */ l((r) => {
-              k(r.currentTarget);
+              E(r.currentTarget);
             }, "onClick"),
             children: "MUI"
           }
         ),
-        /* @__PURE__ */ o(
-          L,
+        /* @__PURE__ */ n(
+          Q,
           {
             hiddenLabel: !0,
             type: "color",
             size: "small",
-            value: O,
+            value: U,
             disabled: t,
             onChange: /* @__PURE__ */ l((r) => {
-              const d = r.target.value;
-              V(d), B(!0), a.current && window.clearTimeout(a.current), a.current = window.setTimeout(() => {
-                $(d);
-              }, Ee);
+              const u = r.target.value;
+              D(u), _(!0), i.current && window.clearTimeout(i.current), i.current = window.setTimeout(() => {
+                K(u);
+              }, Se);
             }, "onChange"),
             onBlur: /* @__PURE__ */ l(() => {
-              A && $(O);
+              S && K(U);
             }, "onBlur"),
             slotProps: {
               htmlInput: {
@@ -225,7 +244,7 @@ function Se({
             },
             sx: {
               "& .MuiOutlinedInput-root": {
-                height: G,
+                height: Z,
                 px: 0.5
               },
               '& input[type="color"]': {
@@ -235,8 +254,8 @@ function Se({
                 border: 0,
                 borderRadius: 0,
                 display: "block",
-                height: j,
-                minHeight: j,
+                height: ee,
+                minHeight: ee,
                 overflow: "hidden",
                 padding: 0,
                 p: 0,
@@ -257,14 +276,14 @@ function Se({
             }
           }
         ),
-        D ? /* @__PURE__ */ o(
-          te,
+        P ? /* @__PURE__ */ n(
+          pe,
           {
             open: !0,
-            anchorEl: D,
+            anchorEl: P,
             transitionDuration: 0,
             onClose: /* @__PURE__ */ l(() => {
-              k(null);
+              E(null);
             }, "onClose"),
             anchorOrigin: {
               vertical: "bottom",
@@ -286,10 +305,10 @@ function Se({
                 }
               }
             },
-            children: /* @__PURE__ */ o("div", { className: "flex min-w-0 flex-col gap-10", children: Ie.map((r, d) => /* @__PURE__ */ c(h, { className: "flex flex-col gap-10", children: [
-              d > 0 ? /* @__PURE__ */ o(re, { flexItem: !0 }) : null,
-              /* @__PURE__ */ c(
-                h,
+            children: /* @__PURE__ */ n("div", { ref: W, className: "flex min-w-0 flex-col gap-10", children: re.map((r, u) => /* @__PURE__ */ d(g, { className: "flex flex-col gap-10", children: [
+              u > 0 ? /* @__PURE__ */ n(se, { flexItem: !0 }) : null,
+              /* @__PURE__ */ d(
+                g,
                 {
                   sx: {
                     display: "grid",
@@ -300,9 +319,9 @@ function Se({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ o(v, { variant: "caption", color: "text.secondary", children: r.label }),
-                    /* @__PURE__ */ o(
-                      h,
+                    /* @__PURE__ */ n(k, { variant: "caption", color: "text.secondary", children: r.label }),
+                    /* @__PURE__ */ n(
+                      g,
                       {
                         sx: {
                           display: "grid",
@@ -310,68 +329,74 @@ function Se({
                           gridTemplateColumns: "repeat(auto-fit, minmax(68px, 1fr))",
                           minWidth: 0
                         },
-                        children: r.colors.map((P) => /* @__PURE__ */ c(
-                          h,
-                          {
-                            component: "button",
-                            type: "button",
-                            onClick: /* @__PURE__ */ l(() => {
-                              g(
-                                e.path,
-                                N(i, P.value)
-                              ), k(null);
-                            }, "onClick"),
-                            sx: {
-                              alignItems: "center",
-                              backgroundColor: "background.paper",
-                              border: "1px solid",
-                              borderColor: "divider",
-                              borderRadius: 1,
-                              color: "text.secondary",
-                              cursor: "pointer",
-                              display: "flex",
-                              flexDirection: "column",
-                              gap: 0.5,
-                              justifyContent: "center",
-                              minWidth: 0,
-                              p: 0.5,
-                              transition: "background-color 120ms ease, border-color 120ms ease",
-                              width: "100%",
-                              "&:hover": {
-                                backgroundColor: "action.hover",
-                                borderColor: "text.secondary"
-                              }
-                            },
-                            children: [
-                              /* @__PURE__ */ o(
-                                h,
-                                {
-                                  sx: {
-                                    width: 30,
-                                    height: 30,
-                                    borderRadius: 1,
-                                    backgroundColor: P.value,
-                                    border: "1px solid",
-                                    borderColor: "divider"
-                                  }
-                                }
-                              ),
-                              /* @__PURE__ */ o(
-                                h,
-                                {
-                                  component: "span",
-                                  sx: {
-                                    fontSize: "0.75rem",
-                                    fontWeight: 600,
-                                    lineHeight: 1
-                                  },
-                                  children: P.shade
+                        children: r.colors.map((s) => {
+                          const p = y === s.value.toLowerCase();
+                          return /* @__PURE__ */ d(
+                            g,
+                            {
+                              component: "button",
+                              type: "button",
+                              "data-mui-palette-value": s.value.toLowerCase(),
+                              "aria-current": p ? "true" : void 0,
+                              onClick: /* @__PURE__ */ l(() => {
+                                v(
+                                  e.path,
+                                  X(a, s.value)
+                                ), E(null);
+                              }, "onClick"),
+                              sx: {
+                                alignItems: "center",
+                                backgroundColor: p ? "action.selected" : "background.paper",
+                                border: "1px solid",
+                                borderColor: p ? "primary.main" : "divider",
+                                borderRadius: 1,
+                                boxShadow: p ? (ne) => `0 0 0 1px ${ne.palette.primary.main}` : "none",
+                                color: p ? "text.primary" : "text.secondary",
+                                cursor: "pointer",
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: 0.5,
+                                justifyContent: "center",
+                                minWidth: 0,
+                                p: 0.5,
+                                transition: "background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
+                                width: "100%",
+                                "&:hover": {
+                                  backgroundColor: "action.hover",
+                                  borderColor: p ? "primary.main" : "text.secondary"
                                 }
-                              )
-                            ]
-                          },
-                          P.key
-                        ))
+                              },
+                              children: [
+                                /* @__PURE__ */ n(
+                                  g,
+                                  {
+                                    sx: {
+                                      width: 30,
+                                      height: 30,
+                                      borderRadius: 1,
+                                      backgroundColor: s.value,
+                                      border: "1px solid",
+                                      borderColor: p ? "primary.main" : "divider"
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ n(
+                                  g,
+                                  {
+                                    component: "span",
+                                    sx: {
+                                      fontSize: "0.75rem",
+                                      fontWeight: p ? 700 : 600,
+                                      lineHeight: 1
+                                    },
+                                    children: s.shade
+                                  }
+                                )
+                              ]
+                            },
+                            s.key
+                          );
+                        })
                       }
                     )
                   ]
@@ -381,23 +406,23 @@ function Se({
           }
         ) : null
       ] }),
-      e.allowAlpha ? /* @__PURE__ */ c("div", { className: "col-span-2 flex flex-col gap-2", children: [
-        /* @__PURE__ */ o(v, { variant: "caption", color: "text.secondary", children: "Current" }),
-        /* @__PURE__ */ o(
-          v,
+      e.allowAlpha ? /* @__PURE__ */ d("div", { className: "col-span-2 flex flex-col gap-2", children: [
+        /* @__PURE__ */ n(k, { variant: "caption", color: "text.secondary", children: "Current" }),
+        /* @__PURE__ */ n(
+          k,
           {
             variant: "caption",
             color: "text.secondary",
             className: "truncate whitespace-nowrap",
-            children: i || "-"
+            children: a || "-"
           }
         )
       ] }) : null
-    ] }) : /* @__PURE__ */ o("div", {})
+    ] }) : /* @__PURE__ */ n("div", {})
   ] });
 }
-l(Se, "ThemePreviewColorField");
+l(qe, "ThemePreviewColorField");
 export {
-  Se as ThemePreviewColorField
+  qe as ThemePreviewColorField
 };
 //# sourceMappingURL=ThemePreviewColorField.js.map