@adaptabletools/adaptable 11.1.1-canary.1 → 11.1.2

package/src/View/Query/ExpandedQueryPopup.js

@@ -9,62 +9,47 @@ const ExpressionEditor_1 = require("../../components/ExpressionEditor");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const QueryRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QueryRedux"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
-class ExpandedQueryPopupComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            namedQuery: false,
-            expression: this.props.popupParams.value,
-        };
-    }
-    render() {
-        const isExpressionValid = this.props.api.internalApi
-            .getQueryLanguageService()
-            .validateBoolean(this.state.expression, ModuleConstants_1.QueryModuleId).isValid;
-        const initialData = this.props.api.internalApi.getQueryPreviewData();
-        const namedQueryValidationError = this.state.namedQuery
-            ? this.props.api.queryApi.isValidNamedQueryName(this.state.namedQuery).message
-            : '';
-        const hasNamedQueryError = StringExtensions_1.IsNotNullOrEmpty(namedQueryValidationError);
-        return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: {
-                namedQuery: this.state.namedQuery,
-                setNamedQuery: (namedQuery) => this.setState({ namedQuery }),
-            } },
-            React.createElement(PanelWithButton_1.PanelWithButton, { headerText: "Current Query", bodyProps: {
-                    padding: 0,
-                    style: { display: 'flex', flexDirection: 'column' },
-                }, glyphicon: this.props.moduleInfo.Glyph },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.QueryModuleId, value: this.state.expression, onChange: (expression) => this.setState({ expression }), initialData: initialData, columns: this.props.api.columnApi.getQueryableColumns(), namedQueries: this.props.api.queryApi.getAllNamedQuery(), api: this.props.api }),
-                React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
-                    React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
-                            this.props.onClosePopup();
-                        } }, "CLOSE"),
-                    React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, style: {
-                            flex: 1,
-                            color: 'var(--ab-color-error)',
-                            textAlign: 'end',
-                        } }, namedQueryValidationError),
-                    React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, onClick: () => {
-                            if (this.state.namedQuery) {
-                                this.props.onAddNamedQuery(this.state.namedQuery);
-                            }
-                            this.props.onRunQuery(this.state.expression);
-                            this.props.onClosePopup();
-                        }, disabled: !isExpressionValid || StringExtensions_1.IsNullOrEmpty(this.state.expression) || hasNamedQueryError }, "Run Query")))));
-    }
-}
-function mapStateToProps() {
-    return {
-    // GridState: state.Grid,
-    };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        onRunQuery: (expression) => dispatch(QueryRedux.QueryRun(expression)),
-        onAddNamedQuery: (namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery)),
-    };
-}
-exports.ExpandedQueryPopup = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(ExpandedQueryPopupComponent);
+exports.ExpandedQueryPopup = (props) => {
+    const dispatch = react_redux_1.useDispatch();
+    const [namedQuery, setNamedQuery] = React.useState(null);
+    const [expression, setExpression] = React.useState(props.popupProps.value);
+    const isExpressionValid = props.api.internalApi
+        .getQueryLanguageService()
+        .validateBoolean(expression, ModuleConstants_1.QueryModuleId).isValid;
+    const initialData = React.useMemo(() => props.api.internalApi.getQueryPreviewData(), []);
+    const namedQueryValidationError = namedQuery
+        ? props.api.queryApi.isValidNamedQueryName(namedQuery).message
+        : '';
+    const hasNamedQueryError = StringExtensions_1.IsNotNullOrEmpty(namedQueryValidationError);
+    const onRunQuery = (expression) => dispatch(QueryRedux.QueryRun(expression));
+    const onAddNamedQuery = (namedQuery) => dispatch(QueryRedux.NamedQueryAdd(namedQuery));
+    return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: {
+            namedQuery: namedQuery,
+            setNamedQuery: (newQuery) => {
+                setNamedQuery(newQuery);
+            },
+        } },
+        React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
+            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.QueryModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: props.api.columnApi.getQueryableColumns(), namedQueries: props.api.queryApi.getAllNamedQuery(), api: props.api }),
+            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
+                React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
+                        props.onDismiss();
+                    } }, "CLOSE"),
+                React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, style: {
+                        flex: 1,
+                        color: 'var(--ab-color-error)',
+                        textAlign: 'end',
+                    } }, namedQueryValidationError),
+                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, onClick: () => {
+                        if (namedQuery) {
+                            onAddNamedQuery({
+                                Name: namedQuery.Name,
+                                BooleanExpression: expression,
+                            });
+                        }
+                        onRunQuery(expression);
+                        props.onDismiss();
+                    }, disabled: !isExpressionValid || StringExtensions_1.IsNullOrEmpty(expression) || hasNamedQueryError }, "Run Query")))));
+};

package/src/View/Query/QueryViewPanel.js

@@ -22,6 +22,7 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Exte
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const react_redux_1 = require("react-redux");
+const windowFactory_1 = require("../Components/Popups/WindowPopups/windowFactory");
 class QueryViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -165,11 +166,13 @@ function mapDispatchToProps(dispatch) {
             source: 'Toolbar',
             value,
         })),
-        onExpand: (value) => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.QueryModuleId, 'ExpandedQueryPopup', {
-            source: 'Toolbar',
-            value,
-        }, {
-            footer: null,
+        onExpand: (value) => dispatch(PopupRedux.PopupShowWindow({
+            Id: windowFactory_1.WINDOW_QUERY_EDITOR,
+            Title: 'Current Query',
+            Icon: 'query',
+            PopupProps: {
+                value: value,
+            },
         })),
     };
 }

package/src/agGrid/ActionColumnRenderer.d.ts

@@ -1,9 +1,4 @@
-import { ICellRendererComp, ICellRendererParams, ITooltipComp, ITooltipParams } from '@ag-grid-community/all-modules';
-export declare class CustomTooltip implements ITooltipComp {
-    private eGui;
-    init(params: ITooltipParams): void;
-    getGui(): any;
-}
+import { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/all-modules';
 export declare class ActionColumnRenderer implements ICellRendererComp {
     private eGui;
     private eventListener;

package/src/agGrid/ActionColumnRenderer.js

@@ -1,85 +1,76 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionColumnRenderer = exports.CustomTooltip = void 0;
+exports.ActionColumnRenderer = void 0;
 const tslib_1 = require("tslib");
 const SimpleButton_1 = tslib_1.__importDefault(require("../components/SimpleButton"));
 const react_dom_1 = require("react-dom");
 const React = tslib_1.__importStar(require("react"));
-class CustomTooltip {
-    init(params) {
-        this.eGui = document.createElement('div');
-        this.eGui.classList.add('custom-tooltip');
-        let { field, lastValidation, validationFailedMsg } = params.value;
-        this.eGui.innerHTML = `
-        <div class="validation-msg">
-          FIELD-${field.toUpperCase()} - invalid value:
-          "<span class="invalid-value"> ${lastValidation} </span>",
-          ${validationFailedMsg}
-        </div>
-    `;
-    }
-    getGui() {
-        return this.eGui;
-    }
-}
-exports.CustomTooltip = CustomTooltip;
+const uuid_1 = require("../components/utils/uuid");
 class ActionColumnRenderer {
     // gets called once before the renderer is used
     init(params) {
         var _a;
         const adaptable = params.api.__adaptable;
-        let actionCol = (_a = adaptable.api.userInterfaceApi
+        const actionCol = (_a = adaptable.api.userInterfaceApi
             .getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == params.colDef.colId);
-        if (actionCol) {
+        if (actionCol && actionCol.actionColumnButton) {
+            let actionButtons = Array.isArray(actionCol.actionColumnButton)
+                ? actionCol.actionColumnButton
+                : [actionCol.actionColumnButton];
+            if (!actionButtons.length) {
+                return;
+            }
+            // actionButtons don't have IDs, so we need to generate them to be used later as a react component key
+            actionButtons = actionButtons.map((actionButton) => (Object.assign(Object.assign({}, actionButton), { Uuid: uuid_1.createUuid() })));
             // create the cell
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-ActionColumn';
-            let pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node);
-            let button = actionCol.actionColumnButton;
-            let context = {
-                actionColumn: actionCol,
-                primaryKeyValue: pkValue,
-                rowNode: params.node,
-                adaptableApi: adaptable.api,
-            };
             // if its a group node then only show if set to do so
             if (adaptable.api.gridApi.isGroupRowNode(params.node) && !actionCol.includeGroupedRows) {
                 this.eGui.innerHTML = '';
                 return;
             }
-            if (button.hidden && button.hidden(button, context)) {
-                this.eGui.innerHTML = '';
-                return;
-            }
-            const disabled = button.disabled && button.disabled(button, context);
-            const renderButton = (adaptableApi, context) => {
-                var _a, _b;
-                const defaultIconProps = {
-                    style: {
-                        height: 15,
-                        width: 15,
-                    },
-                };
-                const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
-                let buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
-                let buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
-                let buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-                const handleClick = () => {
-                    button.onClick(button, context);
-                    // Timeout to let any updates to be done before re-rendering the component
-                    setTimeout(() => {
-                        // when called again it triggers a re-render
-                        // https:reactjs.org/docs/react-dom.html#render
-                        doRender();
-                    }, 16);
-                };
-                return (React.createElement(SimpleButton_1.default, { key: button.Uuid, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
-                    button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                    buttonLabel));
+            const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node);
+            const buttonContext = {
+                actionColumn: actionCol,
+                primaryKeyValue: pkValue,
+                rowNode: params.node,
+                adaptableApi: adaptable.api,
+            };
+            const renderActionButtons = (buttons, adaptableApi, context) => {
+                return (React.createElement(React.Fragment, null, buttons.map((button) => {
+                    var _a, _b;
+                    if (button.hidden && button.hidden(button, context)) {
+                        return;
+                    }
+                    const defaultIconProps = {
+                        style: {
+                            height: 15,
+                            width: 15,
+                        },
+                    };
+                    const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
+                    const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
+                    const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
+                    const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
+                    const handleClick = () => {
+                        button.onClick(button, context);
+                        // Timeout to let any updates to be done before re-rendering the component
+                        setTimeout(() => {
+                            // when called again it triggers a re-render
+                            // https:reactjs.org/docs/react-dom.html#render
+                            doRender();
+                        }, 16);
+                    };
+                    const disabled = button.disabled && button.disabled(button, context);
+                    return (React.createElement(SimpleButton_1.default, { key: button.Uuid, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
+                        button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
+                        buttonLabel));
+                })));
             };
             const eGui = this.eGui;
             function doRender() {
-                react_dom_1.render(renderButton(adaptable.api, context), eGui);
+                react_dom_1.render(renderActionButtons(actionButtons, adaptable.api, buttonContext), eGui);
             }
             this.render = doRender;
             doRender();

package/src/agGrid/Adaptable.d.ts

@@ -74,6 +74,7 @@ export declare class Adaptable implements IAdaptable {
     private _id;
     private currentColumnDefs?;
     private rowListeners;
+    private isCheckedColumnDataType;
     _on: (eventName: string, callback: EmitterCallback) => (() => void);
     _onIncludeFired: (eventName: string, callback: EmitterCallback) => (() => void);
     _emit: (eventName: string, data?: any) => Promise<any>;
@@ -149,7 +150,8 @@ export declare class Adaptable implements IAdaptable {
     private updateLayoutFromGrid;
     setSelectedCells(): SelectedCellInfo | undefined;
     setSelectedRows(): SelectedRowInfo | undefined;
-    setValue(cellDataChangedInfo: CellDataChangedInfo): void;
+    setDataValue(value: any, column: AdaptableColumn, primaryKeyValue: any, rowNode?: RowNode): void;
+    setCellValue(cellDataChangedInfo: CellDataChangedInfo): void;
     cancelEdit(): void;
     isCellEditable(rowNode: RowNode, column: Column): boolean;
     getDistinctValuesForColumn(column: AdaptableColumn, visibleRowsOnly: boolean, skipRowNode?: RowNode, permittedValues?: any[]): GridCell[];

package/src/agGrid/Adaptable.js

@@ -100,6 +100,7 @@ class Adaptable {
     constructor() {
         this.colDefPropertyCache = new Map();
         this.gridOptionsPropertyCache = new Map();
+        this.isCheckedColumnDataType = false;
         // only for our private / internal events used within Adaptable
         // public events are emitted through the EventApi
         this._on = (eventName, callback) => {
@@ -201,7 +202,6 @@ class Adaptable {
         this.getGroupAndColumnDefs = () => {
             const colDefs = [].concat(this.currentColumnDefs || this.gridOptions.columnDefs);
             return colDefs;
-            // return this.gridOptions.columnApi.getAllColumns().map((c) => c.getColDef());
         };
         this.getColumnDefsWithCorrectVisibility = () => {
             const visibleColIds = this.api.layoutApi.getCurrentVisibleColumnIdsMap();
@@ -817,7 +817,8 @@ class Adaptable {
                 if (reverseGradient) {
                     alpha = 1 - alpha;
                 }
-                style.backgroundColor = tinycolor(cellBackColor).setAlpha(alpha).toRgbString();
+                const preparedColor = StyleHelper_1.getVariableColor(cellBackColor);
+                style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
             }
             if (columnStyle.PercentBarStyle && columnStyle.PercentBarStyle.CellText) {
                 style.paddingTop = 0;
@@ -1483,27 +1484,23 @@ class Adaptable {
         this.agGridHelper.fireSelectionChangedEvent();
         return selectedRowInfo;
     }
-    setValue(cellDataChangedInfo) {
+    setDataValue(value, column, primaryKeyValue, rowNode) {
         // note: because we use RowNode.setDataValue() this will cause Validation to fire
         // see https://www.ag-grid.com/javascript-data-grid/change-detection/#triggering-value-change-detection
         let newValue;
-        let dataType = cellDataChangedInfo.column.dataType;
-        newValue =
-            dataType == Enums_1.DataType.Number
-                ? Number(cellDataChangedInfo.newValue)
-                : cellDataChangedInfo.newValue;
+        let dataType = column.dataType;
+        newValue = dataType == Enums_1.DataType.Number ? Number(value) : value;
         if (dataType == undefined) {
             return; // no point continuing as probably a wrong  column
         }
-        if (cellDataChangedInfo.rowNode) {
-            cellDataChangedInfo.rowNode.setDataValue(cellDataChangedInfo.column.columnId, newValue);
+        if (rowNode) {
+            rowNode.setDataValue(column.columnId, newValue);
         }
         else {
             if (this.useRowNodeLookUp) {
-                const rowNode = this.gridOptions.api.getRowNode(cellDataChangedInfo.primaryKeyValue);
+                const rowNode = this.gridOptions.api.getRowNode(primaryKeyValue);
                 if (rowNode != null) {
-                    rowNode.setDataValue(cellDataChangedInfo.column.columnId, newValue);
-                    cellDataChangedInfo.rowNode = rowNode;
+                    rowNode.setDataValue(column.columnId, newValue);
                 }
             }
             else {
@@ -1511,9 +1508,8 @@ class Adaptable {
                 // prefer not to use this method but if we do then at least we can prevent further lookups once we find
                 this.gridOptions.api.getModel().forEachNode((rowNode) => {
                     if (!isUpdated) {
-                        if (cellDataChangedInfo.primaryKeyValue == this.getPrimaryKeyValueFromRowNode(rowNode)) {
-                            rowNode.setDataValue(cellDataChangedInfo.column.columnId, newValue);
-                            cellDataChangedInfo.rowNode = rowNode;
+                        if (primaryKeyValue == this.getPrimaryKeyValueFromRowNode(rowNode)) {
+                            rowNode.setDataValue(column.columnId, newValue);
                             isUpdated = true;
                         }
                     }
@@ -1521,6 +1517,9 @@ class Adaptable {
             }
         }
     }
+    setCellValue(cellDataChangedInfo) {
+        this.setDataValue(cellDataChangedInfo.newValue, cellDataChangedInfo.column, cellDataChangedInfo.primaryKeyValue, cellDataChangedInfo.rowNode);
+    }
     cancelEdit() {
         this.gridOptions.api.stopEditing(true);
     }
@@ -2063,20 +2062,54 @@ class Adaptable {
         });
     }
     updateColDefsForSpecialColumns() {
+        const allColDefs = this.getGroupAndColumnDefs();
         const specialColDefs = this.getColDefsForSpecialColumns();
-        const isUserColDef = (colDef) => {
+        const isSpecialColDef = (colDef) => {
             const { type } = colDef;
             if (type === GeneralConstants_1.AB_SPECIAL_COLUMN || (Array.isArray(type) && type.includes(GeneralConstants_1.AB_SPECIAL_COLUMN))) {
-                return false;
+                return true;
             }
-            return true;
+            return false;
         };
-        // const userColDefs = this.gridOptions.columnApi
-        //   .getAllColumns()
-        // .map((col) => col.getColDef())
-        const userColDefs = this.getGroupAndColumnDefs().filter(isUserColDef);
-        const allDefs = [...userColDefs, ...specialColDefs];
-        this.safeSetColDefs(allDefs);
+        const isColGroupDef = (columnDefinition) => {
+            // @ts-ignore
+            return columnDefinition['children'] != null;
+        };
+        const processedSpecialColDefIds = [];
+        const mapColDefs = (colDefs) => {
+            return colDefs.map((colDef) => {
+                if (isColGroupDef(colDef)) {
+                    // if it's a group column, recursively map its children
+                    colDef.children = mapColDefs(colDef.children);
+                    return colDef;
+                }
+                else {
+                    if (!isSpecialColDef(colDef)) {
+                        // if it's not a special column, return it as is
+                        return colDef;
+                    }
+                    const newlyCreatedSpecialColDef = specialColDefs.find((specialColDef) => specialColDef.colId === colDef.colId);
+                    if (newlyCreatedSpecialColDef) {
+                        // if it's a special column and we have a special col def for it, return the special col def
+                        processedSpecialColDefIds.push(colDef.colId);
+                        return newlyCreatedSpecialColDef;
+                    }
+                    else {
+                        // otherwise, return the original col def
+                        return colDef;
+                    }
+                }
+            });
+        };
+        const resultColDefs = mapColDefs(allColDefs);
+        // check if there are any special colDefs that were not processed
+        // in that case, add them to the end of the colDefs
+        specialColDefs.forEach((specialColDef) => {
+            if (!processedSpecialColDefIds.includes(specialColDef.colId)) {
+                resultColDefs.push(specialColDef);
+            }
+        });
+        this.safeSetColDefs(resultColDefs);
         this.setLayout();
     }
     cleanupFloatingFilters_WORKAROUND() {
@@ -3675,7 +3708,7 @@ class Adaptable {
     updateColumnDataTypeIfRowDataIsEmpty() {
         var _a, _b;
         // gridOptions?.rowData is not updated when setting data via the api
-        if (!((_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.rowData) === null || _b === void 0 ? void 0 : _b.length)) {
+        if (!this.isCheckedColumnDataType && !((_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.rowData) === null || _b === void 0 ? void 0 : _b.length)) {
             // the columns dataType is based on the rawData, when type is not set on the column
             // when data is loaded async, the dataType initially is dataType=unknown
             // to fix this, we need to update the columnDefs when we data is loaded
@@ -3683,6 +3716,8 @@ class Adaptable {
             // this influences the floating filter
             // need to trigger header redraw, if not, the columnDef update is not picked-up
             this.redrawHeader();
+            // ensures the check is performed only once
+            this.isCheckedColumnDataType = true;
         }
     }
     runAdaptableComparerFunction(columnId, columnValues) {
@@ -4159,7 +4194,8 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
     }
     convertCSSToExcelStyle(style) {
         const getHexColor = (color) => {
-            const t = tinycolor(color);
+            const preparedColor = StyleHelper_1.getVariableColor(color);
+            const t = tinycolor(preparedColor);
             const a = t.getAlpha();
             return tinycolor.mix(tinycolor('white'), t, a * 100).toHexString();
         };

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

@@ -50,6 +50,8 @@ export declare class AdaptableNumberEditor implements ICellEditorComp {
     afterGuiAttached(): void;
     destroy(): void;
     private onValueChange;
+    private getStartValue;
     private shouldClearExistingValue;
+    private isValidChar;
 }
 export {};

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

@@ -40,7 +40,7 @@ class AdaptableNumberEditor {
         };
     }
     init(params) {
-        this.value = this.shouldClearExistingValue(params) ? '' : params.value;
+        this.value = this.getStartValue(params);
         this.params = params;
         this.columnId = params.column.getColId();
         const { valueParser } = params.column.getColDef();
@@ -72,7 +72,7 @@ class AdaptableNumberEditor {
     afterGuiAttached() {
         var _a, _b;
         const adaptable = this.params.api.__adaptable;
-        const defaultValue = this.shouldClearExistingValue(this.params) ? '' : this.params.value;
+        const defaultValue = this.value;
         const editorElement = (React.createElement(InternalAdaptableNumberEditor_1.InternalAdaptableNumberEditor, { defaultValue: defaultValue, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = this.params.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: this.onValueChange, ref: (editor) => {
                 this.editor = editor;
                 editor === null || editor === void 0 ? void 0 : editor.focus();
@@ -92,8 +92,22 @@ class AdaptableNumberEditor {
     destroy() {
         react_dom_1.unmountComponentAtNode(this.el);
     }
+    getStartValue(params) {
+        if (this.shouldClearExistingValue(params)) {
+            return '';
+        }
+        if (params.charPress && this.isValidChar(params.charPress)) {
+            return params.charPress;
+        }
+        return params.value;
+    }
     shouldClearExistingValue(params) {
         return params.eventKey === all_modules_1.KeyCode.BACKSPACE || params.eventKey === all_modules_1.KeyCode.DELETE;
     }
+    isValidChar(char) {
+        // allow only digits
+        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
+    }
 }
 exports.AdaptableNumberEditor = AdaptableNumberEditor;

package/src/components/ExpressionEditor/index.js

@@ -135,7 +135,6 @@ function ExpressionEditor(props) {
                     React.createElement(rebass_1.Box, { "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, style: {
                             overflow: 'auto',
                             minWidth: 220,
-                            maxWidth: '30%',
                             height: '100%',
                             paddingRight: 'var(--ab-space-2)',
                         } },

package/src/components/OverlayTrigger/index.js

@@ -173,6 +173,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
                 width: 0,
                 height: 0,
                 pointerEvents: 'none',
+                display: 'inline-flex',
             } }),
         overlay));
 });

package/src/components/Radio/index.d.ts

@@ -17,7 +17,7 @@ export declare const useRadioContext: <T extends unknown>() => {
     onChange: (value: T) => void;
     name: string;
 };
-declare const Radio: ({ children, checked, onChange, value, name, gapDistance, childrenPosition, as, id, tabIndex, ...props }: RadioProps) => JSX.Element;
+declare const Radio: ({ children, checked, onChange, value, name, gapDistance, childrenPosition, as, id, tabIndex, disabled, ...props }: RadioProps) => JSX.Element;
 export declare const RadioGroup: <T extends unknown>(props: FlexProps & {
     orientation: 'horizontal' | 'vertical';
     value?: T;

package/src/components/Radio/index.js

@@ -15,7 +15,7 @@ exports.useRadioContext = () => {
     return React.useContext(RadioContext);
 };
 const Radio = (_a) => {
-    var { children, checked, onChange, value, name, gapDistance = 10, childrenPosition = 'end', as = 'label', id, tabIndex } = _a, props = tslib_1.__rest(_a, ["children", "checked", "onChange", "value", "name", "gapDistance", "childrenPosition", "as", "id", "tabIndex"]);
+    var { children, checked, onChange, value, name, gapDistance = 10, childrenPosition = 'end', as = 'label', id, tabIndex, disabled } = _a, props = tslib_1.__rest(_a, ["children", "checked", "onChange", "value", "name", "gapDistance", "childrenPosition", "as", "id", "tabIndex", "disabled"]);
     const context = exports.useRadioContext();
     const { value: contextValue, onChange: contextOnChange, name: contextName } = context;
     const [stateChecked, setStateChecked] = react_1.useState(false);
@@ -44,7 +44,7 @@ const Radio = (_a) => {
     return (React.createElement(rebass_1.Box, Object.assign({ className: "ab-Radio", my: 2 }, props, { style: Object.assign({ display: 'inline-flex', flexFlow: 'row', alignItems: 'center', cursor: 'pointer', position: 'relative' }, props.style), as: as }),
         before,
         beforeGap,
-        React.createElement("input", { className: "ab-Radio-input", id: id, checked: computedChecked, type: "radio", name: name !== null && name !== void 0 ? name : contextName, value: value, tabIndex: tabIndex, style: {
+        React.createElement("input", { disabled: disabled, className: "ab-Radio-input", id: id, checked: computedChecked, type: "radio", name: name !== null && name !== void 0 ? name : contextName, value: value, tabIndex: tabIndex, style: {
                 verticalAlign: 'middle',
                 borderRadius: '50%',
                 cursor: 'pointer',