@adaptabletools/adaptable 14.0.0-canary.2 → 14.0.0

package/src/agGrid/Adaptable.js

@@ -363,7 +363,10 @@ class Adaptable {
                         // but we might need to do this again in the future for some other components that are not native React
                         // captureReactWarnings();
                         if (typeof unmount === 'function') {
-                            unmount();
+                            // rAF is required, otherwise the unmount would be performed during the rendering phase and React doesn't like that
+                            requestAnimationFrame(() => {
+                                unmount();
+                            });
                         }
                         // releaseReactWarnings();
                     };
@@ -436,7 +439,7 @@ class Adaptable {
         this.TeamSharingService = new TeamSharingService_1.TeamSharingService(this.api);
         // @ts-ignore
         this.RowEditService = new RowEditService_1.RowEditService(this.api);
-        this.MetamodelService = new MetamodelService_1.MetamodelService(() => this.api.internalApi.getAdaptableOptions());
+        this.MetamodelService = new MetamodelService_1.MetamodelService(() => this.api.optionsApi.getAdaptableOptions());
         this.forPlugins((plugin) => plugin.afterInitServices(this));
         // Set up Modules - we set up all the Modules suitable for AG Grid
         // But users can make some hidden or readonly in their entitlements
@@ -3226,8 +3229,16 @@ class Adaptable {
             const quickSearchStyleClassName = this.api.quickSearchApi.getQuickSearchStyle().ClassName;
             const hasQuickSearchStyleClassName = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(quickSearchStyleClassName);
             const cellClass = (params) => {
-                const isQuickSearchActive = hasQuickSearchStyleClassName && this.isQuickSearchActive(abColumn, params);
                 const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
+                // if a Visual Data export is in progress, we are interested only in the Excel Style Class
+                if (this.api.exportApi.internalApi.isVisualDataExportInProgress()) {
+                    const userDefinedCellClass = typeof userCellClass === 'function' ? userCellClass(params) : userCellClass;
+                    const cellClassKey = this.getExcelClassNameForCell(colId, primaryKeyValue, userDefinedCellClass);
+                    return this.api.internalApi
+                        .getReportService()
+                        .getExcelStyleIdForCellClassKey(cellClassKey);
+                }
+                const isQuickSearchActive = hasQuickSearchStyleClassName && this.isQuickSearchActive(abColumn, params);
                 const editableClassName = this.getEditableCellClass(abColumn, params);
                 const readonlyClassName = this.getReadonlyCellClass(abColumn, params);
                 const highlightAlertClassName = this.getAlertCellClass(abColumn, params);
@@ -3235,7 +3246,6 @@ class Adaptable {
                 const styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(colId);
                 const hasStyledColumn = !!styledColumn && !styledColumn.IsSuspended;
                 const returnValue = [
-                    this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
                     !hasStyledColumn && formatColumns.length
                         ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
@@ -3256,12 +3266,16 @@ class Adaptable {
             return cellClass;
         });
     }
-    getExcelClassNameForCell(colId, primaryKeyValue) {
+    getExcelClassNameForCell(colId, primaryKeyValue, userDefinedCellClass) {
         let excelClassName = `--excel-cell-${colId}-${primaryKeyValue}`;
         if (excelClassName.indexOf(' ') > 0) {
             excelClassName = excelClassName.replace(/\s/g, '_');
         }
-        return excelClassName;
+        return userDefinedCellClass != null
+            ? `${excelClassName}-${Array.isArray(userDefinedCellClass)
+                ? userDefinedCellClass.join('-')
+                : userDefinedCellClass}`
+            : excelClassName;
     }
     setupColumnCellEditor({ colId, col }) {
         const adaptableColumn = this.api.columnApi.getColumnWithColumnId(colId);
@@ -3461,7 +3475,7 @@ class Adaptable {
             }
             return (params) => {
                 const { node, value } = params;
-                const [mostRelevantFormatColumn] = this.api.formatColumnApi.internalApi.getFormatColumnsRelevantForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node, value });
+                const mostRelevantFormatColumn = this.api.formatColumnApi.internalApi.getMostRelevantFormatColumnForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node, value });
                 if (!mostRelevantFormatColumn) {
                     // ALL FormatColumns are conditional and NONE of them are relevant for this row
                     return value;
@@ -4226,7 +4240,7 @@ class Adaptable {
         return false;
     }
     showQuickFilter() {
-        const height = this.api.internalApi.getAdaptableOptions().filterOptions.quickFilterHeight;
+        const height = this.api.optionsApi.getFilterOptions().quickFilterHeight;
         this.gridOptions.api.setFloatingFiltersHeight(height);
     }
     hideQuickFilter() {
@@ -4479,8 +4493,30 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         grid.destroy();
     }
     setExcelStylesForExport() {
+        // we memoize as much as possible, as this is called quite A LOT
+        const adaptableColumnMap = {};
+        const getAdaptableColumnWithColumnId = (columnId) => {
+            const memoizedColumn = adaptableColumnMap[columnId];
+            if (memoizedColumn) {
+                return memoizedColumn;
+            }
+            const abColumn = this.api.columnApi.getColumnWithColumnId(columnId);
+            adaptableColumnMap[columnId] = abColumn;
+            return abColumn;
+        };
+        const formatColumnsWithDisplayFormatForColumn = {};
+        const getFormatColumnsWithDisplayFormatForColumn = (columnId) => {
+            const memoizedFormatColumns = formatColumnsWithDisplayFormatForColumn[columnId];
+            if (memoizedFormatColumns) {
+                return memoizedFormatColumns;
+            }
+            const abColumn = getAdaptableColumnWithColumnId(columnId);
+            const formatColumns = this.api.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+            formatColumnsWithDisplayFormatForColumn[columnId] = formatColumns;
+            return formatColumns;
+        };
+        const isDateCellExportedAsFormattedValue = this.api.exportApi.internalApi.isDateCellExportedAsFormattedValue();
         this.setGridOptionsProperty('excelStyles', (userExcelStyles = []) => {
-            const adaptableExcelStyles = [];
             const displayedColumns = this.gridOptions.columnApi.getAllDisplayedColumns();
             const colDefs = displayedColumns.map((column) => {
                 return column.getColDef();
@@ -4497,24 +4533,33 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                 };
                 const rowStyle = this.gridOptions.getRowStyle(rowParams);
                 displayedColumns.forEach((column, columnIndex) => {
+                    var _a, _b, _c;
                     const colDef = colDefs[columnIndex];
-                    const cellParams = {
-                        colDef,
-                        node,
-                        column,
-                        data: node.data,
-                        value: this.getRawValueFromRowNode(node, column.getId()),
-                        rowIndex,
-                        api: this.gridOptions.api,
-                        columnApi: this.gridOptions.columnApi,
-                        context: {},
+                    let cellClassParams;
+                    const getLazyCellClassParams = () => {
+                        if (!cellClassParams) {
+                            cellClassParams = {
+                                colDef,
+                                node,
+                                column,
+                                data: node.data,
+                                value: this.getRawValueFromRowNode(node, column.getId()),
+                                rowIndex,
+                                api: this.gridOptions.api,
+                                columnApi: this.gridOptions.columnApi,
+                                context: {},
+                            };
+                        }
+                        return cellClassParams;
                     };
-                    const cellStyle = typeof colDef.cellStyle === 'function' ? colDef.cellStyle(cellParams) : {};
+                    const cellStyle = typeof colDef.cellStyle === 'function'
+                        ? colDef.cellStyle(getLazyCellClassParams())
+                        : {};
                     const excelStyles = [];
                     // add user defined excel styles
                     let userColDefCellClass = this.getUserColDefProperty(column.getColId(), 'cellClass');
                     const userDefinedCellClass = typeof userColDefCellClass === 'function'
-                        ? userColDefCellClass(cellParams)
+                        ? userColDefCellClass(getLazyCellClassParams())
                         : userColDefCellClass;
                     const userDefinedExcelStyle = userDefinedCellClass &&
                         userExcelStyles.find((excelStyle) => {
@@ -4536,21 +4581,48 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     if (Object.values(adaptableStyle).some((style) => style != null)) {
                         excelStyles.push(this.convertCSSToExcelStyle(adaptableStyle));
                     }
+                    const excelDataType = this.api.exportApi.internalApi.getExcelDataType(colDef === null || colDef === void 0 ? void 0 : colDef.type);
                     // don't add the cell style if it has no adaptable custom styles or user defined styles
-                    if (!excelStyles.length) {
+                    if (!excelStyles.length &&
+                        // if this is a formatted Date value, we still need to add the AG GRID specific type & numberFormat below
+                        !(excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue)) {
                         return;
                     }
-                    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,
-                    });
-                    adaptableExcelStyles.push(finalCellExcelStyle);
+                    const cellClassId = this.getExcelClassNameForCell(column.getId(), this.getPrimaryKeyValueFromRowNode(node), userDefinedCellClass);
+                    const finalCellExcelStyle = Object.assign({}, ...excelStyles);
+                    if (excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue) {
+                        let dateFormatPattern = this.api.optionsApi.getExportOptions().exportDateFormat;
+                        const rawValue = this.getRawValueFromRowNode(node, column.getId());
+                        const abColumn = getAdaptableColumnWithColumnId(column.getColId());
+                        if (!dateFormatPattern) {
+                            const mostRelevantFormatColumn = this.api.formatColumnApi.internalApi.getMostRelevantFormatColumnForColumn(getFormatColumnsWithDisplayFormatForColumn(column.getColId()), abColumn, { node, value: rawValue });
+                            dateFormatPattern =
+                                ((_a = mostRelevantFormatColumn === null || mostRelevantFormatColumn === void 0 ? void 0 : mostRelevantFormatColumn.DisplayFormat) === null || _a === void 0 ? void 0 : _a.Formatter) === 'DateFormatter' &&
+                                    ((_c = (_b = mostRelevantFormatColumn === null || mostRelevantFormatColumn === void 0 ? void 0 : mostRelevantFormatColumn.DisplayFormat) === null || _b === void 0 ? void 0 : _b.Options) === null || _c === void 0 ? void 0 : _c.Pattern);
+                        }
+                        if (dateFormatPattern) {
+                            const normalisedValue = this.getNormalisedValueFromRawValue(rawValue, abColumn);
+                            // we have to pass the date in the ISO format to Excel
+                            // see https://www.ag-grid.com/javascript-data-grid/excel-export-data-types/#dates
+                            const isoFormattedValue = normalisedValue === null || normalisedValue === void 0 ? void 0 : normalisedValue.toISOString();
+                            if (isoFormattedValue) {
+                                finalCellExcelStyle.dataType = 'DateTime';
+                                finalCellExcelStyle.numberFormat = { format: dateFormatPattern };
+                                // create a new cell key to ensure any user provided className does not interfere
+                                const cellKey = this.getExcelClassNameForCell(column.getColId(), this.getPrimaryKeyValueFromRowNode(node));
+                                // we need to register so that later the cellProcessor will put the isoFormattedValue through (thus giving the formatting responsability to Excel)
+                                this.api.internalApi
+                                    .getReportService()
+                                    .registerExcelStyleWithFormattedDate(cellKey, isoFormattedValue);
+                            }
+                        }
+                    }
+                    this.api.internalApi
+                        .getReportService()
+                        .registerExcelStyle(finalCellExcelStyle, cellClassId);
                 });
             });
-            return adaptableExcelStyles;
+            return this.api.internalApi.getReportService().getRegisteredExcelStyles();
         });
     }
     exportVisualDataToExcel() {
@@ -4560,13 +4632,17 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
             sheetName: 'Sheet 1',
             fileName: this.ReportService.getReportFileName(this.adaptableOptions.adaptableId),
             // delegate the cell value processing to Adaptable
-            processCellCallback: (params) => {
+            processCellCallback: ({ node, column, value }) => {
                 var _a;
-                if ((_a = params.node) === null || _a === void 0 ? void 0 : _a.group) {
+                const columnId = column.getColId();
+                if ((node === null || node === void 0 ? void 0 : node.group) &&
+                    (this.api.columnApi.isAutoRowGroupColumn(columnId) ||
+                        // we would still need to process the cell if this is a group row with an aggregated value
+                        ((_a = node === null || node === void 0 ? void 0 : node.aggData) === null || _a === void 0 ? void 0 : _a[columnId]) == undefined)) {
                     // skip processing of row groups, this was already handled in processRowGroupCallback()
-                    return params.value;
+                    return value;
                 }
-                return this.processCellForExcelExport(params.node, params.column.getColId());
+                return this.processCellForExcelExport(node, columnId);
             },
             processRowGroupCallback: (params) => {
                 var _a;
@@ -4654,6 +4730,14 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         return result;
     }
     processCellForExcelExport(rowNode, columnId) {
+        if (this.api.exportApi.internalApi.isVisualDataExportInProgress()) {
+            const cellKey = this.getExcelClassNameForCell(columnId, this.getPrimaryKeyValueFromRowNode(rowNode));
+            const isoFormattedDate = this.ReportService.getExcelStyleWithFormattedDate(cellKey);
+            if (isoFormattedDate) {
+                // this is a Date cell which will be formatted by Excel
+                return isoFormattedDate;
+            }
+        }
         return this.ReportService.getCellExportValueFromRowNode(rowNode, columnId);
     }
     processRowGroupForExcelExport(rowNode) {
@@ -4664,9 +4748,10 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         }
         let rawValue = rowNode.key;
         if (this.api.columnApi.getColumnDataTypeForColumnId(columnId) === 'Date' &&
-            typeof rawValue === 'string') {
+            typeof rawValue === 'string' &&
+            !Number.isNaN(rawValue)) {
             // AG-Grid converts the value to string, we have to reconvert it back
-            const dateRawValue = (0, DateHelper_1.parseDateValue)(rawValue);
+            const dateRawValue = parseInt(rawValue);
             if (dateRawValue != undefined) {
                 // @ts-ignore
                 rawValue = dateRawValue;
@@ -4693,8 +4778,7 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
     }
     initLicenseService() {
         const globalObject = typeof globalThis !== 'undefined' ? globalThis : window;
-        const licenseKey = globalObject.ADAPTABLE_LICENSE_KEY ||
-            this.api.internalApi.getAdaptableOptions().licenseKey;
+        const licenseKey = globalObject.ADAPTABLE_LICENSE_KEY || this.api.optionsApi.getLicenseKey();
         return new LicenseService_1.LicenseService(this, licenseKey, {
             publishedAt: publishTimestamp_1.default,
         });

package/src/agGrid/PercentBarRenderer.js

@@ -57,7 +57,7 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                     textEl.style.lineHeight = '1.2';
                     if (percentBarStyle.CellText.includes('CellValue')) {
                         const activeFormatColumnsWithDisplayFormat = api.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
-                        const [formatColumn] = api.formatColumnApi.internalApi.getFormatColumnsRelevantForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node: params.node, value });
+                        const formatColumn = api.formatColumnApi.internalApi.getMostRelevantFormatColumnForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node: params.node, value });
                         if (formatColumn && api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
                             const options = formatColumn.DisplayFormat.Options;
                             value = api.formatColumnApi.internalApi.getNumberFormattedValue(params.value, params.node, abColumn, options);

package/src/agGrid/agGridHelper.js

@@ -154,6 +154,9 @@ class agGridHelper {
         return (0, PercentBarRenderer_1.getPercentBarRendererForColumn)(styledColumn, abColumn, this.adaptable.api);
     }
     getCleanValue(value) {
+        if (typeof value === 'string') {
+            return value;
+        }
         if (value == null || value == 'null' || value == undefined || value == 'undefined') {
             return undefined;
         }

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -27,7 +27,7 @@ const Radio_1 = tslib_1.__importDefault(require("../Radio"));
 const VarEditorButton = () => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const expressionOptions = (_b = (_a = adaptable.api.internalApi.getAdaptableOptions().adaptableQLOptions) === null || _a === void 0 ? void 0 : _a.expressionOptions) === null || _b === void 0 ? void 0 : _b.customQueryVariables;
+    const expressionOptions = (_b = (_a = adaptable.api.optionsApi.getAdaptableQLOptions()) === null || _a === void 0 ? void 0 : _a.expressionOptions) === null || _b === void 0 ? void 0 : _b.customQueryVariables;
     if (!expressionOptions || Object.keys(expressionOptions).length === 0) {
         return React.createElement(React.Fragment, null);
     }

package/src/metamodel/adaptable.metamodel.d.ts

@@ -2845,6 +2845,13 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         description: string;
         properties: ({
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional?: undefined;
+            reference?: undefined;
+        } | {
             name: string;
             kind: string;
             description: string;