@adaptabletools/adaptable 23.0.22 → 23.1.0-canary.1

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -7,12 +7,53 @@ export declare function getEditorForColumnDataType(columnDataType: AdaptableColu
 export declare class AgGridColumnAdapter {
     private adaptableInstance;
     private colDefPropertyCache;
+    private workingColDefs;
+    private sortCacheInvalidationNeeded;
+    private stableCallbacks;
+    private stableCallbackImplementations;
+    private stableCallbackOwners;
+    private adaptableColumnFilterDef;
+    private adaptableFloatingFilterComponent;
     constructor(adaptableInstance: AdaptableAgGrid);
     private getVariant;
     destroy(): void;
     private get adaptableApi();
     private get adaptableOptions();
     private get agGridApi();
+    /**
+     * The colDef that `setupColumnXxx` methods should read from & write to:
+     * the working copy while the column is being set up (see #col_def_commit), the live colDef otherwise.
+     */
+    private getColDefForSetup;
+    /**
+     * see #col_def_commit
+     * Creates the working copy of the colDef, which is committed via `commitColDefChanges`
+     */
+    private beginColDefChanges;
+    /**
+     * see #col_def_commit
+     * Hands the working copy over to AG Grid, which re-initialises everything it caches from the colDef
+     * and refreshes the rendered cells of the column - but only if the colDef actually changed.
+     */
+    private commitColDefChanges;
+    /**
+     * see #stable_col_def_callbacks
+     * Returns the (stable) function AG Grid should see for this column & property,
+     * delegating to the given (latest) implementation.
+     */
+    private toStableCallback;
+    /**
+     * #pivot_result_col_def_copies_source
+     *
+     * AG Grid generates a pivot result colDef by copying the WHOLE colDef of its value (source) column
+     * (`PivotColDefService.createColDef` -> `Object.assign(colDef, valueColumn.colDef)`), and regenerates it
+     * whenever the source colDef is committed (see #col_def_commit). The copy therefore contains the
+     * callbacks Adaptable set up for the SOURCE column, which must not be mistaken for values provided by the user.
+     *
+     * When such a callback is found where a user value is expected, the user value of the source column
+     * is used instead - which is exactly what the pivot result column would have inherited from the user.
+     */
+    private resolveUserProvidedValue;
     setColDefProperty<T extends keyof ColDef>(col: Column, propertyName: T, propertyGetter: (userPropertyValue: ColDef[T]) => ColDef[T] | undefined): void;
     getUserColDefProperty<T extends keyof ColDef>(columnId: string, propertyName: T): ColDef[T] | undefined;
     shouldSkipColumn(colId: string): boolean;
@@ -22,6 +63,7 @@ export declare class AgGridColumnAdapter {
      * @param specificColumnIds - optional list of column Ids to setup. If not provided, all columns are setup
      */
     setupColumns(specificColumnIds?: string[]): void;
+    private setupColumn;
     private setupColumnValueGetter;
     private setupColumnCellClass;
     private setupColumnHeaderClass;
@@ -45,6 +87,8 @@ export declare class AgGridColumnAdapter {
     private setupColumnCellDataType;
     setupColumnHeader({ col }: ColumnSetupInfo): void;
     private setupColumnFilter;
+    private getAdaptableColumnFilterDef;
+    private getAdaptableFloatingFilterComponent;
     private setupColumnFloatingFilter;
     private setupColumnValueFormatter;
     private setupColumnEditable;
@@ -72,6 +116,22 @@ export declare class AgGridColumnAdapter {
      * The combination of styled column and format cells
      * This function decides when the two can be merged.
      */
+    /**
+     * #derived_pivot_cell_style
+     *
+     * A pivot result column is generated by AG Grid for a value (base) column, so the cells of
+     * `pivot_make_Ford_rating` show (aggregated) `rating` values. Adaptable objects are defined
+     * against the base column, and its pivot result cells inherit them:
+     * - Format Columns whose Scope contains the base column style the pivot result cells, and their
+     *   Rule is evaluated against the pivot result cell: in a Rule Expression `[rating]` / `$SCOPE()`
+     *   resolve to the pivot result cell value (`COL` / `$SCOPE` in `scalarExpressionFunctions.ts`
+     *   read `pivotResultColumn` from the evaluation context), a Rule Predicate gets it as `value`;
+     * - the Styled Column of the base column contributes its cell style (e.g. Gradient background).
+     *
+     * Returns the context when `params` describe a pivot result cell, `undefined` otherwise.
+     * This is the single place deriving it; everything below `setupColumnCellStyle` receives it explicitly.
+     */
+    private getPivotResultCellContext;
     private getFormatColumnAndStyledColumnCellStyle;
     /**
      * Returns true when the active Styled Column declares a `Font` slot
@@ -92,7 +152,14 @@ export declare class AgGridColumnAdapter {
     private styledColumnClaimsCellBoxStyle;
     private getFormatColumnHeaderStyle;
     private getStyledColumnStyle;
-    private getFormatColumnCellStyle;
+    /**
+     * The given (in scope) Format Columns whose Rule matches the cell.
+     *
+     * @param abColumn - the column the Format Columns are scoped to: the cell's column, or its base column
+     * for a pivot result cell inheriting base column Format Columns (see #derived_pivot_cell_style)
+     * @param pivotResultColumn - set when the cell is a pivot result cell, see #derived_pivot_cell_style
+     */
+    private getRelevantFormatColumnsForCell;
     private getFormatColumnAdaptableStyle;
     private getAlertCellStyle;
     private getFlashingCellStyle;

package/src/agGrid/AgGridColumnAdapter.js

@@ -49,6 +49,22 @@ const stripCssKeys = (style, keys) => {
 };
 const stripFontCssKeys = (style) => stripCssKeys(style, FONT_CSS_KEYS);
 const stripCellBoxCssKeys = (style) => stripCssKeys(style, CELL_BOX_CSS_KEYS);
+const STABLE_CALLBACK_COL_DEF_PROPERTIES = new Set([
+    'cellStyle',
+    'cellClass',
+    'headerStyle',
+    'headerClass',
+    'valueGetter',
+    'valueFormatter',
+    'valueSetter',
+    'editable',
+    'comparator',
+    'pivotComparator',
+    'getFindText',
+    'getQuickFilterText',
+    'tooltipValueGetter',
+    'cellEditorParams',
+]);
 export function getEditorForColumnDataType(columnDataType, variant) {
     if (columnDataType === 'number') {
         return variant === 'react' ? AdaptableReactNumberEditor : AdaptableNumberEditor;
@@ -60,9 +76,20 @@ export function getEditorForColumnDataType(columnDataType, variant) {
 export class AgGridColumnAdapter {
     adaptableInstance;
     colDefPropertyCache;
+    workingColDefs;
+    sortCacheInvalidationNeeded = false;
+    stableCallbacks;
+    stableCallbackImplementations;
+    stableCallbackOwners;
+    adaptableColumnFilterDef;
+    adaptableFloatingFilterComponent;
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
         this.colDefPropertyCache = new Map();
+        this.workingColDefs = new Map();
+        this.stableCallbacks = new Map();
+        this.stableCallbackImplementations = new Map();
+        this.stableCallbackOwners = new WeakMap();
     }
     getVariant() {
         return this.adaptableInstance.variant;
@@ -71,6 +98,15 @@ export class AgGridColumnAdapter {
         this.adaptableInstance = null;
         this.colDefPropertyCache.clear();
         this.colDefPropertyCache = null;
+        this.workingColDefs.clear();
+        this.workingColDefs = null;
+        this.stableCallbacks.clear();
+        this.stableCallbacks = null;
+        this.stableCallbackImplementations.clear();
+        this.stableCallbackImplementations = null;
+        this.stableCallbackOwners = null;
+        this.adaptableColumnFilterDef = null;
+        this.adaptableFloatingFilterComponent = null;
     }
     get adaptableApi() {
         return this.adaptableInstance.api;
@@ -81,9 +117,55 @@ export class AgGridColumnAdapter {
     get agGridApi() {
         return this.adaptableApi.agGridApi;
     }
+    getColDefForSetup(col) {
+        return this.workingColDefs.get(col.getColId()) ?? col.getColDef();
+    }
+    beginColDefChanges(col) {
+        const workingColDef = { ...col.getColDef() };
+        this.workingColDefs.set(col.getColId(), workingColDef);
+        return workingColDef;
+    }
+    commitColDefChanges(col) {
+        const colId = col.getColId();
+        const workingColDef = this.workingColDefs.get(colId);
+        this.workingColDefs.delete(colId);
+        if (!workingColDef) {
+            return;
+        }
+        const agColumn = col;
+        if (typeof agColumn.setColDef !== 'function') {
+            errorOnce(`CRITICAL: AG Grid 'AgColumn.setColDef()' is not available, Adaptable cannot commit column definition changes! (see #col_def_commit)`);
+            Object.assign(col.getColDef(), workingColDef);
+            return;
+        }
+        agColumn.setColDef(workingColDef, col.getUserProvidedColDef(), 'api');
+    }
+    toStableCallback(colId, propertyName, implementation) {
+        const key = `${colId}.${propertyName}`;
+        this.stableCallbackImplementations.set(key, implementation);
+        let stableCallback = this.stableCallbacks.get(key);
+        if (!stableCallback) {
+            stableCallback = (...args) => {
+                return this.stableCallbackImplementations?.get(key)?.(...args);
+            };
+            this.stableCallbacks.set(key, stableCallback);
+            this.stableCallbackOwners.set(stableCallback, { colId, propertyName });
+        }
+        return stableCallback;
+    }
+    resolveUserProvidedValue(propertyName, value) {
+        if (typeof value !== 'function') {
+            return value;
+        }
+        const owner = this.stableCallbackOwners.get(value);
+        if (!owner) {
+            return value;
+        }
+        return this.colDefPropertyCache.get(`user.${owner.colId}.${propertyName}`);
+    }
     setColDefProperty(col, propertyName, propertyGetter) {
         const colId = col.getColId();
-        const colDef = col.getColDef();
+        const colDef = this.getColDefForSetup(col);
         const colSetupInfo = {
             col,
             colDef,
@@ -94,10 +176,15 @@ export class AgGridColumnAdapter {
         const value = colDef[propertyName];
         const isUserDefined = value !== this.colDefPropertyCache.get(adaptableKey);
         if (isUserDefined) {
-            this.colDefPropertyCache.set(userKey, value);
+            this.colDefPropertyCache.set(userKey, this.resolveUserProvidedValue(propertyName, value));
         }
         const userValue = this.colDefPropertyCache.get(userKey);
-        const adaptableValue = propertyGetter(userValue);
+        let adaptableValue = propertyGetter(userValue);
+        if (typeof adaptableValue === 'function' &&
+            adaptableValue !== userValue &&
+            STABLE_CALLBACK_COL_DEF_PROPERTIES.has(propertyName)) {
+            adaptableValue = this.toStableCallback(colId, propertyName, adaptableValue);
+        }
         if (adaptableValue != null) {
             this.colDefPropertyCache.set(adaptableKey, adaptableValue);
         }
@@ -115,7 +202,12 @@ export class AgGridColumnAdapter {
         if (theValue === undefined && colDef[propertyName] === undefined) {
             return;
         }
+        const previousValue = colDef[propertyName];
         colDef[propertyName] = theValue;
+        if ((propertyName === 'comparator' || propertyName === 'pivotComparator') &&
+            previousValue !== theValue) {
+            this.sortCacheInvalidationNeeded = true;
+        }
     }
     getUserColDefProperty(columnId, propertyName) {
         const userKey = `user.${columnId}.${propertyName}`;
@@ -148,42 +240,54 @@ export class AgGridColumnAdapter {
             cols = cols.filter((col) => specificColumnIds.includes(col.getColId()));
         }
         cols.forEach((col) => {
-            const colDef = col.getColDef();
             const colId = col.getColId();
             if (this.shouldSkipColumn(colId)) {
                 return;
             }
-            const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(colId);
-            const colSetupInfo = {
-                col,
-                colDef,
-                colId,
-                abColumn,
-            };
-            const isAutoRowGroupColumn = this.adaptableApi.columnApi.isAutoRowGroupColumn(colId);
-            this.setupColumnCellRenderer(colSetupInfo);
-            this.setupColumnCellStyle(colSetupInfo);
-            this.setupColumnCellClass(colSetupInfo);
-            this.setupColumnHeaderStyle(colSetupInfo);
-            this.setupColumnHeaderClass(colSetupInfo);
-            this.setupColumnValueGetter(colSetupInfo);
-            this.setupColumnTooltipValueGetter(colSetupInfo);
-            if (!isAutoRowGroupColumn) {
-                this.setupColumnFilter(colSetupInfo);
-                this.setupColumnFloatingFilter(colSetupInfo);
+            const colDef = this.beginColDefChanges(col);
+            try {
+                this.setupColumn({ col, colDef, colId });
+            }
+            finally {
+                this.commitColDefChanges(col);
             }
-            this.setupColumnValueFormatter(colSetupInfo);
-            this.setupColumnEditable(colSetupInfo);
-            this.setupColumnValueSetter(colSetupInfo);
-            this.setupColumnComparator(colSetupInfo);
-            this.setupColumnGetFindText(colSetupInfo);
-            this.setupColumnCellEditor(colSetupInfo);
-            this.setupColumnHeader(colSetupInfo);
-            this.setupColumnQuickFilterText(colSetupInfo);
-            this.setupColumnAllowedAggFuncs(colSetupInfo);
-            this.setupColumnType(colSetupInfo);
-            this.setupColumnCellDataType(colSetupInfo);
         });
+        if (this.sortCacheInvalidationNeeded) {
+            this.sortCacheInvalidationNeeded = false;
+            this.adaptableInstance.agGridAdapter?.DANGER_invalidateSortCache();
+        }
+    }
+    setupColumn({ col, colDef, colId }) {
+        const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(colId);
+        const colSetupInfo = {
+            col,
+            colDef,
+            colId,
+            abColumn,
+        };
+        const isAutoRowGroupColumn = this.adaptableApi.columnApi.isAutoRowGroupColumn(colId);
+        this.setupColumnCellRenderer(colSetupInfo);
+        this.setupColumnCellStyle(colSetupInfo);
+        this.setupColumnCellClass(colSetupInfo);
+        this.setupColumnHeaderStyle(colSetupInfo);
+        this.setupColumnHeaderClass(colSetupInfo);
+        this.setupColumnValueGetter(colSetupInfo);
+        this.setupColumnTooltipValueGetter(colSetupInfo);
+        if (!isAutoRowGroupColumn) {
+            this.setupColumnFilter(colSetupInfo);
+            this.setupColumnFloatingFilter(colSetupInfo);
+        }
+        this.setupColumnValueFormatter(colSetupInfo);
+        this.setupColumnEditable(colSetupInfo);
+        this.setupColumnValueSetter(colSetupInfo);
+        this.setupColumnComparator(colSetupInfo);
+        this.setupColumnGetFindText(colSetupInfo);
+        this.setupColumnCellEditor(colSetupInfo);
+        this.setupColumnHeader(colSetupInfo);
+        this.setupColumnQuickFilterText(colSetupInfo);
+        this.setupColumnAllowedAggFuncs(colSetupInfo);
+        this.setupColumnType(colSetupInfo);
+        this.setupColumnCellDataType(colSetupInfo);
     }
     setupColumnValueGetter({ col }) {
         this.setColDefProperty(col, 'valueGetter', (userValue) => {
@@ -358,31 +462,14 @@ export class AgGridColumnAdapter {
                 const textStyleToApply = isCurrentMatch
                     ? { ...textMatchStyle, ...currentTextMatchStyle }
                     : textMatchStyle;
-                let baseStyles = {};
-                if (this.adaptableApi.columnApi.isPivotResultColumn(columnId)) {
-                    const baseColumn = params.column.getColDef()?.pivotValueColumn;
-                    if (baseColumn) {
-                        const baseColDefCellStyle = baseColumn?.getColDef()?.cellStyle;
-                        const baseColParams = {
-                            ...params,
-                            column: baseColumn,
-                            __pivotResultColumn: params.column,
-                        };
-                        baseStyles =
-                            typeof baseColDefCellStyle === 'function'
-                                ? baseColDefCellStyle(baseColParams)
-                                : baseColDefCellStyle;
-                    }
-                }
-                else {
-                    baseStyles = typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle;
-                }
+                const baseStyles = typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle;
+                const pivotResultCell = this.getPivotResultCellContext(params);
                 const result = {
                     ...baseStyles,
                     ...this.getReadOnlyCellStyle(gridCell, params),
                     ...this.getEditableCellStyle(gridCell, params),
                     ...this.getEditedCellStyle(gridCell, params),
-                    ...this.getFormatColumnAndStyledColumnCellStyle(gridCell.column, params),
+                    ...this.getFormatColumnAndStyledColumnCellStyle(gridCell.column, params, pivotResultCell),
                     ...(isQuickSearchActive ? quickSearchStyle : {}),
                     ...(isQuickSearchActive && textStyleToApply ? textStyleToApply : {}),
                     ...this.getAlertCellStyle(gridCell, params),
@@ -744,11 +831,23 @@ export class AgGridColumnAdapter {
                 this.adaptableApi.consoleError(`Column "${colId}" has a custom filter in colDef.filter, but Adaptable filtering only accepts boolean (true/false) values for this property.`);
                 return false;
             }
-            return {
+            return this.getAdaptableColumnFilterDef();
+        });
+    }
+    getAdaptableColumnFilterDef() {
+        if (!this.adaptableColumnFilterDef) {
+            this.adaptableColumnFilterDef = {
                 component: AgGridFilterAdapterFactory(this.adaptableInstance),
                 handler: () => new AdaptableFilterHandler(this.adaptableApi),
             };
-        });
+        }
+        return this.adaptableColumnFilterDef;
+    }
+    getAdaptableFloatingFilterComponent() {
+        if (!this.adaptableFloatingFilterComponent) {
+            this.adaptableFloatingFilterComponent = AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
+        }
+        return this.adaptableFloatingFilterComponent;
     }
     setupColumnFloatingFilter({ col, colDef }) {
         const userProvidedFilterProp = this.getUserColDefProperty(col.getColId(), 'filter');
@@ -775,13 +874,13 @@ export class AgGridColumnAdapter {
             if (isFloatingFilterDisabled) {
                 return;
             }
-            return AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
+            return this.getAdaptableFloatingFilterComponent();
         });
         this.setColDefProperty(col, 'floatingFilter', () => {
             if (isFloatingFilterDisabled) {
                 return;
             }
-            return AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
+            return this.getAdaptableFloatingFilterComponent();
         });
         this.setColDefProperty(col, 'suppressFloatingFilterButton', () => {
             return !isFloatingFilterDisabled;
@@ -1201,21 +1300,44 @@ export class AgGridColumnAdapter {
         }
         return undefined;
     }
-    getFormatColumnAndStyledColumnCellStyle(column, params) {
-        const styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(column.columnId);
+    getPivotResultCellContext(params) {
+        if (!this.adaptableApi.columnApi.isPivotResultColumn(params.column.getColId())) {
+            return undefined;
+        }
+        const baseAgColumn = params.column.getColDef()?.pivotValueColumn;
+        const baseColumn = baseAgColumn
+            ? this.adaptableApi.columnApi.getColumnWithColumnId(baseAgColumn.getColId())
+            : undefined;
+        if (!baseColumn) {
+            return undefined;
+        }
+        return { pivotResultColumn: params.column, baseColumn };
+    }
+    getFormatColumnAndStyledColumnCellStyle(column, params, pivotResultCell) {
+        let styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(column.columnId);
+        let styledColumnColumn = column;
+        if (!styledColumn && pivotResultCell) {
+            styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(pivotResultCell.baseColumn.columnId);
+            styledColumnColumn = pivotResultCell.baseColumn;
+        }
         const styledColumnIsActive = !!styledColumn && !styledColumn?.IsSuspended;
         const styledColumnStyle = styledColumnIsActive
-            ? this.getStyledColumnStyle(styledColumn, column, params)
+            ? this.getStyledColumnStyle(styledColumn, styledColumnColumn, params)
             : {};
-        const activeFormatColumnsWithStyle = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithStyleForColumn(column, {
-            target: 'cell',
-        });
-        let formatColumnStyle = this.getFormatColumnCellStyle(column, activeFormatColumnsWithStyle, params);
+        const formatColumnInternalApi = this.adaptableApi.formatColumnApi.internalApi;
+        const relevantFormatColumnsWithStyle = this.getRelevantFormatColumnsForCell(column, formatColumnInternalApi.getFormatColumnsWithStyleForColumn(column, { target: 'cell' }), params, pivotResultCell?.pivotResultColumn);
+        if (pivotResultCell) {
+            const baseFormatColumnsWithStyle = formatColumnInternalApi
+                .getFormatColumnsWithStyleForColumn(pivotResultCell.baseColumn, { target: 'cell' })
+                .filter((formatColumn) => !relevantFormatColumnsWithStyle.includes(formatColumn));
+            relevantFormatColumnsWithStyle.push(...this.getRelevantFormatColumnsForCell(pivotResultCell.baseColumn, baseFormatColumnsWithStyle, params, pivotResultCell.pivotResultColumn));
+        }
+        let formatColumnStyle = this.getFormatColumnAdaptableStyle(relevantFormatColumnsWithStyle);
         if (styledColumnIsActive) {
-            if (this.styledColumnClaimsFontStyle(styledColumn, column)) {
+            if (this.styledColumnClaimsFontStyle(styledColumn, styledColumnColumn)) {
                 formatColumnStyle = stripFontCssKeys(formatColumnStyle);
             }
-            if (this.styledColumnClaimsCellBoxStyle(styledColumn, column)) {
+            if (this.styledColumnClaimsCellBoxStyle(styledColumn, styledColumnColumn)) {
                 formatColumnStyle = stripCellBoxCssKeys(formatColumnStyle);
             }
         }
@@ -1328,14 +1450,10 @@ export class AgGridColumnAdapter {
         }
         return style;
     }
-    getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params) {
-        if (!activeFormatColumnsWithStyle.length) {
-            return {};
-        }
-        const relevantFormatColumnsWithStyle = activeFormatColumnsWithStyle.filter((formatColumn) => {
-            return this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInCell(formatColumn, abColumn, params.node, params.value, params.__pivotResultColumn);
+    getRelevantFormatColumnsForCell(abColumn, activeFormatColumnsWithStyle, params, pivotResultColumn) {
+        return activeFormatColumnsWithStyle.filter((formatColumn) => {
+            return this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInCell(formatColumn, abColumn, params.node, params.value, pivotResultColumn);
         });
-        return this.getFormatColumnAdaptableStyle(relevantFormatColumnsWithStyle);
     }
     getFormatColumnAdaptableStyle(formatColumns) {
         return formatColumns.reduceRight((style, formatColumn) => {

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -1,5 +1,5 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { DefaultMenuItem, GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from 'ag-grid-enterprise';
+import { DefaultMenuItem, GetContextMenuItems, GetContextMenuItemsParams, GetColumnMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from 'ag-grid-enterprise';
 import { AdaptableColumn } from '../AdaptableState/Common/AdaptableColumn';
 import { AdaptableMenuItem } from '../AdaptableState/Common/Menu';
 export declare class AgGridMenuAdapter {
@@ -8,8 +8,14 @@ export declare class AgGridMenuAdapter {
     private get adaptableOptions();
     private get adaptableApi();
     destroy(): void;
-    buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    buildColumnMenu(params: GetMainMenuItemsParams | GetColumnMenuItemsParams, _originalGetMainMenuItems?: GetMainMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    /**
+     * Columns Tool Panel / Column Chooser (AG Grid 36.1 `getColumnMenuItems`).
+     * Phase 1 only strips dual-UI items; AdapTable items are added in Phase 2.
+     */
+    buildColumnsToolPanelMenu(params: GetColumnMenuItemsParams): (DefaultMenuItem | MenuItemDef)[];
     buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    private filterSuppressedAgGridDualUiMenuItems;
     private mapAgGridItemTypeToAgGridMenuItem;
     private removeConsecutiveSeparators;
     private createColumnMenuContextObject;

package/src/agGrid/AgGridMenuAdapter.js

@@ -3,6 +3,13 @@ import { iconToString } from '../components/icons';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { MENU_SEPARATOR } from '../Utilities/Constants/GeneralConstants';
 import { getAggFuncName, getDisplayAggFuncNames, isWeightedAverageAggregation, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../AdaptableState/Common/AggregationColumns';
+const AG_GRID_DUAL_UI_MENU_ITEMS = new Set([
+    'calculatedColumn',
+    'editCalculatedColumn',
+    'removeCalculatedColumn',
+    'editColumnName',
+    'showValuesAsSubMenu',
+]);
 function createAgGridIcon(name) {
     const element = document.createElement('span');
     element.className = `ag-icon ag-icon-${name}`;
@@ -114,8 +121,8 @@ export class AgGridMenuAdapter {
     destroy() {
         this._adaptableInstance = null;
     }
-    buildColumnMenu(params, originalGetMainMenuItems) {
-        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+    buildColumnMenu(params, _originalGetMainMenuItems) {
+        const agGridMenuItems = this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []);
         if (!params.column) {
             return agGridMenuItems;
         }
@@ -158,18 +165,21 @@ export class AgGridMenuAdapter {
         ];
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
+    buildColumnsToolPanelMenu(params) {
+        return this.removeConsecutiveSeparators(this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []));
+    }
     buildContextMenu(params, originalGetContextMenuItems) {
         if (!params.column) {
             return [];
         }
         if (!this.adaptableApi.userInterfaceApi.isAdaptableUIVisible()) {
-            return (params.defaultItems ? [...params.defaultItems] : []);
+            return this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []);
         }
         this._adaptableInstance.refreshSelectedCellsState();
         const contextMenuOptions = this.adaptableOptions.contextMenuOptions;
         const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId(params.column?.getColId());
         const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
-        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+        const agGridMenuItems = this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []);
         const agGridCopyItems = agGridMenuItems.filter((item) => ['copy', 'copyWithHeaders', 'copyWithGroupHeaders', 'cut', 'paste'].includes(item));
         const otherAgGridItems = agGridMenuItems.filter((item) => !agGridCopyItems.includes(item) &&
             !['export', 'csvExport', 'excelExport'].includes(item));
@@ -213,6 +223,9 @@ export class AgGridMenuAdapter {
         ];
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
+    filterSuppressedAgGridDualUiMenuItems(items) {
+        return items.filter((item) => typeof item !== 'string' || !AG_GRID_DUAL_UI_MENU_ITEMS.has(item));
+    }
     mapAgGridItemTypeToAgGridMenuItem(itemName) {
         return {
             menuType: 'AgGrid',

package/src/agGrid/AgGridModulesAdapter.js

@@ -17,6 +17,12 @@ export class AgGridModulesAdapter {
         return this.adaptableInstance.agGridAdapter.getAgGridApi();
     }
     isAgGridModuleRegistered(moduleName) {
+        if (moduleName === 'ClientSideRowModelModule') {
+            const rowModelType = this.agGridApi.getGridOption('rowModelType');
+            if (rowModelType == null || rowModelType === 'clientSide') {
+                return true;
+            }
+        }
         let isModuleRegistered = this.agGridApi.isModuleRegistered(moduleName);
         if (!isModuleRegistered) {
             const serverSideDependencies = [
@@ -61,7 +67,6 @@ export class AgGridModulesAdapter {
                 mandatoryModules.push('ViewportRowModelModule');
                 break;
             default:
-                mandatoryModules.push('ClientSideRowModelModule');
                 mandatoryModules.push('ClientSideRowModelApiModule');
         }
         mandatoryModules.push('CellApiModule', 'CellStyleModule', 'ColumnApiModule', 'ColumnMenuModule', 'ContextMenuModule', 'CustomFilterModule', 'EventApiModule', 'ExternalFilterModule', 'GridStateModule', 'GroupFilterModule', 'RenderApiModule', 'RowApiModule', 'RowGroupingModule', 'RowStyleModule', 'ScrollApiModule');

package/src/agGrid/AgGridThemeAdapter.d.ts

@@ -13,7 +13,24 @@ export declare class AgGridThemeAdapter {
     applyAgGridThemeOnAdaptableThemeChange(adaptableTheme: AdaptableTheme, variantTheme: string, agGridContainer: HTMLElement, themesToRemove: AdaptableTheme[]): void;
     private getAgGridContainerElement;
     private legacy_applyAgGridThemeOnAdaptableThemeChange;
+    /**
+     * Returns the space-separated `ag-theme-*` class names which have to be applied to elements rendered
+     * OUTSIDE the grid DOM (e.g. AdapTable popups/tooltips portaled to `document.body`) so that they
+     * pick up the AG Grid theme.
+     *
+     * - legacy theme mode: the `ag-theme-<name>` class of the grid container
+     * - Theming API: the `ag-theme-inherit-N` + `ag-theme-<part>-N ... ag-theme-params-N` classes
+     *   AG Grid 36 applies on the grid-owned `.ag-styled-root` wrappers around the grid
+     */
     getAgGridCurrentThemeClassNames(): string;
+    /**
+     * AG Grid 36+ wraps the grid in three grid-owned `div.ag-styled-root` elements
+     * (outer: `ag-theme-inherit-N`, middle: `ag-theme-<part>-N ... ag-theme-params-N`, inner: `ag-ltr|ag-rtl`);
+     * `AgGridAdapter.getAgGridRootElement()` is the innermost one.
+     * Collects the `ag-theme-*` classes of these wrappers (direction classes are skipped).
+     */
+    private getThemeClassNamesFromStyledRoots;
+    private getThemeClassNamesFromThemeInternals;
     private getAgGridLightThemeName;
     private legacy_getAgGridCurrentThemeClassNames;
 }

package/src/agGrid/AgGridThemeAdapter.js

@@ -74,15 +74,46 @@ export class AgGridThemeAdapter {
         }
     }
     getAgGridCurrentThemeClassNames() {
-        if (this.agGridThemeMode === 'legacy') {
-            this.legacy_getAgGridCurrentThemeClassNames();
-        }
         const currentAgGridTheme = this._adaptableInstance.agGridAdapter.getGridOption('theme');
-        if (currentAgGridTheme === 'legacy') {
+        if (this.agGridThemeMode === 'legacy' || currentAgGridTheme === 'legacy') {
             return this.legacy_getAgGridCurrentThemeClassNames();
         }
-        const currentAgGridTheme__cssClassCache = currentAgGridTheme?._cssClassCache;
-        return currentAgGridTheme__cssClassCache ?? '';
+        const classNamesFromDom = this.getThemeClassNamesFromStyledRoots();
+        if (classNamesFromDom) {
+            return classNamesFromDom;
+        }
+        return this.getThemeClassNamesFromThemeInternals(currentAgGridTheme);
+    }
+    getThemeClassNamesFromStyledRoots() {
+        const gridRoot = this._adaptableInstance.agGridAdapter.getAgGridRootElement();
+        const themeClassNames = [];
+        let element = gridRoot ?? null;
+        while (element && element.classList?.contains('ag-styled-root')) {
+            element.classList.forEach((cls) => {
+                if (cls.indexOf('ag-theme-') === 0) {
+                    themeClassNames.push(cls);
+                }
+            });
+            element = element.parentElement;
+        }
+        return themeClassNames.join(' ');
+    }
+    getThemeClassNamesFromThemeInternals(theme) {
+        if (!theme || typeof theme === 'string') {
+            return '';
+        }
+        const themeInternals = theme;
+        let cssClasses;
+        try {
+            cssClasses = themeInternals._getCssClasses?.() ?? themeInternals._cssClassCache;
+        }
+        catch {
+            cssClasses = themeInternals._cssClassCache;
+        }
+        if (Array.isArray(cssClasses)) {
+            return cssClasses.filter(Boolean).join(' ');
+        }
+        return typeof cssClasses === 'string' ? cssClasses : '';
     }
     getAgGridLightThemeName() {
         const container = this.getAgGridContainerElement();