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

package/src/View/Components/RangesComponent.js

@@ -54,22 +54,27 @@ class RangesComponent extends React.Component {
             this.state.rangesType == 'Standard' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
                 React.createElement(Tabs_1.Tabs.Tab, null, "Ranges"),
                 React.createElement(Tabs_1.Tabs.Content, null, (_a = this.state.ranges) === null || _a === void 0 ? void 0 :
-                    _a.map((range, index) => (React.createElement(rebass_1.Flex, { key: index, mb: 2, "data-name": "percent-bar-range" },
-                        React.createElement(Input_1.default, { type: "number", value: range.Min, onChange: (event) => {
-                                const { value } = event.target;
-                                this.changeRangeMin(index, value);
-                            }, mr: 2 }),
-                        React.createElement(Input_1.default, { type: "number", value: range.Max, onChange: (event) => {
-                                const { value } = event.target;
-                                this.changeRangeMax(index, value);
-                            }, mr: 2 }),
-                        React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
-                                this.changeRangeColor(index, color);
-                            }, mr: 2, height: "100%" }),
-                        this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, marginRight: 2, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
-                        React.createElement(SimpleButton_1.default, { icon: "delete", disabled: this.state.ranges && this.state.ranges.length == 1, onClick: () => this.removeRange(index) })))),
+                    _a.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
+                        React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                            index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
+                            React.createElement(Input_1.default, { type: typeof range.Min == 'number' ? 'number' : 'text', disabled: this.props.disabled || range.Min === 'Col-Min', value: range.Min, onChange: (event) => {
+                                    const { value } = event.target;
+                                    this.changeRangeMin(index, value);
+                                }, mr: 2 })),
+                        React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                            index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 1, onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', fontSize: 3, disabled: this.props.disabled }, "Col Max")),
+                            React.createElement(Input_1.default, { value: range.Max, type: typeof range.Max == 'number' ? 'number' : 'text', disabled: this.props.disabled || range.Max === 'Col-Max', onChange: (event) => {
+                                    const { value } = event.target;
+                                    this.changeRangeMax(index, value);
+                                }, mr: 2 })),
+                        React.createElement(rebass_1.Flex, { alignItems: "center", height: "100%" },
+                            React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+                                    this.changeRangeColor(index, color);
+                                }, mr: 2, height: 33 })),
+                        this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { disabled: this.props.disabled, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
+                        React.createElement(SimpleButton_1.default, { ml: 2, mb: 1, icon: "delete", disabled: this.props.disabled || (this.state.ranges && this.state.ranges.length == 1), onClick: () => this.removeRange(index) })))),
                     React.createElement("div", null,
-                        React.createElement(SimpleButton_1.default, { variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
+                        React.createElement(SimpleButton_1.default, { disabled: this.props.disabled, variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
             this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
                 React.createElement(Tabs_1.Tabs.Tab, null, "Column Comparison"),
                 React.createElement(Tabs_1.Tabs.Content, null,
@@ -80,14 +85,14 @@ class RangesComponent extends React.Component {
                             this.props.api.internalApi.getCorrectEnglishVariant('Colour'),
                             " for the Bar."),
                         React.createElement(FormLayout_1.default, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
-                            React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(Input_1.default, { type: "number", value: comparisonMinValueNumber, onChange: (e) => {
+                            React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(Input_1.default, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (e) => {
                                         this.changeColumnComparisonMinValue(e);
-                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMinValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMinColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
+                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMinValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMinColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
                             ' ',
-                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(Input_1.default, { type: "number", value: comparisonMaxValueNumber, onChange: (e) => {
+                            React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(Input_1.default, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (e) => {
                                         this.changeColumnComparisonMaxValue(e);
-                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
-                            React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: comparisonColor, onChange: (color) => {
+                                    } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { disabled: this.props.disabled, style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
+                            React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                         this.changeColumnComparisonColor(color);
                                     } }) }))))))));
     }
@@ -144,14 +149,45 @@ class RangesComponent extends React.Component {
         ranges.splice(index, 1);
         this.props.updateRanges(ranges);
     }
+    setRangeColMin(range) {
+        const newRanges = this.state.ranges.map((rangeItem) => {
+            if (rangeItem === range) {
+                let newMin = rangeItem.Min === 'Col-Min' ? this.props.minMaxRangeValues.min : 'Col-Min';
+                return Object.assign(Object.assign({}, rangeItem), { Min: newMin });
+            }
+            return rangeItem;
+        });
+        this.setState({ ranges: newRanges }, () => this.props.updateRanges(this.state.ranges));
+    }
+    setRangeColMax(range) {
+        const newRanges = this.state.ranges.map((rangeItem) => {
+            if (rangeItem === range) {
+                let newMax = rangeItem.Max === 'Col-Max' ? this.props.minMaxRangeValues.max : 'Col-Max';
+                return Object.assign(Object.assign({}, rangeItem), { Max: newMax });
+            }
+            return rangeItem;
+        });
+        this.setState({ ranges: newRanges }, () => this.props.updateRanges(this.state.ranges));
+    }
     addRange() {
         const lastRange = this.state.ranges[this.state.ranges.length - 1];
-        this.state.ranges.push({
-            Min: lastRange.Max == 'Col-Max' ? 0 : lastRange.Max,
+        let previousRange = lastRange;
+        let Min = null;
+        if (lastRange.Max === 'Col-Max') {
+            Min = this.props.minMaxRangeValues.max;
+            previousRange = Object.assign(Object.assign({}, previousRange), { Max: this.props.minMaxRangeValues.max });
+        }
+        else {
+            Min = lastRange.Max;
+        }
+        const newRange = {
+            Min,
             Max: lastRange.Max,
             Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
-        }),
-            this.props.updateRanges(this.state.ranges);
+        };
+        const newRanges = [...this.state.ranges.slice(0, -1), previousRange, newRange];
+        // this.state.ranges.push(newRange);
+        this.setState({ ranges: newRanges }, () => this.props.updateRanges(this.state.ranges));
     }
     changeColumnComparisonMinValue(event) {
         let e = event.target;

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/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;