@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.10

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

@@ -1,38 +1,52 @@
-import * as React from 'react';
-import { DragDropContext } from 'react-beautiful-dnd';
-import { Box } from 'rebass';
-import { mapExpressionToQlPredicate, } from '../../../parser/src/predicate';
-import { mapQlPredicateToExpression } from '../../../parser/src/predicate/mapQlPredicateToExpression';
-import { useAdaptable } from '../../../View/AdaptableContext';
-import ErrorBox from '../../ErrorBox';
-import HelpBlock from '../../HelpBlock';
-import Panel from '../../Panel';
-import { QueryPredicateBuilder } from './QueryPredicateBuilder';
-import { getFunctionsForColumnType, reorder } from './utils';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryBuilder = exports.useQueryBuilderContext = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const rebass_1 = require("rebass");
+const predicate_1 = require("../../../parser/src/predicate");
+const mapQlPredicateToExpression_1 = require("../../../parser/src/predicate/mapQlPredicateToExpression");
+const AdaptableContext_1 = require("../../../View/AdaptableContext");
+const ErrorBox_1 = tslib_1.__importDefault(require("../../ErrorBox"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../HelpBlock"));
+const Panel_1 = tslib_1.__importDefault(require("../../Panel"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../SimpleButton"));
+const WarningBox_1 = require("../../WarningBox");
+const QueryPredicateBuilder_1 = require("./QueryPredicateBuilder");
+const utils_1 = require("./utils");
 const QUERY_BUILDER_CLASSNAME = 'ab-QueryBuilder';
 const QueryBuilderContext = React.createContext(null);
-export function useQueryBuilderContext() {
+function useQueryBuilderContext() {
     const context = React.useContext(QueryBuilderContext);
     if (!context) {
         throw new Error('useQueryBuilderContext must be used within a QueryBuilderContext');
     }
     return context;
 }
-export const QueryBuilder = (props) => {
-    const adaptable = useAdaptable();
+exports.useQueryBuilderContext = useQueryBuilderContext;
+const QueryBuilder = (props) => {
+    var _a, _b;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [qlPredicate, setQlPredicate] = React.useState(() => {
-        const qlPredicate = mapExpressionToQlPredicate(props.query);
+        const qlPredicate = (0, predicate_1.mapExpressionToQlPredicate)(props.query);
         return qlPredicate;
     });
     const [expressionStr, setExpressionStr] = React.useState(props.query);
     const handleQlPredicateChange = (qlPredicate) => {
         setQlPredicate(qlPredicate);
         if (qlPredicate && !('errorMessage' in qlPredicate)) {
-            const newQuery = mapQlPredicateToExpression(qlPredicate);
+            const newQuery = (0, mapQlPredicateToExpression_1.mapQlPredicateToExpression)(qlPredicate);
             props.onChange(newQuery);
             setExpressionStr(newQuery);
         }
     };
+    const clearExpression = () => {
+        const predicate = (0, predicate_1.mapExpressionToQlPredicate)('');
+        setQlPredicate(predicate);
+        setExpressionStr('');
+        props.onChange('');
+    };
     const booleanExpressions = React.useMemo(() => {
         const expressionMap = adaptable.api.internalApi
             .getQueryLanguageService()
@@ -48,35 +62,57 @@ export const QueryBuilder = (props) => {
             getFields: props.getColumns,
             getExpressions: (columnType) => {
                 return booleanExpressions
-                    ? getFunctionsForColumnType(columnType, Object.keys(booleanExpressions))
+                    ? (0, utils_1.getFunctionsForColumnType)(columnType, Object.keys(booleanExpressions))
                     : [];
             },
             onQlPredicateChange: handleQlPredicateChange,
         };
     }, []);
-    return (React.createElement(DragDropContext, { onDragEnd: (result) => {
+    const clearExpressionButton = (React.createElement(SimpleButton_1.default, { onClick: () => {
+            clearExpression();
+        } }, "Clear Expression"));
+    const unsupportedExpressionFunction = (0, utils_1.getUnsuportedExpressionFromQlPredicate)(qlPredicate);
+    let errorOrEditor = null;
+    if (qlPredicate && 'errorMessage' in qlPredicate) {
+        errorOrEditor = ((_b = (_a = props.query) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, 'QUERY')) ? (React.createElement(WarningBox_1.WarningBox, null,
+            React.createElement(rebass_1.Flex, { alignItems: "center" },
+                "Named Queries are not supported in the Query Builder",
+                React.createElement(rebass_1.Box, { flex: 1 }),
+                clearExpressionButton))) : (React.createElement(ErrorBox_1.default, null,
+            React.createElement(rebass_1.Flex, null,
+                qlPredicate.errorMessage,
+                React.createElement(rebass_1.Box, { flex: 1 }),
+                clearExpressionButton)));
+    }
+    else if (unsupportedExpressionFunction) {
+        errorOrEditor = React.createElement(WarningBox_1.WarningBox, null, unsupportedExpressionFunction);
+    }
+    else if (qlPredicate && !('errorMessage' in qlPredicate)) {
+        errorOrEditor = (React.createElement(QueryPredicateBuilder_1.QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
+                // add to its children
+                const newPredicate = {
+                    operator: type === 'filter' ? undefined : 'AND',
+                    args: [],
+                };
+                handleQlPredicateChange(Object.assign(Object.assign({}, qlPredicate), { args: [...qlPredicate.args, newPredicate] }));
+            }, onChange: (predicate) => {
+                handleQlPredicateChange(predicate);
+            } }));
+    }
+    return (React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: (result) => {
             if (!result.destination) {
                 return;
             }
             const toPath = `${result.destination.droppableId}/${result.destination.index}`;
             const fromPath = result.draggableId;
-            const predicate = reorder(qlPredicate, fromPath, toPath);
+            const predicate = (0, utils_1.reorder)(qlPredicate, fromPath, toPath);
             handleQlPredicateChange(predicate);
         } },
         React.createElement(QueryBuilderContext.Provider, { value: context },
-            React.createElement(Box, { className: QUERY_BUILDER_CLASSNAME },
-                React.createElement(HelpBlock, { mt: 2, mb: 2, p: 2, fontSize: 3 }, "Create a Grid Filter by adding as many Conditions and AND / OR Groups as required.          "),
-                qlPredicate &&
-                    ('errorMessage' in qlPredicate ? (React.createElement(ErrorBox, null, qlPredicate.errorMessage)) : (React.createElement(QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
-                            // add to its children
-                            const newPredicate = {
-                                operator: type === 'filter' ? undefined : 'AND',
-                                args: [],
-                            };
-                            handleQlPredicateChange(Object.assign(Object.assign({}, qlPredicate), { args: [...qlPredicate.args, newPredicate] }));
-                        }, onChange: (predicate) => {
-                            handleQlPredicateChange(predicate);
-                        } }))),
-                React.createElement(Panel, { variant: "default", header: "AdapTableQL Expression", mt: 3 },
-                    React.createElement(Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression`, minHeight: 48, my: 2, p: 3 }, expressionStr !== null && expressionStr !== void 0 ? expressionStr : ' '))))));
+            React.createElement(rebass_1.Box, { className: QUERY_BUILDER_CLASSNAME },
+                React.createElement(HelpBlock_1.default, { "data-name": "query-builder-help", mt: 2, mb: 2, p: 2, fontSize: 3 }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
+                errorOrEditor,
+                React.createElement(Panel_1.default, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", mt: 3 },
+                    React.createElement(rebass_1.Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression`, minHeight: 48, my: 2, p: 3 }, expressionStr || 'Outputted Expression will display here'))))));
 };
+exports.QueryBuilder = QueryBuilder;

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

@@ -2,15 +2,26 @@
 import { QlLogicalOperator } from '../../../parser/src/predicate';
 import { ExpressionFunctionInputType } from '../../../parser/src/types';
 import { AdaptableColumn, AdaptableColumnDataType, BooleanFunctionName } from '../../../types';
-export declare const ColumnSelector: (props: {
+export declare const PrimitiveColumnSelector: (props: {
     columnId: string;
     type?: AdaptableColumnDataType;
     onChange: (colId: string) => void;
 }) => JSX.Element;
 export declare const PrimiteValueInput: (props: {
-    type: ExpressionFunctionInputType;
+    inputType: ExpressionFunctionInputType;
     value: any;
     onChange(value: any): void;
+    /**
+     * We use this to retrieve values, we consider only the values
+     * of the column which is selected in lefthand of the expression
+     */
+    lefthandColumnIdParam: string;
+}) => JSX.Element;
+export declare const PrimitiveMultiValueInput: (props: {
+    inputType: ExpressionFunctionInputType;
+    value: any[];
+    onChange(values: any[]): void;
+    lefthandColumnIdParam: string;
 }) => JSX.Element;
 export declare const ExpressionSelector: (props: {
     value: BooleanFunctionName;

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

@@ -1,27 +1,34 @@
-import React from 'react';
-import { Flex } from 'rebass';
-import { getQlPredicateSymbol } from '../../../parser/src/predicate/mapQlPredicateToExpression';
-import AdaptableInput from '../../../View/Components/AdaptableInput';
-import { CheckBox } from '../../CheckBox';
-import DropdownButton from '../../DropdownButton';
-import { useQueryBuilderContext } from './QueryBuilder';
-import { mapExpressionFunctionTypeToColumnDataType } from './utils';
-export const ColumnSelector = (props) => {
-    var _a, _b;
-    const { getFields } = useQueryBuilderContext();
-    const options = getFields(props.type).map((field) => (Object.assign(Object.assign({}, field), { onClick: () => {
-            if (field.value !== props.columnId) {
-                props.onChange(`[${field.value}]`);
-            }
-        } })));
-    const friendlyName = (_b = (_a = options.find((o) => o.value === props.columnId)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : props.columnId;
-    return (React.createElement(DropdownButton, { "data-id": "column-selector", "data-value": props.columnId, variant: "raised", tone: "none", columns: ['label'], items: options }, friendlyName !== null && friendlyName !== void 0 ? friendlyName : 'Select Column'));
+"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) => {
+                props.onChange(`[${columnId}]`);
+            } })));
 };
-export const PrimiteValueInput = (props) => {
+exports.PrimitiveColumnSelector = PrimitiveColumnSelector;
+const PrimiteValueInput = (props) => {
     var _a, _b;
-    const [type, setType] = React.useState(() => {
+    const [type, setType] = react_1.default.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' : 'value';
+        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'
+            : 'input-value';
     });
     const handleTypeChange = (newType) => {
         if (type !== newType) {
@@ -32,11 +39,14 @@ export const PrimiteValueInput = (props) => {
     };
     const getEditor = () => {
         var _a, _b;
-        switch (props.type) {
+        const common = {
+            'data-id': 'query-input',
+        };
+        switch (props.inputType) {
             case 'boolean':
-                return React.createElement(CheckBox, { checked: props.value, onChange: () => props.onChange(!props.value) });
+                return (react_1.default.createElement(CheckBox_1.CheckBox, Object.assign({}, common, { checked: props.value, onChange: () => props.onChange(!props.value) })));
             case 'number':
-                return (React.createElement(AdaptableInput, { type: "number", value: (_a = props.value) !== null && _a !== void 0 ? _a : '', onChange: (event) => {
+                return (react_1.default.createElement(AdaptableInput_1.default, 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);
@@ -44,60 +54,84 @@ export const PrimiteValueInput = (props) => {
                         else {
                             props.onChange(parseFloat(value));
                         }
-                    } }));
+                    } })));
             case 'text':
-                return (React.createElement(AdaptableInput, { type: "text", value: (_b = props.value) !== null && _b !== void 0 ? _b : '', onChange: (event) => {
+                return (react_1.default.createElement(AdaptableInput_1.default, 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.createElement(AdaptableInput, { type: "date", value: dateStr !== null && dateStr !== void 0 ? dateStr : '', onChange: (event) => {
+                return (react_1.default.createElement(AdaptableInput_1.default, 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.createElement(React.Fragment, null);
+                return react_1.default.createElement(react_1.default.Fragment, null);
         }
     };
     let editor = null;
-    if (type === 'column') {
+    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 = mapExpressionFunctionTypeToColumnDataType(props.type);
-        editor = (React.createElement(ColumnSelector, { columnId: columnId, onChange: (col) => props.onChange(col), type: abColType }));
+        const abColType = (0, utils_1.mapExpressionFunctionTypeToColumnDataType)(props.inputType);
+        editor = (react_1.default.createElement(exports.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) => {
+                props.onChange(value);
+            } }));
     }
     else {
         editor = getEditor();
     }
-    return (React.createElement(Flex, { "data-id": "query-input-wrapper", mr: 2 },
-        React.createElement(DropdownButton, { mr: 2, "data-id": "input-type-selector", columns: ['label'], items: [
-                {
-                    label: 'Column',
-                    onClick: () => handleTypeChange('column'),
-                },
-                {
-                    label: 'Value',
-                    onClick: () => handleTypeChange('value'),
-                },
-            ] }, type === 'column' ? 'Column' : 'Value'),
+    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"))),
+            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"))),
+            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, { rederSingleValue: (value) => {
+                return (react_1.default.createElement(react_1.default.Fragment, null, typeOption.value === 'column-name' ? react_1.default.createElement(icons_1.Icon, { name: "grid" }) : react_1.default.createElement(icons_1.Icon, { name: "edit" })));
+            }, value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) }),
         editor));
 };
-export const ExpressionSelector = (props) => {
+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) => {
+            props.onChange(value);
+        } }));
+};
+exports.PrimitiveMultiValueInput = PrimitiveMultiValueInput;
+const ExpressionSelector = (props) => {
     var _a;
-    const { getExpressions } = useQueryBuilderContext();
+    const { getExpressions } = (0, QueryBuilder_1.useQueryBuilderContext)();
     const expressions = props.dataType ? getExpressions(props.dataType) : [];
-    return (React.createElement(DropdownButton, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", columns: ['label'], items: expressions.map((expression) => ({
-            label: getQlPredicateSymbol(expression),
+    return (react_1.default.createElement(DropdownButton_1.default, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", columns: ['label'], items: expressions.map((expression) => ({
+            label: (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(expression),
             onClick: () => {
                 if (expression !== props.value) {
                     props.onExpressionChange(expression);
                 }
             },
-        })) }, (_a = getQlPredicateSymbol(props.value)) !== null && _a !== void 0 ? _a : 'Select Operator'));
+        })) }, (_a = (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(props.value)) !== null && _a !== void 0 ? _a : '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: [
+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: [
             { label: 'AND', onClick: () => props.onChange('AND') },
             { label: 'OR', onClick: () => props.onChange('OR') },
         ] }, props.value));
 };
+exports.CombinatorSelector = CombinatorSelector;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { QlPredicate } from '../../../parser/src/predicate';
-export declare type QueryPredicateProps = {
+export type QueryPredicateProps = {
     predicate: QlPredicate;
     index?: number;
     id: string;

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

@@ -1,27 +1,31 @@
-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 { ColumnSelector, CombinatorSelector, ExpressionSelector, PrimiteValueInput, } from './QueryBuilderInputs';
-import { getOperatorMatchingInputs as getFunctionMatchingInputTypes, mapColumnDataTypeToExpressionFunctionType, } from './utils';
+"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");
 const ITEM_HEIGHT = 40;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
-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 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 QueryPredicateButtons = (props) => {
-    return (React.createElement(React.Fragment, null,
-        !props.hideAdd && (React.createElement(DropdownButton, { columns: ['label'], items: [
-                { label: 'Add Condition', onClick: () => props.onNewPredicate('filter') },
-                { label: 'Add Group', onClick: () => props.onNewPredicate('group') },
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        !props.hideAdd && (react_1.default.createElement(DropdownButton_1.default, { 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.createElement(Icon, { name: "plus" }))),
-        !props.hideDelete && (React.createElement(SimpleButton, { icon: "delete", variant: "text", onClick: () => {
+            react_1.default.createElement(icons_1.Icon, { name: "plus" }))),
+        !props.hideDelete && (react_1.default.createElement(SimpleButton_1.default, { icon: "delete", variant: "text", onClick: () => {
                 props.onChange(null);
             } }))));
 };
@@ -34,27 +38,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.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) => {
+    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) => {
                             props.onChange(Object.assign(Object.assign({}, props.predicate), { operator: combinator }));
                         } }),
-                    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` },
+                    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` },
                 props.predicate.args.map((arg, index) => {
                     const id = `${props.id}/${index}`;
-                    return (React.createElement(QueryPredicateBuilder, { key: id, lastChild: index === props.predicate.args.length - 1, index: index, id: id, predicate: arg, onNewPredicate: (type) => {
+                    return (react_1.default.createElement(exports.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 &&
-                                isQlLogicalOperator(arg.operator)) {
+                                (0, predicate_1.isQlLogicalOperator)(arg.operator)) {
                                 // add as a child
                                 const newArg = Object.assign(Object.assign({}, arg), { args: [...arg.args, newPredicate] });
                                 const args = [...props.predicate.args];
@@ -79,22 +83,22 @@ const LogicalFunctionEditor = (props) => {
                         } }));
                 }),
                 provided.placeholder,
-                React.createElement("div", { className: `${BASE_CLASS_NAME}__root-actions` },
-                    React.createElement(QueryPredicateButtons, Object.assign({}, props, { hideDelete: true }))))));
+                react_1.default.createElement("div", { className: `${BASE_CLASS_NAME}__root-actions` },
+                    react_1.default.createElement(QueryPredicateButtons, Object.assign({}, props, { hideDelete: true }))))));
     }));
     if (props.isRoot) {
         return getCombinatorEl({ className: className });
     }
     else {
-        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)));
+        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)));
         }));
     }
 };
 const PrimitiveFunctionEditor = (props) => {
     var _a;
     // [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [columnExpression, ...restOfArgs] = props.predicate.args;
     const col = columnExpression;
     let columnId = null;
@@ -106,31 +110,31 @@ const PrimitiveFunctionEditor = (props) => {
     let restOfFunctionInputDataTypes = [];
     if (col) {
         if (typeof col !== 'string' || !col.includes('[')) {
-            return React.createElement(ErrorBox, null, "Expression must start with a column!");
+            return react_1.default.createElement(ErrorBox_1.default, null, "Expression must start with a column!");
         }
         columnId = col.replace(/[\[\]]/g, '');
         columnDataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(columnId);
-        columnInputDataType = mapColumnDataTypeToExpressionFunctionType(columnDataType);
-        functionInputInputDataTypes = (_a = booleanExpressionFunctions[props.predicate.operator]) === null || _a === void 0 ? void 0 : _a.inputs;
+        columnInputDataType = (0, utils_1.mapColumnDataTypeToExpressionFunctionType)(columnDataType);
+        functionInputInputDataTypes = (_a = booleanExpressionFunctions_1.booleanExpressionFunctions[props.predicate.operator]) === null || _a === void 0 ? void 0 : _a.inputs;
         restOfFunctionInputDataTypes = functionInputInputDataTypes
-            ? getFunctionMatchingInputTypes(columnInputDataType, functionInputInputDataTypes)
+            ? (0, utils_1.getOperatorMatchingInputs)(columnInputDataType, functionInputInputDataTypes)
             : [];
     }
     const level = props.id.split('/').length - 1;
-    return (React.createElement(Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided) => {
-        return (React.createElement(Flex, Object.assign({ className: `
+    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: `
               ${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.createElement(Handle, Object.assign({}, provided.dragHandleProps)),
-            React.createElement(Flex, { alignItems: "center", height: ITEM_HEIGHT },
-                React.createElement(Box, { mr: 2 },
-                    React.createElement(ColumnSelector, { onChange: (colId) => {
+            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) => {
                             props.onChange(Object.assign(Object.assign({}, props.predicate), { args: [colId], operator: null }));
                         }, columnId: columnId })),
-                columnId && columnDataType && (React.createElement(ExpressionSelector, { dataType: columnDataType, onExpressionChange: (operator) => {
+                columnId && columnDataType && (react_1.default.createElement(QueryBuilderInputs_1.ExpressionSelector, { dataType: columnDataType, onExpressionChange: (operator) => {
                         let args = [props.predicate.args[0]];
                         if (columnDataType === 'Boolean' && operator !== 'NOT') {
                             args = [props.predicate.args[0], 'TRUE'];
@@ -139,17 +143,29 @@ const PrimitiveFunctionEditor = (props) => {
                             // discard arguments
                             args }));
                     }, value: props.predicate.operator })),
-                React.createElement(Flex, { flex: 1, ml: 2 }, restOfFunctionInputDataTypes.map((type, index) => {
+                react_1.default.createElement(rebass_1.Flex, { flex: 1, ml: 2 }, restOfFunctionInputDataTypes.map((type, index) => {
                     var _a;
-                    return (React.createElement(PrimiteValueInput, { key: type + index, type: type, value: (_a = restOfArgs[index]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
+                    let value = restOfArgs[index];
+                    const commonProps = {
+                        key: type + index,
+                        lefthandColumnIdParam: columnId,
+                        inputType: type,
+                    };
+                    if (type.includes('[]')) {
+                        return (react_1.default.createElement(QueryBuilderInputs_1.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) => {
                             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.createElement(Box, { flex: 1 }),
-            React.createElement(QueryPredicateButtons, Object.assign({}, props))));
+            react_1.default.createElement(rebass_1.Box, { flex: 1 }),
+            react_1.default.createElement(QueryPredicateButtons, Object.assign({}, props))));
     }));
 };
 /**
@@ -162,11 +178,12 @@ const PrimitiveFunctionEditor = (props) => {
  * - boolean function: ars do not contain other combinators
  * [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
  */
-export const QueryPredicateBuilder = (props) => {
-    if (isQlLogicalOperator(props.predicate.operator)) {
-        return React.createElement(LogicalFunctionEditor, Object.assign({}, props));
+const QueryPredicateBuilder = (props) => {
+    if ((0, predicate_1.isQlLogicalOperator)(props.predicate.operator)) {
+        return react_1.default.createElement(LogicalFunctionEditor, Object.assign({}, props));
     }
     else {
-        return React.createElement(PrimitiveFunctionEditor, Object.assign({}, props));
+        return react_1.default.createElement(PrimitiveFunctionEditor, Object.assign({}, props));
     }
 };
+exports.QueryPredicateBuilder = QueryPredicateBuilder;

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

@@ -1,4 +1,7 @@
-export const booleanExpressionsAvailableInQueryBuilder = [
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.booleanExpressionsAvailableInQueryBuilder = void 0;
+exports.booleanExpressionsAvailableInQueryBuilder = [
     'EQ',
     'NEQ',
     'GT',
@@ -9,4 +12,7 @@ export const booleanExpressionsAvailableInQueryBuilder = [
     'CONTAINS',
     'STARTS_WITH',
     'ENDS_WITH',
+    'IS_HOLIDAY',
+    'IS_WORKDAY',
+    'IN',
 ];

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

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