impact-nova 2.2.1 → 2.2.3

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

@@ -1,19 +1,19 @@
 import { jsxs as x, jsx as i } from "react/jsx-runtime";
 import * as r from "react";
-import { Cross as se, CalendarMonth as ce } from "impact-nova-icons";
+import { Cross as se, CalendarMonth as le } from "impact-nova-icons";
 import { format as S } from "date-fns";
-import { cn as le } from "../../../lib/utils.js";
-import { usePickerDismissActionsRef as ae, usePickerFooterDismissNudge as pe, isDateInputInvalid as ue, maskDateInput as fe, parseDateInput as de, resolveDateInputOnBlur as me, resolveDateInputOnEnter as he } from "./date-input-behavior.js";
-import { Input as De } from "../input/input.js";
-import { Popover as ge, PopoverAnchor as ye, PopoverContent as ke } from "../../feedback/popover/popover.js";
-import { Calendar as ve } from "../../data-display/calendar/calendar.js";
+import { cn as ce } from "../../../lib/utils.js";
+import { usePickerDismissActionsRef as ae, usePickerFooterDismissNudge as pe, isDateInputInvalid as ue, resolveSingleValueDismissFlash as de, maskDateInput as fe, parseDateInput as me, resolveDateInputOnBlur as he, resolveDateInputOnEnter as De } from "./date-input-behavior.js";
+import { Input as ge } from "../input/input.js";
+import { Popover as ye, PopoverAnchor as ve, PopoverContent as ke } from "../../feedback/popover/popover.js";
+import { Calendar as Ce } from "../../data-display/calendar/calendar.js";
 import { Tooltip as j, TooltipTrigger as B, TooltipContent as K } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as Ce } from "../../../i18n/use-impact-nova-i18n.js";
-import { getDateFnsLocale as Ie } from "../../../i18n/getDateFnsLocale.js";
-import { createComponent as Pe } from "../../../lib/primitives/create-component.js";
-import { coerceSingleDateApply as Me, coerceSingleDate as xe } from "./calendar-selection-adapters.js";
-import { buildDateBoundsMatcher as Re } from "../../../lib/date-bounds-matcher.js";
-const He = Pe(
+import { useImpactNovaI18n as Ie } from "../../../i18n/use-impact-nova-i18n.js";
+import { getDateFnsLocale as Pe } from "../../../i18n/getDateFnsLocale.js";
+import { createComponent as Me } from "../../../lib/primitives/create-component.js";
+import { coerceSingleDateApply as xe, coerceSingleDate as Re } from "./calendar-selection-adapters.js";
+import { buildDateBoundsMatcher as be } from "../../../lib/date-bounds-matcher.js";
+const qe = Me(
   "DatePicker",
   ({
     value: n,
@@ -25,14 +25,14 @@ const He = Pe(
     startMonth: G,
     endMonth: J,
     showFooter: c = !0,
-    weekStartsOn: T,
+    weekStartsOn: w,
     disabled: a,
     className: Q,
     ...U
   }, W) => {
-    const { locale: w, t: m } = Ce(), f = r.useMemo(() => Ie(w), [w]), X = z ?? m("datePicker.selectDate"), I = r.useRef(null), A = r.useRef(null), P = r.useRef(null);
-    r.useImperativeHandle(W, () => I.current);
-    const [o, E] = r.useState(!1), N = ae(), { footerFlashKey: Y, footerFlashTarget: Z, popoverHandlers: _ } = pe(c, o, N, A), g = r.useRef(!1), [R, s] = r.useState(null), y = n ? S(n, l, { locale: f }) : "", d = R?.input ?? y, k = o ? R?.pending ?? n : n, $ = R?.viewMonth ?? n ?? /* @__PURE__ */ new Date(), p = r.useCallback(() => {
+    const { locale: T, t: m } = Ie(), d = r.useMemo(() => Pe(T), [T]), X = z ?? m("datePicker.selectDate"), C = r.useRef(null), A = r.useRef(null), I = r.useRef(null);
+    r.useImperativeHandle(W, () => C.current);
+    const [o, E] = r.useState(!1), N = ae(), { footerFlashKey: Y, footerFlashTarget: Z, popoverHandlers: _ } = pe(c, o, N, A), g = r.useRef(!1), [R, s] = r.useState(null), y = n ? S(n, l, { locale: d }) : "", f = R?.input ?? y, P = o ? R?.pending ?? n : n, $ = R?.viewMonth ?? n ?? /* @__PURE__ */ new Date(), p = r.useCallback(() => {
       s(null), E(!1);
     }, []), h = (e) => {
       if (!a) {
@@ -44,23 +44,23 @@ const He = Pe(
           }), E(!0);
           return;
         }
-        c || p();
+        p();
       }
     };
     r.useEffect(() => {
-      I.current && P.current !== null && (I.current.setSelectionRange(P.current, P.current), P.current = null);
-    }, [d]);
+      C.current && I.current !== null && (C.current.setSelectionRange(I.current, I.current), I.current = null);
+    }, [f]);
     const F = (e) => {
-      const t = xe(e), D = t ? S(t, l, { locale: f }) : "";
+      const t = Re(e), D = t ? S(t, l, { locale: d }) : "";
       s(
         (v) => v ? { ...v, pending: t, input: D, viewMonth: t ?? v.viewMonth } : null
       ), t && !c && (u?.(t), p());
-    }, L = (e) => {
-      const t = Me(e, k);
+    }, V = (e) => {
+      const t = xe(e, P);
       u?.(t), p();
     }, b = () => {
       p();
-    }, O = () => {
+    }, L = () => {
       u?.(void 0), c ? s(
         (e) => e ? { ...e, pending: void 0, input: "" } : null
       ) : p();
@@ -72,14 +72,14 @@ const He = Pe(
       }),
       [y, n]
     ), ee = (e) => {
-      const t = fe(e.target.value, l, d);
-      if (s((C) => ({ ...C ?? M(), input: t })), t === "") {
-        s((C) => ({ ...C ?? M(), input: "", pending: void 0 })), c || u?.(void 0);
+      const t = fe(e.target.value, l, f);
+      if (s((k) => ({ ...k ?? M(), input: t })), t === "") {
+        s((k) => ({ ...k ?? M(), input: "", pending: void 0 })), c || u?.(void 0);
         return;
       }
-      const { parsed: D, isValid: v } = de(t, l, f);
-      v && D && (s((C) => ({
-        ...C ?? M(),
+      const { parsed: D, isValid: v } = me(t, l, d);
+      v && D && (s((k) => ({
+        ...k ?? M(),
         input: t,
         pending: D,
         viewMonth: D
@@ -91,11 +91,11 @@ const He = Pe(
       [u, p]
     ), ne = () => {
       if (o) return;
-      const e = me(
-        d,
+      const e = he(
+        f,
         l,
         y,
-        f
+        d
       );
       if (e.resetToCommitted) {
         s(null);
@@ -113,34 +113,41 @@ const He = Pe(
       s(null);
     }, re = () => {
       if (o && c) {
-        L();
+        V();
         return;
       }
-      const e = he(d, l, f);
+      const e = De(f, l, d);
       if (e.parsed) {
         c && te(e.parsed);
         return;
       }
       o || (g.current = !0, h(!0));
-    }, V = (n ? S(n, l, { locale: f }) : "") !== d, ie = ue(d, l, f), oe = r.useCallback(() => k && (!n || k.getTime() !== n.getTime()) ? "apply" : "cancel", [k, n]);
+    }, O = (n ? S(n, l, { locale: d }) : "") !== f, ie = ue(f, l, d), oe = r.useCallback(
+      () => de(
+        P,
+        n,
+        (e, t) => e.getTime() === t.getTime()
+      ),
+      [P, n]
+    );
     return r.useLayoutEffect(() => {
       N.current = {
         onDismiss: b,
         resolveFlash: oe
       };
-    }), /* @__PURE__ */ x(ge, { open: a ? !1 : o, onOpenChange: h, children: [
-      /* @__PURE__ */ i(ye, { asChild: !0, children: /* @__PURE__ */ i(
+    }), /* @__PURE__ */ x(ye, { open: a ? !1 : o, onOpenChange: h, children: [
+      /* @__PURE__ */ i(ve, { asChild: !0, children: /* @__PURE__ */ i(
         "div",
         {
           ref: A,
           "data-component": "date-picker",
           "data-state": o ? "open" : "closed",
-          "data-pending": V || void 0,
+          "data-pending": O || void 0,
           children: /* @__PURE__ */ i(
-            De,
+            ge,
             {
-              ref: I,
-              value: d,
+              ref: C,
+              value: f,
               onChange: ee,
               onBlur: ne,
               onClick: () => !a && h(!0),
@@ -150,9 +157,9 @@ const He = Pe(
               placeholder: o ? l : X,
               disabled: a,
               "data-form-control": "input",
-              className: le(
+              className: ce(
                 "cursor-pointer",
-                ie ? "text-destructive" : V ? "text-content-placeholder" : "",
+                ie ? "text-destructive" : O ? "text-content-placeholder" : "",
                 Q
               ),
               suffix: /* @__PURE__ */ x("div", { className: "flex items-center gap-1", children: [
@@ -164,7 +171,7 @@ const He = Pe(
                       tabIndex: 0,
                       "aria-label": m("calendar.clear"),
                       onClick: (e) => {
-                        e.stopPropagation(), O();
+                        e.stopPropagation(), L();
                       },
                       className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
                       children: /* @__PURE__ */ i(se, { className: "size-3 hover:text-content" })
@@ -177,7 +184,7 @@ const He = Pe(
                     e.stopPropagation(), a || (o ? p() : h(!0));
                   }, onKeyDown: (e) => {
                     (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), a || (g.current = !0, o ? p() : h(!0)));
-                  }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ i(ce, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
+                  }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ i(le, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
                   /* @__PURE__ */ i(K, { variant: "tertiary", side: "top", children: m("datePicker.selectDate") })
                 ] })
               ] }),
@@ -197,10 +204,10 @@ const He = Pe(
           },
           ..._,
           children: /* @__PURE__ */ i(
-            ve,
+            Ce,
             {
               mode: "single",
-              selected: k,
+              selected: P,
               footerFlashKey: Y,
               footerFlashTarget: Z,
               onSelect: F,
@@ -208,15 +215,15 @@ const He = Pe(
               onMonthChange: (e) => s(
                 (t) => t ? { ...t, viewMonth: e } : null
               ),
-              disabled: Re(H, q),
+              disabled: be(H, q),
               startMonth: G,
               endMonth: J,
               showFooter: c,
-              onApply: L,
+              onApply: V,
               onCancel: b,
-              onClear: O,
+              onClear: L,
               captionLayout: "dropdown",
-              ...T !== void 0 ? { weekStartsOn: T } : {}
+              ...w !== void 0 ? { weekStartsOn: w } : {}
             }
           )
         }
@@ -225,5 +232,5 @@ const He = Pe(
   }
 );
 export {
-  He as DatePicker
+  qe as DatePicker
 };

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

@@ -54,7 +54,7 @@ const tt = a.forwardRef(
       rootClassName: "w-full min-w-[240px]"
     }), Q = a.useRef(null), Re = a.useRef(null), U = a.useRef(null), T = a.useRef(null), M = a.useRef(null);
     a.useImperativeHandle(he, () => Q.current);
-    const [d, h] = a.useState(!1), W = Ke(), { footerFlashKey: xe, footerFlashTarget: De, popoverHandlers: ke } = je(g, d, W, U), I = a.useRef(!1), [p, y] = a.useState(r), [m, D] = a.useState(r?.from ? x(r.from, n, { locale: s }) : ""), [R, k] = a.useState(r?.to ? x(r.to, n, { locale: s }) : ""), [ve, P] = a.useState(r?.from || /* @__PURE__ */ new Date()), v = r?.from ? x(r.from, n, { locale: s }) : "", C = r?.to ? x(r.to, n, { locale: s }) : "";
+    const [p, h] = a.useState(!1), W = Ke(), { footerFlashKey: xe, footerFlashTarget: De, popoverHandlers: ke } = je(g, p, W, U), I = a.useRef(!1), [d, y] = a.useState(r), [m, D] = a.useState(r?.from ? x(r.from, n, { locale: s }) : ""), [R, k] = a.useState(r?.to ? x(r.to, n, { locale: s }) : ""), [ve, P] = a.useState(r?.from || /* @__PURE__ */ new Date()), v = r?.from ? x(r.from, n, { locale: s }) : "", C = r?.to ? x(r.to, n, { locale: s }) : "";
     a.useEffect(() => {
       D(r?.from ? x(r.from, n, { locale: s }) : ""), k(r?.to ? x(r.to, n, { locale: s }) : ""), y(r);
     }, [r, n, s]);
@@ -69,12 +69,12 @@ const tt = a.forwardRef(
       [f, g]
     ), X = a.useRef(!1);
     a.useEffect(() => {
-      if (d && !X.current) {
+      if (p && !X.current) {
         const e = K(m, n, s);
-        e.parsed ? P(e.parsed) : p?.from ? P(p.from) : r?.from && P(r.from);
+        e.parsed ? P(e.parsed) : d?.from ? P(d.from) : r?.from && P(r.from);
       }
-      X.current = d;
-    }, [d, m, n, s, p?.from, r?.from]);
+      X.current = p;
+    }, [p, m, n, s, d?.from, r?.from]);
     const be = (e) => {
       const t = $e(e);
       y(t), t?.from && D(x(t.from, n, { locale: s })), t?.to && k(x(t.to, n, { locale: s })), g || t?.from && t?.to && t.from.getTime() !== t.to.getTime() && (c?.(t), h(!1));
@@ -82,7 +82,7 @@ const tt = a.forwardRef(
       const o = qe(e, t, j);
       return o.swapped && (o.from && D(x(o.from, n, { locale: s })), o.to && k(x(o.to, n, { locale: s })), ze(T.current)), { from: o.from, to: o.to };
     }, [n, s]), Y = (e) => {
-      let t = _e(e, p);
+      let t = _e(e, d);
       t?.from && !t.to && (t = { from: t.from, to: t.from });
       const o = w(t?.from, t?.to);
       y({ from: o.from, to: o.to }), c?.({ from: o.from, to: o.to }), h(!1);
@@ -93,25 +93,25 @@ const tt = a.forwardRef(
     }, Ie = (e) => {
       const t = F(e.target.value, n, m);
       if (D(t), t === "") {
-        const l = { from: void 0, to: p?.to };
+        const l = { from: void 0, to: d?.to };
         y(l), g || c?.(l);
         return;
       }
       const { parsed: o, isValid: i } = K(t, n, s);
       if (i && o) {
-        const l = { from: o, to: p?.to };
+        const l = { from: o, to: d?.to };
         y(l), P(o), g || c?.(l);
       }
     }, Pe = (e) => {
       const t = F(e.target.value, n, R);
       if (k(t), t === "") {
-        const l = { from: p?.from, to: void 0 };
+        const l = { from: d?.from, to: void 0 };
         y(l), g || c?.(l);
         return;
       }
       const { parsed: o, isValid: i } = K(t, n, s);
       if (i && o) {
-        const l = { from: p?.from, to: o };
+        const l = { from: d?.from, to: o };
         y(l), P(o), g || c?.(l);
       }
     }, Z = () => {
@@ -121,7 +121,7 @@ const tt = a.forwardRef(
         () => {
           const e = N(m, n, v, s), t = N(R, n, C, s);
           e.resetToCommitted ? D(v) : e.parsed && D(e.display), t.resetToCommitted ? k(C) : t.parsed && k(t.display);
-          let o = e.parsed ? e.parsed : e.resetToCommitted ? r?.from : p?.from, i = t.parsed ? t.parsed : t.resetToCommitted ? r?.to : p?.to;
+          let o = e.parsed ? e.parsed : e.resetToCommitted ? r?.from : d?.from, i = t.parsed ? t.parsed : t.resetToCommitted ? r?.to : d?.to;
           o && i && ({ from: o, to: i } = w(o, i));
           const l = o || i ? { from: o, to: i } : void 0;
           y(l), g || (l ? c?.(l) : !m && !R && c?.(void 0));
@@ -130,16 +130,16 @@ const tt = a.forwardRef(
     }, Ee = () => {
       const e = S(m, n, v, s), t = S(R, n, C, s);
       e.resetToCommitted ? D(v) : e.parsed && D(e.display), t.resetToCommitted ? k(C) : t.parsed && k(t.display);
-      let o = e.parsed ?? p?.from ?? r?.from, i = t.parsed ?? p?.to ?? r?.to;
+      let o = e.parsed ?? d?.from ?? r?.from, i = t.parsed ?? d?.to ?? r?.to;
       o && i && ({ from: o, to: i } = w(o, i));
       const l = o || i ? { from: o, to: i } : void 0;
       l ? (y(l), c?.(l)) : !m && !R && (y(void 0), c?.(void 0));
     }, _ = () => {
-      if (d && g) {
+      if (p && g) {
         Y();
         return;
       }
-      if (!d) {
+      if (!p) {
         if (g) {
           Ee();
           return;
@@ -150,7 +150,7 @@ const tt = a.forwardRef(
       }
     }, we = m !== v, Te = R !== C, Be = $(m, n, s), Ne = $(R, n, s), Se = a.useCallback(() => {
       const e = N(m, n, v, s), t = N(R, n, C, s);
-      let o = e.parsed ? e.parsed : e.resetToCommitted ? r?.from : p?.from, i = t.parsed ? t.parsed : t.resetToCommitted ? r?.to : p?.to;
+      let o = e.parsed ? e.parsed : e.resetToCommitted ? r?.from : d?.from, i = t.parsed ? t.parsed : t.resetToCommitted ? r?.to : d?.to;
       o && i && ({ from: o, to: i } = w(o, i));
       const l = o || i ? { from: o, to: i } : void 0;
       return He({
@@ -159,6 +159,7 @@ const tt = a.forwardRef(
         committedStart: v,
         committedEnd: C,
         committedRange: r,
+        pendingRange: d,
         computeEffectiveRange: () => l,
         rangesEqual: (Ae, Me) => et(Ae, Me)
       });
@@ -168,7 +169,7 @@ const tt = a.forwardRef(
       v,
       C,
       r,
-      p,
+      d,
       n,
       s,
       w
@@ -185,12 +186,12 @@ const tt = a.forwardRef(
         "data-component": "date-range-picker",
         "data-disabled": f || void 0,
         children: ye.wrapControl(
-          /* @__PURE__ */ E(Qe, { open: f ? !1 : d, onOpenChange: Ce, children: [
+          /* @__PURE__ */ E(Qe, { open: f ? !1 : p, onOpenChange: Ce, children: [
             /* @__PURE__ */ u(Ue, { asChild: !0, children: /* @__PURE__ */ E(
               "div",
               {
                 ref: T,
-                "data-state": d ? "open" : "closed",
+                "data-state": p ? "open" : "closed",
                 className: O(
                   "flex w-full items-center justify-between gap-2 rounded-md border bg-canvas-elevated px-3 text-sm shadow-sm transition-colors hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
                   J ? "border-destructive hover:border-destructive" : "border-field",
@@ -211,9 +212,9 @@ const tt = a.forwardRef(
                         onBlur: Z,
                         onClick: () => !f && h(!0),
                         onKeyDown: (e) => {
-                          e.key === "Enter" && !f && (e.preventDefault(), _()), e.key === "ArrowDown" && !d && !f && (e.preventDefault(), I.current = !0, h(!0)), e.key === "Escape" && d && (e.preventDefault(), B());
+                          e.key === "Enter" && !f && (e.preventDefault(), _()), e.key === "ArrowDown" && !p && !f && (e.preventDefault(), I.current = !0, h(!0)), e.key === "Escape" && p && (e.preventDefault(), B());
                         },
-                        placeholder: d ? n : H,
+                        placeholder: p ? n : H,
                         disabled: !!f,
                         "aria-label": H,
                         "data-field": "start",
@@ -234,9 +235,9 @@ const tt = a.forwardRef(
                         onBlur: Z,
                         onClick: () => !f && h(!0),
                         onKeyDown: (e) => {
-                          e.key === "Enter" && !f && (e.preventDefault(), _()), e.key === "ArrowDown" && !d && !f && (e.preventDefault(), I.current = !0, h(!0)), e.key === "Escape" && d && (e.preventDefault(), B());
+                          e.key === "Enter" && !f && (e.preventDefault(), _()), e.key === "ArrowDown" && !p && !f && (e.preventDefault(), I.current = !0, h(!0)), e.key === "Escape" && p && (e.preventDefault(), B());
                         },
-                        placeholder: d ? n : G,
+                        placeholder: p ? n : G,
                         disabled: !!f,
                         "aria-label": G,
                         "data-field": "end",
@@ -269,9 +270,9 @@ const tt = a.forwardRef(
                     ] }),
                     /* @__PURE__ */ E(ee, { children: [
                       /* @__PURE__ */ u(te, { asChild: !0, children: /* @__PURE__ */ u("button", { type: "button", tabIndex: 0, "aria-label": b("datePicker.selectMonthRange"), onClick: (e) => {
-                        e.stopPropagation(), f || h(!d);
+                        e.stopPropagation(), f || h(!p);
                       }, onKeyDown: (e) => {
-                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), f || (I.current = !0, h(!d)));
+                        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), f || (I.current = !0, h(!p)));
                       }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ u(Oe, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
                       /* @__PURE__ */ u(re, { variant: "tertiary", side: "top", children: b("datePicker.selectMonthRange") })
                     ] })
@@ -294,7 +295,7 @@ const tt = a.forwardRef(
                   Xe,
                   {
                     mode: "range",
-                    selected: p,
+                    selected: d,
                     footerFlashKey: xe,
                     footerFlashTarget: De,
                     onSelect: be,