@adaptabletools/adaptable 10.0.4-canary.0 → 10.0.4-canary.4

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,12 +203,12 @@ 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;
@@ -218,8 +218,8 @@ class agGridHelper {
             columnId: ColumnId,
             friendlyName: FriendlyName,
             isPrimaryKey: ColumnId === pkColumn,
-            dataType: this.getColumnDataType(vendorColumn, false),
-            visible: vendorColumn.isVisible(),
+            dataType: this.getColumnDataType(agGridColumn, false),
+            visible: agGridColumn.isVisible(),
             readOnly: this.isColumnReadonly(colDef),
             columnGroup: ColumnGroup,
             sortable: this.isColumnSortable(colDef),
@@ -245,8 +245,7 @@ class agGridHelper {
             }
         }
         // 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;
@@ -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,
         };

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) {
@@ -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 {};

package/src/agGrid/editors/AdaptableNumberEditor/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 InternalAdaptableNumberEditor_1 = require("./InternalAdaptableNumberEditor");
+const all_modules_1 = require("@ag-grid-community/all-modules");
 /**
  * Used by default for all `abColDefNumber` columns.
  *
@@ -39,7 +40,7 @@ class AdaptableNumberEditor {
         };
     }
     init(params) {
-        this.value = params.value;
+        this.value = this.shouldClearExistingValue(params) ? '' : params.value;
         this.params = params;
         this.columnId = params.column.getColId();
         const { valueParser } = params.column.getColDef();
@@ -71,7 +72,8 @@ class AdaptableNumberEditor {
     afterGuiAttached() {
         var _a, _b;
         const adaptable = this.params.api.__adaptable;
-        const editorElement = (React.createElement(InternalAdaptableNumberEditor_1.InternalAdaptableNumberEditor, { defaultValue: this.params.value, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = this.params.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: this.onValueChange, ref: (editor) => {
+        const defaultValue = this.shouldClearExistingValue(this.params) ? '' : this.params.value;
+        const editorElement = (React.createElement(InternalAdaptableNumberEditor_1.InternalAdaptableNumberEditor, { defaultValue: defaultValue, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = this.params.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: this.onValueChange, ref: (editor) => {
                 this.editor = editor;
                 editor === null || editor === void 0 ? void 0 : editor.focus();
             } }));
@@ -90,5 +92,8 @@ class AdaptableNumberEditor {
     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.AdaptableNumberEditor = AdaptableNumberEditor;

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -20,9 +20,9 @@ function AdaptableFormComponentButtons({ formDef, onClick, defaultTone, disabled
             },
         };
         const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
-        let buttonStyle = api.internalApi.getStyleForButton(button, context ? context : { api: api });
-        let buttonLabel = api.internalApi.getLabelForButton(button, context ? context : { api: api });
-        let buttonTooltip = api.internalApi.getTooltipForButton(button, context ? context : { api: api });
+        let buttonStyle = api.internalApi.getStyleForButton(button, context ? context : { adaptableApi: api });
+        let buttonLabel = api.internalApi.getLabelForButton(button, context ? context : { adaptableApi: api });
+        let buttonTooltip = api.internalApi.getTooltipForButton(button, context ? context : { adaptableApi: api });
         return (React.createElement(SimpleButton_1.default, { autoFocus: index === 0, disabled: disabledButtons[index], key: index, tooltip: buttonTooltip, tone: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _a !== void 0 ? _a : defaultTone, variant: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, "data-text": buttonLabel, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, marginLeft: index ? 2 : 0, onClick: () => {
                 onClick(button);
             } },

package/src/components/Datepicker/Caption.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CaptionProps } from '../../bundle-dependencies/bundles/react-day-picker';
+import { CaptionProps } from 'react-day-picker';
 /**
  * Render the caption of a month, which includes title and navigation buttons.
  * The caption has a different layout when setting the `numberOfMonths` prop.

package/src/components/Datepicker/Caption.js

@@ -5,11 +5,8 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const isSameMonth_1 = tslib_1.__importDefault(require("date-fns/isSameMonth"));
 const add_1 = tslib_1.__importDefault(require("date-fns/add"));
-// because stencil doesn't correctly pick up commonjs at runtime (https://adaptabletools.zendesk.com/agent/tickets/320),
-// and in order to avoid webpack 5 bug (https://github.com/AdaptableTools/adaptable/commit/c66712782f243c515630d57e58e0848a7346cf33)
-// we have to use a bundle and fix the issue once and for all
-const react_day_picker_1 = require("../../bundle-dependencies/bundles/react-day-picker");
 const CaptionLabel_1 = require("./CaptionLabel");
+const react_day_picker_1 = require("react-day-picker");
 /**
  * Render the caption of a month, which includes title and navigation buttons.
  * The caption has a different layout when setting the `numberOfMonths` prop.

package/src/components/Datepicker/CaptionLabel.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CaptionLabelProps } from '../../bundle-dependencies/bundles/react-day-picker';
+import { CaptionLabelProps } from 'react-day-picker';
 export declare function CaptionLabel(props: CaptionLabelProps & {
     onPreviousYearClick?: VoidFunction;
     onPreviousMonthClick?: VoidFunction;

package/src/components/Datepicker/CaptionLabel.js

@@ -3,14 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CaptionLabel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-// because stencil doesn't correctly pick up commonjs at runtime (https://adaptabletools.zendesk.com/agent/tickets/320),
-// and in order to avoid webpack 5 bug (https://github.com/AdaptableTools/adaptable/commit/c66712782f243c515630d57e58e0848a7346cf33)
-// we have to use a bundle and fix the issue once and for all
-const react_day_picker_1 = require("../../bundle-dependencies/bundles/react-day-picker");
 const rebass_1 = require("rebass");
 const format_1 = tslib_1.__importDefault(require("date-fns/format"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const react_1 = require("react");
+const react_day_picker_1 = require("react-day-picker");
 function CaptionLabel(props) {
     const { locale, classNames, styles } = react_day_picker_1.useDayPicker();
     const { onPreviousYearClick, onNextYearClick, onNextMonthClick, onPreviousMonthClick } = props;

package/src/components/Datepicker/DatepickerContext.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 export declare const DatepickerContext: React.Context<{
-    onHide?: VoidFunction;
+    onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;
     showClearButton?: boolean;
 }>;
 export declare const useDatepickerContext: () => {
-    onHide?: VoidFunction;
+    onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;
     showClearButton?: boolean;
 };