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

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseEditorInput = void 0;
+exports.BaseEditorInput = BaseEditorInput;
 const tslib_1 = require("tslib");
-const rebass_1 = require("rebass");
 const parser = tslib_1.__importStar(require("../../parser/src"));
 const React = tslib_1.__importStar(require("react"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../ErrorBox"));
@@ -23,6 +22,9 @@ const ExpressionFunctionDocumentation_1 = require("./ExpressionFunctionDocumenta
 const Tag_1 = require("../Tag");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const Radio_1 = tslib_1.__importDefault(require("../Radio"));
+const Flex_1 = require("../Flex");
+const AdaptableFormControlTextClear_1 = require("../../View/Components/Forms/AdaptableFormControlTextClear");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const filterableCategories = [
     'dates',
     'logical',
@@ -47,7 +49,7 @@ const getCategoryOrder = (category) => {
     };
     return predefinedOrder[category] || 0;
 };
-const VarEditorButton = () => {
+const VarEditorButton = ({ className }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const customQueryVariables = adaptable.api.optionsApi.getExpressionOptions()?.customQueryVariables;
     if (!customQueryVariables || Object.keys(customQueryVariables).length === 0) {
@@ -55,7 +57,7 @@ const VarEditorButton = () => {
     }
     return (React.createElement(React.Fragment, null, Object.keys(customQueryVariables).map((varOption) => {
         const varString = `VAR('${varOption}')`;
-        return (React.createElement(EditorButton_1.default, { data: varString, key: varOption }, varString));
+        return (React.createElement(EditorButton_1.default, { data: varString, key: varOption, className: className }, varString));
     })));
 };
 const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
@@ -111,54 +113,68 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
         dropdownRef.current.hide();
         setOverFunction(null);
     };
+    const [searchInputValue, setSearchInputValue] = React.useState('');
     /**
      * Hide when:
      * - mouse leaves
      * - a function is inserted
      */
-    return (React.createElement(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper`, flexDirection: "column", onMouseLeave: () => hidePopup() },
-            React.createElement(rebass_1.Flex, { pl: 2, style: { gap: 10 } }, categoryOptions.map((option, index) => {
+    return (React.createElement(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (React.createElement(Flex_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-defaultbackground twa:text-text-on-defaultbackground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup() },
+            React.createElement(Flex_1.Flex, { className: "twa:md:gap-3 twa:gap-2 twa:pb-2 twa:md:justify-between twa:justify-start twa:flex-wrap twa:border-b twa:border-primarydark/30 twa:mb-2" }, categoryOptions.map((option, index) => {
                 return (React.createElement(Radio_1.default, { key: option.value, onFocus: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                     }, onClick: handleFunctionCategoryChange(option.value), checked: currentFunctionCategory === option.value }, option.label));
             })),
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list`, "data-name": "expression-dropdown-functions-list", flexDirection: "column", p: 2, maxHeight: '50vh' }, orderedGroupNames
-                    .filter((groupName) => !!groupedFunctions[groupName])
-                    .map((groupName) => {
-                    const functionsInGroup = Object.keys(groupedFunctions[groupName]);
-                    if (functionsInGroup.length === 0) {
-                        return React.createElement(React.Fragment, { key: groupName });
-                    }
-                    const getEditorButtonData = (functionName) => {
-                        // handle special cases
-                        if (functionName === 'CASE') {
-                            return `CASE <caseValue> WHEN <whenValue> THEN <thenValue> ELSE <defaultValue> END`;
-                        }
-                        if (functionName === 'TRUE' || functionName === 'FALSE') {
-                            return functionName;
+            React.createElement(Flex_1.Flex, { className: "twa:gap-2 twa:max-h-[60vh]", flexDirection: "row" },
+                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:rounded-standard" },
+                    React.createElement(Flex_1.Box, null,
+                        React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { className: "twa:w-full", value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Functions" })),
+                    React.createElement(Flex_1.Flex, { className: `${baseClassName}__dropdown-functions-list twa:overflow-auto`, "data-name": "expression-dropdown-functions-list", flexDirection: "column" }, orderedGroupNames
+                        .filter((groupName) => !!groupedFunctions[groupName])
+                        .map((groupName) => {
+                        const functionsInGroup = Object.keys(groupedFunctions[groupName]);
+                        if (functionsInGroup.length === 0) {
+                            return React.createElement(React.Fragment, { key: groupName });
                         }
-                        if (functionName === 'IF') {
-                            return `<condition_expr> ? <consequent_expr> : <alternative_expr>`;
-                        }
-                        return `${functionName}()`;
-                    };
-                    return (React.createElement(rebass_1.Box, { mb: 2, key: groupName },
-                        React.createElement(Tag_1.Tag, { mb: 1 }, StringExtensions_1.default.Humanize(groupName)),
-                        functionsInGroup.map((functionName) => (React.createElement(rebass_1.Box, { key: functionName, onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup() }, functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton_1.default, { data: getEditorButtonData(functionName), key: functionName, mr: 1 }, functionName)))))));
-                })),
-                React.createElement(rebass_1.Box, { className: `${baseClassName}__dropdown-functions-description`, p: 2, width: 600, maxWidth: "30vw" }, overFunction ? (React.createElement(React.Fragment, null,
-                    React.createElement(Tag_1.Tag, null, overFunction),
-                    React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] }))) : (React.createElement(Tag_1.Tag, { padding: 20 },
+                        const getEditorButtonData = (functionName) => {
+                            // handle special cases
+                            if (functionName === 'CASE') {
+                                return `CASE <caseValue> WHEN <whenValue> THEN <thenValue> ELSE <defaultValue> END`;
+                            }
+                            if (functionName === 'TRUE' || functionName === 'FALSE') {
+                                return functionName;
+                            }
+                            if (functionName === 'IF') {
+                                return `<condition_expr> ? <consequent_expr> : <alternative_expr>`;
+                            }
+                            return `${functionName}()`;
+                        };
+                        const fns = functionsInGroup
+                            .map((functionName) => {
+                            if (searchInputValue &&
+                                !functionName.toLowerCase().includes(searchInputValue.toLowerCase())) {
+                                return null;
+                            }
+                            const buttonClassName = 'twa:mr-1 twa:hover:bg-accent twa:hover:text-accent-foreground';
+                            return (React.createElement(Flex_1.Box, { key: functionName, onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup() }, functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName, className: buttonClassName })) : (React.createElement(EditorButton_1.default, { data: getEditorButtonData(functionName), key: functionName, className: buttonClassName }, functionName))));
+                        })
+                            .filter(Boolean);
+                        return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), key: groupName },
+                            React.createElement(Tag_1.Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-text-on-primary twa:w-full" }, StringExtensions_1.default.Humanize(groupName)),
+                            fns));
+                    }))),
+                React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(`${baseClassName}__dropdown-functions-description `, `twa:flex-1 twa:p-2 twa:w-[600px] twa:max-w-[60vw]`, `twa:rounded-standard twa:shadow-sm twa:overflow-auto twa:h-auto`, 'twa:bg-primarylight twa:text-primary-foreground') }, overFunction ? (React.createElement(React.Fragment, null,
+                    React.createElement(Tag_1.Tag, { className: "twa:bg-accent twa:text-accent-foreground" }, overFunction),
+                    React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] }))) : (React.createElement(Flex_1.Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic" },
                     React.createElement("ul", null,
                         React.createElement("li", null,
                             "Hover over a Function to learn more",
                             React.createElement("br", null),
                             React.createElement("br", null)),
-                        React.createElement("li", null, "Select a Function to add to the Expression in the Editor")))))))) },
-        React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
-            React.createElement(rebass_1.Flex, { marginRight: 1, fontSize: 2 },
+                        React.createElement("li", null, "Click a Function to add it to the Expression in the Editor")))))))) },
+        React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1" },
+            React.createElement(Flex_1.Flex, { className: "twa:mr-1 twa:text-2" },
                 React.createElement(icons_1.Icon, { name: "equation" })))));
 };
 function BaseEditorInput(props) {
@@ -177,10 +193,10 @@ function BaseEditorInput(props) {
         }
         const parserExceptionDetails = e.message;
         return (React.createElement("details", null,
-            React.createElement(rebass_1.Flex, { marginBottom: 1, as: "summary" },
+            React.createElement(Flex_1.Flex, { className: "twa:mb-1", as: "summary" },
                 parserExceptionSummary,
                 React.createElement("i", null, " (click for more details)")),
-            React.createElement(rebass_1.Text, { marginLeft: 3, style: { fontStyle: 'italic' } }, parserExceptionDetails)));
+            React.createElement(Flex_1.Box, { className: "twa:ml-3 twa:italic" }, parserExceptionDetails)));
     };
     const testRowNode = (0, react_1.useMemo)(() => {
         const firstRowNode = props.api.gridApi.getFirstRowNode();
@@ -243,25 +259,25 @@ function BaseEditorInput(props) {
         .map((editorButtonDef) => (React.createElement(EditorButton_1.default, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName))));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { className: baseClassName, "data-name": "expression-toolbar", py: 2, mb: 2, mt: 2, flexWrap: "wrap" },
-            React.createElement(rebass_1.Flex, { style: { flex: 1, marginLeft: 5 }, flexWrap: "wrap" },
+        React.createElement(Flex_1.Flex, { "data-name": "expression-toolbar", className: `${baseClassName} twa:py-2 twa:mb-2 twa:mt-2 twa:flex-wrap twa:w-full` },
+            React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:ml-1 twa:flex-wrap" },
                 React.createElement(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }),
                 operatorButtons),
-            showDocumentationLink && (React.createElement(rebass_1.Flex, { alignItems: "flex-start" },
-                React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
+            showDocumentationLink && (React.createElement(Flex_1.Flex, { alignItems: "flex-start" },
+                React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
         React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: (0, join_1.default)('ab-ExpressionEditor__textarea', // left for backwards compatibility
-            `${baseClassName}__textarea`), autoFocus: true, spellCheck: "false", onChange: (event) => {
+            `${baseClassName}__textarea`, 'twa:w-full twa:min-h-[100px] twa:p-2 twa:text-4 twa:resize-y twa:font-mono'), autoFocus: true, spellCheck: "false", onChange: (event) => {
                 props.onChange(event.target.value);
             }, style: style }),
-        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 },
+        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { className: "twa:my-2 twa:p-2 twa:text-3" },
             "This Expression must resolve to a ",
             React.createElement("b", null, "boolean "),
             "(i.e. true / false) value")),
-        expressionError && (React.createElement(ErrorBox_1.default, { width: "100%", style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
-        evaluationError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
-        !props.hideResultPreview && result !== undefined && (React.createElement(rebass_1.Box, { className: `${baseClassName}__editor-feedback`, "data-name": "expression-editor-feedback", mt: 2, p: 2 },
-            React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } },
-                "Result (using Test Data): ",
-                React.createElement("b", null, JSON.stringify(result)))))));
+        expressionError && (React.createElement(ErrorBox_1.default, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full" }, expressionError)),
+        evaluationError && (React.createElement(ErrorBox_1.default, { className: "twa:mt-2 twa:whitespace-pre-wrap" }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
+        !props.hideResultPreview && result !== undefined && (React.createElement(Flex_1.Box, { className: `${baseClassName}__editor-feedback twa:mt-2 twa:p-2 twa:rounded-standard`, "data-name": "expression-editor-feedback" },
+            React.createElement("pre", { className: "twa:whitespace-pre-wrap twa:m-0" },
+                "Result (using test data):",
+                ' ',
+                React.createElement("b", { className: "twa:bg-accentlight twa:text-accent twa:rounded-full twa:p-1 twa:px-2" }, JSON.stringify(result)))))));
 }
-exports.BaseEditorInput = BaseEditorInput;

package/src/components/ExpressionEditor/DataTableEditor.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const _1 = require(".");
 const CheckBox_1 = require("../CheckBox");
 const AdaptableFormControlTextClear_1 = require("../../View/Components/Forms/AdaptableFormControlTextClear");
@@ -13,6 +12,7 @@ const Input_1 = tslib_1.__importDefault(require("../Input"));
 const DateHelper_1 = require("../../Utilities/Helpers/DateHelper");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
+const Flex_1 = require("../Flex");
 const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'column', labels, }) => {
     const adaptableApi = (0, AdaptableContext_1.useAdaptable)().api;
     const [data, setData] = React.useState(initialData);
@@ -34,8 +34,8 @@ const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'col
     const hasFriendlyNames = React.useMemo(() => {
         return fields.some((field) => field.label !== field.value);
     }, []);
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, style: { height: '100%' } },
-        React.createElement(rebass_1.Flex, { className: `${_1.baseClassName}__${type}-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 }, mb: 2 },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, className: "twa:h-full" },
+        React.createElement(Flex_1.Flex, { className: `${_1.baseClassName}__${type}-list twa:mb-2 twa:mt-[2px]`, flexDirection: "column", alignItems: "flex-start" },
             hasFriendlyNames && (React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
                     float: 'right',
                     margin: 0,
@@ -52,14 +52,10 @@ const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'col
         })
             .map((field) => {
             const label = showColumnIds ? `[${field.value}]` : field.label;
-            return (React.createElement(FormLayout_1.FormRow, { key: field.label, label: React.createElement(EditorButton_1.default, { 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(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, label)) }, field.dataType === 'number' ? (React.createElement(Input_1.default, { 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_1.default, { 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_1.default, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: getColDateValue(field.value) ?? '', onChange: (e) => {
+            return (React.createElement(FormLayout_1.FormRow, { key: field.label, label: React.createElement(EditorButton_1.default, { 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_1.Flex, { flexDirection: "column", alignItems: "flex-start" }, label)) }, field.dataType === 'number' ? (React.createElement(Input_1.default, { 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_1.default, { 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_1.default, { 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_1.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_1.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));
         }))));
 };
 exports.DataTableEditor = DataTableEditor;

package/src/components/ExpressionEditor/EditorButton.js

@@ -34,8 +34,6 @@ function EditorButton(props) {
             catch (err) {
                 console.error(err);
             }
-        }, style: {
-            cursor: 'grab',
         }, ...buttonProps }));
 }
 exports.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

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const BaseEditorInput_1 = require("./BaseEditorInput");
-const rebass_1 = require("rebass");
 const editorButtonsSearch_1 = require("./editorButtonsSearch");
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
@@ -12,6 +11,7 @@ const editorButtonsObservable_1 = require("./editorButtonsObservable");
 const CheckBox_1 = require("../CheckBox");
 const EditorContext_1 = require("./EditorContext");
 const editorButtonsAggregatedBoolean_1 = require("./editorButtonsAggregatedBoolean");
+const Flex_1 = require("../Flex");
 function EditorInputWithWhereClause(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
@@ -48,19 +48,19 @@ function EditorInputWithWhereClause(props) {
     const { setSelectedFunction } = (0, EditorContext_1.useExpressionEditor)();
     const [showWhereClause, setShowWhereClause] = (0, react_1.useState)((0, StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace)(whereClauseValue));
     const queryName = `${(0, StringExtensions_1.CapitaliseFirstLetter)(props.type)}Query`;
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start" },
         React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: props.type === 'observable' ? editorButtonsObservable_1.editorButtonsObservable : editorButtonsAggregatedBoolean_1.editorButtonsAggregatedBoolean, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }),
-        React.createElement(rebass_1.Text, { fontSize: 2, marginTop: 2, pl: 3 },
+        React.createElement(Flex_1.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_1.CheckBox, { disabled: (0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(reactiveValue), checked: showWhereClause, style: { alignItems: 'center' }, onChange: (checked) => {
+        React.createElement(CheckBox_1.CheckBox, { disabled: (0, StringExtensions_1.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_1.BaseEditorInput, { type: 'secondary', disabled: (0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))));
 }
 exports.default = EditorInputWithWhereClause;

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -2,25 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpressionFunctionDocumentation = void 0;
 const tslib_1 = require("tslib");
-const rebass_1 = require("rebass");
 const React = tslib_1.__importStar(require("react"));
 const Tag_1 = require("../Tag");
+const Flex_1 = require("../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';
 const ExpressionFunctionDocumentation = (props) => {
-    return props.expressionFunction ? (React.createElement(rebass_1.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(rebass_1.Box, { mb: 3, style: { fontWeight: 'bold', whiteSpace: 'pre-wrap' }, "data-name": "expression-editor-documentation-description" }, props.expressionFunction.description)),
-        props.expressionFunction.signatures && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-signatures" },
+    return props.expressionFunction ? (React.createElement(Flex_1.Box, { "data-name": "expression-editor-documentation", className: "twa:my-2 twa:p-2 twa:rounded-standard twa:leading-normal" },
+        props.expressionFunction.description && (React.createElement(Flex_1.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(Flex_1.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))))))),
-        props.expressionFunction.examples && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-examples" },
+            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(Flex_1.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))))))),
-        props.expressionFunction.returnType && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-examples" },
+            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(Flex_1.Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Return Type"),
-            React.createElement(Tag_1.Tag, null, props.expressionFunction.returnType))))) : null;
+            React.createElement(Tag_1.Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full" }, props.expressionFunction.returnType))))) : null;
 };
 exports.ExpressionFunctionDocumentation = ExpressionFunctionDocumentation;

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

@@ -3,32 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NamedQueryEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
 const CheckBox_1 = require("../CheckBox");
 const EditorButton_1 = tslib_1.__importDefault(require("./EditorButton"));
+const Flex_1 = require("../Flex");
 const NamedQueryEditor = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [showColumnIds, setShowColumnIds] = React.useState(false);
     const [inlineQuery, setInlineQuery] = React.useState(false);
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", className: "twa:mt-[2px]" },
         React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked) }, "Show Column IDs"),
         React.createElement(CheckBox_1.CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked) }, "Inline Query"),
-        props.namedQueries.map((namedQuery) => (React.createElement(rebass_1.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_1.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_1.default, { 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(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
-            React.createElement(rebass_1.Flex, { alignItems: "start", style: {
-                    padding: 5,
-                } }, showColumnIds
+            React.createElement(EditorButton_1.default, { 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_1.Flex, { flexDirection: "column", alignItems: "flex-start" }, namedQuery.Name)),
+            React.createElement(Flex_1.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,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QueryBuilder = exports.useQueryBuilderContext = void 0;
+exports.QueryBuilder = void 0;
+exports.useQueryBuilderContext = useQueryBuilderContext;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../../dnd");
-const rebass_1 = require("rebass");
 const predicate_1 = require("../../../parser/src/predicate");
 const mapQlPredicateToExpression_1 = require("../../../parser/src/predicate/mapQlPredicateToExpression");
 const AdaptableContext_1 = require("../../../View/AdaptableContext");
@@ -15,6 +15,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../SimpleButton"));
 const WarningBox_1 = require("../../WarningBox");
 const QueryPredicateBuilder_1 = require("./QueryPredicateBuilder");
 const utils_1 = require("./utils");
+const Flex_1 = require("../../Flex");
 const QUERY_BUILDER_CLASSNAME = 'ab-QueryBuilder';
 const QueryBuilderContext = React.createContext(null);
 function useQueryBuilderContext() {
@@ -24,7 +25,6 @@ function useQueryBuilderContext() {
     }
     return context;
 }
-exports.useQueryBuilderContext = useQueryBuilderContext;
 const QueryBuilder = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [qlPredicate, setQlPredicate] = React.useState(() => {
@@ -77,13 +77,13 @@ const QueryBuilder = (props) => {
     let errorOrEditor = null;
     if (qlPredicate && 'errorMessage' in qlPredicate) {
         errorOrEditor = props.query?.includes?.('QUERY') ? (React.createElement(WarningBox_1.WarningBox, { "data-name": "unsupported-query-warning" },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
+            React.createElement(Flex_1.Flex, { alignItems: "center" },
                 "Named Queries are not supported in the Query Builder",
-                React.createElement(rebass_1.Box, { flex: 1 }),
+                React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
                 clearExpressionButton))) : (React.createElement(ErrorBox_1.default, null,
-            React.createElement(rebass_1.Flex, null,
+            React.createElement(Flex_1.Flex, null,
                 qlPredicate.errorMessage,
-                React.createElement(rebass_1.Box, { flex: 1 }),
+                React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
                 clearExpressionButton)));
     }
     else if (unsupportedExpressionFunction) {
@@ -114,10 +114,10 @@ const QueryBuilder = (props) => {
             handleQlPredicateChange(predicate);
         } },
         React.createElement(QueryBuilderContext.Provider, { value: context },
-            React.createElement(rebass_1.Box, { className: QUERY_BUILDER_CLASSNAME },
-                React.createElement(HelpBlock_1.default, { "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(Flex_1.Box, { className: QUERY_BUILDER_CLASSNAME },
+                React.createElement(HelpBlock_1.default, { "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_1.default, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", mt: 3 },
-                    React.createElement(rebass_1.Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression`, minHeight: 48, my: 2, p: 3 }, expressionStr || 'Output Expression will display here'))))));
+                React.createElement(Panel_1.default, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", className: "twa:mt-3" },
+                    React.createElement(Flex_1.Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression twa:min-h-[48px] twa:my-2 twa:p-3` }, expressionStr || 'Output Expression will display here'))))));
 };
 exports.QueryBuilder = QueryBuilder;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CombinatorSelector = exports.ExpressionSelector = exports.PrimitiveMultiValueInput = exports.PrimitiveValueInput = exports.PrimitiveColumnOrFieldSelector = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const rebass_1 = require("rebass");
 const mapQlPredicateToExpression_1 = require("../../../parser/src/predicate/mapQlPredicateToExpression");
 const adaptableQlUtils_1 = require("../../../Utilities/adaptableQlUtils");
 const AdaptableContext_1 = require("../../../View/AdaptableContext");
@@ -18,6 +17,7 @@ const InputGroup_1 = require("../../InputGroup");
 const Select_1 = require("../../Select");
 const QueryBuilder_1 = require("./QueryBuilder");
 const utils_1 = require("./utils");
+const Flex_1 = require("../../Flex");
 const PrimitiveColumnOrFieldSelector = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [type, setType] = react_1.default.useState(() => {
@@ -44,21 +44,21 @@ const PrimitiveColumnOrFieldSelector = (props) => {
     }
     const typeOptions = [
         {
-            label: (react_1.default.createElement(rebass_1.Flex, { alignItems: "center" },
+            label: (react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
                 react_1.default.createElement(icons_1.Icon, { name: "grid" }),
-                react_1.default.createElement(rebass_1.Text, { ml: 2 }, "Column"))),
+                react_1.default.createElement(Flex_1.Box, { className: "twa:ml-2" }, "Column"))),
             value: 'column',
             icon: 'grid',
         },
         {
-            label: (react_1.default.createElement(rebass_1.Flex, { alignItems: "center" },
+            label: (react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
                 react_1.default.createElement(icons_1.Icon, { name: "column-outline" }),
-                react_1.default.createElement(rebass_1.Text, { ml: 2 }, "Field"))),
+                react_1.default.createElement(Flex_1.Box, { className: "twa:ml-2" }, "Field"))),
             value: 'field',
             icon: 'column-outline',
         },
     ];
-    return !hasFieldsOrValueIsField || props.hideFields ? (react_1.default.createElement(rebass_1.Box, null, input)) : (react_1.default.createElement(InputGroup_1.InputGroup, { Component: rebass_1.Flex, "data-id": "query-first-arg-wrapper" },
+    return !hasFieldsOrValueIsField || props.hideFields ? (react_1.default.createElement(Flex_1.Box, null, input)) : (react_1.default.createElement(InputGroup_1.InputGroup, { Component: Flex_1.Flex, "data-id": "query-first-arg-wrapper" },
         react_1.default.createElement(Select_1.Select, { renderSingleValue: (value) => {
                 return react_1.default.createElement(react_1.default.Fragment, null, type === 'column' ? react_1.default.createElement(icons_1.Icon, { name: "grid" }) : react_1.default.createElement(icons_1.Icon, { name: "column-outline" }));
             }, value: type, options: typeOptions, onChange: (value) => {
@@ -144,31 +144,31 @@ const PrimitiveValueInput = (props) => {
     }
     const options = [
         {
-            label: (react_1.default.createElement(rebass_1.Flex, { alignItems: "center" },
+            label: (react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
                 react_1.default.createElement(icons_1.Icon, { name: "columns" }),
-                react_1.default.createElement(rebass_1.Text, { ml: 2 }, "Column"))),
+                react_1.default.createElement(Flex_1.Box, { className: "twa:ml-2" }, "Column"))),
             icon: 'columns',
             value: 'column-name',
         },
         {
-            label: (react_1.default.createElement(rebass_1.Flex, { alignItems: "center" },
+            label: (react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
                 react_1.default.createElement(icons_1.Icon, { name: "edit" }),
-                react_1.default.createElement(rebass_1.Text, { ml: 2 }, "Value"))),
+                react_1.default.createElement(Flex_1.Box, { className: "twa:ml-2" }, "Value"))),
             icon: 'edit',
             value: 'input-value',
         },
     ];
     if (hasFieldsOrValueIsField || type === 'field') {
         options.push({
-            label: (react_1.default.createElement(rebass_1.Flex, { alignItems: "center" },
+            label: (react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
                 react_1.default.createElement(icons_1.Icon, { name: "column-outline" }),
-                react_1.default.createElement(rebass_1.Text, { ml: 2 }, "Field"))),
+                react_1.default.createElement(Flex_1.Box, { className: "twa:ml-2" }, "Field"))),
             icon: 'column-outline',
             value: 'field',
         });
     }
     const typeOption = options.find((option) => option.value === type);
-    return (react_1.default.createElement(InputGroup_1.InputGroup, { Component: rebass_1.Flex, "data-id": "query-input-wrapper", mr: 2 },
+    return (react_1.default.createElement(InputGroup_1.InputGroup, { Component: Flex_1.Flex, "data-id": "query-input-wrapper", className: "twa:mr-2" },
         react_1.default.createElement(Select_1.Select, { renderSingleValue: (value) => {
                 return (react_1.default.createElement(react_1.default.Fragment, null, typeOption.value === 'column-name' ? react_1.default.createElement(icons_1.Icon, { name: "grid" }) : react_1.default.createElement(icons_1.Icon, { name: "edit" })));
             }, value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) }),