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

package/src/View/Export/ExportViewPanel.js

@@ -2,33 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExportViewPanelControl = void 0;
 const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const Select_1 = require("../../components/Select");
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const ExportRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ExportRedux"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
-const React = tslib_1.__importStar(require("react"));
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
-const ButtonExport_1 = require("../Components/Buttons/ButtonExport");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
+const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
+const ButtonExport_1 = require("../Components/Buttons/ButtonExport");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
-const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ButtonSchedule_1 = require("../Components/Buttons/ButtonSchedule");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
-const react_redux_1 = require("react-redux");
 const constants_1 = require("./constants");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
-const Select_1 = require("../../components/Select");
 class ExportViewPanelComponent extends React.Component {
     render() {
         let currentReport = this.props.api.exportApi.getReportByName(this.props.CurrentReport);
-        let currentReportId = StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.CurrentReport)
-            ? constants_1.SELECT_REPORT_STRING
-            : this.props.CurrentReport;
+        let currentReportId = this.props.CurrentReport;
         const allReportNames = this.getAllReportNames();
         const reportItems = allReportNames.map((report) => {
             return {
@@ -40,12 +37,10 @@ class ExportViewPanelComponent extends React.Component {
         if (currentReport && !allReportNames.includes(currentReport.Name)) {
             // current report is not available
             currentReport = undefined;
-            currentReportId = constants_1.SELECT_REPORT_STRING;
+            currentReportId = undefined;
         }
         let currentDestination = this.props.api.exportApi.getDestinationByName(this.props.CurrentDestination);
-        let currentDestinationId = StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.CurrentDestination)
-            ? constants_1.SELECT_DESTINATION_STRING
-            : this.props.CurrentDestination;
+        let currentDestinationId = this.props.CurrentDestination;
         const destinationItems = [
             ...this.props.api.exportApi.getAvailableExportDestinations().map((destination) => ({
                 label: destination,
@@ -70,7 +65,7 @@ class ExportViewPanelComponent extends React.Component {
                 .includes(this.props.CurrentDestination)) {
             // current destination is not available
             currentDestination = undefined;
-            currentDestinationId = constants_1.SELECT_DESTINATION_STRING;
+            currentDestinationId = undefined;
         }
         let accessLevel = AdaptableHelper_1.default.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,17 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutStatusBarSubPanelPopover = void 0;
+exports.LayoutStatusbar = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const SelectList_1 = require("../../components/SelectList");
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const Select_1 = require("../../components/Select");
 const AdaptableContext_1 = require("../AdaptableContext");
-const LayoutStatusBarSubPanelPopover = () => {
+const LayoutStatusbar = () => {
     const adaptable = (0, AdaptableContext_1.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_1.SelectList, { options: options, onChange: handleChange });
+    const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Name }));
+    const currentLayout = (0, react_redux_1.useSelector)((state) => state.Layout.CurrentLayout);
+    return (React.createElement(rebass_1.Box, { onClick: (event) => {
+            event.stopPropagation();
+        } },
+        React.createElement(Select_1.Select, { size: "small", options: options, value: currentLayout, onChange: (value) => {
+                adaptable.api.layoutApi.setLayout(value);
+            } })));
 };
-exports.LayoutStatusBarSubPanelPopover = LayoutStatusBarSubPanelPopover;
+exports.LayoutStatusbar = LayoutStatusbar;

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

@@ -4,18 +4,18 @@ exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 const rebass_1 = require("rebass");
+const Select_1 = require("../../components/Select");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
+const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
-const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
+const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
+const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
-const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
-const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
-const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
-const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
-const Select_1 = require("../../components/Select");
+const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
 exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {

package/src/View/Theme/ThemePopup.js

@@ -13,6 +13,7 @@ const rebass_1 = require("rebass");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const icons_1 = require("../../components/icons");
+const ThemeSelector_1 = require("./ThemeSelector");
 class ThemePopupComponent extends React.Component {
     constructor() {
         super(...arguments);
@@ -31,23 +32,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);
@@ -71,7 +55,8 @@ class ThemePopupComponent extends React.Component {
                 newButton) },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
-                    React.createElement(DropdownButton_1.default, { "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(rebass_1.Box, { maxWidth: 150 },
+                        React.createElement(ThemeSelector_1.ThemeSelector, null)))),
             isCustomTheme && (React.createElement(rebass_1.Box, { mt: 3 },
                 React.createElement(ThemeEditor_1.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,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const Select_1 = require("../../components/Select");
+const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const AdaptableContext_1 = require("../AdaptableContext");
+const ThemeSelector = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const availableThemes = adaptable.api.themeApi.getThemes();
+    const disabled = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants_1.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_1.Select, { "data-name": "select-theme-dropdown", options: optionThemes, value: theme.Name, disabled: disabled, size: props.size, onChange: (themeName) => {
+            dispatch(ThemeRedux.ThemeSelect(themeName));
+        } }));
+};
+exports.ThemeSelector = ThemeSelector;

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,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeStatusbar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const rebass_1 = require("rebass");
+const ThemeSelector_1 = require("./ThemeSelector");
+const ThemeStatusbar = () => {
+    return (react_1.default.createElement(rebass_1.Box, { onClick: (event) => {
+            event.stopPropagation();
+        } },
+        react_1.default.createElement(ThemeSelector_1.ThemeSelector, { size: "small" })));
+};
+exports.ThemeStatusbar = ThemeStatusbar;

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

@@ -2,59 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeViewPanelControl = void 0;
 const tslib_1 = require("tslib");
-const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
 const React = tslib_1.__importStar(require("react"));
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
-const react_redux_1 = require("react-redux");
-const Select_1 = require("../../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: (0, join_1.default)(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
-            React.createElement(Select_1.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)),
-    };
-}
-exports.ThemeViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ThemeViewPanelComponent);
+const ThemeSelector_1 = require("./ThemeSelector");
+const ThemeViewPanelControl = (props) => {
+    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
+    return (React.createElement("div", { className: (0, join_1.default)(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Theme__wrap`) },
+        React.createElement(ThemeSelector_1.ThemeSelector, null)));
+};
+exports.ThemeViewPanelControl = ThemeViewPanelControl;

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

@@ -15,9 +15,10 @@ const Select_1 = require("../../Select");
 const QueryBuilder_1 = require("./QueryBuilder");
 const utils_1 = require("./utils");
 const PrimitiveColumnSelector = (props) => {
-    return (react_1.default.createElement(ColumnSelector_1.ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
-            props.onChange(`[${columnId}]`);
-        } }));
+    return (react_1.default.createElement(rebass_1.Box, null,
+        react_1.default.createElement(ColumnSelector_1.ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
+                props.onChange(`[${columnId}]`);
+            } })));
 };
 exports.PrimitiveColumnSelector = PrimitiveColumnSelector;
 const PrimiteValueInput = (props) => {
@@ -96,11 +97,11 @@ const PrimiteValueInput = (props) => {
     ];
     const typeOption = options.find((option) => option.value === type);
     return (react_1.default.createElement(rebass_1.Flex, { "data-id": "query-input-wrapper", mr: 2 },
-        editor,
         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) }))));
+                }, variant: "raised", value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) })),
+        editor));
 };
 exports.PrimiteValueInput = PrimiteValueInput;
 const ExpressionSelector = (props) => {

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

@@ -15,21 +15,21 @@ const commonStyles = ({ isFocused, isDisabled, }) => {
     };
 };
 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 (0, date_fns_1.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;
     }
@@ -52,7 +52,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: (_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));
             }
@@ -81,7 +81,7 @@ 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) => {
@@ -103,7 +103,10 @@ 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) => {
@@ -114,7 +117,7 @@ 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

@@ -4628,7 +4628,7 @@ exports.ADAPTABLE_METAMODEL = {
                 "name": "report",
                 "kind": "R",
                 "desc": "The exported report",
-                "ref": "unknown"
+                "ref": "Report"
             },
             {
                 "name": "reportData",
@@ -7567,7 +7567,7 @@ exports.ADAPTABLE_METAMODEL = {
                 "name": "report",
                 "kind": "R",
                 "desc": "Report being exported",
-                "ref": "unknown"
+                "ref": "Report"
             }
         ]
     },
@@ -7868,8 +7868,8 @@ exports.ADAPTABLE_METAMODEL = {
             }
         ]
     },
-    "Report_2": {
-        "name": "Report_2",
+    "Report": {
+        "name": "Report",
         "kind": "I",
         "desc": "A Report which can export data from AdapTable",
         "props": [
@@ -7920,7 +7920,7 @@ exports.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

@@ -80,7 +80,9 @@ 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}`,
+        };
     }
 }
 exports.mapExpressionToQlPredicate = mapExpressionToQlPredicate;

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

@@ -38,6 +38,9 @@ function mapQlPredicateToExpression(predicate) {
             return `"${arg}"`;
         }
         if (typeof arg === 'object') {
+            if ((0, types_1.isQlLogicalOperator)(arg.operator)) {
+                return `(${mapQlPredicateToExpression(arg)})`;
+            }
             return mapQlPredicateToExpression(arg);
         }
         if (typeof arg === 'boolean') {
@@ -48,6 +51,12 @@ function mapQlPredicateToExpression(predicate) {
     if (typeof firstArg === 'object') {
         firstArg = mapQlPredicateToExpression(firstArg);
     }
+    if ((0, types_1.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"}