impact-nova 2.1.0-alpha.9 → 2.2.0

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

@@ -1,135 +1,176 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import * as r from "react";
-import { Cross as L, CalendarMonth as Q } from "impact-nova-icons";
-import { isValid as C, parse as S } from "date-fns";
-import { cn as U, padValidDateString as W, maskDate as X } from "../../../lib/utils.js";
-import { Input as Z } from "../input/input.js";
-import { Popover as _, PopoverAnchor as F, PopoverContent as v } from "../../feedback/popover/popover.js";
-import { Calendar as tt } from "../../data-display/calendar/calendar.js";
-import { Tooltip as I, TooltipTrigger as N, TooltipContent as V } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as et } from "../../../i18n/use-impact-nova-i18n.js";
-import { coerceSingleMonthApply as nt, coerceSingleMonth as ot } from "./calendar-selection-adapters.js";
-import { buildDateBoundsMatcher as rt } from "../../../lib/date-bounds-matcher.js";
-const l = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, at = r.forwardRef(
+import { jsxs as k, jsx as s } from "react/jsx-runtime";
+import * as o from "react";
+import { Cross as _, CalendarMonth as ee } from "impact-nova-icons";
+import { cn as te } from "../../../lib/utils.js";
+import { usePickerDismissActionsRef as ne, usePickerFooterDismissNudge as re, isDateInputInvalid as oe, compareMonthSelection as se, resolveDateInputOnBlur as ie, maskDateInput as ae, parseDateInput as ce, resolveDateInputOnEnter as le } from "./date-input-behavior.js";
+import { Input as pe } from "../input/input.js";
+import { Popover as fe, PopoverAnchor as de, PopoverContent as me } from "../../feedback/popover/popover.js";
+import { Calendar as ue } from "../../data-display/calendar/calendar.js";
+import { Tooltip as E, TooltipTrigger as b, TooltipContent as V } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as he } from "../../../i18n/use-impact-nova-i18n.js";
+import { coerceSingleMonthApply as ye, coerceSingleMonth as Me } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as ge } from "../../../lib/date-bounds-matcher.js";
+const u = (e) => `${(e.month + 1).toString().padStart(2, "0")}/${e.year}`, De = o.forwardRef(
   ({
-    value: t,
-    onChange: s,
-    placeholder: A,
-    minDate: T,
-    maxDate: b,
-    startMonth: R,
-    endMonth: j,
-    showFooter: p = !0,
-    disabled: y,
-    className: B,
-    ...O
-  }, Y) => {
-    const { t: d } = et(), z = A ?? d("datePicker.selectMonth"), P = r.useRef(null);
-    r.useImperativeHandle(Y, () => P.current);
-    const [a, h] = r.useState(!1), [k, i] = r.useState(t), [m, c] = r.useState(t ? l(t) : ""), [E, g] = r.useState(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date());
-    r.useEffect(() => {
-      a || (c(t ? l(t) : ""), i(t));
-    }, [a, t]), r.useEffect(() => {
-      a && (i(t), g(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date()), c(t ? l(t) : ""));
-    }, [a, t]);
-    const $ = (e) => {
-      const n = ot(e);
-      i(n), n && c(l(n)), p || (s?.(n), h(!1));
-    }, H = (e) => {
-      const n = nt(e, k);
-      s?.(n), h(!1);
-    }, q = () => {
-      i(t), c(t ? l(t) : ""), h(!1);
-    }, x = () => {
-      i(void 0), c(""), s?.(void 0), p || h(!1);
-    }, G = (e) => {
-      const n = e.target.value, f = X(n, "MM/yyyy", m);
-      if (c(f), f === "") {
-        i(void 0), p || s?.(void 0);
+    value: e,
+    onChange: p,
+    placeholder: w,
+    minDate: v,
+    maxDate: B,
+    startMonth: O,
+    endMonth: Y,
+    showFooter: i = !0,
+    disabled: f,
+    className: j,
+    ...K
+  }, z) => {
+    const { t: d } = he(), F = w ?? d("datePicker.selectMonth"), P = o.useRef(null), S = o.useRef(null);
+    o.useImperativeHandle(z, () => P.current);
+    const [r, c] = o.useState(!1), R = ne(), { footerFlashKey: H, footerFlashTarget: $, popoverHandlers: L } = re(i, r, R, S), [h, a] = o.useState(e), [m, l] = o.useState(e ? u(e) : ""), [q, I] = o.useState(e ? new Date(e.year, e.month) : /* @__PURE__ */ new Date());
+    o.useEffect(() => {
+      r || (l(e ? u(e) : ""), a(e));
+    }, [r, e]), o.useEffect(() => {
+      r && (a(e), I(e ? new Date(e.year, e.month) : /* @__PURE__ */ new Date()), l(e ? u(e) : ""));
+    }, [r, e]);
+    const G = (t) => {
+      const n = Me(t);
+      a(n), n && l(u(n)), i || (p?.(n), c(!1));
+    }, x = (t) => {
+      const n = ye(t, h);
+      p?.(n), c(!1);
+    }, C = () => {
+      a(e), l(e ? u(e) : ""), c(!1);
+    }, A = () => {
+      a(void 0), l(""), p?.(void 0), i || c(!1);
+    }, y = "MM/yyyy", M = e ? u(e) : "", g = o.useRef(!1), J = (t) => {
+      const n = ae(t.target.value, y, m);
+      if (l(n), n === "") {
+        a(void 0), i || p?.(void 0);
         return;
       }
-      const M = S(f, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (C(M) && f.length === 7) {
-        const w = { month: M.getMonth(), year: M.getFullYear() };
-        i(w), g(M), p || s?.(w);
+      const { parsed: D, isValid: Z } = ce(n, y);
+      if (Z && D) {
+        const T = { month: D.getMonth(), year: D.getFullYear() };
+        a(T), I(D), i || p?.(T);
       }
-    }, J = () => {
-      if (a) return;
-      const e = W(m, "MM/yyyy"), n = S(e, "MM/yyyy", /* @__PURE__ */ new Date());
-      if (!C(n) || e.length !== 7)
-        c(t ? l(t) : ""), i(t);
-      else if (c(e), !p) {
-        const f = { month: n.getMonth(), year: n.getFullYear() };
-        s?.(f);
+    }, Q = () => {
+      if (r) return;
+      const t = ie(m, y, M);
+      if (t.resetToCommitted) {
+        l(M), a(e);
+        return;
+      }
+      if (t.parsed) {
+        const n = { month: t.parsed.getMonth(), year: t.parsed.getFullYear() };
+        l(t.display), a(n), i || p?.(n);
+        return;
+      }
+      l(M), a(e);
+    }, U = () => {
+      if (r && i) {
+        x();
+        return;
       }
-    }, D = (t ? l(t) : "") !== m, K = m.length === 7 && !C(S(m, "MM/yyyy", /* @__PURE__ */ new Date()));
-    return /* @__PURE__ */ u(_, { open: y ? !1 : a, onOpenChange: (e) => {
-      y || h(e);
+      const t = le(m, y);
+      if (t.parsed) {
+        const n = {
+          month: t.parsed.getMonth(),
+          year: t.parsed.getFullYear()
+        };
+        i && (p?.(n), c(!1));
+        return;
+      }
+      r || (g.current = !0, c(!0));
+    }, N = M !== m, W = oe(m, y), X = o.useCallback(() => h && (!e || se(h, e) !== 0) ? "apply" : "cancel", [h, e]);
+    return o.useLayoutEffect(() => {
+      R.current = {
+        onDismiss: C,
+        resolveFlash: X
+      };
+    }), /* @__PURE__ */ k(fe, { open: f ? !1 : r, onOpenChange: (t) => {
+      f || !t && i || c(t);
     }, children: [
-      /* @__PURE__ */ o(F, { asChild: !0, children: /* @__PURE__ */ o("div", { "data-component": "month-picker", "data-state": a ? "open" : "closed", "data-pending": D || void 0, children: /* @__PURE__ */ o(
-        Z,
+      /* @__PURE__ */ s(de, { asChild: !0, children: /* @__PURE__ */ s(
+        "div",
         {
-          ref: P,
-          value: m,
-          onChange: G,
-          onBlur: J,
-          onClick: () => !y && h(!0),
-          placeholder: a ? d("datePicker.monthYearFormat") : z,
-          disabled: y,
-          "data-form-control": "input",
-          className: U(
-            "cursor-pointer",
-            K ? "text-destructive" : D ? "text-content-placeholder" : "",
-            B
-          ),
-          suffix: /* @__PURE__ */ u("div", { className: "flex items-center gap-1", children: [
-            t && !y && /* @__PURE__ */ u(I, { children: [
-              /* @__PURE__ */ o(N, { asChild: !0, children: /* @__PURE__ */ o(
-                "button",
-                {
-                  type: "button",
-                  tabIndex: 0,
-                  "aria-label": d("calendar.clear"),
-                  onClick: (e) => {
-                    e.stopPropagation(), x();
-                  },
-                  className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                  children: /* @__PURE__ */ o(L, { className: "size-3 hover:text-content" })
-                }
-              ) }),
-              /* @__PURE__ */ o(V, { variant: "tertiary", side: "top", children: d("calendar.clear") })
-            ] }),
-            /* @__PURE__ */ u(I, { children: [
-              /* @__PURE__ */ o(N, { asChild: !0, children: /* @__PURE__ */ o(Q, { className: "h-4 w-4 text-secondary-foreground" }) }),
-              /* @__PURE__ */ o(V, { variant: "tertiary", side: "top", children: d("datePicker.selectMonth") })
-            ] })
-          ] }),
-          ...O
+          ref: S,
+          "data-component": "month-picker",
+          "data-state": r ? "open" : "closed",
+          "data-pending": N || void 0,
+          children: /* @__PURE__ */ s(
+            pe,
+            {
+              ref: P,
+              value: m,
+              onChange: J,
+              onBlur: Q,
+              onClick: () => !f && c(!0),
+              onKeyDown: (t) => {
+                t.key === "Enter" && !f && (t.preventDefault(), U()), t.key === "ArrowDown" && !r && !f && (t.preventDefault(), g.current = !0, c(!0)), t.key === "Escape" && r && (t.preventDefault(), C());
+              },
+              placeholder: r ? d("datePicker.monthYearFormat") : F,
+              disabled: f,
+              "data-form-control": "input",
+              className: te(
+                "cursor-pointer",
+                W ? "text-destructive" : N ? "text-content-placeholder" : "",
+                j
+              ),
+              suffix: /* @__PURE__ */ k("div", { className: "flex items-center gap-1", children: [
+                e && !f && /* @__PURE__ */ k(E, { children: [
+                  /* @__PURE__ */ s(b, { asChild: !0, children: /* @__PURE__ */ s(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: 0,
+                      "aria-label": d("calendar.clear"),
+                      onClick: (t) => {
+                        t.stopPropagation(), A();
+                      },
+                      className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                      children: /* @__PURE__ */ s(_, { className: "size-3 hover:text-content" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ s(V, { variant: "tertiary", side: "top", children: d("calendar.clear") })
+                ] }),
+                /* @__PURE__ */ k(E, { children: [
+                  /* @__PURE__ */ s(b, { asChild: !0, children: /* @__PURE__ */ s(ee, { className: "h-4 w-4 text-secondary-foreground" }) }),
+                  /* @__PURE__ */ s(V, { variant: "tertiary", side: "top", children: d("datePicker.selectMonth") })
+                ] })
+              ] }),
+              ...K
+            }
+          )
         }
-      ) }) }),
-      /* @__PURE__ */ o(
-        v,
+      ) }),
+      /* @__PURE__ */ s(
+        me,
         {
           className: "w-auto p-0",
           align: "start",
           "aria-label": d("datePicker.selectMonth"),
-          onOpenAutoFocus: (e) => e.preventDefault(),
-          children: /* @__PURE__ */ o(
-            tt,
+          onOpenAutoFocus: (t) => {
+            g.current || t.preventDefault(), g.current = !1;
+          },
+          ...L,
+          children: /* @__PURE__ */ s(
+            ue,
             {
               pickerType: "month",
               monthMode: "single",
-              selectedMonths: k,
-              onMonthSelect: $,
-              month: E,
-              onMonthChange: g,
-              disabled: rt(T, b),
-              startMonth: R,
-              endMonth: j,
-              showFooter: p,
-              onApply: H,
-              onCancel: q,
-              onClear: x
+              selectedMonths: h,
+              footerFlashKey: H,
+              footerFlashTarget: $,
+              onMonthSelect: G,
+              month: q,
+              onMonthChange: I,
+              disabled: ge(v, B),
+              startMonth: O,
+              endMonth: Y,
+              showFooter: i,
+              onApply: x,
+              onCancel: C,
+              onClear: A
             }
           )
         }
@@ -137,7 +178,7 @@ const l = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, at =
     ] });
   }
 );
-at.displayName = "MonthPicker";
+De.displayName = "MonthPicker";
 export {
-  at as MonthPicker
+  De as MonthPicker
 };