@adaptabletools/adaptable 13.0.0-canary.2 → 13.0.0-canary.20

package/src/agGrid/CheckboxRenderer.js

@@ -30,7 +30,7 @@ const getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     CheckboxRenderer.prototype.checkedHandler = function (e) {
         let checked = e.target.checked;
         this.params.node.setDataValue(columnId, checked);
-        api.formatColumnApi.fireCheckboxColumnClickedEvent(columnId, this.params.node.data, api.gridApi.getPrimaryKeyValueForRowNode(this.params.node), checked);
+        api.styledColumnApi.fireCheckboxColumnClickedEvent(columnId, this.params.node.data, api.gridApi.getPrimaryKeyValueForRowNode(this.params.node), checked);
     };
     CheckboxRenderer.prototype.suppressEditEvent = function (event) {
         if (event.target === this.eGui) {

package/src/agGrid/FilterWrapper.js

@@ -1,26 +1,72 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterWrapperFactory = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const FilterForm_1 = require("../View/Components/FilterForm/FilterForm");
 let FilterWrapperFactory = (adaptable) => {
+    function isFilterActive(colId) {
+        // 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().findIndex((x) => x.ColumnId == colId) > -1;
+    }
+    function getFilterContext(colId, hidePopup) {
+        let column = adaptable.api.columnApi.getColumnFromId(colId);
+        let filterContext = {
+            Column: column,
+            Adaptable: adaptable,
+            ShowCloseButton: hidePopup,
+        };
+        return filterContext;
+    }
+    function getContainerId(colId) {
+        return 'filter_' + colId + '_' + adaptable.adaptableOptions.adaptableId;
+    }
+    if (adaptable.variant === 'react') {
+        return (0, react_1.forwardRef)(function ReactFilterWrapper(props, ref) {
+            const [filterContext, setFilterContext] = (0, react_1.useState)(null);
+            const colId = props.column.getId();
+            const column = adaptable.api.columnApi.getColumnFromId(colId);
+            (0, react_1.useImperativeHandle)(ref, () => {
+                return {
+                    isFilterActive: () => isFilterActive(colId),
+                    afterGuiAttached: (params) => {
+                        var _a;
+                        const hidePopup = (_a = params === null || params === void 0 ? void 0 : params.hidePopup) !== null && _a !== void 0 ? _a : null;
+                        const filterContext = getFilterContext(colId, !!hidePopup);
+                        adaptable.hideFilterFormPopup = hidePopup;
+                        setFilterContext(filterContext);
+                    },
+                    getModel: () => { },
+                    setModel: () => { },
+                    //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
+                    doesFilterPass: () => true,
+                };
+            });
+            if (!column || !filterContext) {
+                return null;
+            }
+            return React.createElement("div", { id: getContainerId(colId) }, (0, FilterForm_1.FilterFormReact)(filterContext));
+        });
+    }
     return class FilterWrapper {
         init(params) {
             this.params = params;
             this.column = params.column;
             this.filterContainer = document.createElement('div');
-            this.filterContainer.id =
-                'filter_' + this.params.column.getColId() + '_' + adaptable.adaptableOptions.adaptableId;
-        }
-        isFilterActive() {
-            //make the small filter icon to appear when there is a filter
-            return (adaptable.api.filterApi
-                .getColumnFilters()
-                .findIndex((x) => x.ColumnId == this.params.column.getColId()) > -1);
+            this.filterContainer.id = getContainerId(this.params.column.getColId());
         }
         doesFilterPass(params) {
             //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
             return true;
         }
+        isFilterActive() {
+            return isFilterActive(this.params.column.getColId());
+        }
         getModel() {
             //
         }
@@ -31,22 +77,20 @@ let FilterWrapperFactory = (adaptable) => {
             return this.filterContainer;
         }
         afterGuiAttached(params) {
-            var _a;
+            var _a, _b;
             //we always unmount first so the autofocus from the form works... in other grids we unmount when hidden
             (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
             let column = adaptable.api.columnApi.getColumnFromId(this.column.getColId());
             if (column) {
-                let filterContext = {
-                    Column: column,
-                    Adaptable: adaptable,
-                    ShowCloseButton: params != null && params.hidePopup != null,
-                };
-                adaptable.hideFilterFormPopup = params ? params.hidePopup : null;
+                const hidePopup = (_b = params === null || params === void 0 ? void 0 : params.hidePopup) !== null && _b !== void 0 ? _b : null;
+                const filterContext = getFilterContext(this.column.getColId(), !!hidePopup);
+                adaptable.hideFilterFormPopup = hidePopup;
                 this.unmountReactRoot = adaptable.renderReactRoot((0, FilterForm_1.FilterFormReact)(filterContext), this.filterContainer);
             }
         }
         destroy() {
-            this.unmountReactRoot();
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
             this.filterContainer = null;
         }
     };

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,82 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingFilterWrapperFactory = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 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 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) {
+        if (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)(function ReactFloatingFilterWrapper(props, ref) {
+            const colId = props.column.getId();
+            const column = adaptable.api.columnApi.getColumnFromId(colId);
+            (0, react_1.useImperativeHandle)(ref, () => {
+                return {
+                    onParentModelChanged() { },
+                };
+            });
+            if (!column) {
+                return null;
+            }
+            return (React.createElement("div", { ref: patchParentElement, id: getContainerId(colId), style: filterContainerStyle }, (0, QuickFilterForm_1.QuickFilterFormReact)(getFilterContext(colId))));
+        });
     }
+    return class FloatingFilterWrapper {
+        onParentModelChanged(parentModel, filterChangedEvent) {
+            // todo?
+        }
+        afterGuiAttached() {
+            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/PercentBarRenderer.d.ts

@@ -1,4 +1,8 @@
-import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
+import { GradientStyle, PercentBarStyle } from '../PredefinedConfig/StyledColumnState';
 import { AdaptableApi } from '../Api/AdaptableApi';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
-export declare const getPercentBarRendererForColumn: (formatColumn: FormatColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;
+export declare const getPercentBarRendererForColumn: (columnStyle: {
+    GradientStyle?: GradientStyle;
+    PercentBarStyle?: PercentBarStyle;
+    CheckBoxStyle?: boolean;
+}, abColumn: AdaptableColumn, api: AdaptableApi) => any;

package/src/agGrid/PercentBarRenderer.js

@@ -4,19 +4,15 @@ exports.getPercentBarRendererForColumn = void 0;
 const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
-const FormatHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/FormatHelper"));
-const getPercentBarRendererForColumn = (formatColumn, abColumn, api) => {
-    var _a;
-    if (!((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle)) {
+const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
+const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
+    if (!columnStyle.PercentBarStyle) {
         return;
     }
     return class PercentBarRenderer {
         init(params) {
-            if (!formatColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
-                return;
-            }
-            const min = api.formatColumnApi.getNumericStyleMinValue(formatColumn.ColumnStyle, abColumn, params.node, params.value);
-            const max = api.formatColumnApi.getNumericStyleMaxValue(formatColumn.ColumnStyle, abColumn, params.node, params.value);
+            const min = api.styledColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
+            const max = api.styledColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
             let value = params.value;
             if (Helper_1.default.objectNotExists(value)) {
                 value = 0;
@@ -24,12 +20,16 @@ const getPercentBarRendererForColumn = (formatColumn, abColumn, api) => {
             const clampedValue = (0, clamp_1.default)(value, min, max);
             const percentageValue = ((clampedValue - min) / (max - min)) * 100;
             let cellBackColor;
-            const percentBarStyle = formatColumn.ColumnStyle.PercentBarStyle;
+            const percentBarStyle = columnStyle.PercentBarStyle;
             if (percentBarStyle.ColumnComparison) {
                 cellBackColor = percentBarStyle.ColumnComparison.Color;
             }
             else {
-                const matchingRange = percentBarStyle.CellRanges.find((r) => r.Min <= clampedValue && r.Max >= clampedValue);
+                const matchingRange = percentBarStyle.CellRanges.find((r) => {
+                    const rMin = r.Min === 'Col-Min' ? min : r.Min;
+                    const rMax = r.Max === 'Col-Max' ? max : r.Max;
+                    return rMin <= clampedValue && rMax >= clampedValue;
+                });
                 if (matchingRange) {
                     cellBackColor = matchingRange.Color;
                 }
@@ -57,12 +57,14 @@ const getPercentBarRendererForColumn = (formatColumn, abColumn, api) => {
                     textEl.className = 'ab-PercentBar__text';
                     textEl.style.lineHeight = '1.2';
                     if (percentBarStyle.CellText.includes('CellValue')) {
-                        if (formatColumn.DisplayFormat) {
-                            const options = formatColumn.DisplayFormat
-                                .Options;
-                            if (options) {
-                                value = FormatHelper_1.default.NumberFormatter(params.value, options);
-                            }
+                        const activeFormatColumnsWithDisplayFormat = api.formatColumnApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+                        const [formatColumn] = api.formatColumnApi.getFormatColumnsRelevantForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node: params.node, value });
+                        if (formatColumn && api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
+                            const options = formatColumn.DisplayFormat.Options;
+                            value = api.formatColumnApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
+                        }
+                        else {
+                            value = (0, FormatHelper_1.NumberFormatter)(value, { FractionDigits: 2 });
                         }
                         textEl.innerText = value;
                     }

package/src/agGrid/agGridHelper.d.ts

@@ -5,7 +5,7 @@ import { AdaptableNodeComparerFunction } from '../PredefinedConfig/Common/Adapta
 import { AdaptableColumnType, AdaptableModule } from '../PredefinedConfig/Common/Types';
 import { IModule } from '../Strategy/Interface/IModule';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
-import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
+import { GradientStyle, PercentBarStyle } from '../PredefinedConfig/StyledColumnState';
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
  * So lets put some of the more obvious 'Helper' functions here
@@ -22,7 +22,11 @@ export declare class agGridHelper {
     setUpModules(): Map<AdaptableModule, IModule>;
     TrySetUpNodeIds(hasAutogeneratedPrimaryKey: boolean): boolean;
     createCheckboxRendererComp(columnId: string, isColumnReadOnly: boolean): ICellRendererFunc | undefined;
-    createPercentBarRendererComp(formatColumn: FormatColumn, abColumn: AdaptableColumn): ICellRendererFunc;
+    createPercentBarRendererComp(columnStyle: {
+        GradientStyle?: GradientStyle;
+        PercentBarStyle?: PercentBarStyle;
+        CheckBoxStyle?: boolean;
+    }, abColumn: AdaptableColumn): ICellRendererFunc;
     getCleanValue(value: string): string | undefined;
     getRenderedValue(colDef: ColDef, valueToRender: any): any;
     createAdaptableColumnFromAgGridColumn(agGridColumn: Column, colsToGroups: Record<string, AdaptableColumnGroup>): AdaptableColumn;

package/src/agGrid/agGridHelper.js

@@ -43,6 +43,7 @@ const StatusBarModule_1 = require("../Strategy/StatusBarModule");
 const GeneralConstants = tslib_1.__importStar(require("../Utilities/Constants/GeneralConstants"));
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
 const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
+const StyledColumnModule_1 = require("../Strategy/StyledColumnModule");
 const tinycolor = require('tinycolor2');
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
@@ -104,6 +105,7 @@ class agGridHelper {
         modules.set(ModuleConstants.SettingsPanelModuleId, new SettingsPanelModule_1.SettingsPanelModule(api));
         modules.set(ModuleConstants.StatusBarModuleId, new StatusBarModule_1.StatusBarModule(api));
         modules.set(ModuleConstants.ChartingModuleId, new ChartingModule_1.ChartingModule(api));
+        modules.set(ModuleConstants.StyledColumnModuleId, new StyledColumnModule_1.StyledColumnModule(api));
         return modules;
     }
     TrySetUpNodeIds(hasAutogeneratedPrimaryKey) {
@@ -150,8 +152,8 @@ class agGridHelper {
     createCheckboxRendererComp(columnId, isColumnReadOnly) {
         return (0, CheckboxRenderer_1.getCheckboxRendererForColumn)(columnId, isColumnReadOnly, this.adaptable.api);
     }
-    createPercentBarRendererComp(formatColumn, abColumn) {
-        return (0, PercentBarRenderer_1.getPercentBarRendererForColumn)(formatColumn, abColumn, this.adaptable.api);
+    createPercentBarRendererComp(columnStyle, abColumn) {
+        return (0, PercentBarRenderer_1.getPercentBarRendererForColumn)(columnStyle, abColumn, this.adaptable.api);
     }
     getCleanValue(value) {
         if (value == null || value == 'null' || value == undefined || value == 'undefined') {
@@ -174,7 +176,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 +185,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 +205,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 +319,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/createAgStatusPanelComponent.d.ts

@@ -9,7 +9,7 @@ export interface StatusPanelProps {
         Key: string;
     };
 }
-export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps['context']) => {
+export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps['context']) => ((props: IStatusPanelParams) => JSX.Element) | {
     new (): {
         params: IStatusPanelParams;
         eGui: HTMLElement;

package/src/agGrid/createAgStatusPanelComponent.js

@@ -5,6 +5,23 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
 const createAgStatusPanelComponent = (component, adaptable, context) => {
+    if (adaptable.variant === 'react') {
+        return (props) => {
+            const children = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(component, {
+                params: props,
+                adaptableApi: adaptable.api,
+                context,
+            }), adaptable);
+            return (React.createElement("div", { className: "ab-StatusBar", ref: (node) => {
+                    if (node) {
+                        // in React rendering, ag-grid renders an additional extra div
+                        // around the status panel container, with className of 'ag-react-container'
+                        // which needs to be stretched in order to fill the status panel
+                        node.parentElement.style.display = 'flex';
+                    }
+                } }, children));
+        };
+    }
     return class StatusBarRenderer {
         init(params) {
             this.params = params;

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.
  *
@@ -28,6 +32,7 @@ export declare class AdaptableDateEditor implements ICellEditorComp {
     private el;
     private params;
     private editor;
+    private unmountReactRoot?;
     private valueParser;
     init(params: ICellEditorParams): void;
     getGui(): HTMLDivElement;
@@ -37,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,13 +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 react_dom_1 = require("react-dom");
 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.
  *
@@ -33,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
@@ -76,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) {
@@ -111,13 +180,11 @@ class AdaptableDateEditor {
                 this.editor = editor;
                 editor === null || editor === void 0 ? void 0 : editor.focus();
             } }));
-        (0, react_dom_1.render)((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
+        this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
     }
     destroy() {
-        (0, react_dom_1.unmountComponentAtNode)(this.el);
-    }
-    shouldClearExistingValue(params) {
-        return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
     }
 }
 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 = () => {