@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.2

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PercentBarStylePreview = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const getText = (options) => {
+    let text = '';
+    if (options && options.includes('CellValue')) {
+        text += '20';
+    }
+    if (options && options.includes('PercentageValue')) {
+        text += ' (50%)';
+    }
+    return text.trim();
+};
+const PercentBarStylePreview = (props) => {
+    const cellText = getText(props.cellText);
+    const tooltip = getText(props.toolTipText);
+    return (React.createElement(rebass_1.Box, { title: tooltip, flex: 1 },
+        React.createElement(rebass_1.Flex, { height: cellText ? 8 : 18, backgroundColor: props.backgroundColor, flex: 1 },
+            React.createElement(rebass_1.Box, { flexBasis: "50%", style: { background: props.barBackgroundColor } })),
+        cellText && React.createElement(rebass_1.Box, { fontSize: 3 }, cellText)));
+};
+exports.PercentBarStylePreview = PercentBarStylePreview;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../../PredefinedConfig/StyledColumnState';
+import { AdaptableApi } from '../../../../types';
+export declare const renderFormatColumnStyleWizardSummary: (data: StyledColumn) => JSX.Element;
+export declare const renderStyledColumnStyleSummary: (data: StyledColumn, api: AdaptableApi) => JSX.Element;
+export interface StyledColumnWizardStyleSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+}
+export declare const StyledColumnWizardStyleSection: React.FunctionComponent<StyledColumnWizardStyleSectionProps>;

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

@@ -0,0 +1,263 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardStyleSection = exports.renderStyledColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const ErrorBox_1 = tslib_1.__importDefault(require("../../../../components/ErrorBox"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const ColorPicker_1 = require("../../../../components/ColorPicker");
+const RangesComponent_1 = require("../../../Components/RangesComponent");
+const StyleVisualItem_1 = require("../../../Components/StyleVisualItem");
+const UIHelper_1 = require("../../../UIHelper");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const PercentBarColumnComparisonPreview_1 = require("./Components/PercentBarColumnComparisonPreview");
+const PercentBarRangesPreview_1 = require("./Components/PercentBarRangesPreview");
+const renderFormatColumnStyleWizardSummary = (data) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (0, exports.renderStyledColumnStyleSummary)(data, api);
+};
+exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
+const getRanges = (ranges, rangeValueType) => {
+    let postfix = '';
+    if (rangeValueType === 'Percentage') {
+        postfix = '%';
+    }
+    return ranges.map((r, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "center", mr: 3 },
+        React.createElement(rebass_1.Box, { mr: 1 },
+            r.Min,
+            postfix,
+            " to ",
+            r.Max,
+            postfix,
+            ' '),
+        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
+                BackColor: r.Color,
+                ForeColor: r.Color,
+            } }))));
+};
+const getColumnComparison = (columnComparison, api) => {
+    return (React.createElement(rebass_1.Flex, { key: 'cc', alignItems: "center", mr: 3 },
+        React.createElement(rebass_1.Box, { mr: 1 },
+            "Min Value:",
+            ' ',
+            isNaN(Number(columnComparison.MinValue))
+                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
+                : columnComparison.MinValue,
+            ' ',
+            ", Max Value:",
+            ' ',
+            isNaN(Number(columnComparison.MaxValue))
+                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
+                : columnComparison.MaxValue,
+            ' '),
+        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
+                BackColor: columnComparison.Color,
+                ForeColor: columnComparison.Color,
+            } })));
+};
+const renderStyledColumnStyleSummary = (data, api) => {
+    if (data.CheckBoxStyle) {
+        return React.createElement(Tag_1.Tag, null, "Checkbox Style");
+    }
+    if (data.GradientStyle) {
+        if (data.GradientStyle.CellRanges) {
+            return getRanges(data.GradientStyle.CellRanges, data.GradientStyle.RangeValueType);
+        }
+        if (data.GradientStyle.ColumnComparison) {
+            return getColumnComparison(data.GradientStyle.ColumnComparison, api);
+        }
+    }
+    if (data.PercentBarStyle) {
+        if (data.PercentBarStyle.ColumnComparison) {
+            return React.createElement(PercentBarColumnComparisonPreview_1.PercentBarColumnComparisonPreview, { percentBarStyle: data.PercentBarStyle });
+        }
+        if (data.PercentBarStyle.CellRanges) {
+            return React.createElement(PercentBarRangesPreview_1.PercentBarPreview, { percentBarStyle: data.PercentBarStyle });
+        }
+    }
+    return React.createElement(Tag_1.Tag, null, "No Styling Defined");
+};
+exports.renderStyledColumnStyleSummary = renderStyledColumnStyleSummary;
+const StyledColumnWizardStyleSection = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const minMaxRangeValues = React.useMemo(() => {
+        const columnId = data.ColumnId;
+        if (!columnId) {
+            return null;
+        }
+        const column = api.columnApi.getColumnWithColumnId(columnId);
+        return {
+            min: api.styledColumnApi.internalApi.getMinValueForNumericColumn(column),
+            max: api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column),
+        };
+    }, [data]);
+    const scope = { ColumnIds: [data.ColumnId] }; // TODO: remove scope when format column columnStyle is removed
+    // gradient
+    const onUpdateGradientStyleRanges = (ranges) => {
+        const GradientStyle = Object.assign(Object.assign({}, data.GradientStyle), { CellRanges: ranges });
+        props.onChange(Object.assign(Object.assign({}, data), { GradientStyle }));
+    };
+    const onUpdateGradientStyleColumnComparison = (columnComparison) => {
+        const GradientStyle = {
+            ColumnComparison: columnComparison,
+        };
+        props.onChange(Object.assign(Object.assign({}, data), { GradientStyle }));
+    };
+    // percentbar
+    const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
+        const PercentBarStyle = Object.assign(Object.assign({}, data.PercentBarStyle), { ColumnComparison: columnComparison });
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
+    };
+    const onUpdatePercentBarStyleRanges = (ranges) => {
+        const PercentBarStyle = Object.assign(Object.assign({}, data.PercentBarStyle), { CellRanges: ranges });
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
+    };
+    const onPercentBarCellTextCellValueChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.CellText) {
+                percentBarStyle.CellText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.CellText.push('CellValue');
+            }
+        }
+        else {
+            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('PercentageValue')) {
+                percentBarStyle.CellText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.CellText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onPercentBarCellTextPercentValueChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.CellText) {
+                percentBarStyle.CellText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.CellText.push('PercentageValue');
+            }
+        }
+        else {
+            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('CellValue')) {
+                percentBarStyle.CellText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.CellText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onPercentBarToolTipTextCellValueChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.ToolTipText) {
+                percentBarStyle.ToolTipText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText.push('CellValue');
+            }
+        }
+        else {
+            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('PercentageValue')) {
+                percentBarStyle.ToolTipText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onPercentBarToolTipTextPercentValueChanged = (checked) => {
+        let percentBarStyle = data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.ToolTipText) {
+                percentBarStyle.ToolTipText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText.push('PercentageValue');
+            }
+        }
+        else {
+            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('CellValue')) {
+                percentBarStyle.ToolTipText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onUsePercentStyleColorCheckChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        percentBarStyle.BackColor = checked ? (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY) : null;
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onForeColorSelectChange = (color) => {
+        let percentBarStyle = data.PercentBarStyle;
+        percentBarStyle.BackColor = color;
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const handleRangeValueTypeChange = React.useCallback((rangeValueType) => {
+        const ranges = rangeValueType === 'Number'
+            ? api.scopeApi.createCellColorRangesForScope(scope)
+            : [
+                {
+                    Min: 0,
+                    Max: 100,
+                    Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
+                },
+            ];
+        let newStyledColumn = data;
+        const commonStyle = {
+            CellRanges: ranges,
+            RangeValueType: rangeValueType,
+        };
+        if ('GradientStyle' in newStyledColumn) {
+            newStyledColumn = Object.assign(Object.assign({}, newStyledColumn), { GradientStyle: Object.assign(Object.assign({}, newStyledColumn.GradientStyle), commonStyle) });
+        }
+        else {
+            newStyledColumn = Object.assign(Object.assign({}, newStyledColumn), { PercentBarStyle: Object.assign(Object.assign({}, newStyledColumn.PercentBarStyle), commonStyle) });
+        }
+        props.onChange(newStyledColumn);
+    }, [data]);
+    const disabled = !data.ColumnId;
+    return (React.createElement(rebass_1.Box, null,
+        data.CheckBoxStyle && (React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Check Box Column"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, readOnly: true, checked: true }, "Display Column As CheckBox")))),
+        (data === null || data === void 0 ? void 0 : data.GradientStyle) && (React.createElement(RangesComponent_1.RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: (_a = data.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges, rangeValueType: (_b = data.GradientStyle) === null || _b === void 0 ? void 0 : _b.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_c = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _c === void 0 ? void 0 : _c.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
+        data.PercentBarStyle && (React.createElement(React.Fragment, null,
+            React.createElement(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: (_d = data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.CellRanges, rangeValueType: (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_f = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _f === void 0 ? void 0 : _f.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
+            React.createElement(FormLayout_1.default, { marginLeft: 2, marginTop: 2 },
+                React.createElement(FormLayout_1.FormRow, { label: "Cell Display:" },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_h = (_g = data.PercentBarStyle) === null || _g === void 0 ? void 0 : _g.CellText) === null || _h === void 0 ? void 0 : _h.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_k = (_j = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _j === void 0 ? void 0 : _j.CellText) === null || _k === void 0 ? void 0 : _k.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
+                        "Percent Value",
+                        ' '),
+                    ' '),
+                React.createElement(FormLayout_1.FormRow, { label: "ToolTip Display:" },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_m = (_l = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.ToolTipText) === null || _m === void 0 ? void 0 : _m.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_p = (_o = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.ToolTipText) === null || _p === void 0 ? void 0 : _p.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
+                        "Percent Value",
+                        ' '),
+                    ' '),
+                React.createElement(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
+                    React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                        React.createElement(CheckBox_1.CheckBox, { disabled: disabled, checked: !!((_q = data.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
+                        ((_r = data.PercentBarStyle) === null || _r === void 0 ? void 0 : _r.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: (_s = data.PercentBarStyle) === null || _s === void 0 ? void 0 : _s.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
+        !data.ColumnId && React.createElement(ErrorBox_1.default, { mt: 2 }, "You need to select a column before styling.")));
+};
+exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/index.d.ts

@@ -0,0 +1 @@
+export * from './StyledColumnWizardStyleSection';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./StyledColumnWizardStyleSection"), exports);

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
+export declare const renderStyledColumnTypeSummary: (data: StyledColumn) => JSX.Element;
+export interface StyledColumnWizardTypeSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+}
+export declare const StyledColumnWizardTypeSection: React.FunctionComponent<StyledColumnWizardTypeSectionProps>;

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardTypeSection = exports.renderStyledColumnTypeSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const renderStyledColumnTypeSummary = (data) => {
+    let type = null;
+    if (data.GradientStyle) {
+        type = 'Gradient Column';
+    }
+    else if (data.PercentBarStyle) {
+        type = 'Percent Bar';
+    }
+    else if (data.CheckBoxStyle) {
+        type = 'Check Box';
+    }
+    else if (data.SparkLineStyle) {
+        type = 'Spark Line';
+    }
+    return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
+        "Type ",
+        React.createElement(Tag_1.Tag, null, type)));
+};
+exports.renderStyledColumnTypeSummary = renderStyledColumnTypeSummary;
+const StyledColumnWizardTypeSection = (props) => {
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleTypeChange = (type) => {
+        const newStyledColumn = Object.assign({}, data);
+        delete newStyledColumn.GradientStyle;
+        delete newStyledColumn.PercentBarStyle;
+        delete newStyledColumn.CheckBoxStyle;
+        delete newStyledColumn.SparkLineStyle;
+        switch (type) {
+            case 'gradient':
+                newStyledColumn.GradientStyle = {};
+                break;
+            case 'percent':
+                newStyledColumn.PercentBarStyle = {};
+                break;
+            case 'checkbox':
+                newStyledColumn.CheckBoxStyle = true;
+                break;
+            case 'sparkline':
+                newStyledColumn.SparkLineStyle = {
+                    options: {
+                        type: 'line',
+                    },
+                };
+                break;
+        }
+        newStyledColumn.ColumnId = null;
+        props.onChange(newStyledColumn);
+    };
+    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "styled-column-type" },
+        React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Radio_1.default, { checked: Boolean(data.GradientStyle), onChange: () => handleTypeChange('gradient') }, "Gradient Column"),
+                React.createElement(Radio_1.default, { onChange: () => handleTypeChange('percent'), checked: Boolean(data.PercentBarStyle) }, "Percent Bar"),
+                React.createElement(Radio_1.default, { onChange: () => handleTypeChange('checkbox'), checked: Boolean(data.CheckBoxStyle) }, "Check Box"),
+                React.createElement(Radio_1.default, { onChange: () => handleTypeChange('sparkline'), checked: Boolean(data.SparkLineStyle) }, "Sparkline")))));
+};
+exports.StyledColumnWizardTypeSection = StyledColumnWizardTypeSection;

package/src/View/SystemStatus/SystemStatusEntityRow.js

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

package/src/View/SystemStatus/SystemStatusViewPanel.d.ts

@@ -8,5 +8,5 @@ declare class SystemStatusViewPanelComponent extends React.Component<SystemStatu
     constructor(props: SystemStatusViewPanelComponentProps);
     render(): JSX.Element;
 }
-export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<SystemStatusViewPanelComponent> & SystemStatusViewPanelComponentProps, "api" | "moduleInfo" | "accessLevel" | "SystemStatusMessageInfos" | "viewType">>;
+export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<SystemStatusViewPanelComponent> & SystemStatusViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "SystemStatusMessageInfos" | "viewType">>;
 export {};

package/src/View/TeamSharing/SharedEntityDependencies.js

@@ -9,7 +9,7 @@ const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableObjectList_1 = require("../Components/AdaptableObjectList/AdaptableObjectList");
 const Dependencies = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const dependencies = adaptable.api.teamSharingApi.getSharedEntryDependencies(props.sharedEntity);
+    const dependencies = adaptable.api.teamSharingApi.internalApi.getSharedEntryDependencies(props.sharedEntity);
     return (React.createElement(React.Fragment, null, dependencies.map((sharedEntity) => {
         const module = adaptable.ModuleService.getModuleById('TeamSharing');
         const itemView = module.toView(sharedEntity);

package/src/View/TeamSharing/SharedEntityObjectView.js

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

package/src/View/TeamSharing/TeamSharingApplyButton.js

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

package/src/View/Theme/ThemePopup.js

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

package/src/View/Theme/ThemeStatusPanelPopover.js

@@ -7,7 +7,7 @@ const SelectList_1 = require("../../components/SelectList");
 const AdaptableContext_1 = require("../AdaptableContext");
 const ThemeStatusPanelPopover = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const themes = adaptable.api.themeApi.getAllTheme();
+    const themes = adaptable.api.themeApi.getThemes();
     const handleThemeChange = React.useCallback((option) => {
         adaptable.api.themeApi.loadTheme(option.label);
     }, []);

package/src/View/Wizard/OnePageAdaptableWizard.d.ts

@@ -11,9 +11,9 @@ export declare type OnePageAdaptableWizardContextType<T> = {
     api: AdaptableApi;
     namedQuery: ExpressionEditorNamedQuery;
 };
-export declare const SummaryTag: React.FunctionComponent<TextProps>;
-export declare const SummaryText: React.FunctionComponent<TextProps>;
-export declare const FormDescriptionText: React.FunctionComponent<TextProps>;
+export declare const SummaryTag: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+export declare const SummaryText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+export declare const FormDescriptionText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
 export declare const OnePageAdaptableWizardContext: React.Context<OnePageAdaptableWizardContextType<any>>;
 export declare function useOnePageAdaptableWizardContext<ENTITY>(): OnePageAdaptableWizardContextType<ENTITY>;
 export interface OnePageAdaptableWizardSection<ENTITY> {
@@ -22,7 +22,7 @@ export interface OnePageAdaptableWizardSection<ENTITY> {
     isValid?: (data: ENTITY, api: AdaptableApi, context: OnePageAdaptableWizardContextType<ENTITY>) => true | string;
     isVisible?: (data: ENTITY, api: AdaptableApi, context: OnePageAdaptableWizardContextType<ENTITY>) => boolean;
     render: (data: ENTITY, index: number) => React.ReactNode;
-    renderSummary?: (data: ENTITY) => React.ReactNode;
+    renderSummary?: (data: ENTITY, api: AdaptableApi) => React.ReactNode;
 }
 export interface OnePageAdaptableWizardProps<ENTITY> {
     moduleInfo: ModuleInfo;

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -13,11 +13,11 @@ const Tabs_1 = require("../../components/Tabs");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const OnePageWizards_1 = require("./OnePageWizards");
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
-const SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
+const SummaryTag = (props) => (React.createElement(rebass_1.Text, Object.assign({}, props)));
 exports.SummaryTag = SummaryTag;
 const SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
 exports.SummaryText = SummaryText;
-const FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
+const FormDescriptionText = (props) => React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props));
 exports.FormDescriptionText = FormDescriptionText;
 exports.OnePageAdaptableWizardContext = React.createContext({
     data: null,
@@ -76,7 +76,6 @@ const OnePageAdaptableWizard = (props) => {
 exports.OnePageAdaptableWizard = OnePageAdaptableWizard;
 const OnePageWizardSummary = () => {
     const { setCurrentSection, sections, data } = (0, OnePageWizards_1.useOnePageWizardContext)();
-    const { api } = useOnePageAdaptableWizardContext();
     const renderEdit = (index) => (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: {
             textDecoration: 'underline',
             display: 'inline-block',
@@ -84,7 +83,7 @@ const OnePageWizardSummary = () => {
         }, onClick: () => {
             setCurrentSection(index);
         } }, "edit"));
-    return (React.createElement(React.Fragment, null, sections
+    return (React.createElement(rebass_1.Box, { className: "ab-OnePageWizardSummary" }, sections
         .map((section, index) => {
         if (section === '-') {
             return null;

package/src/View/Wizard/OnePageWizards.d.ts

@@ -6,9 +6,9 @@ export declare type OnePageWizardContextType<T> = {
     sections: (OnePageWizardSection<T> | '-')[];
     setCurrentSection: (index: number) => void;
 };
-export declare const SummaryTag: React.FunctionComponent<TextProps>;
-export declare const SummaryText: React.FunctionComponent<TextProps>;
-export declare const FormDescriptionText: React.FunctionComponent<TextProps>;
+export declare const SummaryTag: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+export declare const SummaryText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+export declare const FormDescriptionText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
 export declare const OnePageWizardContext: React.Context<OnePageWizardContextType<any>>;
 export declare function useOnePageWizardContext<ENTITY>(): OnePageWizardContextType<ENTITY>;
 export declare type OnePageWizardSection<ENTITY> = {

package/src/View/Wizard/OnePageWizards.js

@@ -14,11 +14,11 @@ const icons_1 = require("../../components/icons");
 const ResizeObserver_1 = require("../../components/ResizeObserver");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const useKeyboardNavigation_1 = require("./useKeyboardNavigation");
-const SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
+const SummaryTag = (props) => (React.createElement(rebass_1.Text, Object.assign({}, props)));
 exports.SummaryTag = SummaryTag;
 const SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
 exports.SummaryText = SummaryText;
-const FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
+const FormDescriptionText = (props) => React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props));
 exports.FormDescriptionText = FormDescriptionText;
 exports.OnePageWizardContext = React.createContext({
     data: null,

package/src/agGrid/ActionColumnRenderer.d.ts

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