@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AlertDefinition } from '../../../AdaptableState/AlertState';
 export declare const isScheduledAlertTimeValid: (alert: AlertDefinition) => true | string;
-export declare const renderAlertScheduledSummary: () => React.JSX.Element;
+export declare const renderAlertScheduledSummary: (data: AlertDefinition) => React.JSX.Element;
 type AlertScheduledWizardSectionProps = {
     onChange: (alert: AlertDefinition) => void;
 };

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

@@ -17,8 +17,7 @@ const isScheduledAlertTimeValid = (alert) => {
     return (0, ScheduleScheduleWizard_1.isScheduleValid)({ Schedule: alert.Schedule });
 };
 exports.isScheduledAlertTimeValid = isScheduledAlertTimeValid;
-const renderAlertScheduledSummary = () => {
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderAlertScheduledSummary = (data) => {
     if (!(0, ScheduledAlertHelper_1.isScheduledAlertDefinition)(data)) {
         return null;
     }

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

@@ -2,7 +2,7 @@ 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;
+export declare const renderAlertTypeSummary: (alertType: AlertType, data: AlertDefinition) => React.JSX.Element;
 type AlertTypeWizardSectionProps = {
     onAlertTypeChange: (alertType: AlertType) => void;
     alertType: AlertType | null;

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

@@ -1,16 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertTypeWizardSection = exports.renderAlertTypeSummary = exports.isSettingsValid = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
-const Card_1 = require("../../../components/Card");
+const WizardTypeSelection_1 = require("../../Wizard/WizardTypeSelection");
 const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -23,12 +20,38 @@ const isSettingsValid = (data, api) => {
     return true;
 };
 exports.isSettingsValid = isSettingsValid;
-const renderAlertTypeSummary = (alertType) => {
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderAlertTypeSummary = (alertType, data) => {
     const text = (0, getAlertType_1.getAlertTypeText)(alertType);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name || 'Not specified' })] }), (0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Type ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: text })] })] }));
 };
 exports.renderAlertTypeSummary = renderAlertTypeSummary;
+const ALERT_TYPE_OPTIONS = [
+    {
+        type: getAlertType_1.AlertType.DataChange,
+        description: "A data change has been made to the Grid's data source",
+    },
+    {
+        type: getAlertType_1.AlertType.RowChange,
+        description: 'A Row has been added or removed from the data source',
+    },
+    {
+        type: getAlertType_1.AlertType.Aggregation,
+        description: 'A change has been made to aggregated data (i.e. from multiple Rows)',
+    },
+    {
+        type: getAlertType_1.AlertType.Observable,
+        description: 'A specified change (or lack of change) over time has been observed in the Grid',
+    },
+    {
+        type: getAlertType_1.AlertType.Validation,
+        description: "A change made to the Grid's data has broken a validation rule",
+    },
+    {
+        type: getAlertType_1.AlertType.Scheduled,
+        description: 'A reminder is triggered to display at a specfied date and time',
+    },
+];
+const ALERT_TYPE_COUNT = ALERT_TYPE_OPTIONS.length;
 const AlertTypeWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const handleNameChange = (event) => {
@@ -37,6 +60,6 @@ const AlertTypeWizardSection = (props) => {
             Name: event.target.value,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Alert" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "alert-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: data.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Alert Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose when the Alert should fire" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(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) }), (0, jsx_runtime_1.jsx)(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) }), (0, jsx_runtime_1.jsx)(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 }), (0, jsx_runtime_1.jsx)(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 }), (0, jsx_runtime_1.jsx)(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) }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Scheduled), description: "A reminder fires at a date and time you choose", checked: props.alertType === getAlertType_1.AlertType.Scheduled, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Scheduled) })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardNameFieldSection, { value: data.Name ?? '', onChange: handleNameChange, inputDataName: "alert-name" }), (0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionSection, { headingId: "alert-type-heading", title: "Alert Type", dataName: "alert-type", columns: (0, WizardTypeSelection_1.getWizardTypeSelectionGridColumns)(ALERT_TYPE_COUNT), intro: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Click a card to choose one of ", ALERT_TYPE_COUNT, " alert types for when the Alert should fire"] }), children: ALERT_TYPE_OPTIONS.map((option) => ((0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionCard, { label: (0, getAlertType_1.getAlertTypeText)(option.type), description: option.description, selected: props.alertType === option.type, dataName: `alert-type-${option.type}`, onSelect: () => props.onAlertTypeChange(option.type) }, option.type))) })] }));
 };
 exports.AlertTypeWizardSection = AlertTypeWizardSection;

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

@@ -87,7 +87,7 @@ const AlertWizard = (props) => {
                 isValid: AlertTypeWizardSection_1.isSettingsValid,
                 details: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Enter Name and select and select an Alert Type" })),
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }) })),
-                renderSummary: () => (0, AlertTypeWizardSection_1.renderAlertTypeSummary)(alertType),
+                renderSummary: (data) => (0, AlertTypeWizardSection_1.renderAlertTypeSummary)(alertType, data),
             },
             {
                 title: 'Schedule',
@@ -117,7 +117,7 @@ const AlertWizard = (props) => {
                 details: "Select the Alert's Message Type and Text",
                 isValid: (data) => (0, isValidAlertMessage_1.isValidAlertMessage)(data, alertType),
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(AlertMessageWizardSection_1.AlertMessageWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
-                renderSummary: () => (0, AlertMessageWizardSection_1.renderAlertMessageSummary)(alertType),
+                renderSummary: (data) => (0, AlertMessageWizardSection_1.renderAlertMessageSummary)(alertType, data),
             },
             {
                 title: 'Notification',
@@ -129,7 +129,7 @@ const AlertWizard = (props) => {
                 title: behaviourSpelling,
                 details: 'Configure ' + behaviourSpelling + 's for the Alert',
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(AlertBehaviourWizardSection_1.AlertBehaviourWizardSection, { alertType: alertType, onChange: setAlertDefinition }) })),
-                renderSummary: AlertBehaviourWizardSection_1.renderAlertBehaviourWizardSummary,
+                renderSummary: AlertBehaviourWizardSection_1.renderAlertBehaviourSummary,
             },
             {
                 details: 'Select Alert Tags',

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

@@ -1,2 +1,3 @@
 import * as React from 'react';
-export declare const renderScopeSummary: () => React.JSX.Element;
+import { AlertDefinition } from '../../../../types';
+export declare const renderScopeSummary: (data: AlertDefinition) => React.JSX.Element;

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

@@ -1,23 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderScopeSummary = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const Tag_1 = require("../../../components/Tag/Tag");
-const renderScopeSummary = () => {
-    const { data, api: { columnScopeApi: scopeApi }, } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const scopeSummaryTags_1 = require("../../Wizard/scopeSummaryTags");
+const renderScopeSummary = (data) => {
     if (!('Scope' in data)) {
         return null;
     }
-    const scope = data.Scope;
-    const columnsInScope = scopeApi.getColumnsInScope(scope);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: scopeApi.scopeIsAll(scope)
-                        ? 'Changes to any Column in the row will trigger an Alert'
-                        : null }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:overflow-hidden", children: 'ColumnIds' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:text-2', columnsInScope.length ? 'twa:mb-2' : 'twa:mb-0'), children: "Changes in selected columns will trigger an alert" }), columnsInScope.length ? ((0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null] })) : null }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: 'DataTypes' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mb-2", children: "Changes in Columns with these Data Types trigger an Alert" }), (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: scope.DataTypes.map((dataType) => {
-                                return `DataType: ${dataType}`;
-                            }) })] })) : null })] }));
+    return (0, jsx_runtime_1.jsx)(scopeSummaryTags_1.ScopeSummaryTags, { scope: data.Scope });
 };
 exports.renderScopeSummary = renderScopeSummary;

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -46,7 +46,7 @@ class BulkUpdatePopupComponent extends React.Component {
         if (!col) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)(PanelWithImage_1.PanelWithImage, { bodyProps: { className: 'twa:p-0' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+        return ((0, jsx_runtime_1.jsxs)(PanelWithImage_1.PanelWithImage, { bodyProps: { className: 'twa:p-2' }, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary", children: [col.dataType == 'date' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: "Enter a date value. Alternatively, tick the checkbox and select from an existing column value." }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", flexDirection: "row", className: "twa:flex-1 twa:mr-2", children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, className: "twa:w-full twa:max-w-[inherit]" }) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                                         this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                                         this.onApplyClick();
                                     }, variant: "raised", tone: "accent", children: "Apply Bulk Update" })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: "Select an existing Column value from the dropdown, or enter a new value" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:mt-2 twa:gap-2 twa:items-stretch", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", flexDirection: "row", className: "twa:mr-2 twa:flex-1", children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), className: "twa:w-full twa:max-w-[inherit]" }) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -16,7 +16,7 @@ const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/
 const BulkUpdateRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/BulkUpdateRedux"));
 const react_redux_1 = require("react-redux");
 const Flex_1 = require("../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 class BulkUpdateViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -58,15 +58,13 @@ class BulkUpdateViewPanelComponent extends React.Component {
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const messageStyle = UIHelper_1.UIHelper.getMessageTypeByStatusColour(statusColour);
         const infoStyle = messageStyle === 'Success' ? 'Info' : messageStyle;
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, clsx_1.default)(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, utils_1.cn)(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', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-1', {
+            }), flexWrap: isToolbar ? 'nowrap' : 'wrap', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)('twa:flex-1', {
                         'twa:min-w-[100px]': !isToolbar,
                         'twa:min-w-0': isToolbar,
-                    }), children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
-                            listMinWidth: 160,
-                        }, 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) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: (0, jsx_runtime_1.jsx)(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, children: 'Apply' }) }), (0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, 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) })] })] }));
+                    }), children: (0, jsx_runtime_1.jsx)(BulkUpdateValueSelector_1.BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", 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) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-shrink-0 twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex twa:box-border twa:items-stretch", children: (0, jsx_runtime_1.jsx)(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, children: 'Apply' }) }), (0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 360, popoverMaxWidth: 500, popupPadding: 0, 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.d.ts

@@ -6,6 +6,6 @@ export type CalculatedColumnExpressionWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     expressionType: ExpressionType;
 };
-export declare const renderCalculatedColumnExpressionSummary: (data: CalculatedColumn) => React.JSX.Element;
+export declare const renderCalculatedColumnExpressionSummary: (data: CalculatedColumn, api: AdaptableApi) => React.JSX.Element;
 export declare const isValidCalculatedColumnExpression: (data: CalculatedColumn, api: AdaptableApi) => true | string;
 export declare const CalculatedColumnExpressionWizardSection: (props: CalculatedColumnExpressionWizardSectionProps) => React.JSX.Element;

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

@@ -23,8 +23,7 @@ const getExpressionTypeDescription = (expressionType) => {
             return '';
     }
 };
-const renderCalculatedColumnExpressionSummary = (data) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderCalculatedColumnExpressionSummary = (data, api) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["Column scalar expression:", ' ', (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: api.internalApi.getAdaptableQueryExpressionText(data.Query) })] }));
 };
 exports.renderCalculatedColumnExpressionSummary = renderCalculatedColumnExpressionSummary;

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

@@ -68,7 +68,7 @@ const CalculatedColumnSettingsWizardSection = (props) => {
         { value: 'boolean', label: 'Boolean' },
         { value: 'numberArray', label: 'NumberArray' },
     ];
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": 'calculated-column-settings', children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Data Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for the Calculated Column values" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1 twa:gap-1", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value), className: "twa:max-w-[300px]" }), ErrorMessage ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:text-error", children: ErrorMessage })) : null] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Width" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional Column Width in pixels" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": 'calculated-column-settings', children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Data Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for the Calculated Column values" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1 twa:gap-1", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type", placeholder: "Select Data Type", items: options, value: dataType, onValueChange: (value) => handleDataTypeChange(value), className: "twa:max-w-[300px]" }), ErrorMessage ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:text-destructive", children: ErrorMessage })) : null] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Width" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional Column Width in pixels" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
                                     Width: Number(e.target.value),
                                 }) }) })] }), (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, 
                     // @ts-ignore CalculatedColumn has a broader DataType

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

@@ -2,10 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalculatedColumnTypeWizardSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Flex_1 = require("../../../components/Flex");
-const Card_1 = require("../../../components/Card");
+const WizardTypeSelection_1 = require("../../Wizard/WizardTypeSelection");
+const CALCULATED_COLUMN_TYPE_OPTIONS = [
+    {
+        type: 'ScalarExpression',
+        label: 'Standard',
+        description: 'The calculated value is derived from other cells in the row',
+        expressionExample: '[price] * [quantity]',
+    },
+    {
+        type: 'AggregatedScalarExpression',
+        label: 'Aggregated',
+        description: 'The calculated value is derived from other rows',
+        expressionExample: 'SUM([pnl], GROUP_BY([desk]))',
+    },
+    {
+        type: 'CumulativeAggregatedExpression',
+        label: 'Cumulative',
+        description: 'The calculated value is derived cumulatively from other rows',
+        expressionExample: 'CUMUL(SUM([pnl]), OVER([tradeDate]))',
+    },
+    {
+        type: 'QuantileAggregatedExpression',
+        label: 'Quantile',
+        description: 'The calculated value is derived from other rows using quantile aggregations',
+        expressionExample: 'QUANT([pnl], 4)',
+    },
+];
+const CALCULATED_COLUMN_TYPE_COUNT = CALCULATED_COLUMN_TYPE_OPTIONS.length;
 const CalculatedColumnTypeWizardSection = (props) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Calculated Column Type" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Aggregated', description: "The calculated value is derived from other rows", checked: props.type === 'AggregatedScalarExpression', onClick: () => props.onTypeChange('AggregatedScalarExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Cumulative', description: "The calculated value is derived cumulatively from other rows", checked: props.type === 'CumulativeAggregatedExpression', onClick: () => props.onTypeChange('CumulativeAggregatedExpression') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: 'Quantile', description: "The calculated value is derived from other rows using quantile aggregations", checked: props.type === 'QuantileAggregatedExpression', onClick: () => props.onTypeChange('QuantileAggregatedExpression') })] }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", "data-name": "calculated-column-type", className: "twa:h-full twa:min-h-0 twa:p-2", children: (0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionSection, { headingId: "calculated-column-type-heading", title: "Calculated Column Type", dataName: "calculated-column-type-grid", columns: (0, WizardTypeSelection_1.getWizardTypeSelectionGridColumns)(CALCULATED_COLUMN_TYPE_COUNT), intro: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Click a card to choose one of ", CALCULATED_COLUMN_TYPE_COUNT, " calculated column types"] }), children: CALCULATED_COLUMN_TYPE_OPTIONS.map((option) => ((0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionCard, { label: option.label, description: option.description, selected: props.type === option.type, dataName: `calculated-column-type-${option.type}`, minHeightClassName: "twa:min-h-[148px]", onSelect: () => props.onTypeChange(option.type), footer: (0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionPreviewFrame, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "code", className: "ab-CodeBlock twa:block twa:w-full twa:truncate twa:bg-transparent twa:p-0 twa:font-mono twa:text-2 twa:leading-snug twa:text-foreground twa:opacity-90", children: option.expressionExample }) }) }, option.type))) }) }));
 };
 exports.CalculatedColumnTypeWizardSection = CalculatedColumnTypeWizardSection;

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -7,13 +7,13 @@ const React = tslib_1.__importStar(require("react"));
 const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
 const Enums_1 = require("../../AdaptableState/Common/Enums");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
+const utils_1 = require("../../lib/utils");
 const CellSummaryPopover_1 = require("./CellSummaryPopover");
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 const react_redux_1 = require("react-redux");
 const Flex_1 = require("../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const NewSelect_1 = require("../../components/NewSelect");
 class CellSummaryViewPanelComponent extends React.Component {
     cleanupEvent;
@@ -54,11 +54,11 @@ class CellSummaryViewPanelComponent extends React.Component {
         const isToolbar = this.props.viewType === 'Toolbar';
         const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
         const operationValue = this.getOperationValue() ?? 'N/A';
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, clsx_1.default)(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, utils_1.cn)(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,
-            }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ariaLabel: "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, items: [...operationMenuItems, ...operationDefinitions], onValueChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:items-center twa:gap-1", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(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,
+            }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ariaLabel: "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, items: [...operationMenuItems, ...operationDefinitions], onValueChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:items-center twa:gap-1", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
+                                    'twa:rounded-standard twa:text-info-foreground twa:bg-info twa:text-2': !isToolbar,
                                     'twa:flex-1 twa:text-primary-foreground twa:justify-center': isToolbar,
                                 }), children: operationValue }), (0, jsx_runtime_1.jsx)(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 })] }) })] }));
     }

package/src/View/Charting/ShowChartButton.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const DropdownButton_1 = require("../../components/DropdownButton");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const ChartingState_1 = require("../../AdaptableState/ChartingState");
 const useAgChartState_1 = require("./useAgChartState");
@@ -20,7 +20,7 @@ const BaseShowChartButton = (props) => {
     if (!chartContainers?.length) {
         return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
     }
-    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions, children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { variant: "raised", tone: "success", children: "Open" }) }));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-name": "show-chart-dropdown", items: props.containerOptions, children: "Open In..." }));
 };
 const ShowAgChartButton = (props) => {
     const adaptableApi = (0, AdaptableContext_1.useAdaptable)().api;
@@ -33,13 +33,13 @@ const ShowAgChartButton = (props) => {
             onClick: () => {
                 showChart(null);
             },
-            ...(chartContainers
-                ? chartContainers?.map((contianerDef) => ({
-                    label: contianerDef.name,
-                    onClick: () => showChart(contianerDef),
-                }))
-                : []),
         },
+        ...(chartContainers
+            ? chartContainers.map((contianerDef) => ({
+                label: contianerDef.name,
+                onClick: () => showChart(contianerDef),
+            }))
+            : []),
     ];
     return ((0, jsx_runtime_1.jsx)(BaseShowChartButton, { chartOpened: isOpen, onShowChart: showChart, onCloseChart: closeChart, containerOptions: containerOptions }));
 };

package/src/View/ColumnInfo/ColumnInfo.js

@@ -14,6 +14,7 @@ const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../components/Flex");
+const columnLayoutHelpers_1 = require("../Layout/Wizard/sections/columnLayoutHelpers");
 const BASE_CLASS_NAME = 'ab-AdaptableColumns';
 const domProps = {
     className: 'twa:flex-1 twa:min-h-0 twa:w-full',
@@ -39,11 +40,22 @@ const MODULES_WITH_SCOPE = [
     'Shortcut',
     'StyledColumn',
 ];
+/** Column Info summary only — shows the resolved default width when layout has no explicit sizing. */
+const formatColumnInfoSummaryWidth = (columnId, sizing, resolveDefaultWidth) => {
+    const explicit = (0, columnLayoutHelpers_1.formatColumnInspectorSizing)(columnId, sizing, resolveDefaultWidth);
+    if (explicit !== 'Default') {
+        return explicit;
+    }
+    return String(resolveDefaultWidth(columnId));
+};
 const ColumnDefPreview = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     if (props.column) {
         const api = adaptable.api;
         const summary = api.columnApi.getColumnSummaryForColumnId(props.column.columnId);
+        const layout = api.layoutApi.getCurrentLayout();
+        const resolveDefaultWidth = (columnId) => adaptable.getDefaultColumnWidthForCol(columnId);
+        const columnSizing = layout.ColumnSizing?.[props.column.columnId];
         const keyValuePairs = [
             {
                 Key: 'Column Id',
@@ -89,9 +101,17 @@ const ColumnDefPreview = (props) => {
                 Key: 'Visible',
                 Value: props.column.visible ? 'Yes' : 'No',
             },
+            {
+                Key: 'Pinning',
+                Value: (0, columnLayoutHelpers_1.formatColumnInspectorPinning)(layout, props.column.columnId),
+            },
             {
                 Key: 'Width',
-                Value: props.column.width,
+                Value: formatColumnInfoSummaryWidth(props.column.columnId, columnSizing, resolveDefaultWidth),
+            },
+            {
+                Key: 'Sorting',
+                Value: (0, columnLayoutHelpers_1.formatColumnInspectorSorting)(layout, props.column.columnId),
             },
             {
                 Key: 'Row Grouped',

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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectCollection = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const PanelWithRow_1 = require("../Panels/PanelWithRow");
+const utils_1 = require("../../../lib/utils");
 const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twMerge_1 = require("../../../twMerge");
 const AdaptableObjectCollection = (props) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { style: props.style, className: (0, twMerge_1.twMerge)('ab-ObjectCollection twa:flex twa:flex-col', props.className), children: [(0, jsx_runtime_1.jsx)(PanelWithRow_1.PanelWithRow, { border: "none", colItems: props.colItems }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { style: props.style, className: (0, twMerge_1.twMerge)('ab-ObjectCollection twa:flex twa:flex-col', props.className), children: [(0, jsx_runtime_1.jsx)(PanelWithRow_1.PanelWithRow, { border: "none", colItems: props.colItems }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('ab-ObjectCollection__items twa:shadow-none twa:flex-1', {
                     'twa:overflow-y-visible': props.allowOverflow,
                     'twa:overflow-y-auto': !props.allowOverflow,
                 }), children: props.items })] }));

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -45,7 +45,7 @@ const AdaptableObjectCompactListItem = (props) => {
                         ? React.createElement(objectView.item.view, {
                             data: props.abObject,
                         })
-                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Item__Values`, children: (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: objectView.item.values.map(String) }) }))] }), suspendAction && unSuspendAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]", children: deleteAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })) })] }));
+                        : objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Item__Values`, children: (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: objectView.item.values, variant: objectView.item.tagVariant }) }))] }), suspendAction && unSuspendAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]", children: deleteAction && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })) })] }));
 };
 exports.AdaptableObjectCompactListItem = AdaptableObjectCompactListItem;
 const AdaptableObjectCompactList = (props) => {

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -7,6 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InternalRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/InternalRedux"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const utils_1 = require("../../../lib/utils");
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonDelete_1 = require("../Buttons/ButtonDelete");
@@ -15,7 +16,6 @@ const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
 const Flex_1 = require("../../../components/Flex");
 const twMerge_1 = require("../../../twMerge");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Tag_1 = require("../../../components/Tag/Tag");
 const ICON_SIZE = 26;
 const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
@@ -51,7 +51,7 @@ const AdaptableObjectListItemView = (props) => {
                                             data: props.abObject,
                                             module: props.module,
                                         })
-                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? ((0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: tag.values.map(String) })) : null, typeof tag.viewAfter === 'function'
+                                        : tag.view, Boolean(tag?.values && tag?.values?.length) ? ((0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: tag.values, variant: tag.tagVariant })) : null, typeof tag.viewAfter === 'function'
                                         ? React.createElement(tag.viewAfter, {
                                             data: props.abObject,
                                             module: props.module,
@@ -76,7 +76,7 @@ const AdaptableObjectListItem = (props) => {
     const entityType = props.module.moduleInfo.FriendlyName;
     const moduleAccessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const accessLevel = AdaptableHelper_1.default.getAccessLevelForObject(props.data.abObject, moduleAccessLevel);
-    const itemClassName = (0, clsx_1.default)(props.className, props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
+    const itemClassName = (0, utils_1.cn)(props.className, props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
         `${ITEM_BASE_CLASS_NAME}--is-suspended`);
     const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
@@ -110,6 +110,6 @@ const AdaptableObjectListItem = (props) => {
 };
 exports.AdaptableObjectListItem = AdaptableObjectListItem;
 const AdaptableObjectList = (props) => {
-    return ((0, jsx_runtime_1.jsx)("ul", { className: (0, twMerge_1.twMerge)((0, clsx_1.default)(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className)), children: props?.items?.map((item, index) => ((0, jsx_runtime_1.jsx)(exports.AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
+    return ((0, jsx_runtime_1.jsx)("ul", { className: (0, utils_1.cn)(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className), children: props?.items?.map((item, index) => ((0, jsx_runtime_1.jsx)(exports.AdaptableObjectListItem, { data: item, module: props.module, ...props.itemProps }, item.abObject.Uuid ?? index))) }));
 };
 exports.AdaptableObjectList = AdaptableObjectList;

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

@@ -4,12 +4,12 @@ exports.AdaptableObjectRow = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../lib/utils");
 const Flex_1 = require("../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 class AdaptableObjectRow extends React.Component {
     render() {
         const colItems = this.props.colItems.map((colItem, index) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `ab-AdaptableObjectRow__cell twa:px-1`, style: { flex: colItem.Size }, "data-name": "list-group-cell", title: typeof colItem.Content === 'string' ? colItem.Content : undefined, children: colItem.Content }, index)));
-        const className = (0, clsx_1.default)('ab-AdaptableObjectRow', 'twa:p-3', 'twa:m-0', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended', this.props.className);
+        const className = (0, utils_1.cn)('ab-AdaptableObjectRow', 'twa:p-3', 'twa:m-0', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended', this.props.className);
         return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style, children: colItems }));
     }
 }

package/src/View/Components/Buttons/ButtonBase/index.js

@@ -4,10 +4,9 @@ exports.ButtonBase = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../../lib/utils");
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
 const Flex_1 = require("../../../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const twMerge_1 = require("../../../../twMerge");
 const Glyphicon = ({ glyph, style }) => {
     return (0, jsx_runtime_1.jsx)("span", { style: style, className: `glyphicon glyphicon-${glyph}` });
 };
@@ -58,7 +57,7 @@ class ButtonBase extends React.Component {
         if (this.props.icon) {
             content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.iconPosition === 'end' ? text : null, " ", (0, jsx_runtime_1.jsx)(Glyphicon, { glyph: this.props.icon }), ' ', this.props.iconPosition !== 'end' ? text : null] }));
         }
-        let button = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...this.props, as: "button", style: this.props.style, className: (0, twMerge_1.twMerge)((0, clsx_1.default)(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`), this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()), children: content }));
+        let button = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...this.props, as: "button", style: this.props.style, className: (0, utils_1.cn)(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`, this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()), children: content }));
         let buttonwithtooltip = (0, jsx_runtime_1.jsx)("div", { children: button });
         return hideToolTip ? button : buttonwithtooltip;
     }

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

@@ -8,6 +8,8 @@ type ButtonNewProps = {
     accessLevel?: SimpleButtonProps['accessLevel'];
     children?: React.ReactNode;
     onClick?: () => void;
+    disabled?: boolean;
+    dataName?: string;
 };
 export declare const ButtonNew: (props: ButtonNewProps) => React.JSX.Element;
 export {};

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

@@ -6,6 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const twMerge_1 = require("../../../twMerge");
 const ButtonNew = (props) => {
-    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "new", tone: props.tone || 'accent', icon: "plus", variant: props.variant || 'raised', tooltip: props.tooltip || 'New', accessLevel: props.accessLevel, onClick: props.onClick, className: (0, twMerge_1.twMerge)(`twa:flex twa:flex-row twa:items-center`, props.className), children: props.children === undefined ? 'New' : props.children }));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": props.dataName ?? 'new', tone: props.tone || 'accent', icon: "plus", variant: props.variant || 'raised', tooltip: props.tooltip || 'New', accessLevel: props.accessLevel, disabled: props.disabled, onClick: props.onClick, className: (0, twMerge_1.twMerge)(`twa:flex twa:flex-row twa:items-center`, props.className), children: props.children === undefined ? 'New' : props.children }));
 };
 exports.ButtonNew = ButtonNew;