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

package/src/Strategy/ShortcutModule.js

@@ -82,6 +82,10 @@ export class ShortcutModule extends AdaptableModuleBase {
         return {
             abObject: shortcut,
             items: [
+                {
+                    name: 'Name',
+                    values: [shortcut.Name],
+                },
                 getScopeViewItems(shortcut.Scope, this.api),
                 getShortcutSettingsViewItems(shortcut),
                 getObjectTagsViewItems(shortcut, this.api),

package/src/Utilities/Extensions/StringExtensions.d.ts

@@ -17,6 +17,7 @@ export declare function Humanize(str: string): string;
 export declare function ReplaceEmptySpacesWithUnderscore(str?: string): string;
 export declare function IsNumeric(str: string): boolean;
 export declare function UnescapeHtmlEntities(str: string): string;
+export declare function ReplaceAllOccurencesExceptLastOne(str: string, searchTerm: string, replacement: string): string;
 export declare const StringExtensions: {
     IsNull: typeof IsNull;
     IsNotNull: typeof IsNotNull;
@@ -37,5 +38,6 @@ export declare const StringExtensions: {
     ReplaceEmptySpacesWithUnderscore: typeof ReplaceEmptySpacesWithUnderscore;
     IsNumeric: typeof IsNumeric;
     UnescapeHtmlEntities: typeof UnescapeHtmlEntities;
+    ReplaceAllOccurencesExceptLastOne: typeof ReplaceAllOccurencesExceptLastOne;
 };
 export default StringExtensions;

package/src/Utilities/Extensions/StringExtensions.js

@@ -92,6 +92,21 @@ export function UnescapeHtmlEntities(str) {
     }
     return preparedStr;
 }
+export function ReplaceAllOccurencesExceptLastOne(str, searchTerm, replacement) {
+    // Find the index of the last occurrence of the search string
+    const lastIndex = str.lastIndexOf(searchTerm);
+    // If the string is not found, return the original string
+    if (lastIndex === -1) {
+        return str;
+    }
+    // Slice the string into two parts: before and after the last occurrence
+    const partBeforeLast = str.slice(0, lastIndex);
+    const partAfterLast = str.slice(lastIndex);
+    // Replace all occurrences in the first part
+    const replacedPart = partBeforeLast.replaceAll(searchTerm, replacement);
+    // Recombine the modified first part with the untouched second part
+    return replacedPart + partAfterLast;
+}
 export const StringExtensions = {
     IsNull,
     IsNotNull,
@@ -112,5 +127,6 @@ export const StringExtensions = {
     ReplaceEmptySpacesWithUnderscore,
     IsNumeric,
     UnescapeHtmlEntities,
+    ReplaceAllOccurencesExceptLastOne,
 };
 export default StringExtensions;

package/src/Utilities/Helpers/FormatHelper.js

@@ -28,7 +28,6 @@ export function NumberFormatter(input, options = {}, rowNode, column, api) {
     if (isNaN(n)) {
         return preparedInput.toString();
     }
-    const fractionsSepatator = options.FractionSeparator ? options.FractionSeparator : '.';
     let multiplier = options.Multiplier ? options.Multiplier : 1;
     if (options.Multiplier !== undefined) {
         n *= multiplier;
@@ -65,6 +64,7 @@ export function NumberFormatter(input, options = {}, rowNode, column, api) {
     }
     let s;
     let digitsToUse;
+    const fractionsSepatator = options.FractionSeparator ?? '.';
     if (options.Truncate || options.Ceiling || options.Round || options.Floor) {
         digitsToUse = 0;
     }
@@ -84,7 +84,14 @@ export function NumberFormatter(input, options = {}, rowNode, column, api) {
         s = s.replace(/\./g, options.FractionSeparator);
     }
     if (options.IntegerSeparator !== undefined) {
-        s = s.replace(/\,/g, options.IntegerSeparator);
+        // if fraction separator is not a comma then simply replace all instances
+        if (options.FractionSeparator !== ',') {
+            s = s.replace(/\,/g, options.IntegerSeparator);
+        }
+        else {
+            // otherwise don't replace the last instance
+            s = StringExtensions.ReplaceAllOccurencesExceptLastOne(s, ',', options.IntegerSeparator);
+        }
     }
     s = (options.Prefix || '') + s + (options.Suffix || '');
     if (options.Parentheses === true && preparedInput < 0) {

package/src/Utilities/ObjectFactory.js

@@ -6,7 +6,7 @@ import { Bounce, Flip, Slide, Zoom } from '../components/Toastify';
 import { BLACK, getHexForName, LIGHT_GRAY } from '../View/UIHelper';
 import { isPivotLayout } from '../Api/Implementation/LayoutHelpers';
 export function CreateEmptyCustomSort() {
-    return { Uuid: createUuid(), ColumnId: EMPTY_STRING, SortedValues: [] };
+    return { Uuid: createUuid(), Name: EMPTY_STRING, ColumnId: EMPTY_STRING, SortedValues: [] };
 }
 export function CreateAdaptableComment(text, api) {
     const comment = {
@@ -44,6 +44,7 @@ export function CreateEmptyNamedQuery(expression) {
 export function CreateEmptyPlusMinusNudge() {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         Scope: undefined,
         Rule: undefined,
         NudgeValue: PLUS_MINUS_DEFAULT_NUDGE_VALUE,
@@ -81,6 +82,7 @@ export function CreateRowChangedAlert(alertHeader, alertMessage, alertDefinition
 export function CreateEmptyAlertDefinition() {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         Scope: { All: true },
         Rule: {
             Predicates: [],
@@ -92,6 +94,7 @@ export function CreateEmptyAlertDefinition() {
 export function CreateEmptyFlashingCellDefinition() {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         Scope: { ColumnIds: [] },
         Rule: {
             Predicates: [
@@ -108,6 +111,7 @@ export function CreateInternalAlertDefinitionForMessages(messageType, alertPrope
     };
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         Scope: undefined,
         Rule: {
             Predicates: [],
@@ -129,6 +133,7 @@ export function CreateEmptyReport() {
 export function CreateEmptyBaseSchedule(scheduleType) {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         ScheduleType: scheduleType,
         Schedule: CreateEmptySchedule(),
     };
@@ -136,6 +141,7 @@ export function CreateEmptyBaseSchedule(scheduleType) {
 export function CreateEmptyReminderSchedule() {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         ScheduleType: ScheduleType.Reminder,
         Schedule: CreateEmptySchedule(),
         Header: EMPTY_STRING,
@@ -148,6 +154,7 @@ export function CreateEmptyReminderSchedule() {
 export function CreateEmptyReportSchedule() {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         ScheduleType: ScheduleType.Report,
         Schedule: CreateEmptySchedule(),
         ReportName: EMPTY_STRING,
@@ -172,6 +179,7 @@ export function CreateEmptyOpenFinReport() {
 export function CreateEmptyIPushPullSchedule() {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         ScheduleType: ScheduleType.ipushpull,
         Schedule: CreateEmptySchedule(),
         IPushPullReport: CreateEmptyIPushPullReport(),
@@ -181,6 +189,7 @@ export function CreateEmptyIPushPullSchedule() {
 export function CreateEmptyOpenFinSchedule() {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         ScheduleType: ScheduleType.OpenFin,
         Schedule: CreateEmptySchedule(),
         OpenFinReport: CreateEmptyOpenFinReport(),
@@ -190,6 +199,7 @@ export function CreateEmptyOpenFinSchedule() {
 export function CreateIPushPullSchedule(iPushPullReport) {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         ScheduleType: ScheduleType.ipushpull,
         Schedule: CreateEmptySchedule(),
         IPushPullReport: iPushPullReport,
@@ -199,6 +209,7 @@ export function CreateIPushPullSchedule(iPushPullReport) {
 export function CreateReportSchedule(reportName, reportFormat) {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         ScheduleType: ScheduleType.Report,
         Schedule: CreateEmptySchedule(),
         ReportName: reportName,
@@ -207,7 +218,6 @@ export function CreateReportSchedule(reportName, reportFormat) {
 }
 export function CreateEmptySchedule() {
     return {
-        Uuid: createUuid(),
         OneOffDate: undefined,
         DaysOfWeek: [],
         Hour: 0,
@@ -217,6 +227,7 @@ export function CreateEmptySchedule() {
 export function CreateEmptyShortcut() {
     return {
         Uuid: createUuid(),
+        Name: EMPTY_STRING,
         Scope: undefined,
         ShortcutKey: EMPTY_STRING,
         ShortcutValue: undefined,
@@ -225,6 +236,8 @@ export function CreateEmptyShortcut() {
 }
 export function CreateEmptyFormatColumn() {
     return {
+        Uuid: createUuid(),
+        Name: EMPTY_STRING,
         Scope: undefined,
         Style: CreateEmptyStyle(),
         DisplayFormat: undefined,

package/src/View/Alert/Utilities/getDefaultAlertDefinition.d.ts

@@ -13,10 +13,11 @@ export declare const getDefaultAlertDefinition: (alertDefinition: AlertDefinitio
     MessageText?: string;
     AlertProperties?: import("../../../types").AlertProperties;
     AlertForm?: string | import("../../../types").AlertButtonForm;
-    IsSuspended?: boolean;
+    Name: string;
     Source?: "InitialState" | "User";
     AdaptableVersion?: import("../../../types").AdaptableVersion;
     IsReadOnly?: boolean;
     Tags?: import("../../../types").AdaptableObjectTag[];
     Metadata?: any;
+    IsSuspended?: boolean;
 };

package/src/View/Alert/Wizard/AlertTypeWizardSection.d.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { AlertType } from '../Utilities/getAlertType';
+import { AdaptableApi, AlertDefinition } from '../../../types';
+export declare const isSettingsValid: (data: AlertDefinition, api: AdaptableApi) => true | "Name is required" | "An Alert already exists with that name";
 export declare const renderAlertTypeSummary: (alertType: AlertType) => React.JSX.Element;
-type AlertBehaviourWizardSectionProps = {
+type AlertTypeWizardSectionProps = {
     onAlertTypeChange: (alertType: AlertType) => void;
     alertType: AlertType | null;
+    onChange: (data: AlertDefinition) => void;
 };
-export declare const AlertTypeWizardSection: (props: AlertBehaviourWizardSectionProps) => React.JSX.Element;
+export declare const AlertTypeWizardSection: (props: AlertTypeWizardSectionProps) => React.JSX.Element;
 export {};

package/src/View/Alert/Wizard/AlertTypeWizardSection.js

@@ -3,20 +3,55 @@ import { Tabs } from '../../../components/Tabs';
 import { AlertType, getAlertTypeText } from '../Utilities/getAlertType';
 import { TypeRadio } from '../../Wizard/TypeRadio';
 import { Tag } from '../../../components/Tag';
-import { Box, Flex } from '../../../components/Flex';
+import { Flex } from '../../../components/Flex';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import Input from '../../../components/Input';
+import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
+export const isSettingsValid = (data, api) => {
+    if (!data.Name?.trim()) {
+        return 'Name is required';
+    }
+    const allAlerts = api.alertApi.getAlertDefinitions();
+    const isDuplicateName = allAlerts.some((a) => a.Name === data.Name && a.Uuid !== data.Uuid);
+    if (isDuplicateName) {
+        return 'An Alert already exists with that name';
+    }
+    return true;
+};
 export const renderAlertTypeSummary = (alertType) => {
+    const { data } = useOnePageAdaptableWizardContext();
     const text = getAlertTypeText(alertType);
-    return (React.createElement(Box, null,
-        React.createElement(Tag, null, text)));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SummaryText, null,
+            "Name ",
+            React.createElement(Tag, null, data.Name || 'Not specified')),
+        React.createElement(SummaryText, null,
+            "Type ",
+            React.createElement(Tag, null, text))));
 };
 export const AlertTypeWizardSection = (props) => {
-    return (React.createElement(Tabs, null,
-        React.createElement(Tabs.Tab, null, "Alert Type"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(Flex, { flexDirection: "column" },
-                React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === AlertType.DataChange, onClick: () => props.onAlertTypeChange(AlertType.DataChange) }),
-                React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === AlertType.RowChange, onClick: () => props.onAlertTypeChange(AlertType.RowChange) }),
-                React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(AlertType.Aggregation), checked: props.alertType === AlertType.Aggregation }),
-                React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(AlertType.Observable), checked: props.alertType === AlertType.Observable }),
-                React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === AlertType.Validation, onClick: () => props.onAlertTypeChange(AlertType.Validation) })))));
+    const { data } = useOnePageAdaptableWizardContext();
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
+    return (React.createElement(Flex, { flexDirection: "column" },
+        React.createElement(Tabs, null,
+            React.createElement(Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Name" },
+                        React.createElement(Input, { "data-name": "alert-name", className: "twa:flex-1 twa:max-w-[200px] twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }))))),
+        React.createElement(Tabs, { className: "twa:mt-2" },
+            React.createElement(Tabs.Tab, null, "Alert Type"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === AlertType.DataChange, onClick: () => props.onAlertTypeChange(AlertType.DataChange) }),
+                    React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === AlertType.RowChange, onClick: () => props.onAlertTypeChange(AlertType.RowChange) }),
+                    React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(AlertType.Aggregation), checked: props.alertType === AlertType.Aggregation }),
+                    React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(AlertType.Observable), checked: props.alertType === AlertType.Observable }),
+                    React.createElement(TypeRadio, { text: getAlertTypeText(AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === AlertType.Validation, onClick: () => props.onAlertTypeChange(AlertType.Validation) }))))));
 };

package/src/View/Alert/Wizard/AlertWizard.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { AlertScopeWizardSection } from './AlertScopeWizardSection';
@@ -15,7 +15,7 @@ import { useDispatch } from 'react-redux';
 import * as AlertRedux from '../../../Redux/ActionsReducers/AlertRedux';
 import { useAdaptable } from '../../AdaptableContext';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
-import { AlertTypeWizardSection, renderAlertTypeSummary } from './AlertTypeWizardSection';
+import { AlertTypeWizardSection, renderAlertTypeSummary, isSettingsValid, } from './AlertTypeWizardSection';
 import { AlertType, getAlertType } from '../Utilities/getAlertType';
 import { mapAlertDefinition } from '../Utilities/mapAlertDefinition';
 import { getDefaultAlertDefinition } from '../Utilities/getDefaultAlertDefinition';
@@ -25,7 +25,7 @@ export const AlertWizard = (props) => {
     const { api } = useAdaptable();
     const dispatch = useDispatch();
     const behaviourSpelling = api.internalApi.getCorrectEnglishVariant('Behaviour');
-    const [alertDefinition, setAlertDefinition] = useState(() => {
+    const [alertDefinition, doSetAlertDefinition] = useState(() => {
         const alertDefinition = props.data
             ? cloneObject(props.data)
             : ObjectFactory.CreateEmptyAlertDefinition();
@@ -45,6 +45,9 @@ export const AlertWizard = (props) => {
         alertDefinition.MessageType = alertDefinition.MessageType ?? ALERT_DEFAULT_MESSAGE_TYPE;
         return alertDefinition;
     });
+    const setAlertDefinition = useCallback((data) => {
+        doSetAlertDefinition(data);
+    }, []);
     // Alert type is based initialy on data, but can be changed by the user
     // the default objects do not neccesary have enough information to determine the type
     const [alertType, setAlertType] = useState(() => {
@@ -59,22 +62,23 @@ export const AlertWizard = (props) => {
         }
         props.onCloseWizard();
     };
-    const updateAlertDefinition = (newAlertDefinition) => {
-        setAlertDefinition(mapAlertDefinition(api, newAlertDefinition));
-    };
+    const updateAlertDefinition = useCallback((newAlertDefinition) => {
+        doSetAlertDefinition(mapAlertDefinition(api, newAlertDefinition));
+    }, [api]);
     const handleAlertTypeChange = (newAlertType) => {
         setAlertType(newAlertType);
-        setAlertDefinition(getDefaultAlertDefinition(alertDefinition, newAlertType));
+        doSetAlertDefinition(getDefaultAlertDefinition(alertDefinition, newAlertType));
     };
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Type',
+                title: 'Name & Type',
+                isValid: isSettingsValid,
                 details: (React.createElement(React.Fragment, null,
-                    "Select ",
+                    "Enter Name and select ",
                     React.createElement("b", null, "what"),
                     " type of change in AdapTable will cause the Alert to fire")),
                 render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange }))),
+                    React.createElement(AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }))),
                 renderSummary: () => renderAlertTypeSummary(alertType),
             },
             {

package/src/View/Components/Buttons/EntityListActionButtons.d.ts

@@ -2,8 +2,7 @@ import * as React from 'react';
 import * as Redux from 'redux';
 import { AccessLevel } from '../../../AdaptableState/Common/Entitlement';
 import { AdaptableSharedEntityConfig } from '../../../AdaptableState/TeamSharingState';
-import { AdaptableObject } from '../../../AdaptableState/Common/AdaptableObject';
-import { SuspendableObject } from '../../../AdaptableState/Common/SuspendableObject';
+import { AdaptableObject, SuspendableObject } from '../../../AdaptableState/Common/AdaptableObject';
 export interface EntityListActionButtonsProps extends React.ClassAttributes<EntityListActionButtons> {
     editClick?: () => void;
     cloneClick?: () => void;

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { AdaptableObject } from '../../../../AdaptableState/Common/AdaptableObject';
+import { AdaptableObject, SuspendableObject } from '../../../../AdaptableState/Common/AdaptableObject';
 import { AccessLevel } from '../../../../AdaptableState/Common/Entitlement';
-import { SuspendableObject } from '../../../../AdaptableState/Common/SuspendableObject';
 interface EntityListSuspendButtonProps {
     onSuspend: (adaptableObject: AdaptableObject) => void;
     onUnSuspend: (adaptableObject: AdaptableObject) => void;

package/src/View/Components/StyleComponent.d.ts

@@ -10,6 +10,7 @@ export interface StyleComponentProps {
     hidePreview?: boolean;
     headerText?: string;
     Style: AdaptableStyle;
+    /** @deprecated No longer used - font size is always displayed as dropdown */
     showFontSizeAs?: 'radio' | 'dropdown';
     UpdateStyle: (style: AdaptableStyle) => void;
 }

package/src/View/Components/StyleComponent.js

@@ -5,7 +5,7 @@ import { CheckBox } from '../../components/CheckBox';
 import { ColorPicker } from '../../components/ColorPicker';
 import HelpBlock from '../../components/HelpBlock';
 import Panel from '../../components/Panel';
-import Radio from '../../components/Radio';
+import { Tabs } from '../../components/Tabs';
 import { Select } from '../../components/Select';
 import { StylePreview } from '../../components/StylePreview';
 import { Toggle, ToggleGroup } from '../../components/Toggle';
@@ -148,25 +148,85 @@ export const StyleComponent = (props) => {
     const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
     const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
     const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
-    const fontSizes = ['Default', ...EnumExtensions.getNames(FontSize)];
     return (React.createElement(Cmp, { ...cmpProps, className: twMerge(clsx('ab-StyleComponent twa:text-3', props.className)) },
-        ArrayExtensions.IsNotNullOrEmpty(styleClassNames) && (React.createElement(Flex, { flexDirection: "row", className: "twa:p-2" },
-            React.createElement(Radio, { "data-name": "show-class-name", value: "classname", checked: showClassName, onChange: () => onShowClassNameChanged(true) }, "Use Style Class Name"),
-            ' ',
-            React.createElement(Radio, { "data-name": "create-style", className: "twa:ml-3", value: "expression", checked: !showClassName, onChange: () => onShowClassNameChanged(false) }, "Create Style"),
-            ' ')),
-        showClassName ? (React.createElement(Card, { shadow: false },
-            React.createElement(Card.Title, null, "CSS Class Name"),
-            React.createElement(Card.Body, { gap: 2, className: "twa:p-1" },
-                React.createElement(HelpBlock, null, "Select a CSS Class Name"),
-                React.createElement(Box, { className: "twa:max-w-[15rem]" },
-                    React.createElement(Select, { options: ArrayExtensions.IsNullOrEmpty(styleClassNames)
-                            ? []
-                            : styleClassNames.map((item) => ({
-                                label: item,
-                                value: item,
-                            })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
-                React.createElement(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn" }, 'Please ensure that the styles listed are in the current stylesheet')))) : (React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
+        ArrayExtensions.IsNotNullOrEmpty(styleClassNames) ? (React.createElement(Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname') },
+            React.createElement(Tabs.Tab, { "data-name": "show-class-name", value: "classname" }, "Use Style Class Name"),
+            React.createElement(Tabs.Tab, { "data-name": "create-style", value: "createstyle" }, "Create Style"),
+            React.createElement(Tabs.Content, { value: "classname" },
+                React.createElement(Card, { shadow: false },
+                    React.createElement(Card.Title, null, "CSS Class Name"),
+                    React.createElement(Card.Body, { gap: 2, className: "twa:p-1" },
+                        React.createElement(HelpBlock, null, "Select a CSS Class Name"),
+                        React.createElement(Box, { className: "twa:max-w-[15rem]" },
+                            React.createElement(Select, { options: ArrayExtensions.IsNullOrEmpty(styleClassNames)
+                                    ? []
+                                    : styleClassNames.map((item) => ({
+                                        label: item,
+                                        value: item,
+                                    })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
+                        React.createElement(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn" }, 'Please ensure that the styles listed are in the current stylesheet')))),
+            React.createElement(Tabs.Content, { value: "createstyle" },
+                React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
+                    React.createElement(Card, { shadow: false, className: "twa:flex-1" },
+                        React.createElement(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
+                            React.createElement(Card.Title, { className: "twa:col-span-2" },
+                                colourSpellingVariant,
+                                " & Border Properties"),
+                            React.createElement(HelpBlock, { className: "twa:col-span-2" },
+                                "Set ",
+                                coloursSpellingVariant,
+                                " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
+                                coloursSpellingVariant),
+                            React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
+                                "Back ",
+                                colourSpellingVariant),
+                            React.createElement(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
+                            React.createElement(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
+                                "Fore ",
+                                colourSpellingVariant),
+                            React.createElement(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
+                            React.createElement(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
+                                "Border ",
+                                colourSpellingVariant),
+                            React.createElement(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
+                            React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
+                            React.createElement(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+                                    const number = Number(event.target.value);
+                                    if (isNaN(number)) {
+                                        onBorderRadiusChange(0);
+                                    }
+                                    else {
+                                        onBorderRadiusChange(number);
+                                    }
+                                } }),
+                            React.createElement(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
+                            React.createElement(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
+                            React.createElement("span", null, "Font Style"),
+                            React.createElement(ToggleGroup, null,
+                                React.createElement(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
+                                React.createElement(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
+                            React.createElement("span", null, "Text Decoration"),
+                            React.createElement(ToggleGroup, null,
+                                React.createElement(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
+                                React.createElement(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
+                                React.createElement(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
+                            React.createElement("span", null, "Font Size"),
+                            React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
+                                React.createElement(Select, { placeholder: "Default", options: [
+                                        {
+                                            label: 'Default',
+                                            value: '',
+                                        },
+                                        ...EnumExtensions.getNames(FontSize).map((enumName) => ({
+                                            label: enumName,
+                                            value: enumName,
+                                        })),
+                                    ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
+                            React.createElement("span", null, "Alignment"),
+                            React.createElement(ToggleGroup, null,
+                                React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
+                                React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
+                                React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))))) : (React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
             React.createElement(Card, { shadow: false, className: "twa:flex-1" },
                 React.createElement(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
                     React.createElement(Card.Title, { className: "twa:col-span-2" },
@@ -211,7 +271,7 @@ export const StyleComponent = (props) => {
                         React.createElement(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
                         React.createElement(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
                     React.createElement("span", null, "Font Size"),
-                    !props.showFontSizeAs || props.showFontSizeAs === 'dropdown' ? (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
+                    React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
                         React.createElement(Select, { placeholder: "Default", options: [
                                 {
                                     label: 'Default',
@@ -221,21 +281,12 @@ export const StyleComponent = (props) => {
                                     label: enumName,
                                     value: enumName,
                                 })),
-                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) }))) : (React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:gap-2 twa:flex-wrap" }, fontSizes.map((enumName) => {
-                        return (React.createElement(Radio, { onClick: () => onFontSizeChange(enumName), checked: (enumName == 'Default' && !componentStyle.FontSize) ||
-                                componentStyle.FontSize === enumName, key: enumName }, enumName));
-                    }))),
+                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
                     React.createElement("span", null, "Alignment"),
                     React.createElement(ToggleGroup, null,
-                        React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed
-                                ? onAlignmentChange('Left')
-                                : onAlignmentChange('Default') }),
-                        React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed
-                                ? onAlignmentChange('Center')
-                                : onAlignmentChange('Default') }),
-                        React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed
-                                ? onAlignmentChange('Right')
-                                : onAlignmentChange('Default') })))))),
+                        React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
+                        React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
+                        React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))),
         !props.hidePreview && (React.createElement(Card, { shadow: false },
             React.createElement(Card.Title, null, "Preview"),
             React.createElement(Card.Body, { className: "twa:grid twa:place-items-center" },

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.d.ts

@@ -3,7 +3,8 @@ import { CustomSort } from '../../../AdaptableState/CustomSortState';
 export type CustomSortColumnWizardSectionProps = {
     onChange: (data: CustomSort) => void;
     isNew: boolean;
+    allCustomSorts: CustomSort[];
 };
 export declare const renderCustomSortColumn: (data: CustomSort) => React.JSX.Element;
-export declare const isValidCustomSortColumn: (data: CustomSort) => true | string;
+export declare const isValidCustomSortColumn: (data: CustomSort, allCustomSorts: CustomSort[]) => true | string;
 export declare const CustomSortColumnWizardSection: (props: CustomSortColumnWizardSectionProps) => React.JSX.Element;