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

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

@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelWithRow = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const Flex_1 = require("../../../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
 class PanelWithRow extends React.Component {
     render() {
-        const headerItems = this.props.colItems.map((colItem, index) => (React.createElement(rebass_1.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(Flex_1.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(rebass_1.Flex, { alignItems: this.props.headerAlign || 'center', style: { width: '100%' } }, headerItems));
+        const header = (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:w-full" }, headerItems));
         return (React.createElement("div", { style: this.props.style, className: this.props.className },
             React.createElement(Panel_1.default, { 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

@@ -4,14 +4,14 @@ exports.PanelWithTwoButtons = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../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
 class PanelWithTwoButtons extends React.Component {
     render() {
-        let header = (React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
-            React.createElement(rebass_1.Flex, { flex: 1 }, this.props.headerText),
+        let header = (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:w-full" },
+            React.createElement(Flex_1.Flex, { className: "twa:flex-1" }, this.props.headerText),
             this.props.secondButton,
             this.props.firstButton));
         return (React.createElement(Panel_1.default, { ...this.props, header: header }, this.props.children));

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableLoadingScreen = void 0;
+exports.AdaptableLoadingScreen = AdaptableLoadingScreen;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../components/Flex");
 function AdaptableLoadingScreen(props) {
     const { showLoadingScreen, loadingScreenDelay, loadingScreenTitle, loadingScreenText } = props;
     const [delayElapsed, setDelayElapsed] = React.useState(typeof loadingScreenDelay === 'number' ? false : showLoadingScreen);
@@ -18,11 +18,8 @@ function AdaptableLoadingScreen(props) {
             };
         }
     }, [loadingScreenDelay]);
-    return (React.createElement(Dialog_1.default, { modal: true, isOpen: delayElapsed ? showLoadingScreen : false, onDismiss: props.onClose, showCloseButton: false, className: "ab-LoadingScreen", style: {
-            minHeight: 'auto',
-        } },
-        React.createElement(rebass_1.Box, { padding: 3 },
+    return (React.createElement(Dialog_1.default, { modal: true, isOpen: delayElapsed ? showLoadingScreen : false, onDismiss: props.onClose, showCloseButton: false, className: "ab-LoadingScreen twa:min-h-auto" },
+        React.createElement(Flex_1.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...'))));
 }
-exports.AdaptableLoadingScreen = AdaptableLoadingScreen;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const GeneralConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/GeneralConstants"));
 const TopBar_1 = tslib_1.__importDefault(require("./TopBar"));
 const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
@@ -14,6 +14,7 @@ const AdaptableContext_1 = require("../../../AdaptableContext");
 const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
 const useMenuItems_1 = require("./useMenuItems");
 const AdaptablePopupDialog_1 = require("./AdaptablePopupDialog");
+const Flex_1 = require("../../../../components/Flex");
 const AdaptablePopup = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
@@ -72,8 +73,8 @@ const AdaptablePopup = (props) => {
         } },
         React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
             !isStandalone && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
+            React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('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_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
-                React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
+                React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('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)))));
 };
 exports.AdaptablePopup = AdaptablePopup;

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

@@ -9,6 +9,7 @@ const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"
 const InternalRedux_1 = require("../../../../Redux/ActionsReducers/InternalRedux");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const Utilities_1 = require("../Utilities");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const WindowDialog = (props) => {
     const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, ...dialogProps } = props;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -37,11 +38,11 @@ const WindowDialog = (props) => {
         position: popupSettings.position,
         onChange: handleWindowSettings,
     };
-    return (React.createElement(Dialog_1.default, { 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_1.default, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: (0, clsx_1.default)('twa:p-0 twa:h-full', className) }));
 };
 const PopupDialog = (props) => {
     const { style, className, onHide, children, ...dialogProps } = props;
-    return (React.createElement(Dialog_1.default, { 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_1.default, { fixed: false, style: props.style, className: (0, clsx_1.default)('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps }, children));
 };
 const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;

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

@@ -10,13 +10,13 @@ const icons_1 = require("../../../../components/icons");
 const AdaptableObjectList_1 = require("../../AdaptableObjectList");
 const ButtonNew_1 = require("../../Buttons/ButtonNew");
 const PopupPanel_1 = require("./PopupPanel");
-const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../../../components/CheckBox");
 const InternalRedux_1 = require("../../../../Redux/ActionsReducers/InternalRedux");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const react_1 = require("react");
 const useRerender_1 = require("../../../../components/utils/useRerender");
+const Flex_1 = require("../../../../components/Flex");
 const AdaptablePopupModuleView = (props) => {
     /**
      * This triggers a render for each state change.
@@ -104,7 +104,7 @@ const AdaptablePopupModuleView = (props) => {
                 dispatch(unsuspendAllAction);
             }
         };
-        suspendButton = (React.createElement(SimpleButton_1.default, { 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_1.default, { 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);
@@ -125,8 +125,8 @@ const AdaptablePopupModuleView = (props) => {
         if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             return;
         }
-        return (React.createElement(rebass_1.Flex, { justifyContent: "flex-start" },
-            React.createElement(CheckBox_1.CheckBox, { padding: 0, margin: 0, checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch((0, InternalRedux_1.LayoutShowNonExtendedObjects)(checked)) },
+        return (React.createElement(Flex_1.Flex, { className: "twa:justify-start" },
+            React.createElement(CheckBox_1.CheckBox, { className: "twa:m-0 twa:p-0", checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch((0, InternalRedux_1.LayoutShowNonExtendedObjects)(checked)) },
                 "Show ",
                 moduleInfo.FriendlyName,
                 "s not available in current Layout")));

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

@@ -3,56 +3,88 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navigation = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const react_redux_1 = require("react-redux");
-const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
-const useGlobalEvent_1 = require("../../../../components/utils/useGlobalEvent");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
+const twUtils_1 = require("../../../../components/twUtils");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const navigationItemClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
+const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, showModuleIcons, }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (isActive) {
+            ref.current?.focus();
+        }
+    }, [isActive]);
+    return (React.createElement("li", { className: (0, clsx_1.default)(navigationItemClassName, {
+            [`${navigationItemClassName}--active`]: isActive,
+        }) },
+        React.createElement("button", { ref: ref, type: "button", className: (0, clsx_1.default)(`${navigationItemClassName}__Button ${twUtils_1.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_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })),
+            customIcon ? React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: customIcon }) : null,
+            menuItem.label)));
+};
 const Navigation = (props) => {
+    const { api } = (0, AdaptableContext_1.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 = (0, react_redux_1.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]);
-    (0, useGlobalEvent_1.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 = (0, join_1.default)(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_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
-                    customIcon && React.createElement(AdaptableIconComponent_1.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) }));
         }))));
 };
 exports.Navigation = Navigation;

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

@@ -3,22 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
-const Noop = () => React.createElement(React.Fragment, null);
+const Flex_1 = require("../../../../components/Flex");
 const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: "1 1 0", className: (0, join_1.default)(props.className, baseClassName) },
-        React.createElement("div", { className: `${baseClassName}__Header` },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
-                React.createElement(rebass_1.Box, { marginRight: 0, "data-name": "space-before" }),
+    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('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_1.Flex, { alignItems: "center" },
+                React.createElement(Flex_1.Box, { className: "twa:mr-0", "data-name": "space-before" }),
                 React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
-                React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
+                React.createElement(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }),
                 props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
                     ) }))),
-            React.createElement(rebass_1.Box, { style: { flex: 1 } }),
+            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
             props.button),
-        React.createElement(rebass_1.Box, { className: `${baseClassName}__Body`, width: "100%", height: "100%", flex: 1 }, props.children)));
+        React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName) }, props.children)));
 };
 exports.PopupPanel = PopupPanel;

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

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopBar = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
+const Flex_1 = require("../../../../components/Flex");
+const baseClassName = 'ab-Adaptable-Popup__TopBar';
 const TopBar = (props) => {
-    const baseClassName = 'ab-Adaptable-Popup__TopBar';
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const applicationIcon = adaptable.api.optionsApi.getUserInterfaceOptions()?.applicationIcon;
     let icon = React.createElement(React.Fragment, null);
@@ -21,9 +22,9 @@ const TopBar = (props) => {
     else if (typeof props.icon === 'object') {
         icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
     }
-    return (React.createElement(rebass_1.Flex, { flex: 0, className: baseClassName },
+    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(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(rebass_1.Text, { className: `${baseClassName}__Title` }, props.children)));
+        React.createElement(Flex_1.Box, { className: `${baseClassName}__Title` }, props.children)));
 };
 exports.TopBar = TopBar;
 exports.default = exports.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

@@ -5,12 +5,12 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const PanelWithImage_1 = require("../Panels/PanelWithImage");
 const UIHelper_1 = require("../../UIHelper");
-const rebass_1 = require("rebass");
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
 const AdaptableFormComponent_1 = require("../../../components/AdaptableFormComponent");
 const react_1 = require("react");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const Flex_1 = require("../../../components/Flex");
 const AdaptablePopupAlert = (props) => {
     const messageType = props.adaptableAlert.alertDefinition.MessageType || 'Error';
     const msg = props.adaptableAlert.message ?? '';
@@ -43,24 +43,23 @@ const AdaptablePopupAlert = (props) => {
         if (!icon) {
             return null;
         }
-        return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignSelf: "end", alignItems: "right" },
-            ' ',
+        return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:self-end", alignItems: "end" },
             React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
     };
-    const content = (React.createElement(PanelWithImage_1.PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { padding: 2 } },
+    const content = (React.createElement(PanelWithImage_1.PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { className: 'twa:p-2' } },
         React.createElement("div", null,
-            React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "flex-start" },
+            React.createElement(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start" },
                 renderApplicationIcon(adaptableOptions.notificationsOptions.showApplicationIcon &&
                     adaptableOptions.userInterfaceOptions.applicationIcon),
                 typeof msg === 'string'
                     ? msg.split('\n').map(function (item, index) {
-                        return (React.createElement(rebass_1.Flex, { flexDirection: "row", key: index },
-                            React.createElement(rebass_1.Text, { key: index, margin: 2 },
+                        return (React.createElement(Flex_1.Flex, { flexDirection: "row", key: index },
+                            React.createElement(Flex_1.Box, { key: index, className: "twa:m-2" },
                                 item,
                                 React.createElement("br", null))));
                     })
                     : msg),
-            React.createElement(rebass_1.Box, { margin: 2 }, adaptableForm ? (React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
+            React.createElement(Flex_1.Box, { className: "twa:m-2" }, adaptableForm ? (React.createElement(AdaptableFormComponent_1.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
@@ -68,10 +67,6 @@ const AdaptablePopupAlert = (props) => {
                         button.onClick?.(button, context);
                     }, 20);
                 } })) : null))));
-    return props.headless ? (content) : (React.createElement(Dialog_1.default, { "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_1.default, { "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));
 };
 exports.AdaptablePopupAlert = AdaptablePopupAlert;

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

@@ -6,13 +6,13 @@ const React = tslib_1.__importStar(require("react"));
 const UIHelper_1 = require("../../UIHelper");
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const PanelWithImage_1 = require("../Panels/PanelWithImage");
-const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const InternalRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/InternalRedux"));
 const react_redux_1 = require("react-redux");
+const Flex_1 = require("../../../components/Flex");
 const AdaptablePopupConfirmation = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const [disableDeleteConfirmation, setDisableDeleteConfirmation] = React.useState(false);
@@ -46,18 +46,18 @@ const AdaptablePopupConfirmation = (props) => {
         React.createElement(PanelWithImage_1.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(rebass_1.Text, { key: index, margin: 2 },
+                    return (React.createElement(Flex_1.Box, { key: index, className: "twa:m-2" },
                         item,
                         React.createElement("br", null)));
                 })),
-                React.createElement(rebass_1.Box, { pl: 2 },
+                React.createElement(Flex_1.Box, { className: "twa:pl-2" },
                     React.createElement(CheckBox_1.CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
                             setDisableDeleteConfirmation(!disableDeleteConfirmation);
                         } }, "Do not show this again")),
-                props.showInputBox && (React.createElement(rebass_1.Box, { padding: 2, "data-name": "body" },
+                props.showInputBox && (React.createElement(Flex_1.Box, { className: "twa:p-2", "data-name": "body" },
                     React.createElement("p", null, "Please enter a comment to confirm"),
-                    React.createElement(Input_1.default, { marginTop: 2, width: '100%', value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
-                React.createElement(rebass_1.Flex, { marginTop: 3, padding: 2, "data-name": "footer", justifyContent: "space-between" },
+                    React.createElement(Input_1.default, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
+                React.createElement(Flex_1.Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between" },
                     props.cancelButtonText != null ? (React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText)) : (React.createElement("div", null)),
                     React.createElement(SimpleButton_1.default, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText))))));
 };

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

@@ -5,10 +5,10 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const react_redux_1 = require("react-redux");
+const Flex_1 = require("../../../components/Flex");
 const AdaptablePopupPrompt = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const [promptText, setPromptText] = React.useState(props.defaultValue ?? '');
@@ -28,19 +28,19 @@ const AdaptablePopupPrompt = (props) => {
     const changeContent = (e) => {
         setPromptText(e.target.value);
     };
-    return (React.createElement(Dialog_1.default, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
-        React.createElement(rebass_1.Flex, { flexDirection: "column" },
-            React.createElement(rebass_1.Box, { marginTop: 3, mx: 2 }, props.header),
-            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(rebass_1.Box, { marginTop: 3, mx: 2 },
+    return (React.createElement(Dialog_1.default, { 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_1.Flex, { flexDirection: "column" },
+            React.createElement(Flex_1.Box, { className: "twa:mt-3 twa:mx-2" }, props.header),
+            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(Flex_1.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_1.default, { autoFocus: true, marginTop: 3, mx: 3, value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
-            React.createElement(rebass_1.Box, { marginTop: 3 },
-                React.createElement(rebass_1.Flex, { padding: 2, "data-name": "footer", justifyContent: "space-between" },
+            React.createElement(Input_1.default, { autoFocus: true, className: "twa:mt-3 twa:mx-3", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
+            React.createElement(Flex_1.Box, { className: "twa:mt-3" },
+                React.createElement(Flex_1.Flex, { className: "twa:p-2", "data-name": "footer", justifyContent: "space-between" },
                     React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel" }, "Cancel"),
                     React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm() }, "OK"))))));
 };

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopupTeamSharing = void 0;
 const tslib_1 = require("tslib");
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const rebass_1 = require("rebass");
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const react_1 = require("react");
@@ -12,6 +11,7 @@ const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const Flex_1 = require("../../../components/Flex");
 const AdaptablePopupTeamSharing = (props) => {
     const { showPopup, onClose, onConfirm, header } = props;
     const [config, setConfig] = (0, react_1.useState)({
@@ -19,9 +19,9 @@ const AdaptablePopupTeamSharing = (props) => {
         type: 'Snapshot',
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog_1.default, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
-            React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                React.createElement(HelpBlock_1.default, { "data-name": "teamsharing-popup-description", margin: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
+        React.createElement(Dialog_1.default, { 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_1.Flex, { flexDirection: "column" },
+                React.createElement(HelpBlock_1.default, { "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:",
@@ -32,19 +32,17 @@ 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_1.default, { padding: 2 },
+                React.createElement(FormLayout_1.default, { className: "twa:p-2" },
                     React.createElement(FormLayout_1.FormRow, { label: "Name: " },
-                        React.createElement(Input_1.default, { "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_1.default, { "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(FormLayout_1.FormRow, { label: "Share: " },
-                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                        React.createElement(Flex_1.Flex, { flexDirection: "row" },
                             React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig({ ...config, type: 'Snapshot' }) }, "Snapshot"),
-                            ' ',
-                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }) }, "Active"),
-                            ' '))),
-                React.createElement(rebass_1.Box, { marginTop: 3 },
-                    React.createElement(rebass_1.Flex, { padding: 2 },
+                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-active", className: "twa:ml-3", checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }) }, "Active")))),
+                React.createElement(Flex_1.Box, { className: "twa:mt-3" },
+                    React.createElement(Flex_1.Flex, { className: "twa:p-2" },
                         React.createElement(SimpleButton_1.default, { "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_1.default, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
 };
 exports.AdaptablePopupTeamSharing = AdaptablePopupTeamSharing;

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

@@ -4,12 +4,12 @@ exports.FormPopups = exports.FormDialog = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const AdaptableFormComponent_1 = require("../../../../components/AdaptableFormComponent");
 const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
 const AdaptableForm_1 = require("../../../../AdaptableState/Common/AdaptableForm");
 const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
 const AdaptableContext_1 = require("../../../AdaptableContext");
+const Flex_1 = require("../../../../components/Flex");
 const FormDialog = ({ id, formProps, form, prepareContext, }) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -24,8 +24,8 @@ const FormDialog = ({ id, formProps, form, prepareContext, }) => {
         formData: data,
         ...formProps,
     };
-    return (React.createElement(Dialog_1.default, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400, maxHeight: '80vh' }, onDismiss: handleDismiss },
-        React.createElement(rebass_1.Flex, { flexDirection: 'column', "data-name": "form-dialog", padding: 4, height: '100%' },
+    return (React.createElement(Dialog_1.default, { isOpen: true, showCloseButton: false, className: "twa:min-h-auto twa:min-w-[400px] twa:max-h-[80vh]", onDismiss: handleDismiss },
+        React.createElement(Flex_1.Flex, { flexDirection: 'column', "data-name": "form-dialog", className: "twa:p-4 twa:h-full" },
             React.createElement(AdaptableFormComponent_1.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;