@adaptabletools/adaptable-cjs 22.0.0-canary.3 → 22.0.0-canary.5

package/src/View/Layout/Wizard/sections/PivotColumnsSection.js

@@ -11,6 +11,7 @@ const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard
 const Utilities_1 = require("./Utilities");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../../components/Flex");
+const CheckBox_1 = require("../../../../components/CheckBox");
 const PivotColumnsSectionSummary = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -33,6 +34,13 @@ const PivotColumnsSection = (props) => {
     return (React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
         React.createElement(Tabs_1.Tabs.Tab, null, "Pivot Columns"),
         React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(Flex_1.Box, { className: "twa:mb-3 twa:px-2" },
+                React.createElement(CheckBox_1.CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
+                        props.onChange({
+                            ...layout,
+                            PivotResultColumnsOrder: checked,
+                        });
+                    } }, "Persist Order of Pivot Result Columns")),
             React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }))));
 };
 exports.PivotColumnsSection = PivotColumnsSection;

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.js

@@ -4,7 +4,6 @@ exports.PlusMinusSettingsWizardSection = exports.isSettingsValid = exports.PlusM
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -16,13 +15,27 @@ const Flex_1 = require("../../../components/Flex");
 const PlusMinusSettingsSummary = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(React.Fragment, null,
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Name ",
+            React.createElement(Tag_1.Tag, null, data.Name || 'Not specified')),
         React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
             "Nudge Value ",
             React.createElement(Tag_1.Tag, null, data.NudgeValue ?? 'Not selected')),
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Nudge Type ",
+            React.createElement(Tag_1.Tag, null, props.hasCondition ? 'Conditional' : 'Always Apply')),
         props.hasCondition && React.createElement(PlusMinusRuleWizardSection_1.PlusMinusRuleSummary, null)));
 };
 exports.PlusMinusSettingsSummary = PlusMinusSettingsSummary;
 const isSettingsValid = (hasCondition) => (data, api, context) => {
+    if (!data.Name?.trim()) {
+        return 'Name is required';
+    }
+    const allPlusMinusNudges = api.plusMinusApi.getAllPlusMinus();
+    const isDuplicateName = allPlusMinusNudges.some((nudge) => nudge.Name === data.Name && nudge.Uuid !== data.Uuid);
+    if (isDuplicateName) {
+        return 'A Plus Minus Nudge already exists with that name';
+    }
     if (hasCondition) {
         if (!data?.Rule?.BooleanExpression) {
             return 'No valid Rule is specified';
@@ -43,6 +56,12 @@ const isSettingsValid = (hasCondition) => (data, api, context) => {
 exports.isSettingsValid = isSettingsValid;
 const PlusMinusSettingsWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
     const handleNudgeValueChange = (event) => {
         const newValue = parseFloat(event.target.value);
         props.onChange({
@@ -51,16 +70,20 @@ const PlusMinusSettingsWizardSection = (props) => {
         });
     };
     return (React.createElement(Flex_1.Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full" },
-        React.createElement(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Plus Minus Settings"),
+        React.createElement(Tabs_1.Tabs, { className: "twa:p-2" },
+            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": "plus-minus-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' })),
                     React.createElement(FormLayout_1.FormRow, { label: "Nudge Value" },
-                        React.createElement(Input_1.default, { "data-name": "nudge-value", className: "twa:flex-1 twa:mr-3", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' })),
-                    React.createElement(FormLayout_1.FormRow, { label: "Nudge Type" },
-                        React.createElement(Flex_1.Flex, null,
-                            React.createElement(Radio_1.default, { "data-name": "nudge-type-always", value: "Always", checked: !props.hasCondition, onChange: () => props.onConditionChange(false) }, "Always Apply Nudge"),
-                            React.createElement(Radio_1.default, { "data-name": "nudge-type-condition", className: "twa:ml-3", value: "Expression", checked: props.hasCondition, onChange: () => props.onConditionChange(true) }, "Create a Rule")))))),
-        props.hasCondition && (React.createElement(PlusMinusRuleWizardSection_1.PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange }))));
+                        React.createElement(Input_1.default, { "data-name": "nudge-value", className: "twa:flex-1 twa:mr-3", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' }))))),
+        React.createElement(Tabs_1.Tabs, { className: "twa:p-2", selectedIndex: props.hasCondition ? 1 : 0, onSelectedIndexChange: (index) => props.onConditionChange(index === 1) },
+            React.createElement(Tabs_1.Tabs.Tab, { "data-name": "nudge-type-always" }, "Always Apply"),
+            React.createElement(Tabs_1.Tabs.Tab, { "data-name": "nudge-type-condition" }, "Conditional"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { className: "twa:text-2 twa:py-2" }, "The nudge value is always applied when using Plus/Minus")),
+            React.createElement(Tabs_1.Tabs.Content, { className: "twa:p-0" },
+                React.createElement(PlusMinusRuleWizardSection_1.PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange })))));
 };
 exports.PlusMinusSettingsWizardSection = PlusMinusSettingsWizardSection;

package/src/View/PlusMinus/Wizard/PlusMinusWizard.js

@@ -13,7 +13,7 @@ const PlusMinusRedux = tslib_1.__importStar(require("../../../Redux/ActionsReduc
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const Flex_1 = require("../../../components/Flex");
 const PlusMinusWizard = (props) => {
-    const [plusMinus, setPlusMinus] = React.useState(() => {
+    const [plusMinus, doSetPlusMinus] = React.useState(() => {
         const newPlusMinus = {
             ...(props.data ? props.data : ObjectFactory_1.default.CreateEmptyPlusMinusNudge()),
             Scope: props?.data?.Scope ?? { All: true },
@@ -26,19 +26,24 @@ const PlusMinusWizard = (props) => {
         }
         return newPlusMinus;
     });
+    const setPlusMinus = React.useCallback((data) => {
+        doSetPlusMinus(data);
+    }, []);
     const [hasCondition, setHasCondition] = React.useState(() => {
         // true if on edit and it has a condition
         return Boolean(props?.data?.Rule);
     });
     React.useEffect(() => {
-        const preparedData = { ...plusMinus };
-        if (hasCondition) {
-            preparedData.Rule = preparedData.Rule ?? { BooleanExpression: '' };
-        }
-        else {
-            delete preparedData.Rule;
-        }
-        setPlusMinus(preparedData);
+        doSetPlusMinus((prev) => {
+            const preparedData = { ...prev };
+            if (hasCondition) {
+                preparedData.Rule = preparedData.Rule ?? { BooleanExpression: '' };
+            }
+            else {
+                delete preparedData.Rule;
+            }
+            return preparedData;
+        });
     }, [hasCondition]);
     const dispatch = (0, react_redux_1.useDispatch)();
     const handleFinish = () => {
@@ -51,6 +56,12 @@ const PlusMinusWizard = (props) => {
         props.onFinishWizard(plusMinus);
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: plusMinus, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Settings',
+                isValid: (0, PlusMinusSettingsWizardSection_1.isSettingsValid)(hasCondition),
+                renderSummary: () => React.createElement(PlusMinusSettingsWizardSection_1.PlusMinusSettingsSummary, { hasCondition: hasCondition }),
+                render: () => (React.createElement(PlusMinusSettingsWizardSection_1.PlusMinusSettingsWizardSection, { hasCondition: hasCondition, onConditionChange: setHasCondition, onChange: setPlusMinus })),
+            },
             {
                 title: 'Target',
                 isValid: NewScopeComponent_1.isScopeValid,
@@ -63,12 +74,6 @@ const PlusMinusWizard = (props) => {
                 render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(PlusMinusScopeWizardSection_1.PlusMinusScopeWizardSection, { onChange: setPlusMinus }))),
             },
-            {
-                title: 'Settings',
-                isValid: (0, PlusMinusSettingsWizardSection_1.isSettingsValid)(hasCondition),
-                renderSummary: () => React.createElement(PlusMinusSettingsWizardSection_1.PlusMinusSettingsSummary, { hasCondition: hasCondition }),
-                render: () => (React.createElement(PlusMinusSettingsWizardSection_1.PlusMinusSettingsWizardSection, { hasCondition: hasCondition, onConditionChange: setHasCondition, onChange: setPlusMinus })),
-            },
             {
                 details: 'Select Plus/Minus Tags',
                 title: 'Tags',

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,6 +21,12 @@ const ScheduleSettingsReminder = (props) => {
             });
         },
     }));
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...props.reminderSchedule,
+            Name: event.target.value,
+        });
+    };
     const handleHeaderChange = (event) => {
         props.onChange({
             ...props.reminderSchedule,
@@ -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 Schedule 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 | "Name is required" | "A Schedule with this name already exists" | "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";

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

@@ -4,7 +4,16 @@ 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 '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) {

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/components/ColorPicker/ColorPicker.js

@@ -53,8 +53,9 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
         ABcolorChoices,
         includeAlpha && (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1" },
             React.createElement(Flex_1.Box, null, "Opacity"),
-            React.createElement(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
-                    const color = (0, tinycolor2_1.default)(value).setAlpha(event.target.value).toRgbString();
-                    debouncedOnChange(color);
-                }, min: 0, max: 1, step: 0.01, type: "range" })))));
+            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:min-h-input" },
+                React.createElement(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
+                        const color = (0, tinycolor2_1.default)(value).setAlpha(event.target.value).toRgbString();
+                        debouncedOnChange(color);
+                    }, min: 0, max: 1, step: 0.01, type: "range" }))))));
 });

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -19,6 +19,6 @@ const ExpressionFunctionDocumentation = (props) => {
                 React.createElement("pre", { className: signatureClassName }, example))))))),
         props.expressionFunction.returnType && (React.createElement(Flex_1.Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Return Type"),
-            React.createElement(Tag_1.Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full" }, props.expressionFunction.returnType))))) : null;
+            React.createElement(Tag_1.Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full twa:py-1" }, props.expressionFunction.returnType))))) : null;
 };
 exports.ExpressionFunctionDocumentation = ExpressionFunctionDocumentation;

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1770107080647 || Date.now(),
-    VERSION: "22.0.0-canary.3" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1770330519921 || Date.now(),
+    VERSION: "22.0.0-canary.5" || '--current-version--',
 };

package/src/layout-manager/src/LayoutManagerModel.d.ts

@@ -172,5 +172,6 @@ export interface PivotLayoutModel extends BaseLayoutModel {
      * Display automatically calculated Totals within EACH Pivot Column Group, in the position specified
      */
     PivotColumnTotal?: 'before' | 'after' | boolean;
+    PivotResultColumnsOrder?: string[] | boolean;
 }
 export type LayoutModel = TableLayoutModel | PivotLayoutModel;

package/src/layout-manager/src/index.js

@@ -169,7 +169,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
         this.setupEvents();
         this.indexColumns();
         this.setupPivotTotals();
-        globalThis.layoutManager = this;
+        // (globalThis as any).layoutManager = this;
     }
     destroy() {
         if (this.destroyed) {
@@ -347,10 +347,11 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
         const columnState = this.gridApi
             .getColumnState()
             .filter((col) => !pivotResultColumnsSet.has(col.colId));
-        let PivotColumns = this.gridApi.getPivotColumns().map((col) => col.getColId());
+        const PivotColumns = this.gridApi.getPivotColumns().map((col) => col.getColId());
         const layout = this.getUndecidedLayoutModelFromGrid(columnState);
         let ColumnSizing = layout.ColumnSizing || {};
         let ColumnVisibility = { ...layout.ColumnVisibility };
+        const storePivotResultColumns = !!prevLayout?.PivotResultColumnsOrder;
         //let's also include the column widths of the pivotResult columns
         pivotResultColumns.forEach((col) => {
             const colId = col.getColId();
@@ -404,6 +405,13 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             GrandTotalRow: layout.GrandTotalRow,
             PivotExpandLevel: prevLayout?.PivotExpandLevel ?? -1,
         };
+        if (storePivotResultColumns) {
+            // Get pivot result columns in display order (not creation order)
+            const displayedPivotResultColumns = this.gridApi
+                .getAllDisplayedColumns()
+                .filter((col) => pivotResultColumnsSet.has(col.getColId()));
+            pivotLayout.PivotResultColumnsOrder = displayedPivotResultColumns.map((col) => col.getColId());
+        }
         if (layout.SuppressAggFuncInHeader) {
             pivotLayout.SuppressAggFuncInHeader = layout.SuppressAggFuncInHeader;
         }
@@ -427,20 +435,20 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
         let TableColumns = columnState.map((c) => c.colId);
         // .filter((colId) => colId !== 'ag-Grid-SelectionColumn');
         let ColumnSorts = [];
-        let RowGroupedColumns = [];
+        const RowGroupedColumns = [];
         let RowGroupValues = undefined;
         let ColumnGroupValues = undefined;
         let TableAggregationColumns = [];
-        let ColumnPinning = {};
+        const ColumnPinning = {};
         const gridState = this.gridApi.getState();
         const prevLayout = this.currentLayout;
         const prevAggColumns = prevLayout?.TableAggregationColumns ?? prevLayout?.PivotAggregationColumns;
-        let ColumnSizing = { ...prevLayout?.ColumnSizing };
+        const ColumnSizing = { ...prevLayout?.ColumnSizing };
         const prevAggColumnsMap = prevAggColumns?.reduce((acc, agg) => {
             acc[agg.ColumnId] = agg;
             return acc;
         }, {});
-        let ColumnVisibility = columnState.reduce((acc, colState) => {
+        const ColumnVisibility = columnState.reduce((acc, colState) => {
             const colId = colState.colId;
             // normally we take the initial width from this object
             let initialWidth = this.initialColumnWidths[colId];
@@ -1242,7 +1250,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
         }
     }
     computeColumnStateForPivotLayout(layout) {
-        let columnState = {};
+        const columnState = {};
         const pivotColumnsToIndexes = (layout.PivotColumns || []).reduce((acc, colId, index) => {
             acc[colId] = index;
             return acc;
@@ -1273,6 +1281,12 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
         this.computeColumnSorts(layout, columnState);
         this.computePinnedColumns(layout, columnState);
         this.computePivotAggregations(layout, columnState);
+        // Add pivot result columns to the state for ordering (will be applied with applyOrder: true later)
+        if (Array.isArray(layout.PivotResultColumnsOrder)) {
+            layout.PivotResultColumnsOrder.forEach((colId) => {
+                columnState.state.push({ colId });
+            });
+        }
         return columnState;
     }
     computePivotAggregations(layout, columnState) {
@@ -1513,6 +1527,10 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             });
             // now recompute and apply the last one
             this.computePivotAggregations(layout, columnState);
+            // Apply order only on the final call when PivotResultColumns is specified
+            if (Array.isArray(layout.PivotResultColumnsOrder)) {
+                columnState.applyOrder = true;
+            }
             this.gridApi.applyColumnState(columnState);
             // let's also include the column widths of the pivotResult columns
             // we can't simply include those in the columnState because the columnState will also apply order

package/src/layout-manager/src/normalizeLayoutModel.js

@@ -138,6 +138,9 @@ function normalizePivotLayoutModel(layout) {
     if (!layout.ColumnPinning) {
         layout.ColumnPinning = {};
     }
+    if (!layout.PivotResultColumnsOrder) {
+        layout.PivotResultColumnsOrder = false;
+    }
     if (!layout.ColumnSizing) {
         layout.ColumnSizing = {};
     }