@adaptabletools/adaptable 13.0.0-canary.10 → 13.0.0-canary.12

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -39,7 +39,8 @@ const ColumnsSectionSummary = () => {
             const header = (_b = (_a = layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[columnId]) !== null && _b !== void 0 ? _b : '';
             const columnWidth = (_c = layout.ColumnWidthMap) === null || _c === void 0 ? void 0 : _c[columnId];
             const columnPinning = (_d = layout.PinnedColumnsMap) === null || _d === void 0 ? void 0 : _d[columnId];
-            const agg = (_e = layout.AggregationColumns) === null || _e === void 0 ? void 0 : _e[columnId];
+            let agg = (_e = layout.AggregationColumns) === null || _e === void 0 ? void 0 : _e[columnId];
+            agg = typeof agg === 'object' ? agg.type : agg;
             const sortIndex = ((_f = layout === null || layout === void 0 ? void 0 : layout.ColumnSorts) !== null && _f !== void 0 ? _f : []).findIndex((sort) => sort.ColumnId === columnId);
             const sortOrder = sortIndex != -1
                 ? {

package/src/View/PlusMinus/Wizard/PlusMinusRuleWizardSection.js

@@ -36,7 +36,7 @@ function PlusMinusRuleWizardSection(props) {
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex BooleanExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
             useObservableQuery: null,
             useAggregationQuery: null,
         } }));

package/src/agGrid/Adaptable.d.ts

@@ -1,6 +1,6 @@
 import { ChartModel, ChartRef, ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, Module, ModuleNames, RowNode } from '@ag-grid-community/core';
 import { AdaptableNoCodeWizardOptions, IAdaptableNoCodeWizard } from '../AdaptableInterfaces/AdaptableNoCodeWizard';
-import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
+import { AdaptableVariant, IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
 import { AdaptablePlugin } from '../AdaptableOptions/AdaptablePlugin';
 import { AdaptableApi } from '../Api/AdaptableApi';
@@ -40,6 +40,7 @@ declare type RuntimeConfig = {
     waitForAgGrid?: boolean;
     supressReact18RenderWarning?: boolean;
     renderReactRoot?: RenderReactRootFn;
+    variant?: AdaptableVariant;
 };
 export declare class Adaptable implements IAdaptable {
     api: AdaptableApi;
@@ -62,11 +63,13 @@ export declare class Adaptable implements IAdaptable {
     gridOptions: GridOptions;
     isInitialised: boolean;
     hasAdaptableToolPanel: boolean;
+    variant: AdaptableVariant;
     private useRowNodeLookUp;
     private abContainerElement;
     private gridContainerElement;
     private colDefPropertyCache;
     private gridOptionsPropertyCache;
+    private columnMinMaxValuesCache;
     private throttleFilterOnEditDataChange;
     private throttleFilterOnTickingDataChange;
     private agGridHelper;
@@ -388,6 +391,8 @@ export declare class Adaptable implements IAdaptable {
      * When reading the state from the grid, we have to make sure 'avg' is not overriden with the 'avg' string.
      */
     private handleUpdateWeightedAvgFromGrid;
+    resetMinMaxCachedValueForColumn(column: AdaptableColumn): void;
+    getMinMaxCachedValueForColumn(column: AdaptableColumn, minMax: 'min' | 'max'): number;
 }
 export declare class AdaptableNoCodeWizard implements IAdaptableNoCodeWizard {
     private init;

package/src/agGrid/Adaptable.js

@@ -140,8 +140,10 @@ const forEachColumn = (cols, fn, parentColGroup) => {
 const adaptableInstances = {};
 class Adaptable {
     constructor() {
+        this.variant = 'vanilla';
         this.colDefPropertyCache = new Map();
         this.gridOptionsPropertyCache = new Map();
+        this.columnMinMaxValuesCache = {};
         this.isCheckedColumnDataType = false;
         // only for our private / internal events used within Adaptable
         // public events are emitted through the EventApi
@@ -344,7 +346,22 @@ class Adaptable {
         if (runtimeConfig) {
             this.supressReact18RenderWarning = !!runtimeConfig.supressReact18RenderWarning;
             if (runtimeConfig.renderReactRoot) {
-                this.renderReactRoot = runtimeConfig.renderReactRoot;
+                this.renderReactRoot = (el, container) => {
+                    const unmount = runtimeConfig.renderReactRoot(el, container);
+                    return () => {
+                        // we're doing this because of FloatingFilters - in our FloatingFilterWrapper component,
+                        // in the .destroy, we're unmounting, but this is done while aggrid is rendering
+                        // and can't be fixed by us as it's done during an AggridReact rendering operation
+                        // captureReactWarnings();
+                        if (typeof unmount === 'function') {
+                            unmount();
+                        }
+                        // releaseReactWarnings();
+                    };
+                };
+            }
+            if (runtimeConfig.variant) {
+                this.variant = runtimeConfig.variant;
             }
         }
         if (!_staticInit) {
@@ -429,10 +446,12 @@ class Adaptable {
             abColDefCustom: (_f = this.gridOptions.columnTypes.abColDefCustom) !== null && _f !== void 0 ? _f : {},
         });
         if (this.gridOptions.columnTypes.abColDefNumber.cellEditor === undefined) {
-            this.gridOptions.columnTypes.abColDefNumber.cellEditor = AdaptableNumberEditor_1.AdaptableNumberEditor;
+            this.gridOptions.columnTypes.abColDefNumber.cellEditor =
+                this.variant === 'react' ? AdaptableNumberEditor_1.ReactAdaptableNumberEditor : AdaptableNumberEditor_1.AdaptableNumberEditor;
         }
         if (this.gridOptions.columnTypes.abColDefDate.cellEditor === undefined) {
-            this.gridOptions.columnTypes.abColDefDate.cellEditor = AdaptableDateEditor_1.AdaptableDateEditor;
+            this.gridOptions.columnTypes.abColDefDate.cellEditor =
+                this.variant === 'react' ? AdaptableDateEditor_1.ReactAdaptableDateEditor : AdaptableDateEditor_1.AdaptableDateEditor;
         }
         // validate the provided AdaptableOptions
         this.MetamodelService.validateAdaptableOptionsValues();
@@ -1309,7 +1328,7 @@ class Adaptable {
             const colId = customSort.ColumnId;
             if (!layoutColumnsMap[colId]) {
                 // pivot layouts may have no pivot columns, only aggregation columns
-                if (layout.AggregationColumns[colId] == undefined) {
+                if (!layout.AggregationColumns || layout.AggregationColumns[colId] == undefined) {
                     return acc;
                 }
             }
@@ -3697,6 +3716,7 @@ class Adaptable {
                 this.api.freeTextColumnApi.checkFreeTextColumnForDataChange(cellDataChangedInfo);
             }
             this.DataService.CreateDataChangedEvent(cellDataChangedInfo);
+            this.resetMinMaxCachedValueForColumn(cellDataChangedInfo.column);
         });
         // if node is visible then check if need to refresh other columns / whole row if the updating column is:
         // 1. referenced in Conditional Styles that have Expressions (refreshing whole row if Scope is All)
@@ -4364,11 +4384,10 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
     setupRowStyling() {
         // first get the conditional style state
         const conditionalStyles = this.api.conditionalStyleApi.getRowConditionalStyles();
-        const formatColumnsStyles = this.api.formatColumnApi.getRowFormatColumnsWithStyle();
         // Set any Row Styles (i.e. items without a classname)
         this.setGridOptionsProperty('getRowStyle', (userGetRowStyle) => {
             return (params) => {
-                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, params)), this.getFormatColumnRowStyle(formatColumnsStyles, params));
+                const result = Object.assign(Object.assign(Object.assign(Object.assign({}, userGetRowStyle === null || userGetRowStyle === void 0 ? void 0 : userGetRowStyle(params)), this.getRowHighlightStyle(params)), this.getAlertRowStyle(params)), this.getConditionalStyleRowStyle(conditionalStyles, params));
                 return result;
             };
         });
@@ -4382,7 +4401,6 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     highlightClassName,
                     alertHighlightClassName,
                     this.getConditionalStyleRowClass(conditionalStyles.filter((cs) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(cs.Style.ClassName)), params),
-                    this.getFormatColumnRowClass(formatColumnsStyles, params),
                 ]
                     // we flatten it because 'userGetRowClass' might return a string[]
                     .flat()
@@ -4773,6 +4791,31 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
             return acc;
         }, {});
     }
+    resetMinMaxCachedValueForColumn(column) {
+        if (!column) {
+            this.columnMinMaxValuesCache[column.columnId] = {};
+        }
+        if (this.columnMinMaxValuesCache[column.columnId]) {
+            this.columnMinMaxValuesCache[column.columnId] = undefined;
+        }
+    }
+    getMinMaxCachedValueForColumn(column, minMax) {
+        var _a;
+        const { columnId, dataType } = column;
+        if (dataType !== 'Number') {
+            return undefined;
+        }
+        let value = (_a = this.columnMinMaxValuesCache[columnId]) === null || _a === void 0 ? void 0 : _a[minMax];
+        if (value !== undefined) {
+            return value;
+        }
+        const distinctRawValues = this.api.columnApi
+            .getUnsortedDistinctRawValuesForColumn(columnId)
+            .map((item) => item.rawValue);
+        value = minMax === 'min' ? Math.min(...distinctRawValues) : Math.max(...distinctRawValues);
+        this.columnMinMaxValuesCache[columnId] = Object.assign(Object.assign({}, this.columnMinMaxValuesCache[columnId]), { [minMax]: value });
+        return value;
+    }
 }
 exports.Adaptable = Adaptable;
 class AdaptableNoCodeWizard {

package/src/agGrid/FilterWrapper.js

@@ -12,6 +12,10 @@ let FilterWrapperFactory = (adaptable) => {
                 'filter_' + this.params.column.getColId() + '_' + adaptable.adaptableOptions.adaptableId;
         }
         isFilterActive() {
+            // we need this here
+            if (adaptable.isDestroyed) {
+                return false;
+            }
             //make the small filter icon to appear when there is a filter
             return (adaptable.api.filterApi
                 .getColumnFilters()

package/src/agGrid/FloatingFilterWrapper.d.ts

@@ -1,2 +1,2 @@
-import { Adaptable } from './Adaptable';
-export declare const FloatingFilterWrapperFactory: (adaptable: Adaptable) => any;
+import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
+export declare const FloatingFilterWrapperFactory: (adaptable: IAdaptable) => any;

package/src/agGrid/FloatingFilterWrapper.js

@@ -1,43 +1,84 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingFilterWrapperFactory = void 0;
+const tslib_1 = require("tslib");
 const QuickFilterForm_1 = require("../View/Components/FilterForm/QuickFilterForm");
-const FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper {
-    onParentModelChanged(parentModel, filterChangedEvent) {
-        // todo?
-    }
-    afterGuiAttached(params) {
-        // todo: consider theme
-        this.filterContainer.parentElement.style.overflow = 'visible';
-        this.filterContainer.parentElement.parentElement.style.padding = 'var(--ab-space-1)';
+const react_1 = require("react");
+const React = tslib_1.__importStar(require("react"));
+const filterContainerStyle = {
+    overflow: 'hidden',
+    minWidth: '0',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'stretch',
+    position: 'relative',
+};
+const FloatingFilterWrapperFactory = (adaptable) => {
+    function getContainerId(colId) {
+        return `floatingFilter_${colId}_${adaptable.adaptableOptions.adaptableId}`;
     }
-    init(params) {
-        const colId = params.column.getColId();
-        this.filterContainer = document.createElement('div');
-        this.filterContainer.id = `floatingFilter_${colId}_${adaptable.adaptableOptions.adaptableId}`;
-        this.filterContainer.style.overflow = 'hidden';
-        this.filterContainer.style.minWidth = '0';
-        this.filterContainer.style.height = '100%';
-        this.filterContainer.style.display = 'flex';
-        this.filterContainer.style.alignItems = 'stretch';
-        this.filterContainer.style.position = 'relative';
+    function getFilterContext(colId) {
         const column = adaptable.api.columnApi.getColumnFromId(colId);
-        if (column) {
-            const filterContext = {
-                Column: column,
-                Adaptable: adaptable,
-                ShowCloseButton: false,
-            };
-            this.unmountReactRoot = adaptable.renderReactRoot((0, QuickFilterForm_1.QuickFilterFormReact)(filterContext), this.filterContainer);
-        }
+        const filterContext = {
+            Column: column,
+            Adaptable: adaptable,
+            ShowCloseButton: false,
+        };
+        return filterContext;
     }
-    getGui() {
-        return this.filterContainer;
+    function patchParentElement(filterContainer) {
+        // todo: consider theme
+        filterContainer.parentElement.style.overflow = 'visible';
+        filterContainer.parentElement.parentElement.style.padding = 'var(--ab-space-1)';
     }
-    destroy() {
-        var _a;
-        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.filterContainer = null;
+    if (adaptable.variant === 'react') {
+        return (0, react_1.forwardRef)((props, ref) => {
+            const colId = props.column.getId();
+            const column = adaptable.api.columnApi.getColumnFromId(colId);
+            const domRef = (0, react_1.useRef)(null);
+            (0, react_1.useImperativeHandle)(ref, () => {
+                return {
+                    onParentModelChanged() { },
+                };
+            });
+            (0, react_1.useEffect)(() => {
+                patchParentElement(domRef.current);
+            }, []);
+            if (!column) {
+                return null;
+            }
+            return (React.createElement("div", { ref: domRef, id: getContainerId(colId), style: filterContainerStyle }, (0, QuickFilterForm_1.QuickFilterFormReact)(getFilterContext(colId))));
+        });
     }
+    return class FloatingFilterWrapper {
+        onParentModelChanged(parentModel, filterChangedEvent) {
+            // todo?
+        }
+        afterGuiAttached(params) {
+            patchParentElement(this.filterContainer);
+        }
+        init(params) {
+            const colId = params.column.getColId();
+            this.filterContainer = document.createElement('div');
+            this.filterContainer.id = getContainerId(colId);
+            Object.keys(filterContainerStyle).forEach((key) => {
+                //@ts-ignore
+                this.filterContainer.style[key] = filterContainerStyle[key];
+            });
+            const column = adaptable.api.columnApi.getColumnFromId(colId);
+            if (column) {
+                const filterContext = getFilterContext(colId);
+                this.unmountReactRoot = adaptable.renderReactRoot((0, QuickFilterForm_1.QuickFilterFormReact)(filterContext), this.filterContainer);
+            }
+        }
+        getGui() {
+            return this.filterContainer;
+        }
+        destroy() {
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.filterContainer = null;
+        }
+    };
 };
 exports.FloatingFilterWrapperFactory = FloatingFilterWrapperFactory;

package/src/agGrid/agGridHelper.js

@@ -174,7 +174,7 @@ class agGridHelper {
         const customFriendlyName = typeof columnFriendlyName === 'function'
             ? columnFriendlyName({ colId: colId, agColumn: agGridColumn })
             : null;
-        const FriendlyName = customFriendlyName !== null && customFriendlyName !== void 0 ? customFriendlyName : (isActionRowButtonColumn
+        const friendlyName = customFriendlyName !== null && customFriendlyName !== void 0 ? customFriendlyName : (isActionRowButtonColumn
             ? GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME
             : this.gridOptions.columnApi.getDisplayNameForColumn(agGridColumn, 'header'));
         if (!this.initialAgGridColDefs[colId]) {
@@ -183,13 +183,14 @@ class agGridHelper {
         const ColumnId = colId;
         const pkColumn = this.adaptable.adaptableOptions.primaryKey;
         let ColumnGroup = colsToGroups === null || colsToGroups === void 0 ? void 0 : colsToGroups[ColumnId];
+        const dataType = this.getColumnDataType(agGridColumn, false);
         const abColumn = {
             Uuid: (0, Uuid_1.createUuid)(),
             columnId: ColumnId,
             field: colDef.field,
-            friendlyName: FriendlyName,
+            friendlyName: friendlyName,
             isPrimaryKey: ColumnId === pkColumn,
-            dataType: this.getColumnDataType(agGridColumn, false),
+            dataType: dataType,
             visible: agGridColumn.isVisible(),
             readOnly: this.isColumnReadonly(colDef),
             columnGroup: ColumnGroup,
@@ -202,7 +203,7 @@ class agGridHelper {
             aggregationFunction: null,
             moveable: this.isColumnMoveable(colDef),
             hideable: this.isColumnHideable(colDef),
-            queryable: this.isColumnQueryable(colDef, ColumnId),
+            queryable: this.isColumnQueryable(colDef, ColumnId, friendlyName, dataType),
             isGrouped: this.isColumnGrouped(colDef),
             isFixed: this.isColumnFixed(colDef),
             pinned: this.getColumnPinnedPosition(colDef),
@@ -316,21 +317,19 @@ class agGridHelper {
         }
         return true;
     }
-    isColumnQueryable(colDef, columnId) {
+    isColumnQueryable(colDef, columnId, friendlyName, datatype) {
         if (!colDef) {
             return false;
         }
         if (colDef.colId === GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS) {
             return false;
         }
-        const queryableColumns = this.adaptable.api.queryLanguageApi.getQueryableColumnIds();
-        if (ArrayExtensions_1.ArrayExtensions.IsNull(queryableColumns)) {
-            return true;
-        }
-        if (ArrayExtensions_1.ArrayExtensions.IsEmpty(queryableColumns)) {
-            return false;
-        }
-        return queryableColumns.find((qc) => qc == columnId) != null;
+        const abColumnBase = {
+            columnId: columnId,
+            friendlyName: friendlyName,
+            dataType: datatype,
+        };
+        return this.adaptable.api.queryLanguageApi.isColumnQueryable(abColumnBase);
     }
     isColumnHideable(colDef) {
         if (!colDef) {

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

@@ -1,5 +1,9 @@
+import * as React from 'react';
 import { ICellEditorParams, ICellEditorComp } from '@ag-grid-community/core';
 import { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
+export declare const ReactAdaptableDateEditor: React.ForwardRefExoticComponent<ICellEditorParams<any, any> & {
+    showClearButton?: boolean;
+} & React.RefAttributes<unknown>>;
 /**
  * Used by default for all `abColDefDate` columns.
  *
@@ -38,5 +42,4 @@ export declare class AdaptableDateEditor implements ICellEditorComp {
     getAdaptableInstance(params: ICellEditorParams): IAdaptable;
     afterGuiAttached(): void;
     destroy(): void;
-    private shouldClearExistingValue;
 }

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

@@ -1,12 +1,88 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableDateEditor = void 0;
+exports.AdaptableDateEditor = exports.ReactAdaptableDateEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
 const InternalAdaptableDateEditor_1 = require("./InternalAdaptableDateEditor");
 const core_1 = require("@ag-grid-community/core");
 const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
+const react_1 = require("react");
+function shouldClearExistingValue(params) {
+    return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
+}
+function getStartValue(params) {
+    return shouldClearExistingValue(params) ? '' : params.value;
+}
+const style = {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    right: '0px',
+    bottom: '0px',
+};
+const defaultDateValueParser = ({ newValue, oldValue, defaultParser }) => {
+    if ((typeof oldValue === 'string' || oldValue == null) && defaultParser) {
+        return defaultParser(newValue);
+    }
+    return newValue;
+};
+exports.ReactAdaptableDateEditor = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
+    const [initialValue] = (0, react_1.useState)(() => getStartValue(props));
+    const valueRef = (0, react_1.useRef)(initialValue);
+    const colValueParser = props.column.getColDef().valueParser;
+    const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultDateValueParser;
+    const adaptable = props.api.__adaptable;
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            focusIn() {
+                var _a;
+                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            // the final value to send to the grid, on completion of editing
+            getValue() {
+                return valueRef.current;
+            },
+        };
+    });
+    const editorElement = (React.createElement(InternalAdaptableDateEditor_1.InternalAdaptableDateEditor, { defaultValue: initialValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
+            const invalid = isNaN(+value);
+            if (valueParser) {
+                const params = Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value, defaultParser: (value) => {
+                        var _a, _b;
+                        const Pattern = (_b = (_a = adaptable.adaptableOptions.userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.dateInputOptions) === null || _b === void 0 ? void 0 : _b.dateFormat;
+                        if (!Pattern) {
+                            return value;
+                        }
+                        return (0, FormatHelper_1.DateFormatter)(value, {
+                            Pattern,
+                        });
+                    } });
+                valueRef.current = valueParser(params);
+            }
+            else {
+                valueRef.current = invalid ? null : value;
+            }
+            if (!invalid) {
+                requestAnimationFrame(() => {
+                    props.stopEditing();
+                });
+            }
+        }, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, onStopEdit: (keyboardEventKey) => {
+            if (keyboardEventKey === 'Escape') {
+                props.api.stopEditing(true);
+            }
+            else {
+                props.stopEditing();
+            }
+        }, ref: (editor) => {
+            editorRef.current = editor;
+            editor === null || editor === void 0 ? void 0 : editor.focus();
+        } }));
+    return React.createElement("div", { style: style }, (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable));
+});
 /**
  * Used by default for all `abColDefDate` columns.
  *
@@ -32,26 +108,20 @@ const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
  */
 class AdaptableDateEditor {
     constructor() {
-        this.valueParser = ({ newValue, oldValue, defaultParser }) => {
-            if ((typeof oldValue === 'string' || oldValue == null) && defaultParser) {
-                return defaultParser(newValue);
-            }
-            return newValue;
-        };
+        this.valueParser = defaultDateValueParser;
     }
     init(params) {
-        this.value = this.shouldClearExistingValue(params) ? '' : params.value;
+        this.value = getStartValue(params);
         const { valueParser } = params.column.getColDef();
         this.params = params;
         if (typeof valueParser === 'function') {
             this.valueParser = valueParser;
         }
         this.el = document.createElement('div');
-        this.el.style.position = 'absolute';
-        this.el.style.top = '0px';
-        this.el.style.left = '0px';
-        this.el.style.right = '0px';
-        this.el.style.bottom = '0px';
+        Object.keys(style).forEach((key) => {
+            //@ts-ignore
+            this.el.style[key] = style[key];
+        });
     }
     /* Component Editor Lifecycle methods */
     // gets called once when grid ready to insert the element
@@ -75,7 +145,7 @@ class AdaptableDateEditor {
     afterGuiAttached() {
         var _a;
         const adaptable = this.getAdaptableInstance(this.params);
-        const defaultValue = this.shouldClearExistingValue(this.params) ? '' : this.params.value;
+        const defaultValue = 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) {
@@ -116,8 +186,5 @@ class AdaptableDateEditor {
         var _a;
         (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
     }
-    shouldClearExistingValue(params) {
-        return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
-    }
 }
 exports.AdaptableDateEditor = AdaptableDateEditor;

package/src/agGrid/editors/AdaptableNumberEditor/InternalAdaptableNumberEditor.js

@@ -22,7 +22,7 @@ const inputStyle = {
     width: '100%',
     border: 'none',
 };
-exports.InternalAdaptableNumberEditor = React.forwardRef((props, ref) => {
+exports.InternalAdaptableNumberEditor = React.forwardRef(function InternalAdaptableNumberEditorFn(props, ref) {
     var _a;
     const inputRef = React.useRef(null);
     const focus = () => {

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core';
 /**
  * Adaptable number editor parameters extending the AG Grid {@link ICellEditorParams}.
@@ -14,6 +15,7 @@ interface AdaptableNumberCellEditorParams extends ICellEditorParams {
      */
     emptyValue: string;
 }
+export declare const ReactAdaptableNumberEditor: React.ForwardRefExoticComponent<AdaptableNumberCellEditorParams & React.RefAttributes<unknown>>;
 /**
  * Used by default for all `abColDefNumber` columns.
  *
@@ -51,8 +53,5 @@ export declare class AdaptableNumberEditor implements ICellEditorComp {
     afterGuiAttached(): void;
     destroy(): void;
     private onValueChange;
-    private getStartValue;
-    private shouldClearExistingValue;
-    private isValidChar;
 }
 export {};