@adaptabletools/adaptable 18.0.0-canary.26 → 18.0.0-canary.28

package/src/Strategy/SystemStatusModule.js

@@ -5,20 +5,21 @@ export class SystemStatusModule extends AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.SystemStatusModuleId, ModuleConstants.SystemStatusFriendlyName, 'traffic-lights', 'SystemStatusPopup', 'Provide messages about the Status of your application', api);
     }
-    addColumnMenuItems(column) {
+    createColumnMenuItems(column) {
         if (this.isModuleAvailable()) {
             return [
                 this.createMenuItemShowPopup('system-status-show', 'Show System Status', this.moduleInfo.Popup, this.moduleInfo.Glyph),
             ];
         }
     }
-    addContextMenuItems(menuContext) {
+    createContextMenuItems(menuContext) {
         if (this.isModuleAvailable()) {
             let popUpParams = {
                 source: 'ContextMenu',
             };
             return [
-                this.createMainMenuItemShowPopup({ Name: 'system-status-show',
+                this.createMainMenuItemShowPopup({
+                    Name: 'system-status-show',
                     Label: 'Show System Status',
                     ComponentName: this.moduleInfo.Popup,
                     Icon: this.moduleInfo.Glyph,

package/src/Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions.js

@@ -1100,13 +1100,15 @@ const mapAggregationToCumulation = (aggregationParameter, overColumnParameter, c
                                 if ((_a = aggregationEvaluation.context) === null || _a === void 0 ? void 0 : _a.weightParam) {
                                     // weighted average
                                     const weightValue = (_b = context.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, aggregationEvaluation.context.weightParam.value)) !== null && _b !== void 0 ? _b : 0;
-                                    cumulationBag.currentValue = cumulationBag.currentValue + rowValue * weightValue;
+                                    cumulationBag.currentValue =
+                                        cumulationBag.currentValue + rowValue * weightValue;
                                     cumulationBag.numberOfCumulatedValues =
                                         cumulationBag.numberOfCumulatedValues + weightValue;
                                 }
                                 else {
                                     cumulationBag.currentValue = cumulationBag.currentValue + rowValue;
-                                    cumulationBag.numberOfCumulatedValues = cumulationBag.numberOfCumulatedValues + 1;
+                                    cumulationBag.numberOfCumulatedValues =
+                                        cumulationBag.numberOfCumulatedValues + 1;
                                 }
                             }
                             if (cumulationBag.numberOfCumulatedValues !== 0) {

package/src/Utilities/Services/ModuleService.js

@@ -10,13 +10,13 @@ export class ModuleService {
         const settingsPanelMenuItems = [];
         const buttonMenuItems = [];
         this.getModuleCollection().forEach((module) => {
-            const settingsPanelMenuItem = module.addModuleMenuItem('ModuleMenu');
+            const settingsPanelMenuItem = module.createModuleMenuItem('ModuleMenu');
             if (Helper.objectExists(settingsPanelMenuItem)) {
                 if (settingsPanelMenuItems.findIndex((m) => m.module == settingsPanelMenuItem.module) == -1) {
                     settingsPanelMenuItems.push(settingsPanelMenuItem);
                 }
             }
-            const buttonMenuItem = module.addModuleMenuItem('ModuleButton');
+            const buttonMenuItem = module.createModuleMenuItem('ModuleButton');
             if (Helper.objectExists(buttonMenuItem)) {
                 if (buttonMenuItems.findIndex((m) => m.module == buttonMenuItem.module) == -1) {
                     buttonMenuItems.push(buttonMenuItem);

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.d.ts

@@ -2,7 +2,7 @@
 import { CalculatedColumn } from '../../../types';
 import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
 export declare const calculatedColumnTypes: readonly ["ScalarExpression", "AggregatedScalarExpression", "CumulativeAggregatedExpression", "QuantileAggregatedExpression"];
-export type ExpressionType = typeof calculatedColumnTypes[number];
+export type ExpressionType = (typeof calculatedColumnTypes)[number];
 export interface CalculatedColumnWizardProps extends AdaptableOnePageWizardProps<CalculatedColumn> {
 }
 export declare const CalculatedColumnWizard: (props: CalculatedColumnWizardProps) => JSX.Element;

package/src/agGrid/AdaptableAgGrid.js

@@ -1690,7 +1690,8 @@ export class AdaptableAgGrid {
                 return acc;
             }
             const ColumnGroupId = columnGroup.getGroupId();
-            const AllowGroupSplit = !columnGroup.getProvidedColumnGroup().getColGroupDef().marryChildren;
+            const AllowGroupSplit = !columnGroup.getProvidedColumnGroup().getColGroupDef()
+                .marryChildren;
             const FriendlyName = (_c = columnGroup.getProvidedColumnGroup().getColGroupDef().headerName) !== null && _c !== void 0 ? _c : ColumnGroupId;
             const columnsInGroup = columnGroup.getLeafColumns();
             columnsInGroup.forEach((col) => {

package/src/agGrid/AgGridColumnAdapter.js

@@ -570,7 +570,7 @@ export class AgGridColumnAdapter {
         if (!this.adaptableApi.internalApi.getModuleService().isModuleAvailable('Note')) {
             return;
         }
-        if (!this.adaptableApi.noteApi.internalApi.areNotesAvailable()) {
+        if (!this.adaptableApi.noteApi.internalApi.areNotesSupported()) {
             return;
         }
         const cellPosition = {
@@ -587,7 +587,7 @@ export class AgGridColumnAdapter {
         if (!this.adaptableApi.internalApi.getModuleService().isModuleAvailable('Comment')) {
             return;
         }
-        if (!this.adaptableApi.commentApi.internalApi.areCommentsAvailable()) {
+        if (!this.adaptableApi.commentApi.internalApi.areCommentsSupported()) {
             return;
         }
         const position = {

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -1,7 +1,7 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { Column, GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from '@ag-grid-community/core';
+import { GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from '@ag-grid-community/core';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
-import { AdaptableMenuItem, ColumnMenuContext } from '../PredefinedConfig/Common/Menu';
+import { AdaptableMenuItem } from '../PredefinedConfig/Common/Menu';
 export declare class AgGridMenuAdapter {
     private adaptableInstance;
     constructor(adaptableInstance: AdaptableAgGrid);
@@ -9,20 +9,31 @@ export declare class AgGridMenuAdapter {
     private get adaptableApi();
     destroy(): void;
     buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (string | MenuItemDef)[];
-    buildStructuredAdaptableColumnItems(menuContext: ColumnMenuContext): {
-        adaptableMenuItems: AdaptableMenuItem[];
-        structuredAdaptableMenuItems: AdaptableMenuItem[];
-    };
     buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (string | MenuItemDef)[];
-    createColumnMenuContextObject(adaptableColumn: AdaptableColumn, agGridColumn: Column): ColumnMenuContext;
+    private createColumnMenuContextObject;
     private createAdaptableContextMenuItems;
     private createContextMenuContextObject;
     private mapAdaptableMenuItemToAgGridMenuDefinition;
     private mapCustomMenuItemToAgGridMenuDefinition;
     private mapUserMenuItemToAgGridMenuDefinition;
-    private buildGroupedModuleItems;
+    private buildContextMenuDefaultStructure;
+    /**
+     * Default strategy for menu items: return as is if there is only one item, otherwise group them under a parent item
+     */
+    private getModuleSpecificStructure;
+    private getExportContextMenuStructure;
+    private getLayoutContextMenuStructure;
+    private buildMenuGroupParent;
+    private buildColumnMenuDefaultStructure;
+    private getColumnFilterColumnMenuStructure;
+    private getLayoutColumnMenuStructure;
+    private getStyledColumnColumnMenuStructure;
     private mapAdaptableMenuItemToSystemMenuItems;
     private createAdaptableColumnMenuItems;
     private mapAdaptableIconToAgGridIcon;
+    /**
+     * The output of this function is used to build the column header menu if the AG Grid Menu Module is NOT present
+     * This is controlled by the AdaptableAgGrid.embedColumnMenu property
+     */
     buildStandaloneColumnHeader(adaptableColumn: AdaptableColumn): AdaptableMenuItem[];
 }

package/src/agGrid/AgGridMenuAdapter.js

@@ -1,4 +1,3 @@
-import { DEFAULT_ADAPTABLE_COLUMN_MENU_STRUCTURE, DEFAULT_ADAPTABLE_CONTEXT_MENU_STRUCTURE, } from '../AdaptableOptions/MenuOptions';
 import { isAdaptableElementIcon } from '../components/Icon';
 import { iconToString } from '../components/icons';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
@@ -25,7 +24,8 @@ export 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);
-        const { adaptableMenuItems, structuredAdaptableMenuItems } = this.buildStructuredAdaptableColumnItems(menuContext);
+        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) => ({
@@ -35,7 +35,7 @@ export class AgGridMenuAdapter {
             const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
             const customMenuItems = menuOptions
                 .customColumnMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
-                defaultAdaptableMenuItems, structuredAdaptableMenuItems: this.mapAdaptableMenuItemToSystemMenuItems(structuredAdaptableMenuItems) }))
+                defaultAdaptableMenuItems, defaultAdaptableMenuStructure: this.mapAdaptableMenuItemToSystemMenuItems(defaultColumnMenuStructure) }))
                 .filter(Boolean);
             return customMenuItems
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
@@ -45,16 +45,10 @@ export class AgGridMenuAdapter {
         const defaultContextMenu = [
             ...agGridMenuItems,
             'separator',
-            ...structuredAdaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
+            ...defaultColumnMenuStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
         return defaultContextMenu;
     }
-    buildStructuredAdaptableColumnItems(menuContext) {
-        const adaptableMenuItems = this.createAdaptableColumnMenuItems(menuContext);
-        // sort Adaptable menu items by default order
-        const structuredAdaptableMenuItems = this.buildGroupedModuleItems(DEFAULT_ADAPTABLE_COLUMN_MENU_STRUCTURE, adaptableMenuItems);
-        return { adaptableMenuItems, structuredAdaptableMenuItems };
-    }
     buildContextMenu(params, originalGetContextMenuItems) {
         var _a;
         // we do this in order to refresh the internal state of selected cells (technically query the AG Grid cellRanges)
@@ -69,8 +63,7 @@ export class AgGridMenuAdapter {
         const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
         const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
         const adaptableMenuItems = this.createAdaptableContextMenuItems(menuContext);
-        // sort Adaptable menu items by default order
-        const structuredAdaptableMenuItems = this.buildGroupedModuleItems(DEFAULT_ADAPTABLE_CONTEXT_MENU_STRUCTURE, adaptableMenuItems);
+        const defaultContextMenuStructure = this.buildContextMenuDefaultStructure(adaptableMenuItems, menuContext);
         // 1. first check if there is a custom context menu defined
         if (typeof menuOptions.customContextMenu === 'function') {
             const defaultAgGridMenuItems = agGridMenuItems.map((itemName) => ({
@@ -80,7 +73,7 @@ export class AgGridMenuAdapter {
             const defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
             const customMenuItems = menuOptions
                 .customContextMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
-                defaultAdaptableMenuItems, structuredAdaptableMenuItems: this.mapAdaptableMenuItemToSystemMenuItems(structuredAdaptableMenuItems) }))
+                defaultAdaptableMenuItems, defaultAdaptableMenuStructure: this.mapAdaptableMenuItemToSystemMenuItems(defaultContextMenuStructure) }))
                 .filter(Boolean);
             return customMenuItems
                 .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
@@ -90,7 +83,7 @@ export class AgGridMenuAdapter {
         const defaultContextMenu = [
             ...agGridMenuItems,
             'separator',
-            ...structuredAdaptableMenuItems.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
+            ...defaultContextMenuStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
         return defaultContextMenu;
     }
@@ -100,7 +93,7 @@ export class AgGridMenuAdapter {
     createAdaptableContextMenuItems(menuContext) {
         let contextMenuItems = [];
         this.adaptableInstance.adaptableModules.forEach((module) => {
-            let menuItems = module.addContextMenuItems(menuContext);
+            let menuItems = module.createContextMenuItems(menuContext);
             if (menuItems) {
                 contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
             }
@@ -140,6 +133,9 @@ export class AgGridMenuAdapter {
     }
     mapAdaptableMenuItemToAgGridMenuDefinition(adaptableMenuItem) {
         var _a;
+        if (adaptableMenuItem === '-') {
+            return 'separator';
+        }
         return {
             name: adaptableMenuItem.label,
             action: adaptableMenuItem.onClick
@@ -197,43 +193,312 @@ export class AgGridMenuAdapter {
             }).filter(Boolean),
         };
     }
-    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,
+    buildContextMenuDefaultStructure(availableMenuItems, menuContext) {
+        // Alert
+        const alertMenuItems = this.getModuleSpecificStructure('Alert', availableMenuItems);
+        // BulkUpdate
+        const bulkUpdateMenuItems = this.getModuleSpecificStructure('BulkUpdate', availableMenuItems);
+        // CalculatedColumn
+        const calculatedColumnMenuItems = this.getModuleSpecificStructure('CalculatedColumn', availableMenuItems);
+        // CellSummary
+        const cellSummaryMenuItems = this.getModuleSpecificStructure('CellSummary', availableMenuItems);
+        // ColumnFilter
+        const columnFilterMenuItems = this.getModuleSpecificStructure('ColumnFilter', availableMenuItems);
+        // ColumnInfo
+        const columnInfoMenuItems = this.getModuleSpecificStructure('ColumnInfo', availableMenuItems);
+        // Comment
+        const commentMenuItems = this.getModuleSpecificStructure('Comment', availableMenuItems);
+        // Dashboard
+        const dashboardMenuItems = this.getModuleSpecificStructure('Dashboard', availableMenuItems);
+        // DataImport
+        const dataImportMenuItems = this.getModuleSpecificStructure('DataImport', availableMenuItems);
+        // Export
+        const exportMenuItems = this.getExportContextMenuStructure(availableMenuItems);
+        // FDC3
+        const fdc3MenuItems = this.getModuleSpecificStructure('Fdc3', availableMenuItems);
+        // FlashingCell
+        const flashingCellMenuItems = this.getModuleSpecificStructure('FlashingCell', availableMenuItems);
+        // GridInfo
+        const gridInfoMenuItems = this.getModuleSpecificStructure('GridInfo', availableMenuItems);
+        // Layout
+        const [gridActionItems, otherLayoutItems] = this.getLayoutContextMenuStructure(availableMenuItems);
+        // Note
+        const noteMenuItems = this.getModuleSpecificStructure('Note', availableMenuItems);
+        // SettingsPanel
+        const settingsPanelMenuItems = this.getModuleSpecificStructure('SettingsPanel', availableMenuItems);
+        // SmartEdit
+        const smartEditMenuItems = this.getModuleSpecificStructure('SmartEdit', availableMenuItems);
+        // SystemStatus
+        const systemStatusMenuItems = this.getModuleSpecificStructure('SystemStatus', availableMenuItems);
+        /**
+         * Custom structures
+         */
+        const gridMenuItem = {
+            name: 'grid-group',
+            label: 'Grid',
+            // TODO
+            module: 'ColumnInfo',
+            isVisible: true,
+            icon: {
+                name: 'grid',
+            },
+            subItems: [
+                ...gridActionItems,
+                ...otherLayoutItems,
+                ...cellSummaryMenuItems,
+                ...dataImportMenuItems,
+                ...systemStatusMenuItems,
+                ...gridInfoMenuItems,
+            ],
+        };
+        const columnMenuItem = {
+            name: 'column-group',
+            label: 'Column',
+            // TODO
+            module: 'ColumnInfo',
+            isVisible: true,
+            icon: {
+                name: 'columns',
+            },
+            subItems: [
+                ...bulkUpdateMenuItems,
+                ...smartEditMenuItems,
+                ...calculatedColumnMenuItems,
+                ...columnInfoMenuItems,
+            ],
+        };
+        return [
+            ...noteMenuItems,
+            ...commentMenuItems,
+            '-',
+            ...settingsPanelMenuItems,
+            ...dashboardMenuItems,
+            ...columnFilterMenuItems,
+            gridMenuItem,
+            columnMenuItem,
+            ...exportMenuItems,
+            ...flashingCellMenuItems,
+            ...alertMenuItems,
+            ...fdc3MenuItems,
+        ];
+    }
+    /**
+     * Default strategy for menu items: return as is if there is only one item, otherwise group them under a parent item
+     */
+    getModuleSpecificStructure(module, menuItems) {
+        const moduleItems = menuItems.filter((menuItem) => menuItem.module === module);
+        if (moduleItems.length > 1) {
+            const moduleInfo = this.adaptableInstance.ModuleService.getModuleInfoByModule(module);
+            return [this.buildMenuGroupParent(module, moduleItems)];
+        }
+        else {
+            return moduleItems;
+        }
+    }
+    getExportContextMenuStructure(menuItems) {
+        const exportMenuItems = menuItems.filter((menuItem) => menuItem.module === 'Export');
+        if (!exportMenuItems.length) {
+            return [];
+        }
+        const cellSelectionItems = exportMenuItems.filter((item) => item.name.startsWith('export-cells'));
+        const canExportCells = cellSelectionItems.length;
+        const rowSelectionItems = exportMenuItems.filter((item) => item.name.startsWith('export-rows'));
+        const canExportRows = rowSelectionItems.length;
+        if (canExportCells && !canExportRows) {
+            return [
+                this.buildMenuGroupParent('Export', cellSelectionItems, {
+                    label: 'Export Selected Cells',
+                }),
+            ];
+        }
+        if (!canExportCells && canExportRows) {
+            return [
+                this.buildMenuGroupParent('Export', rowSelectionItems, {
+                    label: 'Export Selected Rows',
+                }),
+            ];
+        }
+        if (canExportCells && canExportRows) {
+            const cellsSubMenu = this.buildMenuGroupParent('Export', cellSelectionItems, {
+                label: 'Cells',
+            });
+            const rowsSubMenu = this.buildMenuGroupParent('Export', rowSelectionItems, { label: 'Rows' });
+            return [
+                this.buildMenuGroupParent('Export', [cellsSubMenu, rowsSubMenu], {
+                    label: 'Export Selected',
+                }),
+            ];
+        }
+    }
+    getLayoutContextMenuStructure(menuItems) {
+        const layoutMenuItems = menuItems.filter((menuItem) => menuItem.module === 'Layout');
+        if (!layoutMenuItems.length) {
+            return [[], []];
+        }
+        const gridActionsItemNames = [
+            'layout-clear-selection',
+            'layout-select-all',
+            'layout-auto-size',
+        ];
+        const gridActionsItems = layoutMenuItems.filter((item) => gridActionsItemNames.includes(item.name));
+        const otherLayoutItems = layoutMenuItems.filter((item) => !gridActionsItemNames.includes(item.name));
+        return [gridActionsItems, otherLayoutItems];
+    }
+    buildMenuGroupParent(module, menuItems, config) {
+        var _a, _b;
+        const moduleInfo = this.adaptableInstance.ModuleService.getModuleInfoByModule(module);
+        return {
+            name: 'menu-group',
+            label: (_a = config === null || config === void 0 ? void 0 : config.label) !== null && _a !== void 0 ? _a : moduleInfo.FriendlyName,
+            isVisible: true,
+            module: moduleInfo.ModuleName,
+            icon: {
+                name: (_b = config === null || config === void 0 ? void 0 : config.icon) !== null && _b !== void 0 ? _b : moduleInfo.Glyph,
+            },
+            subItems: menuItems,
+        };
+    }
+    buildColumnMenuDefaultStructure(availableMenuItems, menuContext) {
+        // CalculatedColumn
+        const calculatedColumnMenuItems = this.getModuleSpecificStructure('CalculatedColumn', availableMenuItems);
+        // CellSummary
+        const cellSummaryMenuItems = this.getModuleSpecificStructure('CellSummary', availableMenuItems);
+        // ColumnFilter
+        const [columnFilterGroup, filterVisibilityItems] = this.getColumnFilterColumnMenuStructure(availableMenuItems);
+        // ColumnInfo
+        const columnInfoMenuItems = this.getModuleSpecificStructure('ColumnInfo', availableMenuItems);
+        // CustomSort
+        const customSortMenuItems = this.getModuleSpecificStructure('CustomSort', availableMenuItems);
+        // Dashboard
+        const dashboardMenuItems = this.getModuleSpecificStructure('Dashboard', availableMenuItems);
+        // DataImport
+        const dataImportMenuItems = this.getModuleSpecificStructure('DataImport', availableMenuItems);
+        // FlashingCell
+        const flashingCellMenuItems = this.getModuleSpecificStructure('FlashingCell', availableMenuItems);
+        // FormatColumn
+        const formatColumnMenuItems = this.getModuleSpecificStructure('FormatColumn', availableMenuItems);
+        // FreeTextColumn
+        const freeTextColumnMenuItems = this.getModuleSpecificStructure('FreeTextColumn', availableMenuItems);
+        // GridInfo
+        const gridInfoMenuItems = this.getModuleSpecificStructure('GridInfo', availableMenuItems);
+        // Layout
+        const [gridSelectItems, columnSelectItems, columnActionGroup, otherLayoutItems] = this.getLayoutColumnMenuStructure(availableMenuItems);
+        // PlusMinus
+        const plusMinusMenuItems = this.getModuleSpecificStructure('PlusMinus', availableMenuItems);
+        // SettingsPanel
+        const settingsPanelMenuItems = this.getModuleSpecificStructure('SettingsPanel', availableMenuItems);
+        // StyledColumn
+        const styledColumnMenuItems = this.getStyledColumnColumnMenuStructure(availableMenuItems);
+        // SystemStatus
+        const systemStatusMenuItems = this.getModuleSpecificStructure('SystemStatus', availableMenuItems);
+        /**
+         * Custom structures
+         */
+        const gridMenuItem = {
+            name: 'grid-group',
+            label: 'Grid',
+            // TODO
+            module: 'ColumnInfo',
+            isVisible: true,
+            icon: {
+                name: 'grid',
+            },
+            subItems: [
+                ...otherLayoutItems,
+                ...filterVisibilityItems,
+                ...gridSelectItems,
+                ...cellSummaryMenuItems,
+                ...dataImportMenuItems,
+                ...systemStatusMenuItems,
+                ...gridInfoMenuItems,
+            ],
+        };
+        const columnMenuItem = {
+            name: 'column-group',
+            label: 'Column',
+            // TODO
+            module: 'ColumnInfo',
+            isVisible: true,
+            icon: {
+                name: 'columns',
+            },
+            subItems: [
+                ...columnActionGroup,
+                ...calculatedColumnMenuItems,
+                ...freeTextColumnMenuItems,
+                ...customSortMenuItems,
+                ...plusMinusMenuItems,
+                ...columnSelectItems,
+                ...columnInfoMenuItems,
+            ],
+        };
+        const createStyleMenuItem = {
+            name: 'styling-group',
+            label: 'Styling',
+            // TODO
+            module: 'ColumnInfo',
+            isVisible: true,
+            icon: {
+                name: 'brush',
+            },
+            subItems: [...flashingCellMenuItems, ...formatColumnMenuItems, ...styledColumnMenuItems],
+        };
+        return [
+            ...settingsPanelMenuItems,
+            ...dashboardMenuItems,
+            ...columnFilterGroup,
+            createStyleMenuItem,
+            gridMenuItem,
+            columnMenuItem,
+        ];
+    }
+    getColumnFilterColumnMenuStructure(menuItems) {
+        const columnFilterMenuItems = menuItems.filter((menuItem) => menuItem.module === 'ColumnFilter');
+        const filterVisibilityItems = columnFilterMenuItems.filter((item) => ['column-filter-bar-hide', 'column-filter-bar-show'].includes(item.name));
+        const filterActionItems = columnFilterMenuItems.filter((item) => ['column-filter-clear', 'column-filter-suspend', 'column-filter-unsuspend'].includes(item.name));
+        const columnFilterGroup = filterActionItems.length
+            ? [
+                {
+                    name: 'column-filter-group',
+                    label: 'Filter',
+                    module: 'ColumnFilter',
+                    isVisible: true,
+                    icon: {
+                        name: 'filter',
                     },
-                ];
-            }
-            else {
-                return adaptableMenuItems.filter((menuItem) => menuItem.module === moduleOrGroup);
-            }
-        })
-            .filter((menuItems) => {
-            if (!menuItems.length) {
-                return false;
-            }
-            if (menuItems.length === 1) {
-                const singleMenuItem = menuItems[0];
-                if (singleMenuItem.subItems && singleMenuItem.subItems.length === 0) {
-                    return false;
-                }
-            }
-            return true;
-        })
-            .flat();
+                    subItems: filterActionItems,
+                },
+            ]
+            : [];
+        return [columnFilterGroup, filterVisibilityItems];
+    }
+    getLayoutColumnMenuStructure(menuItems) {
+        const layoutMenuItems = menuItems.filter((menuItem) => menuItem.module === 'Layout');
+        if (!layoutMenuItems.length) {
+            return [[], [], [], []];
+        }
+        const columnSelectItemNames = [
+            'layout-column-select-preserve',
+            'layout-column-select-reset',
+            'layout-column-select',
+        ];
+        const columnSelectItems = layoutMenuItems.filter((item) => columnSelectItemNames.includes(item.name));
+        const gridSelectItems = layoutMenuItems.filter((item) => item.name === 'layout-grid-select');
+        const columnActionGroup = layoutMenuItems.filter((item) => ['layout-column-caption-change', 'layout-column-hide'].includes(item.name));
+        const otherLayoutItems = layoutMenuItems.filter((item) => !columnSelectItemNames.includes(item.name) &&
+            !['layout-column-caption-change', 'layout-column-hide'].includes(item.name) &&
+            item.name !== 'layout-grid-select');
+        return [gridSelectItems, columnSelectItems, columnActionGroup, otherLayoutItems];
+    }
+    getStyledColumnColumnMenuStructure(menuItems) {
+        const styledColumnMenuItems = menuItems.filter((menuItem) => menuItem.module === 'StyledColumn');
+        return styledColumnMenuItems;
     }
     mapAdaptableMenuItemToSystemMenuItems(adaptableMenuItems) {
         return (adaptableMenuItems !== null && adaptableMenuItems !== void 0 ? adaptableMenuItems : []).map((menuItem) => {
+            if (menuItem === '-') {
+                return menuItem;
+            }
             let subItems = menuItem.subItems;
             if (subItems && subItems.length > 0) {
                 subItems = subItems.map((subItem) => this.mapAdaptableMenuItemToSystemMenuItems(subItem.subItems));
@@ -244,7 +509,7 @@ export class AgGridMenuAdapter {
     createAdaptableColumnMenuItems(menuContext) {
         let contextMenuItems = [];
         this.adaptableInstance.adaptableModules.forEach((s) => {
-            let menuItems = s.addColumnMenuItems(menuContext.adaptableColumn);
+            let menuItems = s.createColumnMenuItems(menuContext.adaptableColumn);
             if (menuItems) {
                 contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
             }
@@ -269,9 +534,13 @@ export class AgGridMenuAdapter {
             });
         }
     }
+    /**
+     * The output of this function is used to build the column header menu if the AG Grid Menu Module is NOT present
+     * This is controlled by the AdaptableAgGrid.embedColumnMenu property
+     */
     buildStandaloneColumnHeader(adaptableColumn) {
         const agGridColumn = this.adaptableInstance.getAgGridColumnForColumnId(adaptableColumn.columnId);
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, agGridColumn);
-        return this.buildStructuredAdaptableColumnItems(menuContext).adaptableMenuItems;
+        return this.createAdaptableColumnMenuItems(menuContext);
     }
 }

package/src/components/icons/filter-off.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/filter-off.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "m592-481-57-57 143-182H353l-80-80h487q25 0 36 22t-4 42L592-481ZM791-56 560-287v87q0 17-11.5 28.5T520-160h-80q-17 0-28.5-11.5T400-200v-247L56-791l56-57 736 736-57 56ZM535-538Z" })));

package/src/components/icons/grid-info.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/grid-info.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M143-192v-72h432v72H143Zm480.774-240Q544-432 488-488.226t-56-136Q432-704 488.226-760t136-56Q704-816 760-759.774t56 136Q816-544 759.774-488t-136 56ZM143-492v-72h224q5 20 12 37.5t17 34.5H143Zm0 150v-72h322q24.227 18.242 51.613 30.621Q544-371 575-365v23H143Zm457-186h48v-96h-48v96Zm24-144q9.6 0 16.8-7.2 7.2-7.2 7.2-16.8 0-9.6-7.2-16.8-7.2-7.2-16.8-7.2-9.6 0-16.8 7.2-7.2 7.2-7.2 16.8 0 9.6 7.2 16.8 7.2 7.2 16.8 7.2Z" })));