impact-nova 2.2.2 → 2.2.4

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

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

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

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