@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -1,126 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { CheckBox } from '../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Radio from '../../../components/Radio';
 import { Tabs } from '../../../components/Tabs';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box } from '../../../components/Flex';
-export const isScheduleValid = (schedule, isOneOff) => {
-    if (!schedule.Schedule) {
+import { SingleSelect } from '../../../components/NewSelect';
+import ObjectFactory from '../../../Utilities/ObjectFactory';
+import { buildCronExpression, buildRunAtIso, inferPresetFromCron, isScheduleValid as validateSchedule, parseOneOffDateFromRunAt, parseTimeFromSchedule, } from '../../../Utilities/Helpers/ScheduleHelper';
+export const isScheduleValid = (holder) => {
+    if (!holder?.Schedule) {
         return 'Schedule is not specified';
     }
-    if (schedule.Schedule.Hour === null || schedule.Schedule.Minute === null) {
-        return 'Schedule Time is not specified';
-    }
-    if (isOneOff && !schedule.Schedule.OneOffDate) {
-        return 'Schedule Date is not specified';
-    }
-    if (!isOneOff && ArrayExtensions.IsEmpty(schedule?.Schedule?.DaysOfWeek)) {
-        return 'Schedule Days are not specified';
-    }
-    return true;
+    return validateSchedule(holder.Schedule);
 };
 const daysMap = [
-    {
-        label: 'Monday',
-        value: 'Monday',
-    },
-    {
-        label: 'Tuesday',
-        value: 'Tuesday',
-    },
-    {
-        label: 'Wednesday',
-        value: 'Wednesday',
-    },
-    {
-        label: 'Thursday',
-        value: 'Thursday',
-    },
-    {
-        label: 'Friday',
-        value: 'Friday',
-    },
-    {
-        label: 'Saturday',
-        value: 'Saturday',
-    },
-    {
-        label: 'Sunday',
-        value: 'Sunday',
-    },
+    { label: 'Monday', value: 'Monday' },
+    { label: 'Tuesday', value: 'Tuesday' },
+    { label: 'Wednesday', value: 'Wednesday' },
+    { label: 'Thursday', value: 'Thursday' },
+    { label: 'Friday', value: 'Friday' },
+    { label: 'Saturday', value: 'Saturday' },
+    { label: 'Sunday', value: 'Sunday' },
 ];
-export const ScheduleScheduleWizard = (props) => {
+const PRESET_OPTIONS = [
+    { value: 'daily', label: 'Every Day' },
+    { value: 'weekdays', label: 'Weekdays (Mon–Fri)' },
+    { value: 'selectedDays', label: 'Selected Days' },
+    { value: 'monthly', label: 'Monthly' },
+    { value: 'custom', label: 'Custom Cron' },
+];
+const DEFAULT_SELECTED_DAYS = ['Monday'];
+function buildScheduleFromUiState(params) {
+    if (params.isOneOff) {
+        const date = params.oneOffDate || new Date().toISOString().slice(0, 10);
+        return {
+            IsOneOff: true,
+            RunAt: buildRunAtIso(date, params.hour, params.minute),
+        };
+    }
+    return {
+        IsOneOff: false,
+        CronExpression: buildCronExpression(params.preset, params.hour, params.minute, {
+            days: params.selectedDays,
+            dayOfMonth: params.dayOfMonth,
+            customExpression: params.customCron,
+        }),
+    };
+}
+export const ScheduleBuilderWizard = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
-    const handleIsOneOfChange = (isOneOffNew) => {
-        props.onSetIsOneOff(isOneOffNew);
-        const OneOffDate = !isOneOffNew ? null : data?.Schedule?.OneOffDate;
-        const DaysOfWeek = isOneOffNew ? [] : data?.Schedule?.DaysOfWeek;
-        props.onChange({
-            ...data,
-            Schedule: {
-                ...data.Schedule,
-                OneOffDate,
-                DaysOfWeek,
-            },
+    const schedule = data?.Schedule ?? ObjectFactory.CreateDefaultSchedule();
+    const isOneOff = schedule.IsOneOff;
+    const { hour: initialHour, minute: initialMinute } = parseTimeFromSchedule(schedule);
+    const inferred = inferPresetFromCron(schedule.CronExpression);
+    const [hour, setHour] = React.useState(initialHour);
+    const [minute, setMinute] = React.useState(initialMinute);
+    const [preset, setPreset] = React.useState(inferred.preset);
+    const [selectedDays, setSelectedDays] = React.useState(inferred.days);
+    const [dayOfMonth, setDayOfMonth] = React.useState(inferred.dayOfMonth);
+    const [customCron, setCustomCron] = React.useState(schedule.CronExpression ?? '');
+    const [oneOffDate, setOneOffDate] = React.useState(parseOneOffDateFromRunAt(schedule.RunAt));
+    React.useEffect(() => {
+        const { hour: h, minute: m } = parseTimeFromSchedule(schedule);
+        const inf = inferPresetFromCron(schedule.CronExpression);
+        setHour(h);
+        setMinute(m);
+        setPreset(inf.preset);
+        setSelectedDays(inf.days);
+        setDayOfMonth(inf.dayOfMonth);
+        setCustomCron(schedule.CronExpression ?? '');
+        setOneOffDate(parseOneOffDateFromRunAt(schedule.RunAt));
+    }, [schedule.IsOneOff, schedule.RunAt, schedule.CronExpression]);
+    const commit = React.useCallback((overrides) => {
+        const next = buildScheduleFromUiState({
+            isOneOff,
+            oneOffDate,
+            hour,
+            minute,
+            preset,
+            selectedDays,
+            dayOfMonth,
+            customCron,
+            ...overrides,
         });
+        props.onChange({ ...data, Schedule: next });
+    }, [
+        isOneOff,
+        oneOffDate,
+        hour,
+        minute,
+        preset,
+        selectedDays,
+        dayOfMonth,
+        customCron,
+        data,
+        props,
+    ]);
+    const handleFrequencyChange = (oneOff) => {
+        if (oneOff) {
+            commit({
+                isOneOff: true,
+                oneOffDate: oneOffDate || new Date().toISOString().slice(0, 10),
+            });
+        }
+        else {
+            commit({ isOneOff: false });
+        }
     };
     const handleTimeChange = (event) => {
-        const [hours, minutes] = (event.target.value || '00:00')
-            ?.split(':')
-            ?.map((item) => parseInt(item, 10));
-        props.onChange({
-            ...data,
-            Schedule: {
-                ...data.Schedule,
-                Hour: hours,
-                Minute: minutes,
-            },
-        });
+        const [h, m] = (event.target.value || '09:00')
+            .split(':')
+            .map((item) => parseInt(item, 10));
+        setHour(h);
+        setMinute(m);
+        commit({ hour: h, minute: m });
     };
-    const handleDayChange = (checked, day) => {
-        let newDays = data.Schedule.DaysOfWeek || [];
-        if (checked) {
-            newDays = [...newDays, day];
+    const handleOneOffDateChange = (event) => {
+        const value = event.target.value;
+        setOneOffDate(value);
+        commit({ oneOffDate: value });
+    };
+    const handlePresetChange = (value) => {
+        setPreset(value);
+        const days = value === 'selectedDays' && selectedDays.length === 0
+            ? DEFAULT_SELECTED_DAYS
+            : selectedDays;
+        if (value === 'selectedDays' && selectedDays.length === 0) {
+            setSelectedDays(days);
         }
-        else {
-            newDays = newDays.filter((previousDay) => previousDay !== day);
+        commit({ preset: value, selectedDays: days });
+    };
+    const handleDayChange = (checked, day) => {
+        const next = checked
+            ? [...selectedDays, day]
+            : selectedDays.filter((d) => d !== day);
+        if (next.length === 0) {
+            return;
         }
-        props.onChange({
-            ...data,
-            Schedule: {
-                ...data.Schedule,
-                DaysOfWeek: newDays,
-            },
-        });
+        setSelectedDays(next);
+        setPreset('selectedDays');
+        commit({ selectedDays: next, preset: 'selectedDays' });
     };
-    const handleOneOfDateChange = (event) => {
-        props.onChange({
-            ...data,
-            Schedule: {
-                ...data.Schedule,
-                OneOffDate: event.target.value,
-            },
-        });
+    const handleDayOfMonthChange = (event) => {
+        const dom = parseInt(event.target.value, 10) || 1;
+        setDayOfMonth(dom);
+        commit({ dayOfMonth: dom });
     };
-    let timeValue = '00:00';
-    if (typeof data.Schedule?.Hour === 'number' || typeof data?.Schedule?.Minute === 'number') {
-        const hours = `${data.Schedule?.Hour}` || '00';
-        const minute = `${data.Schedule?.Minute}` || '00';
-        timeValue = `${hours.padStart(2, '0')}:${minute.padStart(2, '0')}`;
-    }
-    return (React.createElement(Box, { "data-name": "schedule-setup" },
-        React.createElement(Tabs, { autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Schedule"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Frequency" },
-                        React.createElement(Radio, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
-                        React.createElement(Radio, { "data-name": "frequency-one-off", checked: props.isOneOff, value: "oneoff", onChange: (checked) => checked && handleIsOneOfChange(true) }, "One-Off Date")),
-                    props.isOneOff ? (React.createElement(FormRow, { label: "Date" },
-                        React.createElement(AdaptableInput, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: data.Schedule?.OneOffDate || '' }))) : (React.createElement(FormRow, { label: "Days" }, daysMap.map((day) => (React.createElement(CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: data.Schedule?.DaysOfWeek?.includes(day.value), key: day.value, onChange: (checked) => handleDayChange(checked, day.value) }, day.label))))),
-                    React.createElement(FormRow, { label: "Time" },
-                        React.createElement(AdaptableInput, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange })))))));
+    const handleCustomCronChange = (event) => {
+        const value = event.target.value;
+        setCustomCron(value);
+        commit({ customCron: value, preset: 'custom' });
+    };
+    const timeValue = `${`${hour}`.padStart(2, '0')}:${`${minute}`.padStart(2, '0')}`;
+    return (_jsx(Box, { "data-name": "schedule-setup", children: _jsxs(Tabs, { autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Schedule" }), _jsx(Tabs.Content, { children: _jsxs(FormLayout, { children: [_jsxs(FormRow, { label: "Frequency", children: [_jsx(Radio, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), _jsx(Radio, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? (_jsx(FormRow, { label: "Date", children: _jsx(AdaptableInput, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Pattern", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && (_jsx(FormRow, { label: "Days", children: daysMap.map((day) => (_jsx(CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && (_jsx(FormRow, { label: "Day of month", children: _jsx(AdaptableInput, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && (_jsx(FormRow, { label: "Cron expression", children: _jsx(AdaptableInput, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), _jsx(FormRow, { label: "Time", children: _jsx(AdaptableInput, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) })] }) })] }) }));
 };

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

@@ -1,10 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
 export const ShortcutScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const availableColumns = React.useMemo(() => api.columnApi.getNumericColumns(), []);
-    return (React.createElement(NewScopeComponent, { availableDataTypes: ['number'], scopeColumns: availableColumns, scope: data.Scope, descriptions: {
+    return (_jsx(NewScopeComponent, { availableDataTypes: ['number'], scopeColumns: availableColumns, scope: data.Scope, descriptions: {
             rowScope: 'All Numeric Columns will have the Shortcut applied',
             columnScope: 'Selected Columns will have the Shortcut applied',
         }, updateScope: (Scope) => {

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import Input from '../../../components/Input';
 import { shortcutOperationList } from '../shortcutOperations';
@@ -7,8 +8,8 @@ import { Tabs } from '../../../components/Tabs';
 import { SummaryText } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
 import HelpBlock from '../../../components/HelpBlock';
-import { Select } from '../../../components/Select';
 import { Box, Flex } from '../../../components/Flex';
+import { SingleSelect } from '../../../components/NewSelect';
 export const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -28,19 +29,7 @@ export const isSettingsValid = (data, api) => {
 };
 export const ShortcutSettingsSummary = () => {
     const { data: shortcut } = useOnePageAdaptableWizardContext();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SummaryText, null,
-            "Name ",
-            React.createElement(Tag, null, shortcut.Name || 'Not specified')),
-        React.createElement(SummaryText, null,
-            "Shortcut Key ",
-            React.createElement(Tag, null, shortcut.ShortcutKey || 'Not selected')),
-        React.createElement(SummaryText, null,
-            "Value ",
-            React.createElement(Tag, null, shortcut.ShortcutValue ?? 'Not specified')),
-        React.createElement(SummaryText, null,
-            "Operation ",
-            React.createElement(Tag, null, shortcut.ShortcutOperation ?? 'Not Specified'))));
+    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: shortcut.Name || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Shortcut Key ", _jsx(Tag, { children: shortcut.ShortcutKey || 'Not selected' })] }), _jsxs(SummaryText, { children: ["Value ", _jsx(Tag, { children: shortcut.ShortcutValue ?? 'Not specified' })] }), _jsxs(SummaryText, { children: ["Operation ", _jsx(Tag, { children: shortcut.ShortcutOperation ?? 'Not Specified' })] })] }));
 };
 export const ShortcutSettingsWizard = (props) => {
     const { data: shortcut } = useOnePageAdaptableWizardContext();
@@ -75,28 +64,5 @@ export const ShortcutSettingsWizard = (props) => {
         value: key,
         label: key,
     }));
-    return (React.createElement(Box, { "data-name": "shortcut-column-settings" },
-        React.createElement(Tabs, { autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Shortcut Settings"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Name" },
-                        React.createElement(Input, { "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(FormRow, { label: "" },
-                        React.createElement(Box, { className: "twa:h-2" })),
-                    React.createElement(FormRow, { label: "" },
-                        React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-0" }, "Keyboard key that, when pressed, triggers the Shortcut")),
-                    React.createElement(FormRow, { label: "Key" },
-                        React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Select, { "data-name": "shortcut-key", placeholder: "Select Key", options: optionKeys, onChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }))),
-                    React.createElement(FormRow, { label: "" },
-                        React.createElement(HelpBlock, { 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(FormRow, { label: "Operation" },
-                        React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Select, { "data-name": "shortcut-operation", placeholder: "Select Operation", options: optionActions, onChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }))),
-                    React.createElement(FormRow, { label: "" },
-                        React.createElement(HelpBlock, { 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(FormRow, { label: "Value" },
-                        React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Input, { "data-name": "shortcut-value", className: "twa:flex-1 twa:max-w-[100px] twa:mr-3", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }))))))));
+    return (_jsx(Box, { "data-name": "shortcut-column-settings", children: _jsxs(Tabs, { autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Shortcut Settings" }), _jsx(Tabs.Content, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Name", children: _jsx(Input, { "data-name": "shortcut-name", className: "twa:flex-1 twa:w-60 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) }), _jsx(FormRow, { label: "", children: _jsx(Box, { className: "twa:h-2" }) }), _jsx(FormRow, { label: "", children: _jsx(HelpBlock, { className: "twa:text-2 twa:mb-0", children: "Keyboard key that, when pressed, triggers the Shortcut" }) }), _jsx(FormRow, { label: "Key", children: _jsx(Flex, { flexDirection: "row", children: _jsx(SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:w-30", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }) }) }), _jsx(FormRow, { label: "", children: _jsx(HelpBlock, { className: "twa:text-2 twa:mb-0", children: "Mathematical operation performed on Cell's current value (using the Shortcut's 'value') - used to calculate the Cell's new total" }) }), _jsx(FormRow, { label: "Operation", children: _jsx(Flex, { flexDirection: "row", children: _jsx(SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:w-30", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) }) }), _jsx(FormRow, { label: "", children: _jsx(HelpBlock, { className: "twa:text-2 twa:mb-0", children: "Number that is used - together with the 'Operation' and the current cell value - to calculate the new total for the cell" }) }), _jsx(FormRow, { label: "Value", children: _jsx(Flex, { flexDirection: "row", children: _jsx(Input, { "data-name": "shortcut-value", className: "twa:flex-1 twa:w-30 twa:max-w-30 twa:mr-3", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) }) })] }) })] }) }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
@@ -45,21 +46,13 @@ export const ShortcutWizard = (props) => {
         }
         props.onFinishWizard(shortcut);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: shortcut, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: shortcut, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 isValid: isSettingsValid,
-                details: (React.createElement(React.Fragment, null,
-                    "A Shortcut is a mathematical calculation (",
-                    React.createElement("b", null, "Operation"),
-                    ") which is applied with the defined operand ",
-                    React.createElement("b", null, "Value"),
-                    " on the edited cell content when the corresponding Shortcut ",
-                    React.createElement("b", null, "Key"),
-                    " is pressed.")),
-                renderSummary: () => React.createElement(ShortcutSettingsSummary, null),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ShortcutSettingsWizard, { availableKeys: props.availableKeys ?? availableKeys, onChange: setShortcut }))),
+                details: (_jsxs(_Fragment, { children: ["A Shortcut is a mathematical calculation (", _jsx("b", { children: "Operation" }), ") which is applied with the defined operand ", _jsx("b", { children: "Value" }), " on the edited cell content when the corresponding Shortcut ", _jsx("b", { children: "Key" }), " is pressed."] })),
+                renderSummary: () => _jsx(ShortcutSettingsSummary, {}),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ShortcutSettingsWizard, { availableKeys: props.availableKeys ?? availableKeys, onChange: setShortcut }) })),
             },
             {
                 title: 'Target',
@@ -70,23 +63,20 @@ export const ShortcutWizard = (props) => {
                     scopeColumns: 'Shortcut is triggered for cells in selected columns',
                     scopeDataTypes: 'Shortcut is triggered for all numeric cells',
                 }),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ShortcutScopeWizardSection, { onChange: setShortcut }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ShortcutScopeWizardSection, { onChange: setShortcut }) })),
             },
             {
                 details: 'Select Shortcut Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setShortcut }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setShortcut }) })),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review the Shortcut',
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
                 },
                 title: 'Summary',
             },

package/src/View/SmartEdit/SmartEditPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as SmartEditRedux from '../../Redux/ActionsReducers/SmartEditRedux';
@@ -29,7 +30,7 @@ class SmartEditPopupComponent extends React.Component {
         }
         let globalValidationMessage = PreviewHelper.GetValidationMessage(this.props.PreviewInfo, `${this.props.SmartEditValue}`);
         let showPanel = this.props.PreviewInfo && StringExtensions.IsNotNullOrEmpty(`${this.props.SmartEditValue}`);
-        let previewPanel = showPanel ? (React.createElement(PreviewResultsPanel, { className: "twa:flex-[1_1_100%] twa:overflow-initial twa:h-full", previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
+        let previewPanel = showPanel ? (_jsx(PreviewResultsPanel, { className: "twa:flex-[1_1_100%] twa:overflow-initial twa:h-full", previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
         const operationMenuItems = EnumExtensions.getNames(MathOperation).map((mathOperation, index) => {
             return {
                 label: mathOperation,
@@ -47,27 +48,20 @@ class SmartEditPopupComponent extends React.Component {
                 };
             }));
         }
-        return (React.createElement(PanelWithImage, { className: "twa:h-full twa:flex-1 twa:p-0!", variant: "primary", bodyProps: {
+        return (_jsxs(PanelWithImage, { className: "twa:h-full twa:flex-1 twa:p-0!", variant: "primary", bodyProps: {
                 className: 'twa:flex twa:flex-col',
             }, bodyScroll: true, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     this.submit();
                 }
-            } },
-            React.createElement(Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2" },
-                React.createElement(DropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
-                    ? this.props.SmartEditOperation.name
-                    : this.props.SmartEditOperation),
-                React.createElement(Input, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), className: "twa:mx-2", type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
-                React.createElement(SimpleButton, { "data-name": "smart-edit-apply-button", className: "twa:mr-2", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
-                        (this.props.PreviewInfo &&
-                            this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), onClick: () => {
-                        this.submit();
-                    } }, "Apply Smart Edit"),
-                ' ',
-                this.props.PreviewInfo &&
-                    this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' }))),
-            previewPanel));
+            }, children: [_jsxs(Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [_jsx(DropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
+                                ? this.props.SmartEditOperation.name
+                                : this.props.SmartEditOperation }), _jsx(Input, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), className: "twa:mx-2", type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }), _jsx(SimpleButton, { "data-name": "smart-edit-apply-button", className: "twa:mr-2", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
+                                (this.props.PreviewInfo &&
+                                    this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), onClick: () => {
+                                this.submit();
+                            }, children: "Apply Smart Edit" }), ' ', this.props.PreviewInfo &&
+                            this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (_jsx(AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' }))] }), previewPanel] }));
     }
     submit() {
         this.props.onApplySmartEdit();

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import * as SmartEditRedux from '../../Redux/ActionsReducers/SmartEditRedux';
 import { MathOperation, StatusColour } from '../../AdaptableState/Common/Enums';
@@ -11,9 +12,9 @@ import { ButtonApply } from '../Components/Buttons/ButtonApply';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { UIHelper } from '../UIHelper';
 import { connect } from 'react-redux';
-import { Select } from '../../components/Select';
 import { Flex } from '../../components/Flex';
 import clsx from 'clsx';
+import { SingleSelect } from '../../components/NewSelect';
 class SmartEditViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -41,7 +42,7 @@ class SmartEditViewPanelComponent extends React.Component {
         let selectedColumn = StringExtensions.IsNotNullOrEmpty(this.state.SelectedColumnId)
             ? this.props.api.columnApi.getColumnWithColumnId(this.state.SelectedColumnId)
             : null;
-        let previewPanel = (React.createElement(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
+        let previewPanel = (_jsx(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
         const operationMenuItems = EnumExtensions.getNames(MathOperation).map((mathOperation, index) => {
             return {
                 onClick: () => this.props.onSmartEditOperationChange(mathOperation),
@@ -49,7 +50,7 @@ class SmartEditViewPanelComponent extends React.Component {
                 label: mathOperation,
             };
         });
-        const customOperations = this.props.api.smartEditApi.getSmartEditCustomOperations();
+        const customOperations = this.props.api.optionsApi.getEditOptions().smartEditOptions?.customOperations ?? [];
         if (customOperations?.length) {
             operationMenuItems.push(...customOperations.map((operation) => {
                 return {
@@ -67,22 +68,16 @@ class SmartEditViewPanelComponent extends React.Component {
             !this.props.IsValidSelection ||
             this.props.api.layoutApi.isCurrentLayoutPivot() == true;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { flexDirection: "row", className: clsx(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
+        return (_jsxs(Flex, { flexDirection: "row", className: clsx(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
                 'twa:flex-nowrap': this.props.viewType === 'Toolbar',
                 'twa:flex-wrap': this.props.viewType !== 'Toolbar',
-            }), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, { className: "twa:gap-1" },
-                React.createElement(Select, { "aria-label": 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'
-                        ? this.props.SmartEditOperation.name
-                        : this.props.SmartEditOperation, options: operationMenuItems, onChange: (operation) => this.props.onSmartEditOperationChange(operation) }),
-                React.createElement(Input, { style: {
-                        width: '5rem',
-                    }, className: `ab-${elementType}__SmartEdit__select-value`, value: this.props.SmartEditValue.toString(), type: "number", placeholder: "Enter a Number", step: "any", onChange: (e) => this.onSmartEditValueChange(e), disabled: shouldDisable })),
-            React.createElement(Flex, { className: "twa:gap-1" },
-                !shouldDisable && (React.createElement(ButtonApply, { onClick: () => this.onApplyClick(), style: applyButtonStyle, className: `ab-${elementType}__SmartEdit__apply`, tooltip: "Apply Smart Edit", disabled: StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
-                        (this.props.PreviewInfo != null &&
-                            this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), accessLevel: this.props.accessLevel }, this.props.viewType === 'ToolPanel' && 'Apply Smart Edit')),
-                !shouldDisable && (React.createElement(AdaptablePopover, { headerText: "Preview Results", className: `ab-${elementType}__SmartEdit__info`, bodyText: [previewPanel], popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, MessageType: UIHelper.getMessageTypeByStatusColour(statusColour), useButton: true, showEvent: 'focus', hideEvent: "blur" })))));
+            }), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsxs(Flex, { className: "twa:gap-1", children: [_jsx(SingleSelect, { ariaLabel: 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'
+                                ? this.props.SmartEditOperation.name
+                                : this.props.SmartEditOperation, items: operationMenuItems, onValueChange: (operation) => this.props.onSmartEditOperationChange(operation) }), _jsx(Input, { style: {
+                                width: '5rem',
+                            }, className: `ab-${elementType}__SmartEdit__select-value`, value: this.props.SmartEditValue.toString(), type: "number", placeholder: "Enter a Number", step: "any", onChange: (e) => this.onSmartEditValueChange(e), disabled: shouldDisable })] }), _jsxs(Flex, { className: "twa:gap-1", children: [!shouldDisable && (_jsx(ButtonApply, { onClick: () => this.onApplyClick(), style: applyButtonStyle, className: `ab-${elementType}__SmartEdit__apply`, tooltip: "Apply Smart Edit", disabled: StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
+                                (this.props.PreviewInfo != null &&
+                                    this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), accessLevel: this.props.accessLevel, children: this.props.viewType === 'ToolPanel' && 'Apply Smart Edit' })), !shouldDisable && (_jsx(AdaptablePopover, { headerText: "Preview Results", className: `ab-${elementType}__SmartEdit__info`, bodyText: [previewPanel], popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, MessageType: UIHelper.getMessageTypeByStatusColour(statusColour), useButton: true, showEvent: 'focus', hideEvent: "blur" }))] })] }));
     }
     checkSelectedCells() {
         this.props.onSmartEditCheckSelectedCells();

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import chunk from '../Utilities/utils/chunk';
-import * as React from 'react';
 import { CheckBox } from '../components/CheckBox';
 import FormLayout, { FormRow } from '../components/FormLayout';
 import { Tabs } from '../components/Tabs';
@@ -30,32 +30,9 @@ export const SpecialColumnSettingsWizardStep = (props) => {
             ...values,
         });
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Column Properties"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout, { className: "twa:w-full", columns: [
-                            { name: 'first', size: '30%' },
-                            { size: '30%', name: 'second' },
-                            { size: '30%', name: 'third' },
-                        ] },
-                        React.createElement(FormRow, null,
-                            React.createElement(CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns }, "Filterable"),
-                            React.createElement(CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
-                            React.createElement(CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
-                        React.createElement(FormRow, null,
-                            React.createElement(CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
-                            React.createElement(CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
-                            React.createElement(CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
-                        React.createElement(FormRow, null,
-                            React.createElement(CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
-                            React.createElement(CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
-                            React.createElement(CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
-        Boolean(possibleColumnTypes?.length) && (React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false },
-            React.createElement(Tabs.Tab, null, "Column Types"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, chunk(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (React.createElement(FormRow, { key: first },
-                    first && (React.createElement(CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first) }, first)),
-                    second && (React.createElement(CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second) }, second)))))))))));
+    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mt-2", autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Column Properties" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "column", children: _jsxs(FormLayout, { className: "twa:w-full", columns: [
+                                    { name: 'first', size: '30%' },
+                                    { size: '30%', name: 'second' },
+                                    { size: '30%', name: 'third' },
+                                ], children: [_jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns, children: "Filterable" }), _jsx(CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }), children: "Resizable" }), _jsx(CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }), children: "Groupable" })] }), _jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }), children: "Sortable" }), _jsx(CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }), children: "Pivotable" }), _jsx(CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }), children: "Aggregatable" })] }), _jsxs(FormRow, { children: [_jsx(CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }), children: "Suppress Menu" }), _jsx(CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }), children: "Suppress Movable" }), _jsx(CheckBox, { disabled: true, checked: props.isEditable, children: "Editable" })] })] }) }) })] }), Boolean(possibleColumnTypes?.length) && (_jsxs(Tabs, { className: "twa:mt-2", autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Column Types" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }], children: chunk(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (_jsxs(FormRow, { children: [first && (_jsx(CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first), children: first })), second && (_jsx(CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second), children: second }))] }, first))) }) })] }))] }));
 };