impact-nova 2.5.16 → 2.6.0-alpha.0

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

@@ -3,128 +3,127 @@ import * as a from "react";
 import { Cross as _, CalendarMonth as ee } from "impact-nova-icons";
 import { format as te } from "date-fns";
 import { cn as re } from "../../../lib/utils.js";
-import { Input as oe } from "../input/input.js";
-import { Popover as ne, PopoverAnchor as ae, PopoverContent as se } from "../../feedback/popover/popover.js";
-import { Calendar as ie } from "../../data-display/calendar/calendar.js";
-import { Tooltip as P, TooltipTrigger as C, TooltipContent as k } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as ce } from "../../../i18n/use-impact-nova-i18n.js";
-import { getDateFnsLocale as le } from "../../../i18n/getDateFnsLocale.js";
-import { coerceDateArrayApply as pe, coerceDateArray as de } from "./calendar-selection-adapters.js";
-import { usePickerDismissActionsRef as fe, usePickerFooterDismissNudge as me, handlePickerSurfacePointerDown as ue } from "./date-input-behavior.js";
-import { buildDateBoundsMatcher as he } from "../../../lib/date-bounds-matcher.js";
-import { fiscalCalendarPassThrough as ye } from "./fiscal-pass-through.js";
+import { Input as ne } from "../input/input.js";
+import { Popover as oe, PopoverAnchor as ae, PopoverContent as ie } from "../../feedback/popover/popover.js";
+import { Calendar as se } from "../../data-display/calendar/calendar.js";
+import { Tooltip as D, TooltipTrigger as P, TooltipContent as C } from "../../feedback/tooltip/tooltip.js";
+import { usePickerI18n as ce } from "./use-picker-i18n.js";
+import { coerceDateArrayApply as le, coerceDateArray as pe } from "./calendar-selection-adapters.js";
+import { usePickerDismissActionsRef as de, usePickerFooterDismissNudge as fe, handlePickerSurfacePointerDown as me } from "./date-input-behavior.js";
+import { buildDateBoundsMatcher as ue } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as he } from "./fiscal-pass-through.js";
 const ge = a.forwardRef(
   ({
     value: t,
     onChange: m,
-    format: x = "MM/dd/yyyy",
-    placeholder: M,
+    format: k,
+    placeholder: x,
     minDate: A,
-    maxDate: N,
-    startMonth: b,
+    maxDate: b,
+    startMonth: N,
     endMonth: T,
     showFooter: l = !0,
-    disabled: o,
-    className: R,
-    calendarKind: S,
-    fiscalMode: F,
-    granularity: I,
-    fiscalMonthPattern: L,
-    fiscalYearStartMonth: j,
+    disabled: n,
+    className: M,
+    calendarKind: R,
+    fiscalMode: S,
+    granularity: F,
+    fiscalMonthPattern: j,
+    fiscalYearStartMonth: I,
     fiscalConfig: O,
     showPresets: w,
     showPeriodBoundaries: E,
-    autoNavigateToAvailable: v,
+    autoNavigateToAvailable: L,
     comparison: z,
     onComparisonChange: K,
     ...q
-  }, B) => {
-    const { locale: h, t: s } = ce(), H = a.useMemo(() => le(h), [h]), V = M ?? s("datePicker.selectMultipleDates"), [i, n] = a.useState(!1), u = a.useRef(null), y = fe(), { footerFlashKey: $, footerFlashTarget: G, popoverHandlers: J } = me(l, i, y, u), [p, d] = a.useState(t);
+  }, v) => {
+    const { dateFnsLocale: B, dateFormat: H, t: i } = ce(k), V = x ?? i("datePicker.selectMultipleDates"), [s, o] = a.useState(!1), u = a.useRef(null), h = de(), { footerFlashKey: $, footerFlashTarget: G, popoverHandlers: J } = fe(l, s, h, u), [p, d] = a.useState(t);
     a.useEffect(() => {
       d(t);
-    }, [i, t]);
+    }, [s, t]);
     const Q = (e) => {
-      const c = de(e);
+      const c = pe(e);
       d(c), l || m?.(c);
     }, U = (e) => {
-      const c = pe(e, p);
-      m?.(c), n(!1);
+      const c = le(e, p);
+      m?.(c), o(!1);
     }, g = () => {
-      d(t), n(!1);
-    }, D = () => {
-      d(void 0), m?.(void 0), l || n(!1);
-    }, W = t && t.length > 0 ? t.length === 1 ? te(t[0], x, { locale: H }) : `${t.length} dates selected` : "", X = a.useCallback(() => {
+      d(t), o(!1);
+    }, y = () => {
+      d(void 0), m?.(void 0), l || o(!1);
+    }, W = t && t.length > 0 ? t.length === 1 ? te(t[0], H, { locale: B }) : `${t.length} dates selected` : "", X = a.useCallback(() => {
       const e = p?.length ?? 0, c = t?.length ?? 0;
       return e === c && (p ?? []).every(
         (Y, Z) => Y.getTime() === t?.[Z]?.getTime()
       ) ? "dismiss" : e > 0 ? "apply" : "cancel";
     }, [p, t]);
     return a.useLayoutEffect(() => {
-      y.current = {
+      h.current = {
         onDismiss: g,
         resolveFlash: X
       };
-    }), /* @__PURE__ */ f(ne, { open: o ? !1 : i, onOpenChange: (e) => {
-      o || !e && l || n(e);
+    }), /* @__PURE__ */ f(oe, { open: n ? !1 : s, onOpenChange: (e) => {
+      n || !e && l || o(e);
     }, children: [
       /* @__PURE__ */ r(ae, { asChild: !0, children: /* @__PURE__ */ r(
         "div",
         {
           ref: u,
-          onPointerDown: (e) => ue({
-            disabled: o,
+          onPointerDown: (e) => me({
+            disabled: n,
             event: e,
-            onOpen: () => n(!0),
+            onOpen: () => o(!0),
             focusField: () => u.current?.querySelector("input")?.focus()
           }),
           children: /* @__PURE__ */ r(
-            oe,
+            ne,
             {
-              ref: B,
+              ref: v,
               value: W,
               placeholder: V,
               readOnly: !0,
-              disabled: o,
+              disabled: n,
               onClick: () => {
-                !o && !i && n(!0);
+                !n && !s && o(!0);
               },
-              className: re("cursor-pointer", R),
+              className: re("cursor-pointer", M),
               suffix: /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
-                t && t.length > 0 && !o && /* @__PURE__ */ f(P, { children: [
-                  /* @__PURE__ */ r(C, { asChild: !0, children: /* @__PURE__ */ r(
+                t && t.length > 0 && !n && /* @__PURE__ */ f(D, { children: [
+                  /* @__PURE__ */ r(P, { asChild: !0, children: /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       tabIndex: 0,
-                      "aria-label": s("calendar.clear"),
+                      "aria-label": i("calendar.clear"),
                       onClick: (e) => {
-                        e.stopPropagation(), D();
+                        e.stopPropagation(), y();
                       },
                       className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
                       children: /* @__PURE__ */ r(_, { className: "size-3 hover:text-content" })
                     }
                   ) }),
-                  /* @__PURE__ */ r(k, { variant: "tertiary", side: "top", children: s("calendar.clear") })
+                  /* @__PURE__ */ r(C, { variant: "tertiary", side: "top", children: i("calendar.clear") })
                 ] }),
-                /* @__PURE__ */ f(P, { children: [
-                  /* @__PURE__ */ r(C, { asChild: !0, children: /* @__PURE__ */ r(
+                /* @__PURE__ */ f(D, { children: [
+                  /* @__PURE__ */ r(P, { asChild: !0, children: /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       tabIndex: 0,
                       "data-component": "calendar-trigger",
-                      "aria-label": s("datePicker.selectMultipleDates"),
+                      "aria-label": i("datePicker.selectMultipleDates"),
                       onPointerDown: (e) => {
-                        e.preventDefault(), e.stopPropagation(), o || n(!i);
+                        e.preventDefault(), e.stopPropagation(), n || o(!s);
                       },
                       onKeyDown: (e) => {
-                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), o || n(!i));
+                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), n || o(!s));
                       },
                       className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
                       children: /* @__PURE__ */ r(ee, { className: "h-4 w-4 text-secondary-foreground" })
                     }
                   ) }),
-                  /* @__PURE__ */ r(k, { variant: "tertiary", side: "top", children: s("datePicker.selectMultipleDates") })
+                  /* @__PURE__ */ r(C, { variant: "tertiary", side: "top", children: i("datePicker.selectMultipleDates") })
                 ] })
               ] }),
               ...q
@@ -133,39 +132,39 @@ const ge = a.forwardRef(
         }
       ) }),
       /* @__PURE__ */ r(
-        se,
+        ie,
         {
           className: "w-auto p-0",
           align: "start",
-          "aria-label": s("datePicker.selectMultipleDates"),
+          "aria-label": i("datePicker.selectMultipleDates"),
           onOpenAutoFocus: (e) => e.preventDefault(),
           ...J,
           children: /* @__PURE__ */ r(
-            ie,
+            se,
             {
               mode: "multiple",
               selected: p,
               footerFlashKey: $,
               footerFlashTarget: G,
               onSelect: Q,
-              disabled: he(A, N),
-              startMonth: b,
+              disabled: ue(A, b),
+              startMonth: N,
               endMonth: T,
               showFooter: l,
               onApply: U,
               onCancel: g,
-              onClear: D,
+              onClear: y,
               captionLayout: "dropdown",
-              ...ye({
-                calendarKind: S,
-                fiscalMode: F,
-                granularity: I,
-                fiscalMonthPattern: L,
-                fiscalYearStartMonth: j,
+              ...he({
+                calendarKind: R,
+                fiscalMode: S,
+                granularity: F,
+                fiscalMonthPattern: j,
+                fiscalYearStartMonth: I,
                 fiscalConfig: O,
                 showPresets: w,
                 showPeriodBoundaries: E,
-                autoNavigateToAvailable: v,
+                autoNavigateToAvailable: L,
                 comparison: z,
                 onComparisonChange: K
               })

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

@@ -1,117 +1,116 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import * as n from "react";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import * as s from "react";
 import { Cross as ne, CalendarMonth as oe } from "impact-nova-icons";
-import { format as b } from "date-fns";
+import { format as W } from "date-fns";
 import { cn as se } from "../../../lib/utils.js";
-import { Input as ae } from "../input/input.js";
-import { Popover as ie, PopoverAnchor as ce, PopoverContent as le } from "../../feedback/popover/popover.js";
+import { Input as ie } from "../input/input.js";
+import { Popover as ae, PopoverAnchor as ce, PopoverContent as le } from "../../feedback/popover/popover.js";
 import { Calendar as pe } from "../../data-display/calendar/calendar.js";
-import { Tooltip as x, TooltipTrigger as A, TooltipContent as M } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as de } from "../../../i18n/use-impact-nova-i18n.js";
-import { getDateFnsLocale as fe } from "../../../i18n/getDateFnsLocale.js";
-import { coerceWeekArrayApply as me, coerceWeekArray as ue } from "./calendar-selection-adapters.js";
-import { usePickerDismissActionsRef as he, usePickerFooterDismissNudge as ye, handlePickerSurfacePointerDown as ke } from "./date-input-behavior.js";
-import { buildDateBoundsMatcher as ge } from "../../../lib/date-bounds-matcher.js";
-import { fiscalCalendarPassThrough as Pe } from "./fiscal-pass-through.js";
-const Ce = (t, a = "MM/dd/yyyy", i) => {
-  const h = b(t.startDate, a, i ? { locale: i } : {}), y = b(t.endDate, a, i ? { locale: i } : {});
-  return `${h} - ${y}`;
-}, De = n.forwardRef(
+import { Tooltip as b, TooltipTrigger as x, TooltipContent as A } from "../../feedback/tooltip/tooltip.js";
+import { usePickerI18n as de } from "./use-picker-i18n.js";
+import { coerceWeekArrayApply as fe, coerceWeekArray as ue } from "./calendar-selection-adapters.js";
+import { usePickerDismissActionsRef as me, usePickerFooterDismissNudge as he, handlePickerSurfacePointerDown as ke } from "./date-input-behavior.js";
+import { buildDateBoundsMatcher as ye } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as ge } from "./fiscal-pass-through.js";
+const Pe = (t, i = "MM/dd/yyyy", a) => {
+  const h = W(t.startDate, i, a ? { locale: a } : {}), k = W(t.endDate, i, a ? { locale: a } : {});
+  return `${h} - ${k}`;
+}, Ce = s.forwardRef(
   ({
     value: t,
-    onChange: a,
-    format: i = "MM/dd/yyyy",
+    onChange: i,
+    format: a,
     placeholder: h,
-    minDate: y,
-    maxDate: N,
-    startMonth: T,
+    minDate: k,
+    maxDate: T,
+    startMonth: N,
     endMonth: R,
     showFooter: d = !0,
     calendarKind: S,
-    fiscalMode: v = "basic",
+    fiscalMode: M = "basic",
     granularity: w,
-    fiscalMonthPattern: I,
-    fiscalYearStartMonth: L = 1,
-    fiscalConfig: O,
-    weekStartsOn: j = 1,
-    showPresets: F,
+    fiscalMonthPattern: v,
+    fiscalYearStartMonth: O = 1,
+    fiscalConfig: j,
+    weekStartsOn: F,
+    showPresets: I,
     showPeriodBoundaries: E,
     autoNavigateToAvailable: K,
-    comparison: $,
-    onComparisonChange: z,
-    disabled: o,
-    className: V,
-    ...q
-  }, B) => {
-    const { locale: P, t: c } = de(), H = n.useMemo(() => fe(P), [P]), G = h ?? c("datePicker.selectWeeks"), [l, s] = n.useState(!1), k = n.useRef(!1), g = n.useRef(null), C = he(), { footerFlashKey: J, footerFlashTarget: Q, popoverHandlers: U } = ye(d, l, C, g), [f, m] = n.useState(t);
-    n.useEffect(() => {
-      m(t);
+    comparison: L,
+    onComparisonChange: $,
+    disabled: n,
+    className: z,
+    ...V
+  }, q) => {
+    const { dateFnsLocale: B, dateFormat: H, t: c } = de(a), G = h ?? c("datePicker.selectWeeks"), [l, o] = s.useState(!1), y = s.useRef(!1), g = s.useRef(null), P = me(), { footerFlashKey: J, footerFlashTarget: Q, popoverHandlers: U } = he(d, l, P, g), [f, u] = s.useState(t);
+    s.useEffect(() => {
+      u(t);
     }, [l, t]);
     const X = (e) => {
       const p = ue(e);
-      m(p), d || a?.(p);
+      u(p), d || i?.(p);
     }, Y = (e) => {
-      const p = me(e, f);
-      a?.(p), s(!1);
+      const p = fe(e, f);
+      i?.(p), o(!1);
+    }, C = () => {
+      u(t), o(!1);
     }, D = () => {
-      m(t), s(!1);
-    }, W = () => {
-      m(void 0), a?.(void 0), d || s(!1);
-    }, Z = t && t.length > 0 ? t.length === 1 ? Ce(t[0], i, H) : `${t.length} weeks selected` : "", _ = (e) => {
-      o || !e && d || s(e);
-    }, ee = n.useCallback(() => {
+      u(void 0), i?.(void 0), d || o(!1);
+    }, Z = t && t.length > 0 ? t.length === 1 ? Pe(t[0], H, B) : `${t.length} weeks selected` : "", _ = (e) => {
+      n || !e && d || o(e);
+    }, ee = s.useCallback(() => {
       const e = f?.length ?? 0, p = t?.length ?? 0;
       return e === p && (f ?? []).every(
         (te, re) => te.startDate.getTime() === t?.[re]?.startDate.getTime()
       ) ? "dismiss" : e > 0 ? "apply" : "cancel";
     }, [f, t]);
-    return n.useLayoutEffect(() => {
-      C.current = {
-        onDismiss: D,
+    return s.useLayoutEffect(() => {
+      P.current = {
+        onDismiss: C,
         resolveFlash: ee
       };
-    }), /* @__PURE__ */ u(ie, { open: o ? !1 : l, onOpenChange: _, children: [
+    }), /* @__PURE__ */ m(ae, { open: n ? !1 : l, onOpenChange: _, children: [
       /* @__PURE__ */ r(ce, { asChild: !0, children: /* @__PURE__ */ r(
         "div",
         {
           ref: g,
           onPointerDown: (e) => ke({
-            disabled: o,
+            disabled: n,
             event: e,
-            onOpen: () => s(!0),
+            onOpen: () => o(!0),
             focusField: () => g.current?.querySelector("input")?.focus()
           }),
           children: /* @__PURE__ */ r(
-            ae,
+            ie,
             {
-              ref: B,
+              ref: q,
               value: Z,
               placeholder: G,
               readOnly: !0,
-              disabled: o,
+              disabled: n,
               onClick: () => {
-                !o && !l && s(!0);
+                !n && !l && o(!0);
               },
-              className: se("cursor-pointer", V),
-              suffix: /* @__PURE__ */ u("div", { className: "flex items-center gap-1", children: [
-                t && t.length > 0 && !o && /* @__PURE__ */ u(x, { children: [
-                  /* @__PURE__ */ r(A, { asChild: !0, children: /* @__PURE__ */ r(
+              className: se("cursor-pointer", z),
+              suffix: /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: [
+                t && t.length > 0 && !n && /* @__PURE__ */ m(b, { children: [
+                  /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       tabIndex: 0,
                       "aria-label": c("calendar.clear"),
                       onClick: (e) => {
-                        e.stopPropagation(), W();
+                        e.stopPropagation(), D();
                       },
                       className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
                       children: /* @__PURE__ */ r(ne, { className: "size-3 hover:text-content" })
                     }
                   ) }),
-                  /* @__PURE__ */ r(M, { variant: "tertiary", side: "top", children: c("calendar.clear") })
+                  /* @__PURE__ */ r(A, { variant: "tertiary", side: "top", children: c("calendar.clear") })
                 ] }),
-                /* @__PURE__ */ u(x, { children: [
-                  /* @__PURE__ */ r(A, { asChild: !0, children: /* @__PURE__ */ r(
+                /* @__PURE__ */ m(b, { children: [
+                  /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
@@ -119,19 +118,19 @@ const Ce = (t, a = "MM/dd/yyyy", i) => {
                       "data-component": "calendar-trigger",
                       "aria-label": c("datePicker.selectWeeks"),
                       onPointerDown: (e) => {
-                        e.preventDefault(), e.stopPropagation(), o || s(!l);
+                        e.preventDefault(), e.stopPropagation(), n || o(!l);
                       },
                       onKeyDown: (e) => {
-                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), o || (k.current = !0, s(!l)));
+                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), n || (y.current = !0, o(!l)));
                       },
                       className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
                       children: /* @__PURE__ */ r(oe, { className: "h-4 w-4 text-secondary-foreground" })
                     }
                   ) }),
-                  /* @__PURE__ */ r(M, { variant: "tertiary", side: "top", children: c("datePicker.selectWeeks") })
+                  /* @__PURE__ */ r(A, { variant: "tertiary", side: "top", children: c("datePicker.selectWeeks") })
                 ] })
               ] }),
-              ...q
+              ...V
             }
           )
         }
@@ -143,7 +142,7 @@ const Ce = (t, a = "MM/dd/yyyy", i) => {
           align: "start",
           "aria-label": c("datePicker.selectWeeks"),
           onOpenAutoFocus: (e) => {
-            k.current || e.preventDefault(), k.current = !1;
+            y.current || e.preventDefault(), y.current = !1;
           },
           ...U,
           children: /* @__PURE__ */ r(
@@ -155,27 +154,27 @@ const Ce = (t, a = "MM/dd/yyyy", i) => {
               footerFlashKey: J,
               footerFlashTarget: Q,
               onWeekSelect: X,
-              disabled: ge(y, N),
-              startMonth: T,
+              disabled: ye(k, T),
+              startMonth: N,
               endMonth: R,
               showFooter: d,
-              ...Pe({
+              ...ge({
                 calendarKind: S,
-                fiscalMode: v,
+                fiscalMode: M,
                 granularity: w,
-                fiscalMonthPattern: I,
-                fiscalYearStartMonth: L,
-                fiscalConfig: O,
-                weekStartsOn: j,
-                showPresets: F,
+                fiscalMonthPattern: v,
+                fiscalYearStartMonth: O,
+                fiscalConfig: j,
+                weekStartsOn: F,
+                showPresets: I,
                 showPeriodBoundaries: E,
                 autoNavigateToAvailable: K,
-                comparison: $,
-                onComparisonChange: z
+                comparison: L,
+                onComparisonChange: $
               }),
               onApply: Y,
-              onCancel: D,
-              onClear: W,
+              onCancel: C,
+              onClear: D,
               captionLayout: "dropdown"
             }
           )
@@ -184,7 +183,7 @@ const Ce = (t, a = "MM/dd/yyyy", i) => {
     ] });
   }
 );
-De.displayName = "MultiWeekPicker";
+Ce.displayName = "MultiWeekPicker";
 export {
-  De as MultiWeekPicker
+  Ce as MultiWeekPicker
 };

package/dist/components/forms/date-picker/use-picker-i18n.d.ts

@@ -0,0 +1,6 @@
+export declare function usePickerI18n(explicitFormat?: string): {
+    dateLocale: string;
+    dateFnsLocale: import('date-fns').Locale;
+    dateFormat: string;
+    t: (key: string, params?: import('../../../i18n').I18nParams) => string;
+};

package/dist/components/forms/date-picker/use-picker-i18n.js

@@ -0,0 +1,11 @@
+import * as c from "react";
+import { useImpactNovaI18n as m } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as n } from "../../../i18n/getDateFnsLocale.js";
+import { getLocalizedDatePattern as s } from "../../../i18n/format/date-pattern.js";
+function u(e) {
+  const { dateLocale: t, t: o } = m(), a = c.useMemo(() => n(t), [t]), r = e ?? s(t);
+  return { dateLocale: t, dateFnsLocale: a, dateFormat: r, t: o };
+}
+export {
+  u as usePickerI18n
+};