@adaptabletools/adaptable-cjs 18.0.17 → 18.1.0-canary.1

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -92,7 +92,7 @@ const GridFilterExpressionEditor = (props) => {
             },
         } },
         React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
-            React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })),
+            React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })),
             React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, alignItems: "center" },
                 props.onDismiss && (React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
                         props.onDismiss();

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

@@ -12,6 +12,7 @@ const ExpressionEditor_1 = require("../../../../components/ExpressionEditor");
 const ModuleConstants_1 = require("../../../../Utilities/Constants/ModuleConstants");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
 const useGridFilterOptionsForExpressionEditor_1 = require("../../../GridFilter/useGridFilterOptionsForExpressionEditor");
+const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const isGridFiltersValid = (layout, api) => {
     var _a;
     const expression = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression;
@@ -36,9 +37,10 @@ const GridFilterSection = (props) => {
     const expressionEditorProps = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
     const expressionEditorContent = (React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '', onChange: (expression) => {
             props.onChange(Object.assign(Object.assign({}, layout), { GridFilter: Object.assign(Object.assign({}, layout.GridFilter), { Expression: expression }) }));
-        }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })));
+        }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })));
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
         React.createElement(Tabs_1.Tabs.Tab, null, "Grid Filters"),
-        React.createElement(Tabs_1.Tabs.Content, null, expressionEditorContent)));
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(Panel_1.default, null, expressionEditorContent))));
 };
 exports.GridFilterSection = GridFilterSection;

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

@@ -18,6 +18,7 @@ const AdaptableContext_1 = require("../../../AdaptableContext");
 const ValueSelector_1 = require("../../../Components/ValueSelector");
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Utilities_1 = require("./Utilities");
+const SuspendToggleButton_1 = require("../../../Components/Buttons/SuspendToggleButton");
 const areSummaryRowsValid = (layout) => {
     var _a;
     if (!layout.RowSummaries)
@@ -37,7 +38,6 @@ const areSummaryRowsValid = (layout) => {
 exports.areSummaryRowsValid = areSummaryRowsValid;
 const getAvailableExpressionsForColumnType = (columnType, availableScalarExpressions) => {
     const inputType = (0, adaptableQlUtils_1.mapColumnDataTypeToExpressionFunctionType)(columnType);
-    // Object.entries(availableScalarExpressions ?? {})
     return RowSummary_1.summarySupportedExpressions
         .filter((expression) => availableScalarExpressions[expression])
         .map((expression) => {
@@ -86,6 +86,12 @@ const RowSummaryEditor = ({ rowSummary, onChange, availableScalarExpressions, on
     }, [rowSummary.ColumnsMap]);
     return (React.createElement(Panel_1.default, { header: React.createElement(rebass_1.Flex, { style: { width: '100%' } },
             React.createElement(rebass_1.Flex, { flex: 1, alignItems: "center" }, "Row Summary"),
+            React.createElement(rebass_1.Box, { mr: 2 },
+                React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: () => {
+                        onChange(Object.assign(Object.assign({}, rowSummary), { IsSuspended: true }));
+                    }, onUnSuspend: () => {
+                        onChange(Object.assign(Object.assign({}, rowSummary), { IsSuspended: false }));
+                    }, suspendableObject: rowSummary })),
             React.createElement(SimpleButton_1.default, { icon: "delete", onClick: () => {
                     onDelete();
                 } })), p: 2 },

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -32,6 +32,6 @@ const NamedQueryExpressionWizardSection = (props) => {
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
     return (React.createElement(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: false, showQueryBuilder: true, type: 'boolean', module: moduleInfo.ModuleName, value: data.BooleanExpression, onChange: (BooleanExpression) => {
             props.onChange(Object.assign(Object.assign({}, data), { BooleanExpression }));
-        }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }));
+        }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }));
 };
 exports.NamedQueryExpressionWizardSection = NamedQueryExpressionWizardSection;

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -75,7 +75,8 @@ const OnePageAdaptableWizard = (props) => {
 };
 exports.OnePageAdaptableWizard = OnePageAdaptableWizard;
 const OnePageWizardSummary = () => {
-    const { setCurrentSection, sections, data } = (0, OnePageWizards_1.useOnePageWizardContext)();
+    const { sections, data, api } = useOnePageAdaptableWizardContext();
+    const { setCurrentSection } = (0, OnePageWizards_1.useOnePageWizardContext)();
     const renderEdit = (index) => (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: {
             textDecoration: 'underline',
             display: 'inline-block',
@@ -96,7 +97,7 @@ const OnePageWizardSummary = () => {
                 section.title,
                 " ",
                 renderEdit(index)),
-            React.createElement(Tabs_1.Tabs.Content, null, section.renderSummary(data))));
+            React.createElement(Tabs_1.Tabs.Content, null, section.renderSummary(data, api))));
     })
         .filter(Boolean)));
 };

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -2,7 +2,7 @@ import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
 import { ChartRef, Column, GridApi, GridOptions, IRowNode, Module, RowModelType } from '@ag-grid-community/core';
 import { AdaptableLogger } from './AdaptableLogger';
 import { AdaptableApi } from '../Api/AdaptableApi';
-import { DistinctValuesParams, IAdaptable } from '../AdaptableInterfaces/IAdaptable';
+import { DistinctColumnValuesParams, IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { AdaptablePlugin } from '../AdaptableOptions/AdaptablePlugin';
 import { AgGridAdapter } from './AgGridAdapter';
@@ -25,9 +25,8 @@ import { AgGridMenuAdapter } from './AgGridMenuAdapter';
 import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, DataUpdateConfig, GridCell, Layout, ReportData, SelectedCellInfo, SelectedRowInfo } from '../types';
 import { RenderReactRootFn } from '../renderReactRoot';
 import { AgGridOptionsService } from './AgGridOptionsService';
-import { AgGridColumnAdapter } from './AgGridColumnAdapter';
+import { AdaptableVariant, AgGridColumnAdapter } from './AgGridColumnAdapter';
 import { RowEditService } from '../Utilities/Services/RowEditService';
-export type AdaptableVariant = 'vanilla' | 'react' | 'angular';
 export type AdaptableLifecycleState = 'initial' | 'preprocessOptions' | 'initAdaptableState' | 'setupAgGrid' | 'initAgGrid' | 'available' | 'ready' | 'preDestroyed';
 type RenderAgGridFrameworkComponentResult = false | GridApi;
 interface AdaptableInitInternalConfig<TData = any> {
@@ -239,13 +238,12 @@ export declare class AdaptableAgGrid implements IAdaptable {
     autoSizeAllColumns(): void;
     setColumnOrder(VisibleColumnList: string[]): void;
     private getSortedColumnStateForVisibleColumns;
-    getDistinctValuesForColumn(column: AdaptableColumn, distinctValuesParams: DistinctValuesParams): GridCell[];
+    getDistinctValuesForColumn(column: AdaptableColumn, distinctValuesParams: DistinctColumnValuesParams): GridCell[];
     private getGridCellsForPermittedValues;
     private getDistinctGridCellsForColumn;
-    addBlankValueToGridCell(gridCell: GridCell): void;
     private addDistinctColumnValue;
     private getUniqueGridCells;
-    getGridCellsForColumn(columnId: string, includeBlanks?: boolean): GridCell[] | undefined;
+    getGridCellsForColumn(columnId: string, includeBlanks?: boolean, onlyVisibleRows?: boolean): GridCell[] | undefined;
     getRowNodesForPrimaryKeys(primaryKeyValues: any[]): any[];
     getRowNodeByIndex(index: number): IRowNode;
     getAgGridStatusPanels(): import("@ag-grid-community/core").StatusPanelDef[];

package/src/agGrid/AdaptableAgGrid.js

@@ -69,8 +69,6 @@ const Fdc3Module_1 = require("../Strategy/Fdc3Module");
 const GridFilterModule_1 = require("../Strategy/GridFilterModule");
 const NamedQueryModule_1 = require("../Strategy/NamedQueryModule");
 const CommentModule_1 = require("../Strategy/CommentModule");
-const AdaptableNumberEditor_1 = require("./editors/AdaptableNumberEditor");
-const AdaptableDateEditor_1 = require("./editors/AdaptableDateEditor");
 const Helper_1 = require("../Utilities/Helpers/Helper");
 const uuid_1 = require("../components/utils/uuid");
 const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
@@ -93,7 +91,7 @@ const RowEditService_1 = require("../Utilities/Services/RowEditService");
 const weightedAverage_1 = require("./weightedAverage");
 const sortWithOrder_1 = require("../Utilities/sortWithOrder");
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../Utilities/ObjectFactory"));
+const ObjectFactory_1 = tslib_1.__importStar(require("../Utilities/ObjectFactory"));
 const EnvVars_1 = require("../EnvVars");
 const AdaptableUpgradeHelper_1 = require("../migration/AdaptableUpgradeHelper");
 const Modal_1 = require("../components/Modal");
@@ -402,9 +400,16 @@ class AdaptableAgGrid {
         }
         this.lifecycleState = 'ready';
         this.forPlugins((plugin) => plugin.onAdaptableReady(this, this.adaptableOptions));
-        this.api.eventApi.emit('AdaptableReady', {
-            adaptableApi: this.api,
-            agGridApi: this.agGridAdapter.getAgGridApi(),
+        setTimeout(() => {
+            // without the setTimeout, calling autoSizeAllColumns immediately in the onAdaptableReady
+            // does not work. (I prefer setTimeout to rAF, as raf is not running when you switch tabs)
+            //
+            // it also makes it possible to listen to CALCULATED_COLUMN_READY, DASHBOARD_READY, etc.
+            // in onAdaptableReady - without this those event listeners are not triggered
+            this.api.eventApi.emit('AdaptableReady', {
+                adaptableApi: this.api,
+                agGridApi: this.agGridAdapter.getAgGridApi(),
+            });
         });
         perfInitAdaptableAgGrid.end();
         return Promise.resolve(this.api);
@@ -673,10 +678,15 @@ class AdaptableAgGrid {
                 const columnFilters = this.api.columnFilterApi.getActiveColumnFilters();
                 try {
                     if (columnFilters.length > 0) {
+                        const isRowFiltrable = this.api.optionsApi.getColumnFilterOptions().isRowFilterable;
                         for (const columnFilter of columnFilters) {
                             const evaluateFilterOnClient = this.api.expressionApi.internalApi.evaluatePredicatesInAdaptableQL('ColumnFilter', columnFilter, [columnFilter.Predicate]);
                             if (evaluateFilterOnClient) {
                                 // we then assess filters (if running locally)
+                                if (typeof isRowFiltrable === 'function' &&
+                                    !isRowFiltrable(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(this.api)), { rowNode: node, data: node.data }))) {
+                                    return true;
+                                }
                                 if (!this.api.columnFilterApi.internalApi.evaluateColumnFilter(columnFilter, node)) {
                                     return false;
                                 }
@@ -935,37 +945,46 @@ class AdaptableAgGrid {
          */
         // this will have to go/be heavily extended with https://github.com/AdaptableTools/adaptable/issues/2230
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'columnTypes', (original_columnTypes) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a;
             const providedColumnTypes = original_columnTypes || {};
             const gridOptionsColumnTypes = gridOptions.columnTypes || {};
-            const patchedColumnTypes = Object.assign(providedColumnTypes, {
+            const patchedColumnTypes = Object.assign({}, providedColumnTypes, {
                 [GeneralConstants_1.AB_SPECIAL_COLUMN]: {},
                 [GeneralConstants_1.AB_FDC3_COLUMN]: {},
-                abColDefNumber: (_a = gridOptionsColumnTypes.abColDefNumber) !== null && _a !== void 0 ? _a : {},
-                abColDefString: (_b = gridOptionsColumnTypes.abColDefString) !== null && _b !== void 0 ? _b : {},
-                abColDefBoolean: (_c = gridOptionsColumnTypes.abColDefBoolean) !== null && _c !== void 0 ? _c : {},
-                abColDefDate: (_d = gridOptionsColumnTypes.abColDefDate) !== null && _d !== void 0 ? _d : {},
-                abColDefObject: (_e = gridOptionsColumnTypes.abColDefObject) !== null && _e !== void 0 ? _e : {},
-                abColDefCustom: (_f = gridOptionsColumnTypes.abColDefCustom) !== null && _f !== void 0 ? _f : {},
-                abColDefStringArray: (_g = gridOptionsColumnTypes.abColDefStringArray) !== null && _g !== void 0 ? _g : {},
-                abColDefNumberArray: (_h = gridOptionsColumnTypes.abColDefNumberArray) !== null && _h !== void 0 ? _h : {},
-                abColDefTupleNumberArray: (_j = gridOptionsColumnTypes.abColDefTupleNumberArray) !== null && _j !== void 0 ? _j : {},
-                abColDefObjectNumberArray: (_k = gridOptionsColumnTypes.abColDefObjectNumberArray) !== null && _k !== void 0 ? _k : {},
+                abColDefNumber: Object.assign({}, gridOptionsColumnTypes.abColDefNumber),
+                abColDefString: Object.assign({}, gridOptionsColumnTypes.abColDefString),
+                abColDefBoolean: Object.assign({}, gridOptionsColumnTypes.abColDefBoolean),
+                abColDefDate: Object.assign({}, gridOptionsColumnTypes.abColDefDate),
+                abColDefObject: Object.assign({}, gridOptionsColumnTypes.abColDefObject),
+                abColDefCustom: Object.assign({}, gridOptionsColumnTypes.abColDefCustom),
+                abColDefStringArray: Object.assign({}, gridOptionsColumnTypes.abColDefStringArray),
+                abColDefNumberArray: Object.assign({}, gridOptionsColumnTypes.abColDefNumberArray),
+                abColDefTupleNumberArray: Object.assign({}, gridOptionsColumnTypes.abColDefTupleNumberArray),
+                abColDefObjectNumberArray: Object.assign({}, gridOptionsColumnTypes.abColDefObjectNumberArray),
             });
-            const customColumnTypes = (_l = this.api.columnApi.getColumnTypes()) !== null && _l !== void 0 ? _l : [];
+            const customColumnTypes = (_a = this.api.columnApi.getColumnTypes()) !== null && _a !== void 0 ? _a : [];
             for (const customColumnType of customColumnTypes) {
                 if (!patchedColumnTypes[customColumnType]) {
                     patchedColumnTypes[customColumnType] = {};
                 }
             }
-            if (patchedColumnTypes.abColDefNumber.cellEditor == undefined) {
-                patchedColumnTypes.abColDefNumber.cellEditor =
-                    this.variant === 'react' ? AdaptableNumberEditor_1.ReactAdaptableNumberEditor : AdaptableNumberEditor_1.AdaptableNumberEditor;
-            }
-            if (patchedColumnTypes.abColDefDate.cellEditor == undefined) {
-                patchedColumnTypes.abColDefDate.cellEditor =
-                    this.variant === 'react' ? AdaptableDateEditor_1.ReactAdaptableDateEditor : AdaptableDateEditor_1.AdaptableDateEditor;
-            }
+            const colTypesToEditors = (0, AgGridColumnAdapter_1.getEditorsForColumnTypes)(this.variant);
+            // we used to patch here the column types
+            // and have the editors for abColDefNumber and abColDefDate set here
+            // but AG Grid seems to have a bug where if we have a custom editor
+            // for a specific number column, it's applied to all abColDefNumber columns, because they
+            // share the same column type
+            // so we're now doing this logic in AgGridColumnAdaptapter.setupColumnCellEditor
+            // and instead, here we're just assigning the editor to null
+            // because if we don't assign to null, the default that AG Grid provides
+            // will be used instead, and we don't want that for those column types
+            Object.keys(colTypesToEditors).forEach((colType) => {
+                if (patchedColumnTypes[colType].cellEditor == undefined) {
+                    patchedColumnTypes[colType].cellEditor = null; // colTypesToEditors[colType];
+                    // if you dont believe me, just put colTypesToEditors[colType] in the line above instead of the null value
+                    // and see the editing/percentage-editor.spec.ts test fail as it wont be using the correct editor
+                }
+            });
             return patchedColumnTypes;
         });
         /**
@@ -2294,13 +2313,10 @@ class AdaptableAgGrid {
     }
     getDistinctGridCellsForColumn(column, distinctValuesParams) {
         let gridCells = [];
-        if (distinctValuesParams.visibleRowsOnly) {
+        if (distinctValuesParams.visibleRowsOnly === true) {
             this.agGridAdapter.getAgGridApi().forEachNodeAfterFilter((rowNode) => {
                 const gridCell = this.addDistinctColumnValue(rowNode, column.columnId);
                 if (gridCell && gridCell.rowNode !== distinctValuesParams.skipRowNode) {
-                    if (gridCell.rawValue == undefined && distinctValuesParams.addBlankValue) {
-                        this.addBlankValueToGridCell(gridCell);
-                    }
                     gridCells.push(gridCell);
                 }
             });
@@ -2309,20 +2325,12 @@ class AdaptableAgGrid {
             this.agGridAdapter.getAgGridApi().forEachNode((rowNode) => {
                 const gridCell = this.addDistinctColumnValue(rowNode, column.columnId);
                 if (gridCell && gridCell.rowNode !== distinctValuesParams.skipRowNode) {
-                    if (gridCell.rawValue == undefined && distinctValuesParams.addBlankValue) {
-                        this.addBlankValueToGridCell(gridCell);
-                    }
                     gridCells.push(gridCell);
                 }
             });
         }
         return gridCells;
     }
-    addBlankValueToGridCell(gridCell) {
-        gridCell.rawValue = GeneralConstants_1.BLANK_DISTINCT_COLUMN_VALUE;
-        gridCell.displayValue = GeneralConstants_1.BLANK_DISTINCT_COLUMN_VALUE;
-        gridCell.normalisedValue = GeneralConstants_1.BLANK_DISTINCT_COLUMN_VALUE;
-    }
     addDistinctColumnValue(rowNode, columnId) {
         // we do not return the values of the aggregates when in grouping mode
         // otherwise they would appear in the filter dropdown etc....
@@ -2349,9 +2357,9 @@ class AdaptableAgGrid {
         }
         return uniqueVals.slice(0, this.api.columnFilterApi.internalApi.getFilterValuesMaxNumberOfItems(column));
     }
-    getGridCellsForColumn(columnId, includeBlanks = false) {
+    getGridCellsForColumn(columnId, includeBlanks = false, onlyVisibleRows = false) {
         let returnValues = [];
-        this.agGridAdapter.getAgGridApi().forEachNode((rowNode) => {
+        const handler = (rowNode) => {
             const gridCell = this.getGridCellFromRowNode(rowNode, columnId);
             if (gridCell) {
                 if (gridCell.rawValue == undefined || gridCell.rawValue == null) {
@@ -2363,7 +2371,13 @@ class AdaptableAgGrid {
                     returnValues.push(gridCell);
                 }
             }
-        });
+        };
+        if (onlyVisibleRows) {
+            this.agGridAdapter.getAgGridApi().forEachNodeAfterFilter(handler);
+        }
+        else {
+            this.agGridAdapter.getAgGridApi().forEachNode(handler);
+        }
         return returnValues;
     }
     getRowNodesForPrimaryKeys(primaryKeyValues) {
@@ -2694,6 +2708,16 @@ class AdaptableAgGrid {
         return 'ag-theme-balham';
     }
     applyAdaptableTheme(theme) {
+        const container = this.getAgGridContainerElement();
+        if (container != null) {
+            container.classList.add('ab-Grid');
+            if (this.adaptableOptions.columnFilterOptions.indicateFilteredColumns) {
+                container.classList.add('ab-Grid--indicate-filtered-columns');
+            }
+        }
+        if (this._isDetailGrid) {
+            return;
+        }
         theme = this.ThemeService.mapOsTheme(theme);
         const themeName = typeof theme === 'string' ? theme : theme.Name;
         const isSystemTheme = this.api.themeApi.internalApi.isSystemTheme(themeName);
@@ -2748,7 +2772,6 @@ class AdaptableAgGrid {
             el.classList.add(`infinite-${variantTheme}`);
         }
         // AG THEME CLASS NAME
-        const container = this.getAgGridContainerElement();
         const getAgGridLightThemeName = () => this.getAgGridLightThemeName();
         const getAgGridDarkThemeName = () => getAgGridLightThemeName() + '-dark';
         if (newTheme && (isSystemTheme || variantTheme)) {
@@ -2782,10 +2805,6 @@ class AdaptableAgGrid {
             if (newTheme && newTheme.AgGridClassName) {
                 container.classList.add(newTheme.AgGridClassName);
             }
-            container.classList.add('ab-Grid');
-            if (this.adaptableOptions.columnFilterOptions.indicateFilteredColumns) {
-                container.classList.add('ab-Grid--indicate-filtered-columns');
-            }
         }
         // MAC LIKE SCROLLBARS
         if (this.adaptableOptions.userInterfaceOptions &&

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -1,10 +1,13 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
 import { ColumnSetupInfo } from './ColumnSetupInfo';
 import { ColDef, Column } from '@ag-grid-community/core';
+export type AdaptableVariant = 'vanilla' | 'react' | 'angular';
+export declare function getEditorsForColumnTypes(variant: AdaptableVariant): Record<string, ColDef['cellEditor']>;
 export declare class AgGridColumnAdapter {
     private adaptableInstance;
     private colDefPropertyCache;
     constructor(adaptableInstance: AdaptableAgGrid);
+    private getVariant;
     destroy(): void;
     private get adaptableApi();
     private get adaptableOptions();

package/src/agGrid/AgGridColumnAdapter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AgGridColumnAdapter = void 0;
+exports.AgGridColumnAdapter = exports.getEditorsForColumnTypes = void 0;
 const tslib_1 = require("tslib");
 const core_1 = require("ag-grid-community");
 const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
@@ -14,11 +14,23 @@ const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
 const BadgeRenderer_1 = require("./BadgeRenderer");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
+const AdaptableNumberEditor_1 = require("./editors/AdaptableNumberEditor");
+const AdaptableDateEditor_1 = require("./editors/AdaptableDateEditor");
+function getEditorsForColumnTypes(variant) {
+    return {
+        abColDefNumber: variant === 'react' ? AdaptableNumberEditor_1.AdaptableReactNumberEditor : AdaptableNumberEditor_1.AdaptableNumberEditor,
+        abColDefDate: variant === 'react' ? AdaptableDateEditor_1.AdaptableReactDateEditor : AdaptableDateEditor_1.AdaptableDateEditor,
+    };
+}
+exports.getEditorsForColumnTypes = getEditorsForColumnTypes;
 class AgGridColumnAdapter {
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
         this.colDefPropertyCache = new Map();
     }
+    getVariant() {
+        return this.adaptableInstance.variant;
+    }
     destroy() {
         this.adaptableInstance = null;
         this.colDefPropertyCache.clear();
@@ -183,6 +195,17 @@ class AgGridColumnAdapter {
             if (editLookUpItem) {
                 return hasRichSelectCellEditor ? 'agRichSelectCellEditor' : 'agSelectCellEditor';
             }
+            else {
+                const colDef = col.getColDef();
+                if (colDef.cellEditor) {
+                    return colDef.cellEditor;
+                }
+                const columnTypeToCellEditor = getEditorsForColumnTypes(this.getVariant());
+                return (adaptableColumn.columnTypes || []).reduce((cellEditor, colType) => {
+                    var _a;
+                    return (_a = columnTypeToCellEditor[colType]) !== null && _a !== void 0 ? _a : cellEditor;
+                }, undefined);
+            }
         });
         this.setColDefProperty(col, 'cellEditorPopup', () => {
             // as specified in https://www.ag-grid.com/react-data-grid/provided-cell-editors/#rich-select-cell-editor

package/src/agGrid/AgGridMenuAdapter.js

@@ -320,7 +320,7 @@ class AgGridMenuAdapter {
             ...this.normalizeMenuGroup(editMenuItem),
             '-',
             ...this.normalizeMenuGroup(gridMenuItem),
-            ...columnInfoMenuItems
+            ...columnInfoMenuItems,
         ], '-');
     }
     /**

package/src/agGrid/FilterWrapper.js

@@ -31,16 +31,21 @@ const FilterWrapperFactory = (adaptable) => {
             const [filterProps, setFilterProps] = (0, react_1.useState)(null);
             const colId = props.column.getId();
             const column = adaptable.api.columnApi.getColumnWithColumnId(colId);
+            const afterGuidAttached = React.useCallback((params) => {
+                var _a;
+                const hidePopup = (_a = params === null || params === void 0 ? void 0 : params.hidePopup) !== null && _a !== void 0 ? _a : null;
+                const filterProps = getFilterProps(colId, !!hidePopup);
+                adaptable.hideFilterFormPopup = hidePopup;
+                setFilterProps(filterProps);
+            }, [colId]);
+            React.useEffect(() => {
+                afterGuidAttached();
+            }, []);
             (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 filterProps = getFilterProps(colId, !!hidePopup);
-                        adaptable.hideFilterFormPopup = hidePopup;
-                        setFilterProps(filterProps);
-                    },
+                    // left here for backward compatibility
+                    afterGuidAttached,
                     getModel: () => { },
                     setModel: () => { },
                     //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....

package/src/agGrid/defaultAdaptableOptions.js

@@ -193,10 +193,10 @@ const DefaultAdaptableOptions = {
             valuesFilterTrigger: 'mouseenter',
             sortValuesFilter: false,
             filterValuesUsingTime: false,
-            showDistinctFilteredValuesOnly: false,
+            showCurrentlyFilteredValuesOnly: false,
             maxFilterValuesToDisplay: undefined,
-            includeBlankFilterValues: false,
             showValuesCount: undefined,
+            valuesFilterPredicateOptions: undefined,
         },
         indicateFilteredColumns: true,
         useAdaptableColumnFiltering: true,

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

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

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

@@ -26,7 +26,6 @@ const inputStyle = {
     border: 'none',
 };
 exports.InternalAdaptableDateEditor = React.forwardRef((props, ref) => {
-    var _a;
     const inputRef = React.useRef(null);
     const focus = () => {
         var _a;
@@ -60,7 +59,6 @@ exports.InternalAdaptableDateEditor = React.forwardRef((props, ref) => {
                     (_a = props.onStopEdit) === null || _a === void 0 ? void 0 : _a.call(props, keyboardEventKey);
                 },
                 onShow: () => { },
-                showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true,
             } },
             React.createElement(AdaptableInput_1.default, { type: 'date', value: stringValue, onChange: onChange, style: inputStyle, ref: inputRef }))));
 });

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

@@ -1,25 +1,13 @@
 import * as React from 'react';
 import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core';
 import { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
-export declare const ReactAdaptableDateEditor: React.ForwardRefExoticComponent<ICellEditorParams<any, any, any> & {
-    showClearButton?: boolean;
-} & React.RefAttributes<unknown>>;
+export interface AdaptableDateEditorParams extends ICellEditorParams {
+    onValueChange?: (value: any) => void;
+}
+export declare const AdaptableReactDateEditor: React.ForwardRefExoticComponent<AdaptableDateEditorParams & React.RefAttributes<unknown>>;
 /**
  * Used by default for all `abColDefDate` columns.
  *
- * You can configure it by specifying `cellEditorParams` in the colDef:
- *
- * colDef {
- *   field: 'tradeDate',
- *   type: 'abColDefDate',
- *   cellEditorParams: {
- *     showClearButton: true
- *   }
- * }
- *
- * For now, there is just 1 editor param you can configure:
- *
- * cellEditorParams.showClearButton - defaults to `true` - whether to show the clear button.
  *
  * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
  * This is useful because dates can be stored as strings, numbers or Date instances - the value parser will be called with a `Date` instance,

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableDateEditor = exports.ReactAdaptableDateEditor = void 0;
+exports.AdaptableDateEditor = exports.AdaptableReactDateEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
@@ -27,8 +27,7 @@ const defaultDateValueParser = ({ newValue, oldValue, defaultParser }) => {
     }
     return newValue;
 };
-exports.ReactAdaptableDateEditor = (0, react_1.forwardRef)((props, ref) => {
-    var _a;
+exports.AdaptableReactDateEditor = (0, react_1.forwardRef)((props, ref) => {
     const [initialValue] = (0, react_1.useState)(() => getStartValue(props));
     const valueRef = (0, react_1.useRef)(initialValue);
     const colValueParser = props.column.getColDef().valueParser;
@@ -48,6 +47,7 @@ exports.ReactAdaptableDateEditor = (0, react_1.forwardRef)((props, ref) => {
         };
     });
     const editorElement = (React.createElement(InternalAdaptableDateEditor_1.InternalAdaptableDateEditor, { defaultValue: initialValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
+            var _a;
             const invalid = isNaN(+value);
             if (valueParser) {
                 const params = Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value, defaultParser: (value) => {
@@ -62,6 +62,7 @@ exports.ReactAdaptableDateEditor = (0, react_1.forwardRef)((props, ref) => {
                     } });
                 // @ts-ignore it will be fixed with https://github.com/AdaptableTools/adaptable/issues/2230
                 valueRef.current = valueParser(params);
+                (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, valueRef.current);
             }
             else {
                 valueRef.current = invalid ? null : value;
@@ -71,7 +72,7 @@ exports.ReactAdaptableDateEditor = (0, react_1.forwardRef)((props, ref) => {
                     props.stopEditing();
                 });
             }
-        }, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, onStopEdit: (keyboardEventKey) => {
+        }, onStopEdit: (keyboardEventKey) => {
             if (keyboardEventKey === 'Escape') {
                 props.api.stopEditing(true);
             }
@@ -87,19 +88,6 @@ exports.ReactAdaptableDateEditor = (0, react_1.forwardRef)((props, ref) => {
 /**
  * Used by default for all `abColDefDate` columns.
  *
- * You can configure it by specifying `cellEditorParams` in the colDef:
- *
- * colDef {
- *   field: 'tradeDate',
- *   type: 'abColDefDate',
- *   cellEditorParams: {
- *     showClearButton: true
- *   }
- * }
- *
- * For now, there is just 1 editor param you can configure:
- *
- * cellEditorParams.showClearButton - defaults to `true` - whether to show the clear button.
  *
  * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
  * This is useful because dates can be stored as strings, numbers or Date instances - the value parser will be called with a `Date` instance,
@@ -144,7 +132,6 @@ class AdaptableDateEditor {
     }
     // after this component has been created and inserted into the grid
     afterGuiAttached() {
-        var _a;
         const adaptable = this.getAdaptableInstance(this.params);
         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) => {
@@ -171,7 +158,7 @@ class AdaptableDateEditor {
                         this.params.stopEditing();
                     });
                 }
-            }, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, onStopEdit: (keyboardEventKey) => {
+            }, onStopEdit: (keyboardEventKey) => {
                 if (keyboardEventKey === 'Escape') {
                     this.params.api.stopEditing(true);
                 }

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

@@ -38,6 +38,11 @@ exports.InternalAdaptableNumberEditor = React.forwardRef(function InternalAdapta
             (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
         },
     });
+    React.useEffect(() => {
+        // When the editor is opened by typing, the value is not set, even if the user
+        // dismisses the editing by pressing enter or clicking outside, this forces the value to be set.
+        setValue(props.defaultValue);
+    }, []);
     React.useImperativeHandle(ref, () => {
         return {
             focus,
@@ -50,7 +55,7 @@ exports.InternalAdaptableNumberEditor = React.forwardRef(function InternalAdapta
                 e.stopPropagation();
             }
         } },
-        React.createElement("input", { type: (_a = props.type) !== null && _a !== void 0 ? _a : 'number', value: value, onChange: React.useCallback((event) => {
+        React.createElement("input", { "data-name": "AdaptableNumberEditorInput", type: (_a = props.type) !== null && _a !== void 0 ? _a : 'number', value: value, onChange: React.useCallback((event) => {
                 setValue(event.target.value);
             }, []), style: inputStyle, ref: inputRef }),
         showClear ? (React.createElement("div", { style: {