@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.0

package/src/agGrid/AgGridDataTypeDefinitions.js

@@ -0,0 +1,69 @@
+import { DURATION_CELL_DATA_TYPE, formatDuration } from '../aql/durationHelper';
+export const TEXT_ARRAY_DATA_TYPE = 'textArray';
+export const NUMBER_ARRAY_DATA_TYPE = 'numberArray';
+export const TUPLE_ARRAY_DATA_TYPE = 'tupleArray';
+export const OBJECT_ARRAY_DATA_TYPE = 'objectArray';
+export const ALL_ADAPTABLE_DATA_TYPES = [
+    'text',
+    'number',
+    'boolean',
+    'date',
+    'object',
+    TEXT_ARRAY_DATA_TYPE,
+    NUMBER_ARRAY_DATA_TYPE,
+    TUPLE_ARRAY_DATA_TYPE,
+    OBJECT_ARRAY_DATA_TYPE,
+    'unknown',
+];
+export const agGridDataTypeDefinitions = {
+    number: {
+        baseDataType: 'number',
+        extendsDataType: 'number',
+        suppressDefaultProperties: true,
+    },
+    date: {
+        baseDataType: 'date',
+        extendsDataType: 'date',
+        valueParser: null,
+        valueFormatter: null,
+        suppressDefaultProperties: true,
+    },
+    unknown: {
+        baseDataType: 'text',
+        extendsDataType: 'text',
+    },
+    [DURATION_CELL_DATA_TYPE]: {
+        baseDataType: 'number',
+        extendsDataType: 'number',
+        valueFormatter: (params) => formatDuration(params.value),
+    },
+    [TEXT_ARRAY_DATA_TYPE]: {
+        baseDataType: 'text',
+        extendsDataType: 'text',
+        dataTypeMatcher: (value) => {
+            return Array.isArray(value) && value.every((v) => typeof v === 'string');
+        },
+    },
+    [NUMBER_ARRAY_DATA_TYPE]: {
+        baseDataType: 'number',
+        extendsDataType: 'number',
+        dataTypeMatcher: (value) => {
+            return Array.isArray(value) && value.every((v) => typeof v === 'number');
+        },
+    },
+    [TUPLE_ARRAY_DATA_TYPE]: {
+        baseDataType: 'object',
+        extendsDataType: 'object',
+        dataTypeMatcher: (value) => {
+            return Array.isArray(value) && value.every((v) => Array.isArray(v));
+        },
+    },
+    [OBJECT_ARRAY_DATA_TYPE]: {
+        baseDataType: 'object',
+        extendsDataType: 'object',
+        dataTypeMatcher: (value) => {
+            return (Array.isArray(value) &&
+                value.every((v) => typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length >= 2));
+        },
+    },
+};

package/src/agGrid/AgGridExportAdapter.js

@@ -6,6 +6,7 @@ import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../Utilities/
 import { ExportModuleId } from '../Utilities/Constants/ModuleConstants';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
 import FormatHelper, { DateFormatter } from '../Utilities/Helpers/DisplayFormatHelper';
+import { resolveValueOrFunction } from '../Utilities/Helpers/ValueOrFunctionHelper';
 import { convertCSSAbsoluteFontSizeToPt, getVariableColor, sanitizeStyle, } from '../Utilities/Helpers/StyleHelper';
 import { waitForTimeout } from '../Utilities/waitForTimeout';
 export class AgGridExportAdapter {
@@ -135,10 +136,7 @@ export class AgGridExportAdapter {
         const baseExportParams = this.buildBaseExportParams(exportContext);
         if (exportContext.format === 'Excel' || exportContext.format === 'VisualExcel') {
             const excelExportParams = baseExportParams;
-            const sheetName = typeof this.exportOptions.excelSheetName === 'function'
-                ? this.exportOptions.excelSheetName(this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportContext.report.Name, exportContext.format, exportContext.destination))
-                : this.exportOptions.excelSheetName;
-            excelExportParams.sheetName = sheetName;
+            excelExportParams.sheetName = resolveValueOrFunction(this.exportOptions.excelSheetName, this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportContext.report.Name, exportContext.format, exportContext.destination));
             return excelExportParams;
         }
         const csvExportParams = baseExportParams;
@@ -216,7 +214,7 @@ export class AgGridExportAdapter {
                     selectedRowColumnMapping.set(row.rowNode.id, true);
                 }
             });
-            this.adaptableApi.gridApi.getSelectedCellInfo().gridCells?.map((gridCell) => {
+            this.adaptableApi.gridApi.getSelectedCellInfo()?.gridCells?.forEach((gridCell) => {
                 if (gridCell.rowNode?.id) {
                     const selectedColumns = selectedRowColumnMapping.get(gridCell.rowNode.id);
                     if (selectedColumns == null) {
@@ -245,7 +243,7 @@ export class AgGridExportAdapter {
             shouldRowBeSkipped = (params) => {
                 const rowNodeMatchesExpression = this.adaptableApi.internalApi
                     .getQueryLanguageService()
-                    .evaluateBooleanExpression(report?.Query?.BooleanExpression, ExportModuleId, params.node);
+                    .evaluateBooleanExpression(report?.Expression, ExportModuleId, params.node);
                 return !rowNodeMatchesExpression;
             };
         }
@@ -313,7 +311,7 @@ export class AgGridExportAdapter {
                 else {
                     const selectedColumnIds = this.adaptableApi.gridApi
                         .getSelectedCellInfo()
-                        .columns?.map((column) => column.columnId);
+                        ?.columns?.map((column) => column.columnId) ?? [];
                     const selectedColumnIdsSet = new Set(selectedColumnIds.filter(onlyExportableColumnIds));
                     exportedColumnIds = getVisibleColumnIds().filter((colId) => selectedColumnIdsSet.has(colId));
                 }
@@ -563,12 +561,10 @@ export class AgGridExportAdapter {
                                 resolvedDisplayFormat?.Options?.Pattern;
                     }
                     if (dateFormatPattern) {
-                        const customDateFormatPattern = typeof dateFormatPattern === 'function'
-                            ? dateFormatPattern({
-                                ...this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportContext.report.Name, exportContext.format, exportContext.destination),
-                                column: adaptableColumn,
-                            })
-                            : dateFormatPattern;
+                        const customDateFormatPattern = resolveValueOrFunction(dateFormatPattern, {
+                            ...this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportContext.report.Name, exportContext.format, exportContext.destination),
+                            column: adaptableColumn,
+                        });
                         const normalisedValue = this._adaptableInstance.getNormalisedValueFromRawValue(rawValue, abColumn);
                         if (normalisedValue) {
                             const isoFormattedValue = DateFormatter(normalisedValue, {
@@ -725,20 +721,10 @@ export class AgGridExportAdapter {
         return reportData;
     }
     getCsvSeparator(exportProcessContext) {
-        if (typeof this.exportOptions.csvSeparator === 'function') {
-            return this.exportOptions.csvSeparator(this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportProcessContext.report.Name, exportProcessContext.format, exportProcessContext.destination));
-        }
-        else {
-            return this.exportOptions.csvSeparator;
-        }
+        return resolveValueOrFunction(this.exportOptions.csvSeparator, this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportProcessContext.report.Name, exportProcessContext.format, exportProcessContext.destination));
     }
     computeSkipColumnHeaders(exportProcessContext) {
-        if (typeof this.exportOptions.skipColumnHeaders === 'function') {
-            return this.exportOptions.skipColumnHeaders(this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportProcessContext.report.Name, exportProcessContext.format, exportProcessContext.destination));
-        }
-        else {
-            return this.exportOptions.skipColumnHeaders;
-        }
+        return resolveValueOrFunction(this.exportOptions.skipColumnHeaders, this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportProcessContext.report.Name, exportProcessContext.format, exportProcessContext.destination));
     }
     computeGetCustomContentBelowRow(exportContext) {
         if (!this.adaptableApi.gridApi.isMasterDetailGrid()) {
@@ -811,13 +797,10 @@ export class AgGridExportAdapter {
         return this.getCellExportValueFromRawValueByType(rowNode, cellRawValue, columnId, cellExportFormat);
     }
     getCustomExportDateFormat(column, exportContext) {
-        const exportDateFormatOption = this.adaptableApi.optionsApi.getExportOptions().exportDateFormat;
-        return typeof exportDateFormatOption === 'function'
-            ? exportDateFormatOption({
-                ...this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportContext.report.Name, exportContext.format, exportContext.destination),
-                column,
-            })
-            : exportDateFormatOption;
+        return resolveValueOrFunction(this.adaptableApi.optionsApi.getExportOptions().exportDateFormat, {
+            ...this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportContext.report.Name, exportContext.format, exportContext.destination),
+            column,
+        });
     }
     getCellExportValueFromRawValueByType(rowNode, cellRawValue, columnId, type = 'rawValue') {
         return type === 'rawValue'
@@ -826,14 +809,10 @@ export class AgGridExportAdapter {
                 this.adaptableApi.gridApi.getDisplayValueFromRawValue(rowNode, columnId, cellRawValue);
     }
     getCellExportFormatType(column, columnDataType, exportContext) {
-        const exportDataFormat = this.exportOptions.exportDataFormat;
-        if (exportDataFormat != null && typeof exportDataFormat === 'function') {
-            const context = {
-                ...this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportContext.report.Name, exportContext.format, exportContext.destination),
-                column: column,
-            };
-            return exportDataFormat(context);
-        }
+        const exportDataFormat = resolveValueOrFunction(this.exportOptions.exportDataFormat, {
+            ...this.adaptableApi.exportApi.internalApi.buildBaseExportContext(exportContext.report.Name, exportContext.format, exportContext.destination),
+            column,
+        });
         if (exportDataFormat === 'rawValue') {
             return 'rawValue';
         }

package/src/agGrid/AgGridFilterAdapter.js

@@ -1,6 +1,39 @@
 import * as React from 'react';
-import { AdaptableColumnFilter } from '../View/Components/ColumnFilter/AdaptableColumnFilter';
-import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
+import { AdaptableColumnFilterNew } from '../View/Filter/ColumnFilter/AdaptableColumnFilterNew';
+import { detectColumnFilterLocationFromHost } from '../View/Filter/ColumnFilter/columnFilterLocation';
+import { renderWithAdaptableContext } from '../View/AdaptableContext';
+const COLUMN_FILTER_POPUP_MIN_WIDTH = 'min(var(--ab-cmp-column-filter__min-width, 24rem), 90vw)';
+const COLUMN_FILTER_POPUP_MAX_WIDTH = 'min(var(--ab-cmp-column-filter__max-width, 32rem), 90vw)';
+const filterContainerStyle = {
+    minWidth: COLUMN_FILTER_POPUP_MIN_WIDTH,
+    maxWidth: COLUMN_FILTER_POPUP_MAX_WIDTH,
+    width: 'max-content',
+    boxSizing: 'border-box',
+};
+function patchFilterPopupAncestors(filterContainer) {
+    let current = filterContainer;
+    let depth = 0;
+    while (current && depth < 15) {
+        const classList = current.classList;
+        if (classList.contains('ag-root') ||
+            classList.contains('ag-body') ||
+            classList.contains('ag-header')) {
+            break;
+        }
+        if (classList.contains('ag-popup') ||
+            classList.contains('ag-popup-child') ||
+            classList.contains('ag-menu') ||
+            classList.contains('ag-filter') ||
+            Array.from(classList).some((className) => className.startsWith('ag-filter'))) {
+            current.style.minWidth = COLUMN_FILTER_POPUP_MIN_WIDTH;
+            current.style.maxWidth = COLUMN_FILTER_POPUP_MAX_WIDTH;
+            current.style.width = 'max-content';
+            current.style.boxSizing = 'border-box';
+        }
+        current = current.parentElement;
+        depth++;
+    }
+}
 export const AgGridFilterAdapterFactory = (adaptable) => {
     function isFilterActive(colId) {
         if (adaptable.isDestroyed) {
@@ -15,12 +48,18 @@ export const AgGridFilterAdapterFactory = (adaptable) => {
         params;
         filterContainer;
         column;
+        stopMouseDown;
         unmountReactRoot;
         init(params) {
             this.params = params;
             this.column = params.column;
             this.filterContainer = document.createElement('div');
             this.filterContainer.id = getContainerId(this.params.column.getColId());
+            this.filterContainer.className = 'ab-AgGridColumnFilter-host';
+            this.stopMouseDown = (event) => {
+                event.stopPropagation();
+            };
+            this.filterContainer.addEventListener('mousedown', this.stopMouseDown);
         }
         getGui() {
             return this.filterContainer;
@@ -32,18 +71,42 @@ export const AgGridFilterAdapterFactory = (adaptable) => {
             this.unmountReactRoot?.();
             const columnId = this.column.getColId();
             let column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
-            if (column) {
-                const isFiltersToolPanel = typeof params?.hidePopup !== 'function';
-                const location = isFiltersToolPanel ? 'filtersToolPanel' : 'columnMenu';
-                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableColumnFilter, {
+            if (!column) {
+                return;
+            }
+            requestAnimationFrame(() => {
+                if (adaptable.isDestroyed) {
+                    return;
+                }
+                const location = detectColumnFilterLocationFromHost(this.filterContainer, params);
+                const isFiltersToolPanel = location === 'filtersToolPanel';
+                this.filterContainer.className = isFiltersToolPanel
+                    ? 'ab-AgGridColumnFilter-host ab-AgGridColumnFilter-host--tool-panel'
+                    : 'ab-AgGridColumnFilter-host';
+                if (isFiltersToolPanel) {
+                    this.filterContainer.style.minWidth = '0';
+                    this.filterContainer.style.maxWidth = 'none';
+                    this.filterContainer.style.width = '100%';
+                    this.filterContainer.style.boxSizing = 'border-box';
+                }
+                else {
+                    Object.assign(this.filterContainer.style, filterContainerStyle);
+                }
+                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableColumnFilterNew, {
                     columnId,
                     wrapperProps: { className: 'twa:p-2' },
                     location,
                 }), adaptable), this.filterContainer);
-            }
+                if (!isFiltersToolPanel) {
+                    requestAnimationFrame(() => patchFilterPopupAncestors(this.filterContainer));
+                }
+            });
         }
         destroy() {
             this.unmountReactRoot?.();
+            if (this.filterContainer && this.stopMouseDown) {
+                this.filterContainer.removeEventListener('mousedown', this.stopMouseDown);
+            }
             this.filterContainer = null;
         }
     };

package/src/agGrid/AgGridFloatingFilterAdapter.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
-import { AdaptableFloatingFilter } from '../View/Components/ColumnFilter/AdaptableFloatingFilter';
+import { renderWithAdaptableContext } from '../View/AdaptableContext';
+import { AdaptableFloatingFilterNew } from '../View/Filter/ColumnFilter/AdaptableFloatingFilterNew';
 const filterContainerStyle = {
     overflow: 'hidden',
     minWidth: '0',
@@ -69,7 +69,7 @@ export const AgGridFloatingFilterAdapterFactory = (adaptable) => {
             const column = adaptableApi.columnApi.getColumnWithColumnId(colId);
             if (column) {
                 const filterProps = getFilterProps(colId);
-                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableFloatingFilter, {
+                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableFloatingFilterNew, {
                     ...filterProps,
                 }), adaptable), this.filterContainer);
             }

package/src/agGrid/AgGridGroupColumnPathMatching.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Path-aware matching for `ag-Grid-AutoColumn` (and tree) group filters.
+ *
+ * Legacy `In` on the auto-group column never did flat cell membership — it
+ * built a group path from the row-node ancestry and matched selected paths
+ * via TreeSelectionState (row grouping) or `#`-joined prefix (tree data).
+ */
+import { IRowNode } from 'ag-grid-enterprise';
+import { TreeSelectionState } from '@infinite-table/infinite-react';
+/**
+ * Builds the group path for a row node: ancestor `groupData` keys (root→leaf)
+ * plus the leaf cell value for non-group nodes. Skips tree filler groups.
+ */
+export declare function getGroupValuesForNode(config: {
+    node: IRowNode;
+    value: unknown;
+}): string[];
+/**
+ * Normalises an AQL `IN` haystack to legacy selected-path shape (`string[][]`).
+ * Scalars become single-segment paths; arrays (e.g. `TO_ARRAY(...)`) are
+ * multi-segment paths.
+ */
+export declare function normalizeInHaystackToPaths(haystack: unknown): string[][];
+/**
+ * TreeSelectionState cached by serialised path list. AQL rebuilds a new
+ * haystack array identity per row, so WeakMap-on-array (predicate Inputs)
+ * cannot be reused here.
+ */
+export declare function getTreeSelectionStateForSelectedPaths(selectedPaths: string[][]): TreeSelectionState;
+/** Clears the path→TreeSelectionState cache (tests / adaptable destroy). */
+export declare function clearGroupColumnPathMatchingCache(): void;
+/**
+ * Legacy dual matcher for auto-group / tree group-column `In`:
+ * - tree column → `#`-joined prefix (`startsWith`)
+ * - otherwise → `TreeSelectionState.isNodeSelected`
+ *
+ * Empty `selectedPaths` matches legacy empty Inputs → `true` (no filter).
+ */
+export declare function matchGroupColumnPaths(config: {
+    node: IRowNode;
+    value: unknown;
+    selectedPaths: string[][];
+    isTreeColumn?: boolean;
+}): boolean;

package/src/agGrid/AgGridGroupColumnPathMatching.js

@@ -0,0 +1,73 @@
+import { TreeSelectionState } from '@infinite-table/infinite-react';
+import { AG_GRID_GROUPED_COLUMN } from '../Utilities/Constants/GeneralConstants';
+const treeSelectionStateByPathsKey = new Map();
+export function getGroupValuesForNode(config) {
+    const { node, value } = config;
+    const groupValues = node.group
+        ? []
+        : value != null
+            ? [String(value)]
+            : [];
+    let currentNode = node.group ? node : node.parent;
+    while (currentNode && currentNode.groupData && Object.keys(currentNode.groupData).length > 0) {
+        if (currentNode.treeParent && !currentNode.data) {
+        }
+        else {
+            const segment = currentNode.groupData[AG_GRID_GROUPED_COLUMN];
+            if (segment != null) {
+                groupValues.unshift(String(segment));
+            }
+        }
+        currentNode = currentNode.parent;
+    }
+    return groupValues;
+}
+export function normalizeInHaystackToPaths(haystack) {
+    if (!Array.isArray(haystack)) {
+        return [];
+    }
+    return haystack.map((entry) => {
+        if (Array.isArray(entry)) {
+            return entry.map((segment) => String(segment));
+        }
+        return [String(entry)];
+    });
+}
+function selectedPathsCacheKey(selectedPaths) {
+    return JSON.stringify(selectedPaths);
+}
+export function getTreeSelectionStateForSelectedPaths(selectedPaths) {
+    const key = selectedPathsCacheKey(selectedPaths);
+    const cached = treeSelectionStateByPathsKey.get(key);
+    if (cached) {
+        return cached;
+    }
+    const treeSelectionState = new TreeSelectionState({
+        defaultSelection: false,
+        selectedPaths,
+    }, {
+        treePaths: selectedPaths,
+        strictCheckPaths: false,
+    });
+    treeSelectionStateByPathsKey.set(key, treeSelectionState);
+    return treeSelectionState;
+}
+export function clearGroupColumnPathMatchingCache() {
+    treeSelectionStateByPathsKey.clear();
+}
+export function matchGroupColumnPaths(config) {
+    const { node, value, selectedPaths, isTreeColumn } = config;
+    if (!selectedPaths.length) {
+        return true;
+    }
+    const groupValues = getGroupValuesForNode({ node, value });
+    if (isTreeColumn) {
+        const currentValues = (groupValues ?? []).join('#');
+        return selectedPaths.some((values) => {
+            const valuesString = values.join('#');
+            return currentValues.startsWith(valuesString);
+        });
+    }
+    const treeSelectionState = getTreeSelectionStateForSelectedPaths(selectedPaths);
+    return groupValues ? treeSelectionState.isNodeSelected(groupValues) : false;
+}

package/src/agGrid/AgGridMenuAdapter.js

@@ -216,10 +216,22 @@ export class AgGridMenuAdapter {
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
                 .filter(Boolean);
         }
+        const noteTypeItem = adaptableDefaultStructure.find((item) => typeof item !== 'string' && item.name === 'note-type');
+        const agGridPart = agGridDefaultStructure.map((agGridItem) => this.mapCustomMenuItemToAgGridMenuDefinition(agGridItem, menuContext));
+        const agGridNoteIndex = agGridPart.indexOf('note');
+        const relocateNoteType = noteTypeItem != null && agGridNoteIndex !== -1;
+        if (relocateNoteType) {
+            agGridPart.splice(agGridNoteIndex + 1, 0, this.mapAdaptableMenuItemToAgGridMenuDefinition(noteTypeItem));
+        }
         const defaultContextMenu = [
-            ...agGridDefaultStructure.map((agGridItem) => this.mapCustomMenuItemToAgGridMenuDefinition(agGridItem, menuContext)),
+            ...agGridPart,
             'separator',
-            ...adaptableDefaultStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
+            ...adaptableDefaultStructure
+                .filter((adaptableItem) => relocateNoteType
+                ? typeof adaptableItem === 'string' ||
+                    adaptableItem.name !== 'note-type'
+                : true)
+                .map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
@@ -416,7 +428,7 @@ export class AgGridMenuAdapter {
     buildContextMenuDefaultStructure(availableMenuItems, menuContext) {
         const alertMenuItems = this.getModuleSpecificStructure('Alert', availableMenuItems);
         const bulkUpdateMenuItems = this.getModuleSpecificStructure('BulkUpdate', availableMenuItems);
-        const calculatedColumnMenuItems = this.getModuleSpecificStructure('CalculatedColumn', availableMenuItems);
+        const calculatedColumnMenuItems = this.getModuleSpecificStructure('CalculatedColumn', availableMenuItems, 'calculated-column-group');
         const cellSummaryMenuItems = this.getModuleSpecificStructure('CellSummary', availableMenuItems);
         const columnFilterMenuItems = this.getModuleSpecificStructure('ColumnFilter', availableMenuItems, 'column-filter-group');
         const columnInfoMenuItems = this.getModuleSpecificStructure('ColumnInfo', availableMenuItems);
@@ -517,7 +529,9 @@ export class AgGridMenuAdapter {
             .getModuleInfoByModule(module);
         const icon = config && config.icon === false
             ? undefined
-            : { name: config?.icon ?? moduleInfo.Glyph };
+            : config?.icon
+                ? { name: config.icon }
+                : moduleInfo?.Glyph;
         return {
             name: config?.groupName ?? 'menu-group',
             label: config?.label ?? moduleInfo.FriendlyName,
@@ -528,7 +542,7 @@ export class AgGridMenuAdapter {
         };
     }
     buildColumnMenuDefaultStructure(availableMenuItems, menuContext) {
-        const calculatedColumnMenuItems = this.getModuleSpecificStructure('CalculatedColumn', availableMenuItems);
+        const calculatedColumnMenuItems = this.getModuleSpecificStructure('CalculatedColumn', availableMenuItems, 'calculated-column-group');
         const cellSummaryMenuItems = this.getModuleSpecificStructure('CellSummary', availableMenuItems);
         const chartMenuItems = this.getModuleSpecificStructure('Charting', availableMenuItems);
         const [columnFilterGroup, filterVisibilityItems] = this.getColumnFilterColumnMenuStructure(availableMenuItems);

package/src/agGrid/AgGridModulesAdapter.js

@@ -17,13 +17,17 @@ export class AgGridModulesAdapter {
         return this.adaptableInstance.agGridAdapter.getAgGridApi();
     }
     isAgGridModuleRegistered(moduleName) {
+        const agGridApi = this.agGridApi;
+        if (!agGridApi) {
+            return false;
+        }
         if (moduleName === 'ClientSideRowModelModule') {
-            const rowModelType = this.agGridApi.getGridOption('rowModelType');
+            const rowModelType = agGridApi.getGridOption('rowModelType');
             if (rowModelType == null || rowModelType === 'clientSide') {
                 return true;
             }
         }
-        let isModuleRegistered = this.agGridApi.isModuleRegistered(moduleName);
+        let isModuleRegistered = agGridApi.isModuleRegistered(moduleName);
         if (!isModuleRegistered) {
             const serverSideDependencies = [
                 'PivotModule',

package/src/agGrid/AgGridOptionsService.js

@@ -15,7 +15,7 @@ export class AgGridOptionsService {
         this.adaptableInstance = null;
     }
     setGridOptionsProperty(gridOptions, propertyName, propertyGetter) {
-        if (this.adaptableInstance.lifecycleState === 'preDestroyed') {
+        if (!this.adaptableInstance || this.adaptableInstance.lifecycleState === 'preDestroyed') {
             return;
         }
         const userKey = `user.${propertyName}`;
@@ -30,7 +30,7 @@ export class AgGridOptionsService {
         if (typeof adaptableValue === 'function') {
             const previousValue = adaptableValue;
             adaptableValue = (...args) => {
-                if (this.adaptableInstance.isDestroyed) {
+                if (!this.adaptableInstance || this.adaptableInstance.isDestroyed) {
                     return;
                 }
                 this.agGridAdapter.grabAgGridApiOnTheFly(args);

package/src/agGrid/AgGridStatusPanelCreator.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { renderWithAdaptableContext } from '../View/AdaptableContext';
+export const createAgStatusPanelComponent = (component, adaptable, context) => {
+    if (adaptable.variant === 'react') {
+        return (props) => {
+            const children = renderWithAdaptableContext(React.createElement(component, {
+                params: props,
+                adaptableApi: adaptable.api,
+                context,
+            }), adaptable);
+            return (_jsx("div", { className: "ab-StatusBar", ref: (node) => {
+                    if (node) {
+                        node.parentElement.style.display = 'flex';
+                    }
+                }, children: children }));
+        };
+    }
+    return class StatusBarRenderer {
+        params;
+        eGui;
+        unmountReactRoot;
+        init(params) {
+            this.params = params;
+            this.eGui = document.createElement('div');
+            this.eGui.classList.add('ab-StatusBar');
+            this.render();
+        }
+        render() {
+            const props = {
+                params: this.params,
+                adaptableApi: adaptable.api,
+                context,
+            };
+            const children = renderWithAdaptableContext(React.createElement(component, props), adaptable);
+            this.unmountReactRoot = adaptable.renderReactRoot(children, this.eGui);
+        }
+        getGui() {
+            return this.eGui;
+        }
+        destroy() {
+            this.unmountReactRoot?.();
+        }
+    };
+};

package/src/agGrid/cellRenderers/ActionColumnRenderer.d.ts

@@ -1,14 +1,22 @@
 import { ICellRendererComp, ICellRendererParams } from 'ag-grid-enterprise';
 import * as React from 'react';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { ActionColumnContext, ActionColumnControl } from '../../AdaptableOptions/ActionColumnOptions';
 interface ActionColumnCellRendererParams extends ICellRendererParams {
 }
+export declare const ActionControlView: (props: {
+    control: ActionColumnControl;
+    context: ActionColumnContext;
+    adaptableApi: AdaptableApi;
+    rerender: VoidFunction;
+}) => React.JSX.Element;
 export declare const ReactActionColumnRenderer: (props: ActionColumnCellRendererParams) => React.JSX.Element;
 export declare class ActionColumnRenderer implements ICellRendererComp {
     private eGui;
     private eventListener;
     private unmountReactRoot?;
     private layoutSwitchUnsubscribe?;
-    private actionButtons;
+    private controls;
     private actionColumn;
     init(params: ActionColumnCellRendererParams): void;
     render(): void;