impact-nova 1.7.30 → 1.7.32

package/dist/components/ui/date-picker/month-range-picker.js

@@ -1,237 +1,292 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import * as d from "react";
-import { X as pt } from "lucide-react";
-import { CalendarMonth as ht, Info as O } from "../../../icons/index.js";
-import { isValid as P, parse as v } from "date-fns";
-import { cn as l, padValidDateString as T, maskDate as H } from "../../../lib/utils.js";
-import { Popover as ut, PopoverTrigger as xt, PopoverContent as gt } from "../popover.js";
-import { Calendar as Mt } from "../calendar.js";
-import { Tooltip as X, TooltipTrigger as q, TooltipContent as G } from "../tooltip.js";
-import { useImpactNovaI18n as Yt } from "../../../i18n/ImpactNovaI18nContext.js";
-const r = (t, f = "MM/YYYY") => {
-  const V = (t.month + 1).toString().padStart(2, "0");
-  return f === "YYYY/MM" ? `${t.year}/${V}` : `${V}/${t.year}`;
-}, wt = d.forwardRef(
+import { jsxs as u, jsx as d } from "react/jsx-runtime";
+import * as p from "react";
+import { X as ht } from "lucide-react";
+import { CalendarMonth as gt, Info as G } from "../../../icons/index.js";
+import { isValid as x, parse as M } from "date-fns";
+import { cn as h, padValidDateString as R, maskDate as J } from "../../../lib/utils.js";
+import { Popover as xt, PopoverTrigger as Mt, PopoverContent as Yt } from "../popover.js";
+import { Calendar as yt } from "../calendar.js";
+import { Tooltip as L, TooltipTrigger as Q, TooltipContent as U } from "../tooltip.js";
+import { useImpactNovaI18n as bt } from "../../../i18n/ImpactNovaI18nContext.js";
+const m = (e, i = "MM/YYYY") => {
+  const A = (e.month + 1).toString().padStart(2, "0");
+  return i === "YYYY/MM" ? `${e.year}/${A}` : `${A}/${e.year}`;
+}, wt = p.forwardRef(
   ({
-    value: t,
-    onChange: f,
-    placeholder: V,
-    minDate: C,
-    maxDate: J,
-    startMonth: K,
-    endMonth: L,
-    showFooter: x = !0,
-    disabled: k,
-    className: Q,
-    isError: g,
-    size: E,
-    label: $,
-    helperText: I,
-    helperTextPosition: A = "absolute",
-    required: U,
-    prefix: bt,
-    prefixClick: kt,
-    displayFormat: n = "MM/YYYY",
-    ...W
-  }, Z) => {
-    const { t: w } = Yt();
-    V ?? w("datePicker.selectMonthRange");
-    const j = d.useRef(null), _ = d.useRef(null), m = d.useMemo(
-      () => n === "YYYY/MM" ? "yyyy/MM" : "MM/yyyy",
-      [n]
+    value: e,
+    onChange: i,
+    placeholder: A,
+    minDate: I,
+    maxDate: W,
+    startMonth: Z,
+    endMonth: _,
+    showFooter: g = !0,
+    disabled: P,
+    className: F,
+    isError: D,
+    size: B,
+    label: O,
+    helperText: E,
+    helperTextPosition: K = "absolute",
+    required: tt,
+    prefix: kt,
+    prefixClick: Dt,
+    displayFormat: a = "MM/YYYY",
+    ...et
+  }, nt) => {
+    const { t: Y } = bt();
+    A ?? Y("datePicker.selectMonthRange");
+    const T = p.useRef(null), ot = p.useRef(null), c = p.useMemo(
+      () => a === "YYYY/MM" ? "yyyy/MM" : "MM/yyyy",
+      [a]
     );
-    d.useImperativeHandle(Z, () => j.current);
-    const [i, R] = d.useState(!1), [N, p] = d.useState(t), [S, M] = d.useState(t?.from ? r(t.from, n) : ""), [y, Y] = d.useState(t?.to ? r(t.to, n) : ""), [F, D] = d.useState(() => t?.from ? new Date(t.from.year, t.from.month, 1) : C || /* @__PURE__ */ new Date());
-    d.useEffect(() => {
-      i || (M(t?.from ? r(t.from, n) : ""), Y(t?.to ? r(t.to, n) : ""), p(t));
-    }, [i, t, n]), d.useEffect(() => {
-      i && (p(t), M(t?.from ? r(t.from, n) : ""), Y(t?.to ? r(t.to, n) : ""), D(t?.from ? new Date(t.from.year, t.from.month, 1) : C || /* @__PURE__ */ new Date()));
-    }, [i, t, n, C]);
-    const tt = (e) => {
-      p(e), e?.from && M(r(e.from, n)), e?.to && Y(r(e.to, n)), !x && e?.from && e?.to && (e.from.month !== e.to.month || e.from.year !== e.to.year) && (f?.(e), R(!1));
-    }, et = (e) => {
-      f?.(e !== void 0 ? e : N), R(!1);
-    }, nt = () => {
-      p(t), M(t?.from ? r(t.from, n) : ""), Y(t?.to ? r(t.to, n) : ""), R(!1);
+    p.useImperativeHandle(nt, () => T.current);
+    const [s, y] = p.useState(!1), V = p.useRef(!1), [v, b] = p.useState(e), [w, S] = p.useState(e?.from ? m(e.from, a) : ""), [k, N] = p.useState(e?.to ? m(e.to, a) : ""), [rt, j] = p.useState(() => e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date());
+    p.useEffect(() => {
+      s || (S(e?.from ? m(e.from, a) : ""), N(e?.to ? m(e.to, a) : ""), b(e));
+    }, [s, e, a]), p.useEffect(() => {
+      s && (b(e), S(e?.from ? m(e.from, a) : ""), N(e?.to ? m(e.to, a) : ""), j(e?.from ? new Date(e.from.year, e.from.month, 1) : I || /* @__PURE__ */ new Date()));
+    }, [s, e, a, I]);
+    const at = (t) => {
+      b(t), t?.from && S(m(t.from, a)), t?.to && N(m(t.to, a)), !g && t?.from && t?.to && (t.from.month !== t.to.month || t.from.year !== t.to.year) && (i?.(t), y(!1));
+    }, st = (t) => {
+      i?.(t !== void 0 ? t : v), y(!1);
+    }, $ = () => {
+      b(e), S(e?.from ? m(e.from, a) : ""), N(e?.to ? m(e.to, a) : ""), y(!1);
     }, z = () => {
-      p(void 0), M(""), Y(""), f?.(void 0), x || R(!1);
-    }, ot = (e) => {
-      const u = e.target.value, s = H(u, m, S);
-      if (M(s), s === "") {
-        const h = { from: void 0, to: N?.to };
-        p(h), x || f?.(h);
+      b(void 0), S(""), N(""), i?.(void 0), g || y(!1);
+    }, it = (t) => {
+      const f = t.target.value, r = J(f, c, w);
+      if (S(r), r === "") {
+        const o = { from: void 0, to: v?.to };
+        b(o), g || i?.(o);
         return;
       }
-      const a = v(s, m, /* @__PURE__ */ new Date());
-      if (P(a) && s.length === 7) {
-        const b = { from: { month: a.getMonth(), year: a.getFullYear() }, to: N?.to };
-        p(b), D(a), x || f?.(b);
+      const n = M(r, c, /* @__PURE__ */ new Date());
+      if (x(n) && r.length === 7) {
+        const l = { from: { month: n.getMonth(), year: n.getFullYear() }, to: v?.to };
+        b(l), j(n), g || i?.(l);
       }
-    }, rt = (e) => {
-      const u = e.target.value, s = H(u, m, y);
-      if (Y(s), s === "") {
-        const h = { from: N?.from, to: void 0 };
-        p(h), x || f?.(h);
+    }, ct = (t) => {
+      const f = t.target.value, r = J(f, c, k);
+      if (N(r), r === "") {
+        const o = { from: v?.from, to: void 0 };
+        b(o), g || i?.(o);
         return;
       }
-      const a = v(s, m, /* @__PURE__ */ new Date());
-      if (P(a) && s.length === 7) {
-        const h = { month: a.getMonth(), year: a.getFullYear() }, b = { from: N?.from, to: h };
-        p(b), D(a), x || f?.(b);
+      const n = M(r, c, /* @__PURE__ */ new Date());
+      if (x(n) && r.length === 7) {
+        const o = { month: n.getMonth(), year: n.getFullYear() }, l = { from: v?.from, to: o };
+        b(l), j(n), g || i?.(l);
       }
-    }, B = () => {
-      if (i) return;
-      const e = T(S, m), u = T(y, m), s = v(e, m, /* @__PURE__ */ new Date()), a = v(u, m, /* @__PURE__ */ new Date()), h = P(s) && e.length === 7, b = P(a) && u.length === 7;
-      !h || !b ? (M(t?.from ? r(t.from, n) : ""), Y(t?.to ? r(t.to, n) : ""), p(t)) : (M(e), Y(u), x || f?.({
-        from: { month: s.getMonth(), year: s.getFullYear() },
-        to: { month: a.getMonth(), year: a.getFullYear() }
-      }));
-    }, st = t?.from ? r(t.from, n) : "", at = t?.to ? r(t.to, n) : "", ct = S !== st, dt = y !== at, it = S.length === 7 && !P(v(S, m, /* @__PURE__ */ new Date())), lt = y.length === 7 && !P(v(y, m, /* @__PURE__ */ new Date())), ft = w("datePicker.startMonth"), mt = w("datePicker.endMonth");
-    return /* @__PURE__ */ c("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "month-range-picker", "data-disabled": k || void 0, children: [
-      /* @__PURE__ */ c("div", { className: "flex flex-col gap-[6px]", children: [
-        $ && /* @__PURE__ */ c(
+    }, H = () => {
+      if (s) return;
+      const t = R(w, c), f = R(k, c), r = M(t, c, /* @__PURE__ */ new Date()), n = M(f, c, /* @__PURE__ */ new Date()), o = x(r) && t.length === 7, l = x(n) && f.length === 7;
+      w && !o ? S(e?.from ? m(e.from, a) : "") : o && S(t), k && !l ? N(e?.to ? m(e.to, a) : "") : l && N(f), o && l && !g ? i?.({
+        from: { month: r.getMonth(), year: r.getFullYear() },
+        to: { month: n.getMonth(), year: n.getFullYear() }
+      }) : o && !g ? i?.({
+        from: { month: r.getMonth(), year: r.getFullYear() },
+        to: e?.to
+      }) : l && !g && i?.({
+        from: e?.from,
+        to: { month: n.getMonth(), year: n.getFullYear() }
+      });
+    }, dt = e?.from ? m(e.from, a) : "", lt = e?.to ? m(e.to, a) : "", ft = w !== dt, mt = k !== lt, pt = w.length === 7 && !x(M(w, c, /* @__PURE__ */ new Date())), ut = k.length === 7 && !x(M(k, c, /* @__PURE__ */ new Date())), X = Y("datePicker.startMonth"), q = Y("datePicker.endMonth");
+    return /* @__PURE__ */ u("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "month-range-picker", "data-disabled": P || void 0, children: [
+      /* @__PURE__ */ u("div", { className: "flex flex-col gap-[6px]", children: [
+        O && /* @__PURE__ */ u(
           "label",
           {
-            className: l(
+            className: h(
               "text-xs font-medium leading-[18px] text-content-tertiary",
-              k && "opacity-70",
-              g && "text-destructive"
+              P && "opacity-70",
+              D && "text-destructive"
             ),
             children: [
-              $,
+              O,
               " ",
-              U && /* @__PURE__ */ o("span", { className: "text-destructive", children: "*" })
+              tt && /* @__PURE__ */ d("span", { className: "text-destructive", children: "*" })
             ]
           }
         ),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ u(
           "div",
           {
-            className: l(
+            className: h(
               "w-full",
-              I && A === "absolute" && "relative"
+              E && K === "absolute" && "relative"
             ),
             children: [
-              /* @__PURE__ */ c(ut, { open: i, onOpenChange: R, children: [
-                /* @__PURE__ */ o(xt, { asChild: !0, children: /* @__PURE__ */ c(
+              /* @__PURE__ */ u(xt, { open: s, onOpenChange: y, children: [
+                /* @__PURE__ */ d(Mt, { asChild: !0, children: /* @__PURE__ */ u(
                   "div",
                   {
-                    "data-state": i ? "open" : "closed",
-                    className: l(
+                    "data-state": s ? "open" : "closed",
+                    className: h(
                       "flex w-full items-center justify-between gap-2 rounded-md border bg-canvas-elevated px-3 text-sm shadow-sm transition-colors hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
-                      g ? "border-destructive hover:border-destructive" : "border-field",
-                      E === "sm" ? "h-6" : E === "md" ? "h-[28px]" : "h-8",
-                      k && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
+                      D ? "border-destructive hover:border-destructive" : "border-field",
+                      B === "sm" ? "h-6" : B === "md" ? "h-[28px]" : "h-8",
+                      P && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
                       "cursor-pointer",
-                      Q
+                      F
                     ),
                     children: [
-                      /* @__PURE__ */ c("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
-                        /* @__PURE__ */ o(
+                      /* @__PURE__ */ u("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
+                        /* @__PURE__ */ d(
                           "input",
                           {
-                            ref: j,
+                            ref: T,
                             type: "text",
-                            value: S,
-                            onChange: ot,
-                            onBlur: B,
-                            onClick: (e) => i && e.stopPropagation(),
-                            placeholder: i ? n === "YYYY/MM" ? "YYYY/MM" : w("datePicker.monthYearFormat") : ft,
-                            disabled: !!k,
+                            value: w,
+                            onChange: it,
+                            onBlur: H,
+                            onClick: (t) => s && t.stopPropagation(),
+                            onKeyDown: (t) => {
+                              if (t.key === "Enter" && !s) {
+                                t.preventDefault();
+                                const f = R(w, c), r = R(k, c), n = M(f, c, /* @__PURE__ */ new Date()), o = M(r, c, /* @__PURE__ */ new Date()), l = x(n) && f.length === 7, C = x(o) && r.length === 7;
+                                l && C ? i?.({
+                                  from: { month: n.getMonth(), year: n.getFullYear() },
+                                  to: { month: o.getMonth(), year: o.getFullYear() }
+                                }) : l ? i?.({
+                                  from: { month: n.getMonth(), year: n.getFullYear() },
+                                  to: e?.to
+                                }) : C && i?.({
+                                  from: e?.from,
+                                  to: { month: o.getMonth(), year: o.getFullYear() }
+                                });
+                              }
+                              t.key === "ArrowDown" && !s && (t.preventDefault(), V.current = !0, y(!0)), t.key === "Escape" && s && (t.preventDefault(), $());
+                            },
+                            placeholder: s ? a === "YYYY/MM" ? "YYYY/MM" : Y("datePicker.monthYearFormat") : X,
+                            disabled: !!P,
+                            "aria-label": X,
                             "data-field": "start",
-                            className: l(
+                            className: h(
                               "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
-                              it ? "text-destructive" : ct ? "text-content-muted" : ""
+                              pt ? "text-destructive" : ft ? "text-content-muted" : ""
                             ),
-                            ...W
+                            ...et
                           }
                         ),
-                        /* @__PURE__ */ o(
+                        /* @__PURE__ */ d(
                           "input",
                           {
-                            ref: _,
+                            ref: ot,
                             type: "text",
-                            value: y,
-                            onChange: rt,
-                            onBlur: B,
-                            onClick: (e) => i && e.stopPropagation(),
-                            placeholder: i ? n === "YYYY/MM" ? "YYYY/MM" : w("datePicker.monthYearFormat") : mt,
-                            disabled: !!k,
+                            value: k,
+                            onChange: ct,
+                            onBlur: H,
+                            onClick: (t) => s && t.stopPropagation(),
+                            onKeyDown: (t) => {
+                              if (t.key === "Enter" && !s) {
+                                t.preventDefault();
+                                const f = R(w, c), r = R(k, c), n = M(f, c, /* @__PURE__ */ new Date()), o = M(r, c, /* @__PURE__ */ new Date()), l = x(n) && f.length === 7, C = x(o) && r.length === 7;
+                                l && C ? i?.({
+                                  from: { month: n.getMonth(), year: n.getFullYear() },
+                                  to: { month: o.getMonth(), year: o.getFullYear() }
+                                }) : l ? i?.({
+                                  from: { month: n.getMonth(), year: n.getFullYear() },
+                                  to: e?.to
+                                }) : C && i?.({
+                                  from: e?.from,
+                                  to: { month: o.getMonth(), year: o.getFullYear() }
+                                });
+                              }
+                              t.key === "ArrowDown" && !s && (t.preventDefault(), V.current = !0, y(!0)), t.key === "Escape" && s && (t.preventDefault(), $());
+                            },
+                            placeholder: s ? a === "YYYY/MM" ? "YYYY/MM" : Y("datePicker.monthYearFormat") : q,
+                            disabled: !!P,
+                            "aria-label": q,
                             "data-field": "end",
-                            className: l(
+                            className: h(
                               "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
-                              lt ? "text-destructive" : dt ? "text-content-muted" : ""
+                              ut ? "text-destructive" : mt ? "text-content-muted" : ""
                             )
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ c("div", { className: "flex items-center gap-1 shrink-0", children: [
-                        t?.from && !k && /* @__PURE__ */ c(X, { children: [
-                          /* @__PURE__ */ o(q, { asChild: !0, children: /* @__PURE__ */ o(
-                            pt,
+                      /* @__PURE__ */ u("div", { className: "flex items-center gap-1 shrink-0", children: [
+                        e?.from && !P && /* @__PURE__ */ u(L, { children: [
+                          /* @__PURE__ */ d(Q, { asChild: !0, children: /* @__PURE__ */ d(
+                            "button",
                             {
-                              className: "h-4 w-4 cursor-pointer hover:text-content text-content-muted",
-                              onClick: (e) => {
-                                e.stopPropagation(), z();
-                              }
+                              type: "button",
+                              tabIndex: 0,
+                              "aria-label": Y("calendar.clear"),
+                              onClick: (t) => {
+                                t.stopPropagation(), z();
+                              },
+                              onKeyDown: (t) => {
+                                (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), z());
+                              },
+                              className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                              children: /* @__PURE__ */ d(ht, { className: "h-4 w-4 hover:text-content text-content-muted" })
                             }
                           ) }),
-                          /* @__PURE__ */ o(G, { variant: "tertiary", side: "top", children: w("calendar.clear") })
+                          /* @__PURE__ */ d(U, { variant: "tertiary", side: "top", children: Y("calendar.clear") })
                         ] }),
-                        /* @__PURE__ */ c(X, { children: [
-                          /* @__PURE__ */ o(q, { asChild: !0, children: /* @__PURE__ */ o(ht, { className: "h-4 w-4 text-secondary-foreground" }) }),
-                          /* @__PURE__ */ o(G, { variant: "tertiary", side: "top", children: w("datePicker.selectMonthRange") })
+                        /* @__PURE__ */ u(L, { children: [
+                          /* @__PURE__ */ d(Q, { asChild: !0, children: /* @__PURE__ */ d("button", { type: "button", tabIndex: 0, "aria-label": Y("datePicker.selectMonthRange"), onClick: (t) => {
+                            t.stopPropagation(), y(!s);
+                          }, onKeyDown: (t) => {
+                            (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), V.current = !0, y(!s));
+                          }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ d(gt, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
+                          /* @__PURE__ */ d(U, { variant: "tertiary", side: "top", children: Y("datePicker.selectMonthRange") })
                         ] })
                       ] })
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ o(
-                  gt,
+                /* @__PURE__ */ d(
+                  Yt,
                   {
                     className: "w-auto p-0",
                     align: "start",
-                    onOpenAutoFocus: (e) => e.preventDefault(),
-                    children: /* @__PURE__ */ o(
-                      Mt,
+                    onOpenAutoFocus: (t) => {
+                      V.current || t.preventDefault(), V.current = !1;
+                    },
+                    children: /* @__PURE__ */ d(
+                      yt,
                       {
                         pickerType: "month",
                         monthMode: "range",
-                        selectedMonths: N,
-                        onMonthSelect: tt,
-                        month: F,
-                        onMonthChange: D,
-                        disabled: { before: C, after: J },
-                        startMonth: K,
-                        endMonth: L,
-                        showFooter: x,
-                        onApply: et,
-                        onCancel: nt,
+                        selectedMonths: v,
+                        onMonthSelect: at,
+                        month: rt,
+                        onMonthChange: j,
+                        disabled: { before: I, after: W },
+                        startMonth: Z,
+                        endMonth: _,
+                        showFooter: g,
+                        onApply: st,
+                        onCancel: $,
                         onClear: z
                       }
                     )
                   }
                 )
               ] }),
-              I && A === "absolute" && /* @__PURE__ */ c("div", { className: l("absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-[6px]", g && "text-destructive"), children: [
-                /* @__PURE__ */ o(
-                  O,
+              E && K === "absolute" && /* @__PURE__ */ u("div", { className: h("absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-[6px]", D && "text-destructive"), children: [
+                /* @__PURE__ */ d(
+                  G,
                   {
                     size: "xs",
-                    className: l(
+                    className: h(
                       "shrink-0",
-                      g ? "text-destructive" : "text-content-muted"
+                      D ? "text-destructive" : "text-content-muted"
                     )
                   }
                 ),
-                /* @__PURE__ */ o(
+                /* @__PURE__ */ d(
                   "p",
                   {
-                    className: l(
+                    className: h(
                       "min-w-0 text-[12px] font-medium leading-[18px] text-navigation-muted",
-                      g && "text-destructive"
+                      D && "text-destructive"
                     ),
-                    children: I
+                    children: E
                   }
                 )
               ] })
@@ -239,25 +294,25 @@ const r = (t, f = "MM/YYYY") => {
           }
         )
       ] }),
-      I && A === "flow" && /* @__PURE__ */ c("div", { className: l("flex items-center gap-[6px]", g && "text-destructive"), children: [
-        /* @__PURE__ */ o(
-          O,
+      E && K === "flow" && /* @__PURE__ */ u("div", { className: h("flex items-center gap-[6px]", D && "text-destructive"), children: [
+        /* @__PURE__ */ d(
+          G,
           {
             size: "xs",
-            className: l(
+            className: h(
               "shrink-0",
-              g ? "text-destructive" : "text-content-muted"
+              D ? "text-destructive" : "text-content-muted"
             )
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ d(
           "p",
           {
-            className: l(
+            className: h(
               "text-[12px] font-medium leading-[18px] text-navigation-muted",
-              g && "text-destructive"
+              D && "text-destructive"
             ),
-            children: I
+            children: E
           }
         )
       ] })