impact-nova 1.7.30 → 1.7.32

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

@@ -1,243 +1,260 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import * as i from "react";
-import { X as he } from "lucide-react";
-import { CalendarMonth as ge, Info as H } from "../../../icons/index.js";
-import { format as c, isValid as P, parse as R } from "date-fns";
-import { cn as m, padValidDateString as X, maskDate as q } from "../../../lib/utils.js";
-import { Popover as be, PopoverTrigger as we, PopoverContent as ye } from "../popover.js";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import * as f from "react";
+import { X as ge } from "lucide-react";
+import { CalendarMonth as be, Info as G } from "../../../icons/index.js";
+import { format as p, isValid as g, parse as b } from "date-fns";
+import { cn as u, padValidDateString as E, maskDate as J } from "../../../lib/utils.js";
+import { Popover as ye, PopoverTrigger as we, PopoverContent as De } from "../popover.js";
 import { Calendar as ke } from "../calendar.js";
-import { Tooltip as G, TooltipTrigger as J, TooltipContent as Q } from "../tooltip.js";
-import { getDateFnsLocale as De } from "../../../i18n/getDateFnsLocale.js";
-import { useImpactNovaI18n as ve } from "../../../i18n/ImpactNovaI18nContext.js";
-const Ne = i.forwardRef(
+import { Tooltip as Q, TooltipTrigger as U, TooltipContent as W } from "../tooltip.js";
+import { getDateFnsLocale as ve } from "../../../i18n/getDateFnsLocale.js";
+import { useImpactNovaI18n as Ne } from "../../../i18n/ImpactNovaI18nContext.js";
+const Se = f.forwardRef(
   ({
-    value: t,
-    onChange: h,
-    format: n = "MM/dd/yyyy",
-    startPlaceholder: U,
-    endPlaceholder: W,
-    minDate: Y,
-    maxDate: Z,
-    startMonth: $,
-    endMonth: _,
-    showFooter: g = !0,
-    disabled: k,
-    label: A,
-    helperText: C,
-    helperTextPosition: E = "absolute",
+    value: n,
+    onChange: d,
+    format: t = "MM/dd/yyyy",
+    startPlaceholder: Y,
+    endPlaceholder: Z,
+    minDate: $,
+    maxDate: _,
+    startMonth: F,
+    endMonth: ee,
+    showFooter: x = !0,
+    disabled: P,
+    label: z,
+    helperText: V,
+    helperTextPosition: j = "absolute",
     prefix: Pe,
     prefixClick: Re,
-    isError: b,
-    size: j,
-    required: F,
-    className: ee,
-    ...te
-  }, ne) => {
-    const { locale: K, t: I } = ve(), o = i.useMemo(() => De(K), [K]), L = U ?? I("datePicker.startDate"), z = W ?? I("datePicker.endDate"), B = i.useRef(null), oe = i.useRef(null);
-    i.useRef(null), i.useRef(null), i.useImperativeHandle(ne, () => B.current);
-    const [l, x] = i.useState(!1), S = i.useRef(!1), [D, u] = i.useState(t), [v, w] = i.useState(t?.from ? c(t.from, n, { locale: o }) : ""), [N, y] = i.useState(t?.to ? c(t.to, n, { locale: o }) : ""), [le, V] = i.useState(t?.from || /* @__PURE__ */ new Date());
-    i.useEffect(() => {
-      l || (w(t?.from ? c(t.from, n, { locale: o }) : ""), y(t?.to ? c(t.to, n, { locale: o }) : ""), u(t));
-    }, [t, n, l, o]), i.useEffect(() => {
-      l && (u(t), w(t?.from ? c(t.from, n, { locale: o }) : ""), y(t?.to ? c(t.to, n, { locale: o }) : ""), V(t?.from || /* @__PURE__ */ new Date()));
-    }, [l, t, n, o]);
-    const re = (e) => {
-      u(e), e?.from && w(c(e.from, n, { locale: o })), e?.to && y(c(e.to, n, { locale: o })), g || e?.from && e?.to && e.from.getTime() !== e.to.getTime() && (h?.(e), x(!1));
-    }, se = (e) => {
-      let s = e !== void 0 ? e : D;
-      s?.from && !s.to && (s = { from: s.from, to: s.from }), h?.(s), x(!1);
-    }, M = () => {
-      u(t), w(t?.from ? c(t.from, n, { locale: o }) : ""), y(t?.to ? c(t.to, n, { locale: o }) : ""), x(!1);
-    }, O = () => {
-      u(void 0), w(""), y(""), h?.(void 0), g || x(!1);
-    }, ie = (e) => {
-      const s = e.target.value, d = q(s, n, v);
-      if (w(d), d === "") {
-        const a = { from: void 0, to: D?.to };
-        u(a), g || h?.(a);
+    isError: v,
+    size: B,
+    required: te,
+    className: ne,
+    ...oe
+  }, le) => {
+    const { locale: O, t: R } = Ne(), o = f.useMemo(() => ve(O), [O]), T = Y ?? R("datePicker.startDate"), H = Z ?? R("datePicker.endDate"), X = f.useRef(null), se = f.useRef(null);
+    f.useRef(null), f.useRef(null), f.useImperativeHandle(le, () => X.current);
+    const [i, y] = f.useState(!1), C = f.useRef(!1), [I, w] = f.useState(n), [D, N] = f.useState(n?.from ? p(n.from, t, { locale: o }) : ""), [k, S] = f.useState(n?.to ? p(n.to, t, { locale: o }) : ""), [re, A] = f.useState(n?.from || /* @__PURE__ */ new Date());
+    f.useEffect(() => {
+      i || (N(n?.from ? p(n.from, t, { locale: o }) : ""), S(n?.to ? p(n.to, t, { locale: o }) : ""), w(n));
+    }, [n, t, i, o]), f.useEffect(() => {
+      i && (w(n), N(n?.from ? p(n.from, t, { locale: o }) : ""), S(n?.to ? p(n.to, t, { locale: o }) : ""), A(n?.from || /* @__PURE__ */ new Date()));
+    }, [i, n, t, o]);
+    const ie = (e) => {
+      w(e), e?.from && N(p(e.from, t, { locale: o })), e?.to && S(p(e.to, t, { locale: o })), x || e?.from && e?.to && e.from.getTime() !== e.to.getTime() && (d?.(e), y(!1));
+    }, ce = (e) => {
+      let s = e !== void 0 ? e : I;
+      s?.from && !s.to && (s = { from: s.from, to: s.from }), d?.(s), y(!1);
+    }, K = () => {
+      w(n), N(n?.from ? p(n.from, t, { locale: o }) : ""), S(n?.to ? p(n.to, t, { locale: o }) : ""), y(!1);
+    }, L = () => {
+      w(void 0), N(""), S(""), d?.(void 0), x || y(!1);
+    }, ae = (e) => {
+      const s = e.target.value, c = J(s, t, D);
+      if (N(c), c === "") {
+        const l = { from: void 0, to: I?.to };
+        w(l), x || d?.(l);
         return;
       }
-      const p = R(d, n, /* @__PURE__ */ new Date(), { locale: o });
-      if (P(p) && d.length === n.length) {
-        const a = { from: p, to: D?.to };
-        u(a), V(p), g || h?.(a);
+      const r = b(c, t, /* @__PURE__ */ new Date(), { locale: o });
+      if (g(r) && c.length === t.length) {
+        const l = { from: r, to: I?.to };
+        w(l), A(r), x || d?.(l);
       }
-    }, ce = (e) => {
-      const s = e.target.value, d = q(s, n, N);
-      if (y(d), d === "") {
-        const a = { from: D?.from, to: void 0 };
-        u(a), g || h?.(a);
+    }, de = (e) => {
+      const s = e.target.value, c = J(s, t, k);
+      if (S(c), c === "") {
+        const l = { from: I?.from, to: void 0 };
+        w(l), x || d?.(l);
         return;
       }
-      const p = R(d, n, /* @__PURE__ */ new Date(), { locale: o });
-      if (P(p) && d.length === n.length) {
-        const a = { from: D?.from, to: p };
-        u(a), p && V(p), g || h?.(a);
+      const r = b(c, t, /* @__PURE__ */ new Date(), { locale: o });
+      if (g(r) && c.length === t.length) {
+        const l = { from: I?.from, to: r };
+        w(l), r && A(r), x || d?.(l);
       }
-    }, T = () => {
-      if (l) return;
-      const e = X(v, n), s = X(N, n), d = R(e, n, /* @__PURE__ */ new Date(), { locale: o }), p = R(s, n, /* @__PURE__ */ new Date(), { locale: o }), a = P(d) && e.length === n.length, xe = P(p) && s.length === n.length;
-      !a || !xe ? (w(t?.from ? c(t.from, n, { locale: o }) : ""), y(t?.to ? c(t.to, n, { locale: o }) : ""), u(t)) : (w(e), y(s), g || h?.({ from: d, to: p }));
-    }, ae = t?.from ? c(t.from, n, { locale: o }) : "", de = t?.to ? c(t.to, n, { locale: o }) : "", fe = v !== ae, pe = N !== de, me = v.length === n.length && !P(R(v, n, /* @__PURE__ */ new Date(), { locale: o })), ue = N.length === n.length && !P(R(N, n, /* @__PURE__ */ new Date(), { locale: o }));
-    return /* @__PURE__ */ f("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "date-range-picker", "data-disabled": k || void 0, children: [
-      /* @__PURE__ */ f("div", { className: "flex flex-col gap-[6px]", children: [
-        A && /* @__PURE__ */ f(
+    }, q = () => {
+      if (i) return;
+      const e = E(D, t), s = E(k, t), c = b(e, t, /* @__PURE__ */ new Date(), { locale: o }), r = b(s, t, /* @__PURE__ */ new Date(), { locale: o }), l = g(c) && e.length === t.length, h = g(r) && s.length === t.length;
+      D && !l ? N(n?.from ? p(n.from, t, { locale: o }) : "") : l && N(e), k && !h ? S(n?.to ? p(n.to, t, { locale: o }) : "") : h && S(s), l && h && !x ? d?.({ from: c, to: r }) : l && !x ? d?.({ from: c, to: n?.to }) : h && !x && d?.({ from: n?.from, to: r });
+    }, fe = n?.from ? p(n.from, t, { locale: o }) : "", pe = n?.to ? p(n.to, t, { locale: o }) : "", me = D !== fe, ue = k !== pe, xe = D.length === t.length && !g(b(D, t, /* @__PURE__ */ new Date(), { locale: o })), he = k.length === t.length && !g(b(k, t, /* @__PURE__ */ new Date(), { locale: o }));
+    return /* @__PURE__ */ m("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "date-range-picker", "data-disabled": P || void 0, children: [
+      /* @__PURE__ */ m("div", { className: "flex flex-col gap-[6px]", children: [
+        z && /* @__PURE__ */ m(
           "label",
           {
-            className: m(
+            className: u(
               "text-xs font-medium leading-[18px] text-content-tertiary",
-              k && "opacity-70",
-              b && "text-destructive"
+              P && "opacity-70",
+              v && "text-destructive"
             ),
             children: [
-              A,
+              z,
               " ",
-              F && /* @__PURE__ */ r("span", { className: "text-destructive", children: "*" })
+              te && /* @__PURE__ */ a("span", { className: "text-destructive", children: "*" })
             ]
           }
         ),
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ m(
           "div",
           {
-            className: m(
+            className: u(
               "w-full",
-              C && E === "absolute" && "relative"
+              V && j === "absolute" && "relative"
             ),
             children: [
-              /* @__PURE__ */ f(be, { open: l, onOpenChange: x, children: [
-                /* @__PURE__ */ r(we, { asChild: !0, children: /* @__PURE__ */ f(
+              /* @__PURE__ */ m(ye, { open: i, onOpenChange: y, children: [
+                /* @__PURE__ */ a(we, { asChild: !0, children: /* @__PURE__ */ m(
                   "div",
                   {
-                    "data-state": l ? "open" : "closed",
-                    className: m(
+                    "data-state": i ? "open" : "closed",
+                    className: u(
                       "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",
-                      b ? "border-destructive hover:border-destructive" : "border-field",
-                      j === "sm" ? "h-6" : j === "md" ? "h-[28px]" : "h-8",
-                      k && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
+                      v ? "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",
-                      ee
+                      ne
                     ),
                     children: [
-                      /* @__PURE__ */ f("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
-                        /* @__PURE__ */ r(
+                      /* @__PURE__ */ m("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
+                        /* @__PURE__ */ a(
                           "input",
                           {
-                            ref: B,
+                            ref: X,
                             type: "text",
-                            value: v,
-                            onChange: ie,
-                            onBlur: T,
-                            onClick: (e) => l && e.stopPropagation(),
+                            value: D,
+                            onChange: ae,
+                            onBlur: q,
+                            onClick: (e) => i && e.stopPropagation(),
                             onKeyDown: (e) => {
-                              (e.key === "Enter" || e.key === "ArrowDown") && !l && (e.preventDefault(), S.current = !0, x(!0)), e.key === "Escape" && l && (e.preventDefault(), M());
+                              if (e.key === "Enter" && !i) {
+                                e.preventDefault();
+                                const s = E(D, t), c = E(k, t), r = b(s, t, /* @__PURE__ */ new Date(), { locale: o }), l = b(c, t, /* @__PURE__ */ new Date(), { locale: o }), h = g(r) && s.length === t.length, M = g(l) && c.length === t.length;
+                                h && M ? d?.({ from: r, to: l }) : h ? d?.({ from: r, to: n?.to }) : M && d?.({ from: n?.from, to: l });
+                              }
+                              e.key === "ArrowDown" && !i && (e.preventDefault(), C.current = !0, y(!0)), e.key === "Escape" && i && (e.preventDefault(), K());
                             },
-                            placeholder: l ? n : L,
-                            disabled: !!k,
-                            "aria-label": L,
+                            placeholder: i ? t : T,
+                            disabled: !!P,
+                            "aria-label": T,
                             "data-field": "start",
-                            className: m(
+                            className: u(
                               "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",
-                              me ? "text-destructive" : fe ? "text-content-muted" : ""
+                              xe ? "text-destructive" : me ? "text-content-muted" : ""
                             ),
-                            ...te
+                            ...oe
                           }
                         ),
-                        /* @__PURE__ */ r(
+                        /* @__PURE__ */ a(
                           "input",
                           {
-                            ref: oe,
+                            ref: se,
                             type: "text",
-                            value: N,
-                            onChange: ce,
-                            onBlur: T,
-                            onClick: (e) => l && e.stopPropagation(),
+                            value: k,
+                            onChange: de,
+                            onBlur: q,
+                            onClick: (e) => i && e.stopPropagation(),
                             onKeyDown: (e) => {
-                              (e.key === "Enter" || e.key === "ArrowDown") && !l && (e.preventDefault(), S.current = !0, x(!0)), e.key === "Escape" && l && (e.preventDefault(), M());
+                              if (e.key === "Enter" && !i) {
+                                e.preventDefault();
+                                const s = E(D, t), c = E(k, t), r = b(s, t, /* @__PURE__ */ new Date(), { locale: o }), l = b(c, t, /* @__PURE__ */ new Date(), { locale: o }), h = g(r) && s.length === t.length, M = g(l) && c.length === t.length;
+                                h && M ? d?.({ from: r, to: l }) : h ? d?.({ from: r, to: n?.to }) : M && d?.({ from: n?.from, to: l });
+                              }
+                              e.key === "ArrowDown" && !i && (e.preventDefault(), C.current = !0, y(!0)), e.key === "Escape" && i && (e.preventDefault(), K());
                             },
-                            placeholder: l ? n : z,
-                            disabled: !!k,
-                            "aria-label": z,
+                            placeholder: i ? t : H,
+                            disabled: !!P,
+                            "aria-label": H,
                             "data-field": "end",
-                            className: m(
+                            className: u(
                               "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",
-                              ue ? "text-destructive" : pe ? "text-content-muted" : ""
+                              he ? "text-destructive" : ue ? "text-content-muted" : ""
                             )
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ f("div", { className: "flex items-center gap-1 shrink-0", children: [
-                        t?.from && !k && /* @__PURE__ */ f(G, { children: [
-                          /* @__PURE__ */ r(J, { asChild: !0, children: /* @__PURE__ */ r(
-                            he,
+                      /* @__PURE__ */ m("div", { className: "flex items-center gap-1 shrink-0", children: [
+                        n?.from && !P && /* @__PURE__ */ m(Q, { children: [
+                          /* @__PURE__ */ a(U, { asChild: !0, children: /* @__PURE__ */ a(
+                            "button",
                             {
-                              className: "h-4 w-4 cursor-pointer hover:text-content text-content-muted",
+                              type: "button",
+                              tabIndex: 0,
+                              "aria-label": R("calendar.clear"),
                               onClick: (e) => {
-                                e.stopPropagation(), O();
-                              }
+                                e.stopPropagation(), L();
+                              },
+                              onKeyDown: (e) => {
+                                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), L());
+                              },
+                              className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                              children: /* @__PURE__ */ a(ge, { className: "h-4 w-4 hover:text-content text-content-muted" })
                             }
                           ) }),
-                          /* @__PURE__ */ r(Q, { variant: "tertiary", side: "top", children: I("calendar.clear") })
+                          /* @__PURE__ */ a(W, { variant: "tertiary", side: "top", children: R("calendar.clear") })
                         ] }),
-                        /* @__PURE__ */ f(G, { children: [
-                          /* @__PURE__ */ r(J, { asChild: !0, children: /* @__PURE__ */ r("button", { type: "button", tabIndex: 0, "aria-label": I("datePicker.selectMonthRange"), onClick: (e) => {
-                            e.stopPropagation(), x(!l);
+                        /* @__PURE__ */ m(Q, { children: [
+                          /* @__PURE__ */ a(U, { asChild: !0, children: /* @__PURE__ */ a("button", { type: "button", tabIndex: 0, "aria-label": R("datePicker.selectMonthRange"), onClick: (e) => {
+                            e.stopPropagation(), y(!i);
                           }, onKeyDown: (e) => {
-                            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), S.current = !0, x(!l));
-                          }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ r(ge, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
-                          /* @__PURE__ */ r(Q, { variant: "tertiary", side: "top", children: I("datePicker.selectMonthRange") })
+                            (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), C.current = !0, y(!i));
+                          }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ a(be, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
+                          /* @__PURE__ */ a(W, { variant: "tertiary", side: "top", children: R("datePicker.selectMonthRange") })
                         ] })
                       ] })
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ r(
-                  ye,
+                /* @__PURE__ */ a(
+                  De,
                   {
                     className: "w-auto p-0",
                     align: "start",
                     onOpenAutoFocus: (e) => {
-                      S.current || e.preventDefault(), S.current = !1;
+                      C.current || e.preventDefault(), C.current = !1;
                     },
-                    children: /* @__PURE__ */ r(
+                    children: /* @__PURE__ */ a(
                       ke,
                       {
                         mode: "range",
-                        selected: D,
-                        onSelect: re,
-                        month: le,
-                        onMonthChange: V,
-                        disabled: { before: Y, after: Z },
-                        startMonth: $,
-                        endMonth: _,
-                        showFooter: g,
-                        onApply: se,
-                        onCancel: M,
-                        onClear: O,
+                        selected: I,
+                        onSelect: ie,
+                        month: re,
+                        onMonthChange: A,
+                        disabled: { before: $, after: _ },
+                        startMonth: F,
+                        endMonth: ee,
+                        showFooter: x,
+                        onApply: ce,
+                        onCancel: K,
+                        onClear: L,
                         captionLayout: "dropdown"
                       }
                     )
                   }
                 )
               ] }),
-              C && E === "absolute" && /* @__PURE__ */ f("div", { className: m("absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-[6px]", b && "text-destructive"), children: [
-                /* @__PURE__ */ r(
-                  H,
+              V && j === "absolute" && /* @__PURE__ */ m("div", { className: u("absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-[6px]", v && "text-destructive"), children: [
+                /* @__PURE__ */ a(
+                  G,
                   {
                     size: "xs",
-                    className: m(
+                    className: u(
                       "shrink-0",
-                      b ? "text-destructive" : "text-content-muted"
+                      v ? "text-destructive" : "text-content-muted"
                     )
                   }
                 ),
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ a(
                   "p",
                   {
-                    className: m(
+                    className: u(
                       "min-w-0 text-[12px] font-medium leading-[18px] text-navigation-muted",
-                      b && "text-destructive"
+                      v && "text-destructive"
                     ),
-                    children: C
+                    children: V
                   }
                 )
               ] })
@@ -245,32 +262,32 @@ const Ne = i.forwardRef(
           }
         )
       ] }),
-      C && E === "flow" && /* @__PURE__ */ f("div", { className: m("flex items-center gap-[6px]", b && "text-destructive"), children: [
-        /* @__PURE__ */ r(
-          H,
+      V && j === "flow" && /* @__PURE__ */ m("div", { className: u("flex items-center gap-[6px]", v && "text-destructive"), children: [
+        /* @__PURE__ */ a(
+          G,
           {
             size: "xs",
-            className: m(
+            className: u(
               "shrink-0",
-              b ? "text-destructive" : "text-content-muted"
+              v ? "text-destructive" : "text-content-muted"
             )
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ a(
           "p",
           {
-            className: m(
+            className: u(
               "text-[12px] font-medium leading-[18px] text-navigation-muted",
-              b && "text-destructive"
+              v && "text-destructive"
             ),
-            children: C
+            children: V
           }
         )
       ] })
     ] });
   }
 );
-Ne.displayName = "DateRangePicker";
+Se.displayName = "DateRangePicker";
 export {
-  Ne as DateRangePicker
+  Se as DateRangePicker
 };