@adaptabletools/adaptable 13.0.0-canary.1 → 13.0.0-canary.10

package/src/agGrid/Adaptable.js

@@ -8,7 +8,6 @@ const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
 const uniqBy_1 = tslib_1.__importDefault(require("lodash/uniqBy"));
 const React = tslib_1.__importStar(require("react"));
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const AdaptableApiImpl_1 = require("../Api/Implementation/AdaptableApiImpl");
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
@@ -64,6 +63,7 @@ const AdaptableStatusBar_1 = require("../View/StatusBar/AdaptableStatusBar");
 const RowEditService_1 = require("../Utilities/Services/RowEditService");
 const weightedAverage_1 = require("./weightedAverage");
 const AggregationColumns_1 = require("../PredefinedConfig/Common/AggregationColumns");
+const renderReactRoot_1 = require("../renderReactRoot");
 const tinycolor = require('tinycolor2');
 const GROUP_PATH_SEPARATOR = '/';
 // IMPORTANT - we need colId to be set in order for safeSetColDefs to work correctly
@@ -169,6 +169,8 @@ class Adaptable {
         };
         this._adaptableReady = false;
         this.isDestroyed = false;
+        this.supressReact18RenderWarning = false;
+        this.renderReactRoot = (node, container) => (0, renderReactRoot_1.renderReactRoot)(node, container, this.supressReact18RenderWarning);
         this.isPluginLoaded = (pluginId) => {
             const plugins = this.adaptableOptions.plugins || [];
             for (let i = 0, len = plugins.length; i < len; i++) {
@@ -274,7 +276,9 @@ class Adaptable {
         else {
             core_1.ModuleRegistry.registerModules(runtimeConfig.agGridModules);
         }
-        return Adaptable.initInternal(adaptableOptions);
+        return Adaptable.initInternal(adaptableOptions, {
+            supressReact18RenderWarning: true,
+        });
     }
     /**
      * Lazy static constructor for Adaptable
@@ -337,6 +341,12 @@ class Adaptable {
     // this is still used internally but should not be used externally as a preference
     async init(adaptableOptions, runtimeConfig, _staticInit) {
         var _a, _b, _c, _d, _e, _f;
+        if (runtimeConfig) {
+            this.supressReact18RenderWarning = !!runtimeConfig.supressReact18RenderWarning;
+            if (runtimeConfig.renderReactRoot) {
+                this.renderReactRoot = runtimeConfig.renderReactRoot;
+            }
+        }
         if (!_staticInit) {
             (0, LoggingHelper_1.ConsoleLogWarning)(`
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@@ -456,26 +466,20 @@ class Adaptable {
                 AdaptableHelper_1.default.checkValidPrimaryKey(this);
             }, (e) => {
                 (0, LoggingHelper_1.ConsoleLogError)('Failed to Init Modules : ', e);
-                // for now we initiliaze the grid even if initialising Modules has failed (perhaps revisit this?)
+                // for now we initialize the grid even if initialising Modules has failed (perhaps revisit this?)
                 this.initInternalGridLogic();
                 this.api.internalApi.hideLoadingScreen(); // doesnt really help but at least clears the screen
             }).then(async () => {
                 this.api.internalApi.hideLoadingScreen();
                 this.isInitialised = true;
                 this._adaptableReady = true;
-                // setTimeout(() => {
-                // this.api.eventApi.emit('AdaptableReady', {
-                //   adaptableApi: this.api,
-                //   gridOptions: this.adaptableOptions.gridOptions,
-                // });
-                // }, 0);
             });
             if (this.abContainerElement == null) {
                 this.abContainerElement = this.getAdaptableContainerElement();
             }
             if (this.abContainerElement != null) {
                 this.abContainerElement.innerHTML = '';
-                ReactDOM.render((0, AdaptableView_1.AdaptableApp)({ Adaptable: this }), this.abContainerElement);
+                this.unmountReactRoot = this.renderReactRoot((0, AdaptableView_1.AdaptableApp)({ Adaptable: this }), this.abContainerElement);
             }
             // create debounce methods that take a time based on user settings
             this.throttleFilterOnEditDataChange = (0, throttle_1.default)(
@@ -888,51 +892,68 @@ class Adaptable {
         this.gridOptions.api.setColumnDefs(colDefs);
         this.updateColumnsIntoStore(); // todo remove this from here!!!
     }
-    getFormatColumnCellStyle(abColumn, formatColumn, params) {
-        if (!formatColumn.IncludeGroupedRows && this.isGroupRowNode(params.node)) {
-            return;
+    getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params) {
+        const columnStyle = formatColumn.ColumnStyle;
+        let style = {};
+        const gradientStyle = columnStyle === null || columnStyle === void 0 ? void 0 : columnStyle.GradientStyle;
+        if (gradientStyle) {
+            const min = this.api.formatColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
+            const max = this.api.formatColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
+            const clampedValue = (0, clamp_1.default)(params.value, min, max);
+            let cellBackColor;
+            let reverseGradient = false;
+            if (gradientStyle.ColumnComparison) {
+                cellBackColor = gradientStyle.ColumnComparison.Color;
+            }
+            else {
+                const matchingRange = gradientStyle.CellRanges.find((r) => (r.Min == 'Col-Min' || r.Min <= clampedValue) &&
+                    (r.Max == 'Col-Max' || r.Max >= clampedValue));
+                if (matchingRange) {
+                    cellBackColor = matchingRange.Color;
+                    reverseGradient = matchingRange.ReverseGradient;
+                }
+            }
+            const increase = Math.abs(max - min);
+            const percentage = ((params.value - min) / increase) * 100;
+            let alpha = Number((percentage / 100).toPrecision(2));
+            if (reverseGradient) {
+                alpha = 1 - alpha;
+            }
+            const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
+            style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
         }
-        if (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) {
-            return;
+        if (columnStyle.PercentBarStyle && columnStyle.PercentBarStyle.CellText) {
+            style.paddingTop = 0;
+            style.paddingBottom = 0;
         }
+        return style;
+    }
+    getFormatColumnColumnStyle(formatColumns) {
+        // first has more precedence, then they need to be applied in reverse order
+        return formatColumns.reduceRight((style, formatColumn) => {
+            const formatColumnStyle = this.convertAdaptableStyleToCSS(formatColumn.Style);
+            return Object.assign(Object.assign({}, style), formatColumnStyle);
+        }, {});
+    }
+    getFormatColumnCellStyle(abColumn, formatColumn, formatColumnsWithStyle, params) {
         let style = {};
         // percent bar && do we show text
         const columnStyle = formatColumn.ColumnStyle;
         if (columnStyle) {
-            const gradientStyle = columnStyle === null || columnStyle === void 0 ? void 0 : columnStyle.GradientStyle;
-            if (gradientStyle) {
-                const min = this.api.formatColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
-                const max = this.api.formatColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
-                const clampedValue = (0, clamp_1.default)(params.value, min, max);
-                let cellBackColor;
-                let reverseGradient = false;
-                if (gradientStyle.ColumnComparison) {
-                    cellBackColor = gradientStyle.ColumnComparison.Color;
-                }
-                else {
-                    const matchingRange = gradientStyle.CellRanges.find((r) => (r.Min == 'Col-Min' || r.Min <= clampedValue) &&
-                        (r.Max == 'Col-Max' || r.Max >= clampedValue));
-                    if (matchingRange) {
-                        cellBackColor = matchingRange.Color;
-                        reverseGradient = matchingRange.ReverseGradient;
-                    }
-                }
-                const increase = Math.abs(max - min);
-                const percentage = ((params.value - min) / increase) * 100;
-                let alpha = Number((percentage / 100).toPrecision(2));
-                if (reverseGradient) {
-                    alpha = 1 - alpha;
-                }
-                const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
-                style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
-            }
-            if (columnStyle.PercentBarStyle && columnStyle.PercentBarStyle.CellText) {
-                style.paddingTop = 0;
-                style.paddingBottom = 0;
+            if (columnStyle &&
+                !this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params)) {
+                return style;
             }
+            style = Object.assign(Object.assign({}, style), this.getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params));
         }
         else if (formatColumn.Style) {
-            style = this.convertAdaptableStyleToCSS(formatColumn.Style);
+            const activeFormatColumnsWithStyle = formatColumnsWithStyle.filter((formatColumn) => {
+                return this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params);
+            });
+            if (!activeFormatColumnsWithStyle.length) {
+                return style;
+            }
+            style = Object.assign(Object.assign({}, style), this.getFormatColumnColumnStyle(activeFormatColumnsWithStyle));
         }
         if (formatColumn.CellAlignment) {
             switch (formatColumn.CellAlignment) {
@@ -949,6 +970,30 @@ class Adaptable {
         }
         return style;
     }
+    getFormatColumnCellClass(formatColumns, abColumn, params) {
+        const classNames = formatColumns
+            .map((formatColumn) => {
+            var _a, _b;
+            if (((_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
+                this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params)) {
+                return (_b = formatColumn.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
+            }
+        })
+            .filter((x) => !!x);
+        return classNames;
+    }
+    getFormatColumnRowClass(formatColumns, params) {
+        const classNames = formatColumns
+            .map((formatColumn) => {
+            var _a, _b;
+            if (((_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
+                this.api.formatColumnApi.isFormatColumnActiveForRow(formatColumn, params)) {
+                return (_b = formatColumn.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
+            }
+        })
+            .filter((x) => !!x);
+        return classNames;
+    }
     getActiveAlertWithHighlightCell(col, params) {
         return this.api.internalApi.getAdaptableAlertWithHighlightCell(col.columnId, params.node);
     }
@@ -2489,7 +2534,7 @@ class Adaptable {
         return this.gridOptions.api.getDisplayedRowAtIndex(firstDisplayedRowIndex);
     }
     destroy(config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
         if (this.gridOptions && this.gridOptions.api) {
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_FIRST_DATA_RENDERED, this.listenerFirstDataRendered);
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.listenerPivotModeChanged);
@@ -2563,37 +2608,37 @@ class Adaptable {
             return;
         }
         if (abContainerElement != null) {
-            ReactDOM.unmountComponentAtNode(abContainerElement);
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
         }
         this.gridContainerElement = null;
         this.abContainerElement = null;
-        (_a = this.adaptableStore) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.adaptableStore) === null || _b === void 0 ? void 0 : _b.destroy();
         this.adaptableStore = null;
         this.gridOptions = null;
         this.adaptableOptions = null;
-        (_c = (_b = this.CalculatedColumnExpressionService) === null || _b === void 0 ? void 0 : _b.destroy) === null || _c === void 0 ? void 0 : _c.call(_b);
+        (_d = (_c = this.CalculatedColumnExpressionService) === null || _c === void 0 ? void 0 : _c.destroy) === null || _d === void 0 ? void 0 : _d.call(_c);
         this.CalculatedColumnExpressionService = null;
-        (_e = (_d = this.DataService) === null || _d === void 0 ? void 0 : _d.destroy) === null || _e === void 0 ? void 0 : _e.call(_d);
+        (_f = (_e = this.DataService) === null || _e === void 0 ? void 0 : _e.destroy) === null || _f === void 0 ? void 0 : _f.call(_e);
         this.DataService = null;
-        (_g = (_f = this.EntitlementService) === null || _f === void 0 ? void 0 : _f.destroy) === null || _g === void 0 ? void 0 : _g.call(_f);
+        (_h = (_g = this.EntitlementService) === null || _g === void 0 ? void 0 : _g.destroy) === null || _h === void 0 ? void 0 : _h.call(_g);
         this.EntitlementService = null;
-        (_j = (_h = this.ReportService) === null || _h === void 0 ? void 0 : _h.destroy) === null || _j === void 0 ? void 0 : _j.call(_h);
+        (_k = (_j = this.ReportService) === null || _j === void 0 ? void 0 : _j.destroy) === null || _k === void 0 ? void 0 : _k.call(_j);
         this.ReportService = null;
-        (_l = (_k = this.ModuleService) === null || _k === void 0 ? void 0 : _k.destroy) === null || _l === void 0 ? void 0 : _l.call(_k);
+        (_m = (_l = this.ModuleService) === null || _l === void 0 ? void 0 : _l.destroy) === null || _m === void 0 ? void 0 : _m.call(_l);
         this.ModuleService = null;
-        (_o = (_m = this.ValidationService) === null || _m === void 0 ? void 0 : _m.destroy) === null || _o === void 0 ? void 0 : _o.call(_m);
+        (_p = (_o = this.ValidationService) === null || _o === void 0 ? void 0 : _o.destroy) === null || _p === void 0 ? void 0 : _p.call(_o);
         this.ValidationService = null;
-        (_q = (_p = this.QueryLanguageService) === null || _p === void 0 ? void 0 : _p.destroy) === null || _q === void 0 ? void 0 : _q.call(_p);
+        (_r = (_q = this.QueryLanguageService) === null || _q === void 0 ? void 0 : _q.destroy) === null || _r === void 0 ? void 0 : _r.call(_q);
         this.QueryLanguageService = null;
-        (_s = (_r = this.AlertService) === null || _r === void 0 ? void 0 : _r.destroy) === null || _s === void 0 ? void 0 : _s.call(_r);
+        (_t = (_s = this.AlertService) === null || _s === void 0 ? void 0 : _s.destroy) === null || _t === void 0 ? void 0 : _t.call(_s);
         this.AlertService = null;
-        (_u = (_t = this.TeamSharingService) === null || _t === void 0 ? void 0 : _t.destroy) === null || _u === void 0 ? void 0 : _u.call(_t);
+        (_v = (_u = this.TeamSharingService) === null || _u === void 0 ? void 0 : _u.destroy) === null || _v === void 0 ? void 0 : _v.call(_u);
         this.TeamSharingService = null;
-        (_w = (_v = this.RowEditService) === null || _v === void 0 ? void 0 : _v.destroy) === null || _w === void 0 ? void 0 : _w.call(_v);
+        (_x = (_w = this.RowEditService) === null || _w === void 0 ? void 0 : _w.destroy) === null || _x === void 0 ? void 0 : _x.call(_w);
         this.RowEditService = null;
-        (_y = (_x = this.MetamodelService) === null || _x === void 0 ? void 0 : _x.destroy) === null || _y === void 0 ? void 0 : _y.call(_x);
+        (_z = (_y = this.MetamodelService) === null || _y === void 0 ? void 0 : _y.destroy) === null || _z === void 0 ? void 0 : _z.call(_y);
         this.MetamodelService = null;
-        (_0 = (_z = this.LicenseService) === null || _z === void 0 ? void 0 : _z.destroy) === null || _0 === void 0 ? void 0 : _0.call(_z);
+        (_1 = (_0 = this.LicenseService) === null || _0 === void 0 ? void 0 : _0.destroy) === null || _1 === void 0 ? void 0 : _1.call(_0);
         this.LicenseService = null;
         this.isDestroyed = true;
     }
@@ -3140,15 +3185,17 @@ class Adaptable {
                 borderColor: null,
             };
             const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
+            const formatColumnsWithStyle = this.api.formatColumnApi.getColumnFormatColumnsWithStyle(abColumn);
             const conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(abColumn);
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
             const cellStyle = (params) => {
                 const formatColumnCellStyle = formatColumn
-                    ? this.getFormatColumnCellStyle(abColumn, formatColumn, params)
+                    ? this.getFormatColumnCellStyle(abColumn, formatColumn, formatColumnsWithStyle, 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.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
+                const conditionalStyleObj = this.getConditionalStyleCellStyle(conditionalStyles, 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), conditionalStyleObj), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
                 return result;
             };
             return cellStyle;
@@ -3156,9 +3203,7 @@ class Adaptable {
     }
     setupColumnCellClass({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellClass', (userCellClass) => {
-            var _a;
-            const formatColumn = this.api.formatColumnApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
-            const formatColumnStyleClassName = formatColumn && !formatColumn.IsSuspended ? (_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName : null;
+            const formatColumns = this.api.formatColumnApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
             const conditionalStyles = this.api.conditionalStyleApi
                 .getConditionalStylesForColumn(abColumn)
                 .filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName));
@@ -3175,7 +3220,9 @@ class Adaptable {
                 const returnValue = [
                     this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
-                    formatColumnStyleClassName,
+                    formatColumns.length
+                        ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
+                        : null,
                     hasConditionalStylesWithClassNames
                         ? this.getConditionalStyleCellClass(conditionalStyles, abColumn, params)
                         : null,
@@ -3353,13 +3400,6 @@ class Adaptable {
             if (layoutCustomHeader) {
                 resultHeaderName = layoutCustomHeader;
             }
-            // check if the deprecated formatColumn header is used
-            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumnId(abColumn.columnId);
-            if (!layoutCustomHeader && (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.HeaderName) && !formatColumn.IsSuspended) {
-                // fallback to the formatColumn property if no Layout custom header is provided
-                resultHeaderName = formatColumn.HeaderName;
-                (0, LoggingHelper_1.ConsoleLogWarning)(`DEPRECATED: 'FormatColumn.HeaderName' is deprecated: use 'Layout.ColumnHeadersMap' instead`);
-            }
             // required here for the initial layout rendering
             abColumn.friendlyName = resultHeaderName;
             return resultHeaderName;
@@ -3397,7 +3437,7 @@ class Adaptable {
         });
     }
     setupColumnValueFormatter({ col, abColumn }) {
-        this.setColDefProperty(col, 'valueFormatter', () => {
+        this.setColDefProperty(col, 'valueFormatter', (params) => {
             const formatColumn = this.api.formatColumnApi.getFormatColumnWithDisplayFormatForColumn(abColumn);
             if (!formatColumn) {
                 return;
@@ -3432,7 +3472,12 @@ class Adaptable {
                         };
                     }
                 }
-                return valueFormatter;
+                if (valueFormatter) {
+                    return (params) => {
+                        const rulePasses = this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params);
+                        return rulePasses ? valueFormatter(params) : params.value;
+                    };
+                }
             }
         });
     }
@@ -3675,23 +3720,25 @@ class Adaptable {
         firstInfo.trigger == 'tick' ? this.filterOnTickingDataChange() : this.filterOnEditDataChange();
     }
     getExpressionStylesChanges(dataChangedScope, cellDataChangedInfos) {
-        const stylesWithExpression = this.api.conditionalStyleApi.getConditionalStylesWithExpression();
+        const stylesWithExpression = [];
+        stylesWithExpression.push(...this.api.conditionalStyleApi.getConditionalStylesWithExpression());
+        stylesWithExpression.push(...this.api.formatColumnApi.getFormatColumnsWithExpression());
         if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(stylesWithExpression)) {
             return;
         }
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
             if (!dataChangedScope.wholeRow) {
-                stylesWithExpression.forEach((conditionalStyle) => {
+                stylesWithExpression.forEach((styleModule) => {
                     if (!dataChangedScope.wholeRow) {
-                        const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(conditionalStyle.Rule.BooleanExpression);
+                        const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(styleModule.Rule.BooleanExpression);
                         if (columnIds.includes(cellDataChangedInfo.column.columnId)) {
-                            if (this.api.scopeApi.scopeIsAll(conditionalStyle.Scope)) {
+                            if (this.api.scopeApi.scopeIsAll(styleModule.Scope)) {
                                 dataChangedScope.wholeRow = true;
                                 return;
                             }
                             else {
                                 this.api.scopeApi
-                                    .getColumnsForScope(conditionalStyle.Scope)
+                                    .getColumnsForScope(styleModule.Scope)
                                     .map((c) => c.columnId)
                                     .forEach((colId) => {
                                     dataChangedScope.columnIds.add(colId);
@@ -4317,10 +4364,11 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
     setupRowStyling() {
         // first get the conditional style state
         const conditionalStyles = this.api.conditionalStyleApi.getRowConditionalStyles();
+        const formatColumnsStyles = this.api.formatColumnApi.getRowFormatColumnsWithStyle();
         // Set any Row Styles (i.e. items without a classname)
         this.setGridOptionsProperty('getRowStyle', (userGetRowStyle) => {
             return (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));
+                const result = Object.assign(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)), this.getFormatColumnRowStyle(formatColumnsStyles, params));
                 return result;
             };
         });
@@ -4334,6 +4382,7 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     highlightClassName,
                     alertHighlightClassName,
                     this.getConditionalStyleRowClass(conditionalStyles.filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName)), params),
+                    this.getFormatColumnRowClass(formatColumnsStyles, params),
                 ]
                     // we flatten it because 'userGetRowClass' might return a string[]
                     .flat()
@@ -4376,6 +4425,14 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
             }
         }
     }
+    getFormatColumnRowStyle(formatColumns, params) {
+        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(formatColumns)) {
+            const formatColumnWithRowStyle = formatColumns.find((formatColumn) => this.api.formatColumnApi.isFormatColumnActiveForRow(formatColumn, params));
+            if (formatColumnWithRowStyle) {
+                return this.convertAdaptableStyleToCSS(formatColumnWithRowStyle.Style);
+            }
+        }
+    }
     getGridOptionsApi() {
         if (!this.gridOptions.api) {
             (0, LoggingHelper_1.ConsoleLogError)('There is a problem with your instance of AG Grid - it has no gridApi object.  Please contact Support.');
@@ -4754,15 +4811,15 @@ class AdaptableNoCodeWizard {
         // this allows people to customize the wizard dimensions & styling
         // when it's visible
         container.classList.add('adaptable--in-wizard');
-        ReactDOM.render(React.createElement(AdaptableWizardView_1.default, Object.assign(Object.assign({ adaptableOptions: this.adaptableOptions }, this.extraOptions), { onInit: (adaptableOptions) => {
+        const unmount = (0, renderReactRoot_1.renderReactRoot)(React.createElement(AdaptableWizardView_1.default, Object.assign(Object.assign({ adaptableOptions: this.adaptableOptions }, this.extraOptions), { onInit: (adaptableOptions) => {
                 container.classList.remove('adaptable--in-wizard');
-                ReactDOM.unmountComponentAtNode(container);
+                unmount();
                 this.init({
                     adaptableOptions,
                     gridOptions: adaptableOptions.gridOptions,
                     agGridModules: [...this.agGridModules],
                 });
-            } })), container);
+            } })), container, true);
     }
 }
 exports.AdaptableNoCodeWizard = AdaptableNoCodeWizard;

package/src/agGrid/FilterWrapper.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterWrapperFactory = void 0;
-const tslib_1 = require("tslib");
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const FilterForm_1 = require("../View/Components/FilterForm/FilterForm");
 let FilterWrapperFactory = (adaptable) => {
     return class FilterWrapper {
@@ -33,8 +31,9 @@ let FilterWrapperFactory = (adaptable) => {
             return this.filterContainer;
         }
         afterGuiAttached(params) {
+            var _a;
             //we always unmount first so the autofocus from the form works... in other grids we unmount when hidden
-            ReactDOM.unmountComponentAtNode(this.filterContainer);
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
             let column = adaptable.api.columnApi.getColumnFromId(this.column.getColId());
             if (column) {
                 let filterContext = {
@@ -43,11 +42,12 @@ let FilterWrapperFactory = (adaptable) => {
                     ShowCloseButton: params != null && params.hidePopup != null,
                 };
                 adaptable.hideFilterFormPopup = params ? params.hidePopup : null;
-                ReactDOM.render((0, FilterForm_1.FilterFormReact)(filterContext), this.filterContainer);
+                this.unmountReactRoot = adaptable.renderReactRoot((0, FilterForm_1.FilterFormReact)(filterContext), this.filterContainer);
             }
         }
         destroy() {
-            ReactDOM.unmountComponentAtNode(this.filterContainer);
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
             this.filterContainer = null;
         }
     };

package/src/agGrid/FloatingFilterWrapper.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingFilterWrapperFactory = void 0;
-const tslib_1 = require("tslib");
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const QuickFilterForm_1 = require("../View/Components/FilterForm/QuickFilterForm");
 const FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper {
     onParentModelChanged(parentModel, filterChangedEvent) {
@@ -30,14 +28,15 @@ const FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper
                 Adaptable: adaptable,
                 ShowCloseButton: false,
             };
-            ReactDOM.render((0, QuickFilterForm_1.QuickFilterFormReact)(filterContext), this.filterContainer);
+            this.unmountReactRoot = adaptable.renderReactRoot((0, QuickFilterForm_1.QuickFilterFormReact)(filterContext), this.filterContainer);
         }
     }
     getGui() {
         return this.filterContainer;
     }
     destroy() {
-        ReactDOM.unmountComponentAtNode(this.filterContainer);
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
         this.filterContainer = null;
     }
 };

package/src/agGrid/createAgStatusPanelComponent.d.ts

@@ -13,6 +13,7 @@ export declare const createAgStatusPanelComponent: (component: React.FunctionCom
     new (): {
         params: IStatusPanelParams;
         eGui: HTMLElement;
+        unmountReactRoot?: VoidFunction;
         init(params: IStatusPanelParams): void;
         render(): void;
         getGui(): HTMLElement;

package/src/agGrid/createAgStatusPanelComponent.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAgStatusPanelComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
 const createAgStatusPanelComponent = (component, adaptable, context) => {
     return class StatusBarRenderer {
@@ -20,13 +19,14 @@ const createAgStatusPanelComponent = (component, adaptable, context) => {
                 context,
             };
             const children = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(component, props), adaptable);
-            ReactDOM.render(children, this.eGui);
+            this.unmountReactRoot = adaptable.renderReactRoot(children, this.eGui);
         }
         getGui() {
             return this.eGui;
         }
         destroy() {
-            ReactDOM.unmountComponentAtNode(this.eGui);
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
         }
     };
 };

package/src/agGrid/editors/AdaptableDateEditor/index.d.ts

@@ -28,6 +28,7 @@ export declare class AdaptableDateEditor implements ICellEditorComp {
     private el;
     private params;
     private editor;
+    private unmountReactRoot?;
     private valueParser;
     init(params: ICellEditorParams): void;
     getGui(): HTMLDivElement;

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableDateEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
 const InternalAdaptableDateEditor_1 = require("./InternalAdaptableDateEditor");
 const core_1 = require("@ag-grid-community/core");
@@ -111,10 +110,11 @@ class AdaptableDateEditor {
                 this.editor = editor;
                 editor === null || editor === void 0 ? void 0 : editor.focus();
             } }));
-        (0, react_dom_1.render)((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
+        this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
     }
     destroy() {
-        (0, react_dom_1.unmountComponentAtNode)(this.el);
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     shouldClearExistingValue(params) {
         return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;

package/src/agGrid/editors/AdaptableNumberEditor/index.d.ts

@@ -42,6 +42,7 @@ export declare class AdaptableNumberEditor implements ICellEditorComp {
     private params;
     private editor;
     private valueParser;
+    private unmountReactRoot?;
     init(params: AdaptableNumberCellEditorParams): void;
     getGui(): HTMLDivElement;
     getValue(): any;

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableNumberEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
 const InternalAdaptableNumberEditor_1 = require("./InternalAdaptableNumberEditor");
 const core_1 = require("@ag-grid-community/core");
@@ -77,7 +76,7 @@ class AdaptableNumberEditor {
                 this.editor = editor;
                 editor === null || editor === void 0 ? void 0 : editor.focus();
             } }));
-        (0, react_dom_1.render)((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
+        this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
         this.getGui().addEventListener('keydown', (keyDownEvent) => {
             adaptable._emit('CellEditorKeyDown', {
                 keyDownEvent,
@@ -90,7 +89,8 @@ class AdaptableNumberEditor {
         });
     }
     destroy() {
-        (0, react_dom_1.unmountComponentAtNode)(this.el);
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     getStartValue(params) {
         if (this.shouldClearExistingValue(params)) {

package/src/components/CheckBox/index.d.ts

@@ -15,7 +15,7 @@ declare type TypeProps = {
     gapDistance?: number | string;
     childrenPosition?: 'start' | 'end';
 };
-export interface CheckBoxProps extends TypeProps, Omit<ContainerProps, keyof TypeProps>, Omit<React.HTMLProps<HTMLDivElement>, keyof TypeProps> {
+export interface CheckBoxProps extends TypeProps, Omit<ContainerProps, keyof TypeProps>, Omit<React.HTMLProps<HTMLDivElement>, keyof TypeProps | 'ref'> {
 }
 declare const CheckBox: ({ children, checked, onChange, value, name, disabled, readOnly, variant, gapDistance, childrenPosition, as, ...props }: CheckBoxProps) => JSX.Element;
 export declare const CheckBoxGroup: (props: FlexProps & {