impact-nova 2.0.6 → 2.0.8

package/dist/components/ui/ag-grid-react/headers/use-header-search-editing-state.d.ts

@@ -0,0 +1,34 @@
+import { ColDef, GridApi } from 'ag-grid-community';
+import { HeaderSearchCommittedState } from './derive-header-search-state';
+interface UseHeaderSearchEditingStateOptions {
+    api: GridApi;
+    colId: string;
+    colDef: ColDef | undefined;
+    isDateFilter: boolean;
+    isMonthVariant: boolean;
+    isWeekVariant: boolean;
+    datePickerVariant: "date" | "month" | "week";
+    dateDisplayFormat: string;
+}
+/**
+ * Inline header search display state.
+ *
+ * AG Grid's filter model is the source of truth. While inline search is open,
+ * AgGridWrapper skips refreshHeader on filterChanged, so this hook subscribes
+ * to filterChanged and keeps a column-scoped snapshot in React state. When the
+ * snapshot changes, committed display values are re-derived from the live filter
+ * model. While an input is focused, a draft overlays committed values so typing
+ * is not interrupted.
+ */
+export declare function useHeaderSearchEditingState(options: UseHeaderSearchEditingStateOptions): {
+    searchText: string;
+    dateDisplayString: string;
+    selectedDate: Date;
+    selectedMonth: import('../../calendar').MonthSelection;
+    selectedWeek: import('../../calendar').WeekSelection;
+    updateDraft: (patch: Partial<HeaderSearchCommittedState>) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    clearEditingOverlay: () => void;
+};
+export {};

package/dist/components/ui/ag-grid-react/headers/use-header-search-editing-state.js

@@ -0,0 +1,70 @@
+import { useCallback as V, useState as l, useEffect as b, useMemo as v } from "react";
+import { subscribeGridApiEvent as W } from "../grid-api-event-subscription.js";
+import { deriveHeaderSearchCommittedState as H } from "./derive-header-search-state.js";
+function A(D) {
+  const {
+    api: e,
+    colId: r,
+    colDef: c,
+    isDateFilter: d,
+    isMonthVariant: u,
+    isWeekVariant: m,
+    datePickerVariant: S,
+    dateDisplayFormat: f
+  } = D, n = V(
+    () => JSON.stringify(e.getFilterModel()[r] ?? null),
+    [e, r]
+  ), [y, g] = l(
+    n
+  ), [i, o] = l(null), [M, p] = l(!1);
+  b(() => W(
+    e,
+    "filterChanged",
+    () => {
+      const a = n();
+      g(
+        (F) => F === a ? F : a
+      );
+    }
+  ), [e, r, n]);
+  const h = v(() => H({
+    api: e,
+    colId: r,
+    colDef: c,
+    isDateFilter: d,
+    isMonthVariant: u,
+    isWeekVariant: m,
+    datePickerVariant: S,
+    dateDisplayFormat: f
+  }), [
+    e,
+    r,
+    c,
+    d,
+    u,
+    m,
+    S,
+    f,
+    y
+  ]), s = (t) => M && i && i[t] !== void 0 ? i[t] : h[t], k = (t) => {
+    o((a) => ({ ...h, ...a, ...t }));
+  }, C = () => p(!0), x = () => {
+    p(!1), o(null);
+  }, E = () => {
+    o(null);
+  };
+  return {
+    searchText: s("searchText"),
+    dateDisplayString: s("dateDisplayString"),
+    selectedDate: s("selectedDate"),
+    selectedMonth: s("selectedMonth"),
+    selectedWeek: s("selectedWeek"),
+    updateDraft: k,
+    handleFocus: C,
+    handleBlur: x,
+    clearEditingOverlay: E
+  };
+}
+export {
+  A as useHeaderSearchEditingState
+};

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

@@ -1,7 +1,7 @@
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import * as c from "react";
+import { jsxs as P, jsx as r } from "react/jsx-runtime";
+import * as o from "react";
 import { Cross as Z, CalendarMonth as _ } from "impact-nova-icons";
-import { format as h, isValid as I, parse as b } from "date-fns";
+import { format as h, isValid as I, parse as N } from "date-fns";
 import { cn as $, padValidDateString as F, maskDate as ee } from "../../../lib/utils.js";
 import { Input as te } from "../input.js";
 import { Popover as ne, PopoverAnchor as re, PopoverContent as oe } from "../popover.js";
@@ -9,78 +9,78 @@ import { Calendar as ce } from "../calendar.js";
 import { Tooltip as S, TooltipTrigger as E, TooltipContent as T } from "../tooltip.js";
 import { getDateFnsLocale as ie } from "../../../i18n/getDateFnsLocale.js";
 import { useImpactNovaI18n as le } from "../../../i18n/ImpactNovaI18nContext.js";
-const ae = c.forwardRef(
+const ae = o.forwardRef(
   ({
     value: t,
-    onChange: d,
+    onChange: u,
     format: n = "MM/dd/yyyy",
     placeholder: j,
     minDate: L,
     maxDate: K,
     startMonth: z,
     endMonth: B,
-    showFooter: u = !0,
-    weekStartsOn: N,
-    disabled: s,
+    showFooter: d = !0,
+    weekStartsOn: R,
+    disabled: a,
     className: O,
     ...H
   }, q) => {
-    const { locale: R, t: m } = le(), i = c.useMemo(() => ie(R), [R]), G = j ?? m("datePicker.selectDate"), y = c.useRef(null), D = c.useRef(null);
-    c.useImperativeHandle(q, () => y.current);
-    const [r, l] = c.useState(!1), k = c.useRef(!1), [v, a] = c.useState(t), [p, f] = c.useState(t ? h(t, n, { locale: i }) : ""), [J, w] = c.useState(t || /* @__PURE__ */ new Date());
-    c.useEffect(() => {
-      y.current && D.current !== null && (y.current.setSelectionRange(D.current, D.current), D.current = null);
-    }, [p]), c.useEffect(() => {
-      r || (f(t ? h(t, n, { locale: i }) : ""), a(t));
-    }, [t, n, r, i]), c.useEffect(() => {
-      r && (a(t), w(t || /* @__PURE__ */ new Date()));
-    }, [r, t]);
+    const { locale: b, t: m } = le(), i = o.useMemo(() => ie(b), [b]), G = j ?? m("datePicker.selectDate"), g = o.useRef(null), D = o.useRef(null);
+    o.useImperativeHandle(q, () => g.current);
+    const [c, l] = o.useState(!1), k = o.useRef(!1), [v, s] = o.useState(t), [p, f] = o.useState(t ? h(t, n, { locale: i }) : ""), [J, w] = o.useState(t || /* @__PURE__ */ new Date());
+    o.useEffect(() => {
+      g.current && D.current !== null && (g.current.setSelectionRange(D.current, D.current), D.current = null);
+    }, [p]), o.useEffect(() => {
+      c || (f(t ? h(t, n, { locale: i }) : ""), s(t));
+    }, [t, n, c, i]), o.useEffect(() => {
+      c && (s(t), w(t || /* @__PURE__ */ new Date()));
+    }, [c, t]);
     const Q = (e) => {
-      a(e), e && f(h(e, n, { locale: i })), u || (d?.(e), l(!1));
+      s(e), e && f(h(e, n, { locale: i })), d || (u?.(e), l(!1));
     }, U = (e) => {
-      d?.(e !== void 0 ? e : v), l(!1);
+      u?.(e !== void 0 ? e : v), l(!1);
     }, V = () => {
-      a(t), f(t ? h(t, n, { locale: i }) : ""), l(!1);
+      s(t), f(t ? h(t, n, { locale: i }) : ""), l(!1);
     }, A = () => {
-      a(void 0), f(""), d?.(void 0), u || l(!1);
+      s(void 0), f(""), u?.(void 0), d || l(!1);
     }, W = (e) => {
-      const g = e.target.value, C = ee(g, n, p);
+      const y = e.target.value, C = ee(y, n, p);
       if (f(C), C === "") {
-        a(void 0), u || d?.(void 0);
+        s(void 0), d || u?.(void 0);
         return;
       }
-      const P = b(C, n, /* @__PURE__ */ new Date(), { locale: i });
-      I(P) && C.length === n.length && (a(P), w(P), u || d?.(P));
+      const x = N(C, n, /* @__PURE__ */ new Date(), { locale: i });
+      I(x) && C.length === n.length && (s(x), w(x), d || u?.(x));
     }, X = () => {
-      if (r) return;
-      const e = F(p, n), g = b(e, n, /* @__PURE__ */ new Date(), { locale: i });
-      !I(g) || e.length !== n.length ? (f(t ? h(t, n, { locale: i }) : ""), a(t)) : (f(e), u || d?.(g));
-    }, M = (t ? h(t, n, { locale: i }) : "") !== p, Y = p.length === n.length && !I(b(p, n, /* @__PURE__ */ new Date(), { locale: i }));
-    return /* @__PURE__ */ x(ne, { open: s ? !1 : r, onOpenChange: (e) => {
-      s || l(e);
+      if (c) return;
+      const e = F(p, n), y = N(e, n, /* @__PURE__ */ new Date(), { locale: i });
+      !I(y) || e.length !== n.length ? (f(t ? h(t, n, { locale: i }) : ""), s(t)) : (f(e), d || u?.(y));
+    }, M = (t ? h(t, n, { locale: i }) : "") !== p, Y = p.length === n.length && !I(N(p, n, /* @__PURE__ */ new Date(), { locale: i }));
+    return /* @__PURE__ */ P(ne, { open: a ? !1 : c, onOpenChange: (e) => {
+      a || l(e);
     }, children: [
-      /* @__PURE__ */ o(re, { asChild: !0, children: /* @__PURE__ */ o("div", { "data-component": "date-picker", "data-state": r ? "open" : "closed", "data-pending": M || void 0, children: /* @__PURE__ */ o(
+      /* @__PURE__ */ r(re, { asChild: !0, children: /* @__PURE__ */ r("div", { "data-component": "date-picker", "data-state": c ? "open" : "closed", "data-pending": M || void 0, children: /* @__PURE__ */ r(
         te,
         {
-          ref: y,
+          ref: g,
           value: p,
           onChange: W,
           onBlur: X,
-          onClick: (e) => r && e.stopPropagation(),
+          onClick: () => !a && l(!0),
           onKeyDown: (e) => {
-            (e.key === "Enter" || e.key === "ArrowDown") && !r && !s && (e.preventDefault(), k.current = !0, l(!0)), e.key === "Escape" && r && (e.preventDefault(), V());
+            (e.key === "Enter" || e.key === "ArrowDown") && !c && !a && (e.preventDefault(), k.current = !0, l(!0)), e.key === "Escape" && c && (e.preventDefault(), V());
           },
-          placeholder: r ? n : G,
-          disabled: s,
+          placeholder: c ? n : G,
+          disabled: a,
           "data-form-control": "input",
           className: $(
             "cursor-pointer",
             Y ? "text-destructive" : M ? "text-content-muted" : "",
             O
           ),
-          suffix: /* @__PURE__ */ x("div", { className: "flex items-center gap-1", children: [
-            t && !s && /* @__PURE__ */ x(S, { children: [
-              /* @__PURE__ */ o(E, { asChild: !0, children: /* @__PURE__ */ o(
+          suffix: /* @__PURE__ */ P("div", { className: "flex items-center gap-1", children: [
+            t && !a && /* @__PURE__ */ P(S, { children: [
+              /* @__PURE__ */ r(E, { asChild: !0, children: /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
@@ -90,24 +90,24 @@ const ae = c.forwardRef(
                     e.stopPropagation(), A();
                   },
                   className: "inline-flex size-4 items-center justify-center bg-transparent border-none p-0 cursor-pointer",
-                  children: /* @__PURE__ */ o(Z, { className: "size-3 hover:text-content" })
+                  children: /* @__PURE__ */ r(Z, { className: "size-3 hover:text-content" })
                 }
               ) }),
-              /* @__PURE__ */ o(T, { variant: "tertiary", side: "top", children: m("calendar.clear") })
+              /* @__PURE__ */ r(T, { variant: "tertiary", side: "top", children: m("calendar.clear") })
             ] }),
-            /* @__PURE__ */ x(S, { children: [
-              /* @__PURE__ */ o(E, { asChild: !0, children: /* @__PURE__ */ o("button", { type: "button", tabIndex: 0, "aria-label": m("datePicker.selectDate"), onClick: (e) => {
-                e.stopPropagation(), s || l(!r);
+            /* @__PURE__ */ P(S, { children: [
+              /* @__PURE__ */ r(E, { asChild: !0, children: /* @__PURE__ */ r("button", { type: "button", tabIndex: 0, "aria-label": m("datePicker.selectDate"), onClick: (e) => {
+                e.stopPropagation(), a || l(!c);
               }, onKeyDown: (e) => {
-                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), s || (k.current = !0, l(!r)));
-              }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ o(_, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
-              /* @__PURE__ */ o(T, { variant: "tertiary", side: "top", children: m("datePicker.selectDate") })
+                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), a || (k.current = !0, l(!c)));
+              }, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ r(_, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
+              /* @__PURE__ */ r(T, { variant: "tertiary", side: "top", children: m("datePicker.selectDate") })
             ] })
           ] }),
           ...H
         }
       ) }) }),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ r(
         oe,
         {
           className: "w-auto p-0",
@@ -115,7 +115,7 @@ const ae = c.forwardRef(
           onOpenAutoFocus: (e) => {
             k.current || e.preventDefault(), k.current = !1;
           },
-          children: /* @__PURE__ */ o(
+          children: /* @__PURE__ */ r(
             ce,
             {
               mode: "single",
@@ -126,12 +126,12 @@ const ae = c.forwardRef(
               disabled: { before: L, after: K },
               startMonth: z,
               endMonth: B,
-              showFooter: u,
+              showFooter: d,
               onApply: U,
               onCancel: V,
               onClear: A,
               captionLayout: "dropdown",
-              ...N !== void 0 ? { weekStartsOn: N } : {}
+              ...R !== void 0 ? { weekStartsOn: R } : {}
             }
           )
         }