impact-nova 1.7.4 → 1.7.6

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

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