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

package/src/Api/Implementation/GridApiImpl.js

@@ -99,6 +99,22 @@ class GridApiImpl extends ApiBase_1.ApiBase {
         }
         return [];
     }
+    async manageGridData(dataRows, config) {
+        const transactionResult = await this._adaptable.manageGridRows(dataRows, config);
+        if (Array.isArray(transactionResult.removedRows) && transactionResult.removedRows.length) {
+            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRows.delete, transactionResult.removedRows, 'Delete');
+            this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
+        }
+        if (Array.isArray(transactionResult.updatedRows) && transactionResult.updatedRows.length) {
+            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRows.update, transactionResult.updatedRows, 'Update');
+            this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
+        }
+        if (Array.isArray(transactionResult.addedRows) && transactionResult.addedRows.length) {
+            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRows.add, transactionResult.addedRows, 'Add');
+            this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
+        }
+        return transactionResult;
+    }
     setCellValue(cellUpdateRequest) {
         const abColumn = this.getColumnApi().getColumnWithColumnId(cellUpdateRequest.columnId);
         if (!abColumn) {
@@ -688,21 +704,5 @@ class GridApiImpl extends ApiBase_1.ApiBase {
             .filter(Boolean);
         this.setAgGridColumnDefinitions([...sanitizedColDefs, newColumnDefinition]);
     }
-    async applyGridDataTransaction(dataTransaction, config) {
-        const transactionResult = await this._adaptable.applyGridDataTransaction(dataTransaction, config);
-        if (Array.isArray(transactionResult.removedRows) && transactionResult.removedRows.length) {
-            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataTransaction.remove, transactionResult.removedRows, 'Delete');
-            this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
-        }
-        if (Array.isArray(transactionResult.updatedRows) && transactionResult.updatedRows.length) {
-            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataTransaction.update, transactionResult.updatedRows, 'Update');
-            this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
-        }
-        if (Array.isArray(transactionResult.addedRows) && transactionResult.addedRows.length) {
-            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataTransaction.add, transactionResult.addedRows, 'Add');
-            this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
-        }
-        return transactionResult;
-    }
 }
 exports.GridApiImpl = GridApiImpl;

package/src/Api/Internal/ColumnInternalApi.js

@@ -282,7 +282,7 @@ class ColumnInternalApi extends ApiBase_1.ApiBase {
     getQueryableColumnsForUIEditor() {
         return this.getColumnApi()
             .getQueryableColumns()
-            .filter((column) => !column.isGeneratedPivotResultColumn && !column.isGeneratedRowGroupColumn);
+            .filter((column) => !column.isGeneratedPivotResultColumn && !column.isGeneratedRowGroupColumn && !column.isGeneratedSelectionColumn);
     }
     isAlwaysHiddenColumn(columnIdentifier) {
         return this.getColumnApi().hasColumnType(columnIdentifier, AdaptableColumn_1.HIDDEN_COLUMN_TYPE);

package/src/Api/Internal/FormatColumnInternalApi.d.ts

@@ -7,21 +7,11 @@ export declare class FormatColumnInternalApi extends ApiBase {
      * @returns format columns
      */
     getAllFormatColumnWithStyle(config?: FormatColumnConfig): FormatColumn[];
-    /**
-     * Retrieves all Format Columns in Adaptable State with the `Style` or the `CellAlignment` property set
-     * @returns format columns
-     */
-    getAllFormatColumnWithStyleAndCellAlignment(config?: FormatColumnConfig): FormatColumn[];
     /**
      * Retrieves all Format Columns in Adaptable State with `DisplayFormat` property set
      * @returns format columns
      */
     getAllFormatColumnWithDisplayFormat(config?: FormatColumnConfig): FormatColumn[];
-    /**
-     * Retrieves all Format Columns in Adaptable State with `CellAlignment` property set
-     * @returns format columns
-     */
-    getAllFormatColumnWithCellAlignment(config?: FormatColumnConfig): FormatColumn[];
     /**
      * Get all FormatColumns which are defined for this column and have a custom AdaptableStyle
      * @param column

package/src/Api/Internal/FormatColumnInternalApi.js

@@ -45,15 +45,6 @@ class FormatColumnInternalApi extends ApiBase_1.ApiBase {
             .getFormatColumns(config)
             .filter((fc) => fc.Style);
     }
-    /**
-     * Retrieves all Format Columns in Adaptable State with the `Style` or the `CellAlignment` property set
-     * @returns format columns
-     */
-    getAllFormatColumnWithStyleAndCellAlignment(config) {
-        return this.getFormatColumnApi()
-            .getFormatColumns(config)
-            .filter((fc) => fc.Style || fc.CellAlignment);
-    }
     /**
      * Retrieves all Format Columns in Adaptable State with `DisplayFormat` property set
      * @returns format columns
@@ -63,15 +54,6 @@ class FormatColumnInternalApi extends ApiBase_1.ApiBase {
             .getFormatColumns(config)
             .filter((fc) => fc.DisplayFormat);
     }
-    /**
-     * Retrieves all Format Columns in Adaptable State with `CellAlignment` property set
-     * @returns format columns
-     */
-    getAllFormatColumnWithCellAlignment(config) {
-        return this.getFormatColumnApi()
-            .getFormatColumns(config)
-            .filter((fc) => fc.CellAlignment);
-    }
     /**
      * Get all FormatColumns which are defined for this column and have a custom AdaptableStyle
      * @param column
@@ -79,7 +61,7 @@ class FormatColumnInternalApi extends ApiBase_1.ApiBase {
      * @returns list of FormatColumn
      */
     getFormatColumnsWithStyleForColumn(column, config) {
-        const formatColumns = this.getAllFormatColumnWithStyleAndCellAlignment()
+        const formatColumns = this.getAllFormatColumnWithStyle()
             .filter((formatColumn) => {
             // FormatColumn default target is 'cell', so if no target is specified, we assume 'cell'
             const fcTarget = formatColumn.Target ?? 'cell';

package/src/Redux/ActionsReducers/NoteRedux.js

@@ -51,7 +51,7 @@ const GetNoteSelector = (state, address) => {
             // happy check
             return true;
         }
-        // Primary keys retreived from the grid dom are always strings, so we must also consider them strings
+        // Primary keys retrieved from the grid dom are always strings, so we must also consider them strings
         if ((typeof address.PrimaryKeyValue === 'number' && typeof note.PrimaryKeyValue === 'string') ||
             (typeof address.PrimaryKeyValue === 'string' && typeof note.PrimaryKeyValue === 'number')) {
             return (note.PrimaryKeyValue.toString() === address.PrimaryKeyValue.toString() &&

package/src/Strategy/Utilities/FormatColumn/getFormatColumnSettingsViewItems.js

@@ -3,9 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFormatColumnSettingsViewItems = void 0;
 const getFormatColumnSettingsViewItems = (formatColumn) => {
     let values = [];
-    if (formatColumn.CellAlignment) {
-        values.push(`Cell Alignment: ${formatColumn.CellAlignment}`);
-    }
     if (formatColumn.RowScope) {
         if (formatColumn.RowScope.ExcludeDataRows) {
             values.push('Exclude Data Rows');

package/src/Utilities/Constants/DocumentationLinkConstants.d.ts

@@ -12,7 +12,7 @@ export declare const PredicateDocsLink = "https://www.adaptabletools.com/docs/ad
 export declare const PrimaryKeyDocsLink = "https://www.adaptabletools.com/docs/getting-started-primary-key";
 export declare const LicenseDocsLink = "https://www.adaptabletools.com/buy/buying-adaptable-licensing";
 export declare const AdaptableOptionsDocsLink = "https://www.adaptabletools.com/docs/technical-reference-adaptable-options";
-export declare const AgGridModulesDocsLink = "https://www.adaptabletools.com/docs/dev-guide-aggrid-modules-overview";
+export declare const AgGridModulesDocsLink = "https://www.adaptabletools.com/docs/getting-started-aggrid-modules";
 export declare const AlertMessageDocsLink = "https://www.adaptabletools.com/docs/handbook-alerting-message";
 export declare const FormatColumnPlaceholderDocsLink = "https://www.adaptabletools.com/docs/handbook-column-formatting-display-format-placeholder";
-export declare const AgGridRequiredModulesDocsLink = "https://www.adaptabletools.com/docs/dev-guide-aggrid-modules-overview#mandatory-modules";
+export declare const AgGridRequiredModulesDocsLink = "https://www.adaptabletools.com/docs/getting-started-aggrid-modules#mandatory-modules";

package/src/Utilities/Constants/DocumentationLinkConstants.js

@@ -16,7 +16,7 @@ exports.PredicateDocsLink = `${exports.HOST_URL_DOCS}/adaptable-predicate`;
 exports.PrimaryKeyDocsLink = `${exports.HOST_URL_DOCS}/getting-started-primary-key`;
 exports.LicenseDocsLink = `${exports.HOST_URL_ROOT}/buy/buying-adaptable-licensing`;
 exports.AdaptableOptionsDocsLink = `${exports.HOST_URL_DOCS}/technical-reference-adaptable-options`;
-exports.AgGridModulesDocsLink = `${exports.HOST_URL_DOCS}/dev-guide-aggrid-modules-overview`;
+exports.AgGridModulesDocsLink = `${exports.HOST_URL_DOCS}/getting-started-aggrid-modules`;
 exports.AlertMessageDocsLink = `${exports.HOST_URL_DOCS}/handbook-alerting-message`;
 exports.FormatColumnPlaceholderDocsLink = `${exports.HOST_URL_DOCS}/handbook-column-formatting-display-format-placeholder`;
-exports.AgGridRequiredModulesDocsLink = `${exports.HOST_URL_DOCS}/dev-guide-aggrid-modules-overview#mandatory-modules`;
+exports.AgGridRequiredModulesDocsLink = `${exports.HOST_URL_DOCS}/getting-started-aggrid-modules#mandatory-modules`;

package/src/Utilities/ExpressionFunctions/scalarExpressionFunctions.js

@@ -643,7 +643,7 @@ exports.scalarExpressionFunctions = {
             }
             return result;
         },
-        description: "Returns the percentage difference between a cell's current value and its previous value.",
+        description: "Returns percentage difference between a cell's current value and previous value",
         signatures: [
             'PERCENT_CHANGE( [colName], <INCREASE|DECREASE> )',
             'PERCENT_CHANGE( COL(name: string), <INCREASE|DECREASE> )',
@@ -688,7 +688,7 @@ exports.scalarExpressionFunctions = {
             }
             return result;
         },
-        description: "Returns the absolute difference between a cell's current value and its previous value.",
+        description: "Returns absolute difference between a cell's current value and previous value",
         signatures: [
             'ABSOLUTE_CHANGE( [colName] )',
             'ABSOLUTE_CHANGE( COL(name: string) )',
@@ -720,7 +720,7 @@ exports.scalarExpressionFunctions = {
             const previousValue = context.dataChangedEvent.oldValue;
             return currentColumnValue !== previousValue;
         },
-        description: "Returns true if a cell's current value is different from its previous value, otherwise false. If no column is provided, it checks if any value has changed.",
+        description: "Returns true if cell's current value is different from previous value, otherwise false; if no column is provided, it checks if any value has changed",
         signatures: ['ANY_CHANGE( [colName] )', 'ANY_CHANGE()'],
         examples: ['ANY_CHANGE([col1])', 'ANY_CHANGE()'],
         category: 'changes',

package/src/Utilities/Helpers/StyleHelper.js

@@ -85,6 +85,20 @@ const convertAdaptableStyleToCSS = (style) => {
                 break;
         }
     }
+    if (style.Alignment) {
+        switch (style.Alignment) {
+            case 'Default':
+            case 'Left':
+                result.textAlign = 'left';
+                break;
+            case 'Right':
+                result.textAlign = 'right';
+                break;
+            case 'Center':
+                result.textAlign = 'center';
+                break;
+        }
+    }
     // assertion added to comply with the ag-Grid types
     return result;
 };

package/src/Utilities/ObjectFactory.js

@@ -270,7 +270,6 @@ function CreateEmptyFormatColumn() {
         Scope: undefined,
         Style: CreateEmptyStyle(),
         DisplayFormat: undefined,
-        CellAlignment: undefined,
         RowScope: undefined,
         Target: 'cell',
     };
@@ -334,6 +333,7 @@ function CreateEmptyStyle() {
         FontStyle: undefined,
         FontSize: undefined,
         ClassName: undefined,
+        Alignment: undefined,
     };
 }
 function CreateSystemStatusMessageInfo(message, type, furtherInfo) {

package/src/Utilities/Services/AnnotationsService.js

@@ -32,7 +32,7 @@ class AnnotationsService {
         if (a?.ColumnId === b?.ColumnId && a?.PrimaryKeyValue === b?.PrimaryKeyValue) {
             return true;
         }
-        // Primary keys retreived from the grid dom are always strings, so we must also consider them strings
+        // Primary keys retrieved from the grid dom are always strings, so we must also consider them strings
         if ((typeof a.PrimaryKeyValue === 'number' && typeof b.PrimaryKeyValue === 'string') ||
             (typeof b.PrimaryKeyValue === 'string' && typeof a.PrimaryKeyValue === 'number')) {
             return (a.PrimaryKeyValue.toString() === b.PrimaryKeyValue.toString() && a.ColumnId === b.ColumnId);

package/src/Utilities/Services/ModuleService.js

@@ -118,13 +118,13 @@ class ModuleService {
             case 'CalculatedColumn':
                 return url + 'handbook-calculated-column';
             case 'CellSummary':
-                return url + 'handbook-summarising';
+                return url + 'handbook-summarising-cells';
             case 'Charting':
                 return url + 'handbook-charts';
             case 'ColumnFilter':
                 return url + 'handbook-column-filter';
             case 'ColumnInfo':
-                return url + 'dev-guide-column-grid-column-info';
+                return url + 'dev-guide-columns-column-info';
             case 'Comment':
                 return url + 'handbook-comments';
             case 'CustomSort':
@@ -150,7 +150,7 @@ class ModuleService {
             case 'GridFilter':
                 return url + 'handbook-grid-filter';
             case 'GridInfo':
-                return url + 'dev-guide-column-grid-column-info';
+                return url + 'dev-guide-support-monitoring';
             case 'Layout':
                 return url + 'handbook-layouts';
             case 'NamedQuery':

package/src/View/AdaptablePopover/index.d.ts

@@ -17,6 +17,7 @@ export interface AdaptablePopoverProps extends React.ClassAttributes<React.Props
     popupPadding?: 0 | 2;
     alignPosition?: OverlayShowParams['alignPosition'];
     visible?: boolean;
+    disabled?: boolean;
 }
 export declare class AdaptablePopover extends React.Component<React.PropsWithChildren<AdaptablePopoverProps>, {}> {
     render(): React.JSX.Element;

package/src/View/AdaptablePopover/index.js

@@ -39,7 +39,7 @@ class AdaptablePopover extends React.Component {
                 // showTriangle
                 visible: this.props.visible, render: () => popoverClickRootClose, showEvent: (this.props.showEvent || 'mouseenter'), hideEvent: (this.props.hideEvent || 'mouseleave'), style: {
                     overflow: 'visible',
-                }, alignPosition: this.props.alignPosition }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, variant: "text", onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText }, this.props.children)) : (React.createElement("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
+                }, alignPosition: this.props.alignPosition }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, variant: "text", onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText, disabled: this.props.disabled }, this.props.children)) : (React.createElement("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
                 this.props.children,
                 showIcon && React.createElement(icons_1.Icon, { name: icon, style: iconStyle }))))));
     }

package/src/View/Alert/ActiveAlertsPanel.js

@@ -11,6 +11,14 @@ const ActiveAlertsPanel = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.AlertModuleId);
     const alerts = (0, react_redux_1.useSelector)((state) => state.Internal.AdaptableAlerts);
+    // map the suspended property from the underlying AlertDefinitions
+    alerts.forEach((alert) => {
+        const liveAlertDef = adaptable.api.alertApi.getAlertDefinitionById(alert.alertDefinition.Uuid);
+        if (liveAlertDef) {
+            // @ts-ignore theoretically AdaptableAlert is not Suspendable; practically <AdaptableObjectCompactList> expects it
+            alert.IsSuspended = liveAlertDef.IsSuspended;
+        }
+    });
     return React.createElement(AdaptableObjectCompactList_1.AdaptableObjectCompactList, { abObjects: alerts, module: filterModule });
 };
 exports.ActiveAlertsPanel = ActiveAlertsPanel;

package/src/View/Alert/AlertViewPanel.js

@@ -6,10 +6,11 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
-const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
 const ActiveAlertsPanel_1 = require("./ActiveAlertsPanel");
 const Flex_1 = require("../../components/Flex");
+const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 class AlertViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -24,7 +25,6 @@ class AlertViewPanelComponent extends React.Component {
         }
     }
     render() {
-        const messageType = UIHelper_1.default.getMessageTypeFromAdaptableAlerts(this.props.AdaptableAlerts);
         const { color: buttonTextColor, background: buttonBackground } = (0, getAlertButtonStyle_1.getAlertButtonStyle)(this.props.AdaptableAlerts);
         const collapsedText = this.props.AdaptableAlerts.length == 0
             ? '0 Alerts'
@@ -32,13 +32,17 @@ class AlertViewPanelComponent extends React.Component {
                 ? '1 Alert'
                 : this.props.AdaptableAlerts.length + ' Alerts';
         const alertsPanel = React.createElement(ActiveAlertsPanel_1.ActiveAlertsPanel, null);
-        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__Alert__wrap` },
-            React.createElement(Flex_1.Flex, { className: `ab-${elementType}__Alert__text twa:rounded-standard twa:mr-2 twa:p-2 text-2`, style: { color: buttonTextColor, backgroundColor: buttonBackground }, alignItems: "center" }, collapsedText),
-            this.props.AdaptableAlerts.length > 0 && (React.createElement(Flex_1.Flex, { alignItems: "center" },
-                React.createElement(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "", 
-                    // tooltipText="Alerts"
-                    bodyText: [alertsPanel], MessageType: messageType, useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })))));
+        const isToolbar = this.props.viewType === 'Toolbar';
+        const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
+        return (React.createElement(Flex_1.Flex, { alignItems: "stretch", className: (0, clsx_1.default)(`ab-${elementType}__Alert__wrap twa:gap-1`, {
+                'twa:min-w-[140px] twa:w-[140px]': isToolbar,
+                [`twa:flex-1`]: !isToolbar,
+            }) },
+            React.createElement(Flex_1.Flex, { key: `${buttonTextColor}_${buttonBackground}_${collapsedText}`, className: `ab-${elementType}__Alert__text twa:flex-1 twa:rounded-standard twa:p-2 text-2 twa:items-center twa:justify-center twa:min-h-input`, style: { color: buttonTextColor, backgroundColor: buttonBackground } }, collapsedText),
+            this.props.AdaptableAlerts.length > 0 && (React.createElement(Flex_1.Flex, { className: 'twa:gap-1' },
+                React.createElement(Flex_1.Flex, { className: "twa:flex twa:box-border" },
+                    React.createElement(ButtonClear_1.ButtonClear, { "aria-label": 'Clear All Alerts', variant: 'outlined', className: `ab-${elementType}__Alert__clear`, onClick: () => this.props.onDeleteAllAlert(this.state.Alerts), tooltip: "Clear All Alerts", showText: this.props.viewType === 'ToolPanel' }, 'Clear Alerts')),
+                React.createElement(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "Alerts Details", bodyText: [alertsPanel], MessageType: 'Info', useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })))));
     }
 }
 function mapStateToProps(state, ownProps) {

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

@@ -2,4 +2,5 @@ import { AdaptableAlert } from '../../../../types';
 export declare const getAlertButtonStyle: (alerts: AdaptableAlert[]) => {
     color: string;
     background: string;
+    cssClasses: string;
 };

package/src/View/Alert/Utilities/getAlertButtonStyle.js

@@ -8,9 +8,17 @@ const getAlertButtonStyle = (alerts) => {
     const messageTypeColor = UIHelper_1.default.getColorByMessageType(messageType);
     const buttonBackground = UIHelper_1.default.getButtonColourForAdaptableAlerts(alerts, messageTypeColor);
     const buttonTextColor = UIHelper_1.default.getButtonTextColourForArrayandMessageType(alerts, messageType);
+    let cssClasses = '';
+    if (alerts?.length) {
+        const cssMessageType = UIHelper_1.default.getCSSColorByMessageType(messageType);
+        cssClasses = cssMessageType
+            ? `twa:bg-${cssMessageType} twa:text-text-on-${cssMessageType}`
+            : '';
+    }
     return {
         color: buttonTextColor,
         background: buttonBackground,
+        cssClasses,
     };
 };
 exports.getAlertButtonStyle = getAlertButtonStyle;

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/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;