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

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlusMinusSettingsWizardSection = exports.isSettingsValid = exports.PlusMinusSettingsSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -13,6 +12,7 @@ const PlusMinusRuleWizardSection_1 = require("./PlusMinusRuleWizardSection");
 const Utilities_1 = require("../../Components/EntityRulesEditor/Utilities");
 const OnePageAdaptableWizard_2 = require("../../../View/Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
+const Flex_1 = require("../../../components/Flex");
 const PlusMinusSettingsSummary = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(React.Fragment, null,
@@ -50,17 +50,17 @@ const PlusMinusSettingsWizardSection = (props) => {
             NudgeValue: isNaN(newValue) ? '' : newValue,
         });
     };
-    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, "Plus Minus Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Nudge Value" },
-                        React.createElement(Input_1.default, { "data-name": "nudge-value", flex: 1, marginRight: 3, onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' })),
+                        React.createElement(Input_1.default, { "data-name": "nudge-value", className: "twa:flex-1 twa:mr-3", onChange: handleNudgeValueChange, placeholder: "Enter Number", type: "number", value: data.NudgeValue ?? '' })),
                     React.createElement(FormLayout_1.FormRow, { label: "Nudge Type" },
-                        React.createElement(rebass_1.Flex, null,
+                        React.createElement(Flex_1.Flex, null,
                             React.createElement(Radio_1.default, { "data-name": "nudge-type-always", value: "Always", checked: !props.hasCondition, onChange: () => props.onConditionChange(false) }, "Always Apply Nudge"),
-                            React.createElement(Radio_1.default, { "data-name": "nudge-type-condition", marginLeft: 3, value: "Expression", checked: props.hasCondition, onChange: () => props.onConditionChange(true) }, "Create a Rule")))))),
+                            React.createElement(Radio_1.default, { "data-name": "nudge-type-condition", className: "twa:ml-3", value: "Expression", checked: props.hasCondition, onChange: () => props.onConditionChange(true) }, "Create a Rule")))))),
         props.hasCondition && (React.createElement(PlusMinusRuleWizardSection_1.PlusMinusRuleWizardSection, { defaultPredicateId: "NonBlanks", onChange: props.onChange }))));
 };
 exports.PlusMinusSettingsWizardSection = PlusMinusSettingsWizardSection;

package/src/View/PlusMinus/Wizard/PlusMinusWizard.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlusMinusWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../../View/Wizard/OnePageAdaptableWizard");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const PlusMinusScopeWizardSection_1 = require("./PlusMinusScopeWizardSection");
@@ -12,6 +11,7 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const PlusMinusRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/PlusMinusRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const Flex_1 = require("../../../components/Flex");
 const PlusMinusWizard = (props) => {
     const [plusMinus, setPlusMinus] = React.useState(() => {
         const newPlusMinus = {
@@ -60,7 +60,7 @@ const PlusMinusWizard = (props) => {
                     scopeColumns: 'Plus/Minus is applied in cells in selected columns',
                     scopeDataTypes: 'Plus/Minus is applied for cells with selected data type',
                 }),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(PlusMinusScopeWizardSection_1.PlusMinusScopeWizardSection, { onChange: setPlusMinus }))),
             },
             {
@@ -73,14 +73,14 @@ const PlusMinusWizard = (props) => {
                 details: 'Select Plus/Minus 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: setPlusMinus }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
             {
                 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)));
                 },
                 title: 'Summary',

package/src/View/QuickSearch/FloatingQuickSearch/FloatingQuickSearch.js

@@ -4,7 +4,7 @@ exports.QuickSearchDrawer = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../components/Flex");
 const index_1 = require("../../../components/Drawer/index");
 const InternalRedux_1 = require("../../../Redux/ActionsReducers/InternalRedux");
 const AdaptableContext_1 = require("../../AdaptableContext");
@@ -20,7 +20,7 @@ const QuickSearchDrawer = () => {
                 adaptable.api.quickSearchApi.hideFloatingQuickSearch();
             }
         } },
-        React.createElement(rebass_1.Flex, { className: "ab-FloatinQuickSearch" },
+        React.createElement(Flex_1.Flex, { className: "ab-FloatinQuickSearch ab-FloatingQuickSearch" },
             React.createElement(QuickSearchInput_1.QuickSearchInput, { autoFocus: true }))));
 };
 exports.QuickSearchDrawer = QuickSearchDrawer;

package/src/View/QuickSearch/QuickSearchInput.d.ts

@@ -4,5 +4,6 @@ export interface QuickSearchInputProps {
     autoFocus?: boolean;
     width?: string | number;
     onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    inputClassName?: string;
 }
 export declare const QuickSearchInput: React.FunctionComponent<QuickSearchInputProps>;

package/src/View/QuickSearch/QuickSearchInput.js

@@ -9,8 +9,8 @@ const AdaptableFormControlTextClear_1 = require("../Components/Forms/AdaptableFo
 const useQuickSearchDebounced_1 = require("./useQuickSearchDebounced");
 const AdaptableContext_1 = require("../AdaptableContext");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../components/Flex");
+const twMerge_1 = require("../../twMerge");
 const QuickSearchInput = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const QuickSearchText = (0, react_redux_1.useSelector)((state) => state.QuickSearch.QuickSearchText);
@@ -21,8 +21,8 @@ const QuickSearchInput = (props) => {
         QuickSearchText,
         onRunQuickSearch,
     });
-    return (react_1.default.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { onClick: props.onClick, "aria-label": 'Quick Search', type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: (0, join_1.default)('ab-QuickSearch__control', props.className), value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: props.width ?? '10rem' }, actionTools: isServerSideRowModel ? null : (react_1.default.createElement(rebass_1.Box, { display: "flex", flexDirection: "row", alignItems: "center", flex: 'none' },
-            react_1.default.createElement(SimpleButton_1.default, { "aria-label": 'Previous Match', icon: "arrow-up", px: 0, py: 0, mr: 1, disabled: !searchText, variant: "text", onClick: () => adaptable.api.quickSearchApi.gotoPreviousMatch() }),
-            react_1.default.createElement(SimpleButton_1.default, { "aria-label": 'Next Match', icon: "arrow-down", px: 0, py: 0, mr: 1, disabled: !searchText, variant: "text", onClick: () => adaptable.api.quickSearchApi.gotoNextMatch() }))) }));
+    return (react_1.default.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { onClick: props.onClick, "aria-label": 'Quick Search', type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: (0, twMerge_1.twMerge)('ab-QuickSearch__control twa:h-full', props.className), value: searchText, OnTextChange: search, inputClassName: (0, twMerge_1.twMerge)('twa:w-[10rem]', props.inputClassName), actionTools: isServerSideRowModel ? null : (react_1.default.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-none" },
+            react_1.default.createElement(SimpleButton_1.default, { "aria-label": 'Previous Match', icon: "arrow-up", className: "twa:px-0 twa:py-0 twa:mr-1", disabled: !searchText, variant: "text", onClick: () => adaptable.api.quickSearchApi.gotoPreviousMatch() }),
+            react_1.default.createElement(SimpleButton_1.default, { "aria-label": 'Next Match', icon: "arrow-down", className: "twa:px-0 twa:py-0 twa:mr-1", disabled: !searchText, variant: "text", onClick: () => adaptable.api.quickSearchApi.gotoNextMatch() }))) }));
 };
 exports.QuickSearchInput = QuickSearchInput;

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -7,15 +7,14 @@ const react_1 = require("react");
 const react_redux_1 = require("react-redux");
 const QuickSearchRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QuickSearchRedux"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const StyleComponent_1 = require("../Components/StyleComponent");
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../components/Flex");
 const CheckBox_1 = require("../../components/CheckBox");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const useQuickSearchDebounced_1 = require("./useQuickSearchDebounced");
 const QuickSearchInput_1 = require("./QuickSearchInput");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
+const Card_1 = require("../../components/Card");
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = (0, useQuickSearchDebounced_1.useQuickSearchDebounced)(props);
     const [state, setState] = (0, react_1.useState)({
@@ -31,19 +30,21 @@ const QuickSearchPopupComponent = (props) => {
         props.api.optionsApi.getAdaptableOptions().quickSearchOptions.filterGridAfterQuickSearch =
             checked;
     };
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
-        React.createElement(Panel_1.default, { header: props.moduleInfo.FriendlyName + ' Text', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(QuickSearchInput_1.QuickSearchInput, null))),
-        React.createElement(Panel_1.default, { header: props.api.internalApi.getCorrectEnglishVariant('Behaviour'), style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
-            ' ',
-            React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                React.createElement(HelpBlock_1.default, { 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_1.default, { columns: [1, 2] },
-                    React.createElement(FormLayout_1.FormRow, null,
-                        React.createElement(CheckBox_1.CheckBox, { "data-name": "filter-quick-search-results", value: "existing", marginLeft: 1, marginRight: 3, checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions_1.default.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter using Quick Search Results"))))),
-        React.createElement(StyleComponent_1.StyleComponent, { style: { height: '100%' }, headerText: 'Cell Matching Style', api: props.api, Style: props.QuickSearchStyle, UpdateStyle: onUpdateStyle })));
+    return (React.createElement(PopupPanel_1.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_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
+            React.createElement(Card_1.Card, null,
+                React.createElement(Card_1.Card.Title, null, "Search Text"),
+                React.createElement(Card_1.Card.Body, { className: "twa:p-1 twa:w-fit" },
+                    React.createElement(QuickSearchInput_1.QuickSearchInput, null))),
+            React.createElement(Card_1.Card, null,
+                React.createElement(Card_1.Card.Title, null, "Behaviour"),
+                React.createElement(Card_1.Card.Body, { className: "twa:p-1", gap: 2 },
+                    React.createElement(HelpBlock_1.default, { 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_1.CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions_1.default.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange }, "Filter using Quick Search Results"))),
+            React.createElement(Card_1.Card.Title, { border: false, className: "twa:pt-3" }, "Cell Matching Style"),
+            React.createElement(Card_1.Card, null,
+                React.createElement(Card_1.Card.Body, null,
+                    React.createElement(StyleComponent_1.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

@@ -6,6 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const QuickSearchInput_1 = require("./QuickSearchInput");
 const QuickSearchViewPanelControl = (props) => {
     let elementType = props.viewType === 'ToolPanel' ? 'DashboardToolbar' : 'ToolPanel';
-    return React.createElement(QuickSearchInput_1.QuickSearchInput, { className: `ab-${elementType}__QuickSearch__text`, width: '15rem' });
+    return (React.createElement(QuickSearchInput_1.QuickSearchInput, { className: `ab-${elementType}__QuickSearch__text`, inputClassName: "twa:w-[15rem]" }));
 };
 exports.QuickSearchViewPanelControl = QuickSearchViewPanelControl;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScheduleScheduleWizard = exports.isScheduleValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
@@ -11,6 +10,7 @@ const Tabs_1 = require("../../../components/Tabs");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
 const isScheduleValid = (schedule, isOneOff) => {
     if (!schedule.Schedule) {
         return 'Schedule is not specified';
@@ -116,17 +116,17 @@ const ScheduleScheduleWizard = (props) => {
         const minute = `${data.Schedule?.Minute}` || '00';
         timeValue = `${hours.padStart(2, '0')}:${minute.padStart(2, '0')}`;
     }
-    return (React.createElement(rebass_1.Box, { "data-name": "schedule-setup" },
+    return (React.createElement(Flex_1.Box, { "data-name": "schedule-setup" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Schedule"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Frequency" },
-                        React.createElement(Radio_1.default, { "data-name": "frequency-recurring", mr: 2, value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
+                        React.createElement(Radio_1.default, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
                         React.createElement(Radio_1.default, { "data-name": "frequency-one-off", checked: props.isOneOff, value: "oneoff", onChange: (checked) => checked && handleIsOneOfChange(true) }, "One-Off Date")),
                     props.isOneOff ? (React.createElement(FormLayout_1.FormRow, { label: "Date" },
-                        React.createElement(AdaptableInput_1.default, { "data-name": "one-off-date", width: 300, type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: data.Schedule?.OneOffDate || '' }))) : (React.createElement(FormLayout_1.FormRow, { label: "Days" }, daysMap.map((day) => (React.createElement(CheckBox_1.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_1.default, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: data.Schedule?.OneOffDate || '' }))) : (React.createElement(FormLayout_1.FormRow, { label: "Days" }, daysMap.map((day) => (React.createElement(CheckBox_1.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(FormLayout_1.FormRow, { label: "Time" },
-                        React.createElement(AdaptableInput_1.default, { "data-name": "time", width: 300, value: timeValue, type: "time", onChange: handleTimeChange })))))));
+                        React.createElement(AdaptableInput_1.default, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange })))))));
 };
 exports.ScheduleScheduleWizard = ScheduleScheduleWizard;

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScheduleSettingsIPushPull = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../../components/Tabs");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../../components/Flex");
 const ScheduleSettingsIPushPull = (props) => {
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
@@ -47,19 +47,19 @@ const ScheduleSettingsIPushPull = (props) => {
         ...props.iPushPull,
         Transmission,
     });
-    return (React.createElement(rebass_1.Box, { "data-name": "schedule-settings-ipushpull" },
+    return (React.createElement(Flex_1.Box, { "data-name": "schedule-settings-ipushpull" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Ipushpull Schedule Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { "data-name": "report-name", disabled: props.allReports.length == 0, items: reportOptions, style: { width: 300 } }, props?.iPushPull?.IPushPullReport?.ReportName || 'Select Report')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "report-name", disabled: props.allReports.length == 0, items: reportOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.ReportName || 'Select Report')),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Folder" },
-                        React.createElement(DropdownButton_1.default, { "data-name": "folder-name", disabled: props.allFolders.length == 0, items: folderOptions, style: { width: 300 } }, props?.iPushPull?.IPushPullReport?.Folder || 'Select Folder')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "folder-name", disabled: props.allFolders.length == 0, items: folderOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.Folder || 'Select Folder')),
                     React.createElement(FormLayout_1.FormRow, { label: "Select Page" },
-                        React.createElement(DropdownButton_1.default, { "data-name": "page-name", disabled: props.allFolders.length == 0, items: pagesOptions, style: { width: 300 } }, props?.iPushPull?.IPushPullReport?.Page || 'Select Page')),
+                        React.createElement(DropdownButton_1.default, { "data-name": "page-name", disabled: props.allFolders.length == 0, items: pagesOptions, className: "twa:w-[300px]" }, props?.iPushPull?.IPushPullReport?.Page || 'Select Page')),
                     React.createElement(FormLayout_1.FormRow, { label: "Data Type" },
-                        React.createElement(Radio_1.default, { "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_1.default, { "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_1.default, { "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(FormLayout_1.FormRow, { label: "" },
                         React.createElement(OnePageAdaptableWizard_1.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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScheduleSettingsOpenFin = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../../components/Tabs");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const Flex_1 = require("../../../../components/Flex");
 const ScheduleSettingsOpenFin = (props) => {
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
@@ -19,12 +19,12 @@ const ScheduleSettingsOpenFin = (props) => {
             },
         }),
     }));
-    return (React.createElement(rebass_1.Box, { "data-name": "schedule-settings-openfin" },
+    return (React.createElement(Flex_1.Box, { "data-name": "schedule-settings-openfin" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "OpenFin Schedule Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Select Report" },
-                        React.createElement(DropdownButton_1.default, { "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_1.default, { "data-name": "select-report", columns: ['label'], className: "twa:w-[300px]", disabled: props.allReports.length == 0, items: reportOptions }, props?.openFin?.OpenFinReport?.ReportName || 'Select Report')))))));
 };
 exports.ScheduleSettingsOpenFin = ScheduleSettingsOpenFin;

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScheduleSettingsReminder = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../../components/Tabs");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const CheckBox_1 = require("../../../../components/CheckBox");
 const Select_1 = require("../../../../components/Select");
+const Flex_1 = require("../../../../components/Flex");
 const MESSAGE_TYPES = ['Success', 'Info', 'Warning', 'Error'];
 const ScheduleSettingsReminder = (props) => {
     const messageTypes = MESSAGE_TYPES.map((messageType) => ({
@@ -45,17 +45,17 @@ const ScheduleSettingsReminder = (props) => {
             DisplaySystemStatusMessage: checked,
         });
     };
-    return (React.createElement(rebass_1.Box, { "data-name": "schedule-settings-remainder" },
+    return (React.createElement(Flex_1.Box, { "data-name": "schedule-settings-remainder" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Reminder Schedule Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
-                        React.createElement(Input_1.default, { "data-name": "header", width: 300, onChange: handleHeaderChange, placeholder: "Enter Reminder Header", type: "string", value: props.reminderSchedule?.Header })),
+                        React.createElement(Input_1.default, { "data-name": "header", className: "twa:w-[300px]", onChange: handleHeaderChange, placeholder: "Enter Reminder Header", type: "string", value: props.reminderSchedule?.Header })),
                     React.createElement(FormLayout_1.FormRow, { label: "Message" },
-                        React.createElement(Input_1.default, { "data-name": "message", width: 300, onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: props.reminderSchedule?.Message })),
+                        React.createElement(Input_1.default, { "data-name": "message", className: "twa:w-[300px]", onChange: handleMessageChange, placeholder: "Enter Reminder Message", type: "string", value: props.reminderSchedule?.Message })),
                     React.createElement(FormLayout_1.FormRow, { label: "Type" },
-                        React.createElement(rebass_1.Box, { maxWidth: 300 },
+                        React.createElement(Flex_1.Box, { className: "twa:max-w-[300px]" },
                             React.createElement(Select_1.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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScheduleSettingsReport = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const Select_1 = require("../../../../components/Select");
 const Tabs_1 = require("../../../../components/Tabs");
+const Flex_1 = require("../../../../components/Flex");
 const ScheduleSettingsReport = (props) => {
     const reportOptions = props.allReports.map((report) => ({
         label: report.Name,
@@ -32,25 +32,25 @@ const ScheduleSettingsReport = (props) => {
             });
         },
     }));
-    return (React.createElement(rebass_1.Box, { "data-name": "schedule-settings-report" },
-        React.createElement(Tabs_1.Tabs, { autoFocus: false, mb: 3 },
+    return (React.createElement(Flex_1.Box, { "data-name": "schedule-settings-report" },
+        React.createElement(Tabs_1.Tabs, { autoFocus: false, className: "twa:mb-3" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Report Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Export" },
-                        React.createElement(rebass_1.Box, { maxWidth: 300 },
+                        React.createElement(Flex_1.Box, { className: "twa:max-w-[300px]" },
                             React.createElement(Select_1.Select, { "data-name": "select-report", options: reportOptions, value: props?.report?.ReportName, placeholder: "Select Export", onChange: (value) => props.onChange({
                                     ...props.report,
                                     ReportName: value,
                                 }) }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Format" },
-                        React.createElement(rebass_1.Box, { maxWidth: 300 },
+                        React.createElement(Flex_1.Box, { className: "twa:max-w-[300px]" },
                             React.createElement(Select_1.Select, { "data-name": "select-format", options: formatOptions, value: props?.report?.ReportFormat, placeholder: "Select Format", onChange: (value) => props.onChange({
                                     ...props.report,
                                     ReportFormat: value,
                                 }) }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Destination" },
-                        React.createElement(rebass_1.Box, { maxWidth: 300 },
+                        React.createElement(Flex_1.Box, { className: "twa:max-w-[300px]" },
                             React.createElement(Select_1.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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScheduleWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../../View/Wizard/OnePageAdaptableWizard");
 const ScheduleSettingsWizard_1 = require("./ScheduleSettingsWizard");
 const ScheduleScheduleWizard_1 = require("./ScheduleScheduleWizard");
@@ -13,6 +12,7 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const ScheduleRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ScheduleRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const Flex_1 = require("../../../components/Flex");
 const ScheduleWizard = (props) => {
     const data = props.data ?? props.popupParams?.value;
     const isNew = props.popupParams?.action ? props.popupParams.action === 'New' : !props.data;
@@ -83,28 +83,28 @@ const ScheduleWizard = (props) => {
                 title: 'Settings',
                 isValid: ScheduleSettingsWizard_1.isSettingsValid,
                 renderSummary: () => React.createElement(ScheduleSettingsWizard_1.ScheduleSettingsSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 3 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-3" },
                     React.createElement(ScheduleSettingsWizard_1.ScheduleSettingsWizard, { onChange: setSchedule }))),
             },
             {
                 title: 'Schedule',
                 isValid: (data) => (0, ScheduleScheduleWizard_1.isScheduleValid)(data, isOneOff),
                 renderSummary: () => React.createElement(ScheduleScheduleSummary_1.ScheduleScheduleSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 3 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-3" },
                     React.createElement(ScheduleScheduleWizard_1.ScheduleScheduleWizard, { isOneOff: isOneOff, onSetIsOneOff: setIsOneOff, onChange: setSchedule }))),
             },
             {
                 details: 'Select Schedule 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: setSchedule }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
             {
                 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)));
                 },
                 title: 'Summary',

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShortcutSettingsWizard = exports.ShortcutSettingsSummary = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const shortcutOperations_1 = require("../shortcutOperations");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -13,6 +12,7 @@ const OnePageAdaptableWizard_2 = require("../../../View/Wizard/OnePageAdaptableW
 const Tag_1 = require("../../../components/Tag");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Select_1 = require("../../../components/Select");
+const Flex_1 = require("../../../components/Flex");
 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,28 +64,25 @@ const ShortcutSettingsWizard = (props) => {
         value: key,
         label: key,
     }));
-    return (React.createElement(rebass_1.Box, { "data-name": "shortcut-column-settings" },
+    return (React.createElement(Flex_1.Box, { "data-name": "shortcut-column-settings" },
         React.createElement(Tabs_1.Tabs, { autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Shortcut Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, null,
-                        ' ',
-                        React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 0 }, "Keyboard key that, when pressed, triggers the Shortcut")),
+                        React.createElement(HelpBlock_1.default, { className: "twa:text-2 twa:mb-0" }, "Keyboard key that, when pressed, triggers the Shortcut")),
                     React.createElement(FormLayout_1.FormRow, { label: "Key" },
-                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                        React.createElement(Flex_1.Flex, { flexDirection: "row" },
                             React.createElement(Select_1.Select, { "data-name": "shortcut-key", placeholder: "Select Key", options: optionKeys, onChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }))),
                     React.createElement(FormLayout_1.FormRow, null,
-                        ' ',
-                        React.createElement(HelpBlock_1.default, { 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_1.default, { 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(FormLayout_1.FormRow, { label: "Operation" },
-                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                        React.createElement(Flex_1.Flex, { flexDirection: "row" },
                             React.createElement(Select_1.Select, { "data-name": "shortcut-operation", placeholder: "Select Operation", options: optionActions, onChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }))),
                     React.createElement(FormLayout_1.FormRow, null,
-                        ' ',
-                        React.createElement(HelpBlock_1.default, { 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_1.default, { 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(FormLayout_1.FormRow, { label: "Value" },
-                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Input_1.default, { "data-name": "shortcut-value", style: { maxWidth: 100 }, flex: 1, marginRight: 3, onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }))))))));
+                        React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                            React.createElement(Input_1.default, { "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 ?? '' }))))))));
 };
 exports.ShortcutSettingsWizard = ShortcutSettingsWizard;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShortcutWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../../View/Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
@@ -15,6 +14,7 @@ const ShortcutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReduce
 const shortcutKeys_1 = require("../shortcutKeys");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const Flex_1 = require("../../../components/Flex");
 const ShortcutWizard = (props) => {
     const [shortcut, setShortcut] = React.useState(() => {
         const shortcut = props.data ? (0, Helper_1.cloneObject)(props.data) : ObjectFactory_1.default.CreateEmptyShortcut();
@@ -55,7 +55,7 @@ const ShortcutWizard = (props) => {
                     scopeColumns: 'Shortcut is triggered for cells in selected columns',
                     scopeDataTypes: 'Shortcut is triggered for all numeric cells',
                 }),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ShortcutScopeWizardSection_1.ShortcutScopeWizardSection, { onChange: setShortcut }))),
             },
             {
@@ -70,14 +70,14 @@ const ShortcutWizard = (props) => {
                     React.createElement("b", null, "Key"),
                     " is pressed.")),
                 renderSummary: () => React.createElement(ShortcutSettingsWizard_1.ShortcutSettingsSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ShortcutSettingsWizard_1.ShortcutSettingsWizard, { availableKeys: props.availableKeys ?? availableKeys, onChange: setShortcut }))),
             },
             {
                 details: 'Select Shortcut 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: setShortcut }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
@@ -85,7 +85,7 @@ const ShortcutWizard = (props) => {
             {
                 details: 'Review the Shortcut',
                 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)));
                 },
                 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 {};