@owp/core 2.5.17 → 2.5.19

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

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