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

package/src/View/Layout/Wizard/LayoutEditorWizard.js

@@ -44,7 +44,13 @@ class LayoutEditorWizard extends React.Component {
         this.onLayoutChange = (layout) => {
             layout = Object.assign(Object.assign({}, layout), { Name: this.state.layoutName });
             this.updateLayout(layout);
-            this.setState({ layout, errorMessage: this.getErrorMessage({ layout, layoutName: this.state.layoutName }) }, () => {
+            this.setState({
+                layout,
+                errorMessage: this.getErrorMessage({
+                    layout,
+                    layoutName: this.state.layoutName,
+                }),
+            }, () => {
                 this.props.updateGoBackState();
             });
         };

package/src/View/Query/ExpandedQueryPopup.js

@@ -33,13 +33,20 @@ class ExpandedQueryPopupComponent extends React.Component {
                 namedQuery: this.state.namedQuery,
                 setNamedQuery: (namedQuery) => this.setState({ namedQuery }),
             } },
-            React.createElement(PanelWithButton_1.PanelWithButton, { headerText: "Current Query", bodyProps: { padding: 0, style: { display: 'flex', flexDirection: 'column' } }, glyphicon: this.props.moduleInfo.Glyph },
+            React.createElement(PanelWithButton_1.PanelWithButton, { headerText: "Current Query", bodyProps: {
+                    padding: 0,
+                    style: { display: 'flex', flexDirection: 'column' },
+                }, glyphicon: this.props.moduleInfo.Glyph },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.QueryModuleId, value: this.state.expression, onChange: (expression) => this.setState({ expression }), initialData: initialData, columns: this.props.api.columnApi.getQueryableColumns(), namedQueries: this.props.api.queryApi.getAllNamedQuery(), api: this.props.api }),
                 React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
                     React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
                             this.props.onClosePopup();
                         } }, "CLOSE"),
-                    React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, style: { flex: 1, color: 'var(--ab-color-error)', textAlign: 'end' } }, namedQueryValidationError),
+                    React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, style: {
+                            flex: 1,
+                            color: 'var(--ab-color-error)',
+                            textAlign: 'end',
+                        } }, namedQueryValidationError),
                     React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, onClick: () => {
                             if (this.state.namedQuery) {
                                 this.props.onAddNamedQuery(this.state.namedQuery);

package/src/View/Query/QueryViewPanel.js

@@ -74,7 +74,9 @@ class QueryViewPanelComponent extends React.Component {
         let availableColumns = this.props.api.columnApi.getColumns().map((col) => {
             return {
                 label: col.friendlyName,
-                onClick: () => this.setState({ expression: this.state.expression + `[${col.columnId}]` }),
+                onClick: () => this.setState({
+                    expression: this.state.expression + `[${col.columnId}]`,
+                }),
             };
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -18,8 +18,7 @@ const useQuickSearchDebounced_1 = require("./useQuickSearchDebounced");
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced_1.useQuickSearchDebounced(props);
     const [state, setState] = react_1.useState({
-        RunQueryAfterQuickSearch: props.api.internalApi.getAdaptableOptions().searchOptions
-            .filterResultsAfterQuickSearch,
+        RunQueryAfterQuickSearch: props.api.internalApi.getAdaptableOptions().searchOptions.filterResultsAfterQuickSearch,
         EditedStyle: props.QuickSearchStyle,
     });
     const onUpdateStyle = (style) => {
@@ -28,7 +27,8 @@ const QuickSearchPopupComponent = (props) => {
     };
     const onQuickSearchBehaviourChange = (checked) => {
         setState(Object.assign(Object.assign({}, state), { RunQueryAfterQuickSearch: checked }));
-        props.api.internalApi.getAdaptableOptions().searchOptions.filterResultsAfterQuickSearch = checked;
+        props.api.internalApi.getAdaptableOptions().searchOptions.filterResultsAfterQuickSearch =
+            checked;
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
         React.createElement(Panel_1.default, { header: props.moduleInfo.FriendlyName + ' Text', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsSummary.js

@@ -64,11 +64,21 @@ exports.getScheduleSettingsValues = (data) => {
     }
     if (data.ScheduleType === Enums_1.ScheduleType.Glue42) {
         const report = data;
-        return [{ label: 'Report', value: (report === null || report === void 0 ? void 0 : report.Glue42Report.ReportName) || 'Not Specified' }];
+        return [
+            {
+                label: 'Report',
+                value: (report === null || report === void 0 ? void 0 : report.Glue42Report.ReportName) || 'Not Specified',
+            },
+        ];
     }
     if (data.ScheduleType === Enums_1.ScheduleType.OpenFin) {
         const report = data;
-        return [{ label: 'Report', value: (report === null || report === void 0 ? void 0 : report.OpenFinReport.ReportName) || 'Not Specified' }];
+        return [
+            {
+                label: 'Report',
+                value: (report === null || report === void 0 ? void 0 : report.OpenFinReport.ReportName) || 'Not Specified',
+            },
+        ];
     }
     return [];
 };

package/src/View/UIHelper.js

@@ -133,7 +133,10 @@ function getModalContainer(adaptableOptions, document) {
     let modalContainer;
     if (adaptableOptions.containerOptions.modalContainer) {
         // this has been set, so we use the property
-        modalContainer = document.getElementById(adaptableOptions.containerOptions.modalContainer);
+        modalContainer =
+            typeof adaptableOptions.containerOptions.modalContainer === 'string'
+                ? document.getElementById(adaptableOptions.containerOptions.modalContainer)
+                : adaptableOptions.containerOptions.modalContainer;
         if (modalContainer) {
             const modalContainerClassName = ' modal-container';
             if (!modalContainer.className.includes(modalContainerClassName)) {

package/src/View/Wizard/AdaptableWizard.js

@@ -91,7 +91,10 @@ class AdaptableWizard extends React.Component {
         let bodyElement = wizardStepInfo.Element;
         let newElement = this.cloneWizardStep(bodyElement);
         this.stepName = wizardStepInfo.StepName;
-        this.setState({ ActiveState: newElement, IndexState: wizardStepInfo.Index });
+        this.setState({
+            ActiveState: newElement,
+            IndexState: wizardStepInfo.Index,
+        });
     }
     ForceUpdateGoBackState() {
         this.forceUpdate();
@@ -114,7 +117,10 @@ class AdaptableWizard extends React.Component {
                 let bodyElement = activeWizardInfo.Element;
                 let newElement = this.cloneWizardStep(bodyElement);
                 this.stepName = activeWizardInfo.StepName;
-                this.setState({ ActiveState: newElement, IndexState: this.state.IndexState - decrement });
+                this.setState({
+                    ActiveState: newElement,
+                    IndexState: this.state.IndexState - decrement,
+                });
             }
         }
     }
@@ -126,7 +132,10 @@ class AdaptableWizard extends React.Component {
             let bodyElement = activeWizardInfo.Element;
             let newElement = this.cloneWizardStep(bodyElement);
             this.stepName = activeWizardInfo.StepName;
-            this.setState({ ActiveState: newElement, IndexState: this.state.IndexState + increment });
+            this.setState({
+                ActiveState: newElement,
+                IndexState: this.state.IndexState + increment,
+            });
         }
     }
     handleClickFinish() {

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -191,7 +191,11 @@ exports.OnePageAdaptableWizard = (props) => {
                     React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer" },
                         React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => { var _a; return (_a = props.onHide) === null || _a === void 0 ? void 0 : _a.call(props); }, tooltip: (_a = props.closeTooltip) !== null && _a !== void 0 ? _a : 'Close wizard', accessLevel: 'Full' }, (_b = props.closeText) !== null && _b !== void 0 ? _b : 'CLOSE'),
                         React.createElement(KeyHint_1.KeyHint, { ml: 2 }, "Esc"),
-                        React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, className: "ab-OnePageWizard__error", style: { flex: 1, color: 'var(--ab-color-error)', textAlign: 'end' } }, firstErrorMessage),
+                        React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, className: "ab-OnePageWizard__error", style: {
+                                flex: 1,
+                                color: 'var(--ab-color-error)',
+                                textAlign: 'end',
+                            } }, firstErrorMessage),
                         React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, "Finish")))))));
 };
 exports.OnePageWizardSummary = () => {

package/src/agGrid/Adaptable.d.ts

@@ -165,9 +165,8 @@ export declare class Adaptable implements IAdaptable {
     private isInternallyRenderedColumn;
     getDisplayValue(id: any, columnId: string): string | undefined;
     getGridCellFromRowNode(rowNode: RowNode, columnId: string): GridCell | undefined;
-    getDisplayValueFromRowNode(row: RowNode, columnId: string): string | undefined;
-    getFormattedValueFromRawValue(rawValue: any, columnId: string): string | undefined;
-    getDisplayValueFromRawValue(columnId: string, rawValue: any, skipCellRenderers?: boolean): string | undefined;
+    getDisplayValueFromRowNode(rowNode: RowNode, columnId: string): string | undefined;
+    getDisplayValueFromRawValue(columnId: string, rawValue: any): string | undefined;
     private getFormattedValue;
     private getNormalisedValueFromRowValue;
     getRawValueFromRowNode(rowNode: RowNode, columnId: string): any;

package/src/agGrid/Adaptable.js

@@ -428,8 +428,16 @@ class Adaptable {
                 ReactDOM.render(AdaptableView_1.AdaptableApp({ Adaptable: this }), this.abContainerElement);
             }
             // create debounce methods that take a time based on user settings
-            this.throttleFilterOnEditDataChange = throttle_1.default(this.gridOptions.api.onFilterChanged, this.adaptableOptions.filterOptions.filterActionOnUserDataChange.throttleDelay);
-            this.throttleFilterOnTickingDataChange = throttle_1.default(this.gridOptions.api.onFilterChanged, this.adaptableOptions.filterOptions.filterActionOnExternalDataChange.throttleDelay);
+            this.throttleFilterOnEditDataChange = throttle_1.default(
+            // the extra function is to make sure we have a reference to ag-grid-api
+            () => this.gridOptions.api.onFilterChanged(), this.adaptableOptions.filterOptions.filterActionOnUserDataChange.throttleDelay, {
+                trailing: true,
+                leading: false,
+            });
+            this.throttleFilterOnTickingDataChange = throttle_1.default(() => this.gridOptions.api.onFilterChanged(), this.adaptableOptions.filterOptions.filterActionOnExternalDataChange.throttleDelay, {
+                trailing: true,
+                leading: false,
+            });
             return this.api;
         });
     }
@@ -514,7 +522,7 @@ class Adaptable {
             this.gridOptions.columnDefs.forEach(assignColId);
         }
         if ((_a = this.adaptableOptions.generalOptions) === null || _a === void 0 ? void 0 : _a.hideEmptyGroupRows) {
-            LoggingHelper_1.LogAdaptableWarning(`DEPRECATED: 'GeneralOptions.hideEmptyGroupRows' is deprecated and will no longer be evaluated!`);
+            LoggingHelper_1.ConsoleLogWarning(`DEPRECATED: 'GeneralOptions.hideEmptyGroupRows' is deprecated and will no longer be evaluated!`);
             // disabled due to showstopper starting with AG Grid v26
             // the internal implementation of AG Grids GroupCellRenderer has changed A LOT!
             // this.gridOptions.components = this.gridOptions.components || {};
@@ -730,12 +738,12 @@ class Adaptable {
         const groupsCount = {};
         const colsToGroups = columnGroupChildren.reduce((acc, columnGroup) => {
             var _a, _b, _c;
-            if (!((_b = (_a = columnGroup.getOriginalColumnGroup) === null || _a === void 0 ? void 0 : _a.call(columnGroup)) === null || _b === void 0 ? void 0 : _b.getColGroupDef())) {
+            if (!((_b = (_a = columnGroup.getProvidedColumnGroup) === null || _a === void 0 ? void 0 : _a.call(columnGroup)) === null || _b === void 0 ? void 0 : _b.getColGroupDef())) {
                 return acc;
             }
             const ColumnGroupId = columnGroup.getGroupId();
-            const AllowGroupSplit = !columnGroup.getOriginalColumnGroup().getColGroupDef().marryChildren;
-            const FriendlyName = (_c = columnGroup.getOriginalColumnGroup().getColGroupDef().headerName) !== null && _c !== void 0 ? _c : ColumnGroupId;
+            const AllowGroupSplit = !columnGroup.getProvidedColumnGroup().getColGroupDef().marryChildren;
+            const FriendlyName = (_c = columnGroup.getProvidedColumnGroup().getColGroupDef().headerName) !== null && _c !== void 0 ? _c : ColumnGroupId;
             const columnsInGroup = columnGroup.getLeafColumns();
             columnsInGroup.forEach((col) => {
                 const group = {
@@ -1106,7 +1114,10 @@ class Adaptable {
     }
     setColumnOrder(VisibleColumnList) {
         const newColumnState = this.getSortedColumnStateForVisibleColumns(VisibleColumnList);
-        this.gridOptions.columnApi.applyColumnState({ state: newColumnState, applyOrder: true });
+        this.gridOptions.columnApi.applyColumnState({
+            state: newColumnState,
+            applyOrder: true,
+        });
         this.updateColumnsIntoStore();
     }
     persistLayout(layout) {
@@ -1260,7 +1271,10 @@ class Adaptable {
             if (shouldUpdatePivoted) {
                 this.gridOptions.columnApi.setPivotMode(pivoted);
             }
-            this.gridOptions.columnApi.applyColumnState({ state: newColState, applyOrder: true });
+            this.gridOptions.columnApi.applyColumnState({
+                state: newColState,
+                applyOrder: true,
+            });
             this.api.gridApi.setColumnSorts(layout.ColumnSorts);
             this.gridOptions.columnApi.setPivotColumns(layout.PivotColumns || []);
             // aggrid 25.1.0 introduced a bug such that a layout that has a grouped column, if the column has enableRowGroup: true but not rowGroup: true
@@ -1426,7 +1440,10 @@ class Adaptable {
                 }
             });
         }
-        const selectedCellInfo = { columns: columns, gridCells: selectedCells };
+        const selectedCellInfo = {
+            columns: columns,
+            gridCells: selectedCells,
+        };
         this.api.internalApi.setSelectedCells(selectedCellInfo);
         this._emit('CellsSelected');
         this.agGridHelper.fireSelectionChangedEvent();
@@ -1676,18 +1693,15 @@ class Adaptable {
         let returnValue;
         if (this.useRowNodeLookUp) {
             const rowNode = this.gridOptions.api.getRowNode(id);
-            const gridCell = this.getGridCellFromRowNode(rowNode, columnId);
-            if (gridCell) {
-                returnValue = gridCell.displayValue;
-            }
+            return this.getDisplayValueFromRowNode(rowNode, columnId);
         }
         else {
             let foundRow = false;
             this.gridOptions.api.getModel().forEachNode((rowNode) => {
                 if (!foundRow) {
-                    const gridCell = this.getGridCellFromRowNode(rowNode, columnId);
-                    if (gridCell && id == gridCell.primaryKeyValue) {
-                        returnValue = gridCell.displayValue;
+                    const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(rowNode);
+                    if (id == primaryKeyValue) {
+                        returnValue = this.getDisplayValueFromRowNode(rowNode, columnId);
                     }
                     foundRow = true;
                 }
@@ -1713,15 +1727,14 @@ class Adaptable {
             rowNode: rowNode,
         };
     }
-    getDisplayValueFromRowNode(row, columnId) {
-        const gridCell = this.getGridCellFromRowNode(row, columnId);
-        return gridCell ? gridCell.displayValue : undefined;
-    }
-    // same as getDisplayValueFromRawValue(), but without evaluating cell renderers (only valueGetters & valueFormatters)
-    getFormattedValueFromRawValue(rawValue, columnId) {
-        return this.getDisplayValueFromRawValue(columnId, rawValue, true);
+    getDisplayValueFromRowNode(rowNode, columnId) {
+        if (rowNode == null) {
+            return undefined;
+        }
+        const rawValue = this.getRawValueFromRowNode(rowNode, columnId);
+        return this.getDisplayValueFromRawValue(columnId, rawValue);
     }
-    getDisplayValueFromRawValue(columnId, rawValue, skipCellRenderers = false) {
+    getDisplayValueFromRawValue(columnId, rawValue) {
         const abColumn = this.api.columnApi.getColumnFromId(columnId);
         const isRenderedColumn = this.api.columnApi.isFormatNumericStyleColumn(abColumn);
         if (isRenderedColumn) {
@@ -1739,14 +1752,17 @@ class Adaptable {
         if (colDef) {
             if (typeof colDef.valueFormatter == 'function') {
                 const formattedValue = this.getFormattedValue(rawValue, columnId, colDef, colDef.valueFormatter);
-                if (colDef.cellRenderer && !skipCellRenderers) {
-                    return this.agGridHelper.getRenderedValue(colDef, formattedValue);
-                }
+                // Never use cellRenderer:
+                // - when a string, you never know if it is HTML or a normal string
+                // - when an object, cannot be used
+                // if (colDef.cellRenderer && !skipCellRenderers) {
+                //   return this.agGridHelper.getRenderedValue(colDef, formattedValue);
+                // }
                 return formattedValue || '';
             }
-            if (colDef.cellRenderer && !skipCellRenderers) {
-                return this.agGridHelper.getRenderedValue(colDef, rawValue);
-            }
+            // if (colDef.cellRenderer && !skipCellRenderers) {
+            // return this.agGridHelper.getRenderedValue(colDef, rawValue);
+            // }
         }
         return this.agGridHelper.getCleanValue(rawValue);
     }
@@ -1784,9 +1800,10 @@ class Adaptable {
         if (dataType === 'Boolean') {
             return typeof rawValue !== 'boolean' ? Boolean(rawValue) : returnValue;
         }
-        if (dataType === 'Date') {
-            return rawValue instanceof Date ? returnValue : new Date(rawValue);
-        }
+        // Do not normalize dates to Date type
+        // - breaks when rendering in filter-form
+        // - breaks quick-search; the Date is transformed to string;
+        // -- an incorrect comparison is made (new Date().toString).incudes('query)
         return returnValue;
     }
     getRawValueFromRowNode(rowNode, columnId) {
@@ -2525,10 +2542,9 @@ class Adaptable {
             const node = event.node;
             const result = RowNode_dispatchLocalEvent.apply(this, arguments);
             const extractGridApiFromRowNode = (rowNode) => {
-                var _a, _b, _c, _d;
+                var _a, _b;
                 // starting with AG Grid 26.1.0 the gridApi is wrapped in a Beans property
-                // while older versions than 26.1.0 had a direct property
-                const rowNodeApi = (_c = (_b = (_a = rowNode) === null || _a === void 0 ? void 0 : _a.beans) === null || _b === void 0 ? void 0 : _b.gridApi) !== null && _c !== void 0 ? _c : (_d = rowNode) === null || _d === void 0 ? void 0 : _d.gridApi;
+                const rowNodeApi = (_b = (_a = rowNode) === null || _a === void 0 ? void 0 : _a.beans) === null || _b === void 0 ? void 0 : _b.gridApi;
                 if (!rowNodeApi) {
                     LoggingHelper_1.LogAdaptableWarning(`No GridAPI found in passed RowNode, this should never happen!`, rowNode);
                 }
@@ -2638,7 +2654,7 @@ class Adaptable {
         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.cleanupFloatingFilters_WORKAROUND();
             this.updateColDefsForSpecialColumns();
             this.applyCurrentTheme();
             this.applyFinalRendering();
@@ -2799,16 +2815,18 @@ class Adaptable {
                     readonlyClassName,
                     highlightAlertClassName,
                 ]
-                    .filter((x) => !!x)
-                    .join(' ');
+                    // we flatten the array because 'userCellClass' might return a string[]
+                    .flat()
+                    .filter((x) => !!x);
+                const returnValueHash = returnValue.join(' ');
                 const primaryKey = this.getPrimaryKeyValueFromRowNode(params.node);
                 const key = `${primaryKey}:${params.colDef.colId}`;
                 if (classNameMap[key] &&
-                    classNameMap[key] !== returnValue &&
+                    classNameMap[key] !== returnValueHash &&
                     // 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)) {
+                    returnValueHash.length < ((_a = classNameMap[key]) === null || _a === void 0 ? void 0 : _a.length)) {
                     setTimeout(() => {
                         /**
                          * This is called inside a getter function, inside ag-grid.
@@ -2818,14 +2836,18 @@ class Adaptable {
                         params.api.redrawRows({ rowNodes: [params.node] });
                     }, 0);
                 }
-                classNameMap[key] = returnValue;
-                return StringExtensions_1.StringExtensions.IsNotNullOrEmpty(returnValue) ? returnValue : undefined;
+                classNameMap[key] = returnValueHash;
+                return returnValue.length ? returnValue : undefined;
             };
             return cellClass;
         });
     }
     getExcelClassNameForCell(colId, primaryKeyValue) {
-        return `--excel-cell-${colId}-${primaryKeyValue}`;
+        let primaryKeyString = `${primaryKeyValue}`;
+        if (primaryKeyString.indexOf(' ') > 0) {
+            primaryKeyString.replace(/\s/g, '_');
+        }
+        return `--excel-cell-${colId}-${primaryKeyString}`;
     }
     setupColumnCellEditor({ colId, col }) {
         const adaptableColumn = this.api.columnApi.getColumnFromId(colId);
@@ -2916,6 +2938,7 @@ class Adaptable {
             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;
+                LoggingHelper_1.ConsoleLogWarning(`DEPRECATED: 'FormatColumn.HeaderName' is deprecated: use 'Layout.ColumnHeadersMap' instead`);
             }
             // required here for the initial layout rendering
             abColumn.friendlyName = resultHeaderName;
@@ -3493,7 +3516,10 @@ class Adaptable {
             }
             return state;
         });
-        this.gridOptions.columnApi.applyColumnState({ state: newColumnState, applyOrder: true });
+        this.gridOptions.columnApi.applyColumnState({
+            state: newColumnState,
+            applyOrder: true,
+        });
         this.gridOptions.api.onSortChanged();
     }
     clearColumnSort() {
@@ -3550,7 +3576,9 @@ class Adaptable {
             });
         }
         else {
-            const transaction = 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);
         }
     }
@@ -3591,7 +3619,9 @@ class Adaptable {
             });
         }
         else {
-            const transaction = this.gridOptions.api.applyTransaction({ remove: dataRows });
+            const transaction = this.gridOptions.api.applyTransaction({
+                remove: dataRows,
+            });
             return Promise.resolve(transaction.remove);
         }
     }
@@ -3865,9 +3895,10 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     alertHighlightClassName,
                     this.getConditionalStyleRowClass(conditionalStyles.filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName)), params),
                 ]
-                    .filter((x) => !!x)
-                    .join(' ');
-                return StringExtensions_1.StringExtensions.IsNotNullOrEmpty(returnValue) ? returnValue : undefined;
+                    // we flatten it because 'userGetRowClass' might return a string[]
+                    .flat()
+                    .filter((x) => !!x);
+                return (returnValue === null || returnValue === void 0 ? void 0 : returnValue.length) ? returnValue : undefined;
             };
         });
     }
@@ -3999,9 +4030,17 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     const cellStyle = typeof colDef.cellStyle === 'function' ? colDef.cellStyle(cellParams) : {};
                     const excelStyles = [];
                     // add user defined excel styles
-                    const userDefinedCellClass = this.getUserColDefProperty(column.getColId(), 'cellClass');
+                    let userColDefCellClass = this.getUserColDefProperty(column.getColId(), 'cellClass');
+                    const userDefinedCellClass = typeof userColDefCellClass === 'function'
+                        ? userColDefCellClass(cellParams)
+                        : userColDefCellClass;
                     const userDefinedExcelStyle = userDefinedCellClass &&
-                        userExcelStyles.find((excelStyle) => excelStyle.id === userDefinedCellClass);
+                        userExcelStyles.find((excelStyle) => {
+                            var _a;
+                            return typeof userDefinedCellClass === 'string'
+                                ? userDefinedCellClass === excelStyle.id
+                                : (_a = userDefinedCellClass === null || userDefinedCellClass === void 0 ? void 0 : userDefinedCellClass.includes) === null || _a === void 0 ? void 0 : _a.call(userDefinedCellClass, excelStyle.id);
+                        });
                     if (userDefinedExcelStyle) {
                         excelStyles.push(userDefinedExcelStyle);
                     }
@@ -4019,9 +4058,10 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     if (!excelStyles.length) {
                         return;
                     }
-                    const cellClassId = typeof colDef.cellClass === 'function'
+                    const cellClass = typeof colDef.cellClass === 'function'
                         ? colDef.cellClass(cellParams)
                         : this.getExcelClassNameForCell(column.getId(), this.getPrimaryKeyValueFromRowNode(node));
+                    const cellClassId = Array.isArray(cellClass) ? cellClass.join(' ') : cellClass;
                     const finalCellExcelStyle = Object.assign({}, ...excelStyles, {
                         id: cellClassId,
                     });
@@ -4170,7 +4210,9 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         const globalObject = typeof globalThis !== 'undefined' ? globalThis : window;
         const licenseKey = globalObject.ADAPTABLE_LICENSE_KEY ||
             this.api.internalApi.getAdaptableOptions().licenseKey;
-        return new LicenseService_1.LicenseService(this, licenseKey, { publishedAt: publishTimestamp_1.default });
+        return new LicenseService_1.LicenseService(this, licenseKey, {
+            publishedAt: publishTimestamp_1.default,
+        });
     }
 }
 exports.Adaptable = Adaptable;

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

@@ -117,7 +117,7 @@ class AdaptableDateEditor {
         react_dom_1.unmountComponentAtNode(this.el);
     }
     shouldClearExistingValue(params) {
-        return params.keyPress === all_modules_1.KeyCode.BACKSPACE || params.keyPress === all_modules_1.KeyCode.DELETE;
+        return params.key === all_modules_1.KeyCode.BACKSPACE || params.key === all_modules_1.KeyCode.DELETE;
     }
 }
 exports.AdaptableDateEditor = AdaptableDateEditor;

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

@@ -93,7 +93,7 @@ class AdaptableNumberEditor {
         react_dom_1.unmountComponentAtNode(this.el);
     }
     shouldClearExistingValue(params) {
-        return params.keyPress === all_modules_1.KeyCode.BACKSPACE || params.keyPress === all_modules_1.KeyCode.DELETE;
+        return params.key === all_modules_1.KeyCode.BACKSPACE || params.key === all_modules_1.KeyCode.DELETE;
     }
 }
 exports.AdaptableNumberEditor = AdaptableNumberEditor;

package/src/components/ApplicationIcon.d.ts

@@ -2,4 +2,5 @@ import * as React from 'react';
 import { AdaptableIcon } from '../types';
 export declare const ApplicationIcon: React.FunctionComponent<{
     icon?: AdaptableIcon;
+    className?: string;
 }>;

package/src/components/ApplicationIcon.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ApplicationIcon = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-exports.ApplicationIcon = ({ icon }) => {
+exports.ApplicationIcon = ({ icon, className }) => {
     if (!icon) {
         return null;
     }
     let width = icon.style && icon.style.width ? icon.style.width : 'var(--ab-cmp-simple-button__width)';
     let height = icon.style && icon.style.height ? icon.style.height : 'var(--ab-cmp-simple-button__height)';
-    return (React.createElement("img", { className: "ab-Dashboard__application-icon", src: icon.src, style: { width: width, height: height } }));
+    return React.createElement("img", { className: className, src: icon.src, style: { width: width, height: height } });
 };

package/src/components/Dashboard/Dashboard.js

@@ -14,7 +14,10 @@ function Dashboard(props) {
     const [collapsed, setCollapsed] = useProperty_1.default(props, 'collapsed', false);
     const [floating, setFloating] = useProperty_1.default(props, 'floating', false);
     const [inline, setInline] = useProperty_1.default(props, 'inline', false);
-    const [position, setPosition] = useProperty_1.default(props, 'position', { x: 0, y: 0 });
+    const [position, setPosition] = useProperty_1.default(props, 'position', {
+        x: 0,
+        y: 0,
+    });
     const expanded = !floating && !collapsed;
     const { handleRef, targetRef } = useDraggable_1.default({
         onDrop(dx, dy) {

package/src/components/Dropdown/index.js

@@ -90,7 +90,14 @@ const Dropdown = (props) => {
         React.createElement("select", { ref: selectRef, tabIndex: -1, disabled: disabled, value: value == null ? '' : value, onChange: (e) => {
                 const selected = finalOptions.filter((o) => o.value == e.target.value)[0];
                 onChange(selected, e);
-            }, style: { opacity: 0, width: '100%', height: '100%', top: 0, left: 0, zIndex: 1 }, onMouseDown: onMouseDown, name: name, multiple: multiple, autoFocus: autoFocus }, finalOptions.map((o) => {
+            }, style: {
+                opacity: 0,
+                width: '100%',
+                height: '100%',
+                top: 0,
+                left: 0,
+                zIndex: 1,
+            }, onMouseDown: onMouseDown, name: name, multiple: multiple, autoFocus: autoFocus }, finalOptions.map((o) => {
             return (React.createElement("option", { key: o.value, value: o.value }, o.label));
         })),
         showClearButton && selectedOption ? renderClearButton() : null));

package/src/components/ExpressionEditor/EditorInputReactive.js

@@ -19,7 +19,9 @@ function EditorInputReactive(props) {
         ? moduleExpressionFunctions.observableFunctions
         : moduleExpressionFunctions.aggregationFunctions;
     const whereClauseExpressionsFns = Object.assign(Object.assign({}, moduleExpressionFunctions.booleanFunctions), moduleExpressionFunctions.scalarFunctions);
-    const [value, setValue] = useProperty_1.default(props, 'value', '', { onChange: props.onChange });
+    const [value, setValue] = useProperty_1.default(props, 'value', '', {
+        onChange: props.onChange,
+    });
     const [reactiveValue, whereClauseValue] = value.split(' WHERE ');
     const updateReactiveValue = (value) => {
         let fullExpressionString = value;

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -5,7 +5,10 @@ const tslib_1 = require("tslib");
 const rebass_1 = require("rebass");
 const React = tslib_1.__importStar(require("react"));
 exports.ExpressionFunctionDocumentation = (props) => {
-    return props.expressionFunction ? (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation", my: 2, p: 2, style: { background: 'var(--ab-color-primary)', borderRadius: 'var(--ab__border-radius)' } },
+    return props.expressionFunction ? (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation", my: 2, p: 2, style: {
+            background: 'var(--ab-color-primary)',
+            borderRadius: 'var(--ab__border-radius)',
+        } },
         props.expressionFunction.description && (React.createElement(rebass_1.Box, { mb: 3, style: { fontWeight: 'bold' }, "data-name": "expression-editor-documentation-description" }, props.expressionFunction.description)),
         props.expressionFunction.signatures && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-signatures" },
             React.createElement("b", null, "Signatures"),

package/src/components/ExpressionEditor/index.js

@@ -66,7 +66,11 @@ function ExpressionEditor(props) {
                 : '', onChange: (e) => {
                 setData(Object.assign(Object.assign({}, data), { [column.columnId]: new Date(e.target.value) }));
             }, style: { width: '100%' }, disabled: column.readOnly })) : column.dataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-input", checked: data[column.columnId], onChange: (checked) => setData(Object.assign(Object.assign({}, data), { [column.columnId]: checked })), disabled: column.readOnly })) : null))))));
-    const namedQueries = (React.createElement("div", null, props.namedQueries.map((namedQuery) => (React.createElement(rebass_1.Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: { padding: 3, marginTop: 'var(--ab-space-2)', marginBottom: 'var(--ab-space-2)' }, backgroundColor: "primarylight" },
+    const namedQueries = (React.createElement("div", null, props.namedQueries.map((namedQuery) => (React.createElement(rebass_1.Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
+            padding: 3,
+            marginTop: 'var(--ab-space-2)',
+            marginBottom: 'var(--ab-space-2)',
+        }, backgroundColor: "primarylight" },
         ' ',
         React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
                 background: 'var(--ab-color-primary)',
@@ -163,7 +167,10 @@ const renderQueryHints = (type) => {
             description: "The sum of the 'PnL' column values in all rows where named query 'CurrencyDollar' is evaluated to TRUE is greater than 5 Billions",
         });
     }
-    return examples.length ? (React.createElement(rebass_1.Box, { "data-name": "expression-hints", my: 2, p: 2, style: { background: 'var(--ab-color-primary)', borderRadius: 'var(--ab__border-radius)' } },
+    return examples.length ? (React.createElement(rebass_1.Box, { "data-name": "expression-hints", my: 2, p: 2, style: {
+            background: 'var(--ab-color-primary)',
+            borderRadius: 'var(--ab__border-radius)',
+        } },
         React.createElement(rebass_1.Box, null,
             React.createElement(rebass_1.Text, { marginBottom: 2 },
                 React.createElement("b", null, "Examples"),