impact-nova 2.1.0-alpha.9 → 2.2.0

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

@@ -0,0 +1,164 @@
+import { parse as g, isValid as h } from "date-fns";
+import * as u from "react";
+import { resolveRangeFooterFlashTarget as D } from "../../data-display/calendar/calendar-footer-emphasis.js";
+import { padValidDateString as v, maskDate as y } from "../../../lib/utils.js";
+function w(e, t, n) {
+  return y(e, t, n);
+}
+function f(e, t, n) {
+  const r = v(e, t), s = g(r, t, /* @__PURE__ */ new Date(), n ? { locale: n } : {}), i = h(s) && r.length === t.length;
+  return {
+    padded: r,
+    parsed: i ? s : void 0,
+    isComplete: e.length === t.length,
+    isValid: i
+  };
+}
+function C(e, t, n) {
+  return !e || e.length !== t.length ? !1 : !f(e, t, n).isValid;
+}
+function p(e, t) {
+  const n = document.activeElement;
+  return n instanceof Node ? !!(e.current?.contains(n) || t.current?.contains(n)) : !1;
+}
+function T(e) {
+  return (t) => {
+    if (!e.disabled) {
+      if (t) {
+        e.setOpen(!0);
+        return;
+      }
+      e.showFooter || queueMicrotask(() => {
+        p(e.containerRef, e.popoverContentRef) || e.setOpen(!1);
+      });
+    }
+  };
+}
+function k(e, t) {
+  const n = e.target;
+  return n instanceof Node ? !!t.current?.contains(n) : !1;
+}
+function O(e, t, n, r) {
+  return e ? {
+    onInteractOutside: (a) => {
+      a.preventDefault();
+    },
+    onPointerDownOutside: (a) => {
+      a.preventDefault(), !(r && k(a, r)) && t && n && n(t.current.resolveFlash());
+    },
+    onEscapeKeyDown: t ? (a) => {
+      a.preventDefault(), t.current.onDismiss();
+    } : void 0
+  } : {};
+}
+function E(e) {
+  const {
+    startInput: t,
+    endInput: n,
+    committedStart: r,
+    committedEnd: s,
+    committedRange: i,
+    computeEffectiveRange: a,
+    rangesEqual: o
+  } = e, c = a(), d = D(c), l = t !== r || n !== s, m = !o(c, i);
+  return d === "apply" && (l || m) ? "apply" : "cancel";
+}
+function S() {
+  return u.useRef({
+    onDismiss: () => {
+    },
+    resolveFlash: () => "cancel"
+  });
+}
+function V(e, t, n, r) {
+  const [s, i] = u.useState({ key: 0, target: "cancel" }), a = u.useRef(t);
+  u.useLayoutEffect(() => {
+    a.current !== t && (a.current = t, i({ key: 0, target: "cancel" }));
+  }, [t]);
+  const o = u.useCallback(
+    (d) => {
+      e && i((l) => ({ key: l.key + 1, target: d }));
+    },
+    [e]
+  ), c = O(
+    e,
+    n,
+    o,
+    r
+  );
+  return {
+    footerFlashKey: s.key,
+    footerFlashTarget: s.key > 0 ? s.target : void 0,
+    triggerFooterFlash: o,
+    popoverHandlers: c
+  };
+}
+function B(e, t, n) {
+  queueMicrotask(() => {
+    p(e, t) || n();
+  });
+}
+function F(e, t, n, r) {
+  if (!e)
+    return { display: "", parsed: void 0, resetToCommitted: !1 };
+  const s = f(e, t, r);
+  return s.isValid ? {
+    display: s.padded,
+    parsed: s.parsed,
+    resetToCommitted: !1
+  } : e.length < t.length ? { display: e, parsed: void 0, resetToCommitted: !1 } : { display: n, parsed: void 0, resetToCommitted: !0 };
+}
+function q(e, t, n, r) {
+  const s = F(e, t, n, r);
+  return {
+    ...s,
+    isPartial: !!e && e.length < t.length && !s.resetToCommitted
+  };
+}
+function b(e, t, n) {
+  const r = f(e, t, n);
+  return r.isValid && r.parsed ? { parsed: r.parsed, shouldOpenPopover: !1 } : { parsed: void 0, shouldOpenPopover: !0 };
+}
+function M(e, t, n) {
+  return e === void 0 || t === void 0 ? { from: e, to: t, swapped: !1 } : n(e, t) <= 0 ? { from: e, to: t, swapped: !1 } : { from: t, to: e, swapped: !0 };
+}
+function X(e, t) {
+  return e.year * 12 + e.month - (t.year * 12 + t.month);
+}
+function x(e, t) {
+  return e.getTime() - t.getTime();
+}
+function N(e) {
+  if (!e || typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+    return;
+  const t = e.querySelector('[data-field="start"]'), n = e.querySelector('[data-field="end"]');
+  if (!t || !n) return;
+  const r = { duration: 280, easing: "ease-out", fill: "none" };
+  typeof t.animate != "function" || typeof n.animate != "function" || (t.animate(
+    [{ transform: "translateX(3px)" }, { transform: "translateX(0)" }],
+    r
+  ), n.animate(
+    [{ transform: "translateX(-3px)" }, { transform: "translateX(0)" }],
+    r
+  ));
+}
+export {
+  x as compareDates,
+  X as compareMonthSelection,
+  T as createRangePickerOpenChangeHandler,
+  B as deferRangeInputBlur,
+  N as flashRangeReorder,
+  C as isDateInputInvalid,
+  k as isEventOnPickerSurface,
+  p as isFocusInsidePicker,
+  w as maskDateInput,
+  M as normalizeOrderedRange,
+  f as parseDateInput,
+  O as preventOutsideDismissWhenFooter,
+  F as resolveDateInputOnBlur,
+  b as resolveDateInputOnEnter,
+  q as resolveRangeFieldBlur,
+  E as resolveRangePickerDismissFlash,
+  S as usePickerDismissActionsRef,
+  V as usePickerFooterDismissNudge
+};

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

@@ -1,158 +1,222 @@
-import { jsxs as w, jsx as r } from "react/jsx-runtime";
-import * as p from "react";
-import { Cross as F, CalendarMonth as ee } from "impact-nova-icons";
-import { format as x, isValid as b, parse as P } from "date-fns";
-import { cn as ne, maskDate as te, padValidDateString as re } from "../../../lib/utils.js";
-import { Input as oe } from "../input/input.js";
-import { Popover as le, PopoverAnchor as ie, PopoverContent as ae } from "../../feedback/popover/popover.js";
-import { Calendar as ce } from "../../data-display/calendar/calendar.js";
-import { Tooltip as E, TooltipTrigger as T, TooltipContent as j } from "../../feedback/tooltip/tooltip.js";
-import { useImpactNovaI18n as se } from "../../../i18n/use-impact-nova-i18n.js";
-import { getDateFnsLocale as pe } from "../../../i18n/getDateFnsLocale.js";
-import { createComponent as ue } from "../../../lib/primitives/create-component.js";
-import { coerceSingleDateApply as de, coerceSingleDate as fe } from "./calendar-selection-adapters.js";
-import { buildDateBoundsMatcher as he } from "../../../lib/date-bounds-matcher.js";
-const Se = ue(
+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 { 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 { 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(
   "DatePicker",
   ({
-    value: t,
-    onChange: f,
-    format: o = "MM/dd/yyyy",
-    placeholder: L,
-    minDate: B,
-    maxDate: K,
-    startMonth: z,
-    endMonth: O,
-    showFooter: h = !0,
-    weekStartsOn: I,
-    disabled: s,
-    className: H,
-    ...q
-  }, G) => {
-    const { locale: S, t: m } = se(), g = p.useMemo(() => pe(S), [S]), J = L ?? m("datePicker.selectDate"), D = p.useRef(null), y = p.useRef(null);
-    p.useImperativeHandle(G, () => D.current);
-    const [l, Q] = p.useState(!1), v = p.useRef(!1), [C, i] = p.useState(null), k = t ? x(t, o, { locale: g }) : "", u = C?.input ?? k, N = l ? C?.pending ?? t : t, U = C?.viewMonth ?? t ?? /* @__PURE__ */ new Date(), a = (e) => {
-      s || (i(e ? {
-        input: k,
-        pending: t,
-        viewMonth: t ?? /* @__PURE__ */ new Date()
-      } : null), Q(e));
+    value: n,
+    onChange: u,
+    format: l = "MM/dd/yyyy",
+    placeholder: z,
+    minDate: H,
+    maxDate: q,
+    startMonth: G,
+    endMonth: J,
+    showFooter: c = !0,
+    weekStartsOn: T,
+    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(() => {
+      s(null), E(!1);
+    }, []), h = (e) => {
+      if (!a) {
+        if (e) {
+          s({
+            input: y,
+            pending: n,
+            viewMonth: n ?? /* @__PURE__ */ new Date()
+          }), E(!0);
+          return;
+        }
+        c || p();
+      }
     };
-    p.useEffect(() => {
-      D.current && y.current !== null && (D.current.setSelectionRange(y.current, y.current), y.current = null);
-    }, [u]);
-    const W = (e) => {
-      const n = fe(e), d = n ? x(n, o, { locale: g }) : "";
-      i(
-        (c) => c ? { ...c, pending: n, input: d, viewMonth: n ?? c.viewMonth } : null
-      ), n && !h && (f?.(n), a(!1));
-    }, X = (e) => {
-      const n = de(e, N);
-      f?.(n), a(!1);
-    }, R = () => {
-      a(!1);
-    }, A = () => {
-      f?.(void 0), h ? i(
+    r.useEffect(() => {
+      I.current && P.current !== null && (I.current.setSelectionRange(P.current, P.current), P.current = null);
+    }, [d]);
+    const F = (e) => {
+      const t = xe(e), D = t ? S(t, l, { locale: f }) : "";
+      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);
+      u?.(t), p();
+    }, b = () => {
+      p();
+    }, O = () => {
+      u?.(void 0), c ? s(
         (e) => e ? { ...e, pending: void 0, input: "" } : null
-      ) : a(!1);
-    }, Y = (e) => {
-      const n = e.target.value, d = te(n, o, u);
-      if (i((M) => ({ ...M ?? {
-        input: k,
-        pending: t,
-        viewMonth: t ?? /* @__PURE__ */ new Date()
-      }, input: d })), d === "") {
-        h || f?.(void 0);
+      ) : p();
+    }, M = r.useCallback(
+      () => ({
+        input: y,
+        pending: n,
+        viewMonth: n ?? /* @__PURE__ */ new Date()
+      }),
+      [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);
+        return;
+      }
+      const { parsed: D, isValid: v } = de(t, l, f);
+      v && D && (s((C) => ({
+        ...C ?? M(),
+        input: t,
+        pending: D,
+        viewMonth: D
+      })), c || u?.(D));
+    }, te = r.useCallback(
+      (e) => {
+        u?.(e), p();
+      },
+      [u, p]
+    ), ne = () => {
+      if (o) return;
+      const e = me(
+        d,
+        l,
+        y,
+        f
+      );
+      if (e.resetToCommitted) {
+        s(null);
+        return;
+      }
+      if (e.parsed) {
+        s((t) => ({
+          ...t ?? M(),
+          input: e.display,
+          pending: e.parsed,
+          viewMonth: e.parsed
+        })), c || (u?.(e.parsed), s(null));
+        return;
+      }
+      s(null);
+    }, re = () => {
+      if (o && c) {
+        L();
         return;
       }
-      const c = P(d, o, /* @__PURE__ */ new Date(), { locale: g });
-      b(c) && d.length === o.length && (i((M) => ({ ...M ?? {
-        input: d,
-        pending: t,
-        viewMonth: c
-      }, pending: c, viewMonth: c })), h || f?.(c));
-    }, Z = () => {
-      if (l) return;
-      const e = re(u, o), n = P(e, o, /* @__PURE__ */ new Date(), { locale: g });
-      !b(n) || e.length !== o.length ? i(null) : h || (f?.(n), i(null));
-    }, V = (t ? x(t, o, { locale: g }) : "") !== u, _ = u.length === o.length && !b(P(u, o, /* @__PURE__ */ new Date(), { locale: g }));
-    return /* @__PURE__ */ w(le, { open: s ? !1 : l, onOpenChange: a, children: [
-      /* @__PURE__ */ r(ie, { asChild: !0, children: /* @__PURE__ */ r("div", { "data-component": "date-picker", "data-state": l ? "open" : "closed", "data-pending": V || void 0, children: /* @__PURE__ */ r(
-        oe,
+      const e = he(d, l, f);
+      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]);
+    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(
+        "div",
         {
-          ref: D,
-          value: u,
-          onChange: Y,
-          onBlur: Z,
-          onClick: () => !s && a(!0),
-          onKeyDown: (e) => {
-            (e.key === "Enter" || e.key === "ArrowDown") && !l && !s && (e.preventDefault(), v.current = !0, a(!0)), e.key === "Escape" && l && (e.preventDefault(), R());
-          },
-          placeholder: l ? o : J,
-          disabled: s,
-          "data-form-control": "input",
-          className: ne(
-            "cursor-pointer",
-            _ ? "text-destructive" : V ? "text-content-placeholder" : "",
-            H
-          ),
-          suffix: /* @__PURE__ */ w("div", { className: "flex items-center gap-1", children: [
-            t && !s && /* @__PURE__ */ w(E, { children: [
-              /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(
-                "button",
-                {
-                  type: "button",
-                  tabIndex: 0,
-                  "aria-label": m("calendar.clear"),
-                  onClick: (e) => {
-                    e.stopPropagation(), A();
-                  },
-                  className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                  children: /* @__PURE__ */ r(F, { className: "size-3 hover:text-content" })
-                }
-              ) }),
-              /* @__PURE__ */ r(j, { variant: "tertiary", side: "top", children: m("calendar.clear") })
-            ] }),
-            /* @__PURE__ */ w(E, { children: [
-              /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r("button", { type: "button", tabIndex: 0, "aria-label": m("datePicker.selectDate"), onClick: (e) => {
-                e.stopPropagation(), s || a(!l);
-              }, onKeyDown: (e) => {
-                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), s || (v.current = !0, a(!l)));
-              }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ r(ee, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
-              /* @__PURE__ */ r(j, { variant: "tertiary", side: "top", children: m("datePicker.selectDate") })
-            ] })
-          ] }),
-          ...q
+          ref: A,
+          "data-component": "date-picker",
+          "data-state": o ? "open" : "closed",
+          "data-pending": V || void 0,
+          children: /* @__PURE__ */ i(
+            De,
+            {
+              ref: I,
+              value: d,
+              onChange: ee,
+              onBlur: ne,
+              onClick: () => !a && h(!0),
+              onKeyDown: (e) => {
+                e.key === "Enter" && !a && (e.preventDefault(), re()), e.key === "ArrowDown" && !o && !a && (e.preventDefault(), g.current = !0, h(!0)), e.key === "Escape" && o && (e.preventDefault(), b());
+              },
+              placeholder: o ? l : X,
+              disabled: a,
+              "data-form-control": "input",
+              className: le(
+                "cursor-pointer",
+                ie ? "text-destructive" : V ? "text-content-placeholder" : "",
+                Q
+              ),
+              suffix: /* @__PURE__ */ x("div", { className: "flex items-center gap-1", children: [
+                n && !a && /* @__PURE__ */ x(j, { children: [
+                  /* @__PURE__ */ i(B, { asChild: !0, children: /* @__PURE__ */ i(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: 0,
+                      "aria-label": m("calendar.clear"),
+                      onClick: (e) => {
+                        e.stopPropagation(), O();
+                      },
+                      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" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ i(K, { variant: "tertiary", side: "top", children: m("calendar.clear") })
+                ] }),
+                /* @__PURE__ */ x(j, { children: [
+                  /* @__PURE__ */ i(B, { asChild: !0, children: /* @__PURE__ */ i("button", { type: "button", tabIndex: 0, "aria-label": m("datePicker.selectDate"), onClick: (e) => {
+                    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" }) }) }),
+                  /* @__PURE__ */ i(K, { variant: "tertiary", side: "top", children: m("datePicker.selectDate") })
+                ] })
+              ] }),
+              ...U
+            }
+          )
         }
-      ) }) }),
-      /* @__PURE__ */ r(
-        ae,
+      ) }),
+      /* @__PURE__ */ i(
+        ke,
         {
           className: "w-auto p-0",
           align: "start",
           "aria-label": m("datePicker.selectDate"),
           onOpenAutoFocus: (e) => {
-            v.current || e.preventDefault(), v.current = !1;
+            g.current || e.preventDefault(), g.current = !1;
           },
-          children: /* @__PURE__ */ r(
-            ce,
+          ..._,
+          children: /* @__PURE__ */ i(
+            ve,
             {
               mode: "single",
-              selected: N,
-              onSelect: W,
-              month: U,
-              onMonthChange: (e) => i(
-                (n) => n ? { ...n, viewMonth: e } : null
+              selected: k,
+              footerFlashKey: Y,
+              footerFlashTarget: Z,
+              onSelect: F,
+              month: $,
+              onMonthChange: (e) => s(
+                (t) => t ? { ...t, viewMonth: e } : null
               ),
-              disabled: he(B, K),
-              startMonth: z,
-              endMonth: O,
-              showFooter: h,
-              onApply: X,
-              onCancel: R,
-              onClear: A,
+              disabled: Re(H, q),
+              startMonth: G,
+              endMonth: J,
+              showFooter: c,
+              onApply: L,
+              onCancel: b,
+              onClear: O,
               captionLayout: "dropdown",
-              ...I !== void 0 ? { weekStartsOn: I } : {}
+              ...T !== void 0 ? { weekStartsOn: T } : {}
             }
           )
         }
@@ -161,5 +225,5 @@ const Se = ue(
   }
 );
 export {
-  Se as DatePicker
+  He as DatePicker
 };