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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "13.0.0-canary.11",
+  "version": "13.0.0-canary.12",
   "description": "Powerful data-agnostic HTML5 datagrid add-on that sits on top of an underlying grid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1663671135839;
+declare const _default: 1663690672189;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1663671135839;
+exports.default = 1663690672189;

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -28,6 +28,7 @@ import { IMetamodelService } from '../Utilities/Services/Interface/IMetamodelSer
 import { ColumnValuesComparer } from '../AdaptableOptions/GeneralOptions';
 import { IRowEditService } from '../Utilities/Services/Interface/IRowEditService';
 import { RenderReactRootFn } from '../renderReactRoot';
+export declare type AdaptableVariant = 'vanilla' | 'react' | 'angular';
 /**
  *  The only interface for Adaptable
  *
@@ -36,6 +37,7 @@ import { RenderReactRootFn } from '../renderReactRoot';
  * Should only be used internally as all external access is via the Api
  */
 export interface IAdaptable {
+    variant: AdaptableVariant;
     supressReact18RenderWarning: boolean;
     renderReactRoot: RenderReactRootFn;
     api: AdaptableApi;

package/src/Api/ColumnApi.d.ts

@@ -253,11 +253,17 @@ export interface ColumnApi {
      */
     getDistinctVisibleDisplayValuesForColumn(columnId: string): any[];
     /**
-     * Gets all distinct raw values in Column
+     * Gets all distinct raw values in Column. Values are sorted.
      * @param columnId Column to check
      * @param skipRowNode optional RowNode which should be skipped when collecting the distinct rawValues
      */
     getDistinctRawValuesForColumn(columnId: string, skipRowNode?: RowNode): any[];
+    /**
+     * Gets all distinct raw values in Column. Values are un-sorted.
+     * @param columnId Column to check
+     * @param skipRowNode optional RowNode which should be skipped when collecting the distinct rawValues
+     */
+    getUnsortedDistinctRawValuesForColumn(columnId: string, skipRowNode?: RowNode): any[];
     /**
      * Gets all distinct visible raw values in the Column
      * @param columnId Column to check

package/src/Api/Implementation/ColumnApiImpl.d.ts

@@ -61,6 +61,7 @@ export declare class ColumnApiImpl extends ApiBase implements ColumnApi {
     getDistinctBulkUpdateDisplayValuesForColumn(columnId: string, selectedGridCells: GridCell[]): Promise<any[]>;
     getDistinctVisibleDisplayValuesForColumn(columnId: string): any[];
     getDistinctRawValuesForColumn(columnId: string, skipRowNode?: RowNode): any[];
+    getUnsortedDistinctRawValuesForColumn(columnId: string, skipRowNode?: RowNode): any[];
     getDistinctVisibleRawValuesForColumn(columnId: string): any[];
     private sortDistinctValues;
     getPrimaryKeyColumn(): AdaptableColumn;

package/src/Api/Implementation/ColumnApiImpl.js

@@ -343,11 +343,17 @@ class ColumnApiImpl extends ApiBase_1.ApiBase {
         if (abColumn == undefined) {
             return [];
         }
-        const returnValues = this.adaptable.getDistinctValuesForColumn(abColumn, false, skipRowNode);
-        return this.sortDistinctValues(returnValues, abColumn).map((cv) => {
+        return this.sortDistinctValues(this.getUnsortedDistinctRawValuesForColumn(columnId, skipRowNode), abColumn).map((cv) => {
             return cv.rawValue;
         });
     }
+    getUnsortedDistinctRawValuesForColumn(columnId, skipRowNode) {
+        const abColumn = this.getColumnFromId(columnId);
+        if (abColumn == undefined) {
+            return [];
+        }
+        return this.adaptable.getDistinctValuesForColumn(abColumn, false, skipRowNode);
+    }
     getDistinctVisibleRawValuesForColumn(columnId) {
         const abColumn = this.getColumnFromId(columnId);
         if (abColumn == undefined) {

package/src/Api/Implementation/FormatColumnApiImpl.js

@@ -113,8 +113,7 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
     getColumnFormatColumnsWithStyle(column) {
         const formatColumns = this.getAllFormatColumnWithStyle();
         return this.getFormatColumnInColumnScope(formatColumns, column).filter((scopedFormatColumn) => {
-            return (!this.adaptable.api.scopeApi.scopeIsAll(scopedFormatColumn.Scope) &&
-                this.adaptable.api.scopeApi.isColumnInScope(column, scopedFormatColumn.Scope));
+            return this.adaptable.api.scopeApi.isColumnInScope(column, scopedFormatColumn.Scope);
         });
     }
     getRowFormatColumnsWithStyle() {
@@ -167,8 +166,7 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
             .concat(this.getFormatColumnsWithAllScope(formatColumns));
     }
     getAppropriateFormatColumn(formatColumns, column) {
-        return this.getFormatColumnInColumnScope(formatColumns, column).find((scopedFormatColumn) => !this.adaptable.api.scopeApi.scopeIsAll(scopedFormatColumn.Scope) &&
-            this.adaptable.api.scopeApi.isColumnInScope(column, scopedFormatColumn.Scope));
+        return this.getFormatColumnInColumnScope(formatColumns, column).find((scopedFormatColumn) => this.adaptable.api.scopeApi.isColumnInScope(column, scopedFormatColumn.Scope));
     }
     hasStyleFormatColumns() {
         return ArrayExtensions_1.default.IsNotNullOrEmpty(this.getAllFormatColumnWithStyle());

package/src/View/Components/RangesComponent.js

@@ -54,25 +54,25 @@ class RangesComponent extends React.Component {
             this.state.rangesType == 'Standard' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
                 React.createElement(Tabs_1.Tabs.Tab, null, "Ranges"),
                 React.createElement(Tabs_1.Tabs.Content, null, (_a = this.state.ranges) === null || _a === void 0 ? void 0 :
-                    _a.map((range, index, list) => (React.createElement(React.Fragment, null,
-                        React.createElement(rebass_1.Flex, { mb: 1 },
-                            index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), margin: 0, checked: range.Min === 'Col-Min', mr: 3 }, "Col Min")),
-                            React.createElement(rebass_1.Box, null),
-                            index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMax(range), margin: 0, checked: range.Max === 'Col-Max' }, "Col Max"))),
-                        React.createElement(rebass_1.Flex, { key: index, mb: 2, "data-name": "percent-bar-range" },
+                    _a.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
+                        React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                            index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3 }, "Col Min")),
                             React.createElement(Input_1.default, { type: typeof range.Min == 'number' ? 'number' : 'text', disabled: range.Min === 'Col-Min', value: range.Min, onChange: (event) => {
                                     const { value } = event.target;
                                     this.changeRangeMin(index, value);
-                                }, mr: 2 }),
+                                }, mr: 2 })),
+                        React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                            index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3 }, "Col Max")),
                             React.createElement(Input_1.default, { value: range.Max, type: typeof range.Max == 'number' ? 'number' : 'text', disabled: range.Max === 'Col-Max', onChange: (event) => {
                                     const { value } = event.target;
                                     this.changeRangeMax(index, value);
-                                }, mr: 2 }),
+                                }, mr: 2 })),
+                        React.createElement(rebass_1.Flex, { alignItems: "center", height: "100%" },
                             React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
                                     this.changeRangeColor(index, color);
-                                }, mr: 2, height: "100%" }),
-                            this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
-                            React.createElement(SimpleButton_1.default, { ml: 2, icon: "delete", disabled: this.state.ranges && this.state.ranges.length == 1, onClick: () => this.removeRange(index) }))))),
+                                }, mr: 2, height: 33 })),
+                        this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
+                        React.createElement(SimpleButton_1.default, { ml: 2, mb: 1, icon: "delete", disabled: this.state.ranges && this.state.ranges.length == 1, onClick: () => this.removeRange(index) })))),
                     React.createElement("div", null,
                         React.createElement(SimpleButton_1.default, { variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
             this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },

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

@@ -33,7 +33,7 @@ const AggregationsSectionSummary = () => {
     let content = null;
     if (entires.length) {
         content = (React.createElement(FormLayout_1.default, null, entires.map(([columnId, aggregation]) => (React.createElement(FormLayout_1.FormRow, { key: columnId, label: adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId) },
-            React.createElement(Tag_1.Tag, null, aggregation /* TODO fix for Bogdan */))))));
+            React.createElement(Tag_1.Tag, null, typeof aggregation === 'object' ? aggregation.type : aggregation))))));
     }
     else {
         content = React.createElement(Tag_1.Tag, null, "No Aggregations");

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/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,6 +63,7 @@ export declare class Adaptable implements IAdaptable {
     gridOptions: GridOptions;
     isInitialised: boolean;
     hasAdaptableToolPanel: boolean;
+    variant: AdaptableVariant;
     private useRowNodeLookUp;
     private abContainerElement;
     private gridContainerElement;

package/src/agGrid/Adaptable.js

@@ -140,6 +140,7 @@ const forEachColumn = (cols, fn, parentColGroup) => {
 const adaptableInstances = {};
 class Adaptable {
     constructor() {
+        this.variant = 'vanilla';
         this.colDefPropertyCache = new Map();
         this.gridOptionsPropertyCache = new Map();
         this.columnMinMaxValuesCache = {};
@@ -345,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) {
@@ -430,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();
@@ -1310,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;
                 }
             }
@@ -4366,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;
             };
         });
@@ -4384,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()
@@ -4793,7 +4809,9 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         if (value !== undefined) {
             return value;
         }
-        const distinctRawValues = this.api.columnApi.getDistinctRawValuesForColumn(columnId);
+        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;

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/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 {};