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

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