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

package/src/agGrid/AdaptableFilterHandler.js

@@ -1,27 +1,9 @@
 export 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 {
@@ -31,12 +13,15 @@ export 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);
@@ -97,6 +82,5 @@ export class AdaptableFilterHandler {
     destroy() {
         this.filterDisplayValuesResult = undefined;
         this.previousFilterDisplayValuesResult = undefined;
-        this.currentColumnFilters_MEMO = undefined;
     }
 }

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

@@ -102,7 +102,7 @@ export 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
@@ -117,6 +117,17 @@ export 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) => {
@@ -132,6 +143,7 @@ export class AgGridColumnAdapter {
                 colId,
                 abColumn,
             };
+            const isAutoRowGroupColumn = this.adaptableApi.columnApi.isAutoRowGroupColumn(colId);
             this.setupColumnCellRenderer(colSetupInfo);
             this.setupColumnCellStyle(colSetupInfo);
             this.setupColumnCellClass(colSetupInfo);
@@ -139,8 +151,13 @@ export 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);
@@ -455,8 +472,12 @@ export 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,
                     };
                 };
@@ -639,7 +660,7 @@ export class AgGridColumnAdapter {
             }
             return {
                 component: AgGridFilterAdapterFactory(this.adaptableInstance),
-                handler: () => new AdaptableFilterHandler(this.adaptableApi, columnSetup),
+                handler: () => new AdaptableFilterHandler(this.adaptableApi),
             };
         });
     }

package/src/agGrid/AgGridFilterAdapter.js

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

package/src/agGrid/AgGridFloatingFilterAdapter.js

@@ -57,26 +57,6 @@ export 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();
@@ -107,7 +87,7 @@ export 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

@@ -64,11 +64,7 @@ export const InternalAdaptableNumberEditor = React.forwardRef(function InternalA
         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/AdaptablePercentageEditor/InternalAdaptablePercentageEditor.js

@@ -57,11 +57,7 @@ export const InternalAdaptablePercentageEditor = React.forwardRef(function Inter
         React.createElement(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/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import FormLayout, { FormRow } from '../FormLayout';
 import Input from '../Input';
 import SimpleButton from '../SimpleButton';
@@ -7,6 +6,8 @@ import AdaptableInput from '../../View/Components/AdaptableInput';
 import { useMemo } from 'react';
 import { useAdaptable } from '../../View/AdaptableContext';
 import { Select } from '../Select';
+import { Box, Flex } from '../Flex';
+import { twMerge } from '../../twMerge';
 export 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, {
@@ -28,7 +29,7 @@ export function AdaptableFormComponentButtons({ formDef, onClick, defaultTone, d
             : {
                 ...api.internalApi.buildBaseContext(),
             });
-        return (React.createElement(SimpleButton, { 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, { autoFocus: focusFirstButton && index === 0, disabled: disabledButtons[index], key: index, tooltip: buttonTooltip, icon: buttonIcon, tone: buttonStyle?.tone ?? defaultTone, variant: buttonStyle?.variant, "data-text": buttonLabel, className: twMerge(index ? 'twa:ml-2' : '', buttonStyle?.className), onClick: () => {
                 onClick(button);
             } }, buttonLabel));
     })));
@@ -68,7 +69,7 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
             case 'text':
             case 'number':
             case 'date':
-                return (React.createElement(AdaptableInput, { type: field.fieldType, style: { width: '100%' }, name: field.name, value: value, onChange: onChange }));
+                return (React.createElement(AdaptableInput, { 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,
@@ -81,7 +82,7 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                         setFieldValue(field.name, event.target.checked);
                     } }));
             case 'textOutput':
-                return (React.createElement(Box, { paddingLeft: 2, style: { textAlign: 'left' } }, value));
+                return React.createElement(Box, { className: "twa:pl-2 twa:text-left" }, value);
             default:
                 return React.createElement("div", null,
                     "Unknown field type: ",
@@ -91,8 +92,8 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
     // 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(Box, { "data-name": "form-title", fontSize: 5, mb: 2, style: { fontWeight: 'bold' } }, formDef.title)),
-        formDef.description && (React.createElement(Box, { "data-name": "form-description", mb: 3 }, formDef.description)),
+        displayTitle && formDef.title && (React.createElement(Box, { "data-name": "form-title", className: "twa:text-5 twa:mb-2 twa:font-bold" }, formDef.title)),
+        formDef.description && (React.createElement(Box, { "data-name": "form-description", className: "twa:mb-3" }, formDef.description)),
         React.createElement(FormLayout, { onKeyDown: (event) => {
                 const target = event.target;
                 const targetName = target.name;
@@ -120,7 +121,7 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                         },
                     });
                 }
-            }, "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) => {
@@ -136,6 +137,6 @@ export function AdaptableFormComponent({ formDef, data, onChange, onButtonClick,
                     renderField(field)));
             }
         })),
-        formDef.buttons ? (React.createElement(Flex, { "data-name": "form-buttons", marginTop: 3, flexDirection: "row", alignItems: "center", justifyContent: "center" },
+        formDef.buttons ? (React.createElement(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));
 }

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,45 @@
+import * as React from 'react';
+import { twMerge } from '../../twMerge';
+import clsx from 'clsx';
+import { Box } from '../Flex';
+export function Card(props) {
+    const { shadow = true, children, className, style, gap = 2 } = props;
+    return (React.createElement(Box, { className: clsx('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: twMerge(clsx('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: clsx('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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { Box, Flex } from 'rebass';
-import join from '../utils/join';
+import { Box, Flex } from '../Flex';
+import clsx from 'clsx';
 const Square = (props) => {
     return React.createElement("div", { className: `ab-CheckBox__square ab-CheckBox__square--${props.type}` });
 };
@@ -41,12 +41,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(Box, { my: 2, ...props, className: join('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: clsx(`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(Box, { ...props, className: clsx('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,
@@ -56,6 +54,6 @@ const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly
 };
 export const CheckBoxGroup = (props) => {
     const { orientation, ...flexProps } = props;
-    return (React.createElement(Flex, { className: "ab-CheckBoxGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start', ...flexProps }));
+    return (React.createElement(Flex, { className: `ab-CheckBoxGroup ${orientation === 'horizontal' ? 'twa:items-center' : 'twa:items-start'}`, flexDirection: orientation == 'horizontal' ? 'row' : 'column', ...flexProps }));
 };
 export { CheckBox };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Box } from 'rebass';
-import join from '../utils/join';
+import { Box } from '../Flex';
+import clsx from 'clsx';
 export const baseClassName = 'ab-CodeBlock';
 export const CodeBlock = (props) => {
-    return React.createElement(Box, { as: "code", ...props, className: join(props.className, baseClassName) });
+    return (React.createElement(Box, { as: "code", ...props, className: clsx('twa:p-1 twa:rounded-standard twa:bg-primary twa:text-primary-foreground', baseClassName, props.className) }));
 };

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { useCallback, useEffect } from 'react';
-import { Box, Flex } from 'rebass';
 import debounce from 'lodash/debounce';
 import Input from '../Input';
 import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
 import tinycolor from 'tinycolor2';
+import { Box, Flex } from '../Flex';
+import { twMerge } from '../../twMerge';
+import clsx from 'clsx';
 export const ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
     let { api, value, includeAlpha = true, ...restProps } = props;
@@ -34,20 +36,19 @@ export const ColorPicker = React.forwardRef((props, ref) => {
     }, [value]);
     const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
     const alpha = tinycolor(value).getAlpha();
-    return (React.createElement(Flex, { className: 'ColorPicker' },
-        React.createElement(Input, { ...restProps, mr: 2, onChange: (event) => {
+    return (React.createElement(Flex, { className: clsx('ColorPicker twa:items-center twa:gap-2', {
+            'twa:opacity-30': props.disabled,
+        }, props.className) },
+        React.createElement(Input, { ...restProps, disabled: props.disabled, className: 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(Flex, { alignItems: "center" },
-            React.createElement(Box, { mr: 1 }, "Opacity"),
+        includeAlpha && (React.createElement(Flex, { alignItems: "center", className: "twa:gap-1" },
+            React.createElement(Box, null, "Opacity"),
             React.createElement(Input, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
                     const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
                     debouncedOnChange(color);

package/src/components/Dashboard/Dashboard.js

@@ -42,7 +42,7 @@ export function Dashboard(props) {
             return null;
         }
         const activeTabTitle = children?.[activeTabIndex]?.props?.title ?? 'Select Toolbar';
-        return (React.createElement(DropdownButton, { ml: 1, columns: ['label'], items: React.Children.map(children, (child, index) => ({
+        return (React.createElement(DropdownButton, { className: "twa:ml-1", columns: ['label'], items: React.Children.map(children, (child, index) => ({
                 value: String(index),
                 label: child.props.title,
                 onClick: () => setActiveTabIndex(index),

package/src/components/Dashboard/DashboardToolbar.js

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import SimpleButton from '../SimpleButton';
 import join from '../utils/join';
-import { Flex } from 'rebass';
+import { Flex } from '../Flex';
 export function DashboardToolbar(props) {
     return (React.createElement("div", { className: join('ab-Dashboard__toolbar', props.className) },
         React.createElement("div", { className: "ab-Dashboard__toolbar-content" }, props.children),
-        React.createElement(Flex, { className: "ab-Dashboard__toolbar-title", flexDirection: "row", alignItems: "center" },
-            React.createElement("span", null, props.title),
-            props.showConfigure && (React.createElement(SimpleButton, { "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, { "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, { 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, { "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, { "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() })))));
 }

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

@@ -4,13 +4,14 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import useProperty from '../utils/useProperty';
 import FieldWrap from '../FieldWrap';
 import SimpleButton from '../SimpleButton';
-import { Flex } from 'rebass';
 import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
 import { useDatepickerContext } from './DatepickerContext';
 import { DayPicker } from 'react-day-picker';
 import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
 import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays, } from 'date-fns';
 import { Select } from '../Select';
+import { Flex } from '../Flex';
+import clsx from 'clsx';
 const onDatePickerDropdownKeyDown = (e) => {
     if (e.key === 'Escape' || e.key === 'Enter') {
         e.stopPropagation();
@@ -61,7 +62,7 @@ const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, overlayDO
 const END_MONTH = endOfYear(addYears(new Date(), 10));
 const START_MONTH = startOfYear(addYears(new Date(), -50));
 export const 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 = useDatepickerContext();
     let [value, setValue] = useProperty(props, 'value', undefined, {
         onChange: props.onChange,
@@ -91,7 +92,7 @@ export const Datepicker = React.forwardRef((props, ref) => {
     const clearValue = () => {
         updateValue(undefined);
     };
-    const renderButton = (label, onClick) => (React.createElement(SimpleButton, { onClick: onClick, margin: '2px' }, label));
+    const renderButton = (label, onClick) => (React.createElement(SimpleButton, { onClick: onClick, className: "twa:m-[2px]" }, label));
     const todayDate = new Date();
     const footerButtonsMap = {
         clear: renderButton('Clear', () => clearValue()),
@@ -105,11 +106,11 @@ export const 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, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
+    const clearButton = showClearButton !== false ? (React.createElement(SimpleButton, { "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, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
+    const calendarButton = (React.createElement(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", onClick: () => setVisible(true) }));
     const overlayDOMRef = useRef(null);
     return (React.createElement(Flex, null,
         React.createElement(OverlayTrigger, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { overlayDOMRef: overlayDOMRef, onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
@@ -117,13 +118,13 @@ export const Datepicker = React.forwardRef((props, ref) => {
                         setVisible(false, e.key);
                     }
                 } },
-                React.createElement(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, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) }))) },
+                React.createElement(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, { justifyContent: "space-between", className: "twa:mt-2", flexWrap: 'wrap' }, footerButtons) }))) },
             React.createElement(FieldWrap, { ...boxProps, style: {
                     borderRadius: style?.borderRadius,
                     width: style?.width,
                     maxWidth: style?.maxWidth,
                     border: style?.border,
-                }, className: "ab-Datepicker", onFocus: () => {
+                }, className: clsx('ab-Datepicker twa:min-h-input', className), onFocus: () => {
                     if (!visible) {
                         setVisible(true);
                     }
@@ -143,7 +144,7 @@ export const Datepicker = React.forwardRef((props, ref) => {
                         if (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))));
 });