@adaptabletools/adaptable-cjs 23.0.0-canary.6 → 23.0.0-canary.8

package/src/View/DataImport/DataImportWizard/sections/ColumnsSection.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const DropdownButton_1 = require("../../../../components/DropdownButton");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const icons_1 = require("../../../../components/icons");
 const InfiniteTable_1 = require("../../../../components/InfiniteTable");
@@ -66,27 +66,40 @@ const ColumnsSection = (props) => {
             abColumn: {
                 header: 'AdapTable Column',
                 render: (params) => {
-                    const availableColumns = allColumns
+                    console.log(params.data, allColumns);
+                    const columnItems = allColumns
                         .filter((c) => !props.columnsMap?.find((cm) => cm.abColumn === c.value))
-                        .map((col) => {
-                        return {
-                            ...col,
-                            onClick: () => {
-                                handleColumnMapChange({
-                                    ...params.data,
-                                    abColumn: col.value,
-                                    include: true,
-                                });
-                            },
-                        };
-                    });
-                    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { showClearButton: true, onClear: () => {
+                        .map((col) => ({
+                        label: col.label,
+                        onClick: () => {
                             handleColumnMapChange({
                                 ...params.data,
-                                abColumn: null,
-                                include: false,
+                                abColumn: col.value,
+                                include: true,
                             });
-                        }, className: "twa:w-full", columns: ['label'], items: availableColumns, children: params.data?.abColumn?.friendlyName ??
+                        },
+                    }));
+                    const items = params.data?.abColumn
+                        ? [
+                            {
+                                label: 'Clear',
+                                onClick: () => {
+                                    handleColumnMapChange({
+                                        ...params.data,
+                                        abColumn: null,
+                                        include: false,
+                                    });
+                                },
+                            },
+                            { separator: true },
+                            ...(columnItems.length
+                                ? columnItems
+                                : [{ label: 'No other columns available', disabled: true }]),
+                        ]
+                        : columnItems.length
+                            ? columnItems
+                            : [{ label: 'No other columns available', disabled: true }];
+                    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { className: "twa:w-full", items: items, children: params.data?.abColumn?.friendlyName ??
                             params.data?.abColumn?.columnId ??
                             'Select Column' }));
                 },
@@ -107,7 +120,7 @@ const ColumnsSection = (props) => {
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:text-error", children: ["No data has been imported. Go to the ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide data."] }) }));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:text-destructive", children: ["No data has been imported. Go to the ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide data."] }) }));
     }
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Map imported fields to AdapTable columns and choose which to include" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-3", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:h-full twa:min-h-[300px]", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Mapping" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Match each data field to an AdapTable column. The primary key column cannot be excluded." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field', children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { columnPinning: {
                                         valid: 'end',

package/src/View/DataImport/DataImportWizard/sections/DataPreview.js

@@ -36,7 +36,7 @@ const DataPreview = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
     if (!props.data) {
-        return ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { color: 'var(--ab-color-error)', children: ["No Data has been Imported. Go to ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide Data"] }));
+        return ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { color: 'var(--ab-color-destructive)', children: ["No Data has been Imported. Go to ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Upload" }), " step and provide Data"] }));
     }
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
     const columns = React.useMemo(() => {

package/src/View/DataSet/DataSetViewPanel.d.ts

@@ -10,8 +10,8 @@ interface DataSetViewPanelComponentState {
     CurrentDataSet: DataSet;
 }
 declare class DataSetViewPanelComponent extends React.Component<DataSetViewPanelComponentProps, DataSetViewPanelComponentState> {
-    getCurrentDataSet(): DataSet;
-    getDataSets(): DataSet[];
+    getCurrentDataSet(): DataSet<any>;
+    getDataSets(): DataSet<any>[];
     render(): React.JSX.Element;
     onSelectedDataSetChanged(dataSetName: string): void;
 }

package/src/View/Export/ExportDestinationPicker.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExportDestinationPicker = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const NewDropdownButton_1 = require("../../components/NewDropdownButton");
+const DropdownButton_1 = require("../../components/DropdownButton");
 const icons_1 = require("../../components/icons");
 const AdaptableContext_1 = require("../AdaptableContext");
 const ButtonExport_1 = require("../Components/Buttons/ButtonExport");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const ExportDestinationPicker = ({ reportName, reportFormat, viewType, }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const exportApi = adaptable.api.exportApi;
@@ -16,12 +15,12 @@ const ExportDestinationPicker = ({ reportName, reportFormat, viewType, }) => {
     };
     const supportedDestinations = exportApi.getSupportedExportDestinations(reportFormat);
     if (supportedDestinations.length === 0 || supportedDestinations.length === 1) {
-        return ((0, jsx_runtime_1.jsx)(ButtonExport_1.ButtonExport, { tooltip: 'Export Report', className: (0, clsx_1.default)(viewType !== 'StatusBar' ? '' : undefined, ''), onClick: () => handleExport(supportedDestinations[0]), disabled: reportName == undefined || reportFormat == undefined }));
+        return ((0, jsx_runtime_1.jsx)(ButtonExport_1.ButtonExport, { tooltip: 'Export Report', className: (0, utils_1.cn)(viewType !== 'StatusBar' ? '' : undefined, ''), onClick: () => handleExport(supportedDestinations[0]), disabled: reportName == undefined || reportFormat == undefined }));
     }
     const destinationItems = supportedDestinations.map((destination) => ({
         label: destination,
         onClick: () => handleExport(destination),
     }));
-    return ((0, jsx_runtime_1.jsx)(NewDropdownButton_1.NewDropdownButton, { "data-name": "report-export-selector", disabled: reportName == undefined || reportFormat == undefined, tooltip: "Export Report", variant: "text", items: destinationItems, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "export" }) }));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-name": "report-export-selector", disabled: reportName == undefined || reportFormat == undefined, tooltip: "Export Report", variant: "text", items: destinationItems, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "export" }) }));
 };
 exports.ExportDestinationPicker = ExportDestinationPicker;

package/src/View/Export/ExportSchedulesTab.js

@@ -9,7 +9,7 @@ const ExportRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/Ex
 const formatScheduledReportSummary_1 = require("../../Strategy/Utilities/Export/formatScheduledReportSummary");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableObjectList_1 = require("../Components/AdaptableObjectList/AdaptableObjectList");
-const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
+const objectListActionButtonStyles_1 = require("../Components/AdaptableObjectList/objectListActionButtonStyles");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const EmptyContent_1 = tslib_1.__importDefault(require("../../components/EmptyContent"));
 const ScheduledReportWizard_1 = require("./Wizard/ScheduledReportWizard");
@@ -53,7 +53,6 @@ const ExportScheduleListItem = (props) => {
                 values: [(0, formatScheduledReportSummary_1.formatScheduledReportSummary)(reportSchedule)],
             },
         ], actions: [
-            (0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { accessLevel: accessLevel, onClick: props.onEdit, tooltip: "Edit Schedule" }, "edit"),
-            (0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { accessLevel: accessLevel, tooltip: "Delete Schedule", ConfirmationTitle: "Delete Schedule", ConfirmationMsg: "Are you sure you want to delete this schedule?", ConfirmAction: ExportRedux.ScheduledReportDelete(reportSchedule) }, "delete"),
-        ], suspendedEnabled: true, onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend }));
+            (0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { accessLevel: accessLevel, onClick: props.onEdit, tooltip: "Edit Schedule", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('edit') }, "edit"),
+        ], deleteAction: ExportRedux.ScheduledReportDelete(reportSchedule), deleteConfirmationMsg: "Are you sure you want to delete this schedule?", suspendedEnabled: true, onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend }));
 };

package/src/View/Export/ExportViewPanel.js

@@ -19,7 +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 utils_1 = require("../../lib/utils");
 const ExportViewPanel = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const exportApi = props.api.exportApi;
@@ -38,7 +38,7 @@ const ExportViewPanel = (props) => {
         : 'Are you sure you want to delete this report?';
     const isToolbar = props.viewType === 'Toolbar';
     const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)(`ab-${elementType}__CellSummary__wrap twa:gap-1 twa:flex-row`, {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, utils_1.cn)(`ab-${elementType}__CellSummary__wrap twa:gap-1 twa:flex-row`, {
             'twa:min-w-[486px] twa:flex-nowrap': isToolbar,
             'twa:flex-1 twa:flex-wrap': !isToolbar,
         }), children: [(0, jsx_runtime_1.jsx)(ReportNameSelector_1.ReportNameSelector, { viewType: props.viewType, reportName: currentReportName, userReports: userReports, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }), (0, jsx_runtime_1.jsx)(ReportFormatSelector_1.ReportFormatSelector, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, join_1.default)(accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY

package/src/View/Export/Wizard/ReportColumnsWizardSection.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Report } from '../../../AdaptableState/ExportState';
+import { AdaptableApi } from '../../../types';
 export type ReportColumnsWizardSectionProps = {
     onChange: (data: Report) => void;
 };
 export declare const isValidReportColumnsScope: (report: Report) => true | "Column scope is not defined";
-export declare const renderReportColumnsSummary: (report: Report) => React.JSX.Element;
+export declare const renderReportColumnsSummary: (report: Report, api: AdaptableApi) => React.ReactNode;
 export declare const ReportColumnsWizardSection: (props: ReportColumnsWizardSectionProps) => React.JSX.Element;

package/src/View/Export/Wizard/ReportColumnsWizardSection.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportColumnsWizardSection = exports.renderReportColumnsSummary = exports.isValidReportColumnsScope = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const getExportColumnsViewItems_1 = require("../../../Strategy/Utilities/Export/getExportColumnsViewItems");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
@@ -14,13 +15,7 @@ const isValidReportColumnsScope = (report) => {
     return true;
 };
 exports.isValidReportColumnsScope = isValidReportColumnsScope;
-const renderReportColumnsSummary = (report) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: [report.ReportColumnScope === 'AllColumns' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "all Columns" }), " in the Report"] })) : null, report.ReportColumnScope === 'VisibleColumns' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "only visible Columns" }), " in the Report"] })) : null, report.ReportColumnScope === 'ScopeColumns' ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, NewScopeComponent_1.renderScopeSummary)(report.Scope, {
-                    scopeColumns: 'Report Columns',
-                    scopeWholeRow: 'not available',
-                    scopeDataTypes: 'Report will include columns with the following types',
-                }) })) : null] }));
-};
+const renderReportColumnsSummary = (report, api) => (0, getExportColumnsViewItems_1.renderExportColumnsView)(report, api);
 exports.renderReportColumnsSummary = renderReportColumnsSummary;
 const ReportColumnsWizardSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();

package/src/View/Export/Wizard/ReportRowsWizardSection.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Report } from '../../../AdaptableState/ExportState';
+import { AdaptableApi } from '../../../types';
 export type ReportRowsWizardSectionProps = {
     onChange: (data: Report) => void;
 };
 export declare const isValidReportRowsQuery: (report: Report) => true | "Rows query cannot be empty";
-export declare const renderReportRowsSummary: (report: Report) => React.JSX.Element;
+export declare const renderReportRowsSummary: (report: Report, api: AdaptableApi) => React.ReactNode;
 export declare const ReportRowsWizardSection: (props: ReportRowsWizardSectionProps) => React.JSX.Element;

package/src/View/Export/Wizard/ReportRowsWizardSection.js

@@ -4,8 +4,7 @@ exports.ReportRowsWizardSection = exports.renderReportRowsSummary = exports.isVa
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
-const ExpressionPreview_1 = require("../../../components/ExpressionEditor/ExpressionPreview");
-const Tag_1 = require("../../../components/Tag");
+const getExportRowsViewItems_1 = require("../../../Strategy/Utilities/Export/getExportRowsViewItems");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
@@ -17,9 +16,7 @@ const isValidReportRowsQuery = (report) => {
     return true;
 };
 exports.isValidReportRowsQuery = isValidReportRowsQuery;
-const renderReportRowsSummary = (report) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: [report.ReportRowScope === 'AllRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "all Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'VisibleRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include ", (0, jsx_runtime_1.jsx)("b", { children: "only visible Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'ExpressionRows' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Include Rows matching the query:", ' ', (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, jsx_runtime_1.jsx)(ExpressionPreview_1.ExpressionPreview, { query: report.Query }) })] })) : null] }));
-};
+const renderReportRowsSummary = (report, api) => (0, getExportRowsViewItems_1.renderExportRowsView)(report, api);
 exports.renderReportRowsSummary = renderReportRowsSummary;
 const ReportRowsWizardSection = (props) => {
     const { api, data, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();

package/src/View/Filter/FilterViewPanel.js

@@ -32,7 +32,7 @@ class FilterViewPanelComponent extends React.Component {
                 this.props.api.filterApi.columnFilterApi.unSuspendAllColumnFilters();
             }
         };
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [(0, jsx_runtime_1.jsx)(ActiveFiltersPanel_1.ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), (0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY ||
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [(0, jsx_runtime_1.jsx)(ActiveFiltersPanel_1.ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), (0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: "neutral", variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'resume', accessLevel: this.props.accessLevel })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY ||
                             this.props.api.layoutApi.isCurrentLayoutPivot(), checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                             checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
                         }, children: "Filter Bar" })) })] }));

package/src/View/FlashingCell/FlashingCellStyle.d.ts

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { HTMLProps } from 'react';
 import { FlashingCellDefinition } from '../../types';
 import { FlexProps } from '../../components/Flex';
-export interface FlashingCellStyleProps extends Omit<FlexProps, 'data'> {
+export declare const FLASHING_CELL_STYLE_PREVIEW_CLASS = "twa:!mt-0 twa:w-[5.5rem] twa:max-w-[5.5rem] twa:shrink-0 twa:!px-1.5 twa:!py-1 twa:text-2 twa:truncate";
+export interface FlashingCellStyleProps extends Omit<HTMLProps<HTMLDivElement> & FlexProps, 'data'> {
     data: FlashingCellDefinition;
+    className?: string;
 }
 export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;

package/src/View/FlashingCell/FlashingCellStyle.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlashingCellStyle = void 0;
+exports.FlashingCellStyle = exports.FLASHING_CELL_STYLE_PREVIEW_CLASS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StylePreview_1 = require("../../components/StylePreview");
 const Flex_1 = require("../../components/Flex");
+const utils_1 = require("../../lib/utils");
+exports.FLASHING_CELL_STYLE_PREVIEW_CLASS = 'twa:!mt-0 twa:w-[5.5rem] twa:max-w-[5.5rem] twa:shrink-0 twa:!px-1.5 twa:!py-1 twa:text-2 twa:truncate';
 const FlashingCellStyle = (props) => {
-    const { data, ...boxProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", ...boxProps, children: [(0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "up-style", styleObject: props.data.UpChangeStyle, className: "twa:mr-1 twa:flex-1", children: ["Up ", !props.data.UpChangeStyle ? ' - no style' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "down-style", className: "twa:mr-1 twa:flex-1", styleObject: props.data.DownChangeStyle, children: ["Down", !props.data.DownChangeStyle ? ' - no style' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "neutral-style", className: "twa:flex-1", styleObject: props.data.NeutralChangeStyle, children: ["Neutral ", !props.data.NeutralChangeStyle ? ' - no style' : ''] })] }));
+    const { data, className, ...flexProps } = props;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "stretch", className: (0, utils_1.cn)('twa:gap-1 twa:min-w-0', className), ...flexProps, children: [(0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "up-style", styleObject: data.UpChangeStyle, className: exports.FLASHING_CELL_STYLE_PREVIEW_CLASS, children: ["Up", !data.UpChangeStyle ? ' - none' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "down-style", styleObject: data.DownChangeStyle, className: exports.FLASHING_CELL_STYLE_PREVIEW_CLASS, children: ["Down", !data.DownChangeStyle ? ' - none' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { "data-value": "neutral-style", styleObject: data.NeutralChangeStyle, className: exports.FLASHING_CELL_STYLE_PREVIEW_CLASS, children: ["Neutral", !data.NeutralChangeStyle ? ' - none' : ''] })] }));
 };
 exports.FlashingCellStyle = FlashingCellStyle;

package/src/View/FlashingCell/Wizard/FlashingCellRulesWizardSection.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { FlashingCellDefinition } from '../../../AdaptableState/FlashingCellState';
+import { AdaptableApi } from '../../../types';
 export interface FlashingAlertRulesWizardSectionProps {
     onChange: (data: FlashingCellDefinition) => void;
 }
-export declare const renderFlashingAlertRulesSummary: (flashingAlert: FlashingCellDefinition) => React.JSX.Element;
+export declare const renderFlashingAlertRulesSummary: (flashingAlert: FlashingCellDefinition, api: AdaptableApi) => React.JSX.Element;
 export declare const FlashingAlertRulesWizardSection: (props: FlashingAlertRulesWizardSectionProps) => React.JSX.Element;

package/src/View/FlashingCell/Wizard/FlashingCellRulesWizardSection.js

@@ -3,18 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashingAlertRulesWizardSection = exports.renderFlashingAlertRulesSummary = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const CodeBlock_1 = require("../../../components/CodeBlock");
 const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
-const renderFlashingAlertRulesSummary = (flashingAlert) => {
-    const { api: { flashingCellApi }, } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const FlashTarget = flashingAlert.FlashTarget ?? flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
-    return ((0, jsx_runtime_1.jsx)(EntityRulesEditor_1.EntityRulesSummary, { data: flashingAlert, renderPredicate: (content) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Flash ", (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: FlashTarget }), " - value condition", ' ', (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: content })] }));
-        }, renderQueryExpression: (content) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Flash ", (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: FlashTarget }), " when", ' ', (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(CodeBlock_1.CodeBlock, { children: content }) })] }));
-        } }));
+const getRuleViewItems_1 = require("../../../Utilities/getRuleViewItems");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
+const renderFlashingAlertRulesSummary = (flashingAlert, api) => {
+    const { values } = (0, getRuleViewItems_1.getRuleViewItems)(flashingAlert.Rule, api);
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(values ?? ['No condition']);
 };
 exports.renderFlashingAlertRulesSummary = renderFlashingAlertRulesSummary;
 const FlashingAlertRulesWizardSection = (props) => {

package/src/View/FlashingCell/Wizard/FlashingCellScopeSummary.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FlashingCellDefinition } from '../../../../types';
+export declare const FlashingCellScopeSummaryContent: React.FC<{
+    scope: import("../../../../types").ColumnScope;
+}>;
+export declare const FlashingCellScopeSummaryView: React.FunctionComponent<{
+    data: FlashingCellDefinition;
+}>;
+export declare const renderFlashingCellScopeSummary: (flashingCell: FlashingCellDefinition) => React.JSX.Element;

package/src/View/FlashingCell/Wizard/FlashingCellScopeSummary.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderFlashingCellScopeSummary = exports.FlashingCellScopeSummaryView = exports.FlashingCellScopeSummaryContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const scopeSummaryTags_1 = require("../../Wizard/scopeSummaryTags");
+exports.FlashingCellScopeSummaryContent = scopeSummaryTags_1.ScopeSummaryTags;
+const FlashingCellScopeSummaryView = ({ data }) => (0, jsx_runtime_1.jsx)(scopeSummaryTags_1.ScopeSummaryTags, { scope: data.Scope });
+exports.FlashingCellScopeSummaryView = FlashingCellScopeSummaryView;
+const renderFlashingCellScopeSummary = (flashingCell) => ((0, jsx_runtime_1.jsx)(scopeSummaryTags_1.ScopeSummaryTags, { scope: flashingCell.Scope }));
+exports.renderFlashingCellScopeSummary = renderFlashingCellScopeSummary;

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.d.ts

@@ -3,4 +3,4 @@ type FlashingAlertScopeWizardSectionProps = {
     onChange: (data: any) => void;
 };
 export declare const FlashingAlertScopeWizardSection: (props: FlashingAlertScopeWizardSectionProps) => React.JSX.Element;
-export {};
+export { FlashingCellScopeSummaryContent, FlashingCellScopeSummaryView, renderFlashingCellScopeSummary, } from './FlashingCellScopeSummary';

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlashingAlertScopeWizardSection = void 0;
+exports.renderFlashingCellScopeSummary = exports.FlashingCellScopeSummaryView = exports.FlashingCellScopeSummaryContent = exports.FlashingAlertScopeWizardSection = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -34,3 +34,7 @@ const FlashingAlertScopeWizardSection = (props) => {
                     } }) })] }));
 };
 exports.FlashingAlertScopeWizardSection = FlashingAlertScopeWizardSection;
+var FlashingCellScopeSummary_1 = require("./FlashingCellScopeSummary");
+Object.defineProperty(exports, "FlashingCellScopeSummaryContent", { enumerable: true, get: function () { return FlashingCellScopeSummary_1.FlashingCellScopeSummaryContent; } });
+Object.defineProperty(exports, "FlashingCellScopeSummaryView", { enumerable: true, get: function () { return FlashingCellScopeSummary_1.FlashingCellScopeSummaryView; } });
+Object.defineProperty(exports, "renderFlashingCellScopeSummary", { enumerable: true, get: function () { return FlashingCellScopeSummary_1.renderFlashingCellScopeSummary; } });

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.d.ts

@@ -1,15 +1,10 @@
 import * as React from 'react';
 import { AdaptableStyle } from '../../../types';
 import { FlashingCellDefinition } from '../../../../types';
-import { BoxProps } from '../../../components/Flex';
 type FlashingAlertStyleWizardSectionProps = {
     flashingAlert?: FlashingCellDefinition;
     onStyleChange: (styleName: 'UpChangeStyle' | 'DownChangeStyle' | 'NeutralChangeStyle', style: AdaptableStyle) => void;
 };
 export declare const FlashingAlertStyleWizardSection: (props: FlashingAlertStyleWizardSectionProps) => React.JSX.Element;
-export interface FlashingCellStyleProps extends Omit<BoxProps & {}, 'data'> {
-    data: FlashingCellDefinition;
-}
-export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;
 export declare const renderFlashingAlertStyleSummary: (flashingAlert: FlashingCellDefinition) => React.JSX.Element;
 export {};

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderFlashingAlertStyleSummary = exports.FlashingCellStyle = exports.FlashingAlertStyleWizardSection = void 0;
+exports.renderFlashingAlertStyleSummary = exports.FlashingAlertStyleWizardSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const StyleComponent_1 = require("../../Components/StyleComponent");
-const StylePreview_1 = require("../../../components/StylePreview");
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
+const FlashingCellStyle_1 = require("../FlashingCellStyle");
 const FLASH_STYLE_CARDS = [
     {
         key: 'UpChangeStyle',
@@ -30,12 +30,7 @@ const FlashingAlertStyleWizardSection = (props) => {
     return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: FLASH_STYLE_CARDS.map(({ key, title, description }) => ((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: title }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: description })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert[key] ?? {}, UpdateStyle: (style) => props.onStyleChange(key, style) }) })] }, key))) }));
 };
 exports.FlashingAlertStyleWizardSection = FlashingAlertStyleWizardSection;
-const FlashingCellStyle = (props) => {
-    const { data, ...boxProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...boxProps, children: [(0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { styleObject: props.data.UpChangeStyle, children: ["Up change style ", !props.data.UpChangeStyle ? ' - no style' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { styleObject: props.data.DownChangeStyle, className: "twa:mt-2", children: ["Down change style ", !props.data.DownChangeStyle ? ' - no style' : ''] }), (0, jsx_runtime_1.jsxs)(StylePreview_1.StylePreview, { styleObject: props.data.NeutralChangeStyle, className: "twa:mt-2", children: ["Neutral change style ", !props.data.NeutralChangeStyle ? ' - no style' : ''] })] }));
-};
-exports.FlashingCellStyle = FlashingCellStyle;
 const renderFlashingAlertStyleSummary = (flashingAlert) => {
-    return (0, jsx_runtime_1.jsx)(exports.FlashingCellStyle, { data: flashingAlert });
+    return (0, jsx_runtime_1.jsx)(FlashingCellStyle_1.FlashingCellStyle, { data: flashingAlert });
 };
 exports.renderFlashingAlertStyleSummary = renderFlashingAlertStyleSummary;

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -10,7 +10,6 @@ const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const FlashingCellRulesWizardSection_1 = require("./FlashingCellRulesWizardSection");
 const FlashingCellStyleWizardSection_1 = require("./FlashingCellStyleWizardSection");
 const FlashingCellScopeWizardSection_1 = require("./FlashingCellScopeWizardSection");
-const BaseAlertScopeWizardSection_1 = require("../../Alert/Wizard/BaseAlertScopeWizardSection");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
@@ -75,7 +74,7 @@ const FlashingCellWizard = (props) => {
                 details: 'Specify which data changes should trigger Cell Flashing',
                 isValid: NewScopeComponent_1.isScopeValid,
                 render: () => (0, jsx_runtime_1.jsx)(FlashingCellScopeWizardSection_1.FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
-                renderSummary: BaseAlertScopeWizardSection_1.renderScopeSummary,
+                renderSummary: FlashingCellScopeWizardSection_1.renderFlashingCellScopeSummary,
                 title: 'Columns',
             },
             {

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -16,7 +16,7 @@ type DisplayFormatSummaryItem = {
 };
 export declare const getFormatColumnDisplayFormatSummaryItems: (data: FormatColumn) => DisplayFormatSummaryItem[];
 export declare const hasFormatColumnDisplayFormat: (data: FormatColumn) => boolean;
-export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
+export declare const getFormatColumnFormatSummaryTagValues: (data: FormatColumn) => string[];
 export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => React.JSX.Element;
 export declare const getFormatDisplayTypeForScope: (scope: ColumnScope, api: AdaptableApi) => "number" | "date" | "text" | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => React.JSX.Element;