impact-nova 2.2.3 → 2.2.4

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

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