@adaptabletools/adaptable-cjs 22.0.0-canary.2 → 22.0.0-canary.4

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = void 0;
+exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../../components/Tabs");
@@ -8,21 +8,57 @@ const getAlertType_1 = require("../Utilities/getAlertType");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Tag_1 = require("../../../components/Tag");
 const Flex_1 = require("../../../components/Flex");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
+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;
+};
+exports.isSettingsValid = isSettingsValid;
 const renderAlertTypeSummary = (alertType) => {
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const text = (0, getAlertType_1.getAlertTypeText)(alertType);
-    return (React.createElement(Flex_1.Box, null,
-        React.createElement(Tag_1.Tag, null, text)));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Name ",
+            React.createElement(Tag_1.Tag, null, data.Name || 'Not specified')),
+        React.createElement(OnePageAdaptableWizard_2.SummaryText, null,
+            "Type ",
+            React.createElement(Tag_1.Tag, null, text))));
 };
 exports.renderAlertTypeSummary = renderAlertTypeSummary;
 const AlertTypeWizardSection = (props) => {
-    return (React.createElement(Tabs_1.Tabs, null,
-        React.createElement(Tabs_1.Tabs.Tab, null, "Alert Type"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(Flex_1.Flex, { flexDirection: "column" },
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === getAlertType_1.AlertType.Validation, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Validation) })))));
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column" },
+        React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(Input_1.default, { "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_1.Tabs, { className: "twa:mt-2" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Alert Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "column" },
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable }),
+                    React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === getAlertType_1.AlertType.Validation, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Validation) }))))));
 };
 exports.AlertTypeWizardSection = AlertTypeWizardSection;

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

@@ -29,7 +29,7 @@ const AlertWizard = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const behaviourSpelling = api.internalApi.getCorrectEnglishVariant('Behaviour');
-    const [alertDefinition, setAlertDefinition] = (0, react_1.useState)(() => {
+    const [alertDefinition, doSetAlertDefinition] = (0, react_1.useState)(() => {
         const alertDefinition = props.data
             ? (0, Helper_1.cloneObject)(props.data)
             : ObjectFactory_1.default.CreateEmptyAlertDefinition();
@@ -49,6 +49,9 @@ const AlertWizard = (props) => {
         alertDefinition.MessageType = alertDefinition.MessageType ?? ObjectDefaultConstants_1.ALERT_DEFAULT_MESSAGE_TYPE;
         return alertDefinition;
     });
+    const setAlertDefinition = (0, react_1.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] = (0, react_1.useState)(() => {
@@ -63,22 +66,23 @@ const AlertWizard = (props) => {
         }
         props.onCloseWizard();
     };
-    const updateAlertDefinition = (newAlertDefinition) => {
-        setAlertDefinition((0, mapAlertDefinition_1.mapAlertDefinition)(api, newAlertDefinition));
-    };
+    const updateAlertDefinition = (0, react_1.useCallback)((newAlertDefinition) => {
+        doSetAlertDefinition((0, mapAlertDefinition_1.mapAlertDefinition)(api, newAlertDefinition));
+    }, [api]);
     const handleAlertTypeChange = (newAlertType) => {
         setAlertType(newAlertType);
-        setAlertDefinition((0, getDefaultAlertDefinition_1.getDefaultAlertDefinition)(alertDefinition, newAlertType));
+        doSetAlertDefinition((0, getDefaultAlertDefinition_1.getDefaultAlertDefinition)(alertDefinition, newAlertType));
     };
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: alertDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
-                title: 'Type',
+                title: 'Name & Type',
+                isValid: AlertTypeWizardSection_1.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(Flex_1.Box, { className: "twa:p-2" },
-                    React.createElement(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange }))),
+                    React.createElement(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }))),
                 renderSummary: () => (0, AlertTypeWizardSection_1.renderAlertTypeSummary)(alertType),
             },
             {

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -42,24 +42,36 @@ class BulkUpdateViewPanelComponent extends React.Component {
         let statusColour = this.getStatusColour();
         let selectedColumn = this.props.BulkUpdateValidationResult.Column;
         let previewPanel = (React.createElement(PreviewResultsPanel_1.PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
-        let shouldDisable = this.props.accessLevel == 'ReadOnly' ||
+        const valueSelectorDisabled = this.props.accessLevel == 'ReadOnly' ||
             !this.props.BulkUpdateValidationResult.IsValid ||
-            this.props.api.layoutApi.isCurrentLayoutPivot() == true;
+            this.props.api.layoutApi.isCurrentLayoutPivot();
+        const valueOperationDisabled = valueSelectorDisabled ||
+            StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+            (this.props.PreviewInfo != null &&
+                this.props.PreviewInfo.previewValidationSummary.validationResult == 'All');
         const applyStyle = {
             color: statusColour,
             fill: 'currentColor',
         };
-        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:min-w-[150px]`), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex_1.Flex, null,
+        const isToolbar = this.props.viewType === 'Toolbar';
+        const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
+        const messageStyle = UIHelper_1.UIHelper.getMessageTypeByStatusColour(statusColour);
+        const infoStyle = messageStyle === 'Success' ? 'Info' : messageStyle;
+        return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
+                'twa:min-w-[300px] twa:max-w-[300px] twa:w-[300px] twa:flex-nowrap': isToolbar,
+                'twa:flex-1 twa:flex-wrap': !isToolbar,
+            }), flexWrap: isToolbar ? 'nowrap' : 'wrap' },
+            React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-1', {
+                    'twa:min-w-[100px]': !isToolbar,
+                    'twa:min-w-0': isToolbar,
+                }) },
                 React.createElement(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
                         listMinWidth: 160,
-                    }, className: `ab-${elementType}__BulkUpdate__select`, disabled: shouldDisable, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) })),
-            React.createElement(Flex_1.Flex, null,
-                !shouldDisable && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(ButtonApply_1.ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:ml-2`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
-                        (this.props.PreviewInfo != null &&
-                            this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), accessLevel: this.props.accessLevel }, this.props.viewType === 'ToolPanel' && 'Update')),
-                !shouldDisable && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 360, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: UIHelper_1.UIHelper.getMessageTypeByStatusColour(statusColour), useButton: true, showEvent: 'focus', hideEvent: "blur" })))));
+                    }, className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) })),
+            React.createElement(Flex_1.Flex, { className: "twa:flex-shrink-0 twa:gap-1" },
+                React.createElement(Flex_1.Flex, { className: "twa:flex twa:box-border twa:items-center" },
+                    React.createElement(ButtonApply_1.ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel }, 'Apply')),
+                React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 360, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) }))));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -22,11 +22,11 @@ const isValidCalculatedColumnExpression = (data, api) => {
     const calculatedColumnExpressionService = api.internalApi.getCalculatedColumnExpressionService();
     const expression = api.expressionApi.getAdaptableQueryExpression(data.Query)?.trim();
     if (!expression) {
-        return 'Calculated column expression cannot be empty';
+        return 'Calculated Column Expression cannot be empty';
     }
     const isValid = calculatedColumnExpressionService.isCalculatedColumnQueryValid(data.Query);
     if (!isValid) {
-        return 'Calculated column expression is not valid';
+        return 'Calculated Column Expression is not valid';
     }
     return true;
 };

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -13,6 +13,7 @@ const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/
 const react_redux_1 = require("react-redux");
 const Select_1 = require("../../components/Select");
 const Flex_1 = require("../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 class CellSummaryViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -48,30 +49,27 @@ class CellSummaryViewPanelComponent extends React.Component {
             });
         let cellSummaryPopover = React.createElement(CellSummaryPopover_1.CellSummaryPopover, { CellSummary: this.props.CellSummary });
         let shouldDisable = this.props.accessLevel == 'ReadOnly' || this.props.CellSummary == null;
-        const renderOperationValue = () => {
-            if (shouldDisable) {
-                return;
-            }
-            const operationValue = this.getOperationValue();
-            if (operationValue == undefined) {
-                return;
-            }
-            return this.props.viewType === 'ToolPanel' ? (React.createElement(Flex_1.Flex, { className: `ab-${elementType}__CellSummary__value twa:rounded-standard twa:mr-2 twa:p-2 twa:text-text-on-info twa:bg-info twa:text-2` }, operationValue)) : (React.createElement(Flex_1.Flex, { justifyContent: "center", className: `ab-${elementType}__CellSummary__value twa:flex-1 twa:mr-2 twa:ml-1 text-text-on-primary` }, operationValue));
-        };
-        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        const isToolbar = this.props.viewType === 'Toolbar';
+        const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
+        const operationValue = this.getOperationValue() ?? 'N/A';
+        return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
+                'twa:min-w-[215px] twa:max-w-[215px] twa:w-[215px] twa:flex-nowrap': isToolbar,
+                'twa:flex-1 twa:flex-wrap': !isToolbar,
+            }) },
             React.createElement(Flex_1.Flex, { className: "twa:flex-1" },
                 React.createElement(Select_1.Select, { "aria-label": "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, options: [...operationMenuItems, ...operationDefinitions], onChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation })),
-            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" }, React.createElement(React.Fragment, null,
-                renderOperationValue(),
-                this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries' }))))));
+            React.createElement(Flex_1.Flex, { className: "twa:items-center twa:gap-1" }, React.createElement(React.Fragment, null,
+                React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
+                        'twa:rounded-standard twa:text-color-text-on-info twa:bg-color-info twa:text-2': !isToolbar,
+                        'twa:flex-1 twa:text-color-text-on-primary twa:justify-center': isToolbar,
+                    }) }, operationValue),
+                React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries', disabled: !this.props.CellSummary?.Count })))));
     }
     checkSelectedCells() {
         this.props.onCreateCellSummary();
     }
     getOperationValue() {
-        const api = this.props.api;
-        return api.cellSummaryApi.getCellSummaryOperationValue(this.props.CellSummaryOperation);
+        return this.props.api.cellSummaryApi.getCellSummaryOperationValue(this.props.CellSummaryOperation);
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/Components/AdaptableDateInput/index.js

@@ -11,7 +11,7 @@ const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props
     const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
     const [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
         onChange: (dateString) => 
-        // wrap date value in FormEvent in order to keep the external API unchanged
+        // wrap date value in ChangeEvent in order to keep the external API unchanged
         props.onChange?.({
             target: {
                 // ALWAYS trigger onChange with the ISO format

package/src/View/Components/Buttons/ButtonApply.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonApply extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "apply", tooltip: "Apply", iconSize: 20, icon: "check", variant: "text", ...this.props }));
+        return (React.createElement(SimpleButton_1.default, { "data-name": "apply", tooltip: "Apply", iconSize: 20, icon: "check", variant: "outlined", ...this.props }));
     }
 }
 exports.ButtonApply = ButtonApply;

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

@@ -3,6 +3,7 @@ import { SimpleButtonProps } from '../../../components/SimpleButton';
 export interface ClearButtonProps extends SimpleButtonProps {
     showText?: boolean;
     showIcon?: boolean;
+    variant?: SimpleButtonProps['variant'];
 }
 export declare class ButtonClear extends React.Component<ClearButtonProps, {}> {
     render(): React.JSX.Element;

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/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.js

@@ -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
@@ -220,7 +228,18 @@ const StyleComponent = (props) => {
                             ], 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));
-                    }))))))),
+                    }))),
+                    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/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

@@ -8,14 +8,26 @@ const Tag_1 = require("../../../components/Tag");
 const ColumnSelector_1 = require("../../Components/ColumnSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const renderCustomSortColumn = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(Flex_1.Box, { className: "twa:text-2 twa:py-2 twa:pr-2" },
-        "Custom sort column: ",
-        React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
+        React.createElement(Tag_1.Tag, { className: "twa:mr-2" },
+            "Name: ",
+            data.Name),
+        React.createElement(Tag_1.Tag, null,
+            "Column: ",
+            api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
 };
 exports.renderCustomSortColumn = renderCustomSortColumn;
-const isValidCustomSortColumn = (data) => {
+const isValidCustomSortColumn = (data, allCustomSorts) => {
+    if (!data.Name) {
+        return 'Custom Sort Name cannot be blank';
+    }
+    if (allCustomSorts.some((customSort) => customSort.Name === data.Name && customSort.Uuid !== data.Uuid)) {
+        return 'A Custom Sort already exists with that name';
+    }
     if (!data.ColumnId) {
         return 'You have to select a Column for Custom Sort';
     }
@@ -48,15 +60,29 @@ const CustomSortColumnWizardSection = (props) => {
             });
         });
     }, []);
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(ColumnSelector_1.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_1.Flex, { flexDirection: "column", style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mb-3" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, { className: "twa:max-w-[300px] twa:w-full" },
+                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                            React.createElement(Input_1.default, { className: "twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
+        React.createElement(Tabs_1.Tabs, { style: { flex: 1, minHeight: 0 } },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+                        props.onChange({
+                            ...data,
+                            SortedValues: [],
+                            ColumnId: ids[0],
+                        });
+                    }, allowReorder: false })))));
 };
 exports.CustomSortColumnWizardSection = CustomSortColumnWizardSection;

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

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

package/src/View/Dashboard/DashboardPopup.js

@@ -73,18 +73,17 @@ class DashboardPopupComponent extends React.Component {
             React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
                 areDashboardSettingsVisible && (React.createElement(React.Fragment, null,
                     React.createElement(Card_1.Card, null,
-                        React.createElement(Card_1.Card.Title, { gap: 8 },
-                            "Display Settings",
-                            React.createElement(ToggleButton_1.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_1.Card.Title, { gap: 8 }, "Display Settings"),
                         React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:p-2" },
-                            React.createElement(ToggleButton_1.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_1.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_1.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_1.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_1.Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0 },
                     React.createElement(Card_1.Card.Title, null, "Contents"),
                     React.createElement(Card_1.Card.Body, { className: "twa:p-2" },
                         React.createElement(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0" },
                             React.createElement(Tabs_1.Tabs.Tab, { value: "pinned-toolbars" }, "Pinned Toolbars"),
-                            React.createElement(Tabs_1.Tabs.Tab, { value: "tabbed-toolbars" }, "Tabbed Toolbars"),
+                            React.createElement(Tabs_1.Tabs.Tab, { value: "tabbed-toolbars" }, "Tabs & Toolbars"),
                             React.createElement(Tabs_1.Tabs.Tab, { value: "buttons" }, "Buttons"),
                             React.createElement(Tabs_1.Tabs.Content, { value: "pinned-toolbars", className: contentCls },
                                 React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)),

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

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

package/src/View/Export/ExportDestinationPicker.js

@@ -16,7 +16,7 @@ const ExportDestinationPicker = ({ reportName, reportFormat, viewType, }) => {
     };
     const supportedDestinations = exportApi.getSupportedExportDestinations(reportFormat);
     if (supportedDestinations.length === 0 || supportedDestinations.length === 1) {
-        return (react_1.default.createElement(ButtonExport_1.ButtonExport, { className: (0, clsx_1.default)(viewType !== 'StatusBar' ? 'twa:mr-[20px]' : undefined, 'twa:pr-0'), onClick: () => handleExport(supportedDestinations[0]), tooltip: "Export Report", disabled: reportName == undefined || reportFormat == undefined }));
+        return (react_1.default.createElement(ButtonExport_1.ButtonExport, { className: (0, clsx_1.default)(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

@@ -8,14 +8,16 @@ const ReportNameSelector_1 = require("./ReportNameSelector");
 const ReportFormatSelector_1 = require("./ReportFormatSelector");
 const ExportDestinationPicker_1 = require("./ExportDestinationPicker");
 const AdaptableContext_1 = require("../AdaptableContext");
+const Flex_1 = require("../../components/Flex");
 const ExportStatusBar = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const exportApi = adaptable.api.exportApi;
     const currentReportName = (0, react_redux_1.useSelector)((state) => state.Export.CurrentReport);
     const currentFormat = (0, react_redux_1.useSelector)((state) => state.Export.CurrentFormat);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ReportNameSelector_1.ReportNameSelector, { viewType: "StatusBar", size: 'small', reportName: currentReportName, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }),
-        react_1.default.createElement(ReportFormatSelector_1.ReportFormatSelector, { viewType: "StatusBar", size: 'small', reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) }),
+        react_1.default.createElement(Flex_1.Flex, { className: "twa:gap-1" },
+            react_1.default.createElement(ReportNameSelector_1.ReportNameSelector, { viewType: "StatusBar", reportName: currentReportName, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }),
+            react_1.default.createElement(ReportFormatSelector_1.ReportFormatSelector, { viewType: "StatusBar", reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) })),
         react_1.default.createElement(ExportDestinationPicker_1.ExportDestinationPicker, { viewType: "StatusBar", reportName: currentReportName, reportFormat: currentFormat })));
 };
 exports.ExportStatusBar = ExportStatusBar;