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

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;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityRulePredicatesEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
@@ -13,6 +12,7 @@ const Tag_1 = require("../../../../components/Tag");
 const EntityRulePredicateEditor_1 = require("./EntityRulePredicateEditor");
 const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
 const getScopeViewItems_1 = require("../../../../Utilities/getScopeViewItems");
+const Flex_1 = require("../../../../components/Flex");
 const EntityRulePredicatesEditor = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
@@ -61,15 +61,14 @@ const EntityRulePredicatesEditor = (props) => {
     const scopeString = (0, getScopeViewItems_1.getScopeViewItems)(props.data.Scope, api).values.join(', ');
     const enablePredicateColumnId = props.enablePredicateColumnId ?? true;
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { mb: 2, justifyContent: "space-between" },
-            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, props.descriptions.selectPredicate),
+        React.createElement(Flex_1.Flex, { justifyContent: "space-between", className: "twa:mb-2" },
+            React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mb-2" }, props.descriptions.selectPredicate),
             React.createElement(SimpleButton_1.default, { disabled: !props.data.Rule?.Predicates?.length, onClick: handleAddNewPredicate, icon: "plus", variant: "raised" }, "Add Predicate")),
-        enablePredicateColumnId && (React.createElement(rebass_1.Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector", p: 2, mb: 2, flexDirection: "column" },
-            React.createElement(rebass_1.Text, { mb: 2 }, "Create Predicate Rule(s) using"),
-            React.createElement(Radio_1.default, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), mr: 3, checked: !columnPredicateEnabled },
-                "Active Column:",
-                ' ',
-                React.createElement(Tag_1.Tag, { ml: 1, mr: 1 }, scopeString || 'Not Defined'),
+        enablePredicateColumnId && (React.createElement(Flex_1.Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector twa:p-2 twa:mb-2", flexDirection: "column" },
+            React.createElement(Flex_1.Box, { className: "twa:mb-2" }, "Create Predicate Rule(s) using"),
+            React.createElement(Radio_1.default, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), className: "twa:mr-3", checked: !columnPredicateEnabled },
+                "Active Column: ",
+                React.createElement(Tag_1.Tag, { className: "twa:mx-1" }, scopeString || 'Not Defined'),
                 ' '),
             React.createElement(Radio_1.default, { "data-name": "column-scope", onClick: () => handlePredicateScopeTypeChange(true), checked: columnPredicateEnabled }, "Selected Columns (overriding Active Column)"))),
         (props.data.Rule?.Predicates?.length ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
@@ -79,15 +78,12 @@ const EntityRulePredicatesEditor = (props) => {
                 editorPredicateDefs = [currentPredicatDef, ...defaultPredicateDefs];
             }
             return (React.createElement(React.Fragment, { key: `${index}-${predicate?.PredicateId}` },
-                index > 0 && (React.createElement(rebass_1.Box, null,
-                    React.createElement(Tag_1.Tag, { mb: 3 }, "AND"))),
+                index > 0 && (React.createElement(Flex_1.Box, null,
+                    React.createElement(Tag_1.Tag, { className: "twa:mb-3" }, "AND"))),
                 React.createElement(EntityRulePredicateEditor_1.EntityRulePredicateEditor, { data: props.data, predicate: predicate, onChange: props.onChange, predicateDefs: editorPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, columnPredicateEnabled: columnPredicateEnabled })));
         }),
-        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
-                fontSize: 'var(--ab-font-size-3)',
-                padding: 0,
-            } },
-            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
+        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
+            React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
             "See Predicate documentation for more details and examples"))));
 };
 exports.EntityRulePredicatesEditor = EntityRulePredicatesEditor;

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
 import type { AdaptableColumnPredicate, AdaptableModule, AdaptablePredicateDef, ColumnScope } from '../../../types';
 import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
 import { AdaptableQuery } from '../../../AdaptableState/Common/AdaptableQuery';
+import { FlexProps } from '../../../components/Flex';
 export type RuleType = XOR<{
     Predicates: AdaptableColumnPredicate[];
 }, AdaptableQuery>;
@@ -26,7 +26,10 @@ export type EntityRulesEditorProps<T> = {
         useObservableQuery: React.ReactNode;
         useAggregationQuery: React.ReactNode;
     };
-    flexProps?: FlexProps;
+    flexProps?: FlexProps & {
+        className?: string;
+        style?: React.CSSProperties;
+    };
     showQueryBuilder?: boolean;
 };
 export declare const EntityRulesSummary: <T extends {

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

@@ -4,20 +4,21 @@ exports.EntityRulesEditor = exports.EntityRulesSummary = 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 Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const EntityRulePredicatesEditor_1 = require("./EntityRulePredicatesEditor");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const Flex_1 = require("../../../components/Flex");
+const twMerge_1 = require("../../../twMerge");
 const QueryTab = (props) => {
     const { type, label, disabled = false, ...tabProps } = props;
-    const text = (React.createElement(rebass_1.Flex, { flexDirection: "column" },
+    const text = (React.createElement(Flex_1.Flex, { flexDirection: "column" },
         label,
         " ",
-        React.createElement(rebass_1.Text, { fontSize: 2 }, "query")));
-    return (React.createElement(Tabs_1.Tabs.Tab, { style: { flex: 1 }, ...tabProps }, !disabled && props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === props.value, style: { alignItems: 'baseline' } }, text)) : (text)));
+        React.createElement(Flex_1.Box, { className: "twa:text-2" }, "query")));
+    return (React.createElement(Tabs_1.Tabs.Tab, { style: { flex: 1 }, ...tabProps }, !disabled && props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, className: "twa:m-0 twa:align-baseline", checked: type === props.value }, text)) : (text)));
 };
 // needed here to be considered a child Tab component, inside the Tabs component
 Tabs_1.SupportedTabMenuComps.add(QueryTab);
@@ -28,11 +29,11 @@ const EntityRulesSummary = (props) => {
         !data?.Rule?.BooleanExpression &&
         !data?.Rule?.ObservableExpression &&
         !data?.Rule?.AggregatedBooleanExpression) {
-        return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Rule defined");
+        return React.createElement(Flex_1.Box, { className: "twa:text-2" }, "No Rule defined");
     }
     return (React.createElement(
-        rebass_1.Text,
-        { fontSize: 2 },
+        Flex_1.Box,
+        { className: "twa:text-2" },
         data.Rule.Predicates ? (React.createElement(React.Fragment, null, data.Rule?.Predicates?.map?.((predicate, index) => (
         // predicate id is not unique
         (React.createElement(
@@ -44,7 +45,7 @@ const EntityRulesSummary = (props) => {
 };
 exports.EntityRulesSummary = EntityRulesSummary;
 const RuleTabTitle = (props) => {
-    return props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
+    return props.showRadio ? (React.createElement(Radio_1.default, { className: "twa:m-0", tabIndex: -1, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
 };
 const EntityRulesEditor = (props) => {
     const { data, children, descriptions, predicateDefs, showNoRule = false, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
@@ -138,13 +139,13 @@ const EntityRulesEditor = (props) => {
     };
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
     const baseClassName = 'ab-EntityRulesEditor';
-    return (React.createElement(rebass_1.Flex, { className: baseClassName, flexDirection: "column", padding: 2, pt: 0, pl: 0, ...flexProps, style: { height: '100%', ...flexProps?.style } },
+    return (React.createElement(Flex_1.Flex, { ...flexProps, className: (0, twMerge_1.twMerge)(baseClassName, 'twa:p-2 twa:pt-0 twa:pl-0 twa:h-full', flexProps?.className), flexDirection: "column", style: flexProps?.style },
         children,
-        React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, pt: 2, pl: 2, style: { flex: 1, overflow: 'auto' } },
+        React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, className: "twa:pt-2 twa:pl-2 twa:flex-1 twa:overflow-auto" },
             showNoRule ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'NoRule', style: { flex: 1 } },
                 React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'NoRule' }, "No Condition"))) : null,
             showNoRule ? (React.createElement(Tabs_1.Tabs.Content, { value: 'NoRule' },
-                React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, 'Format Column is always applied'))) : null,
+                React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mb-2" }, 'Format Column is always applied'))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
                 React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'Predicate' }, "Predicate"))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "Predicate", value: "Predicate" },

package/src/View/Components/ExpressionWizard.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpressionWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../components/CheckBox");
 const ExpressionEditor_1 = require("../../components/ExpressionEditor");
 const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const react_1 = require("react");
+const Flex_1 = require("../../components/Flex");
 class ExpressionWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -33,11 +33,11 @@ class ExpressionWizard extends React.Component {
         return (React.createElement(React.Fragment, null,
             React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.NamedQueryModuleId, value: this.state.expression, onChange: this.handleCustomExpressionChange, initialData: initialData, columns: this.props.api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: this.props.api.expressionApi.internalApi.getAvailableFields(), namedQueries: this.props.api.namedQueryApi.getNamedQueries(), api: this.props.api }),
             ' ',
-            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, marginBottom: 2, marginLeft: 1, alignItems: "center", "data-name": "expression-wizard-save-option" },
-                React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, disabled: !this.isValidExpression(), marginBottom: 2, checked: this.state.saveToNamedQueries, onChange: (checked) => this.setState({
+            React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:p-1 twa:mb-2 twa:ml-1", alignItems: "center", "data-name": "expression-wizard-save-option" },
+                React.createElement(CheckBox_1.CheckBox, { className: "twa:ml-2 twa:mb-2", disabled: !this.isValidExpression(), checked: this.state.saveToNamedQueries, onChange: (checked) => this.setState({
                         saveToNamedQueries: checked,
                     }, () => this.props.updateGoBackState()) }, "Save as new Named Query"),
-                this.state.saveToNamedQueries && (React.createElement(Input_1.default, { marginLeft: 2, style: { minWidth: '20rem' }, value: this.state.newNamedQuery, onChange: (e) => this.setState({
+                this.state.saveToNamedQueries && (React.createElement(Input_1.default, { className: "twa:ml-2 twa:min-w-[20rem]", value: this.state.newNamedQuery, onChange: (e) => this.setState({
                         newNamedQuery: e.target.value,
                     }, () => this.props.updateGoBackState()) })))));
     }

package/src/View/Components/FilterForm/Waiting.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
 export type WaitingProps = React.ClassAttributes<Waiting> & {
     WaitingMessage: string;
-} & FlexProps;
+} & FlexProps & {
+    className?: string;
+};
+import { FlexProps } from '../../../components/Flex';
 export declare class Waiting extends React.Component<WaitingProps, {}> {
     render(): any;
 }

package/src/View/Components/FilterForm/Waiting.js

@@ -3,15 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Waiting = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const refresh_1 = tslib_1.__importDefault(require("../../../components/icons/refresh"));
+const Flex_1 = require("../../../components/Flex");
+const twMerge_1 = require("../../../twMerge");
 class Waiting extends React.Component {
     render() {
         const { WaitingMessage, ...props } = this.props;
-        return (React.createElement(rebass_1.Flex, { flexDirection: "column", marginTop: 2, marginBottom: 2, ...props },
-            React.createElement(rebass_1.Flex, { flexDirection: "row", justifyContent: "center" },
+        return (React.createElement(Flex_1.Flex, { flexDirection: "column", ...props, className: (0, twMerge_1.twMerge)(`twa:my-2`, props.className) },
+            React.createElement(Flex_1.Flex, { flexDirection: "row", justifyContent: "center" },
                 React.createElement(refresh_1.default, null)),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", justifyContent: "center" },
+            React.createElement(Flex_1.Flex, { flexDirection: "row", justifyContent: "center" },
                 React.createElement("h5", null, WaitingMessage))));
     }
 }

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -6,6 +6,7 @@ export type AdaptableFormControlTextClearProps = {
     focusOnClear?: boolean;
     autoFocus?: boolean;
     inputStyle?: CSSProperties;
+    inputClassName?: string;
     actionTools?: React.ReactNode;
 } & InputProps;
 export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Omit<AdaptableFormControlTextClearProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -7,17 +7,13 @@ const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensio
 const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const twMerge_1 = require("../../../twMerge");
 exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    return (React.createElement(FieldWrap_1.default, { onClick: props.onClick, className: props.className, style: {
-            background: 'var(--ab-color-defaultbackground)',
-            overflow: 'visible',
-            width: '100%',
-            ...props.style,
-        } },
-        React.createElement(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
+    return (React.createElement(FieldWrap_1.default, { onClick: props.onClick, className: (0, twMerge_1.twMerge)('twa:bg-defaultbackground twa:overflow-visible twa:w-full', props.className), style: props.style },
+        React.createElement(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
                 inputRef.current = r;
                 if (!ref) {
                     return;
@@ -30,7 +26,7 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                 }
             }, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }),
         props.actionTools,
-        React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
+        React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tooltip: closeButtonTooltip, className: "twa:mr-1 twa:p-0", onClick: () => {
                 props.OnTextChange('');
                 const input = inputRef.current;
                 if (!focusOnClear) {

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

@@ -8,7 +8,7 @@ const AdaptableContext_1 = require("../../AdaptableContext");
 const react_1 = require("react");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const ModuleValueSelector = (props) => {
-    const { options, value, onChange, selectionBoxPosition = 'top', ...valueSelectorProps } = props;
+    const { options, value, onChange, ...valueSelectorProps } = props;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const selectedModulesMap = (0, react_1.useMemo)(() => {
         if (!value || !value.length) {
@@ -30,6 +30,6 @@ const ModuleValueSelector = (props) => {
     const sortedOptions = (0, react_1.useMemo)(() => {
         return ArrayExtensions_1.default.sortArrayWithOrder(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
-    return (React.createElement(ValueSelector_1.ValueSelector, { ...valueSelectorProps, options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
+    return (React.createElement(ValueSelector_1.ValueSelector, { ...valueSelectorProps, options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
 };
 exports.ModuleValueSelector = ModuleValueSelector;