@adaptabletools/adaptable 13.0.0-canary.9 → 13.0.0

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -27,7 +27,7 @@ const ListBoxFilterForm = (props) => {
         internalUpdateUISelectedColumnValues(props.uiSelectedColumnValues);
     }, [props.uiSelectedColumnValues]);
     const renderItemForAgGridStyle = (props) => {
-        return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1 })));
+        return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1, title: typeof props.children === 'string' ? props.children : null })));
     };
     const onClickItemColumnValue = (item) => {
         const index = UiSelectedColumnValues.indexOf(item);
@@ -59,6 +59,7 @@ const ListBoxFilterForm = (props) => {
                 checked: isActive,
                 onChange: () => onClickItemColumnValue(distinctValue.value),
                 disabled: props.disabled,
+                style: { width: '100%' },
             });
         }
         return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -142,21 +142,15 @@ class QuickFilterFormComponent extends React.Component {
             showQuickFilterInput = !hideQuickFilterInputFunction(this.props.currentColumn);
         }
         return (React.createElement(React.Fragment, null,
-            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', alignHorizontal: "left", targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", style: {
-                    overflowY: 'auto',
-                    fontSize: 'var(--ab-font-size-2)',
-                    border: '1px solid var(--ab-color-primarydark)',
-                    background: 'var(--ab-color-defaultbackground)',
-                }, render: () => (React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": "quick-filter" },
-                    (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) && (React.createElement(React.Fragment, null,
-                        React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
-                            React.createElement("span", { style: { width: 20, marginRight: 10 } },
-                                React.createElement(icons_1.Icon, { name: "delete" })),
-                            "Clear"))),
-                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
+            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', alignHorizontal: "left", targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": "quick-filter" },
+                    (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) && (React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
+                        React.createElement("span", { style: { width: 20, marginRight: 10 } },
+                            React.createElement(icons_1.Icon, { name: "delete" })),
+                        "Clear")),
+                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { "data-name": filter.Predicate.PredicateId, disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } }, this.renderPredicateIcon(p)),
                         p.label))))) },
-                React.createElement(SimpleButton_1.default, { style: {
+                React.createElement(SimpleButton_1.default, { "data-name": filter.Predicate.PredicateId, style: {
                         borderRadius: 0,
                         borderColor: 'var(--ab-color-primarydark)',
                     } }, this.renderPredicateIcon(activePredicateDef)))),

package/src/View/Components/NewScopeComponent.js

@@ -130,9 +130,9 @@ const NewScopeComponent = (props) => {
     }
     return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
-            React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "Whole Row"))),
+            React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
         React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
-            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Columns")),
+            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns")),
         React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
             React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types")),
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
@@ -144,6 +144,6 @@ const NewScopeComponent = (props) => {
                 React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
             React.createElement(rebass_1.Flex, { paddingLeft: 2, flex: 1, style: { overflow: 'hidden' } },
                 React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged }))),
-        React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { key: dataTypeOption.value, "data-name": "scope", checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))));
+        React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))));
 };
 exports.NewScopeComponent = NewScopeComponent;

package/src/View/Components/Panels/PanelWithButton.js

@@ -21,11 +21,7 @@ class PanelWithButton extends React.Component {
                 React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-before" }),
                 this.props.headerText,
                 React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { style: {
-                        color: 'var(--ab-color-text-on-add)',
-                        fill: 'var(--ab-color-text-on-add)',
-                        background: 'var(--ab-color-action-add)',
-                    }, onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                     ) }))),
             React.createElement(rebass_1.Box, { style: { flex: 1 } }),
             buttonContent ? (React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: this.props.buttonDisabled, onClick: () => (this.props.buttonClick ? this.props.buttonClick() : null) }, buttonContent)) : null,

package/src/View/Components/Panels/PanelWithImage.js

@@ -26,11 +26,7 @@ class PanelWithImageCmp extends React.Component {
                     React.createElement(rebass_1.Box, { marginRight: 2 }),
                     this.props.header,
                     React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { style: {
-                            color: 'var(--ab-color-text-on-add)',
-                            fill: 'var(--ab-color-text-on-add)',
-                            background: 'var(--ab-color-action-add)',
-                        }, onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                         ) }))),
                 React.createElement(rebass_1.Box, { flex: 1 }),
                 this.props.button && React.cloneElement(this.props.button))));

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -71,9 +71,9 @@ const AdaptablePopup = (props) => {
                 }
             },
         } },
-        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
+        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
             !isStandalone && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
-            React.createElement(rebass_1.Flex, { "data-name": props.componentName, flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
+            React.createElement(rebass_1.Flex, { flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
                 !isStandalone && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
                 React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.d.ts

@@ -8,4 +8,5 @@ export declare const AdaptablePopupDialog: React.FunctionComponent<React.PropsWi
     onHide: () => void;
     style?: React.CSSProperties;
     modalContainer?: string | HTMLElement;
+    dataName?: string;
 }>>;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js

@@ -46,19 +46,6 @@ const PopupDialog = (props) => {
 };
 const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
-    const elementRef = React.useMemo(() => {
-        if (!modalContainer) {
-            return null;
-        }
-        let ref = null;
-        if (typeof modalContainer === 'string') {
-            ref = globalThis.document.querySelector(modalContainer);
-        }
-        else {
-            ref = modalContainer;
-        }
-        return ref;
-    }, [modalContainer]);
     if (modalContainer) {
         let ref = null;
         if (typeof modalContainer === 'string') {
@@ -67,15 +54,15 @@ const AdaptablePopupDialog = (props) => {
         else {
             ref = modalContainer;
         }
-        return (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
+        return (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
     }
     if (isWindowModal) {
         const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
-        return (React.createElement(WindowDialog, { settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
+        return (React.createElement(WindowDialog, { dataName: props.dataName, settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
     }
     else {
         const modalStyle = Object.assign(Object.assign({}, style), (isActionModule ? { maxWidth: 800, maxHeight: 600 } : { maxWidth: 1200, maxHeight: 1000 }));
-        return (React.createElement(PopupDialog, { onHide: onHide, style: modalStyle, className: className }, children));
+        return (React.createElement(PopupDialog, { "data-name": props.dataName, onHide: onHide, style: modalStyle, className: className }, children));
     }
 };
 exports.AdaptablePopupDialog = AdaptablePopupDialog;

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.js

@@ -15,7 +15,7 @@ const PopupPanel = (props) => {
                 React.createElement(rebass_1.Box, { marginRight: 0, "data-name": "space-before" }),
                 React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
                 React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
                     ) }))),
             React.createElement(rebass_1.Box, { style: { flex: 1 } }),
             props.button),

package/src/View/Components/Popups/AdaptablePopupTeamSharing.js

@@ -34,17 +34,17 @@ const AdaptablePopupTeamSharing = (props) => {
                             ": a \"live\" share that is automatically updated with every local change"))),
                 React.createElement(FormLayout_1.default, { padding: 2 },
                     React.createElement(FormLayout_1.FormRow, { label: "Name: " },
-                        React.createElement(Input_1.default, { autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
+                        React.createElement(Input_1.default, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
                     React.createElement(FormLayout_1.FormRow, { label: "Share: " },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Radio_1.default, { checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
+                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
                             ' ',
-                            React.createElement(Radio_1.default, { marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
+                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
                             ' '))),
                 React.createElement(rebass_1.Box, { marginTop: 3 },
                     React.createElement(rebass_1.Flex, { padding: 2 },
-                        React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => onClose(), "data-name": "cancel" }, "Cancel"),
+                        React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
                         React.createElement("div", { style: { flex: 1 } }),
-                        React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
+                        React.createElement(SimpleButton_1.default, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
 };
 exports.AdaptablePopupTeamSharing = AdaptablePopupTeamSharing;

package/src/View/Components/RangesComponent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { CellColorRange, ColumnComparison } from '../../PredefinedConfig/FormatColumnState';
+import { CellColorRange, ColumnComparison } from '../../PredefinedConfig/StyledColumnState';
 import { AdaptableScope } from '../../PredefinedConfig/Common/AdaptableScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
@@ -10,6 +10,11 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     showRangeDirection: boolean;
     updateRanges: (ranges: CellColorRange[]) => void;
     updateColumnComparison: (columnComparison?: ColumnComparison) => void;
+    minMaxRangeValues: {
+        min: number;
+        max: number;
+    };
+    disabled?: boolean;
 }
 export interface RangesComponentState {
     ranges: CellColorRange[];
@@ -25,6 +30,8 @@ export declare class RangesComponent extends React.Component<RangesComponentProp
     changeRangeColor(index: number, value: string): void;
     changeRangeDirectionUp(index: number, checked: boolean): void;
     removeRange(index: number): void;
+    setRangeColMin(range: CellColorRange): void;
+    setRangeColMax(range: CellColorRange): void;
     addRange(): void;
     changeColumnComparisonMinValue(event: React.FormEvent<any>): void;
     private onMinColumnSelectedChanged;

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,17 +24,7 @@ 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;
-        unmountReactRoot?: VoidFunction;
-        init(params?: IToolPanelParams): void;
-        getGui(): HTMLElement;
-        refresh(): void;
-        destroy(): void;
-    };
-};
-export declare const AdaptableToolPanelAgGridComponent: {
+export declare const getAdaptableToolPanelAgGridComponent: (adaptable: IAdaptable) => (() => JSX.Element) | {
     new (): {
         gui: HTMLElement;
         unmountReactRoot?: VoidFunction;