@adaptabletools/adaptable 21.2.1 → 22.0.0-canary.0

package/src/View/Components/Panels/PanelFooter.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Flex, Box } from 'rebass';
 import SimpleButton from '../../../components/SimpleButton';
+import { Flex, Box } from '../../../components/Flex';
 export const PanelFooter = (props) => {
-    return (React.createElement(Flex, { className: "ab-Panel__Footer", flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
-        React.createElement(SimpleButton, { margin: 1, variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, props.cancelText ?? 'CANCEL'),
-        React.createElement(Box, { flex: 1 }),
-        React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-finish", margin: 1, onClick: props.onAccept, disabled: props.acceptDisabled }, props.cancelText ?? 'Finish')));
+    return (React.createElement(Flex, { className: "ab-Panel__Footer twa:p-1 twa:bg-primary", flexDirection: "row", alignItems: "center" },
+        React.createElement(SimpleButton, { className: "twa:m-1", variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, props.cancelText ?? 'CANCEL'),
+        React.createElement(Box, { className: "twa:flex-1" }),
+        React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-finish", className: "twa:m-1", onClick: props.onAccept, disabled: props.acceptDisabled }, props.cancelText ?? 'Finish')));
 };

package/src/View/Components/Panels/PanelToolPanel/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PanelProps } from '../../../../components/Panel';
-export interface PanelToolPanelProps extends PanelProps {
+export interface PanelToolPanelProps extends Omit<PanelProps, 'flex'> {
     headerText: string;
     onConfigure: () => void;
     onClose: () => void;

package/src/View/Components/Panels/PanelToolPanel/index.js

@@ -3,24 +3,23 @@ import Panel from '../../../../components/Panel';
 import { ButtonClose } from '../../Buttons/ButtonClose';
 import { ButtonConfigure } from '../../Buttons/ButtonConfigure';
 import { ButtonMinimise } from '../../Buttons/ButtonMinimise';
-import { Flex } from 'rebass';
-import join from '../../../../components/utils/join';
 import { ButtonMaximise } from '../../Buttons/ButtonMaximise';
+import { twMerge } from '../../../../twMerge';
+import { Flex } from '../../../../components/Flex';
 export class PanelToolPanel extends React.Component {
     render() {
         const { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure, ...props } = this.props;
         let header = (React.createElement(React.Fragment, null,
-            !isMinimised ? (React.createElement(ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise", onClick: () => onMinimiseChanged(), marginRight: 1 })) : (React.createElement(ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise", onClick: () => onMinimiseChanged(), marginRight: 1 })),
-            React.createElement(Flex, { className: "ab-ToolPanelPanel__header-text", flex: 1, alignItems: "center", marginLeft: 0 }, headerText),
-            onConfigure && (React.createElement(ButtonConfigure, { iconSize: 16, marginLeft: 1, className: "ab-ToolPanelPanel__header-configure-button", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
-            onClose && (React.createElement(ButtonClose, { marginLeft: 0, className: "ab-ToolPanelPanel__header-close-button", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
-        return (React.createElement(Panel, { border: "var(--ab-cmp-toolpanelpanel__border)", ...props, className: join('ab-ToolPanelPanel', props.className), header: header, style: {
-                color: 'var(--ab-cmp-toolpanelpanel__color)',
-                fill: 'var(--ab-cmp-toolpanelpanel__fill)',
+            !isMinimised ? (React.createElement(ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise twa:mr-1", onClick: () => onMinimiseChanged() })) : (React.createElement(ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise twa:mr-1", onClick: () => onMinimiseChanged() })),
+            React.createElement(Flex, { className: "ab-ToolPanelPanel__header-text twa:flex-1 twa:ml-0", alignItems: "center" }, headerText),
+            onConfigure && (React.createElement(ButtonConfigure, { iconSize: 16, className: "ab-ToolPanelPanel__header-configure-button twa:ml-1", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
+            onClose && (React.createElement(ButtonClose, { className: "ab-ToolPanelPanel__header-close-button twa:ml-0", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
+        return (React.createElement(Panel, { ...props, className: twMerge('ab-ToolPanelPanel', props.className), header: header, style: {
                 ...props.style,
             }, headerProps: {
                 ...props.headerProps,
                 alignItems: 'stretch',
+                className: twMerge('twa:border-none', props.headerProps?.className),
                 style: {
                     padding: 'var(--ab-cmp-toolpanelpanel_header__padding)',
                     background: 'var(--ab-cmp-toolpanelpanel_header__background)',
@@ -30,12 +29,11 @@ export class PanelToolPanel extends React.Component {
                 },
             }, bodyProps: {
                 ...props.bodyProps,
+                className: twMerge('twa:border-none twa:flex twa:flex-col', props.bodyProps?.className),
                 style: {
                     padding: 'var(--ab-cmp-dashboardpanel_body__padding)',
                     background: 'var(--ab-cmp-dashboardpanel_body__background)',
                     ...(props.bodyProps ? props.bodyProps.style : null),
-                    display: 'flex',
-                    flexDirection: 'column',
                 },
             } }));
     }

package/src/View/Components/Panels/PanelWithButton.d.ts

@@ -1,20 +1,18 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
-import { BoxProps } from 'rebass';
 import { AdaptableSystemIconName } from '../../../AdaptableState/Common/AdaptableIcon';
-export interface PanelWithButtonProps extends PanelProps {
+export interface PanelWithButtonProps extends Omit<PanelProps, 'flex' | 'borderRadius' | 'border'> {
     buttonContent?: React.ReactNode;
     buttonClick?: () => void;
     button?: React.ReactElement<any>;
     headerText: string;
-    bodyProps?: BoxProps;
-    headerProps?: BoxProps & {
+    bodyProps?: PanelProps['bodyProps'];
+    headerProps?: PanelProps['headerProps'] & {
         'data-name': string;
     };
     glyphicon?: AdaptableSystemIconName;
     buttonDisabled?: boolean;
     buttonStyle?: string;
-    borderRadius?: string;
     infoLink?: string;
     infoLinkDisabled?: boolean;
 }

package/src/View/Components/Panels/PanelWithButton.js

@@ -1,21 +1,22 @@
 import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 import Panel from '../../../components/Panel';
-import { Flex, Box } from 'rebass';
 import { allIcons } from '../../../components/icons';
 import { ButtonInfo } from '../Buttons/ButtonInfo';
+import { twMerge } from 'tailwind-merge';
+import { Box, Flex } from '../../../components/Flex';
 export const PanelWithButton = (props) => {
     const { buttonContent } = props;
     const IconCmp = allIcons[props.glyphicon];
-    const header = (React.createElement(Flex, { alignItems: "center", width: "100%" },
+    const header = (React.createElement(Flex, { alignItems: "center", className: "twa:w-full" },
         React.createElement(Flex, { alignItems: "center" },
             props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),
-            React.createElement(Box, { marginRight: 2, "data-name": "space-before" }),
+            React.createElement(Box, { "data-name": "space-before", className: "twa:mr-2" }),
             props.headerText,
-            React.createElement(Box, { marginRight: 2, "data-name": "space-after" }),
+            React.createElement(Box, { "data-name": "space-after", className: "twa:mr-2" }),
             props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo, { onClick: () => window.open(props.infoLink, '_blank') }))),
-        React.createElement(Box, { style: { flex: 1 } }),
+        React.createElement(Box, { className: "twa:flex-1" }),
         buttonContent ? (React.createElement(SimpleButton, { variant: "raised", tone: "accent", disabled: props.buttonDisabled, onClick: () => (props.buttonClick ? props.buttonClick() : null) }, buttonContent)) : null,
         props.button ? React.cloneElement(props.button) : null));
-    return (React.createElement(Panel, { flex: 1, className: props.className, bodyScroll: props.bodyScroll != null ? props.bodyScroll : true, bodyProps: props.bodyProps, variant: props.variant || 'primary', header: header, headerProps: props.headerProps, style: props.style, borderRadius: (props.borderRadius || 'none'), border: (props.border || 'none') }, props.children));
+    return (React.createElement(Panel, { className: twMerge('twa:flex-1 twa:rounded-none twa:border-none', props.className), bodyScroll: props.bodyScroll != null ? props.bodyScroll : true, bodyProps: props.bodyProps, variant: props.variant || 'primary', header: header, headerProps: props.headerProps, style: props.style }, props.children));
 };

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
-import { BoxProps } from 'rebass';
 import { AdaptableSystemIconName } from '../../../AdaptableState/Common/AdaptableIcon';
-export interface PanelWithImageProps extends PanelProps {
+export interface PanelWithImageProps extends Omit<PanelProps, 'flex' | 'borderRadius'> {
     glyphicon?: AdaptableSystemIconName;
     icon?: AdaptableSystemIconName;
     infoLink?: string;
     infoLinkDisabled?: boolean;
     borderRadius?: string;
-    bodyProps?: BoxProps;
+    bodyProps?: PanelProps['bodyProps'];
     theme: any;
     headerColor?: string;
     button?: React.ReactElement<any>;

package/src/View/Components/Panels/PanelWithImage.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { withTheme } from 'styled-components';
 import NewPanel from '../../../components/Panel';
-import { Box, Flex } from 'rebass';
 import { allIcons } from '../../../components/icons';
 import { ButtonInfo } from '../Buttons/ButtonInfo';
+import { twMerge } from '../../../twMerge';
+import { Box, Flex } from '../../../components/Flex';
 //We cannot destructure this.props using the react way in typescript which is a real pain as you
 //need to transfer props individually as a consequence
 //let { buttonContent, ...other } = this.props
@@ -15,23 +15,21 @@ class PanelWithImageCmp extends React.Component {
             headerStyle.color = this.props.headerColor;
             headerStyle.fill = this.props.headerColor;
         }
-        let headerRow = (React.createElement(Flex, { flex: 1 },
+        let headerRow = (React.createElement(Flex, { className: "twa:flex-1" },
             React.createElement(Flex, { alignItems: "center" },
-                React.createElement(Flex, { minHeight: 15, alignItems: "center", style: headerStyle },
+                React.createElement(Flex, { className: "twa:min-h-[15px]", alignItems: "center", style: headerStyle },
                     IconCmp ? React.createElement(IconCmp, null) : null,
-                    React.createElement(Box, { marginRight: 2 }),
+                    React.createElement(Box, { className: "twa:mr-2" }),
                     this.props.header ?? '',
-                    React.createElement(Box, { marginRight: 2, "data-name": "space-after" }),
+                    React.createElement(Box, { className: "twa:mr-2", "data-name": "space-after" }),
                     this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                         ) }))),
-                React.createElement(Box, { flex: 1 }),
+                React.createElement(Flex, { className: "twa:flex-1" }),
                 this.props.button && React.cloneElement(this.props.button))));
-        return (React.createElement(NewPanel, { flex: this.props.flex, header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: {
-                padding: 0,
+        return (React.createElement(NewPanel, { header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, className: twMerge('twa:rounded-none twa:border-none', this.props.className), bodyProps: {
                 ...this.props.bodyProps,
+                className: twMerge('twa:p-0', this.props.bodyProps?.className),
             } }, this.props.children));
     }
 }
-// apparently it's very hard to type `withTheme()` result in typescript
-// @ts-ignore
-export const PanelWithImage = withTheme(PanelWithImageCmp);
+export const PanelWithImage = PanelWithImageCmp;

package/src/View/Components/Panels/PanelWithRow.d.ts

@@ -3,7 +3,6 @@ import { IColItem } from '../../UIInterfaces';
 import { PanelProps } from '../../../components/Panel';
 export interface PanelWithRowProps extends PanelProps {
     colItems: IColItem[];
-    headerAlign?: string;
 }
 export declare class PanelWithRow extends React.Component<PanelWithRowProps, {}> {
     render(): React.JSX.Element;

package/src/View/Components/Panels/PanelWithRow.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { Flex, Text } from 'rebass';
 import Panel from '../../../components/Panel';
+import { Flex, Box } from '../../../components/Flex';
 // We cannot destructure this.props using the react way in typescript which is a real pain as you
 // need to transfer props individually as a consequence
 // let { buttonContent, ...other } = this.props
 export class PanelWithRow extends React.Component {
     render() {
-        const headerItems = this.props.colItems.map((colItem, index) => (React.createElement(Text, { key: colItem.key || colItem.Content || index, fontWeight: "bold", fontSize: 'var(--ab-font-size-3)', paddingLeft: 1, paddingRight: 1, style: {
+        const headerItems = this.props.colItems.map((colItem, index) => (React.createElement(Box, { key: colItem.key || colItem.Content || index, className: "twa:font-bold twa:text-3 twa:px-1", style: {
                 flex: colItem.Size,
             } }, colItem.Content)));
-        const header = (React.createElement(Flex, { alignItems: this.props.headerAlign || 'center', style: { width: '100%' } }, headerItems));
+        const header = (React.createElement(Flex, { alignItems: "center", className: "twa:w-full" }, headerItems));
         return (React.createElement("div", { style: this.props.style, className: this.props.className },
             React.createElement(Panel, { bodyScroll: true, header: header, border: this.props.border, bodyProps: this.props.bodyProps }, this.props.children)));
     }

package/src/View/Components/Panels/PanelWithTwoButtons.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
-export interface PanelWithTwoButtonsProps extends PanelProps {
+export interface PanelWithTwoButtonsProps extends Omit<PanelProps, 'flex'> {
     firstButtonContent?: React.ReactNode;
     firstButton?: React.ReactElement<any>;
     secondButtonContent?: React.ReactNode;

package/src/View/Components/Panels/PanelWithTwoButtons.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Panel from '../../../components/Panel';
-import { Flex } from 'rebass';
+import { Flex } from '../../../components/Flex';
 //We cannot destructure this.props using the react way in typescript which is a real pain as you
 //need to transfer props individually as a consequence
 //let { buttonContent, ...other } = this.props
 export class PanelWithTwoButtons extends React.Component {
     render() {
-        let header = (React.createElement(Flex, { alignItems: "center", width: "100%" },
-            React.createElement(Flex, { flex: 1 }, this.props.headerText),
+        let header = (React.createElement(Flex, { alignItems: "center", className: "twa:w-full" },
+            React.createElement(Flex, { className: "twa:flex-1" }, this.props.headerText),
             this.props.secondButton,
             this.props.firstButton));
         return (React.createElement(Panel, { ...this.props, header: header }, this.props.children));

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Dialog from '../../../components/Dialog';
-import { Box } from 'rebass';
+import { Box } from '../../../components/Flex';
 export function AdaptableLoadingScreen(props) {
     const { showLoadingScreen, loadingScreenDelay, loadingScreenTitle, loadingScreenText } = props;
     const [delayElapsed, setDelayElapsed] = React.useState(typeof loadingScreenDelay === 'number' ? false : showLoadingScreen);
@@ -14,10 +14,8 @@ export function AdaptableLoadingScreen(props) {
             };
         }
     }, [loadingScreenDelay]);
-    return (React.createElement(Dialog, { modal: true, isOpen: delayElapsed ? showLoadingScreen : false, onDismiss: props.onClose, showCloseButton: false, className: "ab-LoadingScreen", style: {
-            minHeight: 'auto',
-        } },
-        React.createElement(Box, { padding: 3 },
+    return (React.createElement(Dialog, { modal: true, isOpen: delayElapsed ? showLoadingScreen : false, onDismiss: props.onClose, showCloseButton: false, className: "ab-LoadingScreen twa:min-h-auto" },
+        React.createElement(Box, { className: "twa:p-3" },
             React.createElement("h4", null, loadingScreenTitle ?? 'Initialising Grid'),
             React.createElement("p", null, loadingScreenText ?? 'Retrieving your settings and setting up the grid...'))));
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
+import clsx from 'clsx';
 import * as GeneralConstants from '../../../../Utilities/Constants/GeneralConstants';
 import TopBar from './TopBar';
 import join from '../../../../components/utils/join';
@@ -10,6 +10,7 @@ import { useAdaptable } from '../../../AdaptableContext';
 import { CustomSettingsPanelView } from './CustomSettingsPanelView';
 import { useMenuItems } from './useMenuItems';
 import { AdaptablePopupDialog } from './AdaptablePopupDialog';
+import { Box } from '../../../../components/Flex';
 export const AdaptablePopup = (props) => {
     const adaptable = useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
@@ -68,7 +69,7 @@ export const AdaptablePopup = (props) => {
         } },
         React.createElement(AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
             !isStandalone && React.createElement(TopBar, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
-            React.createElement(Flex, { flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
+            React.createElement(Box, { className: clsx('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-text-on-defaultbackground', accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '') },
                 !isStandalone && (React.createElement(Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
-                React.createElement(Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
+                React.createElement(Box, { className: clsx('ab-Adaptable-Popup__Body', 'twa:bg-primarylight twa:text-primarylight-foreground', 'twa:flex twa:flex-1 twa:min-w-0 twa:overflow-auto twa:*:p-3') }, moduleViewContent)))));
 };

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

@@ -5,6 +5,7 @@ import Dialog from '../../../../components/Dialog';
 import { SettingsPanelSet } from '../../../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../../../AdaptableContext';
 import { getActionPanelSize, getMiddlePosition, getSettingsPanelSize } from '../Utilities';
+import clsx from 'clsx';
 const WindowDialog = (props) => {
     const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, ...dialogProps } = props;
     const adaptable = useAdaptable();
@@ -33,11 +34,11 @@ const WindowDialog = (props) => {
         position: popupSettings.position,
         onChange: handleWindowSettings,
     };
-    return (React.createElement(Dialog, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: { ...props.style, height: '100%' }, padding: 0, className: className, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }));
+    return (React.createElement(Dialog, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: clsx('twa:p-0 twa:h-full', className) }));
 };
 const PopupDialog = (props) => {
     const { style, className, onHide, children, ...dialogProps } = props;
-    return (React.createElement(Dialog, { fixed: false, style: props.style, padding: 0, height: '90vh', width: '90vw', className: className, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }, children));
+    return (React.createElement(Dialog, { fixed: false, style: props.style, className: clsx('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }, children));
 };
 export const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;

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));
 };