impact-nova 2.1.0-alpha.9 → 2.2.0

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

@@ -1,158 +1,248 @@
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
-import * as i from "react";
-import { Cross as te, CalendarMonth as re } from "impact-nova-icons";
-import { isValid as x, parse as S, format as z } from "date-fns";
-import { cn as oe, padValidDateString as ce, maskDate as ie } from "../../../lib/utils.js";
-import { Input as se } from "../input/input.js";
-import { Popover as le, PopoverAnchor as ae, PopoverContent as pe } from "../../feedback/popover/popover.js";
-import { Calendar as de } from "../../data-display/calendar/calendar.js";
-import { Tooltip as E, TooltipTrigger as O, TooltipContent as $ } from "../../feedback/tooltip/tooltip.js";
-import { resolveWeekSelection as fe } from "../../../lib/fiscal-calendar.js";
-import { useImpactNovaI18n as he } from "../../../i18n/use-impact-nova-i18n.js";
-import { getDateFnsLocale as ue } from "../../../i18n/getDateFnsLocale.js";
-import { coerceSingleWeekApply as ke, coerceSingleWeek as me } from "./calendar-selection-adapters.js";
-import { buildDateBoundsMatcher as ge } from "../../../lib/date-bounds-matcher.js";
-const d = (e, s = "MM/dd/yyyy", n) => {
-  const W = z(e.startDate, s, n ? { locale: n } : {}), D = z(e.endDate, s, n ? { locale: n } : {});
-  return `${W} - ${D}`;
-}, ye = i.forwardRef(
+import { jsxs as C, jsx as a } from "react/jsx-runtime";
+import * as s from "react";
+import { Cross as ve, CalendarMonth as Ce } from "impact-nova-icons";
+import { format as O } from "date-fns";
+import { cn as We } from "../../../lib/utils.js";
+import { usePickerDismissActionsRef as Re, usePickerFooterDismissNudge as Pe, isDateInputInvalid as be, resolveDateInputOnBlur as xe, maskDateInput as Ee, parseDateInput as Ae, resolveDateInputOnEnter as Ne } from "./date-input-behavior.js";
+import { Input as Se } from "../input/input.js";
+import { Popover as Te, PopoverAnchor as we, PopoverContent as Ve } from "../../feedback/popover/popover.js";
+import { Calendar as Le } from "../../data-display/calendar/calendar.js";
+import { Tooltip as X, TooltipTrigger as Z, TooltipContent as _ } from "../../feedback/tooltip/tooltip.js";
+import { resolveWeekSelection as Oe } from "../../../lib/fiscal-calendar.js";
+import { useImpactNovaI18n as je } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as Be } from "../../../i18n/getDateFnsLocale.js";
+import { coerceSingleWeekApply as Ke, coerceSingleWeek as Me } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as ze } from "../../../lib/date-bounds-matcher.js";
+const Y = (t, c = "MM/dd/yyyy", n) => {
+  const W = O(t.startDate, c, n ? { locale: n } : {}), R = O(t.endDate, c, n ? { locale: n } : {});
+  return `${W} - ${R}`;
+}, h = (t, c, n) => t ? O(t.startDate, c, n ? { locale: n } : {}) : "", He = s.forwardRef(
   ({
-    value: e,
-    onChange: s,
+    value: t,
+    onChange: c,
     format: n = "MM/dd/yyyy",
     placeholder: W,
-    minDate: D,
-    maxDate: H,
-    startMonth: q,
-    endMonth: G,
-    showFooter: f = !0,
+    minDate: R,
+    maxDate: F,
+    startMonth: ee,
+    endMonth: te,
+    showFooter: l = !0,
     calendarType: P = "calendar",
-    fiscalMode: I = "basic",
-    selectionMode: N = "week",
-    fiscalMonthPattern: b,
-    fiscalYearStartMonth: M = 1,
-    weekStartsOn: V = 1,
-    disabled: g,
-    className: J,
-    ...K
-  }, Q) => {
-    const { locale: A, t: m } = he(), r = i.useMemo(() => ue(A), [A]), U = W ?? m("datePicker.selectWeek"), L = i.useRef(null);
-    i.useImperativeHandle(Q, () => L.current);
-    const [l, h] = i.useState(!1), [T, a] = i.useState(e), [u, p] = i.useState(e ? d(e, n, r) : ""), [X, C] = i.useState(e?.startDate || /* @__PURE__ */ new Date());
-    i.useEffect(() => {
-      l || (p(e ? d(e, n, r) : ""), a(e));
-    }, [l, e, n, r]), i.useEffect(() => {
-      l && (a(e), C(e?.startDate || /* @__PURE__ */ new Date()), p(e ? d(e, n, r) : ""));
-    }, [l, e, n, r]);
-    const Z = (t) => {
-      const c = me(t);
-      a(c), c && p(d(c, n, r)), f || (s?.(c), h(!1));
-    }, _ = (t) => {
-      const c = ke(t, T);
-      s?.(c), h(!1);
-    }, Y = () => {
-      a(e), p(e ? d(e, n, r) : ""), h(!1);
-    }, R = () => {
-      a(void 0), p(""), s?.(void 0), f || h(!1);
-    }, j = (t) => fe(t, {
-      calendarType: P,
-      fiscalMode: I,
-      selectionMode: N,
-      fiscalMonthPattern: b,
-      fiscalYearStartMonth: M,
-      weekStartsOn: V
-    }), F = (t) => {
-      const c = t.target.value, k = ie(c, n, u);
-      if (p(k), k === "") {
-        a(void 0), f || s?.(void 0);
+    fiscalMode: b = "basic",
+    selectionMode: x = "week",
+    fiscalMonthPattern: E,
+    fiscalYearStartMonth: A = 1,
+    weekStartsOn: N = 1,
+    disabled: u,
+    className: ne,
+    ...re
+  }, se) => {
+    const { locale: j, t: k } = je(), o = s.useMemo(() => Be(j), [j]), ie = W ?? k("datePicker.selectWeek"), B = s.useRef(null), K = s.useRef(null), I = s.useRef(!1);
+    s.useImperativeHandle(se, () => B.current);
+    const [i, M] = s.useState(!1), z = Re(), { footerFlashKey: oe, footerFlashTarget: ce, popoverHandlers: ae } = Pe(l, i, z, K), [le, S] = s.useState(!1), [p, f] = s.useState(t), [y, m] = s.useState(""), [pe, D] = s.useState(t?.startDate || /* @__PURE__ */ new Date()), ue = t ? Y(t, n, o) : "", H = p ? Y(p, n, o) : "", T = i || le, fe = T ? y : H, $ = s.useCallback(() => {
+      f(t), m(h(t, n, o)), D(t?.startDate || /* @__PURE__ */ new Date());
+    }, [t, n, o]), v = s.useCallback(() => {
+      m(h(p ?? t, n, o)), D((p ?? t)?.startDate || /* @__PURE__ */ new Date());
+    }, [p, t, n, o]);
+    s.useEffect(() => {
+      i || f(t);
+    }, [i, t]);
+    const q = s.useRef(!1);
+    s.useEffect(() => {
+      i && !q.current && v(), q.current = i;
+    }, [i, v]);
+    const d = () => {
+      S(!1), M(!1);
+    }, g = (e) => {
+      if (!u) {
+        if (e) {
+          v(), M(!0);
+          return;
+        }
+        l || d();
+      }
+    }, w = s.useCallback(
+      (e) => Oe(e, {
+        calendarType: P,
+        fiscalMode: b,
+        selectionMode: x,
+        fiscalMonthPattern: E,
+        fiscalYearStartMonth: A,
+        weekStartsOn: N
+      }),
+      [
+        P,
+        b,
+        x,
+        E,
+        A,
+        N
+      ]
+    ), de = (e) => {
+      const r = Me(e);
+      f(r), r && (m(h(r, n, o)), D(r.startDate)), l || (c?.(r), d());
+    }, G = (e) => {
+      const r = Ke(e, p);
+      c?.(r), d();
+    }, V = () => {
+      $(), d();
+    }, J = () => {
+      f(void 0), m(""), c?.(void 0), l || d();
+    }, me = (e) => {
+      const r = w(e);
+      f(r), m(h(r, n, o)), D(e), c?.(r), d();
+    }, ke = (e) => {
+      const r = Ee(e.target.value, n, y);
+      if (m(r), r === "") {
+        f(void 0), l || c?.(void 0);
+        return;
+      }
+      const { parsed: L, isValid: Ie } = Ae(r, n, o);
+      if (Ie && L) {
+        const U = w(L);
+        f(U), D(L), l || c?.(U);
+      }
+    }, ye = () => {
+      if (S(!1), i) return;
+      const e = xe(
+        y,
+        n,
+        h(p ?? t, n, o),
+        o
+      );
+      if (e.resetToCommitted) {
+        $();
+        return;
+      }
+      if (e.parsed) {
+        const r = w(e.parsed);
+        f(r), m(h(r, n, o)), l || c?.(r);
         return;
       }
-      const w = S(k, n, /* @__PURE__ */ new Date(), { locale: r });
-      if (x(w) && k.length === n.length) {
-        const v = j(w);
-        a(v), C(w), f || s?.(v);
+      y || (f(void 0), l || c?.(void 0));
+    }, De = () => {
+      if (i && l) {
+        G();
+        return;
       }
-    }, ee = () => {
-      if (l) return;
-      const t = ce(u, n), c = S(t, n, /* @__PURE__ */ new Date(), { locale: r });
-      if (!x(c) || t.length !== n.length)
-        p(e ? d(e, n, r) : ""), a(e);
-      else if (p(t), !f) {
-        const k = j(c);
-        s?.(k);
+      const e = Ne(y, n, o);
+      if (e.parsed) {
+        l && me(e.parsed);
+        return;
       }
-    }, B = (e ? d(e, n, r) : "") !== u, ne = u.length === n.length && !x(S(u, n, /* @__PURE__ */ new Date(), { locale: r }));
-    return /* @__PURE__ */ y(le, { open: l, onOpenChange: (t) => !g && h(t), children: [
-      /* @__PURE__ */ o(ae, { asChild: !0, children: /* @__PURE__ */ o("div", { "data-component": "week-picker", "data-state": l ? "open" : "closed", "data-pending": B || void 0, children: /* @__PURE__ */ o(
-        se,
+      i || (I.current = !0, g(!0));
+    }, Q = ue !== H, ge = T && be(y, n, o), he = s.useCallback(() => p && (!t || p.startDate.getTime() !== t.startDate.getTime()) ? "apply" : "cancel", [p, t]);
+    return s.useLayoutEffect(() => {
+      z.current = {
+        onDismiss: V,
+        resolveFlash: he
+      };
+    }), /* @__PURE__ */ C(Te, { open: u ? !1 : i, onOpenChange: g, children: [
+      /* @__PURE__ */ a(we, { asChild: !0, children: /* @__PURE__ */ a(
+        "div",
         {
-          ref: L,
-          value: u,
-          onChange: F,
-          onBlur: ee,
-          onClick: () => !g && h(!0),
-          placeholder: l ? n : U,
-          disabled: g,
-          "data-form-control": "input",
-          className: oe(
-            "cursor-pointer",
-            ne ? "text-destructive" : B ? "text-content-placeholder" : "",
-            J
-          ),
-          suffix: /* @__PURE__ */ y("div", { className: "flex items-center gap-1", children: [
-            e && !g && /* @__PURE__ */ y(E, { children: [
-              /* @__PURE__ */ o(O, { asChild: !0, children: /* @__PURE__ */ o(
-                "button",
-                {
-                  type: "button",
-                  tabIndex: 0,
-                  "aria-label": m("calendar.clear"),
-                  onClick: (t) => {
-                    t.stopPropagation(), R();
-                  },
-                  className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                  children: /* @__PURE__ */ o(te, { className: "size-3 hover:text-content" })
-                }
-              ) }),
-              /* @__PURE__ */ o($, { variant: "tertiary", side: "top", children: m("calendar.clear") })
-            ] }),
-            /* @__PURE__ */ y(E, { children: [
-              /* @__PURE__ */ o(O, { asChild: !0, children: /* @__PURE__ */ o(re, { className: "h-4 w-4 text-secondary-foreground" }) }),
-              /* @__PURE__ */ o($, { variant: "tertiary", side: "top", children: m("datePicker.selectWeek") })
-            ] })
-          ] }),
-          ...K
+          ref: K,
+          "data-component": "week-picker",
+          "data-state": i ? "open" : "closed",
+          "data-pending": Q || void 0,
+          children: /* @__PURE__ */ a(
+            Se,
+            {
+              ref: B,
+              value: fe,
+              onChange: ke,
+              onFocus: () => {
+                u || (S(!0), v());
+              },
+              onBlur: ye,
+              onClick: () => !u && g(!0),
+              onKeyDown: (e) => {
+                e.key === "Enter" && !u && (e.preventDefault(), De()), e.key === "ArrowDown" && !i && !u && (e.preventDefault(), I.current = !0, g(!0)), e.key === "Escape" && i && (e.preventDefault(), V());
+              },
+              placeholder: T ? n : ie,
+              disabled: u,
+              "data-form-control": "input",
+              className: We(
+                "cursor-pointer",
+                ge ? "text-destructive" : Q ? "text-content-placeholder" : "",
+                ne
+              ),
+              suffix: /* @__PURE__ */ C("div", { className: "flex items-center gap-1", children: [
+                t && !u && /* @__PURE__ */ C(X, { children: [
+                  /* @__PURE__ */ a(Z, { asChild: !0, children: /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: 0,
+                      "aria-label": k("calendar.clear"),
+                      onClick: (e) => {
+                        e.stopPropagation(), J();
+                      },
+                      className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                      children: /* @__PURE__ */ a(ve, { className: "size-3 hover:text-content" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ a(_, { variant: "tertiary", side: "top", children: k("calendar.clear") })
+                ] }),
+                /* @__PURE__ */ C(X, { children: [
+                  /* @__PURE__ */ a(Z, { asChild: !0, children: /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: 0,
+                      "aria-label": k("datePicker.selectWeek"),
+                      onClick: (e) => {
+                        e.stopPropagation(), u || (i ? d() : g(!0));
+                      },
+                      onKeyDown: (e) => {
+                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), u || (I.current = !0, i ? d() : g(!0)));
+                      },
+                      className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
+                      children: /* @__PURE__ */ a(Ce, { className: "h-4 w-4 text-secondary-foreground" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ a(_, { variant: "tertiary", side: "top", children: k("datePicker.selectWeek") })
+                ] })
+              ] }),
+              ...re
+            }
+          )
         }
-      ) }) }),
-      /* @__PURE__ */ o(
-        pe,
+      ) }),
+      /* @__PURE__ */ a(
+        Ve,
         {
           className: "w-auto p-0",
           align: "start",
-          "aria-label": m("datePicker.selectWeek"),
-          onOpenAutoFocus: (t) => t.preventDefault(),
-          children: /* @__PURE__ */ o(
-            de,
+          "aria-label": k("datePicker.selectWeek"),
+          onOpenAutoFocus: (e) => {
+            I.current || e.preventDefault(), I.current = !1;
+          },
+          ...ae,
+          children: /* @__PURE__ */ a(
+            Le,
             {
               pickerType: "week",
               weekMode: "single",
-              selectedWeeks: T,
-              onWeekSelect: Z,
-              month: X,
-              onMonthChange: C,
-              disabled: ge(D, H),
-              startMonth: q,
-              endMonth: G,
-              showFooter: f,
+              selectedWeeks: p,
+              footerFlashKey: oe,
+              footerFlashTarget: ce,
+              onWeekSelect: de,
+              month: pe,
+              onMonthChange: D,
+              disabled: ze(R, F),
+              startMonth: ee,
+              endMonth: te,
+              showFooter: l,
               calendarType: P,
-              fiscalMode: I,
-              selectionMode: N,
-              fiscalMonthPattern: b,
-              fiscalYearStartMonth: M,
-              weekStartsOn: V,
-              onApply: _,
-              onCancel: Y,
-              onClear: R,
+              fiscalMode: b,
+              selectionMode: x,
+              fiscalMonthPattern: E,
+              fiscalYearStartMonth: A,
+              weekStartsOn: N,
+              onApply: G,
+              onCancel: V,
+              onClear: J,
               captionLayout: "dropdown"
             }
           )
@@ -161,7 +251,7 @@ const d = (e, s = "MM/dd/yyyy", n) => {
     ] });
   }
 );
-ye.displayName = "WeekPicker";
+He.displayName = "WeekPicker";
 export {
-  ye as WeekPicker
+  He as WeekPicker
 };