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

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