impact-nova 1.6.2 → 1.6.3

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

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