impact-nova 2.5.3 → 2.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { jsx as e, jsxs as r, Fragment as G } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as r, Fragment as I } from "react/jsx-runtime";
2
2
  import "react";
3
3
  import { Settings as L, Checkmark as m, Search as R } from "impact-nova-icons";
4
4
  import { DropdownMenuContent as M, DropdownMenuItem as s, DropdownMenuLabel as O, DropdownMenuSeparator as A, DropdownMenuSub as p, DropdownMenuSubTrigger as C, DropdownMenuSubContent as g } from "../../../../feedback/dropdown-menu/dropdown-menu.js";
@@ -6,49 +6,49 @@ import { useImpactNovaI18n as V } from "../../../../../i18n/use-impact-nova-i18n
6
6
  import { useGridHeader as E } from "../context/grid-header-context.js";
7
7
  import { setActiveSearchColumnId as W } from "../header-search-active-state.js";
8
8
  import { notifyColumnIndicatorSync as B } from "../../notify-column-indicator-sync.js";
9
- const _ = ({
10
- onClose: a,
11
- columnId: i,
9
+ const $ = ({
10
+ onClose: i,
11
+ columnId: a,
12
12
  gridApi: l,
13
13
  variant: c = "column"
14
14
  }) => {
15
- const { t: n } = V(), u = E(), d = c === "column" ? l.getColumn(i) : null;
15
+ const { t } = V(), u = E(), d = c === "column" ? l.getColumn(a) : null;
16
16
  if (c === "column" && !d) return null;
17
- const o = d?.getColDef(), S = d?.getSort(), x = d?.getPinned(), F = c === "column" && o?.sortable !== !1, H = o?.filter || "agTextColumnFilter", y = H === "agNumberColumnFilter" || (Array.isArray(o?.type) ? o.type.includes("numericColumn") : o?.type === "numericColumn"), b = H === "agDateColumnFilter" || (Array.isArray(o?.type) ? o.type.includes("dateColumn") : o?.type === "dateColumn"), P = l.getGridOption("suppressRowVirtualisation") !== !0, h = (t) => {
17
+ const o = d?.getColDef(), S = d?.getSort(), x = d?.getPinned(), F = c === "column" && o?.sortable !== !1, y = o?.filter || "agTextColumnFilter", H = y === "agNumberColumnFilter" || (Array.isArray(o?.type) ? o.type.includes("numericColumn") : o?.type === "numericColumn"), b = y === "agDateColumnFilter" || (Array.isArray(o?.type) ? o.type.includes("dateColumn") : o?.type === "dateColumn"), P = l.getGridOption("suppressRowVirtualisation") !== !0, h = (n) => {
18
18
  queueMicrotask(() => {
19
19
  l.applyColumnState({
20
- state: [{ colId: i, sort: t }],
20
+ state: [{ colId: a, sort: n }],
21
21
  defaultState: { sort: null }
22
22
  });
23
- }), a();
24
- }, f = (t) => {
23
+ }), i();
24
+ }, f = (n) => {
25
25
  queueMicrotask(() => {
26
26
  l.applyColumnState({
27
- state: [{ colId: i, pinned: t }]
27
+ state: [{ colId: a, pinned: n }]
28
28
  });
29
- }), a();
30
- }, k = (t) => {
31
- t ? l.autoSizeAllColumns() : l.autoSizeColumns([i]), a();
29
+ }), i();
30
+ }, k = (n) => {
31
+ n ? l.autoSizeAllColumns() : l.autoSizeColumns([a]), i();
32
32
  }, w = () => {
33
33
  queueMicrotask(() => {
34
34
  l.showColumnChooser();
35
- }), a();
35
+ }), i();
36
36
  }, N = () => {
37
37
  queueMicrotask(() => {
38
38
  l.resetColumnState();
39
- }), a();
39
+ }), i();
40
40
  }, j = () => {
41
41
  if (u)
42
- u.openSearch(i);
42
+ u.openSearch(a);
43
43
  else {
44
- const t = l.getGridOption("context") || {};
45
- l.setGridOption("context", { ...t, activeSearchColumnId: i }), W(i), B(l);
44
+ const n = l.getGridOption("context") || {}, G = typeof n.headerSearchScopeId == "string" ? n.headerSearchScopeId : "";
45
+ l.setGridOption("context", { ...n, activeSearchColumnId: a }), W(G, a), B(l);
46
46
  }
47
- a();
47
+ i();
48
48
  }, T = () => {
49
- const t = o?.headerComponentParams;
50
- t?.onAdvanceSearchClick ? t.onAdvanceSearchClick(d) : t?.toggleAdvanceSearch ? t.toggleAdvanceSearch(i) : u && u.openAdvancedFilter(i), a();
51
- }, D = o?.headerComponentParams, z = c === "column" && D?.isSearchable, v = c === "column" && D?.advanceSearchEnabled, q = n(P ? "gridHeader.autosizeAllVisibleColumns" : "gridHeader.autosizeAllColumns");
49
+ const n = o?.headerComponentParams;
50
+ n?.onAdvanceSearchClick ? n.onAdvanceSearchClick(d) : n?.toggleAdvanceSearch ? n.toggleAdvanceSearch(a) : u && u.openAdvancedFilter(a), i();
51
+ }, D = o?.headerComponentParams, z = c === "column" && D?.isSearchable, v = c === "column" && D?.advanceSearchEnabled, q = t(P ? "gridHeader.autosizeAllVisibleColumns" : "gridHeader.autosizeAllColumns");
52
52
  return c === "group" ? /* @__PURE__ */ e(
53
53
  M,
54
54
  {
@@ -56,10 +56,10 @@ const _ = ({
56
56
  side: "bottom",
57
57
  sideOffset: 5,
58
58
  className: "w-[200px] p-2 rounded-[8px] border-none !shadow-elevation-settings",
59
- onCloseAutoFocus: (t) => t.preventDefault(),
59
+ onCloseAutoFocus: (n) => n.preventDefault(),
60
60
  children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: [
61
- /* @__PURE__ */ e(s, { onClick: w, children: n("gridHeader.chooseColumns") }),
62
- /* @__PURE__ */ e(s, { onClick: N, children: n("gridHeader.resetColumns") })
61
+ /* @__PURE__ */ e(s, { onClick: w, children: t("gridHeader.chooseColumns") }),
62
+ /* @__PURE__ */ e(s, { onClick: N, children: t("gridHeader.resetColumns") })
63
63
  ] })
64
64
  }
65
65
  ) : /* @__PURE__ */ e(
@@ -69,65 +69,65 @@ const _ = ({
69
69
  side: "bottom",
70
70
  sideOffset: 5,
71
71
  className: "w-[200px] p-2 rounded-[8px] border-none !shadow-elevation-settings",
72
- onCloseAutoFocus: (t) => t.preventDefault(),
72
+ onCloseAutoFocus: (n) => n.preventDefault(),
73
73
  children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: [
74
74
  /* @__PURE__ */ r(O, { className: "flex items-center gap-2 text-content-tertiary", children: [
75
75
  /* @__PURE__ */ e(L, { size: "xs" }),
76
76
  " ",
77
- n("gridHeader.columnSettings")
77
+ t("gridHeader.columnSettings")
78
78
  ] }),
79
79
  /* @__PURE__ */ e(A, {}),
80
80
  F && /* @__PURE__ */ r(p, { children: [
81
- /* @__PURE__ */ e(C, { inset: !0, children: n("gridHeader.sort") }),
81
+ /* @__PURE__ */ e(C, { inset: !0, children: t("gridHeader.sort") }),
82
82
  /* @__PURE__ */ r(g, { sideOffset: 10, alignOffset: -5, children: [
83
83
  /* @__PURE__ */ e(s, { onClick: () => h("asc"), children: /* @__PURE__ */ r("span", { className: "flex items-center w-full justify-between", children: [
84
- /* @__PURE__ */ e("span", { children: n(y ? "gridHeader.sortAscNumber" : b ? "gridHeader.sortAscDate" : "gridHeader.sortAscText") }),
84
+ /* @__PURE__ */ e("span", { children: t(H ? "gridHeader.sortAscNumber" : b ? "gridHeader.sortAscDate" : "gridHeader.sortAscText") }),
85
85
  S === "asc" && /* @__PURE__ */ e(m, { size: "sm", className: "ml-2 text-content-tertiary" })
86
86
  ] }) }),
87
87
  /* @__PURE__ */ e(s, { onClick: () => h("desc"), children: /* @__PURE__ */ r("span", { className: "flex items-center w-full justify-between", children: [
88
- /* @__PURE__ */ e("span", { children: n(y ? "gridHeader.sortDescNumber" : b ? "gridHeader.sortDescDate" : "gridHeader.sortDescText") }),
88
+ /* @__PURE__ */ e("span", { children: t(H ? "gridHeader.sortDescNumber" : b ? "gridHeader.sortDescDate" : "gridHeader.sortDescText") }),
89
89
  S === "desc" && /* @__PURE__ */ e(m, { size: "sm", className: "ml-2 text-content-tertiary" })
90
90
  ] }) }),
91
- /* @__PURE__ */ e(s, { onClick: () => h(null), children: /* @__PURE__ */ e("span", { children: n("gridHeader.reset") }) })
91
+ /* @__PURE__ */ e(s, { onClick: () => h(null), children: /* @__PURE__ */ e("span", { children: t("gridHeader.reset") }) })
92
92
  ] })
93
93
  ] }),
94
94
  /* @__PURE__ */ r(p, { children: [
95
- /* @__PURE__ */ e(C, { inset: !0, children: n("gridHeader.freezeColumn") }),
95
+ /* @__PURE__ */ e(C, { inset: !0, children: t("gridHeader.freezeColumn") }),
96
96
  /* @__PURE__ */ r(g, { className: "z-[120]", sideOffset: 10, alignOffset: -5, children: [
97
97
  /* @__PURE__ */ e(s, { onClick: () => f("left"), children: /* @__PURE__ */ r("span", { className: "flex items-center w-full justify-between", children: [
98
- /* @__PURE__ */ e("span", { children: n("gridHeader.pinLeft") }),
98
+ /* @__PURE__ */ e("span", { children: t("gridHeader.pinLeft") }),
99
99
  x === "left" && /* @__PURE__ */ e(m, { size: "sm", className: "ml-2 text-content-tertiary" })
100
100
  ] }) }),
101
101
  /* @__PURE__ */ e(s, { onClick: () => f("right"), children: /* @__PURE__ */ r("span", { className: "flex items-center w-full justify-between", children: [
102
- /* @__PURE__ */ e("span", { children: n("gridHeader.pinRight") }),
102
+ /* @__PURE__ */ e("span", { children: t("gridHeader.pinRight") }),
103
103
  x === "right" && /* @__PURE__ */ e(m, { size: "sm", className: "ml-2 text-content-tertiary" })
104
104
  ] }) }),
105
- /* @__PURE__ */ e(s, { onClick: () => f(null), children: /* @__PURE__ */ e("span", { children: n("gridHeader.noPin") }) })
105
+ /* @__PURE__ */ e(s, { onClick: () => f(null), children: /* @__PURE__ */ e("span", { children: t("gridHeader.noPin") }) })
106
106
  ] })
107
107
  ] }),
108
108
  /* @__PURE__ */ r(p, { children: [
109
- /* @__PURE__ */ e(C, { inset: !0, children: n("gridHeader.columnWidth") }),
109
+ /* @__PURE__ */ e(C, { inset: !0, children: t("gridHeader.columnWidth") }),
110
110
  /* @__PURE__ */ r(g, { className: "z-[120]", sideOffset: 10, alignOffset: -5, children: [
111
- /* @__PURE__ */ e(s, { onClick: () => k(!1), children: n("gridHeader.autosizeThisColumn") }),
111
+ /* @__PURE__ */ e(s, { onClick: () => k(!1), children: t("gridHeader.autosizeThisColumn") }),
112
112
  /* @__PURE__ */ e(s, { onClick: () => k(!0), children: q })
113
113
  ] })
114
114
  ] }),
115
- /* @__PURE__ */ e(s, { inset: !0, onClick: w, children: n("gridHeader.chooseColumns") }),
116
- /* @__PURE__ */ e(s, { inset: !0, onClick: N, children: n("gridHeader.resetColumns") }),
117
- (z || v) && /* @__PURE__ */ r(G, { children: [
115
+ /* @__PURE__ */ e(s, { inset: !0, onClick: w, children: t("gridHeader.chooseColumns") }),
116
+ /* @__PURE__ */ e(s, { inset: !0, onClick: N, children: t("gridHeader.resetColumns") }),
117
+ (z || v) && /* @__PURE__ */ r(I, { children: [
118
118
  /* @__PURE__ */ e(A, {}),
119
119
  /* @__PURE__ */ r(O, { className: "flex items-center gap-2 text-content-tertiary", children: [
120
120
  /* @__PURE__ */ e(R, { size: "xs" }),
121
121
  " ",
122
- n("gridHeader.searchOptions")
122
+ t("gridHeader.searchOptions")
123
123
  ] }),
124
- z && /* @__PURE__ */ e(s, { inset: !0, onClick: j, children: n("gridHeader.search") }),
125
- v && /* @__PURE__ */ e(s, { inset: !0, onClick: T, children: n("gridHeader.advanceSearch") })
124
+ z && /* @__PURE__ */ e(s, { inset: !0, onClick: j, children: t("gridHeader.search") }),
125
+ v && /* @__PURE__ */ e(s, { inset: !0, onClick: T, children: t("gridHeader.advanceSearch") })
126
126
  ] })
127
127
  ] })
128
128
  }
129
129
  );
130
130
  };
131
131
  export {
132
- _ as ColumnSettingsMenuContent
132
+ $ as ColumnSettingsMenuContent
133
133
  };
@@ -9,6 +9,8 @@ import { AdvancedFilterModel } from '../../ag-grid.types';
9
9
  * - Advanced filter model and computed display strings
10
10
  */
11
11
  export interface GridHeaderContextValue {
12
+ /** Stable per-grid scope id — disambiguates column ids across multiple grids on one page. */
13
+ gridScopeId: string;
12
14
  /** Open search popover for a specific column */
13
15
  openSearch: (columnId: string) => void;
14
16
  /** Close the search popover */
@@ -63,11 +63,11 @@ function ae(r) {
63
63
  const { selectAll: c, toggledNodes: l } = d, n = !!(l && l.length > 0);
64
64
  return c && !n ? { isChecked: !0, isIndeterminate: !1 } : c && n ? { isChecked: !1, isIndeterminate: !0 } : !c && n ? { isChecked: !1, isIndeterminate: !0 } : { isChecked: !1, isIndeterminate: !1 };
65
65
  }
66
- const h = r.getSelectedRows().length, s = r.getDisplayedRowCount();
67
- return h === 0 ? { isChecked: !1, isIndeterminate: !1 } : h === s && s > 0 ? { isChecked: !0, isIndeterminate: !1 } : { isChecked: !1, isIndeterminate: !0 };
66
+ const u = r.getSelectedRows().length, s = r.getDisplayedRowCount();
67
+ return u === 0 ? { isChecked: !1, isIndeterminate: !1 } : u === s && s > 0 ? { isChecked: !0, isIndeterminate: !1 } : { isChecked: !1, isIndeterminate: !0 };
68
68
  }
69
69
  const ce = ({ api: r }) => {
70
- const { t } = R(), [h, s] = F(0);
70
+ const { t } = R(), [u, s] = F(0);
71
71
  L(() => {
72
72
  const n = () => {
73
73
  s((p) => p + 1);
@@ -103,7 +103,7 @@ const ce = ({ api: r }) => {
103
103
  }, ye = (r) => {
104
104
  const {
105
105
  displayName: t,
106
- setTooltip: h,
106
+ setTooltip: u,
107
107
  enableSorting: s,
108
108
  enableMenu: d,
109
109
  progressSort: c,
@@ -128,12 +128,12 @@ const ce = ({ api: r }) => {
128
128
  enableBooleanParsing: O,
129
129
  enableDateParsing: U
130
130
  } = r, I = M(null);
131
- re(h, t ?? "", I, "line-clamp", "leaf");
132
- const u = $(), { t: S } = R(), i = l.getColDef(), m = l.getColId(), [de, K] = F(0);
131
+ re(u, t ?? "", I, "line-clamp", "leaf");
132
+ const h = $(), { t: S } = R(), i = l.getColDef(), m = l.getColId(), [de, K] = F(0);
133
133
  L(() => ie(() => {
134
134
  K((b) => b + 1);
135
135
  }), []);
136
- const x = l.isFilterActive(), q = l.getSort(), w = l.getSortIndex(), J = !!q && w != null && w > 0, v = (i?.filter || "agTextColumnFilter") === "agNumberColumnFilter" || (Array.isArray(i?.type) ? i.type.some((o) => o === "number" || o === "numericColumn") : i?.type === "number" || i?.type === "numericColumn"), k = ne(m), H = M(null), N = ![
136
+ const x = l.isFilterActive(), q = l.getSort(), w = l.getSortIndex(), J = !!q && w != null && w > 0, v = (i?.filter || "agTextColumnFilter") === "agNumberColumnFilter" || (Array.isArray(i?.type) ? i.type.some((o) => o === "number" || o === "numericColumn") : i?.type === "number" || i?.type === "numericColumn"), k = ne(h?.gridScopeId ?? "", m), H = M(null), N = ![
137
137
  "agTextColumnFilter",
138
138
  "agNumberColumnFilter",
139
139
  "agDateColumnFilter",
@@ -150,7 +150,7 @@ const ce = ({ api: r }) => {
150
150
  n.showColumnFilter ? n.showColumnFilter(m) : n.showColumnMenu(m);
151
151
  return;
152
152
  }
153
- u && (k ? u.closeSearch() : u.openSearch(m));
153
+ h && (k ? h.closeSearch() : h.openSearch(m));
154
154
  }, W = (o) => {
155
155
  o.preventDefault(), o.stopPropagation(), H.current?.openMenu();
156
156
  }, X = (o) => /* @__PURE__ */ e("span", { onClick: (b) => b.stopPropagation(), children: /* @__PURE__ */ e(
@@ -160,13 +160,13 @@ const ce = ({ api: r }) => {
160
160
  className: o
161
161
  }
162
162
  ) });
163
- return k && u && !N ? /* @__PURE__ */ e(
163
+ return k && h && !N ? /* @__PURE__ */ e(
164
164
  le,
165
165
  {
166
166
  column: l,
167
167
  api: n,
168
168
  onClose: () => {
169
- u.closeSearch();
169
+ h.closeSearch();
170
170
  },
171
171
  handleInlineSearch: C,
172
172
  handleClearSearchInline: g ? () => g(r) : void 0,
@@ -1,10 +1,11 @@
1
1
  type HeaderSearchActiveListener = () => void;
2
- export declare function getActiveSearchColumnId(): string | null;
3
- export declare function setActiveSearchColumnId(columnId: string | null): void;
4
- export declare function subscribeHeaderSearchActiveForColumn(columnId: string, listener: HeaderSearchActiveListener): () => void;
5
- /** Column-scoped subscription — only the opening/closing column header re-renders. */
6
- export declare function useIsHeaderSearchActive(columnId: string): boolean;
7
- export declare function clearHeaderSearchActiveState(): void;
2
+ export declare function getActiveSearchColumnId(gridScopeId: string): string | null;
3
+ export declare function setActiveSearchColumnId(gridScopeId: string, columnId: string | null): void;
4
+ export declare function subscribeHeaderSearchActiveForColumn(gridScopeId: string, columnId: string, listener: HeaderSearchActiveListener): () => void;
5
+ /** Grid + column scoped subscription — only the opening/closing column header re-renders. */
6
+ export declare function useIsHeaderSearchActive(gridScopeId: string, columnId: string): boolean;
7
+ /** Clears active search for one grid, or all grids when scope is omitted (tests). */
8
+ export declare function clearHeaderSearchActiveState(gridScopeId?: string): void;
8
9
  /** Test-only reset — keeps unit tests isolated. */
9
10
  export declare function resetHeaderSearchActiveStateForTests(): void;
10
11
  export {};
@@ -1,38 +1,56 @@
1
1
  import { useSyncExternalStore as a } from "react";
2
- let n = null;
3
- const r = /* @__PURE__ */ new Map();
4
- function c(e) {
5
- e && r.get(e)?.forEach((t) => {
6
- t();
2
+ let t = null;
3
+ const o = /* @__PURE__ */ new Map();
4
+ function s(e, n) {
5
+ return `${e}:${n}`;
6
+ }
7
+ function i(e, n) {
8
+ !e || !n || o.get(s(e, n))?.forEach((r) => {
9
+ r();
7
10
  });
8
11
  }
9
- function f(e) {
10
- const t = n;
11
- t !== e && (n = e, c(t), c(e));
12
+ function f(e, n) {
13
+ if (n === null) {
14
+ if (t?.gridScopeId !== e) return;
15
+ const u = t;
16
+ t = null, i(u.gridScopeId, u.columnId);
17
+ return;
18
+ }
19
+ const r = t, c = { gridScopeId: e, columnId: n };
20
+ r?.gridScopeId === c.gridScopeId && r?.columnId === c.columnId || (t = c, i(r?.gridScopeId ?? null, r?.columnId ?? null), i(c.gridScopeId, c.columnId));
12
21
  }
13
- function s(e, t) {
14
- const i = r.get(e) ?? /* @__PURE__ */ new Set();
15
- return i.add(t), r.set(e, i), () => {
16
- i.delete(t), i.size === 0 && r.delete(e);
22
+ function d(e, n, r) {
23
+ const c = s(e, n), u = o.get(c) ?? /* @__PURE__ */ new Set();
24
+ return u.add(r), o.set(c, u), () => {
25
+ u.delete(r), u.size === 0 && o.delete(c);
17
26
  };
18
27
  }
19
- function o(e) {
20
- return n === e;
28
+ function l(e, n) {
29
+ return t?.gridScopeId === e && t.columnId === n;
21
30
  }
22
- function S(e) {
31
+ function h(e, n) {
23
32
  return a(
24
- (t) => s(e, t),
25
- () => o(e),
26
- () => o(e)
33
+ (r) => d(e, n, r),
34
+ () => l(e, n),
35
+ () => l(e, n)
27
36
  );
28
37
  }
29
- function l() {
30
- const e = n;
31
- n = null, c(e), r.clear();
38
+ function m(e) {
39
+ if (e) {
40
+ if (t?.gridScopeId !== e) return;
41
+ const r = t.columnId;
42
+ t = null, i(e, r);
43
+ return;
44
+ }
45
+ const n = t;
46
+ t = null, i(
47
+ n?.gridScopeId ?? null,
48
+ n?.columnId ?? null
49
+ ), o.clear();
32
50
  }
33
51
  export {
34
- l as clearHeaderSearchActiveState,
52
+ m as clearHeaderSearchActiveState,
35
53
  f as setActiveSearchColumnId,
36
- s as subscribeHeaderSearchActiveForColumn,
37
- S as useIsHeaderSearchActive
54
+ d as subscribeHeaderSearchActiveForColumn,
55
+ h as useIsHeaderSearchActive
38
56
  };
@@ -1,40 +1,40 @@
1
- import { jsxs as Ce, jsx as F } from "react/jsx-runtime";
2
- import { lazy as ve, useRef as U, useState as I, useEffect as V, useCallback as m, useMemo as f, Suspense as ye } from "react";
3
- import { ModuleRegistry as be, AllCommunityModule as xe, ValidationModule as Fe } from "ag-grid-community";
4
- import { AllEnterpriseModule as Ae } from "ag-grid-enterprise";
5
- import { AgGridReact as Se } from "ag-grid-react";
6
- import { customAgGridTheme as Ee } from "./theme.js";
7
- import { syncAgGridThemeMode as Ge } from "./sync-ag-grid-theme-mode.js";
8
- import { CustomHeader as Me } from "./headers/custom-header.js";
9
- import { CustomHeaderGroup as $ } from "./headers/custom-inner-header-group.js";
10
- import { mergeColumnGroupDefsWithDefault as Re } from "./merge-column-group-defs.js";
11
- import { DefaultTextCellRenderer as Te } from "./cell-renderers/default-text-cell-renderer.js";
12
- import { GridHeaderContext as we } from "./headers/context/grid-header-context.js";
13
- import { convertToAgGridFilterModel as ke, getMultiFilterIndices as je, convertFromAgGridFilterModel as Pe } from "./headers/utils/filter-utils.js";
14
- import { AG_GRID_VALUE_FORMATTERS as De } from "./value-formatters.js";
15
- import { useGridAutoSizeStrategyOnResize as Ie } from "./useGridAutoSizeStrategyOnResize.js";
16
- import { subscribeGridApiEvent as it, subscribeGridApiEvents as st } from "./grid-api-event-subscription.js";
17
- import { notifyColumnIndicatorSync as M } from "./notify-column-indicator-sync.js";
18
- import { setActiveSearchColumnId as L, clearHeaderSearchActiveState as Le } from "./headers/header-search-active-state.js";
1
+ import { jsxs as ye, jsx as F } from "react/jsx-runtime";
2
+ import { lazy as be, useRef as L, useState as O, useId as xe, useEffect as q, useCallback as m, useMemo as f, Suspense as Se } from "react";
3
+ import { ModuleRegistry as Fe, AllCommunityModule as Ae, ValidationModule as Ee } from "ag-grid-community";
4
+ import { AllEnterpriseModule as Ge } from "ag-grid-enterprise";
5
+ import { AgGridReact as Me } from "ag-grid-react";
6
+ import { customAgGridTheme as Re } from "./theme.js";
7
+ import { syncAgGridThemeMode as Te } from "./sync-ag-grid-theme-mode.js";
8
+ import { CustomHeader as we } from "./headers/custom-header.js";
9
+ import { CustomHeaderGroup as z } from "./headers/custom-inner-header-group.js";
10
+ import { mergeColumnGroupDefsWithDefault as ke } from "./merge-column-group-defs.js";
11
+ import { DefaultTextCellRenderer as Ie } from "./cell-renderers/default-text-cell-renderer.js";
12
+ import { GridHeaderContext as je } from "./headers/context/grid-header-context.js";
13
+ import { convertToAgGridFilterModel as Pe, getMultiFilterIndices as De, convertFromAgGridFilterModel as Le } from "./headers/utils/filter-utils.js";
14
+ import { AG_GRID_VALUE_FORMATTERS as Oe } from "./value-formatters.js";
15
+ import { useGridAutoSizeStrategyOnResize as He } from "./useGridAutoSizeStrategyOnResize.js";
16
+ import { subscribeGridApiEvent as ct, subscribeGridApiEvents as ut } from "./grid-api-event-subscription.js";
17
+ import { notifyColumnIndicatorSync as R } from "./notify-column-indicator-sync.js";
18
+ import { setActiveSearchColumnId as H, clearHeaderSearchActiveState as Ne } from "./headers/header-search-active-state.js";
19
19
  /* empty css */
20
- import { useAgGridTruncationTooltip as ct } from "./use-ag-grid-truncation-tooltip.js";
21
- import { isAgGridHeaderLabelTooltipOverflowing as dt, isAgGridTextOverflowing as pt } from "./ag-grid-tooltip-overflow.js";
22
- const Oe = ve(
20
+ import { useAgGridTruncationTooltip as pt } from "./use-ag-grid-truncation-tooltip.js";
21
+ import { isAgGridHeaderLabelTooltipOverflowing as ft, isAgGridTextOverflowing as gt } from "./ag-grid-tooltip-overflow.js";
22
+ const We = be(
23
23
  () => import("./headers/advanced-filter/advanced-filter-dialog.js").then((s) => ({
24
24
  default: s.AdvancedFilterDialog
25
25
  }))
26
26
  );
27
- be.registerModules([xe, Ae, Fe]);
28
- const x = "", O = "", q = (s) => {
27
+ Fe.registerModules([Ae, Ge, Ee]);
28
+ const S = "", N = "", J = (s) => {
29
29
  if (!s) return;
30
30
  const o = s.cellRendererParams?.splits;
31
31
  if (Array.isArray(o) && o.length > 0) return o;
32
32
  const l = s.cellEditorParams?.splits;
33
33
  if (Array.isArray(l) && l.length > 0) return l;
34
- }, z = (s, o) => {
34
+ }, X = (s, o) => {
35
35
  const l = [];
36
- for (const v of o) {
37
- const g = v?.field?.split(".").pop();
36
+ for (const y of o) {
37
+ const g = y?.field?.split(".").pop();
38
38
  if (!g) {
39
39
  l.push("");
40
40
  continue;
@@ -56,13 +56,13 @@ const x = "", O = "", q = (s) => {
56
56
  l.push("");
57
57
  }
58
58
  return l;
59
- }, J = (s) => {
59
+ }, B = (s) => {
60
60
  if (typeof navigator < "u" && navigator.clipboard?.writeText) {
61
- navigator.clipboard.writeText(s).catch(() => X(s));
61
+ navigator.clipboard.writeText(s).catch(() => Q(s));
62
62
  return;
63
63
  }
64
- X(s);
65
- }, X = (s) => {
64
+ Q(s);
65
+ }, Q = (s) => {
66
66
  if (typeof document > "u") return;
67
67
  const o = document.createElement("textarea");
68
68
  o.value = s, o.setAttribute("readonly", ""), o.style.position = "fixed", o.style.top = "0", o.style.left = "0", o.style.opacity = "0", o.style.pointerEvents = "none", document.body.appendChild(o);
@@ -72,36 +72,36 @@ const x = "", O = "", q = (s) => {
72
72
  document.body.removeChild(o);
73
73
  }
74
74
  };
75
- function nt({
75
+ function it({
76
76
  children: s,
77
77
  defaultColDef: o,
78
78
  defaultColGroupDef: l,
79
- columnDefs: v,
79
+ columnDefs: y,
80
80
  valueFormatters: g,
81
81
  onGridReady: c,
82
82
  onGridPreDestroyed: u,
83
- onFilterChanged: y,
83
+ onFilterChanged: b,
84
84
  onSelectionChanged: h,
85
85
  onModelUpdated: A,
86
- ensureDomOrder: R = !1,
87
- autoSizeStrategy: T,
88
- tooltipShowMode: w = "whenTruncated",
89
- tooltipShowDelay: k = 500,
90
- tooltipHideDelay: B = 5e3,
91
- tooltipInteraction: Q = !0,
92
- themeOverride: Y,
86
+ ensureDomOrder: T = !1,
87
+ autoSizeStrategy: w,
88
+ tooltipShowMode: k = "whenTruncated",
89
+ tooltipShowDelay: I = 500,
90
+ tooltipHideDelay: Y = 5e3,
91
+ tooltipInteraction: Z = !0,
92
+ themeOverride: ee,
93
93
  ...C
94
94
  }) {
95
- const a = U(null), j = U(null), [H, N] = I(null);
96
- Ie(H, j, T), V(() => {
95
+ const a = L(null), j = L(null), [W, _] = O(null), K = xe(), v = L(K);
96
+ v.current = K, He(W, j, w), q(() => {
97
97
  const e = document.documentElement, t = () => {
98
- Ge(e.classList.contains("dark") ? "dark" : "light", e);
98
+ Te(e.classList.contains("dark") ? "dark" : "light", e);
99
99
  };
100
100
  t();
101
101
  const n = new MutationObserver(t);
102
102
  return n.observe(e, { attributes: !0, attributeFilter: ["class"] }), () => n.disconnect();
103
103
  }, []);
104
- const [Z, W] = I(!1), [ee, _] = I(null), te = m(() => [], []), re = f(() => ({
104
+ const [te, U] = O(!1), [re, V] = O(null), ne = m(() => [], []), oe = f(() => ({
105
105
  numericColumn: {
106
106
  cellClass: "ag-right-aligned-cell",
107
107
  headerClass: "ag-right-aligned-header",
@@ -123,53 +123,58 @@ function nt({
123
123
  filter: "agDateColumnFilter"
124
124
  }
125
125
  }), []), P = f(() => ({
126
+ gridScopeId: v.current,
126
127
  openSearch: (e) => {
127
128
  if (!a.current) return;
128
129
  const t = a.current.getGridOption("context") || {};
129
- a.current.setGridOption("context", { ...t, activeSearchColumnId: e }), L(e), M(a.current);
130
+ a.current.setGridOption("context", { ...t, activeSearchColumnId: e }), H(v.current, e), R(a.current);
130
131
  },
131
132
  closeSearch: () => {
132
133
  if (!a.current) return;
133
134
  const e = a.current.getGridOption("context") || {};
134
- a.current.setGridOption("context", { ...e, activeSearchColumnId: null }), L(null), M(a.current);
135
+ a.current.setGridOption("context", { ...e, activeSearchColumnId: null }), H(v.current, null), R(a.current);
135
136
  },
136
137
  openAdvancedFilter: (e) => {
137
- _(e || null), W(!0);
138
+ V(e || null), U(!0);
138
139
  },
139
140
  closeAdvancedFilter: () => {
140
- W(!1), _(null);
141
+ U(!1), V(null);
141
142
  },
142
143
  applyAdvancedFilter: (e) => {
143
144
  if (!a.current) return;
144
- const t = ke(e);
145
- a.current.setFilterModel(t), a.current.onFilterChanged(), M(a.current);
145
+ const t = Pe(e);
146
+ a.current.setFilterModel(t), a.current.onFilterChanged(), R(a.current);
146
147
  }
147
- }), []), ne = m((e) => {
148
- a.current = e.api, N(e.api);
148
+ }), []), le = m((e) => {
149
+ a.current = e.api, _(e.api);
149
150
  const t = e.api.getGridOption("context") || {};
150
- e.api.setGridOption("context", { ...t, activeSearchColumnId: null }), L(null), c && c(e);
151
- }, [c]), oe = m(
151
+ e.api.setGridOption("context", {
152
+ ...t,
153
+ activeSearchColumnId: null,
154
+ headerSearchScopeId: v.current
155
+ }), H(v.current, null), c && c(e);
156
+ }, [c]), ie = m(
152
157
  (e) => {
153
- a.current = null, N(null), Le(), u?.(e);
158
+ Ne(v.current), a.current = null, _(null), u?.(e);
154
159
  },
155
160
  [u]
156
- ), le = m(
161
+ ), se = m(
157
162
  (e) => {
158
- M(e.api), y?.(e);
163
+ R(e.api), b?.(e);
159
164
  },
160
- [y]
161
- ), ie = m(
165
+ [b]
166
+ ), ae = m(
162
167
  (e) => {
163
168
  h?.(e);
164
169
  },
165
170
  [h]
166
- ), se = m(
171
+ ), ce = m(
167
172
  (e) => {
168
173
  A?.(e);
169
174
  },
170
175
  [A]
171
176
  );
172
- V(() => {
177
+ q(() => {
173
178
  const e = j.current;
174
179
  if (!e) return;
175
180
  const t = (n) => {
@@ -183,12 +188,12 @@ function nt({
183
188
  };
184
189
  return e.addEventListener("keydown", t, !0), () => e.removeEventListener("keydown", t, !0);
185
190
  }, []);
186
- const ae = f(() => ({
187
- headerComponent: Me,
191
+ const ue = f(() => ({
192
+ headerComponent: we,
188
193
  // Default cell renderer wraps text in a span so display:flex centering
189
194
  // and text-overflow:ellipsis both work (ellipsis doesn't work on
190
195
  // anonymous flex text nodes, but works on flex child elements).
191
- cellRenderer: Te,
196
+ cellRenderer: Ie,
192
197
  ...o,
193
198
  suppressHeaderKeyboardEvent: (e) => {
194
199
  const { event: t } = e, n = t.target;
@@ -213,33 +218,33 @@ function nt({
213
218
  ...l?.headerGroupComponentParams,
214
219
  innerHeaderGroupComponent: l?.headerGroupComponentParams?.innerHeaderGroupComponent ?? "CustomInnerHeaderGroup"
215
220
  }
216
- }), [l]), ce = f(
217
- () => Re(v ?? void 0, D),
218
- [v, D]
219
- ), ue = f(() => ({
220
- ...De,
221
+ }), [l]), de = f(
222
+ () => ke(y ?? void 0, D),
223
+ [y, D]
224
+ ), pe = f(() => ({
225
+ ...Oe,
221
226
  // Always available - value formatters
222
- CustomInnerHeaderGroup: $,
223
- CustomHeaderGroup: $,
227
+ CustomInnerHeaderGroup: z,
228
+ CustomHeaderGroup: z,
224
229
  ...C.components,
225
230
  // User components override
226
231
  ...g
227
232
  // Optional custom formatters override defaults
228
- }), [g, C.components]), de = m((e) => {
233
+ }), [g, C.components]), me = m((e) => {
229
234
  const t = e.value;
230
235
  if (t == null || typeof t != "object") return t;
231
- const n = q(e.column?.getColDef());
236
+ const n = J(e.column?.getColDef());
232
237
  if (n && n.length > 0) {
233
- const r = z(t, n);
238
+ const r = X(t, n);
234
239
  if (n.length === 1) {
235
- const d = n[0]?.field?.split(".").pop(), b = d ? t[d] : void 0;
236
- return b && typeof b == "object" && "value" in b ? b.value ?? "" : r[0];
240
+ const d = n[0]?.field?.split(".").pop(), x = d ? t[d] : void 0;
241
+ return x && typeof x == "object" && "value" in x ? x.value ?? "" : r[0];
237
242
  }
238
- return O + r.join(x);
243
+ return N + r.join(S);
239
244
  }
240
245
  const i = Object.entries(t).map(([, r]) => r && typeof r == "object" && "value" in r ? r.value : typeof r != "object" && typeof r < "u" ? r : null).filter((r) => r != null);
241
- return i.length === 0 ? "" : i.length === 1 ? i[0] : i.join(x);
242
- }, []), pe = m((e) => {
246
+ return i.length === 0 ? "" : i.length === 1 ? i[0] : i.join(S);
247
+ }, []), fe = m((e) => {
243
248
  if (typeof e.value == "string") {
244
249
  const t = e.value.trim();
245
250
  if (t.startsWith("{") || t.startsWith("["))
@@ -250,10 +255,10 @@ function nt({
250
255
  }
251
256
  }
252
257
  return e.value;
253
- }, []), me = m((e) => {
258
+ }, []), ge = m((e) => {
254
259
  const t = e?.data ?? "";
255
- if (!t.includes(x) && !t.includes(O)) {
256
- J(t);
260
+ if (!t.includes(S) && !t.includes(N)) {
261
+ B(t);
257
262
  return;
258
263
  }
259
264
  const n = [], i = t.split(`
@@ -264,25 +269,25 @@ function nt({
264
269
  n.push("");
265
270
  continue;
266
271
  }
267
- const E = d.split(" ").map((p) => p.startsWith(O) ? { isSplit: !0, slots: p.slice(1).split(x) } : { isSplit: !1, slots: p.split(x) }), K = Math.max(1, ...E.map((p) => p.slots.length));
268
- if (K === 1) {
269
- n.push(E.map((p) => p.slots[0] ?? "").join(" "));
272
+ const G = d.split(" ").map((p) => p.startsWith(N) ? { isSplit: !0, slots: p.slice(1).split(S) } : { isSplit: !1, slots: p.split(S) }), $ = Math.max(1, ...G.map((p) => p.slots.length));
273
+ if ($ === 1) {
274
+ n.push(G.map((p) => p.slots[0] ?? "").join(" "));
270
275
  continue;
271
276
  }
272
- for (let p = 0; p < K; p++) {
273
- const he = E.map((G) => !G.isSplit && G.slots.length === 1 ? G.slots[0] : G.slots[p] ?? "");
274
- n.push(he.join(" "));
277
+ for (let p = 0; p < $; p++) {
278
+ const ve = G.map((M) => !M.isSplit && M.slots.length === 1 ? M.slots[0] : M.slots[p] ?? "");
279
+ n.push(ve.join(" "));
275
280
  }
276
281
  }
277
- J(n.join(`
282
+ B(n.join(`
278
283
  `));
279
- }, []), S = m((e) => {
284
+ }, []), E = m((e) => {
280
285
  const t = e.value;
281
286
  if (t == null) return "";
282
287
  if (typeof t != "object") return String(t);
283
- const n = q(e.column?.getColDef());
288
+ const n = J(e.column?.getColDef());
284
289
  if (n && n.length > 0) {
285
- const r = z(t, n);
290
+ const r = X(t, n);
286
291
  return n.length === 1 ? r[0] : r.join(`
287
292
  `);
288
293
  }
@@ -298,94 +303,94 @@ function nt({
298
303
  }
299
304
  return i.length === 0 ? "" : i.length === 1 ? i[0] : i.join(`
300
305
  `);
301
- }, []), fe = f(() => ({
302
- processCellCallback: S,
306
+ }, []), he = f(() => ({
307
+ processCellCallback: E,
303
308
  ...C.defaultCsvExportParams ?? {}
304
- }), [S, C.defaultCsvExportParams]), ge = f(() => ({
305
- processCellCallback: S,
309
+ }), [E, C.defaultCsvExportParams]), Ce = f(() => ({
310
+ processCellCallback: E,
306
311
  ...C.defaultExcelExportParams ?? {}
307
- }), [S, C.defaultExcelExportParams]);
308
- return /* @__PURE__ */ Ce(we.Provider, { value: P, children: [
312
+ }), [E, C.defaultExcelExportParams]);
313
+ return /* @__PURE__ */ ye(je.Provider, { value: P, children: [
309
314
  /* @__PURE__ */ F("div", { ref: j, "data-component": "ag-grid-react", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ F(
310
- Se,
315
+ Me,
311
316
  {
312
- theme: Y ?? Ee,
313
- defaultColDef: ae,
314
- columnDefs: ce,
317
+ theme: ee ?? Re,
318
+ defaultColDef: ue,
319
+ columnDefs: de,
315
320
  cellSelection: !0,
316
321
  defaultColGroupDef: D,
317
- onGridReady: ne,
318
- onGridPreDestroyed: oe,
319
- onFilterChanged: le,
320
- onSelectionChanged: ie,
321
- onModelUpdated: se,
322
- tooltipShowMode: w,
323
- tooltipShowDelay: k,
324
- tooltipHideDelay: B,
325
- tooltipInteraction: Q,
326
- processCellForClipboard: de,
327
- processCellFromClipboard: pe,
328
- sendToClipboard: me,
329
- ensureDomOrder: R,
322
+ onGridReady: le,
323
+ onGridPreDestroyed: ie,
324
+ onFilterChanged: se,
325
+ onSelectionChanged: ae,
326
+ onModelUpdated: ce,
327
+ tooltipShowMode: k,
328
+ tooltipShowDelay: I,
329
+ tooltipHideDelay: Y,
330
+ tooltipInteraction: Z,
331
+ processCellForClipboard: me,
332
+ processCellFromClipboard: fe,
333
+ sendToClipboard: ge,
334
+ ensureDomOrder: T,
330
335
  suppressHeaderFocus: !1,
331
336
  suppressFocusAfterRefresh: !0,
332
337
  suppressGroupRowsSticky: !0,
333
338
  hidePaddedHeaderRows: !0,
334
339
  suppressServerSideFullWidthLoadingRow: !0,
335
- columnTypes: re,
336
- autoSizeStrategy: T,
340
+ columnTypes: oe,
341
+ autoSizeStrategy: w,
337
342
  ...C,
338
- components: ue,
339
- defaultCsvExportParams: fe,
340
- defaultExcelExportParams: ge,
341
- getMainMenuItems: te
343
+ components: pe,
344
+ defaultCsvExportParams: he,
345
+ defaultExcelExportParams: Ce,
346
+ getMainMenuItems: ne
342
347
  }
343
348
  ) }),
344
349
  s,
345
350
  /* @__PURE__ */ F(
346
- He,
351
+ _e,
347
352
  {
348
- isOpen: Z,
349
- columnId: ee,
350
- gridApi: H,
353
+ isOpen: te,
354
+ columnId: re,
355
+ gridApi: W,
351
356
  onClose: P.closeAdvancedFilter,
352
357
  onApply: P.applyAdvancedFilter
353
358
  }
354
359
  )
355
360
  ] });
356
361
  }
357
- function He({
362
+ function _e({
358
363
  isOpen: s,
359
364
  columnId: o,
360
365
  gridApi: l,
361
- onClose: v,
366
+ onClose: y,
362
367
  onApply: g
363
368
  }) {
364
369
  if (!s || !o || !l) return null;
365
370
  const c = l.getColumn(o);
366
371
  if (!c) return null;
367
- const u = c.getColDef(), y = u.headerComponentParams, h = je(u), A = h.text !== -1 || h.number !== -1 || h.date !== -1, R = h.set !== -1, w = u.filter === "agMultiColumnFilter" && (A || R) ? "multi" : u.filter === "agNumberColumnFilter" ? "number" : u.filter === "agDateColumnFilter" ? "date" : u.filter === "agSetColumnFilter" || y?.selectOptions ? "select" : "text", k = Pe(l.getFilterModel());
368
- return /* @__PURE__ */ F(ye, { fallback: null, children: /* @__PURE__ */ F(
369
- Oe,
372
+ const u = c.getColDef(), b = u.headerComponentParams, h = De(u), A = h.text !== -1 || h.number !== -1 || h.date !== -1, T = h.set !== -1, k = u.filter === "agMultiColumnFilter" && (A || T) ? "multi" : u.filter === "agNumberColumnFilter" ? "number" : u.filter === "agDateColumnFilter" ? "date" : u.filter === "agSetColumnFilter" || b?.selectOptions ? "select" : "text", I = Le(l.getFilterModel());
373
+ return /* @__PURE__ */ F(Se, { fallback: null, children: /* @__PURE__ */ F(
374
+ We,
370
375
  {
371
376
  isOpen: s,
372
- onClose: v,
377
+ onClose: y,
373
378
  onApply: g,
374
379
  columnId: o,
375
380
  columnLabel: u.headerName || o,
376
- columnType: w,
377
- selectOptions: y?.selectOptions,
378
- isMultiSelect: y?.isMultiSelect,
379
- initialModel: k,
381
+ columnType: k,
382
+ selectOptions: b?.selectOptions,
383
+ isMultiSelect: b?.isMultiSelect,
384
+ initialModel: I,
380
385
  api: l
381
386
  }
382
387
  ) });
383
388
  }
384
389
  export {
385
- nt as AgGridWrapper,
386
- dt as isAgGridHeaderLabelTooltipOverflowing,
387
- pt as isAgGridTextOverflowing,
388
- it as subscribeGridApiEvent,
389
- st as subscribeGridApiEvents,
390
- ct as useAgGridTruncationTooltip
390
+ it as AgGridWrapper,
391
+ ft as isAgGridHeaderLabelTooltipOverflowing,
392
+ gt as isAgGridTextOverflowing,
393
+ ct as subscribeGridApiEvent,
394
+ ut as subscribeGridApiEvents,
395
+ pt as useAgGridTruncationTooltip
391
396
  };
@@ -3,7 +3,8 @@ import { Badge as s } from "../../data-display/badge/badge.js";
3
3
  import { FilterPopoverContent as u } from "../../flows/filter-strip/filter-tag-list.js";
4
4
  import { Popover as b, PopoverTrigger as f } from "../../feedback/popover/popover.js";
5
5
  import { Tooltip as g, TooltipTrigger as v, TooltipContent as x } from "../../feedback/tooltip/tooltip.js";
6
- function w({
6
+ import "react";
7
+ function I({
7
8
  tags: o,
8
9
  title: l = "Attributes",
9
10
  maxVisibleTags: n = 4,
@@ -70,5 +71,5 @@ function w({
70
71
  );
71
72
  }
72
73
  export {
73
- w as ExpandableListItemAttributes
74
+ I as ExpandableListItemAttributes
74
75
  };
@@ -1,8 +1,9 @@
1
1
  import { jsx as e, jsxs as s } from "react/jsx-runtime";
2
2
  import { ScrollOverflowAffordance as o } from "../../layout/horizontal-scroller/scroll-overflow-affordance.js";
3
+ import "react";
3
4
  import { OverflowTooltip as r } from "../../feedback/tooltip/overflow-tooltip.js";
4
5
  const m = 128;
5
- function x({
6
+ function f({
6
7
  columns: i,
7
8
  sectionId: l = "metrics"
8
9
  }) {
@@ -50,5 +51,5 @@ function x({
50
51
  );
51
52
  }
52
53
  export {
53
- x as ExpandableListItemMetrics
54
+ f as ExpandableListItemMetrics
54
55
  };
@@ -1,6 +1,7 @@
1
1
  import { jsxs as t, jsx as e } from "react/jsx-runtime";
2
2
  import { Tooltip as l, TooltipTrigger as n, TooltipContent as o } from "./tooltip.js";
3
- const d = (i, r, a) => /* @__PURE__ */ t(l, { children: [
3
+ import "react";
4
+ const p = (i, r, a) => /* @__PURE__ */ t(l, { children: [
4
5
  /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center h-full w-full", children: i }) }),
5
6
  /* @__PURE__ */ e(o, { variant: "tertiary", className: a, children: r })
6
7
  ] }), h = (i, r) => /* @__PURE__ */ t(l, { children: [
@@ -9,5 +10,5 @@ const d = (i, r, a) => /* @__PURE__ */ t(l, { children: [
9
10
  ] });
10
11
  export {
11
12
  h as defaultAccordionTooltipRender,
12
- d as defaultTabTooltipRender
13
+ p as defaultTabTooltipRender
13
14
  };
@@ -2,17 +2,17 @@ import { jsx as r, jsxs as h, Fragment as z } from "react/jsx-runtime";
2
2
  import * as o from "react";
3
3
  import { Person as G, Monitor as U, PriorityAlert as q, Locked as O, Reset as B } from "impact-nova-icons";
4
4
  import { cn as p } from "../../../lib/utils.js";
5
+ import { Kbd as $ } from "../../primitives/kbd/kbd.js";
6
+ import { keybindingToString as H } from "../../primitives/kbd/keybinding-display.js";
5
7
  import { OverflowTooltip as A } from "../../feedback/tooltip/overflow-tooltip.js";
6
- import { ModuleRegistry as $, AllCommunityModule as H } from "ag-grid-community";
7
- import { AllEnterpriseModule as V } from "ag-grid-enterprise";
8
- import { DataTable as J, DataTableContent as Q } from "../../data/data-table/data-table.js";
8
+ import { ModuleRegistry as V, AllCommunityModule as J } from "ag-grid-community";
9
+ import { AllEnterpriseModule as Q } from "ag-grid-enterprise";
10
+ import { DataTable as X, DataTableContent as Y } from "../../data/data-table/data-table.js";
9
11
  import { AG_CELL_NO_PADDING as F } from "../../data/ag-grid-react/cell-renderers/index.js";
10
- import { Kbd as X } from "../../primitives/kbd/kbd.js";
11
- import { keybindingToString as Y } from "../../primitives/kbd/keybinding-display.js";
12
12
  import { useCommandPalette as Z } from "./use-command-palette.js";
13
13
  import { COMMAND_SOURCE_LABELS as m, keybindingFromEvent as W, isReservedShortcut as ee } from "./utils.js";
14
14
  import { BadgeCellRenderer as te } from "../../data/ag-grid-react/cell-renderers/badge-cell-renderer.js";
15
- $.registerModules([H, V]);
15
+ V.registerModules([J, Q]);
16
16
  function re(a) {
17
17
  const t = a.data;
18
18
  return t ? /* @__PURE__ */ h("div", { className: "flex items-center gap-2 min-w-0 h-full", children: [
@@ -69,7 +69,7 @@ function ne(a) {
69
69
  "flex items-center justify-end h-full w-full text-end",
70
70
  t.customisable ? "cursor-pointer" : "cursor-default opacity-70"
71
71
  ),
72
- children: /* @__PURE__ */ r(X, { keybinding: t.keybinding, size: "sm" })
72
+ children: /* @__PURE__ */ r($, { keybinding: t.keybinding, size: "sm" })
73
73
  }
74
74
  ) : t.customisable ? /* @__PURE__ */ r(
75
75
  "button",
@@ -133,7 +133,7 @@ function le({
133
133
  description: e.description || "",
134
134
  category: e.category || "General",
135
135
  keybinding: i,
136
- keybindingDisplay: i ? Y(i) : "",
136
+ keybindingDisplay: i ? H(i) : "",
137
137
  scope: e.scope,
138
138
  source: D,
139
139
  sourceColor: T ? "primary" : "neutral",
@@ -278,10 +278,10 @@ function le({
278
278
  u?.type === "conflict" ? /* @__PURE__ */ r(q, { className: "h-3.5 w-3.5 shrink-0" }) : u?.type === "reserved" ? /* @__PURE__ */ r(O, { className: "h-3.5 w-3.5 shrink-0" }) : c ? /* @__PURE__ */ r("span", { className: "shrink-0 text-base", children: "⌨️" }) : null,
279
279
  /* @__PURE__ */ r("span", { children: u ? u.text : L })
280
280
  ] }) : null;
281
- return /* @__PURE__ */ h(J, { className: p("flex flex-col w-full h-full border-t-0", a), children: [
281
+ return /* @__PURE__ */ h(X, { className: p("flex flex-col w-full h-full border-t-0", a), children: [
282
282
  s ? s(E) : E,
283
283
  /* @__PURE__ */ r(
284
- Q,
284
+ Y,
285
285
  {
286
286
  rowData: y,
287
287
  columnDefs: I,
@@ -6,8 +6,8 @@ import { cn as o } from "../../../lib/utils.js";
6
6
  import { MultiColorFilter as F, Cross as P, InfoBadge as u } from "impact-nova-icons";
7
7
  import { Button as D } from "../../primitives/button/button.js";
8
8
  import { Tooltip as c, TooltipTrigger as f, TooltipContent as h } from "../../feedback/tooltip/tooltip.js";
9
- import { OverflowTooltip as S } from "../../feedback/tooltip/overflow-tooltip.js";
10
- import { Kbd as j } from "../../primitives/kbd/kbd.js";
9
+ import { Kbd as S } from "../../primitives/kbd/kbd.js";
10
+ import { OverflowTooltip as j } from "../../feedback/tooltip/overflow-tooltip.js";
11
11
  import { useImpactNovaI18n as v } from "../../../i18n/use-impact-nova-i18n.js";
12
12
  import { useOverlayHostDismissNestedLayersOnNavigation as I } from "../../../lib/overlay/overlay-portal-context.js";
13
13
  import { preventDismissOnTooltipOutside as x } from "../../../lib/overlay/prevent-dismiss-on-tooltip-outside.js";
@@ -145,14 +145,14 @@ const O = ({
145
145
  ),
146
146
  /* @__PURE__ */ a("div", { className: "flex items-center gap-1 min-w-0", children: [
147
147
  /* @__PURE__ */ e(
148
- S,
148
+ j,
149
149
  {
150
150
  triggerClassName: "truncate font-['Manrope'] block min-w-0",
151
151
  content: t.tooltipKeybinding ? /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
152
152
  t.label,
153
153
  " ",
154
154
  /* @__PURE__ */ e(
155
- j,
155
+ S,
156
156
  {
157
157
  keybinding: t.tooltipKeybinding,
158
158
  size: "sm"
@@ -1,8 +1,9 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
2
  import { cn as x } from "../../../../lib/utils.js";
3
+ import "react";
3
4
  import { OverflowTooltip as m } from "../../../feedback/tooltip/overflow-tooltip.js";
4
5
  import { isInvertedSelection as h, isOptionArray as d } from "../utils/select.js";
5
- function w({
6
+ function C({
6
7
  isMulti: u,
7
8
  isDisabled: p,
8
9
  internalValue: o,
@@ -52,5 +53,5 @@ function w({
52
53
  );
53
54
  }
54
55
  export {
55
- w as SelectTriggerValue
56
+ C as SelectTriggerValue
56
57
  };
@@ -1,13 +1,14 @@
1
1
  import { jsxs as s, jsx as t } from "react/jsx-runtime";
2
2
  import * as i from "@radix-ui/react-popover";
3
3
  import { Checkbox as P } from "../../checkbox/checkbox.js";
4
+ import "react";
4
5
  import { OverflowTooltip as y } from "../../../feedback/tooltip/overflow-tooltip.js";
5
6
  import { ChevronRight as A, Checkmark as O } from "impact-nova-icons";
6
7
  import { cn as v } from "../../../../lib/utils.js";
7
8
  import { useOverlayPortalContainer as T } from "../../../../lib/overlay/overlay-portal-context.js";
8
9
  import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as _ } from "../../../../lib/overlay/overlay-host.constants.js";
9
10
  import { useSuppressOptionClickForTextSelection as E } from "../hooks/useSuppressOptionClickForTextSelection.js";
10
- const G = ({
11
+ const R = ({
11
12
  parentOption: n,
12
13
  isMulti: u,
13
14
  isReadOnly: l,
@@ -105,5 +106,5 @@ const G = ({
105
106
  ] });
106
107
  };
107
108
  export {
108
- G as Submenu
109
+ R as Submenu
109
110
  };
@@ -1 +1 @@
1
- export default "# Install and configure Impact Nova\n\nUse these steps to add Impact Nova to an existing project. Run the commands in your project root and apply the code changes to your entry file and layout.\n\n## 0. Scaffold a new app (recommended)\n\n**`create-impact-nova@^1.4.7`** is on npm. Scaffold auto-detects dependency mode:\n\n| Where you run | `impact-nova` dependency |\n|---------------|--------------------------|\n| Published CLI / MCP (outside monorepo) | `impact-nova@^2.5.3` from npm (`latest` tag) |\n| Inside impact-nova monorepo | `file:` link to repo root |\n\n```bash\nnpx create-impact-nova my-dashboard\ncd my-dashboard\nnpm run dev\n```\n\nMCP: **`scaffold_impact_nova_app`** with `projectName` and optional `modules[]` from the user prompt.\n\n**Overrides:** CLI `--from-npm` · `--link-monorepo` · MCP `usePublishedPackages: true | false`\n\n```bash\nnpx create-impact-nova my-dashboard --from-npm\n```\n\nBase template is shell-only (Home + shared primitives). Feature pages come from recipes — see `create-impact-nova/recipes/README.md`.\n\n**Local link in an existing app** (manual):\n\n```bash\nnpm install impact-nova@file:../path-to-impact-nova-repo\n```\n\nRun `npm run build` in the impact-nova repo after design-system changes.\n\n## 1. Install the package and peer dependencies\n\n```bash\nnpm install impact-nova impact-nova-icons\nnpm install react@^19 react-dom@^19\n```\n\n**Required peers:** `react@^19`, `react-dom@^19`, `impact-nova-icons@^0.1.1`\n\n**Optional peers** (install when you use these features):\n\n| Package | Version | When needed |\n|---------|---------|-------------|\n| `ag-grid-community` | `36.0.1` | AG Grid types/API (pin with react + enterprise) |\n| `ag-grid-react` | `36.0.1` | DataTable / AG Grid |\n| `ag-grid-enterprise` | `36.0.1` | Enterprise grid features |\n| `highcharts` | `^12` | Chart component |\n| `highcharts-react-official` | `^3` | Chart component |\n| `highcharts-border-radius` | `^0.0.4` | Rounded chart corners |\n\nIf you use AG Grid or Highcharts in your app, also install:\n\n```bash\nnpm install ag-grid-community@36.0.1 ag-grid-react@36.0.1 ag-grid-enterprise@36.0.1\n# Optional, for charts:\nnpm install highcharts@^12 highcharts-react-official@^3 highcharts-border-radius@^0.0.4\n```\n\n## 2. Import styles in your root entry\n\nIn your app root (e.g. `main.tsx`, `App.tsx`, or `layout.tsx`), **import the CSS before your app component**:\n\n```tsx\nimport 'impact-nova/dist/impact-nova.css';\nimport App from './App';\n// ... rest of your bootstrap\n```\n\n## 3. Add Manrope font (recommended)\n\nIn your `index.html` or layout:\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap\" rel=\"stylesheet\" />\n```\n\nIn your global CSS or Tailwind base:\n\n```css\n@layer base {\n body {\n font-family: 'Manrope', sans-serif;\n }\n}\n```\n\n## 4. Wrap your app with providers (recommended)\n\nMount **`ImpactNovaProviders`** once at the app root. It bundles i18n (`ImpactNovaI18nProvider`) and `TooltipProvider` (required for tooltips since v2.0.8):\n\n```tsx\nimport { ImpactNovaProviders } from 'impact-nova/form';\n\nfunction Root() {\n return (\n <ImpactNovaProviders locale=\"en\">\n <App />\n </ImpactNovaProviders>\n );\n}\n```\n\nFor another locale, pass a locale pack:\n\n```tsx\nimport { ImpactNovaProviders } from 'impact-nova/form';\nimport { de } from 'impact-nova/locale/de';\n\n<ImpactNovaProviders locale=\"de\" messages={de}>\n <App />\n</ImpactNovaProviders>\n```\n\n**Barrel exception:** locale packs may use `import { de } from 'impact-nova'`. All UI components still use subpaths (see §5).\n\n## 5. Subpath imports (recommended)\n\nPrefer subpath imports in feature code for tree-shaking:\n\n```tsx\nimport { Button } from 'impact-nova/button';\nimport { Card, CardContent } from 'impact-nova/card';\nimport { DataTable, DataTableContent, useDataTable } from 'impact-nova/data-table';\nimport { CheckCircle } from 'impact-nova-icons';\n```\n\nThe barrel `import { Button } from 'impact-nova'` still works but pulls a larger module graph. **Use subpaths for all UI components**; reserve the barrel for locale packs at app root only. Use `ImpactNovaProviders` from `impact-nova/form` for app setup.\n\n## 6. Using Impact Nova with CSS or SCSS (no Tailwind)\n\nIf your app uses **plain CSS or SCSS** and does **not** use Tailwind, you can still use Impact Nova. Tailwind is optional. Impact Nova ships a single built CSS file (no SCSS source).\n\n- **Import the library CSS** in your app root (e.g. `main.tsx`, `App.tsx`):\n ```tsx\n import 'impact-nova/dist/impact-nova.css';\n ```\n **CSS split exports** (optional, for layered theming): `impact-nova/impact-nova-tokens.scss`, `impact-nova/impact-nova-base.scss`, `impact-nova/impact-nova-components.css`\n Or from your main stylesheet: `@import 'impact-nova/dist/impact-nova.css';` in your main.css or main.scss.\n- **Component styling** comes from Impact Nova's CSS. Use each component's `variant` and `size` props; no Tailwind classes are required.\n- **Your layout and spacing** stay in your CSS or SCSS (margins, padding, flexbox, grid). Use your usual class names; the design system does not require Tailwind utilities.\n- **Manrope font:** Add the font link in `index.html` and in your CSS/SCSS set `body { font-family: 'Manrope', sans-serif; }` (see section 3).\n- **Summary:** No Tailwind, no Tailwind config. Load `impact-nova.css` once; use components with their props; use your existing CSS/SCSS for the rest.\n\n## 6b. Theming in consumer apps\n\n| Surface | What ships |\n|---------|------------|\n| **npm / consumer apps** | **Impact Light** only — `import 'impact-nova/dist/impact-nova.css'` (from `src/theme/tokens/light.json`) |\n| **Storybook / dev** | 10 curated **theme presets** (Impact Dark, Midnight, Ocean, …) — preview switcher only |\n\n**Do not** copy Storybook preset JSON or `theme-presets.ts` into consumer apps. Presets are not in the published package.\n\n**Custom branding:** override CSS variables on `:root` or a scoped class (e.g. `.my-brand`). Use Storybook **Theme Builder** / **Token Catalog** to explore tokens, then export CSS/JSON for your overrides.\n\n## 7. Using Impact Nova with Webpack\n\nIf your app is built with **Webpack** (including Create React App, which uses Webpack):\n\n- **CSS import:** Webpack will bundle the library CSS as long as you have a rule for `.css`. Ensure your config includes something like:\n ```js\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: ['style-loader', 'css-loader'],\n // or with MiniCssExtractPlugin:\n // use: [MiniCssExtractPlugin.loader, 'css-loader'],\n },\n // ... other rules (e.g. for .tsx, .js)\n ],\n },\n ```\n Then in your root component or entry:\n ```tsx\n import 'impact-nova/dist/impact-nova.css';\n ```\n- **Create React App (CRA):** No extra config. Add `import 'impact-nova/dist/impact-nova.css';` in `index.tsx` or `App.tsx`.\n- **Dedupe React / AG Grid:** If you see “multiple copies of React” or AG Grid issues, use Webpack’s `resolve.alias` so the app uses a single version:\n ```js\n resolve: {\n alias: {\n react: path.resolve(__dirname, 'node_modules/react'),\n 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),\n // If using AG Grid:\n 'ag-grid-react': path.resolve(__dirname, 'node_modules/ag-grid-react'),\n 'ag-grid-community': path.resolve(__dirname, 'node_modules/ag-grid-community'),\n 'ag-grid-enterprise': path.resolve(__dirname, 'node_modules/ag-grid-enterprise'),\n },\n },\n ```\n- **Tailwind + Webpack:** If you use Tailwind, add the Impact Nova preset and include the package in `content` (see section 7 below).\n\n## 8. Optional: extend Tailwind with Impact Nova preset\n\nIf your project uses Tailwind and you want the same theme (colors, radius), extend your `tailwind.config.js` with the preset from the package:\n\n```js\n// tailwind.config.js\nimport impactNovaPreset from 'impact-nova/tailwind.config.js';\n// → dist/tailwind.config.js (bundled theme; no package src/ required)\n\nexport default {\n presets: [impactNovaPreset],\n content: [\n './index.html',\n './src/**/*.{js,ts,jsx,tsx}',\n './node_modules/impact-nova/dist/**/*.js',\n ],\n // ... rest of your config\n};\n```\n\n## Summary checklist\n\n- [ ] `npm install impact-nova impact-nova-icons` (and react, react-dom; optional: ag-grid, highcharts)\n- [ ] `import 'impact-nova/dist/impact-nova.css'` in root entry (or @import in main.css/main.scss if using CSS or SCSS without Tailwind; see §6)\n- [ ] Add Manrope font link and body font-family\n- [ ] Wrap app with `<ImpactNovaProviders locale=\"en\">` from `impact-nova/form`\n- [ ] Use subpath imports in feature code (see §5)\n- [ ] (Optional) Add Tailwind preset and content path for impact-nova\n- [ ] **Webpack:** Ensure a CSS rule (style-loader + css-loader) and, if needed, resolve.alias for React/AG Grid\n\nAfter this, import components via subpaths: `import { Button } from 'impact-nova/button';`\n\n## 9. Dashboard app shell (optional)\n\nTo scaffold a full dashboard (sidebar, header, breadcrumb, filters), read resource **`impact-nova://layout`** or call `get_real_world_patterns` with `topic: \"layout\"`. Use `Layout` from `impact-nova/layout` — not `DynamicLayout` (grid/flex utility only).\n";
1
+ export default "# Install and configure Impact Nova\n\nUse these steps to add Impact Nova to an existing project. Run the commands in your project root and apply the code changes to your entry file and layout.\n\n## 0. Scaffold a new app (recommended)\n\n**`create-impact-nova@^1.4.7`** is on npm. Scaffold auto-detects dependency mode:\n\n| Where you run | `impact-nova` dependency |\n|---------------|--------------------------|\n| Published CLI / MCP (outside monorepo) | `impact-nova@^2.5.4` from npm (`latest` tag) |\n| Inside impact-nova monorepo | `file:` link to repo root |\n\n```bash\nnpx create-impact-nova my-dashboard\ncd my-dashboard\nnpm run dev\n```\n\nMCP: **`scaffold_impact_nova_app`** with `projectName` and optional `modules[]` from the user prompt.\n\n**Overrides:** CLI `--from-npm` · `--link-monorepo` · MCP `usePublishedPackages: true | false`\n\n```bash\nnpx create-impact-nova my-dashboard --from-npm\n```\n\nBase template is shell-only (Home + shared primitives). Feature pages come from recipes — see `create-impact-nova/recipes/README.md`.\n\n**Local link in an existing app** (manual):\n\n```bash\nnpm install impact-nova@file:../path-to-impact-nova-repo\n```\n\nRun `npm run build` in the impact-nova repo after design-system changes.\n\n## 1. Install the package and peer dependencies\n\n```bash\nnpm install impact-nova impact-nova-icons\nnpm install react@^19 react-dom@^19\n```\n\n**Required peers:** `react@^19`, `react-dom@^19`, `impact-nova-icons@^0.1.1`\n\n**Optional peers** (install when you use these features):\n\n| Package | Version | When needed |\n|---------|---------|-------------|\n| `ag-grid-community` | `36.0.1` | AG Grid types/API (pin with react + enterprise) |\n| `ag-grid-react` | `36.0.1` | DataTable / AG Grid |\n| `ag-grid-enterprise` | `36.0.1` | Enterprise grid features |\n| `highcharts` | `^12` | Chart component |\n| `highcharts-react-official` | `^3` | Chart component |\n| `highcharts-border-radius` | `^0.0.4` | Rounded chart corners |\n\nIf you use AG Grid or Highcharts in your app, also install:\n\n```bash\nnpm install ag-grid-community@36.0.1 ag-grid-react@36.0.1 ag-grid-enterprise@36.0.1\n# Optional, for charts:\nnpm install highcharts@^12 highcharts-react-official@^3 highcharts-border-radius@^0.0.4\n```\n\n## 2. Import styles in your root entry\n\nIn your app root (e.g. `main.tsx`, `App.tsx`, or `layout.tsx`), **import the CSS before your app component**:\n\n```tsx\nimport 'impact-nova/dist/impact-nova.css';\nimport App from './App';\n// ... rest of your bootstrap\n```\n\n## 3. Add Manrope font (recommended)\n\nIn your `index.html` or layout:\n\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap\" rel=\"stylesheet\" />\n```\n\nIn your global CSS or Tailwind base:\n\n```css\n@layer base {\n body {\n font-family: 'Manrope', sans-serif;\n }\n}\n```\n\n## 4. Wrap your app with providers (recommended)\n\nMount **`ImpactNovaProviders`** once at the app root. It bundles i18n (`ImpactNovaI18nProvider`) and `TooltipProvider` (required for tooltips since v2.0.8):\n\n```tsx\nimport { ImpactNovaProviders } from 'impact-nova/form';\n\nfunction Root() {\n return (\n <ImpactNovaProviders locale=\"en\">\n <App />\n </ImpactNovaProviders>\n );\n}\n```\n\nFor another locale, pass a locale pack:\n\n```tsx\nimport { ImpactNovaProviders } from 'impact-nova/form';\nimport { de } from 'impact-nova/locale/de';\n\n<ImpactNovaProviders locale=\"de\" messages={de}>\n <App />\n</ImpactNovaProviders>\n```\n\n**Barrel exception:** locale packs may use `import { de } from 'impact-nova'`. All UI components still use subpaths (see §5).\n\n## 5. Subpath imports (recommended)\n\nPrefer subpath imports in feature code for tree-shaking:\n\n```tsx\nimport { Button } from 'impact-nova/button';\nimport { Card, CardContent } from 'impact-nova/card';\nimport { DataTable, DataTableContent, useDataTable } from 'impact-nova/data-table';\nimport { CheckCircle } from 'impact-nova-icons';\n```\n\nThe barrel `import { Button } from 'impact-nova'` still works but pulls a larger module graph. **Use subpaths for all UI components**; reserve the barrel for locale packs at app root only. Use `ImpactNovaProviders` from `impact-nova/form` for app setup.\n\n## 6. Using Impact Nova with CSS or SCSS (no Tailwind)\n\nIf your app uses **plain CSS or SCSS** and does **not** use Tailwind, you can still use Impact Nova. Tailwind is optional. Impact Nova ships a single built CSS file (no SCSS source).\n\n- **Import the library CSS** in your app root (e.g. `main.tsx`, `App.tsx`):\n ```tsx\n import 'impact-nova/dist/impact-nova.css';\n ```\n **CSS split exports** (optional, for layered theming): `impact-nova/impact-nova-tokens.scss`, `impact-nova/impact-nova-base.scss`, `impact-nova/impact-nova-components.css`\n Or from your main stylesheet: `@import 'impact-nova/dist/impact-nova.css';` in your main.css or main.scss.\n- **Component styling** comes from Impact Nova's CSS. Use each component's `variant` and `size` props; no Tailwind classes are required.\n- **Your layout and spacing** stay in your CSS or SCSS (margins, padding, flexbox, grid). Use your usual class names; the design system does not require Tailwind utilities.\n- **Manrope font:** Add the font link in `index.html` and in your CSS/SCSS set `body { font-family: 'Manrope', sans-serif; }` (see section 3).\n- **Summary:** No Tailwind, no Tailwind config. Load `impact-nova.css` once; use components with their props; use your existing CSS/SCSS for the rest.\n\n## 6b. Theming in consumer apps\n\n| Surface | What ships |\n|---------|------------|\n| **npm / consumer apps** | **Impact Light** only — `import 'impact-nova/dist/impact-nova.css'` (from `src/theme/tokens/light.json`) |\n| **Storybook / dev** | 10 curated **theme presets** (Impact Dark, Midnight, Ocean, …) — preview switcher only |\n\n**Do not** copy Storybook preset JSON or `theme-presets.ts` into consumer apps. Presets are not in the published package.\n\n**Custom branding:** override CSS variables on `:root` or a scoped class (e.g. `.my-brand`). Use Storybook **Theme Builder** / **Token Catalog** to explore tokens, then export CSS/JSON for your overrides.\n\n## 7. Using Impact Nova with Webpack\n\nIf your app is built with **Webpack** (including Create React App, which uses Webpack):\n\n- **CSS import:** Webpack will bundle the library CSS as long as you have a rule for `.css`. Ensure your config includes something like:\n ```js\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: ['style-loader', 'css-loader'],\n // or with MiniCssExtractPlugin:\n // use: [MiniCssExtractPlugin.loader, 'css-loader'],\n },\n // ... other rules (e.g. for .tsx, .js)\n ],\n },\n ```\n Then in your root component or entry:\n ```tsx\n import 'impact-nova/dist/impact-nova.css';\n ```\n- **Create React App (CRA):** No extra config. Add `import 'impact-nova/dist/impact-nova.css';` in `index.tsx` or `App.tsx`.\n- **Dedupe React / AG Grid:** If you see “multiple copies of React” or AG Grid issues, use Webpack’s `resolve.alias` so the app uses a single version:\n ```js\n resolve: {\n alias: {\n react: path.resolve(__dirname, 'node_modules/react'),\n 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),\n // If using AG Grid:\n 'ag-grid-react': path.resolve(__dirname, 'node_modules/ag-grid-react'),\n 'ag-grid-community': path.resolve(__dirname, 'node_modules/ag-grid-community'),\n 'ag-grid-enterprise': path.resolve(__dirname, 'node_modules/ag-grid-enterprise'),\n },\n },\n ```\n- **Tailwind + Webpack:** If you use Tailwind, add the Impact Nova preset and include the package in `content` (see section 7 below).\n\n## 8. Optional: extend Tailwind with Impact Nova preset\n\nIf your project uses Tailwind and you want the same theme (colors, radius), extend your `tailwind.config.js` with the preset from the package:\n\n```js\n// tailwind.config.js\nimport impactNovaPreset from 'impact-nova/tailwind.config.js';\n// → dist/tailwind.config.js (bundled theme; no package src/ required)\n\nexport default {\n presets: [impactNovaPreset],\n content: [\n './index.html',\n './src/**/*.{js,ts,jsx,tsx}',\n './node_modules/impact-nova/dist/**/*.js',\n ],\n // ... rest of your config\n};\n```\n\n## Summary checklist\n\n- [ ] `npm install impact-nova impact-nova-icons` (and react, react-dom; optional: ag-grid, highcharts)\n- [ ] `import 'impact-nova/dist/impact-nova.css'` in root entry (or @import in main.css/main.scss if using CSS or SCSS without Tailwind; see §6)\n- [ ] Add Manrope font link and body font-family\n- [ ] Wrap app with `<ImpactNovaProviders locale=\"en\">` from `impact-nova/form`\n- [ ] Use subpath imports in feature code (see §5)\n- [ ] (Optional) Add Tailwind preset and content path for impact-nova\n- [ ] **Webpack:** Ensure a CSS rule (style-loader + css-loader) and, if needed, resolve.alias for React/AG Grid\n\nAfter this, import components via subpaths: `import { Button } from 'impact-nova/button';`\n\n## 9. Dashboard app shell (optional)\n\nTo scaffold a full dashboard (sidebar, header, breadcrumb, filters), read resource **`impact-nova://layout`** or call `get_real_world_patterns` with `topic: \"layout\"`. Use `Layout` from `impact-nova/layout` — not `DynamicLayout` (grid/flex utility only).\n";
@@ -1 +1 @@
1
- export default "# Impact Nova — baseline\n\nUse **Impact Nova** design-system components and tokens. Prefer subpath imports (e.g. `impact-nova/button`) when you only need a few modules. For live component lists, specs, and codegen, use the **impact-nova-mcp** MCP server (see npm `impact-nova-mcp`). Browse **Storybook**: https://impact-nova.iaproducts.ai/\n\n## Peer dependency summary\n\n```json\n{\n \"impactNova\": {\n \"package\": \"impact-nova\",\n \"recommendedVersion\": \"2.5.3\",\n \"recommendedDistTag\": \"latest\",\n \"description\": \"Design system package — ESM with 90+ subpath exports. Install: npm install impact-nova@latest\"\n },\n \"createImpactNova\": {\n \"package\": \"create-impact-nova\",\n \"recommendedVersion\": \"^1.4.7\",\n \"description\": \"Vite + React scaffold with recipe-based modules\"\n },\n \"localDevelopment\": {\n \"defaultScaffoldDependency\": \"auto\",\n \"description\": \"create-impact-nova auto-detects: file: link when run inside the impact-nova monorepo; npm (impact-nova@^2.5.3) otherwise. CLI: --from-npm or --link-monorepo to override. Rebuild impact-nova (npm run build) after DS changes when using file: link.\",\n \"cliFlagForNpm\": \"--from-npm\",\n \"cliFlagForMonorepo\": \"--link-monorepo\",\n \"mcpScaffoldFlag\": \"usePublishedPackages: true | false (omit for auto-detect)\"\n },\n \"mandatoryRules\": {\n \"componentsOnly\": \"Use Impact Nova components only — never create new custom UI components\",\n \"tables\": \"Any table/grid/spreadsheet → DataTable from impact-nova/data-table (not HTML table, not raw ag-grid-react)\",\n \"validateBeforeDone\": \"Call validate_snippet on generated UI code\",\n \"resource\": \"impact-nova://design-system-mandate\"\n },\n \"requiredPeers\": [\n {\n \"package\": \"react\",\n \"recommendedVersion\": \"^19.0.0\",\n \"description\": \"React 19 required\"\n },\n {\n \"package\": \"react-dom\",\n \"recommendedVersion\": \"^19.0.0\",\n \"description\": \"React DOM 19 required\"\n },\n {\n \"package\": \"impact-nova-icons\",\n \"recommendedVersion\": \">=0.1.0\",\n \"description\": \"Icons peer — not bundled in impact-nova; 0.1.x and 0.2.x supported\"\n }\n ],\n \"optionalPeers\": [\n {\n \"package\": \"ag-grid-community\",\n \"recommendedVersion\": \"36.0.1\",\n \"description\": \"AG Grid community types/API; pin to the same version as ag-grid-react\"\n },\n {\n \"package\": \"ag-grid-react\",\n \"recommendedVersion\": \"36.0.1\",\n \"description\": \"For DataTable and grid components; use exact version to match Impact Nova\"\n },\n {\n \"package\": \"ag-grid-enterprise\",\n \"recommendedVersion\": \"36.0.1\",\n \"description\": \"Required if using ag-grid-react with enterprise features\"\n },\n {\n \"package\": \"highcharts\",\n \"recommendedVersion\": \"^12.0.0\",\n \"description\": \"For Chart component\"\n },\n {\n \"package\": \"highcharts-react-official\",\n \"recommendedVersion\": \"^3.0.0\",\n \"description\": \"For Chart component\"\n },\n {\n \"package\": \"highcharts-border-radius\",\n \"recommendedVersion\": \"^0.0.4\",\n \"description\": \"Optional Highcharts plugin for rounded corners\"\n }\n ]\n}\n```\n";
1
+ export default "# Impact Nova — baseline\n\nUse **Impact Nova** design-system components and tokens. Prefer subpath imports (e.g. `impact-nova/button`) when you only need a few modules. For live component lists, specs, and codegen, use the **impact-nova-mcp** MCP server (see npm `impact-nova-mcp`). Browse **Storybook**: https://impact-nova.iaproducts.ai/\n\n## Peer dependency summary\n\n```json\n{\n \"impactNova\": {\n \"package\": \"impact-nova\",\n \"recommendedVersion\": \"2.5.4\",\n \"recommendedDistTag\": \"latest\",\n \"description\": \"Design system package — ESM with 90+ subpath exports. Install: npm install impact-nova@latest\"\n },\n \"createImpactNova\": {\n \"package\": \"create-impact-nova\",\n \"recommendedVersion\": \"^1.4.7\",\n \"description\": \"Vite + React scaffold with recipe-based modules\"\n },\n \"localDevelopment\": {\n \"defaultScaffoldDependency\": \"auto\",\n \"description\": \"create-impact-nova auto-detects: file: link when run inside the impact-nova monorepo; npm (impact-nova@^2.5.4) otherwise. CLI: --from-npm or --link-monorepo to override. Rebuild impact-nova (npm run build) after DS changes when using file: link.\",\n \"cliFlagForNpm\": \"--from-npm\",\n \"cliFlagForMonorepo\": \"--link-monorepo\",\n \"mcpScaffoldFlag\": \"usePublishedPackages: true | false (omit for auto-detect)\"\n },\n \"mandatoryRules\": {\n \"componentsOnly\": \"Use Impact Nova components only — never create new custom UI components\",\n \"tables\": \"Any table/grid/spreadsheet → DataTable from impact-nova/data-table (not HTML table, not raw ag-grid-react)\",\n \"validateBeforeDone\": \"Call validate_snippet on generated UI code\",\n \"resource\": \"impact-nova://design-system-mandate\"\n },\n \"requiredPeers\": [\n {\n \"package\": \"react\",\n \"recommendedVersion\": \"^19.0.0\",\n \"description\": \"React 19 required\"\n },\n {\n \"package\": \"react-dom\",\n \"recommendedVersion\": \"^19.0.0\",\n \"description\": \"React DOM 19 required\"\n },\n {\n \"package\": \"impact-nova-icons\",\n \"recommendedVersion\": \">=0.1.0\",\n \"description\": \"Icons peer — not bundled in impact-nova; 0.1.x and 0.2.x supported\"\n }\n ],\n \"optionalPeers\": [\n {\n \"package\": \"ag-grid-community\",\n \"recommendedVersion\": \"36.0.1\",\n \"description\": \"AG Grid community types/API; pin to the same version as ag-grid-react\"\n },\n {\n \"package\": \"ag-grid-react\",\n \"recommendedVersion\": \"36.0.1\",\n \"description\": \"For DataTable and grid components; use exact version to match Impact Nova\"\n },\n {\n \"package\": \"ag-grid-enterprise\",\n \"recommendedVersion\": \"36.0.1\",\n \"description\": \"Required if using ag-grid-react with enterprise features\"\n },\n {\n \"package\": \"highcharts\",\n \"recommendedVersion\": \"^12.0.0\",\n \"description\": \"For Chart component\"\n },\n {\n \"package\": \"highcharts-react-official\",\n \"recommendedVersion\": \"^3.0.0\",\n \"description\": \"For Chart component\"\n },\n {\n \"package\": \"highcharts-border-radius\",\n \"recommendedVersion\": \"^0.0.4\",\n \"description\": \"Optional Highcharts plugin for rounded corners\"\n }\n ]\n}\n```\n";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "impact-nova",
3
- "version": "2.5.3",
3
+ "version": "2.5.4",
4
4
  "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.",
5
5
  "type": "module",
6
6
  "workspaces": [