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

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import DropdownButton from '../../components/DropdownButton';
 import FieldWrap from '../../components/FieldWrap';
@@ -14,6 +13,7 @@ import { ButtonSave } from '../Components/Buttons/ButtonSave';
 import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
 import { NamedQuerySelector } from './NamedQuerySelector';
 import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
+import { Box, Flex } from '../../components/Flex';
 const QueryViewPanelComponent = (props) => {
     const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
     if (!isAdaptableReady) {
@@ -27,14 +27,11 @@ const QueryViewPanelComponent = (props) => {
             runQuery();
         }
     };
-    const buttonExpand = (React.createElement(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }));
+    const buttonExpand = (React.createElement(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
     const renderTextInput = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { marginRight: 1, width: 500, style: { overflow: 'visible' } },
+        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { className: "twa:mr-1 twa:w-[500px] twa:overflow-visible" },
             buttonExpand,
-            React.createElement(Box, { style: {
-                    position: 'relative',
-                    height: '100%',
-                }, flex: 1 },
+            React.createElement(Box, { className: "twa:flex-1 twa:relative twa:h-full" },
                 React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
                         left: 0,
                         top: 0,
@@ -50,17 +47,13 @@ const QueryViewPanelComponent = (props) => {
                         overflow: 'hidden',
                         zIndex: 100,
                     }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
-            isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, marginRight: 1 })),
-            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+            isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, className: "twa:mr-1" })),
+            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
             ' ',
-            StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap, { width: "100%", overflow: "visible" },
+            StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap, { className: "twa:w-full twa:overflow-visible" },
             ' ',
             buttonExpand,
-            React.createElement(Box, { style: {
-                    position: 'relative',
-                    minHeight: 40,
-                    width: '100%',
-                }, flex: 1 },
+            React.createElement(Box, { className: "twa:flex-1 twa:relative twa:w-full twa:min-h-[40px]" },
                 React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
                         left: 0,
                         top: 0,
@@ -77,11 +70,11 @@ const QueryViewPanelComponent = (props) => {
                         overflow: 'hidden',
                     }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
     };
-    const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
-    const suspendButton = (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
-    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", className: "twa:mr-1" }));
+    const suspendButton = (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
     const namedQuerySelector = (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
-    const columnsDropdown = (React.createElement(DropdownButton, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
+    const columnsDropdown = (React.createElement(DropdownButton, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns" },
         React.createElement(Icon, { name: 'list' })));
     const renderButtons = () => {
         return props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
@@ -90,7 +83,7 @@ const QueryViewPanelComponent = (props) => {
             columnsDropdown,
             namedQuerySelector,
             ' ')) : (React.createElement(React.Fragment, null,
-            React.createElement(ButtonPlay, { "aria-label": 'Run Grid Filter', onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, marginRight: 1 }),
+            React.createElement(ButtonPlay, { "aria-label": 'Run Grid Filter', onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, className: "twa:mr-1" }),
             ' ',
             React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
             ' ',
@@ -99,7 +92,7 @@ const QueryViewPanelComponent = (props) => {
             namedQuerySelector));
     };
     return (React.createElement(Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(Flex, { width: props.viewType === 'ToolPanel' ? '100%' : 'auto' }, renderTextInput()),
+        React.createElement(Flex, { className: props.viewType === 'ToolPanel' ? 'twa:w-full' : 'twa:w-auto' }, renderTextInput()),
         React.createElement(Flex, null, renderButtons())));
 };
 export const GridFilterPanelControl = QueryViewPanelComponent;

package/src/View/GridFilter/NamedQuerySelector.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { Icon } from '../../components/icons';
 import Panel from '../../components/Panel';
 import SimpleButton from '../../components/SimpleButton';
@@ -8,9 +7,10 @@ import { SortOrder } from '../../AdaptableState/Common/Enums';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { ButtonOpen } from '../Components/Buttons/ButtonOpen';
+import { Box, Flex } from '../../components/Flex';
 export const AvailableSearchLabel = (props) => {
-    return (React.createElement(Flex, { flexDirection: "column", textAlign: "start", width: "100%", justifyContent: "space-around" },
-        React.createElement(Box, { mb: 2, flex: 1 }, props.label),
+    return (React.createElement(Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full" },
+        React.createElement(Box, { className: "twa:mb-2 twa:flex-1" }, props.label),
         React.createElement(Tag, null, props.expression)));
 };
 export const NamedQuerySelector = (props) => {
@@ -34,15 +34,15 @@ export const NamedQuerySelector = (props) => {
         : null;
     return ArrayExtensions.IsNotNullOrEmpty(cachedQueries) ||
         ArrayExtensions.IsNotNullOrEmpty(availableSearches) ? (React.createElement(AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
-            React.createElement(Flex, { justifyContent: "stretch", flexDirection: "column" },
+            React.createElement(Flex, { flexDirection: "column", className: "twa:justify-stretch" },
                 React.createElement(Panel, { header: "Named Queries" },
                     React.createElement(Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
-                        return (React.createElement(SimpleButton, { mb: 2, variant: "text", key: index, onClick: item.onClick }, item.label));
+                        return (React.createElement(SimpleButton, { className: "twa:mb-2", variant: "text", key: index, onClick: item.onClick }, item.label));
                     }))),
                 cachedQueries ? (React.createElement(React.Fragment, null,
-                    React.createElement(Panel, { mt: 2, header: "Recent Grid Filters" },
+                    React.createElement(Panel, { className: "twa:mt-2", header: "Recent Grid Filters" },
                         React.createElement(Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
-                            return (React.createElement(SimpleButton, { disabled: props.disabled, mb: 2, variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
+                            return (React.createElement(SimpleButton, { disabled: props.disabled, className: "twa:mb-2", variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
                         }))))) : null),
         ] },
         React.createElement(SimpleButton, { disabled: props.disabled, variant: "text", icon: "folder-open" }, props.children))) : (React.createElement(ButtonOpen, { tooltip: "Load Named Query", disabled: true }));

package/src/View/GridFilter/useGridFilterExpressionEditor.d.ts

@@ -13,7 +13,11 @@ export declare const useGridFilterExpressionEditor: () => {
     isAdaptableReady: boolean;
     namedQueries: import("../../types").NamedQuery[];
     onAddCachedQuery: (cachedQuery: CachedQuery) => void;
-    availableColumns: any[];
+    availableColumns: {
+        columnId: string;
+        label: string;
+        onClick: () => void;
+    }[];
     runQuery: (newExpression?: string) => void;
     clearQuery: () => void;
     onExpand: () => void;

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -40,8 +40,9 @@ export const useGridFilterExpressionEditor = () => {
             .getQueryLanguageService()
             .validateBoolean(expression, NamedQueryModuleId).isValid;
     const isExpressionNamedQuery = namedQueries.find((sq) => sq.BooleanExpression == expression) != null;
-    let availableColumns = adaptable.api.columnApi.getColumns().map((col) => {
+    const availableColumns = adaptable.api.columnApi.getColumns().map((col) => {
         return {
+            columnId: col.columnId,
             label: col.friendlyName,
             onClick: () => {
                 // Bogdan - im sure there is a better way to do this check with fancy operators i dont know

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.d.ts

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare const AdaptableObjectsSummary: React.FunctionComponent;
+export declare const AdaptableObjectsSummary: React.FunctionComponent<{
+    className?: string;
+}>;

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { Box } from 'rebass';
+import { Box } from '../../../components/Flex';
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableObjectList } from '../../Components/AdaptableObjectList';
 import { useRerender } from '../../../components/utils/useRerender';
 import { useEffect } from 'react';
-export const AdaptableObjectsSummary = () => {
+import clsx from 'clsx';
+export const AdaptableObjectsSummary = ({ className, }) => {
     const adaptable = useAdaptable();
     const rerender = useRerender();
     useEffect(() => {
@@ -12,7 +13,7 @@ export const AdaptableObjectsSummary = () => {
     }, [adaptable]);
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return (React.createElement(Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
+    return (React.createElement(Box, { className: clsx(baseClassName, className) }, [...modules].map(([moduleName, module]) => {
         if (!module.isModuleVisible()) {
             return null;
         }

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

@@ -6,7 +6,7 @@ import { ButtonMaximise } from '../../Components/Buttons/ButtonMaximise';
 import { AdaptableObjectCollection } from '../../Components/AdaptableObjectCollection';
 import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import { AdaptablePopover } from '../../AdaptablePopover';
-import { Box } from 'rebass';
+import { Box } from '../../../components/Flex';
 export const AdaptableOptionsComponent = (props) => {
     const { api } = props;
     const getAdaptableOptionsColItems = () => [
@@ -77,7 +77,7 @@ export const AdaptableOptionsComponent = (props) => {
         setGridInfoOptions(gridInfoOptions);
     }, []);
     const [expandedComponentContainer, setExpandedComponentContainer] = useState('');
-    return (React.createElement(Box, { className: "ab-AdaptableOptions", padding: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
+    return (React.createElement(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))))));
 };
 const OptionContainerComponent = (props) => {
@@ -86,13 +86,9 @@ const OptionContainerComponent = (props) => {
         onViewModeChange(viewMode === 'expanded' ? 'collapsed' : 'expanded');
     };
     const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
-    return (React.createElement(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, { 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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import Panel from '../../../components/Panel';
 import { Tabs } from '../../../components/Tabs';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
@@ -11,6 +10,7 @@ import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
 import { ADAPTABLE_VERSION } from '../../../EnvVars';
 import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
+import clsx from 'clsx';
 const adaptableVersion = ADAPTABLE_VERSION;
 const agGridVersion = AG_GRID_VERSION;
 export const GridInfoPopup = (props) => {
@@ -78,14 +78,14 @@ export const GridInfoPopup = (props) => {
         return React.createElement(AdaptableObjectRow, { key: index, colItems: x });
     });
     const baseClassName = 'ab-GridInfo';
-    return (React.createElement(PopupPanel, { className: baseClassName, headerText: 'Grid Info', glyphicon: 'info' },
-        React.createElement(Flex, { flexDirection: "column", flex: 1, height: "100%" },
-            React.createElement(Panel, { flex: 1 },
-                React.createElement(Tabs, null,
+    return (React.createElement(PopupPanel, { className: clsx(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
+        React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
+            React.createElement(Panel.FlexBody, null,
+                React.createElement(Tabs, { className: "twa:flex-1 twa:min-h-0" },
                     React.createElement(Tabs.Tab, null, "Grid Summary"),
                     React.createElement(Tabs.Tab, null, "Grid State"),
                     React.createElement(Tabs.Content, null,
-                        React.createElement(AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
+                        React.createElement(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.Content, null,
-                        React.createElement(AdaptableObjectsSummary, null)))))));
+                        React.createElement(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" })))))));
 };

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { Text } from 'rebass';
+import { Box } from '../components/Flex';
+import { twMerge } from '../twMerge';
 export const KeyHint = (props) => {
-    return React.createElement(Text, { fontSize: 1, color: "inputcolor", ...props });
+    const cls = twMerge('twa:text-1 twa:text-inputcolor', props.className);
+    return React.createElement(Box, { ...props, className: cls });
 };

package/src/View/Layout/EditCurrentLayoutButton.js

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

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { Box } from 'rebass';
 import { Select } from '../../components/Select';
 import { useAdaptable } from '../AdaptableContext';
+import { Box } from '../../components/Flex';
 export const LayoutStatusbar = () => {
     const adaptable = useAdaptable();
     const layouts = adaptable.api.layoutApi.getLayouts();

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { connect } from 'react-redux';
-import { Flex } from 'rebass';
 import isEqual from 'lodash/isEqual';
 import { Select } from '../../components/Select';
 import join from '../../components/utils/join';
@@ -15,6 +14,7 @@ import { LAYOUT_CLONE_TOOLTIP, LAYOUT_DELETE_TOOLTIP, LAYOUT_EDIT_TOOLTIP, LAYOU
 import { isPivotLayout } from '../../Utilities/isPivotLayout';
 import DropdownButton from '../../components/DropdownButton';
 import { Icon } from '../../components/icons';
+import { Flex } from '../../components/Flex';
 export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 const LayoutViewPanelComponent = (props) => {
     const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
@@ -39,7 +39,7 @@ const LayoutViewPanelComponent = (props) => {
     const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
     return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(Flex, { style: layoutSelectStyle, flex: 1 },
+        React.createElement(Flex, { style: layoutSelectStyle, className: "twa:flex-1" },
             React.createElement(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(Flex, { flexDirection: "row", className: join(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
             React.createElement(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),

package/src/View/Layout/TransposedPopup.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import Panel from '../../components/Panel';
 import { useAdaptable } from '../AdaptableContext';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
+import { Box, Flex } from '../../components/Flex';
 const adaptableContainerId = `transposed-adaptable-container`;
 const agGridContainerId = `transposed-adaptable-ag-grid-container`;
 export const TransposedPopup = (props) => {
@@ -186,14 +186,14 @@ export const TransposedPopup = (props) => {
      * 2. create the col definitios, a col definition for each row
      * 3. create the grid
      */
-    return (React.createElement(Flex, { flexDirection: "column", width: "100%", height: "100%" },
+    return (React.createElement(Flex, { flexDirection: "column", className: "twa:w-full twa:h-full" },
         React.createElement(Panel, null,
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Elevated Column" },
                     React.createElement(ColumnSelector, { value: syntheticTransposedByColumnId, onChange: (colId) => {
                             setSyntheticTransposedByColumnId(colId);
                         } })))),
-        React.createElement(Flex, { height: "100%" },
+        React.createElement(Flex, { className: "twa:h-full" },
             React.createElement(Box, { id: adaptableContainerId }),
-            React.createElement(Box, { height: "100%", width: "100%", id: agGridContainerId }))));
+            React.createElement(Box, { className: "twa:h-full twa:w-full", id: agGridContainerId }))));
 };

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

@@ -3,7 +3,6 @@ import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { SettingsSection, SettingsSectionSummary } from './sections/SettingsSection';
-import { Box } from 'rebass';
 import { useAdaptable } from '../../AdaptableContext';
 import { useDispatch } from 'react-redux';
 import { ColumnsSection, ColumnsSectionSummary } from './sections/ColumnsSection';
@@ -18,6 +17,7 @@ import { WEIGHTED_AVERAGE_AGGREGATED_FUNCTION } from '../../../AdaptableState/Co
 import { isPivotLayout } from '../../../Utilities/isPivotLayout';
 import { PivotRowGroupingSection, PivotRowGroupingSectionSummary, } from './sections/PivotRowGroupingSection';
 import { isPivotAggregationsSectionValid, PivotAggregationsSection, PivotAggregationsSectionSummary, } from './sections/PivotAggregationsSection';
+import { Box } from '../../../components/Flex';
 export const LayoutWizard = (props) => {
     const dispatch = useDispatch();
     const adaptable = useAdaptable();
@@ -85,7 +85,7 @@ export const LayoutWizard = (props) => {
                     return true;
                 },
                 renderSummary: () => React.createElement(SettingsSectionSummary, null),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -93,7 +93,7 @@ export const LayoutWizard = (props) => {
                 isVisible: () => layoutSupportedFeatures.PivotColumns && layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Pivot Row Grouping',
                 renderSummary: () => React.createElement(PivotRowGroupingSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(PivotRowGroupingSection, { onChange: (newLayout) => {
                             setLayout(newLayout);
                         } }))),
@@ -103,7 +103,7 @@ export const LayoutWizard = (props) => {
                 details: 'Select Pivot Columns',
                 isVisible: () => layoutSupportedFeatures.PivotColumns,
                 renderSummary: () => React.createElement(PivotColumnsSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -112,7 +112,7 @@ export const LayoutWizard = (props) => {
                 details: 'Select Pivot Column Aggregations',
                 renderSummary: () => React.createElement(PivotAggregationsSectionSummary, null),
                 isValid: (data) => isPivotAggregationsSectionValid(data),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(PivotAggregationsSection, { onChange: (layout) => {
                             let newLayout = cloneObject(layout);
                             setLayout(newLayout);
@@ -123,7 +123,7 @@ export const LayoutWizard = (props) => {
                 isVisible: () => layoutSupportedFeatures.ColumnSorts,
                 renderSummary: () => React.createElement(SortSectionSummary, null),
                 details: 'Configure Aggregated Column Sorts',
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -132,7 +132,7 @@ export const LayoutWizard = (props) => {
                 isValid: (layout) => isColumnFiltersValid(layout),
                 details: 'Set Aggregated Column Filters',
                 renderSummary: () => React.createElement(FilterSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -141,13 +141,13 @@ export const LayoutWizard = (props) => {
                 isValid: (layout) => isGridFiltersValid(layout, adaptable.api),
                 details: 'Set Grid Filter',
                 renderSummary: () => React.createElement(GridFilterSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             '-',
             {
                 details: 'Review your Pivot Layout',
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(OnePageWizardSummary, null))),
                 title: 'Summary',
             },
@@ -165,7 +165,7 @@ export const LayoutWizard = (props) => {
                     return true;
                 },
                 renderSummary: () => React.createElement(SettingsSectionSummary, null),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -174,7 +174,7 @@ export const LayoutWizard = (props) => {
                 isValid: areSummaryRowsValid,
                 details: 'Configure Row Grouping',
                 renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(RowGroupingSection, { onChange: setLayout }))),
             },
             {
@@ -182,7 +182,7 @@ export const LayoutWizard = (props) => {
                 details: 'Select Columns',
                 isVisible: () => true,
                 renderSummary: () => React.createElement(ColumnsSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(ColumnsSection, { onChange: setLayout }))),
             },
             {
@@ -191,7 +191,7 @@ export const LayoutWizard = (props) => {
                 details: 'Select Column Aggregations',
                 renderSummary: () => React.createElement(AggregationsSectionSummary, null),
                 isValid: (data) => isAggregationsSectionValid(data),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(AggregationsSection, { onChange: (layout) => {
                             let newLayout = cloneObject(layout);
                             // if we do not have an weighted avg col, we need to clear the row summary if one exists
@@ -228,7 +228,7 @@ export const LayoutWizard = (props) => {
                 details: 'Configure Row Summaries',
                 renderSummary: () => React.createElement(RowSummarySectionSummary, null),
                 isVisible: () => layoutSupportedFeatures.RowSummaries,
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(RowSummarySection, { onChange: setLayout }))),
             },
             {
@@ -236,7 +236,7 @@ export const LayoutWizard = (props) => {
                 isVisible: () => layoutSupportedFeatures.ColumnSorts,
                 renderSummary: () => React.createElement(SortSectionSummary, null),
                 details: 'Configure Column Sorts',
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -245,7 +245,7 @@ export const LayoutWizard = (props) => {
                 isValid: (layout) => isColumnFiltersValid(layout),
                 details: 'Set Column Filters',
                 renderSummary: () => React.createElement(FilterSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
@@ -254,13 +254,13 @@ export const LayoutWizard = (props) => {
                 isValid: (layout) => isGridFiltersValid(layout, adaptable.api),
                 details: 'Set Grid Filter',
                 renderSummary: () => React.createElement(GridFilterSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             '-',
             {
                 details: 'Review your Table Layout',
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(OnePageWizardSummary, null))),
                 title: 'Summary',
             },

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
 import { CheckBox } from '../../../../components/CheckBox';
 import DropdownButton from '../../../../components/DropdownButton';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
@@ -12,6 +11,7 @@ import { columnFilter } from './Utilities';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
 import { Select } from '../../../../components/Select';
 import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
+import { Box, Flex } from '../../../../components/Flex';
 const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
 export const isAggregationsSectionValid = (data) => {
     const weightedAvg = data.TableAggregationColumns
@@ -128,11 +128,11 @@ const ColumnRow = (props) => {
     }
     return (React.createElement(Flex, { alignItems: "center" },
         props.column.friendlyName,
-        aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
-        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
-            React.createElement(Text, null, "Weight"),
+        aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, className: "twa:ml-2" }, currentAggFnName)),
+        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { className: "twa:bg-primary twa:ml-3", alignItems: "center" },
+            React.createElement(Box, null, "Weight"),
             ' ',
-            React.createElement(DropdownButton, { columns: ['label'], items: numericColumnsOptions, ml: 2 }, weightName)))));
+            React.createElement(DropdownButton, { columns: ['label'], items: numericColumnsOptions, className: "twa:ml-2" }, weightName)))));
 };
 export const AggregationsSection = (props) => {
     const adaptable = useAdaptable();
@@ -219,7 +219,5 @@ export const AggregationsSection = (props) => {
                                     GrandTotalRow: value,
                                 });
                             }, isClearable: true })))),
-            React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: 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, { showFilterInput: true, filter: 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 }))));
 };