impact-nova 1.7.5 → 1.7.7

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

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