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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnFilterWindow = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const ColumnSelector_1 = require("../Selectors/ColumnSelector");
 const AdaptableColumnFilter_1 = require("./AdaptableColumnFilter");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const Flex_1 = require("../../../components/Flex");
 const ColumnFilterWindow = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const { value: initialColumnId } = props?.popupProps;
@@ -16,19 +16,19 @@ const ColumnFilterWindow = (props) => {
     React.useEffect(() => {
         setColumnId(initialColumnId);
     }, [props.popupProps.value]);
-    const onChange = props.popupProps.onChange;
-    return (React.createElement(rebass_1.Flex, { flex: 1, minHeight: 0, height: "100%", flexDirection: "column", p: 2, className: "ab-ColumnFilterWindow" },
-        React.createElement(rebass_1.Box, { mb: 2 },
+    // const onChange = props.popupProps.onChange;
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "ab-ColumnFilterWindow twa:flex-1 twa:min-h-0 twa:p-2 twa:h-full" },
+        React.createElement(Flex_1.Box, { className: "twa:mb-2" },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Column" },
                     React.createElement(ColumnSelector_1.ColumnSelector, { renderOption: (column) => {
                             const columnFilter = api.filterApi.columnFilterApi.getColumnFilterForColumn(column.columnId);
-                            let label = column.friendlyName ?? column.columnId;
+                            const label = column.friendlyName ?? column.columnId;
                             if (columnFilter &&
                                 api.filterApi.columnFilterApi.isColumnFilterActive(columnFilter)) {
-                                return (React.createElement(rebass_1.Flex, null,
+                                return (React.createElement(Flex_1.Flex, null,
                                     label,
-                                    React.createElement(rebass_1.Box, { flex: 1 }),
+                                    React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
                                     React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } })));
                             }
                             return label;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingFilter = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const AdaptableContext_1 = require("../../AdaptableContext");
@@ -12,6 +11,7 @@ const ColumnFilterMenu_1 = require("./components/ColumnFilterMenu");
 const FloatingFilterInputList_1 = require("./components/FloatingFilterInputList");
 const utils_1 = require("./utils");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
+const Flex_1 = require("../../../components/Flex");
 const FloatingFilter = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     /**
@@ -56,8 +56,8 @@ const FloatingFilter = (props) => {
                 }
                 : {}),
         } },
-        React.createElement(rebass_1.Box, null, !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } }))),
-        showLabel && (React.createElement(rebass_1.Box, { ml: 2, className: "ab-FloatingFilter-label", title: label, flex: 1 }, label))));
+        React.createElement(Flex_1.Box, null, !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: 'filter' } }))),
+        showLabel && (React.createElement(Flex_1.Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1", title: label }, label))));
     if (isInlineEditable) {
         filterDropdown = showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-FloatingFilter-overlay", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 50, "data-name": "floating-filter-overlay", render: () => {
                 // we render this only for single filter
@@ -72,9 +72,9 @@ const FloatingFilter = (props) => {
     else {
         filterDropdown = filterDropdownButton;
     }
-    return (React.createElement(rebass_1.Flex, { className: "ab-FloatingFilter", style: { width: '100%' } },
+    return (React.createElement(Flex_1.Flex, { className: "ab-FloatingFilter twa:w-full" },
         filterDropdown,
-        isInlineEditable && (React.createElement(rebass_1.Flex, { flex: 1, minWidth: 0 },
+        isInlineEditable && (React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:min-w-0" },
             React.createElement(FloatingFilterInputList_1.FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, 
                 // It works only with a predicate
                 predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
@@ -83,12 +83,12 @@ const FloatingFilter = (props) => {
                         args: [predicate],
                     });
                 } }))),
-        isInlineEditable && (React.createElement(SimpleButton_1.default, { px: 0, onClick: () => {
+        isInlineEditable && (React.createElement(SimpleButton_1.default, { className: "twa:px-0", onClick: () => {
                 adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId, {
                     onChange: props.onChange,
                 });
             }, "data-name": "expand-filter", icon: "expand", variant: "text" })),
         (isMultiple ||
-            !(0, utils_1.isPredicateEmpty)(props.predicate.args[0], singleFilterPredicateDef)) && (React.createElement(SimpleButton_1.default, { "data-name": "clear-filter", p: 0, variant: "text", onClick: handleClear, icon: "close" }))));
+            !(0, utils_1.isPredicateEmpty)(props.predicate.args[0], singleFilterPredicateDef)) && (React.createElement(SimpleButton_1.default, { "data-name": "clear-filter", className: "twa:p-0", variant: "text", onClick: handleClear, icon: "close" }))));
 };
 exports.FloatingFilter = FloatingFilter;

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

@@ -20,7 +20,7 @@ export declare const ColumnFilterInput: (props: {
     disabled: boolean;
     onClear: () => void;
     onKeyDown?: (event: React.KeyboardEventHandler<HTMLInputElement>) => void;
-    filterType?: 'floating' | 'default';
+    filterType?: "floating" | "default";
     usePrimitiveInputs?: boolean;
     columnId: string;
 } & ColumnFilterEditorChangeProps) => React.JSX.Element;

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

@@ -75,7 +75,7 @@ const ColumnFilterInput = (props) => {
         }
     };
     if (type === 'date' && !showDatePicker) {
-        return (React.createElement(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, pr: 0, style: { border: 'none' }, onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
+        return (React.createElement(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: "twa:border-none twa:pr-0", onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
                 onChange(value);
                 setLiveValue(value);
             } }));
@@ -104,7 +104,7 @@ const ColumnFilterInput = (props) => {
             : {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
         // autoFocus has to be FALSE because if the input receives focus in the init phase,
         // it may scroll the AG Grid header viewport into view and de-synchronize it (relative to the content viewport)
-        autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, onChange: (e) => {
+        autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, className: "twa:flex-1", onChange: (e) => {
             const prevValue = `${liveValue}`;
             const value = e.target.value;
             if (value) {

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

@@ -25,7 +25,7 @@ const ColumnFilterInputList = (props) => {
         props.onPredicateChange(predicate);
     }, 300), [props.predicate, props.columnId]);
     if (['date[]', 'number[]', 'text[]'].includes(matchingInputs[0])) {
-        return (React.createElement(Panel_1.default, { bodyProps: { p: 0 }, borderRadius: 1, border: 0, p: 0, style: { width: '100%' } },
+        return (React.createElement(Panel_1.default, { bodyProps: { className: 'twa:p-0' }, className: "twa:w-full twa:rounded-sm twa:border-none twa:p-0" },
             React.createElement(FloatingFilterValues_1.FloatingFilterValues, { inline: false, columnId: props.columnId, disabled: props.disabled, onClear: () => {
                     props.onPredicateChange({ operator: props.predicate.operator, args: [] });
                 }, onChange: (inputs) => {

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

@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnFilterMenu = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const Flex_1 = require("../../../../components/Flex");
 const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
-    return (React.createElement(SimpleButton_1.default, { p: 1, variant: "text", width: "100%", tone: active ? 'info' : 'none', onClick: onClick },
-        React.createElement(rebass_1.Box, { mr: 2 }, icon),
-        React.createElement(rebass_1.Box, { fontSize: 2 }, label)));
+    return (React.createElement(SimpleButton_1.default, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick },
+        React.createElement(Flex_1.Box, { className: "twa:mr-2" }, icon),
+        React.createElement(Flex_1.Box, { className: "twa:text-2" }, label)));
 };
 const ColumnFilterMenu = (props) => {
-    return (React.createElement(Panel_1.default, { minWidth: "max-content" }, props.predicateDefs?.map((predicateDef, index) => {
-        return (React.createElement(rebass_1.Flex, { mb: 1, key: index, onMouseDownCapture: (e) => {
+    return (React.createElement(Panel_1.default, { className: "twa:min-w-max" }, props.predicateDefs?.map((predicateDef, index) => {
+        return (React.createElement(Flex_1.Flex, { className: "twa:mb-1", key: index, onMouseDownCapture: (e) => {
                 e.stopPropagation();
             } },
             React.createElement(ColumnFilterMenuItem, { onClick: () => props.onPredicateChange({ operator: predicateDef.operator, args: [] }), icon: predicateDef.icon, label: predicateDef.label, active: props.predicate.operator === predicateDef.operator })));

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingFilterValues = exports.useDistinctFilterColumnValues = void 0;
+exports.FloatingFilterValues = void 0;
+exports.useDistinctFilterColumnValues = useDistinctFilterColumnValues;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
@@ -98,7 +99,6 @@ function useDistinctFilterColumnValues(options) {
         triggerValuesLoad,
     };
 }
-exports.useDistinctFilterColumnValues = useDistinctFilterColumnValues;
 /**
  * This component was ported and modified to not know about colum  filter and predicates.
  * It should be further refactored to be easily ported;

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

@@ -1,7 +1,7 @@
 import { QlLogicalOperator, QlPredicate } from '../../../parser/src/predicate';
 import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
 import { AdaptablePredicate, ColumnFilter } from '../../../types';
-export declare const useAdaptableFilterWrapper: (columnId: string, filterComponent: 'FilterBar' | 'FilterForm', handleOnChangeOverride?: (columnFilter: ColumnFilter) => void) => {
+export declare const useAdaptableFilterWrapper: (columnId: string, filterComponent: "FilterBar" | "FilterForm", handleOnChangeOverride?: (columnFilter: ColumnFilter) => void) => {
     qlPredicate: QlPredicate;
     qlPredicateDefs: import("@adaptabletools/adaptable/src/parser/src/predicate/types").QlPredicateDef[];
     columnFilter: ColumnFilter;

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

@@ -18,7 +18,15 @@ const useAdaptableFilterWrapper = (columnId, filterComponent, handleOnChangeOver
     const column = api.columnApi.getColumnWithColumnId(columnId);
     const columnFilterOptions = api.optionsApi.getFilterOptions().columnFilterOptions;
     const qlPredicateDefs = React.useMemo(() => {
-        const predicateDefs = api.filterApi.columnFilterApi.getFilterPredicateDefsForColumn(column);
+        // this is NOT the ideal place to do this, but it is what it is: autoGroupCol should NOT have the 'Blanks'/'NonBlanks' predicates
+        const predicateDefs = api.filterApi.columnFilterApi
+            .getFilterPredicateDefsForColumn(column)
+            .filter((predDef) => {
+            if (api.columnApi.isAutoRowGroupColumnForSingle(column.columnId)) {
+                return predDef.id !== 'Blanks' && predDef.id !== 'NonBlanks';
+            }
+            return true;
+        });
         const qlDataType = (0, adaptableQlUtils_1.mapColumnDataTypeToExpressionFunctionType)(columnType);
         return predicateDefs.map((predDef) => (0, utils_1.mapAdaptablePredicateDefToQlPredicateDef)(predDef, qlDataType));
     }, [columnId]);

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

@@ -19,8 +19,6 @@ const NewColumnSelector = ({ allowReorder = true, ...props }) => {
             else {
                 onChange(colIds);
             }
-        }, toIdentifier: (c) => c.columnId, toLabel: (c) => c.friendlyName, noSelectionLabel: singleSelect ? 'Please select a column' : 'You have not selected any columns.', xSelectedLabel: singleSelect
-            ? () => null
-            : (count) => (count > 1 ? `You selected ${count} columns.` : 'You selected one column.') }));
+        }, toIdentifier: (c) => c.columnId, toLabel: (c) => c.friendlyName }));
 };
 exports.NewColumnSelector = NewColumnSelector;

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicateEditor.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityRulePredicateEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const PredicateEditor_1 = require("../../PredicateEditor/PredicateEditor");
+const Flex_1 = require("../../../../components/Flex");
+const Select_1 = require("../../../../components/Select");
 const EntityRulePredicateEditor = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const { predicate } = props;
@@ -59,12 +59,10 @@ const EntityRulePredicateEditor = (props) => {
         return preparedPredicates;
     }, [props.predicate]);
     const columnIdPredicateScopeEnabled = Boolean(props.columnPredicateEnabled);
-    const columnFriendlyName = allColumns.find((col) => col.value === predicate?.ColumnId)?.label;
+    const selectedColumn = allColumns.find((col) => col.value === predicate?.ColumnId);
     const columnOptions = allColumns.map((col) => ({
         label: col.label,
-        onClick: () => {
-            handlePredicateChange({ PredicateId: null, ColumnId: col.value, Inputs: [] });
-        },
+        value: col.value,
     }));
     // use global scope or custom scope
     let predicateColumnId = null;
@@ -74,14 +72,16 @@ const EntityRulePredicateEditor = (props) => {
     else if ('ColumnIds' in props.data.Scope && props.data.Scope?.ColumnIds?.[0]) {
         predicateColumnId = props.data.Scope?.ColumnIds?.[0];
     }
-    return (React.createElement(rebass_1.Flex, { className: "ab-EntityRulePredicateEditor", p: 3, mb: 3 },
-        React.createElement(rebass_1.Box, { flex: 1 },
+    return (React.createElement(Flex_1.Flex, { className: "ab-EntityRulePredicateEditor twa:p-3 twa:mb-3" },
+        React.createElement(Flex_1.Box, { className: "twa:flex-1" },
             React.createElement(FormLayout_1.default, null,
                 columnIdPredicateScopeEnabled && (React.createElement(FormLayout_1.FormRow, { label: "Column" },
-                    React.createElement(DropdownButton_1.default, { width: "100%", columns: ['label'], items: columnOptions }, columnFriendlyName ?? 'Select Column'))),
+                    React.createElement(Select_1.Select, { placeholder: "Select Column", options: columnOptions, value: selectedColumn?.value, onChange: (value) => {
+                            handlePredicateChange({ PredicateId: null, ColumnId: value, Inputs: [] });
+                        } }))),
                 React.createElement(FormLayout_1.FormRow, { label: "Predicate" },
                     React.createElement(PredicateEditor_1.PredicateEditor, { columnId: predicateColumnId, predicateDefs: predicateDefs, predicate: predicate, onChange: handlePredicateChange, onClear: handleClear })))),
-        React.createElement(rebass_1.Box, null,
-            React.createElement(SimpleButton_1.default, { disabled: !predicate, ml: 2, onClick: handleClear, icon: "delete" }))));
+        React.createElement(Flex_1.Box, null,
+            React.createElement(SimpleButton_1.default, { disabled: !predicate, className: "twa:ml-2 twa:h-input", onClick: handleClear, icon: "delete" }))));
 };
 exports.EntityRulePredicateEditor = EntityRulePredicateEditor;