@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -1,24 +1,17 @@
 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 FormLayout, { FormRow } from '../../../components/FormLayout';
-import { Tabs } from '../../../components/Tabs';
 import { SummaryText, useOnePageAdaptableWizardContext, } from '../../Wizard/OnePageAdaptableWizard';
-import { PlusMinusRuleSummary, PlusMinusRuleWizardSection } from './PlusMinusRuleWizardSection';
-import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
 import { Tag } from '../../../components/Tag';
-import { Flex } from '../../../components/Flex';
-import { plusMinusDecrementKeyFromOptionsOnly, plusMinusIncrementKeyFromOptionsOnly, plusMinusResolvedKeysConflict, plusMinusTriggerSameAsBaseline, resolvePlusMinusTriggerKeysForNudge, } from '../../../Utilities/Helpers/plusMinusTriggerKeys';
-const plusMinusSettingsFormColumns = [
-    { name: 'label', style: { textAlign: 'start' } },
-    { name: 'children' },
-];
-export const PlusMinusSettingsSummary = (props) => {
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
+import { plusMinusDecrementKeyFromOptionsOnly, plusMinusIncrementKeyFromOptionsOnly, plusMinusResolvedKeysConflict, plusMinusTriggerSameAsBaseline, resolvePlusMinusTriggerKeysForNudge, } from '../../../Utilities/Helpers/PlusMinusHelper';
+export const PlusMinusSettingsSummary = () => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const { incrementKey, decrementKey } = resolvePlusMinusTriggerKeysForNudge(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {});
-    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: data.Name || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Nudge Value ", _jsx(Tag, { children: data.NudgeValue ?? 'Not selected' })] }), _jsxs(SummaryText, { children: ["Keys ", _jsx(Tag, { children: incrementKey }), " / ", _jsx(Tag, { children: decrementKey })] }), _jsxs(SummaryText, { children: ["Nudge Type ", _jsx(Tag, { children: props.hasCondition ? 'Conditional' : 'Always Apply' })] }), props.hasCondition && _jsx(PlusMinusRuleSummary, {})] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: data.Name || 'Not specified' })] }), _jsxs(SummaryText, { children: ["Nudge Value ", _jsx(Tag, { children: data.NudgeValue ?? 'Not selected' })] }), _jsxs(SummaryText, { children: ["Keys ", _jsx(Tag, { children: incrementKey }), " / ", _jsx(Tag, { children: decrementKey })] })] }));
 };
-export const isSettingsValid = (hasCondition) => (data, api, context) => {
+export const isSettingsValid = (data, api, _context) => {
     if (!data.Name?.trim()) {
         return 'A name is required.';
     }
@@ -27,15 +20,6 @@ export const isSettingsValid = (hasCondition) => (data, api, context) => {
     if (isDuplicateName) {
         return 'A Plus/Minus Nudge with this name already exists.';
     }
-    if (hasCondition) {
-        if (!data?.Rule?.BooleanExpression) {
-            return 'A valid rule is required.';
-        }
-        const ruleValidation = isAdaptableRuleValid(data, api, context);
-        if (typeof ruleValidation === 'string') {
-            return ruleValidation;
-        }
-    }
     if (typeof data.NudgeValue !== 'number') {
         return 'A nudge value is required.';
     }
@@ -125,5 +109,5 @@ export const PlusMinusSettingsWizardSection = (props) => {
         commitDecrementKey(event.target.value);
         setDecrementEdit(undefined);
     };
-    return (_jsxs(Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full", children: [_jsxs(Tabs, { className: "twa:p-2", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsxs(FormLayout, { columns: plusMinusSettingsFormColumns, sizes: ['minmax(140px, max-content)', '1fr'], children: [_jsx(FormRow, { label: "Name", children: _jsx(Input, { "data-name": "plus-minus-name", className: "twa:mr-3 twa:max-w-md twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) }), _jsx(FormRow, { label: "Nudge Value", children: _jsx(Input, { "data-name": "nudge-value", className: "twa:mr-3 twa:max-w-md twa:w-full", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' }) }), _jsx(FormRow, { label: "Increment key", children: _jsx(Input, { "data-name": "plus-minus-increment-key", className: "twa:mr-3 twa:max-w-md twa:w-full", onBlur: handleIncrementKeyBlur, onChange: handleIncrementKeyChange, onFocus: handleIncrementKeyFocus, value: incrementDisplayValue }) }), _jsx(FormRow, { label: "Decrement key", children: _jsx(Input, { "data-name": "plus-minus-decrement-key", className: "twa:mr-3 twa:max-w-md twa:w-full", onBlur: handleDecrementKeyBlur, onChange: handleDecrementKeyChange, onFocus: handleDecrementKeyFocus, value: decrementDisplayValue }) })] }) })] }), _jsxs(Tabs, { className: "twa:p-2", selectedIndex: props.hasCondition ? 1 : 0, onSelectedIndexChange: (index) => props.onConditionChange(index === 1), children: [_jsx(Tabs.Tab, { "data-name": "nudge-type-always", children: "Always Apply" }), _jsx(Tabs.Tab, { "data-name": "nudge-type-condition", children: "Conditional" }), _jsx(Tabs.Content, { children: _jsx(Flex, { className: "twa:text-2 twa:py-2", children: "The nudge value is always applied when using Plus/Minus" }) }), _jsx(Tabs.Content, { className: "twa:p-0", children: _jsx(PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange }) })] })] }));
+    return (_jsx(Box, { "data-name": "plus-minus-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Plus/Minus Nudge" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "plus-minus-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Nudge Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Amount added to or subtracted from the cell value when Plus/Minus is used" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "nudge-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Trigger Keys" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard keys that trigger increment and decrement" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-1 twa:opacity-80", children: "Increment key" }), _jsx(Input, { "data-name": "plus-minus-increment-key", className: "twa:max-w-[300px] twa:w-full", onBlur: handleIncrementKeyBlur, onChange: handleIncrementKeyChange, onFocus: handleIncrementKeyFocus, value: incrementDisplayValue })] }), _jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-1 twa:opacity-80", children: "Decrement key" }), _jsx(Input, { "data-name": "plus-minus-decrement-key", className: "twa:max-w-[300px] twa:w-full", onBlur: handleDecrementKeyBlur, onChange: handleDecrementKeyChange, onFocus: handleDecrementKeyFocus, value: decrementDisplayValue })] })] }) })] })] }) }));
 };

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

@@ -4,6 +4,7 @@ import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../../View/Wiz
 import { renderScopeSummary, isScopeValid } from '../../Components/NewScopeComponent';
 import { PlusMinusScopeWizardSection } from './PlusMinusScopeWizardSection';
 import { PlusMinusSettingsWizardSection, PlusMinusSettingsSummary, isSettingsValid, } from './PlusMinusSettingsWizardSection';
+import { PlusMinusRuleWizardSection, PlusMinusRuleStepSummary, isRuleValid, } from './PlusMinusRuleWizardSection';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch } from 'react-redux';
 import * as PlusMinusRedux from '../../../Redux/ActionsReducers/PlusMinusRedux';
@@ -26,22 +27,6 @@ export const PlusMinusWizard = (props) => {
     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(() => {
-        doSetPlusMinus((prev) => {
-            const preparedData = { ...prev };
-            if (hasCondition) {
-                preparedData.Rule = preparedData.Rule ?? { BooleanExpression: '' };
-            }
-            else {
-                delete preparedData.Rule;
-            }
-            return preparedData;
-        });
-    }, [hasCondition]);
     const dispatch = useDispatch();
     const handleFinish = () => {
         if (props.data) {
@@ -55,9 +40,17 @@ export const PlusMinusWizard = (props) => {
     return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: plusMinus, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
-                isValid: isSettingsValid(hasCondition),
-                renderSummary: () => _jsx(PlusMinusSettingsSummary, { hasCondition: hasCondition }),
-                render: () => (_jsx(PlusMinusSettingsWizardSection, { hasCondition: hasCondition, onConditionChange: setHasCondition, onChange: setPlusMinus })),
+                details: 'Provide details of the Plus/Minus Nudge',
+                isValid: isSettingsValid,
+                renderSummary: () => _jsx(PlusMinusSettingsSummary, {}),
+                render: () => _jsx(PlusMinusSettingsWizardSection, { onChange: setPlusMinus }),
+            },
+            {
+                title: 'Rule',
+                details: 'Choose when the nudge should be applied',
+                isValid: isRuleValid,
+                renderSummary: () => _jsx(PlusMinusRuleStepSummary, {}),
+                render: () => (_jsx(PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: setPlusMinus })),
             },
             {
                 title: 'Target',
@@ -66,9 +59,9 @@ export const PlusMinusWizard = (props) => {
                 renderSummary: () => renderScopeSummary(plusMinus.Scope, {
                     scopeWholeRow: 'Plus/Minus is applied for matching rows',
                     scopeColumns: 'Plus/Minus is applied in cells in selected columns',
-                    scopeDataTypes: 'Plus/Minus is applied for cells with selected data type',
+                    scopeDataTypes: '',
                 }),
-                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(PlusMinusScopeWizardSection, { onChange: setPlusMinus }) })),
+                render: () => _jsx(PlusMinusScopeWizardSection, { onChange: setPlusMinus }),
             },
             {
                 details: 'Select Plus/Minus Tags',
@@ -79,6 +72,7 @@ export const PlusMinusWizard = (props) => {
             },
             '-',
             {
+                details: 'Review the Plus/Minus Nudge',
                 render: () => {
                     return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
                 },

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -10,10 +10,9 @@ import { Tabs } from '../../components/Tabs';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { useQuickSearchDebounced } from './useQuickSearchDebounced';
 import { QuickSearchInput } from './QuickSearchInput';
-import HelpBlock from '../../components/HelpBlock';
 import { Card } from '../../components/Card';
-import { isQuickSearchStyleUnset, resolveQuickSearchCurrentTextMatchStyle, resolveQuickSearchTextMatchStyle, } from '../../Utilities/Helpers/QuickSearchStyleHelper';
-const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx(HelpBlock, { className: "twa:text-2", children: helpText }), _jsx(StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", headerText: headerText, api: api, Style: style, UpdateStyle: updateStyle })] }));
+import { isQuickSearchStyleUnset, resolveQuickSearchCurrentTextMatchStyle, resolveQuickSearchTextMatchStyle, } from '../../Utilities/Helpers/QuickSearchHelper';
+const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: headerText }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: helpText })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", api: api, Style: style, UpdateStyle: updateStyle }) })] }));
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced(props);
     const [state, setState] = useState({
@@ -25,7 +24,7 @@ const QuickSearchPopupComponent = (props) => {
             checked;
     };
     const isServerSideRowModel = props.api.agGridApi.getGridOption('rowModelType') === 'serverSide';
-    return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4", children: [_jsxs(Card, { children: [_jsx(Card.Title, { children: "Search Text" }), _jsx(Card.Body, { className: "twa:p-1 twa:w-fit", children: _jsx(QuickSearchInput, {}) })] }), _jsxs(Card, { children: [_jsx(Card.Title, { children: "Behaviour" }), _jsxs(Card.Body, { className: "twa:p-1", gap: 2, children: [_jsxs(HelpBlock, { className: "twa:text-2 twa:w-fit", children: ["Filter Grid when searching to only show rows with matching cells; ", _jsx("b", { children: "use with care" }), " as can cause performance issues"] }), _jsx(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" })] })] }), _jsxs(Card, { children: [_jsx(Card.Title, { children: "Matching Styles" }), _jsx(Card.Body, { className: "twa:p-0", children: isServerSideRowModel ? (_jsx(Box, { className: "twa:p-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) })) : (_jsxs(Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [_jsx(Tabs.Tab, { value: "text", children: "Text Match" }), _jsx(Tabs.Tab, { value: "current", children: "Current Match" }), _jsx(Tabs.Tab, { value: "cell", children: "Cell Match" }), _jsx(Tabs.Content, { value: "text", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }), _jsx(Tabs.Content, { value: "current", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }), _jsx(Tabs.Content, { value: "cell", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) })] })) })] })] }) }));
+    return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: _jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Search Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Enter the text to find across visible grid cells" })] }), _jsx(Card.Body, { className: "twa:p-1 twa:w-fit", children: _jsx(QuickSearchInput, {}) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Behaviour" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Filter the grid to matching rows only when searching; use with care as this can affect performance" })] }), _jsx(Card.Body, { className: "twa:p-1", gap: 2, children: _jsx(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Matching Styles" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure colours and fonts for how search matches appear in the grid" })] }), _jsx(Card.Body, { className: "twa:p-1", children: isServerSideRowModel ? (_jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle })) : (_jsxs(Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [_jsx(Tabs.Tab, { value: "text", children: "Text Match" }), _jsx(Tabs.Tab, { value: "current", children: "Current Match" }), _jsx(Tabs.Tab, { value: "cell", children: "Cell Match" }), _jsx(Tabs.Content, { value: "text", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }) }), _jsx(Tabs.Content, { value: "current", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }) }), _jsx(Tabs.Content, { value: "cell", children: _jsx(Box, { className: "twa:pt-2", children: _jsx(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) }) })] })) })] })] }) }));
 };
 function mapStateToProps(state, ownProps) {
     const quickSearch = state.QuickSearch;

package/src/View/QuickSearch/useQuickSearchDebounced.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, useMemo } from 'react';
-import debounce from '../../Utilities/utils/debounce';
+import { debounce } from '../../Utilities/Helpers/TimingHelper';
 import { QUICK_SEARCH_DEBOUNCE_TIME } from '../../Utilities/Constants/GeneralConstants';
 export const useQuickSearchDebounced = (props) => {
     const [searchText, setSearchText] = useState(props.QuickSearchText ?? '');

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

@@ -3,13 +3,13 @@ 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 AdaptableInput from '../../Components/AdaptableInput';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
 import { SingleSelect } from '../../../components/NewSelect';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
-import { buildCronExpression, buildRunAtIso, inferPresetFromCron, isScheduleValid as validateSchedule, parseOneOffDateFromRunAt, parseTimeFromSchedule, } from '../../../Utilities/Helpers/ScheduleHelper';
+import { buildCronExpression, buildRunAtIso, inferPresetFromCron, isScheduleValid as validateSchedule, parseOneOffDateFromRunAt, parseTimeFromSchedule, } from '../../../Utilities/Helpers/Scheduling/ScheduleHelper';
 export const isScheduleValid = (holder) => {
     if (!holder?.Schedule) {
         return 'Schedule is not specified';
@@ -155,5 +155,5 @@ export const ScheduleBuilderWizard = (props) => {
         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 }) })] }) })] }) }));
+    return (_jsx(Box, { "data-name": "schedule-setup", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Schedule" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure when this should run" })] }), _jsx(Card.Body, { 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 }) }))] })), (isOneOff || preset !== 'custom') && (_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,25 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
+import { Box, Flex } from '../../../components/Flex';
 export const ShortcutScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const availableColumns = React.useMemo(() => api.columnApi.getNumericColumns(), []);
-    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) => {
-            let preparedScope = Scope;
-            if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {
-                // default to checked
-                preparedScope = {
-                    ...Scope,
-                    DataTypes: ['number'],
-                };
-            }
-            props.onChange({
-                ...data,
-                Scope: preparedScope,
-            });
-        } }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify where the Shortcut should be applied (numeric columns only)" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { disableDataTypes: true, 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) => {
+                        props.onChange({
+                            ...data,
+                            Scope: Scope,
+                        });
+                    } }) })] }));
 };

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

@@ -1,15 +1,13 @@
 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';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { calculateShortcutResult, getShortcutOperationSymbol, shortcutOperationList, SHORTCUT_PREVIEW_EXAMPLE_VALUE, } from '../shortcutOperations';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Tabs } from '../../../components/Tabs';
 import { SummaryText } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
-import HelpBlock from '../../../components/HelpBlock';
 import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/NewSelect';
+import { Card } from '../../../components/Card';
 export const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -58,11 +56,24 @@ export const ShortcutSettingsWizard = (props) => {
     const optionActions = shortcutOperationList.map((operation) => ({
         value: operation,
         label: operation,
-        // onClick: () => handleOperationChange(operation),
     }));
     const optionKeys = props.availableKeys.map((key) => ({
         value: key,
         label: key,
     }));
-    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 ?? '' }) }) })] }) })] }) }));
+    const preview = React.useMemo(() => {
+        const { ShortcutOperation, ShortcutValue } = shortcut;
+        if (!ShortcutOperation || typeof ShortcutValue !== 'number') {
+            return null;
+        }
+        const result = calculateShortcutResult(SHORTCUT_PREVIEW_EXAMPLE_VALUE, ShortcutValue, ShortcutOperation);
+        if (result === null) {
+            return { error: 'Cannot divide by zero' };
+        }
+        return {
+            expression: `${SHORTCUT_PREVIEW_EXAMPLE_VALUE} ${getShortcutOperationSymbol(ShortcutOperation)} ${ShortcutValue}`,
+            result,
+        };
+    }, [shortcut.ShortcutOperation, shortcut.ShortcutValue]);
+    return (_jsx(Box, { "data-name": "shortcut-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Key" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Operation" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Example" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), _jsx(Card.Body, { children: 'error' in preview ? (_jsx(Box, { className: "twa:text-2 twa:text-destructive", children: preview.error })) : (_jsxs(Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
 };

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
@@ -50,7 +50,7 @@ export const ShortcutWizard = (props) => {
             {
                 title: 'Settings',
                 isValid: isSettingsValid,
-                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."] })),
+                details: (_jsx(_Fragment, { children: "Provide details of the Shortcut" })),
                 renderSummary: () => _jsx(ShortcutSettingsSummary, {}),
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ShortcutSettingsWizard, { availableKeys: props.availableKeys ?? availableKeys, onChange: setShortcut }) })),
             },
@@ -61,7 +61,7 @@ export const ShortcutWizard = (props) => {
                 renderSummary: () => 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',
+                    scopeDataTypes: '',
                 }),
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ShortcutScopeWizardSection, { onChange: setShortcut }) })),
             },

package/src/View/Shortcut/shortcutOperations.d.ts

@@ -1,2 +1,5 @@
 import { MathOperation } from '../../AdaptableState/Common/Enums';
 export declare const shortcutOperationList: Array<MathOperation>;
+export declare const SHORTCUT_PREVIEW_EXAMPLE_VALUE = 100;
+export declare function getShortcutOperationSymbol(operation: MathOperation): string;
+export declare function calculateShortcutResult(cellValue: number, shortcutValue: number, operation: MathOperation): number | null;

package/src/View/Shortcut/shortcutOperations.js

@@ -1,7 +1,35 @@
 import { MathOperation } from '../../AdaptableState/Common/Enums';
+import NumberExtensions from '../../Utilities/Extensions/NumberExtensions';
 export const shortcutOperationList = [
     MathOperation.Add,
     MathOperation.Subtract,
     MathOperation.Multiply,
     MathOperation.Divide,
 ];
+export const SHORTCUT_PREVIEW_EXAMPLE_VALUE = 100;
+const shortcutOperationSymbols = {
+    [MathOperation.Add]: '+',
+    [MathOperation.Subtract]: '−',
+    [MathOperation.Multiply]: '×',
+    [MathOperation.Divide]: '÷',
+};
+export function getShortcutOperationSymbol(operation) {
+    return shortcutOperationSymbols[operation];
+}
+export function calculateShortcutResult(cellValue, shortcutValue, operation) {
+    if (operation === MathOperation.Divide && shortcutValue === 0) {
+        return null;
+    }
+    switch (operation) {
+        case MathOperation.Add:
+            return NumberExtensions.avoidJavascriptPrecisionIssues(cellValue + shortcutValue);
+        case MathOperation.Subtract:
+            return NumberExtensions.avoidJavascriptPrecisionIssues(cellValue - shortcutValue);
+        case MathOperation.Multiply:
+            return NumberExtensions.avoidJavascriptPrecisionIssues(cellValue * shortcutValue);
+        case MathOperation.Divide:
+            return NumberExtensions.avoidJavascriptPrecisionIssues(cellValue / shortcutValue);
+        default:
+            return null;
+    }
+}

package/src/View/SmartEdit/SmartEditPopup.js

@@ -11,7 +11,7 @@ import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { PreviewHelper } from '../../Utilities/Helpers/PreviewHelper';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import Input from '../../components/Input';
-import DropdownButton from '../../components/DropdownButton';
+import { NewDropdownButton } from '../../components/DropdownButton';
 import SimpleButton from '../../components/SimpleButton';
 import { Flex } from '../../components/Flex';
 const preventDefault = (e) => e.preventDefault();
@@ -54,7 +54,7 @@ class SmartEditPopupComponent extends React.Component {
                 if (e.key === 'Enter') {
                     this.submit();
                 }
-            }, 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'
+            }, children: [_jsxs(Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [_jsx(NewDropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, 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 &&

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -13,8 +13,8 @@ import { AdaptablePopover } from '../AdaptablePopover';
 import { UIHelper } from '../UIHelper';
 import { connect } from 'react-redux';
 import { Flex } from '../../components/Flex';
-import clsx from 'clsx';
 import { SingleSelect } from '../../components/NewSelect';
+import { cn } from '../../lib/utils';
 class SmartEditViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -68,7 +68,7 @@ class SmartEditViewPanelComponent extends React.Component {
             !this.props.IsValidSelection ||
             this.props.api.layoutApi.isCurrentLayoutPivot() == true;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (_jsxs(Flex, { flexDirection: "row", className: clsx(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
+        return (_jsxs(Flex, { flexDirection: "row", className: cn(`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', children: [_jsxs(Flex, { className: "twa:gap-1", children: [_jsx(SingleSelect, { ariaLabel: 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import chunk from '../Utilities/utils/chunk';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chunk } from '../Utilities/Extensions/ArrayExtensions';
 import { CheckBox } from '../components/CheckBox';
 import FormLayout, { FormRow } from '../components/FormLayout';
-import { Tabs } from '../components/Tabs';
 import { useAdaptable } from './AdaptableContext';
-import { Flex } from '../components/Flex';
+import { Box, Flex } from '../components/Flex';
+import { Card } from '../components/Card';
 export const SpecialColumnSettingsWizardStep = (props) => {
     const adaptable = useAdaptable();
+    const behaviourSpellingVariant = adaptable.api.internalApi.getCorrectEnglishVariant('behaviours');
     const possibleColumnTypes = adaptable.api.columnApi.getColumnTypes() ?? [];
     const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = props.settings ?? {};
     const handleColumnTypeChange = (columnType, checked) => {
@@ -30,9 +31,9 @@ export const SpecialColumnSettingsWizardStep = (props) => {
             ...values,
         });
     };
-    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))) }) })] }))] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Properties" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Choose which grid ", behaviourSpellingVariant, " apply to this Column"] })] }), _jsx(Card.Body, { 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(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Types" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Assign custom column types to this column" })] }), _jsx(Card.Body, { 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))) }) })] }))] }));
 };

package/src/View/StateManagement/StateManagementPopup.js

@@ -7,5 +7,5 @@ import { ExportDropdown } from './components/ExportDropdown';
 import Panel from '../../components/Panel';
 export const StateManagementPopup = (props) => {
     const baseClassName = 'ab-ManageState';
-    return (_jsxs(PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [_jsxs(Panel, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), _jsx(HelpBlock, { style: { color: 'var(--ab-color-warn)' }, children: 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied' }), _jsx(ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mt-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', _jsx(LoadButton, { tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button", children: "Load Initial Adaptable State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State', children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-adaptable-state-dropdown", children: "Select Export Destination" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-initial-state-dropdown", children: "Select Export Destination" })] })] }));
+    return (_jsxs(PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [_jsxs(Panel, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), _jsx(HelpBlock, { className: "twa:text-warn twa:mb-2", children: 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied' }), _jsx(ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mb-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', _jsx(LoadButton, { tone: "info", variant: "raised", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button", children: "Load Initial Adaptable State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State', children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", "data-name": "export-adaptable-state-dropdown", children: "Select Export Destination" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", "data-name": "export-initial-state-dropdown", children: "Select Export Destination" })] })] }));
 };

package/src/View/StateManagement/components/ExportDropdown.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../../types';
-import { DropdownButtonProps } from '../../../components/DropdownButton';
-export interface ExportDropdownProps extends Omit<DropdownButtonProps, 'options' | 'value'> {
+import { type NewDropdownButtonProps } from '../../../components/DropdownButton';
+export interface ExportDropdownProps extends Omit<NewDropdownButtonProps, 'items'> {
     api: AdaptableApi;
     type: 'adaptableState' | 'initialState';
 }

package/src/View/StateManagement/components/ExportDropdown.js

@@ -1,35 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import DropdownButton from '../../../components/DropdownButton';
+import { NewDropdownButton } from '../../../components/DropdownButton';
 import { handleExportState } from '../handleExportState';
 export const ExportDropdown = (props) => {
+    const { api, type, ...rest } = props;
     const handleChange = (destination) => {
-        switch (props.type) {
-            case 'adaptableState':
-                const adaptableState = props.api.stateApi.getPersistentState();
-                handleExportState(destination, 'adaptableState', adaptableState, props.api);
+        switch (type) {
+            case 'adaptableState': {
+                const adaptableState = api.stateApi.getPersistentState();
+                handleExportState(destination, 'adaptableState', adaptableState, api);
                 break;
-            case 'initialState':
-                const initialState = props.api.stateApi.getInitialState();
-                handleExportState(destination, 'initialState', initialState, props.api);
+            }
+            case 'initialState': {
+                const initialState = api.stateApi.getInitialState();
+                handleExportState(destination, 'initialState', initialState, api);
                 break;
+            }
         }
     };
     const destinationOptions = [
         {
-            value: 'Clipboard',
             label: 'Clipboard',
             onClick: () => handleChange('Clipboard'),
         },
         {
-            value: 'Console',
             label: 'Console',
             onClick: () => handleChange('Console'),
         },
         {
-            value: 'JSON',
             label: 'JSON',
             onClick: () => handleChange('JSON'),
         },
     ];
-    return (_jsx(DropdownButton, { className: "ab-StateManagement__Export-Dropdown", ...props, items: destinationOptions, value: undefined }));
+    return (_jsx(NewDropdownButton, { variant: "outlined", className: "ab-StateManagement__Export-Dropdown", ...rest, items: destinationOptions }));
 };

package/src/View/StatusBar/StatusBarPanel.js

@@ -4,7 +4,7 @@ import SimpleButton from '../../components/SimpleButton';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { Flex, Box } from '../../components/Flex';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 /**
  * Statusbar sub panel are similar to vs code:
  * - text
@@ -36,5 +36,5 @@ export const StatusBarPanel = (props) => {
     const preparedContent = typeof content === 'function'
         ? React.createElement(content)
         : content;
-    return (_jsxs(Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: clsx(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick, children: [props.icon && (_jsx(SimpleButton, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })), popover ? (_jsx(AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth, children: preparedContent })) : (preparedContent), ArrayExtensions.IsNotNullOrEmpty(extraActions) && (_jsx(Box, { className: "twa:ml-1", children: extraActions?.map?.((action, index) => React.createElement(action, { key: index })) }))] }));
+    return (_jsxs(Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: cn(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick, children: [props.icon && (_jsx(SimpleButton, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })), popover ? (_jsx(AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth, children: preparedContent })) : (preparedContent), ArrayExtensions.IsNotNullOrEmpty(extraActions) && (_jsx(Box, { className: "twa:ml-1", children: extraActions?.map?.((action, index) => React.createElement(action, { key: index })) }))] }));
 };