impact-nova 2.0.7 → 2.0.8

package/dist/components/ui/ag-grid-react/headers/header-search-input.d.ts

@@ -26,8 +26,8 @@ export interface HeaderSearchInputProps {
  * HeaderSearchInput - A single instance input for column filtering.
  *
  * Grid filter model is the source of truth. While an input is focused, a local
- * draft overlays committed values so typing is not interrupted. External filter
- * changes re-render via AgGridWrapper `onFilterChanged` → `refreshHeader()`.
+ * draft overlays committed values so typing is not interrupted. Committed values
+ * stay in sync via a local filterChanged subscription while inline search is open.
  */
 export declare const HeaderSearchInput: ({ column, api, onClose, handleInlineSearch, handleClearSearchInline, onAdvanceSearchClick, toggleAdvanceSearch, advanceSearchEnabled, selectOptions, isMultiSelect, onSelectScrollToBottom, onSelectSearchChange, onSelectOpen, isLoadingSelect, enableSpaceSplitting, enableBooleanParsing, enableDateParsing, }: HeaderSearchInputProps) => import("react/jsx-runtime").JSX.Element;
 export default HeaderSearchInput;

package/dist/components/ui/ag-grid-react/headers/header-search-input.js

@@ -1,67 +1,73 @@
 import { jsxs as y, jsx as r } from "react/jsx-runtime";
-import { useRef as Xe, useState as ee, useCallback as te } from "react";
-import { Filter as Ze, Cross as q } from "impact-nova-icons";
-import { cn as $e } from "../../../../lib/utils.js";
-import { DatePicker as Se } from "../../date-picker/date-picker.js";
-import { MonthPicker as Ae } from "../../date-picker/month-picker.js";
-import { WeekPicker as He } from "../../date-picker/week-picker.js";
-import { Input as Y } from "../../input.js";
-import ze from "../../select/select.js";
-import { Popover as et, PopoverTrigger as tt, PopoverContent as rt, PopoverHeader as nt, PopoverTitle as lt, PopoverBody as at } from "../../popover.js";
-import { useGridHeader as ot } from "./context/grid-header-context.js";
-import { getMultiFilterIndices as B, parseInputPattern as Be, mapOperatorToAgGrid as Ie } from "./utils/filter-utils.js";
-import { DEFAULT_DATE_DISPLAY_FORMAT as st, serializeWeek as it, serializeMonth as ct, serializeDate as dt, displayDateToIso as re } from "./utils/date-utils.js";
-import { deriveHeaderSearchCommittedState as ut } from "./derive-header-search-state.js";
-import { useImpactNovaI18n as ft } from "../../../../i18n/ImpactNovaI18nContext.js";
-const kt = ({
+import { useRef as Le, useCallback as X, useState as _e } from "react";
+import { Filter as Ue, Cross as j } from "impact-nova-icons";
+import { cn as Je } from "../../../../lib/utils.js";
+import { DatePicker as Te } from "../../date-picker/date-picker.js";
+import { MonthPicker as De } from "../../date-picker/month-picker.js";
+import { WeekPicker as Ne } from "../../date-picker/week-picker.js";
+import { Input as q } from "../../input.js";
+import Pe from "../../select/select.js";
+import { Popover as Ke, PopoverTrigger as Qe, PopoverContent as Xe, PopoverHeader as Ze, PopoverTitle as $e, PopoverBody as et } from "../../popover.js";
+import { useGridHeader as tt } from "./context/grid-header-context.js";
+import { getMultiFilterIndices as z, parseInputPattern as we, mapOperatorToAgGrid as ke } from "./utils/filter-utils.js";
+import { DEFAULT_DATE_DISPLAY_FORMAT as rt, serializeWeek as lt, serializeMonth as nt, serializeDate as at, displayDateToIso as Z } from "./utils/date-utils.js";
+import { useHeaderSearchEditingState as ot } from "./use-header-search-editing-state.js";
+import { useImpactNovaI18n as st } from "../../../../i18n/ImpactNovaI18nContext.js";
+const Tt = ({
   column: w,
   api: x,
-  onClose: ne,
-  handleInlineSearch: le,
-  handleClearSearchInline: ae,
-  onAdvanceSearchClick: oe,
-  toggleAdvanceSearch: se,
-  advanceSearchEnabled: We = !1,
-  selectOptions: G,
+  onClose: $,
+  handleInlineSearch: ee,
+  handleClearSearchInline: te,
+  onAdvanceSearchClick: re,
+  toggleAdvanceSearch: le,
+  advanceSearchEnabled: Se = !1,
+  selectOptions: Y,
   isMultiSelect: C,
-  onSelectScrollToBottom: Oe,
-  onSelectSearchChange: Re,
-  onSelectOpen: ie,
-  isLoadingSelect: ce,
-  enableSpaceSplitting: je = !1,
-  enableBooleanParsing: Ee = !1,
-  enableDateParsing: qe = !1
+  onSelectScrollToBottom: Ae,
+  onSelectSearchChange: He,
+  onSelectOpen: ne,
+  isLoadingSelect: ae,
+  enableSpaceSplitting: ze = !1,
+  enableBooleanParsing: Be = !1,
+  enableDateParsing: Ie = !1
 }) => {
-  const { t: i } = ft(), l = w.getColDef(), d = w.getColId(), V = l?.filter || "agTextColumnFilter", M = V === "agDateColumnFilter", L = V === "agSetColumnFilter" || G && G.length > 0 || l?.cellDataType === "boolean", _ = l?.headerComponentParams?.datePickerVariant || "date", I = M && _ === "month", W = M && _ === "week", c = l?.headerComponentParams?.fiscalConfig, b = l?.headerComponentParams?.dateDisplayFormat || st, de = ot(), U = Xe(null), ue = ut({
+  const { t: i } = st(), n = w.getColDef(), d = w.getColId(), G = n?.filter || "agTextColumnFilter", M = G === "agDateColumnFilter", V = G === "agSetColumnFilter" || Y && Y.length > 0 || n?.cellDataType === "boolean", L = n?.headerComponentParams?.datePickerVariant || "date", B = M && L === "month", I = M && L === "week", c = n?.headerComponentParams?.fiscalConfig, b = n?.headerComponentParams?.dateDisplayFormat || rt, oe = tt(), _ = Le(null), {
+    searchText: U,
+    dateDisplayString: O,
+    selectedDate: se,
+    selectedMonth: ie,
+    selectedWeek: ce,
+    updateDraft: k,
+    handleFocus: p,
+    handleBlur: h,
+    clearEditingOverlay: Oe
+  } = ot({
     api: x,
     colId: d,
-    colDef: l,
+    colDef: n,
     isDateFilter: M,
-    isMonthVariant: I,
-    isWeekVariant: W,
-    datePickerVariant: _,
+    isMonthVariant: B,
+    isWeekVariant: I,
+    datePickerVariant: L,
     dateDisplayFormat: b
-  }), [J, K] = ee(null), [Ye, fe] = ee(!1), k = (e) => Ye && J && J[e] !== void 0 ? J[e] : ue[e], Q = k("searchText"), O = k("dateDisplayString"), pe = k("selectedDate"), he = k("selectedMonth"), me = k("selectedWeek"), S = (e) => {
-    K((t) => ({ ...ue, ...t, ...e }));
-  }, p = () => fe(!0), h = () => {
-    fe(!1), K(null);
-  }, D = (e, t) => {
-    const a = (n) => n.replace(/[^0-9.\-+eE]/g, ""), s = (n, H) => {
-      const P = Be(
-        n,
-        je,
-        Ee,
-        qe
+  }), D = (e, t) => {
+    const a = (l) => l.replace(/[^0-9.\-+eE]/g, ""), s = (l, A) => {
+      const P = we(
+        l,
+        ze,
+        Be,
+        Ie
       );
       if (console.log("[HeaderSearchInput] Pattern Debug:", {
-        input: n,
-        filterType: H,
+        input: l,
+        filterType: A,
         parsed: P
       }), P.conditions.length === 0) return null;
-      const we = (u) => {
-        let F = Ie(u.operator);
-        if (H === "number") {
-          const ke = parseFloat(a(u.value));
+      const Ce = (u) => {
+        let F = ke(u.operator);
+        if (A === "number") {
+          const Me = parseFloat(a(u.value));
           return ["contains", "notContains", "startsWith", "endsWith"].includes(
             F
           ) && (F = F === "notContains" ? "notEqual" : "equals"), u.operator === "inRange" ? {
@@ -69,7 +75,7 @@ const kt = ({
             filter: parseFloat(a(u.value)) || 0,
             filterTo: parseFloat(a(u.valueTo || "")) || 0,
             filterType: "number"
-          } : isNaN(ke) ? null : { type: F, filter: ke, filterType: "number" };
+          } : isNaN(Me) ? null : { type: F, filter: Me, filterType: "number" };
         }
         return {
           type: F,
@@ -78,18 +84,18 @@ const kt = ({
           filterType: "text"
         };
       };
-      let z = null;
+      let H = null;
       if (P.conditions.length === 1)
-        z = we(P.conditions[0]);
+        H = Ce(P.conditions[0]);
       else {
-        const u = P.conditions.map(we).filter((F) => F !== null);
-        u.length === 0 ? z = null : u.length === 1 ? z = u[0] : z = {
-          filterType: H,
+        const u = P.conditions.map(Ce).filter((F) => F !== null);
+        u.length === 0 ? H = null : u.length === 1 ? H = u[0] : H = {
+          filterType: A,
           operator: P.logic,
           conditions: u
         };
       }
-      return z;
+      return H;
     };
     let o = null;
     if (!(e === null || e === "" || Array.isArray(e) && e.length === 0))
@@ -99,65 +105,65 @@ const kt = ({
           filterType: "set"
         };
       else if (t === "date")
-        if (W && e && typeof e == "object" && "startDate" in e && "endDate" in e) {
-          const n = it(e);
+        if (I && e && typeof e == "object" && "startDate" in e && "endDate" in e) {
+          const l = lt(e);
           o = {
             type: "inRange",
-            dateFrom: n.dateFrom,
-            dateTo: n.dateTo,
+            dateFrom: l.dateFrom,
+            dateTo: l.dateTo,
             filterType: "date"
           };
-        } else if (I && e && typeof e == "object" && "month" in e && "year" in e) {
-          const n = ct(e);
+        } else if (B && e && typeof e == "object" && "month" in e && "year" in e) {
+          const l = nt(e);
           o = {
             type: "inRange",
-            dateFrom: n.dateFrom,
-            dateTo: n.dateTo,
+            dateFrom: l.dateFrom,
+            dateTo: l.dateTo,
             filterType: "date"
           };
         } else {
-          const n = e instanceof Date ? dt(e) : null;
-          o = n ? { type: "equals", dateFrom: n, filterType: "date" } : null;
+          const l = e instanceof Date ? at(e) : null;
+          o = l ? { type: "equals", dateFrom: l, filterType: "date" } : null;
         }
       else {
-        const n = l.filter === "agMultiColumnFilter" ? B(l) : null, H = n ? n.text !== -1 ? "text" : "number" : V === "agNumberColumnFilter" ? "number" : "text";
-        o = s(String(e), H);
+        const l = n.filter === "agMultiColumnFilter" ? z(n) : null, A = l ? l.text !== -1 ? "text" : "number" : G === "agNumberColumnFilter" ? "number" : "text";
+        o = s(String(e), A);
       }
-    const f = l.filter === "agMultiColumnFilter" ? B(l) : null, T = f ? t === "text" ? f.text !== -1 ? f.text : f.number : t === "set" ? f.set : f.date : 0;
-    Z(o, T);
-  }, X = (e) => {
-    if (le) {
-      le(Array.isArray(e) ? e.join(",") : e);
+    const f = n.filter === "agMultiColumnFilter" ? z(n) : null, T = f ? t === "text" ? f.text !== -1 ? f.text : f.number : t === "set" ? f.set : f.date : 0;
+    K(o, T);
+  }, J = (e) => {
+    if (ee) {
+      ee(Array.isArray(e) ? e.join(",") : e);
       return;
     }
     D(e, M ? "date" : "text");
-  }, ge = (e) => {
+  }, de = (e) => {
     const t = e.target.value;
-    S({ searchText: t }), X(t);
-  }, ve = (e) => {
-    S({ selectedDate: e }), X(e);
-  }, ye = (e) => {
-    S({ selectedMonth: e }), D(e || null, "date");
-  }, xe = (e) => {
-    S({ selectedWeek: e }), D(e || null, "date");
-  }, Ge = (e) => {
+    k({ searchText: t }), J(t);
+  }, ue = (e) => {
+    k({ selectedDate: e }), J(e);
+  }, fe = (e) => {
+    k({ selectedMonth: e }), D(e || null, "date");
+  }, pe = (e) => {
+    k({ selectedWeek: e }), D(e || null, "date");
+  }, We = (e) => {
     if (!e.trim()) return null;
-    const t = Be(e, !1, !1, !1);
+    const t = we(e, !1, !1, !1);
     if (t.conditions.length === 0) return null;
     const a = (o) => {
-      let v = Ie(o.operator);
+      let v = ke(o.operator);
       if (["contains", "notContains", "startsWith", "endsWith"].includes(
         v
       ) && (v = v === "notContains" ? "notEqual" : "equals"), o.operator === "inRange") {
-        let T = re(o.value, b), n = re(o.valueTo || "", b);
-        return !T || !n ? null : (T > n && ([T, n] = [n, T]), {
+        let T = Z(o.value, b), l = Z(o.valueTo || "", b);
+        return !T || !l ? null : (T > l && ([T, l] = [l, T]), {
           type: "inRange",
           dateFrom: T,
-          dateTo: n,
+          dateTo: l,
           filterType: "date"
         });
       }
-      const f = re(o.value, b);
+      const f = Z(o.value, b);
       return f ? {
         type: v,
         dateFrom: f,
@@ -172,12 +178,12 @@ const kt = ({
       operator: t.logic,
       conditions: s
     };
-  }, Z = te(
+  }, K = X(
     (e, t) => {
       const a = x.getFilterModel(), s = { ...a };
-      if (l.filter === "agMultiColumnFilter") {
+      if (n.filter === "agMultiColumnFilter") {
         if (t === -1) return;
-        const o = a[d], v = o && o.filterType === "multi" ? [...o.filterModels || []] : Array(l.filterParams?.filters?.length || 1).fill(null);
+        const o = a[d], v = o && o.filterType === "multi" ? [...o.filterModels || []] : Array(n.filterParams?.filters?.length || 1).fill(null);
         v[t] = e, v.every((f) => f === null) ? delete s[d] : s[d] = {
           filterType: "multi",
           filterModels: v
@@ -186,33 +192,33 @@ const kt = ({
         e ? s[d] = e : delete s[d];
       x.setFilterModel(s), x.onFilterChanged();
     },
-    [x, d, l]
-  ), be = te(
+    [x, d, n]
+  ), he = X(
     (e) => {
-      const t = l.filter === "agMultiColumnFilter" ? B(l).date : 0;
-      Z(e, t);
+      const t = n.filter === "agMultiColumnFilter" ? z(n).date : 0;
+      K(e, t);
     },
-    [l, Z]
-  ), Fe = (e) => {
+    [n, K]
+  ), me = (e) => {
     const t = e.target.value.replace(/[^0-9/\-!=><+,~]/g, "");
-    if (S({ dateDisplayString: t }), !t.trim()) {
-      be(null);
+    if (k({ dateDisplayString: t }), !t.trim()) {
+      he(null);
       return;
     }
-    const a = Ge(t);
-    a && be(a);
-  }, $ = () => {
-    K(null), X(""), ae && ae();
-  }, R = (e) => {
+    const a = We(t);
+    a && he(a);
+  }, Q = () => {
+    Oe(), J(""), te && te();
+  }, W = (e) => {
     D(e, "set");
-  }, j = G || (l?.cellDataType === "boolean" ? [
+  }, E = Y || (n?.cellDataType === "boolean" ? [
     { label: i("gridHeader.true"), value: "true" },
     { label: i("gridHeader.false"), value: "false" }
-  ] : []), Ce = te(() => {
+  ] : []), ge = X(() => {
     const e = x.getFilterModel()[d];
     if (!e) return [];
     if ("filterType" in e && e.filterType === "multi" && e.filterModels) {
-      const a = B(w.getColDef()).set;
+      const a = z(w.getColDef()).set;
       if (a !== -1) {
         const s = e.filterModels[a];
         if (s?.filterType === "set" && s.values)
@@ -225,30 +231,30 @@ const kt = ({
         return [String(e.filter)];
     }
     return [];
-  }, [x, d, w]), [E, A] = ee(null), Me = () => {
-    const e = E !== null ? E : Ce();
-    return C ? j.filter((t) => e.includes(t.value)) : j.find((t) => e.includes(t.value)) || null;
-  }, Te = (e) => {
+  }, [x, d, w]), [R, S] = _e(null), ve = () => {
+    const e = R !== null ? R : ge();
+    return C ? E.filter((t) => e.includes(t.value)) : E.find((t) => e.includes(t.value)) || null;
+  }, ye = (e) => {
     let t = [];
     if (Array.isArray(e) ? t = e.map((a) => a.value) : e && typeof e == "object" && "value" in e && (t = [e.value]), !C) {
-      R(t), e && ne();
+      W(t), e && $();
       return;
     }
-    A(t);
-  }, Ve = () => {
-    R([]), A([]);
-  }, Le = (e) => {
+    S(t);
+  }, Ee = () => {
+    W([]), S([]);
+  }, Re = (e) => {
     if (C) {
       if (e !== void 0) {
         let t = [];
-        Array.isArray(e) ? t = e.map((a) => a.value) : e && typeof e == "object" && "value" in e ? t = [e.value] : e === null && (t = []), R(t), A(null);
+        Array.isArray(e) ? t = e.map((a) => a.value) : e && typeof e == "object" && "value" in e ? t = [e.value] : e === null && (t = []), W(t), S(null);
         return;
       }
-      E !== null && (R(E), A(null));
+      R !== null && (W(R), S(null));
     }
-  }, _e = () => {
-    A(Ce()), ie && ie();
-  }, Ue = () => We ? /* @__PURE__ */ r(
+  }, je = () => {
+    S(ge()), ne && ne();
+  }, qe = () => Se ? /* @__PURE__ */ r(
     "svg",
     {
       className: "cursor-pointer text-navigation-muted hover:text-brand-variant-hover shrink-0",
@@ -259,52 +265,52 @@ const kt = ({
       width: "18",
       height: "18",
       onClick: (e) => {
-        e.stopPropagation(), U.current && U.current.blur(), oe ? oe(w) : se ? se(d) : de && de.openAdvancedFilter(d);
+        e.stopPropagation(), _.current && _.current.blur(), re ? re(w) : le ? le(d) : oe && oe.openAdvancedFilter(d);
       },
       children: /* @__PURE__ */ r("path", { d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" })
     }
-  ) : null, Je = () => /* @__PURE__ */ r(
+  ) : null, Ye = () => /* @__PURE__ */ r(
     "button",
     {
-      onClick: ne,
+      onClick: $,
       className: "cursor-pointer shrink-0 text-brand hover:text-brand-strong",
-      children: /* @__PURE__ */ r(q, { size: "xs" })
+      children: /* @__PURE__ */ r(j, { size: "xs" })
     }
-  ), N = l.filter === "agMultiColumnFilter", m = B(l);
+  ), N = n.filter === "agMultiColumnFilter", m = z(n);
   let g = "text";
-  N ? g = m.set !== -1 ? "set" : m.date !== -1 ? "date" : "text" : L ? g = "set" : M && (g = "date");
-  const Ke = N ? m.text !== -1 || m.number !== -1 : !M && !L, De = N ? m.set !== -1 : L, Ne = N ? m.date !== -1 : M, Qe = x.getFilterModel()[d], Pe = N && Qe?.filterModels?.some((e, t) => {
+  N ? g = m.set !== -1 ? "set" : m.date !== -1 ? "date" : "text" : V ? g = "set" : M && (g = "date");
+  const Ge = N ? m.text !== -1 || m.number !== -1 : !M && !V, xe = N ? m.set !== -1 : V, be = N ? m.date !== -1 : M, Ve = x.getFilterModel()[d], Fe = N && Ve?.filterModels?.some((e, t) => {
     const a = t === m.text || t === m.number ? "text" : t === m.set ? "set" : "date";
     return e !== null && a !== g;
   });
   return /* @__PURE__ */ y("div", { className: "ag-header-cell-label flex items-center gap-1 w-full bg-brand-tint px-1 py-2 ag-header-cell-search-active h-full", children: [
-    g === "set" && De ? /* @__PURE__ */ r(
-      ze,
+    g === "set" && xe ? /* @__PURE__ */ r(
+      Pe,
       {
-        options: j,
-        value: Me(),
-        onChange: Te,
-        isMulti: C !== void 0 ? C : l?.cellDataType !== "boolean",
+        options: E,
+        value: ve(),
+        onChange: ye,
+        isMulti: C !== void 0 ? C : n?.cellDataType !== "boolean",
         placeholder: i("filter.select"),
         className: "w-full bg-canvas-elevated",
         parentClassName: "flex-1 min-w-0",
         menuWidth: "200px",
         menuPortalTarget: document.body,
         autoFocus: !0,
-        onMenuOpen: _e,
-        onMenuClose: Le,
-        onMenuScrollToBottom: Oe,
-        onInputChange: Re,
-        onClearAll: Ve,
-        isLoading: ce,
+        onMenuOpen: je,
+        onMenuClose: Re,
+        onMenuScrollToBottom: Ae,
+        onInputChange: He,
+        onClearAll: Ee,
+        isLoading: ae,
         onFocus: p,
         onBlur: h
       }
-    ) : g === "date" && Ne ? O ? /* @__PURE__ */ r(
-      Y,
+    ) : g === "date" && be ? O ? /* @__PURE__ */ r(
+      q,
       {
         value: O,
-        onChange: Fe,
+        onChange: me,
         placeholder: i("filter.search"),
         className: "w-full bg-canvas-elevated",
         autoFocus: !0,
@@ -314,18 +320,18 @@ const kt = ({
           "button",
           {
             onClick: (e) => {
-              e.stopPropagation(), $();
+              e.stopPropagation(), Q();
             },
             className: "cursor-pointer text-navigation-muted hover:text-brand-variant-hover",
-            children: /* @__PURE__ */ r(q, { size: "xs" })
+            children: /* @__PURE__ */ r(j, { size: "xs" })
           }
         )
       }
-    ) : W ? /* @__PURE__ */ r(
-      He,
+    ) : I ? /* @__PURE__ */ r(
+      Ne,
       {
-        value: me || void 0,
-        onChange: (e) => xe(e || null),
+        value: ce || void 0,
+        onChange: (e) => pe(e || null),
         placeholder: i("datePicker.selectWeek"),
         format: b,
         minDate: /* @__PURE__ */ new Date("2000-01-01"),
@@ -339,11 +345,11 @@ const kt = ({
         fiscalYearStartMonth: c?.fiscalYearStartMonth,
         weekStartsOn: c?.weekStartsOn
       }
-    ) : I ? /* @__PURE__ */ r(
-      Ae,
+    ) : B ? /* @__PURE__ */ r(
+      De,
       {
-        value: he || void 0,
-        onChange: (e) => ye(e || null),
+        value: ie || void 0,
+        onChange: (e) => fe(e || null),
         placeholder: i("datePicker.selectMonth"),
         minDate: /* @__PURE__ */ new Date("2000-01-01"),
         maxDate: /* @__PURE__ */ new Date("2100-12-31"),
@@ -353,10 +359,10 @@ const kt = ({
         onBlur: h
       }
     ) : /* @__PURE__ */ r(
-      Se,
+      Te,
       {
-        value: pe || void 0,
-        onChange: (e) => ve(e || null),
+        value: se || void 0,
+        onChange: (e) => ue(e || null),
         placeholder: i("filter.selectDate"),
         format: b,
         minDate: /* @__PURE__ */ new Date("2000-01-01"),
@@ -367,31 +373,31 @@ const kt = ({
         onBlur: h
       }
     ) : /* @__PURE__ */ r(
-      Y,
+      q,
       {
-        value: Q,
-        onChange: ge,
+        value: U,
+        onChange: de,
         placeholder: i("filter.search"),
         type: "text",
         autoFocus: !0,
-        ref: U,
+        ref: _,
         onFocus: p,
         onBlur: h,
-        suffix: Q && /* @__PURE__ */ r(
+        suffix: U && /* @__PURE__ */ r(
           "button",
           {
             onClick: (e) => {
-              e.stopPropagation(), $();
+              e.stopPropagation(), Q();
             },
             className: "cursor-pointer text-navigation-muted hover:text-brand-variant-hover",
-            children: /* @__PURE__ */ r(q, { size: "xs" })
+            children: /* @__PURE__ */ r(j, { size: "xs" })
           }
         )
       }
     ),
     /* @__PURE__ */ y("div", { className: "flex items-center gap-1.5 shrink-0", children: [
-      N && /* @__PURE__ */ y(et, { children: [
-        /* @__PURE__ */ r(tt, { asChild: !0, children: /* @__PURE__ */ y(
+      N && /* @__PURE__ */ y(Ke, { children: [
+        /* @__PURE__ */ r(Qe, { asChild: !0, children: /* @__PURE__ */ y(
           "button",
           {
             type: "button",
@@ -399,29 +405,29 @@ const kt = ({
             className: "relative group p-1 hover:bg-brand-tint rounded-md transition-colors cursor-pointer bg-transparent border-none",
             children: [
               /* @__PURE__ */ r(
-                Ze,
+                Ue,
                 {
                   size: "md",
-                  className: $e(
+                  className: Je(
                     "text-content-tertiary group-hover:text-brand-variant-hover",
-                    Pe && "text-brand-variant-hover"
+                    Fe && "text-brand-variant-hover"
                   )
                 }
               ),
-              Pe && /* @__PURE__ */ r("span", { className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-brand border border-white shadow-sm" })
+              Fe && /* @__PURE__ */ r("span", { className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-brand border border-white shadow-sm" })
             ]
           }
         ) }),
-        /* @__PURE__ */ y(rt, { align: "end", className: "w-[300px]", children: [
-          /* @__PURE__ */ r(nt, { children: /* @__PURE__ */ r(lt, { children: i("gridHeader.activeFilters") }) }),
-          /* @__PURE__ */ y(at, { className: "flex flex-col gap-4", children: [
-            g !== "text" && Ke && /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ y(Xe, { align: "end", className: "w-[300px]", children: [
+          /* @__PURE__ */ r(Ze, { children: /* @__PURE__ */ r($e, { children: i("gridHeader.activeFilters") }) }),
+          /* @__PURE__ */ y(et, { className: "flex flex-col gap-4", children: [
+            g !== "text" && Ge && /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
               /* @__PURE__ */ r("span", { className: "text-xs font-semibold text-content-tertiary", children: i("gridHeader.textSearch") }),
               /* @__PURE__ */ r(
-                Y,
+                q,
                 {
-                  value: Q,
-                  onChange: ge,
+                  value: U,
+                  onChange: de,
                   placeholder: i("filter.searchPlaceholder"),
                   className: "bg-canvas-elevated",
                   onFocus: p,
@@ -429,30 +435,30 @@ const kt = ({
                 }
               )
             ] }),
-            g !== "set" && De && /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
+            g !== "set" && xe && /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
               /* @__PURE__ */ r("span", { className: "text-xs font-semibold text-content-tertiary", children: i("gridHeader.selectionFilter") }),
               /* @__PURE__ */ r(
-                ze,
+                Pe,
                 {
-                  options: j,
-                  value: Me(),
-                  onChange: Te,
-                  isMulti: C !== void 0 ? C : l?.cellDataType !== "boolean",
+                  options: E,
+                  value: ve(),
+                  onChange: ye,
+                  isMulti: C !== void 0 ? C : n?.cellDataType !== "boolean",
                   placeholder: i("filter.select"),
                   className: "w-full bg-canvas-elevated",
-                  isLoading: ce,
+                  isLoading: ae,
                   onFocus: p,
                   onBlur: h
                 }
               )
             ] }),
-            g !== "date" && Ne && /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
+            g !== "date" && be && /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
               /* @__PURE__ */ r("span", { className: "text-xs font-semibold text-content-tertiary", children: i("gridHeader.dateFilter") }),
               O ? /* @__PURE__ */ r(
-                Y,
+                q,
                 {
                   value: O,
-                  onChange: Fe,
+                  onChange: me,
                   className: "w-full bg-canvas-elevated",
                   onFocus: p,
                   onBlur: h,
@@ -460,18 +466,18 @@ const kt = ({
                     "button",
                     {
                       onClick: (e) => {
-                        e.stopPropagation(), $();
+                        e.stopPropagation(), Q();
                       },
                       className: "cursor-pointer text-navigation-muted hover:text-brand-variant-hover",
-                      children: /* @__PURE__ */ r(q, { size: "xs" })
+                      children: /* @__PURE__ */ r(j, { size: "xs" })
                     }
                   )
                 }
-              ) : W ? /* @__PURE__ */ r(
-                He,
+              ) : I ? /* @__PURE__ */ r(
+                Ne,
                 {
-                  value: me || void 0,
-                  onChange: (e) => xe(e || null),
+                  value: ce || void 0,
+                  onChange: (e) => pe(e || null),
                   format: b,
                   className: "w-full bg-canvas-elevated",
                   showFooter: !1,
@@ -482,21 +488,21 @@ const kt = ({
                   fiscalYearStartMonth: c?.fiscalYearStartMonth,
                   weekStartsOn: c?.weekStartsOn
                 }
-              ) : I ? /* @__PURE__ */ r(
-                Ae,
+              ) : B ? /* @__PURE__ */ r(
+                De,
                 {
-                  value: he || void 0,
-                  onChange: (e) => ye(e || null),
+                  value: ie || void 0,
+                  onChange: (e) => fe(e || null),
                   className: "w-full bg-canvas-elevated",
                   showFooter: !1,
                   onFocus: p,
                   onBlur: h
                 }
               ) : /* @__PURE__ */ r(
-                Se,
+                Te,
                 {
-                  value: pe || void 0,
-                  onChange: (e) => ve(e || null),
+                  value: se || void 0,
+                  onChange: (e) => ue(e || null),
                   format: b,
                   className: "w-full bg-canvas-elevated",
                   weekStartsOn: c?.weekStartsOn,
@@ -508,11 +514,11 @@ const kt = ({
           ] })
         ] })
       ] }),
-      Ue(),
-      Je()
+      qe(),
+      Ye()
     ] })
   ] });
 };
 export {
-  kt as HeaderSearchInput
+  Tt as HeaderSearchInput
 };

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/select/select.js

@@ -1,5 +1,5 @@
 import { jsxs as g, jsx as a, Fragment as vt } from "react/jsx-runtime";
-import yt, { useState as W, useRef as M, useEffect as C } from "react";
+import yt, { useState as W, useRef as M, useEffect as A } from "react";
 import * as re from "@radix-ui/react-popover";
 import { useVirtualizer as wt } from "@tanstack/react-virtual";
 import St from "./components/LabelWithSequence.js";
@@ -70,10 +70,10 @@ const zt = (Ne) => {
     onClearAll: Ee,
     onFocus: ot,
     onBlur: ct
-  } = Ne, { t: Y } = Mt(), me = je ?? Y("select.placeholder"), [d, Me] = W(Ue), [q, Z] = W(""), [ze, Le] = W(void 0), pe = M(0), [f, v] = W(_e || (p ? [] : null)), [ut, he] = W(null), J = -2, [O, A] = W(-1), xe = M(!1), ge = M(null), be = M(null), dt = M(null), ee = M(null), j = M(null);
-  C(() => {
+  } = Ne, { t: Y } = Mt(), me = je ?? Y("select.placeholder"), [d, Me] = W(Ue), [q, Z] = W(""), [ze, Le] = W(void 0), pe = M(0), [f, v] = W(_e || (p ? [] : null)), [ut, he] = W(null), J = -2, [O, I] = W(-1), xe = M(!1), ge = M(null), be = M(null), dt = M(null), ee = M(null), j = M(null);
+  A(() => {
     oe !== void 0 && v(oe);
-  }, [oe]), C(() => {
+  }, [oe]), A(() => {
     if (!(d && $ && G === "menu")) return;
     let e = !1;
     const t = () => {
@@ -85,7 +85,7 @@ const zt = (Ne) => {
       e = !0, clearTimeout(n);
     };
   }, [d, $, G]);
-  const { flatOptions: m, isProcessing: I, totalOptionsCount: $e, workerSelectAll: ft } = It(L, q, {
+  const { flatOptions: m, isProcessing: C, totalOptionsCount: $e, workerSelectAll: ft } = It(L, q, {
     ignoreCase: tt,
     ignoreAccents: nt,
     matchFrom: lt,
@@ -107,21 +107,18 @@ const zt = (Ne) => {
     estimateSize: () => 34,
     overscan: 5
   });
-  C(() => {
+  A(() => {
     if (!d)
-      A(-1);
+      I(-1);
     else if (xe.current)
       if (xe.current = !1, $ && G === "menu" && !h)
-        A(-1);
+        I(-1);
       else {
-        const e = !T && !I && !_ && p && Q && !h && m.length > 0;
-        A(e ? J : 0);
+        const e = !T && !C && !_ && p && Q && !h && m.length > 0;
+        I(e ? J : 0);
       }
-  }, [d]), C(() => {
-    if (!d) {
-      pe.current = 0, Le(void 0);
-      return;
-    }
+  }, [d]), A(() => {
+    if (pe.current = 0, Le(void 0), !d) return;
     let e = null, t = null;
     const n = () => {
       const l = be.current;
@@ -139,16 +136,16 @@ const zt = (Ne) => {
     return () => {
       cancelAnimationFrame(s), t && clearTimeout(t), e?.disconnect();
     };
-  }, [d]), C(() => {
-    O !== -1 && A(0);
-  }, [q]), C(() => {
+  }, [d, T, C]), A(() => {
+    O !== -1 && I(0);
+  }, [q]), A(() => {
     if (!d) return;
     const e = requestAnimationFrame(() => {
       k.measure();
     });
     return () => cancelAnimationFrame(e);
-  }, [d, k]), C(() => {
-    if (d && ke && !I && m.length > 0) {
+  }, [d, k]), A(() => {
+    if (d && ke && !C && m.length > 0) {
       const e = m.findIndex((t) => p ? V.mode === "exclude" ? !V.set.has(t.value) : V.set.has(t.value) : f?.value === t.value);
       if (e !== -1) {
         const t = setTimeout(() => {
@@ -157,15 +154,15 @@ const zt = (Ne) => {
         return () => clearTimeout(t);
       }
     }
-  }, [d, ke, I, m.length, p, V.mode, V.set, f, k]);
+  }, [d, ke, C, m.length, p, V.mode, V.set, f, k]);
   const K = M(null), Fe = k.getVirtualItems(), ye = Fe[Fe.length - 1], te = yt.useCallback(() => {
-    T || I || K.current || F && (F(), K.current = setTimeout(() => {
+    T || C || K.current || F && (F(), K.current = setTimeout(() => {
       K.current = null;
     }, 500));
-  }, [T, I, F]);
-  C(() => () => {
+  }, [T, C, F]);
+  A(() => () => {
     K.current && (clearTimeout(K.current), K.current = null);
-  }, []), C(() => {
+  }, []), A(() => {
     if (!d || !ee.current || !F) return;
     const e = () => {
       const { scrollTop: n, scrollHeight: s, clientHeight: l } = t;
@@ -178,7 +175,7 @@ const zt = (Ne) => {
     F,
     d,
     te
-  ]), C(() => {
+  ]), A(() => {
     if (!d || !F || !ye) return;
     const e = m.length - 1;
     e < 0 || ye.index < e - 1 || te();
@@ -198,7 +195,7 @@ const zt = (Ne) => {
         Ae?.(t, n), Z(""), he(null);
       }
   };
-  C(() => {
+  A(() => {
     if (!d) return;
     const e = (t) => {
       const n = t.target;
@@ -458,7 +455,7 @@ const zt = (Ne) => {
     f
   ), le = (e) => Oe ? Oe(e) : e.label, Ge = () => {
     const e = [];
-    return !T && !I && !_ && p && Q && !h && m.length > 0 && e.push(J), m.forEach((n, s) => {
+    return !T && !C && !_ && p && Q && !h && m.length > 0 && e.push(J), m.forEach((n, s) => {
       !n.isGroup && !(w && n.isSubmenuParent) && !n.isDisabled && e.push(s);
     }), e;
   }, ht = (e) => {
@@ -481,11 +478,11 @@ const zt = (Ne) => {
     if (e.key === "ArrowDown") {
       e.preventDefault();
       const s = n < t.length - 1 ? n + 1 : 0, l = t[s];
-      A(l), l >= 0 && k.scrollToIndex(l, { align: "auto" });
+      I(l), l >= 0 && k.scrollToIndex(l, { align: "auto" });
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       const s = n > 0 ? n - 1 : t.length - 1, l = t[s];
-      A(l), l >= 0 && k.scrollToIndex(l, { align: "auto" });
+      I(l), l >= 0 && k.scrollToIndex(l, { align: "auto" });
     } else if (e.key === "Enter" || e.key === " ") {
       if (e.preventDefault(), O === J)
         we();
@@ -496,10 +493,10 @@ const zt = (Ne) => {
     } else if (e.key === "Escape")
       e.preventDefault(), E(!1), ge.current?.focus();
     else if (e.key === "Home")
-      e.preventDefault(), t.length > 0 && (A(t[0]), t[0] >= 0 && k.scrollToIndex(t[0], { align: "auto" }));
+      e.preventDefault(), t.length > 0 && (I(t[0]), t[0] >= 0 && k.scrollToIndex(t[0], { align: "auto" }));
     else if (e.key === "End" && (e.preventDefault(), t.length > 0)) {
       const s = t[t.length - 1];
-      A(s), s >= 0 && k.scrollToIndex(s, { align: "auto" });
+      I(s), s >= 0 && k.scrollToIndex(s, { align: "auto" });
     }
   }, xt = (e) => {
     const t = Ge();
@@ -508,11 +505,11 @@ const zt = (Ne) => {
     if (e.key === "ArrowDown") {
       e.preventDefault();
       const s = n < t.length - 1 ? n + 1 : 0, l = t[s];
-      A(l), l >= 0 && k.scrollToIndex(l, { align: "auto" });
+      I(l), l >= 0 && k.scrollToIndex(l, { align: "auto" });
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       const s = n > 0 ? n - 1 : t.length - 1, l = t[s];
-      A(l), l >= 0 && k.scrollToIndex(l, { align: "auto" });
+      I(l), l >= 0 && k.scrollToIndex(l, { align: "auto" });
     } else if (e.key === "Enter") {
       if (e.preventDefault(), O === J)
         we();
@@ -631,7 +628,7 @@ const zt = (Ne) => {
                           ]
                         }
                       ),
-                      /* @__PURE__ */ a("div", { className: "flex items-center gap-1 text-gray-400 shrink-0", children: !d && (T || I) ? /* @__PURE__ */ a(Nt, { size: "14px" }) : /* @__PURE__ */ g(vt, { children: [
+                      /* @__PURE__ */ a("div", { className: "flex items-center gap-1 text-gray-400 shrink-0", children: !d && (T || C) ? /* @__PURE__ */ a(Nt, { size: "14px" }) : /* @__PURE__ */ g(vt, { children: [
                         qe && !h && !S && (p && (z(
                           f
                         ) && f.isAllSelected || N(f) && f.length > 0) || !p && f) && /* @__PURE__ */ a(
@@ -742,7 +739,7 @@ const zt = (Ne) => {
                                     ] })
                                   }
                                 ),
-                                !T && !I && !_ && p && Q && !h && m.length > 0 && /* @__PURE__ */ a(
+                                !T && !C && !_ && p && Q && !h && m.length > 0 && /* @__PURE__ */ a(
                                   "div",
                                   {
                                     className: "pb-1",
@@ -823,7 +820,7 @@ const zt = (Ne) => {
                                         children: "Refetch"
                                       }
                                     )
-                                  ] }) : m.length === 0 && !T && !I ? /* @__PURE__ */ a("div", { className: "flex items-center justify-center py-8 text-sm text-gray-500", children: "No options found" }) : T || I ? /* @__PURE__ */ a("div", { className: "px-1 py-1 space-y-1", children: Array.from({ length: 6 }).map((e, t) => /* @__PURE__ */ g(
+                                  ] }) : m.length === 0 && !T && !C ? /* @__PURE__ */ a("div", { className: "flex items-center justify-center py-8 text-sm text-gray-500", children: "No options found" }) : T || C ? /* @__PURE__ */ a("div", { className: "px-1 py-1 space-y-1", children: Array.from({ length: 6 }).map((e, t) => /* @__PURE__ */ g(
                                     "div",
                                     {
                                       className: "flex items-center gap-2 px-3 py-2 animate-pulse",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-nova",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Enterprise-grade React design system built with React 19, Vite, Tailwind CSS, and Radix UI. Built-in internationalization (i18n) and comprehensive UI component library for scalable, accessible, and performant applications.",
   "type": "module",
   "main": "./dist/index.js",