@owp/core 2.5.17 → 2.5.18

package/dist/components/OwpTreeGrid/internal/hooks/useOwpTreeGridDatePickerEditor.js

@@ -1,117 +1,344 @@
-var K = Object.defineProperty;
-var l = (e, a) => K(e, "name", { value: a, configurable: !0 });
-import { jsx as T } 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 { VALUE_TIME_FORMATTER as b, VALUE_DATE_FORMATTER as _ } from "../../../OwpPicker/constants/index.js";
-import { useOwpTranslation as U } from "../../../../hooks/useOwpTranslation.js";
-import $ from "@mui/material/ClickAwayListener";
-import j from "@mui/material/Paper";
-import V from "@mui/material/Popper";
-import { enUS as z } from "../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/en-US.js";
-import { ko as H } from "../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/ko.js";
-import w from "dayjs";
-import { useState as N, useMemo as c, useEffect as y, useCallback as v } from "react";
-import { DatePicker as q, registerLocale as L, setDefaultLocale as J } from "../../../../node_modules/.pnpm/react-datepicker@8.7.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-datepicker/dist/index.es.js";
-L("ko", H);
-L("en", z);
-J("ko");
-const Q = `${_} ${b}`, S = "", W = "OwpTreeGridDatePickerEditor", X = /* @__PURE__ */ l((e) => (e == null ? void 0 : e.enabled) !== !1, "isDatePickerEditorEnabled"), Y = /* @__PURE__ */ l((e, a, o) => !(o != null && o.showTimeInput) && !(o != null && o.showTimeSelect) ? _ : a.size === 0 || a.has(e) ? Q : _, "getDatePickerEditorValueFormatter"), k = /* @__PURE__ */ l((e) => e === 1 || e === "1", "isTreeGridCanEditEnabled"), Z = /* @__PURE__ */ l((e) => e === 0 || e === "0" || e === !1, "isTreeGridCanEditDisabled"), f = /* @__PURE__ */ l((e) => !e || e.Fixed === "Foot" ? !1 : e.Kind === "Data" || k(e.Added), "isDisplayTreeGridRow"), g = /* @__PURE__ */ l((e, a, o, d) => {
-  var u;
-  if (d.size > 0 && !d.has(o))
+var Ht = Object.defineProperty;
+var l = (t, r) => Ht(t, "name", { value: r, configurable: !0 });
+import { jsx as I, jsxs as Kt } 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 { VALUE_TIME_FORMATTER as v, VALUE_DATE_FORMATTER as T, VALUE_MONTH_FORMATTER as A, VALUE_YEAR_FORMATTER as Y } from "../../../OwpPicker/constants/index.js";
+import { useOwpTranslation as $t } from "../../../../hooks/useOwpTranslation.js";
+import { ensureDayjsBrowserSetup as Bt } from "../../../../utils/dayjsBrowser.js";
+import Gt 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/Clear.js";
+import jt from "@mui/material/ClickAwayListener";
+import zt from "@mui/material/IconButton";
+import Ut from "@mui/material/InputAdornment";
+import Vt from "@mui/material/Paper";
+import Wt from "@mui/material/Popper";
+import Nt from "@mui/material/TextField";
+import { LocalizationProvider as gt, MultiSectionDigitalClock as qt } from "@mui/x-date-pickers";
+import { AdapterDayjs as Xt } from "@mui/x-date-pickers/AdapterDayjs";
+import { enUS as Jt } from "../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/en-US.js";
+import { ko as Qt } from "../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/locale/ko.js";
+import R from "dayjs";
+import { useState as it, useRef as st, useMemo as M, useEffect as U, useCallback as _ } from "react";
+import { DatePicker as Zt, registerLocale as mt, setDefaultLocale as te } from "../../../../node_modules/.pnpm/react-datepicker@8.7.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-datepicker/dist/index.es.js";
+mt("ko", Qt);
+mt("en", Jt);
+te("ko");
+Bt();
+const H = `${T} ${v}`, O = `${v}:ss`, b = `${T} ${O}`, at = "", pt = "OwpTreeGridDatePickerEditor", ee = "OwpTreeGridTimePickerEditor", ne = '<span class="OwpTreeGridTimePickerEditorIcon" aria-hidden="true"></span>', N = "MM", g = "DD", V = 64, lt = 56, ct = /* @__PURE__ */ new Map([
+  ["yyyy", Y],
+  ["YYYY", Y],
+  ["mm", N],
+  ["MM", N],
+  ["dd", g],
+  ["DD", g],
+  ["yyyy-mm", A],
+  ["YYYY-MM", A],
+  ["yyyy-mm-dd", T],
+  ["YYYY-MM-DD", T],
+  ["HH:mm", v],
+  ["HH:mm:ss", O],
+  ["yyyy-mm-dd HH:mm", H],
+  ["YYYY-MM-DD HH:mm", H],
+  ["yyyy-mm-dd HH:mm:ss", b],
+  ["YYYY-MM-DD HH:mm:ss", b]
+]), re = {
+  "&:hover": {
+    backgroundColor: "var(--owp-datepicker-hover-bg, rgba(3, 155, 229, 0.14))"
+  },
+  "&.Mui-selected": {
+    backgroundColor: "var(--owp-datepicker-selected-bg, #039be5)",
+    color: "var(--owp-datepicker-selected-color, #fff)",
+    "&:focus-visible, &:hover": {
+      backgroundColor: "var(--owp-datepicker-selected-hover-bg, #039be5)"
+    }
+  }
+}, oe = /* @__PURE__ */ l((t) => (t == null ? void 0 : t.enabled) !== !1, "isDatePickerEditorEnabled"), ie = /* @__PURE__ */ l((t) => t == null ? void 0 : t.trim().replace(/\s+/g, " "), "normalizeTreeGridDateFormat"), Et = /* @__PURE__ */ l((t) => {
+  const r = ie(t);
+  return r ? ct.get(r) ?? ct.get(r.toLowerCase()) ?? null : null;
+}, "convertTreeGridDateFormatToDayjs"), q = /* @__PURE__ */ l((t) => {
+  switch (t) {
+    case Y:
+      return { kind: "year", valueFormat: t, inputLength: 4, digitLength: 4 };
+    case N:
+      return { kind: "month", valueFormat: t, inputLength: 2, digitLength: 2 };
+    case A:
+      return { kind: "yearMonth", valueFormat: t, inputLength: 7, digitLength: 6 };
+    case g:
+      return { kind: "day", valueFormat: t, inputLength: 2, digitLength: 2 };
+    case v:
+      return { kind: "time", valueFormat: t, inputLength: 5, digitLength: 4 };
+    case O:
+      return { kind: "time", valueFormat: t, inputLength: 8, digitLength: 6 };
+    case H:
+      return { kind: "dateTime", valueFormat: t, inputLength: 16, digitLength: 12 };
+    case b:
+      return { kind: "dateTime", valueFormat: t, inputLength: 19, digitLength: 14 };
+    default:
+      return { kind: "date", valueFormat: t, inputLength: 10, digitLength: 8 };
+  }
+}, "getDatePickerEditorFormatMeta"), se = /* @__PURE__ */ l((t, r) => {
+  var e;
+  if (!t)
+    return q(T);
+  const o = t.row, i = (e = t.grid.Cols) == null ? void 0 : e[t.col], c = o[`${t.col}EditFormat`] ?? o[`${t.col}Format`] ?? (i == null ? void 0 : i.EditFormat) ?? (i == null ? void 0 : i.Format), s = Et(typeof c == "string" ? c : void 0) ?? (r != null && r.showTimeInput || r != null && r.showTimeSelect ? H : T);
+  return q(s);
+}, "resolveDatePickerEditorFormatMeta"), ae = /* @__PURE__ */ l((t, r) => {
+  const o = t.replace(/\D/g, "").slice(0, r.digitLength), i = o.slice(0, 4), c = o.slice(4, 6), s = o.slice(6, 8), e = o.slice(8, 10), E = o.slice(10, 12), m = o.slice(12, 14);
+  switch (r.kind) {
+    case "year":
+    case "month":
+    case "day":
+      return o;
+    case "yearMonth":
+      return [i, c].filter(Boolean).join("-");
+    case "time":
+      return [o.slice(0, 2), o.slice(2, 4), o.slice(4, 6)].filter(Boolean).join(":");
+    case "dateTime":
+      return [i, c, s].filter(Boolean).join("-") + (e ? ` ${e}` : "") + (E ? `:${E}` : "") + (m ? `:${m}` : "");
+    default:
+      return [i, c, s].filter(Boolean).join("-");
+  }
+}, "formatDatePickerEditorInput"), Dt = /* @__PURE__ */ l((t, r) => t.length === r.inputLength, "isCompleteDatePickerEditorInput"), kt = /* @__PURE__ */ l((t, r, o, i) => {
+  var c, s, e, E;
+  return o.kind === "month" ? `${((s = (c = i == null ? void 0 : i.columnOptions) == null ? void 0 : c[t]) == null ? void 0 : s.baseYear) ?? R().format(Y)}-${r}` : o.kind === "day" ? `${((E = (e = i == null ? void 0 : i.columnOptions) == null ? void 0 : e[t]) == null ? void 0 : E.baseYearMonth) ?? R().format(A)}-${r}` : r;
+}, "resolvePartialDatePickerEditorInputValue"), yt = /* @__PURE__ */ l((t) => t.kind === "month" ? A : t.kind === "day" ? T : t.valueFormat, "resolvePartialDatePickerEditorInputFormat"), ut = /* @__PURE__ */ l((t, r, o, i) => {
+  if (!r)
+    return null;
+  if (o.kind === "year") {
+    const s = R(`${r}-01-01`, T, !0);
+    return s.isValid() ? s : null;
+  }
+  if (o.kind === "yearMonth") {
+    const s = R(`${r}-01`, T, !0);
+    return s.isValid() ? s : null;
+  }
+  const c = R(
+    kt(t, r, o, i),
+    yt(o),
+    !0
+  );
+  return c.isValid() ? c : null;
+}, "parseDatePickerEditorValue"), le = /* @__PURE__ */ l((t) => {
+  switch (t.kind) {
+    case "year":
+      return "yyyy";
+    case "month":
+      return "MM";
+    case "yearMonth":
+      return "yyyy-MM";
+    case "day":
+      return "dd";
+    case "dateTime":
+      return t.valueFormat === b ? "yyyy-MM-dd HH:mm:ss" : "yyyy-MM-dd HH:mm";
+    default:
+      return "yyyy-MM-dd";
+  }
+}, "getReactDatePickerDisplayFormat"), W = /* @__PURE__ */ l((t, r, o, i) => Dt(r, o) && R(
+  kt(t, r, o, i),
+  yt(o),
+  !0
+).isValid(), "isValidDatePickerEditorInput"), dt = /* @__PURE__ */ l((t) => t.valueFormat === O || t.valueFormat === b, "hasDatePickerEditorSeconds"), ce = /* @__PURE__ */ l((t, r) => {
+  const o = (t == null ? void 0 : t.split(/\s+/).filter(Boolean)) ?? [];
+  return o.includes(r) ? t : [...o, r].join(" ");
+}, "appendTreeGridClass"), ue = /* @__PURE__ */ l((t, r, o, i) => {
+  var m, C, w, k;
+  const c = (m = t.GetStringEdit) == null ? void 0 : m.call(t, r, o), s = (C = t.GetString) == null ? void 0 : C.call(t, r, o), e = (w = t.GetValue) == null ? void 0 : w.call(t, r, o), E = (k = i.textContent) == null ? void 0 : k.trim();
+  return String(c || s || E || e || "");
+}, "resolveDatePickerEditorInitialValue"), de = /* @__PURE__ */ l((t, r) => {
+  const o = r;
+  return o.ctrlKey || o.altKey || o.metaKey ? !1 : /^\d$/.test(t) || /^\d$/.test(o.key) || t === "Enter" || t === "F2" || t === "Backspace" || t === "Delete" || o.key === "Enter" || o.key === "F2" || o.key === "Backspace" || o.key === "Delete";
+}, "isDatePickerEditorStartKey"), me = /* @__PURE__ */ l((t) => {
+  const r = t.target;
+  return r instanceof Element && !!r.closest(`.${pt}`);
+}, "isDatePickerEditorEventTarget"), K = /* @__PURE__ */ l((t) => t === 1 || t === "1", "isTreeGridCanEditEnabled"), pe = /* @__PURE__ */ l((t) => t === 0 || t === "0" || t === !1, "isTreeGridCanEditDisabled"), Ee = /* @__PURE__ */ l((t) => !t || t.Fixed === "Foot" ? !1 : t.Kind === "Data" || K(t.Added), "isDisplayTreeGridRow"), x = /* @__PURE__ */ l((t, r, o, i) => {
+  var m;
+  if (i.size > 0 && !i.has(o))
     return !1;
-  const s = (u = e.Cols) == null ? void 0 : u[o], n = a[`${o}CanEdit`], t = n != null, p = k(t ? n : s == null ? void 0 : s.CanEdit);
-  return (s == null ? void 0 : s.Type) === "Date" && f(a) && !Z(a.CanEdit) && p && a.Deleted !== 1;
-}, "isEditableDatePickerCell"), ee = /* @__PURE__ */ l((e, a) => {
-  var d;
-  if (!e)
+  const c = (m = t.Cols) == null ? void 0 : m[o], s = r[`${o}CanEdit`], e = s != null, E = K(e ? s : c == null ? void 0 : c.CanEdit);
+  return (c == null ? void 0 : c.Type) === "Date" && Ee(r) && !pe(r.CanEdit) && E && r.Deleted !== 1;
+}, "isEditableDatePickerCell"), De = /* @__PURE__ */ l((t, r) => {
+  var i;
+  if (!t)
     return;
-  (a.length > 0 ? a : Object.keys(e.Cols ?? {}).filter((s) => {
-    var n, t;
-    return ((t = (n = e.Cols) == null ? void 0 : n[s]) == null ? void 0 : t.Type) === "Date";
-  })).forEach((s) => {
-    var t;
-    const n = (t = e.Cols) == null ? void 0 : t[s];
-    !n || n.Type !== "Date" || !k(n.CanEdit) || (n.Button = "Date", n.OnClickSideDate = "Focus", n.AutoCalendar = 0, n.CalendarButtons = 0);
-  }), (d = e.Rerender) == null || d.call(e, 1, 1);
-}, "configureTreeGridDatePickerColumns"), ke = /* @__PURE__ */ l(({
-  config: e,
-  treeGridInstanceRef: a,
+  (r.length > 0 ? r : Object.keys(t.Cols ?? {}).filter((c) => {
+    var s, e;
+    return ((e = (s = t.Cols) == null ? void 0 : s[c]) == null ? void 0 : e.Type) === "Date";
+  })).forEach((c) => {
+    var m;
+    const s = (m = t.Cols) == null ? void 0 : m[c];
+    if (!s || s.Type !== "Date" || !K(s.CanEdit))
+      return;
+    s.AutoCalendar = 0, s.CalendarButtons = 0;
+    const e = s.EditFormat ?? s.Format, E = Et(typeof e == "string" ? e : void 0) ?? T;
+    q(E).kind === "time" ? (s.Button = "Html", s.ButtonText = ne, s.OnClickSide = "Focus", s.Class = ce(s.Class, ee)) : (s.Button = "Date", s.OnClickSideDate = "Focus");
+  }), (i = t.Rerender) == null || i.call(t, 1, 1);
+}, "configureTreeGridDatePickerColumns"), Ye = /* @__PURE__ */ l(({
+  config: t,
+  treeGridInstanceRef: r,
   isTreeGridReady: o,
-  onValueChange: d
+  onValueChange: i
 }) => {
-  var R;
-  const { t: s, i18n: n } = U(), [t, p] = N(null), u = X(e), D = ((R = e == null ? void 0 : e.columns) == null ? void 0 : R.join(S)) ?? "", C = c(
-    () => D ? D.split(S) : [],
-    [D]
-  ), h = c(() => new Set(C), [C]), O = (n.resolvedLanguage ?? n.language ?? "kr") === "kr" ? "ko" : "en";
-  y(() => {
-    !u || !o || ee(a.current, C);
-  }, [C, u, o, a]);
-  const m = v(() => {
-    p(null);
-  }, []), F = v(
-    (r, i, E, ne, ae, A) => {
-      if (!u || !g(r, i, E, h)) {
-        m();
+  var rt;
+  const { t: c, i18n: s } = $t(), [e, E] = it(null), [m, C] = it(""), w = st(null), k = st(!1), y = oe(t), $ = ((rt = t == null ? void 0 : t.columns) == null ? void 0 : rt.join(at)) ?? "", S = M(
+    () => $ ? $.split(at) : [],
+    [$]
+  ), P = M(() => new Set(S), [S]), X = s.resolvedLanguage ?? s.language ?? "kr", Tt = X === "kr" ? "ko" : "en", ht = X === "kr" ? "ko" : "en", B = (t == null ? void 0 : t.allowInput) !== !1, u = M(
+    () => se(e, t),
+    [t, e]
+  );
+  U(() => {
+    !y || !o || De(r.current, S);
+  }, [S, y, o, r]);
+  const h = _(() => {
+    E(null);
+  }, []), f = _(
+    (n, a, d) => {
+      const p = n.GetCell(a, d);
+      if (!p)
+        return;
+      const D = {
+        grid: n,
+        row: a,
+        col: d,
+        anchorRect: p.getBoundingClientRect(),
+        value: ue(n, a, d, p)
+      };
+      return k.current = !1, C(D.value ?? ""), E(D), 1;
+    },
+    []
+  ), It = _(
+    (n, a, d, p, D, L) => {
+      var ot;
+      if (!y || !x(n, a, d, P)) {
+        h();
         return;
       }
-      const I = r.GetCell(i, E);
-      if (I)
-        return A.preventDefault(), A.stopPropagation(), p({
-          grid: r,
-          row: i,
-          col: E,
-          anchorRect: I.getBoundingClientRect(),
-          value: r.GetString(i, E) || r.GetValue(i, E)
-        }), 1;
+      return (ot = n.CloseDialog) == null || ot.call(n), L.preventDefault(), L.stopPropagation(), f(n, a, d);
+    },
+    [h, P, y, f]
+  ), _t = _(
+    (n, a, d, p) => {
+      var D;
+      if (!(!y || !x(n, a, d, P)))
+        return (D = n.CloseDialog) == null || D.call(n), p.preventDefault(), p.stopPropagation(), f(n, a, d);
     },
-    [m, h, u]
-  ), M = c(() => {
-    if (!(t != null && t.value))
+    [P, y, f]
+  ), Rt = _(
+    (n, a, d) => {
+      var L;
+      if (me(d))
+        return 1;
+      const p = n.FRow || n.ARow, D = n.FCol || n.ACol;
+      if (!(!y || !p || !D || !x(n, p, D, P) || !de(a, d)))
+        return (L = n.CloseDialog) == null || L.call(n), d.preventDefault(), d.stopPropagation(), f(n, p, D);
+    },
+    [P, y, f]
+  ), Ct = _(
+    (n, a, d) => {
+      var p;
+      if (!(!y || !x(n, a, d, P)))
+        return (p = n.CloseDialog) == null || p.call(n), f(n, a, d), !0;
+    },
+    [P, y, f]
+  ), Pt = M(() => {
+    var a;
+    if (!e || u.kind === "time")
+      return null;
+    const n = W(
+      e.col,
+      m,
+      u,
+      t
+    ) ? ut(e.col, m, u, t) : null;
+    return n ? n.toDate() : ((a = ut(
+      e.col,
+      e.value,
+      u,
+      t
+    )) == null ? void 0 : a.toDate()) ?? null;
+  }, [t, e, u, m]), ft = M(() => {
+    if (u.kind !== "time")
       return null;
-    const r = w(t.value);
-    return r.isValid() ? r.toDate() : null;
-  }, [t == null ? void 0 : t.value]), x = c(() => t ? {
-    getBoundingClientRect: /* @__PURE__ */ l(() => t.anchorRect, "getBoundingClientRect")
-  } : null, [t]), G = c(() => {
+    const n = R(m, u.valueFormat, !0);
+    if (n.isValid())
+      return n;
+    if (!(e != null && e.value))
+      return null;
+    const a = R(e.value, u.valueFormat, !0);
+    return a.isValid() ? a : null;
+  }, [e == null ? void 0 : e.value, u, m]), Mt = M(() => e ? {
+    getBoundingClientRect: /* @__PURE__ */ l(() => e.anchorRect, "getBoundingClientRect")
+  } : null, [e]), wt = M(() => {
     if (!(typeof document > "u"))
       return document.getElementById("calendar-portal") ?? void 0;
-  }, []), B = /* @__PURE__ */ l((r) => {
-    if (!t)
+  }, []), Ft = /* @__PURE__ */ l((n) => {
+    if (!e)
+      return;
+    const a = n ? R(n).format(u.valueFormat) : "";
+    k.current = !0, C(a), e.grid.SetString(e.row, e.col, a, 1), i == null || i(e.grid, e.row, e.col, a), h();
+  }, "handleDateSelect"), Lt = /* @__PURE__ */ l((n, a) => {
+    if (!e)
       return;
-    const i = r ? w(r).format(Y(t.col, h, e)) : "";
-    t.grid.SetString(t.row, t.col, i, 1), d == null || d(t.grid, t.row, t.col, i), m();
-  }, "handleSelect"), P = /* @__PURE__ */ l((r) => {
-    r.stopPropagation();
-  }, "handleEditorMouseEvent");
-  return y(() => {
-    if (!t)
+    const d = n != null && n.isValid() ? n.format(u.valueFormat) : "", p = a === (dt(u) ? "seconds" : "minutes");
+    p && (k.current = !0), C(d), e.grid.SetString(e.row, e.col, d, 1), i == null || i(e.grid, e.row, e.col, d), E((D) => D && { ...D, value: d }), p && h();
+  }, "handleTimeSelect"), J = _(
+    (n) => {
+      e && (e.grid.SetString(e.row, e.col, n, 1), i == null || i(e.grid, e.row, e.col, n));
+    },
+    [e, i]
+  ), G = _(() => !e || !W(e.col, m, u, t) ? !1 : (k.current = !0, J(m), !0), [J, t, e, u, m]), At = _(() => {
+    G(), h();
+  }, [h, G]), bt = /* @__PURE__ */ l((n) => {
+    e && C(ae(n.target.value, u));
+  }, "handleInputChange"), vt = /* @__PURE__ */ l((n) => {
+    n.stopPropagation(), n.nativeEvent.stopImmediatePropagation(), !(n.key !== "Enter" || !e) && G() && h();
+  }, "handleInputKeyDown"), Ot = /* @__PURE__ */ l((n) => {
+    n.preventDefault(), n.stopPropagation(), e && (k.current = !0, e.grid.SetString(e.row, e.col, "", 1), i == null || i(e.grid, e.row, e.col, ""), C(""), E((a) => a && { ...a, value: "" }));
+  }, "handleInputClear"), Q = /* @__PURE__ */ l((n) => {
+    n.stopPropagation();
+  }, "handleEditorMouseEvent"), Z = /* @__PURE__ */ l((n) => {
+    n.stopPropagation(), n.nativeEvent.stopImmediatePropagation();
+  }, "handleEditorKeyboardEvent"), F = m, tt = e == null ? void 0 : e.grid, et = e == null ? void 0 : e.row, nt = e == null ? void 0 : e.col, St = !k.current && !!F && Dt(F, u) && !W((e == null ? void 0 : e.col) ?? "", F, u, t), j = dt(u), z = V * (j ? 3 : 2), xt = j ? ["hours", "minutes", "seconds"] : ["hours", "minutes"], Yt = j ? O : v;
+  return U(() => {
+    if (!e)
       return;
-    const r = /* @__PURE__ */ l((i) => {
-      i.key === "Escape" && m();
+    const n = /* @__PURE__ */ l((a) => {
+      a.key === "Escape" && h();
     }, "handleKeyDown");
-    return window.addEventListener("keydown", r), () => {
-      window.removeEventListener("keydown", r);
+    return window.addEventListener("keydown", n), () => {
+      window.removeEventListener("keydown", n);
     };
-  }, [m, t]), {
-    datePickerEditorElement: t ? /* @__PURE__ */ T(
-      V,
+  }, [h, e]), U(() => {
+    if (!tt || !et || !nt || !B)
+      return;
+    const n = window.requestAnimationFrame(() => {
+      var a;
+      (a = w.current) == null || a.focus();
+    });
+    return () => {
+      window.cancelAnimationFrame(n);
+    };
+  }, [B, nt, tt, et]), {
+    datePickerEditorElement: e ? /* @__PURE__ */ I(
+      Wt,
       {
         open: !0,
-        anchorEl: x,
-        container: G,
+        anchorEl: Mt,
+        container: wt,
         placement: "bottom-start",
         sx: { zIndex: 1400 },
-        children: /* @__PURE__ */ T($, { onClickAway: m, children: /* @__PURE__ */ T(
-          j,
+        children: /* @__PURE__ */ I(jt, { onClickAway: At, children: /* @__PURE__ */ Kt(
+          Vt,
           {
-            className: W,
+            className: pt,
             elevation: 8,
-            onClick: P,
-            onMouseDown: P,
+            onClick: Q,
+            onKeyDown: Z,
+            onKeyUp: Z,
+            onMouseDown: Q,
             sx: {
               borderRadius: 1,
               lineHeight: 0,
               overflow: "hidden",
+              width: u.kind === "time" ? z : "auto",
               "& .react-datepicker": {
                 border: 0,
                 display: "block",
@@ -124,30 +351,137 @@ const Q = `${_} ${b}`, S = "", W = "OwpTreeGridDatePickerEditor", X = /* @__PUR
                 marginBottom: 0
               }
             },
-            children: /* @__PURE__ */ T(
-              q,
-              {
-                inline: !0,
-                locale: O,
-                selected: M,
-                onChange: /* @__PURE__ */ l((r) => B(r), "onChange"),
-                showTimeInput: e == null ? void 0 : e.showTimeInput,
-                showTimeSelect: e == null ? void 0 : e.showTimeSelect,
-                timeIntervals: e == null ? void 0 : e.timeIntervals,
-                dateFormat: e != null && e.showTimeInput || e != null && e.showTimeSelect ? "Pp" : "P",
-                timeFormat: b,
-                timeCaption: `${s("Common.시간")}: `,
-                timeInputLabel: `${s("Common.시간")}: `
-              }
-            )
+            children: [
+              B && /* @__PURE__ */ I(
+                Nt,
+                {
+                  autoFocus: !0,
+                  inputRef: w,
+                  fullWidth: !0,
+                  size: "small",
+                  value: F,
+                  error: St,
+                  color: k.current ? "primary" : void 0,
+                  placeholder: u.valueFormat,
+                  onChange: bt,
+                  onKeyDown: vt,
+                  slotProps: {
+                    htmlInput: {
+                      inputMode: "numeric",
+                      "aria-label": u.valueFormat
+                    },
+                    input: {
+                      sx: {
+                        paddingRight: 0.5
+                      },
+                      endAdornment: /* @__PURE__ */ I(
+                        Ut,
+                        {
+                          position: "end",
+                          sx: {
+                            marginLeft: 0
+                          },
+                          children: /* @__PURE__ */ I(
+                            zt,
+                            {
+                              size: "small",
+                              "aria-label": "clear-date-picker-editor-value",
+                              disabled: !F,
+                              onClick: Ot,
+                              onMouseDown: /* @__PURE__ */ l((n) => {
+                                n.preventDefault(), n.stopPropagation();
+                              }, "onMouseDown"),
+                              sx: {
+                                margin: 0,
+                                padding: 0.25
+                              },
+                              children: /* @__PURE__ */ I(Gt, { fontSize: "small" })
+                            }
+                          )
+                        }
+                      )
+                    }
+                  },
+                  sx: {
+                    boxSizing: "border-box",
+                    width: u.kind === "time" ? z : "100%",
+                    px: 1,
+                    py: 1,
+                    "& .MuiOutlinedInput-root": {
+                      borderRadius: 0.75,
+                      fontSize: 13
+                    }
+                  }
+                }
+              ),
+              u.kind === "time" ? /* @__PURE__ */ I(gt, { dateAdapter: Xt, adapterLocale: ht, children: /* @__PURE__ */ I(
+                qt,
+                {
+                  ampm: !1,
+                  value: ft,
+                  views: xt,
+                  onChange: /* @__PURE__ */ l((n, a, d) => Lt(n, d), "onChange"),
+                  timeSteps: {
+                    minutes: (t == null ? void 0 : t.timeIntervals) ?? 1,
+                    seconds: 1
+                  },
+                  slotProps: {
+                    digitalClockSectionItem: {
+                      sx: re
+                    }
+                  },
+                  sx: {
+                    border: 0,
+                    width: z,
+                    "& .MuiMultiSectionDigitalClockSection-root": {
+                      border: 0,
+                      boxSizing: "border-box",
+                      width: V,
+                      flex: `0 0 ${V}px`,
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "stretch"
+                    },
+                    "& .MuiMultiSectionDigitalClockSection-item": {
+                      alignSelf: "stretch",
+                      boxSizing: "border-box",
+                      width: lt,
+                      minWidth: lt,
+                      justifyContent: "center",
+                      marginLeft: "auto",
+                      marginRight: "auto"
+                    }
+                  }
+                }
+              ) }) : /* @__PURE__ */ I(
+                Zt,
+                {
+                  inline: !0,
+                  locale: Tt,
+                  selected: Pt,
+                  onChange: /* @__PURE__ */ l((n) => Ft(n), "onChange"),
+                  showYearPicker: u.kind === "year",
+                  showMonthYearPicker: u.kind === "yearMonth" || u.kind === "month",
+                  showTimeInput: u.kind === "dateTime",
+                  timeIntervals: t == null ? void 0 : t.timeIntervals,
+                  dateFormat: le(u),
+                  timeFormat: Yt,
+                  timeCaption: `${c("Common.시간")}: `,
+                  timeInputLabel: `${c("Common.시간")}: `
+                }
+              )
+            ]
           }
         ) })
       }
     ) : null,
-    handleDatePickerEditorCellClick: F
+    handleDatePickerEditorButtonClick: _t,
+    handleDatePickerEditorCellClick: It,
+    handleDatePickerEditorKeyDown: Rt,
+    handleDatePickerEditorStartEdit: Ct
   };
 }, "useOwpTreeGridDatePickerEditor");
 export {
-  ke as useOwpTreeGridDatePickerEditor
+  Ye as useOwpTreeGridDatePickerEditor
 };
 //# sourceMappingURL=useOwpTreeGridDatePickerEditor.js.map