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

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableFormComponent = exports.AdaptableFormComponentButtons = void 0;
+exports.AdaptableFormComponentButtons = AdaptableFormComponentButtons;
+exports.AdaptableFormComponent = AdaptableFormComponent;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const FormLayout_1 = tslib_1.__importStar(require("../FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../Input"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
@@ -11,6 +11,8 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/
 const react_1 = require("react");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
 const Select_1 = require("../Select");
+const Flex_1 = require("../Flex");
+const twMerge_1 = require("../../twMerge");
 function AdaptableFormComponentButtons({ formDef, onClick, defaultTone, disabledButtons, api, context, focusFirstButton = true, }) {
     return (React.createElement(React.Fragment, null, formDef.buttons.map((button, index) => {
         const buttonIcon = api.internalApi.getIconForButton(button, context, {
@@ -32,12 +34,11 @@ function AdaptableFormComponentButtons({ formDef, onClick, defaultTone, disabled
             : {
                 ...api.internalApi.buildBaseContext(),
             });
-        return (React.createElement(SimpleButton_1.default, { autoFocus: focusFirstButton && index === 0, disabled: disabledButtons[index], key: index, tooltip: buttonTooltip, icon: buttonIcon, tone: buttonStyle?.tone ?? defaultTone, variant: buttonStyle?.variant, "data-text": buttonLabel, className: buttonStyle?.className, marginLeft: index ? 2 : 0, onClick: () => {
+        return (React.createElement(SimpleButton_1.default, { autoFocus: focusFirstButton && index === 0, disabled: disabledButtons[index], key: index, tooltip: buttonTooltip, icon: buttonIcon, tone: buttonStyle?.tone ?? defaultTone, variant: buttonStyle?.variant, "data-text": buttonLabel, className: (0, twMerge_1.twMerge)(index ? 'twa:ml-2' : '', buttonStyle?.className), onClick: () => {
                 onClick(button);
             } }, buttonLabel));
     })));
 }
-exports.AdaptableFormComponentButtons = AdaptableFormComponentButtons;
 function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displayTitle, api, context, focusFirstButton, }) {
     const getFieldValue = (key) => data[key];
     const setFieldValue = (key, value) => {
@@ -51,7 +52,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         return !isValid;
     }) ?? [], [data]);
     const renderLabel = (field) => {
-        return (React.createElement(rebass_1.Box, { className: 'ab-FormLayout_column--label', style: { textAlign: 'end' } }, field.label));
+        return (React.createElement(Flex_1.Box, { className: 'ab-FormLayout_column--label', style: { textAlign: 'end' } }, field.label));
     };
     const renderField = (field) => {
         const value = getFieldValue(field.name) ?? '';
@@ -73,7 +74,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
             case 'text':
             case 'number':
             case 'date':
-                return (React.createElement(AdaptableInput_1.default, { type: field.fieldType, style: { width: '100%' }, name: field.name, value: value, onChange: onChange }));
+                return (React.createElement(AdaptableInput_1.default, { type: field.fieldType, className: "twa:w-full", name: field.name, value: value, onChange: onChange }));
             case 'select':
                 let items = field.options.map((item) => ({
                     value: item.value,
@@ -86,7 +87,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                         setFieldValue(field.name, event.target.checked);
                     } }));
             case 'textOutput':
-                return (React.createElement(rebass_1.Box, { paddingLeft: 2, style: { textAlign: 'left' } }, value));
+                return React.createElement(Flex_1.Box, { className: "twa:pl-2 twa:text-left" }, value);
             default:
                 return React.createElement("div", null,
                     "Unknown field type: ",
@@ -96,8 +97,8 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
     // by default we have 2 columns: label & input
     const columns = formDef.config?.columns ?? [1, 2];
     return (React.createElement(React.Fragment, null,
-        displayTitle && formDef.title && (React.createElement(rebass_1.Box, { "data-name": "form-title", fontSize: 5, mb: 2, style: { fontWeight: 'bold' } }, formDef.title)),
-        formDef.description && (React.createElement(rebass_1.Box, { "data-name": "form-description", mb: 3 }, formDef.description)),
+        displayTitle && formDef.title && (React.createElement(Flex_1.Box, { "data-name": "form-title", className: "twa:text-5 twa:mb-2 twa:font-bold" }, formDef.title)),
+        formDef.description && (React.createElement(Flex_1.Box, { "data-name": "form-description", className: "twa:mb-3" }, formDef.description)),
         React.createElement(FormLayout_1.default, { onKeyDown: (event) => {
                 const target = event.target;
                 const targetName = target.name;
@@ -125,7 +126,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                         },
                     });
                 }
-            }, "data-name": "form-content", columns: columns, style: { overflow: 'auto' }, paddingRight: 1 }, formDef.fields?.map((field, index) => {
+            }, "data-name": "form-content", columns: columns, className: "twa:pr-1 twa:overflow-auto" }, formDef.fields?.map((field, index) => {
             if (Array.isArray(field)) {
                 const rowFields = {};
                 field.map((fieldItem, index) => {
@@ -141,7 +142,6 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                     renderField(field)));
             }
         })),
-        formDef.buttons ? (React.createElement(rebass_1.Flex, { "data-name": "form-buttons", marginTop: 3, flexDirection: "row", alignItems: "center", justifyContent: "center" },
+        formDef.buttons ? (React.createElement(Flex_1.Flex, { "data-name": "form-buttons", className: "twa:mt-3", flexDirection: "row", alignItems: "center", justifyContent: "center" },
             React.createElement(AdaptableFormComponentButtons, { focusFirstButton: focusFirstButton, onClick: onButtonClick, disabledButtons: disabledButtons, defaultTone: "success", formDef: formDef, api: api, context: context }))) : null));
 }
-exports.AdaptableFormComponent = AdaptableFormComponent;

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export interface CardProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    shadow?: boolean;
+    gap?: 0 | 1 | 2 | 3 | 4 | 8;
+}
+export declare function Card(props: CardProps): React.JSX.Element;
+export declare namespace Card {
+    var Title: (props: CardTitleProps) => React.JSX.Element;
+    var Body: (props: CardBodyProps) => React.JSX.Element;
+}
+interface CardTitleProps {
+    children: React.ReactNode;
+    className?: string;
+    gap?: CardProps['gap'];
+    border?: boolean;
+}
+interface CardBodyProps {
+    children: React.ReactNode;
+    gap?: CardProps['gap'];
+    className?: string;
+}
+export {};

package/src/components/Card/index.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = Card;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const twMerge_1 = require("../../twMerge");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const Flex_1 = require("../Flex");
+function Card(props) {
+    const { shadow = true, children, className, style, gap = 2 } = props;
+    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:bg-defaultbackground twa:text-text-on-defaultbackground', 'ab-Card', 'twa:text-3', 'twa:rounded-standard twa:p-2', 'twa:flex twa:flex-col', {
+            'twa:shadow-sm': shadow,
+            'twa:gap-0': gap === 0,
+            'twa:gap-1': gap === 1,
+            'twa:gap-2': gap === 2,
+            'twa:gap-3': gap === 3,
+            'twa:gap-4': gap === 4,
+            'twa:gap-8': gap === 8,
+        }, className), style: style }, children));
+}
+const CardTitle = (props) => {
+    const { children, className, gap = 2, border = true } = props;
+    return (React.createElement("div", { className: (0, twMerge_1.twMerge)((0, clsx_1.default)('ab-Card__title', {
+            'twa:flex twa:flex-row': true,
+            'twa:items-center': true,
+            'twa:text-4 twa:px-2': true,
+            'twa:pb-2 twa:border-b': border,
+            'twa:border-b-text-on-defaultbackground/20': true,
+            'twa:gap-0': gap === 0,
+            'twa:gap-1': gap === 1,
+            'twa:gap-2': gap === 2,
+            'twa:gap-3': gap === 3,
+            'twa:gap-4': gap === 4,
+            'twa:gap-8': gap === 8,
+        }, className)) }, children));
+};
+const CardBody = (props) => {
+    const { children, gap, className } = props;
+    return (React.createElement("div", { className: (0, clsx_1.default)('ab-Card__body', 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', {
+            'twa:gap-0': gap === 0,
+            'twa:gap-1': gap === 1,
+            'twa:gap-2': gap === 2,
+            'twa:gap-3': gap === 3,
+            'twa:gap-4': gap === 4,
+            'twa:gap-8': gap === 8,
+        }, className) }, children));
+};
+Card.Title = CardTitle;
+Card.Body = CardBody;

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ReactNode, SyntheticEvent } from 'react';
-import { FlexProps } from 'rebass';
-import { ContainerProps } from '../ContainerProps';
+import { FlexProps } from '../Flex';
 type TypeProps = {
     checked?: boolean | null;
     disabled?: boolean;
@@ -15,10 +14,10 @@ type TypeProps = {
     gapDistance?: number | string;
     childrenPosition?: 'start' | 'end';
 };
-export interface CheckBoxProps extends TypeProps, Omit<ContainerProps, keyof TypeProps>, Omit<React.HTMLProps<HTMLDivElement>, keyof TypeProps | 'ref'> {
+export interface CheckBoxProps extends TypeProps, Omit<React.HTMLProps<HTMLDivElement>, keyof TypeProps | 'ref'> {
 }
 declare const CheckBox: ({ children, checked, onChange, value, name, disabled, readOnly, variant, gapDistance, childrenPosition, as, ...props }: CheckBoxProps) => React.JSX.Element;
 export declare const CheckBoxGroup: (props: FlexProps & {
-    orientation: 'horizontal' | 'vertical';
+    orientation: "horizontal" | "vertical";
 }) => React.JSX.Element;
 export { CheckBox };

package/src/components/CheckBox/index.js

@@ -4,8 +4,8 @@ exports.CheckBox = exports.CheckBoxGroup = 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 join_1 = tslib_1.__importDefault(require("../utils/join"));
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Square = (props) => {
     return React.createElement("div", { className: `ab-CheckBox__square ab-CheckBox__square--${props.type}` });
 };
@@ -45,12 +45,10 @@ const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly
     React.useEffect(() => {
         checkboxRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    let input = (React.createElement("input", { className: `ab-CheckBox-input`, ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, type: "checkbox", name: name, value: value, style: {
-            verticalAlign: 'middle',
-            opacity: 0,
-            cursor: 'pointer',
-        }, onChange: onInputChange }));
-    return (React.createElement(rebass_1.Box, { my: 2, ...props, className: (0, join_1.default)('ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as },
+    let input = (React.createElement("input", { className: (0, clsx_1.default)(`ab-CheckBox-input twa:align-middle twa:opacity-0`, {
+            'twa:cursor-pointer': !readOnly && !disabled,
+        }), ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, type: "checkbox", name: name, value: value, onChange: onInputChange }));
+    return (React.createElement(Flex_1.Box, { ...props, className: (0, clsx_1.default)('twa:my-2', 'ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as },
         before,
         beforeGap,
         input,
@@ -61,6 +59,6 @@ const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly
 exports.CheckBox = CheckBox;
 const CheckBoxGroup = (props) => {
     const { orientation, ...flexProps } = props;
-    return (React.createElement(rebass_1.Flex, { className: "ab-CheckBoxGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start', ...flexProps }));
+    return (React.createElement(Flex_1.Flex, { className: `ab-CheckBoxGroup ${orientation === 'horizontal' ? 'twa:items-center' : 'twa:items-start'}`, flexDirection: orientation == 'horizontal' ? 'row' : 'column', ...flexProps }));
 };
 exports.CheckBoxGroup = CheckBoxGroup;

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

@@ -1,4 +1,8 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
+import { BoxProps } from '../Flex';
 export declare const baseClassName = "ab-CodeBlock";
-export declare const CodeBlock: (props: BoxProps) => React.JSX.Element;
+export declare const CodeBlock: (props: BoxProps & {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/src/components/CodeBlock/index.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlock = 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-CodeBlock';
 const CodeBlock = (props) => {
-    return React.createElement(rebass_1.Box, { as: "code", ...props, className: (0, join_1.default)(props.className, exports.baseClassName) });
+    return (React.createElement(Flex_1.Box, { as: "code", ...props, className: (0, clsx_1.default)('twa:p-1 twa:rounded-standard twa:bg-primary twa:text-primary-foreground', exports.baseClassName, props.className) }));
 };
 exports.CodeBlock = CodeBlock;

package/src/components/ColorPicker/ColorPicker.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { HTMLProps } from 'react';
-import { BoxProps } from 'rebass';
 import { AdaptableApi } from '../../Api/AdaptableApi';
+import { BoxProps } from '../Flex';
 export type ColorPickerProps = Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
     api: AdaptableApi;
     onChange: (color: string) => void;

package/src/components/ColorPicker/ColorPicker.js

@@ -4,11 +4,13 @@ exports.ColorPicker = 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 debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const Input_1 = tslib_1.__importDefault(require("../Input"));
 const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
 const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
+const Flex_1 = require("../Flex");
+const twMerge_1 = require("../../twMerge");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
     let { api, value, includeAlpha = true, ...restProps } = props;
@@ -38,20 +40,19 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
     }, [value]);
     const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
     const alpha = (0, tinycolor2_1.default)(value).getAlpha();
-    return (React.createElement(rebass_1.Flex, { className: 'ColorPicker' },
-        React.createElement(Input_1.default, { ...restProps, mr: 2, onChange: (event) => {
+    return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('ColorPicker twa:items-center twa:gap-2', {
+            'twa:opacity-30': props.disabled,
+        }, props.className) },
+        React.createElement(Input_1.default, { ...restProps, disabled: props.disabled, className: (0, twMerge_1.twMerge)('twa:w-[70px] twa:p-0', restProps.className), onChange: (event) => {
                 /**
                  * The value is not in the map when the color is not in the palette.
                  */
                 const color = optionsMap[event.target.value] ?? event.target.value;
                 debouncedOnChange(color);
-            }, value: preparedValue, ref: ref, type: "color", style: {
-                width: 70,
-                padding: 0 /* we need this to be 0, since otherwise on Windows browsers, the chosen color cannot be seen */,
-            }, list: "ABcolorChoices", title: props.title }),
+            }, value: preparedValue, ref: ref, type: "color", list: "ABcolorChoices", title: props.title }),
         ABcolorChoices,
-        includeAlpha && (React.createElement(rebass_1.Flex, { alignItems: "center" },
-            React.createElement(rebass_1.Box, { mr: 1 }, "Opacity"),
+        includeAlpha && (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1" },
+            React.createElement(Flex_1.Box, null, "Opacity"),
             React.createElement(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
                     const color = (0, tinycolor2_1.default)(value).setAlpha(event.target.value).toRgbString();
                     debouncedOnChange(color);

package/src/components/Dashboard/Dashboard.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dashboard = void 0;
+exports.Dashboard = Dashboard;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const useDraggable_1 = tslib_1.__importDefault(require("../utils/useDraggable"));
@@ -46,7 +46,7 @@ function Dashboard(props) {
             return null;
         }
         const activeTabTitle = children?.[activeTabIndex]?.props?.title ?? 'Select Toolbar';
-        return (React.createElement(DropdownButton_1.default, { ml: 1, columns: ['label'], items: React.Children.map(children, (child, index) => ({
+        return (React.createElement(DropdownButton_1.default, { className: "twa:ml-1", columns: ['label'], items: React.Children.map(children, (child, index) => ({
                 value: String(index),
                 label: child.props.title,
                 onClick: () => setActiveTabIndex(index),
@@ -80,4 +80,3 @@ function Dashboard(props) {
         expanded && children && children.length ? (React.createElement("div", { className: "ab-Dashboard__content" }, children[activeTabIndex] ? children[activeTabIndex].props.children : null)) : null,
         props.footer));
 }
-exports.Dashboard = Dashboard;

package/src/components/Dashboard/DashboardTab.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardTab = void 0;
+exports.DashboardTab = DashboardTab;
 function DashboardTab(props) {
     return null;
 }
-exports.DashboardTab = DashboardTab;

package/src/components/Dashboard/DashboardToolbar.js

@@ -1,18 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardToolbar = void 0;
+exports.DashboardToolbar = DashboardToolbar;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../Flex");
 function DashboardToolbar(props) {
     return (React.createElement("div", { className: (0, join_1.default)('ab-Dashboard__toolbar', props.className) },
         React.createElement("div", { className: "ab-Dashboard__toolbar-content" }, props.children),
-        React.createElement(rebass_1.Flex, { className: "ab-Dashboard__toolbar-title", flexDirection: "row", alignItems: "center" },
-            React.createElement("span", null, props.title),
-            props.showConfigure && (React.createElement(SimpleButton_1.default, { "aria-label": `Configure ${props.title}`, icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
-            ' ',
-            props.showClose && (React.createElement(SimpleButton_1.default, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
+        React.createElement(Flex_1.Flex, { className: "ab-Dashboard__toolbar-title twa:items-center twa:justify-center twa:px-2 twa:pb-1 twa:opacity-70", flexDirection: "row" },
+            React.createElement("span", { className: "twa:text-2" }, props.title),
+            props.showConfigure && (React.createElement(SimpleButton_1.default, { "aria-label": `Configure ${props.title}`, icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
+            props.showClose && (React.createElement(SimpleButton_1.default, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
 }
-exports.DashboardToolbar = DashboardToolbar;

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { DatepickerButton } from '../../AdaptableOptions/DateInputOptions';
 import { Locale } from 'date-fns';
-export type DatepickerProps = Omit<BoxProps, 'value' | 'onChange' | 'defaultValue'> & {
+import { InputProps } from '../Input';
+export type DatepickerProps = Omit<InputProps, 'value' | 'onChange' | 'defaultValue'> & {
     value: Date | undefined;
     defaultValue?: Date | undefined;
     autoFocus?: boolean;

package/src/components/Datepicker/index.js

@@ -8,13 +8,14 @@ const react_1 = require("react");
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const FieldWrap_1 = tslib_1.__importDefault(require("../FieldWrap"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-const rebass_1 = require("rebass");
 const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
 const DatepickerContext_1 = require("./DatepickerContext");
 const react_day_picker_1 = require("react-day-picker");
 const AdaptableDateInlineInput_1 = require("../../View/Components/AdaptableInput/AdaptableDateInlineInput");
 const date_fns_1 = require("date-fns");
 const Select_1 = require("../Select");
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const onDatePickerDropdownKeyDown = (e) => {
     if (e.key === 'Escape' || e.key === 'Enter') {
         e.stopPropagation();
@@ -65,7 +66,7 @@ const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, overlayDO
 const END_MONTH = (0, date_fns_1.endOfYear)((0, date_fns_1.addYears)(new Date(), 10));
 const START_MONTH = (0, date_fns_1.startOfYear)((0, date_fns_1.addYears)(new Date(), -50));
 exports.Datepicker = React.forwardRef((props, ref) => {
-    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, datepickerButtons, showClearButton, autoFocus, ...boxProps } = props;
+    const { dateProps, required, disabled, style, className, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, datepickerButtons, showClearButton, autoFocus, ...boxProps } = props;
     const datepickerContext = (0, DatepickerContext_1.useDatepickerContext)();
     let [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
         onChange: props.onChange,
@@ -95,7 +96,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
     const clearValue = () => {
         updateValue(undefined);
     };
-    const renderButton = (label, onClick) => (React.createElement(SimpleButton_1.default, { onClick: onClick, margin: '2px' }, label));
+    const renderButton = (label, onClick) => (React.createElement(SimpleButton_1.default, { onClick: onClick, className: "twa:m-[2px]" }, label));
     const todayDate = new Date();
     const footerButtonsMap = {
         clear: renderButton('Clear', () => clearValue()),
@@ -109,25 +110,25 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         '|': React.createElement("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
     };
     const footerButtons = datepickerButtons.map((buttonKey, index) => React.cloneElement(footerButtonsMap[buttonKey], { key: index }));
-    const clearButton = showClearButton !== false ? (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
+    const clearButton = showClearButton !== false ? (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, className: "twa:p-0", icon: "close", onMouseDown: (e) => {
             e.preventDefault();
             clearValue();
         }, accessLevel: 'Full' })) : null;
-    const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
+    const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", onClick: () => setVisible(true) }));
     const overlayDOMRef = (0, react_1.useRef)(null);
-    return (React.createElement(rebass_1.Flex, null,
+    return (React.createElement(Flex_1.Flex, null,
         React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { overlayDOMRef: overlayDOMRef, onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);
                     }
                 } },
-                React.createElement(react_day_picker_1.DayPicker, { fixedWeeks: true, autoFocus: autoFocus ?? true, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: isNaN(+month) ? new Date() : month, selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, components: DatePickerComponents, footer: React.createElement(rebass_1.Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) }))) },
+                React.createElement(react_day_picker_1.DayPicker, { fixedWeeks: true, autoFocus: autoFocus ?? true, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: isNaN(+month) ? new Date() : month, selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, components: DatePickerComponents, footer: React.createElement(Flex_1.Flex, { justifyContent: "space-between", className: "twa:mt-2", flexWrap: 'wrap' }, footerButtons) }))) },
             React.createElement(FieldWrap_1.default, { ...boxProps, style: {
                     borderRadius: style?.borderRadius,
                     width: style?.width,
                     maxWidth: style?.maxWidth,
                     border: style?.border,
-                }, className: "ab-Datepicker", onFocus: () => {
+                }, className: (0, clsx_1.default)('ab-Datepicker twa:min-h-input', className), onFocus: () => {
                     if (!visible) {
                         setVisible(true);
                     }
@@ -147,7 +148,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
                         if ((0, date_fns_1.isValid)(date)) {
                             updateValue(date);
                         }
-                    }, style: style, disabled: disabled }),
+                    }, className: className?.includes('twa:w-full') ? 'twa:w-full' : '', style: style, disabled: disabled }),
                 !!inputValue ? clearButton : null,
                 calendarButton))));
 });

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { ModalProps } from '../Modal';
 import { WindowModalProps } from '../WindowModal';
+import { BoxProps } from '../Flex';
 type TypeProps = {
     modal?: boolean;
     autoFocus?: boolean;
@@ -17,11 +17,17 @@ type TypeProps = {
     dismissOnClickOutside?: boolean;
 };
 export interface DialogProps extends Omit<BoxProps, 'ref'>, TypeProps {
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onChange?: (event: React.FormEvent<HTMLDivElement>) => void;
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
 }
 export type DialogRefType = {
     bringToFront: VoidFunction;
 };
 export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<DialogRefType>>;
 export default Dialog;

package/src/components/Dialog/index.js

@@ -4,18 +4,19 @@ exports.Dialog = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
 const captureTabNavigation_1 = tslib_1.__importDefault(require("../utils/captureTabNavigation"));
-const rebass_1 = require("rebass");
 const Modal_1 = require("../Modal");
 const useIsOpen_1 = tslib_1.__importDefault(require("./useIsOpen"));
 const useAutoFocus_1 = tslib_1.__importDefault(require("../utils/useAutoFocus"));
 const icons_1 = require("../icons");
 const WindowModal_1 = require("../WindowModal");
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twUtils_1 = require("../twUtils");
 const baseClassName = 'ab-Dialog';
 exports.Dialog = React.forwardRef((props, dialogRef) => {
-    let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps, ...boxProps } = props;
+    let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps, showCloseButton = true, isOpen: _isOpenProp, ...boxProps } = props;
     modal = props.modal === undefined ? true : props.modal;
     fixed = props.fixed === undefined ? true : props.fixed;
     const [isOpen, setIsOpen] = (0, useIsOpen_1.default)(props);
@@ -26,7 +27,6 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
         previous: ({ autoFocus }) => autoFocus && isOpen,
         shouldFocus: ({ autoFocus }) => autoFocus && isOpen,
     }, boxRef);
-    const showCloseButton = props.showCloseButton === undefined ? true : props.showCloseButton;
     const onKeyDown = (e) => {
         if (props.onKeyDown) {
             props.onKeyDown(e);
@@ -98,22 +98,22 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
     if (!isOpen) {
         return null;
     }
-    const closeButton = showCloseButton ? (React.createElement(rebass_1.Box, { padding: 1, title: "Close dialog", onClick: () => setIsOpen(false), className: `${baseClassName}__close-button` },
+    const closeButton = showCloseButton ? (React.createElement(Flex_1.Box, { title: "Close dialog", onClick: () => setIsOpen(false), className: (0, clsx_1.default)(`${baseClassName}__close-button twa:p-1`, 'twa:text-accentlight', 'twa:text-shadow-[0_1px_0_#fff]', `twa:text-3 twa:cursor-pointer twa:leading-none twa:font-bold`, 'twa:absolute twa:top-[6px] twa:right-[6px]') },
         React.createElement(icons_1.Icon, { size: 20, name: "close" }))) : null;
     const setPreventDismissFlag = (e) => {
         if (dismissOnClickOutside) {
             e.nativeEvent.preventDialogDismiss = true;
         }
     };
-    const box = (React.createElement(rebass_1.Box, { ...boxProps, onClick: (e) => {
+    const box = (React.createElement(Flex_1.Box, { ...boxProps, onClick: (e) => {
             setPreventDismissFlag(e);
             if (boxProps && boxProps.onClick) {
                 boxProps.onClick(e);
             }
-        }, onKeyDown: onKeyDown, className: (0, join_1.default)(baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef },
+        }, onKeyDown: onKeyDown, className: (0, clsx_1.default)('twa:relative', 'twa:bg-defaultbackground', 'twa:text-text-on-defaultbackground', 'twa:fill-text-on-defaultbackground', 'twa:rounded-standard', 'twa:flex twa:flex-col', twUtils_1.targetOwn.focusOutline, twUtils_1.targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef },
         children,
         closeButton));
-    const content = fixed ? (React.createElement("div", { onClick: setPreventDismissFlag, className: `${baseClassName}-fixed-wrapper` }, box)) : (box);
+    const content = fixed ? (React.createElement("div", { onClick: setPreventDismissFlag, className: (0, clsx_1.default)(`${baseClassName}-fixed-wrapper`, 'twa:fixed twa:inset-0', 'twa:m-auto', 'twa:flex twa:items-center twa:justify-center') }, box)) : (box);
     if (windowModal) {
         return React.createElement(WindowModal_1.WindowModal, { ...windowModalProps }, content);
     }

package/src/components/DragAndDropContext/DragAndDropContext.d.ts

@@ -3,5 +3,5 @@ import { ModuleManagerProps } from './ModuleManager';
 import { ModuleDraggableItem } from './types';
 export declare const DragAndDropContext: React.Context<{
     availableItems: ModuleDraggableItem[];
-    permittedActions: ModuleManagerProps['permittedActions'];
+    permittedActions: ModuleManagerProps["permittedActions"];
 }>;

package/src/components/DragAndDropContext/ModuleManager.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { BaseModuleTab, ModuleDraggableItem } from './types';
 export interface ModuleManagerProps {
     availableItems: ModuleDraggableItem[];
+    className?: string;
     disabled: boolean;
     onTabsChange: (tabs: BaseModuleTab[]) => void;
     tabs: BaseModuleTab[];

package/src/components/DragAndDropContext/ModuleManager.js

@@ -4,13 +4,14 @@ exports.ModuleManager = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../dnd");
-const PanelWithButton_1 = require("../../View/Components/Panels/PanelWithButton");
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const DragAndDropContext_1 = require("./DragAndDropContext");
 const TabList_1 = require("./TabList");
 const UnusedPanel_1 = require("./UnusedPanel");
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const Card_1 = require("../Card");
 const ModuleManager = (props) => {
-    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, } = props;
+    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, className, } = props;
     const contextValue = React.useMemo(() => {
         const preparedPermittedAction = {
             createTab: true,
@@ -86,9 +87,11 @@ const ModuleManager = (props) => {
                 handleToolbarDragEnd(result);
         } },
         React.createElement(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue },
-            React.createElement("div", { className: "ab-ModuleSelector", style: { display: 'flex', flexDirection: 'column' } },
+            React.createElement(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)('ab-ModuleSelector twa:flex-1', className) },
                 React.createElement(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
-                React.createElement(PanelWithButton_1.PanelWithButton, { className: "ab-ModuleSelector-UsedPanel", headerText: tabsTitle, button: contextValue.permittedActions.createTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, onClick: handleTabAdd }, "Add Tab")) },
-                    React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName }))))));
+                React.createElement(Card_1.Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel" },
+                    React.createElement(Card_1.Card.Title, { border: false }, tabsTitle),
+                    React.createElement(Card_1.Card.Body, { className: "twa:px-2" },
+                        React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
 };
 exports.ModuleManager = ModuleManager;

package/src/components/DragAndDropContext/TabList.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { BaseModuleTab } from './types';
-export declare function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }: {
+export declare function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }: {
     disabled: boolean;
     tabs: BaseModuleTab[];
     onRemoveTab: (tabIndex: number) => void;
     onRemoveToolbar: (tabIndex: number, toolbarIndex: number) => void;
     onChangeTabName: (tabIndex: number, tabName: string) => void;
+    onNewTab?: () => void;
 }): React.JSX.Element;
 export declare function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }: {
     tab: BaseModuleTab;