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

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -1,19 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tag } from '../Tag';
 import { Box } from '../Flex';
 const signatureClassName = 'twa:m-0 twa:whitespace-pre-wrap twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-1 twa:inline-block';
 export const ExpressionFunctionDocumentation = (props) => {
-    return props.expressionFunction ? (React.createElement(Box, { "data-name": "expression-editor-documentation", className: "twa:my-2 twa:p-2 twa:rounded-standard twa:leading-normal" },
-        props.expressionFunction.description && (React.createElement(Box, { className: "twa:mb-3 twa:font-bold twa:whitespace-pre-wrap", "data-name": "expression-editor-documentation-description" }, props.expressionFunction.description)),
-        props.expressionFunction.signatures && (React.createElement(Box, { "data-name": "expression-editor-documentation-signatures" },
-            React.createElement("b", null, "Signatures"),
-            React.createElement("ul", { className: "twa:flex twa:flex-col twa:gap-1" }, props.expressionFunction.signatures.map((signature, index) => (React.createElement("li", { key: index },
-                React.createElement("pre", { className: signatureClassName }, signature))))))),
-        props.expressionFunction.examples && (React.createElement(Box, { "data-name": "expression-editor-documentation-examples" },
-            React.createElement("b", null, "Examples"),
-            React.createElement("ul", { className: "twa:flex twa:flex-col twa:gap-1" }, props.expressionFunction.examples.map((example, index) => (React.createElement("li", { key: index },
-                React.createElement("pre", { className: signatureClassName }, example))))))),
-        props.expressionFunction.returnType && (React.createElement(Box, { "data-name": "expression-editor-documentation-examples" },
-            React.createElement("b", null, "Return Type"),
-            React.createElement(Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full twa:py-1" }, props.expressionFunction.returnType))))) : null;
+    return props.expressionFunction ? (_jsxs(Box, { "data-name": "expression-editor-documentation", className: "twa:my-2 twa:p-2 twa:rounded-standard twa:leading-normal", children: [props.expressionFunction.description && (_jsx(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 && (_jsxs(Box, { "data-name": "expression-editor-documentation-signatures", children: [_jsx("b", { children: "Signatures" }), _jsx("ul", { className: "twa:flex twa:flex-col twa:gap-1", children: props.expressionFunction.signatures.map((signature, index) => (_jsx("li", { children: _jsx("pre", { className: signatureClassName, children: signature }) }, index))) })] })), props.expressionFunction.examples && (_jsxs(Box, { "data-name": "expression-editor-documentation-examples", children: [_jsx("b", { children: "Examples" }), _jsx("ul", { className: "twa:flex twa:flex-col twa:gap-1", children: props.expressionFunction.examples.map((example, index) => (_jsx("li", { children: _jsx("pre", { className: signatureClassName, children: example }) }, index))) })] })), props.expressionFunction.returnType && (_jsxs(Box, { "data-name": "expression-editor-documentation-examples", children: [_jsx("b", { children: "Return Type" }), _jsx(Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full twa:py-1", children: props.expressionFunction.returnType })] }))] })) : null;
 };

package/src/components/ExpressionEditor/ExpressionPreview.js

@@ -1,10 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useAdaptable } from '../../View/AdaptableContext';
 export const ExpressionPreview = (props) => {
     const adaptableApi = useAdaptable().api;
     const displayColumnFriendlyNames = adaptableApi.optionsApi.getExpressionOptions()?.displayColumnFriendlyNamesForExpressions;
     if (!displayColumnFriendlyNames) {
-        return React.createElement(React.Fragment, null, adaptableApi.expressionApi.getAdaptableQueryExpression(props.query));
+        return _jsx(_Fragment, { children: adaptableApi.expressionApi.getAdaptableQueryExpression(props.query) });
     }
     const expressionWithFriendlyNames = adaptableApi.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(props.query);
     // '[Column Name] > 2' => ['[Column Name]', '>', '2']
@@ -17,9 +18,9 @@ export 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);
-        })))
+        (_jsx("div", { children: strWithMarkedGroupes.map((part, index) => {
+                const partEl = part.includes('[') ? _jsx("i", { children: part.replace(/[\[\]]/g, '') }) : part;
+                return _jsx(React.Fragment, { children: partEl }, index);
+            }) }))
     );
 };

package/src/components/ExpressionEditor/NamedQueryEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useAdaptable } from '../../View/AdaptableContext';
 import { CheckBox } from '../CheckBox';
@@ -7,14 +8,7 @@ export const NamedQueryEditor = (props) => {
     const adaptable = useAdaptable();
     const [showColumnIds, setShowColumnIds] = React.useState(false);
     const [inlineQuery, setInlineQuery] = React.useState(false);
-    return (React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start", className: "twa:mt-[2px]" },
-        React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked) }, "Show Column IDs"),
-        React.createElement(CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked) }, "Inline Query"),
-        props.namedQueries.map((namedQuery) => (React.createElement(Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "flex-start", className: "twa:p-1 twa:my-2 twa:w-full twa:bg-primarylight" },
-            ' ',
-            React.createElement(EditorButton, { className: "twa:w-full twa:h-full twa:bg-primary twa:cursor-grab", data: inlineQuery ? namedQuery.BooleanExpression : `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
-                React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" }, namedQuery.Name)),
-            React.createElement(Flex, { alignItems: "flex-start", className: "twa:p-1" }, showColumnIds
-                ? namedQuery.BooleanExpression
-                : adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery)))))));
+    return (_jsxs(Flex, { flexDirection: "column", alignItems: "flex-start", className: "twa:mt-[2px]", children: [_jsx(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), children: "Show Column IDs" }), _jsx(CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked), children: "Inline Query" }), props.namedQueries.map((namedQuery) => (_jsxs(Flex, { flexDirection: "column", alignItems: "flex-start", className: "twa:p-1 twa:my-2 twa:w-full twa:bg-primarylight", children: [' ', _jsx(EditorButton, { className: "twa:w-full twa:h-full twa:bg-primary twa:cursor-grab", data: inlineQuery ? namedQuery.BooleanExpression : `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag", children: _jsx(Flex, { flexDirection: "column", alignItems: "flex-start", children: namedQuery.Name }) }), _jsx(Flex, { alignItems: "flex-start", className: "twa:p-1", children: showColumnIds
+                            ? namedQuery.BooleanExpression
+                            : adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery) })] }, namedQuery.Uuid)))] }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { DragDropProvider } from '../../dnd';
 import { mapExpressionToQlPredicate, } from '../../../parser/src/predicate';
@@ -50,7 +51,7 @@ export const QueryBuilder = (props) => {
         delete booleanExpressionsWithoutCombinators.AND;
         delete booleanExpressionsWithoutCombinators.OR;
         return booleanExpressionsWithoutCombinators;
-    }, []);
+    }, [adaptable.api.internalApi, props.module]);
     const context = React.useMemo(() => {
         return {
             getColumns: props.getColumns,
@@ -62,30 +63,22 @@ export const QueryBuilder = (props) => {
             },
             onQlPredicateChange: handleQlPredicateChange,
         };
-    }, []);
-    const clearExpressionButton = (React.createElement(SimpleButton, { onClick: () => {
+    }, [props.getColumns, props.getFields, booleanExpressions, handleQlPredicateChange]);
+    const clearExpressionButton = (_jsx(SimpleButton, { onClick: () => {
             clearExpression();
-        } }, "Clear Expression"));
+        }, children: "Clear Expression" }));
     const unsupportedExpressionFunction = getUnsuportedExpressionFromQlPredicate(qlPredicate, {
         supportedFields: props.getFields(),
     });
     let errorOrEditor = null;
     if (qlPredicate && 'errorMessage' in qlPredicate) {
-        errorOrEditor = props.query?.includes?.('QUERY') ? (React.createElement(WarningBox, { "data-name": "unsupported-query-warning" },
-            React.createElement(Flex, { alignItems: "center" },
-                "Named Queries are not supported in the Query Builder",
-                React.createElement(Box, { className: "twa:flex-1" }),
-                clearExpressionButton))) : (React.createElement(ErrorBox, null,
-            React.createElement(Flex, null,
-                qlPredicate.errorMessage,
-                React.createElement(Box, { className: "twa:flex-1" }),
-                clearExpressionButton)));
+        errorOrEditor = props.query?.includes?.('QUERY') ? (_jsx(WarningBox, { "data-name": "unsupported-query-warning", children: _jsxs(Flex, { alignItems: "center", children: ["Named Queries are not supported in the Query Builder", _jsx(Box, { className: "twa:flex-1" }), clearExpressionButton] }) })) : (_jsx(ErrorBox, { children: _jsxs(Flex, { children: [qlPredicate.errorMessage, _jsx(Box, { className: "twa:flex-1" }), clearExpressionButton] }) }));
     }
     else if (unsupportedExpressionFunction) {
-        errorOrEditor = (React.createElement(WarningBox, { "data-name": "unsupported-expression-warning" }, unsupportedExpressionFunction));
+        errorOrEditor = (_jsx(WarningBox, { "data-name": "unsupported-expression-warning", children: unsupportedExpressionFunction }));
     }
     else if (qlPredicate && !('errorMessage' in qlPredicate)) {
-        errorOrEditor = (React.createElement(QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
+        errorOrEditor = (_jsx(QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
                 const newPredicate = {
                     operator: type === 'filter' ? undefined : 'AND',
                     args: [],
@@ -98,11 +91,5 @@ export const QueryBuilder = (props) => {
                 handleQlPredicateChange(predicate);
             } }));
     }
-    return (React.createElement(DragDropProvider, null,
-        React.createElement(QueryBuilderContext.Provider, { value: context },
-            React.createElement(Box, { className: QUERY_BUILDER_CLASSNAME },
-                React.createElement(HelpBlock, { "data-name": "query-builder-help", className: "twa:my-2 twa:p-2 twa:text-3" }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
-                errorOrEditor,
-                React.createElement(Panel, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", className: "twa:mt-3" },
-                    React.createElement(Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression twa:min-h-[48px] twa:my-2 twa:p-3` }, expressionStr || 'Output Expression will display here'))))));
+    return (_jsx(DragDropProvider, { children: _jsx(QueryBuilderContext.Provider, { value: context, children: _jsxs(Box, { className: QUERY_BUILDER_CLASSNAME, children: [_jsx(HelpBlock, { "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, _jsx(Panel, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", className: "twa:mt-3", children: _jsx(Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression twa:min-h-[48px] twa:my-2 twa:p-3`, children: expressionStr || 'Output Expression will display here' }) })] }) }) }));
 };

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { getQlPredicateSymbol } from '../../../parser/src/predicate/mapQlPredicateToExpression';
 import { mapExpressionFunctionTypeToColumnDataType } from '../../../Utilities/adaptableQlUtils';
@@ -10,10 +11,10 @@ import { CheckBox } from '../../CheckBox';
 import DropdownButton from '../../DropdownButton';
 import { Icon } from '../../icons';
 import { InputGroup } from '../../InputGroup';
-import { Select } from '../../Select';
 import { useQueryBuilderContext } from './QueryBuilder';
 import { isFieldValue, mapColumnExpressionToColumnId, mapExpressionToFieldValue, mapFieldValueToExpression, } from './utils';
 import { Box, Flex } from '../../Flex';
+import { SingleSelect } from '../../NewSelect';
 export const PrimitiveColumnOrFieldSelector = (props) => {
     const adaptable = useAdaptable();
     const [type, setType] = React.useState(() => {
@@ -29,39 +30,31 @@ export const PrimitiveColumnOrFieldSelector = (props) => {
     let input = null;
     if (type === 'column') {
         const columnId = mapColumnExpressionToColumnId(props.fieldOrColumn);
-        input = (React.createElement(ColumnSelector, { value: columnId, type: props.type, onChange: (columnId) => {
+        input = (_jsx(ColumnSelector, { value: columnId, type: props.type, onChange: (columnId) => {
                 props.onChange(`[${columnId}]`);
             } }));
     }
     else {
-        input = (React.createElement(FieldSelector, { value: mapExpressionToFieldValue(props.fieldOrColumn), type: props.type, onChange: (fieldValue) => {
+        input = (_jsx(FieldSelector, { value: mapExpressionToFieldValue(props.fieldOrColumn), type: props.type, onChange: (fieldValue) => {
                 props.onChange(mapFieldValueToExpression(fieldValue));
             } }));
     }
     const typeOptions = [
         {
-            label: (React.createElement(Flex, { alignItems: "center" },
-                React.createElement(Icon, { name: "grid" }),
-                React.createElement(Box, { className: "twa:ml-2" }, "Column"))),
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "grid" }), _jsx(Box, { className: "twa:ml-2", children: "Column" })] })),
             value: 'column',
             icon: 'grid',
         },
         {
-            label: (React.createElement(Flex, { alignItems: "center" },
-                React.createElement(Icon, { name: "column-outline" }),
-                React.createElement(Box, { className: "twa:ml-2" }, "Field"))),
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "column-outline" }), _jsx(Box, { className: "twa:ml-2", children: "Field" })] })),
             value: 'field',
             icon: 'column-outline',
         },
     ];
-    return !hasFieldsOrValueIsField || props.hideFields ? (React.createElement(Box, null, input)) : (React.createElement(InputGroup, { Component: Flex, "data-id": "query-first-arg-wrapper" },
-        React.createElement(Select, { renderSingleValue: (value) => {
-                return React.createElement(React.Fragment, null, type === 'column' ? React.createElement(Icon, { name: "grid" }) : React.createElement(Icon, { name: "column-outline" }));
-            }, value: type, options: typeOptions, onChange: (value) => {
-                props.onChange(null);
-                setType(value);
-            } }),
-        input));
+    return !hasFieldsOrValueIsField || props.hideFields ? (_jsx(Box, { children: input })) : (_jsxs(InputGroup, { Component: Flex, "data-id": "query-first-arg-wrapper", children: [_jsx(SingleSelect, { className: "twa:min-w-32", value: type, items: typeOptions, onValueChange: (value) => {
+                    props.onChange(null);
+                    setType(value);
+                } }), _jsx("div", { className: "twa:w-0.5" }), input] }));
 };
 export const PrimitiveValueInput = (props) => {
     const adaptable = useAdaptable();
@@ -91,9 +84,9 @@ export const PrimitiveValueInput = (props) => {
         };
         switch (props.inputType) {
             case 'boolean':
-                return (React.createElement(CheckBox, { ...common, checked: props.value, onChange: () => props.onChange(!props.value) }));
+                return (_jsx(CheckBox, { ...common, checked: props.value, onChange: () => props.onChange(!props.value) }));
             case 'number':
-                return (React.createElement(AdaptableInput, { ...common, type: "number", value: props.value ?? '', onChange: (event) => {
+                return (_jsx(AdaptableInput, { ...common, type: "number", value: props.value ?? '', onChange: (event) => {
                         const value = event.target.value;
                         if (value === '') {
                             props.onChange(undefined);
@@ -103,34 +96,34 @@ export const PrimitiveValueInput = (props) => {
                         }
                     } }));
             case 'text':
-                return (React.createElement(AdaptableInput, { ...common, type: "text", value: props.value ?? '', onChange: (event) => {
+                return (_jsx(AdaptableInput, { ...common, type: "text", value: props.value ?? '', onChange: (event) => {
                         props.onChange(event.target.value);
                     } }));
             case 'date':
                 // date format = 'DATE(2020-01-01)'
                 const dateStr = typeof props.value === 'string' ? props.value.replace('DATE(', '').replace(')', '') : '';
-                return (React.createElement(AdaptableInput, { ...common, type: "date", value: dateStr ?? '', onChange: (event) => {
+                return (_jsx(AdaptableInput, { ...common, type: "date", value: dateStr ?? '', onChange: (event) => {
                         const stringified = `DATE("${event.target.value}")`;
                         props.onChange(stringified);
                     } }));
             default:
-                return React.createElement(React.Fragment, null);
+                return _jsx(_Fragment, {});
         }
     };
     let editor = null;
     if (type === 'column-name') {
         const abColType = mapExpressionFunctionTypeToColumnDataType(props.inputType);
-        editor = (React.createElement(PrimitiveColumnOrFieldSelector, { hideFields: true, fieldOrColumn: props.value, type: abColType, onChange: (columnId) => {
+        editor = (_jsx(PrimitiveColumnOrFieldSelector, { hideFields: true, fieldOrColumn: props.value, type: abColType, onChange: (columnId) => {
                 props.onChange(columnId);
             } }));
     }
     else if (type === 'field') {
-        editor = (React.createElement(FieldSelector, { value: mapExpressionToFieldValue(props.value), onChange: (fieldValue) => {
+        editor = (_jsx(FieldSelector, { value: mapExpressionToFieldValue(props.value), onChange: (fieldValue) => {
                 props.onChange(mapFieldValueToExpression(fieldValue));
             } }));
     }
     else if (!['date', 'boolean'].includes(props.inputType)) {
-        editor = (React.createElement(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: props.value, columnId: mapColumnExpressionToColumnId(props.lefthandColumnIdParam), onChange: (value) => {
+        editor = (_jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: props.value, columnId: mapColumnExpressionToColumnId(props.lefthandColumnIdParam), onChange: (value) => {
                 props.onChange(value);
             } }));
     }
@@ -139,75 +132,64 @@ export const PrimitiveValueInput = (props) => {
     }
     const options = [
         {
-            label: (React.createElement(Flex, { alignItems: "center" },
-                React.createElement(Icon, { name: "columns" }),
-                React.createElement(Box, { className: "twa:ml-2" }, "Column"))),
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "columns" }), _jsx(Box, { className: "twa:ml-2", children: "Column" })] })),
             icon: 'columns',
             value: 'column-name',
         },
         {
-            label: (React.createElement(Flex, { alignItems: "center" },
-                React.createElement(Icon, { name: "edit" }),
-                React.createElement(Box, { className: "twa:ml-2" }, "Value"))),
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "edit" }), _jsx(Box, { className: "twa:ml-2", children: "Value" })] })),
             icon: 'edit',
             value: 'input-value',
         },
     ];
     if (hasFieldsOrValueIsField || type === 'field') {
         options.push({
-            label: (React.createElement(Flex, { alignItems: "center" },
-                React.createElement(Icon, { name: "column-outline" }),
-                React.createElement(Box, { className: "twa:ml-2" }, "Field"))),
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "column-outline" }), _jsx(Box, { className: "twa:ml-2", children: "Field" })] })),
             icon: 'column-outline',
             value: 'field',
         });
     }
     const typeOption = options.find((option) => option.value === type);
-    return (React.createElement(InputGroup, { Component: Flex, "data-id": "query-input-wrapper", className: "twa:mr-2" },
-        React.createElement(Select, { renderSingleValue: (value) => {
-                return (React.createElement(React.Fragment, null, typeOption.value === 'column-name' ? React.createElement(Icon, { name: "grid" }) : React.createElement(Icon, { name: "edit" })));
-            }, value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) }),
-        editor));
+    return (_jsxs(Flex, { "data-id": "query-input-wrapper", className: "twa:mr-2 twa:gap-0.5 twa:flex-1", children: [_jsx(SingleSelect, { className: "twa:min-w-28", value: typeOption.value, items: options, onValueChange: (value) => handleTypeChange(value) }), _jsx("div", { className: "twa:flex-1 twa:flex twa:min-w-32", children: editor })] }));
 };
 export const PrimitiveMultiValueInput = (props) => {
-    return (React.createElement(PermittedValuesSelector, { isMulti: true, allowNewValues: true, value: props.value, columnId: mapColumnExpressionToColumnId(props.lefthandColumnIdParam), onChange: (value) => {
+    return (_jsx(PermittedValuesSelector, { isMulti: true, allowNewValues: true, value: props.value, columnId: mapColumnExpressionToColumnId(props.lefthandColumnIdParam), onChange: (value) => {
             props.onChange(value);
         } }));
 };
 const SymbolToIcon = (props) => {
     switch (props.symbol) {
         case '=':
-            return React.createElement(Icon, { name: "equals" });
+            return _jsx(Icon, { name: "equals" });
         case '!=':
-            return React.createElement(Icon, { name: "not-equal" });
+            return _jsx(Icon, { name: "not-equal" });
         case '>':
-            return React.createElement(Icon, { name: "greater-than" });
+            return _jsx(Icon, { name: "greater-than" });
         case '>=':
-            return React.createElement(Icon, { name: "greater-than-or-equal" });
+            return _jsx(Icon, { name: "greater-than-or-equal" });
         case '<':
-            return React.createElement(Icon, { name: "less-than" });
+            return _jsx(Icon, { name: "less-than" });
         case '<=':
-            return React.createElement(Icon, { name: "less-than-or-equal" });
+            return _jsx(Icon, { name: "less-than-or-equal" });
         default:
-            return React.createElement(React.Fragment, null, props.symbol);
+            return _jsx(_Fragment, { children: props.symbol });
     }
 };
 export const ExpressionSelector = (props) => {
     const { getExpressions } = useQueryBuilderContext();
     const expressions = props.dataType ? getExpressions(props.dataType) : [];
-    return (React.createElement(DropdownButton, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", tone: 'accent', columns: ['label'], items: expressions.map((expression) => ({
-            label: React.createElement(SymbolToIcon, { symbol: getQlPredicateSymbol(expression) }),
+    return (_jsx(DropdownButton, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", tone: 'accent', columns: ['label'], items: expressions.map((expression) => ({
+            label: _jsx(SymbolToIcon, { symbol: getQlPredicateSymbol(expression) }),
             onClick: () => {
                 if (expression !== props.value) {
                     props.onExpressionChange(expression);
                 }
             },
-        })) },
-        React.createElement(SymbolToIcon, { symbol: getQlPredicateSymbol(props.value) ?? 'Select Operator' })));
+        })), children: _jsx(SymbolToIcon, { symbol: getQlPredicateSymbol(props.value) ?? 'Select Operator' }) }));
 };
 export const CombinatorSelector = (props) => {
-    return (React.createElement(DropdownButton, { "data-id": "combinator-selector", "data-value": props.value, columns: ['label'], variant: "raised", tone: "accent", items: [
+    return (_jsx(DropdownButton, { "data-id": "combinator-selector", "data-value": props.value, columns: ['label'], variant: "raised", tone: "accent", items: [
             { label: 'AND', onClick: () => props.onChange('AND') },
             { label: 'OR', onClick: () => props.onChange('OR') },
-        ] }, props.value));
+        ], children: props.value }));
 };