@adaptabletools/adaptable 10.0.2 → 10.0.4-canary.2

package/src/agGrid/agGridHelper.d.ts

@@ -16,10 +16,10 @@ import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
 export declare class agGridHelper {
     private adaptable;
     private gridOptions;
-    private vendorInitialColDefs;
+    private initialAgGridColDefs;
     constructor(adaptable: IAdaptable, gridOptions: GridOptions);
-    getVendorLightThemeName(): string;
-    getVendorDarkThemeName(): string;
+    getAgGridLightThemeName(): string;
+    getAgGridDarkThemeName(): string;
     setUpModules(): Map<AdaptableModule, IModule>;
     TrySetUpNodeIds(): boolean;
     createSparklineCellRendererComp(sparkline: SparklineColumn): ICellRendererFunc | undefined;
@@ -27,7 +27,7 @@ export declare class agGridHelper {
     createNumericStyleRendererFunc(formatColumn: FormatColumn): ICellRendererFunc;
     getCleanValue(value: string): string | undefined;
     getRenderedValue(colDef: ColDef, valueToRender: any): any;
-    createAdaptableColumnFromVendorColumn(vendorColumn: Column, colsToGroups: Record<string, AdaptableColumnGroup>): AdaptableColumn;
+    createAdaptableColumnFromAgGridColumn(agGridColumn: Column, colsToGroups: Record<string, AdaptableColumnGroup>): AdaptableColumn;
     createAdaptableSideBarDefs(showFilterPanel: boolean, showColumnsPanel: boolean): SideBarDef;
     createAdaptableToolPanel(): ToolPanelDef;
     orderToolPanels(toolPanelDefs: (ToolPanelDef | string)[]): void;

package/src/agGrid/agGridHelper.js

@@ -49,17 +49,17 @@ class agGridHelper {
     constructor(adaptable, gridOptions) {
         this.adaptable = adaptable;
         this.gridOptions = gridOptions;
-        this.vendorInitialColDefs = {};
+        this.initialAgGridColDefs = {};
         this.adaptable = adaptable;
         this.gridOptions = gridOptions;
     }
-    getVendorLightThemeName() {
+    getAgGridLightThemeName() {
         // we try not to call these two methods, as we try to detect the default grid
         // theme from the grid container element - users should set their aggrid theme in html, on the container element
         // so we read it from there. if we don't find it there, we'll call this method, as a last resort.
         return 'ag-theme-balham';
     }
-    getVendorDarkThemeName() {
+    getAgGridDarkThemeName() {
         return 'ag-theme-balham-dark';
     }
     setUpModules() {
@@ -74,6 +74,7 @@ class agGridHelper {
         modules.set(ModuleConstants.CellSummaryModuleId, new CellSummaryModule_1.CellSummaryModule(api));
         modules.set(ModuleConstants.ConditionalStyleModuleId, new ConditionalStyleModule_1.ConditionalStyleModule(api));
         modules.set(ModuleConstants.CustomSortModuleId, new CustomSortModule_1.CustomSortModule(api));
+        modules.set(ModuleConstants.DataChangeHistoryModuleId, new DataChangeHistoryModule_1.DataChangeHistoryModule(api));
         modules.set(ModuleConstants.DataSourceModuleId, new DataSourceModule_1.DataSourceModule(api));
         modules.set(ModuleConstants.ExportModuleId, new ExportModule_1.ExportModule(api));
         modules.set(ModuleConstants.FilterModuleId, new FilterModule_1.FilterModule(api));
@@ -92,7 +93,6 @@ class agGridHelper {
         modules.set(ModuleConstants.SystemStatusModuleId, new SystemStatusModule_1.SystemStatusModule(api));
         modules.set(ModuleConstants.ThemeModuleId, new ThemeModule_1.ThemeModule(api));
         modules.set(ModuleConstants.GridInfoModuleId, new GridInfoModule_1.GridInfoModule(api));
-        modules.set(ModuleConstants.DataChangeHistoryModuleId, new DataChangeHistoryModule_1.DataChangeHistoryModule(api));
         return modules;
     }
     TrySetUpNodeIds() {
@@ -203,53 +203,52 @@ class agGridHelper {
         }
         return render({ value: valueToRender }) || '';
     }
-    createAdaptableColumnFromVendorColumn(vendorColumn, colsToGroups) {
-        const colId = vendorColumn.getColId();
-        const colDef = vendorColumn.getColDef();
-        const FriendlyName = this.gridOptions.columnApi.getDisplayNameForColumn(vendorColumn, 'header');
-        if (!this.vendorInitialColDefs[colId]) {
-            this.vendorInitialColDefs[colId] = Object.assign({}, vendorColumn.getUserProvidedColDef());
+    createAdaptableColumnFromAgGridColumn(agGridColumn, colsToGroups) {
+        const colId = agGridColumn.getColId();
+        const colDef = agGridColumn.getColDef();
+        const FriendlyName = this.gridOptions.columnApi.getDisplayNameForColumn(agGridColumn, 'header');
+        if (!this.initialAgGridColDefs[colId]) {
+            this.initialAgGridColDefs[colId] = Object.assign({}, agGridColumn.getUserProvidedColDef());
         }
         const ColumnId = colId;
         const pkColumn = this.adaptable.adaptableOptions.primaryKey;
         let ColumnGroup = colsToGroups === null || colsToGroups === void 0 ? void 0 : colsToGroups[ColumnId];
         const abColumn = {
             Uuid: Uuid_1.createUuid(),
-            ColumnId,
-            FriendlyName,
-            IsPrimaryKey: ColumnId === pkColumn,
-            DataType: this.getColumnDataType(vendorColumn, false),
-            Visible: vendorColumn.isVisible(),
-            ReadOnly: this.isColumnReadonly(colDef),
-            ColumnGroup,
-            Sortable: this.isColumnSortable(colDef),
-            Filterable: this.isColumnFilterable(colDef),
-            Groupable: this.isColumnGroupable(colDef),
-            Pivotable: this.isColumnPivotable(colDef),
-            Aggregatable: this.isColumnAggregetable(colDef),
-            AvailableAggregationFunctions: null,
-            AggregationFunction: null,
-            Moveable: this.isColumnMoveable(colDef),
-            Hideable: this.isColumnHideable(colDef),
-            Queryable: this.isColumnQueryable(colDef, ColumnId),
-            IsGrouped: this.isColumnGrouped(colDef),
-            IsFixed: this.isColumnFixed(colDef),
+            columnId: ColumnId,
+            friendlyName: FriendlyName,
+            isPrimaryKey: ColumnId === pkColumn,
+            dataType: this.getColumnDataType(agGridColumn, false),
+            visible: agGridColumn.isVisible(),
+            readOnly: this.isColumnReadonly(colDef),
+            columnGroup: ColumnGroup,
+            sortable: this.isColumnSortable(colDef),
+            filterable: this.isColumnFilterable(colDef),
+            groupable: this.isColumnGroupable(colDef),
+            pivotable: this.isColumnPivotable(colDef),
+            aggregatable: this.isColumnAggregetable(colDef),
+            availableAggregationFunctions: null,
+            aggregationFunction: null,
+            moveable: this.isColumnMoveable(colDef),
+            hideable: this.isColumnHideable(colDef),
+            queryable: this.isColumnQueryable(colDef, ColumnId),
+            isGrouped: this.isColumnGrouped(colDef),
+            isFixed: this.isColumnFixed(colDef),
             //TODO add IsPinned??
-            IsSparkline: this.adaptable.api.sparklineColumnApi.isSparklineColumn(colId),
-            IsExcludedFromQuickSearch: false,
+            isSparkline: this.adaptable.api.sparklineColumnApi.isSparklineColumn(colId),
+            isExcludedFromQuickSearch: false,
         };
-        if (abColumn.Aggregatable) {
-            abColumn.AvailableAggregationFunctions = this.getColumnAggregationFunctions(colDef);
+        if (abColumn.aggregatable) {
+            abColumn.availableAggregationFunctions = this.getColumnAggregationFunctions(colDef);
             if (typeof colDef.aggFunc === 'string') {
-                abColumn.AggregationFunction = colDef.aggFunc;
+                abColumn.aggregationFunction = colDef.aggFunc;
             }
         }
         // lets set this here one as the function cannot change the result so dont need to run it each time
-        let excludeColumnFromQuickSearch = this.adaptable.adaptableOptions.searchOptions
-            .excludeColumnFromQuickSearch;
+        let excludeColumnFromQuickSearch = this.adaptable.adaptableOptions.searchOptions.excludeColumnFromQuickSearch;
         if (excludeColumnFromQuickSearch) {
             if (excludeColumnFromQuickSearch(abColumn)) {
-                abColumn.IsExcludedFromQuickSearch = true;
+                abColumn.isExcludedFromQuickSearch = true;
             }
         }
         return abColumn;
@@ -286,10 +285,10 @@ class agGridHelper {
     }
     createAdaptableToolPanel() {
         return {
-            id: 'AdaptableToolPanel',
+            id: 'adaptable',
             toolPanel: 'AdaptableToolPanel',
             labelDefault: this.adaptable.adaptableOptions.toolPanelOptions.adaptableToolPanelTitle,
-            labelKey: 'AdaptableToolPanel',
+            labelKey: 'adaptable',
             iconKey: this.adaptable.adaptableOptions.toolPanelOptions.iconKey,
             width: this.adaptable.adaptableOptions.toolPanelOptions.width,
             minWidth: this.adaptable.adaptableOptions.toolPanelOptions.minWidth,
@@ -322,6 +321,7 @@ class agGridHelper {
     }
     fireSelectionChangedEvent() {
         let selectionChangedInfo = {
+            adaptableApi: this.adaptable.api,
             selectedCellInfo: this.adaptable.api.gridApi.getGridState().SelectedCellInfo,
             selectedRowInfo: this.adaptable.api.gridApi.getGridState().SelectedRowInfo,
         };
@@ -435,8 +435,8 @@ class agGridHelper {
         let dataType = Enums_1.DataType.Unknown;
         // get the column type if already in store (and not unknown)
         const existingColumn = this.adaptable.api.columnApi.getColumnFromId(column.getId(), logWarning);
-        if (existingColumn && existingColumn.DataType != Enums_1.DataType.Unknown) {
-            return existingColumn.DataType;
+        if (existingColumn && existingColumn.dataType != Enums_1.DataType.Unknown) {
+            return existingColumn.dataType;
         }
         // check for column type
         const colType = column.getColDef().type;
@@ -574,7 +574,7 @@ class agGridHelper {
         return function compareItemsOfCustomSort(nodeA, nodeB) {
             let firstGroupedColumn = adaptable.getFirstGroupedColumn();
             if (firstGroupedColumn) {
-                const definedColumnComparator = adaptable.getActiveColumnComparator(firstGroupedColumn.ColumnId, adaptable.api.customSortApi.getCustomSortByColumn(firstGroupedColumn.ColumnId), adaptable.api.internalApi.getCustomSortComparer(firstGroupedColumn));
+                const definedColumnComparator = adaptable.getActiveColumnComparator(firstGroupedColumn.columnId, adaptable.api.customSortApi.getCustomSortByColumn(firstGroupedColumn.columnId), adaptable.api.internalApi.getCustomSortComparer(firstGroupedColumn));
                 if (definedColumnComparator) {
                     return definedColumnComparator(nodeA.key, nodeB.key);
                 }
@@ -610,10 +610,10 @@ class agGridHelper {
                 headerFontWeight: headerColStyle.fontWeight,
                 height: Number(headerColStyle.height.replace('px', '')),
                 Columns: this.adaptable.api.columnApi.getColumns().map((col) => {
-                    const headerColumn = document.querySelector(`.ag-header-cell[col-id='${col.ColumnId}']`);
+                    const headerColumn = document.querySelector(`.ag-header-cell[col-id='${col.columnId}']`);
                     const headerColumnStyle = window.getComputedStyle(headerColumn || headerFirstCol, null);
                     return {
-                        columnFriendlyName: col.FriendlyName,
+                        columnFriendlyName: col.friendlyName,
                         width: Number(headerColumnStyle.width.replace('px', '')),
                         textAlign: headerColumnStyle.textAlign,
                     };
@@ -629,10 +629,10 @@ class agGridHelper {
                 fontWeight: firstRowStyle.fontWeight,
                 height: Number(firstRowStyle.height.replace('px', '')),
                 Columns: this.adaptable.api.columnApi.getColumns().map((col) => {
-                    const cellElement = document.querySelector(`.ag-cell[col-id='${col.ColumnId}']`);
+                    const cellElement = document.querySelector(`.ag-cell[col-id='${col.columnId}']`);
                     const headerColumnStyle = window.getComputedStyle(cellElement || firstRow, null);
                     return {
-                        columnFriendlyName: col.FriendlyName,
+                        columnFriendlyName: col.friendlyName,
                         width: Number(headerColumnStyle.width.replace('px', '')),
                         textAlign: headerColumnStyle.textAlign,
                     };

package/src/agGrid/agGridMenuHelper.d.ts

@@ -1,5 +1,5 @@
 import { GridOptions, MenuItemDef, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, GetContextMenuItems, Column } from '@ag-grid-community/all-modules';
-import { AdaptableMenuItem, MenuContext, UserMenuItem } from '../PredefinedConfig/Common/Menu';
+import { AdaptableMenuItem, ColumnMenuContext, ContextMenuContext, UserMenuItem } from '../PredefinedConfig/Common/Menu';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
 import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 export declare class agGridMenuHelper {
@@ -10,20 +10,22 @@ export declare class agGridMenuHelper {
     buildContextMenu(params: GetContextMenuItemsParams, originalgetContextMenuItems: GetContextMenuItems): (string | MenuItemDef)[];
     createRemoveGroupsMenuItem(x: AdaptableMenuItem): MenuItemDef;
     createAgGridMenuDefFromAdaptableMenu(adaptableMenuItem: AdaptableMenuItem): MenuItemDef;
-    createAgGridMenuDefFromUserMenu(menuItem: UserMenuItem, menuContext: MenuContext): MenuItemDef;
-    createAdaptableMenuItemFromUserMenu(menuItem: UserMenuItem, menuContext: MenuContext): AdaptableMenuItem;
-    createVendorGridColumnMenuItems(originalgetMainMenuItems: GetMainMenuItems, params: GetMainMenuItemsParams): (string | MenuItemDef)[] | undefined;
+    createAgGridColumnMenuDefFromUserMenu(menuItem: UserMenuItem<ColumnMenuContext>, menuContext: ColumnMenuContext): MenuItemDef;
+    createAgGridContextMenuDefFromUserMenu(menuItem: UserMenuItem<ContextMenuContext>, menuContext: ContextMenuContext): MenuItemDef;
+    createAdaptableColumnMenuItemFromUserMenu(menuItem: UserMenuItem<ColumnMenuContext>, menuContext: ColumnMenuContext): AdaptableMenuItem;
+    createAgGridColumnMenuItems(originalgetMainMenuItems: GetMainMenuItems, params: GetMainMenuItemsParams): (string | MenuItemDef)[] | undefined;
     createGroupedColumnMenuItem(): MenuItemDef | undefined;
-    createAdaptableColumnMenuItems(adaptableColumn: AdaptableColumn, menuContext: MenuContext): MenuItemDef[];
-    createUserColumnMenuItems(menuContext: MenuContext): MenuItemDef[];
-    createColumnMenuContextObject(adaptableColumn: AdaptableColumn, vendorColumn: Column): MenuContext;
-    createContextMenuContextObject(params: GetContextMenuItemsParams, adaptableColumn: AdaptableColumn): MenuContext;
-    createVendorGridContextMenuItems(originalgetContextMenuItems: GetContextMenuItems, params: GetContextMenuItemsParams): (string | MenuItemDef)[] | undefined;
-    createAdaptableContextMenuItems(menuContext: MenuContext): AdaptableMenuItem[];
-    createAgGridAdaptableContextMenuItems(adaptableMenuItems: AdaptableMenuItem[], menuContext: MenuContext): MenuItemDef[];
-    createAgGridUserContextMenuItems(userContextMenuItems: UserMenuItem[], menuContext: MenuContext): MenuItemDef[];
+    createAdaptableColumnMenuItems(adaptableColumn: AdaptableColumn, menuContext: ColumnMenuContext): MenuItemDef[];
+    createUserColumnMenuItems(menuContext: ColumnMenuContext): MenuItemDef[];
+    createColumnMenuContextObject(adaptableColumn: AdaptableColumn, agGridColumn: Column): ColumnMenuContext;
+    createContextMenuContextObject(params: GetContextMenuItemsParams, adaptableColumn: AdaptableColumn): ContextMenuContext;
+    createAgGridContextMenuItems(originalgetContextMenuItems: GetContextMenuItems, params: GetContextMenuItemsParams): (string | MenuItemDef)[] | undefined;
+    createAdaptableContextMenuItems(menuContext: ContextMenuContext): AdaptableMenuItem[];
+    createAgGridAdaptableContextMenuItems(adaptableMenuItems: AdaptableMenuItem[], menuContext: ContextMenuContext): MenuItemDef[];
+    createAgGridUserContextMenuItems(userContextMenuItems: UserMenuItem<ContextMenuContext>[], menuContext: ContextMenuContext): MenuItemDef[];
     private getAdaptableMenuItemsColumnHeader;
-    private getLabelFromUserMenuItem;
+    private getLabelFromUserColumnMenuItem;
+    private getLabelFromUserContextMenuItem;
     private getUserMenuItemsColumnHeader;
     buildStandaloneColumnHeader(adaptableColumn: AdaptableColumn): AdaptableMenuItem[];
 }

package/src/agGrid/agGridMenuHelper.js

@@ -16,16 +16,15 @@ class agGridMenuHelper {
     buildColumnMenu(params, originalgetMainMenuItems) {
         // couldnt find a way to listen for menu close. There is a Menu Item Select, but you can also close menu from filter and clicking outside menu....
         const colId = params.column.getColId();
-        let vendorGridColumnMenuItems = [];
+        let agGridColumnMenuItems = [];
         let adaptableColumnMenuItems = [];
         let userColumnMenuItems = [];
-        //First get Vendor Grid Column Items
-        vendorGridColumnMenuItems.push(...this.createVendorGridColumnMenuItems(originalgetMainMenuItems, params));
-        let showAdaptableColumnMenu = this.adaptable.adaptableOptions.menuOptions
-            .showAdaptableColumnMenu;
+        //First get Ag Grid Column Items
+        agGridColumnMenuItems.push(...this.createAgGridColumnMenuItems(originalgetMainMenuItems, params));
+        let showAdaptableColumnMenu = this.adaptable.adaptableOptions.menuOptions.showAdaptableColumnMenu;
         let hasAdaptableColumnMenuItems = showAdaptableColumnMenu == null || showAdaptableColumnMenu !== false;
         if (hasAdaptableColumnMenuItems) {
-            vendorGridColumnMenuItems.push('separator');
+            agGridColumnMenuItems.push('separator');
         }
         const adaptableColumn = this.adaptable.api.columnApi.getColumnFromId(colId);
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
@@ -44,7 +43,7 @@ class agGridMenuHelper {
         // Finally get all the User Menu Items
         userColumnMenuItems.push(...this.createUserColumnMenuItems(menuContext));
         const map = {
-            vendor: vendorGridColumnMenuItems,
+            aggrid: agGridColumnMenuItems,
             adaptable: adaptableColumnMenuItems,
             user: userColumnMenuItems,
         };
@@ -53,19 +52,18 @@ class agGridMenuHelper {
         }));
     }
     buildContextMenu(params, originalgetContextMenuItems) {
-        let vendorGridContextMenuItems = [];
+        let agGridContextMenuItems = [];
         let adaptableContextMenuItems = [];
         let userContextMenuItems = [];
-        let showAdaptableContextMenu = this.adaptable.adaptableOptions.menuOptions
-            .showAdaptableContextMenu;
+        let showAdaptableContextMenu = this.adaptable.adaptableOptions.menuOptions.showAdaptableContextMenu;
         let hasAdaptableContextMenuItems = showAdaptableContextMenu == null || showAdaptableContextMenu !== false;
         let userDefinedContextMenuItems = this.adaptable.adaptableOptions.menuOptions.contextMenuItems;
         let hasUserDefinedContextMenuItems = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(userDefinedContextMenuItems);
-        const vendorItems = this.createVendorGridContextMenuItems(originalgetContextMenuItems, params);
-        if (vendorItems) {
-            vendorGridContextMenuItems.push(...vendorItems);
+        const agGridMenuItems = this.createAgGridContextMenuItems(originalgetContextMenuItems, params);
+        if (agGridMenuItems) {
+            agGridContextMenuItems.push(...agGridMenuItems);
             if (hasAdaptableContextMenuItems || hasUserDefinedContextMenuItems) {
-                vendorGridContextMenuItems.push('separator');
+                agGridContextMenuItems.push('separator');
             }
         }
         const adaptableMenuItems = [];
@@ -91,7 +89,7 @@ class agGridMenuHelper {
             }
         }
         const map = {
-            vendor: vendorGridContextMenuItems,
+            aggrid: agGridContextMenuItems,
             adaptable: adaptableContextMenuItems,
             user: userContextMenuItems,
         };
@@ -133,25 +131,40 @@ class agGridMenuHelper {
             subMenu: subMenuItems,
         };
     }
-    createAgGridMenuDefFromUserMenu(menuItem, menuContext) {
+    createAgGridColumnMenuDefFromUserMenu(menuItem, menuContext) {
         const fn = menuItem.onClick;
         const disabled = menuItem.disabled && menuItem.disabled(menuContext);
         return {
-            name: this.getLabelFromUserMenuItem(menuItem, menuContext),
+            name: this.getLabelFromUserColumnMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
             icon: menuItem.icon,
             disabled: disabled,
             subMenu: ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(menuItem.subMenuItems)
                 ? undefined
                 : menuItem.subMenuItems.map((subMenuItem) => {
-                    return this.createAgGridMenuDefFromUserMenu(subMenuItem, menuContext);
+                    return this.createAgGridColumnMenuDefFromUserMenu(subMenuItem, menuContext);
                 }),
         };
     }
-    createAdaptableMenuItemFromUserMenu(menuItem, menuContext) {
+    createAgGridContextMenuDefFromUserMenu(menuItem, menuContext) {
+        const fn = menuItem.onClick;
+        const disabled = menuItem.disabled && menuItem.disabled(menuContext);
+        return {
+            name: this.getLabelFromUserContextMenuItem(menuItem, menuContext),
+            action: () => (fn ? fn(menuContext) : null),
+            icon: menuItem.icon,
+            disabled: disabled,
+            subMenu: ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(menuItem.subMenuItems)
+                ? undefined
+                : menuItem.subMenuItems.map((subMenuItem) => {
+                    return this.createAgGridContextMenuDefFromUserMenu(subMenuItem, menuContext);
+                }),
+        };
+    }
+    createAdaptableColumnMenuItemFromUserMenu(menuItem, menuContext) {
         const fn = menuItem.onClick;
         let adaptableMenuItem = {
-            label: this.getLabelFromUserMenuItem(menuItem, menuContext),
+            label: this.getLabelFromUserColumnMenuItem(menuItem, menuContext),
             reduxAction: null,
             onClick: () => (fn ? fn(menuContext) : null),
             isVisible: true,
@@ -159,7 +172,7 @@ class agGridMenuHelper {
         };
         return adaptableMenuItem;
     }
-    createVendorGridColumnMenuItems(originalgetMainMenuItems, params) {
+    createAgGridColumnMenuItems(originalgetMainMenuItems, params) {
         // if there was an initial implementation we init the list of menu items with this one; otherwise we take the default items
         return originalgetMainMenuItems
             ? originalgetMainMenuItems(params)
@@ -195,26 +208,18 @@ class agGridMenuHelper {
         if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(userColumnMenuItems)) {
             userColumnMenuItems.forEach((userMenuItem) => {
                 // And then convert them into Menu Item Defs
-                let menuItem = this.createAgGridMenuDefFromUserMenu(userMenuItem, menuContext);
+                let menuItem = this.createAgGridColumnMenuDefFromUserMenu(userMenuItem, menuContext);
                 columnMenuItems.push(menuItem);
             });
         }
         return columnMenuItems;
     }
-    createColumnMenuContextObject(adaptableColumn, vendorColumn) {
+    createColumnMenuContextObject(adaptableColumn, agGridColumn) {
         return {
-            gridCell: undefined,
             adaptableColumn: adaptableColumn,
-            vendorColumn: vendorColumn,
-            isSelectedCell: false,
-            isSingleSelectedColumn: false,
-            isGroupedNode: false,
-            rowNode: undefined,
-            primaryKeyValue: undefined,
-            selectedCellInfo: this.adaptable.api.gridApi.getSelectedCellInfo(),
-            selectedRowInfo: this.adaptable.api.gridApi.getSelectedRowInfo(),
+            agGridColumn: agGridColumn,
             adaptableApi: this.adaptable.api,
-            isRowGroupColumn: this.adaptable.api.columnApi.isRowGroupColumn(vendorColumn.getColId()),
+            isRowGroupColumn: this.adaptable.api.columnApi.isRowGroupColumn(agGridColumn.getColId()),
         };
     }
     createContextMenuContextObject(params, adaptableColumn) {
@@ -223,12 +228,12 @@ class agGridMenuHelper {
         let isSelectedCell = false;
         let clickedCell = undefined;
         if (adaptableColumn) {
-            clickedCell = this.adaptable.getGridCellFromRowNode(params.node, adaptableColumn.ColumnId);
+            clickedCell = this.adaptable.getGridCellFromRowNode(params.node, adaptableColumn.columnId);
         }
         let selectedCellInfo = this.adaptable.setSelectedCells();
         if (clickedCell && selectedCellInfo) {
             let matchedCell = selectedCellInfo.gridCells.find((gc) => gc != null &&
-                gc.columnId == clickedCell.columnId &&
+                gc.column == clickedCell.column &&
                 gc.primaryKeyValue == clickedCell.primaryKeyValue);
             isSelectedCell = matchedCell != null;
             if (isSelectedCell) {
@@ -240,7 +245,7 @@ class agGridMenuHelper {
             isSelectedCell: isSelectedCell,
             gridCell: clickedCell,
             adaptableColumn: adaptableColumn,
-            vendorColumn: params.column,
+            agGridColumn: params.column,
             rowNode: params.node,
             isGroupedNode: params.node ? params.node.group : false,
             isSingleSelectedColumn: isSingleSelectedColumn,
@@ -251,7 +256,7 @@ class agGridMenuHelper {
             isRowGroupColumn: this.adaptable.api.columnApi.isRowGroupColumn(params.column.getColId()),
         };
     }
-    createVendorGridContextMenuItems(originalgetContextMenuItems, params) {
+    createAgGridContextMenuItems(originalgetContextMenuItems, params) {
         // if there was an initial implementation we init the list of menu items with this one, otherwise we take default items
         // this allows us to ensure that devs can still create their own agGrid context menu without losing ours
         return originalgetContextMenuItems
@@ -278,8 +283,7 @@ class agGridMenuHelper {
         // here we create agGrid Menu items based on Adaptable Menu Items
         // user has ability to decide whether to show or not
         let contextMenuItems = [];
-        let showAdaptableContextMenu = this.adaptable.adaptableOptions.menuOptions
-            .showAdaptableContextMenu;
+        let showAdaptableContextMenu = this.adaptable.adaptableOptions.menuOptions.showAdaptableContextMenu;
         if (showAdaptableContextMenu == null || showAdaptableContextMenu !== false) {
             adaptableMenuItems.forEach((adaptableMenuItem) => {
                 if (adaptableMenuItem) {
@@ -306,7 +310,7 @@ class agGridMenuHelper {
             return userMenuItem.hidden ? !userMenuItem.hidden(menuContext) : true;
         })
             .forEach((userMenuItem) => {
-            let menuItem = this.createAgGridMenuDefFromUserMenu(userMenuItem, menuContext);
+            let menuItem = this.createAgGridContextMenuDefFromUserMenu(userMenuItem, menuContext);
             contextMenuItems.push(menuItem);
         });
         return contextMenuItems;
@@ -314,8 +318,7 @@ class agGridMenuHelper {
     // method to get all the Adaptable Menu Items - together with running the function where user can choose whether or not to display
     getAdaptableMenuItemsColumnHeader(adaptableColumn, menuContext) {
         const adaptableMenuItems = [];
-        let showAdaptableColumnMenu = this.adaptable.adaptableOptions.menuOptions
-            .showAdaptableColumnMenu;
+        let showAdaptableColumnMenu = this.adaptable.adaptableOptions.menuOptions.showAdaptableColumnMenu;
         let runCheck = showAdaptableColumnMenu == null || showAdaptableColumnMenu !== false;
         //  if (adaptableColumn != null) {
         this.adaptable.modules.forEach((s) => {
@@ -343,10 +346,15 @@ class agGridMenuHelper {
         //  }
         return adaptableMenuItems;
     }
-    getLabelFromUserMenuItem(userMenuItem, menuContext) {
-        return typeof userMenuItem.label === 'function'
-            ? userMenuItem.label(menuContext)
-            : userMenuItem.label;
+    getLabelFromUserColumnMenuItem(userColumnMenuItem, menuContext) {
+        return typeof userColumnMenuItem.label === 'function'
+            ? userColumnMenuItem.label(menuContext)
+            : userColumnMenuItem.label;
+    }
+    getLabelFromUserContextMenuItem(userContextMenuItem, menuContext) {
+        return typeof userContextMenuItem.label === 'function'
+            ? userContextMenuItem.label(menuContext)
+            : userContextMenuItem.label;
     }
     getUserMenuItemsColumnHeader(menuContext) {
         var _a, _b;
@@ -361,7 +369,7 @@ class agGridMenuHelper {
         let userColumnMenuItems = this.getUserMenuItemsColumnHeader(menuContext);
         if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(userColumnMenuItems)) {
             userColumnMenuItems.forEach((userMenuItem) => {
-                let adaptableMenuItem = this.createAdaptableMenuItemFromUserMenu(userMenuItem, menuContext);
+                let adaptableMenuItem = this.createAdaptableColumnMenuItemFromUserMenu(userMenuItem, menuContext);
                 returnMenuItems.push(adaptableMenuItem);
             });
         }

package/src/agGrid/editors/AdaptableDateEditor/InternalAdaptableDateEditor.d.ts

@@ -7,7 +7,7 @@ export declare type InternalAdaptableDateEditorProps = {
     value?: string | Date | number | null;
     dateFormat: string;
     onValueChange?: (value: Date | null) => void;
-    onCancelEdit?: VoidFunction;
+    onStopEdit?: (keyboardEventKey?: string) => void;
     showClearButton?: boolean;
 };
 export declare const InternalAdaptableDateEditor: React.ForwardRefExoticComponent<InternalAdaptableDateEditorProps & React.RefAttributes<InternalAdaptableDateEditorApi>>;

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

@@ -34,9 +34,14 @@ exports.InternalAdaptableDateEditor = React.forwardRef((props, ref) => {
     };
     const [value, setValue] = useProperty_1.default(props, 'value', props.defaultValue, {
         onChange: (value) => {
-            var _a;
-            const date = typeof value === 'string' ? parseISO_1.default(value) : new Date(value);
-            (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, date);
+            var _a, _b;
+            if (value === '' || value == undefined) {
+                (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, null);
+            }
+            else {
+                const date = typeof value === 'string' ? parseISO_1.default(value) : new Date(value);
+                (_b = props.onValueChange) === null || _b === void 0 ? void 0 : _b.call(props, date);
+            }
         },
     });
     React.useImperativeHandle(ref, () => {
@@ -50,12 +55,12 @@ exports.InternalAdaptableDateEditor = React.forwardRef((props, ref) => {
     }, []);
     return (React.createElement("div", { style: hostStyle },
         React.createElement(DatepickerContext_1.DatepickerContext.Provider, { value: {
-                onHide: () => {
+                onHide: (keyboardEventKey) => {
                     var _a;
-                    (_a = props.onCancelEdit) === null || _a === void 0 ? void 0 : _a.call(props);
+                    (_a = props.onStopEdit) === null || _a === void 0 ? void 0 : _a.call(props, keyboardEventKey);
                 },
                 onShow: () => { },
-                showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : false,
+                showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true,
             } },
             React.createElement(AdaptableInput_1.default, { type: 'date', value: stringValue, onChange: onChange, style: inputStyle, ref: inputRef }))));
 });

package/src/agGrid/editors/AdaptableDateEditor/index.d.ts

@@ -9,13 +9,13 @@ import { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
  *   field: 'tradeDate',
  *   type: 'abColDefDate',
  *   cellEditorParams: {
- *     showClearButton: false
+ *     showClearButton: true
  *   }
  * }
  *
  * For now, there is just 1 editor param you can configure:
  *
- * cellEditorParams.showClearButton - defaults to `false` - whether to show the clear button.
+ * cellEditorParams.showClearButton - defaults to `true` - whether to show the clear button.
  *
  * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
  * This is useful because dates can be stored as strings, numbers or Date instances - the value parser will be called with a `Date` instance,
@@ -37,4 +37,5 @@ export declare class AdaptableDateEditor implements ICellEditorComp {
     getAdaptableInstance(params: ICellEditorParams): IAdaptable;
     afterGuiAttached(): void;
     destroy(): void;
+    private shouldClearExistingValue;
 }

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

@@ -6,6 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
 const InternalAdaptableDateEditor_1 = require("./InternalAdaptableDateEditor");
+const all_modules_1 = require("@ag-grid-community/all-modules");
 const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
 /**
  * Used by default for all `abColDefDate` columns.
@@ -16,13 +17,13 @@ const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
  *   field: 'tradeDate',
  *   type: 'abColDefDate',
  *   cellEditorParams: {
- *     showClearButton: false
+ *     showClearButton: true
  *   }
  * }
  *
  * For now, there is just 1 editor param you can configure:
  *
- * cellEditorParams.showClearButton - defaults to `false` - whether to show the clear button.
+ * cellEditorParams.showClearButton - defaults to `true` - whether to show the clear button.
  *
  * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
  * This is useful because dates can be stored as strings, numbers or Date instances - the value parser will be called with a `Date` instance,
@@ -40,7 +41,7 @@ class AdaptableDateEditor {
         };
     }
     init(params) {
-        this.value = params.value;
+        this.value = this.shouldClearExistingValue(params) ? '' : params.value;
         const { valueParser } = params.column.getColDef();
         this.params = params;
         if (typeof valueParser === 'function') {
@@ -75,7 +76,8 @@ class AdaptableDateEditor {
     afterGuiAttached() {
         var _a;
         const adaptable = this.getAdaptableInstance(this.params);
-        const editorElement = (React.createElement(InternalAdaptableDateEditor_1.InternalAdaptableDateEditor, { defaultValue: this.params.value, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
+        const defaultValue = this.shouldClearExistingValue(this.params) ? '' : this.params.value;
+        const editorElement = (React.createElement(InternalAdaptableDateEditor_1.InternalAdaptableDateEditor, { defaultValue: defaultValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
                 const invalid = isNaN(+value);
                 if (this.valueParser) {
                     const params = Object.assign(Object.assign({}, this.params), { oldValue: this.params.value, newValue: value, defaultParser: (value) => {
@@ -98,8 +100,13 @@ class AdaptableDateEditor {
                         this.params.stopEditing();
                     });
                 }
-            }, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : false, onCancelEdit: () => {
-                this.params.stopEditing();
+            }, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, onStopEdit: (keyboardEventKey) => {
+                if (keyboardEventKey === 'Escape') {
+                    this.params.api.stopEditing(true);
+                }
+                else {
+                    this.params.stopEditing();
+                }
             }, ref: (editor) => {
                 this.editor = editor;
                 editor === null || editor === void 0 ? void 0 : editor.focus();
@@ -109,5 +116,8 @@ class AdaptableDateEditor {
     destroy() {
         react_dom_1.unmountComponentAtNode(this.el);
     }
+    shouldClearExistingValue(params) {
+        return params.keyPress === all_modules_1.KeyCode.BACKSPACE || params.keyPress === all_modules_1.KeyCode.DELETE;
+    }
 }
 exports.AdaptableDateEditor = AdaptableDateEditor;

package/src/agGrid/editors/AdaptableNumberEditor/index.d.ts

@@ -50,5 +50,6 @@ export declare class AdaptableNumberEditor implements ICellEditorComp {
     afterGuiAttached(): void;
     destroy(): void;
     private onValueChange;
+    private shouldClearExistingValue;
 }
 export {};