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

package/src/View/Dashboard/DashboardPopup.js

@@ -6,13 +6,13 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
-const rebass_1 = require("rebass");
 const DashboardManager_1 = tslib_1.__importDefault(require("../../components/Dashboard/DashboardManager"));
 const ModuleValueSelector_1 = require("../Components/ModuleValueSelector");
-const CheckBox_1 = require("../../components/CheckBox");
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const PinnedToolbarsSelector_1 = require("./PinnedToolbarsSelector");
+const Flex_1 = require("../../components/Flex");
+const ToggleButton_1 = require("../../components/ToggleButton");
+const Tabs_1 = require("../../components/Tabs");
+const Card_1 = require("../../components/Card");
 var DashboardConfigView;
 (function (DashboardConfigView) {
     DashboardConfigView["Toolbars"] = "Toolbars";
@@ -68,26 +68,30 @@ class DashboardPopupComponent extends React.Component {
             }
             return false;
         };
+        const contentCls = '';
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Mode', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
-                    React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapsed"),
-                    ' ',
-                    this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Floating")),
-                    ' ',
-                    React.createElement(CheckBox_1.CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
-                React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
-                    React.createElement(rebass_1.Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Tabbed Toolbars"),
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.PinnedToolbars, checked: this.state.DashboardConfigView == DashboardConfigView.PinnedToolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Pinned Toolbars"),
-                        ' ',
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
-                    React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars
-                            ? 'toolbars'
-                            : 'buttons', style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
-                        this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
-                        this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })),
-                        this.state.DashboardConfigView === DashboardConfigView.PinnedToolbars && (React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)))))));
+            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4" },
+                areDashboardSettingsVisible && (React.createElement(React.Fragment, null,
+                    React.createElement(Card_1.Card, null,
+                        React.createElement(Card_1.Card.Title, { gap: 8 },
+                            "Display Settings",
+                            React.createElement(ToggleButton_1.ToggleButton, { className: "twa:self-end", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility" }, this.props.IsHidden ? 'Hidden' : 'Visible')),
+                        React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:p-2" },
+                            React.createElement(ToggleButton_1.ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state" }, this.props.IsCollapsed ? 'Collapsed' : 'Expanded'),
+                            this.props.api.optionsApi.getDashboardOptions().canFloat ? (React.createElement(ToggleButton_1.ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating" }, this.props.IsFloating ? 'Floating' : 'Pinned')) : null)))),
+                React.createElement(Card_1.Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0 },
+                    React.createElement(Card_1.Card.Title, null, "Contents"),
+                    React.createElement(Card_1.Card.Body, { className: "twa:p-2" },
+                        React.createElement(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0" },
+                            React.createElement(Tabs_1.Tabs.Tab, { value: "pinned-toolbars" }, "Pinned Toolbars"),
+                            React.createElement(Tabs_1.Tabs.Tab, { value: "tabbed-toolbars" }, "Tabbed Toolbars"),
+                            React.createElement(Tabs_1.Tabs.Tab, { value: "buttons" }, "Buttons"),
+                            React.createElement(Tabs_1.Tabs.Content, { value: "pinned-toolbars", className: contentCls },
+                                React.createElement(PinnedToolbarsSelector_1.PinnedToolbarsSelector, null)),
+                            React.createElement(Tabs_1.Tabs.Content, { value: "tabbed-toolbars", className: contentCls },
+                                React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
+                            React.createElement(Tabs_1.Tabs.Content, { value: "buttons", className: contentCls },
+                                React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) }))))))));
     }
     onDashboardConfigViewChanged(event) {
         let e = event.target;

package/src/View/Dashboard/DashboardViewPanel.js

@@ -6,21 +6,21 @@ const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../components/CheckBox");
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
+const Flex_1 = require("../../components/Flex");
 class DashboardViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Dashboard__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             ' ',
-            ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.api.dashboardApi.getDashboardState().Tabs) && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse")),
+            ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.api.dashboardApi.getDashboardState().Tabs) && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse")),
             '',
-            this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+            this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
             ' ',
-            React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")));
+            React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check twa:mt-0 twa:text-2 twa:p-1`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/Dashboard/PinnedDashboard.js

@@ -4,9 +4,9 @@ exports.PinnedDashboard = 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 AdaptableContext_1 = require("../AdaptableContext");
 const DashboardToolbarFactory_1 = require("./DashboardToolbarFactory");
+const Flex_1 = require("../../components/Flex");
 const PinnedDashboard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dashboardState = (0, react_redux_1.useSelector)((state) => state.Dashboard);
@@ -15,9 +15,9 @@ const PinnedDashboard = (props) => {
     if (!pinnedToolbars || pinnedToolbars.length == 0) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(rebass_1.Flex, { p: 1, className: "ab-Dashboard__pinned" }, pinnedToolbars.map((toolbar, index) => {
-        return (React.createElement(rebass_1.Box, { key: index, mr: 1, mb: 1, className: `ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
-            React.createElement(rebass_1.Box, { className: "ab-Dashboard__toolbar-content" },
+    return (React.createElement(Flex_1.Flex, { className: "ab-Dashboard__pinned twa:p-1" }, pinnedToolbars.map((toolbar, index) => {
+        return (React.createElement(Flex_1.Box, { key: index, className: `twa:mr-1 twa:mb-1 ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
+            React.createElement(Flex_1.Box, { className: "ab-Dashboard__toolbar-content" },
                 React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: toolbar }))));
     })));
 };

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -28,12 +28,13 @@ const PinnedToolbarsSelector = (props) => {
     const tabs = React.useMemo(() => {
         return [
             {
-                Name: 'Pinned Toolbars',
+                // Name: 'Pinned Toolbars',
+                Name: '',
                 Items: pinnedToolbars ?? [],
             },
         ];
     }, [pinnedToolbars]);
-    return (React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
+    return (React.createElement(ModuleManager_1.ModuleManager, { className: "twa:flex-1", permittedActions: {
             createTab: false,
             dragAndDropTab: false,
             deleteTab: false,

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -7,11 +7,11 @@ const react_redux_1 = require("react-redux");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const DataChangeHistoryGrid_1 = require("./DataChangeHistoryGrid");
 const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
-const rebass_1 = require("rebass");
 const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
 const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
 const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
 const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
+const Flex_1 = require("../../components/Flex");
 class DataChangeHistoryPopupComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -26,26 +26,26 @@ class DataChangeHistoryPopupComponent extends React.Component {
         const enabled = changeHistoryMode === 'ACTIVE';
         const disabled = changeHistoryMode === 'INACTIVE';
         const suspended = changeHistoryMode === 'SUSPENDED';
-        const buttonPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--button-panel", padding: 2, style: { gap: 'var(--ab-space-1)' } },
+        const buttonPanel = (React.createElement(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2" },
             disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate"', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable() }, "Activate")),
             suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() }, "Resume")),
             enabled && (React.createElement(ButtonPause_1.ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() }, "Suspend")),
             (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }, "Deactivate"))));
         const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-        const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--status-panel", alignItems: 'center', style: { gap: 'var(--ab-space-1)' } },
+        const statusPanel = (React.createElement(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center' },
             enabled && (React.createElement(React.Fragment, null,
-                React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", style: { color: 'var(--ab-color-success)', fontWeight: 'bold' } }, "Active"),
-                !!activationTime && (React.createElement(rebass_1.Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
+                React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold" }, "Active"),
+                !!activationTime && (React.createElement(Flex_1.Box, { className: "twa:text-2 twa:italic" },
                     "(since ",
                     (0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat }),
                     ")")))),
             suspended && (React.createElement(React.Fragment, null,
-                React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPopup--status-suspended", style: { color: 'var(--ab-color-warn)', fontWeight: 'bold' } }, "Suspended"),
-                !!suspensionTime && (React.createElement(rebass_1.Text, { style: { fontStyle: 'italic' }, fontSize: 2 },
+                React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold" }, "Suspended"),
+                !!suspensionTime && (React.createElement(Flex_1.Box, { className: "twa:text-2 twa:italic" },
                     "(since ",
                     (0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat }),
                     ")")))),
-            disabled && (React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPopup--status-disabled", fontSize: 2 }))));
+            disabled && React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })));
         const handleChangeUndo = (changeKey) => {
             const changeToBeUndone = this.props.changeHistoryLog[changeKey];
             if (changeToBeUndone) {
@@ -63,15 +63,15 @@ class DataChangeHistoryPopupComponent extends React.Component {
             .agGridThemeAdapter.getAgGridThemeMode();
         const currentAgGridTheme = agGridThemeMode === 'legacy' ? this.props.api.themeApi.getAgGridCurrentThemeName() : '';
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup", flexDirection: "column", style: { height: '100%' } },
-                React.createElement(rebass_1.Flex, { style: {
+            React.createElement(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup twa:h-full", flexDirection: "column" },
+                React.createElement(Flex_1.Flex, { style: {
                         color: 'var(--ab-dashboard__color)',
                         background: 'var(--ab-dashboard__background)',
                     } },
-                    React.createElement(rebass_1.Flex, { flexDirection: 'row' },
+                    React.createElement(Flex_1.Flex, { flexDirection: 'row' },
                         buttonPanel,
                         statusPanel)),
-                React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--grid", "data-name": 'data-change-history--grid', flex: 1, alignSelf: 'stretch', flexDirection: 'column' },
+                React.createElement(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--grid twa:flex-1 twa:self-stretch", "data-name": 'data-change-history--grid', flexDirection: 'column' },
                     React.createElement("div", { id: adaptableContainerId }),
                     React.createElement("div", { id: agGridContainerId, className: currentAgGridTheme, style: { height: '100%' } }),
                     React.createElement(DataChangeHistoryGrid_1.DataChangeHistoryGrid, { adaptableContainerId: adaptableContainerId, agGridContainerId: agGridContainerId, changeHistoryLog: this.props.changeHistoryLog, onUndoChange: handleChangeUndo, onClearRow: handleClearRow })))));

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
-const rebass_1 = require("rebass");
 const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
 const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
 const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
@@ -14,6 +13,7 @@ const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const icons_1 = require("../../components/icons");
+const Flex_1 = require("../../components/Flex");
 const DataChangeHistoryViewPanelControl = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
@@ -33,24 +33,24 @@ const DataChangeHistoryViewPanelControl = (props) => {
     const suspended = changeHistoryMode === 'SUSPENDED';
     const gap = props.gap ?? 'var(--ab-space-1)';
     const buttonsPaddingY = props.buttonsPaddingY ?? 2;
-    const buttonPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
+    const buttonPanel = (React.createElement(Flex_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY } },
         disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
         suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": "Resume Data Change History", className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
         enabled && (React.createElement(ButtonPause_1.ButtonPause, { "aria-label": "Suspend Data Change History", className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
         (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { "aria-label": "Deactivate Data Change History", className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
     const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-    const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
+    const statusPanel = (React.createElement(Flex_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
         enabled && (React.createElement(Tooltip_1.default, { label: !!activationTime && `since ${(0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat })}` },
-            React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),
+            React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success" }, "Active"))),
         suspended && (React.createElement(Tooltip_1.default, { label: !!suspensionTime && `since ${(0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat })}` },
-            React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-suspended", fontSize: 2, style: { color: 'var(--ab-color-warn)' } }, "Suspended"))),
-        disabled && (React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate Data Tracking"))));
-    return (React.createElement(rebass_1.Flex, { flexDirection: 'row' },
+            React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn" }, "Suspended"))),
+        disabled && (React.createElement(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2" }, "Activate Data Tracking"))));
+    return (React.createElement(Flex_1.Flex, { flexDirection: 'row' },
         buttonPanel,
         statusPanel,
-        React.createElement(rebass_1.Flex, { ml: 2, alignItems: "center" },
+        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
             React.createElement(SimpleButton_1.default, { onClick: handleOpenPopup, variant: "text" },
                 React.createElement(icons_1.Icon, { name: "open-in-new" }),
-                React.createElement(rebass_1.Box, { ml: 1 }, "Show")))));
+                React.createElement(Flex_1.Box, { className: "twa:ml-1" }, "Show")))));
 };
 exports.DataChangeHistoryViewPanelControl = DataChangeHistoryViewPanelControl;

package/src/View/DataImport/DataImportPopup.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataImportPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const DataImportWizard_1 = require("./DataImportWizard");
+const Flex_1 = require("../../components/Flex");
 const DataImportPopup = (props) => {
     const [isWizardOpen, setIsWizardOpen] = React.useState(false);
     React.useEffect(() => {
@@ -18,8 +18,8 @@ const DataImportPopup = (props) => {
     }, []);
     return (React.createElement(React.Fragment, null,
         React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Data Import', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage },
-            React.createElement(rebass_1.Box, null,
-                React.createElement(HelpBlock_1.default, { mb: 2, fontSize: 3 }, "Click the 'Import Data' button to Insert or Update data into AdapTable"),
+            React.createElement(Flex_1.Box, null,
+                React.createElement(HelpBlock_1.default, { className: "twa:mb-2 twa:text-3" }, "Click the 'Import Data' button to Insert or Update data into AdapTable"),
                 React.createElement(SimpleButton_1.default, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true) }, "Import Data"))),
         isWizardOpen && (React.createElement(DataImportWizard_1.DataImportWizard, { onClose: () => {
                 setIsWizardOpen(false);

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

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

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnsSection = 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 DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
@@ -14,6 +13,7 @@ const Tag_1 = require("../../../../components/Tag");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const AdaptablePopover_1 = require("../../../AdaptablePopover");
 const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
+const Flex_1 = require("../../../../components/Flex");
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -86,7 +86,7 @@ const ColumnsSection = (props) => {
                                 abColumn: null,
                                 include: false,
                             });
-                        }, width: "100%", columns: ['label'], items: availableColumns }, params.data?.abColumn?.friendlyName ??
+                        }, className: "twa:w-full", columns: ['label'], items: availableColumns }, params.data?.abColumn?.friendlyName ??
                         params.data?.abColumn?.columnId ??
                         'Select Column'));
                 },
@@ -107,14 +107,14 @@ const ColumnsSection = (props) => {
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return (React.createElement(rebass_1.Box, { p: 2 },
-            React.createElement(HelpBlock_1.default, { color: 'var(--ab-color-error)' },
+        return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+            React.createElement(HelpBlock_1.default, { className: "twa:text-error" },
                 "No Data has been Imported. Go to ",
                 React.createElement(Tag_1.Tag, null, "Upload"),
                 " step and provide Data")));
     }
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs_1.Tabs, { mb: 2, height: "100%" },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mb-2 twa:h-full" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field' },

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

@@ -3,20 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImportSection = 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 check_box_1 = tslib_1.__importDefault(require("../../../../components/icons/check-box"));
 const Tabs_1 = require("../../../../components/Tabs");
 const DataPreview_1 = require("./DataPreview");
+const Flex_1 = require("../../../../components/Flex");
 const ImportSection = (props) => {
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs_1.Tabs, { mb: 2 },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mb-2" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Import Options"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Exclude Invalid Rows" },
                         React.createElement(check_box_1.default, null))))),
-        React.createElement(Tabs_1.Tabs, { flex: 1 },
+        React.createElement(Tabs_1.Tabs, { className: "twa:flex-1" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Preview"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(DataPreview_1.DataPreview, { onDataChange: props.onDataChange, data: props.data, errors: props.errors, editable: false })))));

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

@@ -6,6 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const index_1 = tslib_1.__importDefault(require("../../../../../components/FileDroppable/index"));
 const index_2 = tslib_1.__importDefault(require("../../../../../components/HelpBlock/index"));
 const ImportFileSection = (props) => {
-    return (React.createElement(index_1.default, { loadingText: React.createElement(index_2.default, { mb: 2 }, "File loaded , file ready to be imported."), message: props.message, helpText: "Data Import", defaultText: "Click here to select a file to load, or drag it here", dragOverText: "Drop file here to start Data Import", height: "100%", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
+    return (React.createElement(index_1.default, { loadingText: React.createElement(index_2.default, { className: "twa:mb-2" }, "File loaded , file ready to be imported."), message: props.message, helpText: "Data Import", defaultText: "Click here to select a file to load, or drag it here", dragOverText: "Drop file here to start Data Import", className: "twa:h-full", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
 };
 exports.ImportFileSection = ImportFileSection;

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

@@ -3,20 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UploadSection = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const rebass_1 = require("rebass");
 const index_1 = tslib_1.__importDefault(require("../../../../../components/Radio/index"));
 const index_2 = require("../../../../../components/Tabs/index");
 const UploadFileSection_1 = require("./UploadFileSection");
 const UploadTextSection_1 = require("./UploadTextSection");
+const Flex_1 = require("../../../../../components/Flex");
 const UploadSection = (props) => {
-    return (react_1.default.createElement(rebass_1.Flex, { p: 2, height: "100%", flexDirection: "column" },
-        react_1.default.createElement(index_2.Tabs, { mb: 2 },
+    return (react_1.default.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
+        react_1.default.createElement(index_2.Tabs, { className: "twa:mb-2" },
             react_1.default.createElement(index_2.Tabs.Tab, null, "Import Type"),
             react_1.default.createElement(index_2.Tabs.Content, null,
-                react_1.default.createElement(rebass_1.Flex, { flexDirection: "column" },
+                react_1.default.createElement(Flex_1.Flex, { flexDirection: "column" },
                     react_1.default.createElement(index_1.default, { onClick: () => props.onImportTypeChange('file'), checked: props.importType === 'file' }, "File"),
                     react_1.default.createElement(index_1.default, { onClick: () => props.onImportTypeChange('text'), checked: props.importType === 'text' }, "Text")))),
-        react_1.default.createElement(index_2.Tabs, { flex: 1 },
+        react_1.default.createElement(index_2.Tabs, { className: "twa:flex-1" },
             react_1.default.createElement(index_2.Tabs.Tab, null, props.importType === 'file' ? 'File Upload' : 'Text'),
             react_1.default.createElement(index_2.Tabs.Content, null, props.importType === 'file' ? (react_1.default.createElement(UploadFileSection_1.ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (react_1.default.createElement(UploadTextSection_1.ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange }))))));
 };

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

@@ -7,7 +7,7 @@ const index_1 = tslib_1.__importDefault(require("../../../../../components/HelpB
 const index_2 = tslib_1.__importDefault(require("../../../../../components/Textarea/index"));
 const ImportTextSection = (props) => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(index_2.default, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), height: "100%" }),
+        React.createElement(index_2.default, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), className: "twa:h-full" }),
         props.message && React.createElement(index_1.default, null, props.message)));
 };
 exports.ImportTextSection = ImportTextSection;

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

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ValidationSection = 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 Tabs_1 = require("../../../../components/Tabs");
 const DataPreview_1 = require("./DataPreview");
+const Flex_1 = require("../../../../components/Flex");
 const getRowErrors = (errors, primaryKeyValue) => {
     if (!errors) {
         return null;
@@ -18,8 +18,8 @@ const getRowErrors = (errors, primaryKeyValue) => {
     return errors[primaryKeyValue];
 };
 const ValidationSection = (props) => {
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs_1.Tabs, { mb: 2 },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mb-2" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Import Options"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
@@ -27,7 +27,7 @@ const ValidationSection = (props) => {
                         React.createElement(CheckBox_1.CheckBox, { onChange: () => {
                                 props.onSkipInvalidRowsChange(!props.skipInvalidRows);
                             }, checked: props.skipInvalidRows }))))),
-        React.createElement(Tabs_1.Tabs, { flex: 1 },
+        React.createElement(Tabs_1.Tabs, { className: "twa:flex-1" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Preview"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(DataPreview_1.DataPreview, { columnsMap: props.columnsMap, data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange })))));

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

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

package/src/View/DataSet/DataSetViewPanel.js

@@ -5,10 +5,10 @@ const tslib_1 = require("tslib");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
 const React = tslib_1.__importStar(require("react"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const rebass_1 = require("rebass");
 const react_redux_1 = require("react-redux");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const Select_1 = require("../../components/Select");
+const Flex_1 = require("../../components/Flex");
 class DataSetViewPanelComponent extends React.Component {
     getCurrentDataSet() {
         return StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.CurrentDataSetName)
@@ -29,8 +29,8 @@ class DataSetViewPanelComponent extends React.Component {
             };
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__DataSet__wrap` },
-            React.createElement(Select_1.Select, { "aria-label": 'Select Data Set', style: { width: '100%' }, placeholder: 'Select Data Set', disabled: ArrayExtensions_1.default.IsNullOrEmpty(availableDataSets), options: availableDataSets, value: currentDataSetName, className: `ab-${elementType}__DataSet__select`, onChange: (destination) => this.onSelectedDataSetChanged(destination) })));
+        return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__DataSet__wrap` },
+            React.createElement(Select_1.Select, { "aria-label": 'Select Data Set', placeholder: 'Select Data Set', disabled: ArrayExtensions_1.default.IsNullOrEmpty(availableDataSets), options: availableDataSets, value: currentDataSetName, className: `ab-${elementType}__DataSet__select twa:w-full`, onChange: (destination) => this.onSelectedDataSetChanged(destination) })));
     }
     onSelectedDataSetChanged(dataSetName) {
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(dataSetName)) {

package/src/View/Export/ExportDestinationPicker.js

@@ -7,6 +7,7 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../components/Dropd
 const icons_1 = require("../../components/icons");
 const AdaptableContext_1 = require("../AdaptableContext");
 const ButtonExport_1 = require("../Components/Buttons/ButtonExport");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const ExportDestinationPicker = ({ reportName, reportFormat, viewType, }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const exportApi = adaptable.api.exportApi;
@@ -15,7 +16,7 @@ const ExportDestinationPicker = ({ reportName, reportFormat, viewType, }) => {
     };
     const supportedDestinations = exportApi.getSupportedExportDestinations(reportFormat);
     if (supportedDestinations.length === 0 || supportedDestinations.length === 1) {
-        return (react_1.default.createElement(ButtonExport_1.ButtonExport, { marginRight: viewType !== 'StatusBar' ? 20 : undefined, paddingRight: 0, onClick: () => handleExport(supportedDestinations[0]), tooltip: "Export Report", disabled: reportName == undefined || reportFormat == undefined }));
+        return (react_1.default.createElement(ButtonExport_1.ButtonExport, { className: (0, clsx_1.default)(viewType !== 'StatusBar' ? 'twa:mr-[20px]' : undefined, 'twa:pr-0'), onClick: () => handleExport(supportedDestinations[0]), tooltip: "Export Report", disabled: reportName == undefined || reportFormat == undefined }));
     }
     const destinationItems = supportedDestinations.map((destination) => ({
         label: destination,

package/src/View/Export/ExportViewPanel.js

@@ -4,7 +4,6 @@ exports.ExportViewPanel = 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 join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const ExportRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ExportRedux"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
@@ -19,6 +18,7 @@ const ButtonSchedule_1 = require("../Components/Buttons/ButtonSchedule");
 const ReportNameSelector_1 = require("./ReportNameSelector");
 const ReportFormatSelector_1 = require("./ReportFormatSelector");
 const ExportDestinationPicker_1 = require("./ExportDestinationPicker");
+const Flex_1 = require("../../components/Flex");
 const ExportViewPanel = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const exportApi = props.api.exportApi;
@@ -31,10 +31,10 @@ const ExportViewPanel = (props) => {
         ? `Are you sure you want to delete '${currentReport.Name}'?`
         : 'Are you sure you want to delete this report?';
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement(rebass_1.Flex, { style: { gap: 5 }, flexDirection: "row", className: `ab-${elementType}__Export__panel`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Export__panel twa:gap-2`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
         React.createElement(ReportNameSelector_1.ReportNameSelector, { viewType: props.viewType, reportName: currentReportName, userReports: userReports, onReportNameSelected: (reportName) => exportApi.selectReport(reportName) }),
         React.createElement(ReportFormatSelector_1.ReportFormatSelector, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat, onReportFormatSelected: (reportFormat) => exportApi.selectFormat(reportFormat) }),
-        React.createElement(rebass_1.Flex, { className: (0, join_1.default)(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
+        React.createElement(Flex_1.Flex, { className: (0, join_1.default)(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls twa:w-full`) },
             React.createElement(ExportDestinationPicker_1.ExportDestinationPicker, { viewType: props.viewType, reportName: currentReportName, reportFormat: currentFormat }),
             React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ExportModuleId, props.moduleInfo.Popup, {
                     action: 'Edit',
@@ -45,7 +45,7 @@ const ExportViewPanel = (props) => {
                     source: 'Toolbar',
                 })), tooltip: "Create New Report", accessLevel: props.accessLevel }),
             React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Report", className: `ab-${elementType}__Export__delete`, disabled: currentReport == null, ConfirmAction: ExportRedux.ReportDelete(currentReport), ConfirmationMsg: deleteMessage, ConfirmationTitle: 'Delete Report', accessLevel: accessLevel }),
-            props.api.entitlementApi.isModuleFullEntitlement('Schedule') && (React.createElement(ButtonSchedule_1.ButtonSchedule, { marginLeft: 1, className: `ab-${elementType}__Export__schedule`, onClick: () => {
+            props.api.entitlementApi.isModuleFullEntitlement('Schedule') && (React.createElement(ButtonSchedule_1.ButtonSchedule, { className: `ab-${elementType}__Export__schedule twa:ml-1`, onClick: () => {
                     const reportSchedule = ObjectFactory_1.default.CreateReportSchedule(currentReportName, currentFormat);
                     dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ScheduleModuleId, 'SchedulePopup', {
                         action: 'New',

package/src/View/Export/ReportFormatSelector.js

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Select_1 = require("../../components/Select");
 const AdaptableContext_1 = require("../AdaptableContext");
-const rebass_1 = require("rebass");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const Flex_1 = require("../../components/Flex");
 const ReportFormatSelector = (props) => {
     const { reportName, reportFormat, onReportFormatSelected, size = 'normal' } = props;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -19,7 +19,7 @@ const ReportFormatSelector = (props) => {
         };
     });
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (react_1.default.createElement(rebass_1.Flex, { "data-name": "report-format-selector", flex: 1, minWidth: 140 },
-        react_1.default.createElement(Select_1.Select, { "aria-label": GeneralConstants_1.SELECT_REPORT_FORMAT_STRING, style: { width: '100%' }, size: size, placeholder: GeneralConstants_1.SELECT_REPORT_FORMAT_STRING, disabled: !allFormats.length || reportName == undefined, className: `ab-${elementType}__Export__format-select`, options: formatItems, onChange: (format) => onReportFormatSelected(format), value: reportFormat, isClearable: true })));
+    return (react_1.default.createElement(Flex_1.Flex, { "data-name": "report-format-selector", className: "twa:min-w-[140px] twa:flex-1" },
+        react_1.default.createElement(Select_1.Select, { "aria-label": GeneralConstants_1.SELECT_REPORT_FORMAT_STRING, size: size, placeholder: GeneralConstants_1.SELECT_REPORT_FORMAT_STRING, disabled: !allFormats.length || reportName == undefined, className: `ab-${elementType}__Export__format-select twa:w-full`, options: formatItems, onChange: (format) => onReportFormatSelected(format), value: reportFormat, isClearable: true })));
 };
 exports.ReportFormatSelector = ReportFormatSelector;