@adaptabletools/adaptable-cjs 18.0.0-canary.27 → 18.0.0-canary.29

package/src/agGrid/AgGridColumnAdapter.js

@@ -9,7 +9,6 @@ const FloatingFilterWrapper_1 = require("./FloatingFilterWrapper");
 const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
 const StringExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/StringExtensions"));
 const ObjectFactory_1 = require("../Utilities/ObjectFactory");
-const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 const UIHelper_1 = tslib_1.__importDefault(require("../View/UIHelper"));
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
@@ -669,6 +668,7 @@ class AgGridColumnAdapter {
         return Object.assign(Object.assign({}, this.getFormatColumnCellStyle(gridCell.column, activeFormatColumnsWithStyle, params)), styledColumnStyle);
     }
     getStyledColumnStyle(styledColumn, abColumn, params) {
+        var _a, _b;
         let style = {};
         const gradientStyle = styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.GradientStyle;
         if (params.value === undefined) {
@@ -676,18 +676,24 @@ class AgGridColumnAdapter {
         }
         let colValue = params.value;
         if (this.adaptableApi.gridApi.isGroupRowNode(params.node)) {
-            if (styledColumn.IncludeGroupedRows) {
-                const minColumnValue = this.adaptableApi.styledColumnApi.internalApi.getMinValueForNumericColumn(abColumn);
-                const maxColumnValue = this.adaptableApi.styledColumnApi.internalApi.getMaxValueForNumericColumn(abColumn);
-                /**
-                 * Color should always be in bounds, it should not overflow.
-                 * If the value is out of range, it shoul set the maximum/minimum color.
-                 */
-                colValue = (0, clamp_1.default)(params.value, minColumnValue, maxColumnValue);
-            }
-            else {
-                return style;
-            }
+            // We no longer support Grouped Rows
+            return style;
+            // if (styledColumn.IncludeGroupedRows) {
+            //   const minColumnValue =
+            //     this.adaptableApi.styledColumnApi.internalApi.getMinValueForNumericColumn(abColumn);
+            //   const maxColumnValue =
+            //     this.adaptableApi.styledColumnApi.internalApi.getMaxValueForNumericColumn(abColumn);
+            //   /**
+            //    * Color should always be in bounds, it should not overflow.
+            //    * If the value is out of range, it shoul set the maximum/minimum color.
+            //    */
+            //   colValue = clamp(params.value, minColumnValue, maxColumnValue);
+            // } else {
+            //   return style;
+            // }
+        }
+        if (((_b = (_a = params === null || params === void 0 ? void 0 : params.node) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[RowSummary_1.ROW_SUMMARY_ROW_ID]) && !styledColumn.IncludeRowSummaries) {
+            return style;
         }
         if (gradientStyle) {
             const min = this.adaptableApi.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, colValue);

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 removeConsecutiveSeparators;
     private createColumnMenuContextObject;
     private createAdaptableContextMenuItems;
     private createContextMenuContextObject;
@@ -17,6 +18,10 @@ export declare class AgGridMenuAdapter {
     private mapCustomMenuItemToAgGridMenuDefinition;
     private mapUserMenuItemToAgGridMenuDefinition;
     private buildContextMenuDefaultStructure;
+    /**
+     * Hide menu group with no subitems or elevate single subitem to parent level
+     */
+    private normalizeMenuGroup;
     /**
      * Default strategy for menu items: return as is if there is only one item, otherwise group them under a parent item
      */
@@ -25,6 +30,7 @@ export declare class AgGridMenuAdapter {
     private getLayoutContextMenuStructure;
     private buildMenuGroupParent;
     private buildColumnMenuDefaultStructure;
+    private getColumnFilterColumnMenuStructure;
     private getLayoutColumnMenuStructure;
     private getStyledColumnColumnMenuStructure;
     private mapAdaptableMenuItemToSystemMenuItems;

package/src/agGrid/AgGridMenuAdapter.js

@@ -51,7 +51,7 @@ class AgGridMenuAdapter {
             'separator',
             ...defaultColumnMenuStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
-        return defaultContextMenu;
+        return this.removeConsecutiveSeparators(defaultContextMenu);
     }
     buildContextMenu(params, originalGetContextMenuItems) {
         var _a;
@@ -61,8 +61,7 @@ class AgGridMenuAdapter {
         const menuOptions = this.adaptableOptions.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;
+            return [];
         }
         const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId((_a = params.column) === null || _a === void 0 ? void 0 : _a.getColId());
         const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
@@ -84,12 +83,37 @@ class AgGridMenuAdapter {
                 .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 = [
-            ...agGridMenuItems,
+            this.mapCustomMenuItemToAgGridMenuDefinition({
+                menuType: 'Group',
+                label: 'Copy & Paste',
+                icon: {
+                    name: 'copy',
+                },
+                subMenuItems: agGridCopyItems.map((item) => ({
+                    menuType: 'AgGrid',
+                    name: item,
+                })),
+            }, menuContext),
+            ...otherAgGridItems,
             'separator',
             ...defaultContextMenuStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
-        return defaultContextMenu;
+        return this.removeConsecutiveSeparators(defaultContextMenu);
+    }
+    // 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) => {
+            if (item === separator && array[index + 1] === separator) {
+                return acc;
+            }
+            acc.push(item);
+            return acc;
+        }, []);
     }
     createColumnMenuContextObject(adaptableColumn, agGridColumn) {
         return Object.assign(Object.assign({}, this.adaptableInstance.api.internalApi.buildBaseContext()), { adaptableColumn: adaptableColumn, agGridColumn: agGridColumn, isRowGroupColumn: this.adaptableInstance.api.columnApi.isAutoRowGroupColumn(agGridColumn.getColId()) });
@@ -137,6 +161,9 @@ class AgGridMenuAdapter {
     }
     mapAdaptableMenuItemToAgGridMenuDefinition(adaptableMenuItem) {
         var _a;
+        if (adaptableMenuItem === '-') {
+            return 'separator';
+        }
         return {
             name: adaptableMenuItem.label,
             action: adaptableMenuItem.onClick
@@ -222,7 +249,7 @@ class AgGridMenuAdapter {
         // GridInfo
         const gridInfoMenuItems = this.getModuleSpecificStructure('GridInfo', availableMenuItems);
         // Layout
-        const layoutMenuItems = this.getLayoutContextMenuStructure(availableMenuItems);
+        const [gridActionItems, otherLayoutItems] = this.getLayoutContextMenuStructure(availableMenuItems);
         // Note
         const noteMenuItems = this.getModuleSpecificStructure('Note', availableMenuItems);
         // SettingsPanel
@@ -231,26 +258,80 @@ class AgGridMenuAdapter {
         const smartEditMenuItems = this.getModuleSpecificStructure('SmartEdit', availableMenuItems);
         // SystemStatus
         const systemStatusMenuItems = this.getModuleSpecificStructure('SystemStatus', availableMenuItems);
-        return [
-            ...alertMenuItems,
-            ...bulkUpdateMenuItems,
-            ...calculatedColumnMenuItems,
-            ...cellSummaryMenuItems,
-            ...columnFilterMenuItems,
-            ...columnInfoMenuItems,
-            ...commentMenuItems,
-            ...dashboardMenuItems,
-            ...dataImportMenuItems,
+        /**
+         * 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 editMenuItem = {
+            name: 'edit-group',
+            label: 'Edit',
+            // TODO
+            module: 'ColumnInfo',
+            isVisible: true,
+            icon: {
+                name: 'edit-table',
+            },
+            subItems: [...bulkUpdateMenuItems, ...smartEditMenuItems],
+        };
+        const columnMenuItem = {
+            name: 'column-group',
+            label: 'Column',
+            // TODO
+            module: 'ColumnInfo',
+            isVisible: true,
+            icon: {
+                name: 'columns',
+            },
+            subItems: [...calculatedColumnMenuItems, ...columnInfoMenuItems],
+        };
+        return this.removeConsecutiveSeparators([
             ...exportMenuItems,
-            ...fdc3MenuItems,
-            ...flashingCellMenuItems,
-            ...gridInfoMenuItems,
-            ...layoutMenuItems,
+            '-',
             ...noteMenuItems,
+            ...commentMenuItems,
+            ...columnFilterMenuItems,
+            ...flashingCellMenuItems,
+            ...alertMenuItems,
+            ...fdc3MenuItems,
+            '-',
             ...settingsPanelMenuItems,
-            ...smartEditMenuItems,
-            ...systemStatusMenuItems,
-        ];
+            ...dashboardMenuItems,
+            '-',
+            ...this.normalizeMenuGroup(editMenuItem),
+            '-',
+            ...this.normalizeMenuGroup(gridMenuItem),
+            ...this.normalizeMenuGroup(columnMenuItem),
+        ], '-');
+    }
+    /**
+     * Hide menu group with no subitems or elevate single subitem to parent level
+     */
+    normalizeMenuGroup(menuItem) {
+        var _a, _b;
+        if (!((_a = menuItem.subItems) === null || _a === void 0 ? void 0 : _a.length)) {
+            return [];
+        }
+        if (((_b = menuItem.subItems) === null || _b === void 0 ? void 0 : _b.length) === 1) {
+            return [menuItem.subItems[0]];
+        }
+        return [menuItem];
     }
     /**
      * Default strategy for menu items: return as is if there is only one item, otherwise group them under a parent item
@@ -270,40 +351,46 @@ class AgGridMenuAdapter {
         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',
+        const visualReportItems = exportMenuItems.filter((item) => item.name.startsWith('export-visual-data-excel'));
+        const visualDataExportItems = visualReportItems.length
+            ? [
+                this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-visual-data-excel')), {
+                    label: 'Visual Data',
+                    icon: false,
                 }),
-            ];
-        }
-        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',
-                }),
-            ];
-        }
+            ]
+            : [];
+        const allDataExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-all-data')), {
+            label: 'All Data',
+            icon: false,
+        }));
+        const currentDataExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-current-data')), {
+            label: 'Current Data',
+            icon: false,
+        }));
+        const selectedCellsExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-selected-cells')), {
+            label: 'Selected Cells',
+            icon: false,
+        }));
+        const selectedRowsExportItems = this.normalizeMenuGroup(this.buildMenuGroupParent('Export', exportMenuItems.filter((item) => item.name.startsWith('export-selected-rows')), {
+            label: 'Selected Rows',
+            icon: false,
+        }));
+        return this.normalizeMenuGroup(this.buildMenuGroupParent('Export', [
+            ...visualDataExportItems,
+            ...allDataExportItems,
+            ...currentDataExportItems,
+            ...selectedCellsExportItems,
+            ...selectedRowsExportItems,
+        ], {
+            label: 'Export',
+            icon: 'export',
+        }));
     }
     getLayoutContextMenuStructure(menuItems) {
         const layoutMenuItems = menuItems.filter((menuItem) => menuItem.module === 'Layout');
         if (!layoutMenuItems.length) {
-            return [];
+            return [[], []];
         }
         const gridActionsItemNames = [
             'layout-clear-selection',
@@ -312,25 +399,20 @@ class AgGridMenuAdapter {
         ];
         const gridActionsItems = layoutMenuItems.filter((item) => gridActionsItemNames.includes(item.name));
         const otherLayoutItems = layoutMenuItems.filter((item) => !gridActionsItemNames.includes(item.name));
-        return [
-            this.buildMenuGroupParent('Layout', gridActionsItems, {
-                label: 'Grid',
-                icon: 'align-justify',
-            }),
-            ...otherLayoutItems,
-        ];
+        return [gridActionsItems, otherLayoutItems];
     }
     buildMenuGroupParent(module, menuItems, config) {
         var _a, _b;
         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-parent',
-            label: (_a = config === null || config === void 0 ? void 0 : config.label) !== null && _a !== void 0 ? _a : moduleInfo.FriendlyName,
+            name: 'menu-group',
+            label: (_b = config === null || config === void 0 ? void 0 : config.label) !== null && _b !== void 0 ? _b : 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,
-            },
+            icon,
             subItems: menuItems,
         };
     }
@@ -340,7 +422,7 @@ class AgGridMenuAdapter {
         // CellSummary
         const cellSummaryMenuItems = this.getModuleSpecificStructure('CellSummary', availableMenuItems);
         // ColumnFilter
-        const columnFilterMenuItems = this.getModuleSpecificStructure('ColumnFilter', availableMenuItems);
+        const [columnFilterGroup, filterVisibilityItems] = this.getColumnFilterColumnMenuStructure(availableMenuItems);
         // ColumnInfo
         const columnInfoMenuItems = this.getModuleSpecificStructure('ColumnInfo', availableMenuItems);
         // CustomSort
@@ -358,7 +440,7 @@ class AgGridMenuAdapter {
         // GridInfo
         const gridInfoMenuItems = this.getModuleSpecificStructure('GridInfo', availableMenuItems);
         // Layout
-        const layoutMenuItems = this.getLayoutColumnMenuStructure(availableMenuItems);
+        const [gridSelectItems, columnSelectItems, columnActionGroup, otherLayoutItems] = this.getLayoutColumnMenuStructure(availableMenuItems);
         // PlusMinus
         const plusMinusMenuItems = this.getModuleSpecificStructure('PlusMinus', availableMenuItems);
         // SettingsPanel
@@ -367,62 +449,114 @@ class AgGridMenuAdapter {
         const styledColumnMenuItems = this.getStyledColumnColumnMenuStructure(availableMenuItems);
         // SystemStatus
         const systemStatusMenuItems = this.getModuleSpecificStructure('SystemStatus', availableMenuItems);
-        return [
-            ...calculatedColumnMenuItems,
-            ...cellSummaryMenuItems,
-            ...columnFilterMenuItems,
-            ...columnInfoMenuItems,
-            ...customSortMenuItems,
-            ...dashboardMenuItems,
-            ...dataImportMenuItems,
-            ...flashingCellMenuItems,
-            ...formatColumnMenuItems,
-            ...freeTextColumnMenuItems,
-            ...gridInfoMenuItems,
-            ...layoutMenuItems,
-            ...plusMinusMenuItems,
+        /**
+         * 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: [...formatColumnMenuItems, ...styledColumnMenuItems, ...flashingCellMenuItems],
+        };
+        return this.removeConsecutiveSeparators([
             ...settingsPanelMenuItems,
-            ...styledColumnMenuItems,
-            ...systemStatusMenuItems,
-        ];
+            ...dashboardMenuItems,
+            ...columnFilterGroup,
+            ...this.normalizeMenuGroup(createStyleMenuItem),
+            ...this.normalizeMenuGroup(gridMenuItem),
+            ...this.normalizeMenuGroup(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',
+                    },
+                    subItems: filterActionItems,
+                },
+            ]
+            : [];
+        return [columnFilterGroup, filterVisibilityItems];
     }
     getLayoutColumnMenuStructure(menuItems) {
         const layoutMenuItems = menuItems.filter((menuItem) => menuItem.module === 'Layout');
         if (!layoutMenuItems.length) {
-            return [];
+            return [[], [], [], []];
         }
-        const selectActionsItemNames = [
+        const columnSelectItemNames = [
             'layout-column-select-preserve',
             'layout-column-select-reset',
             'layout-column-select',
-            'layout-select-all',
-        ];
-        const selectActionsItems = layoutMenuItems.filter((item) => selectActionsItemNames.includes(item.name));
-        const otherLayoutItems = layoutMenuItems.filter((item) => !selectActionsItemNames.includes(item.name));
-        return [
-            ...otherLayoutItems,
-            this.buildMenuGroupParent('Layout', selectActionsItems, {
-                label: 'Select',
-                icon: 'tab-unselected',
-            }),
         ];
+        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');
-        if (!styledColumnMenuItems.length) {
-            return [];
-        }
-        if (styledColumnMenuItems.length === 1) {
-            return styledColumnMenuItems;
-        }
-        return [
-            this.buildMenuGroupParent('StyledColumn', styledColumnMenuItems, {
-                label: 'Create Styled Column',
-            }),
-        ];
+        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));

package/src/agGrid/BadgeRenderer.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const Badge_1 = require("../View/Components/Badge");
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
 const React = tslib_1.__importStar(require("react"));
+const RowSummary_1 = require("../PredefinedConfig/Common/RowSummary");
 const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.BadgeStyle) {
         return;
@@ -15,7 +16,7 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
             return adaptable;
         }
         init(params) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f, _g;
             const adaptable = this.getAdaptableInstance(params);
             const adapatableApi = adaptable.api;
             this.eGui = document.createElement('div');
@@ -27,6 +28,11 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
+            if (((_d = params === null || params === void 0 ? void 0 : params.data) === null || _d === void 0 ? void 0 : _d[RowSummary_1.ROW_SUMMARY_ROW_ID]) && !styledColumn.IncludeRowSummaries) {
+                const formattedValue = (_g = (_f = (_e = params.formatValue) === null || _e === void 0 ? void 0 : _e.call(params, params.value)) !== null && _f !== void 0 ? _f : params.value) !== null && _g !== void 0 ? _g : '';
+                this.eGui.innerHTML = formattedValue;
+                return;
+            }
             if (['NumberArray', 'StringArray'].includes(abColumn.dataType)) {
                 this.renderArrayValues(params, adapatableApi);
             }

package/src/agGrid/PercentBarRenderer.js

@@ -17,7 +17,9 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             if (Helper_1.default.objectNotExists(value)) {
                 value = 0;
             }
-            if (!styledColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
+            // No longer support showing Percent Bar in Grouped Rows
+            if (api.gridApi.isGroupRowNode(params.node)) {
+                // if (!styledColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
                 if (params.value) {
                     this.eGui = document.createElement('div');
                     this.eGui.append(params.value);

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -7,8 +7,12 @@ const react_redux_1 = require("react-redux");
 const react_1 = require("react");
 const Loader_1 = require("../Loader");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
+const ExternalRenderer_1 = require("../../View/Components/ExternalRenderer");
+const Dialog_1 = tslib_1.__importDefault(require("../Dialog"));
+const rebass_1 = require("rebass");
 const ProgressIndicator = () => {
-    const { active, label } = (0, react_redux_1.useSelector)((state) => state.System.ProgressIndicator);
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { active, text, render, frameworkComponent } = (0, react_redux_1.useSelector)((state) => state.System.ProgressIndicator);
     const [visible, setVisible] = (0, react_1.useState)(false);
     const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = (0, react_1.useState)({
         top: 0,
@@ -16,7 +20,6 @@ const ProgressIndicator = () => {
         height: 0,
         width: 0,
     });
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const disableAdaptableGrid = (containerElement, disabled) => {
         const DISABLING_CSS_CLASS = 'ab-wait-for-progress-indicator';
         if (!containerElement) {
@@ -39,15 +42,21 @@ const ProgressIndicator = () => {
     (0, react_1.useEffect)(() => {
         disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
         disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
-        updateGridContainerCoordinates(adaptable.getAdaptableContainerElement());
+        updateGridContainerCoordinates(adaptable.getAgGridContainerElement());
         // without rAF the progress indicator would be rendered instantly, without the 'transition-delay' defined via CSS
         requestAnimationFrame(() => {
             setVisible(active);
         });
     }, [active]);
-    return (React.createElement(React.Fragment, null, active && (React.createElement("div", { className: `ab-progress-indicator-wrapper ${visible ? 'ab-progress-indicator-wrapper--visible' : ''}`, style: progressIndicatorCoordinates },
-        React.createElement("div", { className: "ab-progress-indicator-body" },
+    let customEl = null;
+    if (render || frameworkComponent) {
+        customEl = React.createElement(ExternalRenderer_1.ExternalRenderer, { render: render, frameworkComponent: frameworkComponent });
+    }
+    return (React.createElement(React.Fragment, null, active && (React.createElement(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}` },
+        React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "column", p: 3, className: "ab-ProgressIndicator-body" },
             React.createElement(Loader_1.LoaderSpinner, null),
-            React.createElement("span", { style: { marginLeft: 'var(--ab-space-2)' } }, label))))));
+            React.createElement(rebass_1.Box, { mt: 3 },
+                text && React.createElement(rebass_1.Box, null, text),
+                customEl))))));
 };
 exports.ProgressIndicator = ProgressIndicator;

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

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

package/src/components/icons/copy.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: "M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" })));

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,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: "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" })));