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

package/src/View/GridInfo/GridInfoPopup/AdaptableOptionsComponent.js

@@ -10,7 +10,7 @@ const ButtonMaximise_1 = require("../../Components/Buttons/ButtonMaximise");
 const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
 const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const AdaptablePopover_1 = require("../../AdaptablePopover");
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../components/Flex");
 const AdaptableOptionsComponent = (props) => {
     const { api } = props;
     const getAdaptableOptionsColItems = () => [
@@ -81,7 +81,7 @@ const AdaptableOptionsComponent = (props) => {
         setGridInfoOptions(gridInfoOptions);
     }, []);
     const [expandedComponentContainer, setExpandedComponentContainer] = (0, react_1.useState)('');
-    return (React.createElement(rebass_1.Box, { className: "ab-AdaptableOptions", padding: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
+    return (React.createElement(Flex_1.Box, { className: "ab-AdaptableOptions twa:p-2", "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
         Array.from(gridInfoOptions.entries()).map(([containerName, container]) => (React.createElement(OptionContainerComponent, { key: containerName, name: containerName, label: container.containerLabel, viewMode: containerName === expandedComponentContainer ? 'expanded' : 'collapsed', onViewModeChange: (newViewMode) => setExpandedComponentContainer(newViewMode === 'expanded' ? containerName : '') }, gridInfoContainerComponents.get(containerName))))));
 };
 exports.AdaptableOptionsComponent = AdaptableOptionsComponent;
@@ -91,13 +91,9 @@ const OptionContainerComponent = (props) => {
         onViewModeChange(viewMode === 'expanded' ? 'collapsed' : 'expanded');
     };
     const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
-    return (React.createElement(PanelWithButton_1.PanelWithButton, { className: `ab-OptionsContainer options-container-${name}`, variant: "default", headerText: label, headerProps: {
-            fontSize: 3,
-            style: {
-                fontWeight: viewMode === 'expanded' ? 800 : 400,
-                cursor: 'pointer',
-            },
+    return (React.createElement(PanelWithButton_1.PanelWithButton, { className: `ab-OptionsContainer options-container-${name} twa:mb-3`, variant: "default", headerText: label, headerProps: {
+            className: `twa:text-3 twa:cursor-pointer ${viewMode === 'expanded' ? 'twa:font-extrabold' : 'twa:font-normal'}`,
             'data-name': `options-container-header-${name}`,
             onClick: () => requestViewModeChange(),
-        }, button: panelButton, style: { marginBottom: 3 } }, viewMode === 'expanded' && children));
+        }, button: panelButton }, viewMode === 'expanded' && children));
 };

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridInfoPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const Tabs_1 = require("../../../components/Tabs");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
@@ -15,6 +14,7 @@ const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel"
 const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
 const EnvVars_1 = require("../../../EnvVars");
 const AgGridModulesAdapter_1 = require("../../../agGrid/AgGridModulesAdapter");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const adaptableVersion = EnvVars_1.ADAPTABLE_VERSION;
 const agGridVersion = AgGridModulesAdapter_1.AG_GRID_VERSION;
 const GridInfoPopup = (props) => {
@@ -82,15 +82,15 @@ const GridInfoPopup = (props) => {
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
     });
     const baseClassName = 'ab-GridInfo';
-    return (React.createElement(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: 'Grid Info', glyphicon: 'info' },
-        React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, height: "100%" },
-            React.createElement(Panel_1.default, { flex: 1 },
-                React.createElement(Tabs_1.Tabs, null,
+    return (React.createElement(PopupPanel_1.PopupPanel, { className: (0, clsx_1.default)(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
+        React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
+            React.createElement(Panel_1.default.FlexBody, null,
+                React.createElement(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0" },
                     React.createElement(Tabs_1.Tabs.Tab, null, "Grid Summary"),
                     React.createElement(Tabs_1.Tabs.Tab, null, "Grid State"),
                     React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
+                        React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { className: "twa:flex-1 twa:min-h-0" /* so the collection scrolls nicely, the header remains fixed*/, colItems: propValueColItems, items: gridSummaries })),
                     React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, null)))))));
+                        React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" })))))));
 };
 exports.GridInfoPopup = GridInfoPopup;

package/src/View/KeyHint.d.ts

@@ -1,3 +1,6 @@
 import * as React from 'react';
-import { TextProps } from 'rebass';
-export declare const KeyHint: (props: TextProps) => React.JSX.Element;
+import { BoxProps } from '../components/Flex';
+export declare const KeyHint: (props: BoxProps & {
+    className?: string;
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/src/View/KeyHint.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeyHint = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../components/Flex");
+const twMerge_1 = require("../twMerge");
 const KeyHint = (props) => {
-    return React.createElement(rebass_1.Text, { fontSize: 1, color: "inputcolor", ...props });
+    const cls = (0, twMerge_1.twMerge)('twa:text-1 twa:text-inputcolor', props.className);
+    return React.createElement(Flex_1.Box, { ...props, className: cls });
 };
 exports.KeyHint = KeyHint;

package/src/View/Layout/EditCurrentLayoutButton.js

@@ -14,6 +14,6 @@ const EditCurrentLayoutButton = () => {
         const type = (0, isPivotLayout_1.isPivotLayout)(currentLayout) ? 'pivot' : 'table';
         adaptable.api.layoutApi.showLayoutEditor(layoutName, type, 'Edit');
     }, []);
-    return React.createElement(SimpleButton_1.default, { ml: 1, variant: "text", iconSize: 15, icon: "edit", onClick: handleClick });
+    return (React.createElement(SimpleButton_1.default, { className: "twa:ml-1", variant: "text", iconSize: 15, icon: "edit", onClick: handleClick }));
 };
 exports.EditCurrentLayoutButton = EditCurrentLayoutButton;

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -4,15 +4,15 @@ exports.LayoutStatusbar = 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 Select_1 = require("../../components/Select");
 const AdaptableContext_1 = require("../AdaptableContext");
+const Flex_1 = require("../../components/Flex");
 const LayoutStatusbar = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const layouts = adaptable.api.layoutApi.getLayouts();
     const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Name }));
     const currentLayout = (0, react_redux_1.useSelector)((state) => state.Layout.CurrentLayout);
-    return (React.createElement(rebass_1.Box, { onClick: (event) => {
+    return (React.createElement(Flex_1.Box, { onClick: (event) => {
             event.stopPropagation();
         } },
         React.createElement(Select_1.Select, { size: "small", options: options, value: currentLayout, onChange: (value) => {

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -15,13 +15,13 @@ export declare const LayoutViewPanelControl: import("react-redux").ConnectedComp
     onSelectLayout: (layoutName: string) => LayoutRedux.LayoutSelectAction;
     onSaveLayout: (layout: Layout) => void;
     showMissingLayoutsError: () => void;
-    Layouts: [Layout, ...Layout[]];
+    Layouts: LayoutArray;
     CurrentLayout: Layout;
     CurrentLayoutName: string;
-    viewType: "ToolPanel" | "Toolbar";
+    viewType: "Toolbar" | "ToolPanel";
     api: import("../../types").AdaptableApi;
     accessLevel: import("../../types").AccessLevel;
     moduleInfo: import("../../Strategy/Interface/IModule").ModuleInfo;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store?: import("redux").Store;
 }>;

package/src/View/Layout/LayoutViewPanel.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const Select_1 = require("../../components/Select");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
@@ -19,6 +18,7 @@ const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants")
 const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const icons_1 = require("../../components/icons");
+const Flex_1 = require("../../components/Flex");
 exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 const LayoutViewPanelComponent = (props) => {
     const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
@@ -42,10 +42,10 @@ const LayoutViewPanelComponent = (props) => {
     }));
     const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
-    return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(rebass_1.Flex, { style: layoutSelectStyle, flex: 1 },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        React.createElement(Flex_1.Flex, { style: layoutSelectStyle, className: "twa:flex-1" },
             React.createElement(Select_1.Select, { "aria-label": 'Select Layout', disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
-        React.createElement(rebass_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
+        React.createElement(Flex_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
             React.createElement(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
             React.createElement(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
             React.createElement(DropdownButton_1.default, { variant: "text", tooltip: GeneralConstants_1.LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, columns: ['label'], "data-name": "new", items: [

package/src/View/Layout/TransposedPopup.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransposedPopup = 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 Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
 const AdaptableAgGrid_1 = require("../../agGrid/AdaptableAgGrid");
+const Flex_1 = require("../../components/Flex");
 const adaptableContainerId = `transposed-adaptable-container`;
 const agGridContainerId = `transposed-adaptable-ag-grid-container`;
 const TransposedPopup = (props) => {
@@ -190,15 +190,15 @@ const TransposedPopup = (props) => {
      * 2. create the col definitios, a col definition for each row
      * 3. create the grid
      */
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", width: "100%", height: "100%" },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:w-full twa:h-full" },
         React.createElement(Panel_1.default, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Elevated Column" },
                     React.createElement(ColumnSelector_1.ColumnSelector, { value: syntheticTransposedByColumnId, onChange: (colId) => {
                             setSyntheticTransposedByColumnId(colId);
                         } })))),
-        React.createElement(rebass_1.Flex, { height: "100%" },
-            React.createElement(rebass_1.Box, { id: adaptableContainerId }),
-            React.createElement(rebass_1.Box, { height: "100%", width: "100%", id: agGridContainerId }))));
+        React.createElement(Flex_1.Flex, { className: "twa:h-full" },
+            React.createElement(Flex_1.Box, { id: adaptableContainerId }),
+            React.createElement(Flex_1.Box, { className: "twa:h-full twa:w-full", id: agGridContainerId }))));
 };
 exports.TransposedPopup = TransposedPopup;

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -7,7 +7,6 @@ const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const SettingsSection_1 = require("./sections/SettingsSection");
-const rebass_1 = require("rebass");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const react_redux_1 = require("react-redux");
 const ColumnsSection_1 = require("./sections/ColumnsSection");
@@ -22,6 +21,7 @@ const RowSummary_1 = require("../../../AdaptableState/Common/RowSummary");
 const isPivotLayout_1 = require("../../../Utilities/isPivotLayout");
 const PivotRowGroupingSection_1 = require("./sections/PivotRowGroupingSection");
 const PivotAggregationsSection_1 = require("./sections/PivotAggregationsSection");
+const Flex_1 = require("../../../components/Flex");
 const LayoutWizard = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -89,7 +89,7 @@ const LayoutWizard = (props) => {
                     return true;
                 },
                 renderSummary: () => React.createElement(SettingsSection_1.SettingsSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -97,7 +97,7 @@ const LayoutWizard = (props) => {
                 isVisible: () => layoutSupportedFeatures.PivotColumns && layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Pivot Row Grouping',
                 renderSummary: () => React.createElement(PivotRowGroupingSection_1.PivotRowGroupingSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(PivotRowGroupingSection_1.PivotRowGroupingSection, { onChange: (newLayout) => {
                             setLayout(newLayout);
                         } }))),
@@ -107,7 +107,7 @@ const LayoutWizard = (props) => {
                 details: 'Select Pivot Columns',
                 isVisible: () => layoutSupportedFeatures.PivotColumns,
                 renderSummary: () => React.createElement(PivotColumnsSection_1.PivotColumnsSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -116,7 +116,7 @@ const LayoutWizard = (props) => {
                 details: 'Select Pivot Column Aggregations',
                 renderSummary: () => React.createElement(PivotAggregationsSection_1.PivotAggregationsSectionSummary, null),
                 isValid: (data) => (0, PivotAggregationsSection_1.isPivotAggregationsSectionValid)(data),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(PivotAggregationsSection_1.PivotAggregationsSection, { onChange: (layout) => {
                             let newLayout = (0, Helper_1.cloneObject)(layout);
                             setLayout(newLayout);
@@ -127,7 +127,7 @@ const LayoutWizard = (props) => {
                 isVisible: () => layoutSupportedFeatures.ColumnSorts,
                 renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
                 details: 'Configure Aggregated Column Sorts',
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -136,7 +136,7 @@ const LayoutWizard = (props) => {
                 isValid: (layout) => (0, FilterSection_1.isColumnFiltersValid)(layout),
                 details: 'Set Aggregated Column Filters',
                 renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -145,13 +145,13 @@ const LayoutWizard = (props) => {
                 isValid: (layout) => (0, GridFilterSection_1.isGridFiltersValid)(layout, adaptable.api),
                 details: 'Set Grid Filter',
                 renderSummary: () => React.createElement(GridFilterSection_1.GridFilterSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             '-',
             {
                 details: 'Review your Pivot Layout',
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
                 title: 'Summary',
             },
@@ -169,7 +169,7 @@ const LayoutWizard = (props) => {
                     return true;
                 },
                 renderSummary: () => React.createElement(SettingsSection_1.SettingsSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -178,7 +178,7 @@ const LayoutWizard = (props) => {
                 isValid: RowSummarySection_1.areSummaryRowsValid,
                 details: 'Configure Row Grouping',
                 renderSummary: () => React.createElement(RowGroupingSection_1.RowGroupingSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }))),
             },
             {
@@ -186,7 +186,7 @@ const LayoutWizard = (props) => {
                 details: 'Select Columns',
                 isVisible: () => true,
                 renderSummary: () => React.createElement(ColumnsSection_1.ColumnsSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(ColumnsSection_1.ColumnsSection, { onChange: setLayout }))),
             },
             {
@@ -195,7 +195,7 @@ const LayoutWizard = (props) => {
                 details: 'Select Column Aggregations',
                 renderSummary: () => React.createElement(AggregationsSection_1.AggregationsSectionSummary, null),
                 isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(AggregationsSection_1.AggregationsSection, { onChange: (layout) => {
                             let newLayout = (0, Helper_1.cloneObject)(layout);
                             // if we do not have an weighted avg col, we need to clear the row summary if one exists
@@ -232,7 +232,7 @@ const LayoutWizard = (props) => {
                 details: 'Configure Row Summaries',
                 renderSummary: () => React.createElement(RowSummarySection_1.RowSummarySectionSummary, null),
                 isVisible: () => layoutSupportedFeatures.RowSummaries,
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(RowSummarySection_1.RowSummarySection, { onChange: setLayout }))),
             },
             {
@@ -240,7 +240,7 @@ const LayoutWizard = (props) => {
                 isVisible: () => layoutSupportedFeatures.ColumnSorts,
                 renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
                 details: 'Configure Column Sorts',
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -249,7 +249,7 @@ const LayoutWizard = (props) => {
                 isValid: (layout) => (0, FilterSection_1.isColumnFiltersValid)(layout),
                 details: 'Set Column Filters',
                 renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -258,13 +258,13 @@ const LayoutWizard = (props) => {
                 isValid: (layout) => (0, GridFilterSection_1.isGridFiltersValid)(layout, adaptable.api),
                 details: 'Set Grid Filter',
                 renderSummary: () => React.createElement(GridFilterSection_1.GridFilterSectionSummary, null),
-                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             '-',
             {
                 details: 'Review your Table Layout',
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
                 title: 'Summary',
             },

package/src/View/Layout/Wizard/sections/AggregationsSection.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AggregationsSection = exports.AggregationsSectionSummary = exports.isAggregationsSectionValid = 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 FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
@@ -16,6 +15,7 @@ const Utilities_1 = require("./Utilities");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
 const Select_1 = require("../../../../components/Select");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const Flex_1 = require("../../../../components/Flex");
 const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
 const isAggregationsSectionValid = (data) => {
     const weightedAvg = data.TableAggregationColumns
@@ -40,7 +40,7 @@ const AggregationsSectionSummary = () => {
     else {
         content = React.createElement(Tag_1.Tag, null, "No Aggregations");
     }
-    return React.createElement(rebass_1.Box, null, content);
+    return React.createElement(Flex_1.Box, null, content);
 };
 exports.AggregationsSectionSummary = AggregationsSectionSummary;
 const ColumnRow = (props) => {
@@ -132,13 +132,13 @@ const ColumnRow = (props) => {
             ? adaptable.api.columnApi.getFriendlyNameForColumnId(aggValue.weightedColumnId)
             : 'Select Weight';
     }
-    return (React.createElement(rebass_1.Flex, { alignItems: "center" },
+    return (React.createElement(Flex_1.Flex, { alignItems: "center" },
         props.column.friendlyName,
-        aggValue && (React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
-        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(rebass_1.Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
-            React.createElement(rebass_1.Text, null, "Weight"),
+        aggValue && (React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggOptions, className: "twa:ml-2" }, currentAggFnName)),
+        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex_1.Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
+            React.createElement(Flex_1.Box, null, "Weight"),
             ' ',
-            React.createElement(DropdownButton_1.default, { columns: ['label'], items: numericColumnsOptions, ml: 2 }, weightName)))));
+            React.createElement(DropdownButton_1.default, { columns: ['label'], items: numericColumnsOptions, className: "twa:ml-2" }, weightName)))));
 };
 const AggregationsSection = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -209,7 +209,7 @@ const AggregationsSection = (props) => {
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
         React.createElement(Tabs_1.Tabs.Tab, null, "Column Aggregations"),
         React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(rebass_1.Flex, null,
+            React.createElement(Flex_1.Flex, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: 'Omit Aggregation from Header' },
                         React.createElement(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader })),
@@ -225,8 +225,6 @@ const AggregationsSection = (props) => {
                                     GrandTotalRow: value,
                                 });
                             }, isClearable: true })))),
-            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.TableAggregationColumns || []).map((agg) => agg.ColumnId), allowReorder: () => true, xSelectedLabel: () => {
-                    return `Active aggregations:`;
-                }, onChange: handleColumnsSelectionChange }))));
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (layout.TableAggregationColumns || []).map((agg) => agg.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }))));
 };
 exports.AggregationsSection = AggregationsSection;