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

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

@@ -0,0 +1,234 @@
+"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("../../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 renderFormatColumnStyleWizardSummary = (data) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (0, exports.renderStyledColumnStyleSummary)(data, api);
+};
+exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
+const getRanges = (ranges) => {
+    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,
+            " to ",
+            r.Max,
+            ' '),
+        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.getFriendlyNameFromColumnId(String(columnComparison.MinValue)) + ']'
+                : columnComparison.MinValue,
+            ' ',
+            ", Max Value:",
+            ' ',
+            isNaN(Number(columnComparison.MaxValue))
+                ? '[' + api.columnApi.getFriendlyNameFromColumnId(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);
+        }
+        if (data.GradientStyle.ColumnComparison) {
+            return getColumnComparison(data.GradientStyle.ColumnComparison, api);
+        }
+    }
+    if (data.PercentBarStyle) {
+        if (data.PercentBarStyle.CellRanges) {
+            return getRanges(data.PercentBarStyle.CellRanges);
+        }
+        if (data.PercentBarStyle.ColumnComparison) {
+            return getColumnComparison(data.PercentBarStyle.ColumnComparison, api);
+        }
+    }
+    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;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const minMaxRangeValues = React.useMemo(() => {
+        const columnId = data.ColumnId;
+        if (!columnId) {
+            return null;
+        }
+        const column = api.columnApi.getColumnFromId(columnId);
+        return {
+            min: api.columnApi.getMinValueForNumericColumn(column),
+            max: api.columnApi.getMaxValueForNumericColumn(column),
+        };
+    }, [data]);
+    const scope = { ColumnIds: [data.ColumnId] }; // TODO: remove scope when format column columnStyle is removed
+    // gradient
+    const onUpdateGradientStyleRanges = (ranges) => {
+        const 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 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, columnComparison: (_b = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _b === void 0 ? void 0 : _b.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: (_c = data.PercentBarStyle) === null || _c === void 0 ? void 0 : _c.CellRanges, columnComparison: (_d = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.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: (_f = (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.CellText) === null || _f === void 0 ? void 0 : _f.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_h = (_g = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _g === void 0 ? void 0 : _g.CellText) === null || _h === void 0 ? void 0 : _h.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: (_k = (_j = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _j === void 0 ? void 0 : _j.ToolTipText) === null || _k === void 0 ? void 0 : _k.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, 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('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: !!((_o = data.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
+                        ((_p = data.PercentBarStyle) === null || _p === void 0 ? void 0 : _p.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: (_q = data.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.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/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,59 @@
+"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';
+    }
+    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);
+        switch (type) {
+            case 'gradient':
+                newStyledColumn.GradientStyle = {};
+                delete newStyledColumn.PercentBarStyle;
+                delete newStyledColumn.CheckBoxStyle;
+                break;
+            case 'percent':
+                newStyledColumn.PercentBarStyle = {};
+                delete newStyledColumn.GradientStyle;
+                delete newStyledColumn.CheckBoxStyle;
+                break;
+            case 'checkbox':
+                newStyledColumn.CheckBoxStyle = true;
+                delete newStyledColumn.GradientStyle;
+                delete newStyledColumn.PercentBarStyle;
+                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")))));
+};
+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/SharedEntityObjectView.js

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

package/src/View/TeamSharing/TeamSharingApplyButton.js

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

package/src/View/Theme/ThemePopup.js

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

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

@@ -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

@@ -76,7 +76,6 @@ const OnePageAdaptableWizard = (props) => {
 exports.OnePageAdaptableWizard = OnePageAdaptableWizard;
 const OnePageWizardSummary = () => {
     const { setCurrentSection, sections, data } = (0, OnePageWizards_1.useOnePageWizardContext)();
-    const { api } = useOnePageAdaptableWizardContext();
     const renderEdit = (index) => (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: {
             textDecoration: 'underline',
             display: 'inline-block',
@@ -84,7 +83,7 @@ const OnePageWizardSummary = () => {
         }, onClick: () => {
             setCurrentSection(index);
         } }, "edit"));
-    return (React.createElement(React.Fragment, null, sections
+    return (React.createElement(rebass_1.Box, { className: "ab-OnePageWizardSummary" }, sections
         .map((section, index) => {
         if (section === '-') {
             return null;

package/src/agGrid/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;

package/src/agGrid/ActionColumnRenderer.js

@@ -1,77 +1,108 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionColumnRenderer = void 0;
+exports.ActionColumnRenderer = exports.ReactActionColumnRenderer = void 0;
 const tslib_1 = require("tslib");
 const SimpleButton_1 = tslib_1.__importDefault(require("../components/SimpleButton"));
-const react_dom_1 = require("react-dom");
 const React = tslib_1.__importStar(require("react"));
 const uuid_1 = require("../components/utils/uuid");
+const useRerender_1 = require("../components/utils/useRerender");
+function getActionButtonsAndActionColumn(adaptable, actionColumn, colId) {
+    var _a;
+    const actionCol = actionColumn
+        ? actionColumn
+        : (_a = adaptable.api.actionApi.getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == colId);
+    if (actionCol && actionCol.actionColumnButton) {
+        let actionButtons = Array.isArray(actionCol.actionColumnButton)
+            ? actionCol.actionColumnButton
+            : [actionCol.actionColumnButton];
+        if (!actionButtons.length) {
+            return;
+        }
+        // actionButtons don't have IDs, so we need to generate them to be used later as a react component key
+        actionButtons = actionButtons.map((actionButton) => (Object.assign(Object.assign({}, actionButton), { Uuid: (0, uuid_1.createUuid)() })));
+        return { actionButtons, actionColumn: actionCol };
+    }
+    return {
+        actionButtons: [],
+        actionColumn: actionCol,
+    };
+}
+const renderActionButtons = (buttons, adaptableApi, context, rerender) => {
+    return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
+        var _a, _b;
+        if (button.hidden && button.hidden(button, context)) {
+            return;
+        }
+        const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
+            height: 15,
+            width: 15,
+        });
+        const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
+        const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
+        const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
+        const handleClick = () => {
+            var _a;
+            (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, context);
+            // Timeout to let any updates to be done before re-rendering the component
+            setTimeout(() => {
+                // when called again it triggers a re-render
+                // https:reactjs.org/docs/react-dom.html#render
+                rerender();
+            }, 16);
+        };
+        const disabled = button.disabled && button.disabled(button, context);
+        return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' }, buttonLabel));
+    })));
+};
+const ReactActionColumnRenderer = (props) => {
+    const rerender = (0, useRerender_1.useRerender)();
+    const adaptable = props.api.__adaptable;
+    const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, props.actionColumn, props.colDef.colId);
+    if (!actionColumn || !actionButtons.length) {
+        return null;
+    }
+    if (adaptable.api.gridApi.isGroupRowNode(props.node) && !actionColumn.includeGroupedRows) {
+        return null;
+    }
+    const pkValue = adaptable.getPrimaryKeyValueFromRowNode(props.node);
+    const buttonContext = {
+        actionColumn,
+        primaryKeyValue: pkValue,
+        rowNode: props.node,
+        adaptableApi: adaptable.api,
+    };
+    return (React.createElement("div", { className: "ab-ActionColumn" }, renderActionButtons(actionButtons, adaptable.api, buttonContext, rerender)));
+};
+exports.ReactActionColumnRenderer = ReactActionColumnRenderer;
 class ActionColumnRenderer {
     // gets called once before the renderer is used
     init(params) {
-        var _a;
         const adaptable = params.api.__adaptable;
-        const actionCol = params.actionColumn
-            ? params.actionColumn
-            : (_a = adaptable.api.actionApi
-                .getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == params.colDef.colId);
-        if (actionCol && actionCol.actionColumnButton) {
-            let actionButtons = Array.isArray(actionCol.actionColumnButton)
-                ? actionCol.actionColumnButton
-                : [actionCol.actionColumnButton];
-            if (!actionButtons.length) {
-                return;
-            }
-            // actionButtons don't have IDs, so we need to generate them to be used later as a react component key
-            actionButtons = actionButtons.map((actionButton) => (Object.assign(Object.assign({}, actionButton), { Uuid: (0, uuid_1.createUuid)() })));
-            // create the cell
-            this.eGui = document.createElement('div');
-            this.eGui.className = 'ab-ActionColumn';
-            // if its a group node then only show if set to do so
-            if (adaptable.api.gridApi.isGroupRowNode(params.node) && !actionCol.includeGroupedRows) {
-                this.eGui.innerHTML = '';
-                return;
-            }
-            const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node);
-            const buttonContext = {
-                actionColumn: actionCol,
-                primaryKeyValue: pkValue,
-                rowNode: params.node,
-                adaptableApi: adaptable.api,
-            };
-            const renderActionButtons = (buttons, adaptableApi, context) => {
-                return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
-                    var _a, _b;
-                    if (button.hidden && button.hidden(button, context)) {
-                        return;
-                    }
-                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
-                        height: 15,
-                        width: 15,
-                    });
-                    const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
-                    const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
-                    const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-                    const handleClick = () => {
-                        button.onClick(button, context);
-                        // Timeout to let any updates to be done before re-rendering the component
-                        setTimeout(() => {
-                            // when called again it triggers a re-render
-                            // https:reactjs.org/docs/react-dom.html#render
-                            doRender();
-                        }, 16);
-                    };
-                    const disabled = button.disabled && button.disabled(button, context);
-                    return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' }, buttonLabel));
-                })));
-            };
-            const eGui = this.eGui;
-            function doRender() {
-                (0, react_dom_1.render)(renderActionButtons(actionButtons, adaptable.api, buttonContext), eGui);
-            }
-            this.render = doRender;
-            doRender();
+        const { actionButtons, actionColumn } = getActionButtonsAndActionColumn(adaptable, params.actionColumn, params.colDef.colId);
+        if (!actionColumn || !actionButtons.length) {
+            return;
         }
+        // create the cell
+        this.eGui = document.createElement('div');
+        this.eGui.className = 'ab-ActionColumn';
+        // if its a group node then only show if set to do so
+        if (adaptable.api.gridApi.isGroupRowNode(params.node) && !actionColumn.includeGroupedRows) {
+            this.eGui.innerHTML = '';
+            return;
+        }
+        const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node);
+        const buttonContext = {
+            actionColumn,
+            primaryKeyValue: pkValue,
+            rowNode: params.node,
+            adaptableApi: adaptable.api,
+        };
+        const eGui = this.eGui;
+        const doRender = () => {
+            this.unmountReactRoot = adaptable.renderReactRoot(renderActionButtons(actionButtons, adaptable.api, buttonContext, doRender), eGui);
+        };
+        this.render = doRender;
+        doRender();
     }
     // defined on init
     // used to re-render in refresh
@@ -88,7 +119,8 @@ class ActionColumnRenderer {
     }
     // gets called when the cell is removed from the grid
     destroy() {
-        (0, react_dom_1.unmountComponentAtNode)(this.eGui);
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
         // do cleanup, remove event listener from button
         if (this.eGui) {
             this.eGui.removeEventListener('click', this.eventListener);