@adaptabletools/adaptable 20.2.11 → 20.3.0-canary.0

package/src/agGrid/AgGridColumnAdapter.js

@@ -132,6 +132,8 @@ export class AgGridColumnAdapter {
             this.setupColumnCellRenderer(colSetupInfo);
             this.setupColumnCellStyle(colSetupInfo);
             this.setupColumnCellClass(colSetupInfo);
+            this.setupColumnHeaderStyle(colSetupInfo);
+            this.setupColumnHeaderClass(colSetupInfo);
             this.setupColumnTooltipValueGetter(colSetupInfo);
             this.setupColumnValueGetter(colSetupInfo);
             this.setupColumnFilter(colSetupInfo);
@@ -157,7 +159,7 @@ export class AgGridColumnAdapter {
     }
     setupColumnCellClass({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellClass', (userCellClass) => {
-            const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnWithStyleClassNameForColumn(abColumn);
+            const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnWithStyleClassNameForColumn(abColumn, { target: 'cell' });
             const quickSearchTextMatchStyle = this.getQuickSearchTextMatchStyle();
             const quickSearchCurrentTextMatchStyle = this.getQuickSearchCurrentTextMatchStyle();
             const cellClass = (params) => {
@@ -207,6 +209,54 @@ export class AgGridColumnAdapter {
             return cellClass;
         });
     }
+    setupColumnHeaderClass({ col, colId, abColumn }) {
+        this.setColDefProperty(col, 'headerClass', (userHeaderClass) => {
+            const headerClass = (params) => {
+                let baseHeaderClass = [];
+                // inherit styles from user provided colDef property
+                const userDefinedHeaderClass = typeof userHeaderClass === 'function' ? userHeaderClass(params) : userHeaderClass;
+                if (userDefinedHeaderClass) {
+                    baseHeaderClass =
+                        typeof userDefinedHeaderClass === 'string'
+                            ? [userDefinedHeaderClass]
+                            : Array.isArray(userDefinedHeaderClass)
+                                ? userDefinedHeaderClass
+                                : [userDefinedHeaderClass];
+                }
+                if (params.floatingFilter) {
+                    // we NEVER style floating filters
+                    return baseHeaderClass;
+                }
+                if (params.columnGroup) {
+                    // we TEMPORARILY do NOT style column groups
+                    // see https://github.com/AdaptableTools/adaptable/issues/2947#issuecomment-3062304655
+                    return baseHeaderClass;
+                }
+                const columnId = params.column.getColId();
+                const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId(columnId);
+                if (!adaptableColumn) {
+                    return baseHeaderClass;
+                }
+                const target = 'columnHeader';
+                const formatColumns = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnWithStyleClassNameForColumn(abColumn, {
+                    target,
+                });
+                if (!formatColumns.length) {
+                    return baseHeaderClass;
+                }
+                const formatColumnClasses = formatColumns
+                    .map((formatColumn) => {
+                    if (formatColumn.Style?.ClassName &&
+                        this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInHeader(formatColumn, abColumn)) {
+                        return formatColumn.Style?.ClassName;
+                    }
+                })
+                    .filter((x) => !!x);
+                return [...baseHeaderClass, ...formatColumnClasses];
+            };
+            return headerClass;
+        });
+    }
     setupColumnCellStyle({ col }) {
         this.setColDefProperty(col, 'cellStyle', (userCellStyle) => {
             const quickSearchStyle = this.getQuickSearchCellStyle();
@@ -263,7 +313,7 @@ export class AgGridColumnAdapter {
                     ...this.getReadOnlyCellStyle(gridCell, params),
                     ...this.getEditableCellStyle(gridCell, params),
                     ...this.getEditedCellStyle(gridCell, params),
-                    ...this.getFormatColumnAndStyledColumnCellStyle(gridCell, params),
+                    ...this.getFormatColumnAndStyledColumnCellStyle(gridCell.column, params),
                     ...(isQuickSearchActive ? quickSearchStyle : {}),
                     ...(isQuickSearchActive && textStyleToApply ? textStyleToApply : {}),
                     ...this.getAlertCellStyle(gridCell, params),
@@ -275,6 +325,35 @@ export class AgGridColumnAdapter {
             return cellStyle;
         });
     }
+    setupColumnHeaderStyle({ col }) {
+        this.setColDefProperty(col, 'headerStyle', (userHeaderStyle) => {
+            const headerStyleFunc = (params) => {
+                // inherit styles from user provided colDef property
+                const baseStyles = typeof userHeaderStyle === 'function' ? userHeaderStyle(params) : userHeaderStyle;
+                if (params.floatingFilter) {
+                    // we NEVER style floating filters
+                    return baseStyles;
+                }
+                const columnId = params.column.getColId();
+                const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId(columnId);
+                if (!adaptableColumn) {
+                    return baseStyles;
+                }
+                const result = {
+                    ...baseStyles,
+                    ...this.getFormatColumnHeaderStyle(adaptableColumn, params),
+                };
+                if (result['borderColor']) {
+                    // by default, header cells don't have a border
+                    // if the user defines a border-color, we assume he wants to show a border
+                    result['borderWidth'] = `1px`;
+                    result['borderStyle'] = 'solid';
+                }
+                return normalizeStyleForAgGrid(result);
+            };
+            return headerStyleFunc;
+        });
+    }
     setupColumnCellEditor({ colId, col, colDef, abColumn }) {
         const shouldShowSelectCellEditor = this.adaptableApi.userInterfaceApi.internalApi.shouldShowSelectCellEditor(abColumn);
         const hasRichSelectCellEditor = this.adaptableInstance.agGridAdapter.isAgGridModuleRegistered('RichSelect');
@@ -843,7 +922,7 @@ export class AgGridColumnAdapter {
         const classNames = formatColumns
             .map((formatColumn) => {
             if (formatColumn.Style?.ClassName &&
-                this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRender(formatColumn, abColumn, params.node, params.value)) {
+                this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInCell(formatColumn, abColumn, params.node, params.value)) {
                 return formatColumn.Style?.ClassName;
             }
         })
@@ -909,13 +988,13 @@ export class AgGridColumnAdapter {
     }
     /**
      * The combination of styled column and format cells
-     * This functiond decides when the two can be merged.
+     * This function decides when the two can be merged.
      */
-    getFormatColumnAndStyledColumnCellStyle(gridCell, params) {
-        let styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(gridCell.column.columnId);
+    getFormatColumnAndStyledColumnCellStyle(column, params) {
+        let styledColumn = this.adaptableApi.styledColumnApi.getStyledColumnForColumnId(column.columnId);
         let styledColumnStyle = {};
         if (styledColumn && !styledColumn?.IsSuspended) {
-            const styledCellStyle = this.getStyledColumnStyle(styledColumn, gridCell.column, params);
+            const styledCellStyle = this.getStyledColumnStyle(styledColumn, column, params);
             // for percentbar we want to merge
             if (styledColumn.PercentBarStyle || styledColumn.BadgeStyle || styledColumn.GradientStyle) {
                 styledColumnStyle = styledCellStyle;
@@ -925,13 +1004,33 @@ export class AgGridColumnAdapter {
                 return styledCellStyle;
             }
         }
-        const activeFormatColumnsWithStyle = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithStyleForColumn(gridCell.column);
+        const activeFormatColumnsWithStyle = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithStyleForColumn(column, {
+            target: 'cell',
+        });
         // background color of styledColumn.GradientStyle has precedence and wins over FormatColumn
         return {
-            ...this.getFormatColumnCellStyle(gridCell.column, activeFormatColumnsWithStyle, params),
+            ...this.getFormatColumnCellStyle(column, activeFormatColumnsWithStyle, params),
             ...styledColumnStyle,
         };
     }
+    getFormatColumnHeaderStyle(column, params) {
+        if (params.columnGroup) {
+            // FormatColumns are not supported in column groups
+            // YET, see https://github.com/AdaptableTools/adaptable/issues/2947#issuecomment-3062304655
+            return {};
+        }
+        const target = 'columnHeader';
+        const activeFormatColumnsWithStyle = this.adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithStyleForColumn(column, {
+            target,
+        });
+        if (!activeFormatColumnsWithStyle.length) {
+            return {};
+        }
+        const relevantFormatColumnsWithStyle = activeFormatColumnsWithStyle.filter((formatColumn) => {
+            return this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInHeader(formatColumn, column);
+        });
+        return this.getFormatColumnAdaptableStyle(relevantFormatColumnsWithStyle);
+    }
     getStyledColumnStyle(styledColumn, abColumn, params) {
         let style = {};
         const gradientStyle = styledColumn?.GradientStyle;
@@ -998,7 +1097,7 @@ export class AgGridColumnAdapter {
             return {};
         }
         const relevantFormatColumnsWithStyle = activeFormatColumnsWithStyle.filter((formatColumn) => {
-            return this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRender(formatColumn, abColumn, params.node, params.value);
+            return this.adaptableApi.formatColumnApi.internalApi.formatColumnShouldRenderInCell(formatColumn, abColumn, params.node, params.value);
         });
         return this.getFormatColumnAdaptableStyle(relevantFormatColumnsWithStyle);
     }

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -46,8 +46,14 @@ export const ReactActionColumnRenderer = (props) => {
     }
     const isGroupedRow = adaptable.api.gridApi.isGroupRowNode(props.node);
     const isSummaryRow = adaptable.api.gridApi.isSummaryNode(props.node);
+    const isGrandTotalRowNode = adaptable.api.gridApi.isGrandTotalRowNode(props.node);
     let shouldRender = true;
-    if (isGroupedRow) {
+    if (isGrandTotalRowNode) {
+        if (actionColumn.rowScope?.ExcludeTotalRows) {
+            shouldRender = false;
+        }
+    }
+    else if (isGroupedRow) {
         if (actionColumn.rowScope?.ExcludeGroupRows) {
             shouldRender = false;
         }
@@ -108,8 +114,14 @@ export class ActionColumnRenderer {
         this.eGui.className = 'ab-ActionColumn';
         const isGroupedRow = adaptable.api.gridApi.isGroupRowNode(params.node);
         const isSummaryRow = adaptable.api.gridApi.isSummaryNode(params.node);
+        const isGrandTotalRowNode = adaptable.api.gridApi.isGrandTotalRowNode(params.node);
         let shouldRender = true;
-        if (isGroupedRow) {
+        if (isGrandTotalRowNode) {
+            if (actionColumn.rowScope?.ExcludeTotalRows) {
+                shouldRender = false;
+            }
+        }
+        else if (isGroupedRow) {
             if (actionColumn.rowScope?.ExcludeGroupRows) {
                 shouldRender = false;
             }

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -14,8 +14,14 @@ export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
             this.eGui.className = 'ab-Badge__wrapper';
             const isGroupedRow = params.node.group;
             const isSummaryRow = adaptableApi.gridApi.isSummaryNode(params.node);
+            const isGrandTotalRowNode = adaptableApi.gridApi.isGrandTotalRowNode(params.node);
             let shouldRender = true;
-            if (isGroupedRow) {
+            if (isGrandTotalRowNode) {
+                if (badgeStyle.RowScope?.ExcludeTotalRows) {
+                    shouldRender = false;
+                }
+            }
+            else if (isGroupedRow) {
                 if (badgeStyle.RowScope?.ExcludeGroupRows) {
                     shouldRender = false;
                 }
@@ -51,7 +57,6 @@ export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
                 return;
             }
             for (const value of params.value) {
-                const formattedValue = params.formatValue?.(value) ?? value ?? '';
                 const predicateDefHandlerContext = {
                     value: value,
                     oldValue: null,
@@ -61,18 +66,20 @@ export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
                     ...adaptableApi.internalApi.buildBaseContext(),
                 };
                 const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
+                const formattedValue = badge?.IconOnly ? '' : params.formatValue?.(value) ?? value ?? '';
                 const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
-                if (!isNullValue && badge) {
-                    badgesConfig.push({
-                        badge: { ...badge },
-                        value: formattedValue,
-                    });
+                if (!isNullValue) {
+                    const config = { value: formattedValue };
+                    if (badge) {
+                        config.badge = badge;
+                    }
+                    badgesConfig.push(config);
                 }
             }
             this.renderBadges(badgesConfig, api, params);
         }
         renderSingularValues(params, adaptableApi) {
-            const formattedValue = params.formatValue?.(params.value) ?? params.value ?? '';
+            let formattedValue = params.formatValue?.(params.value) ?? params.value ?? '';
             const predicateDefHandlerContext = {
                 value: params.value,
                 oldValue: null,
@@ -83,14 +90,14 @@ export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
             };
             const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
             const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
-            if (
-            // empty values
-            isNullValue ||
-                // no badge
-                !badge) {
+            // Return if empty values or no badge
+            if (isNullValue || !badge) {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
+            if (badge.IconOnly) {
+                formattedValue = '';
+            }
             this.renderBadges([
                 {
                     badge,
@@ -101,6 +108,13 @@ export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
         renderBadges(config, api, params) {
             const adaptable = this.getAdaptableInstance(params);
             const badges = config.map(({ badge, value }, index) => {
+                if (!badge) {
+                    return React.createElement('span', {
+                        key: index,
+                        className: 'ab-Badge ab-Badge__unstyled',
+                        children: value,
+                    });
+                }
                 return React.createElement(Badge, {
                     key: index,
                     adaptableStyle: badge.Style,

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -8,7 +8,7 @@ import Dialog from '../Dialog';
 import { Box, Flex } from 'rebass';
 export const ProgressIndicator = () => {
     const adaptable = useAdaptable();
-    const { active, text, render, frameworkComponent } = useSelector((state) => state.Popup.ProgressIndicator);
+    const { active, text, render, frameworkComponent, renderMode } = useSelector((state) => state.Popup.ProgressIndicator);
     const [visible, setVisible] = useState(false);
     const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = useState({
         top: 0,
@@ -49,10 +49,24 @@ export const ProgressIndicator = () => {
     if (render || frameworkComponent) {
         customEl = React.createElement(ExternalRenderer, { render: render, frameworkComponent: frameworkComponent });
     }
-    return (React.createElement(React.Fragment, null, active && (React.createElement(Dialog, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}` },
-        React.createElement(Flex, { alignItems: "center", flexDirection: "column", p: 3, className: "ab-ProgressIndicator-body" },
+    // Check if we should replace the default content
+    const replaceContent = renderMode === 'dialog' && customEl;
+    return (React.createElement(
+        React.Fragment,
+        null,
+        active && (React.createElement(Dialog, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}`, modalProps: {
+                style: progressIndicatorCoordinates,
+            } }, replaceContent ? (
+        // If renderMode is 'dialog', replace the entire content with custom element
+        customEl) : (
+        // Otherwise use the default Flex layout
+        (React.createElement(
+            Flex,
+            { alignItems: "center", flexDirection: "column", p: 3, className: "ab-ProgressIndicator-body" },
             React.createElement(LoaderSpinner, null),
             React.createElement(Box, { mt: 3 },
                 text && React.createElement(Box, null, text),
-                customEl))))));
+                customEl)
+        )))))
+    ));
 };

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1752606692555 || Date.now(),
-    VERSION: "20.2.11" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1752676413621 || Date.now(),
+    VERSION: "20.3.0-canary.0" || '--current-version--',
 };

package/src/layout-manager/src/index.js

@@ -648,8 +648,8 @@ export class LayoutManager extends LMEmitter {
                 const colId = colDef.colId ?? colDef.field;
                 return (layout.ColumnVisibility?.[colId] === false ||
                     !layout.TableColumns.includes(colId) ||
-                    colDef.hide ||
-                    colDef.initialHide);
+                    colDef.type === 'hiddenColumn' ||
+                    (Array.isArray(colDef.type) && colDef.type.includes('hiddenColumn')));
             })
                 .map((colDef) => colDef.colId ?? colDef.field),
         };

package/src/metamodel/adaptable.metamodel.d.ts

@@ -2669,6 +2669,25 @@ export declare const ADAPTABLE_METAMODEL: {
         name: string;
         kind: string;
         desc: string;
+        props: ({
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            ref: string;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+            ref?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            ref?: undefined;
+        })[];
     };
     DashboardButtonContext: {
         name: string;
@@ -3637,12 +3656,21 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
             isOpt: boolean;
             ref: string;
+            defVal?: undefined;
         } | {
             name: string;
             kind: string;
             desc: string;
             ref: string;
             isOpt?: undefined;
+            defVal?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            defVal: string;
+            ref?: undefined;
         })[];
     };
     FormatColumnOptions: {
@@ -3677,6 +3705,11 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
         }[];
     };
+    FormatColumnTarget: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     FormContext: {
         name: string;
         kind: string;
@@ -6003,4 +6036,14 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    WindowPosition: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
+    WindowSize: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
 };