impact-nova 2.0.7 → 2.0.9

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

@@ -1,5 +1,5 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import * as a from "react";
+import * as l from "react";
 import { Cross as j, CalendarMonth as w } from "impact-nova-icons";
 import { format as z } from "date-fns";
 import { cn as R } from "../../../lib/utils.js";
@@ -9,36 +9,36 @@ import { Calendar as q } from "../calendar.js";
 import { Tooltip as u, TooltipTrigger as y, TooltipContent as g } from "../tooltip.js";
 import { getDateFnsLocale as B } from "../../../i18n/getDateFnsLocale.js";
 import { useImpactNovaI18n as G } from "../../../i18n/ImpactNovaI18nContext.js";
-const H = a.forwardRef(
+const H = l.forwardRef(
   ({
     value: t,
     onChange: s,
     format: C = "MM/dd/yyyy",
-    placeholder: x,
-    minDate: P,
+    placeholder: P,
+    minDate: x,
     maxDate: M,
-    startMonth: N,
-    endMonth: D,
+    startMonth: D,
+    endMonth: N,
     showFooter: p = !0,
     disabled: o,
     className: k,
     ...A
   }, T) => {
-    const { locale: m, t: l } = G(), b = a.useMemo(() => B(m), [m]), v = x ?? l("datePicker.selectMultipleDates"), [d, n] = a.useState(!1), [f, i] = a.useState(t);
-    a.useEffect(() => {
+    const { locale: m, t: n } = G(), b = l.useMemo(() => B(m), [m]), v = P ?? n("datePicker.selectMultipleDates"), [d, a] = l.useState(!1), [f, i] = l.useState(t);
+    l.useEffect(() => {
       i(t);
     }, [d, t]);
     const I = (r) => {
       i(r), p || s?.(r);
     }, L = (r) => {
-      s?.(r !== void 0 ? r : f), n(!1);
+      s?.(r !== void 0 ? r : f), a(!1);
     }, O = () => {
-      i(t), n(!1);
+      i(t), a(!1);
     }, h = () => {
-      i(void 0), s?.(void 0), p || n(!1);
+      i(void 0), s?.(void 0), p || a(!1);
     }, S = t && t.length > 0 ? t.length === 1 ? z(t[0], C, { locale: b }) : `${t.length} dates selected` : "";
     return /* @__PURE__ */ c(F, { open: o ? !1 : d, onOpenChange: (r) => {
-      o || n(r);
+      o || a(r);
     }, children: [
       /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         E,
@@ -49,7 +49,7 @@ const H = a.forwardRef(
           readOnly: !0,
           disabled: o,
           onClick: () => {
-            !o && !d && n(!0);
+            !o && !d && a(!0);
           },
           className: R("cursor-pointer", k),
           suffix: /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
@@ -59,7 +59,7 @@ const H = a.forwardRef(
                 {
                   type: "button",
                   tabIndex: 0,
-                  "aria-label": l("calendar.clear"),
+                  "aria-label": n("calendar.clear"),
                   onClick: (r) => {
                     r.stopPropagation(), h();
                   },
@@ -67,11 +67,11 @@ const H = a.forwardRef(
                   children: /* @__PURE__ */ e(j, { className: "size-3 hover:text-content" })
                 }
               ) }),
-              /* @__PURE__ */ e(g, { variant: "tertiary", side: "top", children: l("calendar.clear") })
+              /* @__PURE__ */ e(g, { variant: "tertiary", side: "top", children: n("calendar.clear") })
             ] }),
             /* @__PURE__ */ c(u, { children: [
               /* @__PURE__ */ e(y, { asChild: !0, children: /* @__PURE__ */ e(w, { className: "h-4 w-4 text-secondary-foreground" }) }),
-              /* @__PURE__ */ e(g, { variant: "tertiary", side: "top", children: l("datePicker.selectMultipleDates") })
+              /* @__PURE__ */ e(g, { variant: "tertiary", side: "top", children: n("datePicker.selectMultipleDates") })
             ] })
           ] }),
           ...A
@@ -82,6 +82,7 @@ const H = a.forwardRef(
         {
           className: "w-auto p-0",
           align: "start",
+          "aria-label": n("datePicker.selectMultipleDates"),
           onOpenAutoFocus: (r) => r.preventDefault(),
           children: /* @__PURE__ */ e(
             q,
@@ -89,9 +90,9 @@ const H = a.forwardRef(
               mode: "multiple",
               selected: f,
               onSelect: I,
-              disabled: { before: P, after: M },
-              startMonth: N,
-              endMonth: D,
+              disabled: { before: x, after: M },
+              startMonth: D,
+              endMonth: N,
               showFooter: p,
               onApply: L,
               onCancel: O,

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

@@ -1,100 +1,119 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import * as c from "react";
-import { Cross as j, CalendarMonth as v } from "impact-nova-icons";
-import { cn as w } from "../../../lib/utils.js";
-import { Input as z } from "../input.js";
-import { Popover as R, PopoverAnchor as $, PopoverContent as E } from "../popover.js";
-import { Calendar as L } from "../calendar.js";
-import { Tooltip as u, TooltipTrigger as y, TooltipContent as C } from "../tooltip.js";
-import { useImpactNovaI18n as V } from "../../../i18n/ImpactNovaI18nContext.js";
-const q = c.forwardRef(
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import * as l from "react";
+import { Cross as j, CalendarMonth as w } from "impact-nova-icons";
+import { cn as D } from "../../../lib/utils.js";
+import { Input as R } from "../input.js";
+import { Popover as z, PopoverAnchor as E, PopoverContent as K } from "../popover.js";
+import { Calendar as V } from "../calendar.js";
+import { Tooltip as y, TooltipTrigger as g, TooltipContent as M } from "../tooltip.js";
+import { useImpactNovaI18n as $ } from "../../../i18n/ImpactNovaI18nContext.js";
+const L = l.forwardRef(
   ({
-    value: e,
-    onChange: s,
-    placeholder: g,
-    minDate: h,
-    maxDate: M,
-    startMonth: P,
+    value: n,
+    onChange: p,
+    placeholder: C,
+    minDate: f,
+    maxDate: P,
+    startMonth: k,
     endMonth: x,
-    showFooter: p = !0,
-    disabled: l,
-    className: k,
+    showFooter: d = !0,
+    disabled: r,
+    className: b,
     ...N
   }, T) => {
-    const { t: o } = V(), A = g ?? o("datePicker.selectMultipleMonths"), [d, r] = c.useState(!1), [m, i] = c.useState(e);
-    c.useEffect(() => {
-      i(e);
-    }, [d, e]);
-    const O = (n) => {
-      i(n), p || s?.(n);
-    }, b = (n) => {
-      s?.(n !== void 0 ? n : m), r(!1);
-    }, S = () => {
-      i(e), r(!1);
-    }, f = () => {
-      i(void 0), s?.(void 0), p || r(!1);
-    }, I = e && e.length > 0 ? e.length === 1 ? `${e[0].month + 1}/${e[0].year}` : o("datePicker.monthsSelected", { count: e.length }) : "";
-    return /* @__PURE__ */ a(R, { open: d, onOpenChange: (n) => {
-      l || r(n);
+    const { t: o } = $(), A = C ?? o("datePicker.selectMultipleMonths"), [i, a] = l.useState(!1), h = l.useRef(!1), [m, c] = l.useState(n);
+    l.useEffect(() => {
+      c(n);
+    }, [i, n]);
+    const O = (e) => {
+      c(e), d || p?.(e);
+    }, v = (e) => {
+      p?.(e !== void 0 ? e : m), a(!1);
+    }, I = () => {
+      c(n), a(!1);
+    }, u = () => {
+      c(void 0), p?.(void 0), d || a(!1);
+    }, S = n && n.length > 0 ? n.length === 1 ? `${n[0].month + 1}/${n[0].year}` : o("datePicker.monthsSelected", { count: n.length }) : "";
+    return /* @__PURE__ */ s(z, { open: r ? !1 : i, onOpenChange: (e) => {
+      r || a(e);
     }, children: [
-      /* @__PURE__ */ t($, { asChild: !0, children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-        z,
+      /* @__PURE__ */ t(E, { asChild: !0, children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+        R,
         {
           ref: T,
-          value: I,
+          value: S,
           placeholder: A,
           readOnly: !0,
-          disabled: l,
+          disabled: r,
           onClick: () => {
-            !l && !d && r(!0);
+            !r && !i && a(!0);
           },
-          className: w("cursor-pointer", k),
-          suffix: /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
-            e && e.length > 0 && !l && /* @__PURE__ */ a(u, { children: [
-              /* @__PURE__ */ t(y, { asChild: !0, children: /* @__PURE__ */ t(
+          className: D("cursor-pointer", b),
+          suffix: /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
+            n && n.length > 0 && !r && /* @__PURE__ */ s(y, { children: [
+              /* @__PURE__ */ t(g, { asChild: !0, children: /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
                   tabIndex: 0,
                   "aria-label": o("calendar.clear"),
-                  onClick: (n) => {
-                    n.stopPropagation(), f();
+                  onClick: (e) => {
+                    e.stopPropagation(), u();
                   },
                   className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
                   children: /* @__PURE__ */ t(j, { className: "size-3 hover:text-content" })
                 }
               ) }),
-              /* @__PURE__ */ t(C, { variant: "tertiary", side: "top", children: o("calendar.clear") })
+              /* @__PURE__ */ t(M, { variant: "tertiary", side: "top", children: o("calendar.clear") })
             ] }),
-            /* @__PURE__ */ a(u, { children: [
-              /* @__PURE__ */ t(y, { asChild: !0, children: /* @__PURE__ */ t(v, { className: "h-4 w-4 text-secondary-foreground" }) }),
-              /* @__PURE__ */ t(C, { variant: "tertiary", side: "top", children: o("datePicker.selectMultipleMonths") })
+            /* @__PURE__ */ s(y, { children: [
+              /* @__PURE__ */ t(g, { asChild: !0, children: /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: 0,
+                  "data-component": "calendar-trigger",
+                  "aria-label": o("datePicker.selectMultipleMonths"),
+                  onPointerDown: (e) => {
+                    e.preventDefault(), e.stopPropagation(), r || a(!i);
+                  },
+                  onKeyDown: (e) => {
+                    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), r || (h.current = !0, a(!i)));
+                  },
+                  className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                  children: /* @__PURE__ */ t(w, { className: "h-4 w-4 text-secondary-foreground" })
+                }
+              ) }),
+              /* @__PURE__ */ t(M, { variant: "tertiary", side: "top", children: o("datePicker.selectMultipleMonths") })
             ] })
           ] }),
           ...N
         }
       ) }) }),
       /* @__PURE__ */ t(
-        E,
+        K,
         {
           className: "w-auto p-0",
           align: "start",
-          onOpenAutoFocus: (n) => n.preventDefault(),
+          "aria-label": o("datePicker.selectMultipleMonths"),
+          onOpenAutoFocus: (e) => {
+            h.current || e.preventDefault(), h.current = !1;
+          },
           children: /* @__PURE__ */ t(
-            L,
+            V,
             {
               pickerType: "month",
               monthMode: "multiple",
               selectedMonths: m,
               onMonthSelect: O,
-              disabled: { before: h, after: M },
-              startMonth: P,
+              disabled: { before: f, after: P },
+              startMonth: k,
               endMonth: x,
-              defaultMonth: h,
-              showFooter: p,
-              onApply: b,
-              onCancel: S,
-              onClear: f,
+              defaultMonth: f,
+              showFooter: d,
+              onApply: v,
+              onCancel: I,
+              onClear: u,
               captionLayout: "dropdown"
             }
           )
@@ -103,7 +122,7 @@ const q = c.forwardRef(
     ] });
   }
 );
-q.displayName = "MultiMonthPicker";
+L.displayName = "MultiMonthPicker";
 export {
-  q as MultiMonthPicker
+  L as MultiMonthPicker
 };

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

@@ -1,117 +1,136 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import * as s from "react";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import * as c from "react";
 import { Cross as V, CalendarMonth as q } from "impact-nova-icons";
-import { format as g } from "date-fns";
+import { format as C } from "date-fns";
 import { cn as B } from "../../../lib/utils.js";
 import { Input as F } from "../input.js";
 import { Popover as G, PopoverAnchor as H, PopoverContent as J } from "../popover.js";
-import { Calendar as K } from "../calendar.js";
-import { Tooltip as C, TooltipTrigger as x, TooltipContent as M } from "../tooltip.js";
-import { getDateFnsLocale as Q } from "../../../i18n/getDateFnsLocale.js";
-import { useImpactNovaI18n as U } from "../../../i18n/ImpactNovaI18nContext.js";
-const X = (e, n = "MM/dd/yyyy", o) => {
-  const d = g(e.startDate, n, o ? { locale: o } : {}), m = g(e.endDate, n, o ? { locale: o } : {});
-  return `${d} - ${m}`;
-}, Y = s.forwardRef(
+import { Calendar as Q } from "../calendar.js";
+import { Tooltip as P, TooltipTrigger as b, TooltipContent as x } from "../tooltip.js";
+import { getDateFnsLocale as U } from "../../../i18n/getDateFnsLocale.js";
+import { useImpactNovaI18n as X } from "../../../i18n/ImpactNovaI18nContext.js";
+const Y = (t, a = "MM/dd/yyyy", s) => {
+  const f = C(t.startDate, a, s ? { locale: s } : {}), m = C(t.endDate, a, s ? { locale: s } : {});
+  return `${f} - ${m}`;
+}, Z = c.forwardRef(
   ({
-    value: e,
-    onChange: n,
-    format: o = "MM/dd/yyyy",
-    placeholder: d,
+    value: t,
+    onChange: a,
+    format: s = "MM/dd/yyyy",
+    placeholder: f,
     minDate: m,
-    maxDate: P,
-    startMonth: N,
-    endMonth: W,
-    showFooter: f = !0,
-    calendarType: T = "calendar",
-    fiscalMode: b = "basic",
-    selectionMode: w = "week",
-    fiscalMonthPattern: A,
-    fiscalYearStartMonth: O = 1,
-    weekStartsOn: S = 1,
-    disabled: c,
-    className: v,
-    ...D
-  }, I) => {
-    const { locale: u, t: i } = U(), L = s.useMemo(() => Q(u), [u]), j = d ?? i("datePicker.selectWeeks"), [h, a] = s.useState(!1), [y, l] = s.useState(e);
-    s.useEffect(() => {
-      l(e);
-    }, [h, e]);
-    const $ = (r) => {
-      l(r), f || n?.(r);
-    }, z = (r) => {
-      n?.(r !== void 0 ? r : y), a(!1);
-    }, R = () => {
-      l(e), a(!1);
-    }, k = () => {
-      l(void 0), n?.(void 0), f || a(!1);
-    }, E = e && e.length > 0 ? e.length === 1 ? X(e[0], o, L) : `${e.length} weeks selected` : "";
-    return /* @__PURE__ */ p(G, { open: h, onOpenChange: (r) => {
-      c || a(r);
+    maxDate: W,
+    startMonth: M,
+    endMonth: N,
+    showFooter: u = !0,
+    calendarType: w = "calendar",
+    fiscalMode: D = "basic",
+    selectionMode: T = "week",
+    fiscalMonthPattern: v,
+    fiscalYearStartMonth: A = 1,
+    weekStartsOn: O = 1,
+    disabled: n,
+    className: S,
+    ...I
+  }, j) => {
+    const { locale: y, t: i } = X(), L = c.useMemo(() => U(y), [y]), R = f ?? i("datePicker.selectWeeks"), [l, o] = c.useState(!1), h = c.useRef(!1), [k, p] = c.useState(t);
+    c.useEffect(() => {
+      p(t);
+    }, [l, t]);
+    const $ = (e) => {
+      p(e), u || a?.(e);
+    }, z = (e) => {
+      a?.(e !== void 0 ? e : k), o(!1);
+    }, E = () => {
+      p(t), o(!1);
+    }, g = () => {
+      p(void 0), a?.(void 0), u || o(!1);
+    }, K = t && t.length > 0 ? t.length === 1 ? Y(t[0], s, L) : `${t.length} weeks selected` : "";
+    return /* @__PURE__ */ d(G, { open: n ? !1 : l, onOpenChange: (e) => {
+      n || o(e);
     }, children: [
-      /* @__PURE__ */ t(H, { asChild: !0, children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+      /* @__PURE__ */ r(H, { asChild: !0, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
         F,
         {
-          ref: I,
-          value: E,
-          placeholder: j,
+          ref: j,
+          value: K,
+          placeholder: R,
           readOnly: !0,
-          disabled: c,
+          disabled: n,
           onClick: () => {
-            !c && !h && a(!0);
+            !n && !l && o(!0);
           },
-          className: B("cursor-pointer", v),
-          suffix: /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
-            e && e.length > 0 && !c && /* @__PURE__ */ p(C, { children: [
-              /* @__PURE__ */ t(x, { asChild: !0, children: /* @__PURE__ */ t(
+          className: B("cursor-pointer", S),
+          suffix: /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
+            t && t.length > 0 && !n && /* @__PURE__ */ d(P, { children: [
+              /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
                   tabIndex: 0,
                   "aria-label": i("calendar.clear"),
-                  onClick: (r) => {
-                    r.stopPropagation(), k();
+                  onClick: (e) => {
+                    e.stopPropagation(), g();
                   },
                   className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                  children: /* @__PURE__ */ t(V, { className: "size-3 hover:text-content" })
+                  children: /* @__PURE__ */ r(V, { className: "size-3 hover:text-content" })
                 }
               ) }),
-              /* @__PURE__ */ t(M, { variant: "tertiary", side: "top", children: i("calendar.clear") })
+              /* @__PURE__ */ r(x, { variant: "tertiary", side: "top", children: i("calendar.clear") })
             ] }),
-            /* @__PURE__ */ p(C, { children: [
-              /* @__PURE__ */ t(x, { asChild: !0, children: /* @__PURE__ */ t(q, { className: "h-4 w-4 text-secondary-foreground" }) }),
-              /* @__PURE__ */ t(M, { variant: "tertiary", side: "top", children: i("datePicker.selectWeeks") })
+            /* @__PURE__ */ d(P, { children: [
+              /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: 0,
+                  "data-component": "calendar-trigger",
+                  "aria-label": i("datePicker.selectWeeks"),
+                  onPointerDown: (e) => {
+                    e.preventDefault(), e.stopPropagation(), n || o(!l);
+                  },
+                  onKeyDown: (e) => {
+                    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), n || (h.current = !0, o(!l)));
+                  },
+                  className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                  children: /* @__PURE__ */ r(q, { className: "h-4 w-4 text-secondary-foreground" })
+                }
+              ) }),
+              /* @__PURE__ */ r(x, { variant: "tertiary", side: "top", children: i("datePicker.selectWeeks") })
             ] })
           ] }),
-          ...D
+          ...I
         }
       ) }) }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ r(
         J,
         {
           className: "w-auto p-0",
           align: "start",
-          onOpenAutoFocus: (r) => r.preventDefault(),
-          children: /* @__PURE__ */ t(
-            K,
+          "aria-label": i("datePicker.selectWeeks"),
+          onOpenAutoFocus: (e) => {
+            h.current || e.preventDefault(), h.current = !1;
+          },
+          children: /* @__PURE__ */ r(
+            Q,
             {
               pickerType: "week",
               weekMode: "multiple",
-              selectedWeeks: y,
+              selectedWeeks: k,
               onWeekSelect: $,
-              disabled: { before: m, after: P },
-              startMonth: N,
-              endMonth: W,
-              showFooter: f,
-              calendarType: T,
-              fiscalMode: b,
-              selectionMode: w,
-              fiscalMonthPattern: A,
-              fiscalYearStartMonth: O,
-              weekStartsOn: S,
+              disabled: { before: m, after: W },
+              startMonth: M,
+              endMonth: N,
+              showFooter: u,
+              calendarType: w,
+              fiscalMode: D,
+              selectionMode: T,
+              fiscalMonthPattern: v,
+              fiscalYearStartMonth: A,
+              weekStartsOn: O,
               onApply: z,
-              onCancel: R,
-              onClear: k,
+              onCancel: E,
+              onClear: g,
               captionLayout: "dropdown"
             }
           )
@@ -120,7 +139,7 @@ const X = (e, n = "MM/dd/yyyy", o) => {
     ] });
   }
 );
-Y.displayName = "MultiWeekPicker";
+Z.displayName = "MultiWeekPicker";
 export {
-  Y as MultiWeekPicker
+  Z as MultiWeekPicker
 };