impact-nova 1.6.2 → 1.6.4

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

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