@adaptabletools/adaptable 23.0.0-canary.0 → 23.0.0-canary.10

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Radio from '../../../../../components/Radio/index';
-import { Tabs } from '../../../../../components/Tabs/index';
 import { ImportFileSection } from './UploadFileSection';
 import { ImportTextSection } from './UploadTextSection';
-import { Flex } from '../../../../../components/Flex';
+import { Box, Flex } from '../../../../../components/Flex';
+import { Card } from '../../../../../components/Card';
+import { TypeRadio } from '../../../../Wizard/TypeRadio';
 export const UploadSection = (props) => {
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: [_jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Import Type" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { onClick: () => props.onImportTypeChange('file'), checked: props.importType === 'file', children: "File" }), _jsx(Radio, { onClick: () => props.onImportTypeChange('text'), checked: props.importType === 'text', children: "Text" })] }) })] }), _jsxs(Tabs, { className: "twa:flex-1", children: [_jsx(Tabs.Tab, { children: props.importType === 'file' ? 'File Upload' : 'Text' }), _jsx(Tabs.Content, { children: props.importType === 'file' ? (_jsx(ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (_jsx(ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange })) })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Import Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to import from a file or pasted text" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: "File", description: "Upload a file in a supported format", checked: props.importType === 'file', onClick: () => props.onImportTypeChange('file') }), _jsx(TypeRadio, { text: "Text", description: "Paste CSV, JSON, or other supported text directly", checked: props.importType === 'text', onClick: () => props.onImportTypeChange('text') })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: props.importType === 'file' ? 'File Upload' : 'Paste Text' }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: props.importType === 'file'
+                                    ? 'Select or drag a file to load the data for import'
+                                    : 'Paste your data below — CSV or JSON is detected automatically' })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: props.importType === 'file' ? (_jsx(ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (_jsx(ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange })) })] })] }));
 };

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadTextSection.js

@@ -1,6 +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 HelpBlock from '../../../../../components/HelpBlock/index';
 import Textarea from '../../../../../components/Textarea/index';
+import { Flex } from '../../../../../components/Flex';
 export const ImportTextSection = (props) => {
-    return (_jsxs(_Fragment, { children: [_jsx(Textarea, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), className: "twa:h-full" }), props.message && _jsx(HelpBlock, { children: props.message })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-[200px]", children: [_jsx(Textarea, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), className: "twa:flex-1 twa:min-h-[200px]" }), props.message ? _jsx(HelpBlock, { className: "twa:mt-2", children: props.message }) : null] }));
 };

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

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckBox } from '../../../../components/CheckBox';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import { Tabs } from '../../../../components/Tabs';
 import { DataPreview } from './DataPreview';
-import { Flex } from '../../../../components/Flex';
-const getRowErrors = (errors, primaryKeyValue) => {
-    if (!errors) {
-        return null;
-    }
-    if (!errors[primaryKeyValue]) {
-        return null;
-    }
-    return errors[primaryKeyValue];
-};
+import { Box, Flex } from '../../../../components/Flex';
+import { Card } from '../../../../components/Card';
 export const ValidationSection = (props) => {
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: [_jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Import Options" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Exclude Invalid Rows", children: _jsx(CheckBox, { onChange: () => {
-                                        props.onSkipInvalidRowsChange(!props.skipInvalidRows);
-                                    }, checked: props.skipInvalidRows }) }) }) })] }), _jsxs(Tabs, { className: "twa:flex-1", children: [_jsx(Tabs.Tab, { children: "Preview" }), _jsx(Tabs.Content, { children: _jsx(DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange }) })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Import Options" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how rows that fail validation should be handled" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { onChange: () => {
+                                props.onSkipInvalidRowsChange(!props.skipInvalidRows);
+                            }, checked: props.skipInvalidRows, children: "Exclude invalid rows from import" }) })] }), _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Preview" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Review imported data and fix any validation errors before importing" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: _jsx(DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange }) })] })] }));
 };

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/ExportPopupWizardRouter.js

@@ -1,8 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { NewReportWizard } from './NewReportWizard';
 import { ScheduledReportWizard } from './ScheduledReportWizard';
-export const ExportPopupWizardRouter = (props) => {
+const isScheduledReportWizard = (props) => {
     if (props.popupParams?.action === 'NewSchedule') {
+        return true;
+    }
+    if (props.data != null && 'Schedule' in props.data) {
+        return true;
+    }
+    return props.abObjectType?.name === 'Schedule';
+};
+export const ExportPopupWizardRouter = (props) => {
+    if (isScheduledReportWizard(props)) {
         const scheduleProps = props;
         return _jsx(ScheduledReportWizard, { ...scheduleProps });
     }

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,45 +1,38 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Radio from '../../../components/Radio';
-import { Tabs } from '../../../components/Tabs';
-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';
+import { TypeRadio } from '../../Wizard/TypeRadio';
 export const isValidReportColumnsScope = (report) => {
     if (report.ReportColumnScope === 'ScopeColumns') {
         return report.Scope != null ? true : 'Column scope is not defined';
     }
     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 { api, data } = useOnePageAdaptableWizardContext();
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Tabs, { className: "twa:m-2", value: data.ReportColumnScope, onValueChange: (ReportColumnScope) => {
-                    const report = {
-                        ...data,
-                        ReportColumnScope,
-                    };
-                    if (report.ReportColumnScope !== 'ScopeColumns') {
-                        delete report.Scope;
-                    }
-                    else {
-                        if (!report.Scope) {
-                            report.Scope = {
-                                ColumnIds: [],
-                            };
-                        }
-                    }
-                    props.onChange(report);
-                }, children: [_jsx(Tabs.Tab, { value: "AllColumns", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportColumnScope == 'AllColumns', tabIndex: -1, children: "All Columns" }) }), _jsx(Tabs.Tab, { value: "VisibleColumns", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportColumnScope == 'VisibleColumns', tabIndex: -1, children: "Visible Columns" }) }), _jsx(Tabs.Tab, { value: "ScopeColumns", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportColumnScope == 'ScopeColumns', tabIndex: -1, children: "Bespoke Columns" }) }), _jsx(Tabs.Content, { value: "AllColumns", children: _jsx(Box, { className: "twa:p-2 twa:text-2", children: "All Columns in the datasource will be included in the Report, whether visible or not at time of export" }) }), _jsx(Tabs.Content, { value: "VisibleColumns", children: _jsx(Box, { className: "twa:p-2 twa:text-2", children: "Only Columns that are visible at the time the Report is exported will be included" }) }), _jsx(Tabs.Content, { value: "BespokeColumns", children: _jsx(Box, { className: "twa:p-2 twa:text-2", children: "Only selected Columns (which you will choose in the next step) will be exported - whether visible or not" }) })] }), data.ReportColumnScope === 'ScopeColumns' ? (_jsx(Box, { className: "twa:p-2 twa:flex-1 twa:overflow-auto", children: _jsx(NewScopeComponent, { hideWholeRow: true, isColumnAvailable: (column) => Boolean(column.exportable), descriptions: {
-                        rowScope: 'Apply Scope for: Row, or one or more Columns, or one or more Data Types',
-                        columnScope: 'Selected columns will be included in the report',
-                    }, scope: data.Scope, updateScope: (Scope) => {
-                        const report = { ...data, Scope };
-                        props.onChange(report);
-                    } }) })) : null] }));
+    const { data } = useOnePageAdaptableWizardContext();
+    const handleColumnScopeChange = (ReportColumnScope) => {
+        const report = {
+            ...data,
+            ReportColumnScope,
+        };
+        if (report.ReportColumnScope !== 'ScopeColumns') {
+            delete report.Scope;
+        }
+        else if (!report.Scope) {
+            report.Scope = {
+                ColumnIds: [],
+            };
+        }
+        props.onChange(report);
+    };
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3 twa:shrink-0", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which columns to include in the Report" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: "All Columns", description: "All columns in the datasource will be included, whether visible or not at time of export", checked: data.ReportColumnScope === 'AllColumns', onClick: () => handleColumnScopeChange('AllColumns') }), _jsx(TypeRadio, { text: "Visible Columns", description: "Only columns that are visible at the time the Report is exported will be included", checked: data.ReportColumnScope === 'VisibleColumns', onClick: () => handleColumnScopeChange('VisibleColumns') }), _jsx(TypeRadio, { text: "Bespoke Columns", description: "Only selected columns will be exported \u2014 whether visible or not", checked: data.ReportColumnScope === 'ScopeColumns', onClick: () => handleColumnScopeChange('ScopeColumns') })] }) })] }) }), data.ReportColumnScope === 'ScopeColumns' ? (_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", 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: "Column Selection" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Select the columns to include in the Report" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { hideWholeRow: true, isColumnAvailable: (column) => Boolean(column.exportable), descriptions: {
+                                rowScope: 'Apply Scope for: Row, or one or more Columns, or one or more Data Types',
+                                columnScope: 'Selected columns will be included in the report',
+                            }, scope: data.Scope, updateScope: (Scope) => {
+                                props.onChange({ ...data, Scope });
+                            } }) })] })) : null] }));
 };

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

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import ErrorBox from '../../../components/ErrorBox';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Input from '../../../components/Input';
 import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
 export const renderReportNameSummary = (report) => {
     return (_jsxs(Box, { className: "twa:text-2", children: [' ', "Report Name: ", _jsx(Tag, { children: report.Name })] }));
 };
@@ -21,13 +20,11 @@ export const isValidReportName = (report, api) => {
     return hasAlreadyExistingName ? 'A Report already exists with that name' : true;
 };
 export const ReportNameWizardSection = (props) => {
-    const { api, data } = useOnePageAdaptableWizardContext();
-    const validCheck = isValidReportName(data, api);
-    const ErrorMessage = validCheck === true ? null : validCheck;
-    return (_jsx(Box, { children: _jsxs(FormLayout, { columns: [1, 2], children: [_jsxs(FormRow, { children: [_jsx(Box, { className: "twa:mr-2", children: "Name:" }), _jsx(Input, { "data-name": "export-name", className: "twa:w-full", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
-                                props.onChange({
-                                    ...data,
-                                    Name: e.target.value,
-                                });
-                            } })] }), _jsxs(FormRow, { children: [_jsx(_Fragment, {}), ErrorMessage ? _jsx(ErrorBox, { children: ErrorMessage }) : null] })] }) }));
+    const { data } = useOnePageAdaptableWizardContext();
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Report" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "export-name", className: "twa:max-w-[300px] twa:w-full", type: "text", autoFocus: true, placeholder: "Enter Name", value: data.Name, onChange: (e) => {
+                            props.onChange({
+                                ...data,
+                                Name: e.target.value,
+                            });
+                        } }) })] }) }));
 };

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,47 +1,42 @@
-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 Radio from '../../../components/Radio';
-import { Tabs } from '../../../components/Tabs';
-import { Tag } from '../../../components/Tag';
+import { renderExportRowsView } from '../../../Strategy/Utilities/Export/getExportRowsViewItems';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
+import { TypeRadio } from '../../Wizard/TypeRadio';
 export const isValidReportRowsQuery = (report) => {
     if (report.ReportRowScope === 'ExpressionRows' && !report.Query?.BooleanExpression) {
         return 'Rows query cannot be empty';
     }
     return true;
 };
-export const renderReportRowsSummary = (report) => {
-    const { api } = useOnePageAdaptableWizardContext();
-    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(), []);
-    return (_jsx(_Fragment, { children: _jsxs(Tabs, { className: "twa:m-2", value: data.ReportRowScope, onValueChange: (ReportRowScope) => {
-                const report = {
-                    ...data,
-                    ReportRowScope,
-                };
-                if (report.ReportRowScope !== 'ExpressionRows') {
-                    delete report.Query;
-                }
-                else {
-                    if (!report.Query) {
-                        report.Query = {
-                            BooleanExpression: '',
-                        };
-                    }
-                }
-                props.onChange(report);
-            }, children: [_jsx(Tabs.Tab, { value: "AllRows", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportRowScope == 'AllRows', tabIndex: -1, children: "All Rows" }) }), _jsx(Tabs.Tab, { value: "VisibleRows", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportRowScope == 'VisibleRows', tabIndex: -1, children: "Visible Rows" }) }), _jsx(Tabs.Tab, { value: "ExpressionRows", children: _jsx(Radio, { className: "twa:m-0", checked: data.ReportRowScope == 'ExpressionRows', tabIndex: -1, children: "By Query" }) }), _jsx(Tabs.Content, { value: "AllRows", children: _jsx(Box, { className: "twa:p-2 twa:text-2", children: "All Rows in the datasource will be included in the report, whether visible or not at time of export." }) }), _jsx(Tabs.Content, { value: "VisibleRows", children: _jsx(Box, { className: "twa:p-2 twa:text-2", children: "Only Rows that are visible at the time the Report is exported will be included in the Export" }) }), _jsxs(Tabs.Content, { value: "ExpressionRows", children: [_jsx(Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: "Only the Rows which match the Query will be exported - whether visible or not." }), _jsx(ExpressionEditor, { allowSaveNamedQuery: true, type: 'boolean', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query?.BooleanExpression ?? '', onChange: (BooleanExpression) => {
+    const handleRowScopeChange = (ReportRowScope) => {
+        const report = {
+            ...data,
+            ReportRowScope,
+        };
+        if (report.ReportRowScope !== 'ExpressionRows') {
+            delete report.Query;
+        }
+        else if (!report.Query) {
+            report.Query = {
+                BooleanExpression: '',
+            };
+        }
+        props.onChange(report);
+    };
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which rows to include in the Report" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: "All Rows", description: "All rows in the datasource will be included, whether visible or not at time of export", checked: data.ReportRowScope === 'AllRows', onClick: () => handleRowScopeChange('AllRows') }), _jsx(TypeRadio, { text: "Visible Rows", description: "Only rows that are visible at the time the Report is exported will be included", checked: data.ReportRowScope === 'VisibleRows', onClick: () => handleRowScopeChange('VisibleRows') }), _jsx(TypeRadio, { text: "By Query", description: "Only rows matching the query will be exported \u2014 whether visible or not", checked: data.ReportRowScope === 'ExpressionRows', onClick: () => handleRowScopeChange('ExpressionRows') })] }) })] }), data.ReportRowScope === 'ExpressionRows' ? (_jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Query" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Build a boolean expression to filter which rows are included" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: _jsx(ExpressionEditor, { allowSaveNamedQuery: true, type: 'boolean', module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Query?.BooleanExpression ?? '', onChange: (BooleanExpression) => {
                                 props.onChange({
                                     ...data,
                                     Query: {
                                         BooleanExpression,
                                     },
                                 });
-                            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })] })] }) }));
+                            }, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })] })) : null] }));
 };

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

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { ExportDestinationType } from '../../../AdaptableOptions/ExportOptions';
-import { ReportFormatType, ReportSchedule } from '../../../AdaptableState/ExportState';
+import { ReportFormatType, ReportNameType, ReportSchedule } from '../../../AdaptableState/ExportState';
 interface ScheduledReportSettingsProps {
     reportSchedule: ReportSchedule;
     onChange: (reportSchedule: ReportSchedule) => void;
     allFormats: ReportFormatType[];
     allDestinations: ExportDestinationType[];
+    /** When set, the user picks which report this schedule exports (Export popup → New Schedule). */
+    allReportNames?: ReportNameType[];
+    /** When set, the report is fixed (schedule created from a specific report). */
+    fixedReportName?: ReportNameType;
 }
 export declare const ScheduledReportSettings: React.FunctionComponent<ScheduledReportSettingsProps>;
 export {};

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Input from '../../../components/Input';
-import { Tabs } from '../../../components/Tabs';
-import { Box } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/NewSelect';
+import { Card } from '../../../components/Card';
+import { Tag } from '../../../components/Tag';
 export const ScheduledReportSettings = (props) => {
     const handleNameChange = (event) => {
         props.onChange({
@@ -19,11 +19,18 @@ export const ScheduledReportSettings = (props) => {
         label: destination,
         value: destination,
     }));
-    return (_jsx(Box, { "data-name": "scheduled-report-settings", children: _jsxs(Tabs, { autoFocus: false, className: "twa:mb-3", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Name", children: _jsx(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reportSchedule?.Name ?? '' }) }), _jsx(FormRow, { label: "Format", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "select-format", items: formatOptions, value: props.reportSchedule?.ReportFormat, placeholder: "Select Format", onValueChange: (value) => props.onChange({
-                                            ...props.reportSchedule,
-                                            ReportFormat: value,
-                                        }) }) }) }), _jsx(FormRow, { label: "Destination", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "select-destination", items: destinationOptions, value: props.reportSchedule?.ExportDestination, placeholder: "Select Destination", onValueChange: (value) => props.onChange({
-                                            ...props.reportSchedule,
-                                            ExportDestination: value,
-                                        }) }) }) })] }) })] }) }));
+    const reportOptions = (props.allReportNames ?? []).map((reportName) => ({
+        label: reportName,
+        value: reportName,
+    }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", "data-name": "scheduled-report-settings", children: [props.fixedReportName ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Report" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The report that will be exported on this schedule" })] }), _jsx(Card.Body, { children: _jsx(Tag, { children: props.fixedReportName }) })] })) : null, props.allReportNames ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Report" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which report to export on this schedule" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { className: "twa:max-w-[300px]", "data-name": "select-report", items: reportOptions, value: props.reportSchedule?.ReportName || undefined, placeholder: "Select Report", onValueChange: (value) => props.onChange({
+                                ...props.reportSchedule,
+                                ReportName: value,
+                            }) }) })] })) : null, _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for this scheduled export" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "schedule-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reportSchedule?.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Format" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the export file format" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { className: "twa:max-w-[300px]", "data-name": "select-format", items: formatOptions, value: props.reportSchedule?.ReportFormat, placeholder: "Select Format", onValueChange: (value) => props.onChange({
+                                ...props.reportSchedule,
+                                ReportFormat: value,
+                            }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Destination" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose where the exported report is sent" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { className: "twa:max-w-[300px]", "data-name": "select-destination", items: destinationOptions, value: props.reportSchedule?.ExportDestination, placeholder: "Select Destination", onValueChange: (value) => props.onChange({
+                                ...props.reportSchedule,
+                                ExportDestination: value,
+                            }) }) })] })] }));
 };

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

@@ -1,10 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import * as ExportRedux from '../../../Redux/ActionsReducers/ExportRedux';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
-import { OnePageAdaptableWizard, OnePageWizardSummary, SummaryText, useOnePageAdaptableWizardContext, } from '../../Wizard/OnePageAdaptableWizard';
-import { Tag } from '../../../components/Tag';
+import { OnePageAdaptableWizard, OnePageWizardSummary, useOnePageAdaptableWizardContext, } from '../../Wizard/OnePageAdaptableWizard';
 import { isScheduleValid, ScheduleBuilderWizard, } from '../../Schedule/Wizard/ScheduleScheduleWizard';
 import { ScheduleScheduleSummary } from '../../Schedule/Wizard/ScheduleScheduleSummary';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
@@ -24,10 +23,11 @@ export const ScheduledReportWizard = (props) => {
     });
     const dispatch = useDispatch();
     const handleFinish = () => {
-        if (!reportName) {
+        const resolvedReportName = reportName ?? reportSchedule.ReportName;
+        if (!resolvedReportName?.trim()) {
             return;
         }
-        const scheduleToSave = { ...reportSchedule, ReportName: reportName };
+        const scheduleToSave = { ...reportSchedule, ReportName: resolvedReportName };
         const action = isNew
             ? ExportRedux.ScheduledReportAdd(scheduleToSave)
             : ExportRedux.ScheduledReportEdit(scheduleToSave);
@@ -45,7 +45,7 @@ export const ScheduledReportWizard = (props) => {
                 title: 'Settings',
                 isValid: (data, api) => isReportScheduleSettingsValid(data, api),
                 renderSummary: () => _jsx(ScheduledReportSettingsSummary, {}),
-                render: () => (_jsx(Box, { className: "twa:p-3", children: _jsx(ScheduledReportSettingsSection, { onChange: setReportSchedule, reportName: reportName }) })),
+                render: () => (_jsx(ScheduledReportSettingsSection, { onChange: setReportSchedule, reportName: reportName })),
             },
             {
                 title: 'Schedule',
@@ -71,5 +71,9 @@ const ScheduledReportSettingsSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const allFormats = api.exportApi.getAvailableSystemFormats();
     const allDestinations = api.exportApi.getAllExportDestinations();
-    return (_jsxs(_Fragment, { children: [props.reportName && (_jsxs(SummaryText, { children: ["Report: ", _jsx(Tag, { children: props.reportName })] })), _jsx(ScheduledReportSettings, { reportSchedule: data, onChange: props.onChange, allFormats: allFormats ?? [], allDestinations: allDestinations ?? [] })] }));
+    const fixedReportName = props.reportName;
+    const allReportNames = fixedReportName
+        ? undefined
+        : api.exportApi.internalApi.getAllAvailableReportNames();
+    return (_jsx(ScheduledReportSettings, { reportSchedule: data, onChange: props.onChange, allFormats: allFormats ?? [], allDestinations: allDestinations ?? [], allReportNames: allReportNames, fixedReportName: fixedReportName }));
 };

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

@@ -1,3 +1,3 @@
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { ReportSchedule } from '../../../AdaptableState/ExportState';
-export declare const isReportScheduleSettingsValid: (reportSchedule: ReportSchedule, api: AdaptableApi) => true | "A name is required." | "A scheduled export with this name already exists." | "Please select a report format.";
+export declare const isReportScheduleSettingsValid: (reportSchedule: ReportSchedule, api: AdaptableApi) => true | "A name is required." | "A scheduled export with this name already exists." | "Please select a report." | "Please select a report format.";

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

@@ -8,6 +8,9 @@ export const isReportScheduleSettingsValid = (reportSchedule, api) => {
     if (isDuplicateName) {
         return 'A scheduled export with this name already exists.';
     }
+    if (StringExtensions.IsNullOrEmpty(reportSchedule?.ReportName?.trim())) {
+        return 'Please select a report.';
+    }
     if (StringExtensions.IsNullOrEmpty(reportSchedule?.ReportFormat)) {
         return 'Please select a report format.';
     }

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;