@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.0

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

@@ -1,30 +1,25 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CombinatorSelector = exports.ExpressionSelector = exports.PrimitiveMultiValueInput = exports.PrimiteValueInput = exports.PrimitiveColumnSelector = 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 AdaptableInput_1 = tslib_1.__importDefault(require("../../../View/Components/AdaptableInput"));
-const ColumnSelector_1 = require("../../../View/Components/Selectors/ColumnSelector");
-const PermittedValuesSelector_1 = require("../../../View/Components/Selectors/PermittedValuesSelector");
-const CheckBox_1 = require("../../CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../DropdownButton"));
-const icons_1 = require("../../icons");
-const InputGroup_1 = require("../../InputGroup");
-const Select_1 = require("../../Select");
-const QueryBuilder_1 = require("./QueryBuilder");
-const utils_1 = require("./utils");
-const PrimitiveColumnSelector = (props) => {
-    return (react_1.default.createElement(rebass_1.Box, null,
-        react_1.default.createElement(ColumnSelector_1.ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
+import React from 'react';
+import { Box, Flex, Text } from 'rebass';
+import { getQlPredicateSymbol } from '../../../parser/src/predicate/mapQlPredicateToExpression';
+import AdaptableInput from '../../../View/Components/AdaptableInput';
+import { ColumnSelector } from '../../../View/Components/Selectors/ColumnSelector';
+import { PermittedValuesSelector } from '../../../View/Components/Selectors/PermittedValuesSelector';
+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 { mapExpressionFunctionTypeToColumnDataType } from './utils';
+export const PrimitiveColumnSelector = (props) => {
+    return (React.createElement(Box, null,
+        React.createElement(ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
                 props.onChange(`[${columnId}]`);
             } })));
 };
-exports.PrimitiveColumnSelector = PrimitiveColumnSelector;
-const PrimiteValueInput = (props) => {
+export const PrimiteValueInput = (props) => {
     var _a, _b;
-    const [type, setType] = react_1.default.useState(() => {
+    const [type, setType] = React.useState(() => {
         var _a;
         return typeof (props === null || props === void 0 ? void 0 : props.value) === 'string' && ((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.includes('['))
             ? 'column-name'
@@ -44,9 +39,9 @@ const PrimiteValueInput = (props) => {
         };
         switch (props.inputType) {
             case 'boolean':
-                return (react_1.default.createElement(CheckBox_1.CheckBox, Object.assign({}, common, { checked: props.value, onChange: () => props.onChange(!props.value) })));
+                return (React.createElement(CheckBox, Object.assign({}, common, { checked: props.value, onChange: () => props.onChange(!props.value) })));
             case 'number':
-                return (react_1.default.createElement(AdaptableInput_1.default, Object.assign({}, common, { type: "number", value: (_a = props.value) !== null && _a !== void 0 ? _a : '', onChange: (event) => {
+                return (React.createElement(AdaptableInput, Object.assign({}, common, { type: "number", value: (_a = props.value) !== null && _a !== void 0 ? _a : '', onChange: (event) => {
                         const value = event.target.value;
                         if (value === '') {
                             props.onChange(undefined);
@@ -56,28 +51,28 @@ const PrimiteValueInput = (props) => {
                         }
                     } })));
             case 'text':
-                return (react_1.default.createElement(AdaptableInput_1.default, Object.assign({}, common, { type: "text", value: (_b = props.value) !== null && _b !== void 0 ? _b : '', onChange: (event) => {
+                return (React.createElement(AdaptableInput, Object.assign({}, common, { type: "text", value: (_b = props.value) !== null && _b !== void 0 ? _b : '', 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_1.default.createElement(AdaptableInput_1.default, Object.assign({}, common, { type: "date", value: dateStr !== null && dateStr !== void 0 ? dateStr : '', onChange: (event) => {
+                return (React.createElement(AdaptableInput, Object.assign({}, common, { type: "date", value: dateStr !== null && dateStr !== void 0 ? dateStr : '', onChange: (event) => {
                         const stringified = `DATE("${event.target.value}")`;
                         props.onChange(stringified);
                     } })));
             default:
-                return react_1.default.createElement(react_1.default.Fragment, null);
+                return React.createElement(React.Fragment, null);
         }
     };
     let editor = null;
     if (type === 'column-name') {
         const columnId = props.value ? (_b = (_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.replace) === null || _b === void 0 ? void 0 : _b.call(_a, '[', '').replace(']', '') : undefined;
-        const abColType = (0, utils_1.mapExpressionFunctionTypeToColumnDataType)(props.inputType);
-        editor = (react_1.default.createElement(exports.PrimitiveColumnSelector, { columnId: columnId, onChange: (col) => props.onChange(col), type: abColType }));
+        const abColType = mapExpressionFunctionTypeToColumnDataType(props.inputType);
+        editor = (React.createElement(PrimitiveColumnSelector, { columnId: columnId, onChange: (col) => props.onChange(col), type: abColType }));
     }
     else if (!['date', 'boolean'].includes(props.inputType)) {
-        editor = (react_1.default.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, value: props.value, columnId: props.lefthandColumnIdParam, onChange: (value) => {
+        editor = (React.createElement(PermittedValuesSelector, { allowNewValues: true, value: props.value, columnId: props.lefthandColumnIdParam, onChange: (value) => {
                 props.onChange(value);
             } }));
     }
@@ -86,71 +81,67 @@ const PrimiteValueInput = (props) => {
     }
     const options = [
         {
-            label: (react_1.default.createElement(rebass_1.Flex, null,
-                react_1.default.createElement(icons_1.Icon, { name: "columns" }),
-                react_1.default.createElement(rebass_1.Text, { ml: 2 }, "Column"))),
+            label: (React.createElement(Flex, null,
+                React.createElement(Icon, { name: "columns" }),
+                React.createElement(Text, { ml: 2 }, "Column"))),
             icon: 'columns',
             value: 'column-name',
         },
         {
-            label: (react_1.default.createElement(rebass_1.Flex, null,
-                react_1.default.createElement(icons_1.Icon, { name: "edit" }),
-                react_1.default.createElement(rebass_1.Text, { ml: 2 }, "Value"))),
+            label: (React.createElement(Flex, null,
+                React.createElement(Icon, { name: "edit" }),
+                React.createElement(Text, { ml: 2 }, "Value"))),
             icon: 'edit',
             value: 'input-value',
         },
     ];
     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 },
-        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" })));
+    return (React.createElement(InputGroup, { Component: Flex, "data-id": "query-input-wrapper", 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));
 };
-exports.PrimiteValueInput = PrimiteValueInput;
-const PrimitiveMultiValueInput = (props) => {
-    return (react_1.default.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { isMulti: true, allowNewValues: true, value: props.value, columnId: props.lefthandColumnIdParam, onChange: (value) => {
+export const PrimitiveMultiValueInput = (props) => {
+    return (React.createElement(PermittedValuesSelector, { isMulti: true, allowNewValues: true, value: props.value, columnId: props.lefthandColumnIdParam, onChange: (value) => {
             props.onChange(value);
         } }));
 };
-exports.PrimitiveMultiValueInput = PrimitiveMultiValueInput;
 const SymbolToIcon = (props) => {
     switch (props.symbol) {
         case '=':
-            return react_1.default.createElement(icons_1.Icon, { name: "equals" });
+            return React.createElement(Icon, { name: "equals" });
         case '!=':
-            return react_1.default.createElement(icons_1.Icon, { name: "not-equal" });
+            return React.createElement(Icon, { name: "not-equal" });
         case '>':
-            return react_1.default.createElement(icons_1.Icon, { name: "greater-than" });
+            return React.createElement(Icon, { name: "greater-than" });
         case '>=':
-            return react_1.default.createElement(icons_1.Icon, { name: "greater-than-or-equal" });
+            return React.createElement(Icon, { name: "greater-than-or-equal" });
         case '<':
-            return react_1.default.createElement(icons_1.Icon, { name: "less-than" });
+            return React.createElement(Icon, { name: "less-than" });
         case '<=':
-            return react_1.default.createElement(icons_1.Icon, { name: "less-than-or-equal" });
+            return React.createElement(Icon, { name: "less-than-or-equal" });
         default:
-            return react_1.default.createElement(react_1.default.Fragment, null, props.symbol);
+            return React.createElement(React.Fragment, null, props.symbol);
     }
 };
-const ExpressionSelector = (props) => {
+export const ExpressionSelector = (props) => {
     var _a;
-    const { getExpressions } = (0, QueryBuilder_1.useQueryBuilderContext)();
+    const { getExpressions } = useQueryBuilderContext();
     const expressions = props.dataType ? getExpressions(props.dataType) : [];
-    return (react_1.default.createElement(DropdownButton_1.default, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", tone: 'accent', columns: ['label'], items: expressions.map((expression) => ({
-            label: react_1.default.createElement(SymbolToIcon, { symbol: (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(expression) }),
+    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) }),
             onClick: () => {
                 if (expression !== props.value) {
                     props.onExpressionChange(expression);
                 }
             },
         })) },
-        react_1.default.createElement(SymbolToIcon, { symbol: (_a = (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(props.value)) !== null && _a !== void 0 ? _a : 'Select Operator' })));
+        React.createElement(SymbolToIcon, { symbol: (_a = getQlPredicateSymbol(props.value)) !== null && _a !== void 0 ? _a : 'Select Operator' })));
 };
-exports.ExpressionSelector = ExpressionSelector;
-const CombinatorSelector = (props) => {
-    return (react_1.default.createElement(DropdownButton_1.default, { "data-id": "combinator-selector", "data-value": props.value, columns: ['label'], variant: "raised", tone: "accent", items: [
+export const CombinatorSelector = (props) => {
+    return (React.createElement(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));
 };
-exports.CombinatorSelector = CombinatorSelector;

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

@@ -1,31 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QueryPredicateBuilder = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_beautiful_dnd_1 = require("react-beautiful-dnd");
-const rebass_1 = require("rebass");
-const predicate_1 = require("../../../parser/src/predicate");
-const booleanExpressionFunctions_1 = require("../../../Utilities/ExpressionFunctions/booleanExpressionFunctions");
-const AdaptableContext_1 = require("../../../View/AdaptableContext");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../DropdownButton"));
-const ErrorBox_1 = tslib_1.__importDefault(require("../../ErrorBox"));
-const icons_1 = require("../../icons");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../SimpleButton"));
-const QueryBuilderInputs_1 = require("./QueryBuilderInputs");
-const utils_1 = require("./utils");
+import React from 'react';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
+import { Box, Flex } from 'rebass';
+import { isQlLogicalOperator } from '../../../parser/src/predicate';
+import { booleanExpressionFunctions } from '../../../Utilities/ExpressionFunctions/booleanExpressionFunctions';
+import { useAdaptable } from '../../../View/AdaptableContext';
+import DropdownButton from '../../DropdownButton';
+import ErrorBox from '../../ErrorBox';
+import { Icon } from '../../icons';
+import SimpleButton from '../../SimpleButton';
+import { CombinatorSelector, ExpressionSelector, PrimiteValueInput, PrimitiveColumnSelector, PrimitiveMultiValueInput, } from './QueryBuilderInputs';
+import { getOperatorMatchingInputs as getFunctionMatchingInputTypes, mapColumnDataTypeToExpressionFunctionType, } from './utils';
 const ITEM_HEIGHT = 40;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
-const Handle = (props) => (react_1.default.createElement(rebass_1.Flex, Object.assign({ className: `${BASE_CLASS_NAME}__handle`, height: ITEM_HEIGHT, alignItems: "center", mr: 1 }, props),
-    react_1.default.createElement(icons_1.Icon, { name: "drag" })));
+const Handle = (props) => (React.createElement(Flex, Object.assign({ className: `${BASE_CLASS_NAME}__handle`, height: ITEM_HEIGHT, alignItems: "center", mr: 1 }, props),
+    React.createElement(Icon, { name: "drag" })));
 const QueryPredicateButtons = (props) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        !props.hideAdd && (react_1.default.createElement(DropdownButton_1.default, { listMinWidth: 150, columns: ['label'], items: [
+    return (React.createElement(React.Fragment, null,
+        !props.hideAdd && (React.createElement(DropdownButton, { listMinWidth: 150, columns: ['label'], items: [
                 { label: 'Add Column Condition', onClick: () => props.onNewPredicate('filter') },
                 { label: 'Add AND / OR Group', onClick: () => props.onNewPredicate('group') },
             ], variant: "text" },
-            react_1.default.createElement(icons_1.Icon, { name: "plus" }))),
-        !props.hideDelete && (react_1.default.createElement(SimpleButton_1.default, { icon: "delete", variant: "text", onClick: () => {
+            React.createElement(Icon, { name: "plus" }))),
+        !props.hideDelete && (React.createElement(SimpleButton, { icon: "delete", variant: "text", onClick: () => {
                 props.onChange(null);
             } }))));
 };
@@ -38,27 +34,27 @@ const LogicalFunctionEditor = (props) => {
     ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}
     ${props.isRoot ? `${BASE_CLASS_NAME}--root` : `${BASE_CLASS_NAME}--child`}
   `;
-    const getCombinatorEl = (handleProps, className) => (react_1.default.createElement(react_beautiful_dnd_1.Droppable, { droppableId: props.id, type: props.id }, (provided, snapshot) => {
-        return (react_1.default.createElement("div", Object.assign({}, provided.droppableProps, { ref: provided.innerRef, className: className }),
-            react_1.default.createElement(rebass_1.Flex, null,
-                props.isRoot ? null : react_1.default.createElement(Handle, Object.assign({}, handleProps)),
-                react_1.default.createElement(rebass_1.Flex, { flex: 1, alignItems: "center", height: ITEM_HEIGHT },
-                    react_1.default.createElement(QueryBuilderInputs_1.CombinatorSelector, { value: props.predicate.operator, onChange: (combinator) => {
+    const getCombinatorEl = (handleProps, className) => (React.createElement(Droppable, { droppableId: props.id, type: props.id }, (provided, snapshot) => {
+        return (React.createElement("div", Object.assign({}, provided.droppableProps, { ref: provided.innerRef, className: className }),
+            React.createElement(Flex, null,
+                props.isRoot ? null : React.createElement(Handle, Object.assign({}, handleProps)),
+                React.createElement(Flex, { flex: 1, alignItems: "center", height: ITEM_HEIGHT },
+                    React.createElement(CombinatorSelector, { value: props.predicate.operator, onChange: (combinator) => {
                             props.onChange(Object.assign(Object.assign({}, props.predicate), { operator: combinator }));
                         } }),
-                    react_1.default.createElement(rebass_1.Box, { flex: 1 }),
-                    react_1.default.createElement(QueryPredicateButtons, Object.assign({ hideDelete: props.isRoot, hideAdd: true }, props)))),
-            react_1.default.createElement(rebass_1.Box, { className: `${BASE_CLASS_NAME}__children-wrapper` },
+                    React.createElement(Box, { flex: 1 }),
+                    React.createElement(QueryPredicateButtons, Object.assign({ hideDelete: props.isRoot, hideAdd: true }, props)))),
+            React.createElement(Box, { className: `${BASE_CLASS_NAME}__children-wrapper` },
                 props.predicate.args.map((arg, index) => {
                     const id = `${props.id}/${index}`;
-                    return (react_1.default.createElement(exports.QueryPredicateBuilder, { key: id, lastChild: index === props.predicate.args.length - 1, index: index, id: id, predicate: arg, onNewPredicate: (type) => {
+                    return (React.createElement(QueryPredicateBuilder, { key: id, lastChild: index === props.predicate.args.length - 1, index: index, id: id, predicate: arg, onNewPredicate: (type) => {
                             const newPredicate = {
                                 operator: type === 'filter' ? undefined : 'AND',
                                 args: [],
                             };
                             if (typeof arg === 'object' &&
                                 'operator' in arg &&
-                                (0, predicate_1.isQlLogicalOperator)(arg.operator)) {
+                                isQlLogicalOperator(arg.operator)) {
                                 // add as a child
                                 const newArg = Object.assign(Object.assign({}, arg), { args: [...arg.args, newPredicate] });
                                 const args = [...props.predicate.args];
@@ -83,22 +79,22 @@ const LogicalFunctionEditor = (props) => {
                         } }));
                 }),
                 provided.placeholder,
-                react_1.default.createElement("div", { className: `${BASE_CLASS_NAME}__root-actions` },
-                    react_1.default.createElement(QueryPredicateButtons, Object.assign({}, props, { hideDelete: true }))))));
+                React.createElement("div", { className: `${BASE_CLASS_NAME}__root-actions` },
+                    React.createElement(QueryPredicateButtons, Object.assign({}, props, { hideDelete: true }))))));
     }));
     if (props.isRoot) {
         return getCombinatorEl({ className: className });
     }
     else {
-        return (react_1.default.createElement(react_beautiful_dnd_1.Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided, snapshot) => {
-            return (react_1.default.createElement("div", Object.assign({}, provided.draggableProps, { ref: provided.innerRef, className: className }), getCombinatorEl(provided.dragHandleProps)));
+        return (React.createElement(Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided, snapshot) => {
+            return (React.createElement("div", Object.assign({}, provided.draggableProps, { ref: provided.innerRef, className: className }), getCombinatorEl(provided.dragHandleProps)));
         }));
     }
 };
 const PrimitiveFunctionEditor = (props) => {
     var _a;
     // [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const [columnExpression, ...restOfArgs] = props.predicate.args;
     const col = columnExpression;
     let columnId = null;
@@ -110,31 +106,31 @@ const PrimitiveFunctionEditor = (props) => {
     let restOfFunctionInputDataTypes = [];
     if (col) {
         if (typeof col !== 'string' || !col.includes('[')) {
-            return react_1.default.createElement(ErrorBox_1.default, null, "Expression must start with a column!");
+            return React.createElement(ErrorBox, null, "Expression must start with a column!");
         }
         columnId = col.replace(/[\[\]]/g, '');
         columnDataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(columnId);
-        columnInputDataType = (0, utils_1.mapColumnDataTypeToExpressionFunctionType)(columnDataType);
-        functionInputInputDataTypes = (_a = booleanExpressionFunctions_1.booleanExpressionFunctions[props.predicate.operator]) === null || _a === void 0 ? void 0 : _a.inputs;
+        columnInputDataType = mapColumnDataTypeToExpressionFunctionType(columnDataType);
+        functionInputInputDataTypes = (_a = booleanExpressionFunctions[props.predicate.operator]) === null || _a === void 0 ? void 0 : _a.inputs;
         restOfFunctionInputDataTypes = functionInputInputDataTypes
-            ? (0, utils_1.getOperatorMatchingInputs)(columnInputDataType, functionInputInputDataTypes)
+            ? getFunctionMatchingInputTypes(columnInputDataType, functionInputInputDataTypes)
             : [];
     }
     const level = props.id.split('/').length - 1;
-    return (react_1.default.createElement(react_beautiful_dnd_1.Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided) => {
-        return (react_1.default.createElement(rebass_1.Flex, Object.assign({ className: `
+    return (React.createElement(Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided) => {
+        return (React.createElement(Flex, Object.assign({ className: `
               ${BASE_CLASS_NAME} 
               ${BASE_CLASS_NAME}-level-${level}
               ${BASE_CLASS_NAME}-primitive
               ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}
             `, pb: 2, ref: provided.innerRef }, provided.draggableProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { minHeight: ITEM_HEIGHT }) }),
-            react_1.default.createElement(Handle, Object.assign({}, provided.dragHandleProps)),
-            react_1.default.createElement(rebass_1.Flex, { alignItems: "center", height: ITEM_HEIGHT },
-                react_1.default.createElement(rebass_1.Box, { mr: 2 },
-                    react_1.default.createElement(QueryBuilderInputs_1.PrimitiveColumnSelector, { onChange: (colId) => {
+            React.createElement(Handle, Object.assign({}, provided.dragHandleProps)),
+            React.createElement(Flex, { alignItems: "center", height: ITEM_HEIGHT },
+                React.createElement(Box, { mr: 2 },
+                    React.createElement(PrimitiveColumnSelector, { onChange: (colId) => {
                             props.onChange(Object.assign(Object.assign({}, props.predicate), { args: [colId], operator: null }));
                         }, columnId: columnId })),
-                columnId && columnDataType && (react_1.default.createElement(QueryBuilderInputs_1.ExpressionSelector, { dataType: columnDataType, onExpressionChange: (operator) => {
+                columnId && columnDataType && (React.createElement(ExpressionSelector, { dataType: columnDataType, onExpressionChange: (operator) => {
                         let args = [props.predicate.args[0]];
                         if (columnDataType === 'Boolean' && operator !== 'NOT') {
                             args = [props.predicate.args[0], 'TRUE'];
@@ -143,7 +139,7 @@ const PrimitiveFunctionEditor = (props) => {
                             // discard arguments
                             args }));
                     }, value: props.predicate.operator })),
-                react_1.default.createElement(rebass_1.Flex, { flex: 1, ml: 2 }, restOfFunctionInputDataTypes.map((type, index) => {
+                React.createElement(Flex, { flex: 1, ml: 2 }, restOfFunctionInputDataTypes.map((type, index) => {
                     var _a;
                     let value = restOfArgs[index];
                     const commonProps = {
@@ -152,20 +148,20 @@ const PrimitiveFunctionEditor = (props) => {
                         inputType: type,
                     };
                     if (type.includes('[]')) {
-                        return (react_1.default.createElement(QueryBuilderInputs_1.PrimitiveMultiValueInput, Object.assign({}, commonProps, { value: restOfArgs, onChange: (values) => {
+                        return (React.createElement(PrimitiveMultiValueInput, Object.assign({}, commonProps, { value: restOfArgs, onChange: (values) => {
                                 const args = [...props.predicate.args.slice(0, 1), ...values];
                                 props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
                             } })));
                     }
-                    return (react_1.default.createElement(QueryBuilderInputs_1.PrimiteValueInput, Object.assign({}, commonProps, { value: (_a = restOfArgs[index]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
+                    return (React.createElement(PrimiteValueInput, Object.assign({}, commonProps, { value: (_a = restOfArgs[index]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
                             const args = [...props.predicate.args];
                             // +1 because col is the first argument
                             args[index + 1] = value;
                             props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
                         } })));
                 }))),
-            react_1.default.createElement(rebass_1.Box, { flex: 1 }),
-            react_1.default.createElement(QueryPredicateButtons, Object.assign({}, props))));
+            React.createElement(Box, { flex: 1 }),
+            React.createElement(QueryPredicateButtons, Object.assign({}, props))));
     }));
 };
 /**
@@ -178,12 +174,11 @@ const PrimitiveFunctionEditor = (props) => {
  * - boolean function: ars do not contain other combinators
  * [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
  */
-const QueryPredicateBuilder = (props) => {
-    if ((0, predicate_1.isQlLogicalOperator)(props.predicate.operator)) {
-        return react_1.default.createElement(LogicalFunctionEditor, Object.assign({}, props));
+export const QueryPredicateBuilder = (props) => {
+    if (isQlLogicalOperator(props.predicate.operator)) {
+        return React.createElement(LogicalFunctionEditor, Object.assign({}, props));
     }
     else {
-        return react_1.default.createElement(PrimitiveFunctionEditor, Object.assign({}, props));
+        return React.createElement(PrimitiveFunctionEditor, Object.assign({}, props));
     }
 };
-exports.QueryPredicateBuilder = QueryPredicateBuilder;

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.booleanExpressionsAvailableInQueryBuilder = void 0;
-exports.booleanExpressionsAvailableInQueryBuilder = [
+export const booleanExpressionsAvailableInQueryBuilder = [
     'EQ',
     'NEQ',
     'GT',

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

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./QueryBuilder"), exports);
+export * from './QueryBuilder';

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

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getUnsuportedExpressionFromQlPredicate = exports.getFunctionsForColumnType = exports.getOperatorMatchingInputs = exports.mapExpressionFunctionTypeToColumnDataType = exports.mapColumnDataTypeToExpressionFunctionType = exports.reorder = void 0;
-const predicate_1 = require("../../../parser/src/predicate");
-const booleanExpressionFunctions_1 = require("../../../Utilities/ExpressionFunctions/booleanExpressionFunctions");
-const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
-const booleanExpressions_1 = require("./booleanExpressions");
-const reorder = (predicate, from, to) => {
-    const predicateCopy = (0, ObjectExtensions_1.deepClone)(predicate);
+import { isQlLogicalOperator } from '../../../parser/src/predicate';
+import { booleanExpressionFunctions } from '../../../Utilities/ExpressionFunctions/booleanExpressionFunctions';
+import { deepClone } from '../../../Utilities/Extensions/ObjectExtensions';
+import { booleanExpressionsAvailableInQueryBuilder } from './booleanExpressions';
+export const reorder = (predicate, from, to) => {
+    const predicateCopy = deepClone(predicate);
     // we start from the root so no need to traverse first level
     const [_, ...fromPath] = from.split('/');
     const [__, ...toPath] = to.split('/');
@@ -29,8 +26,7 @@ const reorder = (predicate, from, to) => {
     parent.args.splice(parseInt(toPath[toPath.length - 1]), 0, itemToMove);
     return predicateCopy;
 };
-exports.reorder = reorder;
-const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
+export const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
     if (dataType === 'Number') {
         return 'number';
     }
@@ -44,8 +40,7 @@ const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
         return 'date';
     }
 };
-exports.mapColumnDataTypeToExpressionFunctionType = mapColumnDataTypeToExpressionFunctionType;
-const mapExpressionFunctionTypeToColumnDataType = (type) => {
+export const mapExpressionFunctionTypeToColumnDataType = (type) => {
     if (type === 'number') {
         return 'Number';
     }
@@ -60,8 +55,7 @@ const mapExpressionFunctionTypeToColumnDataType = (type) => {
     }
     return undefined;
 };
-exports.mapExpressionFunctionTypeToColumnDataType = mapExpressionFunctionTypeToColumnDataType;
-const getOperatorMatchingInputs = (columnType, inputs) => {
+export const getOperatorMatchingInputs = (columnType, inputs) => {
     if (Array.isArray(inputs[0])) {
         const matchingInput = inputs.find((input) => input[0] === columnType);
         const [_, ...restOfArgs] = matchingInput;
@@ -70,14 +64,13 @@ const getOperatorMatchingInputs = (columnType, inputs) => {
     const [_, ...restOfArgs] = inputs;
     return restOfArgs;
 };
-exports.getOperatorMatchingInputs = getOperatorMatchingInputs;
-const getFunctionsForColumnType = (dataType, availableBooleanFunctions) => {
-    const columnType = (0, exports.mapColumnDataTypeToExpressionFunctionType)(dataType);
-    return booleanExpressions_1.booleanExpressionsAvailableInQueryBuilder.filter((boolFnName) => {
+export const getFunctionsForColumnType = (dataType, availableBooleanFunctions) => {
+    const columnType = mapColumnDataTypeToExpressionFunctionType(dataType);
+    return booleanExpressionsAvailableInQueryBuilder.filter((boolFnName) => {
         if (!availableBooleanFunctions.includes(boolFnName)) {
             return false;
         }
-        const functionDef = booleanExpressionFunctions_1.booleanExpressionFunctions[boolFnName];
+        const functionDef = booleanExpressionFunctions[boolFnName];
         const inputs = functionDef.inputs;
         let matchingInputTypes = [];
         if (inputs && Array.isArray(inputs[0])) {
@@ -89,8 +82,7 @@ const getFunctionsForColumnType = (dataType, availableBooleanFunctions) => {
         return (matchingInputTypes === null || matchingInputTypes === void 0 ? void 0 : matchingInputTypes[0]) === columnType;
     });
 };
-exports.getFunctionsForColumnType = getFunctionsForColumnType;
-const getUnsuportedExpressionFromQlPredicate = (predicate) => {
+export const getUnsuportedExpressionFromQlPredicate = (predicate) => {
     if (!predicate) {
         return null;
     }
@@ -100,8 +92,8 @@ const getUnsuportedExpressionFromQlPredicate = (predicate) => {
     if (typeof predicate !== 'object' || !('operator' in predicate) || !predicate.operator) {
         return null;
     }
-    if (!(0, predicate_1.isQlLogicalOperator)(predicate.operator) &&
-        !booleanExpressions_1.booleanExpressionsAvailableInQueryBuilder.includes(predicate.operator)) {
+    if (!isQlLogicalOperator(predicate.operator) &&
+        !booleanExpressionsAvailableInQueryBuilder.includes(predicate.operator)) {
         return `${predicate.operator} is not supported in the Query Builder`;
     }
     if (predicate.args.length === 0) {
@@ -109,7 +101,7 @@ const getUnsuportedExpressionFromQlPredicate = (predicate) => {
     }
     let firstInvalidArg = null;
     for (let arg of predicate.args) {
-        firstInvalidArg = (0, exports.getUnsuportedExpressionFromQlPredicate)(arg);
+        firstInvalidArg = getUnsuportedExpressionFromQlPredicate(arg);
         if (firstInvalidArg) {
             break;
         }
@@ -119,4 +111,3 @@ const getUnsuportedExpressionFromQlPredicate = (predicate) => {
     }
     return null;
 };
-exports.getUnsuportedExpressionFromQlPredicate = getUnsuportedExpressionFromQlPredicate;

package/src/components/ExpressionEditor/editorButtonsAggregatedBoolean.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsAggregatedBoolean = void 0;
-exports.editorButtonsAggregatedBoolean = [
+export const editorButtonsAggregatedBoolean = [
     {
         functionName: 'SUM',
         data: 'SUM()',

package/src/components/ExpressionEditor/editorButtonsAggregatedScalar.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsAggregatedScalar = void 0;
-exports.editorButtonsAggregatedScalar = [
+export const editorButtonsAggregatedScalar = [
     {
         functionName: 'SUM',
         data: 'SUM()',

package/src/components/ExpressionEditor/editorButtonsCumulativeAggregatedScalar.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsCumulativeAggregatedScalar = void 0;
-exports.editorButtonsCumulativeAggregatedScalar = [
+export const editorButtonsCumulativeAggregatedScalar = [
     {
         functionName: 'CUMUL',
         data: 'CUMUL()',

package/src/components/ExpressionEditor/editorButtonsObservable.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsObservable = void 0;
-exports.editorButtonsObservable = [
+export const editorButtonsObservable = [
     {
         functionName: 'ROW_CHANGE',
         data: 'ROW_CHANGE()',

package/src/components/ExpressionEditor/editorButtonsQuantileAggregatedScalar.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsQuantileAggregatedScalar = void 0;
-exports.editorButtonsQuantileAggregatedScalar = [
+export const editorButtonsQuantileAggregatedScalar = [
     {
         functionName: 'QUANT',
         data: 'QUANT()',

package/src/components/ExpressionEditor/editorButtonsSearch.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.editorButtonsSearch = void 0;
-exports.editorButtonsSearch = [
+export const editorButtonsSearch = [
     {
         functionName: 'AND',
         data: 'AND',