@adaptabletools/adaptable-cjs 21.2.2-canary.0 → 22.0.0-canary.0

package/src/View/Export/ReportListItem.js

@@ -4,14 +4,14 @@ exports.ReportListItem = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const ReportFormatSelector_1 = require("./ReportFormatSelector");
 const ExportDestinationPicker_1 = require("./ExportDestinationPicker");
+const Flex_1 = require("../../components/Flex");
 const ReportListItem = (props) => {
     const report = props.data;
     const [reportFormat, setReportFormat] = (0, react_1.useState)(null);
     const viewType = 'SettingsPanel';
-    return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${viewType}__Export__panel` },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${viewType}__Export__panel` },
         React.createElement(ReportFormatSelector_1.ReportFormatSelector, { viewType: viewType, reportName: report.Name, reportFormat: reportFormat, onReportFormatSelected: (reportFormat) => setReportFormat(reportFormat) }),
         React.createElement(ExportDestinationPicker_1.ExportDestinationPicker, { viewType: "SettingsPanel", reportName: report.Name, reportFormat: reportFormat })));
 };

package/src/View/Export/ReportNameSelector.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportNameSelector = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const rebass_1 = require("rebass");
 const Select_1 = require("../../components/Select");
 const AdaptableContext_1 = require("../AdaptableContext");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const Flex_1 = require("../../components/Flex");
 const ReportNameSelector = (props) => {
     const { reportName, onReportNameSelected, size = 'normal' } = props;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -19,7 +19,7 @@ const ReportNameSelector = (props) => {
         };
     });
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (react_1.default.createElement(rebass_1.Flex, { "data-name": "report-name-selector", flex: 1, minWidth: 160 },
-        react_1.default.createElement(Select_1.Select, { "aria-label": GeneralConstants_1.SELECT_REPORT_STRING, style: { width: '100%' }, size: size, "data-name": "report-name-selector", placeholder: GeneralConstants_1.SELECT_REPORT_STRING, disabled: !allReportNames.length, className: `ab-${elementType}__Export__report-select`, options: reportItems, onChange: (report) => onReportNameSelected(report), value: reportName, isClearable: true })));
+    return (react_1.default.createElement(Flex_1.Flex, { "data-name": "report-name-selector", className: "twa:min-w-[160px] twa:flex-1" },
+        react_1.default.createElement(Select_1.Select, { "aria-label": GeneralConstants_1.SELECT_REPORT_STRING, size: size, "data-name": "report-name-selector", placeholder: GeneralConstants_1.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 })));
 };
 exports.ReportNameSelector = ReportNameSelector;

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

@@ -6,7 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
-const rebass_1 = require("rebass");
 const ReportColumnsWizardSection_1 = require("./ReportColumnsWizardSection");
 const ReportRowsWizardSection_1 = require("./ReportRowsWizardSection");
 const ReportNameWizardSection_1 = require("./ReportNameWizardSection");
@@ -14,6 +13,7 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const ExportRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ExportRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const Flex_1 = require("../../../components/Flex");
 const NewReportWizard = (props) => {
     const isEdit = props.popupParams?.action
         ? props.popupParams.action === 'Edit'
@@ -57,14 +57,14 @@ const NewReportWizard = (props) => {
                 details: 'Enter the name of the Report',
                 isValid: ReportNameWizardSection_1.isValidReportName,
                 renderSummary: ReportNameWizardSection_1.renderReportNameSummary,
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ReportNameWizardSection_1.ReportNameWizardSection, { onChange: setReport }))),
             },
             {
                 details: 'Select Report Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setReport }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
@@ -72,7 +72,7 @@ const NewReportWizard = (props) => {
             {
                 title: 'Summary',
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
             },

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

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const rebass_1 = require("rebass");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Flex_1 = require("../../../components/Flex");
 class ReportColumnTypeWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -17,15 +17,15 @@ class ReportColumnTypeWizard extends React.Component {
     render() {
         return (React.createElement("div", { "data-name": 'report-select-columns' },
             React.createElement(WizardPanel_1.default, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 2 },
-                    React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "All columns in the datasource will be included in the Report, whether visible or not at time of export"),
-                    React.createElement(Radio_1.default, { value: "All", checked: this.state.ReportColumnScope == 'AllColumns', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Columns"),
+                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2" },
+                    React.createElement(HelpBlock_1.default, { 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_1.default, { value: "All", checked: this.state.ReportColumnScope == 'AllColumns', onChange: (_, e) => this.onScopeSelectChanged(e), className: "twa:mr-3" }, "All Columns"),
                     ' ',
-                    React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only columns that are visible at the time the Report is exported will be included"),
-                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportColumnScope == 'VisibleColumns', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Columns Only"),
+                    React.createElement(HelpBlock_1.default, { className: "twa:mb-1" }, "Only columns that are visible at the time the Report is exported will be included"),
+                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportColumnScope == 'VisibleColumns', onChange: (_, e) => this.onScopeSelectChanged(e), className: "twa:mr-3" }, "Visible Columns Only"),
                     ' ',
-                    React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only selected columns (which you will choose in the next step) will be exported - whether visible or not"),
-                    React.createElement(Radio_1.default, { value: "Bespoke", marginRight: 3, checked: this.state.ReportColumnScope == 'ScopeColumns', onChange: (_, e) => this.onScopeSelectChanged(e) }, "Bespoke Columns"),
+                    React.createElement(HelpBlock_1.default, { 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_1.default, { 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

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportColumnsWizardSection = exports.renderReportColumnsSummary = exports.isValidReportColumnsScope = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Tabs_1 = require("../../../components/Tabs");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
 const isValidReportColumnsScope = (report) => {
     if (report.ReportColumnScope === 'ScopeColumns') {
         return report.Scope != null ? true : 'Column scope is not defined';
@@ -16,7 +16,7 @@ const isValidReportColumnsScope = (report) => {
 };
 exports.isValidReportColumnsScope = isValidReportColumnsScope;
 const renderReportColumnsSummary = (report) => {
-    return (React.createElement(rebass_1.Box, { fontSize: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
         report.ReportColumnScope === 'AllColumns' ? (React.createElement(React.Fragment, null,
             "Include ",
             React.createElement("b", null, "all Columns"),
@@ -34,8 +34,8 @@ const renderReportColumnsSummary = (report) => {
 exports.renderReportColumnsSummary = renderReportColumnsSummary;
 const ReportColumnsWizardSection = (props) => {
     const { api, data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs, { m: 2, value: data.ReportColumnScope, onValueChange: (ReportColumnScope) => {
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full" },
+        React.createElement(Tabs_1.Tabs, { className: "twa:m-2", value: data.ReportColumnScope, onValueChange: (ReportColumnScope) => {
                 const report = {
                     ...data,
                     ReportColumnScope,
@@ -53,18 +53,18 @@ const ReportColumnsWizardSection = (props) => {
                 props.onChange(report);
             } },
             React.createElement(Tabs_1.Tabs.Tab, { value: "AllColumns" },
-                React.createElement(Radio_1.default, { margin: 0, checked: data.ReportColumnScope == 'AllColumns', tabIndex: -1 }, "All Columns")),
+                React.createElement(Radio_1.default, { className: "twa:m-0", checked: data.ReportColumnScope == 'AllColumns', tabIndex: -1 }, "All Columns")),
             React.createElement(Tabs_1.Tabs.Tab, { value: "VisibleColumns" },
-                React.createElement(Radio_1.default, { margin: 0, checked: data.ReportColumnScope == 'VisibleColumns', tabIndex: -1 }, "Visible Columns")),
+                React.createElement(Radio_1.default, { className: "twa:m-0", checked: data.ReportColumnScope == 'VisibleColumns', tabIndex: -1 }, "Visible Columns")),
             React.createElement(Tabs_1.Tabs.Tab, { value: "ScopeColumns" },
-                React.createElement(Radio_1.default, { margin: 0, checked: data.ReportColumnScope == 'ScopeColumns', tabIndex: -1 }, "Bespoke Columns")),
+                React.createElement(Radio_1.default, { className: "twa:m-0", checked: data.ReportColumnScope == 'ScopeColumns', tabIndex: -1 }, "Bespoke Columns")),
             React.createElement(Tabs_1.Tabs.Content, { value: "AllColumns" },
-                React.createElement(rebass_1.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(Flex_1.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_1.Tabs.Content, { value: "VisibleColumns" },
-                React.createElement(rebass_1.Text, { fontSize: 2, padding: 2 }, "Only Columns that are visible at the time the Report is exported will be included")),
+                React.createElement(Flex_1.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_1.Tabs.Content, { value: "BespokeColumns" },
-                React.createElement(rebass_1.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(rebass_1.Box, { padding: 2, flex: 1, style: { overflow: 'auto' } },
+                React.createElement(Flex_1.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(Flex_1.Box, { className: "twa:p-2 twa:flex-1 twa:overflow-auto" },
             React.createElement(NewScopeComponent_1.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

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportNameWizardSection = exports.isValidReportName = exports.renderReportNameSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
 const renderReportNameSummary = (report) => {
-    return (React.createElement(rebass_1.Box, { fontSize: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
         ' ',
         "Report Name: ",
         React.createElement(Tag_1.Tag, null, report.Name)));
@@ -33,11 +33,11 @@ const ReportNameWizardSection = (props) => {
     const { api, data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const validCheck = (0, exports.isValidReportName)(data, api);
     const ErrorMessage = validCheck === true ? null : validCheck;
-    return (React.createElement(rebass_1.Box, null,
+    return (React.createElement(Flex_1.Box, null,
         React.createElement(FormLayout_1.default, { columns: [1, 2] },
             React.createElement(FormLayout_1.FormRow, null,
-                React.createElement(rebass_1.Text, { marginRight: 2 }, "Name:"),
-                React.createElement(Input_1.default, { "data-name": "export-name", width: "100%", type: "text", autoFocus: true, placeholder: "Name", value: data.Name, onChange: (e) => {
+                React.createElement(Flex_1.Box, { className: "twa:mr-2" }, "Name:"),
+                React.createElement(Input_1.default, { "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

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const rebass_1 = require("rebass");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Flex_1 = require("../../../components/Flex");
 class ReportRowTypeWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -17,15 +17,15 @@ class ReportRowTypeWizard extends React.Component {
     render() {
         return (React.createElement("div", { "data-name": 'report-select-rows' },
             React.createElement(WizardPanel_1.default, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 2 },
-                    React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "All rows in the datasource will be included in the report, whether visible or not at time of export."),
-                    React.createElement(Radio_1.default, { value: "All", checked: this.state.ReportRowScope == 'AllRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "All Rows"),
+                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2" },
+                    React.createElement(HelpBlock_1.default, { 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_1.default, { value: "All", checked: this.state.ReportRowScope == 'AllRows', onChange: (_, e) => this.onScopeSelectChanged(e), className: "twa:mr-3" }, "All Rows"),
                     ' ',
-                    React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only rows that are visible at the time the Report is exported will be included in the Export"),
-                    React.createElement(Radio_1.default, { value: "Visible", checked: this.state.ReportRowScope == 'VisibleRows', onChange: (_, e) => this.onScopeSelectChanged(e), marginRight: 3 }, "Visible Rows Only"),
+                    React.createElement(HelpBlock_1.default, { 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_1.default, { value: "Visible", checked: this.state.ReportRowScope == 'VisibleRows', onChange: (_, e) => this.onScopeSelectChanged(e), className: "twa:mr-3" }, "Visible Rows Only"),
                     ' ',
-                    React.createElement(HelpBlock_1.default, { marginBottom: 1 }, "Only the rows which match the Query (built in next step) will be exported - whether visible or not."),
-                    React.createElement(Radio_1.default, { 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_1.default, { 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_1.default, { 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) {

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

@@ -4,13 +4,13 @@ exports.ReportRowsWizardSection = exports.renderReportRowsSummary = exports.isVa
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const ExpressionPreview_1 = require("../../../components/ExpressionEditor/ExpressionPreview");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
 const isValidReportRowsQuery = (report) => {
     if (report.ReportRowScope === 'ExpressionRows' && !report.Query?.BooleanExpression) {
         return 'Rows query cannot be empty';
@@ -20,7 +20,7 @@ const isValidReportRowsQuery = (report) => {
 exports.isValidReportRowsQuery = isValidReportRowsQuery;
 const renderReportRowsSummary = (report) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Box, { fontSize: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
         report.ReportRowScope === 'AllRows' ? (React.createElement(React.Fragment, null,
             "Include ",
             React.createElement("b", null, "all Rows"),
@@ -40,7 +40,7 @@ const ReportRowsWizardSection = (props) => {
     const { api, data, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { m: 2, value: data.ReportRowScope, onValueChange: (ReportRowScope) => {
+        React.createElement(Tabs_1.Tabs, { className: "twa:m-2", value: data.ReportRowScope, onValueChange: (ReportRowScope) => {
                 const report = {
                     ...data,
                     ReportRowScope,
@@ -58,17 +58,17 @@ const ReportRowsWizardSection = (props) => {
                 props.onChange(report);
             } },
             React.createElement(Tabs_1.Tabs.Tab, { value: "AllRows" },
-                React.createElement(Radio_1.default, { margin: 0, checked: data.ReportRowScope == 'AllRows', tabIndex: -1 }, "All Rows")),
+                React.createElement(Radio_1.default, { className: "twa:m-0", checked: data.ReportRowScope == 'AllRows', tabIndex: -1 }, "All Rows")),
             React.createElement(Tabs_1.Tabs.Tab, { value: "VisibleRows" },
-                React.createElement(Radio_1.default, { margin: 0, checked: data.ReportRowScope == 'VisibleRows', tabIndex: -1 }, "Visible Rows")),
+                React.createElement(Radio_1.default, { className: "twa:m-0", checked: data.ReportRowScope == 'VisibleRows', tabIndex: -1 }, "Visible Rows")),
             React.createElement(Tabs_1.Tabs.Tab, { value: "ExpressionRows" },
-                React.createElement(Radio_1.default, { margin: 0, checked: data.ReportRowScope == 'ExpressionRows', tabIndex: -1 }, "By Query")),
+                React.createElement(Radio_1.default, { className: "twa:m-0", checked: data.ReportRowScope == 'ExpressionRows', tabIndex: -1 }, "By Query")),
             React.createElement(Tabs_1.Tabs.Content, { value: "AllRows" },
-                React.createElement(rebass_1.Text, { fontSize: 2, padding: 2 }, "All Rows in the datasource will be included in the report, whether visible or not at time of export.")),
+                React.createElement(Flex_1.Box, { className: "twa:p-2 twa:text-2" }, "All Rows in the datasource will be included in the report, whether visible or not at time of export.")),
             React.createElement(Tabs_1.Tabs.Content, { value: "VisibleRows" },
-                React.createElement(rebass_1.Text, { fontSize: 2, padding: 2 }, "Only Rows that are visible at the time the Report is exported will be included in the Export")),
+                React.createElement(Flex_1.Box, { className: "twa:p-2 twa:text-2" }, "Only Rows that are visible at the time the Report is exported will be included in the Export")),
             React.createElement(Tabs_1.Tabs.Content, { value: "ExpressionRows" },
-                React.createElement(rebass_1.Text, { fontSize: 2, padding: 2, pl: 0 }, "Only the Rows which match the Query will be exported - whether visible or not."),
+                React.createElement(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:text-2" }, "Only the Rows which match the Query will be exported - whether visible or not."),
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: true, type: 'boolean', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query?.BooleanExpression ?? '', onChange: (BooleanExpression) => {
                         props.onChange({
                             ...data,

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

@@ -6,9 +6,9 @@ const React = tslib_1.__importStar(require("react"));
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const rebass_1 = require("rebass");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Flex_1 = require("../../../components/Flex");
 class ReportSettingsWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -25,8 +25,8 @@ class ReportSettingsWizard extends React.Component {
             React.createElement(WizardPanel_1.default, null,
                 React.createElement(FormLayout_1.default, { columns: [1, 2] },
                     React.createElement(FormLayout_1.FormRow, null,
-                        React.createElement(rebass_1.Text, { marginRight: 2 }, "Enter Report Name:"),
-                        React.createElement(Input_1.default, { width: "100%", type: "text", placeholder: "Name", value: this.state.ReportName, onChange: (e) => this.onReportNameChanged(e) })),
+                        React.createElement(Flex_1.Box, { className: "twa:mr-2" }, "Enter Report Name:"),
+                        React.createElement(Input_1.default, { className: "twa:w-full", type: "text", placeholder: "Name", value: this.state.ReportName, onChange: (e) => this.onReportNameChanged(e) })),
                     React.createElement(FormLayout_1.FormRow, null,
                         React.createElement(React.Fragment, null),
                         this.state.ErrorMessage ? React.createElement(ErrorBox_1.default, null, this.state.ErrorMessage) : null)))));

package/src/View/Filter/FilterSummary.d.ts

@@ -14,5 +14,5 @@ export declare class FilterSummaryComponent extends React.Component<FilterSummar
 }
 export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, {
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store?: import("redux").Store;
 }>;

package/src/View/Filter/FilterSummary.js

@@ -24,7 +24,7 @@ class FilterSummaryComponent extends React.Component {
         let summaryItems = [];
         summaryItems.push(React.createElement("b", null, React.createElement(ModuleProfile_1.ModuleProfile, { moduleInfo: this.props.moduleInfo })));
         summaryItems.push(description);
-        summaryItems.push(React.createElement(ButtonClear_1.ButtonClear, { marginLeft: 1, onClick: () => this.props.onClearFilter(columnFilter), tooltip: "Clear Filter", disabled: columnFilter == null, accessLevel: this.props.accessLevel }));
+        summaryItems.push(React.createElement(ButtonClear_1.ButtonClear, { className: "twa:ml-1", onClick: () => this.props.onClearFilter(columnFilter), tooltip: "Clear Filter", disabled: columnFilter == null, accessLevel: this.props.accessLevel }));
         return React.createElement(SummaryRowItem_1.SummaryRowItem, { SummaryItems: summaryItems });
     }
     getDescription(columnFilter) {

package/src/View/Filter/FilterViewPanel.d.ts

@@ -19,8 +19,8 @@ declare class FilterViewPanelComponent extends React.Component<FilterViewPanelCo
 }
 export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, {
     ref?: React.Ref<FilterViewPanelComponent>;
-    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/Filter/FilterViewPanel.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 const React = tslib_1.__importStar(require("react"));
 const ActiveFiltersPanel_1 = require("./ActiveFiltersPanel");
-const rebass_1 = require("rebass");
 const ArrayExtensions_1 = require("../../Utilities/Extensions/ArrayExtensions");
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
@@ -14,6 +13,7 @@ const react_redux_1 = require("react-redux");
 const LayoutRedux_1 = require("../../Redux/ActionsReducers/LayoutRedux");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
+const Flex_1 = require("../../components/Flex");
 class FilterViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -30,13 +30,13 @@ class FilterViewPanelComponent extends React.Component {
                 this.props.api.filterApi.columnFilterApi.unSuspendAllColumnFilters();
             }
         };
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, null,
+        return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+            React.createElement(Flex_1.Flex, null,
                 ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
-                React.createElement(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear`, marginLeft: 1, marginBottom: 0, marginRight: 1, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear'),
+                React.createElement(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear'),
                 React.createElement(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel })),
-            React.createElement(rebass_1.Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check`, disabled: this.props.accessLevel === 'ReadOnly' ||
-                    this.props.api.layoutApi.isCurrentLayoutPivot(), marginTop: 0, marginBottom: 0, fontSize: 2, padding: 1, checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
+            React.createElement(Flex_1.Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === 'ReadOnly' ||
+                    this.props.api.layoutApi.isCurrentLayoutPivot(), checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                     checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
                 } }, "Filter Bar")))));
     }

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BoxProps } from 'rebass';
 import { FlashingCellDefinition } from '../../types';
-export interface FlashingCellStyleProps extends Omit<BoxProps, 'data'> {
+import { FlexProps } from '../../components/Flex';
+export interface FlashingCellStyleProps extends Omit<FlexProps, 'data'> {
     data: FlashingCellDefinition;
 }
 export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;

package/src/View/FlashingCell/FlashingCellStyle.js

@@ -3,18 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashingCellStyle = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const rebass_1 = require("rebass");
 const StylePreview_1 = require("../../components/StylePreview");
+const Flex_1 = require("../../components/Flex");
 const FlashingCellStyle = (props) => {
     const { data, ...boxProps } = props;
-    return (react_1.default.createElement(rebass_1.Flex, { flexDirection: "row", ...boxProps },
-        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "up-style", mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
+    return (react_1.default.createElement(Flex_1.Flex, { flexDirection: "row", ...boxProps },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "up-style", styleObject: props.data.UpChangeStyle, className: "twa:mr-1 twa:flex-1" },
             "Up ",
             !props.data.UpChangeStyle ? ' - no style' : ''),
-        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "down-style", mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "down-style", className: "twa:mr-1 twa:flex-1", styleObject: props.data.DownChangeStyle },
             "Down",
             !props.data.DownChangeStyle ? ' - no style' : ''),
-        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "neutral-style", flex: 1, styleObject: props.data.NeutralChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "neutral-style", className: "twa:flex-1", styleObject: props.data.NeutralChangeStyle },
             "Neutral ",
             !props.data.NeutralChangeStyle ? ' - no style' : '')));
 };

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashingAlertScopeWizardSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
 const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const availableColumns = React.useMemo(() => api.columnApi.getNonSpecialColumns(), []);
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
         React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
                 rowScope: 'Changes anywhere in the row will trigger an Flashing Cell',
                 columnScope: 'Changes in selected columns will trigger an Flashing Cell',

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

@@ -4,7 +4,6 @@ exports.FlashingAlertSettingsWizardSection = exports.renderFlashingAlertSettings
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const usePrevious_1 = tslib_1.__importDefault(require("../../../components/utils/usePrevious"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
@@ -13,9 +12,10 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CodeBlock_1 = require("../../../components/CodeBlock");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
+const Flex_1 = require("../../../components/Flex");
 const renderFlashingAlertSettingsSummary = (flashingAlert) => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Text, { fontSize: 2 }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
+        React.createElement(Flex_1.Box, { className: "twa:text-2" }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
             "Flashing is removed after ",
             React.createElement(CodeBlock_1.CodeBlock, null, flashingAlert.FlashDuration),
             ' ',
@@ -58,27 +58,27 @@ const FlashingAlertSettingsWizardSection = (props) => {
             FlashTarget,
         });
     };
-    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "plus-minus-column-settings" },
-        React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full" },
+        React.createElement(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Flashing Cell Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Duration Type" },
-                        React.createElement(Radio_1.default, { "data-name": "duration-type-always", mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
+                        React.createElement(Radio_1.default, { "data-name": "duration-type-always", className: "twa:mr-3", checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
                         React.createElement(Radio_1.default, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
-                        duration !== 'always' && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "baseline" },
-                            React.createElement(rebass_1.Text, { fontSize: 2, mr: 2 }, "After"),
-                            React.createElement(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
+                        duration !== 'always' && (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "baseline" },
+                            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mr-2" }, "After"),
+                            React.createElement(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, className: "twa:mt-2 twa:mr-1", value: duration, onChange: (event) => {
                                     const value = event.target.value;
                                     setDuration(isNaN(Number(value)) ? 500 : Number(value));
                                 } }),
-                            React.createElement(rebass_1.Text, { fontSize: 2 }, "milliseconds"))),
-                        duration === 'always' && (React.createElement(rebass_1.Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
+                            React.createElement(Flex_1.Box, { className: "twa:text-2" }, "milliseconds"))),
+                        duration === 'always' && (React.createElement(Flex_1.Box, { className: "twa:text-3 twa:h-[43px]" }, "Persists the flashing style indeterminately - can be removed manually"))),
                     React.createElement(FormLayout_1.FormRow, { label: "Flash Target" },
-                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: flashingCell?.FlashTarget === 'cell' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
                                 flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
-                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
                                 flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
                         React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
                                 flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")))))));

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

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

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderFlashingAlertStyleSummary = exports.FlashingCellStyle = exports.FlashingAlertStyleWizardSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tabs_1 = require("../../../components/Tabs");
 const StyleComponent_1 = require("../../Components/StyleComponent");
 const StylePreview_1 = require("../../../components/StylePreview");
-const changeStyle = (React.createElement(rebass_1.Text, { fontSize: 2, style: { display: 'inline-block' } }, "Change style"));
+const Flex_1 = require("../../../components/Flex");
+const changeStyle = React.createElement(Flex_1.Box, { className: "twa:text-2 twa:inline-block" }, "Change style");
 const FlashingAlertStyleWizardSection = (props) => {
     let { data: flashingAlert, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     flashingAlert = flashingAlert ?? props.flashingAlert;
@@ -33,14 +33,14 @@ const FlashingAlertStyleWizardSection = (props) => {
 exports.FlashingAlertStyleWizardSection = FlashingAlertStyleWizardSection;
 const FlashingCellStyle = (props) => {
     const { data, ...boxProps } = props;
-    return (React.createElement(rebass_1.Box, { ...boxProps },
+    return (React.createElement(Flex_1.Box, { ...boxProps },
         React.createElement(StylePreview_1.StylePreview, { styleObject: props.data.UpChangeStyle },
             "Up change style ",
             !props.data.UpChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview_1.StylePreview, { mt: 2, styleObject: props.data.DownChangeStyle },
+        React.createElement(StylePreview_1.StylePreview, { styleObject: props.data.DownChangeStyle, className: "twa:mt-2" },
             "Down change style ",
             !props.data.DownChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview_1.StylePreview, { mt: 2, styleObject: props.data.NeutralChangeStyle },
+        React.createElement(StylePreview_1.StylePreview, { styleObject: props.data.NeutralChangeStyle, className: "twa:mt-2" },
             "Neutral change style ",
             !props.data.NeutralChangeStyle ? ' - no style' : '')));
 };