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

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -6,13 +6,13 @@ import { Icon } from '../../../../components/icons';
 import { AdaptableObjectList } from '../../AdaptableObjectList';
 import { ButtonNew } from '../../Buttons/ButtonNew';
 import { PopupPanel } from './PopupPanel';
-import { Flex } from 'rebass';
 import { CheckBox } from '../../../../components/CheckBox';
 import { LayoutShowNonExtendedObjects } from '../../../../Redux/ActionsReducers/InternalRedux';
 import SimpleButton from '../../../../components/SimpleButton';
 import { useAdaptable } from '../../../AdaptableContext';
 import { useEffect } from 'react';
 import { useRerender } from '../../../../components/utils/useRerender';
+import { Flex } from '../../../../components/Flex';
 export const AdaptablePopupModuleView = (props) => {
     /**
      * This triggers a render for each state change.
@@ -100,7 +100,7 @@ export const AdaptablePopupModuleView = (props) => {
                 dispatch(unsuspendAllAction);
             }
         };
-        suspendButton = (React.createElement(SimpleButton, { mr: 2, onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All'));
+        suspendButton = (React.createElement(SimpleButton, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All'));
     }
     const handleWizardClose = () => {
         setAbObjectType(null);
@@ -121,8 +121,8 @@ export const AdaptablePopupModuleView = (props) => {
         if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             return;
         }
-        return (React.createElement(Flex, { justifyContent: "flex-start" },
-            React.createElement(CheckBox, { padding: 0, margin: 0, checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch(LayoutShowNonExtendedObjects(checked)) },
+        return (React.createElement(Flex, { className: "twa:justify-start" },
+            React.createElement(CheckBox, { className: "twa:m-0 twa:p-0", checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch(LayoutShowNonExtendedObjects(checked)) },
                 "Show ",
                 moduleInfo.FriendlyName,
                 "s not available in current Layout")));

package/src/View/Components/Popups/AdaptablePopup/Navigation.js

@@ -1,53 +1,85 @@
 import * as React from 'react';
+import { useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
-import join from '../../../../components/utils/join';
-import { useGlobalEvent } from '../../../../components/utils/useGlobalEvent';
+import clsx from 'clsx';
 import { AdaptableIconComponent } from '../../AdaptableIconComponent';
+import { targetOwn } from '../../../../components/twUtils';
+import { useAdaptable } from '../../../AdaptableContext';
+const navigationItemClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
+const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, showModuleIcons, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (isActive) {
+            ref.current?.focus();
+        }
+    }, [isActive]);
+    return (React.createElement("li", { className: clsx(navigationItemClassName, {
+            [`${navigationItemClassName}--active`]: isActive,
+        }) },
+        React.createElement("button", { ref: ref, type: "button", className: clsx(`${navigationItemClassName}__Button ${targetOwn.focusOutline}`, {
+                'twa:flex twa:flex-row twa:items-center twa:gap-2': 'layout flex',
+                [`twa:bg-transparent`]: !isActive,
+                'twa:bg-accent twa:text-accentlight': isActive,
+                'twa:px-2 twa:py-1.5': true,
+                'twa:rounded-standard': true,
+            }), onMouseDown: () => onAction(), "data-name": dataName, tabIndex: isActive ? 0 : -1 },
+            showModuleIcons && menuItem.icon && (React.createElement(AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })),
+            customIcon ? React.createElement(AdaptableIconComponent, { icon: customIcon }) : null,
+            menuItem.label)));
+};
 export const Navigation = (props) => {
+    const { api } = useAdaptable();
+    const makeActive = (menuItem) => {
+        dispatch(menuItem.reduxAction);
+    };
+    const getMenuItemForDirection = (direction) => {
+        const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.category === props.activeItem || item.label === props.activeItem));
+        let foundMenuItem = null;
+        if (direction === -1) {
+            let candidate = props.menuItems[currentIndex - 1] !== '-'
+                ? props.menuItems[currentIndex - 1]
+                : props.menuItems[currentIndex - 2];
+            foundMenuItem = candidate ? candidate : props.menuItems[props.menuItems.length - 1];
+        }
+        else {
+            let candidate = props.menuItems[currentIndex + 1] !== '-'
+                ? props.menuItems[currentIndex + 1]
+                : props.menuItems[currentIndex + 2];
+            foundMenuItem = candidate ? candidate : props.menuItems[0];
+        }
+        return foundMenuItem === '-' ? null : foundMenuItem;
+    };
     const dispatch = useDispatch();
     const handleKeyPress = React.useCallback((event) => {
-        if ((event.ctrlKey || event.metaKey) &&
-            (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
-            const isKeyUp = event.code === 'ArrowUp';
-            const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.category === props.activeItem || item.label === props.activeItem));
+        const { code } = event;
+        if (code === 'ArrowUp' || code === 'ArrowDown' || code === 'Home' || code === 'End') {
+            event.preventDefault();
+            event.stopPropagation();
             let nextMenuItem = null;
-            if (isKeyUp) {
-                let candidate = props.menuItems[currentIndex - 1] !== '-'
-                    ? props.menuItems[currentIndex - 1]
-                    : props.menuItems[currentIndex - 2];
-                nextMenuItem = candidate ? candidate : props.menuItems[props.menuItems.length - 1];
+            if (code === 'Home') {
+                nextMenuItem = props.menuItems[0];
+            }
+            else if (code === 'End') {
+                nextMenuItem = props.menuItems[props.menuItems.length - 1];
             }
             else {
-                let candidate = props.menuItems[currentIndex + 1] !== '-'
-                    ? props.menuItems[currentIndex + 1]
-                    : props.menuItems[currentIndex + 2];
-                nextMenuItem = candidate ? candidate : props.menuItems[0];
+                nextMenuItem = getMenuItemForDirection(event.code === 'ArrowUp' ? -1 : 1);
             }
-            if (nextMenuItem && nextMenuItem !== '-') {
-                dispatch(nextMenuItem.reduxAction);
+            if (nextMenuItem) {
+                makeActive(nextMenuItem);
             }
         }
     }, [props.activeItem, props.menuItems]);
-    useGlobalEvent('keydown', handleKeyPress);
-    return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation" },
-        React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List" }, props.menuItems.map((menuItem, index) => {
-            const baseClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
+    return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1 },
+        React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col", onKeyDown: handleKeyPress }, props.menuItems.map((menuItem, index) => {
             if (menuItem === '-') {
-                return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
+                return (React.createElement("li", { key: `separator-${index}`, className: `${navigationItemClassName}__Separator` }));
             }
             const isActive = props.activeItem === menuItem.category || menuItem.label === props.activeItem;
-            const className = join(baseClassName, isActive && `${baseClassName}--active`);
             let customIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
             const dataName = menuItem.category === 'CustomSettingsPanel'
                 ? `CSP-${menuItem.label}`
                 : menuItem.category ?? menuItem.label;
-            return (React.createElement("li", { className: className, key: menuItem.label },
-                React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
-                        dispatch(menuItem.reduxAction);
-                    }, "data-name": dataName },
-                    props.api.optionsApi.getSettingsPanelOptions().showModuleIcons &&
-                        menuItem.icon && (React.createElement(AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
-                    customIcon && React.createElement(AdaptableIconComponent, { icon: customIcon }),
-                    menuItem.label)));
+            return (React.createElement(NavigationItem, { key: menuItem.label, menuItem: menuItem, isActive: isActive, dataName: dataName, customIcon: customIcon, showModuleIcons: api.optionsApi.getSettingsPanelOptions().showModuleIcons, onAction: () => makeActive(menuItem) }));
         }))));
 };

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.d.ts

@@ -2,10 +2,12 @@ import * as React from 'react';
 export interface PanelWithButtonProps {
     buttonClick?: () => void;
     className?: string;
+    bodyClassName?: string;
     button?: React.ReactElement<any>;
     headerText: string;
     glyphicon?: string;
     infoLink?: string;
     infoLinkDisabled?: boolean;
+    scrollable?: boolean;
 }
 export declare const PopupPanel: React.FunctionComponent<React.PropsWithChildren<PanelWithButtonProps>>;

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.js

@@ -1,19 +1,18 @@
 import * as React from 'react';
-import { Flex, Box } from 'rebass';
-import join from '../../../../components/utils/join';
+import clsx from 'clsx';
 import { ButtonInfo } from '../../Buttons/ButtonInfo';
-const Noop = () => React.createElement(React.Fragment, null);
+import { Box, Flex } from '../../../../components/Flex';
 export const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return (React.createElement(Flex, { flexDirection: "column", flex: "1 1 0", className: join(props.className, baseClassName) },
-        React.createElement("div", { className: `${baseClassName}__Header` },
+    return (React.createElement(Box, { className: clsx('twa:flex-1 twa:flex twa:flex-col twa:gap-3 twa:p-1', props.className, baseClassName, props.scrollable === false ? 'twa:overflow-hidden' : 'twa:overflow-auto') },
+        React.createElement("div", { className: `${baseClassName}__Header twa:flex` },
             React.createElement(Flex, { alignItems: "center" },
-                React.createElement(Box, { marginRight: 0, "data-name": "space-before" }),
+                React.createElement(Box, { className: "twa:mr-0", "data-name": "space-before" }),
                 React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
-                React.createElement(Box, { marginRight: 2, "data-name": "space-after" }),
+                React.createElement(Box, { className: "twa:mr-2", "data-name": "space-after" }),
                 props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
                     ) }))),
-            React.createElement(Box, { style: { flex: 1 } }),
+            React.createElement(Box, { className: "twa:flex-1" }),
             props.button),
-        React.createElement(Box, { className: `${baseClassName}__Body`, width: "100%", height: "100%", flex: 1 }, props.children)));
+        React.createElement(Box, { className: clsx('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName) }, props.children)));
 };

package/src/View/Components/Popups/AdaptablePopup/TopBar.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { Flex, Text } from 'rebass';
+import clsx from 'clsx';
 import { useAdaptable } from '../../../AdaptableContext';
 import { AdaptableIconComponent } from '../../AdaptableIconComponent';
+import { Box } from '../../../../components/Flex';
+const baseClassName = 'ab-Adaptable-Popup__TopBar';
 export const TopBar = (props) => {
-    const baseClassName = 'ab-Adaptable-Popup__TopBar';
     const adaptable = useAdaptable();
     const applicationIcon = adaptable.api.optionsApi.getUserInterfaceOptions()?.applicationIcon;
     let icon = React.createElement(React.Fragment, null);
@@ -17,8 +18,8 @@ export const TopBar = (props) => {
     else if (typeof props.icon === 'object') {
         icon = React.createElement(AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
     }
-    return (React.createElement(Flex, { flex: 0, className: baseClassName },
+    return (React.createElement(Box, { className: clsx(baseClassName, 'twa:font-medium twa:p-3', 'twa:flex twa:flex-row twa:items-center twa:flex-0 twa:gap-2', 'twa:bg-(--ab-dashboard-header__background) twa:text-(--ab-dashboard-header__color)') },
         icon,
-        React.createElement(Text, { className: `${baseClassName}__Title` }, props.children)));
+        React.createElement(Box, { className: `${baseClassName}__Title` }, props.children)));
 };
 export default TopBar;

package/src/View/Components/Popups/AdaptablePopup/useMenuItems.d.ts

@@ -1,2 +1,2 @@
 import { AdaptableMenuItem } from '../../../../../types';
-export declare const useMenuItems: () => (AdaptableMenuItem | '-')[];
+export declare const useMenuItems: () => (AdaptableMenuItem | "-")[];

package/src/View/Components/Popups/AdaptablePopupAlert.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { PanelWithImage } from '../Panels/PanelWithImage';
 import { UIHelper } from '../../UIHelper';
-import { Flex, Text, Box } from 'rebass';
 import Dialog from '../../../components/Dialog';
 import { AdaptableFormComponent } from '../../../components/AdaptableFormComponent';
 import { useState } from 'react';
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableIconComponent } from '../AdaptableIconComponent';
+import { Box, Flex } from '../../../components/Flex';
 export const AdaptablePopupAlert = (props) => {
     const messageType = props.adaptableAlert.alertDefinition.MessageType || 'Error';
     const msg = props.adaptableAlert.message ?? '';
@@ -39,11 +39,10 @@ export const AdaptablePopupAlert = (props) => {
         if (!icon) {
             return null;
         }
-        return (React.createElement(Flex, { flexDirection: "column", alignSelf: "end", alignItems: "right" },
-            ' ',
+        return (React.createElement(Flex, { flexDirection: "column", className: "twa:self-end", alignItems: "end" },
             React.createElement(AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
     };
-    const content = (React.createElement(PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { padding: 2 } },
+    const content = (React.createElement(PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { className: 'twa:p-2' } },
         React.createElement("div", null,
             React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" },
                 renderApplicationIcon(adaptableOptions.notificationsOptions.showApplicationIcon &&
@@ -51,12 +50,12 @@ export const AdaptablePopupAlert = (props) => {
                 typeof msg === 'string'
                     ? msg.split('\n').map(function (item, index) {
                         return (React.createElement(Flex, { flexDirection: "row", key: index },
-                            React.createElement(Text, { key: index, margin: 2 },
+                            React.createElement(Box, { key: index, className: "twa:m-2" },
                                 item,
                                 React.createElement("br", null))));
                     })
                     : msg),
-            React.createElement(Box, { margin: 2 }, adaptableForm ? (React.createElement(AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
+            React.createElement(Box, { className: "twa:m-2" }, adaptableForm ? (React.createElement(AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
                     props.onClose();
                     // we want to give the current popup time to close
                     // and we reopen with a delay in case this button action causes another popup
@@ -64,9 +63,5 @@ export const AdaptablePopupAlert = (props) => {
                         button.onClick?.(button, context);
                     }, 20);
                 } })) : null))));
-    return props.headless ? (content) : (React.createElement(Dialog, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, style: {
-            minHeight: 'auto',
-            minWidth: '20vw',
-            maxWidth: '70vw',
-        } }, content));
+    return props.headless ? (content) : (React.createElement(Dialog, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, className: "twa:min-h-auto twa:min-w-[20vw] twa:max-w-[70vw]" }, content));
 };

package/src/View/Components/Popups/AdaptablePopupConfirmation.js

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { UIHelper } from '../../UIHelper';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import { PanelWithImage } from '../Panels/PanelWithImage';
-import { Flex, Box, Text } from 'rebass';
 import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import Dialog from '../../../components/Dialog';
 import { CheckBox } from '../../../components/CheckBox';
 import * as InternalRedux from '../../../Redux/ActionsReducers/InternalRedux';
 import { useDispatch } from 'react-redux';
+import { Box, Flex } from '../../../components/Flex';
 export const AdaptablePopupConfirmation = (props) => {
     const dispatch = useDispatch();
     const [disableDeleteConfirmation, setDisableDeleteConfirmation] = React.useState(false);
@@ -42,18 +42,18 @@ export const AdaptablePopupConfirmation = (props) => {
         React.createElement(PanelWithImage, { header: header, icon: glyph, variant: "primary" },
             React.createElement("div", null,
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.messsage.split('\n').map(function (item, index) {
-                    return (React.createElement(Text, { key: index, margin: 2 },
+                    return (React.createElement(Box, { key: index, className: "twa:m-2" },
                         item,
                         React.createElement("br", null)));
                 })),
-                React.createElement(Box, { pl: 2 },
+                React.createElement(Box, { className: "twa:pl-2" },
                     React.createElement(CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
                             setDisableDeleteConfirmation(!disableDeleteConfirmation);
                         } }, "Do not show this again")),
-                props.showInputBox && (React.createElement(Box, { padding: 2, "data-name": "body" },
+                props.showInputBox && (React.createElement(Box, { className: "twa:p-2", "data-name": "body" },
                     React.createElement("p", null, "Please enter a comment to confirm"),
-                    React.createElement(Input, { marginTop: 2, width: '100%', value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
-                React.createElement(Flex, { marginTop: 3, padding: 2, "data-name": "footer", justifyContent: "space-between" },
+                    React.createElement(Input, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
+                React.createElement(Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between" },
                     props.cancelButtonText != null ? (React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText)) : (React.createElement("div", null)),
                     React.createElement(SimpleButton, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText))))));
 };

package/src/View/Components/Popups/AdaptablePopupPrompt.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import Dialog from '../../../components/Dialog';
-import { Flex, Box } from 'rebass';
 import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import { useDispatch } from 'react-redux';
+import { Box, Flex } from '../../../components/Flex';
 export const AdaptablePopupPrompt = (props) => {
     const dispatch = useDispatch();
     const [promptText, setPromptText] = React.useState(props.defaultValue ?? '');
@@ -24,19 +24,19 @@ export const AdaptablePopupPrompt = (props) => {
     const changeContent = (e) => {
         setPromptText(e.target.value);
     };
-    return (React.createElement(Dialog, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+    return (React.createElement(Dialog, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, className: "twa:min-h-auto twa:max-w-1/2" },
         React.createElement(Flex, { flexDirection: "column" },
-            React.createElement(Box, { marginTop: 3, mx: 2 }, props.header),
-            StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(Box, { marginTop: 3, mx: 2 },
+            React.createElement(Box, { className: "twa:mt-3 twa:mx-2" }, props.header),
+            StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(Box, { className: "twa:mt-3 twa:mx-2" },
                 ' ',
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.message.split('\n').map(function (item, index) {
                     return (React.createElement("span", { key: index },
                         item,
                         React.createElement("br", null)));
                 })))),
-            React.createElement(Input, { autoFocus: true, marginTop: 3, mx: 3, value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
-            React.createElement(Box, { marginTop: 3 },
-                React.createElement(Flex, { padding: 2, "data-name": "footer", justifyContent: "space-between" },
+            React.createElement(Input, { autoFocus: true, className: "twa:mt-3 twa:mx-3", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
+            React.createElement(Box, { className: "twa:mt-3" },
+                React.createElement(Flex, { className: "twa:p-2", "data-name": "footer", justifyContent: "space-between" },
                     React.createElement(SimpleButton, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel" }, "Cancel"),
                     React.createElement(SimpleButton, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm() }, "OK"))))));
 };

package/src/View/Components/Popups/AdaptablePopupTeamSharing.js

@@ -1,5 +1,4 @@
 import Dialog from '../../../components/Dialog';
-import { Box, Flex } from 'rebass';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import Input from '../../../components/Input';
 import { useState } from 'react';
@@ -8,6 +7,7 @@ import * as React from 'react';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import HelpBlock from '../../../components/HelpBlock';
 import Radio from '../../../components/Radio';
+import { Box, Flex } from '../../../components/Flex';
 export const AdaptablePopupTeamSharing = (props) => {
     const { showPopup, onClose, onConfirm, header } = props;
     const [config, setConfig] = useState({
@@ -15,9 +15,9 @@ export const AdaptablePopupTeamSharing = (props) => {
         type: 'Snapshot',
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+        React.createElement(Dialog, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, className: "twa:min-h-auto twa:max-w-1/2" },
             React.createElement(Flex, { flexDirection: "column" },
-                React.createElement(HelpBlock, { "data-name": "teamsharing-popup-description", margin: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
+                React.createElement(HelpBlock, { "data-name": "teamsharing-popup-description", className: "twa:m-2 twa:mb-2 twa:p-2 twa:text-3" },
                     "Create a ",
                     header,
                     " which may be either:",
@@ -28,18 +28,16 @@ export const AdaptablePopupTeamSharing = (props) => {
                         React.createElement("li", null,
                             React.createElement("strong", null, "Active"),
                             ": a \"live\" share that is automatically updated with every local change"))),
-                React.createElement(FormLayout, { padding: 2 },
+                React.createElement(FormLayout, { className: "twa:p-2" },
                     React.createElement(FormRow, { label: "Name: " },
-                        React.createElement(Input, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig({ ...config, description: e.target.value }) })),
+                        React.createElement(Input, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", className: "twa:w-[300px]", placeholder: "Enter text", onChange: (e) => setConfig({ ...config, description: e.target.value }) })),
                     React.createElement(FormRow, { label: "Share: " },
                         React.createElement(Flex, { flexDirection: "row" },
                             React.createElement(Radio, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig({ ...config, type: 'Snapshot' }) }, "Snapshot"),
-                            ' ',
-                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }) }, "Active"),
-                            ' '))),
-                React.createElement(Box, { marginTop: 3 },
-                    React.createElement(Flex, { padding: 2 },
+                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-active", className: "twa:ml-3", checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }) }, "Active")))),
+                React.createElement(Box, { className: "twa:mt-3" },
+                    React.createElement(Flex, { className: "twa:p-2" },
                         React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
-                        React.createElement("div", { style: { flex: 1 } }),
+                        React.createElement("div", { className: "twa:flex-1" }),
                         React.createElement(SimpleButton, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
 };

package/src/View/Components/Popups/FormPopups/FormPopups.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Flex } from 'rebass';
 import { AdaptableFormComponent } from '../../../../components/AdaptableFormComponent';
 import Dialog from '../../../../components/Dialog';
 import { getDefaultAdaptableFormData } from '../../../../AdaptableState/Common/AdaptableForm';
 import { PopupHideForm } from '../../../../Redux/ActionsReducers/PopupRedux';
 import { useAdaptable } from '../../../AdaptableContext';
+import { Flex } from '../../../../components/Flex';
 export const FormDialog = ({ id, formProps, form, prepareContext, }) => {
     const dispatch = useDispatch();
     const adaptable = useAdaptable();
@@ -20,8 +20,8 @@ export const FormDialog = ({ id, formProps, form, prepareContext, }) => {
         formData: data,
         ...formProps,
     };
-    return (React.createElement(Dialog, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400, maxHeight: '80vh' }, onDismiss: handleDismiss },
-        React.createElement(Flex, { flexDirection: 'column', "data-name": "form-dialog", padding: 4, height: '100%' },
+    return (React.createElement(Dialog, { isOpen: true, showCloseButton: false, className: "twa:min-h-auto twa:min-w-[400px] twa:max-h-[80vh]", onDismiss: handleDismiss },
+        React.createElement(Flex, { flexDirection: 'column', "data-name": "form-dialog", className: "twa:p-4 twa:h-full" },
             React.createElement(AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
                     handleDismiss();
                     const preparedContext = typeof prepareContext === 'function' ? await prepareContext(context) : context;

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { Flex } from 'rebass';
 import { GetNoteSelector } from '../../../../Redux/ActionsReducers/NoteRedux';
 import { CommentsAndNotesEditModeSelector, CommentsAndNotesFocusedEntitySelector, CommentsAndNotesSelector, } from '../../../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../../../AdaptableContext';
 import { CommentsEditor } from '../../../Comments/CommentsEditor';
 import { NoteEditor } from '../../../Note/NoteEditor';
 import { CellPopup } from '../../CellPopup';
+import { Flex } from '../../../../components/Flex';
 const ConnectedNoteEditor = ({ enableEditMode }) => {
     const { api } = useAdaptable();
     const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Note');

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -37,7 +37,7 @@ export const WindowPopups = () => {
             Component = Component ?? NoopComponent;
             componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
         }
-        return (React.createElement(Dialog, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: {
+        return (React.createElement(Dialog, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", key: windowItem.Id, windowModal: true, windowModalProps: {
                 ...windowModalProps,
                 onChange: (settings) => {
                     setWindowModalSettings((settingsMap) => ({
@@ -48,7 +48,7 @@ export const WindowPopups = () => {
                 handleSelector: '.ab-Window-Modal .ab-Panel__header',
                 size: size,
                 position: position,
-            }, fixed: false, padding: 0, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
-            React.createElement(PanelWithImage, { style: { height: '100%' }, bodyProps: { padding: 0, height: '100%' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
+            }, fixed: false, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
+            React.createElement(PanelWithImage, { className: "twa:h-full", bodyProps: { className: 'twa:h-full twa:p-0' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
     })));
 };

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_GRID_FILTER_EDITOR = "WINDOW_GRID_FILTER_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { isAdaptableSystemIcon } from '../../../components/Icon';
 import HelpBlock from '../../../components/HelpBlock';
 import { Tag } from '../../../components/Tag';
@@ -10,6 +9,7 @@ import { ColumnValuesSelect } from '../FilterForm/ListBoxFilterForm';
 import { useAdaptable } from '../../AdaptableContext';
 import { useDistinctFilterColumnValues } from '../ColumnFilter/components/FloatingFilterValues';
 import { useEffect } from 'react';
+import { Box, Flex } from '../../../components/Flex';
 export const PredicateEditor = (props) => {
     const baseClassName = 'ab-PredicateEditor';
     const predicateDefsOptions = React.useMemo(() => props?.predicateDefs?.map((item) => ({
@@ -65,8 +65,8 @@ export const PredicateEditor = (props) => {
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
     return (React.createElement(Box, { className: baseClassName },
-        React.createElement(Flex, { justifyContent: "stretch", alignItems: "center" },
-            icon && React.createElement(Tag, { mr: 2 }, icon),
+        React.createElement(Flex, { alignItems: "center", className: "twa:justify-stretch" },
+            icon && React.createElement(Tag, { className: "twa:mr-2" }, icon),
             React.createElement(Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onChange: (value) => {
                     const option = predicateDefsOptions.find((x) => x.value === value);
                     props.onChange({
@@ -76,10 +76,10 @@ export const PredicateEditor = (props) => {
                     });
                 } })),
         React.createElement(Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
-            index > 0 && React.createElement(HelpBlock, { margin: 2 }, "AND"),
-            React.createElement(Flex, { key: index, flex: 1, flexDirection: "column" },
-                React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
-        adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (React.createElement(Box, { mt: 2 },
+            index > 0 && React.createElement(HelpBlock, { className: "twa:m-2" }, "AND"),
+            React.createElement(Flex, { key: index, className: "twa:flex-1", flexDirection: "column" },
+                React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
+        adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (React.createElement(Box, { className: "twa:mt-2" },
             React.createElement(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
                     onMenuOpen,
                     onInputChange,

package/src/View/Components/PreviewResultsPanel.d.ts

@@ -9,6 +9,7 @@ export interface PreviewResultsPanelProps extends React.ClassAttributes<PreviewR
     showPanel: boolean;
     style?: React.CSSProperties;
     showHeader: boolean;
+    className?: string;
 }
 export declare class PreviewResultsPanel extends React.Component<PreviewResultsPanelProps, {}> {
     render(): any;

package/src/View/Components/PreviewResultsPanel.js

@@ -3,7 +3,7 @@ import { AdaptablePopover } from '../AdaptablePopover';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import CheckIcon from '../../components/icons/check';
 import UIHelper from '../UIHelper';
-import Panel from '../../components/Panel';
+import { Card } from '../../components/Card';
 const columnsMap = {
     InitialValue: {
         field: 'InitialValue',
@@ -47,18 +47,11 @@ export class PreviewResultsPanel extends React.Component {
                     React.createElement(CheckIcon, { style: { color: successColor, fill: 'currentColor' } }))),
             };
         });
-        return this.props.showPanel ? (React.createElement(Panel, { header: previewHeader, style: { flex: 1 }, bodyProps: {
-                style: {
-                    border: 0,
-                    padding: 0,
-                    display: 'flex',
-                    flexFlow: 'column',
-                    minWidth: '17rem',
-                    minHeight: '20rem',
-                },
-            } },
-            React.createElement(DataSource, { data: dataSource, primaryKey: "Id" },
-                React.createElement(InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap })))) : null;
+        return this.props.showPanel ? (React.createElement(Card, { className: "twa:flex-1 twa:overflow-hidden", shadow: false },
+            React.createElement(Card.Title, null, previewHeader),
+            React.createElement(Card.Body, null,
+                React.createElement(DataSource, { data: dataSource, primaryKey: "Id" },
+                    React.createElement(InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap }))))) : null;
     }
     getValidationErrorMessage(alertDefinitions) {
         let validationService = this.props.api.internalApi.getValidationService();