@adaptabletools/adaptable-cjs 17.0.0-canary.3 → 18.0.0-canary.0

package/src/agGrid/agGridMenuHelper.js

@@ -13,11 +13,49 @@ class agGridMenuHelper {
     constructor(adaptable, gridOptions) {
         this.adaptable = adaptable;
         this.gridOptions = gridOptions;
+        this.buildGroupedModuleItems = (sortedMenuItems, adaptableMenuItems) => {
+            return sortedMenuItems
+                .map((moduleOrGroup) => {
+                if (typeof moduleOrGroup === 'object') {
+                    const submenuItems = this.buildGroupedModuleItems(moduleOrGroup.modules, adaptableMenuItems);
+                    // if there is only one item in the submenu, we don't need to show the submenu
+                    if (submenuItems.length === 1) {
+                        return submenuItems[0];
+                    }
+                    return {
+                        label: moduleOrGroup.title,
+                        icon: moduleOrGroup.icon,
+                        subItems: submenuItems,
+                    };
+                }
+                else {
+                    return adaptableMenuItems.find((menuItem) => menuItem.module === moduleOrGroup);
+                }
+            })
+                .filter((menuItem) => {
+                if (!menuItem) {
+                    return false;
+                }
+                if (menuItem.subItems && menuItem.subItems.length === 0) {
+                    return false;
+                }
+                return true;
+            });
+        };
     }
     destroy() {
         this.adaptable = null;
         this.gridOptions = null;
     }
+    mapAdaptableMenuItemToSystemMenuItems(adaptableMenuItems) {
+        return (adaptableMenuItems !== null && adaptableMenuItems !== void 0 ? adaptableMenuItems : []).map((menuItem) => {
+            let subItems = menuItem.subItems;
+            if (subItems && subItems.length > 0) {
+                subItems = subItems.map((subItem) => this.mapAdaptableMenuItemToSystemMenuItems(subItem.subItems));
+            }
+            return Object.assign(Object.assign({}, menuItem), { menuType: 'Adaptable', subItems });
+        });
+    }
     buildColumnMenu(params, originalGetMainMenuItems) {
         var _a;
         const menuOptions = this.adaptable.adaptableOptions.menuOptions;
@@ -31,11 +69,7 @@ class agGridMenuHelper {
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
         const adaptableMenuItems = this.createAdaptableColumnMenuItems(menuContext);
         // sort Adaptable menu items by default order
-        adaptableMenuItems.sort((first, second) => {
-            const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER.indexOf(first.module);
-            const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER.indexOf(second.module);
-            return firstPriority - secondPriority;
-        });
+        const structuredAdaptableMenuItems = this.buildGroupedModuleItems(MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER, adaptableMenuItems);
         // 1. first check if there is a custom column menu defined
         if (typeof menuOptions.customColumnMenu === 'function') {
             const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
@@ -45,7 +79,7 @@ class agGridMenuHelper {
             const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
             const customMenuItems = menuOptions
                 .customColumnMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
-                defaultAdaptableMenuItems }))
+                defaultAdaptableMenuItems, structuredAdaptableMenuItems: this.mapAdaptableMenuItemToSystemMenuItems(structuredAdaptableMenuItems) }))
                 .filter(Boolean);
             return customMenuItems
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
@@ -58,7 +92,7 @@ class agGridMenuHelper {
         const defaultContextMenu = [
             ...agGridMenuItems,
             'separator',
-            ...adaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
+            ...structuredAdaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
         return defaultContextMenu;
     }
@@ -78,11 +112,7 @@ class agGridMenuHelper {
         const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
         const adaptableMenuItems = this.createAdaptableContextMenuItems(menuContext);
         // sort Adaptable menu items by default order
-        adaptableMenuItems.sort((first, second) => {
-            const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(first.module);
-            const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(second.module);
-            return firstPriority - secondPriority;
-        });
+        const structuredAdaptableMenuItems = this.buildGroupedModuleItems(MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_STRUCTURE, adaptableMenuItems);
         // 1. first check if there is a custom context menu defined
         if (typeof menuOptions.customContextMenu === 'function') {
             const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
@@ -92,7 +122,7 @@ class agGridMenuHelper {
             const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
             const customMenuItems = menuOptions
                 .customContextMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
-                defaultAdaptableMenuItems }))
+                defaultAdaptableMenuItems, structuredAdaptableMenuItems: this.mapAdaptableMenuItemToSystemMenuItems(structuredAdaptableMenuItems) }))
                 .filter(Boolean);
             return customMenuItems
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
@@ -105,7 +135,7 @@ class agGridMenuHelper {
         const defaultContextMenu = [
             ...agGridMenuItems,
             'separator',
-            ...adaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
+            ...structuredAdaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
         return defaultContextMenu;
     }
@@ -346,12 +376,30 @@ class agGridMenuHelper {
         let isSingleSelectedColumn = false;
         let isSelectedCell = false;
         let isSelectedRow = false;
-        let clickedCell = undefined;
-        if (adaptableColumn) {
-            clickedCell = this.adaptable.getGridCellFromRowNode(params.node, adaptableColumn.columnId);
+        // row group columns dont provide an AdapTable Column so return bare minimum
+        if (!adaptableColumn) {
+            return {
+                isSelectedCell: false,
+                isSelectedRow: false,
+                gridCell: undefined,
+                adaptableColumn: undefined,
+                agGridColumn: params.column,
+                rowNode: params.node,
+                isGroupedNode: params.node ? params.node.group : false,
+                isSingleSelectedColumn: false,
+                isSingleSelectedCell: false,
+                primaryKeyValue: undefined,
+                adaptableApi: this.adaptable.api,
+                userName: this.adaptable.adaptableOptions.userName,
+                adaptableId: this.adaptable.adaptableOptions.adaptableId,
+                selectedCellInfo: undefined,
+                selectedRowInfo: undefined,
+                isRowGroupColumn: this.adaptable.api.columnApi.isAutoRowGroupColumn(params.column.getColId()),
+            };
         }
-        let selectedCellInfo = this.adaptable.api.gridApi.getSelectedCellInfo();
-        if (clickedCell && selectedCellInfo) {
+        const clickedCell = this.adaptable.getGridCellFromRowNode(params.node, adaptableColumn.columnId);
+        const selectedCellInfo = this.adaptable.api.gridApi.getSelectedCellInfo();
+        if (selectedCellInfo) {
             let matchedCell = selectedCellInfo.gridCells.find((gc) => gc != null &&
                 gc.column == clickedCell.column &&
                 gc.primaryKeyValue == clickedCell.primaryKeyValue);
@@ -360,9 +408,9 @@ class agGridMenuHelper {
                 isSingleSelectedColumn = ArrayExtensions_1.ArrayExtensions.CorrectLength(selectedCellInfo.columns, 1);
             }
         }
-        let selectedRowInfo = this.adaptable.api.gridApi.getSelectedRowInfo();
+        const selectedRowInfo = this.adaptable.api.gridApi.getSelectedRowInfo();
         if (selectedRowInfo) {
-            let matchedPKValue = selectedRowInfo.gridRows.find((gr) => gr != null && gr.primaryKeyValue == clickedCell.primaryKeyValue);
+            const matchedPKValue = selectedRowInfo.gridRows.find((gr) => gr != null && gr.primaryKeyValue == clickedCell.primaryKeyValue);
             isSelectedRow = matchedPKValue != null;
         }
         return {
@@ -395,8 +443,8 @@ class agGridMenuHelper {
     }
     createAdaptableContextMenuItems(menuContext) {
         let contextMenuItems = [];
-        this.adaptable.adaptableModules.forEach((s) => {
-            let menuItems = s.addContextMenuItems(menuContext);
+        this.adaptable.adaptableModules.forEach((module) => {
+            let menuItems = module.addContextMenuItems(menuContext);
             if (menuItems) {
                 contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
             }
@@ -537,8 +585,8 @@ class agGridMenuHelper {
                 adaptableMenuItems.push(...allAdaptableMenuItems);
             }
             adaptableMenuItems.sort((first, second) => {
-                const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(first.module);
-                const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(second.module);
+                const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_STRUCTURE.indexOf(first.module);
+                const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_STRUCTURE.indexOf(second.module);
                 return firstPriority - secondPriority;
             });
             // }

package/src/components/Datepicker/index.js

@@ -17,13 +17,13 @@ const DatepickerContext_1 = require("./DatepickerContext");
 const addDays_1 = tslib_1.__importDefault(require("date-fns/addDays"));
 const addBusinessDays_1 = tslib_1.__importDefault(require("date-fns/addBusinessDays"));
 const react_day_picker_1 = require("react-day-picker");
-const DatepickerOverlay = ({ onHide, children, onKeyDown, }) => {
+const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
     const domRef = React.useRef(null);
     React.useEffect(() => {
         var _a;
         (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, tabIndex: -1, onKeyDown: onKeyDown, onBlur: (e) => {
+    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
             var _a;
             const { relatedTarget } = e;
             const node = domRef.current;
@@ -87,7 +87,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
     return (React.createElement(rebass_1.Flex, null,
-        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onHide: () => setVisible(false), onKeyDown: (e) => {
+        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);
                     }
@@ -97,7 +97,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
                     borderRadius: style === null || style === void 0 ? void 0 : style.borderRadius,
                     width: style === null || style === void 0 ? void 0 : style.width,
                     maxWidth: style === null || style === void 0 ? void 0 : style.maxWidth,
-                }, onFocus: () => {
+                }, className: "ab-Datepicker", onFocus: () => {
                     if (!visible) {
                         setVisible(true);
                     }

package/src/components/ExpressionEditor/ExpressionPreview.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AdaptableQuery } from '../../types';
+interface ExpressionPreviewProps {
+    query: AdaptableQuery;
+}
+export declare const ExpressionPreview: React.FunctionComponent<ExpressionPreviewProps>;
+export {};

package/src/components/ExpressionEditor/ExpressionPreview.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpressionPreview = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const ExpressionPreview = (props) => {
+    var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const displayColumnFriendlyNames = (_a = adaptable.api.optionsApi.getExpressionOptions()) === null || _a === void 0 ? void 0 : _a.displayColumnFriendlyNamesForExpressions;
+    if (!displayColumnFriendlyNames) {
+        return React.createElement(React.Fragment, null, adaptable.api.expressionApi.getAdaptableQueryExpression(props.query));
+    }
+    const expressionWithFriendlyNames = adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(props.query);
+    // '[Column Name] > 2' => ['[Column Name]', '>', '2']
+    // not the prettiest
+    const strWithMarkedGroupes = expressionWithFriendlyNames.replace(/\]/gi, '],').split(',');
+    return (React.createElement(React.Fragment, null, strWithMarkedGroupes.map((part, index) => {
+        const partEl = part.includes('[') ? React.createElement("i", null, part.replace(/[\[\]]/g, '')) : part;
+        return React.createElement(React.Fragment, { key: index },
+            "\u00A0",
+            partEl);
+    })));
+};
+exports.ExpressionPreview = ExpressionPreview;

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

@@ -110,9 +110,9 @@ const QueryBuilder = (props) => {
         } },
         React.createElement(QueryBuilderContext.Provider, { value: context },
             React.createElement(rebass_1.Box, { className: QUERY_BUILDER_CLASSNAME },
-                React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
+                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, { variant: "default", header: "AdapTableQL Expression", mt: 3 },
+                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

@@ -17,6 +17,12 @@ export declare const PrimiteValueInput: (props: {
      */
     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;
     dataType: AdaptableColumn['dataType'];

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CombinatorSelector = exports.ExpressionSelector = exports.PrimiteValueInput = exports.PrimitiveColumnSelector = void 0;
+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");
@@ -11,6 +11,7 @@ const PermittedValuesSelector_1 = require("../../../View/Components/Selectors/Pe
 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");
@@ -85,37 +86,65 @@ const PrimiteValueInput = (props) => {
     }
     const options = [
         {
-            label: 'Column',
+            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: 'Value',
+            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(rebass_1.Flex, { "data-id": "query-input-wrapper", mr: 2 },
-        react_1.default.createElement(rebass_1.Flex, null,
-            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" })));
-                }, variant: "raised", value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) })),
+    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" })));
+            }, 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) => {
+            props.onChange(value);
+        } }));
+};
+exports.PrimitiveMultiValueInput = PrimitiveMultiValueInput;
+const SymbolToIcon = (props) => {
+    switch (props.symbol) {
+        case '=':
+            return react_1.default.createElement(icons_1.Icon, { name: "equals" });
+        case '!=':
+            return react_1.default.createElement(icons_1.Icon, { name: "not-equal" });
+        case '>':
+            return react_1.default.createElement(icons_1.Icon, { name: "greater-than" });
+        case '>=':
+            return react_1.default.createElement(icons_1.Icon, { name: "greater-than-or-equal" });
+        case '<':
+            return react_1.default.createElement(icons_1.Icon, { name: "less-than" });
+        case '<=':
+            return react_1.default.createElement(icons_1.Icon, { name: "less-than-or-equal" });
+        default:
+            return react_1.default.createElement(react_1.default.Fragment, null, props.symbol);
+    }
+};
 const ExpressionSelector = (props) => {
     var _a;
     const { getExpressions } = (0, QueryBuilder_1.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", columns: ['label'], items: expressions.map((expression) => ({
-            label: (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(expression),
+    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) }),
             onClick: () => {
                 if (expression !== props.value) {
                     props.onExpressionChange(expression);
                 }
             },
-        })) }, (_a = (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(props.value)) !== null && _a !== void 0 ? _a : 'Select Operator'));
+        })) },
+        react_1.default.createElement(SymbolToIcon, { symbol: (_a = (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(props.value)) !== null && _a !== void 0 ? _a : 'Select Operator' })));
 };
 exports.ExpressionSelector = ExpressionSelector;
 const CombinatorSelector = (props) => {

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

@@ -145,12 +145,24 @@ const PrimitiveFunctionEditor = (props) => {
                     }, value: props.predicate.operator })),
                 react_1.default.createElement(rebass_1.Flex, { flex: 1, ml: 2 }, restOfFunctionInputDataTypes.map((type, index) => {
                     var _a;
-                    return (react_1.default.createElement(QueryBuilderInputs_1.PrimiteValueInput, { key: type + index, inputType: type, lefthandColumnIdParam: columnId, 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_1.default.createElement(rebass_1.Box, { flex: 1 }),
             react_1.default.createElement(QueryPredicateButtons, Object.assign({}, props))));

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

@@ -14,4 +14,5 @@ exports.booleanExpressionsAvailableInQueryBuilder = [
     'ENDS_WITH',
     'IS_HOLIDAY',
     'IS_WORKDAY',
+    'IN',
 ];

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

@@ -80,7 +80,7 @@ const getFunctionsForColumnType = (dataType, availableBooleanFunctions) => {
         const functionDef = booleanExpressionFunctions_1.booleanExpressionFunctions[boolFnName];
         const inputs = functionDef.inputs;
         let matchingInputTypes = [];
-        if (Array.isArray(inputs[0])) {
+        if (inputs && Array.isArray(inputs[0])) {
             matchingInputTypes = inputs.find((input) => input[0] === columnType);
         }
         else {

package/src/components/ExpressionEditor/index.js

@@ -32,6 +32,7 @@ function ExpressionEditor(props) {
     const { type, module } = props;
     const [data, setData] = (0, react_1.useState)(props.initialData);
     const [showColumnIds, setShowColumnIds] = (0, react_1.useState)(false);
+    const [inlineQuery, setInlineQuery] = (0, react_1.useState)(false);
     const [showNamedQueries, setShowNamedQueries] = (0, react_1.useState)(false);
     const baseClassName = `ab-ExpressionEditor`;
     const [selectedFunction, setSelectedFunction] = (0, react_1.useState)(null);
@@ -97,12 +98,8 @@ function ExpressionEditor(props) {
                 setData(updateColValue(data, column, new Date(e.target.value)));
             }, style: { width: '100%' }, disabled: column.readOnly })) : column.dataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-input", "data-value": column.columnId, checked: getColValue(column), onChange: (checked) => setData(updateColValue(data, column, checked)), disabled: column.readOnly })) : null))))));
     const namedQueries = (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
-        React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
-                float: 'right',
-                margin: 0,
-                paddingTop: 'var(--ab-space-1)',
-                paddingBottom: 'var(--ab-space-1)',
-            } }, 'Show Column IDs'),
+        React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked) }, "Show Column IDs"),
+        React.createElement(CheckBox_1.CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked) }, "Inline Query"),
         props.namedQueries.map((namedQuery) => (React.createElement(rebass_1.Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
                 padding: 3,
                 marginTop: 'var(--ab-space-2)',
@@ -113,7 +110,7 @@ function ExpressionEditor(props) {
             React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
                     background: 'var(--ab-color-primary)',
                     cursor: 'grab',
-                }, data: `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
+                }, data: inlineQuery ? namedQuery.BooleanExpression : `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
                 React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
             React.createElement(rebass_1.Flex, { alignItems: "start", style: {
                     padding: 5,

package/src/components/InputGroup/InputGroup.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type InputGroupProps<T extends React.ComponentType<any>> = {
+    Component?: T;
+    children: React.ReactNode;
+} & React.ComponentProps<T>;
+export declare const InputGroup: <T extends React.ComponentType<any>>({ Component, children, ...rest }: InputGroupProps<T>) => JSX.Element;
+export {};

package/src/components/InputGroup/InputGroup.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputGroup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const InputGroup = (_a) => {
+    var _b;
+    var { Component = 'div', children } = _a, rest = tslib_1.__rest(_a, ["Component", "children"]);
+    const Comp = Component;
+    return (React.createElement(Comp, Object.assign({}, rest, { className: `ab-cmp-input-group ${(_b = rest.className) !== null && _b !== void 0 ? _b : ''}` }), children));
+};
+exports.InputGroup = InputGroup;

package/src/components/InputGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './InputGroup';

package/src/components/InputGroup/index.js

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

package/src/components/OverlayTrigger/index.js

@@ -4,6 +4,7 @@ exports.getConstrainRect = exports.getConstrainElement = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
 const selectParent_1 = tslib_1.__importDefault(require("../utils/selectParent"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
@@ -72,7 +73,11 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
     const overlayRef = (0, react_1.useRef)(null);
     const [visible, doSetVisible] = (0, useProperty_1.default)(props, 'visible', false);
     const hideTimeoutRef = (0, react_1.useRef)(null);
-    const setVisible = React.useCallback((visible) => {
+    const setVisible = React.useCallback(
+    // visible state may quickly change from true -> false -> true
+    // when moving the mouse cursor from the trigger to the overlay
+    // for this case we debounce the visible change for a very small amount of time
+    (0, debounce_1.default)((visible) => {
         onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
         if (!visible) {
             hideTimeoutRef.current = setTimeout(() => {
@@ -86,7 +91,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             hideTimeoutRef.current = null;
         }
         doSetVisible(true);
-    }, []);
+    }, 50), []);
     const prevVisible = (0, usePrevious_1.default)(visible, false);
     ensurePortalElement();
     const onShow = React.useCallback((event) => {

package/src/components/Select/Select.d.ts

@@ -17,14 +17,13 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     placeholder?: string;
     'data-name'?: string;
     'data-id'?: string;
-    rederSingleValue?: (option: SelectOption<SelectValue>) => React.ReactNode;
+    renderSingleValue?: (option: SelectOption<SelectValue>) => React.ReactNode;
     className?: string;
     isLoding?: boolean;
     onFocus?: () => void;
     accessLevel?: AccessLevel;
     style?: React.CSSProperties;
     onInputChange?: (value: string) => void;
-    variant?: 'default' | 'raised';
     size?: 'small' | 'normal';
     isCreatable?: boolean;
 };