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

package/src/components/Input/index.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { HTMLProps } from 'react';
-import { BoxProps } from 'rebass';
 export declare const baseClassName = "ab-Input";
 export type InputProps = HTMLProps<HTMLInputElement> & {
     type?: string;
     disabled?: boolean;
     list?: any;
-} & BoxProps;
+};
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/src/components/Input/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = 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("../utils/join"));
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-Input';
 const Input = React.forwardRef((props, ref) => {
     const { disabled, className, ...inputProps } = props;
@@ -15,6 +15,9 @@ const Input = React.forwardRef((props, ref) => {
     if (type === 'string') {
         type = 'text';
     }
-    return (React.createElement(rebass_1.Box, { as: "input", ref: ref, ...inputProps, type: type, disabled: disabled, className: (0, join_1.default)(className, exports.baseClassName, type ? `${exports.baseClassName}--type-${type}` : '', disabled ? `${exports.baseClassName}--disabled` : '') }));
+    return (React.createElement(Flex_1.Box, { as: "input", ref: ref, ...inputProps, type: type, disabled: disabled, className: (0, clsx_1.default)(className, exports.baseClassName, 'twa:min-h-input', type ? `${exports.baseClassName}--type-${type}` : '', disabled ? `${exports.baseClassName}--disabled` : '', {
+            'twa:bg-(--ab-cmp-input__background)': !disabled,
+            'twa:bg-(--ab-cmp-input--disabled__background)': disabled,
+        }) }));
 });
 exports.default = Input;

package/src/components/Modal/Backdrop.js

@@ -26,7 +26,7 @@ const Backdrop = (props) => {
         });
         return () => (0, exports.updatePositionInStack)(uuid, null);
     }, []);
-    return backdropVisible ? (React.createElement("div", { "data-id": uuid, style: { zIndex }, className: `${exports.baseClassName}-backdrop` })) : null;
+    return backdropVisible ? (React.createElement("div", { "data-id": uuid, style: { zIndex }, className: `${exports.baseClassName}-backdrop twa:fixed twa:inset-0 twa:z-900 twa:bg-(--ab-cmp-modal-backdrop__background)` })) : null;
 };
 const stack = {};
 const updatePositionInStack = (id, data) => {

package/src/components/Modal/index.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
+import { HTMLProps } from 'react';
+import { FlexProps } from '../Flex';
 export declare const ensurePortalElement: () => HTMLElement;
 export declare const ensureLoadingScreenPortalElement: () => HTMLElement;
-export interface ModalProps extends FlexProps {
+export interface ModalProps extends FlexProps, HTMLProps<HTMLDivElement> {
     isOpen?: boolean;
     baseZIndex?: number;
     onBringToFront?: () => void;

package/src/components/Modal/index.js

@@ -5,13 +5,13 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const react_1 = require("react");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const react_remove_scroll_1 = require("react-remove-scroll");
-const rebass_1 = require("rebass");
 const Backdrop_1 = tslib_1.__importStar(require("./Backdrop"));
 const uuid_1 = require("../utils/uuid");
 const UIHelper_1 = require("../../View/UIHelper");
 const useStacking_1 = require("../WindowModal/useStacking");
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 let portalElement;
 let loadingScreenPortalElement;
 const ensurePortalElement = () => {
@@ -51,6 +51,6 @@ const Modal = (props) => {
     return (0, react_dom_1.createPortal)(isOpen ? (React.createElement(React.Fragment, null,
         React.createElement(Backdrop_1.default, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }),
         React.createElement(react_remove_scroll_1.RemoveScroll, null,
-            React.createElement(rebass_1.Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: (0, join_1.default)(Backdrop_1.baseClassName, className) }, children)))) : null, portalElement);
+            React.createElement(Flex_1.Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: (0, clsx_1.default)('twa:fixed twa:inset-0 twa:z-1000 twa:font-(family-name:--ab__font-family)', Backdrop_1.baseClassName, className) }, children)))) : null, portalElement);
 };
 exports.Modal = Modal;

package/src/components/OverlayTrigger/index.js

@@ -100,6 +100,9 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
     // when moving the mouse cursor from the trigger to the overlay
     // for this case we debounce the visible change for a very small amount of time
     (0, debounce_1.default)((visible) => {
+        // if (!visible) {
+        //   return;
+        // }
         onVisibleChange?.(visible);
         if (!visible) {
             hideTimeoutRef.current = setTimeout(() => {

package/src/components/Panel/index.d.ts

@@ -1,18 +1,34 @@
 import * as React from 'react';
-import { BoxProps, FlexProps } from 'rebass';
 import { ReactNode, HTMLProps } from 'react';
+import { FlexProps } from '../Flex';
 export declare const baseClassName = "ab-Panel";
 export interface HeaderProps extends FlexProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
 }
-export type PanelProps = HTMLProps<HTMLElement> & {
+export type PanelProps = HTMLProps<HTMLDivElement> & {
     header?: ReactNode | string;
     children?: ReactNode;
     headerProps?: HeaderProps;
-    bodyProps?: BoxProps;
+    bodyProps?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
     variant?: 'default' | 'primary' | 'modern';
     border?: string | number;
-    borderRadius?: string | number;
     bodyScroll?: string | boolean;
-} & BoxProps;
-declare const Panel: React.FC<PanelProps>;
+} & FlexProps;
+declare const PlainHeader: ({ children, className }: {
+    children?: ReactNode;
+    className?: string;
+}) => React.JSX.Element;
+declare const FlexBody: ({ children, className }: {
+    children?: ReactNode;
+    className?: string;
+}) => React.JSX.Element;
+declare const Panel: React.FC<PanelProps> & {
+    FlexBody: typeof FlexBody;
+    PlainHeader: typeof PlainHeader;
+};
 export default Panel;

package/src/components/Panel/index.js

@@ -3,32 +3,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = 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("../utils/join"));
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const Flex_1 = require("../Flex");
+const twMerge_1 = require("../../twMerge");
 exports.baseClassName = 'ab-Panel';
-const Header = ({ children, variant = 'default', ...headerProps }) => {
+const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-defaultbackground twa:text-text-on-defaultbackground';
+const Header = ({ children, variant = 'default', className, style, onClick, ...flexProps }) => {
     if (!children) {
         return null;
     }
-    const style = {};
-    return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", ...headerProps, style: { ...style, ...headerProps.style }, className: (0, join_1.default)(`${exports.baseClassName}__header`, `${exports.baseClassName}__header--variant-${variant}`) }, children));
+    return (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", style: { ...style }, onClick: onClick, className: (0, twMerge_1.twMerge)(`${exports.baseClassName}__header ${exports.baseClassName}__header--variant-${variant}`, className), ...flexProps }, children));
 };
-const Body = ({ children, bodyScroll, variant, ...bodyProps }) => {
+const Body = ({ children, bodyScroll, variant, className, style, }) => {
     if (!children) {
         return null;
     }
     if (bodyScroll === true) {
         bodyScroll = 'auto';
     }
-    return (React.createElement(rebass_1.Box, { ...bodyProps, className: (0, join_1.default)(`${exports.baseClassName}__body`, variant && `${exports.baseClassName}__body--variant-${variant}`, bodyScroll ? `${exports.baseClassName}__body--scroll-${bodyScroll}` : null) }, children));
+    const bodyCls = (0, clsx_1.default)(DEFAULT_BODY_CLS, `${exports.baseClassName}__body`, variant && `${exports.baseClassName}__body--variant-${variant}`, bodyScroll ? `twa:overflow-auto` : null, {
+        'twa:bg-primarylight twa:text-text-on-primary twa:border-0': variant === 'modern',
+    }, className);
+    return (React.createElement(Flex_1.Box, { style: style, className: bodyCls }, children));
+};
+const PlainHeader = ({ children, className }) => {
+    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(`${exports.baseClassName}__header`, `${exports.baseClassName}__header--variant-plain`, className) }, children));
+};
+const FlexBody = ({ children, className }) => {
+    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(DEFAULT_BODY_CLS, `${exports.baseClassName}__body`, `${exports.baseClassName}__body--variant-flex`, 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', className) }, children));
 };
 const Panel = (props) => {
-    const { borderRadius, border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default', ...boxProps } = props;
+    const { border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default', ...boxProps } = props;
     const style = {};
-    if (borderRadius !== undefined) {
-        style['--ab-cmp-panel__border-radius'] =
-            typeof borderRadius == 'number' ? `var(--ab-space-${borderRadius})` : borderRadius;
-    }
     const headerStyle = {
         border,
         ...(headerProps ? headerProps.style : null),
@@ -37,8 +43,41 @@ const Panel = (props) => {
         border,
         ...(bodyProps ? bodyProps.style : null),
     };
-    return (React.createElement(rebass_1.Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: (0, join_1.default)(className, exports.baseClassName, `${exports.baseClassName}--variant-${variant}`, !header ? `${exports.baseClassName}--no-header` : `${exports.baseClassName}--with-header`) },
-        React.createElement(Header, { ...headerProps, style: headerStyle, variant: variant }, header),
-        React.createElement(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant }, children)));
+    const cls = (0, twMerge_1.twMerge)((0, clsx_1.default)(exports.baseClassName, `${exports.baseClassName}--variant-${variant}`, !header ? `${exports.baseClassName}--no-header` : `${exports.baseClassName}--with-header`, 'twa:rounded-standard', 'twa:flex twa:flex-col'), className);
+    let headerCls = headerProps?.className;
+    if (cls.includes('twa:rounded-none')) {
+        headerCls = (0, twMerge_1.twMerge)(headerCls, 'twa:rounded-none');
+    }
+    let bodyCls = bodyProps?.className;
+    if (cls.includes('twa:rounded-none')) {
+        bodyCls = (0, twMerge_1.twMerge)(bodyCls, 'twa:rounded-none');
+    }
+    if (cls.includes('twa:border-none')) {
+        bodyCls = (0, twMerge_1.twMerge)(bodyCls, 'twa:border-none');
+    }
+    let childrenArr = React.Children.toArray(children);
+    let theBody;
+    let theHeader;
+    childrenArr.forEach((child) => {
+        if (React.isValidElement(child) && child.type === FlexBody) {
+            theBody = child;
+        }
+        else if (React.isValidElement(child) && child.type === PlainHeader) {
+            theHeader = child;
+        }
+    });
+    if (theHeader) {
+        childrenArr = childrenArr.filter((child) => child !== theHeader);
+        theHeader = (React.createElement(PlainHeader, { ...theHeader.props, className: (0, clsx_1.default)(headerCls, theHeader.props.className ?? '') }));
+    }
+    if (theBody) {
+        theBody = (React.createElement(FlexBody, { ...theBody.props, className: (0, clsx_1.default)(bodyCls, theBody.props.className ?? '') }));
+    }
+    return (React.createElement(Flex_1.Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: cls },
+        theHeader ?? (React.createElement(Header, { ...headerProps, style: headerStyle, variant: variant, className: headerCls }, header)),
+        theBody ??
+            (childrenArr.length > 0 ? (React.createElement(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant, className: (0, twMerge_1.twMerge)(bodyCls) }, childrenArr)) : null)));
 };
+Panel.PlainHeader = PlainHeader;
+Panel.FlexBody = FlexBody;
 exports.default = Panel;

package/src/components/PopupWithFooter.js

@@ -5,12 +5,11 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
 const FlexWithFooter_1 = tslib_1.__importDefault(require("./FlexWithFooter"));
+const twMerge_1 = require("../twMerge");
 exports.PopupWithFooter = React.forwardRef((props, ref) => {
     const { showModal, onHide, footer, maxWidth, style, ...dialogProps } = props;
-    return (React.createElement(Dialog_1.default, { ...dialogProps, ref: ref, isOpen: showModal, onDismiss: onHide, showCloseButton: false, padding: 0 },
+    return (React.createElement(Dialog_1.default, { ...dialogProps, ref: ref, isOpen: showModal, onDismiss: onHide, showCloseButton: false, className: (0, twMerge_1.twMerge)('twa:p-0', dialogProps.className) },
         React.createElement(FlexWithFooter_1.default, { flexDirection: "column", style: style, footer: footer, footerProps: {
-                padding: 2,
-                backgroundColor: 'primary',
-                className: 'ab-Popup__footer',
+                className: 'ab-Popup__footer twa:p-2 twa:bg-primary',
             }, children: props.children })));
 });

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -9,7 +9,7 @@ const Loader_1 = require("../Loader");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
 const ExternalRenderer_1 = require("../../View/Components/ExternalRenderer");
 const Dialog_1 = tslib_1.__importDefault(require("../Dialog"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../Flex");
 const ProgressIndicator = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { active, text, render, frameworkComponent, renderMode } = (0, react_redux_1.useSelector)((state) => state.Popup.ProgressIndicator);
@@ -65,11 +65,11 @@ const ProgressIndicator = () => {
         customEl) : (
         // Otherwise use the default Flex layout
         (React.createElement(
-            rebass_1.Flex,
-            { alignItems: "center", flexDirection: "column", p: 3, className: "ab-ProgressIndicator-body" },
+            Flex_1.Flex,
+            { alignItems: "center", flexDirection: "column", className: "ab-ProgressIndicator-body twa:p-3" },
             React.createElement(Loader_1.LoaderSpinner, null),
-            React.createElement(rebass_1.Box, { mt: 3 },
-                text && React.createElement(rebass_1.Box, null, text),
+            React.createElement(Flex_1.Box, { className: "twa:mt-3" },
+                text && React.createElement(Flex_1.Box, null, text),
                 customEl)
         )))))
     ));

package/src/components/Radio/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactNode, SyntheticEvent } from 'react';
-import { BoxProps, FlexProps } from 'rebass';
+import { BoxProps } from '../Flex';
+type Variant = 'default' | 'text-only';
 type TypeProps = {
     checked?: boolean;
     as?: any;
@@ -10,20 +11,41 @@ type TypeProps = {
     children?: ReactNode | React.JSX.Element;
     gapDistance?: number;
     childrenPosition?: 'start' | 'end';
+    variant?: Variant;
 };
 export interface RadioProps extends TypeProps, Omit<BoxProps, keyof TypeProps> {
+    tabIndex?: number;
+    id?: string;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
 }
 export declare const useRadioContext: <T extends unknown>() => {
     value: T;
     onChange: (value: T) => void;
     name: string;
+    variant: Variant;
 };
 declare const Radio: ({ children, checked, onChange, value, name, gapDistance, childrenPosition, as, id, tabIndex, disabled, ...props }: RadioProps) => React.JSX.Element;
-export declare const RadioGroup: <T extends unknown>(props: FlexProps & {
-    orientation: 'horizontal' | 'vertical';
+export declare const RadioGroup: <T extends unknown>(props: {
+    orientation: "horizontal" | "vertical";
     value?: T;
     name?: string;
     defaultValue?: T;
     onRadioChange?: (value: T) => void;
+    className?: string;
+    children: React.ReactNode;
+    /**
+     * The variant of the radio group.
+     * @default 'default' - will show the radio button and the text
+     *
+     * 'text-only' - will show the text only and hide the radio button
+     */
+    variant?: Variant;
 }) => React.JSX.Element;
+export declare const radioGroupStyling: {
+    horizontalTextOnly: string;
+};
 export default Radio;

package/src/components/Radio/index.js

@@ -1,15 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroup = exports.useRadioContext = void 0;
+exports.radioGroupStyling = exports.RadioGroup = exports.useRadioContext = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
+const Flex_1 = require("../Flex");
+const twMerge_1 = require("../../twMerge");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twUtils_1 = require("../twUtils");
 const RadioContext = React.createContext({
     value: null,
     name: '',
     onChange: (v) => { },
+    variant: 'default',
 });
 const useRadioContext = () => {
     return React.useContext(RadioContext);
@@ -17,7 +21,7 @@ const useRadioContext = () => {
 exports.useRadioContext = useRadioContext;
 const Radio = ({ children, checked, onChange, value, name, gapDistance = 10, childrenPosition = 'end', as = 'label', id, tabIndex, disabled, ...props }) => {
     const context = (0, exports.useRadioContext)();
-    const { value: contextValue, onChange: contextOnChange, name: contextName } = context;
+    const { value: contextValue, onChange: contextOnChange, name: contextName, variant } = context;
     const [stateChecked, setStateChecked] = (0, react_1.useState)(false);
     const computedChecked = checked !== undefined
         ? checked
@@ -41,35 +45,29 @@ const Radio = ({ children, checked, onChange, value, name, gapDistance = 10, chi
     const beforeGap = childrenPosition === 'start' ? gap : null;
     const after = childrenPosition === 'end' ? children : null;
     const afterGap = childrenPosition === 'end' ? gap : null;
-    return (React.createElement(rebass_1.Box, { className: "ab-Radio", my: 2, ...props, style: {
-            display: 'inline-flex',
-            flexFlow: 'row',
-            alignItems: 'center',
-            cursor: 'pointer',
-            position: 'relative',
-            ...props.style,
-        }, as: as },
+    return (React.createElement(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)(`ab-Radio twa:my-2 twa:inline-flex twa:flex-row twa:items-center twa:cursor-pointer twa:relative`, props.className), "data-checked": computedChecked, as: as },
         before,
         beforeGap,
-        React.createElement("input", { disabled: disabled, className: "ab-Radio-input", id: id, checked: computedChecked, type: "radio", name: name ?? contextName, value: value, tabIndex: tabIndex, style: {
-                verticalAlign: 'middle',
-                margin: '0px',
-                borderRadius: '50%',
-                cursor: 'pointer',
-                position: 'relative',
-            }, onChange: onInputChange }),
+        React.createElement("input", { disabled: disabled, className: (0, clsx_1.default)('ab-Radio-input', 'twa:align-middle', 'twa:m-0', 'twa:rounded-full', 'twa:cursor-pointer', 'twa:position-relative', 'twa:w-[1rem]', 'twa:h-[1rem]', 'twa:min-w-[1rem]', 'twa:min-h-[1rem]', variant === 'default' && 'ab-Radio-input--default', variant === 'text-only' && 'ab-Radio-input--text-only twa:size-0 twa:opacity-0'), id: id, checked: computedChecked, type: "radio", name: name ?? contextName, value: value, tabIndex: tabIndex, onChange: onInputChange }),
         afterGap,
         after));
 };
 const RadioGroup = (props) => {
-    const { orientation, value: _value, name, onRadioChange, ...flexProps } = props;
+    const { orientation, value: _value, name, onRadioChange, children, variant = 'default' } = props;
     const [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
         onChange: (value) => {
             onRadioChange(value);
         },
     });
-    return (React.createElement(RadioContext.Provider, { value: { value, onChange: setValue, name } },
-        React.createElement(rebass_1.Flex, { className: "ab-RadioGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start', ...flexProps })));
+    return (React.createElement(RadioContext.Provider, { value: { value, onChange: setValue, name, variant } },
+        React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('ab-RadioGroup', props.className), flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex-start' }, children)));
 };
 exports.RadioGroup = RadioGroup;
+exports.radioGroupStyling = {
+    horizontalTextOnly: (0, clsx_1.default)('twa:bg-primarylight twa:rounded-standard twa:p-1 twa:gap-5', {
+        'twa:*:flex-1 twa:*:rounded-standard twa:*:p-1 twa:*:m-0': 'default styles for all the radio buttons',
+        'twa:*:data-[checked=true]:bg-accent twa:*:data-[checked=true]:text-accent-foreground': 'style the checked state',
+        [twUtils_1.targetChildren.focusWithinOutline]: 'styles for when a radio is currently focused - show a ring, so people know they can do keyboard nav with left/right arrow keys',
+    }),
+};
 exports.default = Radio;

package/src/components/Select/Select.js

@@ -7,15 +7,15 @@ const React = tslib_1.__importStar(require("react"));
 const react_select_1 = tslib_1.__importStar(require("react-select"));
 const creatable_1 = tslib_1.__importDefault(require("react-select/creatable"));
 const icons_1 = require("../icons");
-const rebass_1 = require("rebass");
 const infinite_react_1 = require("@infinite-table/infinite-react");
 const react_1 = require("react");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const re_resizable_1 = require("re-resizable");
 const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
 const OverlayTrigger_1 = require("../OverlayTrigger");
 const CheckBox_1 = require("../CheckBox");
 const AdaptableComputedCSSVarsContext_1 = require("../../View/AdaptableComputedCSSVarsContext");
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const resizableDirections = {
     right: true,
     bottom: true,
@@ -57,7 +57,7 @@ const INFINITE_COLUMNS_WITH_CHECKBOX = {
         renderSelectionCheckBox: (params) => {
             // disable reacting to onChange
             // as we handle selection change in the onCellClick
-            return React.createElement(CheckBox_1.CheckBox, { mx: 1, checked: params.rowInfo?.rowSelected ?? false });
+            return React.createElement(CheckBox_1.CheckBox, { className: "twa:mx-1", checked: params.rowInfo?.rowSelected ?? false });
         },
         renderHeaderSelectionCheckBox: true,
         className: 'ab-Select-CheckboxColumn',
@@ -70,7 +70,7 @@ const INFINITE_COLUMNS_WITH_CHECKBOX = {
                     : false;
             const { api } = headerParams;
             return (React.createElement(React.Fragment, null,
-                React.createElement(CheckBox_1.CheckBox, { mx: 1, checked: selected, onChange: (selected) => {
+                React.createElement(CheckBox_1.CheckBox, { className: "twa:mx-1", checked: selected, onChange: (selected) => {
                         if (selected) {
                             api.rowSelectionApi.selectAll();
                         }
@@ -235,7 +235,7 @@ const Select = function (props) {
                 placeholder: props.placeholder,
             });
             const title = typeof customRenderValue === 'string' ? customRenderValue : '';
-            children = customRenderValue ? (React.createElement(rebass_1.Box, { display: 'flex', flexDirection: 'row', flex: 1, flexWrap: 'nowrap', alignItems: 'center', overflow: 'hidden', height: '100%' },
+            children = customRenderValue ? (React.createElement(Flex_1.Box, { className: "twa:flex twa:flex-row twa:flex-1 twa:flex-nowrap twa:items-center twa:overflow-hidden twa:h-full" },
                 React.createElement("span", { title: title, "data-name": "multi-value-text", style: {
                         flex: '0 1 auto',
                         appearance: 'none',
@@ -477,7 +477,7 @@ const Select = function (props) {
                 data: filteredOptions, primaryKey: "value", selectionMode: isMulti ? 'multi-row' : 'single-row', 
                 // @ts-ignore
                 onRowSelectionChange: isLoading ? null : isMulti ? onRowSelectionChange : onSingleRowSelectionChange, rowSelection: rowSelection, isRowDisabled: isRowDisabled },
-                searchableInMenulist && (React.createElement(rebass_1.Flex, { p: 1, className: "ab-Select-MenulistSearchContainer" },
+                searchableInMenulist && (React.createElement(Flex_1.Flex, { className: "twa:p-1 ab-Select-MenulistSearchContainer" },
                     React.createElement("input", { ref: menulistInputRef, "data-name": "menulist-search-input", style: {
                             width: '100%',
                         }, className: 'ab-Select-MenulistSearch ab-Input ab-Input--type-text', autoCorrect: "off", autoComplete: "off", spellCheck: "false", type: "text", value: inputValue, onChange: (e) => {
@@ -525,8 +525,32 @@ const Select = function (props) {
         setInputValue(value);
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
+    const SingleValue = React.useCallback((singleValueProps) => {
+        return (React.createElement(react_select_1.components.SingleValue, { ...singleValueProps }, props.renderSingleValue
+            ? props.renderSingleValue(selectedOption)
+            : singleValueProps.children));
+    }, [selectedOption]);
+    const selectComponents = (0, react_1.useMemo)(() => {
+        return {
+            SelectContainer,
+            ValueContainer,
+            Menu: MenuComponent,
+            SingleValue,
+            ClearIndicator,
+            DropdownIndicator,
+            MenuList,
+        };
+    }, [
+        SelectContainer,
+        ValueContainer,
+        MenuComponent,
+        SingleValue,
+        ClearIndicator,
+        DropdownIndicator,
+        MenuList,
+    ]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SelectComponent, { ref: ref, openMenuOnClick: searchableInMenulist ? false : undefined, openMenuOnFocus: searchableInMenulist ? false : undefined, menuIsOpen: searchableInMenulist ? isSelectMenuOpen : undefined, isSearchable: searchableInline, "aria-label": props['aria-label'], onKeyDown: props.onKeyDown, inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: (0, join_1.default)(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
+        React.createElement(SelectComponent, { ref: ref, openMenuOnClick: searchableInMenulist ? false : undefined, openMenuOnFocus: searchableInMenulist ? false : undefined, menuIsOpen: searchableInMenulist ? isSelectMenuOpen : undefined, isSearchable: searchableInline, "aria-label": props['aria-label'], onKeyDown: props.onKeyDown, inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: (0, clsx_1.default)(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
             // This needed so the menu is not clipped by overflow: hidden
             menuPortalTarget: (0, OverlayTrigger_1.ensurePortalElement)(), isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
                 if (isMulti) {
@@ -545,19 +569,7 @@ const Select = function (props) {
             }, placeholder: props.placeholder, createOptionPosition: 'first', 
             // formatCreateLabel={(inputValue) => inputValue} // can we make this auto??
             // we use this:  https://react-select.com/creatable
-            components: {
-                SelectContainer,
-                ValueContainer,
-                Menu: MenuComponent,
-                SingleValue: React.useCallback((singleValueProps) => {
-                    return (React.createElement(react_select_1.components.SingleValue, { ...singleValueProps }, props.renderSingleValue
-                        ? props.renderSingleValue(selectedOption)
-                        : singleValueProps.children));
-                }, [selectedOption]),
-                ClearIndicator,
-                DropdownIndicator,
-                MenuList,
-            }, 
+            components: selectComponents, 
             /**
              * Using styles is the preferred way to style react-select.
              * https://react-select.com/styles#the-styles-prop
@@ -644,7 +656,7 @@ const Select = function (props) {
                     return {
                         ...baseStyle,
                         ...commonStyles(state), // height: 30,
-                        minHeight: props.size === 'small' ? 0 : '100%',
+                        minHeight: props.size === 'small' ? 0 : 'var(--ab-input-height)',
                         boxShadow: state.isFocused ? 'var(--ab-cmp-select-focused__box-shadow)' : 'none',
                         outline: state.isFocused ? 'var(--ab-cmp-select-focused__outline)' : 'none',
                         border: 'var(--ab-cmp-select__border)',

package/src/components/SelectList.js

@@ -5,6 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("./SimpleButton"));
 const SelectList = (props) => {
-    return (React.createElement(React.Fragment, null, props.options.map((option) => (React.createElement(SimpleButton_1.default, { p: 2, width: '100%', variant: "text", onClick: () => props.onChange(option), key: option.label }, option.label)))));
+    return (React.createElement(React.Fragment, null, props.options.map((option) => (React.createElement(SimpleButton_1.default, { className: "twa:p-2 twa:w-full", variant: "text", onClick: () => props.onChange(option), key: option.label }, option.label)))));
 };
 exports.SelectList = SelectList;

package/src/components/SelectableList/index.d.ts

@@ -11,5 +11,5 @@ interface SelectableListProps {
     toggleOnSimpleClick?: boolean;
     getItemId: (index: number) => string | number;
 }
-declare const SelectableList: (props: HTMLProps<HTMLElement> & SelectableListProps) => React.JSX.Element;
+declare const SelectableList: (props: HTMLProps<HTMLDivElement> & SelectableListProps) => React.JSX.Element;
 export default SelectableList;

package/src/components/SimpleButton/index.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { ButtonProps } from 'rebass';
-import { ReactNode } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 import { AccessLevel } from '../../AdaptableState/Common/Entitlement';
 import { AdaptableIcon } from '../../AdaptableState/Common/AdaptableIcon';
+import { BoxProps } from '../Flex';
 export declare const baseClassName = "ab-SimpleButton";
-export interface SimpleButtonProps extends Omit<ButtonProps, 'ref'> {
+export interface SimpleButtonProps extends Omit<BoxProps, 'ref'>, HTMLProps<HTMLButtonElement> {
     tooltip?: string;
     variant?: 'text' | 'outlined' | 'raised';
     tone?: 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
@@ -14,7 +14,5 @@ export interface SimpleButtonProps extends Omit<ButtonProps, 'ref'> {
     disabled?: boolean;
     accessLevel?: AccessLevel;
 }
-declare const SimpleButton: React.ForwardRefExoticComponent<SimpleButtonProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<unknown>>;
+declare const SimpleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SimpleButtonProps>, "ref"> & React.RefAttributes<unknown>>;
 export default SimpleButton;