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

package/src/agGrid/AdaptableFilterHandler.js

@@ -2,29 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableFilterHandler = void 0;
 class AdaptableFilterHandler {
-    constructor(adaptableApi, columnSetup) {
+    constructor(adaptableApi) {
         this.adaptableApi = adaptableApi;
-        this.currentColumnFilters_MEMO = new WeakMap();
-        this.colId = columnSetup.colId;
     }
-    getCurrentColumnFilters() {
-        // we memoize based on layout column filters object reference
-        // this method is called for each row during filtering so we need to optimize it
-        const layoutColumnFilters = this.adaptableApi.layoutApi.internalApi.getCurrentLayout_perfOptimized()?.ColumnFilters;
-        const memoizedColumnFilters = this.currentColumnFilters_MEMO.get(layoutColumnFilters);
-        if (memoizedColumnFilters) {
-            return memoizedColumnFilters;
-        }
-        const columnFilters = this.adaptableApi.filterApi.columnFilterApi
-            .getActiveColumnFilters()
-            .filter((columnFilter) => this.adaptableApi.filterApi.columnFilterApi.isColumnFilterActive(columnFilter))
-            .filter((columnFilter) => columnFilter.ColumnId === this.colId)
-            .filter((columnFilter) => {
-            const shouldEvaluateFilterOnClient = this.adaptableApi.expressionApi.internalApi.shouldEvaluatePredicatesInAdaptableQL('ColumnFilter', columnFilter, columnFilter.Predicates);
-            return shouldEvaluateFilterOnClient;
-        });
-        this.currentColumnFilters_MEMO.set(layoutColumnFilters, columnFilters);
-        return columnFilters;
+    init(params) {
+        this.colId = params.column.getColId();
     }
     doesFilterPass(params) {
         try {
@@ -34,12 +16,15 @@ class AdaptableFilterHandler {
             if (!isRowFilterable) {
                 return true;
             }
-            const columnFilters = this.getCurrentColumnFilters();
-            // #column_filter_predicates_evaluation
-            const allFiltersMatched = columnFilters.every((columnFilter) => {
-                return this.adaptableApi.filterApi.columnFilterApi.internalApi.evaluateColumnFilter(columnFilter, rowNode);
-            });
-            return allFiltersMatched;
+            const columnFilterModel = params.model;
+            if (!columnFilterModel) {
+                this.adaptableApi.logWarn(`AdaptableFilterHandler.doesFilterPass: No filter model found for column ${this.colId}`);
+                return true;
+            }
+            if (columnFilterModel.IsSuspended) {
+                return true;
+            }
+            return this.adaptableApi.filterApi.columnFilterApi.internalApi.evaluateColumnFilter(columnFilterModel, rowNode);
         }
         catch (ex) {
             this.adaptableApi.consoleError(ex);
@@ -100,7 +85,6 @@ class AdaptableFilterHandler {
     destroy() {
         this.filterDisplayValuesResult = undefined;
         this.previousFilterDisplayValuesResult = undefined;
-        this.currentColumnFilters_MEMO = undefined;
     }
 }
 exports.AdaptableFilterHandler = AdaptableFilterHandler;

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -16,7 +16,12 @@ export declare class AgGridColumnAdapter {
     setColDefProperty<T extends keyof ColDef>(col: Column, propertyName: T, propertyGetter: (userPropertyValue: ColDef[T]) => ColDef[T] | undefined): void;
     getUserColDefProperty<T extends keyof ColDef>(columnId: string, propertyName: T): ColDef[T] | undefined;
     shouldSkipColumn(colId: string): boolean;
-    setupColumns(): void;
+    getAllAgGridColumns(): Column<any>[];
+    /**
+     * Setup all columns, or only those with the given Ids
+     * @param specificColumnIds - optional list of column Ids to setup. If not provided, all columns are setup
+     */
+    setupColumns(specificColumnIds?: string[]): void;
     private setupColumnValueGetter;
     private setupColumnCellClass;
     private setupColumnHeaderClass;

package/src/agGrid/AgGridColumnAdapter.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AgGridColumnAdapter = exports.getEditorForColumnDataType = void 0;
+exports.AgGridColumnAdapter = void 0;
+exports.getEditorForColumnDataType = getEditorForColumnDataType;
 const tslib_1 = require("tslib");
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
@@ -30,7 +31,6 @@ function getEditorForColumnDataType(columnDataType, variant) {
         return variant === 'react' ? AdaptableDateEditor_1.AdaptableReactDateEditor : AdaptableDateEditor_1.AdaptableDateEditor;
     }
 }
-exports.getEditorForColumnDataType = getEditorForColumnDataType;
 class AgGridColumnAdapter {
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
@@ -107,7 +107,7 @@ class AgGridColumnAdapter {
             !this.adaptableApi.columnApi.isAutoRowGroupColumn(colId) &&
             !this.adaptableApi.columnApi.isSelectionColumn(colId));
     }
-    setupColumns() {
+    getAllAgGridColumns() {
         const pivotMode = this.adaptableInstance.isInPivotMode();
         let cols = pivotMode
             ? // for pivot mode, we take only the initial columns
@@ -122,6 +122,17 @@ class AgGridColumnAdapter {
                 .filter((column) => this.adaptableApi.columnApi.isAutoRowGroupColumn(column.getColId()));
             cols = [...autoGroupColumns, ...cols, ...pivotResultColumns];
         }
+        return cols;
+    }
+    /**
+     * Setup all columns, or only those with the given Ids
+     * @param specificColumnIds - optional list of column Ids to setup. If not provided, all columns are setup
+     */
+    setupColumns(specificColumnIds) {
+        let cols = this.getAllAgGridColumns();
+        if (specificColumnIds?.length) {
+            cols = cols.filter((col) => specificColumnIds.includes(col.getColId()));
+        }
         // this needs to be here, before the other setup below
         // so the setup methods below reference the correct columns in adaptable store
         cols.forEach((col) => {
@@ -137,6 +148,7 @@ class AgGridColumnAdapter {
                 colId,
                 abColumn,
             };
+            const isAutoRowGroupColumn = this.adaptableApi.columnApi.isAutoRowGroupColumn(colId);
             this.setupColumnCellRenderer(colSetupInfo);
             this.setupColumnCellStyle(colSetupInfo);
             this.setupColumnCellClass(colSetupInfo);
@@ -144,8 +156,13 @@ class AgGridColumnAdapter {
             this.setupColumnHeaderClass(colSetupInfo);
             this.setupColumnValueGetter(colSetupInfo);
             this.setupColumnTooltipValueGetter(colSetupInfo);
-            this.setupColumnFilter(colSetupInfo);
-            this.setupColumnFloatingFilter(colSetupInfo);
+            if (!isAutoRowGroupColumn) {
+                // we do NOT setup filtering for  auto row group columns
+                // this is done via gridOptions.autoGroupColumnDef
+                // see #autoGroupColumnDef
+                this.setupColumnFilter(colSetupInfo);
+                this.setupColumnFloatingFilter(colSetupInfo);
+            }
             this.setupColumnValueFormatter(colSetupInfo);
             this.setupColumnEditable(colSetupInfo);
             this.setupColumnValueSetter(colSetupInfo);
@@ -460,8 +477,12 @@ class AgGridColumnAdapter {
                         valueToLabelMap.set(option.value, option.label);
                         return option.value;
                     }));
+                    const fetchSelectItems = (_params) => {
+                        return values;
+                    };
                     return {
-                        values,
+                        // we need to pass a function which returns a Promise, that's what AG Grid expects
+                        values: fetchSelectItems,
                         formatValue: (value) => valueToLabelMap.get(value) ?? value,
                     };
                 };
@@ -644,7 +665,7 @@ class AgGridColumnAdapter {
             }
             return {
                 component: (0, AgGridFilterAdapter_1.AgGridFilterAdapterFactory)(this.adaptableInstance),
-                handler: () => new AdaptableFilterHandler_1.AdaptableFilterHandler(this.adaptableApi, columnSetup),
+                handler: () => new AdaptableFilterHandler_1.AdaptableFilterHandler(this.adaptableApi),
             };
         });
     }

package/src/agGrid/AgGridFilterAdapter.js

@@ -40,7 +40,7 @@ const AgGridFilterAdapterFactory = (adaptable) => {
             if (column) {
                 this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(AdaptableColumnFilter_1.AdaptableColumnFilter, {
                     columnId,
-                    wrapperProps: { p: 2 },
+                    wrapperProps: { className: 'twa:p-2' },
                     location: 'columnMenu',
                 }), adaptable), this.filterContainer);
             }

package/src/agGrid/AgGridFloatingFilterAdapter.js

@@ -61,26 +61,6 @@ const AgGridFloatingFilterAdapterFactory = (adaptable) => {
             headerCell.style.padding = 'var(--ab-space-1)';
         }
     }
-    if (adaptable.isAgGridInitialising) {
-        if (adaptable.variant === 'react') {
-            return () => React.createElement(React.Fragment, null);
-        }
-        return class FloatingFilterStub {
-            init(params) {
-                this.filterContainer = document.createElement('div');
-            }
-            getGui() {
-                return this.filterContainer;
-            }
-            destroy() {
-                this.unmountReactRoot?.();
-                this.filterContainer = null;
-            }
-            onParentModelChanged() {
-                // nothing yet
-            }
-        };
-    }
     return class AgGridFloatingFilterAdapter {
         init(params) {
             const colId = params.column.getColId();
@@ -111,7 +91,7 @@ const AgGridFloatingFilterAdapterFactory = (adaptable) => {
         }
         refresh(params) {
             // always reuse the current instance
-            // the filte ris refreshed in the underlying React component
+            // the filter is refreshed in the underlying React component
             return true;
         }
         destroy() {

package/src/agGrid/editors/AdaptableNumberEditor/InternalAdaptableNumberEditor.js

@@ -68,11 +68,7 @@ exports.InternalAdaptableNumberEditor = React.forwardRef(function InternalAdapta
         React.createElement("input", { "data-name": "AdaptableNumberEditorInput", type: props.type ?? 'number', value: value, onKeyDown: preventDisallowedChars, onChange: React.useCallback((event) => {
                 setValue(event.target.value);
             }, []), style: inputStyle, ref: inputRef }),
-        showClear ? (React.createElement("div", { style: {
-                display: 'inline-block',
-                marginRight: 'var(--ab-space-1)',
-                marginLeft: 'var(--ab-space-1)',
-            }, onClick: (e) => {
+        showClear ? (React.createElement("div", { className: "twa:inline-block twa:mx-1", onClick: (e) => {
                 if (props.emptyValue != null) {
                     setValue(props.emptyValue);
                     e.stopPropagation();

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableNumberEditor = exports.AdaptableReactNumberEditor = exports.getStartValue = void 0;
+exports.AdaptableNumberEditor = exports.AdaptableReactNumberEditor = void 0;
+exports.getStartValue = getStartValue;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
@@ -24,7 +25,6 @@ function getStartValue(params) {
     }
     return params.value;
 }
-exports.getStartValue = getStartValue;
 const defaultValueParser = ({ newValue, oldValue: _ }) => {
     return newValue;
 };

package/src/agGrid/editors/AdaptablePercentageEditor/InternalAdaptablePercentageEditor.js

@@ -61,11 +61,7 @@ exports.InternalAdaptablePercentageEditor = React.forwardRef(function InternalAd
         React.createElement(NumberInput_1.NumberInput, { type: props.type ?? 'number', className: "ab-PercentageEditor-Input", value: value, noArrows: true, autoFocus: true, onChange: React.useCallback((value) => {
                 setValue(value);
             }, []), style: inputStyle, ref: inputRef }),
-        showClear ? (React.createElement("div", { style: {
-                display: 'inline-block',
-                marginRight: 'var(--ab-space-1)',
-                marginLeft: 'var(--ab-space-1)',
-            }, onClick: (e) => {
+        showClear ? (React.createElement("div", { className: "twa:inline-block twa:mx-1", onClick: (e) => {
                 if (props.emptyValue != null) {
                     setValue(props.emptyValue);
                     e.stopPropagation();

package/src/agGrid/index.js

@@ -1,13 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableLogger = exports.AdaptableNoCodeWizard = exports.AdaptableWizardView = void 0;
+const tslib_1 = require("tslib");
 const Adaptable_1 = require("./Adaptable");
 const AdaptableLogger_1 = require("./AdaptableLogger");
 var AdaptableWizardView_1 = require("../View/AdaptableWizardView");
-Object.defineProperty(exports, "AdaptableWizardView", { enumerable: true, get: function () { return __importDefault(AdaptableWizardView_1).default; } });
+Object.defineProperty(exports, "AdaptableWizardView", { enumerable: true, get: function () { return tslib_1.__importDefault(AdaptableWizardView_1).default; } });
 exports.default = Adaptable_1.Adaptable;
 exports.AdaptableNoCodeWizard = Adaptable_1.AdaptableNoCodeWizard;
 exports.AdaptableLogger = AdaptableLogger_1.AdaptableLogger;

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;