@adaptabletools/adaptable-cjs 18.0.0-canary.32 → 18.0.0-canary.34

package/src/Utilities/Services/RowSummaryService.js

@@ -9,7 +9,7 @@ const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/
 const Helper_1 = tslib_1.__importDefault(require("../Helpers/Helper"));
 const AggregatedScalarLiveValue_1 = require("./AggregatedScalarLiveValue");
 const ObjectExtensions_1 = require("../Extensions/ObjectExtensions");
-const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
 /**
  * The logic is extracted here to make it easier to follow
  */
@@ -17,7 +17,12 @@ class RowSummaryService {
     constructor(api) {
         this.api = api;
         this.cachedCellSummary = new Map();
-        this.debouncedEvaluateRowSummary = (0, debounce_1.default)(this.evaluateRowSummary, 300);
+        this._throttleAcumulatedColumnsThatChanged = new Set();
+        /**
+         *
+         * @param colId optional to evaluate only one column
+         */
+        this._throttledEvaluateRowSummary = (0, throttle_1.default)(this.evaluateRowSummary, 300);
     }
     onAdapterReady() {
         this.rowSummariesSubscriptions();
@@ -31,17 +36,17 @@ class RowSummaryService {
         if (!this.api.layoutApi.internalApi.getLayoutSupportedFeatures().RowSummaries) {
             return;
         }
-        this.debouncedEvaluateRowSummary();
+        this.throttledEvaluateRowSummary();
         this.api.eventApi.on('AdaptableStateReloaded', () => {
-            this.debouncedEvaluateRowSummary();
+            this.throttledEvaluateRowSummary();
         });
         this.api.eventApi.on('GridDataChanged', (event) => {
-            this.debouncedEvaluateRowSummary();
+            this.throttledEvaluateRowSummary();
         });
         this.api.eventApi.on('CellChanged', (event) => {
             const columnId = event.cellChange.column.columnId;
-            this.debouncedEvaluateRowSummary({
-                columnId,
+            this.throttledEvaluateRowSummary({
+                columnIds: [columnId],
             });
         });
         this.api.eventApi.on('LayoutChanged', (event) => {
@@ -51,25 +56,34 @@ class RowSummaryService {
             }
             setTimeout(() => {
                 // the timeout is added so the grid has time to repond to the layout changed
-                this.debouncedEvaluateRowSummary();
+                this.throttledEvaluateRowSummary();
             }, 16);
         });
         const adaptable = this.api.internalApi.getAdaptableInstance();
         adaptable._on('AdapTableFiltersApplied', () => {
             // we need to use this instead of layout changed
             // so the rows have time to update
-            this.debouncedEvaluateRowSummary();
+            this.throttledEvaluateRowSummary();
         });
         adaptable._on('FirstDataRendered', () => {
-            this.debouncedEvaluateRowSummary();
+            this.throttledEvaluateRowSummary();
         });
     }
-    /**
-     *
-     * @param colId optional to evaluate only one column
-     */
+    throttledEvaluateRowSummary(reason) {
+        if (reason) {
+            reason.columnIds.forEach((col) => this._throttleAcumulatedColumnsThatChanged.add(col));
+        }
+        this._throttledEvaluateRowSummary(reason);
+    }
     evaluateRowSummary(reason) {
         var _a;
+        if (this._throttleAcumulatedColumnsThatChanged.size > 0) {
+            const columnIds = Array.from(this._throttleAcumulatedColumnsThatChanged.values());
+            reason = {
+                columnIds,
+            };
+            this._throttleAcumulatedColumnsThatChanged.clear();
+        }
         if (this.api.isDestroyed()) {
             return;
         }
@@ -95,7 +109,7 @@ class RowSummaryService {
                             // refresh all of them
                             expressionLiveValue.refresh();
                         }
-                        else if ('columnId' in reason && reason.columnId === columnId) {
+                        else if ('columnIds' in reason && reason.columnIds.includes(columnId)) {
                             expressionLiveValue.refresh();
                         }
                     }

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -54,7 +54,7 @@ class BulkUpdatePopupComponent extends React.Component {
                     React.createElement(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                             this.onApplyClick();
-                        }, variant: "raised", tone: "accent" }, "Apply to Grid")))) : (React.createElement(React.Fragment, null,
+                        }, variant: "raised", tone: "accent" }, "Apply Bulk Update")))) : (React.createElement(React.Fragment, null,
                 React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, "Select an existing Column value from the dropdown, or enter a new value"),
                 React.createElement(rebass_1.Flex, { marginTop: 2, flexDirection: "row", alignItems: "center" },
                     React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 },
@@ -63,7 +63,7 @@ class BulkUpdatePopupComponent extends React.Component {
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All' ||
                             hasDataTypeError, variant: "raised", tone: "accent", marginRight: 2, onClick: () => {
                             this.onApplyClick();
-                        } }, "Apply to Grid"),
+                        } }, "Apply Bulk Update"),
                     ' ',
                     hasDataTypeError && (React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Update Error', bodyText: [dataTypeErrorMessage], MessageType: 'Error' })),
                     StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) &&

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -39,7 +39,10 @@ const AdaptablePopup = (props) => {
     let componentName = props.componentName;
     // ts forces to check for General, there is no menu item General
     const useFirstItem = !props.componentName;
-    if (useFirstItem && firstMenuModule !== 'General' && firstMenuModule !== 'CustomSettingsPanel') {
+    if (useFirstItem &&
+        firstMenuModule !== 'General' &&
+        firstMenuModule !== 'CustomSettingsPanel' &&
+        firstMenuModule !== 'Group') {
         componentModule = firstMenuModule;
     }
     const customSettingsPanel = (_c = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.customSettingsPanels) === null || _c === void 0 ? void 0 : _c.find((customPanel) => useFirstItem ? customPanel.name === firstMenuItem.label : customPanel.name === componentName);

package/src/View/Components/Popups/AdaptablePopup/useMenuItems.js

@@ -22,6 +22,7 @@ const useMenuItems = () => {
         }
         const visibleItems = allMenuItems.filter((item) => item.module !== 'General' &&
             item.module !== 'CustomSettingsPanel' &&
+            item.module !== 'Group' &&
             !DefaultSettingsPanel_1.STANDALONE_MODULE_POPUPS.includes(item.module) &&
             item.isVisible);
         let navItems = navigationItems

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.js

@@ -17,11 +17,8 @@ const ConnectedNoteEditor = ({ enableEditMode }) => {
     const editMode = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsAndNotesEditModeSelector)(state.System));
     const cellPopupService = api.internalApi.getCellPopupService();
     const cellAddress = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsAndNotesSelector)(state.System));
-    const [
-    // Only handle first note for now
-    // Later we can handle multiple notes
-    note,] = (0, react_redux_1.useSelector)((state) => {
-        return cellAddress ? (0, NoteRedux_1.GetNotesSelector)(state.Note, cellAddress) : [];
+    const note = (0, react_redux_1.useSelector)((state) => {
+        return cellAddress ? (0, NoteRedux_1.GetNoteSelector)(state.Note, cellAddress) : null;
     });
     const handleNoteChange = React.useCallback((value) => {
         api.noteApi.updateNoteText(value, note);

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -100,7 +100,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
                     columnId: 'undoActionColumn',
                     friendlyName: ' ',
                     rowScope: {
-                        ExcludeGroupedRows: true,
+                        ExcludeGroupRows: true,
                         ExcludeSummaryRows: true,
                     },
                     actionColumnSettings: { suppressMenu: true, suppressMovable: true },

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -22,8 +22,8 @@ const renderFormatColumnSettingsSummary = (data) => {
             React.createElement(Tag_1.Tag, null, ((_b = data.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeDataRows) ? 'no' : 'yes')),
         ' ',
         React.createElement(rebass_1.Text, { mt: 3 },
-            "Grouped Rows ",
-            React.createElement(Tag_1.Tag, null, ((_c = data.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeGroupedRows) ? 'no' : 'yes')),
+            "Group Rows ",
+            React.createElement(Tag_1.Tag, null, ((_c = data.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeGroupRows) ? 'no' : 'yes')),
         React.createElement(rebass_1.Text, { mt: 3 },
             "Summary Rows ",
             React.createElement(Tag_1.Tag, null, ((_d = data.RowScope) === null || _d === void 0 ? void 0 : _d.ExcludeSummaryRows) ? 'no' : 'yes'))));
@@ -43,7 +43,7 @@ const FormatColumnSettingsWizardSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { RowScope: Object.assign(Object.assign({}, data.RowScope), { ExcludeDataRows }) }));
     };
     const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
-        props.onChange(Object.assign(Object.assign({}, data), { RowScope: Object.assign(Object.assign({}, data.RowScope), { ExcludeGroupedRows }) }));
+        props.onChange(Object.assign(Object.assign({}, data), { RowScope: Object.assign(Object.assign({}, data.RowScope), { ExcludeGroupRows: ExcludeGroupedRows }) }));
     };
     const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
         props.onChange(Object.assign(Object.assign({}, data), { RowScope: Object.assign(Object.assign({}, data.RowScope), { ExcludeSummaryRows }) }));
@@ -67,9 +67,9 @@ const FormatColumnSettingsWizardSection = (props) => {
                     React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: (_a = data.RowScope) === null || _a === void 0 ? void 0 : _a.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Grouped Rows:" },
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: (_b = data.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeGroupedRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: (_b = data.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: (_c = data.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))))))));

package/src/View/Layout/Wizard/sections/RowGroupingSection.js

@@ -48,7 +48,7 @@ const RowGroupingSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, layout), { RowGroupedColumns: columnIds }));
     };
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Grouped Rows"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Group Rows"),
         ((_a = layout.ExpandedRowGroupValues) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(Tabs_1.Tabs.Tab, null, "Expanded Rows"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedGroupableColumns, value: (_b = layout.RowGroupedColumns) !== null && _b !== void 0 ? _b : [], allowReorder: true, xSelectedLabel: () => {

package/src/View/SmartEdit/SmartEditPopup.js

@@ -67,7 +67,7 @@ class SmartEditPopupComponent extends React.Component {
                         (this.props.PreviewInfo &&
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), onClick: () => {
                         this.submit();
-                    }, marginRight: 2 }, "Apply to Grid"),
+                    }, marginRight: 2 }, "Apply Smart Edit"),
                 ' ',
                 this.props.PreviewInfo &&
                     this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' }))),

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.js

@@ -11,7 +11,6 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlo
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Tabs_1 = require("../../../components/Tabs");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
-const AdaptablePopover_1 = require("../../AdaptablePopover");
 const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
 const PredicateEditor_1 = require("../../Components/PredicateEditor/PredicateEditor");
 const StyleComponent_1 = require("../../Components/StyleComponent");
@@ -20,6 +19,7 @@ const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Com
 const Badge_1 = require("../../Components/Badge");
 const AdaptableIconComponent_1 = require("../../Components/AdaptableIconComponent");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
+const Accordion_1 = require("../../../components/Accordion");
 const BadgeEditor = (props) => {
     var _a, _b;
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -40,12 +40,10 @@ const BadgeEditor = (props) => {
                 React.createElement(FormLayout_1.FormRow, { label: "Style" },
                     React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select the Style for the Badge"),
                     ' ',
-                    React.createElement(AdaptablePopover_1.AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", showIcon: false, useButton: false, popoverMaxWidth: 700, bodyText: [
-                            React.createElement(StyleComponent_1.StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: (_a = badge.Style) !== null && _a !== void 0 ? _a : {}, UpdateStyle: (Style) => {
-                                    onChange(Object.assign(Object.assign({}, badge), { Style }));
-                                } }),
-                        ] },
-                        React.createElement(SimpleButton_1.default, { variant: "raised" }, "Edit Badge Style"))),
+                    React.createElement(Accordion_1.Accordion, { title: "Edit Badge Style" },
+                        React.createElement(StyleComponent_1.StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: (_a = badge.Style) !== null && _a !== void 0 ? _a : {}, UpdateStyle: (Style) => {
+                                onChange(Object.assign(Object.assign({}, badge), { Style }));
+                            } }))),
                 !api.columnApi.hasArrayDataType(columnId) && ( // dont show predicates for arrays
                 (React.createElement(
                     FormLayout_1.FormRow,

package/src/View/StyledColumn/Wizard/StyledColumnWizardSettingsSection.js

@@ -18,8 +18,8 @@ const renderStyledColumnWizardSettingsSummary = (data) => {
             React.createElement(Tag_1.Tag, null, ((_a = badgeStyle.RowScope) === null || _a === void 0 ? void 0 : _a.ExcludeDataRows) ? 'no' : 'yes')),
         ' ',
         React.createElement(rebass_1.Text, { mt: 3 },
-            "Grouped Rows ",
-            React.createElement(Tag_1.Tag, null, ((_b = badgeStyle.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeGroupedRows) ? 'no' : 'yes')),
+            "Group Rows ",
+            React.createElement(Tag_1.Tag, null, ((_b = badgeStyle.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeGroupRows) ? 'no' : 'yes')),
         React.createElement(rebass_1.Text, { mt: 3 },
             "Summary Rows ",
             React.createElement(Tag_1.Tag, null, ((_c = badgeStyle.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeSummaryRows) ? 'no' : 'yes'))));
@@ -32,7 +32,7 @@ const StyledColumnWizardSettingsSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { RowScope: Object.assign(Object.assign({}, data.BadgeStyle.RowScope), { ExcludeDataRows }) }) }));
     };
     const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
-        props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { RowScope: Object.assign(Object.assign({}, data.BadgeStyle.RowScope), { ExcludeGroupedRows }) }) }));
+        props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { RowScope: Object.assign(Object.assign({}, data.BadgeStyle.RowScope), { ExcludeGroupRows: ExcludeGroupedRows }) }) }));
     };
     const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
         props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { RowScope: Object.assign(Object.assign({}, data.BadgeStyle.RowScope), { ExcludeSummaryRows }) }) }));
@@ -47,11 +47,11 @@ const StyledColumnWizardSettingsSection = (props) => {
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: 
                                 // @ts-ignore
                                 (_a = data.BadgeStyle.RowScope) === null || _a === void 0 ? void 0 : _a.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Grouped Rows:" },
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: 
                                 // @ts-ignore
-                                (_b = data.BadgeStyle.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeGroupedRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                                (_b = data.BadgeStyle.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: 

package/src/agGrid/ActionColumnRenderer.js

@@ -47,7 +47,7 @@ const ReactActionColumnRenderer = (props) => {
     const isSummaryRow = adaptable.api.gridApi.isSummaryNode(props.node);
     let shouldRender = true;
     if (isGroupedRow) {
-        if ((_a = actionColumn.rowScope) === null || _a === void 0 ? void 0 : _a.ExcludeGroupedRows) {
+        if ((_a = actionColumn.rowScope) === null || _a === void 0 ? void 0 : _a.ExcludeGroupRows) {
             shouldRender = false;
         }
     }
@@ -94,7 +94,7 @@ class ActionColumnRenderer {
         const isSummaryRow = adaptable.api.gridApi.isSummaryNode(params.node);
         let shouldRender = true;
         if (isGroupedRow) {
-            if ((_a = actionColumn.rowScope) === null || _a === void 0 ? void 0 : _a.ExcludeGroupedRows) {
+            if ((_a = actionColumn.rowScope) === null || _a === void 0 ? void 0 : _a.ExcludeGroupRows) {
                 shouldRender = false;
             }
         }

package/src/agGrid/AgGridColumnAdapter.js

@@ -580,8 +580,8 @@ class AgGridColumnAdapter {
             PrimaryKeyValue: gridCell.primaryKeyValue,
             ColumnId: gridCell.column.columnId,
         };
-        const cellNotes = this.adaptableApi.noteApi.getNotesForCell(cellPosition);
-        if (!(cellNotes === null || cellNotes === void 0 ? void 0 : cellNotes.length)) {
+        const cellNote = this.adaptableApi.noteApi.getNoteForCell(cellPosition);
+        if (!cellNote) {
             return undefined;
         }
         return 'ab-Cell-Note';

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -10,6 +10,7 @@ export declare class AgGridMenuAdapter {
     destroy(): void;
     buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (string | MenuItemDef)[];
     buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (string | MenuItemDef)[];
+    private mapAgGridItemTypeToAgGridMenuItem;
     private removeConsecutiveSeparators;
     private createColumnMenuContextObject;
     private createAdaptableContextMenuItems;

package/src/agGrid/AgGridMenuAdapter.js

@@ -28,18 +28,19 @@ class AgGridMenuAdapter {
         }
         const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
+        /**
+         * AG Grid items
+         */
+        const agGridDefaultStructure = agGridMenuItems.map((itemName) => this.mapAgGridItemTypeToAgGridMenuItem(itemName));
         const adaptableMenuItems = this.createAdaptableColumnMenuItems(menuContext);
         const defaultColumnMenuStructure = this.buildColumnMenuDefaultStructure(adaptableMenuItems, menuContext);
         // 1. first check if there is a custom column menu defined
         if (typeof menuOptions.customColumnMenu === 'function') {
-            const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
-                menuType: 'AgGrid',
-                name: itemName,
-            }));
+            const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => this.mapAgGridItemTypeToAgGridMenuItem(itemName));
             const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
             const customMenuItems = menuOptions
                 .customColumnMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
-                defaultAdaptableMenuItems, defaultAdaptableMenuStructure: this.mapAdaptableMenuItemToSystemMenuItems(defaultColumnMenuStructure) }))
+                defaultAdaptableMenuItems, defaultAdaptableMenuStructure: this.mapAdaptableMenuItemToSystemMenuItems(defaultColumnMenuStructure), defaultAgGridMenuStructure: agGridDefaultStructure }))
                 .filter(Boolean);
             return customMenuItems
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
@@ -55,56 +56,70 @@ class AgGridMenuAdapter {
     }
     buildContextMenu(params, originalGetContextMenuItems) {
         var _a;
+        if (!params.column) {
+            return [];
+        }
         // we do this in order to refresh the internal state of selected cells (technically query the AG Grid cellRanges)
         // (right-click selected the current cell, but this was not reflected in the internal state of the selected cells)
         this.adaptableInstance.refreshSelectedCellsState();
         const menuOptions = this.adaptableOptions.menuOptions;
-        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
-        if (!params.column) {
-            return [];
-        }
         const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
         const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
+        /**
+         * AG Grid Items
+         */
+        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+        const agGridCopyItems = agGridMenuItems.filter((item) => ['copy', 'copyWithHeaders', 'copyWithGroupHeaders', 'cut', 'paste'].includes(item));
+        const otherAgGridItems = agGridMenuItems.filter((item) => !agGridCopyItems.includes(item) &&
+            // we provide Adaptable exports in the context menu
+            !['export', 'csvExport', 'excelExport'].includes(item));
+        const agGridDefaultStructure = [
+            {
+                menuType: 'Group',
+                label: 'Copy & Paste',
+                icon: {
+                    name: 'copy',
+                },
+                subMenuItems: agGridCopyItems.map((item) => this.mapAgGridItemTypeToAgGridMenuItem(item)),
+            },
+            ...otherAgGridItems
+                .filter((itemName) => itemName !== 'separator')
+                .map((itemName) => this.mapAgGridItemTypeToAgGridMenuItem(itemName)),
+        ];
+        /**
+         * Adaptable Items
+         */
         const adaptableMenuItems = this.createAdaptableContextMenuItems(menuContext);
-        const defaultContextMenuStructure = this.buildContextMenuDefaultStructure(adaptableMenuItems, menuContext);
+        const adaptableDefaultStructure = this.buildContextMenuDefaultStructure(adaptableMenuItems, menuContext);
+        /**
+         * Build the context menu
+         */
         // 1. first check if there is a custom context menu defined
         if (typeof menuOptions.customContextMenu === 'function') {
-            const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
-                menuType: 'AgGrid',
-                name: itemName,
-            }));
+            const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => this.mapAgGridItemTypeToAgGridMenuItem(itemName));
             const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
             const customMenuItems = menuOptions
                 .customContextMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
-                defaultAdaptableMenuItems, defaultAdaptableMenuStructure: this.mapAdaptableMenuItemToSystemMenuItems(defaultContextMenuStructure) }))
+                defaultAdaptableMenuItems, defaultAdaptableMenuStructure: this.mapAdaptableMenuItemToSystemMenuItems(adaptableDefaultStructure), defaultAgGridMenuStructure: agGridDefaultStructure }))
                 .filter(Boolean);
             return customMenuItems
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
                 .filter(Boolean);
         }
         // 2. if not, return the default context menu
-        const agGridCopyItems = agGridMenuItems.filter((item) => ['copy', 'copyWithHeaders', 'copyWithGroupHeaders', 'cut', 'paste'].includes(item));
-        const otherAgGridItems = agGridMenuItems.filter((item) => !agGridCopyItems.includes(item) &&
-            // we provide Adaptable exports in the context menu
-            !['export', 'csvExport', 'excelExport'].includes(item));
         const defaultContextMenu = [
-            this.mapCustomMenuItemToAgGridMenuDefinition({
-                menuType: 'Group',
-                label: 'Copy & Paste',
-                icon: {
-                    name: 'copy',
-                },
-                subMenuItems: agGridCopyItems.map((item) => ({
-                    menuType: 'AgGrid',
-                    name: item,
-                })),
-            }, menuContext),
-            ...otherAgGridItems,
+            ...agGridDefaultStructure.map((agGridItem) => this.mapCustomMenuItemToAgGridMenuDefinition(agGridItem, menuContext)),
             'separator',
-            ...defaultContextMenuStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
+            ...adaptableDefaultStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
+    mapAgGridItemTypeToAgGridMenuItem(itemName) {
+        return {
+            menuType: 'AgGrid',
+            name: itemName,
+        };
+    }
     // due to entitlements or other reasons, some menu items might be hidden, leading to consecutive separators
     removeConsecutiveSeparators(menuItems, separator = 'separator') {
         return menuItems.reduce((acc, item, index, array) => {
@@ -237,7 +252,7 @@ class AgGridMenuAdapter {
         // Comment
         const commentMenuItems = this.getModuleSpecificStructure('Comment', availableMenuItems);
         // Dashboard
-        const dashboardMenuItems = this.getModuleSpecificStructure('Dashboard', availableMenuItems);
+        const dashboardMenuItems = this.getModuleSpecificStructure('Dashboard', availableMenuItems, 'dashboard-group');
         // DataImport
         const dataImportMenuItems = this.getModuleSpecificStructure('DataImport', availableMenuItems);
         // Export
@@ -264,8 +279,7 @@ class AgGridMenuAdapter {
         const gridMenuItem = {
             name: 'grid-group',
             label: 'Grid',
-            // TODO
-            module: 'ColumnInfo',
+            module: 'Group',
             isVisible: true,
             icon: {
                 name: 'grid',
@@ -282,8 +296,7 @@ class AgGridMenuAdapter {
         const editMenuItem = {
             name: 'edit-group',
             label: 'Edit',
-            // TODO
-            module: 'ColumnInfo',
+            module: 'Group',
             isVisible: true,
             icon: {
                 name: 'edit-table',
@@ -293,8 +306,7 @@ class AgGridMenuAdapter {
         const columnMenuItem = {
             name: 'column-group',
             label: 'Column',
-            // TODO
-            module: 'ColumnInfo',
+            module: 'Group',
             isVisible: true,
             icon: {
                 name: 'columns',
@@ -336,11 +348,11 @@ class AgGridMenuAdapter {
     /**
      * Default strategy for menu items: return as is if there is only one item, otherwise group them under a parent item
      */
-    getModuleSpecificStructure(module, menuItems) {
+    getModuleSpecificStructure(module, menuItems, groupName) {
         const moduleItems = menuItems.filter((menuItem) => menuItem.module === module);
         if (moduleItems.length > 1) {
             const moduleInfo = this.adaptableInstance.ModuleService.getModuleInfoByModule(module);
-            return [this.buildMenuGroupParent(module, moduleItems)];
+            return [this.buildMenuGroupParent(module, moduleItems, { groupName })];
         }
         else {
             return moduleItems;
@@ -356,25 +368,25 @@ class AgGridMenuAdapter {
             ? [
                 this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-visual-data-excel')), {
                     label: 'Visual Data',
-                    icon: false,
+                    icon: 'export-data',
                 }),
             ]
             : [];
         const allDataExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-all-data')), {
             label: 'All Data',
-            icon: false,
+            icon: 'export-data',
         }));
         const currentDataExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-current-data')), {
             label: 'Current Data',
-            icon: false,
+            icon: 'export-data',
         }));
         const selectedCellsExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-selected-cells')), {
             label: 'Selected Cells',
-            icon: false,
+            icon: 'export-data',
         }));
         const selectedRowsExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-selected-rows')), {
             label: 'Selected Rows',
-            icon: false,
+            icon: 'export-data',
         }));
         return this.normalizeMenuGroup(this.buildMenuGroupParent('Export', [
             ...visualDataExportItems,
@@ -385,6 +397,7 @@ class AgGridMenuAdapter {
         ], {
             label: 'Export',
             icon: 'export',
+            groupName: 'export-group',
         }));
     }
     getLayoutContextMenuStructure(menuItems) {
@@ -402,14 +415,14 @@ class AgGridMenuAdapter {
         return [gridActionsItems, otherLayoutItems];
     }
     buildMenuGroupParent(module, menuItems, config) {
-        var _a, _b;
+        var _a, _b, _c;
         const moduleInfo = this.adaptableInstance.ModuleService.getModuleInfoByModule(module);
         const icon = config && config.icon === false
             ? undefined
             : { name: (_a = config === null || config === void 0 ? void 0 : config.icon) !== null && _a !== void 0 ? _a : moduleInfo.Glyph };
         return {
-            name: 'menu-group',
-            label: (_b = config === null || config === void 0 ? void 0 : config.label) !== null && _b !== void 0 ? _b : moduleInfo.FriendlyName,
+            name: (_b = config === null || config === void 0 ? void 0 : config.groupName) !== null && _b !== void 0 ? _b : 'menu-group',
+            label: (_c = config === null || config === void 0 ? void 0 : config.label) !== null && _c !== void 0 ? _c : moduleInfo.FriendlyName,
             isVisible: true,
             module: moduleInfo.ModuleName,
             icon,
@@ -428,7 +441,7 @@ class AgGridMenuAdapter {
         // CustomSort
         const customSortMenuItems = this.getModuleSpecificStructure('CustomSort', availableMenuItems);
         // Dashboard
-        const dashboardMenuItems = this.getModuleSpecificStructure('Dashboard', availableMenuItems);
+        const dashboardMenuItems = this.getModuleSpecificStructure('Dashboard', availableMenuItems, 'dashboard-group');
         // DataImport
         const dataImportMenuItems = this.getModuleSpecificStructure('DataImport', availableMenuItems);
         // FlashingCell
@@ -455,8 +468,7 @@ class AgGridMenuAdapter {
         const gridMenuItem = {
             name: 'grid-group',
             label: 'Grid',
-            // TODO
-            module: 'ColumnInfo',
+            module: 'Group',
             isVisible: true,
             icon: {
                 name: 'grid',
@@ -474,8 +486,7 @@ class AgGridMenuAdapter {
         const columnMenuItem = {
             name: 'column-group',
             label: 'Column',
-            // TODO
-            module: 'ColumnInfo',
+            module: 'Group',
             isVisible: true,
             icon: {
                 name: 'columns',
@@ -493,8 +504,7 @@ class AgGridMenuAdapter {
         const createStyleMenuItem = {
             name: 'styling-group',
             label: 'Styling',
-            // TODO
-            module: 'ColumnInfo',
+            module: 'Group',
             isVisible: true,
             icon: {
                 name: 'brush',
@@ -553,26 +563,27 @@ class AgGridMenuAdapter {
         return styledColumnMenuItems;
     }
     mapAdaptableMenuItemToSystemMenuItems(adaptableMenuItems) {
-        return (adaptableMenuItems !== null && adaptableMenuItems !== void 0 ? adaptableMenuItems : []).map((menuItem) => {
+        if (!adaptableMenuItems) {
+            return;
+        }
+        return adaptableMenuItems.map((menuItem) => {
             if (menuItem === '-') {
                 return menuItem;
             }
-            let subItems = menuItem.subItems;
-            if (subItems && subItems.length > 0) {
-                subItems = subItems.map((subItem) => this.mapAdaptableMenuItemToSystemMenuItems(subItem.subItems));
-            }
+            // @ts-ignore
+            const subItems = this.mapAdaptableMenuItemToSystemMenuItems(menuItem.subItems);
             return Object.assign(Object.assign({}, menuItem), { menuType: 'Adaptable', subItems });
         });
     }
     createAdaptableColumnMenuItems(menuContext) {
-        let contextMenuItems = [];
+        let columnMenuItems = [];
         this.adaptableInstance.adaptableModules.forEach((s) => {
             let menuItems = s.createColumnMenuItems(menuContext.adaptableColumn);
             if (menuItems) {
-                contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
+                columnMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
             }
         });
-        return contextMenuItems;
+        return columnMenuItems;
     }
     // TODO AFL MIG: pretty sure this logic is duplicated in several other places
     mapAdaptableIconToAgGridIcon(adaptableIcon, style) {