impact-nova 2.1.0-alpha.3 → 2.1.0-alpha.5

package/dist/components/data/ag-grid-react/ag-grid-tooltip-overflow.d.ts

@@ -0,0 +1,3 @@
+export type AgGridTooltipOverflowMode = "line-clamp" | "ellipsis";
+/** Matches AG Grid `_isElementOverflowingCallback` (horizontal or vertical). */
+export declare function isAgGridTextOverflowing(element: HTMLElement, mode?: AgGridTooltipOverflowMode): boolean;

package/dist/components/data/ag-grid-react/ag-grid-tooltip-overflow.js

@@ -0,0 +1,6 @@
+function l(i, r = "line-clamp") {
+  return r === "ellipsis" ? i.clientWidth < i.scrollWidth : i.clientHeight < i.scrollHeight || i.clientWidth < i.scrollWidth;
+}
+export {
+  l as isAgGridTextOverflowing
+};

package/dist/components/data/ag-grid-react/ag-grid.types.d.ts

@@ -107,40 +107,34 @@ export interface InfoContent {
     sections: UISection[];
 }
 /**
- * Props for the AgGridWrapper component
+ * Props for `AgGridWrapper` — low-level AG Grid Enterprise surface.
+ *
+ * Forwards [`AgGridReact`](https://www.ag-grid.com/react-data-grid/grid-options/) props except `theme`
+ * (Impact Nova theme is applied internally). Application feature code should use
+ * `DataTable` / `DataTableContent` from `impact-nova/data-table` instead.
  */
 export interface AgGridWrapperProps<TData = unknown> extends Omit<AgGridReactProps<TData>, 'theme' | 'defaultColDef' | 'defaultColGroupDef'> {
-    /**
-     * Children to render inside the grid container
-     */
+    /** Content rendered inside the grid container — rarely needed; use for overlays or custom chrome. */
     children?: ReactNode;
     /**
-     * Default column definition (will be merged with wrapper defaults)
+     * Default settings applied to every column unless overridden in `columnDefs`.
+     * Common keys: `sortable`, `filter`, `resizable`, `flex`, `minWidth`.
+     * Merged with Impact Nova wrapper defaults (custom header, theme, formatters).
      */
     defaultColDef?: ColDef<TData>;
     /**
-     * Default column group definition (will be merged with wrapper defaults)
+     * Default settings for column groups (nested header rows).
+     * Merged with wrapper defaults when using grouped column headers.
      */
     defaultColGroupDef?: ColGroupDef<TData>;
     /**
-     * When true (default), DOM order matches visual order for screen readers.
-     * Large planning grids should pass false for better column virtualization.
+     * When true (default), DOM order matches visual column order for screen readers.
+     * Set false on very large planning grids (10k+ columns) for better virtualization performance.
      */
     ensureDomOrder?: boolean;
     /**
-     * Value formatter registry - maps formatter names to formatter functions
-     * Allows backend to specify formatters by string name (e.g., "currency", "percentage")
-     *
-     * @example
-     * ```typescript
-     * valueFormatters={{
-     *   currency: (params) => `$${params.value.toFixed(2)}`,
-     *   percentage: (params) => `${params.value}%`,
-     * }}
-     *
-     * // Backend can then send:
-     * { field: 'price', valueFormatter: 'currency' }
-     * ```
+     * Map of formatter name → function. Lets backend column defs reference formatters by string key.
+     * Example: `{ currency: (p) => '$' + p.value }` then column def uses `valueFormatter: 'currency'`.
      */
     valueFormatters?: Record<string, (params: ValueFormatterParams) => string>;
 }

package/dist/components/data/ag-grid-react/cell-renderers/date-display-renderer.js

@@ -44,7 +44,7 @@ const D = (t, i) => {
           className: `flex w-full items-center justify-between rounded-[8px] px-1.5 h-7 ${a ? "bg-canvas-elevated cursor-pointer" : "bg-inherit"}`,
           children: [
             /* @__PURE__ */ n("span", { className: `truncate text-sm font-medium text-content ${f ? "text-content-empty" : ""}`, children: f ? g : u }),
-            a && /* @__PURE__ */ n("span", { className: "h-3.5 w-3.5 shrink-0 text-content-muted", children: /* @__PURE__ */ n(y, { className: "h-3.5 w-3.5" }) })
+            a && /* @__PURE__ */ n("span", { className: "h-3.5 w-3.5 shrink-0 text-content-icon", children: /* @__PURE__ */ n(y, { className: "h-3.5 w-3.5" }) })
           ]
         }
       )

package/dist/components/data/ag-grid-react/cell-renderers/default-text-cell-renderer.d.ts

@@ -1,6 +1,5 @@
 import { ICellRendererParams } from 'ag-grid-community';
 /**
- * Lightweight default cell renderer for AgGridWrapper.
- * Stable module-level reference — avoids inline function allocation in defaultColDef.
+ * Default text cell renderer — truncation + AG Grid tooltip when overflowed.
  */
 export declare const DefaultTextCellRenderer: import('react').NamedExoticComponent<ICellRendererParams<any, any, any>>;

package/dist/components/data/ag-grid-react/cell-renderers/default-text-cell-renderer.js

@@ -1,9 +1,15 @@
-import { jsx as t } from "react/jsx-runtime";
-import { memo as r } from "react";
-const a = r(function(e) {
-  const l = e.valueFormatted ?? (e.value != null ? String(e.value) : "");
-  return /* @__PURE__ */ t("span", { className: "truncate block w-full", children: l });
+import { jsx as o } from "react/jsx-runtime";
+import { memo as u, useRef as f, useEffect as i } from "react";
+import { isAgGridTextOverflowing as s } from "../ag-grid-tooltip-overflow.js";
+const x = u(function(e) {
+  const r = f(null), t = e.valueFormatted ?? (e.value != null ? String(e.value) : ""), { setTooltip: l } = e;
+  return i(() => {
+    t.trim() && l(t, () => {
+      const n = r.current;
+      return n ? s(n, "ellipsis") : !1;
+    });
+  }, [t, l]), /* @__PURE__ */ o("span", { ref: r, className: "truncate block w-full", children: t });
 });
 export {
-  a as DefaultTextCellRenderer
+  x as DefaultTextCellRenderer
 };

package/dist/components/data/ag-grid-react/cell-renderers/editors/textarea-cell-editor.js

@@ -1,12 +1,12 @@
-import { jsxs as o, jsx as x } from "react/jsx-runtime";
-import { forwardRef as g, useRef as h, useState as b, useImperativeHandle as v, useCallback as s } from "react";
-const y = g((u, d) => {
+import { jsxs as o, jsx as p } from "react/jsx-runtime";
+import { forwardRef as x, useRef as h, useState as b, useImperativeHandle as v, useCallback as s } from "react";
+const y = x((u, d) => {
   const {
     value: a,
     rows: i = 4,
-    maxLength: t,
+    maxLength: r,
     placeholder: c
-  } = u, r = h(null), [n, f] = b(a != null ? String(a) : "");
+  } = u, t = h(null), [n, f] = b(a != null ? String(a) : "");
   v(d, () => ({
     getValue() {
       return n;
@@ -21,37 +21,37 @@ const y = g((u, d) => {
       return !0;
     },
     afterGuiAttached() {
-      if (r.current) {
-        r.current.focus();
-        const e = r.current.value.length;
-        r.current.setSelectionRange(e, e);
+      if (t.current) {
+        t.current.focus();
+        const e = t.current.value.length;
+        t.current.setSelectionRange(e, e);
       }
     }
   }));
-  const m = s((e) => {
+  const g = s((e) => {
     const l = e.target.value;
-    t && l.length > t || f(l);
-  }, [t]), p = s((e) => {
+    r && l.length > r || f(l);
+  }, [r]), m = s((e) => {
     e.key !== "Escape" && e.key !== "Tab" && (e.key === "Enter" && !e.shiftKey || e.stopPropagation());
   }, []);
   return /* @__PURE__ */ o("div", { className: "p-1 bg-canvas-elevated border border-brand rounded-md shadow-lg min-w-[250px]", children: [
-    /* @__PURE__ */ x(
+    /* @__PURE__ */ p(
       "textarea",
       {
-        ref: r,
+        ref: t,
         value: n,
-        onChange: m,
-        onKeyDown: p,
+        onChange: g,
+        onKeyDown: m,
         placeholder: c,
         rows: i,
-        maxLength: t,
+        maxLength: r,
         className: "w-full px-2 py-1.5 text-sm font-medium bg-canvas-elevated border border-field rounded focus:outline-none focus:border-brand resize-y"
       }
     ),
-    t && /* @__PURE__ */ o("div", { className: "text-right text-xs text-content-muted px-1 mt-0.5", children: [
+    r && /* @__PURE__ */ o("div", { className: "text-right text-xs text-secondary-foreground px-1 mt-0.5", children: [
       n.length,
       "/",
-      t
+      r
     ] })
   ] });
 });

package/dist/components/data/ag-grid-react/cell-renderers/select-display-renderer.js

@@ -18,7 +18,7 @@ const h = (u) => {
           className: `flex w-full items-center justify-between rounded-[8px] px-1.5 h-7 ${t ? "bg-canvas-elevated cursor-pointer" : "bg-inherit"}`,
           children: [
             /* @__PURE__ */ n("span", { className: `truncate text-sm font-medium text-content ${f ? "text-content-empty" : ""}`, children: f ? b : d }),
-            t && /* @__PURE__ */ n(g, { className: "h-3.5 w-3.5 shrink-0 rotate-90 text-content-muted" })
+            t && /* @__PURE__ */ n(g, { className: "h-3.5 w-3.5 shrink-0 rotate-90 text-content-icon" })
           ]
         }
       )

package/dist/components/data/ag-grid-react/cell-renderers/switch-display-renderer.js

@@ -1,35 +1,35 @@
-import { jsxs as b, jsx as n } from "react/jsx-runtime";
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
 import { useCallback as c } from "react";
 const p = (d) => {
-  const { value: h, node: i, column: a, leftLabel: s, rightLabel: o, disabled: e } = d, t = !!h, l = c(() => {
-    e || !a || i.setDataValue(a.getColId(), !t);
-  }, [e, a, i, t]), u = c(
-    (r) => {
-      e || (r.key === " " || r.key === "Enter") && (r.preventDefault(), l());
+  const { value: h, node: o, column: t, leftLabel: s, rightLabel: i, disabled: e } = d, n = !!h, r = c(() => {
+    e || !t || o.setDataValue(t.getColId(), !n);
+  }, [e, t, o, n]), u = c(
+    (l) => {
+      e || (l.key === " " || l.key === "Enter") && (l.preventDefault(), r());
     },
-    [e, l]
+    [e, r]
   );
   return /* @__PURE__ */ b("div", { className: `flex items-center justify-center h-full w-full gap-2 ag-cell-inner-padding ${e ? "opacity-60 cursor-not-allowed" : !e ? "in-ag-editable-cell-highlight" : ""}`, children: [
-    s && /* @__PURE__ */ n("span", { className: "text-xs text-content-muted", children: s }),
-    /* @__PURE__ */ n(
+    s && /* @__PURE__ */ a("span", { className: "text-xs text-secondary-foreground", children: s }),
+    /* @__PURE__ */ a(
       "div",
       {
-        onClick: l,
+        onClick: r,
         onKeyDown: u,
         role: "switch",
-        "aria-checked": t,
+        "aria-checked": n,
         "aria-disabled": e,
         tabIndex: e ? -1 : 0,
-        className: `inline-flex h-4 w-6 shrink-0 items-center rounded-full border transition-colors ${e ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${t ? "bg-brand-tint border-canvas-accordion" : "bg-canvas-elevated border-canvas-tint"}`,
-        children: /* @__PURE__ */ n(
+        className: `inline-flex h-4 w-6 shrink-0 items-center rounded-full border transition-colors ${e ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${n ? "bg-brand-tint border-canvas-accordion" : "bg-canvas-elevated border-canvas-tint"}`,
+        children: /* @__PURE__ */ a(
           "div",
           {
-            className: `pointer-events-none block h-[10px] w-[10px] rounded-full shadow-lg transition-transform ${t ? "translate-x-[10px] bg-brand" : "translate-x-[2px] bg-stroke-field"}`
+            className: `pointer-events-none block h-[10px] w-[10px] rounded-full shadow-lg transition-transform ${n ? "translate-x-[10px] bg-brand" : "translate-x-[2px] bg-stroke-field"}`
           }
         )
       }
     ),
-    o && /* @__PURE__ */ n("span", { className: "text-xs text-content-muted", children: o })
+    i && /* @__PURE__ */ a("span", { className: "text-xs text-secondary-foreground", children: i })
   ] });
 };
 p.displayName = "SwitchDisplayRenderer";

package/dist/components/data/ag-grid-react/headers/advanced-filter/advanced-filter-dialog.js

@@ -132,7 +132,7 @@ const M = (k) => {
     return n.push(s), n.join(" > ");
   };
   return /* @__PURE__ */ r(I, { open: k, onOpenChange: m, children: /* @__PURE__ */ g(ee, { className: "w-[800px] max-w-[95vw] max-h-[90vh] flex flex-col p-0", hideClose: !0, children: [
-    /* @__PURE__ */ g(te, { className: "flex flex-row items-center justify-between px-4 py-3", children: [
+    /* @__PURE__ */ g(te, { className: "flex flex-row items-center justify-between px-4 py-3 pe-4", children: [
       /* @__PURE__ */ r(le, { children: d("advancedFilter.title") }),
       /* @__PURE__ */ r(oe, { asChild: !0, children: /* @__PURE__ */ r(y, { variant: "ghost", size: "icon", className: "h-8 w-8 p-0 text-content-tertiary hover:text-brand-variant-hover", onClick: m, "aria-label": d("aria.close"), children: /* @__PURE__ */ r(ce, { size: 14 }) }) })
     ] }),

package/dist/components/data/ag-grid-react/headers/advanced-filter/column-filter-section.js

@@ -5,9 +5,9 @@ import { Input as f } from "../../../../forms/input/input.js";
 import { DatePicker as V } from "../../../../forms/date-picker/date-picker.js";
 import { DateRangePicker as I } from "../../../../forms/date-picker/date-range-picker.js";
 import { Select as h } from "../../../../forms/select/select.js";
-import { Bin as R } from "impact-nova-icons";
+import { Bin as y } from "impact-nova-icons";
 import { useImpactNovaI18n as D } from "../../../../../i18n/use-impact-nova-i18n.js";
-import { createEmptyRule as y } from "../utils/filter-utils.js";
+import { createEmptyRule as R } from "../utils/filter-utils.js";
 import { DEFAULT_DATE_DISPLAY_FORMAT as _ } from "../utils/date-utils.js";
 const T = {
   text: ["contains", "notContains", "equals", "notEqual", "startsWith", "endsWith", "empty", "notEmpty"],
@@ -29,24 +29,24 @@ const T = {
   onDeleteColumnFilter: x,
   dateDisplayFormat: b = _
 }) => {
-  const { t: n } = D(), N = E(() => (T[l] ?? T.text).map((r) => ({ label: n(`filter.operators.${l === "date" && r === "greaterThan" ? "after" : l === "date" && r === "lessThan" ? "before" : l === "date" && r === "inRange" ? "between" : r}`), value: r })), [l, n]), w = E(
+  const { t: r } = D(), N = E(() => (T[l] ?? T.text).map((n) => ({ label: r(`filter.operators.${l === "date" && n === "greaterThan" ? "after" : l === "date" && n === "lessThan" ? "before" : l === "date" && n === "inRange" ? "between" : n}`), value: n })), [l, r]), w = E(
     () => [
-      { label: n("filter.logicAll"), value: "AND" },
-      { label: n("filter.logicAny"), value: "OR" }
+      { label: r("filter.logicAll"), value: "AND" },
+      { label: r("filter.logicAny"), value: "OR" }
     ],
-    [n]
+    [r]
   ), O = () => {
-    m([...s, y(p, l)]);
+    m([...s, R(p, l)]);
   }, S = (e) => {
     if (s.length > 1 || u) {
-      const r = s.filter((t) => t.id !== e);
-      r.length === 0 && u ? m([]) : m(r.length > 0 ? r : [y(p, l)]);
+      const n = s.filter((t) => t.id !== e);
+      n.length === 0 && u ? m([]) : m(n.length > 0 ? n : [R(p, l)]);
     }
-  }, o = (e, r) => {
-    m(s.map((t) => t.id === e ? { ...t, ...r } : t));
+  }, o = (e, n) => {
+    m(s.map((t) => t.id === e ? { ...t, ...n } : t));
   }, k = (e) => {
     if (e.operator === "empty" || e.operator === "notEmpty")
-      return /* @__PURE__ */ a("span", { className: "text-content-placeholder italic text-sm", children: n("advancedFilter.noValueNeeded") });
+      return /* @__PURE__ */ a("span", { className: "text-content-placeholder italic text-sm", children: r("advancedFilter.noValueNeeded") });
     if (l === "date")
       return e.operator === "inRange" ? /* @__PURE__ */ a(
         I,
@@ -69,13 +69,13 @@ const T = {
         {
           value: e.value ? new Date(e.value) : void 0,
           onChange: (t) => o(e.id, { value: t?.toISOString() || "" }),
-          placeholder: n("filter.selectDate"),
+          placeholder: r("filter.selectDate"),
           format: b,
           showFooter: !0
         }
       );
-    const r = e.operator === "equals" || e.operator === "notEqual";
-    return l === "select" || l === "multi" && r ? /* @__PURE__ */ a(
+    const n = e.operator === "equals" || e.operator === "notEqual";
+    return l === "select" || l === "multi" && n ? /* @__PURE__ */ a(
       h,
       {
         options: g || [],
@@ -87,7 +87,7 @@ const T = {
           Array.isArray(t) ? o(e.id, { value: t.map((i) => i.value) }) : o(e.id, { value: t?.value || "" });
         },
         isMulti: c !== void 0 ? c : !0,
-        placeholder: n(c === !1 ? "filter.selectValue" : "filter.selectValues"),
+        placeholder: r(c === !1 ? "filter.selectValue" : "filter.selectValues"),
         className: "w-full",
         menuPortalTarget: document.body
       }
@@ -97,18 +97,18 @@ const T = {
         {
           value: e.value,
           onChange: (t) => o(e.id, { value: t.target.value }),
-          placeholder: n("filter.from"),
+          placeholder: r("filter.from"),
           type: l === "number" ? "number" : "text",
           className: "flex-1"
         }
       ),
-      /* @__PURE__ */ a("span", { className: "text-content-placeholder shrink-0", children: n("filter.to") }),
+      /* @__PURE__ */ a("span", { className: "text-content-placeholder shrink-0", children: r("filter.to") }),
       /* @__PURE__ */ a(
         f,
         {
           value: e.valueTo || "",
           onChange: (t) => o(e.id, { valueTo: t.target.value }),
-          placeholder: n("filter.to"),
+          placeholder: r("filter.to"),
           type: l === "number" ? "number" : "text",
           className: "flex-1"
         }
@@ -118,26 +118,26 @@ const T = {
       {
         value: e.value,
         onChange: (t) => o(e.id, { value: t.target.value }),
-        placeholder: n("filter.enterValue"),
+        placeholder: r("filter.enterValue"),
         type: l === "number" ? "number" : "text",
         className: "w-full"
       }
     );
   }, P = (e) => {
-    const r = N.find((t) => t.value === e.operator);
+    const n = N.find((t) => t.value === e.operator);
     return /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ a("div", { className: "w-[120px] shrink-0", children: /* @__PURE__ */ a(
         h,
         {
           options: N,
-          value: r || null,
+          value: n || null,
           onChange: (t) => {
             const i = t;
             if (!i) return;
             const A = i.value === "inRange" && e.value && !e.valueTo ? Array.isArray(e.value) ? e.value[0] : e.value : void 0;
             o(e.id, { operator: i.value, ...A != null && { valueTo: A } });
           },
-          placeholder: n("filter.operator"),
+          placeholder: r("filter.operator"),
           className: "w-full",
           menuPortalTarget: document.body
         }
@@ -149,36 +149,36 @@ const T = {
           onClick: () => S(e.id),
           variant: "tertiary",
           size: "icon",
-          "aria-label": n("aria.removeRule"),
+          "aria-label": r("aria.removeRule"),
           disabled: s.length === 1 && !u,
-          children: /* @__PURE__ */ a(R, { size: "xs" })
+          children: /* @__PURE__ */ a(y, { size: "xs" })
         }
       )
     ] }, e.id);
   };
   return /* @__PURE__ */ d("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ d("div", { className: "text-content-muted text-sm flex items-center gap-2 flex-wrap", children: [
-      /* @__PURE__ */ a("span", { children: n("advancedFilter.match") }),
+    /* @__PURE__ */ d("div", { className: "text-secondary-foreground text-sm flex items-center gap-2 flex-wrap", children: [
+      /* @__PURE__ */ a("span", { children: r("advancedFilter.match") }),
       /* @__PURE__ */ a("div", { className: "w-[80px]", children: /* @__PURE__ */ a(
         h,
         {
           options: w,
           value: w.find((e) => e.value === C),
           onChange: (e) => {
-            const r = e;
-            r && F(r.value);
+            const n = e;
+            n && F(n.value);
           },
           className: "h-8",
           menuPortalTarget: document.body,
           isClearable: !1
         }
       ) }),
-      /* @__PURE__ */ a("span", { children: n("advancedFilter.ofTheFollowingRulesForColumn") }),
+      /* @__PURE__ */ a("span", { children: r("advancedFilter.ofTheFollowingRulesForColumn") }),
       /* @__PURE__ */ a("span", { className: "font-semibold text-content-tertiary", children: q })
     ] }),
     /* @__PURE__ */ a("div", { className: "flex flex-col gap-3", children: s.map((e) => P(e)) }),
     /* @__PURE__ */ d("div", { className: "flex items-center justify-between mt-1", children: [
-      /* @__PURE__ */ a(v, { onClick: O, variant: "outline", size: "sm", children: n("advancedFilter.addRule") }),
+      /* @__PURE__ */ a(v, { onClick: O, variant: "outline", size: "sm", children: r("advancedFilter.addRule") }),
       x && /* @__PURE__ */ d(
         v,
         {
@@ -187,8 +187,8 @@ const T = {
           onClick: x,
           className: "text-validation hover:text-destructive hover:bg-feedback-error-surface border-destructive",
           children: [
-            /* @__PURE__ */ a(R, { size: "xs" }),
-            n("advancedFilter.deleteColumn")
+            /* @__PURE__ */ a(y, { size: "xs" }),
+            r("advancedFilter.deleteColumn")
           ]
         }
       )

package/dist/components/data/ag-grid-react/headers/components/header-info.js

@@ -1,105 +1,109 @@
-import { jsx as t, jsxs as I, Fragment as g } from "react/jsx-runtime";
-import { useState as k } from "react";
-import { cn as m } from "../../../../../lib/utils.js";
-import { Info as b } from "impact-nova-icons";
-import { useImpactNovaI18n as p } from "../../../../../i18n/use-impact-nova-i18n.js";
-import { LazyTooltip as h } from "./lazy-tooltip.js";
-import { InfoModal as C } from "./info-modal.js";
+import { jsx as t, jsxs as h, Fragment as I } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { cn as f } from "../../../../../lib/utils.js";
+import { Info as k } from "impact-nova-icons";
+import { useImpactNovaI18n as m } from "../../../../../i18n/use-impact-nova-i18n.js";
+import { LazyTooltip as p } from "./lazy-tooltip.js";
+import { InfoModal as b } from "./info-modal.js";
 const u = ({
   onClick: n,
-  className: i,
-  label: r
+  className: e,
+  label: o
 }) => {
-  const o = (a) => {
+  const i = (a) => {
     a.stopPropagation(), n?.(a);
   };
   return /* @__PURE__ */ t(
     "button",
     {
       type: "button",
-      "aria-label": r,
-      className: m(
-        "cursor-pointer flex items-center justify-center shrink-0 w-6 h-6 rounded-md transition-all duration-200 text-content-tertiary hover:bg-muted active:bg-stroke-hairline",
-        i
+      "aria-label": o,
+      className: f(
+        "cursor-pointer flex items-center justify-center shrink-0 w-6 h-6 rounded-md transition-all duration-200 text-content-tertiary hover:bg-canvas-muted active:bg-stroke-hairline",
+        e
       ),
-      onClick: o,
-      children: /* @__PURE__ */ t(b, { size: 16, "aria-hidden": !0 })
+      onClick: i,
+      children: /* @__PURE__ */ t(k, { size: 16, "aria-hidden": !0 })
     }
   );
 }, v = ({
   content: n,
-  className: i,
-  onInfoClick: r,
-  label: o
-}) => /* @__PURE__ */ t(h, { content: n, children: /* @__PURE__ */ t(u, { onClick: r, className: i, label: o }) }), y = ({
+  className: e,
+  onInfoClick: o,
+  label: i
+}) => /* @__PURE__ */ t(p, { content: n, children: /* @__PURE__ */ t(u, { onClick: o, className: e, label: i }) }), C = ({
   infoData: n,
-  className: i,
-  onInfoClick: r,
-  label: o
+  className: e,
+  onInfoClick: o,
+  label: i
 }) => {
-  const { t: a } = p(), [l, s] = k(!1), c = (e) => {
-    e.stopPropagation(), s(!0);
+  const { t: a } = m(), [c, l] = g(!1), s = (r) => {
+    r.stopPropagation(), l(!0);
   };
-  return /* @__PURE__ */ I(g, { children: [
-    /* @__PURE__ */ t(h, { content: a("gridHeader.clickForDetails"), children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ h(I, { children: [
+    /* @__PURE__ */ t(p, { content: a("gridHeader.clickForDetails"), children: /* @__PURE__ */ t(
       u,
       {
-        label: o,
-        onClick: (e) => {
-          c(e), r && r(e);
+        label: i,
+        onClick: (r) => {
+          s(r), o && o(r);
         },
-        className: m(
-          "hover:bg-muted hover:shadow-sm hover:text-brand-variant-hover hover:-translate-y-0.5 active:scale-95",
-          i
+        className: f(
+          "hover:bg-canvas-muted hover:shadow-sm hover:text-brand-variant-hover hover:-translate-y-0.5 active:scale-95",
+          e
         )
       }
     ) }),
-    l && n && // Stop propagation to prevent the click from bubbling to the header group
+    c && n && // Stop propagation to prevent the click from bubbling to the header group
     // regardless of whether the modal is portaled or not.
-    /* @__PURE__ */ t("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ t(
-      C,
+    /* @__PURE__ */ t("div", { onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ t(
+      b,
       {
-        open: l,
-        onClose: () => s(!1),
+        open: c,
+        onClose: () => l(!1),
         data: n
       }
     ) })
   ] });
 }, M = (n) => {
-  const { t: i } = p(), {
-    showInfoIcon: r,
-    displayName: o,
-    displayMode: a = "tooltip",
-    infoTooltip: l,
-    infoData: s,
-    className: c,
-    onInfoClick: e
+  const {
+    showInfoIcon: e,
+    displayName: o
   } = n;
-  if (!r || !o || o.trim() === "") return null;
-  const d = () => {
-    e && e(n);
-  }, f = l ? `${o}: ${l}` : `${o} ${i("gridHeader.information")}`;
-  return a === "modal" ? /* @__PURE__ */ t(
-    y,
+  return !e || !o || o.trim() === "" ? null : /* @__PURE__ */ t(y, { ...n });
+};
+function y(n) {
+  const { t: e } = m(), {
+    displayName: o,
+    displayMode: i = "tooltip",
+    infoTooltip: a,
+    infoData: c,
+    className: l,
+    onInfoClick: s
+  } = n, r = () => {
+    s && s(n);
+  }, d = a ? `${o}: ${a}` : `${o} ${e("gridHeader.information")}`;
+  return i === "modal" ? /* @__PURE__ */ t(
+    C,
     {
-      infoData: s,
-      className: c,
-      onInfoClick: d,
-      label: f
+      infoData: c,
+      className: l,
+      onInfoClick: r,
+      label: d
     }
   ) : /* @__PURE__ */ t(
     v,
     {
-      content: l || `Info about ${o}`,
-      className: c,
-      onInfoClick: d,
-      label: f
+      content: a || `Info about ${o}`,
+      className: l,
+      onInfoClick: r,
+      label: d
     }
   );
-};
+}
 export {
   M as HeaderInfo,
   u as InfoIconTrigger,
-  y as ModalInfoTrigger,
+  C as ModalInfoTrigger,
   v as TooltipInfoTrigger
 };

package/dist/components/data/ag-grid-react/headers/components/info-modal.js

@@ -3,15 +3,15 @@ import "react";
 import { Dialog as s, DialogContent as d, DialogHeader as p, DialogTitle as g, DialogBody as f } from "../../../../feedback/dialog/dialog.js";
 import { useImpactNovaI18n as h } from "../../../../../i18n/use-impact-nova-i18n.js";
 import { SectionRenderer as x } from "./section-renderers.js";
-const H = ({ open: a, onClose: l, data: o }) => {
+const H = ({ open: a, onClose: l, data: r }) => {
   const { t: n } = h();
-  if (!o) return null;
-  const { title: m, sections: r = [] } = o;
-  return /* @__PURE__ */ e(s, { open: a, onOpenChange: (t) => !t && l(), children: /* @__PURE__ */ i(d, { className: "max-w-2xl", children: [
+  if (!r) return null;
+  const { title: m, sections: t = [] } = r;
+  return /* @__PURE__ */ e(s, { open: a, onOpenChange: (o) => !o && l(), children: /* @__PURE__ */ i(d, { className: "max-w-2xl", children: [
     /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(g, { children: m || n("gridHeader.information") }) }),
     /* @__PURE__ */ i(f, { className: "space-y-6 py-8", children: [
-      r.map((t, c) => /* @__PURE__ */ e(x, { section: t }, `${t.type}-${c}`)),
-      r.length === 0 && /* @__PURE__ */ e("p", { className: "text-sm text-content-muted text-center py-4", children: n("gridHeader.noInformationAvailable") })
+      t.map((o, c) => /* @__PURE__ */ e(x, { section: o }, `${o.type}-${c}`)),
+      t.length === 0 && /* @__PURE__ */ e("p", { className: "text-sm text-secondary-foreground text-center py-4", children: n("gridHeader.noInformationAvailable") })
     ] })
   ] }) });
 };