impact-nova 2.1.0-alpha.9 → 2.2.0

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

@@ -1,106 +1,120 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import * as l from "react";
-import { Cross as w, CalendarMonth as z } from "impact-nova-icons";
-import { format as R } from "date-fns";
-import { cn as B } from "../../../lib/utils.js";
-import { Input as E } from "../input/input.js";
-import { Popover as F, PopoverAnchor as V, PopoverContent as $ } from "../../feedback/popover/popover.js";
-import { Calendar as q } from "../../data-display/calendar/calendar.js";
-import { Tooltip as y, TooltipTrigger as g, TooltipContent as C } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as G } from "../../../i18n/use-impact-nova-i18n.js";
-import { getDateFnsLocale as H } from "../../../i18n/getDateFnsLocale.js";
-import { coerceDateArrayApply as J, coerceDateArray as K } from "./calendar-selection-adapters.js";
-import { buildDateBoundsMatcher as Q } from "../../../lib/date-bounds-matcher.js";
-const U = l.forwardRef(
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import * as o from "react";
+import { Cross as q, CalendarMonth as G } from "impact-nova-icons";
+import { format as J } from "date-fns";
+import { cn as Q } from "../../../lib/utils.js";
+import { Input as U } from "../input/input.js";
+import { Popover as W, PopoverAnchor as X, PopoverContent as Y } from "../../feedback/popover/popover.js";
+import { Calendar as Z } from "../../data-display/calendar/calendar.js";
+import { Tooltip as D, TooltipTrigger as P, TooltipContent as k } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as _ } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as w } from "../../../i18n/getDateFnsLocale.js";
+import { coerceDateArrayApply as ee, coerceDateArray as te } from "./calendar-selection-adapters.js";
+import { usePickerDismissActionsRef as re, usePickerFooterDismissNudge as oe } from "./date-input-behavior.js";
+import { buildDateBoundsMatcher as ne } from "../../../lib/date-bounds-matcher.js";
+const se = o.forwardRef(
   ({
-    value: t,
-    onChange: p,
-    format: D = "MM/dd/yyyy",
+    value: e,
+    onChange: f,
+    format: A = "MM/dd/yyyy",
     placeholder: M,
-    minDate: P,
-    maxDate: x,
-    startMonth: A,
-    endMonth: N,
-    showFooter: d = !0,
-    disabled: o,
-    className: k,
-    ...b
-  }, T) => {
-    const { locale: f, t: n } = G(), I = l.useMemo(() => H(f), [f]), L = M ?? n("datePicker.selectMultipleDates"), [m, a] = l.useState(!1), [h, c] = l.useState(t);
-    l.useEffect(() => {
-      c(t);
-    }, [m, t]);
-    const O = (r) => {
-      const i = K(r);
-      c(i), d || p?.(i);
-    }, S = (r) => {
-      const i = J(r, h);
-      p?.(i), a(!1);
-    }, j = () => {
-      c(t), a(!1);
-    }, u = () => {
-      c(void 0), p?.(void 0), d || a(!1);
-    }, v = t && t.length > 0 ? t.length === 1 ? R(t[0], D, { locale: I }) : `${t.length} dates selected` : "";
-    return /* @__PURE__ */ s(F, { open: o ? !1 : m, onOpenChange: (r) => {
-      o || a(r);
+    minDate: x,
+    maxDate: N,
+    startMonth: T,
+    endMonth: b,
+    showFooter: s = !0,
+    disabled: a,
+    className: R,
+    ...L
+  }, v) => {
+    const { locale: u, t: i } = _(), F = o.useMemo(() => w(u), [u]), I = M ?? i("datePicker.selectMultipleDates"), [p, c] = o.useState(!1), h = o.useRef(null), y = re(), { footerFlashKey: S, footerFlashTarget: j, popoverHandlers: O } = oe(s, p, y, h), [l, d] = o.useState(e);
+    o.useEffect(() => {
+      d(e);
+    }, [p, e]);
+    const z = (t) => {
+      const n = te(t);
+      d(n), s || f?.(n);
+    }, E = (t) => {
+      const n = ee(t, l);
+      f?.(n), c(!1);
+    }, g = () => {
+      d(e), c(!1);
+    }, C = () => {
+      d(void 0), f?.(void 0), s || c(!1);
+    }, B = e && e.length > 0 ? e.length === 1 ? J(e[0], A, { locale: F }) : `${e.length} dates selected` : "", H = o.useCallback(() => {
+      const t = l?.length ?? 0, n = e?.length ?? 0, K = t === n && (l ?? []).every(
+        (V, $) => V.getTime() === e?.[$]?.getTime()
+      );
+      return t > 0 && !K ? "apply" : "cancel";
+    }, [l, e]);
+    return o.useLayoutEffect(() => {
+      y.current = {
+        onDismiss: g,
+        resolveFlash: H
+      };
+    }), /* @__PURE__ */ m(W, { open: a ? !1 : p, onOpenChange: (t) => {
+      a || !t && s || c(t);
     }, children: [
-      /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        E,
+      /* @__PURE__ */ r(X, { asChild: !0, children: /* @__PURE__ */ r("div", { ref: h, children: /* @__PURE__ */ r(
+        U,
         {
-          ref: T,
-          value: v,
-          placeholder: L,
+          ref: v,
+          value: B,
+          placeholder: I,
           readOnly: !0,
-          disabled: o,
+          disabled: a,
           onClick: () => {
-            !o && !m && a(!0);
+            !a && !p && c(!0);
           },
-          className: B("cursor-pointer", k),
-          suffix: /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
-            t && t.length > 0 && !o && /* @__PURE__ */ s(y, { children: [
-              /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(
+          className: Q("cursor-pointer", R),
+          suffix: /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: [
+            e && e.length > 0 && !a && /* @__PURE__ */ m(D, { children: [
+              /* @__PURE__ */ r(P, { asChild: !0, children: /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
                   tabIndex: 0,
-                  "aria-label": n("calendar.clear"),
-                  onClick: (r) => {
-                    r.stopPropagation(), u();
+                  "aria-label": i("calendar.clear"),
+                  onClick: (t) => {
+                    t.stopPropagation(), C();
                   },
                   className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                  children: /* @__PURE__ */ e(w, { className: "size-3 hover:text-content" })
+                  children: /* @__PURE__ */ r(q, { className: "size-3 hover:text-content" })
                 }
               ) }),
-              /* @__PURE__ */ e(C, { variant: "tertiary", side: "top", children: n("calendar.clear") })
+              /* @__PURE__ */ r(k, { variant: "tertiary", side: "top", children: i("calendar.clear") })
             ] }),
-            /* @__PURE__ */ s(y, { children: [
-              /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e(z, { className: "h-4 w-4 text-secondary-foreground" }) }),
-              /* @__PURE__ */ e(C, { variant: "tertiary", side: "top", children: n("datePicker.selectMultipleDates") })
+            /* @__PURE__ */ m(D, { children: [
+              /* @__PURE__ */ r(P, { asChild: !0, children: /* @__PURE__ */ r(G, { className: "h-4 w-4 text-secondary-foreground" }) }),
+              /* @__PURE__ */ r(k, { variant: "tertiary", side: "top", children: i("datePicker.selectMultipleDates") })
             ] })
           ] }),
-          ...b
+          ...L
         }
       ) }) }),
-      /* @__PURE__ */ e(
-        $,
+      /* @__PURE__ */ r(
+        Y,
         {
           className: "w-auto p-0",
           align: "start",
-          "aria-label": n("datePicker.selectMultipleDates"),
-          onOpenAutoFocus: (r) => r.preventDefault(),
-          children: /* @__PURE__ */ e(
-            q,
+          "aria-label": i("datePicker.selectMultipleDates"),
+          onOpenAutoFocus: (t) => t.preventDefault(),
+          ...O,
+          children: /* @__PURE__ */ r(
+            Z,
             {
               mode: "multiple",
-              selected: h,
-              onSelect: O,
-              disabled: Q(P, x),
-              startMonth: A,
-              endMonth: N,
-              showFooter: d,
-              onApply: S,
-              onCancel: j,
-              onClear: u,
+              selected: l,
+              footerFlashKey: S,
+              footerFlashTarget: j,
+              onSelect: z,
+              disabled: ne(x, N),
+              startMonth: T,
+              endMonth: b,
+              showFooter: s,
+              onApply: E,
+              onCancel: g,
+              onClear: C,
               captionLayout: "dropdown"
             }
           )
@@ -109,7 +123,7 @@ const U = l.forwardRef(
     ] });
   }
 );
-U.displayName = "MultiDatePicker";
+se.displayName = "MultiDatePicker";
 export {
-  U as MultiDatePicker
+  se as MultiDatePicker
 };

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

@@ -1,123 +1,137 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import * as l from "react";
-import { Cross as v, CalendarMonth as w } from "impact-nova-icons";
-import { cn as R } from "../../../lib/utils.js";
-import { Input as z } from "../input/input.js";
-import { Popover as E, PopoverAnchor as K, PopoverContent as V } from "../../feedback/popover/popover.js";
-import { Calendar as $ } from "../../data-display/calendar/calendar.js";
-import { Tooltip as M, TooltipTrigger as g, TooltipContent as C } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as B } from "../../../i18n/use-impact-nova-i18n.js";
-import { coerceMonthArrayApply as L, coerceMonthArray as q } from "./calendar-selection-adapters.js";
-import { buildDateBoundsMatcher as G } from "../../../lib/date-bounds-matcher.js";
-const H = l.forwardRef(
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import * as r from "react";
+import { Cross as B, CalendarMonth as H } from "impact-nova-icons";
+import { cn as q } from "../../../lib/utils.js";
+import { Input as G } from "../input/input.js";
+import { Popover as J, PopoverAnchor as Q, PopoverContent as U } from "../../feedback/popover/popover.js";
+import { Calendar as W } from "../../data-display/calendar/calendar.js";
+import { Tooltip as b, TooltipTrigger as x, TooltipContent as A } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as X } from "../../../i18n/use-impact-nova-i18n.js";
+import { coerceMonthArrayApply as Y, coerceMonthArray as Z } from "./calendar-selection-adapters.js";
+import { usePickerDismissActionsRef as _, usePickerFooterDismissNudge as ee } from "./date-input-behavior.js";
+import { buildDateBoundsMatcher as te } from "../../../lib/date-bounds-matcher.js";
+const ne = r.forwardRef(
   ({
-    value: n,
-    onChange: d,
-    placeholder: P,
-    minDate: m,
-    maxDate: k,
-    startMonth: x,
-    endMonth: b,
-    showFooter: h = !0,
-    disabled: r,
-    className: N,
-    ...A
-  }, O) => {
-    const { t: o } = B(), T = P ?? o("datePicker.selectMultipleMonths"), [i, a] = l.useState(!1), f = l.useRef(!1), [u, c] = l.useState(n);
-    l.useEffect(() => {
-      c(n);
-    }, [i, n]);
-    const D = (e) => {
-      const s = q(e);
-      c(s), h || d?.(s);
-    }, I = (e) => {
-      const s = L(e, u);
-      d?.(s), a(!1);
-    }, S = () => {
-      c(n), a(!1);
-    }, y = () => {
-      c(void 0), d?.(void 0), h || a(!1);
-    }, j = n && n.length > 0 ? n.length === 1 ? `${n[0].month + 1}/${n[0].year}` : o("datePicker.monthsSelected", { count: n.length }) : "";
-    return /* @__PURE__ */ p(E, { open: r ? !1 : i, onOpenChange: (e) => {
-      r || a(e);
-    }, children: [
-      /* @__PURE__ */ t(K, { asChild: !0, children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-        z,
+    value: t,
+    onChange: h,
+    placeholder: N,
+    minDate: u,
+    maxDate: D,
+    startMonth: R,
+    endMonth: T,
+    showFooter: l = !0,
+    disabled: o,
+    className: I,
+    ...S
+  }, j) => {
+    const { t: s } = X(), v = N ?? s("datePicker.selectMultipleMonths"), [c, i] = r.useState(!1), m = r.useRef(!1), y = r.useRef(null), g = _(), { footerFlashKey: O, footerFlashTarget: E, popoverHandlers: K } = ee(l, c, g, y), [p, d] = r.useState(t);
+    r.useEffect(() => {
+      d(t);
+    }, [c, t]);
+    const z = (e) => {
+      const a = Z(e);
+      d(a), l || h?.(a);
+    }, F = (e) => {
+      const a = Y(e, p);
+      h?.(a), i(!1);
+    }, M = () => {
+      d(t), i(!1);
+    }, C = () => {
+      d(void 0), h?.(void 0), l || i(!1);
+    }, L = t && t.length > 0 ? t.length === 1 ? `${t[0].month + 1}/${t[0].year}` : s("datePicker.monthsSelected", { count: t.length }) : "", V = (e) => {
+      o || !e && l || i(e);
+    }, $ = r.useCallback(() => {
+      const e = p?.length ?? 0, a = t?.length ?? 0, w = e === a && (p ?? []).every(
+        (P, k) => P.month === t?.[k]?.month && P.year === t?.[k]?.year
+      );
+      return e > 0 && !w ? "apply" : "cancel";
+    }, [p, t]);
+    return r.useLayoutEffect(() => {
+      g.current = {
+        onDismiss: M,
+        resolveFlash: $
+      };
+    }), /* @__PURE__ */ f(J, { open: o ? !1 : c, onOpenChange: V, children: [
+      /* @__PURE__ */ n(Q, { asChild: !0, children: /* @__PURE__ */ n("div", { ref: y, children: /* @__PURE__ */ n(
+        G,
         {
-          ref: O,
-          value: j,
-          placeholder: T,
+          ref: j,
+          value: L,
+          placeholder: v,
           readOnly: !0,
-          disabled: r,
+          disabled: o,
           onClick: () => {
-            !r && !i && a(!0);
+            !o && !c && i(!0);
           },
-          className: R("cursor-pointer", N),
-          suffix: /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
-            n && n.length > 0 && !r && /* @__PURE__ */ p(M, { children: [
-              /* @__PURE__ */ t(g, { asChild: !0, children: /* @__PURE__ */ t(
+          className: q("cursor-pointer", I),
+          suffix: /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
+            t && t.length > 0 && !o && /* @__PURE__ */ f(b, { children: [
+              /* @__PURE__ */ n(x, { asChild: !0, children: /* @__PURE__ */ n(
                 "button",
                 {
                   type: "button",
                   tabIndex: 0,
-                  "aria-label": o("calendar.clear"),
+                  "aria-label": s("calendar.clear"),
                   onClick: (e) => {
-                    e.stopPropagation(), y();
+                    e.stopPropagation(), C();
                   },
                   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__ */ n(B, { className: "size-3 hover:text-content" })
                 }
               ) }),
-              /* @__PURE__ */ t(C, { variant: "tertiary", side: "top", children: o("calendar.clear") })
+              /* @__PURE__ */ n(A, { variant: "tertiary", side: "top", children: s("calendar.clear") })
             ] }),
-            /* @__PURE__ */ p(M, { children: [
-              /* @__PURE__ */ t(g, { asChild: !0, children: /* @__PURE__ */ t(
+            /* @__PURE__ */ f(b, { children: [
+              /* @__PURE__ */ n(x, { asChild: !0, children: /* @__PURE__ */ n(
                 "button",
                 {
                   type: "button",
                   tabIndex: 0,
                   "data-component": "calendar-trigger",
-                  "aria-label": o("datePicker.selectMultipleMonths"),
+                  "aria-label": s("datePicker.selectMultipleMonths"),
                   onPointerDown: (e) => {
-                    e.preventDefault(), e.stopPropagation(), r || a(!i);
+                    e.preventDefault(), e.stopPropagation(), o || i(!c);
                   },
                   onKeyDown: (e) => {
-                    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), r || (f.current = !0, a(!i)));
+                    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), o || (m.current = !0, i(!c)));
                   },
                   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" })
+                  children: /* @__PURE__ */ n(H, { className: "h-4 w-4 text-secondary-foreground" })
                 }
               ) }),
-              /* @__PURE__ */ t(C, { variant: "tertiary", side: "top", children: o("datePicker.selectMultipleMonths") })
+              /* @__PURE__ */ n(A, { variant: "tertiary", side: "top", children: s("datePicker.selectMultipleMonths") })
             ] })
           ] }),
-          ...A
+          ...S
         }
       ) }) }),
-      /* @__PURE__ */ t(
-        V,
+      /* @__PURE__ */ n(
+        U,
         {
           className: "w-auto p-0",
           align: "start",
-          "aria-label": o("datePicker.selectMultipleMonths"),
+          "aria-label": s("datePicker.selectMultipleMonths"),
           onOpenAutoFocus: (e) => {
-            f.current || e.preventDefault(), f.current = !1;
+            m.current || e.preventDefault(), m.current = !1;
           },
-          children: /* @__PURE__ */ t(
-            $,
+          ...K,
+          children: /* @__PURE__ */ n(
+            W,
             {
               pickerType: "month",
               monthMode: "multiple",
-              selectedMonths: u,
-              onMonthSelect: D,
-              disabled: G(m, k),
-              startMonth: x,
-              endMonth: b,
-              defaultMonth: m,
-              showFooter: h,
-              onApply: I,
-              onCancel: S,
-              onClear: y,
+              selectedMonths: p,
+              footerFlashKey: O,
+              footerFlashTarget: E,
+              onMonthSelect: z,
+              disabled: te(u, D),
+              startMonth: R,
+              endMonth: T,
+              defaultMonth: u,
+              showFooter: l,
+              onApply: F,
+              onCancel: M,
+              onClear: C,
               captionLayout: "dropdown"
             }
           )
@@ -126,7 +140,7 @@ const H = l.forwardRef(
     ] });
   }
 );
-H.displayName = "MultiMonthPicker";
+ne.displayName = "MultiMonthPicker";
 export {
-  H as MultiMonthPicker
+  ne as MultiMonthPicker
 };