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

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -4,10 +4,10 @@ exports.AdaptableObjectCompactList = exports.AdaptableObjectCompactListItem = vo
 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 SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const AdaptableContext_1 = require("../../AdaptableContext");
-const ValueSelector_1 = require("../ValueSelector");
+const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag/Tag");
 const baseClassName = 'ab-Adaptable-Object-Compact-List';
 const ICON_SIZE = 20;
 const AdaptableObjectCompactListItem = (props) => {
@@ -40,18 +40,18 @@ const AdaptableObjectCompactListItem = (props) => {
         labelEl = React.createElement(labelEl, { data: props.abObject });
     }
     labelEl = labelEl ?? objectView.item.name;
-    return (React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
-        labelEl && (React.createElement(rebass_1.Flex, { flex: '1 1 auto', className: `${baseClassName}__Item__Name` }, labelEl)),
-        React.createElement(rebass_1.Box, { flex: '2 1 auto' },
+    return (React.createElement(Flex_1.Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
+        labelEl && (React.createElement(Flex_1.Flex, { className: `${baseClassName}__Item__Name twa:flex-[1_1_auto]` }, labelEl)),
+        React.createElement(Flex_1.Box, { className: "twa:flex-[2_1_auto]" },
             typeof objectView.item.view === 'function'
                 ? React.createElement(objectView.item.view, {
                     data: props.abObject,
                 })
                 : objectView.item.view,
-            Boolean(objectView.item?.values && objectView.item?.values?.length) && (React.createElement(rebass_1.Box, { mb: 2, className: `${baseClassName}__Item__Values` },
-                React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: objectView.item.values, value: objectView.item.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))),
+            Boolean(objectView.item?.values && objectView.item?.values?.length) && (React.createElement(Flex_1.Box, { className: `${baseClassName}__Item__Values` },
+                React.createElement(Tag_1.TagList, { tags: objectView.item.values.map(String) })))),
         suspendAction && unSuspendAction && (React.createElement(SimpleButton_1.default, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })),
-        React.createElement(rebass_1.Flex, { ml: 1, flex: '0 0 auto' }, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })))));
+        React.createElement(Flex_1.Flex, { className: "twa:ml-1 twa:flex-[0_0_auto]" }, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })))));
 };
 exports.AdaptableObjectCompactListItem = AdaptableObjectCompactListItem;
 const AdaptableObjectCompactList = (props) => {
@@ -75,13 +75,13 @@ const AdaptableObjectCompactList = (props) => {
             dispatch(unSuspendAllAction);
         }
     }, [isAtLeastOneAbObjectActive]);
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", className: baseClassName },
-        React.createElement(rebass_1.Flex, { className: `${baseClassName}__Header`, fontSize: 3 },
-            React.createElement(rebass_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center' }, props.module.moduleInfo.FriendlyName),
-            React.createElement(rebass_1.Box, { flex: 1 }),
-            suspendAllAction && unSuspendAllAction && (React.createElement(SimpleButton_1.default, { mr: 2, onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All')),
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: baseClassName },
+        React.createElement(Flex_1.Flex, { className: `${baseClassName}__Header twa:text-3` },
+            React.createElement(Flex_1.Flex, { className: `${baseClassName}__Title`, alignItems: 'center' }, props.module.moduleInfo.FriendlyName),
+            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
+            suspendAllAction && unSuspendAllAction && (React.createElement(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All')),
             deleteAllAction && (React.createElement(SimpleButton_1.default, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel }, "Clear All"))),
-        React.createElement(rebass_1.Box, { className: `${baseClassName}__Body` }, props.abObjects.map((abObject) => {
+        React.createElement(Flex_1.Box, { className: `${baseClassName}__Body` }, props.abObjects.map((abObject) => {
             return (React.createElement(exports.AdaptableObjectCompactListItem, { key: abObject.Uuid, abObject: abObject, module: props.module }));
         }))));
 };

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

@@ -43,12 +43,14 @@ interface AdaptableObjectListItemProps {
      */
     deleteDisabled?: boolean;
     deleteTooltip?: string;
+    className?: string;
 }
 export declare const AdaptableObjectListItem: React.FunctionComponent<AdaptableObjectListItemProps>;
 interface AdaptableObjectListProps {
     items: AdaptableObjectView[];
     module: IModule;
     itemProps?: Partial<AdaptableObjectListItemProps>;
+    className?: string;
 }
 export declare const AdaptableObjectList: React.FunctionComponent<AdaptableObjectListProps>;
 export {};

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -4,17 +4,18 @@ exports.AdaptableObjectList = exports.AdaptableObjectListItem = exports.Adaptabl
 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 InternalRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/InternalRedux"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonDelete_1 = require("../Buttons/ButtonDelete");
 const ButtonEdit_1 = require("../Buttons/ButtonEdit");
 const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
-const ValueSelector_1 = require("../ValueSelector");
+const Flex_1 = require("../../../components/Flex");
+const twMerge_1 = require("../../../twMerge");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const Tag_1 = require("../../../components/Tag/Tag");
 const ICON_SIZE = 26;
 const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
 const ITEM_BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}__Item`;
@@ -37,25 +38,25 @@ const AdaptableObjectListItemView = (props) => {
         };
     }
     const deleteActionButton = React.createElement(ButtonDelete_1.ButtonDelete, { ...deleteActionProps });
-    return (React.createElement(rebass_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", mb: 3, className: (0, join_1.default)(props.className, baseClassName), style: props.style },
-        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, props.items.filter?.(Boolean)?.map((tag, index) => {
+    return (React.createElement(Flex_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: (0, twMerge_1.twMerge)(baseClassName, 'twa:rounded-standard', props.className), style: props.style },
+        React.createElement(Flex_1.Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col` }, props.items.filter?.(Boolean)?.map((tag, index) => {
             const labelElement = typeof tag.label === 'function'
                 ? React.createElement(tag.label, { key: index, data: props.abObject })
                 : tag.label ?? tag.name;
-            return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, mb: 2, className: `${baseClassName}__row` },
-                !tag.isLabelInline && (React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
+            return (React.createElement(Flex_1.Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, className: `${baseClassName}__row twa:gap-3` },
+                !tag.isLabelInline && (React.createElement(Flex_1.Box, { className: `${baseClassName}__label twa:flex twa:items-center twa:flex-row twa:text-nowrap` },
                     labelElement,
-                    props.showEditButton && (React.createElement(SimpleButton_1.default, { "data-name": `${tag.name}-edit-button`, accessLevel: props.accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
+                    props.showEditButton && (React.createElement(SimpleButton_1.default, { "data-name": `${tag.name}-edit-button`, accessLevel: props.accessLevel, className: `${baseClassName}__edit-property twa:ml-1`, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
                             props.handleOnEdit(tag.name);
                         } })))),
-                React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__values` },
+                React.createElement(Flex_1.Box, { className: `twa:flex-1 ${baseClassName}__values` },
                     typeof tag.view === 'function'
                         ? React.createElement(tag.view, {
                             data: props.abObject,
                             module: props.module,
                         })
                         : tag.view,
-                    Boolean(tag?.values && tag?.values?.length) && (React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })),
+                    Boolean(tag?.values && tag?.values?.length) ? (React.createElement(Tag_1.TagList, { tags: tag.values.map(String) })) : null,
                     typeof tag.viewAfter === 'function'
                         ? React.createElement(tag.viewAfter, {
                             data: props.abObject,
@@ -63,16 +64,17 @@ const AdaptableObjectListItemView = (props) => {
                         })
                         : tag.viewAfter)));
         })),
-        props.showActions && (React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons` },
-            React.createElement(rebass_1.Flex, { justifyContent: "end" },
+        props.showActions && (React.createElement(Flex_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons twa:ml-3 twa:pl-3 twa:text-right twa:min-w-[80px]` },
+            React.createElement(Flex_1.Flex, { className: "twa:justify-end" },
                 props.actions,
                 props.teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })),
                 props.onDelete && (React.createElement(SimpleButton_1.default, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "delete", onClick: props.onDelete, variant: "text" })),
-                props.deleteAction && deleteActionButton,
+                props.deleteAction ? deleteActionButton : null,
                 props.showEditButton && (React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))),
-            React.createElement(rebass_1.Box, { flex: 1 }),
-            props.suspendedEnabled && (React.createElement(rebass_1.Flex, { justifyContent: "end" },
-                React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel })))))));
+            props.suspendedEnabled && (React.createElement(React.Fragment, null,
+                React.createElement(Flex_1.Box, { className: "twa:flex-1 twa:min-h-[20px]" }),
+                React.createElement(Flex_1.Flex, { className: "twa:justify-end" },
+                    React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel }))))))));
 };
 exports.AdaptableObjectListItemView = AdaptableObjectListItemView;
 const AdaptableObjectListItem = (props) => {
@@ -90,7 +92,7 @@ const AdaptableObjectListItem = (props) => {
     const entityType = props.module.moduleInfo.FriendlyName;
     const moduleAccessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const accessLevel = AdaptableHelper_1.default.getAccessLevelForObject(props.data.abObject, moduleAccessLevel);
-    const itemClassName = (0, join_1.default)(props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
+    const itemClassName = (0, clsx_1.default)(props.className, props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
         `${ITEM_BASE_CLASS_NAME}--is-suspended`);
     const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
@@ -126,6 +128,6 @@ const AdaptableObjectListItem = (props) => {
 };
 exports.AdaptableObjectListItem = AdaptableObjectListItem;
 const AdaptableObjectList = (props) => {
-    return (React.createElement("ul", { className: LIST_BASE_CLASS_NAME }, props?.items?.map((item, index) => (React.createElement(exports.AdaptableObjectListItem, { key: item.abObject.Uuid ?? index, data: item, module: props.module, ...props.itemProps })))));
+    return (React.createElement("ul", { className: (0, twMerge_1.twMerge)((0, clsx_1.default)(LIST_BASE_CLASS_NAME, 'twa:list-none twa:p-0 twa:gap-3 twa:flex twa:flex-col', props.className)) }, props?.items?.map((item, index) => (React.createElement(exports.AdaptableObjectListItem, { key: item.abObject.Uuid ?? index, data: item, module: props.module, ...props.itemProps })))));
 };
 exports.AdaptableObjectList = AdaptableObjectList;

package/src/View/Components/AdaptableObjectRow/index.d.ts

@@ -5,6 +5,7 @@ export interface AdaptableObjectRowProps extends React.ClassAttributes<Adaptable
     fontSize?: string;
     onClick?: (e: React.SyntheticEvent) => void;
     style?: React.CSSProperties;
+    className?: string;
     isSuspended?: boolean;
 }
 export declare class AdaptableObjectRow extends React.Component<AdaptableObjectRowProps, {}> {

package/src/View/Components/AdaptableObjectRow/index.js

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectRow = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-/// <reference path="../../typings/.d.ts" />
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
+const Flex_1 = require("../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 class AdaptableObjectRow extends React.Component {
     render() {
-        const colItems = this.props.colItems.map((colItem, index) => (React.createElement(rebass_1.Text, { className: "ab-AdaptableObjectRow__cell", "data-name": "list-group-cell", key: index, title: typeof colItem.Content === 'string' ? colItem.Content : undefined, flex: colItem.Size, paddingLeft: 1, paddingRight: 1 }, colItem.Content)));
-        const className = (0, join_1.default)('ab-AdaptableObjectRow', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended');
-        return (React.createElement(rebass_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style }, colItems));
+        const colItems = this.props.colItems.map((colItem, index) => (React.createElement(Flex_1.Box, { className: `ab-AdaptableObjectRow__cell twa:px-1`, style: { flex: colItem.Size }, "data-name": "list-group-cell", key: index, title: typeof colItem.Content === 'string' ? colItem.Content : undefined }, colItem.Content)));
+        const className = (0, clsx_1.default)('ab-AdaptableObjectRow', 'twa:p-3', 'twa:m-0', this.props.isSuspended && 'ab-AdaptableObjectRow--is-suspended', this.props.className);
+        return (React.createElement(Flex_1.Flex, { className: className, onClick: this.props.onClick, style: this.props.style }, colItems));
     }
 }
 exports.AdaptableObjectRow = AdaptableObjectRow;

package/src/View/Components/Buttons/ButtonBase/index.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { ButtonProps as BtnProps } from 'rebass';
 import { AccessLevel } from '../../../../AdaptableState/Common/Entitlement';
-export interface ButtonBaseProps extends BtnProps {
+export interface ButtonBaseProps extends React.HTMLProps<HTMLButtonElement | HTMLDivElement> {
     overrideDisableButton?: boolean;
     transformGlyph?: boolean;
     className?: string;

package/src/View/Components/Buttons/ButtonBase/index.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonBase = 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 Flex_1 = require("../../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twMerge_1 = require("../../../../twMerge");
 const Glyphicon = ({ glyph, style }) => {
     return React.createElement("span", { style: style, className: `glyphicon glyphicon-${glyph}` });
 };
-const baseClassName = 'ab-Button';
+const baseClassName = 'ab-Button twa:text-current';
 class ButtonBase extends React.Component {
     render() {
         let isDisabled;
@@ -57,7 +58,7 @@ class ButtonBase extends React.Component {
                 ' ',
                 this.props.iconPosition !== 'end' ? text : null));
         }
-        let button = (React.createElement(rebass_1.Button, { ...this.props, style: { color: 'currentColor', ...this.props.style }, className: (0, join_1.default)(baseClassName, `${baseClassName}--size-${'normal'}`, `${baseClassName}--style-${'normal'}`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()) }, content));
+        let button = (React.createElement(Flex_1.Box, { ...this.props, as: "button", style: this.props.style, className: (0, twMerge_1.twMerge)((0, clsx_1.default)(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`), this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()) }, content));
         let buttonwithtooltip = React.createElement("div", null, button);
         return hideToolTip ? button : buttonwithtooltip;
     }

package/src/View/Components/Buttons/ButtonClear.js

@@ -6,7 +6,8 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonClear extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "clear", tooltip: "Clear", iconSize: 20, icon: this.props.showIcon == false ? '' : 'close', ...this.props, variant: "text" }, this.props.showText ? 'Clear' : ''));
+        const { showText, showIcon, ...innerProps } = this.props;
+        return (React.createElement(SimpleButton_1.default, { "data-name": "clear", tooltip: "Clear", iconSize: 20, icon: showIcon == false ? '' : 'close', ...innerProps, variant: "text" }, showText ? 'Clear' : ''));
     }
 }
 exports.ButtonClear = ButtonClear;

package/src/View/Components/Buttons/ButtonFunction.js

@@ -4,9 +4,10 @@ exports.ButtonFunction = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const twMerge_1 = require("../../../twMerge");
 class ButtonFunction extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "function", tooltip: "Module", iconSize: 20, icon: "function", mr: 1, ...this.props }));
+        return (React.createElement(SimpleButton_1.default, { "data-name": "function", tooltip: "Module", iconSize: 20, icon: "function", ...this.props, className: (0, twMerge_1.twMerge)('twa:mr-1', this.props.className) }));
     }
 }
 exports.ButtonFunction = ButtonFunction;

package/src/View/Components/Buttons/ButtonNew.d.ts

@@ -1,3 +1,13 @@
 import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
-export declare const ButtonNew: (props: SimpleButtonProps) => React.JSX.Element;
+type ButtonNewProps = {
+    variant?: SimpleButtonProps['variant'];
+    className?: string;
+    tone?: SimpleButtonProps['tone'];
+    tooltip?: SimpleButtonProps['tooltip'];
+    accessLevel?: SimpleButtonProps['accessLevel'];
+    children?: React.ReactNode;
+    onClick?: () => void;
+};
+export declare const ButtonNew: (props: ButtonNewProps) => React.JSX.Element;
+export {};

package/src/View/Components/Buttons/ButtonNew.js

@@ -4,7 +4,8 @@ exports.ButtonNew = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const twMerge_1 = require("../../../twMerge");
 const ButtonNew = (props) => {
-    return (React.createElement(SimpleButton_1.default, { "data-name": "new", tooltip: "New", tone: "accent", icon: "plus", variant: "raised", ...props }, props.children === undefined ? 'New' : props.children));
+    return (React.createElement(SimpleButton_1.default, { "data-name": "new", tone: props.tone || 'accent', icon: "plus", variant: props.variant || 'raised', tooltip: props.tooltip || 'New', accessLevel: props.accessLevel, onClick: props.onClick, className: (0, twMerge_1.twMerge)(`twa:flex twa:flex-row twa:items-center`, props.className) }, props.children === undefined ? 'New' : props.children));
 };
 exports.ButtonNew = ButtonNew;

package/src/View/Components/Buttons/EntityListActionButtons.d.ts

@@ -25,7 +25,7 @@ export interface EntityListActionButtonsProps extends React.ClassAttributes<Enti
     overrideTooltipShare?: string;
     confirmDeleteAction: Redux.Action;
     entityType: string;
-    justifyContent?: string;
+    justifyContent?: 'start' | 'center' | 'end';
     accessLevel: AccessLevel;
     cloneAccessLevel?: AccessLevel;
     editSize: any;

package/src/View/Components/Buttons/EntityListActionButtons.js

@@ -6,56 +6,27 @@ const React = tslib_1.__importStar(require("react"));
 const ButtonEdit_1 = require("./ButtonEdit");
 const ButtonClone_1 = require("./ButtonClone");
 const ButtonDelete_1 = require("./ButtonDelete");
-const rebass_1 = require("rebass");
 const ButtonShare_1 = require("./ButtonShare");
 const SuspendToggleButton_1 = require("./SuspendToggleButton/SuspendToggleButton");
+const Flex_1 = require("../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const stopPropagation = (e) => {
     e.stopPropagation();
 };
 class EntityListActionButtons extends React.Component {
     render() {
-        return (React.createElement(rebass_1.Flex, { justifyContent: this.props.justifyContent || 'center', margin: 0, padding: 0, onClick: stopPropagation },
-            this.props.showEdit && (React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), style: {
-                    marginLeft: '0px',
-                    marginTop: '2px',
-                    marginBottom: '2px',
-                    marginRight: '2px',
-                    color: 'var(--ab-color-text-on-edit)',
-                    fill: 'var(--ab-color-text-on-edit)',
-                    background: 'var(--ab-color-action-edit)',
-                }, disabled: this.props.overrideDisableEdit || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })),
-            this.props.showClone && (React.createElement(ButtonClone_1.ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), style: {
-                    marginLeft: '0px',
-                    marginTop: '2px',
-                    marginBottom: '2px',
-                    marginRight: '2px',
-                    color: 'var(--ab-color-text-on-clone)',
-                    fill: 'var(--ab-color-text-on-clone)',
-                    background: 'var(--ab-color-action-clone)',
-                }, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })),
-            this.props.showDelete && (React.createElement(ButtonDelete_1.ButtonDelete, { "data-name": "delete", style: {
-                    marginLeft: '1px',
-                    marginTop: '2px',
-                    marginBottom: '2px',
-                    marginRight: '1px',
-                    //TODO move those styles in ButtonDelete
-                    color: 'var(--ab-color-text-on-delete)',
-                    fill: 'var(--ab-color-text-on-delete)',
-                    background: 'var(--ab-color-action-delete)',
-                }, disabled: this.props.overrideDisableDelete || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })),
-            this.props.showShare && (React.createElement(ButtonShare_1.ButtonShare, { style: {
-                    marginLeft: '1px',
-                    marginTop: '2px',
-                    marginBottom: '2px',
-                    marginRight: '1px',
-                    color: 'var(--ab-color-text-on-share)',
-                    fill: 'var(--ab-color-text-on-share)',
-                    background: 'var(--ab-color-action-share)',
-                }, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })),
-            this.props.showSuspend && this.props.suspendableObject && (React.createElement(SuspendToggleButton_1.SuspendToggleButton, { style: {
-                    marginLeft: 2,
-                    alignSelf: 'center',
-                }, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == 'ReadOnly' }))));
+        const { justifyContent } = this.props;
+        const justifyContentClassName = (0, clsx_1.default)({
+            'twa:justify-start': justifyContent === 'start',
+            'twa:justify-center': justifyContent === 'center',
+            'twa:justify-end': justifyContent === 'end',
+        }) || 'twa:justify-center';
+        return (React.createElement(Flex_1.Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation },
+            this.props.showEdit && (React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-edit twa:bg-action-edit twa:fill-text-on-edit`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })),
+            this.props.showClone && (React.createElement(ButtonClone_1.ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-text-on-clone twa:bg-action-clone twa:fill-text-on-clone`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })),
+            this.props.showDelete && (React.createElement(ButtonDelete_1.ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-text-on-delete twa:bg-action-delete twa:fill-text-on-delete`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })),
+            this.props.showShare && (React.createElement(ButtonShare_1.ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-text-on-share twa:bg-action-share twa:fill-text-on-share`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == 'ReadOnly', tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })),
+            this.props.showSuspend && this.props.suspendableObject && (React.createElement(SuspendToggleButton_1.SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == 'ReadOnly' }))));
     }
 }
 exports.EntityListActionButtons = EntityListActionButtons;

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.d.ts

@@ -9,6 +9,7 @@ interface EntityListSuspendButtonProps {
     style?: React.CSSProperties;
     disabled?: boolean;
     accessLevel?: AccessLevel;
+    className?: string;
 }
 export declare const SuspendToggleButton: React.FunctionComponent<EntityListSuspendButtonProps>;
 export {};

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.js

@@ -4,7 +4,8 @@ exports.SuspendToggleButton = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ToggleButton_1 = require("../../../../components/ToggleButton");
-exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel }) => {
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className }) => {
     const handleOnChange = React.useCallback((checked) => {
         if (checked) {
             onUnSuspend(suspendableObject);
@@ -15,5 +16,5 @@ exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSu
     }, [onUnSuspend, onSuspend]);
     const preparedDisabled = (accessLevel && accessLevel === 'ReadOnly') || disabled;
     const isSuspended = suspendableObject.IsSuspended;
-    return (React.createElement(ToggleButton_1.ToggleButton, { className: "ab-SuspendButton", "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: preparedDisabled, style: style, onChange: handleOnChange, checked: !isSuspended }, isSuspended ? 'inactive' : 'active'));
+    return (React.createElement(ToggleButton_1.ToggleButton, { className: (0, clsx_1.default)(`ab-SuspendButton`, className), "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: preparedDisabled, style: style, onChange: handleOnChange, checked: !isSuspended }, isSuspended ? 'inactive' : 'active'));
 });

package/src/View/Components/CellPopup/index.d.ts

@@ -9,5 +9,5 @@ export type CellPopupHandle = {
     refreshContent: () => void;
 };
 export declare const CellPopup: React.ForwardRefExoticComponent<CellPopupProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<CellPopupHandle>>;

package/src/View/Components/ColumnFilter/AdaptableColumnFilter.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 export interface AdaptableColumnFilterProps {
     location: 'columnMenu' | 'filterForm';
     columnId: string;
-    padding?: BoxProps['p'];
-    wrapperProps?: BoxProps;
+    wrapperProps?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
 }
 /**
  * This wrapper knows about predicates.

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { QlPredicate, QlPredicateDef } from '../../../parser/src/predicate';
 interface ColumnFilterComponentProps {
     location: 'columnMenu' | 'filterForm';
@@ -9,7 +8,10 @@ interface ColumnFilterComponentProps {
     predicate?: QlPredicate;
     predicateDefs: QlPredicateDef[];
     onPredicateChange: (predicate: QlPredicate | null) => void;
-    wrapperProps?: BoxProps;
+    wrapperProps?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
 }
 export declare const ColumnFilterComponent: React.FunctionComponent<ColumnFilterComponentProps>;
 export {};

package/src/View/Components/ColumnFilter/ColumnFilter.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnFilterComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const ColumnFilterInputList_1 = require("./components/ColumnFilterInputList");
 const hooks_1 = require("./hooks");
@@ -11,28 +10,26 @@ const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const Select_1 = require("../../../components/Select");
 const utils_1 = require("./utils");
+const Flex_1 = require("../../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twMerge_1 = require("../../../twMerge");
 const ColumnFilterPredicateDropdown = (props) => {
     const predicateDef = (0, hooks_1.usePredicateDef)(props.predicate?.operator, props.predicateDefs);
     const options = props.predicateDefs.map((predicateDef) => {
         return {
-            label: (React.createElement(rebass_1.Box, { display: 'flex', alignItems: "center" },
-                React.createElement(SimpleButton_1.default, { variant: "raised", mr: 2, tone: "accent" }, predicateDef.icon),
+            label: (React.createElement(Flex_1.Box, { className: "twa:flex twa:items-center" },
+                React.createElement(SimpleButton_1.default, { variant: "raised", className: "twa:mr-2", tone: "accent" }, predicateDef.icon),
                 predicateDef.label)),
             value: predicateDef.operator,
         };
     });
     const operator = props.predicate?.operator;
     const isAndOr = operator === 'AND' || operator === 'OR';
-    return (React.createElement(rebass_1.Box, { display: 'flex', alignItems: "center", className: "ab-ColumnFilterPredicateDropdown", style: {
+    return (React.createElement(Flex_1.Box, { className: "twa:flex twa:items-center ab-ColumnFilterPredicateDropdown", style: {
             //@ts-ignore ignore
             '--ab-cmp-input__background': 'var(--ab-color-primary)',
         } },
-        React.createElement(Select_1.Select, { style: predicateDef
-                ? {
-                    minWidth: '10rem',
-                }
-                : null // for AND and OR don't apply a min width
-            , onChange: (value) => {
+        React.createElement(Select_1.Select, { className: predicateDef ? `twa:min-w-[10rem]` : null, onChange: (value) => {
                 props.onPredicateChange({
                     operator: value,
                     args: [],
@@ -40,10 +37,10 @@ const ColumnFilterPredicateDropdown = (props) => {
             }, options: options, value: isAndOr ? 'Add Condition' : props.predicate?.operator })));
 };
 const ColumnFilterEditor = (props) => {
-    return (React.createElement(rebass_1.Box, { mb: 3 },
-        React.createElement(rebass_1.Flex, { mb: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:mb-3" },
+        React.createElement(Flex_1.Flex, { className: "twa:mb-2" },
             React.createElement(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }),
-            React.createElement(rebass_1.Flex, { alignItems: "center", ml: 2 },
+            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
                 React.createElement(SimpleButton_1.default, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }))),
         React.createElement(ColumnFilterInputList_1.ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })));
 };
@@ -58,10 +55,10 @@ const AndOrInput = (props) => {
         //   ]}
         // />
         (React.createElement(
-            rebass_1.Flex,
-            { flex: 1 },
-            React.createElement(Radio_1.default, { mr: 2, onClick: () => props.onChange('AND'), checked: props.operator === 'AND' }, "AND"),
-            React.createElement(Radio_1.default, { mr: 2, onClick: () => props.onChange('OR'), checked: props.operator === 'OR' }, "OR")
+            Flex_1.Flex,
+            { className: "twa:flex-1" },
+            React.createElement(Radio_1.default, { className: "twa:mr-2", onClick: () => props.onChange('AND'), checked: props.operator === 'AND' }, "AND"),
+            React.createElement(Radio_1.default, { className: "twa:mr-2", onClick: () => props.onChange('OR'), checked: props.operator === 'OR' }, "OR")
         ))
     );
 };
@@ -129,22 +126,28 @@ const ColumnFilterComponent = (props) => {
             .some((adaptablePredicate) => adaptable.api.predicateApi.isValidPredicate(adaptablePredicate));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { flexDirection: "column", backgroundColor: "primarylight", pb: !props.hideActionButtons ? 2 : undefined, mb: props.location === 'filterForm' ? 2 : undefined, mt: props.location === 'columnMenu' ? 2 : undefined, ml: props.location === 'columnMenu' ? 2 : undefined, mr: props.location === 'columnMenu' ? 2 : undefined, style: { borderRadius: 'var(--ab__border-radius)' } },
-            React.createElement(rebass_1.Flex, { m: 2 },
+        React.createElement(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)({
+                'twa:bg-primarylight': true,
+                'twa:pb-2': !props.hideActionButtons,
+                'twa:mb-2': props.location === 'filterForm',
+                'twa:mt-2 twa:ml-2 twa:mr-2': props.location === 'columnMenu',
+                'twa:rounded-standard': true,
+            }) },
+            React.createElement(Flex_1.Flex, { className: "twa:m-2" },
                 React.createElement(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator })),
-            !props.hideActionButtons && (React.createElement(rebass_1.Flex, { ml: 2, mr: 2, className: "ab-ColumnFilter-actions", justifyContent: "space-between" },
-                React.createElement(rebass_1.Box, { className: "ab-ColumnFilter-action-clearall" },
+            !props.hideActionButtons && (React.createElement(Flex_1.Flex, { className: "ab-ColumnFilter-actions twa:ml-2 twa:mr-2", justifyContent: "space-between" },
+                React.createElement(Flex_1.Box, { className: "ab-ColumnFilter-action-clearall" },
                     React.createElement(SimpleButton_1.default, { "aria-label": 'Clear All Filters', onClick: () => clearAllFilters() }, "Clear All")),
                 manuallyApplyColumnFilter ? (React.createElement(React.Fragment, null,
-                    React.createElement(rebass_1.Box, { flex: 1, "data-name": "spacer" }),
-                    React.createElement(rebass_1.Box, { className: "ab-ColumnFilter-action-reset", mr: 2 },
+                    React.createElement(Flex_1.Box, { className: "twa:flex-1", "data-name": "spacer" }),
+                    React.createElement(Flex_1.Box, { className: "ab-ColumnFilter-action-reset twa:mr-2" },
                         React.createElement(SimpleButton_1.default, { "aria-label": 'Reset All', tone: "neutral", variant: "raised", onClick: () => {
                                 setPredicateNotYetApplied(props.predicate);
                             } }, "Reset")),
-                    React.createElement(rebass_1.Box, { className: "ab-ColumnFilter-action-apply" },
+                    React.createElement(Flex_1.Box, { className: "ab-ColumnFilter-action-apply" },
                         React.createElement(SimpleButton_1.default, { "aria-label": 'Apply Filter', tone: "accent", variant: "raised", onClick: applyFilter, disabled: !isAtLeastOneColumnFilterValid(predicateNotYetApplied?.args) && !isAtLeastOneColumnFilterValid(currentPredicate.args) }, "Apply")))) : null))),
-        React.createElement(rebass_1.Flex, { flexDirection: "column", className: "ab-ColumnFilter", flex: 1, minHeight: 0, ...props.wrapperProps },
-            React.createElement(rebass_1.Box, { style: { overflow: 'auto' } },
+        React.createElement(Flex_1.Flex, { flexDirection: "column", style: props.wrapperProps?.style, className: (0, twMerge_1.twMerge)(`ab-ColumnFilter twa:flex-1 twa:min-h-0`, props.wrapperProps?.className) },
+            React.createElement(Flex_1.Box, { className: "ab-ColumnFilter-content twa:overflow-auto" },
                 currentPredicate.args.map((predicate, index) => {
                     return (React.createElement(ColumnFilterEditor, { deleteDisabled: currentPredicate.args.length < 2, onDelete: () => {
                             const currentPredicate = currentPredicateRef.current;