@adaptabletools/adaptable 13.0.0-canary.16 → 13.0.0-canary.18

package/src/View/SystemStatus/SystemStatusEntityRow.js

@@ -7,6 +7,7 @@ const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
 const rebass_1 = require("rebass");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const Helper_1 = require("../../Utilities/Helpers/Helper");
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 class SystemStatusEntityRow extends React.Component {
     render() {
         var _a;
@@ -15,15 +16,12 @@ class SystemStatusEntityRow extends React.Component {
         let messageTypeColor = UIHelper_1.default.getColorByMessageType((_a = systemStatus === null || systemStatus === void 0 ? void 0 : systemStatus.statusType) !== null && _a !== void 0 ? _a : 'Success');
         let colItems = (0, Helper_1.cloneObject)(this.props.colItems);
         colItems[0].Content = systemStatus ? (React.createElement("details", null,
-            React.createElement(rebass_1.Flex, { title: systemStatus.statusFurtherInformation ? 'Click to see more' : '', style: {
-                    borderRadius: 'var(--ab__border-radius)',
-                    fontWeight: 'bold',
-                    cursor: systemStatus.statusFurtherInformation ? 'pointer' : 'auto',
-                }, className: "ab-DashboardToolbar__SystemStatus__text", marginRight: 2, padding: 2, color: 'text-on-secondary', backgroundColor: messageTypeColor, fontSize: 'var( --ab-font-size-2)', alignItems: "center", as: "summary" },
+            React.createElement(rebass_1.Flex, { title: systemStatus.statusFurtherInformation ? 'Click to see more' : '', className: (0, join_1.default)('ab-DashboardToolbar__SystemStatus__text', systemStatus.statusFurtherInformation &&
+                    'ab-DashboardToolbar__SystemStatus__text--expandable'), backgroundColor: messageTypeColor, alignItems: "center", as: "summary" },
                 systemStatus.statusMessage,
                 " ",
                 systemStatus.statusFurtherInformation ? '...' : ''),
-            systemStatus.statusFurtherInformation ? (React.createElement(rebass_1.Box, { margin: 2, style: { whiteSpace: 'normal' } }, systemStatus.statusFurtherInformation)) : null)) : null;
+            systemStatus.statusFurtherInformation ? (React.createElement(rebass_1.Box, { className: "ab-DashboardToolbar__SystemStatus__further-information", margin: 2 }, systemStatus.statusFurtherInformation)) : null)) : null;
         colItems[1].Content = systemStatus.timestamp.toLocaleString();
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: colItems });
     }

package/src/View/TeamSharing/SharedEntityObjectView.js

@@ -19,7 +19,7 @@ const SharedEntityTypeItemView = (props) => {
         React.createElement(rebass_1.Flex, { mb: 2, mt: 2 },
             React.createElement(rebass_1.Flex, { mr: 2, alignItems: "center" },
                 React.createElement(Tag_1.Tag, { style: { margin: 0 } }, props.data.Module)),
-            isExpanded ? (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))),
+            isExpanded ? (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-collapse-button", onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-epxand-button", onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))),
         isExpanded && (React.createElement(rebass_1.Box, { as: "ul", padding: 0, className: "ab-Shared-Entity-Shared-Object" },
             React.createElement(AdaptableObjectList_1.AdaptableObjectListItem, { hideControls: true, data: item, module: module })))));
 };

package/src/View/TeamSharing/TeamSharingApplyButton.js

@@ -10,6 +10,6 @@ const TeamSharingApplyButton = (props) => {
     const handleImport = React.useCallback(() => {
         adaptable.api.teamSharingApi.importSharedEntry(props.data);
     }, []);
-    return (React.createElement(SimpleButton_1.default, { onClick: handleImport, variant: "text", tooltip: "Apply Adaptable Object", icon: "import-export" }));
+    return (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-apply-button", onClick: handleImport, variant: "text", tooltip: "Apply Adaptable Object", icon: "import-export" }));
 };
 exports.TeamSharingApplyButton = TeamSharingApplyButton;

package/src/View/Theme/ThemePopup.js

@@ -38,7 +38,7 @@ class ThemePopupComponent extends React.Component {
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
-                    React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: '50%', minWidth: 200 }, placeholder: "Select theme", value: this.props.CurrentTheme, items: optionThemes, accessLevel: this.props.accessLevel }, currentThemeDescription)))));
+                    React.createElement(DropdownButton_1.default, { "data-name": "select-theme-dropdown", columns: ['label'], style: { width: '50%', minWidth: 200 }, placeholder: "Select theme", value: this.props.CurrentTheme, items: optionThemes, accessLevel: this.props.accessLevel }, currentThemeDescription)))));
     }
     onChangeTheme(value) {
         this.props.SelectTheme(value);

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -76,7 +76,6 @@ const OnePageAdaptableWizard = (props) => {
 exports.OnePageAdaptableWizard = OnePageAdaptableWizard;
 const OnePageWizardSummary = () => {
     const { setCurrentSection, sections, data } = (0, OnePageWizards_1.useOnePageWizardContext)();
-    const { api } = useOnePageAdaptableWizardContext();
     const renderEdit = (index) => (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: {
             textDecoration: 'underline',
             display: 'inline-block',
@@ -84,7 +83,7 @@ const OnePageWizardSummary = () => {
         }, onClick: () => {
             setCurrentSection(index);
         } }, "edit"));
-    return (React.createElement(React.Fragment, null, sections
+    return (React.createElement(rebass_1.Box, { className: "ab-OnePageWizardSummary" }, sections
         .map((section, index) => {
         if (section === '-') {
             return null;

package/src/agGrid/ActionColumnRenderer.d.ts

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 import { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/core';
 import { ActionColumn } from '../AdaptableOptions/ActionOptions';
 interface ActionColumnCellRendererParams extends ICellRendererParams {
     actionColumn?: ActionColumn;
 }
+export declare const ReactActionColumnRenderer: (props: ActionColumnCellRendererParams) => JSX.Element;
 export declare class ActionColumnRenderer implements ICellRendererComp {
     private eGui;
     private eventListener;

package/src/agGrid/ActionColumnRenderer.js

@@ -1,76 +1,108 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionColumnRenderer = void 0;
+exports.ActionColumnRenderer = exports.ReactActionColumnRenderer = void 0;
 const tslib_1 = require("tslib");
 const SimpleButton_1 = tslib_1.__importDefault(require("../components/SimpleButton"));
 const React = tslib_1.__importStar(require("react"));
 const uuid_1 = require("../components/utils/uuid");
+const useRerender_1 = require("../components/utils/useRerender");
+function getActionButtonsAndActionColumn(adaptable, actionColumn, colId) {
+    var _a;
+    const actionCol = actionColumn
+        ? actionColumn
+        : (_a = adaptable.api.actionApi.getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == colId);
+    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: (0, uuid_1.createUuid)() })));
+        return { actionButtons, actionColumn: actionCol };
+    }
+    return {
+        actionButtons: [],
+        actionColumn: actionCol,
+    };
+}
+const renderActionButtons = (buttons, adaptableApi, context, rerender) => {
+    return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
+        var _a, _b;
+        if (button.hidden && button.hidden(button, context)) {
+            return;
+        }
+        const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
+            height: 15,
+            width: 15,
+        });
+        const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
+        const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
+        const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
+        const handleClick = () => {
+            var _a;
+            (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, 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
+                rerender();
+            }, 16);
+        };
+        const disabled = button.disabled && button.disabled(button, context);
+        return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, 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' }, buttonLabel));
+    })));
+};
+const ReactActionColumnRenderer = (props) => {
+    const rerender = (0, useRerender_1.useRerender)();
+    const adaptable = props.api.__adaptable;
+    const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, props.actionColumn, props.colDef.colId);
+    if (!actionColumn || !actionButtons.length) {
+        return null;
+    }
+    if (adaptable.api.gridApi.isGroupRowNode(props.node) && !actionColumn.includeGroupedRows) {
+        return null;
+    }
+    const pkValue = adaptable.getPrimaryKeyValueFromRowNode(props.node);
+    const buttonContext = {
+        actionColumn,
+        primaryKeyValue: pkValue,
+        rowNode: props.node,
+        adaptableApi: adaptable.api,
+    };
+    return (React.createElement("div", { className: "ab-ActionColumn" }, renderActionButtons(actionButtons, adaptable.api, buttonContext, rerender)));
+};
+exports.ReactActionColumnRenderer = ReactActionColumnRenderer;
 class ActionColumnRenderer {
     // gets called once before the renderer is used
     init(params) {
-        var _a;
         const adaptable = params.api.__adaptable;
-        const actionCol = params.actionColumn
-            ? params.actionColumn
-            : (_a = adaptable.api.actionApi
-                .getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == params.colDef.colId);
-        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: (0, uuid_1.createUuid)() })));
-            // create the cell
-            this.eGui = document.createElement('div');
-            this.eGui.className = 'ab-ActionColumn';
-            // 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;
-            }
-            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, index) => {
-                    var _a, _b;
-                    if (button.hidden && button.hidden(button, context)) {
-                        return;
-                    }
-                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
-                        height: 15,
-                        width: 15,
-                    });
-                    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, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, 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' }, buttonLabel));
-                })));
-            };
-            const eGui = this.eGui;
-            const doRender = () => {
-                this.unmountReactRoot = adaptable.renderReactRoot(renderActionButtons(actionButtons, adaptable.api, buttonContext), eGui);
-            };
-            this.render = doRender;
-            doRender();
+        const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, params.actionColumn, params.colDef.colId);
+        if (!actionColumn || !actionButtons.length) {
+            return;
+        }
+        // create the cell
+        this.eGui = document.createElement('div');
+        this.eGui.className = 'ab-ActionColumn';
+        // if its a group node then only show if set to do so
+        if (adaptable.api.gridApi.isGroupRowNode(params.node) && !actionColumn.includeGroupedRows) {
+            this.eGui.innerHTML = '';
+            return;
         }
+        const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node);
+        const buttonContext = {
+            actionColumn,
+            primaryKeyValue: pkValue,
+            rowNode: params.node,
+            adaptableApi: adaptable.api,
+        };
+        const eGui = this.eGui;
+        const doRender = () => {
+            this.unmountReactRoot = adaptable.renderReactRoot(renderActionButtons(actionButtons, adaptable.api, buttonContext, doRender), eGui);
+        };
+        this.render = doRender;
+        doRender();
     }
     // defined on init
     // used to re-render in refresh

package/src/agGrid/Adaptable.d.ts

@@ -161,7 +161,6 @@ export declare class Adaptable implements IAdaptable {
     private getFormatColumnAdaptableStyle;
     private getFormatColumnCellStyle;
     private getFormatColumnCellClass;
-    private getFormatColumnRowClass;
     private getActiveAlertWithHighlightCell;
     private getActiveAlertWithHighlightRow;
     private getAlertCellStyle;

package/src/agGrid/Adaptable.js

@@ -956,7 +956,9 @@ class Adaptable {
     getFormatColumnAdaptableStyle(formatColumns) {
         // first has more precedence, then they need to be applied in reverse order
         return formatColumns.reduceRight((style, formatColumn) => {
-            const formatColumnStyle = this.convertAdaptableStyleToCSS(formatColumn.Style);
+            const formatColumnStyle = formatColumn.Style
+                ? this.convertAdaptableStyleToCSS(formatColumn.Style)
+                : {};
             if (formatColumn.CellAlignment) {
                 switch (formatColumn.CellAlignment) {
                     case 'Left':
@@ -973,37 +975,21 @@ class Adaptable {
             return Object.assign(Object.assign({}, style), formatColumnStyle);
         }, {});
     }
-    getFormatColumnCellStyle(abColumn, formatColumn, formatColumnsWithStyle, params) {
-        let style = {};
-        if (formatColumn.Style) {
-            const activeFormatColumnsWithStyle = formatColumnsWithStyle.filter((formatColumn) => {
-                return this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params);
-            });
-            if (!activeFormatColumnsWithStyle.length) {
-                return style;
-            }
-            style = Object.assign(Object.assign({}, style), this.getFormatColumnAdaptableStyle(activeFormatColumnsWithStyle));
+    getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params) {
+        if (!activeFormatColumnsWithStyle.length) {
+            return {};
         }
-        return style;
+        const relevantFormatColumnsWithStyle = activeFormatColumnsWithStyle.filter((formatColumn) => {
+            return this.api.formatColumnApi.isFormatColumnRelevantForColumn(formatColumn, abColumn, params);
+        });
+        return this.getFormatColumnAdaptableStyle(relevantFormatColumnsWithStyle);
     }
     getFormatColumnCellClass(formatColumns, abColumn, params) {
         const classNames = formatColumns
             .map((formatColumn) => {
             var _a, _b;
             if (((_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
-                this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params)) {
-                return (_b = formatColumn.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
-            }
-        })
-            .filter((x) => !!x);
-        return classNames;
-    }
-    getFormatColumnRowClass(formatColumns, params) {
-        const classNames = formatColumns
-            .map((formatColumn) => {
-            var _a, _b;
-            if (((_a = formatColumn.Style) === null || _a === void 0 ? void 0 : _a.ClassName) &&
-                this.api.formatColumnApi.isFormatColumnActiveForRow(formatColumn, params)) {
+                this.api.formatColumnApi.isFormatColumnRelevantForColumn(formatColumn, abColumn, params)) {
                 return (_b = formatColumn.Style) === null || _b === void 0 ? void 0 : _b.ClassName;
             }
         })
@@ -2335,7 +2321,7 @@ class Adaptable {
                 pinned: this.adaptableOptions.actionOptions.actionRowButtonsPosition === 'pinnedRight'
                     ? 'right'
                     : 'left',
-                cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
+                cellRenderer: this.variant === 'react' ? ActionColumnRenderer_1.ReactActionColumnRenderer : ActionColumnRenderer_1.ActionColumnRenderer,
                 cellRendererParams: {
                     actionColumn: rowEditActionColumn,
                 },
@@ -2364,7 +2350,7 @@ class Adaptable {
                 filter: false,
                 sortable: false,
                 enableRowGroup: false,
-                cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
+                cellRenderer: this.variant === 'react' ? ActionColumnRenderer_1.ReactActionColumnRenderer : ActionColumnRenderer_1.ActionColumnRenderer,
                 type: [GeneralConstants_1.AB_SPECIAL_COLUMN, 'abColDefObject'],
             };
             (0, LoggingHelper_1.LogAdaptableInfo)('Setting up Action Column: ' + actionColumn.columnId);
@@ -3175,8 +3161,7 @@ class Adaptable {
                 fontSize: null,
                 borderColor: null,
             };
-            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
-            const formatColumnsWithStyle = this.api.formatColumnApi.getColumnFormatColumnsWithStyle(abColumn);
+            const activeFormatColumnsWithStyle = this.api.formatColumnApi.getFormatColumnsWithStyleForColumn(abColumn);
             let styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(colId);
             if (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.IsSuspended) {
                 styledColumn = null;
@@ -3184,11 +3169,10 @@ class Adaptable {
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
             const cellStyle = (params) => {
-                const formatColumnCellStyle = formatColumn && !styledColumn // TODO: remove after refactor columnStyle
-                    ? this.getFormatColumnCellStyle(abColumn, formatColumn, formatColumnsWithStyle, params)
-                    : undefined;
                 const isQuickSearchActive = hasQuickSearchStyle && this.isQuickSearchActive(abColumn, params);
-                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), formatColumnCellStyle), (styledColumn ? this.getStyledColumnStyle(styledColumn, abColumn, params) : {})), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
+                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), (!styledColumn
+                    ? this.getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params)
+                    : {})), (styledColumn ? this.getStyledColumnStyle(styledColumn, abColumn, params) : {})), (isQuickSearchActive ? quickSearchStyle : {})), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
                 return result;
             };
             return cellStyle;
@@ -3416,47 +3400,39 @@ class Adaptable {
     }
     setupColumnValueFormatter({ col, abColumn }) {
         this.setColDefProperty(col, 'valueFormatter', (params) => {
-            const formatColumn = this.api.formatColumnApi.getFormatColumnWithDisplayFormatForColumn(abColumn);
-            if (!formatColumn) {
+            const activeFormatColumnsWithDisplayFormat = this.api.formatColumnApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+            if (!activeFormatColumnsWithDisplayFormat.length) {
                 return;
             }
-            if (formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) {
-                return;
-            }
-            if (formatColumn.DisplayFormat) {
-                let valueFormatter;
-                const options = formatColumn.DisplayFormat.Options;
-                if (formatColumn.DisplayFormat.Formatter === 'NumberFormatter') {
+            return (params) => {
+                const { node, value } = params;
+                const [mostRelevantFormatColumn] = this.api.formatColumnApi.getFormatColumnsRelevantForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node, value });
+                if (!mostRelevantFormatColumn) {
+                    // ALL FormatColumns are conditional and NONE of them are relevant for this row
+                    return value;
+                }
+                const options = mostRelevantFormatColumn.DisplayFormat.Options;
+                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'NumberFormatter') {
                     // change the Number format - if the scope allows it
-                    if (this.api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
-                        valueFormatter = (params) => {
-                            return this.api.formatColumnApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
-                        };
+                    if (this.api.scopeApi.isColumnInNumericScope(abColumn, mostRelevantFormatColumn.Scope)) {
+                        return this.api.formatColumnApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
                     }
                 }
-                if (formatColumn.DisplayFormat.Formatter === 'DateFormatter') {
+                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'DateFormatter') {
                     // change the Date format - if the scope allows it
-                    if (this.api.scopeApi.isColumnInDateScope(abColumn, formatColumn.Scope)) {
-                        valueFormatter = (params) => {
-                            return this.api.formatColumnApi.getDateFormattedValue(params.value, params.node, abColumn, options);
-                        };
+                    if (this.api.scopeApi.isColumnInDateScope(abColumn, mostRelevantFormatColumn.Scope)) {
+                        return this.api.formatColumnApi.getDateFormattedValue(params.value, params.node, abColumn, options);
                     }
                 }
-                if (formatColumn.DisplayFormat.Formatter === 'StringFormatter') {
+                if (mostRelevantFormatColumn.DisplayFormat.Formatter === 'StringFormatter') {
                     // change the String format - if the scope allows it
-                    if (this.api.scopeApi.isColumnInStringsScope(abColumn, formatColumn.Scope)) {
-                        valueFormatter = (params) => {
-                            return this.api.formatColumnApi.getStringFormattedValue(params.value, params.node, abColumn, options);
-                        };
+                    if (this.api.scopeApi.isColumnInStringsScope(abColumn, mostRelevantFormatColumn.Scope)) {
+                        return this.api.formatColumnApi.getStringFormattedValue(params.value, params.node, abColumn, options);
                     }
                 }
-                if (valueFormatter) {
-                    return (params) => {
-                        const rulePasses = this.api.formatColumnApi.isFormatColumnActiveForColumn(formatColumn, abColumn, params);
-                        return rulePasses ? valueFormatter(params) : params.value;
-                    };
-                }
-            }
+                // should NEVER arrive at this line, but just to be sure
+                return value;
+            };
         });
     }
     setupColumnEditable({ col }) {
@@ -3699,14 +3675,14 @@ class Adaptable {
         firstInfo.trigger == 'tick' ? this.filterOnTickingDataChange() : this.filterOnEditDataChange();
     }
     getExpressionStylesChanges(dataChangedScope, cellDataChangedInfos) {
-        const stylesWithExpression = [];
-        stylesWithExpression.push(...this.api.formatColumnApi.getFormatColumnsWithExpression());
-        if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(stylesWithExpression)) {
+        const formatColumnsWithExpression = [];
+        formatColumnsWithExpression.push(...this.api.formatColumnApi.getFormatColumnsWithExpression());
+        if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(formatColumnsWithExpression)) {
             return;
         }
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
             if (!dataChangedScope.wholeRow) {
-                stylesWithExpression.forEach((styleModule) => {
+                formatColumnsWithExpression.forEach((styleModule) => {
                     if (!dataChangedScope.wholeRow) {
                         const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(styleModule.Rule.BooleanExpression);
                         if (columnIds.includes(cellDataChangedInfo.column.columnId)) {

package/src/agGrid/PercentBarRenderer.js

@@ -4,6 +4,7 @@ exports.getPercentBarRendererForColumn = void 0;
 const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
+const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
 const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
     if (!columnStyle.PercentBarStyle) {
         return;
@@ -56,6 +57,15 @@ const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
                     textEl.className = 'ab-PercentBar__text';
                     textEl.style.lineHeight = '1.2';
                     if (percentBarStyle.CellText.includes('CellValue')) {
+                        const activeFormatColumnsWithDisplayFormat = api.formatColumnApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+                        const [formatColumn] = api.formatColumnApi.getFormatColumnsRelevantForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node: params.node, value });
+                        if (formatColumn && api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
+                            const options = formatColumn.DisplayFormat.Options;
+                            value = api.formatColumnApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
+                        }
+                        else {
+                            value = (0, FormatHelper_1.NumberFormatter)(value, { FractionDigits: 2 });
+                        }
                         textEl.innerText = value;
                     }
                     if (percentBarStyle.CellText.includes('PercentageValue')) {

package/src/agGrid/weightedAverage.js

@@ -79,22 +79,30 @@ const cellSummaryWeightedAverage = ({ numericColumns, selectedCellInfo, adaptabl
                 sumPrimaryValues += weightedGridCell.rawValue * gridCell.normalisedValue;
             }
         });
-        if (isValid) {
-            const formatColumn = adaptableApi.formatColumnApi.getFormatColumnForColumnId(columnId);
-            if (formatColumn && formatColumn.DisplayFormat) {
-                const options = formatColumn.DisplayFormat
-                    .Options;
-                if (options) {
-                    return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, options);
-                }
+        if (!isValid) {
+            return '';
+        }
+        const abColumn = adaptableApi.columnApi.getColumnFromId(columnId);
+        if (!abColumn) {
+            return '';
+        }
+        const activeFormatColumnsWithDisplayFormat = adaptableApi.formatColumnApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+        if (activeFormatColumnsWithDisplayFormat.length === 1 &&
+            activeFormatColumnsWithDisplayFormat[0].DisplayFormat.Formatter === 'NumberFormatter') {
+            // there only one FormatColumn on this column, so we will use it to format the aggregated value
+            const [singleActiveFormatColumnsWithDisplayFormat] = activeFormatColumnsWithDisplayFormat;
+            const options = singleActiveFormatColumnsWithDisplayFormat
+                .DisplayFormat.Options;
+            if (options) {
+                return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, options);
             }
+        }
+        else {
+            // there are multiple (possibly conflicting) FormatColumns for this column, we cannot know which to use
             return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, {
                 FractionDigits: 2,
             });
         }
-        else {
-            return '';
-        }
     }
 };
 exports.cellSummaryWeightedAverage = cellSummaryWeightedAverage;

package/src/components/CheckBox/index.js

@@ -46,7 +46,7 @@ const CheckBox = (_a) => {
             opacity: 0,
             cursor: 'pointer',
         }, onChange: onInputChange }));
-    return (React.createElement(rebass_1.Box, Object.assign({ my: 2 }, props, { className: (0, join_1.default)('ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: Object.assign({ display: 'inline-flex', flexFlow: 'row', alignItems: 'center', cursor: 'pointer', position: 'relative' }, props.style), as: as }),
+    return (React.createElement(rebass_1.Box, Object.assign({ my: 2 }, props, { className: (0, join_1.default)('ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as }),
         before,
         beforeGap,
         input,

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -19,6 +19,7 @@ const DocumentationLinkConstants_1 = require("../../Utilities/Constants/Document
 const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const icons_1 = require("../icons");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const VarEditorButton = () => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -39,6 +40,7 @@ function BaseEditorInput(props) {
     let evaluationError;
     let expressionError;
     let selectedFunctionName;
+    const baseClassName = 'ab-ExpressionEditorInput';
     const buildParserExceptionMessage = (e) => {
         const parserExceptionSummary = 'Invalid expression is not parsable';
         if (!e.message) {
@@ -101,55 +103,34 @@ function BaseEditorInput(props) {
             props.onSelectedFunctionChange(selectedFunctionName ? expressionFunctions[selectedFunctionName] : null);
         }
     }, [selectedFunctionName]);
-    const functionsDropdown = (React.createElement(OverlayTrigger_1.default, { render: () => (React.createElement(rebass_1.Flex, { "data-name": "expression-dropdown-list", flexDirection: "column", p: 2, style: {
-                fontSize: 'var(--ab-font-size-2)',
-                border: '1px solid var(--ab-color-primarydark)',
-                borderRadius: 'var(--ab__border-radius)',
-                background: 'var(--ab-color-primarylight)',
-                zIndex: 1000,
-                maxHeight: 300,
-                overflow: 'auto',
-            } }, Object.keys(expressionFunctions)
+    const functionsDropdown = (React.createElement(OverlayTrigger_1.default, { render: () => (React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list`, "data-name": "expression-dropdown-fuctions-list", flexDirection: "column", p: 2 }, Object.keys(expressionFunctions)
             .filter((functionName) => !expressionFunctions[functionName].isHiddenFromMenu)
             .map((functionName) => functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton_1.default, { data: `${functionName}()`, key: functionName, mr: 1 }, functionName))))), showEvent: "focus", hideEvent: "blur" },
         React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
-            React.createElement(rebass_1.Flex, { marginRight: 1, style: { fontSize: 'var(--ab-font-size-2)' } },
-                React.createElement(icons_1.Icon, { name: 'equation', style: { marginTop: 0 } })))));
+            React.createElement(rebass_1.Flex, { marginRight: 1, fontSize: 2 },
+                React.createElement(icons_1.Icon, { name: "equation" })))));
     const operatorButtons = props.editorButtons
         .filter((editorButtonDef) => !!expressionFunctions[editorButtonDef.functionName])
         .map((editorButtonDef) => (React.createElement(EditorButton_1.default, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName))));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { "data-name": "expression-toolbar", py: 2, mb: 2, flexWrap: "wrap", style: {
-                background: 'var(--ab-color-primarylight)',
-                borderRadius: 'var(--ab__border-radius)',
-                '--ab-overlay-horizontal-align': 'left',
-                width: '100%',
-                marginTop: 5,
-            } },
+        React.createElement(rebass_1.Flex, { className: baseClassName, "data-name": "expression-toolbar", py: 2, mb: 2, mt: 2, flexWrap: "wrap" },
             React.createElement(rebass_1.Flex, { style: { flex: 1, marginLeft: 5 }, flexWrap: "wrap" },
                 functionsDropdown,
                 operatorButtons),
             showDocumentationLink && (React.createElement(rebass_1.Flex, { alignItems: "flex-start" },
-                React.createElement(ButtonInfo_1.ButtonInfo, { style: {
-                        color: 'var(--ab-color-text-on-add)',
-                        fill: 'var(--ab-color-text-on-add)',
-                        background: 'var(--ab-color-action-add)',
-                        marginRight: 5,
-                    }, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
-        React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: "ab-ExpressionEditor__textarea", autoFocus: true, spellCheck: "false", onChange: (event) => {
+                React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
+        React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: (0, join_1.default)('ab-ExpressionEditor__textarea', // left for backwards compatibility
+            `${baseClassName}__textarea`), autoFocus: true, spellCheck: "false", onChange: (event) => {
                 props.onChange(event.target.value);
-            }, style: Object.assign({ width: '100%', minHeight: 100, fontFamily: 'monospace', resize: 'vertical', fontSize: '1rem', padding: 'var(--ab-space-2)' }, style) }),
-        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
+            }, style: style }),
+        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 },
             "This Query must resolve to a ",
             React.createElement("b", null, "boolean "),
             "(i.e. true / false) value")),
-        expressionError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
+        expressionError && (React.createElement(ErrorBox_1.default, { width: "100%", style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
         evaluationError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
-        !props.hideResultPreview && result !== undefined && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-feedback", mt: 2, p: 2, style: {
-                background: 'var(--ab-color-primarylight)',
-                borderRadius: 'var(--ab__border-radius)',
-            } },
+        !props.hideResultPreview && result !== undefined && (React.createElement(rebass_1.Box, { className: `${baseClassName}__editor-feedback`, "data-name": "expression-editor-feedback", mt: 2, p: 2 },
             React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } },
                 "Result (using Test Data): ",
                 React.createElement("b", null, JSON.stringify(result)))))));