@adaptabletools/adaptable 13.0.0-canary.17 → 13.0.0-canary.19

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -99,14 +99,14 @@ const ScheduleScheduleWizard = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Frequency" },
-                        React.createElement(Radio_1.default, { mr: 2, value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
-                        React.createElement(Radio_1.default, { checked: props.isOneOff, value: "oneoff", onChange: (checked) => checked && handleIsOneOfChange(true) }, "One-Off Date")),
+                        React.createElement(Radio_1.default, { "data-name": "frequency-recurring", mr: 2, value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
+                        React.createElement(Radio_1.default, { "data-name": "frequency-one-off", checked: props.isOneOff, value: "oneoff", onChange: (checked) => checked && handleIsOneOfChange(true) }, "One-Off Date")),
                     props.isOneOff ? (React.createElement(FormLayout_1.FormRow, { label: "Date" },
-                        React.createElement(AdaptableInput_1.default, { width: 300, type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: ((_e = data.Schedule) === null || _e === void 0 ? void 0 : _e.OneOffDate) || '' }))) : (React.createElement(FormLayout_1.FormRow, { label: "Days" }, daysMap.map((day) => {
+                        React.createElement(AdaptableInput_1.default, { "data-name": "one-off-date", width: 300, type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: ((_e = data.Schedule) === null || _e === void 0 ? void 0 : _e.OneOffDate) || '' }))) : (React.createElement(FormLayout_1.FormRow, { label: "Days" }, daysMap.map((day) => {
                         var _a, _b;
-                        return (React.createElement(CheckBox_1.CheckBox, { width: "33%", ml: 2, value: day.value, checked: (_b = (_a = data.Schedule) === null || _a === void 0 ? void 0 : _a.DaysOfWeek) === null || _b === void 0 ? void 0 : _b.includes(day.value), key: day.value, onChange: (checked) => handleDayChange(checked, day.value) }, day.label));
+                        return (React.createElement(CheckBox_1.CheckBox, { "data-name": `day-${day.value}`, width: "33%", ml: 2, value: day.value, checked: (_b = (_a = data.Schedule) === null || _a === void 0 ? void 0 : _a.DaysOfWeek) === null || _b === void 0 ? void 0 : _b.includes(day.value), key: day.value, onChange: (checked) => handleDayChange(checked, day.value) }, day.label));
                     }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Time" },
-                        React.createElement(AdaptableInput_1.default, { width: 300, value: timeValue, type: "time", onChange: handleTimeChange })))))));
+                        React.createElement(AdaptableInput_1.default, { "data-name": "time", width: 300, value: timeValue, type: "time", onChange: handleTimeChange })))))));
 };
 exports.ScheduleScheduleWizard = ScheduleScheduleWizard;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsGlue42.js

@@ -20,6 +20,6 @@ const ScheduleSettingsGlue42 = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { width: 300, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.glue42) === null || _a === void 0 ? void 0 : _a.Glue42Report) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-report", width: 300, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.glue42) === null || _a === void 0 ? void 0 : _a.Glue42Report) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
 };
 exports.ScheduleSettingsGlue42 = ScheduleSettingsGlue42;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsIPushPull.js

@@ -33,14 +33,14 @@ const ScheduleSettingsIPushPull = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { disabled: props.allReports.length == 0, items: reportOptions, style: { width: 300 } }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _a === void 0 ? void 0 : _a.IPushPullReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "report-name", disabled: props.allReports.length == 0, items: reportOptions, style: { width: 300 } }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _a === void 0 ? void 0 : _a.IPushPullReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Folder" },
-                        React.createElement(DropdownButton_1.default, { disabled: props.allFolders.length == 0, items: folderOptions, style: { width: 300 } }, ((_d = (_c = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _c === void 0 ? void 0 : _c.IPushPullReport) === null || _d === void 0 ? void 0 : _d.Folder) || 'Select Folder')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "folder-name", disabled: props.allFolders.length == 0, items: folderOptions, style: { width: 300 } }, ((_d = (_c = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _c === void 0 ? void 0 : _c.IPushPullReport) === null || _d === void 0 ? void 0 : _d.Folder) || 'Select Folder')),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Page" },
-                        React.createElement(DropdownButton_1.default, { disabled: props.allFolders.length == 0, items: pagesOptions, style: { width: 300 } }, ((_f = (_e = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _e === void 0 ? void 0 : _e.IPushPullReport) === null || _f === void 0 ? void 0 : _f.Page) || 'Select Page')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "page-name", disabled: props.allFolders.length == 0, items: pagesOptions, style: { width: 300 } }, ((_f = (_e = props === null || props === void 0 ? void 0 : props.iPushPull) === null || _e === void 0 ? void 0 : _e.IPushPullReport) === null || _f === void 0 ? void 0 : _f.Page) || 'Select Page')),
                     React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
-                        React.createElement(Radio_1.default, { mr: 3, value: "Snapshot", checked: props.iPushPull.Transmission === 'Snapshot', onChange: (checked) => checked && handleDataTypeChange('Snapshot') }, "Snapshot (one off report)"),
-                        React.createElement(Radio_1.default, { value: "Live Data", checked: props.iPushPull.Transmission === 'Live Data', onChange: (checked) => checked && handleDataTypeChange('Live Data') }, "Live Data (real-time updates)")),
+                        React.createElement(Radio_1.default, { "data-name": "data-type", mr: 3, value: "Snapshot", checked: props.iPushPull.Transmission === 'Snapshot', onChange: (checked) => checked && handleDataTypeChange('Snapshot') }, "Snapshot (one off report)"),
+                        React.createElement(Radio_1.default, { "data-name": "data-live", value: "Live Data", checked: props.iPushPull.Transmission === 'Live Data', onChange: (checked) => checked && handleDataTypeChange('Live Data') }, "Live Data (real-time updates)")),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
                         React.createElement(OnePageAdaptableWizard_1.FormDescriptionText, null, "Choose whether to send ipushpull Data as 'Snapshot' (One-off report) or 'Live Data' (updating as Grid updates)")))))));
 };

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsOpenFin.js

@@ -20,6 +20,6 @@ const ScheduleSettingsOpenFin = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.openFin) === null || _a === void 0 ? void 0 : _a.OpenFinReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-report", columns: ['label'], style: { width: 300 }, disabled: props.allReports.length == 0, items: reportOptions }, ((_b = (_a = props === null || props === void 0 ? void 0 : props.openFin) === null || _a === void 0 ? void 0 : _a.OpenFinReport) === null || _b === void 0 ? void 0 : _b.ReportName) || 'Select Report')))))));
 };
 exports.ScheduleSettingsOpenFin = ScheduleSettingsOpenFin;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js

@@ -39,14 +39,14 @@ const ScheduleSettingsReminder = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Input_1.default, { width: 300, onChange: handleHeaderChange, placeholder: "Enter Reminder Header (optional)", type: "string", value: (_a = props.reminderSchedule) === null || _a === void 0 ? void 0 : _a.Header })),
+                        React.createElement(Input_1.default, { "data-name": "header", width: 300, onChange: handleHeaderChange, placeholder: "Enter Reminder Header (optional)", type: "string", value: (_a = props.reminderSchedule) === null || _a === void 0 ? void 0 : _a.Header })),
                     React.createElement(FormLayout_1.FormRow, { label: "Message" },
-                        React.createElement(Input_1.default, { width: 300, onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: (_b = props.reminderSchedule) === null || _b === void 0 ? void 0 : _b.Message })),
+                        React.createElement(Input_1.default, { "data-name": "message", width: 300, onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: (_b = props.reminderSchedule) === null || _b === void 0 ? void 0 : _b.Message })),
                     React.createElement(FormLayout_1.FormRow, { label: "Type" },
-                        React.createElement(DropdownButton_1.default, { style: { width: 300 }, columns: ['label'], placeholder: "Select Option", items: messageTypes }, ((_c = props.reminderSchedule) === null || _c === void 0 ? void 0 : _c.MessageType) || 'Select Option')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "message-type", style: { width: 300 }, columns: ['label'], placeholder: "Select Option", items: messageTypes }, ((_c = props.reminderSchedule) === null || _c === void 0 ? void 0 : _c.MessageType) || 'Select Option')),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(CheckBox_1.CheckBox, { checked: (_d = props.reminderSchedule) === null || _d === void 0 ? void 0 : _d.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as an Alert")),
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "display-notification", checked: (_d = props.reminderSchedule) === null || _d === void 0 ? void 0 : _d.DisplayNotification, onChange: handleDisplayNotificationChange }, "Show the Reminder as an Alert")),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(CheckBox_1.CheckBox, { checked: (_e = props.reminderSchedule) === null || _e === void 0 ? void 0 : _e.DisplaySystemStatusMessage, onChange: handleDisplaySystemStatusChange }, "Display a System Status Message")))))));
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "display-system-status", checked: (_e = props.reminderSchedule) === null || _e === void 0 ? void 0 : _e.DisplaySystemStatusMessage, onChange: handleDisplaySystemStatusChange }, "Display a System Status Message")))))));
 };
 exports.ScheduleSettingsReminder = ScheduleSettingsReminder;

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReport.js

@@ -29,8 +29,8 @@ const ScheduleSettingsReport = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Export" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, items: reportOptions }, ((_a = props === null || props === void 0 ? void 0 : props.report) === null || _a === void 0 ? void 0 : _a.ReportName) || 'Select Report')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-report", columns: ['label'], style: { width: 300 }, items: reportOptions }, ((_a = props === null || props === void 0 ? void 0 : props.report) === null || _a === void 0 ? void 0 : _a.ReportName) || 'Select Report')),
                     React.createElement(FormLayout_1.FormRow, { label: "Destination" },
-                        React.createElement(DropdownButton_1.default, { columns: ['label'], style: { width: 300 }, items: destinationOptions }, ((_b = props === null || props === void 0 ? void 0 : props.report) === null || _b === void 0 ? void 0 : _b.ExportDestination) || 'Select Destination')))))));
+                        React.createElement(DropdownButton_1.default, { "data-name": "select-destination", columns: ['label'], style: { width: 300 }, items: destinationOptions }, ((_b = props === null || props === void 0 ? void 0 : props.report) === null || _b === void 0 ? void 0 : _b.ExportDestination) || 'Select Destination')))))));
 };
 exports.ScheduleSettingsReport = ScheduleSettingsReport;

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -65,17 +65,17 @@ const ShortcutSettingsWizard = (props) => {
                 React.createElement(FormLayout_1.default, { width: 400 },
                     React.createElement(FormLayout_1.FormRow, { label: "Key" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(DropdownButton_1.default, { style: { flex: 1 }, marginRight: 3, items: optionKeys, columns: ['label'] }, shortcut.ShortcutKey || 'Select Key'),
+                            React.createElement(DropdownButton_1.default, { "data-name": "shortcut-key", style: { flex: 1 }, marginRight: 3, items: optionKeys, columns: ['label'] }, shortcut.ShortcutKey || 'Select Key'),
                             React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: "Shortcut: Key", bodyText: ['The keyboard key that, when pressed, triggers the shortcut.'] }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Operation" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(DropdownButton_1.default, { style: { flex: 1 }, marginRight: 3, items: optionActions, columns: ['label'] }, shortcut.ShortcutOperation || 'Select Operation'),
+                            React.createElement(DropdownButton_1.default, { "data-name": "shortcut-operation", style: { flex: 1 }, marginRight: 3, items: optionActions, columns: ['label'] }, shortcut.ShortcutOperation || 'Select Operation'),
                             React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Shortcut: Operation', bodyText: [
                                     "The mathematical operation that is performed on the cell's current value - using the shortcut's 'value' - in order to calculate the new total for the cell.",
                                 ] }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Value" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Input_1.default, { flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: (_a = shortcut.ShortcutValue) !== null && _a !== void 0 ? _a : '' }),
+                            React.createElement(Input_1.default, { "data-name": "shortcut-value", flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: (_a = shortcut.ShortcutValue) !== null && _a !== void 0 ? _a : '' }),
                             React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Shortcut: Value', bodyText: [
                                     "The number that is used - together with the shortcut's mathematical 'operation' and the current cell value - in order to calculate the new total for the cell.",
                                 ] }))))))));

package/src/View/SmartEdit/SmartEditPopup.js

@@ -59,11 +59,11 @@ class SmartEditPopupComponent extends React.Component {
                 }
             } },
             React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "smart-edit-operation" },
-                React.createElement(DropdownButton_1.default, { items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
+                React.createElement(DropdownButton_1.default, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
                     ? this.props.SmartEditOperation.name
                     : this.props.SmartEditOperation),
-                React.createElement(Input_1.default, { value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
-                React.createElement(SimpleButton_1.default, { tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
+                React.createElement(Input_1.default, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
+                React.createElement(SimpleButton_1.default, { "data-name": "smart-edit-apply-button", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                         (this.props.PreviewInfo &&
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), onClick: () => {
                         this.submit();

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -38,17 +38,17 @@ const SpecialColumnSettingsWizardStep = (props) => {
                             { size: '30%', name: 'third' },
                         ] },
                         React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.internalApi.getAdaptableOptions().filterOptions
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.internalApi.getAdaptableOptions().filterOptions
                                     .enableFilterOnSpecialColumns }, "Filterable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
                         React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
                         React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
-                            React.createElement(CheckBox_1.CheckBox, { checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
                             React.createElement(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
         Boolean(possibleColumnTypes === null || possibleColumnTypes === void 0 ? void 0 : possibleColumnTypes.length) && (React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Column Types"),
@@ -56,8 +56,8 @@ const SpecialColumnSettingsWizardStep = (props) => {
                 React.createElement(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, (_b = (0, chunk_1.default)(possibleColumnTypes !== null && possibleColumnTypes !== void 0 ? possibleColumnTypes : [], 2)) === null || _b === void 0 ? void 0 : _b.map(([first, second]) => {
                     var _a, _b, _c, _d, _e, _f;
                     return (React.createElement(FormLayout_1.FormRow, { key: first },
-                        first && (React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleColumnTypeChange(first, checked), checked: (_c = (_b = (_a = props.settings) === null || _a === void 0 ? void 0 : _a.ColumnTypes) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, first) }, first)),
-                        second && (React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleColumnTypeChange(second, checked), checked: (_f = (_e = (_d = props.settings) === null || _d === void 0 ? void 0 : _d.ColumnTypes) === null || _e === void 0 ? void 0 : _e.includes) === null || _f === void 0 ? void 0 : _f.call(_e, second) }, second))));
+                        first && (React.createElement(CheckBox_1.CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: (_c = (_b = (_a = props.settings) === null || _a === void 0 ? void 0 : _a.ColumnTypes) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, first) }, first)),
+                        second && (React.createElement(CheckBox_1.CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: (_f = (_e = (_d = props.settings) === null || _d === void 0 ? void 0 : _d.ColumnTypes) === null || _e === void 0 ? void 0 : _e.includes) === null || _f === void 0 ? void 0 : _f.call(_e, second) }, second))));
                 })))))));
 };
 exports.SpecialColumnSettingsWizardStep = SpecialColumnSettingsWizardStep;

package/src/View/StateManagement/StateManagementPopup.js

@@ -15,18 +15,18 @@ const StateManagementPopup = (props) => {
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "user-state", header: 'User State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginBottom: 2 }, 'Clear all current user state that has been persisted.'),
             React.createElement(HelpBlock_1.default, null, 'This will cause this window to close and any state you have previously created will be lost and the initial Predefined Config will then be reapplied.'),
-            React.createElement(ClearButton_1.ClearButton, { tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
+            React.createElement(ClearButton_1.ClearButton, { "data-name": "clear-user-state-button", tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "predefined-config", header: 'Load Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginTop: 2 }, 'Load Predefined Config (from a .json file).  This will cause this window to close.'),
             ' ',
-            React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json) }, "Load Predefined Config")),
+            React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json), "data-name": "load-predefined-config-button" }, "Load Predefined Config")),
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "adaptable-state", header: 'Export Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the currently persisted Adaptable state.'),
             ' ',
-            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination")),
+            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-adaptable-state-dropdown" }, "Select Export Destination")),
         React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "initial-predefined-config", header: 'Export Initial Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
             React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the Predefined Config which was provided at design time.'),
             ' ',
-            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination"))));
+            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-initial-predefined-config-dropdown" }, "Select Export Destination"))));
 };
 exports.StateManagementPopup = StateManagementPopup;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection.js

@@ -104,15 +104,11 @@ const StyledColumnWizardStyleSection = (props) => {
     };
     // percentbar
     const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
-        const PercentBarStyle = {
-            ColumnComparison: columnComparison,
-        };
+        const PercentBarStyle = Object.assign(Object.assign({}, data.PercentBarStyle), { ColumnComparison: columnComparison });
         props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
     };
     const onUpdatePercentBarStyleRanges = (ranges) => {
-        const PercentBarStyle = {
-            CellRanges: ranges,
-        };
+        const PercentBarStyle = Object.assign(Object.assign({}, data.PercentBarStyle), { CellRanges: ranges });
         props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
     };
     const onPercentBarCellTextCellValueChanged = (checked) => {

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/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;
             }
         })
@@ -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

@@ -57,12 +57,9 @@ const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
                     textEl.className = 'ab-PercentBar__text';
                     textEl.style.lineHeight = '1.2';
                     if (percentBarStyle.CellText.includes('CellValue')) {
-                        let preparedValue = value;
-                        const formatColumn = api.formatColumnApi.getFormatColumnWithDisplayFormatForColumn(abColumn);
-                        if (formatColumn &&
-                            !formatColumn.IsSuspended &&
-                            formatColumn.DisplayFormat &&
-                            api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
+                        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);
                         }

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,