@adaptabletools/adaptable 17.0.0-canary.2 → 17.0.0-canary.4

package/src/View/Export/ExportViewPanel.js

@@ -1,30 +1,27 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Flex } from 'rebass';
+import { Select } from '../../components/Select';
+import join from '../../components/utils/join';
 import { ExportDestination } from '../../PredefinedConfig/Common/Enums';
 import * as ExportRedux from '../../Redux/ActionsReducers/ExportRedux';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
-import * as React from 'react';
-import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { VISUAL_DATA_REPORT } from '../../Utilities/Constants/GeneralConstants';
+import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
-import { Flex } from 'rebass';
-import join from '../../components/utils/join';
-import { ButtonExport } from '../Components/Buttons/ButtonExport';
+import ObjectFactory from '../../Utilities/ObjectFactory';
+import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
+import { ButtonExport } from '../Components/Buttons/ButtonExport';
 import { ButtonNew } from '../Components/Buttons/ButtonNew';
-import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonSchedule } from '../Components/Buttons/ButtonSchedule';
-import ObjectFactory from '../../Utilities/ObjectFactory';
-import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
-import { connect } from 'react-redux';
 import { SELECT_DESTINATION_STRING, SELECT_REPORT_STRING } from './constants';
-import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
-import { Select } from '../../components/Select';
 class ExportViewPanelComponent extends React.Component {
     render() {
         let currentReport = this.props.api.exportApi.getReportByName(this.props.CurrentReport);
-        let currentReportId = StringExtensions.IsNullOrEmpty(this.props.CurrentReport)
-            ? SELECT_REPORT_STRING
-            : this.props.CurrentReport;
+        let currentReportId = this.props.CurrentReport;
         const allReportNames = this.getAllReportNames();
         const reportItems = allReportNames.map((report) => {
             return {
@@ -36,12 +33,10 @@ class ExportViewPanelComponent extends React.Component {
         if (currentReport && !allReportNames.includes(currentReport.Name)) {
             // current report is not available
             currentReport = undefined;
-            currentReportId = SELECT_REPORT_STRING;
+            currentReportId = undefined;
         }
         let currentDestination = this.props.api.exportApi.getDestinationByName(this.props.CurrentDestination);
-        let currentDestinationId = StringExtensions.IsNullOrEmpty(this.props.CurrentDestination)
-            ? SELECT_DESTINATION_STRING
-            : this.props.CurrentDestination;
+        let currentDestinationId = this.props.CurrentDestination;
         const destinationItems = [
             ...this.props.api.exportApi.getAvailableExportDestinations().map((destination) => ({
                 label: destination,
@@ -66,7 +61,7 @@ class ExportViewPanelComponent extends React.Component {
                 .includes(this.props.CurrentDestination)) {
             // current destination is not available
             currentDestination = undefined;
-            currentDestinationId = SELECT_DESTINATION_STRING;
+            currentDestinationId = undefined;
         }
         let accessLevel = AdaptableHelper.getAppropriateAccessLevel(currentReport, this.props.accessLevel);
         let deleteMessage = "Are you sure you want to delete '";

package/src/View/Layout/LayoutStatusBarSubPanelPopover.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const LayoutStatusBarSubPanelPopover: React.FunctionComponent;
+export declare const LayoutStatusbar: React.FunctionComponent;

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -1,12 +1,17 @@
 import * as React from 'react';
-import { SelectList } from '../../components/SelectList';
+import { useSelector } from 'react-redux';
+import { Box } from 'rebass';
+import { Select } from '../../components/Select';
 import { useAdaptable } from '../AdaptableContext';
-export const LayoutStatusBarSubPanelPopover = () => {
+export const LayoutStatusbar = () => {
     const adaptable = useAdaptable();
     const layouts = adaptable.api.layoutApi.getLayouts();
-    const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Uuid }));
-    const handleChange = (option) => {
-        adaptable.api.layoutApi.setLayout(option.label);
-    };
-    return React.createElement(SelectList, { options: options, onChange: handleChange });
+    const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Name }));
+    const currentLayout = useSelector((state) => state.Layout.CurrentLayout);
+    return (React.createElement(Box, { onClick: (event) => {
+            event.stopPropagation();
+        } },
+        React.createElement(Select, { size: "small", options: options, value: currentLayout, onChange: (value) => {
+                adaptable.api.layoutApi.setLayout(value);
+            } })));
 };

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 import { Layout } from '../../PredefinedConfig/LayoutState';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
+import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 export declare const COMPONENT_LAYOUT_POPUP_NAME = "LayoutEditorStandalonePopup";
 export interface LayoutViewPanelComponentProps extends ViewPanelProps {
     onSelectLayout: (layoutName: string) => LayoutRedux.LayoutSelectAction;

package/src/View/Layout/LayoutViewPanel.js

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
 import { Flex } from 'rebass';
+import { Select } from '../../components/Select';
 import join from '../../components/utils/join';
+import * as GridRedux from '../../Redux/ActionsReducers/GridRedux';
+import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
-import { ButtonSave } from '../Components/Buttons/ButtonSave';
+import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
+import { ButtonClone } from '../Components/Buttons/ButtonClone';
+import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
 import { ButtonNew } from '../Components/Buttons/ButtonNew';
-import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
-import { ButtonClone } from '../Components/Buttons/ButtonClone';
-import * as GridRedux from '../../Redux/ActionsReducers/GridRedux';
-import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
-import { Select } from '../../components/Select';
+import { ButtonSave } from '../Components/Buttons/ButtonSave';
 export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {

package/src/View/Theme/ThemePopup.js

@@ -9,6 +9,7 @@ import { Box } from 'rebass';
 import ObjectFactory from '../../Utilities/ObjectFactory';
 import SimpleButton from '../../components/SimpleButton';
 import { Icon } from '../../components/icons';
+import { ThemeSelector } from './ThemeSelector';
 class ThemePopupComponent extends React.Component {
     constructor() {
         super(...arguments);
@@ -27,23 +28,6 @@ class ThemePopupComponent extends React.Component {
         };
     }
     render() {
-        const availableThemes = this.props.api.themeApi.getThemes();
-        const theme = this.props.api.themeApi.getCurrentThemeObject();
-        const currentThemeDescription = theme.Description || theme.Name;
-        const optionThemes = availableThemes.map((theme) => {
-            if (typeof theme === 'string') {
-                // protection against old state, which could be string
-                theme = {
-                    Name: theme,
-                    Description: theme,
-                };
-            }
-            return {
-                value: theme.Name,
-                label: theme.Description,
-                onClick: () => this.onChangeTheme(theme.Name),
-            };
-        });
         const isCustomTheme = this.props.api.themeApi
             .getUserThemes()
             .some((theme) => theme.Name === this.props.CurrentTheme);
@@ -67,7 +51,8 @@ class ThemePopupComponent extends React.Component {
                 newButton) },
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Current Theme:" },
-                    React.createElement(DropdownButton, { "data-name": "select-theme-dropdown", columns: ['label'], style: { width: '50%', minWidth: 200 }, placeholder: "Select theme", value: this.props.CurrentTheme, items: optionThemes, accessLevel: this.props.accessLevel }, currentThemeDescription))),
+                    React.createElement(Box, { maxWidth: 150 },
+                        React.createElement(ThemeSelector, null)))),
             isCustomTheme && (React.createElement(Box, { mt: 3 },
                 React.createElement(ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
     }

package/src/View/Theme/ThemeSelector.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { SelectProps } from '../../components/Select';
+export declare const ThemeSelector: React.FunctionComponent<{
+    size?: SelectProps<any>['size'];
+}>;

package/src/View/Theme/ThemeSelector.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useDispatch } from 'react-redux';
+import { Select } from '../../components/Select';
+import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
+import { ThemeModuleId } from '../../Utilities/Constants/ModuleConstants';
+import { useAdaptable } from '../AdaptableContext';
+export const ThemeSelector = (props) => {
+    const adaptable = useAdaptable();
+    const dispatch = useDispatch();
+    const availableThemes = adaptable.api.themeApi.getThemes();
+    const disabled = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ThemeModuleId) === 'ReadOnly';
+    const optionThemes = availableThemes.map((theme) => {
+        if (typeof theme === 'string') {
+            // protection against old state, which could be string
+            theme = {
+                Name: theme,
+                Description: theme,
+            };
+        }
+        return {
+            value: theme.Name,
+            label: theme.Description,
+        };
+    });
+    const theme = adaptable.api.themeApi.getCurrentThemeObject();
+    return (React.createElement(Select, { "data-name": "select-theme-dropdown", options: optionThemes, value: theme.Name, disabled: disabled, size: props.size, onChange: (themeName) => {
+            dispatch(ThemeRedux.ThemeSelect(themeName));
+        } }));
+};

package/src/View/Theme/ThemeStatusbar.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ThemeStatusbar: () => JSX.Element;

package/src/View/Theme/ThemeStatusbar.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Box } from 'rebass';
+import { ThemeSelector } from './ThemeSelector';
+export const ThemeStatusbar = () => {
+    return (React.createElement(Box, { onClick: (event) => {
+            event.stopPropagation();
+        } },
+        React.createElement(ThemeSelector, { size: "small" })));
+};

package/src/View/Theme/ThemeViewPanel.d.ts

@@ -1,16 +1,5 @@
+/// <reference types="react" />
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
-import { AdaptableTheme } from '../../PredefinedConfig/ThemeState';
-import * as React from 'react';
 export interface ThemeViewPanelComponentProps extends ViewPanelProps {
-    onSelectTheme: (theme: string) => ThemeRedux.ThemeSelectAction;
-    SystemThemes: any[];
-    UserThemes: AdaptableTheme[];
-    CurrentTheme: string;
 }
-declare class ThemeViewPanelComponent extends React.Component<ThemeViewPanelComponentProps, {}> {
-    render(): any;
-    private onSelectTheme;
-}
-export declare const ThemeViewPanelControl: import("react-redux").ConnectedComponent<typeof ThemeViewPanelComponent, any>;
-export {};
+export declare const ThemeViewPanelControl: (props: ThemeViewPanelComponentProps) => JSX.Element;

package/src/View/Theme/ThemeViewPanel.js

@@ -1,56 +1,9 @@
-import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import * as React from 'react';
 import join from '../../components/utils/join';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
-import { connect } from 'react-redux';
-import { Select } from '../../components/Select';
-class ThemeViewPanelComponent extends React.Component {
-    render() {
-        var _a, _b, _c, _d;
-        const allThemes = (_c = (_b = (_a = this.props.api) === null || _a === void 0 ? void 0 : _a.themeApi) === null || _b === void 0 ? void 0 : _b.getThemes) === null || _c === void 0 ? void 0 : _c.call(_b);
-        const themes = allThemes.map((theme, index) => {
-            if (typeof theme === 'string') {
-                // protection against old state, which could be string
-                theme = {
-                    Name: theme,
-                    Description: theme,
-                };
-            }
-            return {
-                label: theme.Description,
-                value: theme.Name,
-                onClick: () => this.onSelectTheme(theme),
-            };
-        });
-        const currentThemeObj = allThemes.find((theme) => theme.Name === this.props.CurrentTheme);
-        const currentThemeDescription = (_d = currentThemeObj === null || currentThemeObj === void 0 ? void 0 : currentThemeObj.Description) !== null && _d !== void 0 ? _d : this.props.CurrentTheme;
-        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        const dropDownStyle = this.props.viewType === 'Toolbar'
-            ? {
-                maxWidth: '25rem',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                fontSize: 'small',
-            }
-            : { minWidth: '100%', fontSize: 'small' };
-        return (React.createElement("div", { className: join(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
-            React.createElement(Select, { className: `ab-${elementType}__Theme__select`, options: themes, value: currentThemeObj === null || currentThemeObj === void 0 ? void 0 : currentThemeObj.Name, onChange: (theme) => this.onSelectTheme({ Name: theme }) })));
-    }
-    onSelectTheme(theme) {
-        this.props.onSelectTheme(theme.Name);
-    }
-}
-function mapStateToProps(state, ownProps) {
-    return {
-        SystemThemes: state.Theme.SystemThemes,
-        CurrentTheme: state.Theme.CurrentTheme,
-        UserThemes: state.Theme.UserThemes,
-    };
-}
-function mapDispatchToProps(dispatch) {
-    return {
-        onSelectTheme: (theme) => dispatch(ThemeRedux.ThemeSelect(theme)),
-    };
-}
-export const ThemeViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(ThemeViewPanelComponent);
+import { ThemeSelector } from './ThemeSelector';
+export const ThemeViewPanelControl = (props) => {
+    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+    return (React.createElement("div", { className: join(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
+        React.createElement(ThemeSelector, null)));
+};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex } from 'rebass';
+import { Box, Flex } from 'rebass';
 import { getQlPredicateSymbol } from '../../../parser/src/predicate/mapQlPredicateToExpression';
 import AdaptableInput from '../../../View/Components/AdaptableInput';
 import { ColumnSelector } from '../../../View/Components/Selectors/ColumnSelector';
@@ -11,9 +11,10 @@ import { Select } from '../../Select';
 import { useQueryBuilderContext } from './QueryBuilder';
 import { mapExpressionFunctionTypeToColumnDataType } from './utils';
 export const PrimitiveColumnSelector = (props) => {
-    return (React.createElement(ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
-            props.onChange(`[${columnId}]`);
-        } }));
+    return (React.createElement(Box, null,
+        React.createElement(ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
+                props.onChange(`[${columnId}]`);
+            } })));
 };
 export const PrimiteValueInput = (props) => {
     var _a, _b;
@@ -91,11 +92,11 @@ export const PrimiteValueInput = (props) => {
     ];
     const typeOption = options.find((option) => option.value === type);
     return (React.createElement(Flex, { "data-id": "query-input-wrapper", mr: 2 },
-        editor,
         React.createElement(Flex, null,
             React.createElement(Select, { rederSingleValue: (value) => {
                     return (React.createElement(React.Fragment, null, typeOption.value === 'column-name' ? React.createElement(Icon, { name: "grid" }) : React.createElement(Icon, { name: "edit" })));
-                }, variant: "raised", value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) }))));
+                }, variant: "raised", value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) })),
+        editor));
 };
 export const ExpressionSelector = (props) => {
     var _a;

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

@@ -25,6 +25,7 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     style?: React.CSSProperties;
     onInputChange?: (value: string) => void;
     variant?: 'default' | 'raised';
+    size?: 'small' | 'normal';
     isCreatable?: boolean;
 };
 export declare const Select: <SelectValue extends unknown, IsMulti extends boolean = false>(props: SelectProps<SelectValue, IsMulti>) => JSX.Element;

package/src/components/Select/Select.js

@@ -11,21 +11,21 @@ const commonStyles = ({ isFocused, isDisabled, }) => {
     };
 };
 export const Select = function (props) {
-    var _a, _b, _c, _d;
-    let selectedOption = (_a = props.options.find((option) => {
+    var _a, _b, _c, _d, _e;
+    let selectedOption = (_b = ((_a = props.options) !== null && _a !== void 0 ? _a : []).find((option) => {
         if (typeof option.value === 'object' && option.value instanceof Date) {
             return isSameDay(option.value, props.value);
         }
         return option.value === props.value;
-    })) !== null && _a !== void 0 ? _a : null;
+    })) !== null && _b !== void 0 ? _b : null;
     if (!selectedOption && props.value !== undefined && props.value !== null) {
         selectedOption = {
             value: props.value,
             label: props.value,
         };
     }
-    let disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
-    const accessLevel = (_c = props.accessLevel) !== null && _c !== void 0 ? _c : 'Full';
+    let disabled = (_c = props.disabled) !== null && _c !== void 0 ? _c : false;
+    const accessLevel = (_d = props.accessLevel) !== null && _d !== void 0 ? _d : 'Full';
     if (accessLevel === 'Hidden') {
         return null;
     }
@@ -48,7 +48,7 @@ export const Select = function (props) {
         };
     }, []);
     const SelectComponent = props.isCreatable ? CreatableSelect : ReactSelect;
-    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: (_d = props.menuPosition) !== null && _d !== void 0 ? _d : '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: (_e = props.menuPosition) !== null && _e !== void 0 ? _e : 'fixed', isClearable: props.isClearable, onChange: (option) => {
             if (props.isMulti) {
                 props.onChange(option.map((x) => x === null || x === void 0 ? void 0 : x.value));
             }
@@ -77,7 +77,7 @@ export const Select = function (props) {
             },
             // @ts-ignorets-ignore when fixed
             menuPortal: (baseStyle) => {
-                return Object.assign(Object.assign({}, baseStyle), { zIndex: 999999 });
+                return Object.assign(Object.assign({}, baseStyle), { zIndex: 999999, textAlign: 'left' });
             },
             // @ts-ignore
             menu: (baseStyle, state) => {
@@ -99,7 +99,10 @@ export const Select = function (props) {
             },
             // @ts-ignore
             input: (baseStyle, state) => {
-                return Object.assign(Object.assign({}, baseStyle), { color: 'var(--ab-cmp-input__color)' });
+                return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? 0 : baseStyle.padding, color: 'var(--ab-cmp-input__color)' });
+            },
+            valueContainer: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding });
             },
             // @ts-ignore
             singleValue: (baseStyle, state) => {
@@ -110,7 +113,7 @@ export const Select = function (props) {
                 state;
                 return Object.assign(Object.assign(Object.assign({}, baseStyle), commonStyles(state)), { 
                     // height: 30,
-                    minHeight: 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-focus__box-shadow)' : 'none', outline: state.isFocused ? 'var(--ab-focus__outline)' : 'none', border: props.variant && props.variant === 'raised'
                         ? '1px solid transparent'
                         : 'var(--ab-cmp-input__border)', '&:hover': {
                         border: 'var(--ab-cmp-input__border)',

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

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

package/src/metamodel/adaptable.metamodel.js

@@ -4625,7 +4625,7 @@ export const ADAPTABLE_METAMODEL = {
                 "name": "report",
                 "kind": "R",
                 "desc": "The exported report",
-                "ref": "unknown"
+                "ref": "Report"
             },
             {
                 "name": "reportData",
@@ -7564,7 +7564,7 @@ export const ADAPTABLE_METAMODEL = {
                 "name": "report",
                 "kind": "R",
                 "desc": "Report being exported",
-                "ref": "unknown"
+                "ref": "Report"
             }
         ]
     },
@@ -7865,8 +7865,8 @@ export const ADAPTABLE_METAMODEL = {
             }
         ]
     },
-    "Report_2": {
-        "name": "Report_2",
+    "Report": {
+        "name": "Report",
         "kind": "I",
         "desc": "A Report which can export data from AdapTable",
         "props": [
@@ -7917,7 +7917,7 @@ export const ADAPTABLE_METAMODEL = {
                 "name": "report",
                 "kind": "R",
                 "desc": "Definition of Report being Run",
-                "ref": "unknown"
+                "ref": "Report"
             },
             {
                 "name": "reportData",

package/src/parser/src/predicate/mapExpressionToQlPredicate.js

@@ -77,7 +77,9 @@ export function mapExpressionToQlPredicate(expression) {
         }
     }
     catch (err) {
-        return { errorMessage: `Query Builder does not support the expression: ${expression}` };
+        return {
+            errorMessage: `Query Builder does not support the expression: ${expression}`,
+        };
     }
 }
 function getOperatorFromAST(astRootNode) {

package/src/parser/src/predicate/mapQlPredicateToExpression.js

@@ -35,6 +35,9 @@ export function mapQlPredicateToExpression(predicate) {
             return `"${arg}"`;
         }
         if (typeof arg === 'object') {
+            if (isQlLogicalOperator(arg.operator)) {
+                return `(${mapQlPredicateToExpression(arg)})`;
+            }
             return mapQlPredicateToExpression(arg);
         }
         if (typeof arg === 'boolean') {
@@ -45,6 +48,12 @@ export function mapQlPredicateToExpression(predicate) {
     if (typeof firstArg === 'object') {
         firstArg = mapQlPredicateToExpression(firstArg);
     }
+    if (isQlLogicalOperator(operator)) {
+        // need to compose with AND [] AND ...
+        return mappedArgs.length
+            ? `${firstArg} ${operatorSymbol} ${mappedArgs.join(` ${operatorSymbol} `)}`
+            : `${firstArg}`;
+    }
     if (predicateType === 'INFIX') {
         if (operator === 'BETWEEN') {
             return `${firstArg} ${operatorSymbol} (${mappedArgs})`;

package/themes/dark.css

@@ -19,4 +19,4 @@ html.ab--theme-dark input[type=number].ab-Input::-webkit-inner-spin-button {
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>') no-repeat center center;
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3BhY2thZ2VzL2FkYXB0YWJsZS9zcmMvdGhlbWVzL2Rhcmsuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0VBQ0E7RUFFQTtFQUVBO0VBQ0E7RUFFQTtFQUNBO0VBQ0E7RUFDQTtFQVFBO0VBQ0E7RUFFQTtFQUVBO0VBQ0E7O0FBRUE7QUFBQTtFQUVFIiwiZmlsZSI6ImRhcmsuY3NzIiwic291cmNlUm9vdCI6IiJ9 */
+/*# sourceMappingURL=dark.css.map */

package/themes/dark.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../packages/adaptable/src/themes/dark.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAQA;EACA;EAEA;EAEA;EACA;;AAEA;AAAA;EAEE","file":"dark.css"}
+{"version":3,"sources":["../../packages/adaptable/src/themes/dark.scss","dark.css"],"names":[],"mappings":"AAAA;EACE,yCAAA;EACA,uBAAA;EAEA,6CAAA;EAEA,qCAAA;EACA,6CAAA;EAEA,2BAAA;EACA,gCAAA;EACA,+BAAA;EACA,mCAAA;EAQA,4BAAA;EACA,8DAAA;EAEA,wEAAA;EAEA,gEAAA;EACA,gEAAA;ACXF;ADaE;;EAEE,yTAAA;ACXJ","file":"dark.css"}

package/themes/light.css

@@ -2,4 +2,4 @@ html.ab--theme-light {
   --ab-theme-loaded: light;
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3BhY2thZ2VzL2FkYXB0YWJsZS9zcmMvdGhlbWVzL2xpZ2h0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSIsImZpbGUiOiJsaWdodC5jc3MiLCJzb3VyY2VSb290IjoiIn0= */
+/*# sourceMappingURL=light.css.map */

package/themes/light.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../packages/adaptable/src/themes/light.scss"],"names":[],"mappings":"AAAA;EACE","file":"light.css"}
+{"version":3,"sources":["../../packages/adaptable/src/themes/light.scss","light.css"],"names":[],"mappings":"AAAA;EACE,wBAAA;ACCF","file":"light.css"}