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

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -3,15 +3,14 @@ import { useState } from 'react';
 import { connect } from 'react-redux';
 import * as QuickSearchRedux from '../../Redux/ActionsReducers/QuickSearchRedux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
-import Panel from '../../components/Panel';
-import FormLayout, { FormRow } from '../../components/FormLayout';
 import { StyleComponent } from '../Components/StyleComponent';
-import { Flex } from 'rebass';
+import { Flex } from '../../components/Flex';
 import { CheckBox } from '../../components/CheckBox';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { useQuickSearchDebounced } from './useQuickSearchDebounced';
 import { QuickSearchInput } from './QuickSearchInput';
 import HelpBlock from '../../components/HelpBlock';
+import { Card } from '../../components/Card';
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced(props);
     const [state, setState] = useState({
@@ -27,19 +26,21 @@ const QuickSearchPopupComponent = (props) => {
         props.api.optionsApi.getAdaptableOptions().quickSearchOptions.filterGridAfterQuickSearch =
             checked;
     };
-    return (React.createElement(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
-        React.createElement(Panel, { header: props.moduleInfo.FriendlyName + ' Text', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
-            React.createElement(FormLayout, null,
-                React.createElement(QuickSearchInput, null))),
-        React.createElement(Panel, { header: props.api.internalApi.getCorrectEnglishVariant('Behaviour'), style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
-            ' ',
-            React.createElement(Flex, { flexDirection: "column" },
-                React.createElement(HelpBlock, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Filters the Grid to only show rows with matching cells; use with care as can cause performance issues"),
-                ' ',
-                React.createElement(FormLayout, { columns: [1, 2] },
-                    React.createElement(FormRow, null,
-                        React.createElement(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", marginLeft: 1, marginRight: 3, checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter using Quick Search Results"))))),
-        React.createElement(StyleComponent, { style: { height: '100%' }, headerText: 'Cell Matching Style', api: props.api, Style: props.QuickSearchStyle, UpdateStyle: onUpdateStyle })));
+    return (React.createElement(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col" },
+        React.createElement(Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
+            React.createElement(Card, null,
+                React.createElement(Card.Title, null, "Search Text"),
+                React.createElement(Card.Body, { className: "twa:p-1 twa:w-fit" },
+                    React.createElement(QuickSearchInput, null))),
+            React.createElement(Card, null,
+                React.createElement(Card.Title, null, "Behaviour"),
+                React.createElement(Card.Body, { className: "twa:p-1", gap: 2 },
+                    React.createElement(HelpBlock, { className: "twa:text-2 twa:w-fit" }, "Filters the Grid to only show rows with matching cells; use with care as can cause performance issues"),
+                    React.createElement(CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter using Quick Search Results"))),
+            React.createElement(Card.Title, { border: false, className: "twa:pt-3" }, "Cell Matching Style"),
+            React.createElement(Card, null,
+                React.createElement(Card.Body, null,
+                    React.createElement(StyleComponent, { headless: true, className: "twa:h-full twa:flex-1 twa:rounded-none", headerText: 'Cell Matching Style', api: props.api, Style: props.QuickSearchStyle, UpdateStyle: onUpdateStyle }))))));
 };
 function mapStateToProps(state, ownProps) {
     return {

package/src/View/QuickSearch/QuickSearchViewPanel.js

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { QuickSearchInput } from './QuickSearchInput';
 export const QuickSearchViewPanelControl = (props) => {
     let elementType = props.viewType === 'ToolPanel' ? 'DashboardToolbar' : 'ToolPanel';
-    return React.createElement(QuickSearchInput, { className: `ab-${elementType}__QuickSearch__text`, width: '15rem' });
+    return (React.createElement(QuickSearchInput, { className: `ab-${elementType}__QuickSearch__text`, inputClassName: "twa:w-[15rem]" }));
 };

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { CheckBox } from '../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Radio from '../../../components/Radio';
@@ -7,6 +6,7 @@ import { Tabs } from '../../../components/Tabs';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Box } from '../../../components/Flex';
 export const isScheduleValid = (schedule, isOneOff) => {
     if (!schedule.Schedule) {
         return 'Schedule is not specified';
@@ -117,10 +117,10 @@ export const ScheduleScheduleWizard = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Frequency" },
-                        React.createElement(Radio, { "data-name": "frequency-recurring", mr: 2, value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
+                        React.createElement(Radio, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
                         React.createElement(Radio, { "data-name": "frequency-one-off", checked: props.isOneOff, value: "oneoff", onChange: (checked) => checked && handleIsOneOfChange(true) }, "One-Off Date")),
                     props.isOneOff ? (React.createElement(FormRow, { label: "Date" },
-                        React.createElement(AdaptableInput, { "data-name": "one-off-date", width: 300, type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: data.Schedule?.OneOffDate || '' }))) : (React.createElement(FormRow, { label: "Days" }, daysMap.map((day) => (React.createElement(CheckBox, { "data-name": `day-${day.value}`, width: "33%", ml: 2, value: day.value, checked: data.Schedule?.DaysOfWeek?.includes(day.value), key: day.value, onChange: (checked) => handleDayChange(checked, day.value) }, day.label))))),
+                        React.createElement(AdaptableInput, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: data.Schedule?.OneOffDate || '' }))) : (React.createElement(FormRow, { label: "Days" }, daysMap.map((day) => (React.createElement(CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: data.Schedule?.DaysOfWeek?.includes(day.value), key: day.value, onChange: (checked) => handleDayChange(checked, day.value) }, day.label))))),
                     React.createElement(FormRow, { label: "Time" },
-                        React.createElement(AdaptableInput, { "data-name": "time", width: 300, value: timeValue, type: "time", onChange: handleTimeChange })))))));
+                        React.createElement(AdaptableInput, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange })))))));
 };

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsIPushPull.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { Tabs } from '../../../../components/Tabs';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import Radio from '../../../../components/Radio';
 import DropdownButton from '../../../../components/DropdownButton';
 import { FormDescriptionText } from '../../../Wizard/OnePageAdaptableWizard';
+import { Box } from '../../../../components/Flex';
 export const ScheduleSettingsIPushPull = (props) => {
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
@@ -49,13 +49,13 @@ export const ScheduleSettingsIPushPull = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton, { "data-name": "report-name", disabled: props.allReports.length == 0, items: reportOptions, style: { width: 300 } }, props?.iPushPull?.IPushPullReport?.ReportName || 'Select Report')),
+                        React.createElement(DropdownButton, { "data-name": "report-name", disabled: props.allReports.length == 0, items: reportOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.ReportName || 'Select Report')),
                     React.createElement(FormRow, { label: "Select Folder" },
-                        React.createElement(DropdownButton, { "data-name": "folder-name", disabled: props.allFolders.length == 0, items: folderOptions, style: { width: 300 } }, props?.iPushPull?.IPushPullReport?.Folder || 'Select Folder')),
+                        React.createElement(DropdownButton, { "data-name": "folder-name", disabled: props.allFolders.length == 0, items: folderOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.Folder || 'Select Folder')),
                     React.createElement(FormRow, { label: "Select Page" },
-                        React.createElement(DropdownButton, { "data-name": "page-name", disabled: props.allFolders.length == 0, items: pagesOptions, style: { width: 300 } }, props?.iPushPull?.IPushPullReport?.Page || 'Select Page')),
+                        React.createElement(DropdownButton, { "data-name": "page-name", disabled: props.allFolders.length == 0, items: pagesOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.Page || 'Select Page')),
                     React.createElement(FormRow, { label: "Data Type" },
-                        React.createElement(Radio, { "data-name": "data-type", mr: 3, value: "Snapshot", checked: props.iPushPull.Transmission === 'Snapshot', onChange: (checked) => checked && handleDataTypeChange('Snapshot') }, "Snapshot (one off report)"),
+                        React.createElement(Radio, { "data-name": "data-type", className: "twa:mr-3", value: "Snapshot", checked: props.iPushPull.Transmission === 'Snapshot', onChange: (checked) => checked && handleDataTypeChange('Snapshot') }, "Snapshot (one off report)"),
                         React.createElement(Radio, { "data-name": "data-live", value: "Live Data", checked: props.iPushPull.Transmission === 'Live Data', onChange: (checked) => checked && handleDataTypeChange('Live Data') }, "Live Data (real-time updates)")),
                     React.createElement(FormRow, { label: "" },
                         React.createElement(FormDescriptionText, null, "Choose whether to send ipushpull Data as 'Snapshot' (One-off report) or 'Live Data' (updating as Grid updates)")))))));

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsOpenFin.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { Tabs } from '../../../../components/Tabs';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import DropdownButton from '../../../../components/DropdownButton';
+import { Box } from '../../../../components/Flex';
 export const ScheduleSettingsOpenFin = (props) => {
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
@@ -21,5 +21,5 @@ export const ScheduleSettingsOpenFin = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton, { "data-name": "select-report", columns: ['label'], style: { width: 300 }, disabled: props.allReports.length == 0, items: reportOptions }, props?.openFin?.OpenFinReport?.ReportName || 'Select Report')))))));
+                        React.createElement(DropdownButton, { "data-name": "select-report", columns: ['label'], className: "twa:w-[300px]", disabled: props.allReports.length == 0, items: reportOptions }, props?.openFin?.OpenFinReport?.ReportName || 'Select Report')))))));
 };

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { Tabs } from '../../../../components/Tabs';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import Input from '../../../../components/Input';
 import { CheckBox } from '../../../../components/CheckBox';
 import { Select } from '../../../../components/Select';
+import { Box } from '../../../../components/Flex';
 const MESSAGE_TYPES = ['Success', 'Info', 'Warning', 'Error'];
 export const ScheduleSettingsReminder = (props) => {
     const messageTypes = MESSAGE_TYPES.map((messageType) => ({
@@ -47,11 +47,11 @@ export const ScheduleSettingsReminder = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Header" },
-                        React.createElement(Input, { "data-name": "header", width: 300, onChange: handleHeaderChange, placeholder: "Enter Reminder Header", type: "string", value: props.reminderSchedule?.Header })),
+                        React.createElement(Input, { "data-name": "header", className: "twa:w-[300px]", onChange: handleHeaderChange, placeholder: "Enter Reminder Header", type: "string", value: props.reminderSchedule?.Header })),
                     React.createElement(FormRow, { label: "Message" },
-                        React.createElement(Input, { "data-name": "message", width: 300, onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: props.reminderSchedule?.Message })),
+                        React.createElement(Input, { "data-name": "message", className: "twa:w-[300px]", onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: props.reminderSchedule?.Message })),
                     React.createElement(FormRow, { label: "Type" },
-                        React.createElement(Box, { maxWidth: 300 },
+                        React.createElement(Box, { className: "twa:max-w-[300px]" },
                             React.createElement(Select, { "data-name": "message-type", placeholder: "Select Option", options: messageTypes, value: props.reminderSchedule?.MessageType, onChange: (value) => {
                                     props.onChange({
                                         ...props.reminderSchedule,

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReport.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { Select } from '../../../../components/Select';
 import { Tabs } from '../../../../components/Tabs';
+import { Box } from '../../../../components/Flex';
 export const ScheduleSettingsReport = (props) => {
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
@@ -29,24 +29,24 @@ export const ScheduleSettingsReport = (props) => {
         },
     }));
     return (React.createElement(Box, { "data-name": "schedule-settings-report" },
-        React.createElement(Tabs, { autoFocus: false, mb: 3 },
+        React.createElement(Tabs, { autoFocus: false, className: "twa:mb-3" },
             React.createElement(Tabs.Tab, null, "Report Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Export" },
-                        React.createElement(Box, { maxWidth: 300 },
+                        React.createElement(Box, { className: "twa:max-w-[300px]" },
                             React.createElement(Select, { "data-name": "select-report", options: reportOptions, value: props?.report?.ReportName, placeholder: "Select Export", onChange: (value) => props.onChange({
                                     ...props.report,
                                     ReportName: value,
                                 }) }))),
                     React.createElement(FormRow, { label: "Format" },
-                        React.createElement(Box, { maxWidth: 300 },
+                        React.createElement(Box, { className: "twa:max-w-[300px]" },
                             React.createElement(Select, { "data-name": "select-format", options: formatOptions, value: props?.report?.ReportFormat, placeholder: "Select Format", onChange: (value) => props.onChange({
                                     ...props.report,
                                     ReportFormat: value,
                                 }) }))),
                     React.createElement(FormRow, { label: "Destination" },
-                        React.createElement(Box, { maxWidth: 300 },
+                        React.createElement(Box, { className: "twa:max-w-[300px]" },
                             React.createElement(Select, { "data-name": "select-destination", options: destinationOptions, value: props?.report?.ExportDestination, placeholder: "Select Format", onChange: (value) => props.onChange({
                                     ...props.report,
                                     ExportDestination: value,

package/src/View/Schedule/Wizard/ScheduleWizard.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { ScheduleSettingsWizard, ScheduleSettingsSummary, isSettingsValid, } from './ScheduleSettingsWizard';
 import { ScheduleScheduleWizard, isScheduleValid } from './ScheduleScheduleWizard';
@@ -9,6 +8,7 @@ import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useDispatch } from 'react-redux';
 import * as ScheduleRedux from '../../../Redux/ActionsReducers/ScheduleRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { Box } from '../../../components/Flex';
 export const ScheduleWizard = (props) => {
     const data = props.data ?? props.popupParams?.value;
     const isNew = props.popupParams?.action ? props.popupParams.action === 'New' : !props.data;
@@ -79,28 +79,28 @@ export const ScheduleWizard = (props) => {
                 title: 'Settings',
                 isValid: isSettingsValid,
                 renderSummary: () => React.createElement(ScheduleSettingsSummary, null),
-                render: () => (React.createElement(Box, { p: 3 },
+                render: () => (React.createElement(Box, { className: "twa:p-3" },
                     React.createElement(ScheduleSettingsWizard, { onChange: setSchedule }))),
             },
             {
                 title: 'Schedule',
                 isValid: (data) => isScheduleValid(data, isOneOff),
                 renderSummary: () => React.createElement(ScheduleScheduleSummary, null),
-                render: () => (React.createElement(Box, { p: 3 },
+                render: () => (React.createElement(Box, { className: "twa:p-3" },
                     React.createElement(ScheduleScheduleWizard, { isOneOff: isOneOff, onSetIsOneOff: setIsOneOff, onChange: setSchedule }))),
             },
             {
                 details: 'Select Schedule 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: setSchedule }))),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
                 title: 'Summary',

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import Input from '../../../components/Input';
 import { shortcutOperationList } from '../shortcutOperations';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -9,6 +8,7 @@ import { SummaryText } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
 import HelpBlock from '../../../components/HelpBlock';
 import { Select } from '../../../components/Select';
+import { Box, Flex } from '../../../components/Flex';
 export const isSettingsValid = (data) => {
     const shortcutKey = data.ShortcutKey && typeof data.ShortcutKey === 'string' ? '' : 'Shortcut key is not selected';
     const shortcutValue = typeof data.ShortcutValue === 'number' ? '' : 'Shortcut value is not specified';
@@ -64,21 +64,18 @@ export const ShortcutSettingsWizard = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, null,
-                        ' ',
-                        React.createElement(HelpBlock, { fontSize: 2, mb: 0 }, "Keyboard key that, when pressed, triggers the Shortcut")),
+                        React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-0" }, "Keyboard key that, when pressed, triggers the Shortcut")),
                     React.createElement(FormRow, { label: "Key" },
                         React.createElement(Flex, { flexDirection: "row" },
                             React.createElement(Select, { "data-name": "shortcut-key", placeholder: "Select Key", options: optionKeys, onChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }))),
                     React.createElement(FormRow, null,
-                        ' ',
-                        React.createElement(HelpBlock, { fontSize: 2, mb: 0 }, "Mathematical operation performed on Cell's current value (using the Shortcut's 'value') - used to calculate the Cell's new total")),
+                        React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-0" }, "Mathematical operation performed on Cell's current value (using the Shortcut's 'value') - used to calculate the Cell's new total")),
                     React.createElement(FormRow, { label: "Operation" },
                         React.createElement(Flex, { flexDirection: "row" },
                             React.createElement(Select, { "data-name": "shortcut-operation", placeholder: "Select Operation", options: optionActions, onChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }))),
                     React.createElement(FormRow, null,
-                        ' ',
-                        React.createElement(HelpBlock, { fontSize: 2, mb: 0 }, "Number that is used - together with the 'Operation' and the current cell value - to calculate the new total for the cell")),
+                        React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-0" }, "Number that is used - together with the 'Operation' and the current cell value - to calculate the new total for the cell")),
                     React.createElement(FormRow, { label: "Value" },
                         React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Input, { "data-name": "shortcut-value", style: { maxWidth: 100 }, flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }))))))));
+                            React.createElement(Input, { "data-name": "shortcut-value", className: "twa:flex-1 twa:max-w-[100px] twa:mr-3", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }))))))));
 };

package/src/View/Shortcut/Wizard/ShortcutWizard.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../../View/Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { renderScopeSummary, isScopeValid } from '../../Components/NewScopeComponent';
@@ -11,6 +10,7 @@ import * as ShortcutRedux from '../../../Redux/ActionsReducers/ShortcutRedux';
 import { shortcutKeys } from '../shortcutKeys';
 import { useAdaptable } from '../../AdaptableContext';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { Box } from '../../../components/Flex';
 export const ShortcutWizard = (props) => {
     const [shortcut, setShortcut] = React.useState(() => {
         const shortcut = props.data ? cloneObject(props.data) : ObjectFactory.CreateEmptyShortcut();
@@ -51,7 +51,7 @@ export const ShortcutWizard = (props) => {
                     scopeColumns: 'Shortcut is triggered for cells in selected columns',
                     scopeDataTypes: 'Shortcut is triggered for all numeric cells',
                 }),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ShortcutScopeWizardSection, { onChange: setShortcut }))),
             },
             {
@@ -66,14 +66,14 @@ export const ShortcutWizard = (props) => {
                     React.createElement("b", null, "Key"),
                     " is pressed.")),
                 renderSummary: () => React.createElement(ShortcutSettingsSummary, null),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ShortcutSettingsWizard, { availableKeys: props.availableKeys ?? availableKeys, onChange: setShortcut }))),
             },
             {
                 details: 'Select Shortcut 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: setShortcut }))),
                 renderSummary: renderObjectTagsSummary,
             },
@@ -81,7 +81,7 @@ export const ShortcutWizard = (props) => {
             {
                 details: 'Review the Shortcut',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
                 title: 'Summary',

package/src/View/SmartEdit/SmartEditPopup.d.ts

@@ -23,6 +23,6 @@ declare class SmartEditPopupComponent extends React.Component<SmartEditPopupProp
 }
 export declare const SmartEditPopup: import("react-redux").ConnectedComponent<typeof SmartEditPopupComponent, {
     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/SmartEdit/SmartEditPopup.js

@@ -10,9 +10,9 @@ import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { PreviewHelper } from '../../Utilities/Helpers/PreviewHelper';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import Input from '../../components/Input';
-import { Flex } from 'rebass';
 import DropdownButton from '../../components/DropdownButton';
 import SimpleButton from '../../components/SimpleButton';
+import { Flex } from '../../components/Flex';
 const preventDefault = (e) => e.preventDefault();
 class SmartEditPopupComponent extends React.Component {
     constructor(props) {
@@ -29,7 +29,7 @@ class SmartEditPopupComponent extends React.Component {
         }
         let globalValidationMessage = PreviewHelper.GetValidationMessage(this.props.PreviewInfo, `${this.props.SmartEditValue}`);
         let showPanel = this.props.PreviewInfo && StringExtensions.IsNotNullOrEmpty(`${this.props.SmartEditValue}`);
-        let previewPanel = showPanel ? (React.createElement(PreviewResultsPanel, { style: { flex: '1 1 100%', overflow: 'initial', height: '100%' }, previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
+        let previewPanel = showPanel ? (React.createElement(PreviewResultsPanel, { className: "twa:flex-[1_1_100%] twa:overflow-initial twa:h-full", previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
         const operationMenuItems = EnumExtensions.getNames(MathOperation).map((mathOperation, index) => {
             return {
                 label: mathOperation,
@@ -47,23 +47,23 @@ class SmartEditPopupComponent extends React.Component {
                 };
             }));
         }
-        return (React.createElement(PanelWithImage, { flex: 1, style: { height: '100%' }, variant: "primary", bodyProps: {
-                style: { display: 'flex', flexFlow: 'column' },
+        return (React.createElement(PanelWithImage, { className: "twa:h-full twa:flex-1 twa:p-0!", variant: "primary", bodyProps: {
+                className: 'twa:flex twa:flex-col',
             }, bodyScroll: true, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     this.submit();
                 }
             } },
-            React.createElement(Flex, { flexDirection: "row", padding: 2, "data-name": "smart-edit-operation" },
+            React.createElement(Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2" },
                 React.createElement(DropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
                     ? this.props.SmartEditOperation.name
                     : this.props.SmartEditOperation),
-                React.createElement(Input, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
-                React.createElement(SimpleButton, { "data-name": "smart-edit-apply-button", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
+                React.createElement(Input, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), className: "twa:mx-2", type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
+                React.createElement(SimpleButton, { "data-name": "smart-edit-apply-button", className: "twa:mr-2", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                         (this.props.PreviewInfo &&
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), onClick: () => {
                         this.submit();
-                    }, marginRight: 2 }, "Apply Smart Edit"),
+                    } }, "Apply Smart Edit"),
                 ' ',
                 this.props.PreviewInfo &&
                     this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' }))),

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -5,13 +5,13 @@ import * as React from 'react';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
-import { Flex } from 'rebass';
 import Input from '../../components/Input';
 import { ButtonApply } from '../Components/Buttons/ButtonApply';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { UIHelper } from '../UIHelper';
 import { connect } from 'react-redux';
 import { Select } from '../../components/Select';
+import { Flex } from '../../components/Flex';
 class SmartEditViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -1,10 +1,10 @@
 import chunk from 'lodash/chunk';
 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 { useAdaptable } from './AdaptableContext';
+import { Flex } from '../components/Flex';
 export const SpecialColumnSettingsWizardStep = (props) => {
     const adaptable = useAdaptable();
     const possibleColumnTypes = adaptable.api.columnApi.getColumnTypes() ?? [];
@@ -31,11 +31,11 @@ export const SpecialColumnSettingsWizardStep = (props) => {
         });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { marginTop: 2, autoFocus: false },
+        React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false },
             React.createElement(Tabs.Tab, null, "Column Properties"),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout, { style: { width: '100%' }, columns: [
+                    React.createElement(FormLayout, { className: "twa:w-full", columns: [
                             { name: 'first', size: '30%' },
                             { size: '30%', name: 'second' },
                             { size: '30%', name: 'third' },
@@ -52,7 +52,7 @@ export const SpecialColumnSettingsWizardStep = (props) => {
                             React.createElement(CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
                             React.createElement(CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
                             React.createElement(CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
-        Boolean(possibleColumnTypes?.length) && (React.createElement(Tabs, { marginTop: 2, autoFocus: false },
+        Boolean(possibleColumnTypes?.length) && (React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false },
             React.createElement(Tabs.Tab, null, "Column Types"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, chunk(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (React.createElement(FormRow, { key: first },

package/src/View/StateManagement/StateManagementPopup.js

@@ -8,20 +8,20 @@ import Panel from '../../components/Panel';
 export const StateManagementPopup = (props) => {
     const baseClassName = 'ab-ManageState';
     return (React.createElement(PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
-        React.createElement(Panel, { className: `${baseClassName}__panel`, "data-name": "user-state", header: 'User State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock, { marginBottom: 2 }, 'Clear all current user state that has been persisted'),
+        React.createElement(Panel, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default" },
+            React.createElement(HelpBlock, { className: "twa:mb-2" }, 'Clear all current user state that has been persisted'),
             React.createElement(HelpBlock, { style: { color: 'var(--ab-color-warn)' } }, 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied'),
-            React.createElement(ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState() }, "Clear User State")),
-        React.createElement(Panel, { className: `${baseClassName}__panel`, "data-name": "initial-state", header: 'Initial Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock, { marginTop: 2 }, 'Load Initial Adaptable State (from a .json file) - this will cause this window to close'),
+            React.createElement(ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState() }, "Clear User State")),
+        React.createElement(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default" },
+            React.createElement(HelpBlock, { className: "twa:mt-2" }, 'Load Initial Adaptable State (from a .json file) - this will cause this window to close'),
             ' ',
-            React.createElement(LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button" }, "Load Initial Adaptable State")),
-        React.createElement(Panel, { className: `${baseClassName}__panel`, "data-name": "adaptable-state", header: 'Export Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, 'Exports the currently persisted Adaptable State'),
+            React.createElement(LoadButton, { tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button" }, "Load Initial Adaptable State")),
+        React.createElement(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State' },
+            React.createElement(HelpBlock, { className: "twa:my-2" }, 'Exports the currently persisted Adaptable State'),
             ' ',
-            React.createElement(ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-adaptable-state-dropdown" }, "Select Export Destination")),
-        React.createElement(Panel, { className: `${baseClassName}__panel`, "data-name": "initial-state", header: 'Export Initial Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, 'Exports the Initial Adaptable State which was provided at design time'),
+            React.createElement(ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-adaptable-state-dropdown" }, "Select Export Destination")),
+        React.createElement(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default" },
+            React.createElement(HelpBlock, { className: "twa:my-2" }, 'Exports the Initial Adaptable State which was provided at design time'),
             ' ',
-            React.createElement(ExportDropdown, { api: props.api, type: "initialState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-initial-state-dropdown" }, "Select Export Destination"))));
+            React.createElement(ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-initial-state-dropdown" }, "Select Export Destination"))));
 };

package/src/View/StateManagement/StateManagementViewPanel.js

@@ -3,8 +3,8 @@ import join from '../../components/utils/join';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { LoadButton } from './components/LoadButton';
 import { ClearButton } from './components/ClearButton';
-import { Flex } from 'rebass';
 import { ExportDropdown } from './components/ExportDropdown';
+import { Flex } from '../../components/Flex';
 export const StateManagementViewPanel = (props) => {
     const isToolbar = props.viewType === 'Toolbar';
     const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';

package/src/View/StateManagement/handleExportState.d.ts

@@ -1,2 +1,2 @@
 import { AdaptableApi } from '../../types';
-export declare const handleExportState: (type: 'Clipboard' | 'Console' | 'JSON', name: 'adaptableState' | 'initialState', state: any, api: AdaptableApi) => void;
+export declare const handleExportState: (type: "Clipboard" | "Console" | "JSON", name: "adaptableState" | "initialState", state: any, api: AdaptableApi) => void;

package/src/View/StatusBar/AdaptableStatusBar.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Flex } from 'rebass';
 import { getStatusPanelsSelector } from '../../Redux/ActionsReducers/StatusBarRedux';
 import { useAdaptable } from '../AdaptableContext';
 import { StatusBarPanel } from './StatusBarPanel';
 import { useRerender } from '../../components/utils/useRerender';
+import { Flex } from '../../components/Flex';
 export const AdaptableStatusBar = (props) => {
     const adaptable = useAdaptable();
     const rerender = useRerender();

package/src/View/StatusBar/StatusBarPanel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
+import { FlexProps } from '../../components/Flex';
 /**
  * A panel can be:
  * - icon
@@ -13,7 +13,7 @@ import { FlexProps } from 'rebass';
  *
  * Extra actions are components so the components can call inside hooks.
  */
-export interface StatusBarPanelProps extends Omit<FlexProps, 'content' | 'popover'> {
+export interface StatusBarPanelProps extends Omit<FlexProps & React.HTMLProps<HTMLDivElement>, 'content' | 'popover'> {
     icon?: string;
     content?: React.ReactNode | React.FunctionComponent<React.PropsWithChildren<unknown>>;
     /**

package/src/View/StatusBar/StatusBarPanel.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import SimpleButton from '../../components/SimpleButton';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { AdaptablePopover } from '../AdaptablePopover';
+import { Flex, Box } from '../../components/Flex';
+import clsx from 'clsx';
 /**
  * Statusbar sub panel are similar to vs code:
  * - text
@@ -34,8 +35,8 @@ export const StatusBarPanel = (props) => {
     const preparedContent = typeof content === 'function'
         ? React.createElement(content)
         : content;
-    return (React.createElement(Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: baseClassName, onClick: handleWrapperClick, style: { cursor: shouldTriggerActionOnWrapperClick ? 'pointer' : 'default' } },
-        props.icon && (React.createElement(SimpleButton, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, mr: preparedContent ? 1 : 0 })),
+    return (React.createElement(Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: clsx(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick },
+        props.icon && (React.createElement(SimpleButton, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })),
         popover ? (React.createElement(AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth }, preparedContent)) : (preparedContent),
-        ArrayExtensions.IsNotNullOrEmpty(extraActions) && (React.createElement(Box, { ml: 1 }, extraActions?.map?.((action, index) => React.createElement(action, { key: index }))))));
+        ArrayExtensions.IsNotNullOrEmpty(extraActions) && (React.createElement(Box, { className: "twa:ml-1" }, extraActions?.map?.((action, index) => React.createElement(action, { key: index }))))));
 };