@adaptabletools/adaptable 17.0.0-canary.6 → 17.0.0-canary.8

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -115,7 +115,7 @@ const useGridFilterExpressionEditor = () => {
         availableColumns,
         runQuery,
         clearQuery,
-        onExpand: () => adaptable.api.gridFilterApi.openExpressionEditorForGridFilter(expression),
+        onExpand: () => adaptable.api.gridFilterApi.openUIEditorForGridFilter(expression),
         saveQuery,
         suspendGridFilter,
         unSuspendGridFilter,

package/src/View/GridFilter/useGridFilterOptionsForExpressionEditor.js

@@ -4,28 +4,10 @@ exports.useGridFilterOptionsForExpressionEditorProps = void 0;
 const AdaptableContext_1 = require("../AdaptableContext");
 const useGridFilterOptionsForExpressionEditorProps = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const gridfilterOptions = adaptable.api.optionsApi.getGridFilterOptions();
-    switch (gridfilterOptions.availableFilterEditors) {
-        case 'Both':
-            return {
-                showQueryBuilder: true,
-                showExpressionEditor: true,
-            };
-        case 'QueryBuilder':
-            return {
-                showQueryBuilder: true,
-                showExpressionEditor: false,
-            };
-        case 'ExpressionEditor':
-            return {
-                showQueryBuilder: false,
-                showExpressionEditor: true,
-            };
-        default:
-            return {
-                showQueryBuilder: true,
-                showExpressionEditor: true,
-            };
-    }
+    const gridFilterEditors = adaptable.api.optionsApi.getGridFilterOptions().availableFilterEditors;
+    return {
+        showQueryBuilder: gridFilterEditors.includes('QueryBuilder'),
+        showExpressionEditor: gridFilterEditors.includes('ExpressionEditor'),
+    };
 };
 exports.useGridFilterOptionsForExpressionEditorProps = useGridFilterOptionsForExpressionEditorProps;

package/src/View/Layout/Wizard/sections/GridFilterSection.js

@@ -34,11 +34,11 @@ const GridFilterSection = (props) => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const expressionEditorProps = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
+    const expressionEditorContent = (React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '', onChange: (expression) => {
+            props.onChange(Object.assign(Object.assign({}, layout), { GridFilter: Object.assign(Object.assign({}, layout.GridFilter), { Expression: expression }) }));
+        }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })));
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
         React.createElement(Tabs_1.Tabs.Tab, null, "Grid Filters"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '', onChange: (expression) => {
-                    props.onChange(Object.assign(Object.assign({}, layout), { GridFilter: Object.assign(Object.assign({}, layout.GridFilter), { Expression: expression }) }));
-                }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })))));
+        React.createElement(Tabs_1.Tabs.Content, null, expressionEditorContent)));
 };
 exports.GridFilterSection = GridFilterSection;

package/src/View/NamedQuery/EditCurrentQueryButton.js

@@ -9,7 +9,7 @@ const EditGridFilterButton = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const handleClick = React.useCallback((event) => {
         event.stopPropagation();
-        adaptable.api.gridFilterApi.openExpressionEditorForGridFilter();
+        adaptable.api.gridFilterApi.openUIEditorForGridFilter();
     }, []);
     return React.createElement(SimpleButton_1.default, { variant: "text", iconSize: 15, onClick: handleClick, icon: "edit" });
 };

package/src/agGrid/Adaptable.d.ts

@@ -41,6 +41,9 @@ import { AdaptableLogger } from './AdaptableLogger';
 import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
 type RuntimeConfig = {
     waitForAgGrid?: boolean;
+    /**
+     * @deprecated
+     */
     renderReactRoot?: RenderReactRootFn;
     variant?: AdaptableVariant;
     gridOptions: AgGridConfig['gridOptions'];
@@ -361,6 +364,7 @@ export declare class Adaptable implements IAdaptable {
     closeAllRowGroups(): void;
     expandRowGroupsForValues(columnValues: any[]): void;
     getAgGridColumnForColumnId(columnId: string): Column;
+    getAgGridAllGridColumns(): Column<any>[];
     setRowGroupColumns(columnIds: string[]): void;
     clearRowGroupColumns(): void;
     getExpandRowGroupsKeys(): any[];

package/src/agGrid/Adaptable.js

@@ -361,24 +361,6 @@ class Adaptable {
     async init(adaptableOptions, runtimeConfig, _staticInit) {
         this.logger = new AdaptableLogger_1.AdaptableLogger(adaptableOptions.adaptableId || String(Date.now()));
         const perfAdaptableInit = this.logger.beginPerf(`Adaptable init()`);
-        if (runtimeConfig.renderReactRoot) {
-            this.renderReactRoot = (el, container) => {
-                const unmount = runtimeConfig.renderReactRoot(el, container);
-                return () => {
-                    // we used to capture here because of FloatingFilters/Filters - see FloatingFilterWrapper and FilterWrapper
-                    // as we didn't have a native React implementation for our React wrapper
-                    // but we might need to do this again in the future for some other components that are not native React
-                    // captureReactWarnings();
-                    if (typeof unmount === 'function') {
-                        // rAF is required, otherwise the unmount would be performed during the rendering phase and React doesn't like that
-                        requestAnimationFrame(() => {
-                            unmount();
-                        });
-                    }
-                    // releaseReactWarnings();
-                };
-            };
-        }
         if (runtimeConfig.variant) {
             this.variant = runtimeConfig.variant;
         }
@@ -4179,6 +4161,9 @@ class Adaptable {
     getAgGridColumnForColumnId(columnId) {
         return this.gridOptions.columnApi.getColumn(columnId);
     }
+    getAgGridAllGridColumns() {
+        return this.gridOptions.columnApi.getAllGridColumns();
+    }
     setRowGroupColumns(columnIds) {
         this.gridOptions.columnApi.setRowGroupColumns(columnIds);
     }

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,7 @@ 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 : 'fixed', isClearable: props.isClearable, onChange: (option) => {
             if (props.isMulti) {
                 props.onChange(option.map((x) => x === null || x === void 0 ? void 0 : x.value));
             }
@@ -85,25 +104,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 +136,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 +150,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

@@ -3558,6 +3558,11 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
         }[];
     };
+    GridFilterEditor: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     GridFilterOptions: {
         name: string;
         kind: string;
@@ -3568,6 +3573,7 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
             isOpt: boolean;
             defVal: string;
+            ref: string;
             gridInfo?: undefined;
         } | {
             name: string;
@@ -3576,6 +3582,7 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
             gridInfo: string;
             defVal: string;
+            ref?: undefined;
         })[];
     };
     GridRow: {
@@ -4588,7 +4595,7 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
-    Report_2: {
+    Report: {
         name: string;
         kind: string;
         desc: string;
@@ -4819,6 +4826,33 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    ServerValidationResult: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: ({
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            defVal: string;
+            ref: string;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            defVal?: undefined;
+            ref?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            defVal: string;
+            ref?: undefined;
+        })[];
+    };
     SetPrimaryKeyValueContext: {
         name: string;
         kind: string;
@@ -5463,33 +5497,6 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
-    ValidationResult: {
-        name: string;
-        kind: string;
-        desc: string;
-        props: ({
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt: boolean;
-            defVal: string;
-            ref: string;
-        } | {
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt: boolean;
-            defVal?: undefined;
-            ref?: undefined;
-        } | {
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt: boolean;
-            defVal: string;
-            ref?: undefined;
-        })[];
-    };
     ValuationContext: {
         name: string;
         kind: string;