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

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { CheckBox } from '../../../../components/CheckBox';
-import DropdownButton from '../../../../components/DropdownButton';
+import { NewDropdownButton, } from '../../../../components/DropdownButton';
 import HelpBlock from '../../../../components/HelpBlock';
 import { Icon } from '../../../../components/icons';
 import { DataSource, InfiniteTableGrid, } from '../../../../components/InfiniteTable';
@@ -62,27 +62,40 @@ export 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 (_jsx(DropdownButton, { 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 (_jsx(NewDropdownButton, { className: "twa:w-full", items: items, children: params.data?.abColumn?.friendlyName ??
                             params.data?.abColumn?.columnId ??
                             'Select Column' }));
                 },
@@ -103,7 +116,7 @@ export const ColumnsSection = (props) => {
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return (_jsx(Box, { className: "twa:p-3", children: _jsxs(HelpBlock, { className: "twa:text-error", children: ["No data has been imported. Go to the ", _jsx(Tag, { children: "Upload" }), " step and provide data."] }) }));
+        return (_jsx(Box, { className: "twa:p-3", children: _jsxs(HelpBlock, { className: "twa:text-destructive", children: ["No data has been imported. Go to the ", _jsx(Tag, { children: "Upload" }), " step and provide data."] }) }));
     }
     return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Map imported fields to AdapTable columns and choose which to include" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-3", children: _jsxs(Card, { shadow: false, className: "twa:h-full twa:min-h-[300px]", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Mapping" }), _jsx(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." })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: _jsx(DataSource, { data: props.columnsMap, primaryKey: 'field', children: _jsx(InfiniteTableGrid, { columnPinning: {
                                         valid: 'end',

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

@@ -32,7 +32,7 @@ export const DataPreview = (props) => {
     const adaptable = useAdaptable();
     const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
     if (!props.data) {
-        return (_jsxs(HelpBlock, { color: 'var(--ab-color-error)', children: ["No Data has been Imported. Go to ", _jsx(Tag, { children: "Upload" }), " step and provide Data"] }));
+        return (_jsxs(HelpBlock, { color: 'var(--ab-color-destructive)', children: ["No Data has been Imported. Go to ", _jsx(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,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { NewDropdownButton } from '../../components/NewDropdownButton';
+import { NewDropdownButton } from '../../components/DropdownButton';
 import { Icon } from '../../components/icons';
 import { useAdaptable } from '../AdaptableContext';
 import { ButtonExport } from '../Components/Buttons/ButtonExport';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 export const ExportDestinationPicker = ({ reportName, reportFormat, viewType, }) => {
     const adaptable = useAdaptable();
     const exportApi = adaptable.api.exportApi;
@@ -12,7 +12,7 @@ export const ExportDestinationPicker = ({ reportName, reportFormat, viewType, })
     };
     const supportedDestinations = exportApi.getSupportedExportDestinations(reportFormat);
     if (supportedDestinations.length === 0 || supportedDestinations.length === 1) {
-        return (_jsx(ButtonExport, { tooltip: 'Export Report', className: clsx(viewType !== 'StatusBar' ? '' : undefined, ''), onClick: () => handleExport(supportedDestinations[0]), disabled: reportName == undefined || reportFormat == undefined }));
+        return (_jsx(ButtonExport, { tooltip: 'Export Report', className: cn(viewType !== 'StatusBar' ? '' : undefined, ''), onClick: () => handleExport(supportedDestinations[0]), disabled: reportName == undefined || reportFormat == undefined }));
     }
     const destinationItems = supportedDestinations.map((destination) => ({
         label: destination,

package/src/View/Export/ExportSchedulesTab.js

@@ -5,7 +5,7 @@ import * as ExportRedux from '../../Redux/ActionsReducers/ExportRedux';
 import { formatScheduledReportSummary } from '../../Strategy/Utilities/Export/formatScheduledReportSummary';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableObjectListItemView } from '../Components/AdaptableObjectList/AdaptableObjectList';
-import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
+import { objectListActionButtonClassName } from '../Components/AdaptableObjectList/objectListActionButtonStyles';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
 import EmptyContent from '../../components/EmptyContent';
 import { ScheduledReportWizard } from './Wizard/ScheduledReportWizard';
@@ -48,7 +48,6 @@ const ExportScheduleListItem = (props) => {
                 values: [formatScheduledReportSummary(reportSchedule)],
             },
         ], actions: [
-            _jsx(ButtonEdit, { accessLevel: accessLevel, onClick: props.onEdit, tooltip: "Edit Schedule" }, "edit"),
-            _jsx(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 }));
+            _jsx(ButtonEdit, { accessLevel: accessLevel, onClick: props.onEdit, tooltip: "Edit Schedule", className: 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

@@ -15,7 +15,7 @@ import { ReportNameSelector } from './ReportNameSelector';
 import { ReportFormatSelector } from './ReportFormatSelector';
 import { ExportDestinationPicker } from './ExportDestinationPicker';
 import { Flex } from '../../components/Flex';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 export const ExportViewPanel = (props) => {
     const dispatch = useDispatch();
     const exportApi = props.api.exportApi;
@@ -34,7 +34,7 @@ export const ExportViewPanel = (props) => {
         : 'Are you sure you want to delete this report?';
     const isToolbar = props.viewType === 'Toolbar';
     const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
-    return (_jsxs(Flex, { flexDirection: "row", className: clsx(`ab-${elementType}__CellSummary__wrap twa:gap-1 twa:flex-row`, {
+    return (_jsxs(Flex, { flexDirection: "row", className: 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: [_jsx(ReportNameSelector, { viewType: props.viewType, reportName: currentReportName, userReports: userReports, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }), _jsx(ReportFormatSelector, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) }), _jsxs(Flex, { className: join(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

@@ -1,5 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NewScopeComponent } from '../../Components/NewScopeComponent';
+import { renderExportColumnsView } from '../../../Strategy/Utilities/Export/getExportColumnsViewItems';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
@@ -10,13 +11,7 @@ export const isValidReportColumnsScope = (report) => {
     }
     return true;
 };
-export const renderReportColumnsSummary = (report) => {
-    return (_jsxs(Box, { className: "twa:text-2", children: [report.ReportColumnScope === 'AllColumns' ? (_jsxs(_Fragment, { children: ["Include ", _jsx("b", { children: "all Columns" }), " in the Report"] })) : null, report.ReportColumnScope === 'VisibleColumns' ? (_jsxs(_Fragment, { children: ["Include ", _jsx("b", { children: "only visible Columns" }), " in the Report"] })) : null, report.ReportColumnScope === 'ScopeColumns' ? (_jsx(_Fragment, { children: renderScopeSummary(report.Scope, {
-                    scopeColumns: 'Report Columns',
-                    scopeWholeRow: 'not available',
-                    scopeDataTypes: 'Report will include columns with the following types',
-                }) })) : null] }));
-};
+export const renderReportColumnsSummary = (report, api) => renderExportColumnsView(report, api);
 export const ReportColumnsWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     const handleColumnScopeChange = (ReportColumnScope) => {

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

@@ -1,8 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { ExpressionEditor } from '../../../components/ExpressionEditor';
-import { ExpressionPreview } from '../../../components/ExpressionEditor/ExpressionPreview';
-import { Tag } from '../../../components/Tag';
+import { renderExportRowsView } from '../../../Strategy/Utilities/Export/getExportRowsViewItems';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
@@ -13,9 +12,7 @@ export const isValidReportRowsQuery = (report) => {
     }
     return true;
 };
-export const renderReportRowsSummary = (report) => {
-    return (_jsxs(Box, { className: "twa:text-2", children: [report.ReportRowScope === 'AllRows' ? (_jsxs(_Fragment, { children: ["Include ", _jsx("b", { children: "all Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'VisibleRows' ? (_jsxs(_Fragment, { children: ["Include ", _jsx("b", { children: "only visible Rows" }), " in the Report"] })) : null, report.ReportRowScope === 'ExpressionRows' ? (_jsxs(_Fragment, { children: ["Include Rows matching the query:", ' ', _jsx(Tag, { children: _jsx(ExpressionPreview, { query: report.Query }) })] })) : null] }));
-};
+export const renderReportRowsSummary = (report, api) => renderExportRowsView(report, api);
 export const ReportRowsWizardSection = (props) => {
     const { api, data, moduleInfo } = useOnePageAdaptableWizardContext();
     const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);

package/src/View/Filter/FilterViewPanel.js

@@ -28,7 +28,7 @@ class FilterViewPanelComponent extends React.Component {
                 this.props.api.filterApi.columnFilterApi.unSuspendAllColumnFilters();
             }
         };
-        return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsxs(Flex, { children: [ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (_jsx(AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [_jsx(ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), _jsx(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' }), _jsx(SimpleButton, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: join(`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 })] }), _jsx(Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (_jsx(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 === ACCESS_LEVEL_READ_ONLY ||
+        return (_jsxs(Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsxs(Flex, { children: [ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (_jsx(AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [_jsx(ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), _jsx(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' }), _jsx(SimpleButton, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: join(`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 })] }), _jsx(Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (_jsx(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 === 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,7 +1,9 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { StylePreview } from '../../components/StylePreview';
 import { Flex } from '../../components/Flex';
+import { cn } from '../../lib/utils';
+export 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 const FlashingCellStyle = (props) => {
-    const { data, ...boxProps } = props;
-    return (_jsxs(Flex, { flexDirection: "row", ...boxProps, children: [_jsxs(StylePreview, { "data-value": "up-style", styleObject: props.data.UpChangeStyle, className: "twa:mr-1 twa:flex-1", children: ["Up ", !props.data.UpChangeStyle ? ' - no style' : ''] }), _jsxs(StylePreview, { "data-value": "down-style", className: "twa:mr-1 twa:flex-1", styleObject: props.data.DownChangeStyle, children: ["Down", !props.data.DownChangeStyle ? ' - no style' : ''] }), _jsxs(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 (_jsxs(Flex, { flexDirection: "row", alignItems: "stretch", className: cn('twa:gap-1 twa:min-w-0', className), ...flexProps, children: [_jsxs(StylePreview, { "data-value": "up-style", styleObject: data.UpChangeStyle, className: FLASHING_CELL_STYLE_PREVIEW_CLASS, children: ["Up", !data.UpChangeStyle ? ' - none' : ''] }), _jsxs(StylePreview, { "data-value": "down-style", styleObject: data.DownChangeStyle, className: FLASHING_CELL_STYLE_PREVIEW_CLASS, children: ["Down", !data.DownChangeStyle ? ' - none' : ''] }), _jsxs(StylePreview, { "data-value": "neutral-style", styleObject: data.NeutralChangeStyle, className: FLASHING_CELL_STYLE_PREVIEW_CLASS, children: ["Neutral", !data.NeutralChangeStyle ? ' - none' : ''] })] }));
 };

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

@@ -1,17 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { CodeBlock } from '../../../components/CodeBlock';
-import { EntityRulesEditor, EntityRulesSummary } from '../../Components/EntityRulesEditor';
+import { EntityRulesEditor } from '../../Components/EntityRulesEditor';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
-export const renderFlashingAlertRulesSummary = (flashingAlert) => {
-    const { api: { flashingCellApi }, } = useOnePageAdaptableWizardContext();
-    const FlashTarget = flashingAlert.FlashTarget ?? flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
-    return (_jsx(EntityRulesSummary, { data: flashingAlert, renderPredicate: (content) => {
-            return (_jsxs(_Fragment, { children: ["Flash ", _jsx(CodeBlock, { children: FlashTarget }), " - value condition", ' ', _jsx(CodeBlock, { children: content })] }));
-        }, renderQueryExpression: (content) => {
-            return (_jsxs(_Fragment, { children: ["Flash ", _jsx(CodeBlock, { children: FlashTarget }), " when", ' ', _jsx("b", { children: _jsx(CodeBlock, { children: content }) })] }));
-        } }));
+import { getRuleViewItems } from '../../../Utilities/getRuleViewItems';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
+export const renderFlashingAlertRulesSummary = (flashingAlert, api) => {
+    const { values } = getRuleViewItems(flashingAlert.Rule, api);
+    return renderSummaryStringTags(values ?? ['No condition']);
 };
 export const FlashingAlertRulesWizardSection = (props) => {
     const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();

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,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScopeSummaryTags } from '../../Wizard/scopeSummaryTags';
+export const FlashingCellScopeSummaryContent = ScopeSummaryTags;
+export const FlashingCellScopeSummaryView = ({ data }) => _jsx(ScopeSummaryTags, { scope: data.Scope });
+export const renderFlashingCellScopeSummary = (flashingCell) => (_jsx(ScopeSummaryTags, { scope: flashingCell.Scope }));

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

@@ -29,3 +29,4 @@ export const FlashingAlertScopeWizardSection = (props) => {
                         props.onChange(newData);
                     } }) })] }));
 };
+export { FlashingCellScopeSummaryContent, FlashingCellScopeSummaryView, renderFlashingCellScopeSummary, } from './FlashingCellScopeSummary';

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,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { StyleComponent } from '../../Components/StyleComponent';
-import { StylePreview } from '../../../components/StylePreview';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
+import { FlashingCellStyle } from '../FlashingCellStyle';
 const FLASH_STYLE_CARDS = [
     {
         key: 'UpChangeStyle',
@@ -26,10 +26,6 @@ export const FlashingAlertStyleWizardSection = (props) => {
     flashingAlert = flashingAlert ?? props.flashingAlert;
     return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: FLASH_STYLE_CARDS.map(({ key, title, description }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: title }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: description })] }), _jsx(Card.Body, { children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert[key] ?? {}, UpdateStyle: (style) => props.onStyleChange(key, style) }) })] }, key))) }));
 };
-export const FlashingCellStyle = (props) => {
-    const { data, ...boxProps } = props;
-    return (_jsxs(Box, { ...boxProps, children: [_jsxs(StylePreview, { styleObject: props.data.UpChangeStyle, children: ["Up change style ", !props.data.UpChangeStyle ? ' - no style' : ''] }), _jsxs(StylePreview, { styleObject: props.data.DownChangeStyle, className: "twa:mt-2", children: ["Down change style ", !props.data.DownChangeStyle ? ' - no style' : ''] }), _jsxs(StylePreview, { styleObject: props.data.NeutralChangeStyle, className: "twa:mt-2", children: ["Neutral change style ", !props.data.NeutralChangeStyle ? ' - no style' : ''] })] }));
-};
 export const renderFlashingAlertStyleSummary = (flashingAlert) => {
     return _jsx(FlashingCellStyle, { data: flashingAlert });
 };

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

@@ -5,8 +5,7 @@ import { FlashingAlertSettingsWizardSection, renderFlashingAlertSettingsSummary,
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { FlashingAlertRulesWizardSection, renderFlashingAlertRulesSummary, } from './FlashingCellRulesWizardSection';
 import { FlashingAlertStyleWizardSection, renderFlashingAlertStyleSummary, } from './FlashingCellStyleWizardSection';
-import { FlashingAlertScopeWizardSection } from './FlashingCellScopeWizardSection';
-import { renderScopeSummary } from '../../Alert/Wizard/BaseAlertScopeWizardSection';
+import { FlashingAlertScopeWizardSection, renderFlashingCellScopeSummary } from './FlashingCellScopeWizardSection';
 import { useAdaptable } from '../../AdaptableContext';
 import { isScopeValid } from '../../Components/NewScopeComponent';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
@@ -71,7 +70,7 @@ export const FlashingCellWizard = (props) => {
                 details: 'Specify which data changes should trigger Cell Flashing',
                 isValid: isScopeValid,
                 render: () => _jsx(FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
-                renderSummary: renderScopeSummary,
+                renderSummary: 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;