@adaptabletools/adaptable-cjs 17.0.0-canary.4 → 18.0.0-canary.1

package/src/agGrid/Adaptable.js

@@ -51,7 +51,6 @@ const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
 const AdaptableNumberEditor_1 = require("./editors/AdaptableNumberEditor");
 const AdaptableDateEditor_1 = require("./editors/AdaptableDateEditor");
 const waitForCondition_1 = require("../Utilities/waitForCondition");
-const package_json_1 = require("../../package.json");
 const MetamodelService_1 = require("../Utilities/Services/MetamodelService");
 const DocumentationLinkConstants_1 = require("../Utilities/Constants/DocumentationLinkConstants");
 const DateHelper_1 = require("../Utilities/Helpers/DateHelper");
@@ -68,7 +67,10 @@ const AdaptableLogger_1 = require("./AdaptableLogger");
 const attachAddaptableColumnTypes_1 = require("./attachAddaptableColumnTypes");
 const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
 const Fdc3Service_1 = require("../Utilities/Services/Fdc3Service");
+const CellPopupService_1 = require("../Utilities/Services/CellPopupService");
 const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
+const env_1 = tslib_1.__importDefault(require("../env"));
+const publishTimestamp = Number(env_1.default.PUBLISH_TIMESTAMP);
 const GROUP_PATH_SEPARATOR = '/';
 // IMPORTANT - we need colId to be set in order for safeSetColDefs to work correctly
 const assignColId = (colDef, logger) => {
@@ -361,24 +363,6 @@ class Adaptable {
     async init(adaptableOptions, runtimeConfig, _staticInit) {
         this.logger = new AdaptableLogger_1.AdaptableLogger(adaptableOptions.adaptableId || String(Date.now()));
         const perfAdaptableInit = this.logger.beginPerf(`Adaptable init()`);
-        if (runtimeConfig.renderReactRoot) {
-            this.renderReactRoot = (el, container) => {
-                const unmount = runtimeConfig.renderReactRoot(el, container);
-                return () => {
-                    // we used to capture here because of FloatingFilters/Filters - see FloatingFilterWrapper and FilterWrapper
-                    // as we didn't have a native React implementation for our React wrapper
-                    // but we might need to do this again in the future for some other components that are not native React
-                    // captureReactWarnings();
-                    if (typeof unmount === 'function') {
-                        // rAF is required, otherwise the unmount would be performed during the rendering phase and React doesn't like that
-                        requestAnimationFrame(() => {
-                            unmount();
-                        });
-                    }
-                    // releaseReactWarnings();
-                };
-            };
-        }
         if (runtimeConfig.variant) {
             this.variant = runtimeConfig.variant;
         }
@@ -447,6 +431,7 @@ class Adaptable {
         this.AlertService = new AlertService_1.AlertService(this.api);
         this.TeamSharingService = new TeamSharingService_1.TeamSharingService(this.api);
         this.Fdc3Service = new Fdc3Service_1.Fdc3Service(this.api);
+        this.CellPopupService = new CellPopupService_1.CellPopupService(this.api);
         // @ts-ignore
         this.RowEditService = new RowEditService_1.RowEditService(this.api);
         this.MetamodelService = new MetamodelService_1.MetamodelService(() => this.api.optionsApi.getAdaptableOptions());
@@ -1167,6 +1152,20 @@ class Adaptable {
         }
         return 'ab-Cell-Note';
     }
+    getCommentCellClassName(gridCell, params) {
+        if (!this.api.internalApi.getModuleService().isModuleAvailable('Comments')) {
+            return;
+        }
+        const position = {
+            PrimaryKeyValue: gridCell.primaryKeyValue,
+            ColumnId: gridCell.column.columnId,
+        };
+        const cellComments = this.api.commentApi.getCommentThread(position);
+        if (!cellComments) {
+            return undefined;
+        }
+        return 'ab-Cell-Comment';
+    }
     getFlashingCellClass(gridcell, params) {
         var _a, _b, _c;
         const primaryKey = params.node.aggData ? params.node.id : gridcell.primaryKeyValue;
@@ -1802,7 +1801,7 @@ class Adaptable {
         };
         this.api.gridApi.internalApi.setSelectedCells(selectedCellInfo);
         this._emit('CellsSelected');
-        this.agGridHelper.fireSelectionChangedEvent();
+        this.agGridHelper.fireCellSelectionChangedEvent();
         return selectedCellInfo;
     }
     setSelectedRows() {
@@ -1836,7 +1835,7 @@ class Adaptable {
         }
         const selectedRowInfo = { gridRows: selectedRows };
         this.api.gridApi.internalApi.setSelectedRows(selectedRowInfo);
-        this.agGridHelper.fireSelectionChangedEvent();
+        this.agGridHelper.fireRowSelectionChangedEvent();
         return selectedRowInfo;
     }
     setDataValue(value, column, primaryKeyValue, rowNode) {
@@ -2678,6 +2677,18 @@ class Adaptable {
                 columnTypes.push(...calculatedColumnSettings.ColumnTypes);
             }
             const isExternalEvaluation = !this.api.expressionApi.internalApi.evaluateExpressionInAdaptableQL('CalculatedColumn', calculatedColumn, this.api.expressionApi.getAdaptableQueryExpression(calculatedColumn.Query));
+            const valueGetter = (params) => {
+                var _a, _b;
+                if (isExternalEvaluation) {
+                    return (_a = params.data) === null || _a === void 0 ? void 0 : _a[calculatedColumn.ColumnId];
+                }
+                // if the grid data is NOT client side, we can aggregate only simple scalar expression (which depend on row data, not on other rows)
+                if (this.api.gridApi.getAgGridRowModelType() !== 'clientSide' &&
+                    StringExtensions_1.StringExtensions.IsNotNullOrEmpty(calculatedColumn.Query.AggregatedScalarExpression)) {
+                    return (_b = params.data) === null || _b === void 0 ? void 0 : _b[calculatedColumn.ColumnId];
+                }
+                return this.CalculatedColumnExpressionService.evaluateCalculatedColumnQuery(calculatedColumn, params.node);
+            };
             const newColDef = {
                 headerName: calculatedColumn.FriendlyName
                     ? calculatedColumn.FriendlyName
@@ -2696,13 +2707,7 @@ class Adaptable {
                 suppressMenu: calculatedColumnSettings.SuppressMenu,
                 suppressMovable: calculatedColumnSettings.SuppressMovable,
                 type: columnTypes,
-                valueGetter: (params) => {
-                    var _a;
-                    if (isExternalEvaluation) {
-                        return (_a = params.data) === null || _a === void 0 ? void 0 : _a[calculatedColumn.ColumnId];
-                    }
-                    return this.CalculatedColumnExpressionService.evaluateCalculatedColumnQuery(calculatedColumn, params.node);
-                },
+                valueGetter,
             };
             if (calculatedColumnSettings.ShowToolTip != null &&
                 calculatedColumnSettings.ShowToolTip == true) {
@@ -3481,6 +3486,7 @@ class Adaptable {
                 const styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(colId);
                 const hasStyledColumn = !!styledColumn && !styledColumn.IsSuspended;
                 const noteClassName = this.getNoteCellClassName(gridCell, params);
+                const commentsClassName = this.getCommentCellClassName(gridCell, params);
                 const returnValue = [
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
                     !hasStyledColumn && formatColumns.length
@@ -3492,6 +3498,7 @@ class Adaptable {
                     highlightAlertClassName,
                     flashingClassName,
                     noteClassName,
+                    commentsClassName,
                 ]
                     // we flatten the array because some rules ('userCellClass' etc)  might return a string[]
                     .flat()
@@ -3637,20 +3644,23 @@ class Adaptable {
                     return userPropertyValue(params);
                 }
                 const value = params.value;
-                const unbalancedGroupsKey = (_a = adaptableOptions.groupingOptions) === null || _a === void 0 ? void 0 : _a.unbalancedGroupsKey;
-                if (!unbalancedGroupsKey) {
+                if (this.gridOptions.groupAllowUnbalanced) {
                     return value;
                 }
-                let groupUnbalancedGroupsUnderKeyValue = typeof unbalancedGroupsKey === 'function'
-                    ? unbalancedGroupsKey({
+                const balancedGroupsKey = (_a = adaptableOptions.groupingOptions) === null || _a === void 0 ? void 0 : _a.balancedGroupsKey;
+                if (!balancedGroupsKey) {
+                    return value;
+                }
+                let groupBalancedGroupsUnderKeyValue = typeof balancedGroupsKey === 'function'
+                    ? balancedGroupsKey({
                         adaptableApi: adaptableApi,
                         userName: this.adaptableOptions.userName,
                         adaptableId: this.adaptableOptions.adaptableId,
                         adaptableColumn: abColumn,
                         params,
                     })
-                    : unbalancedGroupsKey;
-                return value === null || value === undefined ? groupUnbalancedGroupsUnderKeyValue : value;
+                    : balancedGroupsKey;
+                return value === null || value === undefined ? groupBalancedGroupsUnderKeyValue : value;
             };
         });
     }
@@ -4179,6 +4189,9 @@ class Adaptable {
     getAgGridColumnForColumnId(columnId) {
         return this.gridOptions.columnApi.getColumn(columnId);
     }
+    getAgGridAllGridColumns() {
+        return this.gridOptions.columnApi.getAllGridColumns();
+    }
     setRowGroupColumns(columnIds) {
         this.gridOptions.columnApi.setRowGroupColumns(columnIds);
     }
@@ -4615,6 +4628,7 @@ class Adaptable {
         return this.getAgGridLightThemeName();
     }
     applyAdaptableTheme(theme) {
+        theme = this.ThemeService.mapOsTheme(theme);
         const themeName = typeof theme === 'string' ? theme : theme.Name;
         const isSystemTheme = this.api.themeApi.internalApi.isSystemTheme(themeName);
         const themeClassNamesToRemove = [];
@@ -5114,7 +5128,7 @@ class Adaptable {
         const globalObject = typeof globalThis !== 'undefined' ? globalThis : window;
         const licenseKey = globalObject.ADAPTABLE_LICENSE_KEY || this.api.optionsApi.getLicenseKey();
         return new LicenseService_1.LicenseService(this, licenseKey, {
-            publishedAt: package_json_1.publishTimestamp,
+            publishedAt: publishTimestamp,
         });
     }
     showCharts(chartsDefinitions, chartContainer) {

package/src/agGrid/BadgeRenderer.js

@@ -22,7 +22,7 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
             this.eGui.className = 'ab-Badge__wrapper';
             const includeGrouped = Boolean(styledColumn.IncludeGroupedRows);
             const isGrouped = params.node.group;
-            if ((includeGrouped === false && isGrouped)) {
+            if (includeGrouped === false && isGrouped) {
                 const formattedValue = (_c = (_b = (_a = params.formatValue) === null || _a === void 0 ? void 0 : _a.call(params, params.value)) !== null && _b !== void 0 ? _b : params.value) !== null && _c !== void 0 ? _c : '';
                 this.eGui.innerHTML = formattedValue;
                 return;
@@ -88,10 +88,12 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
-            this.renderBadges([{
+            this.renderBadges([
+                {
                     badge,
                     value: formattedValue,
-                }], api, params);
+                },
+            ], api, params);
         }
         renderBadges(config, api, params) {
             const adaptable = this.getAdaptableInstance(params);
@@ -103,10 +105,12 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                     children: value,
                     icon: badge.Icon,
                     iconPosition: (_a = badge.IconPosition) !== null && _a !== void 0 ? _a : 'start',
-                    gap: 5
+                    gap: 5,
                 });
             });
-            this.unmountReactRoot = api.internalApi.getAdaptableInstance().renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(React.Fragment, { children: badges }), adaptable), this.eGui);
+            this.unmountReactRoot = api.internalApi
+                .getAdaptableInstance()
+                .renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(React.Fragment, { children: badges }), adaptable), this.eGui);
         }
         getGui() {
             return this.eGui;

package/src/agGrid/agGridHelper.d.ts

@@ -30,7 +30,8 @@ export declare class agGridHelper {
     isSideBarDefObject(sidebarDef: unknown): sidebarDef is SideBarDef;
     mapToolPanelDefs(toolPanelDefs?: (ToolPanelDef | string)[]): (ToolPanelDef | string)[];
     reselectSelectedCells(): void;
-    fireSelectionChangedEvent(): void;
+    fireCellSelectionChangedEvent(): void;
+    fireRowSelectionChangedEvent(): void;
     private isColumnReadonly;
     private isColumnFieldonly;
     private isColumnSortable;

package/src/agGrid/agGridHelper.js

@@ -47,6 +47,7 @@ const Helper_1 = require("../Utilities/Helpers/Helper");
 const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
 const BadgeRenderer_1 = require("./BadgeRenderer");
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
+const CommentsModule_1 = require("../Strategy/CommentsModule");
 const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
@@ -113,6 +114,7 @@ class agGridHelper {
         modules.set(ModuleConstants.Fdc3ModuleId, new Fdc3Module_1.Fdc3Module(api));
         modules.set(ModuleConstants.GridFilterModuleId, new GridFilterModule_1.GridFilterModule(api));
         modules.set(ModuleConstants.NamedQueryModuleId, new NamedQueryModule_1.NamedQueryModule(api));
+        modules.set(ModuleConstants.CommentsModuleId, new CommentsModule_1.CommentsModule(api));
         return modules;
     }
     TrySetUpNodeIds(hasAutogeneratedPrimaryKey) {
@@ -300,15 +302,25 @@ class agGridHelper {
             this.gridOptions.api.addCellRange(cellRangeParams);
         }
     }
-    fireSelectionChangedEvent() {
-        let selectionChangedInfo = {
+    fireCellSelectionChangedEvent() {
+        let cellSelectionChangedInfo = {
             adaptableApi: this.adaptable.api,
             selectedCellInfo: this.adaptable.api.gridApi.getGridState().SelectedCellInfo,
+            //   selectedRowInfo: this.adaptable.api.gridApi.getGridState().SelectedRowInfo,
+            userName: this.adaptable.api.optionsApi.getUserName(),
+            adaptableId: this.adaptable.api.optionsApi.getAdaptableId(),
+        };
+        this.adaptable.api.eventApi.emit('CellSelectionChanged', cellSelectionChangedInfo);
+    }
+    fireRowSelectionChangedEvent() {
+        let rowSelectionChangedInfo = {
+            adaptableApi: this.adaptable.api,
+            //  selectedCellInfo: this.adaptable.api.gridApi.getGridState().SelectedCellInfo,
             selectedRowInfo: this.adaptable.api.gridApi.getGridState().SelectedRowInfo,
             userName: this.adaptable.api.optionsApi.getUserName(),
             adaptableId: this.adaptable.api.optionsApi.getAdaptableId(),
         };
-        this.adaptable.api.eventApi.emit('SelectionChanged', selectionChangedInfo);
+        this.adaptable.api.eventApi.emit('RowSelectionChanged', rowSelectionChangedInfo);
     }
     isColumnReadonly(colDef) {
         // if the column has conditional/dynamic editability, we assume some rows may be editable

package/src/agGrid/agGridMenuHelper.d.ts

@@ -7,6 +7,8 @@ export declare class agGridMenuHelper {
     private gridOptions;
     constructor(adaptable: IAdaptable, gridOptions: GridOptions);
     destroy(): void;
+    private buildGroupedModuleItems;
+    private mapAdaptableMenuItemToSystemMenuItems;
     buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (string | MenuItemDef)[];
     buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (string | MenuItemDef)[];
     private createAdaptableColumnMenuItems;

package/src/agGrid/agGridMenuHelper.js

@@ -13,11 +13,49 @@ class agGridMenuHelper {
     constructor(adaptable, gridOptions) {
         this.adaptable = adaptable;
         this.gridOptions = gridOptions;
+        this.buildGroupedModuleItems = (sortedMenuItems, adaptableMenuItems) => {
+            return sortedMenuItems
+                .map((moduleOrGroup) => {
+                if (typeof moduleOrGroup === 'object') {
+                    const submenuItems = this.buildGroupedModuleItems(moduleOrGroup.modules, adaptableMenuItems);
+                    // if there is only one item in the submenu, we don't need to show the submenu
+                    if (submenuItems.length === 1) {
+                        return submenuItems[0];
+                    }
+                    return {
+                        label: moduleOrGroup.title,
+                        icon: moduleOrGroup.icon,
+                        subItems: submenuItems,
+                    };
+                }
+                else {
+                    return adaptableMenuItems.find((menuItem) => menuItem.module === moduleOrGroup);
+                }
+            })
+                .filter((menuItem) => {
+                if (!menuItem) {
+                    return false;
+                }
+                if (menuItem.subItems && menuItem.subItems.length === 0) {
+                    return false;
+                }
+                return true;
+            });
+        };
     }
     destroy() {
         this.adaptable = null;
         this.gridOptions = null;
     }
+    mapAdaptableMenuItemToSystemMenuItems(adaptableMenuItems) {
+        return (adaptableMenuItems !== null && adaptableMenuItems !== void 0 ? adaptableMenuItems : []).map((menuItem) => {
+            let subItems = menuItem.subItems;
+            if (subItems && subItems.length > 0) {
+                subItems = subItems.map((subItem) => this.mapAdaptableMenuItemToSystemMenuItems(subItem.subItems));
+            }
+            return Object.assign(Object.assign({}, menuItem), { menuType: 'Adaptable', subItems });
+        });
+    }
     buildColumnMenu(params, originalGetMainMenuItems) {
         var _a;
         const menuOptions = this.adaptable.adaptableOptions.menuOptions;
@@ -31,11 +69,7 @@ class agGridMenuHelper {
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
         const adaptableMenuItems = this.createAdaptableColumnMenuItems(menuContext);
         // sort Adaptable menu items by default order
-        adaptableMenuItems.sort((first, second) => {
-            const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER.indexOf(first.module);
-            const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER.indexOf(second.module);
-            return firstPriority - secondPriority;
-        });
+        const structuredAdaptableMenuItems = this.buildGroupedModuleItems(MenuOptions_1.DEFAULT_ADAPTABLE_COLUMN_MENU_ORDER, adaptableMenuItems);
         // 1. first check if there is a custom column menu defined
         if (typeof menuOptions.customColumnMenu === 'function') {
             const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
@@ -45,7 +79,7 @@ class agGridMenuHelper {
             const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
             const customMenuItems = menuOptions
                 .customColumnMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
-                defaultAdaptableMenuItems }))
+                defaultAdaptableMenuItems, structuredAdaptableMenuItems: this.mapAdaptableMenuItemToSystemMenuItems(structuredAdaptableMenuItems) }))
                 .filter(Boolean);
             return customMenuItems
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
@@ -58,7 +92,7 @@ class agGridMenuHelper {
         const defaultContextMenu = [
             ...agGridMenuItems,
             'separator',
-            ...adaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
+            ...structuredAdaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
         return defaultContextMenu;
     }
@@ -78,11 +112,7 @@ class agGridMenuHelper {
         const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
         const adaptableMenuItems = this.createAdaptableContextMenuItems(menuContext);
         // sort Adaptable menu items by default order
-        adaptableMenuItems.sort((first, second) => {
-            const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(first.module);
-            const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(second.module);
-            return firstPriority - secondPriority;
-        });
+        const structuredAdaptableMenuItems = this.buildGroupedModuleItems(MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_STRUCTURE, adaptableMenuItems);
         // 1. first check if there is a custom context menu defined
         if (typeof menuOptions.customContextMenu === 'function') {
             const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
@@ -92,7 +122,7 @@ class agGridMenuHelper {
             const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
             const customMenuItems = menuOptions
                 .customContextMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
-                defaultAdaptableMenuItems }))
+                defaultAdaptableMenuItems, structuredAdaptableMenuItems: this.mapAdaptableMenuItemToSystemMenuItems(structuredAdaptableMenuItems) }))
                 .filter(Boolean);
             return customMenuItems
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
@@ -105,7 +135,7 @@ class agGridMenuHelper {
         const defaultContextMenu = [
             ...agGridMenuItems,
             'separator',
-            ...adaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
+            ...structuredAdaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
         return defaultContextMenu;
     }
@@ -346,12 +376,30 @@ class agGridMenuHelper {
         let isSingleSelectedColumn = false;
         let isSelectedCell = false;
         let isSelectedRow = false;
-        let clickedCell = undefined;
-        if (adaptableColumn) {
-            clickedCell = this.adaptable.getGridCellFromRowNode(params.node, adaptableColumn.columnId);
+        // row group columns dont provide an AdapTable Column so return bare minimum
+        if (!adaptableColumn) {
+            return {
+                isSelectedCell: false,
+                isSelectedRow: false,
+                gridCell: undefined,
+                adaptableColumn: undefined,
+                agGridColumn: params.column,
+                rowNode: params.node,
+                isGroupedNode: params.node ? params.node.group : false,
+                isSingleSelectedColumn: false,
+                isSingleSelectedCell: false,
+                primaryKeyValue: undefined,
+                adaptableApi: this.adaptable.api,
+                userName: this.adaptable.adaptableOptions.userName,
+                adaptableId: this.adaptable.adaptableOptions.adaptableId,
+                selectedCellInfo: undefined,
+                selectedRowInfo: undefined,
+                isRowGroupColumn: this.adaptable.api.columnApi.isAutoRowGroupColumn(params.column.getColId()),
+            };
         }
-        let selectedCellInfo = this.adaptable.api.gridApi.getSelectedCellInfo();
-        if (clickedCell && selectedCellInfo) {
+        const clickedCell = this.adaptable.getGridCellFromRowNode(params.node, adaptableColumn.columnId);
+        const selectedCellInfo = this.adaptable.api.gridApi.getSelectedCellInfo();
+        if (selectedCellInfo) {
             let matchedCell = selectedCellInfo.gridCells.find((gc) => gc != null &&
                 gc.column == clickedCell.column &&
                 gc.primaryKeyValue == clickedCell.primaryKeyValue);
@@ -360,9 +408,9 @@ class agGridMenuHelper {
                 isSingleSelectedColumn = ArrayExtensions_1.ArrayExtensions.CorrectLength(selectedCellInfo.columns, 1);
             }
         }
-        let selectedRowInfo = this.adaptable.api.gridApi.getSelectedRowInfo();
+        const selectedRowInfo = this.adaptable.api.gridApi.getSelectedRowInfo();
         if (selectedRowInfo) {
-            let matchedPKValue = selectedRowInfo.gridRows.find((gr) => gr != null && gr.primaryKeyValue == clickedCell.primaryKeyValue);
+            const matchedPKValue = selectedRowInfo.gridRows.find((gr) => gr != null && gr.primaryKeyValue == clickedCell.primaryKeyValue);
             isSelectedRow = matchedPKValue != null;
         }
         return {
@@ -395,8 +443,8 @@ class agGridMenuHelper {
     }
     createAdaptableContextMenuItems(menuContext) {
         let contextMenuItems = [];
-        this.adaptable.adaptableModules.forEach((s) => {
-            let menuItems = s.addContextMenuItems(menuContext);
+        this.adaptable.adaptableModules.forEach((module) => {
+            let menuItems = module.addContextMenuItems(menuContext);
             if (menuItems) {
                 contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
             }
@@ -537,8 +585,8 @@ class agGridMenuHelper {
                 adaptableMenuItems.push(...allAdaptableMenuItems);
             }
             adaptableMenuItems.sort((first, second) => {
-                const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(first.module);
-                const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_ORDER.indexOf(second.module);
+                const firstPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_STRUCTURE.indexOf(first.module);
+                const secondPriority = MenuOptions_1.DEFAULT_ADAPTABLE_CONTEXT_MENU_STRUCTURE.indexOf(second.module);
                 return firstPriority - secondPriority;
             });
             // }

package/src/components/Datepicker/index.js

@@ -17,13 +17,13 @@ const DatepickerContext_1 = require("./DatepickerContext");
 const addDays_1 = tslib_1.__importDefault(require("date-fns/addDays"));
 const addBusinessDays_1 = tslib_1.__importDefault(require("date-fns/addBusinessDays"));
 const react_day_picker_1 = require("react-day-picker");
-const DatepickerOverlay = ({ onHide, children, onKeyDown, }) => {
+const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
     const domRef = React.useRef(null);
     React.useEffect(() => {
         var _a;
         (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, tabIndex: -1, onKeyDown: onKeyDown, onBlur: (e) => {
+    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
             var _a;
             const { relatedTarget } = e;
             const node = domRef.current;
@@ -87,7 +87,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
     return (React.createElement(rebass_1.Flex, null,
-        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onHide: () => setVisible(false), onKeyDown: (e) => {
+        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);
                     }
@@ -97,7 +97,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
                     borderRadius: style === null || style === void 0 ? void 0 : style.borderRadius,
                     width: style === null || style === void 0 ? void 0 : style.width,
                     maxWidth: style === null || style === void 0 ? void 0 : style.maxWidth,
-                }, onFocus: () => {
+                }, className: "ab-Datepicker", onFocus: () => {
                     if (!visible) {
                         setVisible(true);
                     }

package/src/components/ExpressionEditor/ExpressionPreview.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AdaptableQuery } from '../../types';
+interface ExpressionPreviewProps {
+    query: AdaptableQuery;
+}
+export declare const ExpressionPreview: React.FunctionComponent<ExpressionPreviewProps>;
+export {};

package/src/components/ExpressionEditor/ExpressionPreview.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpressionPreview = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const ExpressionPreview = (props) => {
+    var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const displayColumnFriendlyNames = (_a = adaptable.api.optionsApi.getExpressionOptions()) === null || _a === void 0 ? void 0 : _a.displayColumnFriendlyNamesForExpressions;
+    if (!displayColumnFriendlyNames) {
+        return React.createElement(React.Fragment, null, adaptable.api.expressionApi.getAdaptableQueryExpression(props.query));
+    }
+    const expressionWithFriendlyNames = adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(props.query);
+    // '[Column Name] > 2' => ['[Column Name]', '>', '2']
+    // not the prettiest
+    const strWithMarkedGroupes = expressionWithFriendlyNames.replace(/\]/gi, '],').split(',');
+    return (React.createElement(React.Fragment, null, strWithMarkedGroupes.map((part, index) => {
+        const partEl = part.includes('[') ? React.createElement("i", null, part.replace(/[\[\]]/g, '')) : part;
+        return React.createElement(React.Fragment, { key: index },
+            "\u00A0",
+            partEl);
+    })));
+};
+exports.ExpressionPreview = ExpressionPreview;

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

@@ -110,9 +110,9 @@ const QueryBuilder = (props) => {
         } },
         React.createElement(QueryBuilderContext.Provider, { value: context },
             React.createElement(rebass_1.Box, { className: QUERY_BUILDER_CLASSNAME },
-                React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
+                React.createElement(HelpBlock_1.default, { "data-name": "query-builder-help", mt: 2, mb: 2, p: 2, fontSize: 3 }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
                 errorOrEditor,
-                React.createElement(Panel_1.default, { variant: "default", header: "AdapTableQL Expression", mt: 3 },
+                React.createElement(Panel_1.default, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", mt: 3 },
                     React.createElement(rebass_1.Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression`, minHeight: 48, my: 2, p: 3 }, expressionStr || 'Outputted Expression will display here'))))));
 };
 exports.QueryBuilder = QueryBuilder;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.d.ts

@@ -17,6 +17,12 @@ export declare const PrimiteValueInput: (props: {
      */
     lefthandColumnIdParam: string;
 }) => JSX.Element;
+export declare const PrimitiveMultiValueInput: (props: {
+    inputType: ExpressionFunctionInputType;
+    value: any[];
+    onChange(values: any[]): void;
+    lefthandColumnIdParam: string;
+}) => JSX.Element;
 export declare const ExpressionSelector: (props: {
     value: BooleanFunctionName;
     dataType: AdaptableColumn['dataType'];