@adaptabletools/adaptable 13.0.0-canary.2 → 13.0.0-canary.20

package/src/View/Components/ScopeComponent.js

@@ -32,31 +32,31 @@ class ScopeComponent extends React.Component {
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, displayMessage),
                     ' ',
                     React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", padding: 2 },
-                        React.createElement(Radio_1.default, { value: "Row", checked: this.state.ScopeChoice == 'All', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Whole Row"),
+                        React.createElement(Radio_1.default, { value: "Row", checked: this.state.ScopeChoice == 'All', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "All Columns"),
                         ' ',
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: "Column", checked: this.state.ScopeChoice == 'Column', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Column(s)"),
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: "Column", checked: this.state.ScopeChoice == 'Column', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Selected Column(s)"),
                         ' ',
                         React.createElement(Radio_1.default, { marginLeft: 3, value: "DataType", checked: this.state.ScopeChoice == 'DataType', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "DataType(s)")),
                     this.state.ScopeChoice == 'Column' && (React.createElement(rebass_1.Box, { marginBottom: 2, "data-name": "column-scope" },
                         React.createElement(DualListBoxEditor_1.DualListBoxEditor, { style: { flex: 1, overflow: 'hidden', height: '250px' }, AvailableValues: availableValues, SelectedValues: this.state.selectedColumnValues, HeaderAvailable: "Columns", HeaderSelected: "Columns In Style", onChange: (SelectedValues) => this.onColumnsSelectedChanged(SelectedValues) }))),
                     this.state.ScopeChoice == 'DataType' && (React.createElement(Panel_1.default, { "data-name": "datatype-scope", variant: "modern" },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            this.state.availableDataTypes.includes('Date') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Date') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "date", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('Date'), marginLeft: 2, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'Date') }, "Date")),
-                            this.state.availableDataTypes.includes('Number') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Number') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "number", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('Number'), marginLeft: 4, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'Number') }, "Number")),
-                            this.state.availableDataTypes.includes('String') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('String') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "string", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)
                                         .includes('String'), marginLeft: 4, onChange: (checked) => this.onCheckBoxDataTypeChecked(checked, 'String') }, "String")),
-                            this.state.availableDataTypes.includes('Boolean') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", checked: this.state.componentScope &&
+                            this.state.availableDataTypes.includes('Boolean') && (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": "boolean", checked: this.state.componentScope &&
                                     'DataTypes' in this.state.componentScope &&
                                     this.props.api.scopeApi
                                         .getDataTypesInScope(this.state.componentScope)

package/src/View/Components/Selectors/ColumnSelector.d.ts

@@ -9,6 +9,7 @@ export interface ColumnSelectorProps extends React.HTMLProps<ColumnSelector> {
     className?: string;
     placeHolder?: string;
     showClearButton?: boolean;
+    disabled?: boolean;
 }
 export declare class ColumnSelector extends React.Component<ColumnSelectorProps, {}> {
     render(): JSX.Element;

package/src/View/Components/Selectors/ColumnSelector.js

@@ -23,6 +23,7 @@ class ColumnSelector extends React.Component {
             return {
                 label: column.friendlyName,
                 value: column.columnId,
+                disabled: this.props.disabled,
                 onClick: () => {
                     const selected = sortedColumns.filter((c) => c.columnId === column.columnId);
                     if (!selected.length) {
@@ -40,7 +41,7 @@ class ColumnSelector extends React.Component {
         return (React.createElement("div", { "data-name": 'column-selector' },
             React.createElement(FormLayout_1.default, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
                 React.createElement(FormLayout_1.FormRow, null,
-                    React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, className: "ab-DashboardToolbar__Layout__select", items: sortedColumnOptions, disabled: sortedColumnOptions.length == 0 }, currentColumnName)))));
+                    React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, className: "ab-DashboardToolbar__Layout__select", items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
     }
     onClearButton() {
         this.props.onColumnChange([]);

package/src/View/Components/Selectors/ColumnValueSelector.js

@@ -74,8 +74,8 @@ class ColumnValueSelector extends React.Component {
             ]
             : this.state.distinctColumnValues;
         const dd = (React.createElement("div", null,
-            React.createElement(DropdownButton_1.default, { className: className, columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: items, onExpand: this.handleSelectedValueExpand }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
-        const input = (React.createElement(AdaptableInput_1.default, { type: this.props.selectedColumn
+            React.createElement(DropdownButton_1.default, { "data-name": "bulkupdate-value-selector", className: className, columns: ['label'], variant: "text", showClearButton: true, onClear: () => this.onSelectedValueChange([]), style: { fontSize: 'small' }, disabled: this.props.disabled, items: items, onExpand: this.handleSelectedValueExpand }, this.props.selectedColumnValue ? this.props.selectedColumnValue : placeholderText)));
+        const input = (React.createElement(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", type: this.props.selectedColumn
                 ? UIHelper_1.default.getDescriptionForDataType(this.props.selectedColumn.dataType)
                 : 'text', placeholder: this.props.selectedColumn
                 ? UIHelper_1.default.getPlaceHolderforDataType(this.props.selectedColumn.dataType)

package/src/View/Components/StyleComponent.js

@@ -25,7 +25,7 @@ class StyleComponent extends React.Component {
         };
     }
     render() {
-        const Cmp = this.props.headless ? React.Fragment : Panel_1.default;
+        const Cmp = this.props.headless ? rebass_1.Box : Panel_1.default;
         const cmpProps = this.props.headless
             ? {}
             : {
@@ -36,15 +36,15 @@ class StyleComponent extends React.Component {
         const styleClassNames = this.props.api.userInterfaceApi.getStyleClassNames();
         const colourSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('Colour');
         const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
-        return (React.createElement(Cmp, Object.assign({}, cmpProps),
+        return (React.createElement(Cmp, Object.assign({}, cmpProps, { className: "ab-StyleComponent" }),
             ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
-                React.createElement(Radio_1.default, { value: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "Use Style Class Name"),
+                React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "Predicate", checked: this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(checked) }, "Use Style Class Name"),
                 ' ',
-                React.createElement(Radio_1.default, { marginLeft: 3, value: "Expression", checked: !this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(!checked) }, "Create Style"),
+                React.createElement(Radio_1.default, { "data-name": "create-style", marginLeft: 3, value: "Expression", checked: !this.state.ShowClassName, onChange: (checked) => this.onShowClassNameChanged(!checked) }, "Create Style"),
                 ' ')),
             this.state.ShowClassName ? (React.createElement("div", null,
                 React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'Select a CSS Class Name'),
-                React.createElement(DropdownButton_1.default, { margin: 3, placeholder: "Select", variant: "outlined", columns: ['label'], tone: "none", disabled: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames), style: {
+                React.createElement(DropdownButton_1.default, { "data-name": "select-class-anme", margin: 3, placeholder: "Select", variant: "outlined", columns: ['label'], tone: "none", disabled: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames), style: {
                         minWidth: '15rem',
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
@@ -64,35 +64,30 @@ class StyleComponent extends React.Component {
                             coloursSpellingVariant),
                         React.createElement(FormLayout_1.default, { columns: [1, 2] },
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
                                     "Set Back ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
                                     "Set Fore ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
                                     "Set Border ",
                                     colourSpellingVariant),
                                 this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
                         React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
                         React.createElement(FormLayout_1.default, { columns: [1] },
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: Enums_1.FontWeight.Normal.toString(), checked: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onChange: (checked) => this.onFontWeightChange(checked) }, "Bold")),
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-weight-bold", margin: 1, value: Enums_1.FontWeight.Normal.toString(), checked: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onChange: (checked) => this.onFontWeightChange(checked) }, "Bold")),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, value: Enums_1.FontStyle.Normal.toString(), checked: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onChange: (checked) => this.onFontStyleChange(checked) }, "Italic")),
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-style-italic", margin: 1, value: Enums_1.FontStyle.Normal.toString(), checked: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onChange: (checked) => this.onFontStyleChange(checked) }, "Italic")),
                             React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { margin: 1, checked: this.state.componentStyle.FontSize ? true : false, onChange: (checked) => this.onUseFontSizeCheckChange(checked) }, "Set Font Size")),
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-font-size", margin: 1, checked: this.state.componentStyle.FontSize ? true : false, onChange: (checked) => this.onUseFontSizeCheckChange(checked) }, "Set Font Size")),
                             React.createElement(FormLayout_1.FormRow, null, this.state.componentStyle.FontSize != null && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
-                                React.createElement(DropdownButton_1.default, { style: {
-                                        whiteSpace: 'nowrap',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        maxWidth: 'inherit',
-                                    }, mr: 1, items: EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
+                                React.createElement(DropdownButton_1.default, { mr: 1, items: EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
                                         value: enumName,
                                         label: enumName,
                                         onClick: () => this.onFontSizeChange(enumName),
@@ -145,12 +140,12 @@ class StyleComponent extends React.Component {
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onFontWeightChange(checked) {
-        let fontWeight = checked ? Enums_1.FontWeight.Bold : Enums_1.FontWeight.Normal;
+        let fontWeight = checked ? Enums_1.FontWeight.Bold : undefined;
         this.state.componentStyle.FontWeight = fontWeight;
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onFontStyleChange(checked) {
-        let fontStyle = checked ? Enums_1.FontStyle.Italic : Enums_1.FontStyle.Normal;
+        let fontStyle = checked ? Enums_1.FontStyle.Italic : undefined;
         this.state.componentStyle.FontStyle = fontStyle;
         this.props.UpdateStyle(this.state.componentStyle);
     }

package/src/View/Components/ToolPanel/AdaptableToolPanel.d.ts

@@ -24,20 +24,14 @@ interface AdaptableToolPanelProps {
     onCollapseToolPanel: (toolPanel: AdaptableToolPanel | string) => ToolPanelRedux.ToolPanelCollapseToolPanelAction;
 }
 export declare const ConnectedAdaptableToolPanel: import("react-redux").ConnectedComponent<(props: AdaptableToolPanelProps) => JSX.Element, import("react-redux").Omit<AdaptableToolPanelProps, "onClick" | "Columns" | "ModuleButtons" | "ToolPanels" | "MainMenuItems" | "onNewColumnListOrder" | "onShowToolPanel" | "onHideToolPanel" | "onExpandToolPanel" | "onCollapseToolPanel">>;
-export declare const getAdaptableToolPanelAgGridComponent: (adaptable?: IAdaptable) => {
-    new (): {
-        gui: HTMLElement;
-        init(params?: IToolPanelParams): void;
-        getGui(): HTMLElement;
-        refresh(): void;
-    };
-};
-export declare const AdaptableToolPanelAgGridComponent: {
+export declare const getAdaptableToolPanelAgGridComponent: (adaptable: IAdaptable) => (() => JSX.Element) | {
     new (): {
         gui: HTMLElement;
+        unmountReactRoot?: VoidFunction;
         init(params?: IToolPanelParams): void;
         getGui(): HTMLElement;
         refresh(): void;
+        destroy(): void;
     };
 };
 export {};

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableToolPanelAgGridComponent = exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
+exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
 const react_redux_1 = require("react-redux");
-const react_dom_1 = require("react-dom");
 const rebass_1 = require("rebass");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const icons_1 = require("../../../components/icons");
@@ -226,19 +225,32 @@ function mapDispatchToProps(dispatch) {
     };
 }
 exports.ConnectedAdaptableToolPanel = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
+const toolPanelContainerStyle = {
+    width: '100%',
+    overflow: 'auto',
+};
 const getAdaptableToolPanelAgGridComponent = (adaptable) => {
+    function getContainerId() {
+        return 'adaptable-tool-panel_' + adaptable.adaptableOptions.adaptableId;
+    }
+    if (adaptable.variant === 'react') {
+        return () => {
+            const content = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
+            return (React.createElement("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle }, content));
+        };
+    }
     return class AdaptableToolPanelAgGridComponent {
         init(params) {
-            const agGridApi = params.api;
-            const Adaptable = agGridApi.__adaptable || adaptable;
-            const api = Adaptable.api;
+            const api = adaptable.api;
             this.gui = document.createElement('div');
-            this.gui.id = 'adaptable-tool-panel_' + Adaptable.adaptableOptions.adaptableId;
+            this.gui.id = getContainerId();
             // preserve ag-grid naming convention
             this.gui.className = 'ag-adaptable-panel';
-            this.gui.style.width = '100%';
-            this.gui.style.overflow = 'auto';
-            (0, react_dom_1.render)((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), Adaptable), this.gui);
+            Object.keys(toolPanelContainerStyle).forEach((key) => {
+                //@ts-ignore
+                this.gui.style[key] = toolPanelContainerStyle[key];
+            });
+            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
         }
         getGui() {
             if (!this.gui) {
@@ -249,7 +261,10 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
         refresh() {
             // no refresh logic needed
         }
+        destroy() {
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
     };
 };
 exports.getAdaptableToolPanelAgGridComponent = getAdaptableToolPanelAgGridComponent;
-exports.AdaptableToolPanelAgGridComponent = (0, exports.getAdaptableToolPanelAgGridComponent)();

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -34,7 +34,7 @@ const CustomToolPanelContent = (props) => {
             if (hasCustomRenderFn(customToolPanel)) {
                 customToolPanel.render({ visible: false, element, adaptableApi: api });
             }
-            else if (hasCustomFrameworkComponent(customToolPanel)) {
+            else if (hasCustomFrameworkComponent(customToolPanel) && !api.isDestroyed()) {
                 api.internalApi.destroyFrameworkComponent(element, customToolPanel.frameworkComponent, 'toolPanel');
             }
         };

package/src/View/Components/ToolPanel/ToolPanelPopup.d.ts

@@ -23,5 +23,5 @@ declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComp
     onShowGridPropertiesChanged(event: React.FormEvent<any>): void;
     onToolPanelToolPanelsChanged(selectedValues: AdaptableToolPanels): void;
 }
-export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<React.ClassAttributes<ToolPanelPopupComponent> & ToolPanelPopupComponentProps, "key" | "ref" | "onSuspend" | "api" | "modalContainer" | "moduleInfo" | "accessLevel" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "onUnSuspend" | "ToolPanelState" | "GridState" | "onToolPanelSetModuleButtons" | "onToolPanelSetToolPanels">>;
+export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, import("react-redux").Omit<React.ClassAttributes<ToolPanelPopupComponent> & ToolPanelPopupComponentProps, "key" | "ref" | "onSuspend" | "api" | "accessLevel" | "modalContainer" | "moduleInfo" | "onUnSuspend" | "teamSharingActivated" | "ToolPanelState" | "popupParams" | "onClearPopupParams" | "onClosePopup" | "GridState" | "onToolPanelSetModuleButtons" | "onToolPanelSetToolPanels">>;
 export {};

package/src/View/ConditionalStyle/ConditionalStylePopupHeader.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ConditionalStylePopupHeader: React.FunctionComponent;

package/src/View/ConditionalStyle/ConditionalStylePopupHeader.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConditionalStylePopupHeader = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const ConditionalStylePopupHeader = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    return (React.createElement(HelpBlock_1.default, null,
+        "Conditional Styles are deprecated, use",
+        ' ',
+        React.createElement(SimpleButton_1.default, { onClick: () => adaptable.api.settingsPanelApi.showSettingsPanel('FormatColumn'), variant: "outlined" }, "Format Columns"),
+        ' ',
+        "instead."));
+};
+exports.ConditionalStylePopupHeader = ConditionalStylePopupHeader;

package/src/View/ConditionalStyle/Wizard/ConditionalStyleRuleWizardSection.js

@@ -28,15 +28,15 @@ function ConditionalStyleRuleWizardSection(props) {
                 useBooleanQuery: (React.createElement(React.Fragment, null,
                     "Use an BooleanQuery if ",
                     React.createElement("i", null, "Scope"),
-                    " is 'Whole Row' - so any data change may be evaluated in a complex BooleanExpression")),
+                    " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
                 useObservableQuery: (React.createElement(React.Fragment, null,
                     "Use an ObservableQuery if ",
                     React.createElement("i", null, "Scope"),
-                    " is 'Whole Row' - so any data change may be evaluated in a complex ObservableExpression")),
+                    " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression")),
                 useAggregationQuery: (React.createElement(React.Fragment, null,
                     "Use an AggregatedBooleanQuery if ",
                     React.createElement("i", null, "Scope"),
-                    " is 'Whole Row' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+                    " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
             } })));
 }
 exports.ConditionalStyleRuleWizardSection = ConditionalStyleRuleWizardSection;

package/src/View/ConditionalStyle/Wizard/ConditionalStyleSettingsWizardSettings.js

@@ -24,6 +24,6 @@ const ConditionalStyleSettingsWizardSettings = (props) => {
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Include Grouped Rows:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "inlcude-grouped-rows", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
 };
 exports.ConditionalStyleSettingsWizardSettings = ConditionalStyleSettingsWizardSettings;

package/src/View/ConditionalStyle/Wizard/ConditionalStyleWizard.js

@@ -16,7 +16,6 @@ const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const react_redux_1 = require("react-redux");
-const ConditionalStyleRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ConditionalStyleRedux"));
 const ConditionalStyleSettingsWizardSettings_1 = require("./ConditionalStyleSettingsWizardSettings");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const ConditionalStyleWizard = (props) => {
@@ -43,16 +42,7 @@ const ConditionalStyleWizard = (props) => {
         return conditionalStyle;
     });
     const dispatch = (0, react_redux_1.useDispatch)();
-    const handleFinish = () => {
-        if (data) {
-            dispatch(ConditionalStyleRedux.ConditionalStyleEdit(conditionalStyle));
-        }
-        else {
-            dispatch(ConditionalStyleRedux.ConditionalStyleAdd(conditionalStyle));
-        }
-        props.onCloseWizard();
-    };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: conditionalStyle, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: conditionalStyle, onHide: props.onCloseWizard, sections: [
             {
                 title: 'Style',
                 details: 'Specify the Style to be applied conditionally',

package/src/View/DataSet/DataSetSelector.js

@@ -14,6 +14,6 @@ const DataSetSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.dataSetApi.setDataSet(data.name);
     }, [isSelected]);
-    return React.createElement(Radio_1.default, { id: data.name, disabled: isDisabled, checked: isSelected, onClick: handleToggle });
+    return (React.createElement(Radio_1.default, { "data-name": "select-dataset-button", "data-value": data.name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };
 exports.DataSetSelector = DataSetSelector;

package/src/View/DataSet/DataSetViewPanel.d.ts

@@ -15,5 +15,5 @@ declare class DataSetViewPanelComponent extends React.Component<DataSetViewPanel
     render(): JSX.Element;
     onSelectedDataSetChanged(dataSetName: string): void;
 }
-export declare let DataSetViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSetViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<DataSetViewPanelComponent> & DataSetViewPanelComponentProps, "api" | "moduleInfo" | "accessLevel" | "viewType" | "CurrentDataSetName" | "onSelectDataSet">>;
+export declare let DataSetViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSetViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<DataSetViewPanelComponent> & DataSetViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "viewType" | "CurrentDataSetName" | "onSelectDataSet">>;
 export {};

package/src/View/Export/ExportViewPanel.d.ts

@@ -25,5 +25,5 @@ declare class ExportViewPanelComponent extends React.Component<ExportViewPanelCo
     private isCustomDestination;
     private onNewReportSchedule;
 }
-export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "Columns" | "CurrentReport" | "CurrentDestination" | "moduleInfo" | "accessLevel" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "UserReports">>;
+export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "CurrentReport" | "CurrentDestination" | "Columns" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "UserReports">>;
 export {};

package/src/View/Export/ExportViewPanel.js

@@ -84,7 +84,7 @@ class ExportViewPanelComponent extends React.Component {
                 React.createElement(DropdownButton_1.default, { disabled: currentReportId === constants_1.SELECT_REPORT_STRING, width: "100%", fontSize: "small", items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
             React.createElement(rebass_1.Flex, { className: (0, join_1.default)(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
                 React.createElement(ButtonExport_1.ButtonExport, { onClick: () => onApplyExport(), tooltip: "Export Report", className: `ab-${elementType}__Export__export`, disabled: currentReport == null || currentDestination == null }),
-                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || this.props.api.exportApi.isCustomReport(currentReport), accessLevel: accessLevel }),
+                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || this.props.api.exportApi.isServerReport(currentReport), accessLevel: accessLevel }),
                 React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => this.props.onNewReport(this.props.moduleInfo.Popup), tooltip: "Create New Report", accessLevel: accessLevel }),
                 React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Report", className: `ab-${elementType}__Export__delete`, disabled: currentReport == null, ConfirmAction: ExportRedux.ReportDelete(currentReport), ConfirmationMsg: deleteMessage, ConfirmationTitle: 'Delete Report', accessLevel: accessLevel }),
                 this.props.api.internalApi
@@ -102,9 +102,9 @@ class ExportViewPanelComponent extends React.Component {
             ...this.props.api.exportApi.getAvailableSystemReports(),
             ...this.props.UserReports.map((r) => r.Name),
         ];
-        const customReports = this.props.api.exportApi.getAllCustomReports();
-        if (ArrayExtensions_1.default.IsNotNullOrEmpty(customReports)) {
-            reportNames.push(...customReports.map((r) => r.name));
+        const serverReports = this.props.api.exportApi.getAllServerReports();
+        if (ArrayExtensions_1.default.IsNotNullOrEmpty(serverReports)) {
+            reportNames.push(...serverReports.map((r) => r.name));
         }
         return reportNames;
     }

package/src/View/Export/ReportExportDropdown.js

@@ -32,7 +32,7 @@ const ReportExportDropdown = (props) => {
     if ((report === null || report === void 0 ? void 0 : report.Name) === GeneralConstants_1.VISUAL_DATA_REPORT) {
         destinationItems.forEach((item) => (item.disabled = item.label === Enums_1.ExportDestination.Excel ? false : true));
     }
-    return (React.createElement(DropdownButton_1.default, { columns: ['label'], tooltip: "Export Report", variant: "text", items: destinationItems },
+    return (React.createElement(DropdownButton_1.default, { "data-name": "export-dropdown", columns: ['label'], tooltip: "Export Report", variant: "text", items: destinationItems },
         React.createElement(icons_1.Icon, { name: "export" })));
 };
 exports.ReportExportDropdown = ReportExportDropdown;

package/src/View/Export/Wizard/ReportNameWizardSection.js

@@ -33,16 +33,15 @@ const ReportNameWizardSection = (props) => {
     const { api, data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const validCheck = (0, exports.isValidReportName)(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Box, null,
-            React.createElement(FormLayout_1.default, { columns: [1, 2] },
-                React.createElement(FormLayout_1.FormRow, null,
-                    React.createElement(rebass_1.Text, { marginRight: 2 }, "Name:"),
-                    React.createElement(Input_1.default, { width: "100%", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
-                            props.onChange(Object.assign(Object.assign({}, data), { Name: e.target.value }));
-                        } })),
-                React.createElement(FormLayout_1.FormRow, null,
-                    React.createElement(React.Fragment, null),
-                    ErrorMessage ? React.createElement(ErrorBox_1.default, null, ErrorMessage) : null)))));
+    return (React.createElement(rebass_1.Box, null,
+        React.createElement(FormLayout_1.default, { columns: [1, 2] },
+            React.createElement(FormLayout_1.FormRow, null,
+                React.createElement(rebass_1.Text, { marginRight: 2 }, "Name:"),
+                React.createElement(Input_1.default, { "data-name": "export-name", width: "100%", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
+                        props.onChange(Object.assign(Object.assign({}, data), { Name: e.target.value }));
+                    } })),
+            React.createElement(FormLayout_1.FormRow, null,
+                React.createElement(React.Fragment, null),
+                ErrorMessage ? React.createElement(ErrorBox_1.default, null, ErrorMessage) : null))));
 };
 exports.ReportNameWizardSection = ReportNameWizardSection;

package/src/View/Filter/FilterSummary.d.ts

@@ -12,4 +12,4 @@ export declare class FilterSummaryComponent extends React.Component<FilterSummar
     render(): any;
     getDescription(columnFilter: ColumnFilter): string;
 }
-export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, import("react-redux").Omit<React.ClassAttributes<FilterSummaryComponent> & FilterSummaryProps, "ColumnFilters" | "onClearPopupParams" | "onShare" | "onClearFilter">>;
+export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, import("react-redux").Omit<React.ClassAttributes<FilterSummaryComponent> & FilterSummaryProps, "ColumnFilters" | "onShare" | "onClearPopupParams" | "onClearFilter">>;

package/src/View/Filter/FilterViewPanel.d.ts

@@ -18,5 +18,5 @@ declare class FilterViewPanelComponent extends React.Component<FilterViewPanelCo
     private onClearFilters;
     private onClearColumnFilter;
 }
-export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<FilterViewPanelComponent> & FilterViewPanelComponentProps, "api" | "Columns" | "ColumnFilters" | "moduleInfo" | "accessLevel" | "IsQuickFilterVisible" | "viewType" | "onHideQuickFilterBar" | "onShowQuickFilterBar" | "Entitlements">>;
+export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<FilterViewPanelComponent> & FilterViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "Columns" | "ColumnFilters" | "IsQuickFilterVisible" | "viewType" | "onHideQuickFilterBar" | "onShowQuickFilterBar" | "Entitlements">>;
 export {};

package/src/View/FlashingCell/FlashingCellStyle.js

@@ -8,13 +8,13 @@ const StylePreview_1 = require("../../components/StylePreview");
 const FlashingCellStyle = (props) => {
     const { data } = props, boxProps = tslib_1.__rest(props, ["data"]);
     return (react_1.default.createElement(rebass_1.Flex, Object.assign({ flexDirection: "row" }, boxProps),
-        react_1.default.createElement(StylePreview_1.StylePreview, { mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "up-style", mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
             "Up ",
             !props.data.UpChangeStyle ? ' - no style' : ''),
-        react_1.default.createElement(StylePreview_1.StylePreview, { mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "down-style", mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
             "Down",
             !props.data.DownChangeStyle ? ' - no style' : ''),
-        react_1.default.createElement(StylePreview_1.StylePreview, { flex: 1, styleObject: props.data.NeutralChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "neutral-style", flex: 1, styleObject: props.data.NeutralChangeStyle },
             "Neutral ",
             !props.data.NeutralChangeStyle ? ' - no style' : '')));
 };

package/src/View/FlashingCell/Wizard/FlashingCellRulesWizardSection.js

@@ -36,15 +36,15 @@ const FlashingAlertRulesWizardSection = (props) => {
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex BooleanExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
             useObservableQuery: (React.createElement(React.Fragment, null,
                 "Use an ObservableQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex ObservableExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression")),
             useAggregationQuery: (React.createElement(React.Fragment, null,
                 "Use an AggregatedBooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
         } }));
 };
 exports.FlashingAlertRulesWizardSection = FlashingAlertRulesWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.js

@@ -64,23 +64,23 @@ const FlashingAlertSettingsWizardSection = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Duration Type" },
-                        React.createElement(Radio_1.default, { mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
-                        React.createElement(Radio_1.default, { checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
+                        React.createElement(Radio_1.default, { "data-name": "duration-type-always", mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
+                        React.createElement(Radio_1.default, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
                         duration !== 'always' && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "baseline" },
                             React.createElement(rebass_1.Text, { fontSize: 2, mr: 2 }, "After"),
-                            React.createElement(Input_1.default, { readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
+                            React.createElement(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
                                     const value = event.target.value;
                                     setDuration(isNaN(Number(value)) ? 500 : Number(value));
                                 } }),
                             React.createElement(rebass_1.Text, { fontSize: 2 }, "milliseconds"))),
                         duration === 'always' && (React.createElement(rebass_1.Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
                     React.createElement(FormLayout_1.FormRow, { label: "Flash Target" },
-                        React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'cell' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'cell' ||
                                 ((_c = (_b = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, 'cell')), tabIndex: -1 }, "Cell"),
-                        React.createElement(CheckBox_1.CheckBox, { mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'row' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'row' ||
                                 ((_e = (_d = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _d === void 0 ? void 0 : _d.includes) === null || _e === void 0 ? void 0 : _e.call(_d, 'row')), tabIndex: -1 }, "Row"),
-                        React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'aggFuncCell' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'aggFuncCell' ||
                                 ((_g = (_f = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _f === void 0 ? void 0 : _f.includes) === null || _g === void 0 ? void 0 : _g.call(_f, 'aggFuncCell')), tabIndex: -1 }, "Aggregated Function Cell")))))));
 };
 exports.FlashingAlertSettingsWizardSection = FlashingAlertSettingsWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -44,9 +44,6 @@ const FlashingCellWizard = (props) => {
         UpChangeStyle: (0, react_1.useCallback)(updateProperty('UpChangeStyle'), []),
         NeutralChangeStyle: (0, react_1.useCallback)(updateProperty('NeutralChangeStyle'), []),
     };
-    const flashStyleComponent = (React.createElement(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
-            updateStyles[styleName](style);
-        } }));
     const dispatch = (0, react_redux_1.useDispatch)();
     const handleFinish = () => {
         if (props.data) {
@@ -81,7 +78,10 @@ const FlashingCellWizard = (props) => {
             },
             {
                 details: 'Choose the Flashing Styles',
-                render: () => React.createElement(rebass_1.Box, { padding: 2 }, flashStyleComponent),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
+                            updateStyles[styleName](style);
+                        } }))),
                 renderSummary: FlashingCellStyleWizardSection_1.renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },

package/src/View/FormatColumn/FormatColumnSummary.js

@@ -35,7 +35,7 @@ class FormatColumnSummaryComponent extends React.Component {
         this.state = UIHelper_1.UIHelper.getEmptyConfigState();
     }
     render() {
-        let formatColumn = this.props.api.formatColumnApi.getFormatColumnForColumn(this.props.summarisedColumn);
+        const [formatColumn] = this.props.api.formatColumnApi.getFormatColumnsForColumn(this.props.summarisedColumn);
         let noFormatColumn = formatColumn == null;
         let formatColumnRow;
         if (noFormatColumn) {