@adaptabletools/adaptable-cjs 22.1.1-canary.1 → 23.0.0-canary.0

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseEditorInput = BaseEditorInput;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const parser = tslib_1.__importStar(require("../../parser/src"));
 const React = tslib_1.__importStar(require("react"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../ErrorBox"));
@@ -53,12 +54,12 @@ const VarEditorButton = ({ className }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const customQueryVariables = adaptable.api.optionsApi.getExpressionOptions()?.customQueryVariables;
     if (!customQueryVariables || Object.keys(customQueryVariables).length === 0) {
-        return React.createElement(React.Fragment, null);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
-    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, className: className }, varString));
-    })));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.keys(customQueryVariables).map((varOption) => {
+            const varString = `VAR('${varOption}')`;
+            return ((0, jsx_runtime_1.jsx)(EditorButton_1.default, { data: varString, className: className, children: varString }, varOption));
+        }) }));
 };
 const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
     const [currentFunctionCategory, setCurrentFunctionCategory] = React.useState('all');
@@ -119,63 +120,43 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
      * - mouse leaves
      * - a function is inserted
      */
-    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(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 });
-                        }
-                        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, "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" })))));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-defaultbackground twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", onMouseLeave: () => hidePopup(), children: [(0, jsx_runtime_1.jsx)(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", children: categoryOptions.map((option, index) => {
+                        return ((0, jsx_runtime_1.jsx)(Radio_1.default, { onFocus: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }, onClick: handleFunctionCategoryChange(option.value), checked: currentFunctionCategory === option.value, children: option.label }, option.value));
+                    }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:gap-2 twa:max-h-[60vh]", flexDirection: "row", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:rounded-standard", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { className: "twa:w-full", value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Functions" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: `${baseClassName}__dropdown-functions-list twa:overflow-auto`, "data-name": "expression-dropdown-functions-list", flexDirection: "column", children: orderedGroupNames
+                                        .filter((groupName) => !!groupedFunctions[groupName])
+                                        .map((groupName) => {
+                                        const functionsInGroup = Object.keys(groupedFunctions[groupName]);
+                                        if (functionsInGroup.length === 0) {
+                                            return (0, jsx_runtime_1.jsx)(React.Fragment, {}, 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;
+                                            }
+                                            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 ((0, jsx_runtime_1.jsx)(Flex_1.Box, { onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup(), children: functionName === 'VAR' ? ((0, jsx_runtime_1.jsx)(VarEditorButton, { className: buttonClassName }, functionName)) : ((0, jsx_runtime_1.jsx)(EditorButton_1.default, { data: getEditorButtonData(functionName), className: buttonClassName, children: functionName }, functionName)) }, functionName));
+                                        })
+                                            .filter(Boolean);
+                                        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:mb-2 twa:mx-1', fns.length === 0 ? 'twa:hidden' : ''), children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-text-on-primary twa:w-full", children: StringExtensions_1.default.Humanize(groupName) }), fns] }, groupName));
+                                    }) })] }), (0, jsx_runtime_1.jsx)(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'), children: overFunction ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:bg-accent twa:text-accent-foreground", children: overFunction }), (0, jsx_runtime_1.jsx)(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:size-full twa:items-center twa:justify-center twa:text-2 twa:italic", children: (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: ["Hover over a Function to learn more", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)("li", { children: "Click a Function to add it to the Expression in the Editor" })] }) })) })] })] })), children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mr-1 twa:text-2", children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "equation" }) }) }) }));
 };
 function BaseEditorInput(props) {
     const { expressionFunctions, testData, style, type } = props;
@@ -192,11 +173,7 @@ function BaseEditorInput(props) {
             return parserExceptionSummary;
         }
         const parserExceptionDetails = e.message;
-        return (React.createElement("details", null,
-            React.createElement(Flex_1.Flex, { className: "twa:mb-1", as: "summary" },
-                parserExceptionSummary,
-                React.createElement("i", null, " (click for more details)")),
-            React.createElement(Flex_1.Box, { className: "twa:ml-3 twa:italic" }, parserExceptionDetails)));
+        return ((0, jsx_runtime_1.jsxs)("details", { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mb-1", as: "summary", children: [parserExceptionSummary, (0, jsx_runtime_1.jsx)("i", { children: " (click for more details)" })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-3 twa:italic", children: parserExceptionDetails })] }));
     };
     const testRowNode = (0, react_1.useMemo)(() => {
         const firstRowNode = props.api.gridApi.getFirstRowNode();
@@ -260,28 +237,10 @@ function BaseEditorInput(props) {
     }, [selectedFunctionName]);
     const operatorButtons = props.editorButtons
         .filter((editorButtonDef) => !!expressionFunctions[editorButtonDef.functionName])
-        .map((editorButtonDef) => (React.createElement(EditorButton_1.default, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName))));
+        .map((editorButtonDef) => ((0, jsx_runtime_1.jsx)(EditorButton_1.default, { data: editorButtonDef.data, icon: editorButtonDef.icon, children: !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName) }, `${editorButtonDef.functionName}-operator`)));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(React.Fragment, null,
-        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(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`, '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, { 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, { 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)))))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "expression-toolbar", className: `${baseClassName} twa:py-2 twa:mb-2 twa:mt-2 twa:flex-wrap twa:w-full`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:ml-1 twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }), operatorButtons] }), showDocumentationLink && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "flex-start", children: (0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') }) }))] }), (0, jsx_runtime_1.jsx)(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`, '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 && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:p-2 twa:text-3", children: ["This Expression must resolve to a ", (0, jsx_runtime_1.jsx)("b", { children: "boolean " }), "(i.e. true / false) value"] })), expressionError && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full", children: expressionError })), evaluationError && ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2 twa:whitespace-pre-wrap", children: `${evaluationError.expressionFnName} ${evaluationError.message}` })), !props.hideResultPreview && result !== undefined && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__editor-feedback twa:mt-2 twa:p-2 twa:rounded-standard`, "data-name": "expression-editor-feedback", children: (0, jsx_runtime_1.jsxs)("pre", { className: "twa:whitespace-pre-wrap twa:m-0", children: ["Result (using test data):", ' ', (0, jsx_runtime_1.jsx)("b", { className: "twa:bg-accentlight twa:text-accent twa:rounded-full twa:p-1 twa:px-2", children: JSON.stringify(result) })] }) }))] }));
 }

package/src/components/ExpressionEditor/DataTableEditor.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableEditor = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const _1 = require(".");
 const CheckBox_1 = require("../CheckBox");
@@ -34,28 +35,23 @@ const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'col
     const hasFriendlyNames = React.useMemo(() => {
         return fields.some((field) => field.label !== field.value);
     }, []);
-    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,
-                    paddingTop: 'var(--ab-base-space)',
-                    paddingBottom: 'var(--ab-base-space)',
-                } }, labels?.showIds ?? 'Show Column IDs')),
-            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: labels?.filterPlaceholder ?? 'Filter columns...', style: { flex: 1, marginBottom: 3 } })),
-        React.createElement(FormLayout_1.default, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-base-space)", gridRowGap: "var(--ab-base-space)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
-            .filter((field) => {
-            if (!searchInputValue) {
-                return true;
-            }
-            return (field.label.includes(searchInputValue) || field.value?.includes?.(searchInputValue));
-        })
-            .map((field) => {
-            const label = showColumnIds ? `[${field.value}]` : field.label;
-            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)));
-                }, 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));
-        }))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, className: "twa:h-full", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${_1.baseClassName}__${type}-list twa:mb-2 twa:mt-[2px]`, flexDirection: "column", alignItems: "flex-start", children: [hasFriendlyNames && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
+                            float: 'right',
+                            margin: 0,
+                            paddingTop: 'var(--ab-base-space)',
+                            paddingBottom: 'var(--ab-base-space)',
+                        }, children: labels?.showIds ?? 'Show Column IDs' })), (0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: labels?.filterPlaceholder ?? 'Filter columns...', style: { flex: 1, marginBottom: 3 } })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-base-space)", gridRowGap: "var(--ab-base-space)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' }, children: fields
+                    .filter((field) => {
+                    if (!searchInputValue) {
+                        return true;
+                    }
+                    return (field.label.includes(searchInputValue) || field.value?.includes?.(searchInputValue));
+                })
+                    .map((field) => {
+                    const label = showColumnIds ? `[${field.value}]` : field.label;
+                    return ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: (0, jsx_runtime_1.jsx)(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", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", children: label }) }), children: field.dataType === 'number' ? ((0, jsx_runtime_1.jsx)(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' ? ((0, jsx_runtime_1.jsx)(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' ? ((0, jsx_runtime_1.jsx)(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)));
+                            }, className: "twa:w-full", disabled: field.readOnly })) : field.dataType === 'boolean' ? ((0, jsx_runtime_1.jsx)(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 }, field.label));
+                }) })] }));
 };
 exports.DataTableEditor = DataTableEditor;

package/src/components/ExpressionEditor/EditorButton.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const EditorContext_1 = require("./EditorContext");
 let dragImage;
@@ -9,7 +9,7 @@ const DRAG_IMAGE_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQ
 function EditorButton(props) {
     const { data, ...buttonProps } = props;
     const { textAreaRef } = (0, EditorContext_1.useExpressionEditor)();
-    return (React.createElement(SimpleButton_1.default, { "data-name": 'operator-or-fn', variant: "text", draggable: true, onDragStart: (event) => {
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": 'operator-or-fn', variant: "text", draggable: true, onDragStart: (event) => {
             if (!dragImage) {
                 // we want to lazy init the image since otherwise it fails in SSR environments if it is declared outside the cmp - ReferenceError: Image is not defined
                 dragImage = new Image(0, 0);

package/src/components/ExpressionEditor/EditorInput.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const BaseEditorInput_1 = require("./BaseEditorInput");
 const editorButtonsSearch_1 = require("./editorButtonsSearch");
@@ -80,7 +79,7 @@ function EditorInput(props) {
             queryName = "Create a Quantile Expression";
             break;
     }
-    return (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: props.value, placeholder: queryName, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
+    return ((0, jsx_runtime_1.jsx)(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: props.value, placeholder: queryName, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
             ? editorButtonsAggregatedScalar_1.editorButtonsAggregatedScalar
             : props.type === 'cumulativeAggregatedScalar'
                 ? editorButtonsCumulativeAggregatedScalar_1.editorButtonsCumulativeAggregatedScalar

package/src/components/ExpressionEditor/EditorInputWithWhereClause.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const BaseEditorInput_1 = require("./BaseEditorInput");
 const editorButtonsSearch_1 = require("./editorButtonsSearch");
@@ -48,19 +48,12 @@ 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(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(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, onChange: (checked) => {
-                setShowWhereClause(checked);
-                if (!checked) {
-                    // reset whereClause value if textarea is hidden
-                    updateWhereClauseValue(null);
-                }
-            }, 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' } }))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", children: [(0, jsx_runtime_1.jsx)(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' } }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:mt-2 twa:pl-3", children: ["Add a ", (0, jsx_runtime_1.jsx)("i", { children: "WHERE" }), " Clause to narrow the scope of the Query"] }), (0, jsx_runtime_1.jsx)(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);
+                    }
+                }, className: "twa:pl-3 twa:items-center", children: "WHERE" }), showWhereClause && ((0, jsx_runtime_1.jsx)(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

@@ -1,24 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpressionFunctionDocumentation = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 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(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", { 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", { 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, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full twa:py-1" }, props.expressionFunction.returnType))))) : null;
+    return props.expressionFunction ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": "expression-editor-documentation", className: "twa:my-2 twa:p-2 twa:rounded-standard twa:leading-normal", children: [props.expressionFunction.description && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-3 twa:font-bold twa:whitespace-pre-wrap", "data-name": "expression-editor-documentation-description", children: props.expressionFunction.description })), props.expressionFunction.signatures && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": "expression-editor-documentation-signatures", children: [(0, jsx_runtime_1.jsx)("b", { children: "Signatures" }), (0, jsx_runtime_1.jsx)("ul", { className: "twa:flex twa:flex-col twa:gap-1", children: props.expressionFunction.signatures.map((signature, index) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("pre", { className: signatureClassName, children: signature }) }, index))) })] })), props.expressionFunction.examples && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": "expression-editor-documentation-examples", children: [(0, jsx_runtime_1.jsx)("b", { children: "Examples" }), (0, jsx_runtime_1.jsx)("ul", { className: "twa:flex twa:flex-col twa:gap-1", children: props.expressionFunction.examples.map((example, index) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("pre", { className: signatureClassName, children: example }) }, index))) })] })), props.expressionFunction.returnType && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { "data-name": "expression-editor-documentation-examples", children: [(0, jsx_runtime_1.jsx)("b", { children: "Return Type" }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full twa:py-1", children: props.expressionFunction.returnType })] }))] })) : null;
 };
 exports.ExpressionFunctionDocumentation = ExpressionFunctionDocumentation;

package/src/components/ExpressionEditor/ExpressionPreview.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpressionPreview = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../View/AdaptableContext");
 const ExpressionPreview = (props) => {
     const adaptableApi = (0, AdaptableContext_1.useAdaptable)().api;
     const displayColumnFriendlyNames = adaptableApi.optionsApi.getExpressionOptions()?.displayColumnFriendlyNamesForExpressions;
     if (!displayColumnFriendlyNames) {
-        return React.createElement(React.Fragment, null, adaptableApi.expressionApi.getAdaptableQueryExpression(props.query));
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: adaptableApi.expressionApi.getAdaptableQueryExpression(props.query) });
     }
     const expressionWithFriendlyNames = adaptableApi.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(props.query);
     // '[Column Name] > 2' => ['[Column Name]', '>', '2']
@@ -21,10 +22,10 @@ const ExpressionPreview = (props) => {
          *
          * The div allows the text to flow normally.
          */
-        (React.createElement("div", null, strWithMarkedGroupes.map((part, index) => {
-            const partEl = part.includes('[') ? React.createElement("i", null, part.replace(/[\[\]]/g, '')) : part;
-            return React.createElement(React.Fragment, { key: index }, partEl);
-        })))
+        ((0, jsx_runtime_1.jsx)("div", { children: strWithMarkedGroupes.map((part, index) => {
+                const partEl = part.includes('[') ? (0, jsx_runtime_1.jsx)("i", { children: part.replace(/[\[\]]/g, '') }) : part;
+                return (0, jsx_runtime_1.jsx)(React.Fragment, { children: partEl }, index);
+            }) }))
     );
 };
 exports.ExpressionPreview = ExpressionPreview;

package/src/components/ExpressionEditor/NamedQueryEditor.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NamedQueryEditor = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../View/AdaptableContext");
 const CheckBox_1 = require("../CheckBox");
@@ -11,15 +12,8 @@ const NamedQueryEditor = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [showColumnIds, setShowColumnIds] = React.useState(false);
     const [inlineQuery, setInlineQuery] = React.useState(false);
-    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(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, { 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)))))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", className: "twa:mt-[2px]", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), children: "Show Column IDs" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked), children: "Inline Query" }), props.namedQueries.map((namedQuery) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", className: "twa:p-1 twa:my-2 twa:w-full twa:bg-primarylight", children: [' ', (0, jsx_runtime_1.jsx)(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", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", children: namedQuery.Name }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "flex-start", className: "twa:p-1", children: showColumnIds
+                            ? namedQuery.BooleanExpression
+                            : adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery) })] }, namedQuery.Uuid)))] }));
 };
 exports.NamedQueryEditor = NamedQueryEditor;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.QueryBuilder = void 0;
 exports.useQueryBuilderContext = useQueryBuilderContext;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../../dnd");
 const predicate_1 = require("../../../parser/src/predicate");
@@ -55,7 +56,7 @@ const QueryBuilder = (props) => {
         delete booleanExpressionsWithoutCombinators.AND;
         delete booleanExpressionsWithoutCombinators.OR;
         return booleanExpressionsWithoutCombinators;
-    }, []);
+    }, [adaptable.api.internalApi, props.module]);
     const context = React.useMemo(() => {
         return {
             getColumns: props.getColumns,
@@ -67,30 +68,22 @@ const QueryBuilder = (props) => {
             },
             onQlPredicateChange: handleQlPredicateChange,
         };
-    }, []);
-    const clearExpressionButton = (React.createElement(SimpleButton_1.default, { onClick: () => {
+    }, [props.getColumns, props.getFields, booleanExpressions, handleQlPredicateChange]);
+    const clearExpressionButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => {
             clearExpression();
-        } }, "Clear Expression"));
+        }, children: "Clear Expression" }));
     const unsupportedExpressionFunction = (0, utils_1.getUnsuportedExpressionFromQlPredicate)(qlPredicate, {
         supportedFields: props.getFields(),
     });
     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(Flex_1.Flex, { alignItems: "center" },
-                "Named Queries are not supported in the Query Builder",
-                React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-                clearExpressionButton))) : (React.createElement(ErrorBox_1.default, null,
-            React.createElement(Flex_1.Flex, null,
-                qlPredicate.errorMessage,
-                React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-                clearExpressionButton)));
+        errorOrEditor = props.query?.includes?.('QUERY') ? ((0, jsx_runtime_1.jsx)(WarningBox_1.WarningBox, { "data-name": "unsupported-query-warning", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: ["Named Queries are not supported in the Query Builder", (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), clearExpressionButton] }) })) : ((0, jsx_runtime_1.jsx)(ErrorBox_1.default, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [qlPredicate.errorMessage, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), clearExpressionButton] }) }));
     }
     else if (unsupportedExpressionFunction) {
-        errorOrEditor = (React.createElement(WarningBox_1.WarningBox, { "data-name": "unsupported-expression-warning" }, unsupportedExpressionFunction));
+        errorOrEditor = ((0, jsx_runtime_1.jsx)(WarningBox_1.WarningBox, { "data-name": "unsupported-expression-warning", children: unsupportedExpressionFunction }));
     }
     else if (qlPredicate && !('errorMessage' in qlPredicate)) {
-        errorOrEditor = (React.createElement(QueryPredicateBuilder_1.QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
+        errorOrEditor = ((0, jsx_runtime_1.jsx)(QueryPredicateBuilder_1.QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
                 const newPredicate = {
                     operator: type === 'filter' ? undefined : 'AND',
                     args: [],
@@ -103,12 +96,6 @@ const QueryBuilder = (props) => {
                 handleQlPredicateChange(predicate);
             } }));
     }
-    return (React.createElement(dnd_1.DragDropProvider, null,
-        React.createElement(QueryBuilderContext.Provider, { value: context },
-            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", 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'))))));
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(QueryBuilderContext.Provider, { value: context, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: QUERY_BUILDER_CLASSNAME, children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { "data-name": "query-builder-help", className: "twa:my-2 twa:p-2 twa:text-3", children: "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required" }), errorOrEditor, (0, jsx_runtime_1.jsx)(Panel_1.default, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", className: "twa:mt-3", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression twa:min-h-[48px] twa:my-2 twa:p-3`, children: expressionStr || 'Output Expression will display here' }) })] }) }) }));
 };
 exports.QueryBuilder = QueryBuilder;