@adaptabletools/adaptable 20.0.0-canary.4 → 20.0.0-canary.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "20.0.0-canary.4",
+  "version": "20.0.0-canary.5",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -31,6 +31,7 @@ import { AgGridMenuAdapter } from '../agGrid/AgGridMenuAdapter';
 import { RowFormService } from '../Utilities/Services/RowFormService';
 import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
 import { AgGridExportAdapter } from '../agGrid/AgGridExportAdapter';
+import { AgGridThemeAdapter } from '../agGrid/AgGridThemeAdapter';
 /**
  * Contains AG Grid Options and Modules - used when instantiating AdapTable vanilla
  */
@@ -66,6 +67,7 @@ export interface IAdaptable {
     agGridMenuAdapter: AgGridMenuAdapter;
     agGridColumnAdapter: AgGridColumnAdapter;
     agGridExportAdapter: AgGridExportAdapter;
+    agGridThemeAdapter: AgGridThemeAdapter;
     hasAdaptableToolPanel: boolean;
     renderReactRoot: RenderReactRootFn;
     /**
@@ -244,7 +246,6 @@ export interface IAdaptable {
     isGridRangeSelectable(): boolean;
     isGridRowSelectable(): boolean;
     isGridGroupingActive(): boolean;
-    getAgGridCurrentThemeName(): string;
     applyAdaptableTheme(theme: AdaptableTheme | string): void;
     setRowGroupColumns(columnIds: string[]): void;
     getAllGridColumns(): Column<any>[];

package/src/AdaptableOptions/DefaultAdaptableOptions.js

@@ -294,6 +294,7 @@ const DefaultAdaptableOptions = {
         styleClassNames: EMPTY_ARRAY,
         showDocumentationLinks: true,
         showAdapTableVersion: true,
+        showAgGridVersion: true,
     },
 };
 export function applyDefaultAdaptableOptions(adaptableOptions) {

package/src/AdaptableOptions/EditOptions.d.ts

@@ -39,17 +39,28 @@ export interface EditOptions<TData = any> {
  */
 export interface CustomEditColumnValuesContext<TData = any> extends AdaptableColumnContext<TData> {
     /**
-     * Current distinct values in Cell
+     * Current distinct values in Column
      */
     defaultValues: Required<CustomEditColumnValueInfo>[];
+    /**
+     * Search text in Edit - used when fetching values from server
+     */
     currentSearchValue: string;
     /**
      * Currently edited Grid Cell
      */
     gridCell: GridCell;
 }
+/**
+ * Information about items in the Edit Controls
+ */
 export interface CustomEditColumnValueInfo {
-    label?: string;
+    /**
+     * Item's label
+     */ label?: string;
+    /**
+     * Value of Item being shown
+     */
     value: any;
 }
 /**

package/src/AdaptableOptions/UserInterfaceOptions.d.ts

@@ -68,6 +68,13 @@ export interface UserInterfaceOptions<TData = any> {
      * @gridInfoItem
      */
     showAdapTableVersion?: boolean;
+    /**
+     * Displays the AG Grid version in Grid Info section of Settings Panel
+     *
+     * @defaultValue true
+     * @gridInfoItem
+     */
+    showAgGridVersion?: boolean;
     /**
      * English variant to use in AdapTable UI
      *

package/src/Api/Implementation/ThemeApiImpl.js

@@ -4,6 +4,7 @@ import { ApiBase } from './ApiBase';
 import { StaticThemes } from '../../themes';
 import { ThemeInternalApi } from '../Internal/ThemeInternalApi';
 import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
+import { logDeprecation } from '../../Utilities/logDeprecation';
 export class ThemeApiImpl extends ApiBase {
     constructor(_adaptable) {
         super(_adaptable);
@@ -70,7 +71,8 @@ export class ThemeApiImpl extends ApiBase {
         this.showModulePopup(ModuleConstants.ThemeModuleId);
     }
     getAgGridCurrentThemeName() {
-        return this._adaptable.getAgGridCurrentThemeName();
+        logDeprecation(this._adaptable.logger, 'ThemeApi', 'getAgGridCurrentThemeName', null, `This is required only for AG Grid's legacy themes. See https://www.ag-grid.com/javascript-data-grid/theming-v32/`);
+        return this._adaptable.agGridThemeAdapter.getAgGridCurrentThemeClassNames();
     }
     editTheme(theme) {
         this.dispatchAction(ThemeRedux.ThemeEdit(theme));

package/src/Api/Internal/RowFormInternalApi.js

@@ -187,7 +187,7 @@ export class RowFormInternalApi extends ApiBase {
         }
         const returnValues = this.getGridApi().internalApi.getDistinctDisplayValuesForColumnOld(column.columnId);
         // FIXME add support for asynchronous custom select cell editor values
-        // it involves refactoring the AdaptableForm & AdapatableFormComponent
+        // it involves refactoring the AdaptableForm & adaptableFormComponent
         // await this.getSelectCellEditorValuesForColumn(
         //   column,
         //   gridCell

package/src/Api/ThemeApi.d.ts

@@ -81,6 +81,8 @@ export interface ThemeApi {
     openThemeSettingsPanel(): void;
     /**
      * Get the name of the current AG Grid theme
+     *
+     * @deprecated required only for legacy AG Grid themes, see https://www.ag-grid.com/javascript-data-grid/theming-v32/
      */
     getAgGridCurrentThemeName(): string;
 }

package/src/PredefinedConfig/AlertState.d.ts

@@ -150,4 +150,4 @@ export type SystemAlertPredicateIds = SystemAlertPredicateId[];
 /**
  * List of System Predicates available for Alerts
  */
-export type SystemAlertPredicateId = 'Blanks' | 'NonBlanks' | 'Equals' | 'NotEquals' | 'GreaterThan' | 'LessThan' | 'Positive' | 'Negative' | 'Zero' | 'Between' | 'NotBetween' | 'Is' | 'IsNot' | 'Contains' | 'NotContains' | 'StartsWith' | 'EndsWith' | 'Regex' | 'Today' | 'Yesterday' | 'Tomorrow' | 'ThisWeek' | 'ThisMonth' | 'ThisQuarter' | 'ThisYear' | 'InPast' | 'InFuture' | 'Before' | 'After' | 'On' | 'NotOn' | 'NextWorkDay' | 'LastWorkDay' | 'WorkDay' | 'Holiday' | 'True' | 'False' | 'PercentChange' | 'IsNumeric' | 'IsNotNumeric' | 'In' | 'NotIn' | 'AnyChange';
+export type SystemAlertPredicateId = 'Blanks' | 'NonBlanks' | 'Equals' | 'NotEquals' | 'GreaterThan' | 'LessThan' | 'Positive' | 'Negative' | 'Zero' | 'Between' | 'NotBetween' | 'Is' | 'IsNot' | 'Contains' | 'NotContains' | 'StartsWith' | 'EndsWith' | 'Regex' | 'Today' | 'Yesterday' | 'Tomorrow' | 'ThisWeek' | 'ThisMonth' | 'ThisQuarter' | 'ThisYear' | 'InPast' | 'InFuture' | 'Before' | 'After' | 'On' | 'NotOn' | 'NextWorkDay' | 'LastWorkDay' | 'WorkDay' | 'Holiday' | 'True' | 'False' | 'PercentChange' | 'In' | 'NotIn' | 'AnyChange';

package/src/PredefinedConfig/Common/AdaptablePredicate.js

@@ -266,22 +266,6 @@ export const SystemPredicateDefs = [
         toString: ({ inputs }) => `Not Between ${inputs[0] ?? ''}:${inputs[1]}`,
         shortcuts: ['!:'],
     },
-    {
-        id: 'IsNumeric',
-        label: 'Is Numeric',
-        icon: { text: '1' },
-        columnScope: { DataTypes: ['number'] },
-        moduleScope: ['alert', 'flashingcell'],
-        handler: ({ value }) => !isNaN(Number(value)),
-    },
-    {
-        id: 'IsNotNumeric',
-        label: 'Is Not Numeric',
-        icon: { text: '1' },
-        columnScope: { DataTypes: ['number'] },
-        moduleScope: ['alert', 'flashingcell'],
-        handler: ({ value }) => isNaN(Number(value)),
-    },
     // String System Filters
     {
         id: 'Is',

package/src/PredefinedConfig/FlashingCellState.d.ts

@@ -72,4 +72,4 @@ export type SystemFlashingCellPredicateIds = SystemFlashingCellPredicateId[];
 /**
  * List of System Predicates available for Flashing Cells
  */
-export type SystemFlashingCellPredicateId = 'Blanks' | 'NonBlanks' | 'Equals' | 'NotEquals' | 'GreaterThan' | 'LessThan' | 'Positive' | 'Negative' | 'Zero' | 'Between' | 'NotBetween' | 'Is' | 'IsNot' | 'Contains' | 'NotContains' | 'StartsWith' | 'EndsWith' | 'Regex' | 'Today' | 'Yesterday' | 'Tomorrow' | 'ThisWeek' | 'ThisMonth' | 'ThisQuarter' | 'ThisYear' | 'InPast' | 'InFuture' | 'Before' | 'After' | 'On' | 'NotOn' | 'NextWorkDay' | 'LastWorkDay' | 'WorkDay' | 'Holiday' | 'True' | 'False' | 'PercentChange' | 'IsNumeric' | 'IsNotNumeric' | 'In' | 'NotIn' | 'AnyChange';
+export type SystemFlashingCellPredicateId = 'Blanks' | 'NonBlanks' | 'Equals' | 'NotEquals' | 'GreaterThan' | 'LessThan' | 'Positive' | 'Negative' | 'Zero' | 'Between' | 'NotBetween' | 'Is' | 'IsNot' | 'Contains' | 'NotContains' | 'StartsWith' | 'EndsWith' | 'Regex' | 'Today' | 'Yesterday' | 'Tomorrow' | 'ThisWeek' | 'ThisMonth' | 'ThisQuarter' | 'ThisYear' | 'InPast' | 'InFuture' | 'Before' | 'After' | 'On' | 'NotOn' | 'NextWorkDay' | 'LastWorkDay' | 'WorkDay' | 'Holiday' | 'True' | 'False' | 'PercentChange' | 'In' | 'NotIn' | 'AnyChange';

package/src/PredefinedConfig/LayoutState.d.ts

@@ -51,7 +51,7 @@ export interface LayoutBase extends AdaptableObject {
      */
     ColumnHeaders?: ColumnStringMap;
     /**
-     * Whether to include aggFunc name in the Column header: e.g. 'sum(Price)' will just be 'Price'
+     * Whether to include aggFunc name in Column header: e.g. 'sum(Price)' becomes 'Price'
      */
     SuppressAggFuncInHeader?: boolean;
     /**
@@ -88,7 +88,7 @@ export interface TableLayout extends LayoutBase {
      */
     RowSummaries?: RowSummary[];
     /**
-     * Columns showing aggregated values in Group Rows; 1st value in record is Column name, 2nd is either aggfunc (e.g. sum, avg etc.) or 'true' (to use default aggfunc)
+     * Columns showing aggregated values in Grouped Rows; a record of ColumnId and aggfunc (e.g. sum) or 'true' (to use default aggfunc)
      */
     TableAggregationColumns?: TableAggregationColumns;
     /**

package/src/Utilities/Services/ThemeService.d.ts

@@ -5,10 +5,10 @@ export declare class ThemeService implements IThemeService {
     private unsubscribe;
     private styleSheetObject;
     constructor(api: AdaptableApi);
+    destroy(): void;
     subscribe(): void;
     onThemeChanged: () => void;
     applyNewThemeVariables(theme: AdaptableTheme): void;
-    destroy(): void;
     showMissingThemeFiles(theme: AdaptableTheme): void;
     getDOMPrefferedColorScheme(): 'dark' | 'light';
     mapOsTheme(theme: AdaptableTheme | string): AdaptableTheme;

package/src/Utilities/Services/ThemeService.js

@@ -20,6 +20,11 @@ export class ThemeService {
             ];
         }
     }
+    destroy() {
+        this.api = null;
+        this.unsubscribe();
+        document.adoptedStyleSheets = [...document.adoptedStyleSheets].filter((sheet) => sheet !== this.styleSheetObject);
+    }
     subscribe() {
         const themeChangedUnsubscribe = this.api.eventApi.on('ThemeChanged', this.onThemeChanged);
         const prefferedColorSchemeUnsubscribe = this.attachPrefferedColorSchemeListener();
@@ -44,11 +49,6 @@ export class ThemeService {
         str += '}';
         this.styleSheetObject.replaceSync(str);
     }
-    destroy() {
-        this.api = null;
-        this.unsubscribe();
-        document.adoptedStyleSheets = [...document.adoptedStyleSheets].filter((sheet) => sheet !== this.styleSheetObject);
-    }
     showMissingThemeFiles(theme) {
         // run time defined theme
         // because it may be an empty theme

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -54,7 +54,10 @@ class DataChangeHistoryPopupComponent extends React.Component {
                 this.props.api.dataChangeHistoryApi.clearDataChangeHistoryEntry(changeToBeUndone);
             }
         };
-        const currentAgGridTheme = this.props.api.themeApi.getAgGridCurrentThemeName();
+        const agGridThemeMode = this.props.api.internalApi
+            .getAdaptableInstance()
+            .agGridThemeAdapter.getAgGridThemeMode();
+        const currentAgGridTheme = agGridThemeMode === 'legacy' ? this.props.api.themeApi.getAgGridCurrentThemeName() : '';
         return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
                 React.createElement(Flex, { style: {

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -10,7 +10,9 @@ import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
 import { ADAPTABLE_VERSION } from '../../../EnvVars';
-const version = ADAPTABLE_VERSION;
+import { AG_GRID_VERSION } from '../../../agGrid/agGridModules';
+const adaptableVersion = ADAPTABLE_VERSION;
+const agGridVersion = AG_GRID_VERSION;
 export const GridInfoPopup = (props) => {
     const api = props.api;
     const CreateGridSummaries = (colItems) => {
@@ -33,7 +35,10 @@ export const GridInfoPopup = (props) => {
             : null;
         const selectedRowInfo = api.gridApi.getSelectedRowInfo();
         if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
-            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version));
+            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', adaptableVersion));
+        }
+        if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
+            returnRows.push(createReadOnlyColItem(colItems, 'AG Grid Version', agGridVersion));
         }
         returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -29,6 +29,7 @@ import { RowFormService } from '../Utilities/Services/RowFormService';
 import { GridCellWithCount } from '../PredefinedConfig/Selection/GridCell';
 import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
+import { AgGridThemeAdapter } from './AgGridThemeAdapter';
 export type AdaptableLifecycleState = 'initial' | 'preprocessOptions' | 'initAdaptableState' | 'setupAgGrid' | 'initAgGrid' | 'agGridReady' | 'available' | 'ready' | 'preDestroyed';
 type RenderAgGridFrameworkComponentResult = false | GridApi;
 interface AdaptableInitInternalConfig<TData = any> {
@@ -70,6 +71,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     agGridColumnAdapter: AgGridColumnAdapter;
     agGridMenuAdapter: AgGridMenuAdapter;
     agGridExportAdapter: AgGridExportAdapter;
+    agGridThemeAdapter: AgGridThemeAdapter;
     private DANGER_USE_GETTER_adaptableContainerElement;
     private DANGER_USE_GETTER_agGridContainerElement;
     api: AdaptableApi;
@@ -295,8 +297,6 @@ export declare class AdaptableAgGrid implements IAdaptable {
     isGridGroupingActive(): boolean;
     setAgGridQuickSearch(searchText: string): void;
     clearAgGridQuickSearch(): void;
-    getAgGridCurrentThemeName(): string;
-    private getAgGridLightThemeName;
     applyAdaptableTheme(theme: AdaptableTheme | string): void;
     setRowGroupColumns(columnIds: string[]): void;
     getAllGridColumns(): Column<any>[];

package/src/agGrid/AdaptableAgGrid.js

@@ -8,7 +8,7 @@ import Emitter from '../Utilities/Emitter';
 import { applyDefaultAdaptableOptions } from '../AdaptableOptions/DefaultAdaptableOptions';
 import { AgGridAdapter } from './AgGridAdapter';
 import * as GeneralConstants from '../Utilities/Constants/GeneralConstants';
-import { AUTOGENERATED_PK_COLUMN, DARK_THEME, ERROR_LAYOUT, GROUP_PATH_SEPARATOR, HALF_SECOND, LIGHT_THEME, QUARTER_SECOND, } from '../Utilities/Constants/GeneralConstants';
+import { AUTOGENERATED_PK_COLUMN, ERROR_LAYOUT, GROUP_PATH_SEPARATOR, HALF_SECOND, QUARTER_SECOND, } from '../Utilities/Constants/GeneralConstants';
 import { DataService } from '../Utilities/Services/DataService';
 import { AdaptableStore } from '../Redux/Store/AdaptableStore';
 import { AdaptableApiImpl } from '../Api/Implementation/AdaptableApiImpl';
@@ -95,6 +95,7 @@ import { LayoutManager } from '../layout-manager/src';
 import { isPivotLayoutModel } from '../layout-manager/src/isPivotLayoutModel';
 import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../PredefinedConfig/Common/AdaptableColumn';
 import { agGridDataTypeDefinitions } from './agGridDataTypeDefinitions';
+import { AgGridThemeAdapter } from './AgGridThemeAdapter';
 const LocalEventService_Prototype = LocalEventService.prototype;
 const LocalEventService_dispatchEvent = LocalEventService_Prototype.dispatchEvent;
 LocalEventService_Prototype.dispatchEvent = function (event) {
@@ -169,6 +170,7 @@ export class AdaptableAgGrid {
         this.agGridMenuAdapter = new AgGridMenuAdapter(this);
         this.agGridColumnAdapter = new AgGridColumnAdapter(this);
         this.agGridExportAdapter = new AgGridExportAdapter(this);
+        this.agGridThemeAdapter = new AgGridThemeAdapter(this);
         this.DataService = new DataService(this);
     }
     static forEachAdaptable(fn) {
@@ -596,12 +598,12 @@ You need to define at least one Layout!`);
             this.agGridAdapter.setAgGridId(agGridId);
             return agGridId;
         });
-        // FIXME AFL: handle both ThemingApi and legacy CSS
         /**
          * `theme`
          */
-        this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'theme', (original_gridId) => {
-            return 'legacy';
+        this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'theme', (original_theme) => {
+            this.agGridThemeAdapter.setAgGridThemeMode(original_theme === 'legacy' ? 'legacy' : 'themingApi');
+            return original_theme;
         });
         /**
          *  `getRowId`
@@ -718,7 +720,7 @@ You need to define at least one Layout!`);
                 if (this.isGroupRowNode(node)) {
                     return true;
                 }
-                // first assess if the Row is filterable - if not, then return true so it appears in Grid
+                // first assess if the Row i s filterable - if not, then return true so it appears in Grid
                 const isRowFilterable = this.api.optionsApi.getFilterOptions().isRowFilterable;
                 if (typeof isRowFilterable === 'function') {
                     const rowFilterableContext = {
@@ -2576,40 +2578,6 @@ You need to define at least one Layout!`);
     clearAgGridQuickSearch() {
         this.setAgGridQuickSearch('');
     }
-    getAgGridCurrentThemeName() {
-        const container = this.getAgGridContainerElement();
-        if (container && container.classList) {
-            // we detect the ag theme class
-            const classList = container.classList;
-            for (let i = 0, len = classList.length; i < len; i++) {
-                const cls = classList[i];
-                if (cls.indexOf('ag-theme-') === 0) {
-                    return cls;
-                }
-            }
-        }
-        return this.getAgGridLightThemeName();
-    }
-    getAgGridLightThemeName() {
-        const container = this.getAgGridContainerElement();
-        if (container && container.classList) {
-            // we detect the ag theme class
-            const classList = container.classList;
-            for (let i = 0, len = classList.length; i < len; i++) {
-                const cls = classList[i];
-                if (cls.indexOf('ag-theme-') === 0) {
-                    // even if dark theme is included, we compute the light theme name out of it
-                    return cls.replace('-dark', '');
-                }
-            }
-        }
-        else {
-            this.logger.warn('No AgGrid container found, defaulting to ag-theme-balham for the light theme');
-        }
-        this.logger.warn('No ag-theme- class found on the grid container, defaulting to ag-theme-balham');
-        // fallback to the default light theme
-        return 'ag-theme-balham';
-    }
     applyAdaptableTheme(theme) {
         const container = this.getAgGridContainerElement();
         if (container != null) {
@@ -2674,41 +2642,8 @@ You need to define at least one Layout!`);
         else if (variantTheme) {
             el.classList.add(`infinite-${variantTheme}`);
         }
-        // AG THEME CLASS NAME
-        const getAgGridLightThemeName = () => this.getAgGridLightThemeName();
-        const getAgGridDarkThemeName = () => getAgGridLightThemeName() + '-dark';
-        if (newTheme && (isSystemTheme || variantTheme)) {
-            if ((variantTheme || themeName) === LIGHT_THEME) {
-                newTheme.AgGridClassName = newTheme.AgGridClassName || getAgGridLightThemeName();
-            }
-            if ((variantTheme || themeName) === DARK_THEME) {
-                newTheme.AgGridClassName = newTheme.AgGridClassName || getAgGridDarkThemeName();
-            }
-        }
-        if (!newTheme.AgGridClassName) {
-            // default AG Grid to its light theme
-            newTheme.AgGridClassName = getAgGridLightThemeName();
-        }
-        if (container != null) {
-            if (themesToRemove.length) {
-                themesToRemove.forEach((theme) => {
-                    if (theme.AgGridClassName) {
-                        container.classList.remove(theme.AgGridClassName);
-                    }
-                });
-            }
-            // also remove all AG Grid theme class names
-            const agGridClassNamesToRemove = [];
-            container.classList.forEach((x) => {
-                if (x && x.indexOf('ag-theme-') === 0) {
-                    agGridClassNamesToRemove.push(x);
-                }
-            });
-            agGridClassNamesToRemove.forEach((x) => container.classList.remove(x));
-            if (newTheme && newTheme.AgGridClassName) {
-                container.classList.add(newTheme.AgGridClassName);
-            }
-        }
+        // Update AG THEME
+        this.agGridThemeAdapter.applyAgGridThemeOnAdaptableThemeChange(newTheme, variantTheme, container, themesToRemove);
         // MAC LIKE SCROLLBARS
         if (this.adaptableOptions.userInterfaceOptions &&
             this.adaptableOptions.userInterfaceOptions.useCustomMacLikeScrollbars &&
@@ -2902,6 +2837,8 @@ You need to define at least one Layout!`);
         this.agGridColumnAdapter = null;
         this.agGridExportAdapter?.destroy();
         this.agGridExportAdapter = null;
+        this.agGridThemeAdapter?.destroy();
+        this.agGridThemeAdapter = null;
         this.rowListeners = null;
         this.emitter.destroy();
         this.emitter = null;

package/src/agGrid/AgGridAdapter.d.ts

@@ -3,6 +3,7 @@ import { AdaptableAgGrid } from './AdaptableAgGrid';
 import { AdaptableColumn, AdaptableColumnGroup } from '../PredefinedConfig/Common/AdaptableColumn';
 import { SelectedCellInfo } from '../PredefinedConfig/Selection/SelectedCellInfo';
 import { SelectedRowInfo } from '../PredefinedConfig/Selection/SelectedRowInfo';
+export type AgGridThemeMode = 'legacy' | 'themingApi';
 export declare class AgGridAdapter {
     private _adaptableInstance;
     private DANGER_USE_GETTER_gridApi;
@@ -45,7 +46,6 @@ export declare class AgGridAdapter {
     deriveSelectedCellInfoFromAgGrid(): SelectedCellInfo;
     deriveSelectedRowInfoFromAgGrid(): SelectedRowInfo;
     isPinnedRowNode(rowNode: IRowNode): boolean;
-    getFirstGroupedColumn(): string | undefined;
     createAdaptableColumnFromAgGridColumn(agGridColumn: Column, colsToGroups: Record<string, AdaptableColumnGroup>): AdaptableColumn;
     private deriveAdaptableColumnDataType;
     private isColumnReadonly;

package/src/agGrid/AgGridAdapter.js

@@ -1,6 +1,6 @@
 import { ColumnApiModule, } from 'ag-grid-enterprise';
 import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../PredefinedConfig/Common/AdaptableColumn';
-import { ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME } from '../Utilities/Constants/GeneralConstants';
+import { ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME, } from '../Utilities/Constants/GeneralConstants';
 import { createUuid } from '../PredefinedConfig/Uuid';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
@@ -367,10 +367,6 @@ export class AgGridAdapter {
         }
         return false;
     }
-    // TODO AFL MIG rename to getFirstGroupedColumnId()
-    getFirstGroupedColumn() {
-        return this.getAgGridApi?.()?.getRowGroupColumns()?.[0]?.getColId();
-    }
     createAdaptableColumnFromAgGridColumn(agGridColumn, colsToGroups) {
         const colId = agGridColumn.getColId();
         const colDef = agGridColumn.getColDef();
@@ -525,7 +521,7 @@ export class AgGridAdapter {
         else if (Array.isArray(value)) {
             const arrayDataType = ALL_ADAPTABLE_DATA_TYPES.find((arrayType) => {
                 const dataTypeDefinition = agGridDataTypeDefinitions[arrayType];
-                const dataTypeMatching = dataTypeDefinition.dataTypeMatcher(value);
+                const dataTypeMatching = dataTypeDefinition?.dataTypeMatcher(value);
                 return dataTypeMatching;
             });
             if (arrayDataType) {

package/src/agGrid/AgGridColumnAdapter.js

@@ -138,8 +138,6 @@ export class AgGridColumnAdapter {
             this.setupColumnQuickFilerText(colSetupInfo);
             this.setupColumnAllowedAggFuncs(colSetupInfo);
             this.setupColumnType(colSetupInfo);
-            // this is just to make sure that AG Grid does NOT infer the cellDataType
-            // https://github.com/AdaptableTools/adaptable/issues/2230 should render it obsolete
             this.setupColumnCellDataType(colSetupInfo);
         });
     }
@@ -375,8 +373,6 @@ export class AgGridColumnAdapter {
     }
     setupColumnCellDataType(columnSetupInfo) {
         const { col } = columnSetupInfo;
-        // AG Grid introduced since v30.x an inferred cellDataType
-        // the problem is that it breaks the default value formatter and/or editor (especially for Date columns)
         this.setColDefProperty(col, 'cellDataType', (original_cellDataType) => {
             return original_cellDataType ?? true;
         });

package/src/agGrid/AgGridThemeAdapter.d.ts

@@ -0,0 +1,19 @@
+import { AdaptableAgGrid } from './AdaptableAgGrid';
+import { AgGridThemeMode } from './AgGridAdapter';
+import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
+export declare class AgGridThemeAdapter {
+    private _adaptableInstance;
+    private agGridThemeMode;
+    constructor(_adaptableInstance: AdaptableAgGrid);
+    destroy(): void;
+    get logger(): import("./AdaptableLogger").AdaptableLogger;
+    get api(): import("../types").AdaptableApi;
+    setAgGridThemeMode(themeMode: AgGridThemeMode): void;
+    getAgGridThemeMode(): AgGridThemeMode;
+    applyAgGridThemeOnAdaptableThemeChange(adaptableTheme: AdaptableTheme, variantTheme: string, agGridContainer: HTMLElement, themesToRemove: AdaptableTheme[]): void;
+    private getAgGridContainerElement;
+    private legacy_applyAgGridThemeOnAdaptableThemeChange;
+    getAgGridCurrentThemeClassNames(): string;
+    private getAgGridLightThemeName;
+    private legacy_getAgGridCurrentThemeClassNames;
+}

package/src/agGrid/AgGridThemeAdapter.js

@@ -0,0 +1,122 @@
+import { DARK_THEME, LIGHT_THEME } from '../Utilities/Constants/GeneralConstants';
+export class AgGridThemeAdapter {
+    constructor(_adaptableInstance) {
+        this._adaptableInstance = _adaptableInstance;
+    }
+    destroy() { }
+    get logger() {
+        return this._adaptableInstance.logger;
+    }
+    get api() {
+        return this._adaptableInstance.api;
+    }
+    setAgGridThemeMode(themeMode) {
+        this.agGridThemeMode = themeMode;
+    }
+    getAgGridThemeMode() {
+        return this.agGridThemeMode;
+    }
+    applyAgGridThemeOnAdaptableThemeChange(adaptableTheme, variantTheme, agGridContainer, themesToRemove) {
+        if (this.agGridThemeMode === 'legacy') {
+            this.legacy_applyAgGridThemeOnAdaptableThemeChange(adaptableTheme, variantTheme, agGridContainer, themesToRemove);
+        }
+        const themeName = adaptableTheme.Name;
+        const isSystemTheme = this.api.themeApi.internalApi.isSystemTheme(themeName);
+        if (adaptableTheme && (isSystemTheme || variantTheme)) {
+            if ((variantTheme || themeName) === LIGHT_THEME) {
+                document.body.dataset.agThemeMode = 'light';
+            }
+            if ((variantTheme || themeName) === DARK_THEME) {
+                document.body.dataset.agThemeMode = 'dark';
+            }
+        }
+    }
+    getAgGridContainerElement() {
+        return this._adaptableInstance.getAgGridContainerElement();
+    }
+    legacy_applyAgGridThemeOnAdaptableThemeChange(adaptableTheme, variantTheme, agGridContainer, themesToRemove) {
+        const themeName = adaptableTheme.Name;
+        const isSystemTheme = this.api.themeApi.internalApi.isSystemTheme(themeName);
+        const getAgGridLightThemeName = () => this.getAgGridLightThemeName();
+        const getAgGridDarkThemeName = () => getAgGridLightThemeName() + '-dark';
+        if (adaptableTheme && (isSystemTheme || variantTheme)) {
+            if ((variantTheme || themeName) === LIGHT_THEME) {
+                adaptableTheme.AgGridClassName =
+                    adaptableTheme.AgGridClassName || getAgGridLightThemeName();
+            }
+            if ((variantTheme || themeName) === DARK_THEME) {
+                adaptableTheme.AgGridClassName = adaptableTheme.AgGridClassName || getAgGridDarkThemeName();
+            }
+        }
+        if (!adaptableTheme.AgGridClassName) {
+            // default AG Grid to its light theme
+            adaptableTheme.AgGridClassName = getAgGridLightThemeName();
+        }
+        if (agGridContainer != null) {
+            if (themesToRemove.length) {
+                themesToRemove.forEach((theme) => {
+                    if (theme.AgGridClassName) {
+                        agGridContainer.classList.remove(theme.AgGridClassName);
+                    }
+                });
+            }
+            // also remove all AG Grid theme class names
+            const agGridClassNamesToRemove = [];
+            agGridContainer.classList.forEach((x) => {
+                if (x && x.indexOf('ag-theme-') === 0) {
+                    agGridClassNamesToRemove.push(x);
+                }
+            });
+            agGridClassNamesToRemove.forEach((x) => agGridContainer.classList.remove(x));
+            if (adaptableTheme && adaptableTheme.AgGridClassName) {
+                agGridContainer.classList.add(adaptableTheme.AgGridClassName);
+            }
+        }
+    }
+    getAgGridCurrentThemeClassNames() {
+        if (this.agGridThemeMode === 'legacy') {
+            this.legacy_getAgGridCurrentThemeClassNames();
+        }
+        const currentAgGridTheme = this._adaptableInstance.agGridAdapter.getGridOption('theme');
+        if (currentAgGridTheme === 'legacy') {
+            return this.legacy_getAgGridCurrentThemeClassNames();
+        }
+        // @ts-ignore no other way than to use internals
+        const currentAgGridTheme__cssClassCache = currentAgGridTheme?._cssClassCache;
+        return currentAgGridTheme__cssClassCache ?? '';
+    }
+    getAgGridLightThemeName() {
+        const container = this.getAgGridContainerElement();
+        if (container && container.classList) {
+            // we detect the ag theme class
+            const classList = container.classList;
+            for (let i = 0, len = classList.length; i < len; i++) {
+                const cls = classList[i];
+                if (cls.indexOf('ag-theme-') === 0) {
+                    // even if dark theme is included, we compute the light theme name out of it
+                    return cls.replace('-dark', '');
+                }
+            }
+        }
+        else {
+            this.logger.warn('No AgGrid container found, defaulting to ag-theme-balham for the light theme');
+        }
+        this.logger.warn('No ag-theme- class found on the grid container, defaulting to ag-theme-balham');
+        // fallback to the default light theme
+        return 'ag-theme-balham';
+    }
+    legacy_getAgGridCurrentThemeClassNames() {
+        const container = this.getAgGridContainerElement();
+        if (container && container.classList) {
+            // we detect the ag theme class
+            const classList = container.classList;
+            for (let i = 0, len = classList.length; i < len; i++) {
+                const cls = classList[i];
+                if (cls.indexOf('ag-theme-') === 0) {
+                    return cls;
+                }
+            }
+        }
+        return this.getAgGridLightThemeName();
+    }
+}

package/src/components/OverlayTrigger/useAgGridClassName.js

@@ -4,7 +4,7 @@ const useAgGridClassName = (deps = []) => {
     const adaptable = useAdaptable();
     return useMemo(() => {
         if (adaptable) {
-            return adaptable.getAgGridCurrentThemeName();
+            return adaptable.agGridThemeAdapter.getAgGridCurrentThemeClassNames();
         }
         return '';
     }, deps);