@adaptabletools/adaptable-cjs 18.0.12 → 18.1.0-canary.0

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

@@ -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> {

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;
         });
         /**
@@ -2685,6 +2704,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);
@@ -2739,7 +2768,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)) {
@@ -2773,10 +2801,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 &&
@@ -3946,12 +3970,19 @@ class AdaptableAgGrid {
         const gridOptionsService = agGridApi.gos;
         const self = this;
         gridOptionsService.updateGridOptions = function ({ options, force, source = 'api', }) {
+            // `columnDefs`
             const passedColumnDefs = options.columnDefs;
             if (passedColumnDefs) {
                 const colDefsWithSpecialColumns = self.getColumnDefinitionsInclSpecialColumns(passedColumnDefs);
                 options['columnDefs'] = colDefsWithSpecialColumns;
                 self.logger.info(`Added SpecialColumns on GridOptions.columnDefs update (source=${source})`);
             }
+            // `context`
+            const passedContext = options.context;
+            if (passedContext) {
+                passedContext['__adaptable'] = self;
+                passedContext['adaptableApi'] = self.api;
+            }
             // we mutated the options array, so it's OK to use the 'arguments' object
             GridOptionsService_updateGridOptions.apply(this, arguments);
         };

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/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: {

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core';
+export declare function getStartValue(params: ICellEditorParams): any;
 /**
  * Adaptable number editor parameters extending the AG Grid {@link ICellEditorParams}.
  */
-interface AdaptableNumberCellEditorParams extends ICellEditorParams {
+export interface AdaptableNumberCellEditorParams extends ICellEditorParams {
     /**
      * Whether to show the clear button. If `true`, it works together with `cellEditorParams.emptyValue`
      * @defaultValue true
@@ -14,8 +15,9 @@ interface AdaptableNumberCellEditorParams extends ICellEditorParams {
      * @defaultValue '' (empty string)
      */
     emptyValue: string;
+    onValueChange: (value: any) => void;
 }
-export declare const ReactAdaptableNumberEditor: React.ForwardRefExoticComponent<AdaptableNumberCellEditorParams & React.RefAttributes<unknown>>;
+export declare const AdaptableReactNumberEditor: React.ForwardRefExoticComponent<AdaptableNumberCellEditorParams & React.RefAttributes<unknown>>;
 /**
  * Used by default for all `abColDefNumber` columns.
  *
@@ -54,4 +56,3 @@ export declare class AdaptableNumberEditor implements ICellEditorComp {
     destroy(): void;
     private onValueChange;
 }
-export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableNumberEditor = exports.ReactAdaptableNumberEditor = void 0;
+exports.AdaptableNumberEditor = exports.AdaptableReactNumberEditor = exports.getStartValue = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
@@ -24,6 +24,7 @@ function getStartValue(params) {
     }
     return params.value;
 }
+exports.getStartValue = getStartValue;
 const defaultValueParser = ({ newValue, oldValue: _ }) => {
     return newValue;
 };
@@ -34,7 +35,7 @@ const style = {
     right: '0px',
     bottom: '0px',
 };
-exports.ReactAdaptableNumberEditor = (0, react_1.forwardRef)((props, ref) => {
+exports.AdaptableReactNumberEditor = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const [initialValue] = (0, react_1.useState)(() => getStartValue(props));
     const valueRef = (0, react_1.useRef)(initialValue);
@@ -43,10 +44,12 @@ exports.ReactAdaptableNumberEditor = (0, react_1.forwardRef)((props, ref) => {
     const colValueParser = props.column.getColDef().valueParser;
     const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
     function onValueChange(value) {
+        var _a;
         value = valueParser
             ? valueParser(Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value }))
             : value;
         valueRef.current = value;
+        (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
     }
     const editorRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -77,6 +80,7 @@ exports.ReactAdaptableNumberEditor = (0, react_1.forwardRef)((props, ref) => {
     }
     return (React.createElement("div", { style: style, onKeyDown: onKeyDown }, (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable)));
 });
+exports.AdaptableReactNumberEditor.displayName = 'AdaptableReactNumberEditor';
 /**
  * Used by default for all `abColDefNumber` columns.
  *

package/src/agGrid/editors/AdaptablePercentageEditor/InternalAdaptablePercentageEditor.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export type InternalAdaptablePercentageEditorApi = {
+    focus: VoidFunction;
+    setValue: (value: any) => void;
+};
+export type InternalAdaptablePercentageEditorProps = {
+    /**
+     * Value to set when the x (when showClear: true) is pressed
+     */
+    emptyValue?: string | number;
+    defaultValue?: string | number;
+    value?: string | number;
+    /**
+     * The input type. Defaults to 'number'
+     */
+    type?: string;
+    /**
+     * Whether to show the clear button. Defaults to false
+     */
+    showClearButton?: boolean;
+    onValueChange?: (value: string | number) => void;
+};
+export declare const InternalAdaptablePercentageEditor: React.ForwardRefExoticComponent<InternalAdaptablePercentageEditorProps & React.RefAttributes<InternalAdaptablePercentageEditorApi>>;

package/src/agGrid/editors/AdaptablePercentageEditor/InternalAdaptablePercentageEditor.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalAdaptablePercentageEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const icons_1 = require("../../../components/icons");
+const useProperty_1 = tslib_1.__importDefault(require("../../../components/utils/useProperty"));
+const NumberInput_1 = require("../../../components/Input/NumberInput");
+const fillStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+};
+const hostStyle = Object.assign(Object.assign({}, fillStyle), { boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'center' });
+const inputStyle = {
+    position: 'relative',
+    background: 'transparent',
+    boxSizing: 'border-box',
+    color: 'currentcolor',
+    minWidth: 0,
+    outline: 'none',
+    textAlign: 'right',
+    width: '100%',
+    border: 'none',
+    boxShadow: 'none',
+    paddingRight: '3ch',
+};
+exports.InternalAdaptablePercentageEditor = React.forwardRef(function InternalAdaptablePercentageEditorFn(props, ref) {
+    var _a;
+    const inputRef = React.useRef(null);
+    const focus = () => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const [value, setValue] = (0, useProperty_1.default)(props, 'value', props.defaultValue, {
+        onChange: (value) => {
+            var _a;
+            if (value !== '' && value == Number(value)) {
+                value = Number(value);
+            }
+            (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
+        },
+    });
+    React.useImperativeHandle(ref, () => {
+        return {
+            focus,
+            setValue,
+        };
+    });
+    const showClear = props.showClearButton && props.emptyValue != null && value != props.emptyValue;
+    return (React.createElement("div", { style: hostStyle, className: "ab-PercentageEditor", onKeyDown: (e) => {
+            if (e.key === 'Tab' && showClear && document.activeElement === inputRef.current) {
+                e.stopPropagation();
+            }
+        } },
+        React.createElement(NumberInput_1.NumberInput, { type: (_a = props.type) !== null && _a !== void 0 ? _a : 'number', className: "ab-PercentageEditor-Input", value: value, noArrows: true, autoFocus: true, onChange: React.useCallback((value) => {
+                setValue(value);
+            }, []), style: inputStyle, ref: inputRef }),
+        showClear ? (React.createElement("div", { style: {
+                display: 'inline-block',
+                marginRight: 'var(--ab-space-1)',
+                marginLeft: 'var(--ab-space-1)',
+            }, onClick: (e) => {
+                if (props.emptyValue != null) {
+                    setValue(props.emptyValue);
+                    e.stopPropagation();
+                    focus();
+                }
+            }, onKeyDown: (e) => {
+                if (props.emptyValue != null && e.key === 'Enter') {
+                    setValue(props.emptyValue);
+                    e.stopPropagation();
+                    focus();
+                }
+            } },
+            React.createElement(icons_1.Icon, { size: 18, name: "close", tabIndex: 0 }))) : null,
+        React.createElement("div", { style: {
+                position: 'absolute',
+                right: showClear ? 20 : 0,
+                paddingInlineEnd: '0.5ch',
+            } }, "%")));
+});