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

package/src/components/ExpressionEditor/DataTableEditor.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import { baseClassName } from '.';
 import { CheckBox } from '../CheckBox';
 import { AdaptableFormControlTextClear } from '../../View/Components/Forms/AdaptableFormControlTextClear';
@@ -9,6 +8,7 @@ import Input from '../Input';
 import { isValueValidDate } from '../../Utilities/Helpers/DateHelper';
 import { useAdaptable } from '../../View/AdaptableContext';
 import AdaptableInput from '../../View/Components/AdaptableInput';
+import { Flex } from '../Flex';
 export const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'column', labels, }) => {
     const adaptableApi = useAdaptable().api;
     const [data, setData] = React.useState(initialData);
@@ -30,8 +30,8 @@ export const DataTableEditor = ({ fields, dataFormatter, data: initialData, type
     const hasFriendlyNames = React.useMemo(() => {
         return fields.some((field) => field.label !== field.value);
     }, []);
-    return (React.createElement(Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, style: { height: '100%' } },
-        React.createElement(Flex, { className: `${baseClassName}__${type}-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 }, mb: 2 },
+    return (React.createElement(Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, className: "twa:h-full" },
+        React.createElement(Flex, { className: `${baseClassName}__${type}-list twa:mb-2 twa:mt-[2px]`, flexDirection: "column", alignItems: "flex-start" },
             hasFriendlyNames && (React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
                     float: 'right',
                     margin: 0,
@@ -48,13 +48,9 @@ export const DataTableEditor = ({ fields, dataFormatter, data: initialData, type
         })
             .map((field) => {
             const label = showColumnIds ? `[${field.value}]` : field.label;
-            return (React.createElement(FormRow, { key: field.label, label: React.createElement(EditorButton, { width: "100%", height: "100%", style: {
-                        background: 'var(--ab-color-primary)',
-                        cursor: 'grab',
-                        marginRight: 'var(--ab-space-1)',
-                    }, data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
-                    React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, label)) }, field.dataType === 'number' ? (React.createElement(Input, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), width: "100%", disabled: field.readOnly })) : field.dataType === 'text' ? (React.createElement(Input, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), width: "100%", disabled: field.readOnly })) : field.dataType === 'date' ? (React.createElement(AdaptableInput, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: getColDateValue(field.value) ?? '', onChange: (e) => {
+            return (React.createElement(FormRow, { key: field.label, label: React.createElement(EditorButton, { className: "twa:w-full twa:h-full twa:bg-primary twa:cursor-grab twa:mr-1", data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
+                    React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" }, label)) }, field.dataType === 'number' ? (React.createElement(Input, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'text' ? (React.createElement(Input, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: getColValue(field.value) ?? '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'date' ? (React.createElement(AdaptableInput, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: getColDateValue(field.value) ?? '', onChange: (e) => {
                     setData(updateColValue(data, field.value, new Date(e.target.value)));
-                }, style: { width: '100%' }, disabled: field.readOnly })) : field.dataType === 'boolean' ? (React.createElement(CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null));
+                }, className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'boolean' ? (React.createElement(CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null));
         }))));
 };

package/src/components/ExpressionEditor/EditorButton.js

@@ -31,8 +31,6 @@ function EditorButton(props) {
             catch (err) {
                 console.error(err);
             }
-        }, style: {
-            cursor: 'grab',
         }, ...buttonProps }));
 }
 export default EditorButton;

package/src/components/ExpressionEditor/EditorContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ExpressionFunction } from '../../types';
 export declare const ExpressionEditorContext: import("react").Context<{
     textAreaRef: React.MutableRefObject<HTMLTextAreaElement>;

package/src/components/ExpressionEditor/EditorInputWithWhereClause.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { BaseEditorInput } from './BaseEditorInput';
-import { Flex, Text } from 'rebass';
 import { editorButtonsSearch } from './editorButtonsSearch';
 import useProperty from '../utils/useProperty';
 import { CapitaliseFirstLetter, IsNotNullOrEmptyOrWhiteSpace, IsNullOrEmptyOrWhiteSpace, } from '../../Utilities/Extensions/StringExtensions';
@@ -9,6 +8,7 @@ import { editorButtonsObservable } from './editorButtonsObservable';
 import { CheckBox } from '../CheckBox';
 import { useExpressionEditor } from './EditorContext';
 import { editorButtonsAggregatedBoolean } from './editorButtonsAggregatedBoolean';
+import { Box, Flex } from '../Flex';
 function EditorInputWithWhereClause(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
@@ -45,19 +45,19 @@ function EditorInputWithWhereClause(props) {
     const { setSelectedFunction } = useExpressionEditor();
     const [showWhereClause, setShowWhereClause] = useState(IsNotNullOrEmptyOrWhiteSpace(whereClauseValue));
     const queryName = `${CapitaliseFirstLetter(props.type)}Query`;
-    return (React.createElement(Flex, { flexDirection: "column", alignItems: "start" },
+    return (React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" },
         React.createElement(BaseEditorInput, { type: 'main', value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: props.type === 'observable' ? editorButtonsObservable : editorButtonsAggregatedBoolean, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }),
-        React.createElement(Text, { fontSize: 2, marginTop: 2, pl: 3 },
+        React.createElement(Box, { className: "twa:text-2 twa:mt-2 twa:pl-3" },
             "Add a ",
             React.createElement("i", null, "WHERE"),
             " Clause to narrow the scope of the Query"),
-        React.createElement(CheckBox, { disabled: IsNullOrEmptyOrWhiteSpace(reactiveValue), checked: showWhereClause, style: { alignItems: 'center' }, onChange: (checked) => {
+        React.createElement(CheckBox, { disabled: IsNullOrEmptyOrWhiteSpace(reactiveValue), checked: showWhereClause, onChange: (checked) => {
                 setShowWhereClause(checked);
                 if (!checked) {
                     // reset whereClause value if textarea is hidden
                     updateWhereClauseValue(null);
                 }
-            }, pl: 3 }, "WHERE"),
+            }, className: "twa:pl-3 twa:items-center" }, "WHERE"),
         showWhereClause && (React.createElement(BaseEditorInput, { type: 'secondary', disabled: IsNullOrEmptyOrWhiteSpace(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))));
 }
 export default EditorInputWithWhereClause;

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -1,21 +1,19 @@
-import { Box } from 'rebass';
 import * as React from 'react';
 import { Tag } from '../Tag';
+import { Box } from '../Flex';
+const signatureClassName = 'twa:m-0 twa:whitespace-pre-wrap twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-1 twa:inline-block';
 export const ExpressionFunctionDocumentation = (props) => {
-    return props.expressionFunction ? (React.createElement(Box, { "data-name": "expression-editor-documentation", my: 2, p: 2, style: {
-            background: 'var(--ab-color-primary)',
-            borderRadius: 'var(--ab__border-radius)',
-        } },
-        props.expressionFunction.description && (React.createElement(Box, { mb: 3, style: { fontWeight: 'bold', whiteSpace: 'pre-wrap' }, "data-name": "expression-editor-documentation-description" }, props.expressionFunction.description)),
+    return props.expressionFunction ? (React.createElement(Box, { "data-name": "expression-editor-documentation", className: "twa:my-2 twa:p-2 twa:rounded-standard twa:leading-normal" },
+        props.expressionFunction.description && (React.createElement(Box, { className: "twa:mb-3 twa:font-bold twa:whitespace-pre-wrap", "data-name": "expression-editor-documentation-description" }, props.expressionFunction.description)),
         props.expressionFunction.signatures && (React.createElement(Box, { "data-name": "expression-editor-documentation-signatures" },
             React.createElement("b", null, "Signatures"),
-            React.createElement("ul", null, props.expressionFunction.signatures.map((signature, index) => (React.createElement("li", { key: index },
-                React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } }, signature))))))),
+            React.createElement("ul", { className: "twa:flex twa:flex-col twa:gap-1" }, props.expressionFunction.signatures.map((signature, index) => (React.createElement("li", { key: index },
+                React.createElement("pre", { className: signatureClassName }, signature))))))),
         props.expressionFunction.examples && (React.createElement(Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Examples"),
-            React.createElement("ul", null, props.expressionFunction.examples.map((example, index) => (React.createElement("li", { key: index },
-                React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } }, example))))))),
+            React.createElement("ul", { className: "twa:flex twa:flex-col twa:gap-1" }, props.expressionFunction.examples.map((example, index) => (React.createElement("li", { key: index },
+                React.createElement("pre", { className: signatureClassName }, example))))))),
         props.expressionFunction.returnType && (React.createElement(Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Return Type"),
-            React.createElement(Tag, null, props.expressionFunction.returnType))))) : null;
+            React.createElement(Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full" }, props.expressionFunction.returnType))))) : null;
 };

package/src/components/ExpressionEditor/NamedQueryContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NamedQuery } from '../../types';
 export type ExpressionEditorNamedQuery = false | NamedQuery;
 export declare const NamedQueryContext: import("react").Context<{

package/src/components/ExpressionEditor/NamedQueryEditor.js

@@ -1,30 +1,20 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import { useAdaptable } from '../../View/AdaptableContext';
 import { CheckBox } from '../CheckBox';
 import EditorButton from './EditorButton';
+import { Flex } from '../Flex';
 export const NamedQueryEditor = (props) => {
     const adaptable = useAdaptable();
     const [showColumnIds, setShowColumnIds] = React.useState(false);
     const [inlineQuery, setInlineQuery] = React.useState(false);
-    return (React.createElement(Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+    return (React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start", className: "twa:mt-[2px]" },
         React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked) }, "Show Column IDs"),
         React.createElement(CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked) }, "Inline Query"),
-        props.namedQueries.map((namedQuery) => (React.createElement(Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
-                padding: 3,
-                marginTop: 'var(--ab-space-2)',
-                marginBottom: 'var(--ab-space-2)',
-                width: '100%',
-            }, backgroundColor: "primarylight" },
+        props.namedQueries.map((namedQuery) => (React.createElement(Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "flex-start", className: "twa:p-1 twa:my-2 twa:w-full twa:bg-primarylight" },
             ' ',
-            React.createElement(EditorButton, { width: "100%", height: "100%", style: {
-                    background: 'var(--ab-color-primary)',
-                    cursor: 'grab',
-                }, data: inlineQuery ? namedQuery.BooleanExpression : `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
-                React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
-            React.createElement(Flex, { alignItems: "start", style: {
-                    padding: 5,
-                } }, showColumnIds
+            React.createElement(EditorButton, { className: "twa:w-full twa:h-full twa:bg-primary twa:cursor-grab", data: inlineQuery ? namedQuery.BooleanExpression : `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
+                React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" }, namedQuery.Name)),
+            React.createElement(Flex, { alignItems: "flex-start", className: "twa:p-1" }, showColumnIds
                 ? namedQuery.BooleanExpression
                 : adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery)))))));
 };

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.d.ts

@@ -16,16 +16,8 @@ interface QueryBuilderProps {
     module: AdaptableModule;
 }
 export declare function useQueryBuilderContext(): {
-    getColumns: (type?: AdaptableColumnDataType) => {
-        label?: string;
-        value: string;
-        type: AdaptableColumnDataType;
-    }[];
-    getFields: (type?: AdaptableColumnDataType) => {
-        label?: string;
-        value: string;
-        type: AdaptableColumnDataType;
-    }[];
+    getColumns: QueryBuilderProps["getColumns"];
+    getFields: QueryBuilderProps["getFields"];
     getExpressions: (columnType: AdaptableColumnDataType) => BooleanFunctionName[];
 };
 export declare const QueryBuilder: React.FunctionComponent<QueryBuilderProps>;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { DragDropContext } from '../../dnd';
-import { Box, Flex } from 'rebass';
 import { mapExpressionToQlPredicate, } from '../../../parser/src/predicate';
 import { mapQlPredicateToExpression } from '../../../parser/src/predicate/mapQlPredicateToExpression';
 import { useAdaptable } from '../../../View/AdaptableContext';
@@ -11,6 +10,7 @@ import SimpleButton from '../../SimpleButton';
 import { WarningBox } from '../../WarningBox';
 import { QueryPredicateBuilder } from './QueryPredicateBuilder';
 import { getFunctionsForColumnType, getUnsuportedExpressionFromQlPredicate, reorder, } from './utils';
+import { Box, Flex } from '../../Flex';
 const QUERY_BUILDER_CLASSNAME = 'ab-QueryBuilder';
 const QueryBuilderContext = React.createContext(null);
 export function useQueryBuilderContext() {
@@ -74,11 +74,11 @@ export const QueryBuilder = (props) => {
         errorOrEditor = props.query?.includes?.('QUERY') ? (React.createElement(WarningBox, { "data-name": "unsupported-query-warning" },
             React.createElement(Flex, { alignItems: "center" },
                 "Named Queries are not supported in the Query Builder",
-                React.createElement(Box, { flex: 1 }),
+                React.createElement(Box, { className: "twa:flex-1" }),
                 clearExpressionButton))) : (React.createElement(ErrorBox, null,
             React.createElement(Flex, null,
                 qlPredicate.errorMessage,
-                React.createElement(Box, { flex: 1 }),
+                React.createElement(Box, { className: "twa:flex-1" }),
                 clearExpressionButton)));
     }
     else if (unsupportedExpressionFunction) {
@@ -110,8 +110,8 @@ export const QueryBuilder = (props) => {
         } },
         React.createElement(QueryBuilderContext.Provider, { value: context },
             React.createElement(Box, { className: QUERY_BUILDER_CLASSNAME },
-                React.createElement(HelpBlock, { "data-name": "query-builder-help", mt: 2, mb: 2, p: 2, fontSize: 3 }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
+                React.createElement(HelpBlock, { "data-name": "query-builder-help", className: "twa:my-2 twa:p-2 twa:text-3" }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
                 errorOrEditor,
-                React.createElement(Panel, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", mt: 3 },
-                    React.createElement(Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression`, minHeight: 48, my: 2, p: 3 }, expressionStr || 'Output Expression will display here'))))));
+                React.createElement(Panel, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", className: "twa:mt-3" },
+                    React.createElement(Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression twa:min-h-[48px] twa:my-2 twa:p-3` }, expressionStr || 'Output Expression will display here'))))));
 };

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.d.ts

@@ -26,7 +26,7 @@ export declare const PrimitiveMultiValueInput: (props: {
 }) => React.JSX.Element;
 export declare const ExpressionSelector: (props: {
     value: BooleanFunctionName;
-    dataType: AdaptableColumn['dataType'];
+    dataType: AdaptableColumn["dataType"];
     onExpressionChange(expression: BooleanFunctionName): void;
 }) => React.JSX.Element;
 export declare const CombinatorSelector: (props: {

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Box, Flex, Text } from 'rebass';
 import { getQlPredicateSymbol } from '../../../parser/src/predicate/mapQlPredicateToExpression';
 import { mapExpressionFunctionTypeToColumnDataType } from '../../../Utilities/adaptableQlUtils';
 import { useAdaptable } from '../../../View/AdaptableContext';
@@ -14,6 +13,7 @@ import { InputGroup } from '../../InputGroup';
 import { Select } from '../../Select';
 import { useQueryBuilderContext } from './QueryBuilder';
 import { isFieldValue, mapColumnExpressionToColumnId, mapExpressionToFieldValue, mapFieldValueToExpression, } from './utils';
+import { Box, Flex } from '../../Flex';
 export const PrimitiveColumnOrFieldSelector = (props) => {
     const adaptable = useAdaptable();
     const [type, setType] = React.useState(() => {
@@ -42,14 +42,14 @@ export const PrimitiveColumnOrFieldSelector = (props) => {
         {
             label: (React.createElement(Flex, { alignItems: "center" },
                 React.createElement(Icon, { name: "grid" }),
-                React.createElement(Text, { ml: 2 }, "Column"))),
+                React.createElement(Box, { className: "twa:ml-2" }, "Column"))),
             value: 'column',
             icon: 'grid',
         },
         {
             label: (React.createElement(Flex, { alignItems: "center" },
                 React.createElement(Icon, { name: "column-outline" }),
-                React.createElement(Text, { ml: 2 }, "Field"))),
+                React.createElement(Box, { className: "twa:ml-2" }, "Field"))),
             value: 'field',
             icon: 'column-outline',
         },
@@ -141,14 +141,14 @@ export const PrimitiveValueInput = (props) => {
         {
             label: (React.createElement(Flex, { alignItems: "center" },
                 React.createElement(Icon, { name: "columns" }),
-                React.createElement(Text, { ml: 2 }, "Column"))),
+                React.createElement(Box, { className: "twa:ml-2" }, "Column"))),
             icon: 'columns',
             value: 'column-name',
         },
         {
             label: (React.createElement(Flex, { alignItems: "center" },
                 React.createElement(Icon, { name: "edit" }),
-                React.createElement(Text, { ml: 2 }, "Value"))),
+                React.createElement(Box, { className: "twa:ml-2" }, "Value"))),
             icon: 'edit',
             value: 'input-value',
         },
@@ -157,13 +157,13 @@ export const PrimitiveValueInput = (props) => {
         options.push({
             label: (React.createElement(Flex, { alignItems: "center" },
                 React.createElement(Icon, { name: "column-outline" }),
-                React.createElement(Text, { ml: 2 }, "Field"))),
+                React.createElement(Box, { className: "twa:ml-2" }, "Field"))),
             icon: 'column-outline',
             value: 'field',
         });
     }
     const typeOption = options.find((option) => option.value === type);
-    return (React.createElement(InputGroup, { Component: Flex, "data-id": "query-input-wrapper", mr: 2 },
+    return (React.createElement(InputGroup, { Component: Flex, "data-id": "query-input-wrapper", className: "twa:mr-2" },
         React.createElement(Select, { renderSingleValue: (value) => {
                 return (React.createElement(React.Fragment, null, typeOption.value === 'column-name' ? React.createElement(Icon, { name: "grid" }) : React.createElement(Icon, { name: "edit" })));
             }, value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) }),

package/src/components/ExpressionEditor/QueryBuilder/QueryPredicateBuilder.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Draggable, Droppable } from '../../dnd';
-import { Box, Flex } from 'rebass';
 import { isArgumentColumnOrField, isQlLogicalOperator, } from '../../../parser/src/predicate';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
 import { booleanExpressionFunctions } from '../../../Utilities/ExpressionFunctions/booleanExpressionFunctions';
@@ -11,9 +10,10 @@ import { Icon } from '../../icons';
 import SimpleButton from '../../SimpleButton';
 import { CombinatorSelector, ExpressionSelector, PrimitiveValueInput, PrimitiveColumnOrFieldSelector, PrimitiveMultiValueInput, } from './QueryBuilderInputs';
 import { getOperatorMatchingInputs as getFunctionMatchingInputTypes, mapExpressionToFieldValue, } from './utils';
+import { Box, Flex } from '../../Flex';
 const ITEM_HEIGHT = 40;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
-const Handle = (props) => (React.createElement(Flex, { className: `${BASE_CLASS_NAME}__handle`, height: ITEM_HEIGHT, alignItems: "center", mr: 1, ...props },
+const Handle = (props) => (React.createElement(Flex, { className: `${BASE_CLASS_NAME}__handle twa:mr-1`, style: { height: ITEM_HEIGHT }, alignItems: "center", ...props },
     React.createElement(Icon, { name: "drag" })));
 const QueryPredicateButtons = (props) => {
     return (React.createElement(React.Fragment, null,
@@ -39,14 +39,14 @@ const LogicalFunctionEditor = (props) => {
         return (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, className: className },
             React.createElement(Flex, null,
                 props.isRoot ? null : React.createElement(Handle, { ...handleProps }),
-                React.createElement(Flex, { flex: 1, alignItems: "center", height: ITEM_HEIGHT },
+                React.createElement(Flex, { className: "twa:flex-1", alignItems: "center", height: ITEM_HEIGHT },
                     React.createElement(CombinatorSelector, { value: props.predicate.operator, onChange: (combinator) => {
                             props.onChange({
                                 ...props.predicate,
                                 operator: combinator,
                             });
                         } }),
-                    React.createElement(Box, { flex: 1 }),
+                    React.createElement(Box, { className: "twa:flex-1" }),
                     React.createElement(QueryPredicateButtons, { hideDelete: props.isRoot, hideAdd: true, ...props }))),
             React.createElement(Box, { className: `${BASE_CLASS_NAME}__children-wrapper` },
                 props.predicate.args.map((arg, index) => {
@@ -142,15 +142,10 @@ const PrimitiveFunctionEditor = (props) => {
     }
     const level = props.id.split('/').length - 1;
     return (React.createElement(Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided) => {
-        return (React.createElement(Flex, { className: `
-              ${BASE_CLASS_NAME}
-              ${BASE_CLASS_NAME}-level-${level}
-              ${BASE_CLASS_NAME}-primitive
-              ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}
-            `, pb: 2, ref: provided.innerRef, ...provided.draggableProps, style: { ...provided.draggableProps.style, minHeight: ITEM_HEIGHT } },
+        return (React.createElement(Flex, { className: `twa:pb-2 ${BASE_CLASS_NAME} ${BASE_CLASS_NAME}-level-${level} ${BASE_CLASS_NAME}-primitive ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''} `, ref: provided.innerRef, ...provided.draggableProps, style: { ...provided.draggableProps.style, minHeight: ITEM_HEIGHT } },
             React.createElement(Handle, { ...provided.dragHandleProps }),
-            React.createElement(Flex, { alignItems: "center", height: ITEM_HEIGHT },
-                React.createElement(Box, { mr: 2 },
+            React.createElement(Flex, { alignItems: "center", style: { height: ITEM_HEIGHT } },
+                React.createElement(Box, { className: "twa:mr-2" },
                     React.createElement(PrimitiveColumnOrFieldSelector, { onChange: (colOrField) => {
                             props.onChange({
                                 ...props.predicate,
@@ -170,7 +165,7 @@ const PrimitiveFunctionEditor = (props) => {
                             args,
                         });
                     }, value: props.predicate.operator })),
-                React.createElement(Flex, { flex: 1, ml: 2 }, restOfFunctionInputDataTypes.map((type, index) => {
+                React.createElement(Flex, { className: "twa:flex-1 twa:ml-2" }, restOfFunctionInputDataTypes.map((type, index) => {
                     const key = type + index;
                     const commonProps = {
                         lefthandColumnIdParam: columnOrFieldId,
@@ -195,7 +190,7 @@ const PrimitiveFunctionEditor = (props) => {
                             });
                         } }));
                 }))),
-            React.createElement(Box, { flex: 1 }),
+            React.createElement(Box, { className: "twa:flex-1" }),
             React.createElement(QueryPredicateButtons, { ...props })));
     }));
 };

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

@@ -14,6 +14,7 @@ interface ExpressionEditorProps {
     namedQueries: NamedQuery[];
     allowSaveNamedQuery?: boolean;
     style?: React.CSSProperties;
+    className?: string;
     isFullExpression?: boolean;
     api: AdaptableApi;
     showQueryBuilder?: boolean;

package/src/components/ExpressionEditor/index.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { Box, Flex, Text } from 'rebass';
 import { AggregatedBooleanQueryDocsLink, AggregatedScalarQueryDocsLink, BooleanQueryDocsLink, CumulativeAggregatedScalarQueryDocsLink, ObservableQueryDocsLink, QuantileAggregatedScalarQueryDocsLink, ScalarQueryDocsLink, } from '../../Utilities/Constants/DocumentationLinkConstants';
 import { NamedQueryModuleId } from '../../Utilities/Constants/ModuleConstants';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
@@ -10,7 +9,6 @@ import { ButtonInfo } from '../../View/Components/Buttons/ButtonInfo';
 import { CheckBox } from '../CheckBox';
 import { CodeBlock } from '../CodeBlock';
 import HelpBlock from '../HelpBlock';
-import Panel from '../Panel';
 import { Tabs } from '../Tabs';
 import { DataTableEditor } from './DataTableEditor';
 import { ExpressionEditorContext } from './EditorContext';
@@ -20,6 +18,8 @@ import { ExpressionFunctionDocumentation } from './ExpressionFunctionDocumentati
 import { useNamedQueryContext } from './NamedQueryContext';
 import { NamedQueryEditor } from './NamedQueryEditor';
 import { QueryBuilder } from './QueryBuilder';
+import { Box, Flex } from '../Flex';
+import { twMerge } from '../../twMerge';
 export const baseClassName = `ab-ExpressionEditor`;
 export function ExpressionEditor(props) {
     const { type, module } = props;
@@ -53,7 +53,7 @@ export function ExpressionEditor(props) {
         props.api.internalApi
             .getModuleService()
             .getModuleById(NamedQueryModuleId)
-            .isModuleEditable() && (React.createElement(Flex, { flexDirection: "row", mb: 2, fontSize: 3 },
+            .isModuleEditable() && (React.createElement(Flex, { flexDirection: "row", className: "twa:mb-2 twa:text-3" },
         React.createElement(CheckBox, { checked: !!namedQuery, onChange: (checked) => {
                 if (checked) {
                     setNamedQuery({
@@ -64,38 +64,38 @@ export function ExpressionEditor(props) {
                 else {
                     setNamedQuery(false);
                 }
-            }, mr: 2, style: { alignItems: 'center' } }, "Save as new Named Query"),
-        namedQuery ? (React.createElement(AdaptableInput, { style: { flex: 1 }, onChange: (event) => {
+            }, className: "twa:mr-2 twa:items-center" }, "Save as new Named Query"),
+        namedQuery ? (React.createElement(AdaptableInput, { className: "twa:flex-1", onChange: (event) => {
                 const { target: { value }, } = event;
                 setNamedQuery({
                     Name: value,
                     BooleanExpression: expressionText,
                 });
             } })) : null));
-    const editorElement = (React.createElement(Flex, { className: baseClassName, flex: 1, "data-name": "expression-editor-wrapper", pl: 2, style: props.style },
-        React.createElement(Flex, { flex: 1, style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
+    const editorElement = (React.createElement(Flex, { className: twMerge(`${baseClassName} twa:flex-1 twa:pl-2 twa:overflow-auto`, props.className), "data-name": "expression-editor-wrapper", style: props.style },
+        React.createElement(Flex, { className: "twa:flex-1", style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
                 if (event.target.tagName === 'TEXTAREA') {
                     textAreaRef.current = event.target;
                 }
             } },
-            React.createElement(Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", fontSize: 2, style: { minHeight: 0 } },
-                React.createElement(Flex, { flex: 1, paddingRight: 2, style: { overflow: 'auto' }, "data-name": "expression-builder", flexDirection: "column" },
+            React.createElement(Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 } },
+                React.createElement(Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column" },
                     editorInput,
                     StringExtensions.IsNotNullOrEmpty(expressionText?.trim()) && (React.createElement(ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
                     /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
                     StringExtensions.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type),
-                    showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
-                        React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
+                    showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3" },
+                        React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }),
                         "See documentation for more details and examples")),
-                    React.createElement(Box, { flex: 1 }),
+                    React.createElement(Box, { className: "twa:flex-1" }),
                     showNamedQueryStuff && saveAsNamedQueryElement),
-                React.createElement(Box, { className: `${baseClassName}__sidebar`, "data-name": "expression-sidebar", pb: 2, paddingLeft: 2, pr: 2 },
-                    React.createElement(Panel, { bodyProps: { style: { height: '100%' } }, style: { height: '100%' } },
-                        React.createElement(Tabs, { style: { height: '100%' }, variant: "" },
+                React.createElement(Box, { className: `${baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar" },
+                    React.createElement(Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-defaultbackground twa:text-text-on-defaultbackground" },
+                        React.createElement(Tabs, { className: "twa:h-full" },
                             React.createElement(Tabs.Tab, { value: "column" }, "Columns"),
                             React.createElement(Tabs.Tab, { value: "field" }, "Fields"),
                             React.createElement(Tabs.Tab, { value: "named-query" }, "Named Queries"),
-                            React.createElement(Tabs.Content, { flex: 1, style: { height: '100%' } },
+                            React.createElement(Tabs.Content, { className: "twa:flex-1 twa:h-full" },
                                 React.createElement(DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
                                         label: column.friendlyName,
                                         value: column.columnId,
@@ -110,10 +110,10 @@ export function ExpressionEditor(props) {
                                     value: field.name,
                                     dataType: field.dataType,
                                     readOnly: true,
-                                })) })) : (React.createElement(Text, { p: 2 }, "No Data Fields provided"))),
+                                })) })) : (React.createElement(Box, { className: "twa:p-2" }, "No Data Fields provided"))),
                             React.createElement(Tabs.Content, null, ArrayExtensions.IsNullOrEmpty(props.namedQueries) ? (React.createElement("div", null,
-                                React.createElement(Text, { p: 2 }, "No Named Queries defined"),
-                                React.createElement(Text, { fontSize: 2, padding: 2, p: 2 },
+                                React.createElement(Box, { className: "twa:p-2" }, "No Named Queries defined"),
+                                React.createElement(Box, { className: "twa:text-2 twa:p-2" },
                                     "Named Queries are saved Expressions which can be referenced in other Expressions using the ",
                                     React.createElement("i", null, "QUERY"),
                                     " keyword",
@@ -167,19 +167,19 @@ export function ExpressionEditor(props) {
         } }, (() => {
         switch (true) {
             case showQueryBuilder && showExpressionEditor:
-                return (React.createElement(Tabs, { "data-name": "editor-selector-tabs", mb: 2, p: 2, minHeight: 0, flex: 1 },
+                return (React.createElement(Tabs, { "data-name": "editor-selector-tabs", className: "twa:mb-2 twa:p-2 twa:min-h-0 twa:flex-1" },
                     React.createElement(Tabs.Tab, { value: "editor" }, "Expression Editor"),
                     React.createElement(Tabs.Tab, { value: "ui" }, "Query Builder"),
                     React.createElement(Tabs.Content, null, editorElement),
                     React.createElement(Tabs.Content, null,
-                        React.createElement(Flex, { flexDirection: "column", height: "100%" },
+                        React.createElement(Flex, { flexDirection: "column", className: "twa:h-full" },
                             queryBuilderElement,
-                            React.createElement(Box, { flex: 1 }),
+                            React.createElement(Box, { className: "twa:flex-1" }),
                             showNamedQueryStuff && saveAsNamedQueryElement))));
             case showQueryBuilder:
-                return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" }, queryBuilderElement));
+                return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" }, queryBuilderElement));
             case showExpressionEditor:
-                return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" }, editorElement));
+                return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" }, editorElement));
             default:
                 return null;
         }
@@ -225,22 +225,17 @@ const renderQueryHints = (type) => {
             description: "The cumulative sum of all 'PnL' columns in the order given by the 'TradeDate' column",
         });
     }
-    return examples.length ? (React.createElement(Box, { "data-name": "expression-hints", my: 2, p: 2, style: {
-            background: 'var(--ab-color-primary)',
-            borderRadius: 'var(--ab__border-radius)',
-        } },
+    return examples.length ? (React.createElement(Box, { "data-name": "expression-hints", className: "twa:my-2 twa:p-2 twa:bg-primary twa:rounded-standard" },
         React.createElement(Box, null,
-            React.createElement(Text, { marginBottom: 2 },
+            React.createElement(Box, { className: "twa:mb-2" },
                 React.createElement("b", null, "Examples"),
                 " (click on each to see its explanation):"),
-            examples.map((example, index) => (React.createElement("details", { key: index, style: { marginBottom: 'var(--ab-space-2)' } },
-                React.createElement(Flex, { style: {
-                        borderRadius: 'var(--ab__border-radius)',
-                    }, marginRight: 2, marginBottom: 1, color: 'text-on-secondary', fontSize: 'var( --ab-font-size-2)', alignItems: "center", as: "summary" },
+            examples.map((example, index) => (React.createElement("details", { key: index, className: "twa:mb-2" },
+                React.createElement(Flex, { className: "twa:mr-2 twa:rounded-standard twa:mb-1 twa:text-2", alignItems: "center", as: "summary" },
                     React.createElement(CodeBlock, null,
                         " ",
                         example.code)),
-                React.createElement(Text, { fontSize: 2, marginLeft: 3, style: { fontStyle: 'italic' } }, example.description))))))) : null;
+                React.createElement(Box, { className: "twa:ml-3 twa:italic twa:text-2" }, example.description))))))) : null;
 };
 const queryDocumentationLinks = {
     boolean: BooleanQueryDocsLink,

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

@@ -1,4 +1,11 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
-declare const FieldWrap: (props: FlexProps) => React.JSX.Element;
+import { FlexProps } from '../Flex';
+declare const FieldWrap: (props: FlexProps & {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    children?: React.ReactNode;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+}) => React.JSX.Element;
 export default FieldWrap;

package/src/components/FieldWrap/index.js

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
-import join from '../utils/join';
-const defaulProps = {
-    flexDirection: 'row',
-    alignItems: 'center',
-};
+import { Flex } from '../Flex';
+import clsx from 'clsx';
 const FieldWrap = (props) => {
-    const flexProps = { ...defaulProps, ...props };
-    return React.createElement(Flex, { ...flexProps, className: join(props.className, 'ab-FieldWrap') });
+    return (React.createElement(Flex, { flexDirection: "row", alignItems: "center", ...props, className: clsx('ab-FieldWrap', props.className) }));
 };
 export default FieldWrap;

package/src/components/FileDroppable/FileDroppableState.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface FileDroppableState {
     dragOver: boolean;
     message?: React.ReactNode;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
-interface FileDroppableProps extends FlexProps {
+import { HTMLProps } from 'react';
+import { FlexProps } from '../Flex';
+interface FileDroppableProps extends FlexProps, HTMLProps<HTMLDivElement> {
     buttonText?: React.ReactNode;
     fileAccept?: string;
     icon?: React.ReactNode;