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

package/src/View/Components/StyleComponent.js

@@ -133,6 +133,14 @@ const StyleComponent = (props) => {
         }
         setComponentStyle(newStyle);
     };
+    const onAlignmentChange = (alignment) => {
+        const newStyle = { ...componentStyle };
+        newStyle.Alignment = alignment;
+        if (alignment == 'Default') {
+            delete newStyle.Alignment;
+        }
+        setComponentStyle(newStyle);
+    };
     const Cmp = props.headless ? Flex_1.Box : Panel_1.default;
     const headerText = props.headerText ?? 'Style';
     const cmpProps = props.headless
@@ -220,7 +228,18 @@ const StyleComponent = (props) => {
                             ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) }))) : (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:gap-2 twa:flex-wrap" }, fontSizes.map((enumName) => {
                         return (React.createElement(Radio_1.default, { onClick: () => onFontSizeChange(enumName), checked: (enumName == 'Default' && !componentStyle.FontSize) ||
                                 componentStyle.FontSize === enumName, key: enumName }, enumName));
-                    }))))))),
+                    }))),
+                    React.createElement("span", null, "Alignment"),
+                    React.createElement(Toggle_1.ToggleGroup, null,
+                        React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed
+                                ? onAlignmentChange('Left')
+                                : onAlignmentChange('Default') }),
+                        React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed
+                                ? onAlignmentChange('Center')
+                                : onAlignmentChange('Default') }),
+                        React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed
+                                ? onAlignmentChange('Right')
+                                : onAlignmentChange('Default') })))))),
         !props.hidePreview && (React.createElement(Card_1.Card, { shadow: false },
             React.createElement(Card_1.Card.Title, null, "Preview"),
             React.createElement(Card_1.Card.Body, { className: "twa:grid twa:place-items-center" },

package/src/View/Dashboard/DashboardPopup.js

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

package/src/View/Export/ExportDestinationPicker.js

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

package/src/View/Export/ExportStatusBar.js

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

package/src/View/Export/ExportViewPanel.js

@@ -19,6 +19,7 @@ const ReportNameSelector_1 = require("./ReportNameSelector");
 const ReportFormatSelector_1 = require("./ReportFormatSelector");
 const ExportDestinationPicker_1 = require("./ExportDestinationPicker");
 const Flex_1 = require("../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const ExportViewPanel = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const exportApi = props.api.exportApi;
@@ -30,28 +31,34 @@ const ExportViewPanel = (props) => {
     const deleteMessage = currentReport
         ? `Are you sure you want to delete '${currentReport.Name}'?`
         : 'Are you sure you want to delete this report?';
-    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Export__panel twa:gap-2`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+    const isToolbar = props.viewType === 'Toolbar';
+    const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
+    return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)(`ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
+            'twa:min-w-[486px] twa:flex-nowrap': isToolbar,
+            'twa:flex-1 twa:flex-wrap': !isToolbar,
+        }) },
         React.createElement(ReportNameSelector_1.ReportNameSelector, { viewType: props.viewType, reportName: currentReportName, userReports: userReports, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }),
         React.createElement(ReportFormatSelector_1.ReportFormatSelector, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) }),
         React.createElement(Flex_1.Flex, { className: (0, join_1.default)(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls twa:w-full`) },
-            React.createElement(ExportDestinationPicker_1.ExportDestinationPicker, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat }),
-            React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ExportModuleId, props.moduleInfo.Popup, {
-                    action: 'Edit',
-                    source: 'Toolbar',
-                })), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null, accessLevel: accessLevel }),
-            React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ExportModuleId, props.moduleInfo.Popup, {
-                    action: 'New',
-                    source: 'Toolbar',
-                })), tooltip: "Create New Report", accessLevel: props.accessLevel }),
-            React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Report", className: `ab-${elementType}__Export__delete`, disabled: currentReport == null, ConfirmAction: ExportRedux.ReportDelete(currentReport), ConfirmationMsg: deleteMessage, ConfirmationTitle: 'Delete Report', accessLevel: accessLevel }),
-            props.api.entitlementApi.isModuleFullEntitlement('Schedule') && (React.createElement(ButtonSchedule_1.ButtonSchedule, { className: `ab-${elementType}__Export__schedule twa:ml-1`, onClick: () => {
-                    const reportSchedule = ObjectFactory_1.default.CreateReportSchedule(currentReportName, currentFormat);
-                    dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ScheduleModuleId, 'SchedulePopup', {
+            React.createElement(Flex_1.Flex, { className: "twa:min-w-[44px]" },
+                React.createElement(ExportDestinationPicker_1.ExportDestinationPicker, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat })),
+            React.createElement(Flex_1.Flex, null,
+                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ExportModuleId, props.moduleInfo.Popup, {
+                        action: 'Edit',
+                        source: 'Toolbar',
+                    })), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null, accessLevel: accessLevel }),
+                React.createElement(ButtonNew_1.ButtonNew, { variant: "text", className: `ab-${elementType}__Export__new`, tone: "neutral", children: null, onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ExportModuleId, props.moduleInfo.Popup, {
                         action: 'New',
                         source: 'Toolbar',
-                        value: reportSchedule,
-                    }));
-                }, tooltip: "Schedule", disabled: currentReport == null, accessLevel: props.accessLevel })))));
+                    })), tooltip: "Create New Report", accessLevel: props.accessLevel }),
+                React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Report", className: `ab-${elementType}__Export__delete`, disabled: currentReport == null, ConfirmAction: ExportRedux.ReportDelete(currentReport), ConfirmationMsg: deleteMessage, ConfirmationTitle: 'Delete Report', accessLevel: accessLevel }),
+                props.api.entitlementApi.isModuleFullEntitlement('Schedule') && (React.createElement(ButtonSchedule_1.ButtonSchedule, { className: `ab-${elementType}__Export__schedule`, onClick: () => {
+                        const reportSchedule = ObjectFactory_1.default.CreateReportSchedule(currentReportName, currentFormat);
+                        dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ScheduleModuleId, 'SchedulePopup', {
+                            action: 'New',
+                            source: 'Toolbar',
+                            value: reportSchedule,
+                        }));
+                    }, tooltip: "Schedule", disabled: currentReport == null, accessLevel: props.accessLevel }))))));
 };
 exports.ExportViewPanel = ExportViewPanel;

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -7,16 +7,11 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const CheckBox_1 = require("../../../components/CheckBox");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
-const ToggleGroup_1 = require("../../../components/Toggle/ToggleGroup");
-const Toggle_1 = require("../../../components/Toggle/Toggle");
 const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
 const renderFormatColumnSettingsSummary = (data) => {
     return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-        React.createElement(Flex_1.Box, null,
-            "Cell alignment ",
-            React.createElement(Tag_1.Tag, null, data.CellAlignment ?? 'default')),
         React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Data Rows ",
             React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
@@ -40,13 +35,6 @@ const renderFormatColumnSettingsSummary = (data) => {
 exports.renderFormatColumnSettingsSummary = renderFormatColumnSettingsSummary;
 const FormatColumnSettingsWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const onCellAlignmentSelectChanged = (CellAlignment) => {
-        const newData = { ...data, CellAlignment };
-        if (CellAlignment === null) {
-            delete newData.CellAlignment;
-        }
-        props.onChange(newData);
-    };
     const onExcludeDataRowsChanged = (ExcludeDataRows) => {
         props.onChange({
             ...data,
@@ -88,17 +76,6 @@ const FormatColumnSettingsWizardSection = (props) => {
         React.createElement(Card_1.Card.Body, null,
             React.createElement(Flex_1.Flex, { flexDirection: "row" },
                 React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Cell Alignment" },
-                        React.createElement(ToggleGroup_1.ToggleGroup, null,
-                            React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Left')
-                                    : onCellAlignmentSelectChanged(null) }),
-                            React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Center')
-                                    : onCellAlignmentSelectChanged(null) }),
-                            React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
-                                    ? onCellAlignmentSelectChanged('Right')
-                                    : onCellAlignmentSelectChanged(null) }))),
                     data.Target === 'cell' && (React.createElement(React.Fragment, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
                             React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.js

@@ -13,7 +13,6 @@ const isFormatColumnStyleValid = (data, api) => {
     if (data.Style &&
         UIHelper_1.default.IsEmptyStyle(data.Style) &&
         data.DisplayFormat === undefined &&
-        data.CellAlignment === undefined &&
         !api.columnScopeApi.isSingleBooleanColumnScope(data.Scope)) {
         return 'No format applied';
     }
@@ -25,7 +24,8 @@ const toStyle = (data) => {
         ...(0, StyleHelper_1.convertAdaptableStyleToCSS)(data.Style ?? {}),
         borderWidth: data.Style?.BorderColor ? 2 : 0,
         borderStyle: 'solid',
-        textAlign: data.CellAlignment ? data.CellAlignment.toLowerCase() : undefined,
+        // ToDO abcdefg
+        textAlign: data.Style?.Alignment ? data.Style.Alignment.toLowerCase() : undefined,
     };
 };
 const renderFormatColumnStyleWizardSummary = (data) => {

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -3,84 +3,75 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridInfoPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+const EnvVars_1 = require("../../../EnvVars");
+const AgGridModulesAdapter_1 = require("../../../agGrid/AgGridModulesAdapter");
+const InfiniteTable_1 = require("../../../components/InfiniteTable");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const Tabs_1 = require("../../../components/Tabs");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
-const Helper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/Helper"));
-const AdaptablePopover_1 = require("../../AdaptablePopover");
-const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
-const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
-const EnvVars_1 = require("../../../EnvVars");
-const AgGridModulesAdapter_1 = require("../../../agGrid/AgGridModulesAdapter");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const adaptableVersion = EnvVars_1.ADAPTABLE_VERSION;
 const agGridVersion = AgGridModulesAdapter_1.AG_GRID_VERSION;
 const GridInfoPopup = (props) => {
     const api = props.api;
-    const CreateGridSummaries = (colItems) => {
-        const returnRows = [];
-        const calcColumns = api.calculatedColumnApi
-            .getCalculatedColumns()
-            .map((c) => c.ColumnId);
-        const actionColumns = api.actionColumnApi
-            .getActionColumns()
-            .map((ac) => ac.columnId);
-        const freeTextColumns = api.freeTextColumnApi
-            .getFreeTextColumns()
-            .map((c) => c.ColumnId);
-        const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
-        const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
-        const sorts = ArrayExtensions_1.default.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
-            ? api.gridApi.getColumnSorts().map((gs) => {
-                return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
-            })
-            : null;
-        const selectedRowInfo = api.gridApi.getSelectedRowInfo();
-        if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
-            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', adaptableVersion));
-        }
-        if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
-            returnRows.push(createReadOnlyColItem(colItems, 'AG Grid Version', agGridVersion));
-        }
-        returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
-        returnRows.push(createReadOnlyColItem(colItems, 'Grid Filter', gridFilterExpression));
-        returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo?.gridRows.length));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length));
-        returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Columns', props.api.gridApi.getVisibleColumnCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(calcColumns)
+    const keyValuePairs = [];
+    const calcColumns = api.calculatedColumnApi
+        .getCalculatedColumns()
+        .map((c) => c.ColumnId);
+    const actionColumns = api.actionColumnApi
+        .getActionColumns()
+        .map((ac) => ac.columnId);
+    const freeTextColumns = api.freeTextColumnApi
+        .getFreeTextColumns()
+        .map((c) => c.ColumnId);
+    const columnFilterDescription = api.filterApi.columnFilterApi.columnFiltersToString(api.filterApi.columnFilterApi.getColumnFilters());
+    const gridFilterExpression = api.filterApi.gridFilterApi.getCurrentGridFilterExpression();
+    const sorts = ArrayExtensions_1.default.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
+        ? api.gridApi.getColumnSorts().map((gs) => {
+            return api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
+        })
+        : null;
+    const selectedRowInfo = api.gridApi.getSelectedRowInfo();
+    if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
+        keyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
+    }
+    if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
+        keyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
+    }
+    keyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
+    keyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
+    keyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
+    keyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
+    keyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
+    keyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
+    keyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
+    keyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
+    keyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
+    keyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(calcColumns)
             ? ArrayExtensions_1.default.createCommaSeparatedString(calcColumns)
-            : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns)
+            : 'None' });
+    keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns)
             ? ArrayExtensions_1.default.createCommaSeparatedString(freeTextColumns)
-            : 'None'));
-        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns)
+            : 'None' });
+    keyValuePairs.push({ Key: 'CalcuActionlated Columns', Value: ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns)
             ? ArrayExtensions_1.default.createCommaSeparatedString(actionColumns)
-            : 'None'));
-        return returnRows;
+            : 'None' });
+    const domProps = {
+        className: 'twa:flex-1 twa:min-h-0 twa:w-full',
     };
-    const createReadOnlyColItem = (colItems, item1, item2, item3) => {
-        let rowColItems = Helper_1.default.cloneObject(colItems);
-        rowColItems[0].Content = item1;
-        rowColItems[1].Content = item2;
-        if (item3) {
-            let infoButton = React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [item3] });
-            rowColItems[2].Content = infoButton;
-        }
-        return rowColItems;
+    keyValuePairs.map((keyValuePair) => {
+        return {
+            Key: keyValuePair.Key,
+            Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
+        };
+    })
+        .filter((x) => x.Value);
+    const columnsMap = {
+        Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+        Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
     };
-    let propValueColItems = [
-        { Content: 'Property', Size: 5 },
-        { Content: 'Value', Size: 7 },
-    ];
-    let gridSummaries = CreateGridSummaries(propValueColItems).map((x, index) => {
-        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
-    });
     const baseClassName = 'ab-GridInfo';
     return (React.createElement(PopupPanel_1.PopupPanel, { className: (0, clsx_1.default)(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
         React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
@@ -89,7 +80,8 @@ const GridInfoPopup = (props) => {
                     React.createElement(Tabs_1.Tabs.Tab, null, "Grid Summary"),
                     React.createElement(Tabs_1.Tabs.Tab, null, "Grid State"),
                     React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { className: "twa:flex-1 twa:min-h-0" /* so the collection scrolls nicely, the header remains fixed*/, colItems: propValueColItems, items: gridSummaries })),
+                        React.createElement(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key" },
+                            React.createElement(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap }))),
                     React.createElement(Tabs_1.Tabs.Content, null,
                         React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" })))))));
 };

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -39,7 +39,10 @@ const QuickSearchPopupComponent = (props) => {
             React.createElement(Card_1.Card, null,
                 React.createElement(Card_1.Card.Title, null, "Behaviour"),
                 React.createElement(Card_1.Card.Body, { className: "twa:p-1", gap: 2 },
-                    React.createElement(HelpBlock_1.default, { className: "twa:text-2 twa:w-fit" }, "Filters the Grid to only show rows with matching cells; use with care as can cause performance issues"),
+                    React.createElement(HelpBlock_1.default, { className: "twa:text-2 twa:w-fit" },
+                        "Filter Grid when searching to only show rows with matching cells; ",
+                        React.createElement("b", null, "use with care"),
+                        " as can cause performance issues"),
                     React.createElement(CheckBox_1.CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions_1.default.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter using Quick Search Results"))),
             React.createElement(Card_1.Card.Title, { border: false, className: "twa:pt-3" }, "Cell Matching Style"),
             React.createElement(Card_1.Card, null,

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js

@@ -24,13 +24,13 @@ const ScheduleSettingsReminder = (props) => {
     const handleHeaderChange = (event) => {
         props.onChange({
             ...props.reminderSchedule,
-            Header: event.target?.value,
+            Header: event.target.value,
         });
     };
     const handleMessageChange = (event) => {
         props.onChange({
             ...props.reminderSchedule,
-            Message: event.target?.value,
+            Message: event.target.value,
         });
     };
     const handleDisplayNotificationChange = (checked) => {

package/src/View/UIHelper.d.ts

@@ -38,6 +38,7 @@ export declare function getMessageTypeByStatusColour(statusColour: StatusColour)
 export declare function getButtonToneByMessageType(messageType: AdaptableMessageType): 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
 export declare function getGlyphByMessageType(messageType: AdaptableMessageType): AdaptableSystemIconName;
 export declare function getColorByMessageType(messageType: AdaptableMessageType): string;
+export declare function getCSSColorByMessageType(messageType: AdaptableMessageType): string;
 export declare function getStyleForStatusColour(statusColour: StatusColour): CSSProperties;
 export declare function getStyleForMessageType(messageType: AdaptableMessageType): CSSProperties;
 export declare function getGlyphForStatusColour(statusColour: StatusColour): string;
@@ -75,6 +76,7 @@ export declare const UIHelper: {
     getGlyphForMessageType: typeof getGlyphForMessageType;
     getStyleForMessageType: typeof getStyleForMessageType;
     getMessageTypeFromAdaptableAlerts: typeof getMessageTypeFromAdaptableAlerts;
+    getCSSColorByMessageType: typeof getCSSColorByMessageType;
     getButtonColourForAdaptableAlerts: typeof getButtonColourForAdaptableAlerts;
     getButtonTextColourForArrayandMessageType: typeof getButtonTextColourForArrayandMessageType;
     getButtonTextColourForMessageType: typeof getButtonTextColourForMessageType;

package/src/View/UIHelper.js

@@ -13,6 +13,7 @@ exports.getMessageTypeByStatusColour = getMessageTypeByStatusColour;
 exports.getButtonToneByMessageType = getButtonToneByMessageType;
 exports.getGlyphByMessageType = getGlyphByMessageType;
 exports.getColorByMessageType = getColorByMessageType;
+exports.getCSSColorByMessageType = getCSSColorByMessageType;
 exports.getStyleForStatusColour = getStyleForStatusColour;
 exports.getStyleForMessageType = getStyleForMessageType;
 exports.getGlyphForStatusColour = getGlyphForStatusColour;
@@ -234,6 +235,20 @@ function getColorByMessageType(messageType) {
             return 'var(--ab-color-info)';
     }
 }
+function getCSSColorByMessageType(messageType) {
+    switch (messageType) {
+        case 'Error':
+            return 'error';
+        case 'Warning':
+            return 'warn';
+        case 'Success':
+            return 'success';
+        case 'Info':
+            return 'info';
+        default:
+            return '';
+    }
+}
 function getStyleForStatusColour(statusColour) {
     let result;
     switch (statusColour) {
@@ -481,6 +496,7 @@ exports.UIHelper = {
     getGlyphForMessageType,
     getStyleForMessageType,
     getMessageTypeFromAdaptableAlerts,
+    getCSSColorByMessageType,
     getButtonColourForAdaptableAlerts,
     getButtonTextColourForArrayandMessageType,
     getButtonTextColourForMessageType,

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -257,10 +257,10 @@ export declare class AdaptableAgGrid implements IAdaptable {
         added: IRowNode[];
         updated: IRowNode[];
     }>;
-    applyGridDataTransaction(dataTransaction: {
+    manageGridRows(dataRows: {
         add?: any[];
         update?: any[];
-        remove?: any[];
+        delete?: any[];
     }, config?: DataUpdateConfig): Promise<{
         addedRows: IRowNode[];
         updatedRows: IRowNode[];

package/src/agGrid/AdaptableAgGrid.js

@@ -2471,18 +2471,18 @@ You need to define at least one Layout!`);
             });
         }
     }
-    async applyGridDataTransaction(dataTransaction, config = {}) {
+    async manageGridRows(dataRows, config = {}) {
         const result = {
             addedRows: [],
             updatedRows: [],
             removedRows: [],
         };
-        if (!dataTransaction) {
+        if (!dataRows) {
             return result;
         }
-        const addDataRows = dataTransaction.add;
-        const updateDataRows = dataTransaction.update;
-        const removeDataRows = dataTransaction.remove;
+        const addDataRows = dataRows.add;
+        const updateDataRows = dataRows.update;
+        const removeDataRows = dataRows.delete;
         if (this.hasAutogeneratedPrimaryKey) {
             this.addSyntheticPrimaryKeyIfMissing(addDataRows);
         }

package/src/agGrid/AgGridColumnAdapter.js

@@ -307,12 +307,10 @@ class AgGridColumnAdapter {
                 // see #header_text_align
                 const formatColumnWithTextAlignment = this.getRelevantFormatColumnHeaderStyles(abColumn)
                     // we take the first one only, even if multiple are defined
-                    .find((fc) => fc.CellAlignment != undefined);
+                    .find((fc) => fc.Style?.Alignment != undefined);
                 if (formatColumnWithTextAlignment) {
-                    baseHeaderClass = [
-                        ...baseHeaderClass,
-                        `ab-header__align-${formatColumnWithTextAlignment.CellAlignment.toLowerCase()}`,
-                    ];
+                    const alignment = formatColumnWithTextAlignment.Style.Alignment.toLowerCase();
+                    baseHeaderClass = [...baseHeaderClass, `ab-header__align-${alignment}`];
                 }
                 const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnWithStyleClassNameForColumn(abColumn, {
                     target,
@@ -1268,19 +1266,6 @@ class AgGridColumnAdapter {
             const formatColumnStyle = formatColumn.Style
                 ? (0, StyleHelper_1.convertAdaptableStyleToCSS)(formatColumn.Style)
                 : {};
-            if (formatColumn.CellAlignment) {
-                switch (formatColumn.CellAlignment) {
-                    case 'Left':
-                        style.textAlign = 'left';
-                        break;
-                    case 'Right':
-                        style.textAlign = 'right';
-                        break;
-                    case 'Center':
-                        style.textAlign = 'center';
-                        break;
-                }
-            }
             return { ...style, ...formatColumnStyle };
         }, {});
     }

package/src/components/Dashboard/DashboardToolbar.js

@@ -12,5 +12,5 @@ function DashboardToolbar(props) {
         React.createElement(Flex_1.Flex, { className: "ab-Dashboard__toolbar-title twa:items-center twa:justify-center twa:px-2 twa:pb-1 twa:opacity-70", flexDirection: "row" },
             React.createElement("span", { className: "twa:text-2" }, props.title),
             props.showConfigure && (React.createElement(SimpleButton_1.default, { "aria-label": `Configure ${props.title}`, icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
-            props.showClose && (React.createElement(SimpleButton_1.default, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
+            props.showClose && (React.createElement(SimpleButton_1.default, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose?.() })))));
 }

package/src/components/ExpressionEditor/EditorInput.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const BaseEditorInput_1 = require("./BaseEditorInput");
 const editorButtonsSearch_1 = require("./editorButtonsSearch");
 const EditorContext_1 = require("./EditorContext");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const editorButtonsAggregatedScalar_1 = require("./editorButtonsAggregatedScalar");
 const aggregatedScalarExpressionFunctions_1 = require("../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions");
 const editorButtonsCumulativeAggregatedScalar_1 = require("./editorButtonsCumulativeAggregatedScalar");
@@ -52,8 +51,25 @@ function EditorInput(props) {
             };
     }, [props.type]);
     const { setSelectedFunction } = (0, EditorContext_1.useExpressionEditor)();
-    const queryName = `${StringExtensions_1.default.CapitaliseFirstLetter(props.type)}Query`;
-    return (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: props.value, placeholder: `Create ${queryName}`, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
+    let queryName;
+    switch (props.type) {
+        case 'boolean':
+            queryName = 'Create an Expression that returns true / false';
+            break;
+        case 'scalar':
+            queryName = "Create an Expression that returns a single value of any type";
+            break;
+        case 'aggregatedScalar':
+            queryName = "Create an Expression that evaluates multiple rows and returns a value of any type";
+            break;
+        case 'cumulativeAggregatedScalar':
+            queryName = "Create a Cumulative Expression";
+            break;
+        case 'quantileAggregatedScalar':
+            queryName = "Create a Quantile Expression";
+            break;
+    }
+    return (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: props.value, placeholder: queryName, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
             ? editorButtonsAggregatedScalar_1.editorButtonsAggregatedScalar
             : props.type === 'cumulativeAggregatedScalar'
                 ? editorButtonsCumulativeAggregatedScalar_1.editorButtonsCumulativeAggregatedScalar

package/src/components/Tree/TreeDropdown/index.js

@@ -254,7 +254,7 @@ function TreeDropdown(props) {
                     } }, children));
             } },
             React.createElement(FieldWrap_1.default, { style: props.fieldStyle, className: "twa:w-full" },
-                React.createElement(Input_1.default, { type: "text", readOnly: true, "data-name": "Select Values", placeholder: props.placeholder ?? 'Select a value', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
+                React.createElement(Input_1.default, { type: "text", readOnly: true, "data-name": "Select Values", "aria-expanded": visible, placeholder: props.placeholder ?? 'Select a value', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
                         if (!visible) {
                             setVisible(true);
                         }

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1769449948892 || Date.now(),
-    VERSION: "22.0.0-canary.2" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1770107080647 || Date.now(),
+    VERSION: "22.0.0-canary.3" || '--current-version--',
 };