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

package/src/View/Components/ColumnFilter/components/ColumnFilterMenu.js

@@ -6,17 +6,69 @@ const React = tslib_1.__importStar(require("react"));
 const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const Flex_1 = require("../../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const react_1 = require("react");
 const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
     return (React.createElement(SimpleButton_1.default, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick },
         React.createElement(Flex_1.Box, { className: "twa:mr-2" }, icon),
         React.createElement(Flex_1.Box, { className: "twa:text-2" }, label)));
 };
 const ColumnFilterMenu = (props) => {
+    const [activeIndex, setActiveIndex] = React.useState(() => {
+        const index = props.predicateDefs.findIndex((predicateDef) => predicateDef.operator === props.predicate.operator);
+        return index === -1 ? 0 : index;
+    });
+    const activeIndexRef = React.useRef(activeIndex);
+    const onPredicateChangeRef = React.useRef(props.onPredicateChange);
+    const predicateDefsRef = React.useRef(props.predicateDefs);
+    (0, react_1.useLayoutEffect)(() => {
+        activeIndexRef.current = activeIndex;
+        onPredicateChangeRef.current = props.onPredicateChange;
+        predicateDefsRef.current = props.predicateDefs;
+    });
+    const confirm = React.useCallback((predicateDef) => {
+        onPredicateChangeRef.current({ operator: predicateDef.operator, args: [] });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const onKeyDown = (e) => {
+            // Only handle arrow keys and Enter - let other keys (like Tab) pass through
+            if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Enter') {
+                return;
+            }
+            const activeIndex = activeIndexRef.current;
+            const predicateDefs = predicateDefsRef.current;
+            if (e.key === 'Enter') {
+                const predicateDef = predicateDefs[activeIndex];
+                if (predicateDef) {
+                    confirm(predicateDef);
+                }
+            }
+            e.stopPropagation();
+            e.preventDefault();
+            const dir = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : 0;
+            if (dir) {
+                let nextIndex = activeIndex + dir;
+                if (nextIndex < 0) {
+                    nextIndex = predicateDefs.length - 1;
+                }
+                else if (nextIndex >= predicateDefs.length) {
+                    nextIndex = 0;
+                }
+                setActiveIndex(nextIndex);
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [confirm]);
     return (React.createElement(Panel_1.default, { className: "twa:min-w-max" }, props.predicateDefs?.map((predicateDef, index) => {
-        return (React.createElement(Flex_1.Flex, { className: "twa:mb-1", key: index, onMouseDownCapture: (e) => {
+        const active = activeIndex === index;
+        return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)("twa:mb-1", active && "twa:bg-primarylight"), key: index, onMouseDownCapture: (e) => {
                 e.stopPropagation();
+                e.preventDefault();
             } },
-            React.createElement(ColumnFilterMenuItem, { onClick: () => props.onPredicateChange({ operator: predicateDef.operator, args: [] }), icon: predicateDef.icon, label: predicateDef.label, active: props.predicate.operator === predicateDef.operator })));
+            React.createElement(ColumnFilterMenuItem, { onClick: () => confirm(predicateDef), icon: predicateDef.icon, label: predicateDef.label, active: active })));
     })));
 };
 exports.ColumnFilterMenu = ColumnFilterMenu;

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -209,7 +209,7 @@ const FloatingFilterValues = (props) => {
                     ...(props.value?.length
                         ? {
                             valueContainer: {
-                                fontWeight: 'var(--ab-cmp-quickfilter-selected-options-text__font-weight)',
+                                fontWeight: 'var(--ab-cmp-floatingfilter-selected-options-text__font-weight)',
                             },
                         }
                         : {}),

package/src/View/Components/EntityRulesEditor/Utilities.js

@@ -4,28 +4,28 @@ exports.isAdaptableRuleValid = void 0;
 const isAdaptableRuleValid = (abObject, api, context) => {
     if (abObject?.Rule?.Predicates?.length) {
         if (!api.predicateApi.isEveryPredicateValid(abObject?.Rule?.Predicates)) {
-            return `The Predicate${abObject?.Rule?.Predicates?.length === 1 ? ' is' : 's are'} not valid`;
+            return `The predicate${abObject?.Rule?.Predicates?.length === 1 ? ' is' : 's are'} not valid.`;
         }
     }
     if (abObject?.Rule?.BooleanExpression) {
         if (!api.expressionApi.isValidBooleanExpression(abObject?.Rule?.BooleanExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Boolean Expression';
+            return 'The Boolean expression is not valid.';
         }
     }
     if (abObject?.Rule?.ObservableExpression) {
         if (!api.expressionApi.isValidObservableExpression(abObject?.Rule?.ObservableExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Observable Expression';
+            return 'The Observable expression is not valid.';
         }
     }
     if (abObject?.Rule?.AggregatedBooleanExpression) {
         if (!api.expressionApi.isValidAggregatedBooleanExpression(abObject?.Rule?.AggregatedBooleanExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Aggregated Boolean Expression';
+            return 'The Aggregated Boolean expression is not valid.';
         }
     }
     if (abObject?.Rule?.Predicates?.length) {
         const isAPredicateWithInvalidColumnId = abObject?.Rule?.Predicates?.some((predicate) => predicate.ColumnId !== undefined && predicate.ColumnId === '');
         if (isAPredicateWithInvalidColumnId) {
-            return 'Predicates with custom scope need a valid column';
+            return 'Predicates with a custom scope require a valid column.';
         }
     }
     return true;

package/src/View/Components/NewScopeComponent.js

@@ -18,13 +18,13 @@ const Tag_1 = require("../../components/Tag/Tag");
 const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
-        return 'No scope specified or scope is empty';
+        return 'A scope is required.';
     }
     if (Scope && 'ColumnIds' in Scope && Scope.ColumnIds.length === 0) {
-        result.push('No Columns selected in Scope');
+        result.push('Please select at least one column for the scope.');
     }
     if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {
-        result.push('No Data Types selected in Scope');
+        result.push('Please select at least one data type for the scope.');
     }
     return result.length ? result.join(', ') : true;
 };

package/src/View/Components/Panels/PanelDashboard/index.js

@@ -5,17 +5,17 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Dashboard_1 = require("../../../../components/Dashboard");
 class PanelDashboard extends React.Component {
+    static defaultProps = {
+        showConfigureActionButton: true,
+        showCloseActionButton: true,
+        headerText: 'Module',
+        onClose: null,
+        onConfigure: null,
+        accessLevel: 'Full',
+    };
     render() {
         const { headerText, showConfigureActionButton, showCloseActionButton, onConfigure, onClose, accessLevel, children, } = this.props;
         return (React.createElement(Dashboard_1.DashboardToolbar, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureActionButton, showClose: showCloseActionButton, onClose: onClose, accessLevel: accessLevel }, children));
     }
 }
 exports.PanelDashboard = PanelDashboard;
-PanelDashboard.defaultProps = {
-    showConfigureActionButton: true,
-    showCloseActionButton: true,
-    headerText: 'Module',
-    onClose: null,
-    onConfigure: null,
-    accessLevel: 'Full',
-};

package/src/View/Components/Panels/PanelToolPanel/index.js

@@ -11,6 +11,13 @@ const ButtonMaximise_1 = require("../../Buttons/ButtonMaximise");
 const twMerge_1 = require("../../../../twMerge");
 const Flex_1 = require("../../../../components/Flex");
 class PanelToolPanel extends React.Component {
+    static defaultProps = {
+        headerText: '',
+        onClose: null,
+        onConfigure: null,
+        onMinimiseChanged: null,
+        isMinimised: true,
+    };
     render() {
         const { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure, ...props } = this.props;
         let header = (React.createElement(React.Fragment, null,
@@ -43,10 +50,3 @@ class PanelToolPanel extends React.Component {
     }
 }
 exports.PanelToolPanel = PanelToolPanel;
-PanelToolPanel.defaultProps = {
-    headerText: '',
-    onClose: null,
-    onConfigure: null,
-    onMinimiseChanged: null,
-    isMinimised: true,
-};

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -13,6 +13,7 @@ const AdaptablePopupBody_1 = require("./AdaptablePopupBody");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
 const useMenuItems_1 = require("./useMenuItems");
+const resolveContainerElement_1 = require("../../../../Utilities/resolveContainerElement");
 const AdaptablePopupDialog_1 = require("./AdaptablePopupDialog");
 const Flex_1 = require("../../../../components/Flex");
 const AdaptablePopup = (props) => {
@@ -21,7 +22,7 @@ const AdaptablePopup = (props) => {
     const settingsPanelTitle = adaptable.ModuleService.getModuleFriendlyName('SettingsPanel');
     const menuItems = (0, useMenuItems_1.useMenuItems)();
     const isWindowModal = settingsPanelOptions.popupType === 'window';
-    const modalContainer = adaptable.adaptableOptions?.containerOptions?.modalContainer;
+    const modalContainer = (0, resolveContainerElement_1.resolveContainerElement)(adaptable.adaptableOptions?.containerOptions?.modalContainer, props.api.internalApi.buildBaseContext());
     let friendlyName = null;
     /**
      * This means that it is not rendered in the context of Settings Panel

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -7,7 +7,7 @@ const UIHelper_1 = require("../../../UIHelper");
 const AdaptableViewFactory_1 = require("../../../AdaptableViewFactory");
 const AdaptablePopupModuleView_1 = require("./AdaptablePopupModuleView");
 const AdaptablePopupBody = (props) => {
-    const modalContainer = UIHelper_1.UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document);
+    const modalContainer = UIHelper_1.UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document, props.api.internalApi.buildBaseContext());
     const moduleName = props.module.moduleInfo.ModuleName;
     const accessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule(moduleName);
     const moduleInfo = props.api.internalApi.getModuleService().getModuleInfoByModule(moduleName);

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.d.ts

@@ -7,6 +7,6 @@ export declare const AdaptablePopupDialog: React.FunctionComponent<React.PropsWi
     isWindowModal: boolean;
     onHide: () => void;
     style?: React.CSSProperties;
-    modalContainer?: string | HTMLElement;
+    modalContainer?: HTMLElement;
     dataName?: string;
 }>>;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js

@@ -47,14 +47,7 @@ const PopupDialog = (props) => {
 const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
     if (modalContainer) {
-        let ref = null;
-        if (typeof modalContainer === 'string') {
-            ref = globalThis.document.querySelector(modalContainer);
-        }
-        else {
-            ref = modalContainer;
-        }
-        return (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
+        return (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), modalContainer);
     }
     if (isWindowModal) {
         const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';

package/src/View/Components/Popups/AdaptablePopupConfirmation.js

@@ -55,7 +55,7 @@ const AdaptablePopupConfirmation = (props) => {
                             setDisableDeleteConfirmation(!disableDeleteConfirmation);
                         } }, "Do not show this again")),
                 props.showInputBox && (React.createElement(Flex_1.Box, { className: "twa:p-2", "data-name": "body" },
-                    React.createElement("p", null, "Please enter a comment to confirm"),
+                    React.createElement("p", null, "Please enter a comment to confirm."),
                     React.createElement(Input_1.default, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
                 React.createElement(Flex_1.Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between" },
                     props.cancelButtonText != null ? (React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText)) : (React.createElement("div", null)),

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WindowPopups = exports.CUSTOM_WINDOW_FACTORY_ID = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const react_dom_1 = require("react-dom");
 const react_redux_1 = require("react-redux");
 const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
 const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
+const resolveContainerElement_1 = require("../../../../Utilities/resolveContainerElement");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ExternalRenderer_1 = require("../../ExternalRenderer");
 const PanelWithImage_1 = require("../../Panels/PanelWithImage");
@@ -15,6 +17,32 @@ const NoopComponent = () => {
     return React.createElement(React.Fragment, null);
 };
 exports.CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
+/**
+ * Portals children into a target container element.
+ * Monitors the container with a MutationObserver — if the container is removed
+ * from the DOM, `onContainerRemoved` is called so callers can clean up React/Redux state.
+ */
+const ContainerPortal = ({ container, onContainerRemoved, children }) => {
+    React.useEffect(() => {
+        // If the container is already detached, clean up immediately
+        if (!document.contains(container)) {
+            onContainerRemoved();
+            return;
+        }
+        const observer = new MutationObserver(() => {
+            if (!document.contains(container)) {
+                onContainerRemoved();
+                observer.disconnect();
+            }
+        });
+        // Observe the entire document body for subtree removals
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => {
+            observer.disconnect();
+        };
+    }, [container, onContainerRemoved]);
+    return (0, react_dom_1.createPortal)(children, container);
+};
 const WindowPopups = () => {
     const [windowModalSettings, setWindowModalSettings] = React.useState({});
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -41,6 +69,13 @@ const WindowPopups = () => {
             Component = Component ?? NoopComponent;
             componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
         }
+        // Transposed View: portal into custom container if configured
+        if (windowItem.FactoryId === windowFactory_1.WINDOW_SHOW_TRANSPOSED_VIEW) {
+            const transposedContainer = (0, resolveContainerElement_1.resolveContainerElement)(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
+            if (transposedContainer) {
+                return (React.createElement(ContainerPortal, { key: windowItem.Id, container: transposedContainer, onContainerRemoved: handleDismiss }, componentNode));
+            }
+        }
         return (React.createElement(Dialog_1.default, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", key: windowItem.Id, windowModal: true, windowModalProps: {
                 ...windowModalProps,
                 onChange: (settings) => {

package/src/View/Components/Selectors/BulkUpdateValueSelector.js

@@ -3,15 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BulkUpdateValueSelector = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
+const react_1 = require("react");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const PermittedValuesSelector_1 = require("./PermittedValuesSelector");
-const Select_1 = require("../../../components/Select");
 const AdaptableContext_1 = require("../../AdaptableContext");
-const react_1 = require("react");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Flex_1 = require("../../../components/Flex");
+const icons_1 = require("../../../components/icons");
+const InputGroup_1 = require("../../../components/InputGroup");
 const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -21,8 +22,8 @@ const BulkUpdateValueSelector = (props) => {
     // TODO = this seems to be called whenever we edit a cell
     // which is then triggering a get all values
     // not sure that we need to
-    const permittedValueSelector = (React.createElement(Flex_1.Box, null,
-        React.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', loadValues: (0, react_1.useCallback)(({ currentSearchValue }) => {
+    const permittedValueSelector = (React.createElement(Flex_1.Box, { className: 'twa:flex-1' },
+        React.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: (0, react_1.useCallback)(({ currentSearchValue }) => {
                 if (!columnId || !props.selectedGridCells.length) {
                     return Promise.resolve([]);
                 }
@@ -45,17 +46,17 @@ const BulkUpdateValueSelector = (props) => {
             : 'Enter Value', autoFocus: true, disabled: props.disabled, className: "twa:w-full", value: props.selectedColumnValue, onChange: (e) => {
             props.onColumnValueChange(e.target.value);
         } }));
-    let valueTypeSelector = null;
-    if (isDateType) {
-        valueTypeSelector = (React.createElement(Select_1.Select, { "aria-label": "Bulk Update Value Selector", options: [
-                { label: 'New', value: 'new' },
-                { label: 'Existing', value: 'existing' },
-            ], value: valueType, onChange: (value) => {
-                setValueType(value);
-            } }));
-    }
-    return (React.createElement(FieldWrap_1.default, { className: (0, clsx_1.default)('twa:overflow-visible twa:max-w-full', props.className), style: props.style }, isDateType ? (React.createElement(React.Fragment, null,
-        valueType === 'new' ? input : permittedValueSelector,
-        valueTypeSelector)) : (permittedValueSelector)));
+    return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('twa:overflow-visible twa:max-w-full', props.className), style: props.style }, isDateType ? (React.createElement(React.Fragment, null,
+        React.createElement(InputGroup_1.InputGroup, { Component: Flex_1.Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full" },
+            React.createElement(DropdownButton_1.default, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, columns: ['label'], variant: "outlined", tone: "neutral", items: [
+                    { label: 'New', icon: React.createElement(icons_1.Icon, { name: "edit" }), onClick: () => setValueType('new') },
+                    {
+                        label: 'Existing',
+                        icon: React.createElement(icons_1.Icon, { name: "grid" }),
+                        onClick: () => setValueType('existing'),
+                    },
+                ] },
+                React.createElement(React.Fragment, null, valueType === 'existing' ? React.createElement(icons_1.Icon, { name: "grid" }) : React.createElement(icons_1.Icon, { name: "edit" }))),
+            valueType === 'new' ? input : permittedValueSelector))) : (permittedValueSelector)));
 };
 exports.BulkUpdateValueSelector = BulkUpdateValueSelector;

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

@@ -9,7 +9,7 @@ const CheckBox_1 = require("../../components/CheckBox");
 const ColorPicker_1 = require("../../components/ColorPicker");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const Tabs_1 = require("../../components/Tabs");
 const Select_1 = require("../../components/Select");
 const StylePreview_1 = require("../../components/StylePreview");
 const Toggle_1 = require("../../components/Toggle");
@@ -133,6 +133,14 @@ const StyleComponent = (props) => {
         }
         setComponentStyle(newStyle);
     };
+    const onAlignmentChange = (alignment) => {
+        const newStyle = { ...componentStyle };
+        newStyle.Alignment = alignment;
+        if (alignment == 'Default') {
+            delete newStyle.Alignment;
+        }
+        setComponentStyle(newStyle);
+    };
     const Cmp = props.headless ? Flex_1.Box : Panel_1.default;
     const headerText = props.headerText ?? 'Style';
     const cmpProps = props.headless
@@ -144,25 +152,85 @@ 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_1.EnumExtensions.getNames(Enums_1.FontSize)];
     return (React.createElement(Cmp, { ...cmpProps, className: (0, twMerge_1.twMerge)((0, clsx_1.default)('ab-StyleComponent twa:text-3', props.className)) },
-        ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:p-2" },
-            React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "classname", checked: showClassName, onChange: () => onShowClassNameChanged(true) }, "Use Style Class Name"),
-            ' ',
-            React.createElement(Radio_1.default, { "data-name": "create-style", className: "twa:ml-3", value: "expression", checked: !showClassName, onChange: () => onShowClassNameChanged(false) }, "Create Style"),
-            ' ')),
-        showClassName ? (React.createElement(Card_1.Card, { shadow: false },
-            React.createElement(Card_1.Card.Title, null, "CSS Class Name"),
-            React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:p-1" },
-                React.createElement(HelpBlock_1.default, null, "Select a CSS Class Name"),
-                React.createElement(Flex_1.Box, { className: "twa:max-w-[15rem]" },
-                    React.createElement(Select_1.Select, { options: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
-                            ? []
-                            : styleClassNames.map((item) => ({
-                                label: item,
-                                value: item,
-                            })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
-                React.createElement(Flex_1.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_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
+        ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) ? (React.createElement(Tabs_1.Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname') },
+            React.createElement(Tabs_1.Tabs.Tab, { "data-name": "show-class-name", value: "classname" }, "Use Style Class Name"),
+            React.createElement(Tabs_1.Tabs.Tab, { "data-name": "create-style", value: "createstyle" }, "Create Style"),
+            React.createElement(Tabs_1.Tabs.Content, { value: "classname" },
+                React.createElement(Card_1.Card, { shadow: false },
+                    React.createElement(Card_1.Card.Title, null, "CSS Class Name"),
+                    React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:p-1" },
+                        React.createElement(HelpBlock_1.default, null, "Select a CSS Class Name"),
+                        React.createElement(Flex_1.Box, { className: "twa:max-w-[15rem]" },
+                            React.createElement(Select_1.Select, { options: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
+                                    ? []
+                                    : styleClassNames.map((item) => ({
+                                        label: item,
+                                        value: item,
+                                    })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
+                        React.createElement(Flex_1.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_1.Tabs.Content, { value: "createstyle" },
+                React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
+                    React.createElement(Card_1.Card, { shadow: false, className: "twa:flex-1" },
+                        React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
+                            React.createElement(Card_1.Card.Title, { className: "twa:col-span-2" },
+                                colourSpellingVariant,
+                                " & Border Properties"),
+                            React.createElement(HelpBlock_1.default, { 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_1.CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
+                                "Back ",
+                                colourSpellingVariant),
+                            React.createElement(ColorPicker_1.ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
+                            React.createElement(CheckBox_1.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_1.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_1.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_1.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_1.default, { 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_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
+                            React.createElement(HelpBlock_1.default, { 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(Toggle_1.ToggleGroup, null,
+                                React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
+                                React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
+                            React.createElement("span", null, "Text Decoration"),
+                            React.createElement(Toggle_1.ToggleGroup, null,
+                                React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
+                                React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
+                                React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
+                            React.createElement("span", null, "Font Size"),
+                            React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
+                                React.createElement(Select_1.Select, { placeholder: "Default", options: [
+                                        {
+                                            label: 'Default',
+                                            value: '',
+                                        },
+                                        ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
+                                            label: enumName,
+                                            value: enumName,
+                                        })),
+                                    ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
+                            React.createElement("span", null, "Alignment"),
+                            React.createElement(Toggle_1.ToggleGroup, null,
+                                React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
+                                React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
+                                React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))))) : (React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
             React.createElement(Card_1.Card, { shadow: false, className: "twa:flex-1" },
                 React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
                     React.createElement(Card_1.Card.Title, { className: "twa:col-span-2" },
@@ -207,7 +275,7 @@ const StyleComponent = (props) => {
                         React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
                         React.createElement(Toggle_1.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_1.Flex, { flexDirection: "row", alignItems: "center" },
+                    React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
                         React.createElement(Select_1.Select, { placeholder: "Default", options: [
                                 {
                                     label: 'Default',
@@ -217,10 +285,12 @@ const StyleComponent = (props) => {
                                     label: enumName,
                                     value: enumName,
                                 })),
-                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) }))) : (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:gap-2 twa:flex-wrap" }, fontSizes.map((enumName) => {
-                        return (React.createElement(Radio_1.default, { 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(Toggle_1.ToggleGroup, null,
+                        React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
+                        React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
+                        React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))),
         !props.hidePreview && (React.createElement(Card_1.Card, { shadow: false },
             React.createElement(Card_1.Card.Title, null, "Preview"),
             React.createElement(Card_1.Card.Body, { className: "twa:grid twa:place-items-center" },

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -226,6 +226,8 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
         };
     }
     return class AdaptableToolPanelAgGridComponent {
+        gui;
+        unmountReactRoot;
         init(params) {
             const api = adaptable.api;
             this.gui = document.createElement('div');

package/src/View/Components/WizardSummaryPage.js

@@ -13,7 +13,7 @@ const tableDOMProps = {
     className: 'ab-WizardSummary__list',
     style: {
         height: '100%',
-        margin: 'var(--ab-space-2)',
+        margin: 'calc(var(--ab-base-space) * 2)',
     },
 };
 const WizardSummaryPage = (props) => {

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;