impact-nova 2.1.0-alpha.9 → 2.2.1

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

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