@adaptabletools/adaptable 20.3.0 → 21.0.0-canary.0

package/src/agGrid/AdaptableFilterHandler.d.ts

@@ -0,0 +1,18 @@
+import { DoesFilterPassParams, FilterHandler, FilterHandlerParams } from 'ag-grid-enterprise';
+import { AdaptableApi } from '../Api/AdaptableApi';
+import { ColumnSetupInfo } from '../AdaptableState/Common/ColumnSetupInfo';
+import { InFilterValue } from '../AdaptableOptions/FilterOptions';
+export declare class AdaptableFilterHandler implements FilterHandler {
+    private adaptableApi;
+    readonly colId: string;
+    private filterDisplayValues;
+    constructor(adaptableApi: AdaptableApi, columnSetup: ColumnSetupInfo);
+    doesFilterPass(params: DoesFilterPassParams): boolean;
+    getFilterDisplayValues(currentSearchValue: string): Promise<InFilterValue[]>;
+    onNewRowsLoaded(): void;
+    onAnyFilterChanged(): void;
+    resetFilterDisplayValues(): void;
+    refreshFilterDisplayValues(): Promise<InFilterValue<any>[]>;
+    refresh(params: FilterHandlerParams<any, any, any, any>): void;
+    destroy(): void;
+}

package/src/agGrid/AdaptableFilterHandler.js

@@ -0,0 +1,61 @@
+export class AdaptableFilterHandler {
+    constructor(adaptableApi, columnSetup) {
+        this.adaptableApi = adaptableApi;
+        this.colId = columnSetup.colId;
+    }
+    doesFilterPass(params) {
+        try {
+            const rowNode = params.node;
+            // first assess if the Row is filterable - if not, then return true so it always appears in Grid
+            const isRowFilterable = this.adaptableApi.gridApi.internalApi.isRowFilterable(rowNode);
+            if (!isRowFilterable) {
+                return true;
+            }
+            const columnFilters = this.adaptableApi.filterApi.columnFilterApi
+                .getActiveColumnFilters()
+                .filter((columnFilter) => this.adaptableApi.filterApi.columnFilterApi.isColumnFilterActive(columnFilter))
+                .filter((columnFilter) => columnFilter.ColumnId === this.colId)
+                .filter((columnFilter) => {
+                const shouldEvaluateFilterOnClient = this.adaptableApi.expressionApi.internalApi.shouldEvaluatePredicatesInAdaptableQL('ColumnFilter', columnFilter, columnFilter.Predicates);
+                return shouldEvaluateFilterOnClient;
+            });
+            const anyFilterFailed = columnFilters.some((columnFilter) => !this.adaptableApi.filterApi.columnFilterApi.internalApi.evaluateColumnFilter(columnFilter, rowNode));
+            return anyFilterFailed ? false : true;
+        }
+        catch (ex) {
+            this.adaptableApi.consoleError(ex);
+            return false;
+        }
+    }
+    getFilterDisplayValues(currentSearchValue) {
+        if (!this.filterDisplayValues) {
+            this.filterDisplayValues =
+                this.adaptableApi.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn({
+                    columnId: this.colId,
+                    currentSearchValue,
+                });
+        }
+        return this.filterDisplayValues;
+    }
+    onNewRowsLoaded() {
+        this.resetFilterDisplayValues();
+    }
+    onAnyFilterChanged() {
+        this.resetFilterDisplayValues();
+    }
+    resetFilterDisplayValues() {
+        // Reset the filter display values manually
+        this.filterDisplayValues = null;
+    }
+    async refreshFilterDisplayValues() {
+        this.resetFilterDisplayValues();
+        return this.getFilterDisplayValues('');
+    }
+    refresh(params) {
+        // No specific refresh logic needed for this handler
+        // The filter display values will be reset on new rows loaded or any filter changed
+    }
+    destroy() {
+        this.filterDisplayValues = null;
+    }
+}

package/src/agGrid/AgGridAdapter.d.ts

@@ -1,4 +1,4 @@
-import { ColDef, ColGroupDef, Column, GridApi, GridOptions, IRowNode, ManagedGridOptionKey, ManagedGridOptions, Module, ModuleName } from 'ag-grid-enterprise';
+import { ColDef, ColGroupDef, Column, GridApi, GridOptions, IRowNode, ManagedGridOptionKey, ManagedGridOptions, Module } from 'ag-grid-enterprise';
 import { AdaptableAgGrid } from './AdaptableAgGrid';
 import { AdaptableColumn, AdaptableColumnGroup } from '../AdaptableState/Common/AdaptableColumn';
 import { SelectedCellInfo } from '../AdaptableState/Selection/SelectedCellInfo';
@@ -9,8 +9,8 @@ export declare class AgGridAdapter {
     private DANGER_USE_GETTER_gridApi;
     private DANGER_gridApi_from_args;
     private DANGER_updateGridOptionsMonkeyPatcher;
-    private DANGER_doAggregateFiltersPassMonkeyPatcher;
-    private DANGER_isAggregateFilterPresentMonkeyPatcher;
+    private DANGER_doFiltersPassMonkeyPatcher;
+    private DANGER_isAggFilterPresentMonkeyPatcher;
     initialGridOptions: GridOptions;
     private _agGridId;
     constructor(_adaptableInstance: AdaptableAgGrid, config?: {
@@ -28,9 +28,6 @@ export declare class AgGridAdapter {
     monkeyPatchingAggColumnFilters(): void;
     private DANGER_getPrivateAgGridBeans;
     DANGER_getLiveGridOptions(): GridOptions<any>;
-    isAgGridModuleRegistered(moduleName: ModuleName): boolean;
-    getAgGridRegisteredModules(): Module[];
-    getAgGridRegisteredModuleNames(): ModuleName[];
     getAgGridRootElement(): HTMLElement;
     /**
      * When AG Grid is rendered the first time, the AG GridApi is not yet set in the Adaptable context (as it's set only AFTER the grid is fully initialised)
@@ -42,7 +39,6 @@ export declare class AgGridAdapter {
     getGridOption<Key extends keyof GridOptions>(key: Key): GridOptions[Key];
     setGridOption<Key extends ManagedGridOptionKey>(key: Key, value: GridOptions[Key]): void;
     getUserGridOptionsProperty<T extends keyof GridOptions>(propertyName: T): GridOptions[T];
-    updateColumnFilterActiveState(): void;
     getColumnDefinitionsInclSpecialColumns(agGridColDefs?: GridOptions['columnDefs']): GridOptions['columnDefs'];
     private enhanceColDefsWithSpecialColumns;
     private getSpecialColDefs;

package/src/agGrid/AgGridAdapter.js

@@ -4,7 +4,6 @@ import { ADAPTABLE_FDC3_ACTION_COLUMN_FRIENDLY_NAME } from '../Utilities/Constan
 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';
 import { agGridDataTypeDefinitions, ALL_ADAPTABLE_DATA_TYPES } from './agGridDataTypeDefinitions';
 import { isPivotGrandTotal } from '../Api/Implementation/ColumnApiImpl';
 import { isPivotColumnTotal } from '../layout-manager/src/isPivotColumnTotal';
@@ -16,8 +15,6 @@ export class AgGridAdapter {
     constructor(_adaptableInstance, config) {
         this._adaptableInstance = _adaptableInstance;
         const columnApiModuleReference = config?.getAgGridColumnApiModuleReference?.() ?? getColumnApiModule();
-        const beans = columnApiModuleReference?.beans;
-        console.log(beans?.length);
         const ColumnDefFactory_Prototype = columnApiModuleReference?.beans?.[0]?.prototype;
         if (!ColumnDefFactory_Prototype) {
             console.error(`CRITICAL: could not get hold of AG Grid beans, this should never happen!`);
@@ -40,8 +37,8 @@ export class AgGridAdapter {
         this.DANGER_gridApi_from_args = null;
         this.DANGER_USE_GETTER_gridApi = null;
         this.DANGER_updateGridOptionsMonkeyPatcher = null;
-        this.DANGER_doAggregateFiltersPassMonkeyPatcher = null;
-        this.DANGER_isAggregateFilterPresentMonkeyPatcher = null;
+        this.DANGER_doFiltersPassMonkeyPatcher = null;
+        this.DANGER_isAggFilterPresentMonkeyPatcher = null;
         this._adaptableInstance = null;
     }
     get adaptableOptions() {
@@ -126,7 +123,13 @@ export class AgGridAdapter {
         // monkey patch ColumnFilterService.doAggregateFiltersPass because currently Adaptable does NOT override the ColumnFilters
         // (it uses the `doesExternalFilterPass` to evaluate the filters on the client side)
         // #doAggregateFiltersPassMonkeyPatcher
-        this.DANGER_doAggregateFiltersPassMonkeyPatcher = function (rowNode, filterToSkip) {
+        const original_doFilterPass = agGridColumnFilterService.doFiltersPass;
+        this.DANGER_doFiltersPassMonkeyPatcher = function (rowNode, colIdToSkip, targetAggregates) {
+            if (!targetAggregates) {
+                // if targetAggregates is not set, we are not in the aggregation phase
+                // so we can use the original doFiltersPass
+                return original_doFilterPass.call(this, rowNode, colIdToSkip);
+            }
             if (!self.adaptableApi.layoutApi.isCurrentLayoutPivot()) {
                 // should NEVER happen
                 return true;
@@ -153,14 +156,12 @@ export class AgGridAdapter {
             }
             return true;
         };
-        agGridColumnFilterService.doAggregateFiltersPass =
-            this.DANGER_doAggregateFiltersPassMonkeyPatcher;
-        this.DANGER_isAggregateFilterPresentMonkeyPatcher = function () {
+        agGridColumnFilterService.doFiltersPass = this.DANGER_doFiltersPassMonkeyPatcher;
+        this.DANGER_isAggFilterPresentMonkeyPatcher = function () {
             const columnFilters = self.adaptableApi.filterApi.columnFilterApi.getActiveColumnFilters();
             return columnFilters.some((colFilter) => self.adaptableApi.columnApi.isPivotResultColumn(colFilter.ColumnId));
         };
-        agGridColumnFilterService.isAggregateFilterPresent =
-            this.DANGER_isAggregateFilterPresentMonkeyPatcher;
+        agGridColumnFilterService.isAggFilterPresent = this.DANGER_isAggFilterPresentMonkeyPatcher;
     }
     DANGER_getPrivateAgGridBeans() {
         const beans = DANGER_AG_GRID_BEANS_MAP[this._agGridId];
@@ -172,27 +173,6 @@ export class AgGridAdapter {
     DANGER_getLiveGridOptions() {
         return this.DANGER_getPrivateAgGridBeans()?.gridOptions;
     }
-    isAgGridModuleRegistered(moduleName) {
-        const agGridOptionsService = this.DANGER_getPrivateAgGridBeans()?.gos;
-        if (!agGridOptionsService) {
-            this.logger.consoleError('Could not get hold of GridOptionsService! This is a critical error and will prevent Adaptable from working correctly.');
-            return false;
-        }
-        return agGridOptionsService.isModuleRegistered(moduleName);
-    }
-    getAgGridRegisteredModules() {
-        const allModulesSet = ALL_AG_GRID_MODULES;
-        const registeredModules = [];
-        allModulesSet.forEach((module) => {
-            if (this.isAgGridModuleRegistered(module.moduleName)) {
-                registeredModules.push(module);
-            }
-        });
-        return registeredModules;
-    }
-    getAgGridRegisteredModuleNames() {
-        return this.getAgGridRegisteredModules().map((module) => module.moduleName);
-    }
     getAgGridRootElement() {
         return this.DANGER_getPrivateAgGridBeans()?.eGridDiv;
     }
@@ -234,19 +214,6 @@ export class AgGridAdapter {
     getUserGridOptionsProperty(propertyName) {
         return this.agGridOptionsService.getUserGridOptionsProperty(propertyName);
     }
-    updateColumnFilterActiveState() {
-        const filteredCols = new Set();
-        const columnFilters = this.adaptableApi.filterApi.columnFilterApi.getActiveColumnFilters();
-        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());
         return allColDefs;
@@ -378,7 +345,7 @@ export class AgGridAdapter {
     deriveSelectedRowInfoFromAgGrid() {
         const nodes = this.getAgGridApi().getSelectedNodes();
         const selectedRows = [];
-        if (this.getAgGridApi().isPivotMode()) {
+        if (this._adaptableInstance.isInPivotMode()) {
             //  dont perform row selection in pivot mode
             return undefined;
         }

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -1,6 +1,6 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
 import { ColumnSetupInfo } from '../AdaptableState/Common/ColumnSetupInfo';
-import { ColDef, ColGroupDef, Column, GridOptions } from 'ag-grid-enterprise';
+import { ColDef, ColGroupDef, Column } from 'ag-grid-enterprise';
 import { AdaptableColumnDataType } from '../AdaptableState/Common/AdaptableColumn';
 import { AdaptableVariant } from '../AdaptableInterfaces/IAdaptable';
 export declare function getEditorForColumnDataType(columnDataType: AdaptableColumnDataType, variant: AdaptableVariant): ColDef['cellEditor'];
@@ -31,7 +31,6 @@ export declare class AgGridColumnAdapter {
     private setupColumnCellDataType;
     setupColumnHeader({ col }: ColumnSetupInfo): void;
     private setupColumnFilter;
-    setupColumnFloatingFilterTemporarily(initialGridOptions: GridOptions): void;
     private setupColumnFloatingFilter;
     private setupColumnValueFormatter;
     private setupColumnEditable;
@@ -68,4 +67,5 @@ export declare class AgGridColumnAdapter {
     private getFlashingCellStyle;
     private getCellHighlightStyle;
     isColGroupDef(columnDefinition: ColDef | ColGroupDef): columnDefinition is ColGroupDef;
+    private getRelevantFormatColumnHeaderStyles;
 }

package/src/agGrid/AgGridColumnAdapter.js

@@ -1,7 +1,5 @@
 import kebabCase from 'lodash/kebabCase';
 import merge from 'lodash/merge';
-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 '../AdaptableState/Common/AdaptableColumn';
@@ -15,6 +13,9 @@ import { AdaptableDateEditor, AdaptableReactDateEditor } from './editors/Adaptab
 import { AgGridExportAdapter } from './AgGridExportAdapter';
 import { AdaptableHelper } from '../Utilities/Helpers/AdaptableHelper';
 import { isProvidedByAdaptable } from '../Utilities/adaptableOverrideCheck';
+import { AdaptableFilterHandler } from './AdaptableFilterHandler';
+import { AgGridFilterAdapterFactory } from './AgGridFilterAdapter';
+import { AgGridFloatingFilterAdapterFactory } from './AgGridFloatingFilterAdapter';
 export function getEditorForColumnDataType(columnDataType, variant) {
     if (columnDataType === 'number') {
         return variant === 'react' ? AdaptableReactNumberEditor : AdaptableNumberEditor;
@@ -100,7 +101,7 @@ export class AgGridColumnAdapter {
             !this.adaptableApi.columnApi.isSelectionColumn(colId));
     }
     setupColumns() {
-        const pivotMode = this.agGridApi.isPivotMode();
+        const pivotMode = this.adaptableInstance.isInPivotMode();
         let cols = pivotMode
             ? // for pivot mode, we take only the initial columns
                 this.agGridApi.getColumns()
@@ -238,6 +239,18 @@ export class AgGridColumnAdapter {
                     return baseHeaderClass;
                 }
                 const target = 'columnHeader';
+                // handle special case of headers with text alignment
+                // in this case, we add a specific class to the header
+                // see #header_text_align
+                const formatColumnWithTextAlignment = this.getRelevantFormatColumnHeaderStyles(abColumn)
+                    // we take the first one only, even if multiple are defined
+                    .find((fc) => fc.CellAlignment != undefined);
+                if (formatColumnWithTextAlignment) {
+                    baseHeaderClass = [
+                        ...baseHeaderClass,
+                        `ab-header__align-${formatColumnWithTextAlignment.CellAlignment.toLowerCase()}`,
+                    ];
+                }
                 const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnWithStyleClassNameForColumn(abColumn, {
                     target,
                 });
@@ -286,7 +299,11 @@ export class AgGridColumnAdapter {
                     return {};
                 }
                 const isQuickSearchActive = hasQuickSearchStyle && this.isQuickSearchActive(gridCell);
-                const isCurrentMatch = this.adaptableApi.agGridApi.findGetActiveMatch()?.node === params.node;
+                const isQuickSearchAvailable = this.adaptableApi.internalApi
+                    .getModuleService()
+                    .isAdapTableModulePresent('QuickSearch');
+                const isCurrentMatch = isQuickSearchAvailable &&
+                    this.adaptableApi.agGridApi.findGetActiveMatch()?.node === params.node;
                 const textStyleToApply = isCurrentMatch
                     ? { ...textMatchStyle, ...currentTextMatchStyle }
                     : textMatchStyle;
@@ -358,10 +375,18 @@ export class AgGridColumnAdapter {
     }
     setupColumnCellEditor({ colId, col, colDef, abColumn }) {
         const shouldShowSelectCellEditor = this.adaptableApi.userInterfaceApi.internalApi.shouldShowSelectCellEditor(abColumn);
-        const hasRichSelectCellEditor = this.adaptableInstance.agGridAdapter.isAgGridModuleRegistered('RichSelect');
+        const hasRichSelectCellEditor = this.adaptableApi.internalApi
+            .getAgGridModulesAdapter()
+            .isAgGridModuleRegistered('RichSelectModule');
         this.setColDefProperty(col, 'cellEditor', () => {
             if (shouldShowSelectCellEditor) {
-                return hasRichSelectCellEditor ? 'agRichSelectCellEditor' : 'agSelectCellEditor';
+                if (hasRichSelectCellEditor) {
+                    return 'agRichSelectCellEditor';
+                }
+                else {
+                    this.adaptableApi.logWarn(`Cannot show Select Editor as missing required AG Grid module: RichSelect`);
+                    return colDef.cellEditor;
+                }
             }
             else {
                 if (colDef.cellEditor) {
@@ -512,8 +537,10 @@ export class AgGridColumnAdapter {
             return original_headerValueGetter;
         });
     }
-    setupColumnFilter({ col, colDef }) {
-        if (!this.adaptableOptions.filterOptions.useAdaptableFiltering) {
+    setupColumnFilter(columnSetup) {
+        const { col, colDef, abColumn, colId } = columnSetup;
+        const useAdaptableFilter = this.adaptableOptions.filterOptions.useAdaptableFiltering;
+        if (!useAdaptableFilter) {
             return;
         }
         // setup Auto Group Column Filter
@@ -540,29 +567,38 @@ export class AgGridColumnAdapter {
             return;
         }
         // setup "normal" column filter
-        this.setColDefProperty(col, 'filter', () => {
+        this.setColDefProperty(col, 'filter', (original_filter) => {
             if (!colDef.filter) {
                 return;
             }
-            this.agGridApi.destroyFilter(col);
-            return FilterWrapperFactory(this.adaptableInstance);
-        });
-    }
-    setupColumnFloatingFilterTemporarily(initialGridOptions) {
-        if (!this.adaptableOptions.filterOptions.useAdaptableFiltering) {
-            return;
-        }
-        initialGridOptions.columnDefs
-            ?.filter((colDef) => !this.isColGroupDef(colDef))
-            .map((colDef) => {
-            const isFloatingFilterEnabled = initialGridOptions.defaultColDef?.floatingFilter || colDef.floatingFilter;
-            if (isFloatingFilterEnabled) {
-                colDef.floatingFilterComponent = FloatingFilterWrapperFactory(this.adaptableInstance);
+            if (!useAdaptableFilter) {
+                return original_filter;
+            }
+            if (useAdaptableFilter &&
+                typeof original_filter !== 'boolean' &&
+                typeof original_filter?.handler !== 'function' &&
+                !this.adaptableInstance.isInPivotMode()) {
+                this.adaptableApi.consoleError(`Column '${colId}' has a custom filter defined in colDef.filter, but Adaptable Filtering accepts only the TRUE/FALSE values!`);
+                return false;
             }
+            return {
+                component: AgGridFilterAdapterFactory(this.adaptableInstance),
+                // doesFilterPass,
+                handler: (params) => new AdaptableFilterHandler(this.adaptableApi, columnSetup),
+            };
         });
     }
     setupColumnFloatingFilter({ col, colDef }) {
-        const isFloatingFilterDisabled = !colDef.floatingFilter ||
+        const userProvidedFilterProp = this.getUserColDefProperty(col.getColId(), 'filter');
+        const hasInvalidFilterProp = typeof userProvidedFilterProp !== 'boolean' &&
+            typeof userProvidedFilterProp?.handler !== 'function' &&
+            !this.adaptableInstance.isInPivotMode();
+        if (hasInvalidFilterProp) {
+            // warning is logged in the 'setupColumnFilter' method
+            return false;
+        }
+        const isFloatingFilterDisabled = !colDef.filter ||
+            !colDef.floatingFilter ||
             !this.adaptableOptions.filterOptions.useAdaptableFiltering ||
             !this.adaptableOptions.filterOptions.columnFilterOptions.showQuickFilter;
         if (this.adaptableApi.columnApi.isAutoRowGroupColumn(col.getColId())) {
@@ -584,13 +620,13 @@ export class AgGridColumnAdapter {
             if (isFloatingFilterDisabled) {
                 return;
             }
-            return FloatingFilterWrapperFactory(this.adaptableInstance);
+            return AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
         });
         this.setColDefProperty(col, 'floatingFilter', (original_floatingFilter) => {
             if (isFloatingFilterDisabled) {
                 return;
             }
-            return FloatingFilterWrapperFactory(this.adaptableInstance);
+            return AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
         });
         this.setColDefProperty(col, 'suppressFloatingFilterButton', () => {
             return !isFloatingFilterDisabled;
@@ -811,6 +847,12 @@ export class AgGridColumnAdapter {
         return true;
     }
     isQuickSearchActive(gridCell) {
+        const isQuickSearchAvailable = this.adaptableApi.internalApi
+            .getModuleService()
+            .isAdapTableModulePresent('QuickSearch');
+        if (!isQuickSearchAvailable) {
+            return false;
+        }
         const quickSearchValue = this.adaptableApi.quickSearchApi.getQuickSearchValue();
         if (!quickSearchValue) {
             return false;
@@ -888,7 +930,7 @@ export class AgGridColumnAdapter {
                     : undefined;
     }
     getNoteCellClassName(gridCell, params) {
-        if (!this.adaptableApi.internalApi.getModuleService().isModuleAvailable('Note')) {
+        if (!this.adaptableApi.internalApi.getModuleService().isAdapTableModulePresent('Note')) {
             return;
         }
         if (!this.adaptableApi.noteApi.internalApi.areNotesSupported()) {
@@ -905,7 +947,7 @@ export class AgGridColumnAdapter {
         return 'ab-Cell-Note';
     }
     getCommentCellClassName(gridCell, params) {
-        if (!this.adaptableApi.internalApi.getModuleService().isModuleAvailable('Comment')) {
+        if (!this.adaptableApi.internalApi.getModuleService().isAdapTableModulePresent('Comment')) {
             return;
         }
         if (!this.adaptableApi.commentApi.internalApi.areCommentsSupportedInLayout()) {
@@ -1022,16 +1064,10 @@ export class AgGridColumnAdapter {
             // YET, see https://github.com/AdaptableTools/adaptable/issues/2947#issuecomment-3062304655
             return {};
         }
-        const target = 'columnHeader';
-        const activeFormatColumnsWithStyle = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithStyleForColumn(column, {
-            target,
-        });
-        if (!activeFormatColumnsWithStyle.length) {
+        const relevantFormatColumnsWithStyle = this.getRelevantFormatColumnHeaderStyles(column);
+        if (!relevantFormatColumnsWithStyle.length) {
             return {};
         }
-        const relevantFormatColumnsWithStyle = activeFormatColumnsWithStyle.filter((formatColumn) => {
-            return this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInHeader(formatColumn, column);
-        });
         return this.getFormatColumnAdaptableStyle(relevantFormatColumnsWithStyle);
     }
     getStyledColumnStyle(styledColumn, abColumn, params) {
@@ -1165,4 +1201,13 @@ export class AgGridColumnAdapter {
         // @ts-ignore
         return columnDefinition['children'] != null;
     }
+    getRelevantFormatColumnHeaderStyles(column) {
+        return this.adaptableApi.formatColumnApi.internalApi
+            .getFormatColumnsWithStyleForColumn(column, {
+            target: 'columnHeader',
+        })
+            .filter((formatColumn) => {
+            return this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInHeader(formatColumn, column);
+        });
+    }
 }

package/src/agGrid/AgGridFilterAdapter.d.ts

@@ -0,0 +1,2 @@
+import { AdaptableAgGrid } from './AdaptableAgGrid';
+export declare const AgGridFilterAdapterFactory: (adaptable: AdaptableAgGrid) => any;

package/src/agGrid/AgGridFilterAdapter.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { AdaptableColumnFilter } from '../View/Components/ColumnFilter/AdaptableColumnFilter';
+import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
+export const AgGridFilterAdapterFactory = (adaptable) => {
+    function isFilterActive(colId) {
+        // we need this here
+        if (adaptable.isDestroyed) {
+            return false;
+        }
+        //make the small filter icon to appear when there is a filter
+        return adaptable.api.filterApi.columnFilterApi.isColumnFilterActiveForColumn(colId);
+    }
+    function getContainerId(colId) {
+        return 'filter_' + colId + '_' + adaptable.adaptableOptions.adaptableId;
+    }
+    return class AgGridFilterAdapter {
+        init(params) {
+            this.params = params;
+            this.column = params.column;
+            this.filterContainer = document.createElement('div');
+            this.filterContainer.id = getContainerId(this.params.column.getColId());
+        }
+        getGui() {
+            return this.filterContainer;
+        }
+        refresh(newParams) {
+            // always reuse the current instance
+            // the filter is refreshed in the underlying React component
+            return true;
+        }
+        afterGuiAttached(params) {
+            //we always unmount first so the autofocus from the form works... in other grids we unmount when hidden
+            this.unmountReactRoot?.();
+            const columnId = this.column.getColId();
+            let column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
+            if (column) {
+                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableColumnFilter, {
+                    columnId,
+                    wrapperProps: { p: 2 },
+                }), adaptable), this.filterContainer);
+            }
+        }
+        destroy() {
+            this.unmountReactRoot?.();
+            this.filterContainer = null;
+        }
+    };
+};

package/src/agGrid/AgGridFloatingFilterAdapter.d.ts

@@ -0,0 +1,2 @@
+import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
+export declare const AgGridFloatingFilterAdapterFactory: (adaptable: IAdaptable) => any;

package/src/agGrid/{FloatingFilterWrapper.js → AgGridFloatingFilterAdapter.js}

@@ -1,8 +1,6 @@
 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',
@@ -12,7 +10,7 @@ const filterContainerStyle = {
     position: 'relative',
     flex: '1 1 auto',
 };
-export const FloatingFilterWrapperFactory = (adaptable) => {
+export const AgGridFloatingFilterAdapterFactory = (adaptable) => {
     const adaptableApi = adaptable.api;
     function getContainerId(colId) {
         return `floatingFilter_${colId}_${adaptable.adaptableOptions.adaptableId}`;
@@ -26,9 +24,6 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
         };
         return columnFilterProps;
     }
-    function getNotifyModel(colId, onModelChange) {
-        return getAgGridFilterNotifyModelFn(adaptableApi, colId, onModelChange);
-    }
     function findParentWithClass(element, className, stopClasses, applyToAll) {
         let current = element.parentElement;
         while (current) {
@@ -82,55 +77,49 @@ 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), onChange: notifyModel, onClear: notifyModel })), adaptable);
-        });
-    }
-    return class FloatingFilterWrapper {
-        onParentModelChanged(parentModel, filterChangedEvent) {
-            // todo?
-        }
-        afterGuiAttached() {
-            patchParentElement(this.filterContainer);
-        }
+    return class AgGridFloatingFilterAdapter {
         init(params) {
             const colId = params.column.getColId();
+            this.colId = colId;
             this.filterContainer = document.createElement('div');
             this.filterContainer.id = getContainerId(colId);
             Object.keys(filterContainerStyle).forEach((key) => {
                 //@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,
-                    onChange: notifyModel,
-                    onClear: notifyModel,
                 }), adaptable), this.filterContainer);
             }
         }
+        onParentModelChanged(parentModel, filterChangedEvent) {
+            // AFL: this should NOT be required, but AG Grid calls this method
+            // most likely is a bug and will be removed in future versions
+        }
+        afterGuiAttached() {
+            patchParentElement(this.filterContainer);
+        }
         getGui() {
             return this.filterContainer;
         }
+        refresh(params) {
+            // always reuse the current instance
+            // the filte ris refreshed in the underlying React component
+            return true;
+        }
         destroy() {
-            this.unmountReactRoot?.();
+            // Use setTimeout to defer unmounting to next event loop tick
+            // This ensures we're not unmounting during React's rendering phase
+            if (this.unmountReactRoot) {
+                const unmount = this.unmountReactRoot;
+                setTimeout(() => {
+                    unmount();
+                }, 0);
+                this.unmountReactRoot = undefined;
+            }
             this.filterContainer = null;
         }
     };

package/src/agGrid/AgGridModulesAdapter.d.ts

@@ -0,0 +1,15 @@
+import { AdaptableAgGrid } from './AdaptableAgGrid';
+import { Module, AgModuleName } from 'ag-grid-enterprise';
+export declare const AG_GRID_VERSION: string;
+export declare class AgGridModulesAdapter {
+    private adaptableInstance;
+    private allAgGridModules;
+    constructor(adaptableInstance: AdaptableAgGrid);
+    destroy(): void;
+    private get agGridApi();
+    isAgGridModuleRegistered(moduleName: AgModuleName): boolean;
+    getAgGridRegisteredModules(): Module[];
+    getAgGridRegisteredModuleNames(): AgModuleName[];
+    getMandatoryAgGridModuleNames(): AgModuleName[];
+    private extractAgGridModuleNames;
+}