@adaptabletools/adaptable-cjs 22.0.0-canary.1 → 22.0.0-canary.10

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsIPushPull.js

@@ -5,11 +5,18 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../../components/Tabs");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../../components/Flex");
 const ScheduleSettingsIPushPull = (props) => {
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...props.iPushPull,
+            Name: event.target.value,
+        });
+    };
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
         value: report.Name,
@@ -49,9 +56,13 @@ const ScheduleSettingsIPushPull = (props) => {
     });
     return (React.createElement(Flex_1.Box, { "data-name": "schedule-settings-ipushpull" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Ipushpull Schedule Settings"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.iPushPull?.Name ?? '' })),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(Flex_1.Box, { className: "twa:h-2" })),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
                         React.createElement(DropdownButton_1.default, { "data-name": "report-name", disabled: props.allReports.length == 0, items: reportOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.ReportName || 'Select Report')),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Folder" },

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsOpenFin.js

@@ -5,9 +5,16 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../../components/Tabs");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const Flex_1 = require("../../../../components/Flex");
 const ScheduleSettingsOpenFin = (props) => {
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...props.openFin,
+            Name: event.target.value,
+        });
+    };
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
         value: report.Name,
@@ -21,9 +28,13 @@ const ScheduleSettingsOpenFin = (props) => {
     }));
     return (React.createElement(Flex_1.Box, { "data-name": "schedule-settings-openfin" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "OpenFin Schedule Settings"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.openFin?.Name ?? '' })),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(Flex_1.Box, { className: "twa:h-2" })),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
                         React.createElement(DropdownButton_1.default, { "data-name": "select-report", columns: ['label'], className: "twa:w-[300px]", disabled: props.allReports.length == 0, items: reportOptions }, props?.openFin?.OpenFinReport?.ReportName || 'Select Report')))))));
 };

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js

@@ -21,16 +21,22 @@ const ScheduleSettingsReminder = (props) => {
             });
         },
     }));
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...props.reminderSchedule,
+            Name: event.target.value,
+        });
+    };
     const handleHeaderChange = (event) => {
         props.onChange({
             ...props.reminderSchedule,
-            Header: event.target?.value,
+            Header: event.target.value,
         });
     };
     const handleMessageChange = (event) => {
         props.onChange({
             ...props.reminderSchedule,
-            Message: event.target?.value,
+            Message: event.target.value,
         });
     };
     const handleDisplayNotificationChange = (checked) => {
@@ -45,11 +51,15 @@ const ScheduleSettingsReminder = (props) => {
             DisplaySystemStatusMessage: checked,
         });
     };
-    return (React.createElement(Flex_1.Box, { "data-name": "schedule-settings-remainder" },
+    return (React.createElement(Flex_1.Box, { "data-name": "schedule-settings-reminder" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Reminder Schedule Settings"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Reminder Name", type: "string", value: props.reminderSchedule?.Name ?? '' })),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(Flex_1.Box, { className: "twa:h-2" })),
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
                         React.createElement(Input_1.default, { "data-name": "header", className: "twa:w-[300px]", onChange: handleHeaderChange, placeholder: "Enter Reminder Header", type: "string", value: props.reminderSchedule?.Header })),
                     React.createElement(FormLayout_1.FormRow, { label: "Message" },

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReport.js

@@ -4,10 +4,17 @@ exports.ScheduleSettingsReport = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const Select_1 = require("../../../../components/Select");
 const Tabs_1 = require("../../../../components/Tabs");
 const Flex_1 = require("../../../../components/Flex");
 const ScheduleSettingsReport = (props) => {
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...props.report,
+            Name: event.target.value,
+        });
+    };
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
         value: report.Name,
@@ -34,9 +41,13 @@ const ScheduleSettingsReport = (props) => {
     }));
     return (React.createElement(Flex_1.Box, { "data-name": "schedule-settings-report" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false, className: "twa:mb-3" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Report Settings"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.report?.Name ?? '' })),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(Flex_1.Box, { className: "twa:h-2" })),
                     React.createElement(FormLayout_1.FormRow, { label: "Export" },
                         React.createElement(Flex_1.Box, { className: "twa:max-w-[300px]" },
                             React.createElement(Select_1.Select, { "data-name": "select-report", options: reportOptions, value: props?.report?.ReportName, placeholder: "Select Export", onChange: (value) => props.onChange({

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/isSettingsValid.d.ts

@@ -1,2 +1,3 @@
+import { AdaptableApi } from '../../../../Api/AdaptableApi';
 import { BaseSchedule } from '../../../../AdaptableState/Common/Schedule';
-export declare const isSettingsValid: (schedule: BaseSchedule) => true | "Message type not selected" | "Reminder header not specified" | "Reminder message not specified" | "Report source not specified" | "Report format not selected" | "Report not selected" | "Report folder not selected" | "Report page not selected";
+export declare const isSettingsValid: (schedule: BaseSchedule, api: AdaptableApi) => true | "A name is required." | "A Schedule with this name already exists." | "Please select a message type." | "A reminder header is required." | "A reminder message is required." | "Please select a report." | "Please select a report format." | "Please select a report folder." | "Please select a report page.";

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/isSettingsValid.js

@@ -4,44 +4,53 @@ exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const Enums_1 = require("../../../../AdaptableState/Common/Enums");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
-const isSettingsValid = (schedule) => {
+const isSettingsValid = (schedule, api) => {
+    // Validate Name - mandatory and unique
+    if (!schedule.Name?.trim()) {
+        return 'A name is required.';
+    }
+    const allSchedules = api.scheduleApi.getSchedules();
+    const isDuplicateName = allSchedules.some((s) => s.Name === schedule.Name && s.Uuid !== schedule.Uuid);
+    if (isDuplicateName) {
+        return 'A Schedule with this name already exists.';
+    }
     if (schedule.ScheduleType === Enums_1.ScheduleType.Reminder) {
         const reminder = schedule;
         if (!reminder.MessageType) {
-            return 'Message type not selected';
+            return 'Please select a message type.';
         }
         if (StringExtensions_1.default.IsNullOrEmpty(reminder?.Header)) {
-            return 'Reminder header not specified';
+            return 'A reminder header is required.';
         }
         if (StringExtensions_1.default.IsNullOrEmpty(reminder?.Message)) {
-            return 'Reminder message not specified';
+            return 'A reminder message is required.';
         }
     }
     if (schedule.ScheduleType === Enums_1.ScheduleType.Report) {
         const report = schedule;
         if (StringExtensions_1.default.IsNullOrEmpty(report?.ReportName)) {
-            return 'Report source not specified';
+            return 'Please select a report.';
         }
         if (StringExtensions_1.default.IsNullOrEmpty(report?.ReportFormat)) {
-            return 'Report format not selected';
+            return 'Please select a report format.';
         }
     }
     if (schedule.ScheduleType === Enums_1.ScheduleType.ipushpull) {
         const ipushpull = schedule;
         if (StringExtensions_1.default.IsNullOrEmpty(ipushpull?.IPushPullReport?.ReportName)) {
-            return 'Report not selected';
+            return 'Please select a report.';
         }
         if (StringExtensions_1.default.IsNullOrEmpty(ipushpull?.IPushPullReport?.Folder)) {
-            return 'Report folder not selected';
+            return 'Please select a report folder.';
         }
         if (StringExtensions_1.default.IsNullOrEmpty(ipushpull?.IPushPullReport?.Page)) {
-            return 'Report page not selected';
+            return 'Please select a report page.';
         }
     }
     if (schedule.ScheduleType === Enums_1.ScheduleType.OpenFin) {
         const openfin = schedule;
         if (StringExtensions_1.default.IsNullOrEmpty(openfin?.OpenFinReport?.ReportName)) {
-            return 'Report not selected';
+            return 'Please select a report.';
         }
     }
     return true;

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Shortcut } from '../../../AdaptableState/ShortcutState';
-export declare const isSettingsValid: (data: Shortcut) => string | true;
+import { AdaptableApi } from '../../../types';
+export declare const isSettingsValid: (data: Shortcut, api: AdaptableApi) => string | true;
 export declare const ShortcutSettingsSummary: React.FunctionComponent;
 interface ShortcutSettingsWizardProps {
     availableKeys: Array<string>;

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -13,7 +13,15 @@ const Tag_1 = require("../../../components/Tag");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Select_1 = require("../../../components/Select");
 const Flex_1 = require("../../../components/Flex");
-const isSettingsValid = (data) => {
+const isSettingsValid = (data, api) => {
+    if (!data.Name?.trim()) {
+        return 'Name is required';
+    }
+    const allShortcuts = api.shortcutApi.getShortcuts();
+    const isDuplicateName = allShortcuts.some((s) => s.Name === data.Name && s.Uuid !== data.Uuid);
+    if (isDuplicateName) {
+        return 'A Shortcut already exists with that name';
+    }
     const shortcutKey = data.ShortcutKey && typeof data.ShortcutKey === 'string' ? '' : 'Shortcut key is not selected';
     const shortcutValue = typeof data.ShortcutValue === 'number' ? '' : 'Shortcut value is not specified';
     const shortcutOperation = data.ShortcutOperation && typeof data.ShortcutOperation === 'string'
@@ -26,6 +34,9 @@ exports.isSettingsValid = isSettingsValid;
 const ShortcutSettingsSummary = () => {
     const { data: shortcut } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(React.Fragment, null,
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Name ",
+            React.createElement(Tag_1.Tag, null, shortcut.Name || 'Not specified')),
         React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
             "Shortcut Key ",
             React.createElement(Tag_1.Tag, null, shortcut.ShortcutKey || 'Not selected')),
@@ -39,6 +50,12 @@ const ShortcutSettingsSummary = () => {
 exports.ShortcutSettingsSummary = ShortcutSettingsSummary;
 const ShortcutSettingsWizard = (props) => {
     const { data: shortcut } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...shortcut,
+            Name: event.target.value,
+        });
+    };
     const handleKeyChange = React.useCallback((ShortcutKey) => {
         props.onChange({
             ...shortcut,
@@ -69,17 +86,21 @@ const ShortcutSettingsWizard = (props) => {
             React.createElement(Tabs_1.Tabs.Tab, null, "Shortcut Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "data-name": "shortcut-name", className: "twa:flex-1 twa:max-w-[200px] twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' })),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(Flex_1.Box, { className: "twa:h-2" })),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
                         React.createElement(HelpBlock_1.default, { className: "twa:text-2 twa:mb-0" }, "Keyboard key that, when pressed, triggers the Shortcut")),
                     React.createElement(FormLayout_1.FormRow, { label: "Key" },
                         React.createElement(Flex_1.Flex, { flexDirection: "row" },
                             React.createElement(Select_1.Select, { "data-name": "shortcut-key", placeholder: "Select Key", options: optionKeys, onChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }))),
-                    React.createElement(FormLayout_1.FormRow, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
                         React.createElement(HelpBlock_1.default, { className: "twa:text-2 twa:mb-0" }, "Mathematical operation performed on Cell's current value (using the Shortcut's 'value') - used to calculate the Cell's new total")),
                     React.createElement(FormLayout_1.FormRow, { label: "Operation" },
                         React.createElement(Flex_1.Flex, { flexDirection: "row" },
                             React.createElement(Select_1.Select, { "data-name": "shortcut-operation", placeholder: "Select Operation", options: optionActions, onChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }))),
-                    React.createElement(FormLayout_1.FormRow, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
                         React.createElement(HelpBlock_1.default, { className: "twa:text-2 twa:mb-0" }, "Number that is used - together with the 'Operation' and the current cell value - to calculate the new total for the cell")),
                     React.createElement(FormLayout_1.FormRow, { label: "Value" },
                         React.createElement(Flex_1.Flex, { flexDirection: "row" },

package/src/View/Shortcut/Wizard/ShortcutWizard.js

@@ -15,8 +15,9 @@ const shortcutKeys_1 = require("../shortcutKeys");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const Flex_1 = require("../../../components/Flex");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const ShortcutWizard = (props) => {
-    const [shortcut, setShortcut] = React.useState(() => {
+    const [shortcut, doSetShortcut] = React.useState(() => {
         const shortcut = props.data ? (0, Helper_1.cloneObject)(props.data) : ObjectFactory_1.default.CreateEmptyShortcut();
         shortcut.Scope = shortcut.Scope ?? { All: true };
         if (props.popupParams?.column && props.popupParams?.action === 'New') {
@@ -26,10 +27,13 @@ const ShortcutWizard = (props) => {
         }
         return shortcut;
     });
+    const setShortcut = React.useCallback((data) => {
+        doSetShortcut(data);
+    }, []);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const availableKeys = React.useMemo(() => {
         const availableKeys = shortcutKeys_1.shortcutKeys.filter((key) => adaptable.api.shortcutApi.getShortcuts().every((shortcut) => shortcut.ShortcutKey !== key));
-        if (shortcut) {
+        if (shortcut && StringExtensions_1.default.IsNotNullOrEmptyOrWhiteSpace(shortcut.ShortcutKey)) {
             availableKeys.push(shortcut.ShortcutKey);
         }
         availableKeys.sort();
@@ -46,18 +50,6 @@ const ShortcutWizard = (props) => {
         props.onFinishWizard(shortcut);
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: shortcut, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
-            {
-                title: 'Target',
-                isValid: NewScopeComponent_1.isScopeValid,
-                details: 'Specify where Shortcut should be applied',
-                renderSummary: () => (0, NewScopeComponent_1.renderScopeSummary)(shortcut.Scope, {
-                    scopeWholeRow: 'Shortcut is triggered for all numeric cells',
-                    scopeColumns: 'Shortcut is triggered for cells in selected columns',
-                    scopeDataTypes: 'Shortcut is triggered for all numeric cells',
-                }),
-                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(ShortcutScopeWizardSection_1.ShortcutScopeWizardSection, { onChange: setShortcut }))),
-            },
             {
                 title: 'Settings',
                 isValid: ShortcutSettingsWizard_1.isSettingsValid,
@@ -73,6 +65,18 @@ const ShortcutWizard = (props) => {
                 render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ShortcutSettingsWizard_1.ShortcutSettingsWizard, { availableKeys: props.availableKeys ?? availableKeys, onChange: setShortcut }))),
             },
+            {
+                title: 'Target',
+                isValid: NewScopeComponent_1.isScopeValid,
+                details: 'Specify where Shortcut should be applied',
+                renderSummary: () => (0, NewScopeComponent_1.renderScopeSummary)(shortcut.Scope, {
+                    scopeWholeRow: 'Shortcut is triggered for all numeric cells',
+                    scopeColumns: 'Shortcut is triggered for cells in selected columns',
+                    scopeDataTypes: 'Shortcut is triggered for all numeric cells',
+                }),
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+                    React.createElement(ShortcutScopeWizardSection_1.ShortcutScopeWizardSection, { onChange: setShortcut }))),
+            },
             {
                 details: 'Select Shortcut Tags',
                 title: 'Tags',

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -17,6 +17,7 @@ const react_redux_1 = require("react-redux");
 const Select_1 = require("../../components/Select");
 const Flex_1 = require("../../components/Flex");
 class SmartEditViewPanelComponent extends React.Component {
+    cleanupEvent;
     constructor(props) {
         super(props);
         this.state = {

package/src/View/StateManagement/handleExportState.js

@@ -10,7 +10,7 @@ const handleExportState = (type, name, state, api) => {
             Helper_1.default.copyToClipboard(stringifiedState);
             break;
         case 'Console':
-            api.consoleLog('Adaptable State: ', state);
+            api.consoleLog('Adaptable state:', state);
             break;
         case 'JSON':
             const jsonFileName = name + '.json';

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

@@ -20,7 +20,7 @@ const renderStyledColumnColumnSummary = (data) => {
 exports.renderStyledColumnColumnSummary = renderStyledColumnColumnSummary;
 const isValidStyledColumnColumn = (data) => {
     if (!data.ColumnId) {
-        return 'You have to select a Column for Styled Column';
+        return 'Please select a column for the Styled Column.';
     }
     return true;
 };

package/src/View/Theme/ThemePopup.js

@@ -15,22 +15,6 @@ const icons_1 = require("../../components/icons");
 const ThemeSelector_1 = require("./ThemeSelector");
 const Flex_1 = require("../../components/Flex");
 class ThemePopupComponent extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.handleCreateNewTheme = (variant) => {
-            let nthItem = this.props.UserThemes.length + 1;
-            let name = 'Custom-Theme-' + nthItem;
-            // make sure it is unique
-            while (this.props.UserThemes.some((theme) => theme.Name === name)) {
-                nthItem++;
-                name = 'Custom-Theme-' + nthItem;
-            }
-            const newTheme = ObjectFactory_1.default.CreateEmptyTheme(name);
-            newTheme.Variant = variant;
-            this.props.api.themeApi.addUserTheme(newTheme);
-            this.props.api.themeApi.loadTheme(newTheme.Name);
-        };
-    }
     render() {
         const isCustomTheme = this.props.api.themeApi
             .getUserThemes()
@@ -63,6 +47,19 @@ class ThemePopupComponent extends React.Component {
     onChangeTheme(value) {
         this.props.SelectTheme(value);
     }
+    handleCreateNewTheme = (variant) => {
+        let nthItem = this.props.UserThemes.length + 1;
+        let name = 'Custom-Theme-' + nthItem;
+        // make sure it is unique
+        while (this.props.UserThemes.some((theme) => theme.Name === name)) {
+            nthItem++;
+            name = 'Custom-Theme-' + nthItem;
+        }
+        const newTheme = ObjectFactory_1.default.CreateEmptyTheme(name);
+        newTheme.Variant = variant;
+        this.props.api.themeApi.addUserTheme(newTheme);
+        this.props.api.themeApi.loadTheme(newTheme.Name);
+    };
 }
 function mapStateToProps(state, ownProps) {
     return {

package/src/View/UIHelper.d.ts

@@ -6,6 +6,7 @@ import { Schedule, Weekday } from '../AdaptableState/Common/Schedule';
 import { AdaptableColumnDataType, AdaptableSystemIconName, AdaptableOptions } from '../types';
 import { AdaptableAlert } from '../AdaptableState/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../AdaptableState/Common/AdaptableMessageType';
+import type { ContainerContext } from '../AdaptableOptions/ContainerOptions';
 export declare const BLACK: string;
 export declare const WHITE: string;
 export declare const LIGHT_GRAY: string;
@@ -31,13 +32,14 @@ export declare function getDefaultColors(): string[];
 export declare function getEmptyConfigState(): EditableConfigEntityState;
 export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "text" | "number" | "date";
 export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
-export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document): HTMLElement;
+export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document, context?: ContainerContext): HTMLElement;
 export declare function IsEmptyStyle(style: AdaptableStyle): boolean;
 export declare function IsNotEmptyStyle(style: AdaptableStyle): boolean;
 export declare function getMessageTypeByStatusColour(statusColour: StatusColour): AdaptableMessageType;
 export declare function getButtonToneByMessageType(messageType: AdaptableMessageType): 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
 export declare function getGlyphByMessageType(messageType: AdaptableMessageType): AdaptableSystemIconName;
 export declare function getColorByMessageType(messageType: AdaptableMessageType): string;
+export declare function getCSSColorByMessageType(messageType: AdaptableMessageType): string;
 export declare function getStyleForStatusColour(statusColour: StatusColour): CSSProperties;
 export declare function getStyleForMessageType(messageType: AdaptableMessageType): CSSProperties;
 export declare function getGlyphForStatusColour(statusColour: StatusColour): string;
@@ -75,6 +77,7 @@ export declare const UIHelper: {
     getGlyphForMessageType: typeof getGlyphForMessageType;
     getStyleForMessageType: typeof getStyleForMessageType;
     getMessageTypeFromAdaptableAlerts: typeof getMessageTypeFromAdaptableAlerts;
+    getCSSColorByMessageType: typeof getCSSColorByMessageType;
     getButtonColourForAdaptableAlerts: typeof getButtonColourForAdaptableAlerts;
     getButtonTextColourForArrayandMessageType: typeof getButtonTextColourForArrayandMessageType;
     getButtonTextColourForMessageType: typeof getButtonTextColourForMessageType;

package/src/View/UIHelper.js

@@ -13,6 +13,7 @@ exports.getMessageTypeByStatusColour = getMessageTypeByStatusColour;
 exports.getButtonToneByMessageType = getButtonToneByMessageType;
 exports.getGlyphByMessageType = getGlyphByMessageType;
 exports.getColorByMessageType = getColorByMessageType;
+exports.getCSSColorByMessageType = getCSSColorByMessageType;
 exports.getStyleForStatusColour = getStyleForStatusColour;
 exports.getStyleForMessageType = getStyleForMessageType;
 exports.getGlyphForStatusColour = getGlyphForStatusColour;
@@ -34,6 +35,7 @@ const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableCo
 const Enums_1 = require("../AdaptableState/Common/Enums");
 const StringExtensions_1 = require("../Utilities/Extensions/StringExtensions");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
+const resolveContainerElement_1 = require("../Utilities/resolveContainerElement");
 exports.BLACK = 'Black';
 exports.WHITE = 'White';
 exports.LIGHT_GRAY = 'LightGray';
@@ -152,19 +154,12 @@ function getPlaceholderForDataType(dataType) {
             return 'Enter Date';
     }
 }
-function getModalContainer(adaptableOptions, document) {
-    let modalContainer;
-    if (adaptableOptions.containerOptions.modalContainer) {
-        // this has been set, so we use the property
-        modalContainer =
-            typeof adaptableOptions.containerOptions.modalContainer === 'string'
-                ? document.getElementById(adaptableOptions.containerOptions.modalContainer)
-                : adaptableOptions.containerOptions.modalContainer;
-        if (modalContainer) {
-            const modalContainerClassName = ' modal-container';
-            if (!modalContainer.className.includes(modalContainerClassName)) {
-                modalContainer.className += modalContainerClassName;
-            }
+function getModalContainer(adaptableOptions, document, context) {
+    let modalContainer = (0, resolveContainerElement_1.resolveContainerElement)(adaptableOptions.containerOptions.modalContainer, context, document);
+    if (modalContainer) {
+        const modalContainerClassName = ' modal-container';
+        if (!modalContainer.className.includes(modalContainerClassName)) {
+            modalContainer.className += modalContainerClassName;
         }
     }
     if (!modalContainer) {
@@ -234,6 +229,20 @@ function getColorByMessageType(messageType) {
             return 'var(--ab-color-info)';
     }
 }
+function getCSSColorByMessageType(messageType) {
+    switch (messageType) {
+        case 'Error':
+            return 'error';
+        case 'Warning':
+            return 'warn';
+        case 'Success':
+            return 'success';
+        case 'Info':
+            return 'info';
+        default:
+            return '';
+    }
+}
 function getStyleForStatusColour(statusColour) {
     let result;
     switch (statusColour) {
@@ -441,7 +450,7 @@ function getAdaptableToolPanelWidth() {
     return getNumericCSSVariableValue(getCSSVariableValue('--ab-cmp-toolpanel__width'), 200);
 }
 function getSimpleButtonPaddingWidth() {
-    return getNumericCSSVariableValue(getCSSVariableValue('--ab-space-1'), 4);
+    return getNumericCSSVariableValue(getCSSVariableValue('--ab-base-space'), 4);
 }
 function getCSSVariableValue(cssVariable) {
     if (!isBrowserDocumentAvailable()) {
@@ -481,6 +490,7 @@ exports.UIHelper = {
     getGlyphForMessageType,
     getStyleForMessageType,
     getMessageTypeFromAdaptableAlerts,
+    getCSSColorByMessageType,
     getButtonColourForAdaptableAlerts,
     getButtonTextColourForArrayandMessageType,
     getButtonTextColourForMessageType,

package/src/agGrid/Adaptable.js

@@ -9,6 +9,7 @@ const AdaptableAgGrid_1 = require("./AdaptableAgGrid");
 const DefaultAdaptableOptions_1 = require("../AdaptableOptions/DefaultAdaptableOptions");
 const renderReactRoot_1 = require("../renderReactRoot");
 const AdaptableWizardView_1 = tslib_1.__importDefault(require("../View/AdaptableWizardView"));
+const resolveContainerElement_1 = require("../Utilities/resolveContainerElement");
 class Adaptable {
     /**
      * Initializer for Adaptable
@@ -26,6 +27,10 @@ class Adaptable {
 }
 exports.Adaptable = Adaptable;
 class AdaptableNoCodeWizard {
+    init;
+    adaptableOptions;
+    extraOptions;
+    agGridModules;
     /**
      * @param adaptableOptions
      */
@@ -40,19 +45,18 @@ class AdaptableNoCodeWizard {
         this.render();
     }
     render(container) {
-        let id = (0, DefaultAdaptableOptions_1.getDefaultAdaptableOptions)().containerOptions.adaptableContainer || 'adaptable';
         if (!container) {
-            let containerOptionsContainer = this.adaptableOptions.containerOptions?.adaptableContainer;
-            if (containerOptionsContainer) {
-                if (typeof containerOptionsContainer === 'string') {
-                    id = containerOptionsContainer ?? id;
-                }
-                else {
-                    container = containerOptionsContainer;
-                }
-            }
+            const initContext = {
+                adaptableId: this.adaptableOptions?.adaptableId ?? '',
+                adaptableStateKey: this.adaptableOptions?.adaptableStateKey ?? '',
+                adaptableContext: this.adaptableOptions?.adaptableContext,
+            };
+            container = (0, resolveContainerElement_1.resolveContainerElement)(this.adaptableOptions.containerOptions?.adaptableContainer, initContext);
+        }
+        if (!container) {
+            const defaultId = (0, DefaultAdaptableOptions_1.getDefaultAdaptableOptions)().containerOptions.adaptableContainer || 'adaptable';
+            container = document.getElementById(defaultId);
         }
-        container = container || document.getElementById(id);
         if (!container) {
             throw new Error('Cannot find container in which to render Adaptable No Code Wizard');
         }