@adaptabletools/adaptable 20.0.0-canary.9 → 20.0.1

package/src/agGrid/AdaptableAgGrid.js

@@ -24,7 +24,7 @@ import { AlertService } from '../Utilities/Services/AlertService';
 import { TeamSharingService } from '../Utilities/Services/TeamSharingService';
 import { MetamodelService } from '../Utilities/Services/MetamodelService';
 import { LicenseService } from '../Utilities/Services/LicenseService';
-import { ALL_TOOL_PANELS } from '../PredefinedConfig/Common/Types';
+import { ALL_TOOL_PANELS } from '../AdaptableState/Common/Types';
 import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
 import { GridFilterModuleId } from '../Utilities/Constants/ModuleConstants';
 import { DashboardModule } from '../Strategy/DashboardModule';
@@ -67,7 +67,7 @@ import { Helper } from '../Utilities/Helpers/Helper';
 import { createUuid } from '../components/utils/uuid';
 import UIHelper from '../View/UIHelper';
 import { getAdaptableToolPanelAgGridComponent } from '../View/Components/ToolPanel/AdaptableToolPanel';
-import { ADAPTABLE_STATUS_PANEL } from '../PredefinedConfig/StatusBarState';
+import { ADAPTABLE_STATUS_PANEL } from '../AdaptableState/StatusBarState';
 import { AdaptableStatusBar } from '../View/StatusBar/AdaptableStatusBar';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { AgGridMenuAdapter } from './AgGridMenuAdapter';
@@ -77,9 +77,9 @@ import { AgGridOptionsService } from './AgGridOptionsService';
 import { parseDateValue } from '../Utilities/Helpers/DateHelper';
 import { AgGridColumnAdapter } from './AgGridColumnAdapter';
 import getScrollbarSize from '../Utilities/getScrollbarSize';
-import { WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../PredefinedConfig/Common/AggregationColumns';
+import { WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../AdaptableState/Common/AggregationColumns';
 import { RowFormService } from '../Utilities/Services/RowFormService';
-import { FilterOnDataChangeOptions } from '../PredefinedConfig/Common/Enums';
+import { FilterOnDataChangeOptions } from '../AdaptableState/Common/Enums';
 import { ADAPTABLE_PUBLISH_TIMESTAMP } from '../EnvVars';
 import { AdaptableUpgradeHelper } from '../migration/AdaptableUpgradeHelper';
 import { ensureLoadingScreenPortalElement } from '../components/Modal';
@@ -87,18 +87,24 @@ import { AdaptableLoadingScreen } from '../View/Components/Popups/AdaptableLoadi
 import { createElement } from 'react';
 import { createAgStatusPanelComponent } from '../Utilities/createAgStatusPanelComponent';
 import { weightedAverage } from '../Utilities/weightedAverage';
-import { ROW_SUMMARY_ROW_ID } from '../PredefinedConfig/Common/RowSummary';
+import { ROW_SUMMARY_ROW_ID } from '../AdaptableState/Common/RowSummary';
 import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
 import { checkForDuplicateColumns, isPivotLayout, layoutModelToLayoutState, layoutStateToLayoutModel, normalizeLayout, tableLayoutToTableLayoutModel, } from '../Api/Implementation/LayoutHelpers';
 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 { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
 import { agGridDataTypeDefinitions } from './agGridDataTypeDefinitions';
 import { AgGridThemeAdapter } from './AgGridThemeAdapter';
+import { mapOldTypeToDataType } from '../migration/VersionUpgrade20';
 const LocalEventService_Prototype = LocalEventService.prototype;
 const LocalEventService_dispatchEvent = LocalEventService_Prototype.dispatchEvent;
 LocalEventService_Prototype.dispatchEvent = function (event) {
+    const agGridApi = event.api;
+    if (agGridApi?.isDestroyed()) {
+        // do nothing if AG Grid was destroyed in the meantime
+        return;
+    }
     LocalEventService_dispatchEvent.apply(this, arguments);
     if (event.type === 'cellChanged' || event.type === 'dataChanged') {
         const eventRowNode = event.node;
@@ -118,6 +124,10 @@ LocalEventService_Prototype.dispatchEvent = function (event) {
                     // so IGNORE IT
                     return;
                 }
+                if (adaptable.isDestroyed) {
+                    // do nothing if adaptable is destroyed (this is a rare case and happens when Adaptable is quickly destroyed and recreated)
+                    return;
+                }
                 // we're on the correct instance, so do this
                 //@ts-ignore
                 const fn = adaptable.rowListeners ? adaptable.rowListeners[event.type] : null;
@@ -309,11 +319,13 @@ export class AdaptableAgGrid {
              */
             postLoadHook: (state) => {
                 if (this.adaptableOptions.stateOptions.autoMigrateState) {
-                    state = AdaptableUpgradeHelper.migrateAdaptableState(state, {
+                    this.api.logError;
+                    const config = {
                         // version 16 actually includes all versions up until 16
                         fromVersion: 16,
                         logger: this.logger,
-                    });
+                    };
+                    state = AdaptableUpgradeHelper.migrateAdaptableState(state, config);
                 }
                 state = this.normalizeAdaptableState(state, config.gridOptions);
                 return state;
@@ -353,9 +365,10 @@ export class AdaptableAgGrid {
         this.lifecycleState = 'initAgGrid';
         this.agGridAdapter.initialGridOptions = gridOptions;
         const perfInitAgGrid = this.logger.beginPerf(`initAgGrid()`);
-        // AG Grid evaluates early on the floatingFilter params, so we need to "suppres" the floating filter temporarily
+        // AG Grid evaluates early on the floatingFilter params, so we need to "suppress" the floating filter temporarily
         // we will reset it once Adaptable is ready
         this.agGridColumnAdapter.setupColumnFloatingFilterTemporarily(gridOptions);
+        this.validateColumnDefTypes(gridOptions.columnDefs);
         const agGridApi = await this.initializeAgGrid(gridOptions, config.modules, config.renderAgGridFrameworkComponent);
         if (agGridApi === false) {
             this.midwayDestroy();
@@ -482,7 +495,7 @@ export class AdaptableAgGrid {
         // ensure that at least one Layout has been provided
         if (!layoutState || !layoutState.Layouts?.length) {
             this.logger
-                .consoleError(`You have not defined any Layout in your predefinedConfig.Layout.Layouts[] state!
+                .consoleError(`You have not defined any Layout in your InitialState.Layout.Layouts[] state!
 
 You need to define at least one Layout!`);
         }
@@ -516,7 +529,7 @@ You need to define at least one Layout!`);
                 isTree: !!gridOptions.treeData,
             };
             // it's very important that we do this here
-            // as the layout may not be fully specified in the predefinedConfig
+            // as the layout may not be fully specified in the initialState
             // eg: might not include the generated row group columns in the column order
             // but the normalization does this for us
             state.Layout.Layouts = state.Layout.Layouts.map((layout) => normalizeLayout(layout, normalizeOptions));
@@ -527,7 +540,7 @@ You need to define at least one Layout!`);
         if (state?.ToolPanel?.ToolPanels) {
             return state;
         }
-        // no predefined config provided, we will display all the panels collapsed (custom & module)
+        // no Initial Adaptable State provided, we will display all the panels collapsed (custom & module)
         const defaultToolPanels = [];
         this.adaptableOptions.toolPanelOptions?.customToolPanels?.forEach((customToolPanel) => defaultToolPanels.push({ Name: customToolPanel.name }));
         ALL_TOOL_PANELS.forEach((moduleToolPanel) => defaultToolPanels.push({ Name: moduleToolPanel }));
@@ -537,11 +550,12 @@ You need to define at least one Layout!`);
         return state;
     }
     applyFiltering() {
-        this.agGridAdapter.getAgGridApi().onFilterChanged();
+        const agGridApi = this.agGridAdapter.getAgGridApi();
         this._emit('AdapTableFiltersApplied');
         this.refreshSelectedCellsState();
         this.refreshSelectedRowsState();
         this.agGridAdapter.updateColumnFilterActiveState();
+        agGridApi.onFilterChanged();
     }
     // refreshAgGridWithAdaptableState() {
     //   this.refreshColDefs();
@@ -2621,7 +2635,7 @@ You need to define at least one Layout!`);
         themeClassNamesToRemove.forEach((cssClassName) => el.classList.remove(cssClassName));
         // remove infinite table classnames
         themesToRemove.forEach((theme) => {
-            el.classList.remove(`infinite-${theme.Name}`);
+            el.classList.remove(`infinite-theme-mode--${theme.Name}`);
         });
         // VARIANT
         let variantTheme = '';
@@ -2637,10 +2651,10 @@ You need to define at least one Layout!`);
         }
         if (isSystemTheme) {
             // add infinite table classname for theme
-            el.classList.add(`infinite-${themeName}`);
+            el.classList.add(`infinite-theme-mode--${themeName}`);
         }
         else if (variantTheme) {
-            el.classList.add(`infinite-${variantTheme}`);
+            el.classList.add(`infinite-theme-mode--${variantTheme}`);
         }
         // Update AG THEME
         this.agGridThemeAdapter.applyAgGridThemeOnAdaptableThemeChange(newTheme, variantTheme, container, themesToRemove);
@@ -3288,4 +3302,24 @@ You need to define at least one Layout!`);
         this.__prevLayoutForOnChange = layout;
         this.api.layoutApi.createOrUpdateLayout(layout);
     }
+    validateColumnDefTypes(columnDefs) {
+        // in Adaptable version 20 we switched from colDef.type to colDef.cellDataType
+        // although we documented this change and try to infer the correct cellDataTypes, it's best to also check if the client dev forgot to adjust his colDefs
+        columnDefs.forEach((colDef) => {
+            if (colDef.children?.length) {
+                this.validateColumnDefTypes(colDef.children);
+            }
+            const columnDefinition = colDef;
+            const colDefType = columnDefinition.type;
+            const colDefTypes = typeof colDefType === 'string' ? [colDefType] : colDefType || [];
+            colDefTypes
+                .filter((colType) => colType.startsWith('abColDef'))
+                .forEach((colType) => {
+                const newValidCellDataType = mapOldTypeToDataType(colType);
+                if (newValidCellDataType) {
+                    this.logger.consoleWarn(`Column ${columnDefinition.colId ?? columnDefinition.field} has a type of ${colType} which is no longer in use${newValidCellDataType !== 'unknown' ? `. Please use 'colDef.cellDataType' instead: ${newValidCellDataType}` : ''}`);
+                }
+            });
+        });
+    }
 }

package/src/agGrid/AdaptableLogger.d.ts

@@ -1,4 +1,4 @@
-import { AdaptableMessageType } from '../PredefinedConfig/Common/AdaptableMessageType';
+import { AdaptableMessageType } from '../AdaptableState/Common/AdaptableMessageType';
 export declare const errorOnce: (message: string) => void;
 export declare class AdaptableLogger {
     private adaptableId;

package/src/agGrid/AgGridAdapter.d.ts

@@ -1,8 +1,8 @@
 import { ColDef, ColGroupDef, Column, GridApi, GridOptions, IRowNode, ManagedGridOptionKey, ManagedGridOptions, Module, ModuleName } from 'ag-grid-enterprise';
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { AdaptableColumn, AdaptableColumnGroup } from '../PredefinedConfig/Common/AdaptableColumn';
-import { SelectedCellInfo } from '../PredefinedConfig/Selection/SelectedCellInfo';
-import { SelectedRowInfo } from '../PredefinedConfig/Selection/SelectedRowInfo';
+import { AdaptableColumn, AdaptableColumnGroup } from '../AdaptableState/Common/AdaptableColumn';
+import { SelectedCellInfo } from '../AdaptableState/Selection/SelectedCellInfo';
+import { SelectedRowInfo } from '../AdaptableState/Selection/SelectedRowInfo';
 export type AgGridThemeMode = 'legacy' | 'themingApi';
 export declare class AgGridAdapter {
     private _adaptableInstance;

package/src/agGrid/AgGridAdapter.js

@@ -1,7 +1,7 @@
 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 { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
 import { ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME, } from '../Utilities/Constants/GeneralConstants';
-import { createUuid } from '../PredefinedConfig/Uuid';
+import { createUuid } from '../AdaptableState/Uuid';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
 import { ALL_AG_GRID_MODULES } from './agGridModules';
@@ -168,39 +168,17 @@ export class AgGridAdapter {
         return this.agGridOptionsService.getUserGridOptionsProperty(propertyName);
     }
     updateColumnFilterActiveState() {
+        const filteredCols = new Set();
         const columnFilters = this.adaptableApi.filterApi.columnFilterApi.getActiveColumnFilters();
-        const activeFilters = columnFilters?.filter?.((columnFilter) => this.adaptableApi.filterApi.columnFilterApi.isColumnFilterActive(columnFilter));
-        const isFilterActive = ArrayExtensions.IsNotNullOrEmpty(activeFilters);
-        const columnsWithActiveFilters = {};
-        if (isFilterActive) {
-            // used in particular at init time to show the filter icon correctly
-            for (const colFilter of activeFilters) {
-                // AG Grid exposes the Column interface, but we need the AG Column class
-                const agGridCol = this.getAgGridApi().getColumn(colFilter.ColumnId);
-                if (agGridCol) {
-                    columnsWithActiveFilters[agGridCol.getColId()] = true;
-                    if (!agGridCol.isFilterActive()) {
-                        // FIXME AFL: changed from fn call; is this enough?
-                        agGridCol.filterActive = true;
-                    }
-                }
-            }
-        }
-        const agFilterModel = this.getAgGridApi().getFilterModel();
-        // AG Grid exposes the Column interface, but we need the AG Column class
-        (this.getAgGridApi().getColumns() || []).forEach((col) => {
-            /**
-             * When AG Grid filters are used active state should not be removed for all columns.
-             * Need to check if the column has a filter model.
-             */
-            const isColumnInFilterModel = agFilterModel && agFilterModel[col.getColId()];
-            if (!isColumnInFilterModel &&
-                !columnsWithActiveFilters[col.getColId()] &&
-                col.isFilterActive()) {
-                // FIXME AFL: changed from fn call; is this enough?
-                col.filterActive = false;
+        columnFilters?.forEach?.((columnFilter) => {
+            if (this.adaptableApi.filterApi.columnFilterApi.isColumnFilterActive(columnFilter)) {
+                filteredCols.add(columnFilter.ColumnId);
             }
         });
+        const agGridApi = this.getAgGridApi();
+        (agGridApi.getColumns() || []).forEach((col) => {
+            col.filterActive = filteredCols.has(col.getColId());
+        });
     }
     getColumnDefinitionsInclSpecialColumns(agGridColDefs) {
         const allColDefs = this.enhanceColDefsWithSpecialColumns(agGridColDefs ?? this.getAgGridApi().getColumnDefs());
@@ -470,6 +448,11 @@ export class AgGridAdapter {
             this.logger.warn(`Column is undefined, returning 'text' for Type`);
             return 'text';
         }
+        const colDefType = [].concat(agColumn.getColDef()?.type || []).filter(Boolean);
+        const skippedSpecialCols = ['actionColumn', 'fdc3Column'];
+        if (skippedSpecialCols.some((specialColType) => colDefType.includes(specialColType))) {
+            return 'unknown';
+        }
         let dataType = 'unknown';
         // get the column type if already in store (and not unknown)
         const existingColumn = this.adaptableApi.columnApi.getColumnWithColumnId(agColumn.getId(), logWarning);
@@ -521,7 +504,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.d.ts

@@ -1,7 +1,7 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { ColumnSetupInfo } from '../PredefinedConfig/Common/ColumnSetupInfo';
+import { ColumnSetupInfo } from '../AdaptableState/Common/ColumnSetupInfo';
 import { ColDef, ColGroupDef, Column, GridOptions } from 'ag-grid-enterprise';
-import { AdaptableColumnDataType } from '../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableColumnDataType } from '../AdaptableState/Common/AdaptableColumn';
 import { AdaptableVariant } from '../AdaptableInterfaces/IAdaptable';
 export declare function getEditorForColumnDataType(columnDataType: AdaptableColumnDataType, variant: AdaptableVariant): ColDef['cellEditor'];
 export declare class AgGridColumnAdapter {
@@ -23,7 +23,7 @@ export declare class AgGridColumnAdapter {
     private setupColumnCellEditor;
     private setupColumnCellRenderer;
     private setupColumnTooltipValueGetter;
-    private setupColumnQuickFilerText;
+    private setupColumnQuickFilterText;
     private setupColumnAllowedAggFuncs;
     private setupColumnType;
     private setupColumnCellDataType;

package/src/agGrid/AgGridColumnAdapter.js

@@ -3,7 +3,7 @@ import { FilterWrapperFactory } from './FilterWrapper';
 import { FloatingFilterWrapperFactory } from './FloatingFilterWrapper';
 import { convertAdaptableStyleToCSS, getVariableColor, normalizeStyleForAgGrid, } from '../Utilities/Helpers/StyleHelper';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
-import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../PredefinedConfig/Common/AdaptableColumn';
+import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
 import tinycolor from 'tinycolor2';
 import UIHelper from '../View/UIHelper';
 import { getPercentBarRendererForColumn } from './cellRenderers/PercentBarRenderer';
@@ -135,7 +135,7 @@ export class AgGridColumnAdapter {
             this.setupColumnComparator(colSetupInfo);
             this.setupColumnCellEditor(colSetupInfo);
             this.setupColumnHeader(colSetupInfo);
-            this.setupColumnQuickFilerText(colSetupInfo);
+            this.setupColumnQuickFilterText(colSetupInfo);
             this.setupColumnAllowedAggFuncs(colSetupInfo);
             this.setupColumnType(colSetupInfo);
             this.setupColumnCellDataType(colSetupInfo);
@@ -157,7 +157,7 @@ export class AgGridColumnAdapter {
                 if (!gridCell.column) {
                     return null;
                 }
-                // if a Visual Data export is in progress, we are interested only in the Excel Style Class
+                // if a VisualExcel report format export is in progress, we are interested only in the Excel Style Class
                 if (this.adaptableApi.exportApi.internalApi.isVisualDataExportInProgress()) {
                     const userDefinedCellClass = typeof userCellClass === 'function' ? userCellClass(params) : userCellClass;
                     const cellClassKey = AgGridExportAdapter.getExcelClassNameForCell(colId, gridCell.primaryKeyValue, userDefinedCellClass);
@@ -238,13 +238,6 @@ export class AgGridColumnAdapter {
                 return cellDataTypeEditor;
             }
         });
-        this.setColDefProperty(col, 'cellEditorPopup', () => {
-            // as specified in https://www.ag-grid.com/react-data-grid/provided-cell-editors/#rich-select-cell-editor
-            // agRichSelectCellEditor should always set cellEditorPopup=true. Otherwise the editor will be clipped to the cell contents
-            if (shouldShowSelectCellEditor && hasRichSelectCellEditor) {
-                return true;
-            }
-        });
         this.setColDefProperty(col, 'cellEditorParams', (params) => {
             if (shouldShowSelectCellEditor) {
                 return (params) => {
@@ -325,7 +318,7 @@ export class AgGridColumnAdapter {
             }
         });
     }
-    setupColumnQuickFilerText({ col, abColumn }) {
+    setupColumnQuickFilterText({ col, abColumn }) {
         this.setColDefProperty(col, 'getQuickFilterText', (userGetQuickFilterText) => {
             if (userGetQuickFilterText) {
                 return userGetQuickFilterText;

package/src/agGrid/AgGridExportAdapter.d.ts

@@ -1,8 +1,8 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { Report, ReportFormatType } from '../PredefinedConfig/ExportState';
+import { Report, ReportFormatType } from '../AdaptableState/ExportState';
 import { CsvExportParams, ExcelExportParams, ExcelStyle } from 'ag-grid-enterprise';
 import { ExportDestinationType, ExportResultData } from '../AdaptableOptions/ExportOptions';
-import { Layout } from '../PredefinedConfig/LayoutState';
+import { Layout } from '../AdaptableState/LayoutState';
 export interface ExportConfig {
     report: Report;
     format: ReportFormatType;

package/src/agGrid/AgGridExportAdapter.js

@@ -4,9 +4,9 @@ import { convertCSSAbsoluteFontSizeToPt, getVariableColor, sanitizeStyle, } from
 import { DateFormatter } from '../Utilities/Helpers/FormatHelper';
 import tinycolor from 'tinycolor2';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
-import { createUuid } from '../PredefinedConfig/Uuid';
+import { createUuid } from '../AdaptableState/Uuid';
 import { inferSchema, initParser } from 'udsv';
-import { AG_GRID_GROUPED_COLUMN } from '../Utilities/Constants/GeneralConstants';
+import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../Utilities/Constants/GeneralConstants';
 export class AgGridExportAdapter {
     constructor(_adaptableInstance) {
         this._adaptableInstance = _adaptableInstance;
@@ -452,7 +452,9 @@ export class AgGridExportAdapter {
             formatColumnsWithDisplayFormatMemo[columnId] = formatColumns;
             return formatColumns;
         };
-        const agGridDisplayedColumns = this.agGridApi.getAllDisplayedColumns();
+        const agGridDisplayedColumns = this.agGridApi
+            .getAllDisplayedColumns()
+            .filter((agCol) => agCol.getId() !== AG_GRID_SELECTION_COLUMN);
         const colDefs = agGridDisplayedColumns.map((column) => {
             return column.getColDef();
         });
@@ -472,6 +474,10 @@ export class AgGridExportAdapter {
                 const colDef = colDefs[columnIndex];
                 const columnId = column.getId();
                 const adaptableColumn = getAdaptableColumnWithColumnId(columnId);
+                if (!adaptableColumn) {
+                    this.logger.warn(`Export Styling: Column with id ${columnId} not found in Adaptable`);
+                    return;
+                }
                 const isDateCellExportedAsFormattedValue = this.isDateCellExportedAsFormattedValue(adaptableColumn);
                 let cellClassParams;
                 const getLazyCellClassParams = () => {

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -1,7 +1,7 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
 import { DefaultMenuItem, GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from 'ag-grid-enterprise';
-import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
-import { AdaptableMenuItem } from '../PredefinedConfig/Common/Menu';
+import { AdaptableColumn } from '../AdaptableState/Common/AdaptableColumn';
+import { AdaptableMenuItem } from '../AdaptableState/Common/Menu';
 export declare class AgGridMenuAdapter {
     private _adaptableInstance;
     constructor(_adaptableInstance: AdaptableAgGrid);

package/src/agGrid/AgGridThemeAdapter.d.ts

@@ -1,6 +1,6 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
 import { AgGridThemeMode } from './AgGridAdapter';
-import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
+import { AdaptableTheme } from '../AdaptableState/ThemeState';
 export declare class AgGridThemeAdapter {
     private _adaptableInstance;
     private agGridThemeMode;

package/src/agGrid/AgGridThemeAdapter.js

@@ -24,10 +24,10 @@ export class AgGridThemeAdapter {
         const isSystemTheme = this.api.themeApi.internalApi.isSystemTheme(themeName);
         if (adaptableTheme && (isSystemTheme || variantTheme)) {
             if ((variantTheme || themeName) === LIGHT_THEME) {
-                document.body.dataset.agThemeMode = 'light';
+                document.body.dataset.agThemeMode = adaptableTheme.AgThemeMode ?? 'light';
             }
             if ((variantTheme || themeName) === DARK_THEME) {
-                document.body.dataset.agThemeMode = 'dark';
+                document.body.dataset.agThemeMode = adaptableTheme.AgThemeMode ?? 'dark';
             }
         }
     }

package/src/agGrid/FilterWrapper.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { forwardRef, useImperativeHandle, useState } from 'react';
 import { AdaptableColumnFilter } from '../View/Components/ColumnFilter/AdaptableColumnFilter';
 import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
 export const FilterWrapperFactory = (adaptable) => {
@@ -9,9 +8,7 @@ export const FilterWrapperFactory = (adaptable) => {
             return false;
         }
         //make the small filter icon to appear when there is a filter
-        return (adaptable.api.filterApi.columnFilterApi
-            .getColumnFilters()
-            .findIndex((x) => x.ColumnId == colId) > -1);
+        return adaptable.api.filterApi.columnFilterApi.isColumnFilterActiveForColumn(colId);
     }
     function getFilterProps(colId, hidePopup) {
         let column = adaptable.api.columnApi.getColumnWithColumnId(colId);
@@ -26,35 +23,62 @@ export const FilterWrapperFactory = (adaptable) => {
         return 'filter_' + colId + '_' + adaptable.adaptableOptions.adaptableId;
     }
     if (adaptable.variant === 'react') {
-        return forwardRef(function ReactFilterWrapper(props, ref) {
-            const [filterProps, setFilterProps] = useState(null);
-            const colId = props.column.getId();
-            const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
-            const afterGuidAttached = React.useCallback((params) => {
-                const hidePopup = params?.hidePopup ?? null;
-                const filterProps = getFilterProps(colId, !!hidePopup);
-                setFilterProps(filterProps);
-            }, [colId]);
-            React.useEffect(() => {
-                afterGuidAttached();
-            }, []);
-            useImperativeHandle(ref, () => {
-                return {
-                    isFilterActive: () => isFilterActive(colId),
-                    // left here for backward compatibility
-                    afterGuidAttached,
-                    getModel: () => { },
-                    setModel: () => { },
-                    //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
-                    doesFilterPass: () => true,
-                };
-            });
-            if (!column || !filterProps) {
-                return null;
-            }
-            return renderWithAdaptableContext(React.createElement("div", { id: getContainerId(colId) },
-                React.createElement(AdaptableColumnFilter, { wrapperProps: { p: 2 }, columnId: filterProps.Column.columnId })), adaptable);
-        });
+        // We used to have the implementation below. However, for updating the filtered/not filtered state of the column
+        // we have to call the onModelChange function, and also provide the doesFilterPass function.
+        // starting with version 33 of AG Grid, the doesFilterPass has to be passed to the `useGridFilter` hook
+        // which needs to be imported from 'ag-grid-react' - see https://www.ag-grid.com/react-data-grid/component-filter/#implementing-a-filter-component
+        // but since Adaptable cannot depend on 'ag-grid-react' directly, we can't use a React component anymore
+        // so we simply return the same implementation as the vanilla version
+        // and comment out the implementation below
+        //
+        // return forwardRef(function ReactFilterWrapper(
+        //   props: {
+        //     column: Column;
+        //     onModelChange: (model: any) => void;
+        //   },
+        //   ref
+        // ) {
+        //   const [filterProps, setFilterProps] = useState<ColumnFilterProps | null>(null);
+        //   const colId = props.column.getId();
+        //   const column: AdaptableColumn | undefined =
+        //     adaptable.api.columnApi.getColumnWithColumnId(colId);
+        //   const afterGuidAttached = React.useCallback(
+        //     (params?: { hidePopup?: Function }) => {
+        //       const hidePopup = params?.hidePopup ?? null;
+        //       const filterProps = getFilterProps(colId, !!hidePopup);
+        //       setFilterProps(filterProps);
+        //     },
+        //     [colId]
+        //   );
+        //   const notifyModel = getNotifyModel(colId, props.onModelChange);
+        //   React.useEffect(() => {
+        //     afterGuidAttached();
+        //   }, []);
+        //   useImperativeHandle(ref, () => {
+        //     return {
+        //       isFilterActive: () => isFilterActive(colId),
+        //       // left here for backward compatibility
+        //       afterGuidAttached,
+        //       // getModel: () => {},
+        //       // setModel: () => {},
+        //       //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
+        //       doesFilterPass: () => true,
+        //     };
+        //   });
+        //   if (!column || !filterProps) {
+        //     return null;
+        //   }
+        //   return renderWithAdaptableContext(
+        //     <div id={getContainerId(colId)}>
+        //       <AdaptableColumnFilter
+        //         wrapperProps={{ p: 2 }}
+        //         columnId={filterProps.Column.columnId}
+        //         onChange={notifyModel}
+        //       />
+        //     </div>,
+        //     adaptable
+        //   );
+        // });
     }
     return class FilterWrapper {
         init(params) {
@@ -82,11 +106,16 @@ export const FilterWrapperFactory = (adaptable) => {
         afterGuiAttached(params) {
             //we always unmount first so the autofocus from the form works... in other grids we unmount when hidden
             this.unmountReactRoot?.();
-            let column = adaptable.api.columnApi.getColumnWithColumnId(this.column.getColId());
+            const columnId = this.column.getColId();
+            let column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
+            // for whatever reason, it works without this
+            // const notifyModel = getNotifyModel(colId, this.params.filterChangedCallback);
             if (column) {
                 this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableColumnFilter, {
-                    columnId: this.column.getColId(),
+                    columnId,
                     wrapperProps: { p: 2 },
+                    // for whatever reason, it works without this
+                    // onChange: notifyModel,
                 }), adaptable), 
                 // AdaptableColumnFilter(filterProps),
                 this.filterContainer);

package/src/agGrid/FloatingFilterWrapper.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { forwardRef, useImperativeHandle } from 'react';
 import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
 import { AdaptableFloatingFilter } from '../View/Components/ColumnFilter/AdaptableFloatingFilter';
+import { getAgGridFilterNotifyModelFn } from './getAgGridFilterNotifyModelFn';
 const filterContainerStyle = {
     overflow: 'hidden',
     minWidth: '0',
@@ -9,6 +10,7 @@ const filterContainerStyle = {
     display: 'flex',
     alignItems: 'stretch',
     position: 'relative',
+    flex: '1 1 auto',
 };
 export const FloatingFilterWrapperFactory = (adaptable) => {
     const adaptableApi = adaptable.api;
@@ -24,6 +26,9 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
         };
         return columnFilterProps;
     }
+    function getNotifyModel(colId, onModelChange) {
+        return getAgGridFilterNotifyModelFn(adaptableApi, colId, onModelChange);
+    }
     function patchParentElement(filterContainer) {
         if (filterContainer) {
             // todo: consider theme
@@ -54,17 +59,19 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
     if (adaptable.variant === 'react') {
         return forwardRef(function ReactFloatingFilterWrapper(props, ref) {
             const colId = props.column.getId();
+            const { onModelChange } = props;
             const column = adaptableApi.columnApi.getColumnWithColumnId(colId);
             useImperativeHandle(ref, () => {
                 return {
                     onParentModelChanged() { },
                 };
             });
+            const notifyModel = getNotifyModel(colId, onModelChange);
             if (!column) {
                 return null;
             }
             return renderWithAdaptableContext(React.createElement("div", { ref: patchParentElement, id: getContainerId(colId), style: filterContainerStyle },
-                React.createElement(AdaptableFloatingFilter, { ...getFilterProps(colId) })), adaptable);
+                React.createElement(AdaptableFloatingFilter, { ...getFilterProps(colId), onChange: notifyModel, onClear: notifyModel })), adaptable);
         });
     }
     return class FloatingFilterWrapper {
@@ -82,10 +89,15 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
                 //@ts-ignore
                 this.filterContainer.style[key] = filterContainerStyle[key];
             });
+            const notifyModel = getNotifyModel(colId, params.filterParams.filterChangedCallback);
             const column = adaptableApi.columnApi.getColumnWithColumnId(colId);
             if (column) {
                 const filterProps = getFilterProps(colId);
-                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableFloatingFilter, filterProps), adaptable), this.filterContainer);
+                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableFloatingFilter, {
+                    ...filterProps,
+                    onChange: notifyModel,
+                    onClear: notifyModel,
+                }), adaptable), this.filterContainer);
             }
         }
         getGui() {

package/src/agGrid/agGridDataTypeDefinitions.d.ts

@@ -1,5 +1,5 @@
 import { GridOptions } from 'ag-grid-enterprise';
-import { AdaptableColumnDataType } from '../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableColumnDataType } from '../AdaptableState/Common/AdaptableColumn';
 export declare const TEXT_ARRAY_DATA_TYPE: AdaptableColumnDataType;
 export declare const NUMBER_ARRAY_DATA_TYPE: AdaptableColumnDataType;
 export declare const TUPLE_ARRAY_DATA_TYPE: AdaptableColumnDataType;