@adaptabletools/adaptable 21.2.1 → 22.0.0-canary.0

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryResume, DataChangeHistorySuspend, } from '../../Redux/ActionsReducers/InternalRedux';
-import { Box, Flex, Text } from 'rebass';
 import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
 import { ButtonPause } from '../Components/Buttons/ButtonPause';
 import { ButtonStop } from '../Components/Buttons/ButtonStop';
@@ -10,6 +9,7 @@ import Tooltip from '../../components/Tooltip';
 import { useAdaptable } from '../AdaptableContext';
 import SimpleButton from '../../components/SimpleButton';
 import { Icon } from '../../components/icons';
+import { Box, Flex } from '../../components/Flex';
 export const DataChangeHistoryViewPanelControl = (props) => {
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
@@ -29,7 +29,7 @@ export const DataChangeHistoryViewPanelControl = (props) => {
     const suspended = changeHistoryMode === 'SUSPENDED';
     const gap = props.gap ?? 'var(--ab-space-1)';
     const buttonsPaddingY = props.buttonsPaddingY ?? 2;
-    const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
+    const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY } },
         disabled && (React.createElement(ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
         suspended && (React.createElement(ButtonPlay, { "aria-label": "Resume Data Change History", className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
         enabled && (React.createElement(ButtonPause, { "aria-label": "Suspend Data Change History", className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
@@ -37,15 +37,15 @@ export const DataChangeHistoryViewPanelControl = (props) => {
     const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
     const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
         enabled && (React.createElement(Tooltip, { label: !!activationTime && `since ${DateFormatter(activationTime, { Pattern: dateFormat })}` },
-            React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),
+            React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success" }, "Active"))),
         suspended && (React.createElement(Tooltip, { label: !!suspensionTime && `since ${DateFormatter(suspensionTime, { Pattern: dateFormat })}` },
-            React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-suspended", fontSize: 2, style: { color: 'var(--ab-color-warn)' } }, "Suspended"))),
-        disabled && (React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate Data Tracking"))));
+            React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn" }, "Suspended"))),
+        disabled && (React.createElement(Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2" }, "Activate Data Tracking"))));
     return (React.createElement(Flex, { flexDirection: 'row' },
         buttonPanel,
         statusPanel,
-        React.createElement(Flex, { ml: 2, alignItems: "center" },
+        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
             React.createElement(SimpleButton, { onClick: handleOpenPopup, variant: "text" },
                 React.createElement(Icon, { name: "open-in-new" }),
-                React.createElement(Box, { ml: 1 }, "Show")))));
+                React.createElement(Box, { className: "twa:ml-1" }, "Show")))));
 };

package/src/View/DataImport/DataImportPopup.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import HelpBlock from '../../components/HelpBlock';
 import SimpleButton from '../../components/SimpleButton';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { DataImportWizard } from './DataImportWizard';
+import { Box } from '../../components/Flex';
 export const DataImportPopup = (props) => {
     const [isWizardOpen, setIsWizardOpen] = React.useState(false);
     React.useEffect(() => {
@@ -15,7 +15,7 @@ export const DataImportPopup = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(PopupPanel, { headerText: 'Data Import', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage },
             React.createElement(Box, null,
-                React.createElement(HelpBlock, { mb: 2, fontSize: 3 }, "Click the 'Import Data' button to Insert or Update data into AdapTable"),
+                React.createElement(HelpBlock, { className: "twa:mb-2 twa:text-3" }, "Click the 'Import Data' button to Insert or Update data into AdapTable"),
                 React.createElement(SimpleButton, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true) }, "Import Data"))),
         isWizardOpen && (React.createElement(DataImportWizard, { onClose: () => {
                 setIsWizardOpen(false);

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

@@ -156,10 +156,10 @@ export const DataImportWizard = (props) => {
             adaptableApi.logError(`Error reading file ${file.name}. Please check the file is valid.`);
         }
     }, [adaptable]);
-    const fileMessage = file ? (React.createElement(HelpBlock, { mb: 2 },
+    const fileMessage = file ? (React.createElement(HelpBlock, { className: "twa:mb-2" },
         "File ",
         React.createElement(Tag, null, file.name),
-        " is ready to be imported.")) : (React.createElement(HelpBlock, { mb: 2 },
+        " is ready to be imported.")) : (React.createElement(HelpBlock, { className: "twa:mb-2" },
         "Supported file types: ",
         supportedFileFormats));
     // ---- TEXT IMPORT ----

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { CheckBox } from '../../../../components/CheckBox';
 import DropdownButton from '../../../../components/DropdownButton';
 import HelpBlock from '../../../../components/HelpBlock';
@@ -10,6 +9,7 @@ import { Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
 import { AdaptablePopover } from '../../../AdaptablePopover';
 import UIHelper from '../../../UIHelper';
+import { Box, Flex } from '../../../../components/Flex';
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -82,7 +82,7 @@ export const ColumnsSection = (props) => {
                                 abColumn: null,
                                 include: false,
                             });
-                        }, width: "100%", columns: ['label'], items: availableColumns }, params.data?.abColumn?.friendlyName ??
+                        }, className: "twa:w-full", columns: ['label'], items: availableColumns }, params.data?.abColumn?.friendlyName ??
                         params.data?.abColumn?.columnId ??
                         'Select Column'));
                 },
@@ -103,14 +103,14 @@ export const ColumnsSection = (props) => {
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return (React.createElement(Box, { p: 2 },
-            React.createElement(HelpBlock, { color: 'var(--ab-color-error)' },
+        return (React.createElement(Box, { className: "twa:p-2" },
+            React.createElement(HelpBlock, { className: "twa:text-error" },
                 "No Data has been Imported. Go to ",
                 React.createElement(Tag, null, "Upload"),
                 " step and provide Data")));
     }
-    return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs, { mb: 2, height: "100%" },
+    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
+        React.createElement(Tabs, { className: "twa:mb-2 twa:h-full" },
             React.createElement(Tabs.Tab, null, "Columns"),
             React.createElement(Tabs.Content, null,
                 React.createElement(DataSource, { data: props.columnsMap, primaryKey: 'field' },

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

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import CheckBox from '../../../../components/icons/check-box';
 import { Tabs } from '../../../../components/Tabs';
 import { DataPreview } from './DataPreview';
+import { Flex } from '../../../../components/Flex';
 export const ImportSection = (props) => {
-    return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs, { mb: 2 },
+    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
+        React.createElement(Tabs, { className: "twa:mb-2" },
             React.createElement(Tabs.Tab, null, "Import Options"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Exclude Invalid Rows" },
                         React.createElement(CheckBox, null))))),
-        React.createElement(Tabs, { flex: 1 },
+        React.createElement(Tabs, { className: "twa:flex-1" },
             React.createElement(Tabs.Tab, null, "Preview"),
             React.createElement(Tabs.Content, null,
                 React.createElement(DataPreview, { onDataChange: props.onDataChange, data: props.data, errors: props.errors, editable: false })))));

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

@@ -2,5 +2,5 @@ import * as React from 'react';
 import FileDroppable from '../../../../../components/FileDroppable/index';
 import HelpBlock from '../../../../../components/HelpBlock/index';
 export const ImportFileSection = (props) => {
-    return (React.createElement(FileDroppable, { loadingText: React.createElement(HelpBlock, { mb: 2 }, "File loaded , file ready to be imported."), message: props.message, helpText: "Data Import", defaultText: "Click here to select a file to load, or drag it here", dragOverText: "Drop file here to start Data Import", height: "100%", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
+    return (React.createElement(FileDroppable, { loadingText: React.createElement(HelpBlock, { className: "twa:mb-2" }, "File loaded , file ready to be imported."), message: props.message, helpText: "Data Import", defaultText: "Click here to select a file to load, or drag it here", dragOverText: "Drop file here to start Data Import", className: "twa:h-full", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
 };

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

@@ -1,18 +1,18 @@
 import React from 'react';
-import { Flex } from 'rebass';
 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';
 export const UploadSection = (props) => {
-    return (React.createElement(Flex, { p: 2, height: "100%", flexDirection: "column" },
-        React.createElement(Tabs, { mb: 2 },
+    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
+        React.createElement(Tabs, { className: "twa:mb-2" },
             React.createElement(Tabs.Tab, null, "Import Type"),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "column" },
                     React.createElement(Radio, { onClick: () => props.onImportTypeChange('file'), checked: props.importType === 'file' }, "File"),
                     React.createElement(Radio, { onClick: () => props.onImportTypeChange('text'), checked: props.importType === 'text' }, "Text")))),
-        React.createElement(Tabs, { flex: 1 },
+        React.createElement(Tabs, { className: "twa:flex-1" },
             React.createElement(Tabs.Tab, null, props.importType === 'file' ? 'File Upload' : 'Text'),
             React.createElement(Tabs.Content, null, props.importType === 'file' ? (React.createElement(ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (React.createElement(ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange }))))));
 };

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

@@ -3,6 +3,6 @@ import HelpBlock from '../../../../../components/HelpBlock/index';
 import Textarea from '../../../../../components/Textarea/index';
 export const ImportTextSection = (props) => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Textarea, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), height: "100%" }),
+        React.createElement(Textarea, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), className: "twa:h-full" }),
         props.message && React.createElement(HelpBlock, null, props.message)));
 };

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 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;
@@ -14,8 +14,8 @@ const getRowErrors = (errors, primaryKeyValue) => {
     return errors[primaryKeyValue];
 };
 export const ValidationSection = (props) => {
-    return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs, { mb: 2 },
+    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
+        React.createElement(Tabs, { className: "twa:mb-2" },
             React.createElement(Tabs.Tab, null, "Import Options"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
@@ -23,7 +23,7 @@ export const ValidationSection = (props) => {
                         React.createElement(CheckBox, { onChange: () => {
                                 props.onSkipInvalidRowsChange(!props.skipInvalidRows);
                             }, checked: props.skipInvalidRows }))))),
-        React.createElement(Tabs, { flex: 1 },
+        React.createElement(Tabs, { className: "twa:flex-1" },
             React.createElement(Tabs.Tab, null, "Preview"),
             React.createElement(Tabs.Content, null,
                 React.createElement(DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange })))));

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

@@ -17,8 +17,8 @@ declare class DataSetViewPanelComponent extends React.Component<DataSetViewPanel
 }
 export declare let DataSetViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSetViewPanelComponent, {
     ref?: React.Ref<DataSetViewPanelComponent>;
-    key?: React.Key;
+    key?: React.Key | null | undefined;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store?: import("redux").Store;
 }>;
 export {};

package/src/View/DataSet/DataSetViewPanel.js

@@ -1,10 +1,10 @@
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import * as React from 'react';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
-import { Flex } from 'rebass';
 import { connect } from 'react-redux';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { Select } from '../../components/Select';
+import { Flex } from '../../components/Flex';
 class DataSetViewPanelComponent extends React.Component {
     getCurrentDataSet() {
         return StringExtensions.IsNullOrEmpty(this.props.CurrentDataSetName)
@@ -26,7 +26,7 @@ class DataSetViewPanelComponent extends React.Component {
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__DataSet__wrap` },
-            React.createElement(Select, { "aria-label": 'Select Data Set', style: { width: '100%' }, placeholder: 'Select Data Set', disabled: ArrayExtensions.IsNullOrEmpty(availableDataSets), options: availableDataSets, value: currentDataSetName, className: `ab-${elementType}__DataSet__select`, onChange: (destination) => this.onSelectedDataSetChanged(destination) })));
+            React.createElement(Select, { "aria-label": 'Select Data Set', placeholder: 'Select Data Set', disabled: ArrayExtensions.IsNullOrEmpty(availableDataSets), options: availableDataSets, value: currentDataSetName, className: `ab-${elementType}__DataSet__select twa:w-full`, onChange: (destination) => this.onSelectedDataSetChanged(destination) })));
     }
     onSelectedDataSetChanged(dataSetName) {
         if (StringExtensions.IsNullOrEmpty(dataSetName)) {

package/src/View/Export/ExportDestinationPicker.js

@@ -3,6 +3,7 @@ import DropdownButton from '../../components/DropdownButton';
 import { Icon } from '../../components/icons';
 import { useAdaptable } from '../AdaptableContext';
 import { ButtonExport } from '../Components/Buttons/ButtonExport';
+import clsx from 'clsx';
 export const ExportDestinationPicker = ({ reportName, reportFormat, viewType, }) => {
     const adaptable = useAdaptable();
     const exportApi = adaptable.api.exportApi;
@@ -11,7 +12,7 @@ export const ExportDestinationPicker = ({ reportName, reportFormat, viewType, })
     };
     const supportedDestinations = exportApi.getSupportedExportDestinations(reportFormat);
     if (supportedDestinations.length === 0 || supportedDestinations.length === 1) {
-        return (React.createElement(ButtonExport, { marginRight: viewType !== 'StatusBar' ? 20 : undefined, paddingRight: 0, onClick: () => handleExport(supportedDestinations[0]), tooltip: "Export Report", disabled: reportName == undefined || reportFormat == undefined }));
+        return (React.createElement(ButtonExport, { className: clsx(viewType !== 'StatusBar' ? 'twa:mr-[20px]' : undefined, 'twa:pr-0'), onClick: () => handleExport(supportedDestinations[0]), tooltip: "Export Report", disabled: reportName == undefined || reportFormat == undefined }));
     }
     const destinationItems = supportedDestinations.map((destination) => ({
         label: destination,

package/src/View/Export/ExportViewPanel.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Flex } from 'rebass';
 import join from '../../components/utils/join';
 import * as ExportRedux from '../../Redux/ActionsReducers/ExportRedux';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
@@ -15,6 +14,7 @@ import { ButtonSchedule } from '../Components/Buttons/ButtonSchedule';
 import { ReportNameSelector } from './ReportNameSelector';
 import { ReportFormatSelector } from './ReportFormatSelector';
 import { ExportDestinationPicker } from './ExportDestinationPicker';
+import { Flex } from '../../components/Flex';
 export const ExportViewPanel = (props) => {
     const dispatch = useDispatch();
     const exportApi = props.api.exportApi;
@@ -27,10 +27,10 @@ export const ExportViewPanel = (props) => {
         ? `Are you sure you want to delete '${currentReport.Name}'?`
         : 'Are you sure you want to delete this report?';
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement(Flex, { style: { gap: 5 }, flexDirection: "row", className: `ab-${elementType}__Export__panel`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+    return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Export__panel twa:gap-2`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
         React.createElement(ReportNameSelector, { viewType: props.viewType, reportName: currentReportName, userReports: userReports, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }),
         React.createElement(ReportFormatSelector, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) }),
-        React.createElement(Flex, { className: join(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
+        React.createElement(Flex, { className: join(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls twa:w-full`) },
             React.createElement(ExportDestinationPicker, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat }),
             React.createElement(ButtonEdit, { onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ExportModuleId, props.moduleInfo.Popup, {
                     action: 'Edit',
@@ -41,7 +41,7 @@ export const ExportViewPanel = (props) => {
                     source: 'Toolbar',
                 })), tooltip: "Create New Report", accessLevel: props.accessLevel }),
             React.createElement(ButtonDelete, { tooltip: "Delete Report", className: `ab-${elementType}__Export__delete`, disabled: currentReport == null, ConfirmAction: ExportRedux.ReportDelete(currentReport), ConfirmationMsg: deleteMessage, ConfirmationTitle: 'Delete Report', accessLevel: accessLevel }),
-            props.api.entitlementApi.isModuleFullEntitlement('Schedule') && (React.createElement(ButtonSchedule, { marginLeft: 1, className: `ab-${elementType}__Export__schedule`, onClick: () => {
+            props.api.entitlementApi.isModuleFullEntitlement('Schedule') && (React.createElement(ButtonSchedule, { className: `ab-${elementType}__Export__schedule twa:ml-1`, onClick: () => {
                     const reportSchedule = ObjectFactory.CreateReportSchedule(currentReportName, currentFormat);
                     dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ScheduleModuleId, 'SchedulePopup', {
                         action: 'New',

package/src/View/Export/ReportFormatSelector.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Select } from '../../components/Select';
 import { useAdaptable } from '../AdaptableContext';
-import { Flex } from 'rebass';
 import { SELECT_REPORT_FORMAT_STRING } from '../../Utilities/Constants/GeneralConstants';
+import { Flex } from '../../components/Flex';
 export const ReportFormatSelector = (props) => {
     const { reportName, reportFormat, onReportFormatSelected, size = 'normal' } = props;
     const adaptable = useAdaptable();
@@ -15,6 +15,6 @@ export const ReportFormatSelector = (props) => {
         };
     });
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement(Flex, { "data-name": "report-format-selector", flex: 1, minWidth: 140 },
-        React.createElement(Select, { "aria-label": SELECT_REPORT_FORMAT_STRING, style: { width: '100%' }, size: size, placeholder: SELECT_REPORT_FORMAT_STRING, disabled: !allFormats.length || reportName == undefined, className: `ab-${elementType}__Export__format-select`, options: formatItems, onChange: (format) => onReportFormatSelected(format), value: reportFormat, isClearable: true })));
+    return (React.createElement(Flex, { "data-name": "report-format-selector", className: "twa:min-w-[140px] twa:flex-1" },
+        React.createElement(Select, { "aria-label": SELECT_REPORT_FORMAT_STRING, size: size, placeholder: SELECT_REPORT_FORMAT_STRING, disabled: !allFormats.length || reportName == undefined, className: `ab-${elementType}__Export__format-select twa:w-full`, options: formatItems, onChange: (format) => onReportFormatSelected(format), value: reportFormat, isClearable: true })));
 };

package/src/View/Export/ReportListItem.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Flex } from 'rebass';
 import { ReportFormatSelector } from './ReportFormatSelector';
 import { ExportDestinationPicker } from './ExportDestinationPicker';
+import { Flex } from '../../components/Flex';
 export const ReportListItem = (props) => {
     const report = props.data;
     const [reportFormat, setReportFormat] = useState(null);

package/src/View/Export/ReportNameSelector.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Flex } from 'rebass';
 import { Select } from '../../components/Select';
 import { useAdaptable } from '../AdaptableContext';
 import { SELECT_REPORT_STRING } from '../../Utilities/Constants/GeneralConstants';
+import { Flex } from '../../components/Flex';
 export const ReportNameSelector = (props) => {
     const { reportName, onReportNameSelected, size = 'normal' } = props;
     const adaptable = useAdaptable();
@@ -15,6 +15,6 @@ export const ReportNameSelector = (props) => {
         };
     });
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement(Flex, { "data-name": "report-name-selector", flex: 1, minWidth: 160 },
-        React.createElement(Select, { "aria-label": SELECT_REPORT_STRING, style: { width: '100%' }, size: size, "data-name": "report-name-selector", placeholder: SELECT_REPORT_STRING, disabled: !allReportNames.length, className: `ab-${elementType}__Export__report-select`, options: reportItems, onChange: (report) => onReportNameSelected(report), value: reportName, isClearable: true })));
+    return (React.createElement(Flex, { "data-name": "report-name-selector", className: "twa:min-w-[160px] twa:flex-1" },
+        React.createElement(Select, { "aria-label": SELECT_REPORT_STRING, size: size, "data-name": "report-name-selector", placeholder: SELECT_REPORT_STRING, disabled: !allReportNames.length, className: `ab-${elementType}__Export__report-select twa:w-full`, options: reportItems, onChange: (report) => onReportNameSelected(report), value: reportName, isClearable: true })));
 };

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import { Box } from 'rebass';
 import { renderReportColumnsSummary, ReportColumnsWizardSection, } from './ReportColumnsWizardSection';
 import { isValidReportRowsQuery, renderReportRowsSummary, ReportRowsWizardSection, } from './ReportRowsWizardSection';
 import { isValidReportName, renderReportNameSummary, ReportNameWizardSection, } from './ReportNameWizardSection';
@@ -10,6 +9,7 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch, useSelector } from 'react-redux';
 import * as ExportRedux from '../../../Redux/ActionsReducers/ExportRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { Box } from '../../../components/Flex';
 export const NewReportWizard = (props) => {
     const isEdit = props.popupParams?.action
         ? props.popupParams.action === 'Edit'
@@ -53,14 +53,14 @@ export const NewReportWizard = (props) => {
                 details: 'Enter the name of the Report',
                 isValid: isValidReportName,
                 renderSummary: renderReportNameSummary,
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ReportNameWizardSection, { onChange: setReport }))),
             },
             {
                 details: 'Select Report Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setReport }))),
                 renderSummary: renderObjectTagsSummary,
             },
@@ -68,7 +68,7 @@ export const NewReportWizard = (props) => {
             {
                 title: 'Summary',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
             },

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import WizardPanel from '../../../components/WizardPanel';
 import Radio from '../../../components/Radio';
-import { Flex } from 'rebass';
 import HelpBlock from '../../../components/HelpBlock';
+import { Flex } from '../../../components/Flex';
 export class ReportColumnTypeWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -13,15 +13,15 @@ export class ReportColumnTypeWizard extends React.Component {
     render() {
         return (React.createElement("div", { "data-name": 'report-select-columns' },
             React.createElement(WizardPanel, null,
-                React.createElement(Flex, { flexDirection: "column", padding: 2 },
-                    React.createElement(HelpBlock, { marginBottom: 1 }, "All columns in the datasource will be included in the Report, whether visible or not at time of export"),
-                    React.createElement(Radio, { value: "All", checked: this.state.ReportColumnScope == 'AllColumns', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Columns"),
+                React.createElement(Flex, { flexDirection: "column", className: "twa:p-2" },
+                    React.createElement(HelpBlock, { className: "twa:mb-1" }, "All columns in the datasource will be included in the Report, whether visible or not at time of export"),
+                    React.createElement(Radio, { value: "All", checked: this.state.ReportColumnScope == 'AllColumns', onChange: (_, e) => this.onScopeSelectChanged(e), className: "twa:mr-3" }, "All Columns"),
                     ' ',
-                    React.createElement(HelpBlock, { marginBottom: 1 }, "Only columns that are visible at the time the Report is exported will be included"),
-                    React.createElement(Radio, { value: "Visible", checked: this.state.ReportColumnScope == 'VisibleColumns', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Columns Only"),
+                    React.createElement(HelpBlock, { className: "twa:mb-1" }, "Only columns that are visible at the time the Report is exported will be included"),
+                    React.createElement(Radio, { value: "Visible", checked: this.state.ReportColumnScope == 'VisibleColumns', onChange: (_, e) => this.onScopeSelectChanged(e), className: "twa:mr-3" }, "Visible Columns Only"),
                     ' ',
-                    React.createElement(HelpBlock, { marginBottom: 1 }, "Only selected columns (which you will choose in the next step) will be exported - whether visible or not"),
-                    React.createElement(Radio, { value: "Bespoke", marginRight: 3, checked: this.state.ReportColumnScope == 'ScopeColumns', onChange: (_, e) => this.onScopeSelectChanged(e) }, "Bespoke Columns"),
+                    React.createElement(HelpBlock, { className: "twa:mb-1" }, "Only selected columns (which you will choose in the next step) will be exported - whether visible or not"),
+                    React.createElement(Radio, { value: "Bespoke", className: "twa:mr-3", checked: this.state.ReportColumnScope == 'ScopeColumns', onChange: (_, e) => this.onScopeSelectChanged(e) }, "Bespoke Columns"),
                     ' '))));
     }
     onScopeSelectChanged(event) {

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
 import Radio from '../../../components/Radio';
 import { Tabs } from '../../../components/Tabs';
 import { NewScopeComponent, renderScopeSummary } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Box, Flex } from '../../../components/Flex';
 export const isValidReportColumnsScope = (report) => {
     if (report.ReportColumnScope === 'ScopeColumns') {
         return report.Scope != null ? true : 'Column scope is not defined';
@@ -11,7 +11,7 @@ export const isValidReportColumnsScope = (report) => {
     return true;
 };
 export const renderReportColumnsSummary = (report) => {
-    return (React.createElement(Box, { fontSize: 2 },
+    return (React.createElement(Box, { className: "twa:text-2" },
         report.ReportColumnScope === 'AllColumns' ? (React.createElement(React.Fragment, null,
             "Include ",
             React.createElement("b", null, "all Columns"),
@@ -28,8 +28,8 @@ export const renderReportColumnsSummary = (report) => {
 };
 export const ReportColumnsWizardSection = (props) => {
     const { api, data } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
-        React.createElement(Tabs, { m: 2, value: data.ReportColumnScope, onValueChange: (ReportColumnScope) => {
+    return (React.createElement(Flex, { flexDirection: "column", className: "twa:h-full" },
+        React.createElement(Tabs, { className: "twa:m-2", value: data.ReportColumnScope, onValueChange: (ReportColumnScope) => {
                 const report = {
                     ...data,
                     ReportColumnScope,
@@ -47,18 +47,18 @@ export const ReportColumnsWizardSection = (props) => {
                 props.onChange(report);
             } },
             React.createElement(Tabs.Tab, { value: "AllColumns" },
-                React.createElement(Radio, { margin: 0, checked: data.ReportColumnScope == 'AllColumns', tabIndex: -1 }, "All Columns")),
+                React.createElement(Radio, { className: "twa:m-0", checked: data.ReportColumnScope == 'AllColumns', tabIndex: -1 }, "All Columns")),
             React.createElement(Tabs.Tab, { value: "VisibleColumns" },
-                React.createElement(Radio, { margin: 0, checked: data.ReportColumnScope == 'VisibleColumns', tabIndex: -1 }, "Visible Columns")),
+                React.createElement(Radio, { className: "twa:m-0", checked: data.ReportColumnScope == 'VisibleColumns', tabIndex: -1 }, "Visible Columns")),
             React.createElement(Tabs.Tab, { value: "ScopeColumns" },
-                React.createElement(Radio, { margin: 0, checked: data.ReportColumnScope == 'ScopeColumns', tabIndex: -1 }, "Bespoke Columns")),
+                React.createElement(Radio, { className: "twa:m-0", checked: data.ReportColumnScope == 'ScopeColumns', tabIndex: -1 }, "Bespoke Columns")),
             React.createElement(Tabs.Content, { value: "AllColumns" },
-                React.createElement(Text, { fontSize: 2, padding: 2 }, "All Columns in the datasource will be included in the Report, whether visible or not at time of export")),
+                React.createElement(Box, { className: "twa:p-2 twa:text-2" }, "All Columns in the datasource will be included in the Report, whether visible or not at time of export")),
             React.createElement(Tabs.Content, { value: "VisibleColumns" },
-                React.createElement(Text, { fontSize: 2, padding: 2 }, "Only Columns that are visible at the time the Report is exported will be included")),
+                React.createElement(Box, { className: "twa:p-2 twa:text-2" }, "Only Columns that are visible at the time the Report is exported will be included")),
             React.createElement(Tabs.Content, { value: "BespokeColumns" },
-                React.createElement(Text, { fontSize: 2, padding: 2 }, "Only selected Columns (which you will choose in the next step) will be exported - whether visible or not"))),
-        data.ReportColumnScope === 'ScopeColumns' ? (React.createElement(Box, { padding: 2, flex: 1, style: { overflow: 'auto' } },
+                React.createElement(Box, { className: "twa:p-2 twa:text-2" }, "Only selected Columns (which you will choose in the next step) will be exported - whether visible or not"))),
+        data.ReportColumnScope === 'ScopeColumns' ? (React.createElement(Box, { className: "twa:p-2 twa:flex-1 twa:overflow-auto" },
             React.createElement(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',

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Box, Text } from 'rebass';
 import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Input from '../../../components/Input';
 import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Box } from '../../../components/Flex';
 export const renderReportNameSummary = (report) => {
-    return (React.createElement(Box, { fontSize: 2 },
+    return (React.createElement(Box, { className: "twa:text-2" },
         ' ',
         "Report Name: ",
         React.createElement(Tag, null, report.Name)));
@@ -30,8 +30,8 @@ export const ReportNameWizardSection = (props) => {
     return (React.createElement(Box, null,
         React.createElement(FormLayout, { columns: [1, 2] },
             React.createElement(FormRow, null,
-                React.createElement(Text, { marginRight: 2 }, "Name:"),
-                React.createElement(Input, { "data-name": "export-name", width: "100%", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
+                React.createElement(Box, { className: "twa:mr-2" }, "Name:"),
+                React.createElement(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,

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import WizardPanel from '../../../components/WizardPanel';
 import Radio from '../../../components/Radio';
-import { Flex } from 'rebass';
 import HelpBlock from '../../../components/HelpBlock';
+import { Flex } from '../../../components/Flex';
 export class ReportRowTypeWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -13,15 +13,15 @@ export class ReportRowTypeWizard extends React.Component {
     render() {
         return (React.createElement("div", { "data-name": 'report-select-rows' },
             React.createElement(WizardPanel, null,
-                React.createElement(Flex, { flexDirection: "column", padding: 2 },
-                    React.createElement(HelpBlock, { marginBottom: 1 }, "All rows in the datasource will be included in the report, whether visible or not at time of export."),
-                    React.createElement(Radio, { value: "All", checked: this.state.ReportRowScope == 'AllRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Rows"),
+                React.createElement(Flex, { flexDirection: "column", className: "twa:p-2" },
+                    React.createElement(HelpBlock, { className: "twa:mb-1" }, "All rows in the datasource will be included in the report, whether visible or not at time of export."),
+                    React.createElement(Radio, { value: "All", checked: this.state.ReportRowScope == 'AllRows', onChange: (_, e) => this.onScopeSelectChanged(e), className: "twa:mr-3" }, "All Rows"),
                     ' ',
-                    React.createElement(HelpBlock, { marginBottom: 1 }, "Only rows that are visible at the time the Report is exported will be included in the Export"),
-                    React.createElement(Radio, { value: "Visible", checked: this.state.ReportRowScope == 'VisibleRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Rows Only"),
+                    React.createElement(HelpBlock, { className: "twa:mb-1" }, "Only rows that are visible at the time the Report is exported will be included in the Export"),
+                    React.createElement(Radio, { value: "Visible", checked: this.state.ReportRowScope == 'VisibleRows', onChange: (_, e) => this.onScopeSelectChanged(e), className: "twa:mr-3" }, "Visible Rows Only"),
                     ' ',
-                    React.createElement(HelpBlock, { marginBottom: 1 }, "Only the rows which match the Query (built in next step) will be exported - whether visible or not."),
-                    React.createElement(Radio, { value: "Expression", checked: this.state.ReportRowScope == 'ExpressionRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "By Query - built by you in next step"),
+                    React.createElement(HelpBlock, { className: "twa:mb-1" }, "Only the rows which match the Query (built in next step) will be exported - whether visible or not."),
+                    React.createElement(Radio, { value: "Expression", checked: this.state.ReportRowScope == 'ExpressionRows', onChange: (_, e) => this.onScopeSelectChanged(e), className: "twa:mr-3" }, "By Query - built by you in next step"),
                     ' '))));
     }
     onScopeSelectChanged(event) {