@adaptabletools/adaptable 18.0.12 → 18.1.0-canary.0

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -66,7 +66,8 @@ export const OnePageAdaptableWizard = (props) => {
             React.createElement(OnePageWizard, Object.assign({}, props, { name: name, sections: sections, onFinish: handleClickFinish })))));
 };
 export const OnePageWizardSummary = () => {
-    const { setCurrentSection, sections, data } = useOnePageWizardContext();
+    const { sections, data, api } = useOnePageAdaptableWizardContext();
+    const { setCurrentSection } = useOnePageWizardContext();
     const renderEdit = (index) => (React.createElement(SimpleButton, { px: 1, variant: "text", style: {
             textDecoration: 'underline',
             display: 'inline-block',
@@ -87,7 +88,7 @@ export const OnePageWizardSummary = () => {
                 section.title,
                 " ",
                 renderEdit(index)),
-            React.createElement(Tabs.Content, null, section.renderSummary(data))));
+            React.createElement(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

@@ -65,8 +65,6 @@ import { Fdc3Module } from '../Strategy/Fdc3Module';
 import { GridFilterModule } from '../Strategy/GridFilterModule';
 import { NamedQueryModule } from '../Strategy/NamedQueryModule';
 import { CommentModule } from '../Strategy/CommentModule';
-import { AdaptableNumberEditor, ReactAdaptableNumberEditor } from './editors/AdaptableNumberEditor';
-import { AdaptableDateEditor, ReactAdaptableDateEditor } from './editors/AdaptableDateEditor';
 import { Helper } from '../Utilities/Helpers/Helper';
 import { createUuid } from '../components/utils/uuid';
 import UIHelper from '../View/UIHelper';
@@ -80,7 +78,7 @@ import { AdaptableApp } from '../View/AdaptableView';
 import { renderReactRoot as defaultRenderReactRoot } from '../renderReactRoot';
 import { AgGridOptionsService } from './AgGridOptionsService';
 import { parseDateValue } from '../Utilities/Helpers/DateHelper';
-import { AgGridColumnAdapter } from './AgGridColumnAdapter';
+import { AgGridColumnAdapter, getEditorsForColumnTypes, } from './AgGridColumnAdapter';
 import uniqBy from 'lodash/uniqBy';
 import getScrollbarSize from '../Utilities/getScrollbarSize';
 import { isWeightedAverageAggregation, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../PredefinedConfig/Common/AggregationColumns';
@@ -89,7 +87,7 @@ import { RowEditService } from '../Utilities/Services/RowEditService';
 import { weightedAverage } from './weightedAverage';
 import { sortWithOrderArray } from '../Utilities/sortWithOrder';
 import { FilterOnDataChangeOptions } from '../PredefinedConfig/Common/Enums';
-import ObjectFactory from '../Utilities/ObjectFactory';
+import ObjectFactory, { createBaseContext } from '../Utilities/ObjectFactory';
 import { ADAPTABLE_PUBLISH_TIMESTAMP } from '../EnvVars';
 import { AdaptableUpgradeHelper } from '../migration/AdaptableUpgradeHelper';
 import { ensurePortalElement } from '../components/Modal';
@@ -398,9 +396,16 @@ export 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);
@@ -669,10 +674,15 @@ export 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({}, createBaseContext(this.api)), { rowNode: node, data: node.data }))) {
+                                    return true;
+                                }
                                 if (!this.api.columnFilterApi.internalApi.evaluateColumnFilter(columnFilter, node)) {
                                     return false;
                                 }
@@ -931,37 +941,46 @@ export 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, {
                 [AB_SPECIAL_COLUMN]: {},
                 [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' ? ReactAdaptableNumberEditor : AdaptableNumberEditor;
-            }
-            if (patchedColumnTypes.abColDefDate.cellEditor == undefined) {
-                patchedColumnTypes.abColDefDate.cellEditor =
-                    this.variant === 'react' ? ReactAdaptableDateEditor : AdaptableDateEditor;
-            }
+            const colTypesToEditors = 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;
         });
         /**
@@ -2681,6 +2700,16 @@ export 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);
@@ -2735,7 +2764,6 @@ export 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)) {
@@ -2769,10 +2797,6 @@ export 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 &&
@@ -3942,12 +3966,19 @@ export 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

@@ -10,11 +10,22 @@ import UIHelper from '../View/UIHelper';
 import { getPercentBarRendererForColumn } from './PercentBarRenderer';
 import { getBadgeRendererForColumn } from './BadgeRenderer';
 import Helper from '../Utilities/Helpers/Helper';
+import { AdaptableReactNumberEditor, AdaptableNumberEditor } from './editors/AdaptableNumberEditor';
+import { AdaptableDateEditor, AdaptableReactDateEditor } from './editors/AdaptableDateEditor';
+export function getEditorsForColumnTypes(variant) {
+    return {
+        abColDefNumber: variant === 'react' ? AdaptableReactNumberEditor : AdaptableNumberEditor,
+        abColDefDate: variant === 'react' ? AdaptableReactDateEditor : AdaptableDateEditor,
+    };
+}
 export class AgGridColumnAdapter {
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
         this.colDefPropertyCache = new Map();
     }
+    getVariant() {
+        return this.adaptableInstance.variant;
+    }
     destroy() {
         this.adaptableInstance = null;
         this.colDefPropertyCache.clear();
@@ -179,6 +190,17 @@ export 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

@@ -316,7 +316,7 @@ export 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

@@ -22,7 +22,6 @@ const inputStyle = {
     border: 'none',
 };
 export const InternalAdaptableDateEditor = React.forwardRef((props, ref) => {
-    var _a;
     const inputRef = React.useRef(null);
     const focus = () => {
         var _a;
@@ -56,7 +55,6 @@ export const 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, { 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

@@ -23,8 +23,7 @@ const defaultDateValueParser = ({ newValue, oldValue, defaultParser }) => {
     }
     return newValue;
 };
-export const ReactAdaptableDateEditor = forwardRef((props, ref) => {
-    var _a;
+export const AdaptableReactDateEditor = forwardRef((props, ref) => {
     const [initialValue] = useState(() => getStartValue(props));
     const valueRef = useRef(initialValue);
     const colValueParser = props.column.getColDef().valueParser;
@@ -44,6 +43,7 @@ export const ReactAdaptableDateEditor = forwardRef((props, ref) => {
         };
     });
     const editorElement = (React.createElement(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) => {
@@ -58,6 +58,7 @@ export const ReactAdaptableDateEditor = 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;
@@ -67,7 +68,7 @@ export const ReactAdaptableDateEditor = 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);
             }
@@ -83,19 +84,6 @@ export const ReactAdaptableDateEditor = 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,
@@ -140,7 +128,6 @@ export 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, { defaultValue: defaultValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
@@ -167,7 +154,7 @@ export 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

@@ -34,6 +34,11 @@ export const InternalAdaptableNumberEditor = React.forwardRef(function InternalA
             (_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,
@@ -46,7 +51,7 @@ export const InternalAdaptableNumberEditor = React.forwardRef(function InternalA
                 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

@@ -11,7 +11,7 @@ function isValidChar(char) {
     return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(char);
     // we do NOT allow key shortcuts for starting non-digits (minus sign, decimal separators) as the input[number] handling is very buggy and we would open a can of worms
 }
-function getStartValue(params) {
+export function getStartValue(params) {
     if (shouldClearExistingValue(params)) {
         return '';
     }
@@ -30,7 +30,7 @@ const style = {
     right: '0px',
     bottom: '0px',
 };
-export const ReactAdaptableNumberEditor = forwardRef((props, ref) => {
+export const AdaptableReactNumberEditor = forwardRef((props, ref) => {
     var _a, _b;
     const [initialValue] = useState(() => getStartValue(props));
     const valueRef = useRef(initialValue);
@@ -39,10 +39,12 @@ export const ReactAdaptableNumberEditor = 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 = useRef(null);
     useImperativeHandle(ref, () => {
@@ -73,6 +75,7 @@ export const ReactAdaptableNumberEditor = forwardRef((props, ref) => {
     }
     return (React.createElement("div", { style: style, onKeyDown: onKeyDown }, renderWithAdaptableContext(editorElement, adaptable)));
 });
+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,80 @@
+import * as React from 'react';
+import { Icon } from '../../../components/icons';
+import useProperty from '../../../components/utils/useProperty';
+import { NumberInput } from '../../../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',
+};
+export const 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] = useProperty(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, { 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(Icon, { size: 18, name: "close", tabIndex: 0 }))) : null,
+        React.createElement("div", { style: {
+                position: 'absolute',
+                right: showClear ? 20 : 0,
+                paddingInlineEnd: '0.5ch',
+            } }, "%")));
+});