@adaptabletools/adaptable 19.2.4 → 20.0.0-canary.0

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -1,15 +1,15 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from '@ag-grid-community/core';
+import { DefaultMenuItem, GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from 'ag-grid-enterprise';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
 import { AdaptableMenuItem } from '../PredefinedConfig/Common/Menu';
 export declare class AgGridMenuAdapter {
-    private adaptableInstance;
-    constructor(adaptableInstance: AdaptableAgGrid);
+    private _adaptableInstance;
+    constructor(_adaptableInstance: AdaptableAgGrid);
     private get adaptableOptions();
     private get adaptableApi();
     destroy(): void;
-    buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (string | MenuItemDef)[];
-    buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (string | MenuItemDef)[];
+    buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (DefaultMenuItem | MenuItemDef)[];
     private mapAgGridItemTypeToAgGridMenuItem;
     private removeConsecutiveSeparators;
     private createColumnMenuContextObject;
@@ -27,7 +27,6 @@ export declare class AgGridMenuAdapter {
      * Default strategy for menu items: return as is if there is only one item, otherwise group them under a parent item
      */
     private getModuleSpecificStructure;
-    private getExportContextMenuStructure;
     private getLayoutContextMenuStructure;
     private buildMenuGroupParent;
     private buildColumnMenuDefaultStructure;

package/src/agGrid/AgGridMenuAdapter.js

@@ -1,28 +1,28 @@
 import { isAdaptableElementIcon } from '../components/Icon';
 import { iconToString } from '../components/icons';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
+import { MENU_SEPARATOR } from '../Utilities/Constants/GeneralConstants';
 export class AgGridMenuAdapter {
-    constructor(adaptableInstance) {
-        this.adaptableInstance = adaptableInstance;
+    constructor(_adaptableInstance) {
+        this._adaptableInstance = _adaptableInstance;
     }
     get adaptableOptions() {
-        return this.adaptableInstance.adaptableOptions;
+        return this._adaptableInstance.adaptableOptions;
     }
     get adaptableApi() {
-        return this.adaptableInstance.api;
+        return this._adaptableInstance.api;
     }
     destroy() {
-        this.adaptableInstance = null;
+        this._adaptableInstance = null;
     }
     buildColumnMenu(params, originalGetMainMenuItems) {
-        var _a;
         const columnMenuOptions = this.adaptableOptions.columnMenuOptions;
         const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
         if (!params.column) {
             // return only AG Grid context if the Adaptable column is not found (should not happen)
             return agGridMenuItems;
         }
-        const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
+        const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId(params.column?.getColId());
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
         /**
          * AG Grid items
@@ -33,10 +33,15 @@ export class AgGridMenuAdapter {
         // 1. first check if there is a custom column menu defined
         if (typeof columnMenuOptions.customColumnMenu === 'function') {
             const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => this.mapAgGridItemTypeToAgGridMenuItem(itemName));
-            const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
+            const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => ({ menuType: 'Adaptable', ...adaptableItem }));
             const customMenuItems = columnMenuOptions
-                .customColumnMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
-                defaultAdaptableMenuItems, defaultAdaptableMenuStructure: this.mapAdaptableMenuItemToSystemMenuItems(defaultColumnMenuStructure), defaultAgGridMenuStructure: agGridDefaultStructure }))
+                .customColumnMenu({
+                ...menuContext,
+                defaultAgGridMenuItems,
+                defaultAdaptableMenuItems,
+                defaultAdaptableMenuStructure: this.mapAdaptableMenuItemToSystemMenuItems(defaultColumnMenuStructure),
+                defaultAgGridMenuStructure: agGridDefaultStructure,
+            })
                 .filter(Boolean);
             return customMenuItems
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
@@ -51,15 +56,14 @@ export class AgGridMenuAdapter {
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
     buildContextMenu(params, originalGetContextMenuItems) {
-        var _a;
         if (!params.column) {
             return [];
         }
         // we do this in order to refresh the internal state of selected cells (technically query the AG Grid cellRanges)
         // (right-click selected the current cell, but this was not reflected in the internal state of the selected cells)
-        this.adaptableInstance.refreshSelectedCellsState();
+        this._adaptableInstance.refreshSelectedCellsState();
         const contextMenuOptions = this.adaptableOptions.contextMenuOptions;
-        const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
+        const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId(params.column?.getColId());
         const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
         /**
          * AG Grid Items
@@ -93,10 +97,17 @@ export class AgGridMenuAdapter {
         // 1. first check if there is a custom context menu defined
         if (typeof contextMenuOptions.customContextMenu === 'function') {
             const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => this.mapAgGridItemTypeToAgGridMenuItem(itemName));
-            const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
+            const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => ({ menuType: 'Adaptable', ...adaptableItem }));
+            const defaultAdaptableMenuStructure = this.mapAdaptableMenuItemToSystemMenuItems(adaptableDefaultStructure);
+            const defaultAgGridMenuStructure = agGridDefaultStructure;
             const customMenuItems = contextMenuOptions
-                .customContextMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
-                defaultAdaptableMenuItems, defaultAdaptableMenuStructure: this.mapAdaptableMenuItemToSystemMenuItems(adaptableDefaultStructure), defaultAgGridMenuStructure: agGridDefaultStructure }))
+                .customContextMenu({
+                ...menuContext,
+                defaultAgGridMenuItems,
+                defaultAdaptableMenuItems,
+                defaultAdaptableMenuStructure,
+                defaultAgGridMenuStructure,
+            })
                 .filter(Boolean);
             return customMenuItems
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
@@ -127,17 +138,22 @@ export class AgGridMenuAdapter {
         }, []);
     }
     createColumnMenuContextObject(adaptableColumn, agGridColumn) {
-        return Object.assign(Object.assign({}, this.adaptableInstance.api.internalApi.buildBaseContext()), { adaptableColumn: adaptableColumn, agGridColumn: agGridColumn, isRowGroupColumn: this.adaptableInstance.api.columnApi.isAutoRowGroupColumn(agGridColumn.getColId()) });
+        return {
+            ...this.adaptableApi.internalApi.buildBaseContext(),
+            adaptableColumn: adaptableColumn,
+            agGridColumn: agGridColumn,
+            isRowGroupColumn: this.adaptableApi.columnApi.isAutoRowGroupColumn(agGridColumn.getColId()),
+        };
     }
     createAdaptableContextMenuItems(menuContext) {
         let contextMenuItems = [];
-        this.adaptableInstance.adaptableModules.forEach((module) => {
+        this.adaptableApi.internalApi.getModules().forEach((module) => {
             let menuItems = module.createContextMenuItems(menuContext);
             if (menuItems) {
                 contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
             }
         });
-        this.adaptableInstance._emitSync('CreateAdaptableContextMenuItems', {
+        this._adaptableInstance._emitSync('CreateAdaptableContextMenuItems', {
             items: contextMenuItems,
             menuContext: menuContext,
         });
@@ -150,9 +166,24 @@ export class AgGridMenuAdapter {
         let isSelectedRow = false;
         // row group columns dont provide an AdapTable Column so return bare minimum
         if (!adaptableColumn) {
-            return Object.assign(Object.assign({}, this.adaptableApi.internalApi.buildBaseContext()), { isSelectedCell: false, isSelectedRow: false, gridCell: undefined, adaptableColumn: undefined, agGridColumn: params.column, rowNode: params.node, isGroupedNode: params.node ? params.node.group : false, isSingleSelectedColumn: false, isSingleSelectedCell: false, primaryKeyValue: undefined, selectedCellInfo: undefined, selectedRowInfo: undefined, isRowGroupColumn: this.adaptableApi.columnApi.isAutoRowGroupColumn(params.column.getColId()) });
+            return {
+                ...this.adaptableApi.internalApi.buildBaseContext(),
+                isSelectedCell: false,
+                isSelectedRow: false,
+                gridCell: undefined,
+                adaptableColumn: undefined,
+                agGridColumn: params.column,
+                rowNode: params.node,
+                isGroupedNode: params.node ? params.node.group : false,
+                isSingleSelectedColumn: false,
+                isSingleSelectedCell: false,
+                primaryKeyValue: undefined,
+                selectedCellInfo: undefined,
+                selectedRowInfo: undefined,
+                isRowGroupColumn: this.adaptableApi.columnApi.isAutoRowGroupColumn(params.column.getColId()),
+            };
         }
-        const clickedCell = this.adaptableInstance.getGridCellFromRowNode(params.node, adaptableColumn.columnId);
+        const clickedCell = this.adaptableApi.gridApi.getGridCellFromRowNode(params.node, adaptableColumn.columnId);
         const selectedCellInfo = this.adaptableApi.gridApi.getSelectedCellInfo();
         if (selectedCellInfo) {
             let matchedCell = selectedCellInfo.gridCells.find((gc) => gc != null &&
@@ -168,28 +199,42 @@ export class AgGridMenuAdapter {
             const matchedPKValue = selectedRowInfo.gridRows.find((gr) => gr != null && gr.primaryKeyValue == clickedCell.primaryKeyValue);
             isSelectedRow = matchedPKValue != null;
         }
-        return Object.assign(Object.assign({}, this.adaptableApi.internalApi.buildBaseContext()), { isSelectedCell: isSelectedCell, isSelectedRow: isSelectedRow, gridCell: clickedCell, adaptableColumn: adaptableColumn, agGridColumn: params.column, rowNode: params.node, isGroupedNode: params.node ? params.node.group : false, isSingleSelectedColumn: isSingleSelectedColumn, isSingleSelectedCell: isSelectedCell && (selectedCellInfo === null || selectedCellInfo === void 0 ? void 0 : selectedCellInfo.gridCells.length) == 1, primaryKeyValue: clickedCell ? clickedCell.primaryKeyValue : undefined, selectedCellInfo: selectedCellInfo, selectedRowInfo: selectedRowInfo, isRowGroupColumn: this.adaptableApi.columnApi.isAutoRowGroupColumn(params.column.getColId()) });
+        return {
+            ...this.adaptableApi.internalApi.buildBaseContext(),
+            isSelectedCell: isSelectedCell,
+            isSelectedRow: isSelectedRow,
+            gridCell: clickedCell,
+            adaptableColumn: adaptableColumn,
+            agGridColumn: params.column,
+            rowNode: params.node,
+            isGroupedNode: params.node ? params.node.group : false,
+            isSingleSelectedColumn: isSingleSelectedColumn,
+            isSingleSelectedCell: isSelectedCell && selectedCellInfo?.gridCells.length == 1,
+            primaryKeyValue: clickedCell ? clickedCell.primaryKeyValue : undefined,
+            selectedCellInfo: selectedCellInfo,
+            selectedRowInfo: selectedRowInfo,
+            isRowGroupColumn: this.adaptableApi.columnApi.isAutoRowGroupColumn(params.column.getColId()),
+        };
     }
     mapAdaptableMenuItemToAgGridMenuDefinition(adaptableMenuItem) {
-        var _a;
-        if (adaptableMenuItem === '-') {
+        if (adaptableMenuItem === MENU_SEPARATOR) {
             return 'separator';
         }
+        const fullMenuItem = adaptableMenuItem;
         return {
-            name: adaptableMenuItem.label,
-            action: adaptableMenuItem.onClick
-                ? adaptableMenuItem.onClick
-                : adaptableMenuItem.reduxAction
-                    ? () => this.adaptableInstance.api.internalApi.dispatchReduxAction(adaptableMenuItem.reduxAction)
+            name: fullMenuItem.label,
+            action: fullMenuItem.onClick
+                ? fullMenuItem.onClick
+                : fullMenuItem.reduxAction
+                    ? () => this.adaptableApi.internalApi.dispatchReduxAction(fullMenuItem.reduxAction)
                     : undefined,
-            icon: this.mapAdaptableIconToAgGridIcon(adaptableMenuItem.icon, {
+            icon: this.mapAdaptableIconToAgGridIcon(fullMenuItem.icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             }),
-            subMenu: (_a = adaptableMenuItem.subItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(subMenuItem)),
+            subMenu: fullMenuItem.subItems?.map((subMenuItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(subMenuItem)),
         };
     }
     mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext) {
-        var _a;
         if (customMenuItem === '-') {
             return 'separator';
         }
@@ -201,7 +246,9 @@ export class AgGridMenuAdapter {
                 }),
                 disabled: customMenuItem.disabled,
                 subMenu: !customMenuItem.disabled
-                    ? (_a = customMenuItem.subMenuItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(subMenuItem, menuContext)).filter(Boolean)
+                    ? customMenuItem.subMenuItems
+                        ?.map((subMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(subMenuItem, menuContext))
+                        .filter(Boolean)
                     : undefined,
             };
         }
@@ -216,7 +263,6 @@ export class AgGridMenuAdapter {
         }
     }
     mapUserMenuItemToAgGridMenuDefinition(userMenuItem, menuContext) {
-        var _a;
         if (userMenuItem.hidden) {
             return;
         }
@@ -227,9 +273,11 @@ export class AgGridMenuAdapter {
                 fill: 'var(--ab-color-text-on-primary)',
             }),
             disabled: userMenuItem.disabled,
-            subMenu: (_a = userMenuItem.subMenuItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => {
+            subMenu: userMenuItem.subMenuItems
+                ?.map((subMenuItem) => {
                 return this.mapCustomMenuItemToAgGridMenuDefinition(subMenuItem, menuContext);
-            }).filter(Boolean),
+            })
+                .filter(Boolean),
         };
     }
     buildContextMenuDefaultStructure(availableMenuItems, menuContext) {
@@ -252,7 +300,7 @@ export class AgGridMenuAdapter {
         // DataImport
         const dataImportMenuItems = this.getModuleSpecificStructure('DataImport', availableMenuItems);
         // Export
-        const exportMenuItems = this.getExportContextMenuStructure(availableMenuItems);
+        const exportMenuItems = this.getModuleSpecificStructure('Export', availableMenuItems);
         // FDC3
         const fdc3MenuItems = this.getModuleSpecificStructure('Fdc3', availableMenuItems);
         // FlashingCell
@@ -275,7 +323,7 @@ export class AgGridMenuAdapter {
         const gridMenuItem = {
             name: 'grid-group',
             label: 'Grid',
-            module: 'Group',
+            category: 'Group',
             isVisible: true,
             icon: {
                 name: 'grid',
@@ -292,7 +340,7 @@ export class AgGridMenuAdapter {
         const editMenuItem = {
             name: 'edit-group',
             label: 'Edit',
-            module: 'Group',
+            category: 'Group',
             isVisible: true,
             icon: {
                 name: 'edit-table',
@@ -323,11 +371,10 @@ export class AgGridMenuAdapter {
      * Hide menu group with no subitems or elevate single subitem to parent level
      */
     normalizeMenuGroup(menuItem) {
-        var _a, _b;
-        if (!((_a = menuItem.subItems) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (!menuItem.subItems?.length) {
             return [];
         }
-        if (((_b = menuItem.subItems) === null || _b === void 0 ? void 0 : _b.length) === 1) {
+        if (menuItem.subItems?.length === 1) {
             return [menuItem.subItems[0]];
         }
         return [menuItem];
@@ -336,59 +383,16 @@ export class AgGridMenuAdapter {
      * Default strategy for menu items: return as is if there is only one item, otherwise group them under a parent item
      */
     getModuleSpecificStructure(module, menuItems, groupName) {
-        const moduleItems = menuItems.filter((menuItem) => menuItem.module === module);
+        const moduleItems = menuItems.filter((menuItem) => menuItem.category === module);
         if (moduleItems.length > 1) {
-            const moduleInfo = this.adaptableInstance.ModuleService.getModuleInfoByModule(module);
             return [this.buildMenuGroupParent(module, moduleItems, { groupName })];
         }
         else {
             return moduleItems;
         }
     }
-    getExportContextMenuStructure(menuItems) {
-        const exportMenuItems = menuItems.filter((menuItem) => menuItem.module === 'Export');
-        if (!exportMenuItems.length) {
-            return [];
-        }
-        const visualReportItems = exportMenuItems.filter((item) => item.name.startsWith('export-visual-data-excel'));
-        const visualDataExportItems = visualReportItems.length
-            ? [
-                this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-visual-data-excel')), {
-                    label: 'Visual Data',
-                    icon: 'export-data',
-                }),
-            ]
-            : [];
-        const allDataExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-all-data')), {
-            label: 'All Data',
-            icon: 'export-data',
-        }));
-        const currentDataExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-current-data')), {
-            label: 'Current Data',
-            icon: 'export-data',
-        }));
-        const selectedCellsExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-selected-cells')), {
-            label: 'Selected Cells',
-            icon: 'export-data',
-        }));
-        const selectedRowsExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-selected-rows')), {
-            label: 'Selected Rows',
-            icon: 'export-data',
-        }));
-        return this.normalizeMenuGroup(this.buildMenuGroupParent('Export', [
-            ...allDataExportItems,
-            ...currentDataExportItems,
-            ...selectedCellsExportItems,
-            ...selectedRowsExportItems,
-            ...visualDataExportItems,
-        ], {
-            label: 'Export',
-            icon: 'export',
-            groupName: 'export-group',
-        }));
-    }
     getLayoutContextMenuStructure(menuItems) {
-        const layoutMenuItems = menuItems.filter((menuItem) => menuItem.module === 'Layout');
+        const layoutMenuItems = menuItems.filter((menuItem) => menuItem.category === 'Layout');
         if (!layoutMenuItems.length) {
             return [[], []];
         }
@@ -402,16 +406,17 @@ export class AgGridMenuAdapter {
         return [gridActionsItems, otherLayoutItems];
     }
     buildMenuGroupParent(module, menuItems, config) {
-        var _a, _b, _c;
-        const moduleInfo = this.adaptableInstance.ModuleService.getModuleInfoByModule(module);
+        const moduleInfo = this.adaptableApi.internalApi
+            .getModuleService()
+            .getModuleInfoByModule(module);
         const icon = config && config.icon === false
             ? undefined
-            : { name: (_a = config === null || config === void 0 ? void 0 : config.icon) !== null && _a !== void 0 ? _a : moduleInfo.Glyph };
+            : { name: config?.icon ?? moduleInfo.Glyph };
         return {
-            name: (_b = config === null || config === void 0 ? void 0 : config.groupName) !== null && _b !== void 0 ? _b : 'menu-group',
-            label: (_c = config === null || config === void 0 ? void 0 : config.label) !== null && _c !== void 0 ? _c : moduleInfo.FriendlyName,
+            name: config?.groupName ?? 'menu-group',
+            label: config?.label ?? moduleInfo.FriendlyName,
             isVisible: true,
-            module: moduleInfo.ModuleName,
+            category: moduleInfo.ModuleName,
             icon,
             subItems: menuItems,
         };
@@ -421,6 +426,8 @@ export class AgGridMenuAdapter {
         const calculatedColumnMenuItems = this.getModuleSpecificStructure('CalculatedColumn', availableMenuItems);
         // CellSummary
         const cellSummaryMenuItems = this.getModuleSpecificStructure('CellSummary', availableMenuItems);
+        // Chart
+        const chartMenuItems = this.getModuleSpecificStructure('Charting', availableMenuItems);
         // ColumnFilter
         const [columnFilterGroup, filterVisibilityItems] = this.getColumnFilterColumnMenuStructure(availableMenuItems);
         // ColumnInfo
@@ -455,7 +462,7 @@ export class AgGridMenuAdapter {
         const gridMenuItem = {
             name: 'grid-group',
             label: 'Grid',
-            module: 'Group',
+            category: 'Group',
             isVisible: true,
             icon: {
                 name: 'grid',
@@ -465,6 +472,7 @@ export class AgGridMenuAdapter {
                 ...filterVisibilityItems,
                 ...gridSelectItems,
                 ...cellSummaryMenuItems,
+                ...chartMenuItems,
                 ...dataImportMenuItems,
                 ...systemStatusMenuItems,
                 ...gridInfoMenuItems,
@@ -487,7 +495,7 @@ export class AgGridMenuAdapter {
         const columnMenuItem = {
             name: 'column-group',
             label: 'Column',
-            module: 'Group',
+            category: 'Group',
             isVisible: true,
             icon: {
                 name: 'columns',
@@ -504,7 +512,7 @@ export class AgGridMenuAdapter {
         const createStyleMenuItem = {
             name: 'styling-group',
             label: 'Styling',
-            module: 'Group',
+            category: 'Group',
             isVisible: true,
             icon: {
                 name: 'brush',
@@ -522,7 +530,7 @@ export class AgGridMenuAdapter {
         ], '-');
     }
     getColumnFilterColumnMenuStructure(menuItems) {
-        const columnFilterMenuItems = menuItems.filter((menuItem) => menuItem.module === 'ColumnFilter');
+        const columnFilterMenuItems = menuItems.filter((menuItem) => menuItem.category === 'ColumnFilter');
         const filterVisibilityItems = columnFilterMenuItems.filter((item) => ['column-filter-bar-hide', 'column-filter-bar-show'].includes(item.name));
         const filterActionItems = columnFilterMenuItems.filter((item) => ['column-filter-clear', 'column-filter-suspend', 'column-filter-unsuspend'].includes(item.name));
         const columnFilterGroup = filterActionItems.length
@@ -530,7 +538,7 @@ export class AgGridMenuAdapter {
                 {
                     name: 'column-filter-group',
                     label: 'Filter',
-                    module: 'ColumnFilter',
+                    category: 'ColumnFilter',
                     isVisible: true,
                     icon: {
                         name: 'filter',
@@ -542,7 +550,7 @@ export class AgGridMenuAdapter {
         return [columnFilterGroup, filterVisibilityItems];
     }
     getLayoutColumnMenuStructure(menuItems) {
-        const layoutMenuItems = menuItems.filter((menuItem) => menuItem.module === 'Layout');
+        const layoutMenuItems = menuItems.filter((menuItem) => menuItem.category === 'Layout');
         if (!layoutMenuItems.length) {
             return [[], [], [], []];
         }
@@ -560,7 +568,7 @@ export class AgGridMenuAdapter {
         return [gridSelectItems, columnSelectItems, columnActionGroup, otherLayoutItems];
     }
     getStyledColumnColumnMenuStructure(menuItems) {
-        const styledColumnMenuItems = menuItems.filter((menuItem) => menuItem.module === 'StyledColumn');
+        const styledColumnMenuItems = menuItems.filter((menuItem) => menuItem.category === 'StyledColumn');
         return styledColumnMenuItems;
     }
     mapAdaptableMenuItemToSystemMenuItems(adaptableMenuItems) {
@@ -573,12 +581,16 @@ export class AgGridMenuAdapter {
             }
             // @ts-ignore
             const subItems = this.mapAdaptableMenuItemToSystemMenuItems(menuItem.subItems);
-            return Object.assign(Object.assign({}, menuItem), { menuType: 'Adaptable', subItems });
+            return {
+                ...menuItem,
+                menuType: 'Adaptable',
+                subItems,
+            };
         });
     }
     createAdaptableColumnMenuItems(menuContext) {
         let columnMenuItems = [];
-        this.adaptableInstance.adaptableModules.forEach((s) => {
+        this.adaptableApi.internalApi.getModules().forEach((s) => {
             let menuItems = s.createColumnMenuItems(menuContext.adaptableColumn);
             if (menuItems) {
                 columnMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
@@ -588,7 +600,7 @@ export class AgGridMenuAdapter {
     }
     // TODO AFL MIG: pretty sure this logic is duplicated in several other places
     mapAdaptableIconToAgGridIcon(adaptableIcon, style) {
-        const icon = this.adaptableInstance.api.userInterfaceApi.internalApi.prepareAdaptableIconDef(adaptableIcon);
+        const icon = this.adaptableApi.userInterfaceApi.internalApi.prepareAdaptableIconDef(adaptableIcon);
         if (isAdaptableElementIcon(icon)) {
             let element = icon.element;
             if (typeof element === 'string') {
@@ -609,7 +621,7 @@ export class AgGridMenuAdapter {
      * This is controlled by the AdaptableAgGrid.embedColumnMenu property
      */
     buildStandaloneColumnHeader(adaptableColumn) {
-        const agGridColumn = this.adaptableInstance.getAgGridColumnForColumnId(adaptableColumn.columnId);
+        const agGridColumn = this._adaptableInstance.getAgGridColumnForColumnId(adaptableColumn.columnId);
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, agGridColumn);
         return this.createAdaptableColumnMenuItems(menuContext);
     }

package/src/agGrid/AgGridOptionsService.d.ts

@@ -1,5 +1,5 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { GridOptions, ManagedGridOptionKey } from '@ag-grid-community/core';
+import { GridOptions, ManagedGridOptionKey } from 'ag-grid-enterprise';
 export declare class AgGridOptionsService {
     private adaptableInstance;
     private gridOptionsPropertyCache;

package/src/agGrid/AgGridOptionsService.js

@@ -38,7 +38,7 @@ export class AgGridOptionsService {
         if (adaptableValue != null) {
             this.gridOptionsPropertyCache.set(adaptableKey, adaptableValue);
         }
-        gridOptions[propertyName] = adaptableValue !== null && adaptableValue !== void 0 ? adaptableValue : userValue;
+        gridOptions[propertyName] = adaptableValue ?? userValue;
         return gridOptions;
     }
     getUserGridOptionsProperty(propertyName) {

package/src/agGrid/FilterWrapper.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { forwardRef, useImperativeHandle, useState } from 'react';
-import { FilterFormReact } from '../View/Components/FilterForm/FilterForm';
+import { AdaptableColumnFilter } from '../View/Components/ColumnFilter/AdaptableColumnFilter';
+import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
 export const FilterWrapperFactory = (adaptable) => {
     function isFilterActive(colId) {
         // we need this here
@@ -8,7 +9,9 @@ export const FilterWrapperFactory = (adaptable) => {
             return false;
         }
         //make the small filter icon to appear when there is a filter
-        return (adaptable.api.columnFilterApi.getColumnFilters().findIndex((x) => x.ColumnId == colId) > -1);
+        return (adaptable.api.filterApi.columnFilterApi
+            .getColumnFilters()
+            .findIndex((x) => x.ColumnId == colId) > -1);
     }
     function getFilterProps(colId, hidePopup) {
         let column = adaptable.api.columnApi.getColumnWithColumnId(colId);
@@ -28,10 +31,8 @@ export const FilterWrapperFactory = (adaptable) => {
             const colId = props.column.getId();
             const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
             const afterGuidAttached = React.useCallback((params) => {
-                var _a;
-                const hidePopup = (_a = params === null || params === void 0 ? void 0 : params.hidePopup) !== null && _a !== void 0 ? _a : null;
+                const hidePopup = params?.hidePopup ?? null;
                 const filterProps = getFilterProps(colId, !!hidePopup);
-                adaptable.hideFilterFormPopup = hidePopup;
                 setFilterProps(filterProps);
             }, [colId]);
             React.useEffect(() => {
@@ -51,7 +52,8 @@ export const FilterWrapperFactory = (adaptable) => {
             if (!column || !filterProps) {
                 return null;
             }
-            return React.createElement("div", { id: getContainerId(colId) }, FilterFormReact(filterProps));
+            return renderWithAdaptableContext(React.createElement("div", { id: getContainerId(colId) },
+                React.createElement(AdaptableColumnFilter, { wrapperProps: { p: 2 }, columnId: filterProps.Column.columnId })), adaptable);
         });
     }
     return class FilterWrapper {
@@ -78,20 +80,20 @@ export const FilterWrapperFactory = (adaptable) => {
             return this.filterContainer;
         }
         afterGuiAttached(params) {
-            var _a, _b;
             //we always unmount first so the autofocus from the form works... in other grids we unmount when hidden
-            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.unmountReactRoot?.();
             let column = adaptable.api.columnApi.getColumnWithColumnId(this.column.getColId());
             if (column) {
-                const hidePopup = (_b = params === null || params === void 0 ? void 0 : params.hidePopup) !== null && _b !== void 0 ? _b : null;
-                const filterProps = getFilterProps(this.column.getColId(), !!hidePopup);
-                adaptable.hideFilterFormPopup = hidePopup;
-                this.unmountReactRoot = adaptable.renderReactRoot(FilterFormReact(filterProps), this.filterContainer);
+                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableColumnFilter, {
+                    columnId: this.column.getColId(),
+                    wrapperProps: { p: 2 },
+                }), adaptable), 
+                // AdaptableColumnFilter(filterProps),
+                this.filterContainer);
             }
         }
         destroy() {
-            var _a;
-            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.unmountReactRoot?.();
             this.filterContainer = null;
         }
     };

package/src/agGrid/FloatingFilterWrapper.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { forwardRef, useImperativeHandle } from 'react';
-import { QuickFilterFormReact } from '../View/Components/FilterForm/QuickFilterForm';
+import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
+import { AdaptableFloatingFilter } from '../View/Components/ColumnFilter/AdaptableFloatingFilter';
 const filterContainerStyle = {
     overflow: 'hidden',
     minWidth: '0',
@@ -42,8 +43,7 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
                 return this.filterContainer;
             }
             destroy() {
-                var _a;
-                (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+                this.unmountReactRoot?.();
                 this.filterContainer = null;
             }
             onParentModelChanged() {
@@ -63,7 +63,8 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
             if (!column) {
                 return null;
             }
-            return (React.createElement("div", { ref: patchParentElement, id: getContainerId(colId), style: filterContainerStyle }, QuickFilterFormReact(getFilterProps(colId))));
+            return renderWithAdaptableContext(React.createElement("div", { ref: patchParentElement, id: getContainerId(colId), style: filterContainerStyle },
+                React.createElement(AdaptableFloatingFilter, { ...getFilterProps(colId) })), adaptable);
         });
     }
     return class FloatingFilterWrapper {
@@ -84,15 +85,14 @@ export const FloatingFilterWrapperFactory = (adaptable) => {
             const column = adaptableApi.columnApi.getColumnWithColumnId(colId);
             if (column) {
                 const filterProps = getFilterProps(colId);
-                this.unmountReactRoot = adaptable.renderReactRoot(QuickFilterFormReact(filterProps), this.filterContainer);
+                this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableFloatingFilter, filterProps), adaptable), this.filterContainer);
             }
         }
         getGui() {
             return this.filterContainer;
         }
         destroy() {
-            var _a;
-            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.unmountReactRoot?.();
             this.filterContainer = null;
         }
     };

package/src/agGrid/agGridDataTypeDefinitions.d.ts

@@ -0,0 +1,8 @@
+import { GridOptions } from 'ag-grid-enterprise';
+import { AdaptableColumnDataType } from '../PredefinedConfig/Common/AdaptableColumn';
+export declare const TEXT_ARRAY_DATA_TYPE: AdaptableColumnDataType;
+export declare const NUMBER_ARRAY_DATA_TYPE: AdaptableColumnDataType;
+export declare const TUPLE_ARRAY_DATA_TYPE: AdaptableColumnDataType;
+export declare const OBJECT_ARRAY_DATA_TYPE: AdaptableColumnDataType;
+export declare const ALL_ADAPTABLE_DATA_TYPES: AdaptableColumnDataType[];
+export declare const agGridDataTypeDefinitions: GridOptions['dataTypeDefinitions'];