@adaptabletools/adaptable 22.0.0-canary.1 → 22.0.0-canary.11

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

@@ -3,7 +3,7 @@ import { UIHelper } from '../../../UIHelper';
 import { AdaptableViewFactory } from '../../../AdaptableViewFactory';
 import { AdaptablePopupModuleView } from './AdaptablePopupModuleView';
 export const AdaptablePopupBody = (props) => {
-    const modalContainer = UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document);
+    const modalContainer = 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

@@ -43,14 +43,7 @@ const PopupDialog = (props) => {
 export 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 createPortal(React.createElement(Dialog, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
+        return createPortal(React.createElement(Dialog, { "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

@@ -51,7 +51,7 @@ export const AdaptablePopupConfirmation = (props) => {
                             setDisableDeleteConfirmation(!disableDeleteConfirmation);
                         } }, "Do not show this again")),
                 props.showInputBox && (React.createElement(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, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
                 React.createElement(Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between" },
                     props.cancelButtonText != null ? (React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText)) : (React.createElement("div", null)),

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

@@ -1,16 +1,44 @@
 import * as React from 'react';
+import { createPortal } from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import Dialog from '../../../../components/Dialog';
 import { PopupHideWindow } from '../../../../Redux/ActionsReducers/PopupRedux';
+import { resolveContainerElement } from '../../../../Utilities/resolveContainerElement';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ExternalRenderer } from '../../ExternalRenderer';
 import { PanelWithImage } from '../../Panels/PanelWithImage';
 import { getMiddlePosition, getWindowPopupSize } from '../Utilities';
-import { windowFactory } from './windowFactory';
+import { WINDOW_SHOW_TRANSPOSED_VIEW, windowFactory } from './windowFactory';
 const NoopComponent = () => {
     return React.createElement(React.Fragment, null);
 };
 export const 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 createPortal(children, container);
+};
 export const WindowPopups = () => {
     const [windowModalSettings, setWindowModalSettings] = React.useState({});
     const adaptable = useAdaptable();
@@ -37,6 +65,13 @@ export 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 === WINDOW_SHOW_TRANSPOSED_VIEW) {
+            const transposedContainer = 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, { "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

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import FieldWrap from '../../../components/FieldWrap';
+import { useCallback } from 'react';
+import DropdownButton from '../../../components/DropdownButton';
 import UIHelper from '../../UIHelper';
 import AdaptableInput from '../AdaptableInput';
 import { PermittedValuesSelector } from './PermittedValuesSelector';
-import { Select } from '../../../components/Select';
 import { useAdaptable } from '../../AdaptableContext';
-import { useCallback } from 'react';
 import clsx from 'clsx';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { Icon } from '../../../components/icons';
+import { InputGroup } from '../../../components/InputGroup';
 export const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
     const adaptable = useAdaptable();
@@ -17,8 +18,8 @@ export 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(Box, null,
-        React.createElement(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: useCallback(({ currentSearchValue }) => {
+    const permittedValueSelector = (React.createElement(Box, { className: 'twa:flex-1' },
+        React.createElement(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: useCallback(({ currentSearchValue }) => {
                 if (!columnId || !props.selectedGridCells.length) {
                     return Promise.resolve([]);
                 }
@@ -41,16 +42,16 @@ export 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, { "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, { className: clsx('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, { className: clsx('twa:overflow-visible twa:max-w-full', props.className), style: props.style }, isDateType ? (React.createElement(React.Fragment, null,
+        React.createElement(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full" },
+            React.createElement(DropdownButton, { "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(Icon, { name: "edit" }), onClick: () => setValueType('new') },
+                    {
+                        label: 'Existing',
+                        icon: React.createElement(Icon, { name: "grid" }),
+                        onClick: () => setValueType('existing'),
+                    },
+                ] },
+                React.createElement(React.Fragment, null, valueType === 'existing' ? React.createElement(Icon, { name: "grid" }) : React.createElement(Icon, { name: "edit" }))),
+            valueType === 'new' ? input : permittedValueSelector))) : (permittedValueSelector)));
 };

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';
@@ -129,6 +129,14 @@ export 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 ? Box : Panel;
     const headerText = props.headerText ?? 'Style';
     const cmpProps = props.headless
@@ -140,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" },
@@ -203,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',
@@ -213,10 +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') })))))),
         !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/Components/ToolPanel/AdaptableToolPanel.js

@@ -222,6 +222,8 @@ export 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

@@ -9,7 +9,7 @@ const tableDOMProps = {
     className: 'ab-WizardSummary__list',
     style: {
         height: '100%',
-        margin: 'var(--ab-space-2)',
+        margin: 'calc(var(--ab-base-space) * 2)',
     },
 };
 export 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;

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -3,16 +3,28 @@ import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { NewColumnSelector } from '../../Components/ColumnSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import Input from '../../../components/Input';
 export const renderCustomSortColumn = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
     return (React.createElement(Box, { className: "twa:text-2 twa:py-2 twa:pr-2" },
-        "Custom sort column: ",
-        React.createElement(Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
+        React.createElement(Tag, { className: "twa:mr-2" },
+            "Name: ",
+            data.Name),
+        React.createElement(Tag, null,
+            "Column: ",
+            api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
 };
-export const isValidCustomSortColumn = (data) => {
+export const isValidCustomSortColumn = (data, allCustomSorts) => {
+    if (!data.Name) {
+        return 'A name is required.';
+    }
+    if (allCustomSorts.some((customSort) => customSort.Name === data.Name && customSort.Uuid !== data.Uuid)) {
+        return 'A Custom Sort with this name already exists.';
+    }
     if (!data.ColumnId) {
-        return 'You have to select a Column for Custom Sort';
+        return 'Please select a column for the Custom Sort.';
     }
     return true;
 };
@@ -42,14 +54,28 @@ export const CustomSortColumnWizardSection = (props) => {
             });
         });
     }, []);
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Column"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
-                    props.onChange({
-                        ...data,
-                        SortedValues: [],
-                        ColumnId: ids[0],
-                    });
-                }, allowReorder: false }))));
+    const onNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
+    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
+        React.createElement(Tabs, { className: "twa:mb-3" },
+            React.createElement(Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout, { className: "twa:max-w-[300px] twa:w-full" },
+                        React.createElement(FormRow, { label: "Name" },
+                            React.createElement(Input, { className: "twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
+        React.createElement(Tabs, { style: { flex: 1, minHeight: 0 } },
+            React.createElement(Tabs.Tab, null, "Column"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+                        props.onChange({
+                            ...data,
+                            SortedValues: [],
+                            ColumnId: ids[0],
+                        });
+                    }, allowReorder: false })))));
 };

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -11,7 +11,7 @@ import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
 import { TagList } from '../../../components/Tag';
 export const isValidCustomSortOrder = (data) => {
     if (!data.SortedValues || !data.SortedValues.length) {
-        return 'You have to specify at least one value for Custom Sort order';
+        return 'At least one value is required for the Custom Sort order.';
     }
     return true;
 };

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -37,14 +37,14 @@ export const CustomSortWizard = (props) => {
     };
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: customSort, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
-                isValid: isValidCustomSortColumn,
+                isValid: (data) => isValidCustomSortColumn(data, allCustomSorts),
                 renderSummary: renderCustomSortColumn,
-                details: 'Select a Column for Custom Sort',
+                details: 'Enter Name and select a Column for Custom Sort',
                 render: () => {
                     return (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
-                        React.createElement(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort })));
+                        React.createElement(CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts })));
                 },
-                title: 'Column',
+                title: 'Name & Column',
             },
             {
                 title: 'Sort Order',

package/src/View/Dashboard/CustomToolbar.js

@@ -75,7 +75,7 @@ export const CustomToolbarCmp = (props) => {
             const disabled = button.disabled && button.disabled(button, dashboardContext);
             let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
             let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-            return (React.createElement(AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: buttonStyle?.className || '', onClick: () => {
+            return (React.createElement(AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-base-space)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: buttonStyle?.className || '', onClick: () => {
                     button.onClick ? button.onClick(button, dashboardContext) : null;
                     setTimeout(() => {
                         // mutate state to force a re-rendering

package/src/View/Dashboard/DashboardPopup.js

@@ -69,18 +69,17 @@ class DashboardPopupComponent extends React.Component {
             React.createElement(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
                 areDashboardSettingsVisible && (React.createElement(React.Fragment, null,
                     React.createElement(Card, null,
-                        React.createElement(Card.Title, { gap: 8 },
-                            "Display Settings",
-                            React.createElement(ToggleButton, { className: "twa:self-end", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility" }, this.props.IsHidden ? 'Hidden' : 'Visible')),
+                        React.createElement(Card.Title, { gap: 8 }, "Display Settings"),
                         React.createElement(Card.Body, { gap: 2, className: "twa:p-2" },
-                            React.createElement(ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state" }, this.props.IsCollapsed ? 'Collapsed' : 'Expanded'),
+                            React.createElement(ToggleButton, { className: "twa:w-24", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility" }, this.props.IsHidden ? 'Hidden' : 'Visible'),
+                            this.props.DashboardState.Tabs?.length > 0 ? (React.createElement(ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state" }, this.props.IsCollapsed ? 'Collapsed' : 'Expanded')) : null,
                             this.props.api.optionsApi.getDashboardOptions().canFloat ? (React.createElement(ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating" }, this.props.IsFloating ? 'Floating' : 'Pinned')) : null)))),
                 React.createElement(Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0 },
                     React.createElement(Card.Title, null, "Contents"),
                     React.createElement(Card.Body, { className: "twa:p-2" },
                         React.createElement(Tabs, { className: "twa:flex-1 twa:min-h-0" },
                             React.createElement(Tabs.Tab, { value: "pinned-toolbars" }, "Pinned Toolbars"),
-                            React.createElement(Tabs.Tab, { value: "tabbed-toolbars" }, "Tabbed Toolbars"),
+                            React.createElement(Tabs.Tab, { value: "tabbed-toolbars" }, "Tabs & Toolbars"),
                             React.createElement(Tabs.Tab, { value: "buttons" }, "Buttons"),
                             React.createElement(Tabs.Content, { value: "pinned-toolbars", className: contentCls },
                                 React.createElement(PinnedToolbarsSelector, null)),

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -160,6 +160,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, adaptableContainerId, agGr
                 Revision: Date.now(),
                 FormatColumns: [
                     {
+                        Name: 'Changed At',
                         Scope: {
                             ColumnIds: ['changeInfo.changedAt'],
                         },

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -27,7 +27,7 @@ export const DataChangeHistoryViewPanelControl = (props) => {
     const enabled = changeHistoryMode === 'ACTIVE';
     const disabled = changeHistoryMode === 'INACTIVE';
     const suspended = changeHistoryMode === 'SUSPENDED';
-    const gap = props.gap ?? 'var(--ab-space-1)';
+    const gap = props.gap ?? 'var(--ab-base-space)';
     const buttonsPaddingY = props.buttonsPaddingY ?? 2;
     const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY } },
         disabled && (React.createElement(ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),

package/src/View/Export/ExportDestinationPicker.js

@@ -12,7 +12,7 @@ export const ExportDestinationPicker = ({ reportName, reportFormat, viewType, })
     };
     const supportedDestinations = exportApi.getSupportedExportDestinations(reportFormat);
     if (supportedDestinations.length === 0 || supportedDestinations.length === 1) {
-        return (React.createElement(ButtonExport, { className: clsx(viewType !== 'StatusBar' ? 'twa:mr-[20px]' : undefined, 'twa:pr-0'), onClick: () => handleExport(supportedDestinations[0]), tooltip: "Export Report", disabled: reportName == undefined || reportFormat == undefined }));
+        return (React.createElement(ButtonExport, { className: clsx(viewType !== 'StatusBar' ? '' : undefined, ''), onClick: () => handleExport(supportedDestinations[0]), tooltip: "Export Report", disabled: reportName == undefined || reportFormat == undefined }));
     }
     const destinationItems = supportedDestinations.map((destination) => ({
         label: destination,

package/src/View/Export/ExportStatusBar.js

@@ -4,13 +4,15 @@ import { ReportNameSelector } from './ReportNameSelector';
 import { ReportFormatSelector } from './ReportFormatSelector';
 import { ExportDestinationPicker } from './ExportDestinationPicker';
 import { useAdaptable } from '../AdaptableContext';
+import { Flex } from '../../components/Flex';
 export const ExportStatusBar = () => {
     const adaptable = useAdaptable();
     const exportApi = adaptable.api.exportApi;
     const currentReportName = useSelector((state) => state.Export.CurrentReport);
     const currentFormat = useSelector((state) => state.Export.CurrentFormat);
     return (React.createElement(React.Fragment, null,
-        React.createElement(ReportNameSelector, { viewType: "StatusBar", size: 'small', reportName: currentReportName, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }),
-        React.createElement(ReportFormatSelector, { viewType: "StatusBar", size: 'small', reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) }),
+        React.createElement(Flex, { className: "twa:gap-1" },
+            React.createElement(ReportNameSelector, { viewType: "StatusBar", reportName: currentReportName, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }),
+            React.createElement(ReportFormatSelector, { viewType: "StatusBar", reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) })),
         React.createElement(ExportDestinationPicker, { viewType: "StatusBar", reportName: currentReportName, reportFormat: currentFormat })));
 };