impact-nova 2.6.0-alpha.0 → 2.6.0

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

@@ -3,127 +3,128 @@ 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 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";
+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";
 const ge = a.forwardRef(
   ({
     value: t,
     onChange: m,
-    format: k,
-    placeholder: x,
+    format: x = "MM/dd/yyyy",
+    placeholder: M,
     minDate: A,
-    maxDate: b,
-    startMonth: N,
+    maxDate: N,
+    startMonth: b,
     endMonth: T,
     showFooter: l = !0,
-    disabled: n,
-    className: M,
-    calendarKind: R,
-    fiscalMode: S,
-    granularity: F,
-    fiscalMonthPattern: j,
-    fiscalYearStartMonth: I,
+    disabled: o,
+    className: R,
+    calendarKind: S,
+    fiscalMode: F,
+    granularity: I,
+    fiscalMonthPattern: L,
+    fiscalYearStartMonth: j,
     fiscalConfig: O,
     showPresets: w,
     showPeriodBoundaries: E,
-    autoNavigateToAvailable: L,
+    autoNavigateToAvailable: v,
     comparison: z,
     onComparisonChange: K,
     ...q
-  }, 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);
+  }, 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);
     a.useEffect(() => {
       d(t);
-    }, [s, t]);
+    }, [i, t]);
     const Q = (e) => {
-      const c = pe(e);
+      const c = de(e);
       d(c), l || m?.(c);
     }, U = (e) => {
-      const c = le(e, p);
-      m?.(c), o(!1);
+      const c = pe(e, p);
+      m?.(c), n(!1);
     }, g = () => {
-      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(() => {
+      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(() => {
       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(() => {
-      h.current = {
+      y.current = {
         onDismiss: g,
         resolveFlash: X
       };
-    }), /* @__PURE__ */ f(oe, { open: n ? !1 : s, onOpenChange: (e) => {
-      n || !e && l || o(e);
+    }), /* @__PURE__ */ f(ne, { open: o ? !1 : i, onOpenChange: (e) => {
+      o || !e && l || n(e);
     }, children: [
       /* @__PURE__ */ r(ae, { asChild: !0, children: /* @__PURE__ */ r(
         "div",
         {
           ref: u,
-          onPointerDown: (e) => me({
-            disabled: n,
+          onPointerDown: (e) => ue({
+            disabled: o,
             event: e,
-            onOpen: () => o(!0),
+            onOpen: () => n(!0),
             focusField: () => u.current?.querySelector("input")?.focus()
           }),
           children: /* @__PURE__ */ r(
-            ne,
+            oe,
             {
-              ref: v,
+              ref: B,
               value: W,
               placeholder: V,
               readOnly: !0,
-              disabled: n,
+              disabled: o,
               onClick: () => {
-                !n && !s && o(!0);
+                !o && !i && n(!0);
               },
-              className: re("cursor-pointer", M),
+              className: re("cursor-pointer", R),
               suffix: /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
-                t && t.length > 0 && !n && /* @__PURE__ */ f(D, { children: [
-                  /* @__PURE__ */ r(P, { asChild: !0, children: /* @__PURE__ */ r(
+                t && t.length > 0 && !o && /* @__PURE__ */ f(P, { children: [
+                  /* @__PURE__ */ r(C, { asChild: !0, children: /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       tabIndex: 0,
-                      "aria-label": i("calendar.clear"),
+                      "aria-label": s("calendar.clear"),
                       onClick: (e) => {
-                        e.stopPropagation(), y();
+                        e.stopPropagation(), D();
                       },
                       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(C, { variant: "tertiary", side: "top", children: i("calendar.clear") })
+                  /* @__PURE__ */ r(k, { variant: "tertiary", side: "top", children: s("calendar.clear") })
                 ] }),
-                /* @__PURE__ */ f(D, { children: [
-                  /* @__PURE__ */ r(P, { asChild: !0, children: /* @__PURE__ */ r(
+                /* @__PURE__ */ f(P, { children: [
+                  /* @__PURE__ */ r(C, { asChild: !0, children: /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       tabIndex: 0,
                       "data-component": "calendar-trigger",
-                      "aria-label": i("datePicker.selectMultipleDates"),
+                      "aria-label": s("datePicker.selectMultipleDates"),
                       onPointerDown: (e) => {
-                        e.preventDefault(), e.stopPropagation(), n || o(!s);
+                        e.preventDefault(), e.stopPropagation(), o || n(!i);
                       },
                       onKeyDown: (e) => {
-                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), n || o(!s));
+                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), o || n(!i));
                       },
                       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(C, { variant: "tertiary", side: "top", children: i("datePicker.selectMultipleDates") })
+                  /* @__PURE__ */ r(k, { variant: "tertiary", side: "top", children: s("datePicker.selectMultipleDates") })
                 ] })
               ] }),
               ...q
@@ -132,39 +133,39 @@ const ge = a.forwardRef(
         }
       ) }),
       /* @__PURE__ */ r(
-        ie,
+        se,
         {
           className: "w-auto p-0",
           align: "start",
-          "aria-label": i("datePicker.selectMultipleDates"),
+          "aria-label": s("datePicker.selectMultipleDates"),
           onOpenAutoFocus: (e) => e.preventDefault(),
           ...J,
           children: /* @__PURE__ */ r(
-            se,
+            ie,
             {
               mode: "multiple",
               selected: p,
               footerFlashKey: $,
               footerFlashTarget: G,
               onSelect: Q,
-              disabled: ue(A, b),
-              startMonth: N,
+              disabled: he(A, N),
+              startMonth: b,
               endMonth: T,
               showFooter: l,
               onApply: U,
               onCancel: g,
-              onClear: y,
+              onClear: D,
               captionLayout: "dropdown",
-              ...he({
-                calendarKind: R,
-                fiscalMode: S,
-                granularity: F,
-                fiscalMonthPattern: j,
-                fiscalYearStartMonth: I,
+              ...ye({
+                calendarKind: S,
+                fiscalMode: F,
+                granularity: I,
+                fiscalMonthPattern: L,
+                fiscalYearStartMonth: j,
                 fiscalConfig: O,
                 showPresets: w,
                 showPeriodBoundaries: E,
-                autoNavigateToAvailable: L,
+                autoNavigateToAvailable: v,
                 comparison: z,
                 onComparisonChange: K
               })

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

@@ -1,119 +1,119 @@
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
 import * as n from "react";
-import { Cross as _, CalendarMonth as $ } from "impact-nova-icons";
-import { cn as ee } from "../../../lib/utils.js";
-import { Input as te } from "../input/input.js";
-import { Calendar as re } from "../../data-display/calendar/calendar.js";
+import { Cross as $, CalendarMonth as ee } from "impact-nova-icons";
+import { cn as te } from "../../../lib/utils.js";
+import { Input as re } from "../input/input.js";
+import { Calendar as ne } from "../../data-display/calendar/calendar.js";
 import { Tooltip as M, TooltipTrigger as x, TooltipContent as b } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as ne } from "../../../i18n/use-impact-nova-i18n.js";
-import { buildDateBoundsMatcher as oe } from "../../../lib/date-bounds-matcher.js";
-import { fiscalCalendarPassThrough as ae } from "./fiscal-pass-through.js";
-import { DatePickerShell as ie } from "./date-picker-shell.js";
-import { usePickerDismissActionsRef as ce, usePickerFooterDismissNudge as se, handleReadonlyPickerKeyDown as le, handlePickerSurfacePointerDown as pe } from "./date-input-behavior.js";
-import { formatQuarterInput as ue } from "../../data-display/calendar/calendar-fiscal-labels.js";
+import { useImpactNovaI18n as oe } from "../../../i18n/use-impact-nova-i18n.js";
+import { buildDateBoundsMatcher as ae } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as ie } from "./fiscal-pass-through.js";
+import { DatePickerShell as le } from "./date-picker-shell.js";
+import { usePickerDismissActionsRef as ce, usePickerFooterDismissNudge as se, handleReadonlyPickerKeyDown as ue, handlePickerSurfacePointerDown as pe } from "./date-input-behavior.js";
+import { formatQuarterInput as de } from "../../data-display/calendar/calendar-fiscal-labels.js";
 import { viewMonthFromQuarter as fe } from "../../data-display/calendar/calendar-quarter-utils.js";
-const de = n.forwardRef(
+const me = n.forwardRef(
   ({
-    value: t,
-    onChange: u,
-    placeholder: R,
-    minDate: D,
-    maxDate: Q,
-    startMonth: N,
-    endMonth: S,
-    showFooter: s = !0,
+    value: g,
+    onChange: p,
+    placeholder: Q,
+    minDate: R,
+    maxDate: D,
+    startMonth: A,
+    endMonth: N,
+    showFooter: c = !0,
     disabled: o,
-    className: A,
+    className: S,
     calendarKind: I,
     fiscalMode: O,
     granularity: T,
     fiscalMonthPattern: w,
-    fiscalYearStartMonth: v,
-    fiscalConfig: K,
-    weekStartsOn: j,
-    showPresets: F,
-    showPeriodBoundaries: z,
-    autoNavigateToAvailable: E,
-    ...H
-  }, L) => {
-    const { t: a } = ne(), V = R ?? a("datePicker.selectMultipleQuarters"), f = n.useRef(null), y = n.useRef(null);
-    n.useImperativeHandle(L, () => f.current);
-    const [i, c] = n.useState(!1), d = n.useRef(!1), k = ce(), { footerFlashKey: q, footerFlashTarget: B, popoverHandlers: G } = se(s, i, k, y), [P, l] = n.useState(t), [J, U] = n.useState(fe(t?.[0]));
+    fiscalYearStartMonth: K,
+    fiscalConfig: j,
+    weekStartsOn: F,
+    showPresets: z,
+    showPeriodBoundaries: E,
+    autoNavigateToAvailable: H,
+    ...L
+  }, V) => {
+    const { t: a } = oe(), q = Q ?? a("datePicker.selectMultipleQuarters"), d = n.useRef(null), k = n.useRef(null);
+    n.useImperativeHandle(V, () => d.current);
+    const [i, l] = n.useState(!1), f = n.useRef(!1), P = ce(), { footerFlashKey: B, footerFlashTarget: G, popoverHandlers: J } = se(c, i, P, k), t = Array.isArray(g) ? g : void 0, [v, s] = n.useState(t), [U, W] = n.useState(fe(t?.[0]));
     n.useEffect(() => {
-      i || l(t);
+      i || s(t);
     }, [i, t]);
-    const m = n.useCallback(() => c(!1), []), W = ae({
+    const m = n.useCallback(() => l(!1), []), X = ie({
       calendarKind: I,
       fiscalMode: O,
       granularity: T,
       fiscalMonthPattern: w,
-      fiscalYearStartMonth: v,
-      fiscalConfig: K,
-      weekStartsOn: j,
-      showPresets: F,
-      showPeriodBoundaries: z,
-      autoNavigateToAvailable: E
-    }), X = (e) => {
-      const p = Array.isArray(e) && e.length > 0 ? e : void 0;
-      l(p), s || u?.(p);
-    }, Y = () => {
-      u?.(P), m();
+      fiscalYearStartMonth: K,
+      fiscalConfig: j,
+      weekStartsOn: F,
+      showPresets: z,
+      showPeriodBoundaries: E,
+      autoNavigateToAvailable: H
+    }), Y = (e) => {
+      const u = Array.isArray(e) && e.length > 0 ? e : void 0;
+      s(u), c || p?.(u);
+    }, Z = () => {
+      p?.(v), m();
     }, h = () => {
-      l(t), m();
+      s(t), m();
     }, C = () => {
-      l(void 0), u?.(void 0), s || m();
+      s(void 0), p?.(void 0), c || m();
     };
     n.useLayoutEffect(() => {
-      k.current = { onDismiss: h, resolveFlash: () => "cancel" };
+      P.current = { onDismiss: h, resolveFlash: () => "cancel" };
     });
-    const Z = t && t.length > 0 ? t.length === 1 ? ue(t[0]) : a("datePicker.quartersSelected", { count: t.length }) : "";
+    const _ = t && t.length > 0 ? t.length === 1 ? de(t[0]) : a("datePicker.quartersSelected", { count: t.length }) : "";
     return /* @__PURE__ */ r(
-      ie,
+      le,
       {
         open: i,
         disabled: o,
         ariaLabel: a("datePicker.selectMultipleQuarters"),
         onOpenChange: (e) => {
-          o || c(e);
+          o || l(e);
         },
         onOpenAutoFocus: (e) => {
-          d.current || e.preventDefault(), d.current = !1;
+          f.current || e.preventDefault(), f.current = !1;
         },
-        popoverHandlers: G,
+        popoverHandlers: J,
         trigger: /* @__PURE__ */ r(
           "div",
           {
-            ref: y,
+            ref: k,
             "data-component": "multi-quarter-picker",
             "data-state": i ? "open" : "closed",
             onPointerDown: (e) => pe({
               disabled: o,
               event: e,
-              onOpen: () => c(!0),
-              focusField: () => f.current?.focus()
+              onOpen: () => l(!0),
+              focusField: () => d.current?.focus()
             }),
             children: /* @__PURE__ */ r(
-              te,
+              re,
               {
-                ref: f,
-                value: Z,
+                ref: d,
+                value: _,
                 readOnly: !0,
-                onKeyDown: (e) => le(e, {
+                onKeyDown: (e) => ue(e, {
                   disabled: o,
                   open: i,
-                  onOpen: () => c(!0),
+                  onOpen: () => l(!0),
                   onCancel: h,
                   onKeyboardOpen: () => {
-                    d.current = !0;
+                    f.current = !0;
                   }
                 }),
-                onClick: () => !o && c(!0),
-                placeholder: V,
+                onClick: () => !o && l(!0),
+                placeholder: q,
                 disabled: o,
                 "data-form-control": "input",
-                className: ee("cursor-pointer", A),
-                suffix: /* @__PURE__ */ g("div", { className: "flex items-center gap-1", children: [
-                  t && t.length > 0 && !o ? /* @__PURE__ */ g(M, { children: [
+                className: te("cursor-pointer", S),
+                suffix: /* @__PURE__ */ y("div", { className: "flex items-center gap-1", children: [
+                  t && t.length > 0 && !o ? /* @__PURE__ */ y(M, { children: [
                     /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ r(
                       "button",
                       {
@@ -124,12 +124,12 @@ const de = n.forwardRef(
                           e.stopPropagation(), C();
                         },
                         className: "inline-flex size-4 items-center justify-center border-none bg-transparent p-0",
-                        children: /* @__PURE__ */ r(_, { className: "size-3 hover:text-content" })
+                        children: /* @__PURE__ */ r($, { className: "size-3 hover:text-content" })
                       }
                     ) }),
                     /* @__PURE__ */ r(b, { variant: "tertiary", side: "top", children: a("calendar.clear") })
                   ] }) : null,
-                  /* @__PURE__ */ g(M, { children: [
+                  /* @__PURE__ */ y(M, { children: [
                     /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ r(
                       "button",
                       {
@@ -138,46 +138,46 @@ const de = n.forwardRef(
                         "data-component": "calendar-trigger",
                         "aria-label": a("datePicker.selectMultipleQuarters"),
                         onClick: (e) => {
-                          e.stopPropagation(), o || c((p) => !p);
+                          e.stopPropagation(), o || l((u) => !u);
                         },
                         className: "inline-flex items-center justify-center border-none bg-transparent p-0",
-                        children: /* @__PURE__ */ r($, { className: "h-4 w-4 text-secondary-foreground" })
+                        children: /* @__PURE__ */ r(ee, { className: "h-4 w-4 text-secondary-foreground" })
                       }
                     ) }),
                     /* @__PURE__ */ r(b, { variant: "tertiary", side: "top", children: a("datePicker.selectMultipleQuarters") })
                   ] })
                 ] }),
-                ...H
+                ...L
               }
             )
           }
         ),
         children: /* @__PURE__ */ r(
-          re,
+          ne,
           {
             pickerType: "quarter",
             monthMode: "multiple",
-            selectedQuarters: P,
-            footerFlashKey: q,
-            footerFlashTarget: B,
-            onQuarterSelect: X,
-            month: J,
-            onMonthChange: U,
-            disabled: oe(D, Q),
-            startMonth: N,
-            endMonth: S,
-            showFooter: s,
-            onApply: Y,
+            selectedQuarters: v,
+            footerFlashKey: B,
+            footerFlashTarget: G,
+            onQuarterSelect: Y,
+            month: U,
+            onMonthChange: W,
+            disabled: ae(R, D),
+            startMonth: A,
+            endMonth: N,
+            showFooter: c,
+            onApply: Z,
             onCancel: h,
             onClear: C,
-            ...W
+            ...X
           }
         )
       }
     );
   }
 );
-de.displayName = "MultiQuarterPicker";
+me.displayName = "MultiQuarterPicker";
 export {
-  de as MultiQuarterPicker
+  me as MultiQuarterPicker
 };