@adaptabletools/adaptable 17.0.0-canary.7 → 17.0.0-canary.9

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -29,7 +29,7 @@ const QueryViewPanelComponent = (props) => {
             runQuery();
         }
     };
-    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: isSuspended, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Open Expression Editor", marginLeft: 1 }));
+    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: isSuspended, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }));
     const renderTextInput = () => {
         return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { marginRight: 1, width: 500 },
             buttonExpand,

package/src/View/GridFilter/useGridFilterExpressionEditor.d.ts

@@ -21,4 +21,6 @@ export declare const useGridFilterExpressionEditor: () => {
     unSuspendGridFilter: () => void;
     setGridFilterExpression: (expression: string) => void;
     gridFilterAccessLevel: import("../../types").AccessLevel;
+    gridFilterHelpPage: string;
+    gridFilterLinkDisabled: boolean;
 };

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -27,6 +27,8 @@ const useGridFilterExpressionEditor = () => {
     const onAddCachedQuery = (cachedQuery) => {
         dispatch(SystemRedux.SystemCachedQueryAdd(cachedQuery));
     };
+    const gridFilterHelpPage = adaptable.ModuleService.getModuleById('GridFilter').moduleInfo.HelpPage;
+    const gridFilterLinkDisabled = !adaptable.api.internalApi.isDocumentationLinksDisplayed();
     React.useEffect(() => {
         adaptable.api.eventApi.on('AdaptableReady', () => {
             setIsAdaptableReady(true);
@@ -45,7 +47,11 @@ const useGridFilterExpressionEditor = () => {
     let availableColumns = adaptable.api.columnApi.getColumns().map((col) => {
         return {
             label: col.friendlyName,
-            onClick: () => setExpression(expression + `[${col.columnId}]`),
+            onClick: () => {
+                // Bogdan - im sure there is a better way to do this check with fancy operators i dont know
+                const newExp = StringExtensions_1.default.IsNotNullOrEmpty(expression) ? expression : '';
+                setExpression(newExp + `[${col.columnId}]`);
+            },
         };
     });
     const clearQuery = () => {
@@ -123,6 +129,8 @@ const useGridFilterExpressionEditor = () => {
             adaptable.api.gridFilterApi.setGridFilterExpression(expression);
         },
         gridFilterAccessLevel,
+        gridFilterHelpPage,
+        gridFilterLinkDisabled,
     };
 };
 exports.useGridFilterExpressionEditor = useGridFilterExpressionEditor;

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);
                     }

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");
@@ -104,6 +104,12 @@ const PrimiteValueInput = (props) => {
         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 ExpressionSelector = (props) => {
     var _a;
     const { getExpressions } = (0, QueryBuilder_1.useQueryBuilderContext)();

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/Select/Select.js

@@ -15,21 +15,40 @@ const commonStyles = ({ isFocused, isDisabled, }) => {
     };
 };
 const Select = function (props) {
-    var _a, _b, _c, _d, _e;
-    let selectedOption = (_b = ((_a = props.options) !== null && _a !== void 0 ? _a : []).find((option) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const doesOptionMatchValue = function (option) {
         if (typeof option.value === 'object' && option.value instanceof Date) {
             return (0, date_fns_1.isSameDay)(option.value, props.value);
         }
         return option.value === props.value;
-    })) !== null && _b !== void 0 ? _b : null;
-    if (!selectedOption && props.value !== undefined && props.value !== null) {
-        selectedOption = {
-            value: props.value,
-            label: props.value,
-        };
+    };
+    let selectedOption = null;
+    if (props.isMulti) {
+        selectedOption =
+            (_b = ((_a = props.value) !== null && _a !== void 0 ? _a : []).map((value) => {
+                var _a;
+                // return (props.value as any[]).includes(option.value);
+                const option = ((_a = props.options) !== null && _a !== void 0 ? _a : []).find(doesOptionMatchValue);
+                if (!option) {
+                    return {
+                        value,
+                        label: value,
+                    };
+                }
+                return option;
+            })) !== null && _b !== void 0 ? _b : null;
     }
-    let disabled = (_c = props.disabled) !== null && _c !== void 0 ? _c : false;
-    const accessLevel = (_d = props.accessLevel) !== null && _d !== void 0 ? _d : 'Full';
+    else {
+        selectedOption = (_d = ((_c = props.options) !== null && _c !== void 0 ? _c : []).find(doesOptionMatchValue)) !== null && _d !== void 0 ? _d : null;
+        if (!selectedOption && props.value !== undefined && props.value !== null) {
+            selectedOption = {
+                value: props.value,
+                label: props.value,
+            };
+        }
+    }
+    let disabled = (_e = props.disabled) !== null && _e !== void 0 ? _e : false;
+    const accessLevel = (_f = props.accessLevel) !== null && _f !== void 0 ? _f : 'Full';
     if (accessLevel === 'Hidden') {
         return null;
     }
@@ -52,7 +71,9 @@ const Select = function (props) {
         };
     }, []);
     const SelectComponent = props.isCreatable ? creatable_1.default : react_select_1.default;
-    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, isMulti: props.isMulti, value: selectedOption, menuPosition: (_e = props.menuPosition) !== null && _e !== void 0 ? _e : 'fixed', isClearable: props.isClearable, onChange: (option) => {
+    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, isMulti: props.isMulti, value: selectedOption, menuPosition: (_g = props.menuPosition) !== null && _g !== void 0 ? _g : 'absolute', 
+        // This needed so the menu is not clipped by overflow: hidden
+        menuPortalTarget: document.body, isClearable: props.isClearable, onChange: (option) => {
             if (props.isMulti) {
                 props.onChange(option.map((x) => x === null || x === void 0 ? void 0 : x.value));
             }
@@ -85,25 +106,25 @@ const Select = function (props) {
             },
             // @ts-ignore
             menu: (baseStyle, state) => {
-                return Object.assign(Object.assign(Object.assign({}, baseStyle), { zIndex: 999999, boxShadow: 'var(--ab-cmp-dropdownbutton-list__box-shadow)', minWidth: 160 }), commonStyles(state));
+                return Object.assign(Object.assign(Object.assign({}, baseStyle), { zIndex: 999999, boxShadow: 'var(--ab-cmp-select-menu__box-shadow)', minWidth: 160 }), commonStyles(state));
             },
             // @ts-ignore
             option: (baseStyle, state) => {
                 const style = Object.assign(Object.assign(Object.assign({}, baseStyle), commonStyles(state)), { '&:active': {
-                        background: 'var(--ab-cmp-dropdownbutton-list-item-hover__background)',
+                        background: 'var(--ab-cmp-select-option-active__background)',
                     }, opacity: state.isDisabled ? 0.5 : 1 });
                 if (state.isSelected) {
-                    style.background = 'var(--ab-cmp-dropdownbutton-list-item-active__background)';
-                    style.color = 'var(--ab-cmp-dropdownbutton-list-item-active__color)';
+                    style.background = 'var(--ab-cmp-select-option-active__background)';
+                    style.color = 'var(--ab-cmp-select-option-active__color)';
                 }
                 if (state.isFocused) {
-                    style.background = 'var(--ab-cmp-dropdownbutton-list-item-hover__background)';
+                    style.background = 'var(--ab-cmp-select-option-focused__background)';
                 }
                 return style;
             },
             // @ts-ignore
             input: (baseStyle, state) => {
-                return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? 0 : baseStyle.padding, color: 'var(--ab-cmp-input__color)' });
+                return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? 0 : baseStyle.padding, color: 'var(--ab-cmp-select__color)' });
             },
             valueContainer: (baseStyle) => {
                 return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding });
@@ -117,10 +138,10 @@ const Select = function (props) {
                 state;
                 return Object.assign(Object.assign(Object.assign({}, baseStyle), commonStyles(state)), { 
                     // height: 30,
-                    minHeight: props.size === 'small' ? 0 : 32, boxShadow: state.isFocused ? 'var(--ab-focus__box-shadow)' : 'none', outline: state.isFocused ? 'var(--ab-focus__outline)' : 'none', border: props.variant && props.variant === 'raised'
+                    minHeight: props.size === 'small' ? 0 : 32, boxShadow: state.isFocused ? 'var(--ab-cmp-select-focused__box-shadow)' : 'none', outline: state.isFocused ? 'var(--ab-cmp-select-focused__outline)' : 'none', border: props.variant && props.variant === 'raised'
                         ? '1px solid transparent'
-                        : 'var(--ab-cmp-input__border)', '&:hover': {
-                        border: 'var(--ab-cmp-input__border)',
+                        : 'var(--ab-cmp-select__border)', '&:hover': {
+                        border: 'var(--ab-cmp-select__border)',
                     } });
             },
             // @ts-ignore
@@ -131,6 +152,12 @@ const Select = function (props) {
             clearIndicator: (baseStyle) => {
                 return Object.assign(Object.assign({}, baseStyle), { padding: '2px 3px' });
             },
+            multiValue: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { color: 'var(--ab-cmp-select__color)', background: 'var(--ab-cmp-select-multi-value__background)', border: 'var(--ab-cmp-select__border)' });
+            },
+            multiValueLabel: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { color: 'var(--ab-cmp-select__color)' });
+            },
         } }));
 };
 exports.Select = Select;

package/src/metamodel/adaptable.metamodel.d.ts

@@ -4595,7 +4595,7 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
-    Report_2: {
+    Report: {
         name: string;
         kind: string;
         desc: string;