fix(ag-grid): change theme to function and add charts export path (#3816)

odinr · Copilot · github-actions[bot] · web-flow · commit 7c57951c5776 · 2025-12-04T10:43:10.000+01:00
* chore(changeset): update msal acquire-token-request default [hotfix] * fix(module-ag-grid): change theme to function for lazy evaluation BREAKING CHANGE: theme configuration now accepts a function () => Theme instead of Theme directly Fixes #747 * feat(react-ag-grid): add charts export path Add new ./charts export for AG Charts React components and enterprise module. Includes AgCharts and AgChartsEnterpriseModule exports. Fixes #747 * test(cookbook): add theme override example Add test theme override demonstrating theme function API with custom parameters. * refactor(cookbook): update AG Charts imports to use framework export Migrate chart components to use @equinor/fusion-framework-react-ag-grid/charts instead of direct ag-charts-react imports. Fixes #747 * chore: update dependencies in pnpm-lock.yaml - Bump '@types/node' from 24.9.2 to 24.10.1 across various packages. - Update 'ag-charts-react' and related dependencies to version 12.3.1. - Adjust 'react' and 'react-dom' versions to 18.3.1. - Upgrade 'rollup' from 4.52.5 to 4.53.3. - Remove deprecated esbuild versions and clean up unused packages. This update ensures compatibility with the latest versions and improves overall project stability. Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> * Update .changeset/module-ag-grid_theme-function.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * refactor(ag-grid): remove unused createTheme import Eliminate the unused import of createTheme from AgGridProvider.ts to clean up the codebase and improve readability. Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> * Update packages/modules/ag-grid/src/AgGridProvider.ts Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * refactor(ag-grid): update exports for ag-charts modules Change exports in charts.ts to use a wildcard export for ag-charts-react, and remove AgCharts export from enterprise.ts to streamline module usage. This enhances clarity and maintains compatibility with the latest ag-charts updates. Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> --------- Signed-off-by: Odin Thomas Rochmann <odin.rochmann@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
diff --git a/.changeset/cookbook-app-react-ag-grid_test-theme-override.md b/.changeset/cookbook-app-react-ag-grid_test-theme-override.md
@@ -0,0 +1,7 @@
+---
+"@equinor/fusion-framework-cookbook-app-react-ag-grid": patch
+---
+
+Add test theme override example in cookbook configuration.
+
+Demonstrates how to use the theme function API with custom theme parameters.
diff --git a/.changeset/cookbook-app-react-charts_update-charts-import.md b/.changeset/cookbook-app-react-charts_update-charts-import.md
@@ -0,0 +1,7 @@
+---
+"@equinor/fusion-framework-cookbook-app-react-charts": patch
+---
+
+Update AG Charts imports to use new `@equinor/fusion-framework-react-ag-grid/charts` export path.
+
+Migrate from direct `ag-charts-react` imports to the framework's unified charts export.
diff --git a/.changeset/module-ag-grid_theme-function.md b/.changeset/module-ag-grid_theme-function.md
@@ -0,0 +1,20 @@
+---
+"@equinor/fusion-framework-module-ag-grid": minor
+---
+
+Internal: `theme` config property now expects a function `() => Theme` for lazy evaluation, but consumer APIs remain backward compatible.
+
+Most consumers using `builder.setTheme()` do not need to migrate; it still accepts both `Theme` objects and functions. Only direct construction of `AgGridConfig` requires the function wrapper.
+
+```typescript
+// Internal API change (rare, direct config construction)
+const config: AgGridConfig = {
+  theme: () => myTheme
+};
+
+// Builder API remains backward compatible
+builder.setTheme(myTheme); // still works
+builder.setTheme((theme) => theme.withParams({...})); // also works
+```
+
+Fixes: https://github.com/equinor/fusion-framework/issues/747
diff --git a/.changeset/react-ag-grid_add-charts-export.md b/.changeset/react-ag-grid_add-charts-export.md
@@ -0,0 +1,15 @@
+---
+"@equinor/fusion-framework-react-ag-grid": minor
+---
+
+Add new `./charts` export path for AG Charts React components and enterprise module.
+
+The package now exports `AgCharts` and `AgChartsEnterpriseModule` from a dedicated `./charts` export path. This provides a cleaner separation from the enterprise exports.
+
+```typescript
+import { AgCharts, AgChartsEnterpriseModule } from '@equinor/fusion-framework-react-ag-grid/charts';
+```
+
+Note: Charts exports are still available from `./enterprise` for backward compatibility but will be removed in a future minor release.
+
+Fixes: https://github.com/equinor/fusion-framework/issues/747
diff --git a/cookbooks/app-react-ag-grid/src/config.ts b/cookbooks/app-react-ag-grid/src/config.ts
@@ -29,6 +29,11 @@ export const configure: AppModuleInitiator = (configurator, { env }) => {
       IntegratedChartsModule.with(AgChartsEnterpriseModule),
       AllCommunityModule,
     ]);
+    builder.setTheme((theme) =>
+      theme.withParams({
+        headerTextColor: 'cornflowerblue',
+      }),
+    );
   });
 
   /** callback when configurations is created */
diff --git a/cookbooks/app-react-charts/package.json b/cookbooks/app-react-charts/package.json
@@ -23,17 +23,16 @@
     "@equinor/fusion-framework-cli": "workspace:^",
     "@equinor/fusion-framework-module-navigation": "workspace:^",
     "@equinor/fusion-framework-react-app": "workspace:^",
+    "@equinor/fusion-framework-react-ag-grid": "workspace:^",
     "@types/react": "^18.2.50",
     "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^7.6.0",
-    "typescript": "^5.8.2",
-    "styled-components": "^6.1.19"
+    "styled-components": "^6.1.19",
+    "typescript": "^5.8.2"
   },
   "dependencies": {
-    "ag-charts-community": "^12.2.0",
-    "ag-charts-react": "^12.2.0",
     "chart.js": "^4.4.9",
     "react-chartjs-2": "^5.3.0"
   }
diff --git a/cookbooks/app-react-charts/src/pages/ag-charts/AgArea.tsx b/cookbooks/app-react-charts/src/pages/ag-charts/AgArea.tsx
@@ -2,7 +2,7 @@ import type { AgChartOptions } from 'ag-charts-community';
 import { salesData } from './Data';
 import { type ReactElement, useMemo } from 'react';
 import Styled from '../../App.style';
-import { AgCharts } from 'ag-charts-react';
+import { AgCharts } from '@equinor/fusion-framework-react-ag-grid/charts';
 
 /**
  * AgArea Component - Stacked Area Chart Visualization
diff --git a/cookbooks/app-react-charts/src/pages/ag-charts/AgBar.tsx b/cookbooks/app-react-charts/src/pages/ag-charts/AgBar.tsx
@@ -2,7 +2,7 @@ import type { AgChartOptions } from 'ag-charts-community';
 import { salesData } from './Data';
 import { type ReactElement, useMemo } from 'react';
 import Styled from '../../App.style';
-import { AgCharts } from 'ag-charts-react';
+import { AgCharts } from '@equinor/fusion-framework-react-ag-grid/charts';
 
 /**
  * AgBar Component - Bar Chart Visualization
diff --git a/cookbooks/app-react-charts/src/pages/ag-charts/AgLine.tsx b/cookbooks/app-react-charts/src/pages/ag-charts/AgLine.tsx
@@ -2,7 +2,7 @@ import type { AgChartOptions } from 'ag-charts-community';
 import { temperatureData } from './Data';
 import { type ReactElement, useMemo } from 'react';
 import Styled from '../../App.style';
-import { AgCharts } from 'ag-charts-react';
+import { AgCharts } from '@equinor/fusion-framework-react-ag-grid/charts';
 
 /**
  * AgLine Component - Line Chart Visualization
diff --git a/cookbooks/app-react-charts/src/pages/ag-charts/AgPie.tsx b/cookbooks/app-react-charts/src/pages/ag-charts/AgPie.tsx
@@ -2,7 +2,7 @@ import type { AgChartOptions } from 'ag-charts-community';
 import { marketShareData } from './Data';
 import { type ReactElement, useMemo } from 'react';
 import Styled from '../../App.style';
-import { AgCharts } from 'ag-charts-react';
+import { AgCharts } from '@equinor/fusion-framework-react-ag-grid/charts';
 
 /**
  * AgPie Component - Pie Chart Visualization
diff --git a/packages/modules/ag-grid/src/AgGridConfigurator.interface.ts b/packages/modules/ag-grid/src/AgGridConfigurator.interface.ts
@@ -2,7 +2,7 @@ import type { Theme, Module } from 'ag-grid-community';
 
 export interface AgGridConfig {
   licenseKey?: string;
-  theme?: Theme;
+  theme?: () => Theme;
   modules?: Array<Module>;
 }
 
diff --git a/packages/modules/ag-grid/src/AgGridConfigurator.ts b/packages/modules/ag-grid/src/AgGridConfigurator.ts
@@ -1,22 +1,23 @@
 import { BaseConfigBuilder } from '@equinor/fusion-framework-module';
 
-import { type Theme, type Module, createTheme } from 'ag-grid-community';
+import type { Theme, Module } from 'ag-grid-community';
 import type { AgGridConfig, IAgGridConfigurator } from './AgGridConfigurator.interface';
+import { createTheme } from './themes';
 
 export class AgGridConfigurator
   extends BaseConfigBuilder<AgGridConfig>
   implements IAgGridConfigurator
 {
   // local template variables
   #modules: Set<Module>;
-  #theme: Theme | undefined;
+  #theme: () => Theme;
 
   constructor(args: Partial<AgGridConfig> = {}) {
     super();
 
     // set default values
     this.#modules = new Set(args.modules || []);
-    this.#theme = args.theme ?? createTheme();
+    this.#theme = args.theme ?? (() => createTheme());
 
     // set config properties
     this._set('modules', async () => [...this.#modules]);
@@ -30,9 +31,9 @@ export class AgGridConfigurator
 
   setTheme(valueOrCallback: Theme | ((baseTheme: Theme) => Theme) | null): void {
     if (typeof valueOrCallback === 'function') {
-      this.#theme = valueOrCallback(this.#theme ?? createTheme());
+      this._set('theme', async () => () => valueOrCallback(this.#theme()));
     } else {
-      this.#theme = valueOrCallback ?? undefined;
+      this._set('theme', async () => () => valueOrCallback as Theme);
     }
   }
 
diff --git a/packages/modules/ag-grid/src/AgGridProvider.ts b/packages/modules/ag-grid/src/AgGridProvider.ts
@@ -24,7 +24,7 @@ export class AgGridProvider implements IAgGridProvider {
    * @returns {Theme | undefined} The current theme if configured, otherwise undefined.
    */
   get theme(): Theme | undefined {
-    return this._config.theme;
+    return this._config.theme?.();
   }
 
   constructor(protected _config: AgGridConfig) {
@@ -36,7 +36,7 @@ export class AgGridProvider implements IAgGridProvider {
       LicenseManager.setLicenseKey(this.licenseKey);
     }
     provideGlobalGridOptions({
-      theme: this._config.theme,
+      theme: this._config.theme?.(),
     });
 
     if (this._config.modules) {
diff --git a/packages/modules/ag-grid/src/module.ts b/packages/modules/ag-grid/src/module.ts
@@ -10,7 +10,7 @@ import { type IAgGridProvider, AgGridProvider } from './AgGridProvider';
 
 import type { IAgGridConfigurator } from './AgGridConfigurator.interface';
 
-import { fusionTheme, createThemeFromTheme } from './themes';
+import { createThemeFromTheme, fusionTheme } from './themes';
 
 export type AgGridModule = Module<'agGrid', IAgGridProvider, IAgGridConfigurator>;
 
@@ -21,7 +21,7 @@ export const module: AgGridModule = {
   configure: (ref?: ModulesInstanceType<[AgGridModule]>) => {
     const licenseKey = ref?.agGrid?.licenseKey;
 
-    const theme = ref?.agGrid?.theme ? createThemeFromTheme(ref.agGrid.theme) : fusionTheme;
+    const theme = () => (ref?.agGrid?.theme ? createThemeFromTheme(ref.agGrid.theme) : fusionTheme);
     return new AgGridConfigurator({
       licenseKey,
       theme,
diff --git a/packages/react/ag-grid/package.json b/packages/react/ag-grid/package.json
@@ -17,6 +17,10 @@
       "import": "./dist/esm/enterprise.js",
       "types": "./dist/types/enterprise.d.ts"
     },
+    "./charts": {
+      "import": "./dist/esm/charts.js",
+      "types": "./dist/types/charts.d.ts"
+    },
     "./themes": {
       "import": "./dist/esm/themes.js",
       "types": "./dist/types/themes.d.ts"
@@ -35,6 +39,9 @@
       "enterprise": [
         "dist/types/enterprise.d.ts"
       ],
+      "charts": [
+        "dist/types/charts.d.ts"
+      ],
       "themes": [
         "dist/types/themes.d.ts"
       ]
@@ -61,6 +68,7 @@
   "dependencies": {
     "@equinor/fusion-framework-module-ag-grid": "workspace:*",
     "ag-charts-enterprise": "~12.3.1",
+    "ag-charts-react": "~12.3.1",
     "ag-grid-community": "~34.3.1",
     "ag-grid-enterprise": "~34.3.1",
     "ag-grid-react": "~34.3.1"
@@ -70,6 +78,8 @@
     "typescript": "^5.8.2"
   },
   "peerDependencies": {
-    "@equinor/fusion-framework-react-module": "workspace:^"
+    "@equinor/fusion-framework-react-module": "workspace:^",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   }
 }
diff --git a/packages/react/ag-grid/src/charts.ts b/packages/react/ag-grid/src/charts.ts
@@ -0,0 +1,2 @@
+export { AgChartsEnterpriseModule } from 'ag-charts-enterprise';
+export * from 'ag-charts-react';
diff --git a/packages/react/ag-grid/src/enterprise.ts b/packages/react/ag-grid/src/enterprise.ts
@@ -1,2 +1,3 @@
 export * from 'ag-grid-enterprise';
+// todo remove in next minor release - use ./charts instead
 export { AgChartsEnterpriseModule } from 'ag-charts-enterprise';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
