@adaptabletools/adaptable 16.0.10-canary.0 → 16.1.0-canary.0

package/src/agGrid/agGridMenuHelper.d.ts

@@ -1,4 +1,4 @@
-import { GridOptions, MenuItemDef, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, GetContextMenuItems, Column } from '@ag-grid-community/core';
+import { Column, GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, GridOptions, MenuItemDef } from '@ag-grid-community/core';
 import { AdaptableMenuItem, ColumnMenuContext, ContextMenuContext, UserMenuItem } from '../PredefinedConfig/Common/Menu';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
 import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
@@ -7,22 +7,25 @@ export declare class agGridMenuHelper {
     private gridOptions;
     constructor(adaptable: IAdaptable, gridOptions: GridOptions);
     destroy(): void;
-    buildColumnMenu(params: GetMainMenuItemsParams, originalgetMainMenuItems: GetMainMenuItems): (string | MenuItemDef)[];
-    buildContextMenu(params: GetContextMenuItemsParams, originalgetContextMenuItems: GetContextMenuItems): (string | MenuItemDef)[];
-    createRemoveGroupsMenuItem(x: AdaptableMenuItem): MenuItemDef;
-    createAgGridMenuDefFromAdaptableMenu(adaptableMenuItem: AdaptableMenuItem): MenuItemDef;
+    buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (string | MenuItemDef)[];
+    buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (string | MenuItemDef)[];
+    private createAdaptableColumnMenuItems;
+    private mapCustomMenuItemToAgGridMenuDefinition;
+    private mapAdaptableMenuItemToAgGridMenuDefinition;
+    private mapUserMenuItemToAgGridMenuDefinition;
+    private logMenuDeprecation;
+    private createAgGridMenuDefFromAdaptableMenu;
     createAgGridColumnMenuDefFromUserMenu(menuItem: UserMenuItem<ColumnMenuContext>, menuContext: ColumnMenuContext): MenuItemDef;
     createAgGridContextMenuDefFromUserMenu(menuItem: UserMenuItem<ContextMenuContext>, menuContext: ContextMenuContext): MenuItemDef;
     private mapAdaptableIconToAgGridIcon;
     createAdaptableColumnMenuItemFromUserMenu(menuItem: UserMenuItem<ColumnMenuContext>, menuContext: ColumnMenuContext): AdaptableMenuItem;
     createAgGridColumnMenuItems(originalgetMainMenuItems: GetMainMenuItems, params: GetMainMenuItemsParams): (string | MenuItemDef)[] | undefined;
-    createGroupedColumnMenuItem(): MenuItemDef | undefined;
-    createAdaptableColumnMenuItems(adaptableColumn: AdaptableColumn, menuContext: ColumnMenuContext): MenuItemDef[];
+    private createAdaptableColumnMenuItems_DEPRECATED;
     createUserColumnMenuItems(menuContext: ColumnMenuContext): MenuItemDef[];
     createColumnMenuContextObject(adaptableColumn: AdaptableColumn, agGridColumn: Column): ColumnMenuContext;
     createContextMenuContextObject(params: GetContextMenuItemsParams, adaptableColumn: AdaptableColumn): ContextMenuContext;
-    createAgGridContextMenuItems(originalgetContextMenuItems: GetContextMenuItems, params: GetContextMenuItemsParams): (string | MenuItemDef)[] | undefined;
-    createAdaptableContextMenuItems(menuContext: ContextMenuContext): AdaptableMenuItem[];
+    private createAgGridContextMenuItems;
+    private createAdaptableContextMenuItems;
     createAgGridAdaptableContextMenuItems(adaptableMenuItems: AdaptableMenuItem[], menuContext: ContextMenuContext): MenuItemDef[];
     createAgGridUserContextMenuItems(userContextMenuItems: UserMenuItem<ContextMenuContext>[], menuContext: ContextMenuContext): MenuItemDef[];
     private getAdaptableMenuItemsColumnHeader;
@@ -30,4 +33,12 @@ export declare class agGridMenuHelper {
     private getLabelFromUserContextMenuItem;
     private getUserMenuItemsColumnHeader;
     buildStandaloneColumnHeader(adaptableColumn: AdaptableColumn): AdaptableMenuItem[];
+    /**
+     *  !!! This should be deleted once MenuOptions loses all the deprecated options
+     */
+    private buildContextMenuDeprecated;
+    /**
+     *  !!! This should be deleted once MenuOptions loses all the deprecated options
+     */
+    private buildColumnMenuDeprecated;
 }

package/src/agGrid/agGridMenuHelper.js

@@ -6,6 +6,8 @@ const ArrayExtensions_1 = require("../Utilities/Extensions/ArrayExtensions");
 const icons_1 = require("../components/icons");
 const flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
 const Icon_1 = require("../components/Icon");
+const logDeprecation_1 = require("../Utilities/logDeprecation");
+const MenuOptions_1 = require("../AdaptableOptions/MenuOptions");
 // tslint:disable-next-line: class-name
 class agGridMenuHelper {
     constructor(adaptable, gridOptions) {
@@ -16,139 +18,183 @@ class agGridMenuHelper {
         this.adaptable = null;
         this.gridOptions = null;
     }
-    buildColumnMenu(params, originalgetMainMenuItems) {
-        // couldnt find a way to listen for menu close. There is a Menu Item Select, but you can also close menu from filter and clicking outside menu....
-        const colId = params.column.getColId();
-        let agGridColumnMenuItems = [];
-        let adaptableColumnMenuItems = [];
-        let userColumnMenuItems = [];
+    buildColumnMenu(params, originalGetMainMenuItems) {
+        var _a;
         const menuOptions = this.adaptable.adaptableOptions.menuOptions;
-        //First get Ag Grid Column Items
-        agGridColumnMenuItems.push(...this.createAgGridColumnMenuItems(originalgetMainMenuItems, params));
-        let showAdaptableColumnMenu = menuOptions.showAdaptableColumnMenu;
-        let hasAdaptableColumnMenuItems = showAdaptableColumnMenu == null || showAdaptableColumnMenu !== false;
-        if (hasAdaptableColumnMenuItems) {
-            agGridColumnMenuItems.push('separator');
+        this.logMenuDeprecation(menuOptions);
+        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+        if (!params.column) {
+            // return only AG Grid context if the Adaptable column is not found (should not happen)
+            return agGridMenuItems;
         }
-        const adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId(colId);
+        const adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
-        // then Get Adaptable Menu Items
-        if (menuContext.isRowGroupColumn) {
-            let groupedMenuItem = this.createGroupedColumnMenuItem();
-            if (groupedMenuItem) {
-                adaptableColumnMenuItems.push(groupedMenuItem);
-            }
-        }
-        //  if (adaptableColumn != undefined) {
-        if (hasAdaptableColumnMenuItems) {
-            adaptableColumnMenuItems.push(...this.createAdaptableColumnMenuItems(adaptableColumn, menuContext));
-        }
-        //   }
-        // Finally get all the User Menu Items
-        userColumnMenuItems.push(...this.createUserColumnMenuItems(menuContext));
-        const map = {
-            aggrid: agGridColumnMenuItems,
-            adaptable: adaptableColumnMenuItems,
-            user: userColumnMenuItems,
-        };
-        const menuItemsArray = menuOptions.columnMenuOrder;
-        let arr = [];
-        if (menuItemsArray != null && typeof menuItemsArray === 'function') {
-            arr = menuItemsArray({
-                adaptableApi: this.adaptable.api,
-                userName: this.adaptable.adaptableOptions.userName,
-                adaptableId: this.adaptable.adaptableOptions.adaptableId,
-                column: adaptableColumn,
-            });
-        }
-        else {
-            arr = menuItemsArray;
+        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;
+        });
+        // 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 defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
+            const customMenuItems = menuOptions
+                .customColumnMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
+                defaultAdaptableMenuItems }))
+                .filter(Boolean);
+            return customMenuItems
+                .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
+                .filter(Boolean);
         }
-        return (0, flatten_1.default)(arr.map((c) => {
-            return map[c];
-        }));
+        // !! Uncomment once the deprecated options are removed
+        // 2. if not, return the default context menu
+        // const defaultContextMenu: (string | MenuItemDef)[] = [
+        //   ...agGridMenuItems,
+        //   'separator',
+        //   ...adaptableMenuItems.map((adaptableItem) =>
+        //     this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)
+        //   ),
+        // ];
+        // return defaultContextMenu;
+        return this.buildColumnMenuDeprecated(params, originalGetMainMenuItems);
     }
-    buildContextMenu(params, originalgetContextMenuItems) {
+    buildContextMenu(params, originalGetContextMenuItems) {
+        var _a;
         // 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.adaptable.setSelectedCells();
-        let agGridContextMenuItems = [];
-        let adaptableContextMenuItems = [];
-        let userContextMenuItems = [];
         const menuOptions = this.adaptable.adaptableOptions.menuOptions;
-        let showAdaptableContextMenu = menuOptions.showAdaptableContextMenu;
-        let hasAdaptableContextMenuItems = showAdaptableContextMenu == null || showAdaptableContextMenu !== false;
-        let userDefinedContextMenuItems = menuOptions.contextMenuItems;
-        let hasUserDefinedContextMenuItems = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(userDefinedContextMenuItems);
-        const agGridMenuItems = this.createAgGridContextMenuItems(originalgetContextMenuItems, params);
-        if (agGridMenuItems === null || agGridMenuItems === void 0 ? void 0 : agGridMenuItems.length) {
-            agGridContextMenuItems.push(...agGridMenuItems);
-            if (hasAdaptableContextMenuItems || hasUserDefinedContextMenuItems) {
-                agGridContextMenuItems.push('separator');
-            }
+        this.logMenuDeprecation(menuOptions);
+        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+        if (!params.column) {
+            // return only AG Grid context if the Adaptable column is not found (should not happen)
+            return agGridMenuItems;
         }
-        const adaptableMenuItems = [];
-        const agGridColumn = params.column;
-        let adaptableColumn;
-        if (agGridColumn) {
-            adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId(agGridColumn.getColId());
-            // if (adaptableColumn != undefined) {
-            let menuContext = this.createContextMenuContextObject(params, adaptableColumn);
-            // keep it simple for now - if its a grouped cell then don't add the shipped menu items
-            // if (adaptableColumn && !params.node.group) {
-            const allAdaptableMenuItems = this.createAdaptableContextMenuItems(menuContext);
-            if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(allAdaptableMenuItems)) {
-                adaptableMenuItems.push(...allAdaptableMenuItems);
-            }
-            // }
-            // create agGrid Menu items based on Adaptable Menu Items - user can decide whether to show or not
-            if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(adaptableMenuItems) && hasAdaptableContextMenuItems) {
-                adaptableContextMenuItems.push(...this.createAgGridAdaptableContextMenuItems(adaptableMenuItems, menuContext));
-            }
-            // create agGrid Menu items based on User Menu Items - user can decide whether to show or not
-            if (hasUserDefinedContextMenuItems) {
-                userContextMenuItems.push(...this.createAgGridUserContextMenuItems(userDefinedContextMenuItems, menuContext));
+        const adaptableColumn = this.adaptable.api.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
+        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;
+        });
+        // 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 defaultAdaptableMenuItems = adaptableMenuItems.map((adaptableItem) => (Object.assign({ menuType: 'Adaptable' }, adaptableItem)));
+            const customMenuItems = menuOptions
+                .customContextMenu(Object.assign(Object.assign({}, menuContext), { defaultAgGridMenuItems,
+                defaultAdaptableMenuItems }))
+                .filter(Boolean);
+            return customMenuItems
+                .map((customMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext))
+                .filter(Boolean);
+        }
+        // !! Uncomment once the deprecated options are removed
+        // 2. if not, return the default context menu
+        // const defaultContextMenu: (string | MenuItemDef)[] = [
+        //   ...agGridMenuItems,
+        //   'separator',
+        //   ...adaptableMenuItems.map((adaptableItem) =>
+        //     this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)
+        //   ),
+        // ];
+        // return defaultContextMenu;
+        return this.buildContextMenuDeprecated(params, originalGetContextMenuItems);
+    }
+    createAdaptableColumnMenuItems(menuContext) {
+        let contextMenuItems = [];
+        this.adaptable.adaptableModules.forEach((s) => {
+            let menuItems = s.addColumnMenuItems(menuContext.adaptableColumn);
+            if (menuItems) {
+                contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
             }
+        });
+        return contextMenuItems;
+    }
+    mapCustomMenuItemToAgGridMenuDefinition(customMenuItem, menuContext) {
+        var _a;
+        if (customMenuItem === '-') {
+            return 'separator';
         }
-        const map = {
-            aggrid: agGridContextMenuItems,
-            adaptable: adaptableContextMenuItems,
-            user: userContextMenuItems,
-        };
-        const menuItemsArray = menuOptions.contextMenuOrder;
-        let arr = [];
-        if (menuItemsArray != null && typeof menuItemsArray === 'function') {
-            arr = menuItemsArray({
-                adaptableApi: this.adaptable.api,
-                userName: this.adaptable.adaptableOptions.userName,
-                adaptableId: this.adaptable.adaptableOptions.adaptableId,
-                column: adaptableColumn,
-            });
+        if (customMenuItem.menuType === 'Group') {
+            return {
+                name: customMenuItem.label,
+                icon: this.mapAdaptableIconToAgGridIcon(customMenuItem.icon, {
+                    fill: 'var(--ab-color-text-on-primary)',
+                }),
+                disabled: customMenuItem.disabled,
+                subMenu: !customMenuItem.disabled
+                    ? (_a = customMenuItem.subMenuItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => this.mapCustomMenuItemToAgGridMenuDefinition(subMenuItem, menuContext)).filter(Boolean)
+                    : undefined,
+            };
         }
-        else {
-            arr = menuItemsArray;
+        if (customMenuItem.menuType === 'AgGrid') {
+            return customMenuItem.name;
         }
-        return (0, flatten_1.default)(arr.map((c) => {
-            return map[c];
-        }));
+        if (customMenuItem.menuType === 'Adaptable') {
+            return this.mapAdaptableMenuItemToAgGridMenuDefinition(customMenuItem);
+        }
+        if (customMenuItem.menuType === 'User') {
+            return this.mapUserMenuItemToAgGridMenuDefinition(customMenuItem, menuContext);
+        }
+    }
+    mapAdaptableMenuItemToAgGridMenuDefinition(adaptableMenuItem) {
+        var _a;
+        return {
+            name: adaptableMenuItem.label,
+            action: adaptableMenuItem.onClick
+                ? adaptableMenuItem.onClick
+                : adaptableMenuItem.reduxAction
+                    ? () => this.adaptable.api.internalApi.dispatchReduxAction(adaptableMenuItem.reduxAction)
+                    : undefined,
+            icon: this.mapAdaptableIconToAgGridIcon(adaptableMenuItem.icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            }),
+            subMenu: (_a = adaptableMenuItem.subItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(subMenuItem)),
+        };
     }
-    //}
-    //  return flatten(
-    //    arr.map((c) => {
-    //      return map[c];
-    //    })
-    // );
-    createRemoveGroupsMenuItem(x) {
+    mapUserMenuItemToAgGridMenuDefinition(userMenuItem, menuContext) {
+        var _a;
+        if (userMenuItem.hidden) {
+            return;
+        }
         return {
-            name: x.label,
-            action: x.onClick
-                ? x.onClick
-                : () => this.adaptable.api.internalApi.dispatchReduxAction(x.reduxAction),
-            icon: this.mapAdaptableIconToAgGridIcon(x.icon, {
+            name: userMenuItem.label,
+            action: () => (userMenuItem.onClick ? userMenuItem.onClick(menuContext) : null),
+            icon: this.mapAdaptableIconToAgGridIcon(userMenuItem.icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             }),
+            disabled: userMenuItem.disabled,
+            subMenu: (_a = userMenuItem.subMenuItems) === null || _a === void 0 ? void 0 : _a.map((subMenuItem) => {
+                return this.mapCustomMenuItemToAgGridMenuDefinition(subMenuItem, menuContext);
+            }).filter(Boolean),
         };
     }
+    logMenuDeprecation(menuOptions) {
+        const deprecatedProps = [
+            'contextMenuItems',
+            'contextMenuOrder',
+            'showAdaptableContextMenu',
+            'columnMenuItems',
+            'columnMenuOrder',
+            'showAdaptableColumnMenu',
+        ];
+        deprecatedProps.forEach((propName) => {
+            if (menuOptions[propName]) {
+                (0, logDeprecation_1.logDeprecation)(this.adaptable.logger, 'MenuOptions', propName, 'customContextMenu');
+            }
+        });
+    }
     createAgGridMenuDefFromAdaptableMenu(adaptableMenuItem) {
         const subMenuItems = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(adaptableMenuItem.subItems)
             ? adaptableMenuItem.subItems.map((amu) => {
@@ -224,6 +270,7 @@ class agGridMenuHelper {
     createAdaptableColumnMenuItemFromUserMenu(menuItem, menuContext) {
         const fn = menuItem.onClick;
         let adaptableMenuItem = {
+            module: 'General',
             label: this.getLabelFromUserColumnMenuItem(menuItem, menuContext),
             reduxAction: null,
             onClick: () => (fn ? fn(menuContext) : null),
@@ -238,25 +285,16 @@ class agGridMenuHelper {
             ? originalgetMainMenuItems(params)
             : params.defaultItems.slice(0);
     }
-    createGroupedColumnMenuItem() {
-        if (this.adaptable.adaptableOptions.menuOptions.showUngroupColumnMenuItem) {
-            let groupedCols = this.gridOptions.columnApi.getRowGroupColumns();
-            let ungroupMenuItem = {
-                label: groupedCols.length == 1 ? 'Ungroup Column' : 'Ungroup All',
-                onClick: () => this.gridOptions.columnApi.setRowGroupColumns([]),
-                isVisible: true,
-                icon: {
-                    name: 'undo',
-                },
-            };
-            let menuItem = this.createAgGridMenuDefFromAdaptableMenu(ungroupMenuItem);
-            return menuItem;
-        }
-    }
-    createAdaptableColumnMenuItems(adaptableColumn, menuContext) {
+    createAdaptableColumnMenuItems_DEPRECATED(adaptableColumn, menuContext) {
         let columnMenuItems = [];
         // First get all the Module based Adaptable Menu Items
         const adaptableMenuItems = this.getAdaptableMenuItemsColumnHeader(adaptableColumn, 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;
+        });
         // And then convert them into Menu Item Defs
         adaptableMenuItems.forEach((adaptableMenuItem) => {
             let menuItem = this.createAgGridMenuDefFromAdaptableMenu(adaptableMenuItem);
@@ -339,18 +377,18 @@ class agGridMenuHelper {
                 : [];
     }
     createAdaptableContextMenuItems(menuContext) {
-        let columnMenuItems = [];
+        let contextMenuItems = [];
         this.adaptable.adaptableModules.forEach((s) => {
             let menuItems = s.addContextMenuItems(menuContext);
             if (menuItems) {
-                columnMenuItems.push(...menuItems);
+                contextMenuItems.push(...menuItems.filter(Boolean).filter((item) => item.isVisible !== false));
             }
         });
         this.adaptable._emitSync('CreateAdaptableContextMenuItems', {
-            items: columnMenuItems,
+            items: contextMenuItems,
             menuContext: menuContext,
         });
-        return columnMenuItems;
+        return contextMenuItems;
     }
     createAgGridAdaptableContextMenuItems(adaptableMenuItems, menuContext) {
         // here we create agGrid Menu items based on Adaptable Menu Items
@@ -449,5 +487,122 @@ class agGridMenuHelper {
         }
         return returnMenuItems;
     }
+    /**
+     *  !!! This should be deleted once MenuOptions loses all the deprecated options
+     */
+    buildContextMenuDeprecated(params, originalGetContextMenuItems) {
+        let agGridContextMenuItems = [];
+        let adaptableContextMenuItems = [];
+        let userContextMenuItems = [];
+        const menuOptions = this.adaptable.adaptableOptions.menuOptions;
+        let showAdaptableContextMenu = menuOptions.showAdaptableContextMenu;
+        let hasAdaptableContextMenuItems = showAdaptableContextMenu == null || showAdaptableContextMenu !== false;
+        let userDefinedContextMenuItems = menuOptions.contextMenuItems;
+        let hasUserDefinedContextMenuItems = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(userDefinedContextMenuItems);
+        const agGridMenuItems = this.createAgGridContextMenuItems(originalGetContextMenuItems, params);
+        if (agGridMenuItems === null || agGridMenuItems === void 0 ? void 0 : agGridMenuItems.length) {
+            agGridContextMenuItems.push(...agGridMenuItems);
+            if (hasAdaptableContextMenuItems || hasUserDefinedContextMenuItems) {
+                agGridContextMenuItems.push('separator');
+            }
+        }
+        const adaptableMenuItems = [];
+        const agGridColumn = params.column;
+        let adaptableColumn;
+        if (agGridColumn) {
+            adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId(agGridColumn.getColId());
+            // if (adaptableColumn != undefined) {
+            let menuContext = this.createContextMenuContextObject(params, adaptableColumn);
+            // keep it simple for now - if its a grouped cell then don't add the shipped menu items
+            // if (adaptableColumn && !params.node.group) {
+            const allAdaptableMenuItems = this.createAdaptableContextMenuItems(menuContext);
+            if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(allAdaptableMenuItems)) {
+                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);
+                return firstPriority - secondPriority;
+            });
+            // }
+            // create agGrid Menu items based on Adaptable Menu Items - user can decide whether to show or not
+            if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(adaptableMenuItems) && hasAdaptableContextMenuItems) {
+                adaptableContextMenuItems.push(...this.createAgGridAdaptableContextMenuItems(adaptableMenuItems, menuContext));
+            }
+            // create agGrid Menu items based on User Menu Items - user can decide whether to show or not
+            if (hasUserDefinedContextMenuItems) {
+                userContextMenuItems.push(...this.createAgGridUserContextMenuItems(userDefinedContextMenuItems, menuContext));
+            }
+        }
+        const map = {
+            aggrid: agGridContextMenuItems,
+            adaptable: adaptableContextMenuItems,
+            user: userContextMenuItems,
+        };
+        const menuItemsArray = menuOptions.contextMenuOrder;
+        let arr = [];
+        if (menuItemsArray != null && typeof menuItemsArray === 'function') {
+            arr = menuItemsArray({
+                adaptableApi: this.adaptable.api,
+                userName: this.adaptable.adaptableOptions.userName,
+                adaptableId: this.adaptable.adaptableOptions.adaptableId,
+                column: adaptableColumn,
+            });
+        }
+        else {
+            arr = menuItemsArray;
+        }
+        return (0, flatten_1.default)(arr.map((c) => {
+            return map[c];
+        }));
+    }
+    /**
+     *  !!! This should be deleted once MenuOptions loses all the deprecated options
+     */
+    buildColumnMenuDeprecated(params, originalgetMainMenuItems) {
+        // couldnt find a way to listen for menu close. There is a Menu Item Select, but you can also close menu from filter and clicking outside menu....
+        const colId = params.column.getColId();
+        let agGridColumnMenuItems = [];
+        let adaptableColumnMenuItems = [];
+        let userColumnMenuItems = [];
+        const menuOptions = this.adaptable.adaptableOptions.menuOptions;
+        //First get Ag Grid Column Items
+        agGridColumnMenuItems.push(...this.createAgGridColumnMenuItems(originalgetMainMenuItems, params));
+        let showAdaptableColumnMenu = menuOptions.showAdaptableColumnMenu;
+        let hasAdaptableColumnMenuItems = showAdaptableColumnMenu == null || showAdaptableColumnMenu !== false;
+        if (hasAdaptableColumnMenuItems) {
+            agGridColumnMenuItems.push('separator');
+        }
+        const adaptableColumn = this.adaptable.api.columnApi.getColumnWithColumnId(colId);
+        const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
+        //  if (adaptableColumn != undefined) {
+        if (hasAdaptableColumnMenuItems) {
+            adaptableColumnMenuItems.push(...this.createAdaptableColumnMenuItems_DEPRECATED(adaptableColumn, menuContext));
+        }
+        //   }
+        // Finally get all the User Menu Items
+        userColumnMenuItems.push(...this.createUserColumnMenuItems(menuContext));
+        const map = {
+            aggrid: agGridColumnMenuItems,
+            adaptable: adaptableColumnMenuItems,
+            user: userColumnMenuItems,
+        };
+        const menuItemsArray = menuOptions.columnMenuOrder;
+        let arr = [];
+        if (menuItemsArray != null && typeof menuItemsArray === 'function') {
+            arr = menuItemsArray({
+                adaptableApi: this.adaptable.api,
+                userName: this.adaptable.adaptableOptions.userName,
+                adaptableId: this.adaptable.adaptableOptions.adaptableId,
+                column: adaptableColumn,
+            });
+        }
+        else {
+            arr = menuItemsArray;
+        }
+        return (0, flatten_1.default)(arr.map((c) => {
+            return map[c];
+        }));
+    }
 }
 exports.agGridMenuHelper = agGridMenuHelper;

package/src/components/FileDroppable/index.d.ts

@@ -12,8 +12,9 @@ interface FileDroppableProps extends FlexProps {
     toJSON?: (str: string) => Promise<any> | any;
     readFile?: (file: File, toJSON?: (str: string) => Promise<any> | any) => Promise<any>;
     onDropSuccess?: (json: any, file: File) => void;
+    file?: File;
 }
-export declare const readJSONFile: (file: File, toJSON?: (str: string) => Promise<any> | any) => Promise<unknown>;
+export declare const readJSONFile: (file: File, toJSON?: (str: string) => Promise<any> | any) => Promise<Record<string, unknown>[]>;
 declare const FileDroppable: {
     (props: FileDroppableProps): JSX.Element;
     defaultProps: {};

package/src/components/FileDroppable/index.js

@@ -15,7 +15,7 @@ const initialState = {
     dragOver: false,
     message: null,
 };
-const stop = (e) => {
+const preventEventPropagation = (e) => {
     e.preventDefault();
     e.stopPropagation();
 };
@@ -40,7 +40,8 @@ const readJSONFile = async (file, toJSON) => {
 };
 exports.readJSONFile = readJSONFile;
 const FileDroppable = (props) => {
-    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(icons_1.Icon, { name: "paperclip", size: 48 }) } = props, domProps = tslib_1.__rest(props, ["onDropSuccess", "message", "fileAccept", "helpText", "defaultText", "dragOverText", "icon"]);
+    var _a;
+    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(icons_1.Icon, { name: "paperclip", size: 48 }), value } = props, domProps = tslib_1.__rest(props, ["onDropSuccess", "message", "fileAccept", "helpText", "defaultText", "dragOverText", "icon", "value"]);
     const [state, dispatch] = (0, react_1.useReducer)(reducer_1.default, initialState);
     const onDragEnter = (e) => {
         dispatch({
@@ -48,7 +49,7 @@ const FileDroppable = (props) => {
         });
     };
     const onDragLeave = (event) => {
-        stop(event);
+        preventEventPropagation(event);
         if (domRef.current != event.target &&
             (0, contains_1.default)(domRef.current, event.target)) {
             return;
@@ -59,7 +60,7 @@ const FileDroppable = (props) => {
     };
     const onDrop = async (e) => {
         let files;
-        stop(e);
+        preventEventPropagation(e);
         let nativeEvent = e.nativeEvent;
         if (nativeEvent && nativeEvent.dataTransfer) {
             files = nativeEvent.dataTransfer.files;
@@ -98,10 +99,10 @@ const FileDroppable = (props) => {
         }
     };
     const domRef = (0, react_1.useRef)();
-    let form = (React.createElement("form", { onSubmit: stop },
+    let form = (React.createElement("form", { onSubmit: preventEventPropagation },
         React.createElement(SimpleButton_1.default, { style: { cursor: 'pointer' }, variant: "outlined" },
             React.createElement("div", null, state.dragOver ? dragOverText : defaultText),
-            React.createElement("input", { type: "file", onChange: onDrop, accept: fileAccept, style: {
+            React.createElement("input", { type: "file", onChange: onDrop, accept: fileAccept, value: (_a = props === null || props === void 0 ? void 0 : props.file) === null || _a === void 0 ? void 0 : _a.name, style: {
                     opacity: 0,
                     position: 'absolute',
                     cursor: 'pointer',
@@ -114,7 +115,7 @@ const FileDroppable = (props) => {
                     zIndex: 1,
                 } }))));
     const msg = message || state.message;
-    return (React.createElement(rebass_1.Flex, Object.assign({}, domProps, { flexDirection: "column", className: (0, join_1.default)(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: stop, ref: domRef }),
+    return (React.createElement(rebass_1.Flex, Object.assign({}, domProps, { flexDirection: "column", className: (0, join_1.default)(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef }),
         props.children,
         helpText || icon ? (React.createElement(rebass_1.Flex, { flexDirection: "column" },
             helpText ? (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "center", margin: 2 },

package/src/components/icons/import.d.ts

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

package/src/components/icons/import.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DefaultIcon_1 = tslib_1.__importDefault(require("./DefaultIcon"));
+exports.default = (props) => (React.createElement(DefaultIcon_1.default, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M440-200h80v-167l64 64 56-57-160-160-160 160 57 56 63-63v167ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z" })));