@adaptabletools/adaptable 10.0.4-canary.1 → 10.0.4-canary.5

package/src/agGrid/Adaptable.js

@@ -124,6 +124,7 @@ class Adaptable {
             }
         };
         this._adaptableReady = false;
+        this.isDestroyed = false;
         this.agGridModules = [];
         this.isPluginLoaded = (pluginId) => {
             const plugins = this.adaptableOptions.plugins || [];
@@ -137,7 +138,7 @@ class Adaptable {
         };
         this.isAgGridReady = () => {
             var _a, _b;
-            const waitTimeout = (_b = (_a = this.adaptableOptions.containerOptions) === null || _a === void 0 ? void 0 : _a.vendorContainerWaitTimeout) !== null && _b !== void 0 ? _b : 60000;
+            const waitTimeout = (_b = (_a = this.adaptableOptions.containerOptions) === null || _a === void 0 ? void 0 : _a.agGridContainerWaitTimeout) !== null && _b !== void 0 ? _b : 60000;
             return waitForCondition_1.waitForCondition(() => !!this.gridOptions.api, waitTimeout);
         };
         // debounced methods
@@ -313,7 +314,7 @@ class Adaptable {
         AdaptableHelper_1.default.checkAdaptableOptions(this.adaptableOptions);
         this.runtimeConfig = runtimeConfig || {};
         this.agGridModules = this.runtimeConfig.modules || [];
-        this.gridOptions = this.adaptableOptions.vendorGrid;
+        this.gridOptions = this.adaptableOptions.agGridOptions;
         if (this.hasAutogeneratedPrimaryKey() && !this.gridOptions.getRowNodeId) {
             this.gridOptions.getRowNodeId = (rowData) => {
                 var _a;
@@ -357,7 +358,7 @@ class Adaptable {
         this.TeamSharingService = new TeamSharingService_1.TeamSharingService(this);
         this.MetamodelService = new MetamodelService_1.MetamodelService(this);
         this.forPlugins((plugin) => plugin.afterInitServices(this));
-        // Set up Modules - we set up all the Modules suitable for the vendor grid
+        // Set up Modules - we set up all the Modules suitable for AG Grid
         // But users can make some hidden or readonly in their entitlements
         this.modules = this.agGridHelper.setUpModules();
         this.forPlugins((plugin) => plugin.afterInitModules(this, this.modules));
@@ -404,6 +405,9 @@ class Adaptable {
             }
             // Load the store
             this.adaptableStore.Load.then(() => {
+                if (this.isDestroyed) {
+                    return;
+                }
                 this.initInternalGridLogic();
                 AdaptableHelper_1.default.checkValidPrimaryKey(this);
             }, (e) => {
@@ -478,7 +482,7 @@ class Adaptable {
                 this.forPlugins((plugin) => plugin.onAdaptableReady(this, this.adaptableOptions));
                 this.api.eventApi.emit('AdaptableReady', {
                     adaptableApi: this.api,
-                    vendorGrid: this.adaptableOptions.vendorGrid,
+                    gridOptions: this.adaptableOptions.agGridOptions,
                 });
             }
         });
@@ -554,12 +558,12 @@ class Adaptable {
                 }
             }
         }
-        const checkVendorContainer = () => {
-            let vendorContainer = this.getGridContainerElement();
-            if (!vendorContainer) {
-                vendorContainer = this.initVendorContainerFromInitializedAgGrid();
-                if (!vendorContainer) {
-                    LoggingHelper_1.ConsoleLogError('You must provide an element id in `containerOptions.vendorContainer`');
+        const checkAgGridContainer = () => {
+            let agGridContainer = this.getAgGridContainerElement();
+            if (!agGridContainer) {
+                agGridContainer = this.initAgGridContainerFromInitializedAgGrid();
+                if (!agGridContainer) {
+                    LoggingHelper_1.ConsoleLogError('You must provide an element id in `containerOptions.agGridContainer`');
                     return false;
                 }
             }
@@ -567,14 +571,14 @@ class Adaptable {
         };
         const isGridInstantiated = this.gridOptions.api && typeof this.gridOptions.api.getValue === 'function';
         if (isGridInstantiated) {
-            if (!checkVendorContainer()) {
+            if (!checkAgGridContainer()) {
                 return Promise.resolve(false);
             }
             return Promise.resolve(true);
         }
         if (this.runtimeConfig.waitForAgGrid) {
             return this.isAgGridReady().then(() => {
-                this.initVendorContainerFromInitializedAgGrid();
+                this.initAgGridContainerFromInitializedAgGrid();
                 return Promise.resolve(true);
             }, () => {
                 LoggingHelper_1.ConsoleLogError(`Could not find any agGrid instance rendered. Could not find reference to ag-grid api. Make sure you pass the same  gridOptions object reference both to Adaptable and AgGrid`);
@@ -582,19 +586,19 @@ class Adaptable {
             });
         }
         else {
-            if (!checkVendorContainer()) {
+            if (!checkAgGridContainer()) {
                 return Promise.resolve(false);
             }
         }
         // now create the grid itself - it is done this way as previously when we instantiated the Grid 'properly' it got created as J.Grid
         let grid;
-        const modules = (this.adaptableOptions.vendorGrid || {}).modules || [];
+        const modules = (this.adaptableOptions.agGridOptions || {}).modules || [];
         this.agGridModules = [...this.agGridModules, ...modules];
-        const vendorContainer = this.getGridContainerElement();
+        const agGridContainer = this.getAgGridContainerElement();
         if (this.gridOptions.modules) {
             delete this.gridOptions.modules;
         }
-        grid = new all_modules_1.Grid(vendorContainer, this.gridOptions, { modules });
+        grid = new all_modules_1.Grid(agGridContainer, this.gridOptions, { modules });
         // add our adaptable object to the grid options api object
         // this is VERY useful for when we need to access Adaptable inside of agGrid only functions
         if (this.gridOptions.api) {
@@ -602,8 +606,8 @@ class Adaptable {
         }
         return Promise.resolve(grid != null);
     }
-    initVendorContainerFromInitializedAgGrid() {
-        if (this.getGridContainerElement()) {
+    initAgGridContainerFromInitializedAgGrid() {
+        if (this.getAgGridContainerElement()) {
             return;
         }
         const layoutElements = this.gridOptions.api
@@ -615,21 +619,21 @@ class Adaptable {
             // aggrid 25.3.0 doesn't have layoutElements anymore, so we try to retrieve this element
             layoutElements.push(this.gridOptions.api.gridBodyCon.eGridBody);
         }
-        let vendorContainer;
+        let agGridContainer;
         for (let i = 0, len = layoutElements.length; i < len; i++) {
             const element = layoutElements[i];
             if (element && element.matches('.ag-root-wrapper, .ag-root')) {
                 const gridContainer = element.closest('[class*="ag-theme"]');
                 if (gridContainer) {
-                    vendorContainer = gridContainer;
+                    agGridContainer = gridContainer;
                     break;
                 }
             }
         }
-        if (!vendorContainer) {
-            LoggingHelper_1.ConsoleLogError(`Could not find the agGrid vendor container. This will probably break some AdapTable functionality.`);
+        if (!agGridContainer) {
+            LoggingHelper_1.ConsoleLogError(`Could not find the AG Grid Container. This will probably break some AdapTable functionality.`);
         }
-        return (this.adaptableOptions.containerOptions.vendorContainer = vendorContainer);
+        return (this.adaptableOptions.containerOptions.agGridContainer = agGridContainer);
     }
     filterOnEditDataChange() {
         if (this.adaptableOptions.filterOptions.filterActionOnUserDataChange.applyFilter ==
@@ -723,7 +727,7 @@ class Adaptable {
         //   }
         // }
         const allColumns = [];
-        const vendorCols = this.gridOptions.columnApi.getAllColumns();
+        const agGridCols = this.gridOptions.columnApi.getAllColumns();
         const columnGroupChildren = this.gridOptions.columnApi.getAllDisplayedColumnGroups();
         const groupsCount = {};
         const colsToGroups = columnGroupChildren.reduce((acc, columnGroup) => {
@@ -752,16 +756,16 @@ class Adaptable {
             colsToGroups[colId].groupCount = groupsCount[colsToGroups[colId].columnGroupId];
         });
         // TODO sort the visible columns by layout order
-        vendorCols.forEach((vendorColumn) => {
-            const colId = vendorColumn.getColId();
+        agGridCols.forEach((agGridColumn) => {
+            const colId = agGridColumn.getColId();
             if (!this.api.columnApi.isRowGroupColumn(colId)) {
-                allColumns.push(this.createAdaptableColumn(vendorColumn, colsToGroups));
+                allColumns.push(this.createAdaptableColumn(agGridColumn, colsToGroups));
             }
         });
         this.api.internalApi.setColumns(allColumns);
     }
-    createAdaptableColumn(vendorColumn, colsToGroups) {
-        const abColumn = this.agGridHelper.createAdaptableColumnFromVendorColumn(vendorColumn, colsToGroups);
+    createAdaptableColumn(agGridColumn, colsToGroups) {
+        const abColumn = this.agGridHelper.createAdaptableColumnFromAgGridColumn(agGridColumn, colsToGroups);
         return abColumn;
     }
     safeSetColDefs(colDefs) {
@@ -834,46 +838,94 @@ class Adaptable {
         }
         return style;
     }
-    getAlertCellStyle(col, params) {
+    getActiveAlertWithHighlightCell(col, params) {
         const activeAlerts = this.api.internalApi
             .getAdaptableAlerts()
-            .filter((aa) => {
+            .filter((alert) => {
             var _a;
-            return ((_a = aa.alertDefinition.AlertProperties) === null || _a === void 0 ? void 0 : _a.HighlightCell) &&
-                aa.dataChangedInfo &&
-                aa.dataChangedInfo.column &&
-                aa.dataChangedInfo.column.columnId === col.columnId &&
-                aa.dataChangedInfo.rowNode === params.node;
+            return ((_a = alert.alertDefinition.AlertProperties) === null || _a === void 0 ? void 0 : _a.HighlightCell) &&
+                alert.dataChangedInfo &&
+                alert.dataChangedInfo.column &&
+                alert.dataChangedInfo.column.columnId === col.columnId &&
+                alert.dataChangedInfo.rowNode === params.node;
         });
-        const alert = activeAlerts[0];
+        if (!activeAlerts.length) {
+            return null;
+        }
+        return activeAlerts === null || activeAlerts === void 0 ? void 0 : activeAlerts[0];
+    }
+    getActiveAlertWithHighlightRow(params) {
+        var _a;
+        return (_a = this.api.internalApi
+            .getAdaptableAlerts()
+            .filter((alert) => {
+            var _a;
+            return ((_a = alert.alertDefinition.AlertProperties) === null || _a === void 0 ? void 0 : _a.HighlightRow) &&
+                alert.dataChangedInfo &&
+                alert.dataChangedInfo.column &&
+                alert.dataChangedInfo.rowNode === params.node;
+        })) === null || _a === void 0 ? void 0 : _a[0];
+    }
+    getAlertCellStyle(col, params) {
+        const alert = this.getActiveAlertWithHighlightCell(col, params);
         if (alert) {
+            const highlightCell = alert.alertDefinition.AlertProperties.HighlightCell;
+            if (typeof highlightCell === 'object') {
+                return this.convertAdaptableStyleToCSS(highlightCell);
+            }
             return {
                 backgroundColor: UIHelper_1.default.getColorByMessageType(alert.alertDefinition.MessageType),
             };
         }
     }
-    getFlashingAlertRowStyle(params) {
+    getAlertCellClass(col, params) {
+        var _a, _b;
+        const alert = this.getActiveAlertWithHighlightCell(col, params);
+        const highlightCell = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.alertDefinition) === null || _a === void 0 ? void 0 : _a.AlertProperties) === null || _b === void 0 ? void 0 : _b.HighlightCell;
+        return typeof highlightCell === 'object' && (highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName)
+            ? highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName : null;
+    }
+    getAlertRowClass(params) {
+        var _a, _b;
+        const alert = this.getActiveAlertWithHighlightRow(params);
+        const highlightRow = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.alertDefinition) === null || _a === void 0 ? void 0 : _a.AlertProperties) === null || _b === void 0 ? void 0 : _b.HighlightRow;
+        return typeof highlightRow === 'object' && (highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName)
+            ? highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName : null;
+    }
+    getAlertRowStyle(params) {
+        var _a, _b;
+        const alert = this.getActiveAlertWithHighlightRow(params);
+        const highlightRow = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.alertDefinition) === null || _a === void 0 ? void 0 : _a.AlertProperties) === null || _b === void 0 ? void 0 : _b.HighlightRow;
+        if (highlightRow) {
+            return typeof highlightRow === 'object'
+                ? this.convertAdaptableStyleToCSS(highlightRow)
+                : {
+                    backgroundColor: UIHelper_1.default.getColorByMessageType(alert.alertDefinition.MessageType),
+                };
+        }
+        return null;
+    }
+    getFlashingCellRowStyle(params) {
         const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
-        return this.getFlashingAlertStyleFor(primaryKeyValue);
+        return this.getFlashingCellStyleFor(primaryKeyValue);
     }
-    getFlashingAlertStyleFor(primaryKey, colId) {
+    getFlashingCellStyleFor(primaryKey, colId) {
         var _a;
-        const flashingAlert = this.api.internalApi.getAdaptableFlashingAlertFor(primaryKey, colId);
-        if (!flashingAlert) {
+        const flashingCell = this.api.internalApi.getAdaptableFlashingCellFor(primaryKey, colId);
+        if (!flashingCell) {
             return {};
         }
-        return this.convertAdaptableStyleToCSS((_a = (flashingAlert.direction === 'up'
-            ? flashingAlert.flashingAlertDefinition.UpChangeStyle
-            : flashingAlert.direction === 'down'
-                ? flashingAlert.flashingAlertDefinition.DownChangeStyle
-                : flashingAlert.flashingAlertDefinition.NeutralChangeStyle)) !== null && _a !== void 0 ? _a : {});
+        return this.convertAdaptableStyleToCSS((_a = (flashingCell.direction === 'up'
+            ? flashingCell.flashingCellDefinition.UpChangeStyle
+            : flashingCell.direction === 'down'
+                ? flashingCell.flashingCellDefinition.DownChangeStyle
+                : flashingCell.flashingCellDefinition.NeutralChangeStyle)) !== null && _a !== void 0 ? _a : {});
     }
-    getFlashingAlertCellStyle(col, params) {
+    getFlashingCellStyle(col, params) {
         const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
-        return this.getFlashingAlertStyleFor(primaryKeyValue, col.columnId);
+        return this.getFlashingCellStyleFor(primaryKeyValue, col.columnId);
     }
     getCellHighlightStyle(col, params) {
-        var _a;
         const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
         const cellHightlight = this.api.internalApi
             .getSystemState()
@@ -882,19 +934,33 @@ class Adaptable {
                 cellHighlightInfo.primaryKeyValue === primaryKeyValue);
         });
         if (cellHightlight) {
-            const highhlightType = (_a = cellHightlight.highlightType) !== null && _a !== void 0 ? _a : 'Info';
-            switch (highhlightType) {
-                case 'Error':
-                    return { backgroundColor: 'var(--ab-color-error)' };
-                case 'Info':
-                    return { backgroundColor: 'var(--ab-color-info)' };
-                case 'Success':
-                    return { backgroundColor: 'var(--ab-color-success)' };
-                case 'Warning':
-                    return { backgroundColor: 'var(--ab-color-warn)' };
-            }
+            return this.convertAdaptableStyleToCSS(cellHightlight.highlightStyle);
         }
     }
+    getRowHighlightStyle(params) {
+        var _a;
+        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
+        const highlightRow = (_a = this.api.internalApi
+            .getSystemState()
+            .HighlightedRows) === null || _a === void 0 ? void 0 : _a.find((highlightRow) => {
+            return highlightRow.primaryKeyValue === primaryKeyValue;
+        });
+        if (highlightRow) {
+            return this.convertAdaptableStyleToCSS(highlightRow.highlightStyle);
+        }
+    }
+    getRowHighlightClass(params) {
+        var _a;
+        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
+        const highlightRow = (_a = this.api.internalApi
+            .getSystemState()
+            .HighlightedRows) === null || _a === void 0 ? void 0 : _a.find((highlightRow) => {
+            return highlightRow.primaryKeyValue === primaryKeyValue;
+        });
+        return typeof (highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.highlightStyle) === 'object'
+            ? highlightRow.highlightStyle.ClassName
+            : null;
+    }
     getQuickSearchCellStyle() {
         const quickSearchStyle = this.api.quickSearchApi.getQuickSearchStyle();
         if (!quickSearchStyle || StringExtensions_1.StringExtensions.IsNotNullOrEmpty(quickSearchStyle.ClassName)) {
@@ -1480,13 +1546,13 @@ class Adaptable {
                 });
             }
         }
-        const uniqueVals = uniqBy_1.default(returnValues, 'displayValue');
+        const uniqueVals = uniqBy_1.default(returnValues, 'rawValue');
         return uniqueVals.slice(0, this.adaptableOptions.filterOptions.maxFilterValuesToDisplay);
     }
     async getDistinctFilterValuesForColumn(column, visibleRowsOnly, filter, skipRowNode) {
         var _a;
         const permittedValues = (_a = this.api.userInterfaceApi.getFilterPermittedValuesForColumn(column)) !== null && _a !== void 0 ? _a : {
-            suppressClientSideFiltering: false,
+            suppressFilterSearchBar: false,
             values: () => undefined,
         };
         let preparedPermittedValues = undefined;
@@ -1502,7 +1568,7 @@ class Adaptable {
             LoggingHelper_1.ConsoleLogError(`Failed to load filter permitted values`, column, filter, error);
         }
         return {
-            suppressClientSideFilter: permittedValues.suppressClientSideFiltering,
+            suppressClientSideFilter: permittedValues.suppressFilterSearchBar,
             gridCells: this.getDistinctValuesForColumn(column, visibleRowsOnly, skipRowNode, preparedPermittedValues),
         };
     }
@@ -1558,8 +1624,7 @@ class Adaptable {
         else {
             permittedMap = null;
         }
-        const useRawValue = this.shouldUseRawValueForColumn(abColumn);
-        const eachFn = (rowNode, columnId, useRawValue) => {
+        const eachFn = (rowNode, columnId) => {
             if (rowNode && !this.isGroupRowNode(rowNode)) {
                 const gridCell = this.getGridCellFromRowNode(rowNode, columnId);
                 let allowed = !permittedMap || permittedMap.has(gridCell.displayValue);
@@ -1574,12 +1639,12 @@ class Adaptable {
         };
         if (visibleRowsOnly) {
             this.gridOptions.api.forEachNodeAfterFilter((rowNode) => {
-                eachFn(rowNode, columnId, useRawValue);
+                eachFn(rowNode, columnId);
             });
         }
         else {
             this.gridOptions.api.forEachNode((rowNode) => {
-                eachFn(rowNode, columnId, useRawValue);
+                eachFn(rowNode, columnId);
             });
         }
         return returnArray.slice(0, this.adaptableOptions.filterOptions.maxFilterValuesToDisplay);
@@ -1597,16 +1662,22 @@ class Adaptable {
             return undefined;
         }
     }
-    shouldUseRawValueForColumn(column) {
+    isInternallyRenderedColumn(column) {
+        if (!column || column.isGrouped) {
+            return true;
+        }
         // we need to return false if the column has a cell rendeerer i think...
         const colDef = this.gridOptions.api.getColumnDef(column.columnId);
         if (colDef && colDef.cellRenderer != null) {
-            return true;
+            return false;
         }
         if (this.api.columnApi.isFormatNumericStyleColumn(column)) {
-            return true;
+            return false;
         }
-        return false;
+        if (this.api.columnApi.isBooleanColumn(column)) {
+            return false;
+        }
+        return true;
     }
     getDisplayValue(id, columnId) {
         let returnValue;
@@ -1635,11 +1706,11 @@ class Adaptable {
         if (rowNode == null) {
             return undefined;
         }
+        const abColumn = this.api.columnApi.getColumnFromId(columnId);
         const pkValue = this.getPrimaryKeyValueFromRowNode(rowNode);
         const rawValue = this.getRawValueFromRowNode(rowNode, columnId);
         const displayValue = this.getDisplayValueFromRawValue(columnId, rawValue);
-        const normalisedvalue = this.getNormalisedValueFromRowValue(rawValue, columnId);
-        const abColumn = this.api.columnApi.getColumnFromId(columnId);
+        const normalisedvalue = this.getNormalisedValueFromRowValue(rawValue, displayValue, abColumn);
         return {
             rawValue: rawValue,
             displayValue: displayValue,
@@ -1702,24 +1773,28 @@ class Adaptable {
         };
         return formatterFn(params);
     }
-    getNormalisedValueFromRowValue(rawValue, columnId) {
-        if (rawValue === undefined || rawValue === null) {
+    getNormalisedValueFromRowValue(rawValue, displayValue, column) {
+        if (!column) {
+            return rawValue;
+        }
+        const returnValue = this.isInternallyRenderedColumn(column) ? displayValue : rawValue;
+        if (returnValue === undefined || returnValue === null) {
             return rawValue;
         }
-        const dataType = this.api.columnApi.getColumnDataTypeFromColumnId(columnId);
+        const dataType = column.dataType;
         if (dataType === 'String') {
-            return typeof rawValue !== 'string' ? String(rawValue) : rawValue;
+            return typeof rawValue !== 'string' ? String(rawValue) : returnValue;
         }
         if (dataType === 'Number') {
-            return typeof rawValue !== 'number' ? Number(rawValue) : rawValue;
+            return typeof rawValue !== 'number' ? Number(rawValue) : returnValue;
         }
         if (dataType === 'Boolean') {
-            return typeof rawValue !== 'boolean' ? Boolean(rawValue) : rawValue;
+            return typeof rawValue !== 'boolean' ? Boolean(rawValue) : returnValue;
         }
         if (dataType === 'Date') {
-            return rawValue instanceof Date ? rawValue : new Date(rawValue);
+            return rawValue instanceof Date ? returnValue : new Date(rawValue);
         }
-        return rawValue;
+        return returnValue;
     }
     getRawValueFromRowNode(rowNode, columnId) {
         return this.gridOptions.api.getValue(columnId, rowNode);
@@ -1979,6 +2054,39 @@ class Adaptable {
         this.safeSetColDefs(allDefs);
         this.setLayout();
     }
+    cleanupFloatingFilters_WORKAROUND() {
+        // since AG Grid v26.2.0 floating filters have a memory leak due to an dangling reference to an obsolete agSetFilter instance
+        var _a, _b;
+        // 1a. The initial floating filter component is defaulted to the 'agSetColumnFloatingFilter'
+        // (see https://github.com/ag-grid/ag-grid/blob/v26.2.0/community-modules/core/src/ts/headerRendering/cells/floatingFilter/headerFilterCellCtrl.ts#L210) and a corresponding bean component is instantiated.
+        //   1b. A listener to the 'filterChanged' event is created, referencing the newly created bean instance: https://github.com/ag-grid/ag-grid/blob/v26.2.0/community-modules/core/src/ts/headerRendering/cells/floatingFilter/headerFilterCellCtrl.ts#L298
+        //   2a. The floating filter is set to a custom component (via https://www.ag-grid.com/javascript-data-grid/column-properties/#reference-filtering-floatingFilterComponent), triggering the creation of a new floating filter bean component
+        //   2b. Another listener to the 'filterChanged' event is created, referencing the newly created (in step 2a) bean instance https://github.com/ag-grid/ag-grid/blob/v26.2.0/community-modules/core/src/ts/headerRendering/cells/floatingFilter/headerFilterCellCtrl.ts#L298
+        //   BUT the listener created in step 1b is NOT destroyed, leading to a state where the 'filterChanged' event has listeners stemming from both the current floating filter bean but also from the initial(now obsolete) bean
+        //
+        // As a consequence, any 'filterChanged' event will be processed by both listeners (1b, 2b) and will more often than not lead to a runtime exception due to the dangling references from the obsolete listener
+        // AG Grid team tracks this issue in AG-6179
+        // until a fix arrives, a workaround is to hide all the visible columns (thus destroying all the HeaderFilterCellCtrl instances)
+        if (!((_b = (_a = this.adaptableOptions) === null || _a === void 0 ? void 0 : _a.filterOptions) === null || _b === void 0 ? void 0 : _b.useAdaptableQuickFilter)) {
+            // no need to do anything if we don't use adaptable quick filter
+            return;
+        }
+        if (this.gridOptions.columnApi.isPivotMode()) {
+            // floating filters are NOT available in pivot mode
+            return;
+        }
+        // floating filter instances (HeaderFilterCellCtrl) are created only for rendered columns (in viewport)
+        // so we have to handle only the displayed columns
+        const allDisplayedCols = this.gridOptions.columnApi.getAllDisplayedColumns();
+        const colsWithFloatingFilter = allDisplayedCols.filter((col) => {
+            const colDef = col.getColDef();
+            return (colDef.floatingFilter ||
+                colDef.floatingFilterComponent ||
+                this.api.columnApi.usesAdaptableQuickFilter(col.getColId()));
+        });
+        colsWithFloatingFilter.forEach((col) => this.gridOptions.columnApi.setColumnsVisible(colsWithFloatingFilter, false));
+        // !! it is important to NOT set the columns visible again as this is already taken care of in the next performed method (this.updateColDefsForSpecialColumns())
+    }
     getColDefsForCalculatedColumns() {
         const specialColumnsAreFilterable = this.adaptableOptions.filterOptions
             .enableFilterOnSpecialColumns
@@ -2106,6 +2214,7 @@ class Adaptable {
         (_j = this.TeamSharingService) === null || _j === void 0 ? void 0 : _j.destroy();
         (_k = this.MetamodelService) === null || _k === void 0 ? void 0 : _k.destroy();
         (_l = this.LicenseService) === null || _l === void 0 ? void 0 : _l.destroy();
+        this.isDestroyed = true;
     }
     // really really need to do this properly but as a temp fix lets create a default style for when no data
     getDefaultIPPStyle() {
@@ -2174,12 +2283,12 @@ class Adaptable {
         }
         return this.abContainerElement;
     }
-    getGridContainerElement() {
+    getAgGridContainerElement() {
         if (!this.gridContainerElement) {
             this.gridContainerElement =
-                typeof this.adaptableOptions.containerOptions.vendorContainer === 'string'
-                    ? document.getElementById(this.adaptableOptions.containerOptions.vendorContainer)
-                    : this.adaptableOptions.containerOptions.vendorContainer;
+                typeof this.adaptableOptions.containerOptions.agGridContainer === 'string'
+                    ? document.getElementById(this.adaptableOptions.containerOptions.agGridContainer)
+                    : this.adaptableOptions.containerOptions.agGridContainer;
         }
         return this.gridContainerElement;
     }
@@ -2197,7 +2306,7 @@ class Adaptable {
             }
             return;
         }
-        const gridContainerElement = this.getGridContainerElement();
+        const gridContainerElement = this.getAgGridContainerElement();
         if (gridContainerElement) {
             gridContainerElement.addEventListener('keydown', (event) => this._emit('KeyDown', event));
         }
@@ -2247,7 +2356,7 @@ class Adaptable {
             const cellEditableFn = this.adaptableOptions.editOptions.isCellEditable;
             if (cellEditableFn) {
                 let gridCell = this.getGridCellFromRowNode(params.node, params.column.getColId());
-                let isEditable = cellEditableFn(gridCell, params.node);
+                let isEditable = cellEditableFn(gridCell);
                 if (!isEditable) {
                     this.gridOptions.api.stopEditing();
                 }
@@ -2508,7 +2617,7 @@ class Adaptable {
             }
             return originaldoesExternalFilterPass ? originaldoesExternalFilterPass(node) : true;
         };
-        // Build the COLUMN HEADER MENU.  Note that we do this EACH time the menu is opened (as items can change)
+        // Build the COLUMN MENU.  Note that we do this EACH time the menu is opened (as items can change)
         const originalgetMainMenuItems = this.gridOptions.getMainMenuItems;
         this.gridOptions.getMainMenuItems = (params) => {
             // couldnt find a way to listen for menu close. There is a Menu Item Select, but you can also close menu from filter and clicking outside menu....
@@ -2529,6 +2638,9 @@ class Adaptable {
         // add any special renderers, display formats, custom sorts and apply the theme
         // then do any final rendering required, filter the grid and - to be on the safe set - redraw
         try {
+            // it is very important that this method is executed as soon as possible and BEFORE the updateColDefsForSpecialColumns() method
+            // this will ensure that the columns are recreated as expected (see method implementation&comments for more details)
+            this.cleanupFloatingFilters_WORKAROUND();
             this.updateColDefsForSpecialColumns();
             this.applyCurrentTheme();
             this.applyFinalRendering();
@@ -2653,7 +2765,7 @@ class Adaptable {
                     ? this.getFormatColumnCellStyle(formatColumn, params)
                     : undefined;
                 const isQuickSearchActive = hasQuickSearchStyle && this.isQuickSearchActive(abColumn, params);
-                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), formatColumnCellStyle), this.getConditionalStyleCellStyle(conditionalStyles, abColumn, params)), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingAlertCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
+                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), formatColumnCellStyle), this.getConditionalStyleCellStyle(conditionalStyles, abColumn, params)), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
                 return result;
             };
             return cellStyle;
@@ -2670,12 +2782,15 @@ class Adaptable {
             const hasConditionalStylesWithClassNames = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(conditionalStyles);
             const quickSearchStyleClassName = this.api.quickSearchApi.getQuickSearchStyle().ClassName;
             const hasQuickSearchStyleClassName = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(quickSearchStyleClassName);
+            const classNameMap = {};
             const cellClass = (params) => {
+                var _a;
                 const isQuickSearchActive = hasQuickSearchStyleClassName && this.isQuickSearchActive(abColumn, params);
                 const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
                 const editableClassName = this.getEditableCellClass(abColumn, params);
                 const readonlyClassName = this.getReadonlyCellClass(abColumn, params);
-                let returnValue = [
+                const highlightAlertClassName = this.getAlertCellClass(abColumn, params);
+                const returnValue = [
                     this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
                     formatColumnStyleClassName,
@@ -2685,9 +2800,28 @@ class Adaptable {
                     isQuickSearchActive ? quickSearchStyleClassName : null,
                     editableClassName,
                     readonlyClassName,
+                    highlightAlertClassName,
                 ]
                     .filter((x) => !!x)
                     .join(' ');
+                const primaryKey = this.getPrimaryKeyValueFromRowNode(params.node);
+                const key = `${primaryKey}:${params.colDef.colId}`;
+                if (classNameMap[key] &&
+                    classNameMap[key] !== returnValue &&
+                    // only hard-reset when removing class-names
+                    // ag-grid does not remove class-names, it accumulates them
+                    // https://www.ag-grid.com/javascript-data-grid/cell-styles/#refresh-of-styles
+                    returnValue.length < ((_a = classNameMap[key]) === null || _a === void 0 ? void 0 : _a.length)) {
+                    setTimeout(() => {
+                        /**
+                         * This is called inside a getter function, inside ag-grid.
+                         * To allow ag-grid run it's logic, the redraw is done inside an timeout
+                         * to make sure it is not done in an inappropriate time.
+                         */
+                        params.api.redrawRows({ rowNodes: [params.node] });
+                    }, 0);
+                }
+                classNameMap[key] = returnValue;
                 return StringExtensions_1.StringExtensions.IsNotNullOrEmpty(returnValue) ? returnValue : undefined;
             };
             return cellClass;
@@ -2896,7 +3030,7 @@ class Adaptable {
                 var _a;
                 if (cellEditableFn) {
                     let gridCell = this.getGridCellFromRowNode(params.node, params.column.getColId());
-                    let isEditable = cellEditableFn(gridCell, params.node);
+                    let isEditable = cellEditableFn(gridCell);
                     if (!isEditable) {
                         return false;
                     }
@@ -3231,11 +3365,10 @@ class Adaptable {
             this.gridOptions.api.onGroupExpandedOrCollapsed();
         }
     }
-    getVendorGridColumnFieldForColumn(abColumn) {
-        const agGridColumn = this.gridOptions.columnApi
+    getAgGridColumnForAdaptableColumn(abColumn) {
+        return this.gridOptions.columnApi
             .getAllColumns()
             .find((c) => c.getColId() === abColumn.columnId);
-        return agGridColumn.getColDef().field || '';
     }
     setRowGroupColumns(columnIds) {
         this.gridOptions.columnApi.setRowGroupColumns(columnIds);
@@ -3299,15 +3432,15 @@ class Adaptable {
         this.gridOptions.api.clearRangeSelection();
     }
     hideColumn(columnId) {
-        let vendorCol = this.gridOptions.columnApi.getColumn(columnId);
-        if (vendorCol) {
+        let agGridColumn = this.gridOptions.columnApi.getColumn(columnId);
+        if (agGridColumn) {
             this.gridOptions.columnApi.setColumnVisible(columnId, false);
             this.updateColumnsIntoStore();
         }
     }
     showColumn(columnId) {
-        let vendorCol = this.gridOptions.columnApi.getColumn(columnId);
-        if (vendorCol) {
+        let agGridColumn = this.gridOptions.columnApi.getColumn(columnId);
+        if (agGridColumn) {
             this.gridOptions.columnApi.setColumnVisible(columnId, true);
             this.updateColumnsIntoStore();
         }
@@ -3393,10 +3526,18 @@ class Adaptable {
         }
         dataUpdateConfig = dataUpdateConfig || {};
         if (dataUpdateConfig.runAsync) {
-            this.gridOptions.api.applyTransactionAsync({ update: dataRows }, dataUpdateConfig.callback);
+            return new Promise((resolve) => {
+                this.gridOptions.api.applyTransactionAsync({ update: dataRows }, (transaction) => {
+                    if (typeof dataUpdateConfig.callback === 'function') {
+                        dataUpdateConfig.callback(transaction);
+                    }
+                    resolve(transaction === null || transaction === void 0 ? void 0 : transaction.update);
+                });
+            });
         }
         else {
-            this.gridOptions.api.applyTransaction({ update: dataRows });
+            const transaction = this.gridOptions.api.applyTransaction({ update: dataRows });
+            return Promise.resolve(transaction === null || transaction === void 0 ? void 0 : transaction.update);
         }
     }
     addRows(dataRows, dataUpdateConfig) {
@@ -3409,19 +3550,35 @@ class Adaptable {
             newData.addIndex = dataUpdateConfig.addIndex;
         }
         if (dataUpdateConfig.runAsync) {
-            this.gridOptions.api.applyTransactionAsync(newData, dataUpdateConfig.callback);
+            return new Promise((resolve) => {
+                this.gridOptions.api.applyTransactionAsync(newData, (transaction) => {
+                    if (typeof dataUpdateConfig.callback === 'function') {
+                        dataUpdateConfig.callback(transaction);
+                    }
+                    resolve(transaction === null || transaction === void 0 ? void 0 : transaction.add);
+                });
+            });
         }
         else {
-            this.gridOptions.api.applyTransaction(newData);
+            const transaction = this.gridOptions.api.applyTransaction(newData);
+            return Promise.resolve(transaction === null || transaction === void 0 ? void 0 : transaction.add);
         }
     }
     deleteRows(dataRows, dataUpdateConfig) {
         dataUpdateConfig = dataUpdateConfig || {};
         if (dataUpdateConfig.runAsync) {
-            this.gridOptions.api.applyTransactionAsync({ remove: dataRows }, dataUpdateConfig.callback);
+            return new Promise((resolve) => {
+                this.gridOptions.api.applyTransactionAsync({ remove: dataRows }, (transaction) => {
+                    if (typeof dataUpdateConfig.callback === 'function') {
+                        dataUpdateConfig.callback(transaction);
+                    }
+                    resolve(transaction === null || transaction === void 0 ? void 0 : transaction.remove);
+                });
+            });
         }
         else {
-            this.gridOptions.api.applyTransaction({ remove: dataRows });
+            const transaction = this.gridOptions.api.applyTransaction({ remove: dataRows });
+            return Promise.resolve(transaction.remove);
         }
     }
     getFirstGroupedColumn() {
@@ -3522,7 +3679,7 @@ class Adaptable {
     hideQuickFilter() {
         this.gridOptions.api.setFloatingFiltersHeight(0);
     }
-    getVendorColumnType(columnId) {
+    getAgGridColumnType(columnId) {
         var _a;
         const { type } = (_a = this.gridOptions.api.getColumnDef(columnId)) !== null && _a !== void 0 ? _a : {};
         return type || '';
@@ -3539,8 +3696,8 @@ class Adaptable {
             : this.runAdaptableComparerFunction(customSort.ColumnId, customSort.SortedValues);
         return comparerFunction;
     }
-    getVendorGridLightThemeName() {
-        const container = this.getGridContainerElement();
+    getAgGridLightThemeName() {
+        const container = this.getAgGridContainerElement();
         if (container && container.classList) {
             // we detect the ag theme class
             const classList = container.classList;
@@ -3552,10 +3709,10 @@ class Adaptable {
                 }
             }
         }
-        return this.agGridHelper.getVendorLightThemeName();
+        return this.agGridHelper.getAgGridLightThemeName();
     }
-    getVendorGridCurrentThemeName() {
-        const container = this.getGridContainerElement();
+    getAgGridCurrentThemeName() {
+        const container = this.getAgGridContainerElement();
         if (container && container.classList) {
             // we detect the ag theme class
             const classList = container.classList;
@@ -3566,7 +3723,7 @@ class Adaptable {
                 }
             }
         }
-        return this.getVendorGridLightThemeName();
+        return this.getAgGridLightThemeName();
     }
     applyAdaptableTheme(theme) {
         const themeName = typeof theme === 'string' ? theme : theme.Name;
@@ -3622,39 +3779,39 @@ class Adaptable {
         });
         const systemThemes = this.api.themeApi.getAllSystemTheme();
         const isSystemTheme = !!systemThemes.filter((t) => t.Name === themeName)[0];
-        const container = this.getGridContainerElement();
-        const getVendorLightThemeName = () => this.getVendorGridLightThemeName();
-        const getVendorDarkThemeName = () => getVendorLightThemeName() + '-dark';
+        const container = this.getAgGridContainerElement();
+        const getAgGridLightThemeName = () => this.getAgGridLightThemeName();
+        const getAgGridDarkThemeName = () => getAgGridLightThemeName() + '-dark';
         if (newTheme && isSystemTheme) {
             if (themeName === GeneralConstants_1.LIGHT_THEME) {
-                newTheme.VendorGridClassName = newTheme.VendorGridClassName || getVendorLightThemeName();
+                newTheme.AgGridClassName = newTheme.AgGridClassName || getAgGridLightThemeName();
             }
             if (themeName === GeneralConstants_1.DARK_THEME) {
-                newTheme.VendorGridClassName = newTheme.VendorGridClassName || getVendorDarkThemeName();
+                newTheme.AgGridClassName = newTheme.AgGridClassName || getAgGridDarkThemeName();
             }
         }
-        if (!newTheme.VendorGridClassName) {
-            // default the vendor grid to the light theme
-            newTheme.VendorGridClassName = getVendorLightThemeName();
+        if (!newTheme.AgGridClassName) {
+            // default AG Grid to its light theme
+            newTheme.AgGridClassName = getAgGridLightThemeName();
         }
         if (container != null) {
             if (themesToRemove.length) {
                 themesToRemove.forEach((theme) => {
-                    if (theme.VendorGridClassName) {
-                        container.classList.remove(theme.VendorGridClassName);
+                    if (theme.AgGridClassName) {
+                        container.classList.remove(theme.AgGridClassName);
                     }
                 });
             }
-            // also remove all vendor theme class names
-            const vendorClassNamesToRemove = [];
+            // also remove all AG Grid theme class names
+            const agGridClassNamesToRemove = [];
             container.classList.forEach((x) => {
                 if (x && x.indexOf('ag-theme-') === 0) {
-                    vendorClassNamesToRemove.push(x);
+                    agGridClassNamesToRemove.push(x);
                 }
             });
-            vendorClassNamesToRemove.forEach((x) => container.classList.remove(x));
-            if (newTheme && newTheme.VendorGridClassName) {
-                container.classList.add(newTheme.VendorGridClassName);
+            agGridClassNamesToRemove.forEach((x) => container.classList.remove(x));
+            if (newTheme && newTheme.AgGridClassName) {
+                container.classList.add(newTheme.AgGridClassName);
             }
             container.classList.add('ab-Grid');
             if (this.adaptableOptions.filterOptions.indicateFilteredColumns) {
@@ -3679,15 +3836,19 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         // Set any Row Styles (i.e. items without a classname)
         this.setGridOptionsProperty('getRowStyle', (userGetRowStyle) => {
             return (params) => {
-                const result = Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, params));
+                const result = Object.assign(Object.assign(Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, params));
                 return result;
             };
         });
         // Now set up Row Classes
         this.setGridOptionsProperty('getRowClass', (userGetRowClass) => {
             return (params) => {
-                let returnValue = [
+                const alertHighlightClassName = this.getAlertRowClass(params);
+                const highlightClassName = this.getRowHighlightClass(params);
+                const returnValue = [
                     typeof userGetRowClass === 'function' ? userGetRowClass(params) : userGetRowClass,
+                    highlightClassName,
+                    alertHighlightClassName,
                     this.getConditionalStyleRowClass(conditionalStyles.filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName)), params),
                 ]
                     .filter((x) => !!x)
@@ -3999,7 +4160,7 @@ class AdaptableNoCodeWizard {
      */
     constructor(adaptableOptions, extraOptions = {}) {
         const defaultInit = async ({ gridOptions, adaptableOptions }) => {
-            adaptableOptions.vendorGrid = gridOptions;
+            adaptableOptions.agGridOptions = gridOptions;
             return await Adaptable.init(adaptableOptions);
         };
         this.adaptableOptions = adaptableOptions;
@@ -4033,7 +4194,7 @@ class AdaptableNoCodeWizard {
                 ReactDOM.unmountComponentAtNode(container);
                 this.init({
                     adaptableOptions,
-                    gridOptions: adaptableOptions.vendorGrid,
+                    gridOptions: adaptableOptions.agGridOptions,
                 });
             } })), container);
     }