@adaptabletools/adaptable 22.1.1-canary.1 → 23.0.0-canary.0

package/src/agGrid/AgGridMenuAdapter.js

@@ -2,6 +2,8 @@ import { isAdaptableElementIcon } from '../components/Icon';
 import { iconToString } from '../components/icons';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { MENU_SEPARATOR } from '../Utilities/Constants/GeneralConstants';
+import { buildConsolidatedAggregationColumnMenuItem, findParameterizedAggMenuInsertIndex, isValueAggregationMenuItem, } from '../Aggregation/parameterizedAggregationColumnMenu';
+import { removeColumnAggregationFromLayout, upsertColumnAggregationInLayout, } from '../Aggregation/parameterizedAggregationHelpers';
 export class AgGridMenuAdapter {
     _adaptableInstance;
     constructor(_adaptableInstance) {
@@ -53,13 +55,42 @@ export class AgGridMenuAdapter {
                 .filter(Boolean);
         }
         // 2. if not, return the default context menu
-        const defaultContextMenu = [
+        let defaultContextMenu = [
             ...agGridMenuItems,
             'separator',
             ...defaultColumnMenuStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
+        defaultContextMenu = this.injectParameterizedAggregationColumnMenuItems(defaultContextMenu, adaptableColumn);
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
+    injectParameterizedAggregationColumnMenuItems(menuItems, column) {
+        const consolidatedAggregationMenuItem = buildConsolidatedAggregationColumnMenuItem(this.adaptableApi, column, (columnId, parameterizedAgg) => {
+            this.adaptableApi.layoutApi.setColumnParameterizedAggregation(columnId, parameterizedAgg);
+        }, (columnId, aggFunc) => {
+            this.adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+                if (aggFunc == null) {
+                    removeColumnAggregationFromLayout(layout, columnId);
+                }
+                else {
+                    upsertColumnAggregationInLayout(layout, columnId, aggFunc);
+                }
+                return layout;
+            });
+            this.adaptableApi.agGridApi.setColumnAggFunc(columnId, aggFunc);
+        });
+        if (!consolidatedAggregationMenuItem) {
+            return menuItems;
+        }
+        consolidatedAggregationMenuItem.icon = this.mapAdaptableIconToAgGridIcon({ name: 'equation' });
+        const originalValueAggMenuIndex = menuItems.findIndex((item) => isValueAggregationMenuItem(item));
+        const menuItemsWithoutValueAgg = menuItems.filter((item) => !isValueAggregationMenuItem(item));
+        const result = [...menuItemsWithoutValueAgg];
+        const insertIndex = originalValueAggMenuIndex !== -1
+            ? Math.min(originalValueAggMenuIndex, result.length)
+            : findParameterizedAggMenuInsertIndex(menuItemsWithoutValueAgg);
+        result.splice(insertIndex, 0, consolidatedAggregationMenuItem);
+        return result;
+    }
     buildContextMenu(params, originalGetContextMenuItems) {
         if (!params.column) {
             return [];
@@ -275,7 +306,7 @@ export class AgGridMenuAdapter {
         if (userMenuItem.hidden) {
             return;
         }
-        return {
+        const menuItemDef = {
             name: userMenuItem.label,
             action: () => (userMenuItem.onClick ? userMenuItem.onClick(menuContext) : null),
             icon: this.mapAdaptableIconToAgGridIcon(userMenuItem.icon, {
@@ -288,6 +319,52 @@ export class AgGridMenuAdapter {
             })
                 .filter(Boolean),
         };
+        // If a framework component is supplied, attach it so AG Grid renders the
+        // menu row content via its own framework adapter. React, Vue and Angular
+        // variants are supported; for other variants we silently fall back to
+        // the default name/icon/action rendering.
+        if (userMenuItem.frameworkComponent) {
+            const variant = this.adaptableApi.gridApi.getVariant();
+            let menuItemComponent;
+            if (variant === 'react') {
+                // React function components are passed through as-is; AG Grid's
+                // React adapter will instantiate them with `CustomMenuItemProps`.
+                menuItemComponent = userMenuItem.frameworkComponent;
+            }
+            else if (variant === 'vue') {
+                // Vue framework components are factories of shape
+                // `({ adaptableApi }) => Component`; invoke once to obtain the
+                // component options object that AG Grid Vue's adapter expects.
+                try {
+                    menuItemComponent = userMenuItem.frameworkComponent({
+                        adaptableApi: this.adaptableApi,
+                    });
+                }
+                catch (err) {
+                    this._adaptableInstance.logger.consoleWarn(`Could not resolve Vue framework component for menu item "${userMenuItem.label}"`, err);
+                    menuItemComponent = undefined;
+                }
+            }
+            else if (variant === 'angular') {
+                // Angular framework components have shape `{ type: ComponentClass }`;
+                // hand the class to AG Grid Angular which uses its own
+                // `viewContainerRef.createComponent` to instantiate it. The optional
+                // `onSetup` field is intentionally NOT honoured here because AG Grid
+                // owns the lifecycle - menu-item Angular components should consume
+                // `menuItemParams` (or AG Grid's `agInit`) to receive `adaptableApi`.
+                const angularComponent = userMenuItem.frameworkComponent;
+                menuItemComponent = angularComponent.type;
+            }
+            if (menuItemComponent) {
+                menuItemDef.menuItem = menuItemComponent;
+                menuItemDef.menuItemParams = {
+                    adaptableApi: this.adaptableApi,
+                    menuContext,
+                    ...(userMenuItem.menuItemParams ?? {}),
+                };
+            }
+        }
+        return menuItemDef;
     }
     buildContextMenuDefaultStructure(availableMenuItems, menuContext) {
         // Alert
@@ -299,7 +376,7 @@ export class AgGridMenuAdapter {
         // CellSummary
         const cellSummaryMenuItems = this.getModuleSpecificStructure('CellSummary', availableMenuItems);
         // ColumnFilter
-        const columnFilterMenuItems = this.getModuleSpecificStructure('ColumnFilter', availableMenuItems);
+        const columnFilterMenuItems = this.getModuleSpecificStructure('ColumnFilter', availableMenuItems, 'column-filter-group');
         // ColumnInfo
         const columnInfoMenuItems = this.getModuleSpecificStructure('ColumnInfo', availableMenuItems);
         // Comment
@@ -309,7 +386,7 @@ export class AgGridMenuAdapter {
         // DataImport
         const dataImportMenuItems = this.getModuleSpecificStructure('DataImport', availableMenuItems);
         // Export
-        const exportMenuItems = this.getModuleSpecificStructure('Export', availableMenuItems);
+        const exportMenuItems = this.getModuleSpecificStructure('Export', availableMenuItems, 'export-group');
         // FDC3
         const fdc3MenuItems = this.getModuleSpecificStructure('Fdc3', availableMenuItems);
         // FlashingCell
@@ -457,6 +534,7 @@ export class AgGridMenuAdapter {
         const gridInfoMenuItems = this.getModuleSpecificStructure('GridInfo', availableMenuItems);
         // Layout
         const [gridSelectItems, columnSelectItems, columnActionGroup, otherLayoutItems] = this.getLayoutColumnMenuStructure(availableMenuItems);
+        const selectionMenuItems = this.buildSelectColumnMenuGroup(gridSelectItems, columnSelectItems);
         // PlusMinus
         const plusMinusMenuItems = this.getModuleSpecificStructure('PlusMinus', availableMenuItems);
         // SettingsPanel
@@ -479,7 +557,7 @@ export class AgGridMenuAdapter {
             subItems: [
                 ...otherLayoutItems,
                 ...filterVisibilityItems,
-                ...gridSelectItems,
+                ...selectionMenuItems,
                 ...cellSummaryMenuItems,
                 ...chartMenuItems,
                 ...dataImportMenuItems,
@@ -514,7 +592,6 @@ export class AgGridMenuAdapter {
                 ...freeTextColumnMenuItems,
                 ...customSortMenuItems,
                 ...plusMinusMenuItems,
-                ...columnSelectItems,
                 ...columnInfoMenuItems,
             ],
         };
@@ -576,6 +653,43 @@ export class AgGridMenuAdapter {
             item.name !== 'layout-grid-select');
         return [gridSelectItems, columnSelectItems, columnActionGroup, otherLayoutItems];
     }
+    buildSelectColumnMenuGroup(gridSelectItems, columnSelectItems) {
+        const childGroups = [];
+        if (gridSelectItems.length) {
+            const gridGroup = {
+                name: 'select-grid-group',
+                label: 'Grid',
+                category: 'Group',
+                isVisible: true,
+                subItems: gridSelectItems,
+            };
+            childGroups.push(...this.normalizeMenuGroup(gridGroup));
+        }
+        if (columnSelectItems.length) {
+            const columnGroup = {
+                name: 'select-column-group',
+                label: 'Column',
+                category: 'Group',
+                isVisible: true,
+                subItems: columnSelectItems,
+            };
+            childGroups.push(...this.normalizeMenuGroup(columnGroup));
+        }
+        if (!childGroups.length) {
+            return [];
+        }
+        const selectGroup = {
+            name: 'select-group',
+            label: 'Select',
+            category: 'Group',
+            isVisible: true,
+            icon: {
+                name: 'select-all',
+            },
+            subItems: childGroups,
+        };
+        return this.normalizeMenuGroup(selectGroup);
+    }
     getStyledColumnColumnMenuStructure(menuItems) {
         const styledColumnMenuItems = menuItems.filter((menuItem) => menuItem.category === 'StyledColumn');
         return styledColumnMenuItems;

package/src/agGrid/cellRenderers/ActionColumnRenderer.d.ts

@@ -9,6 +9,7 @@ export declare class ActionColumnRenderer implements ICellRendererComp {
     private unmountReactRoot?;
     private layoutSwitchUnsubscribe?;
     private actionButtons;
+    private actionColumn;
     init(params: ActionColumnCellRendererParams): void;
     render(): void;
     getGui(): HTMLElement;

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -1,39 +1,94 @@
-import SimpleButton from '../../components/SimpleButton';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import DropdownButton from '../../components/DropdownButton';
 import * as React from 'react';
+import { IconComponent } from '../../components/Icon';
+import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../../View/Components/AdaptableButton';
 import { useRerender } from '../../components/utils/useRerender';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import { LAYOUT_SELECT } from '../../Redux/ActionsReducers/LayoutRedux';
 import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
+function getActionColumnButtonProps(button, index, adaptableApi, context, rerender) {
+    if (button.hidden?.(button, context)) {
+        return null;
+    }
+    const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
+    const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
+    const identifier = button.label ??
+        button.icon?.name ??
+        button.tooltip ??
+        `${index + 1}`;
+    return {
+        button,
+        buttonLabel,
+        buttonTooltip,
+        identifier,
+    };
+}
 const ActionButtons = (props) => {
     const { buttons, adaptableApi, context, rerender } = props;
-    return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
-        if (button.hidden && button.hidden(button, context)) {
-            return;
+    return (_jsx(_Fragment, { children: buttons.map((button, index) => {
+            const buttonProps = getActionColumnButtonProps(button, index, adaptableApi, context, rerender);
+            if (!buttonProps) {
+                return null;
+            }
+            const { button: actionButton, identifier } = buttonProps;
+            return (_jsx(AdaptableButtonView, { button: actionButton, context: context, api: adaptableApi, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.actionColumn, iconSize: { height: 15, width: 15 }, "data-name": `action-button-${identifier}`, className: adaptableApi.internalApi.getStyleForButton(actionButton, context)?.className, onAfterClick: rerender }, actionButton.Uuid));
+        }) }));
+};
+const ActionColumnDropdown = (props) => {
+    const { buttons, adaptableApi, context, settings, rerender } = props;
+    const dropdownLabel = settings.dropdownLabel ?? 'Actions';
+    const items = buttons
+        .map((button, index) => {
+        const buttonProps = getActionColumnButtonProps(button, index, adaptableApi, context, rerender);
+        if (!buttonProps) {
+            return null;
         }
-        const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
+        const { button: actionButton, buttonLabel, buttonTooltip } = buttonProps;
+        const disabled = Boolean(actionButton.disabled?.(actionButton, context));
+        const menuIcon = adaptableApi.internalApi.getIconForButton(actionButton, context, {
             height: 15,
             width: 15,
         });
-        const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
-        const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
-        const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-        const handleClick = () => {
-            button.onClick?.(button, context);
-            // Timeout to let any updates to be done before re-rendering the component
-            setTimeout(() => {
-                // when called again it triggers a re-render
-                // https:reactjs.org/docs/react-dom.html#render
-                rerender();
-            }, 16);
+        return {
+            label: buttonLabel || buttonTooltip,
+            icon: menuIcon ? (_jsx(IconComponent, { icon: menuIcon })) : undefined,
+            disabled,
+            onClick: () => {
+                actionButton.onClick?.(actionButton, context);
+                setTimeout(() => rerender(), 16);
+            },
         };
-        const disabled = button.disabled && button.disabled(button, context);
-        const identifier = button.label ??
-            button.icon?.name ??
-            button.tooltip ??
-            `${index + 1}`;
-        return (React.createElement(SimpleButton, { key: button.Uuid, "data-name": `action-button-${identifier}`, variant: buttonStyle?.variant ?? 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: buttonStyle?.tone ?? 'none', onClick: handleClick, className: buttonStyle?.className, accessLevel: ACCESS_LEVEL_FULL }, buttonLabel));
-    })));
+    })
+        .filter((item) => item != null);
+    if (!items.length) {
+        return null;
+    }
+    return (_jsx(DropdownButton, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, collapseOnItemClick: true, listMinWidth: 140, showToggleIcon: true, accessLevel: ACCESS_LEVEL_FULL, children: dropdownLabel }));
 };
+const ActionColumnCellContent = (props) => {
+    const { buttons, actionColumn, adaptableApi, context, rerender } = props;
+    const settings = actionColumn.actionColumnSettings ?? {};
+    if (settings.displayMode === 'dropdown') {
+        return (_jsx(ActionColumnDropdown, { buttons: buttons, adaptableApi: adaptableApi, context: context, settings: settings, rerender: rerender }));
+    }
+    return (_jsx(ActionButtons, { buttons: buttons, adaptableApi: adaptableApi, context: context, rerender: rerender }));
+};
+function shouldRenderActionColumnForRow(actionColumn, adaptableApi, node) {
+    const isGroupedRow = adaptableApi.gridApi.isGroupRowNode(node);
+    const isSummaryRow = adaptableApi.gridApi.isSummaryNode(node);
+    const isGrandTotalRowNode = adaptableApi.gridApi.isGrandTotalRowNode(node);
+    if (isGrandTotalRowNode) {
+        return !actionColumn.rowScope?.ExcludeTotalRows;
+    }
+    if (isGroupedRow) {
+        return !actionColumn.rowScope?.ExcludeGroupRows;
+    }
+    if (isSummaryRow) {
+        return !actionColumn.rowScope?.ExcludeSummaryRows;
+    }
+    return !actionColumn.rowScope?.ExcludeDataRows;
+}
 export const ReactActionColumnRenderer = (props) => {
     const rerender = useRerender();
     const adaptable = props.context.__adaptable;
@@ -45,34 +100,9 @@ export const ReactActionColumnRenderer = (props) => {
     if (!actionColumn || !actionButtons.length) {
         return null;
     }
-    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 (isGrandTotalRowNode) {
-        if (actionColumn.rowScope?.ExcludeTotalRows) {
-            shouldRender = false;
-        }
-    }
-    else if (isGroupedRow) {
-        if (actionColumn.rowScope?.ExcludeGroupRows) {
-            shouldRender = false;
-        }
-    }
-    else if (isSummaryRow) {
-        if (actionColumn.rowScope?.ExcludeSummaryRows) {
-            shouldRender = false;
-        }
-    }
-    else {
-        if (actionColumn.rowScope?.ExcludeDataRows) {
-            shouldRender = false;
-        }
-    }
-    if (!shouldRender) {
+    if (!shouldRenderActionColumnForRow(actionColumn, adaptable.api, props.node)) {
         return null;
     }
-    // subscribe to the LayoutChange event and rerender on change
     const unsubscribe = adaptable.api.eventApi.on('AdaptableStateChanged', (eventInfo) => {
         if (eventInfo.actionName === LAYOUT_SELECT) {
             if (eventInfo.oldState.Layout.CurrentLayout !== eventInfo.newState.Layout.CurrentLayout) {
@@ -80,7 +110,6 @@ export const ReactActionColumnRenderer = (props) => {
             }
         }
     });
-    // unsubscribe on unmount
     React.useEffect(() => {
         return () => {
             unsubscribe();
@@ -94,8 +123,7 @@ export const ReactActionColumnRenderer = (props) => {
         ...adaptable.api.internalApi.buildBaseContext(),
         data: props.data,
     };
-    return (React.createElement("div", { className: "ab-ActionColumn" },
-        React.createElement(ActionButtons, { buttons: actionButtons, adaptableApi: adaptable.api, context: buttonContext, rerender: rerender })));
+    return (_jsx("div", { className: "ab-ActionColumn", children: _jsx(ActionColumnCellContent, { buttons: actionButtons, actionColumn: actionColumn, adaptableApi: adaptable.api, context: buttonContext, rerender: rerender }) }));
 };
 export class ActionColumnRenderer {
     eGui;
@@ -103,7 +131,7 @@ export class ActionColumnRenderer {
     unmountReactRoot;
     layoutSwitchUnsubscribe;
     actionButtons;
-    // gets called once before the renderer is used
+    actionColumn;
     init(params) {
         const adaptable = params.context.__adaptable;
         if (!adaptable) {
@@ -115,34 +143,10 @@ export class ActionColumnRenderer {
             return;
         }
         this.actionButtons = actionButtons;
-        // create the cell
+        this.actionColumn = actionColumn;
         this.eGui = document.createElement('div');
         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 (isGrandTotalRowNode) {
-            if (actionColumn.rowScope?.ExcludeTotalRows) {
-                shouldRender = false;
-            }
-        }
-        else if (isGroupedRow) {
-            if (actionColumn.rowScope?.ExcludeGroupRows) {
-                shouldRender = false;
-            }
-        }
-        else if (isSummaryRow) {
-            if (actionColumn.rowScope?.ExcludeSummaryRows) {
-                shouldRender = false;
-            }
-        }
-        else {
-            if (actionColumn.rowScope?.ExcludeDataRows) {
-                shouldRender = false;
-            }
-        }
-        if (!shouldRender) {
+        if (!shouldRenderActionColumnForRow(actionColumn, adaptable.api, params.node)) {
             this.eGui.innerHTML = '';
             return;
         }
@@ -156,8 +160,9 @@ export class ActionColumnRenderer {
         };
         const eGui = this.eGui;
         const doRender = () => {
-            this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(ActionButtons({
+            this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(ActionColumnCellContent({
                 buttons: this.actionButtons,
+                actionColumn: this.actionColumn,
                 context: buttonContext,
                 rerender: doRender,
                 adaptableApi: adaptable.api,
@@ -167,32 +172,26 @@ export class ActionColumnRenderer {
         this.layoutSwitchUnsubscribe = adaptable.api.eventApi.on('AdaptableStateChanged', (eventInfo) => {
             if (eventInfo.actionName === LAYOUT_SELECT) {
                 if (eventInfo.oldState.Layout.CurrentLayout !== eventInfo.newState.Layout.CurrentLayout) {
-                    const { actionButtons: freshActionButtons } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndButtons(params.colDef);
+                    const { actionButtons: freshActionButtons, actionColumn: freshActionColumn } = adaptable.api.actionColumnApi.internalApi.getActionColumnsAndButtons(params.colDef);
                     this.actionButtons = freshActionButtons;
+                    this.actionColumn = freshActionColumn;
                     doRender();
                 }
             }
         });
         doRender();
     }
-    // defined on init
-    // used to re-render in refresh
     render() { }
-    // gets called once when grid ready to insert the element
     getGui() {
         return this.eGui;
     }
-    // gets called whenever the user gets the cell to refresh
     refresh(params) {
-        // return true to tell the grid we refreshed successfully
         this.render();
         return true;
     }
-    // gets called when the cell is removed from the grid
     destroy() {
         this.layoutSwitchUnsubscribe?.();
         this.unmountReactRoot?.();
-        // do cleanup, remove event listener from button
         if (this.eGui) {
             this.eGui.removeEventListener('click', this.eventListener);
         }

package/src/agGrid/cellRenderers/BadgeRenderer.d.ts

@@ -1,4 +1,4 @@
-import { BadgeStyle } from '../../AdaptableState/StyledColumnState';
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
-export declare const getBadgeRendererForColumn: (badgeStyle: BadgeStyle, abColumn: AdaptableColumn, api: AdaptableApi) => any;
+export declare const getBadgeRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -1,7 +1,35 @@
 import { Badge } from '../../View/Components/Badge';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import * as React from 'react';
-export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
+import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+const OVERFLOW_CLASS = {
+    Truncate: 'ab-Badge__wrapper--truncate',
+    Wrap: 'ab-Badge__wrapper--wrap',
+    Scroll: 'ab-Badge__wrapper--scroll',
+};
+/**
+ * Maps a column-level `BadgeStyle.Font.Alignment` to the flex
+ * `justify-content` value for the badge row. Returns `null` to mean
+ * "leave the wrapper alone" so the default flex layout applies.
+ */
+const resolveBadgeRowJustify = (alignment) => {
+    switch (alignment) {
+        case 'Center':
+            return 'center';
+        case 'Right':
+            return 'flex-end';
+        case 'Left':
+            return 'flex-start';
+        default:
+            return null;
+    }
+};
+export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
+    const badgeStyle = styledColumn.BadgeStyle;
+    const overflowMode = badgeStyle.OverflowMode ?? 'Truncate';
+    const wrapperClassName = `ab-Badge__wrapper ${OVERFLOW_CLASS[overflowMode]}`;
+    const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
+    const rowJustify = resolveBadgeRowJustify(badgeStyle.Font?.Alignment);
     return class BadgetRenderer {
         eGui;
         unmountReactRoot;
@@ -13,32 +41,18 @@ export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
             const adaptable = this.getAdaptableInstance(params);
             const adaptableApi = adaptable.api;
             this.eGui = document.createElement('div');
-            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 (isGrandTotalRowNode) {
-                if (badgeStyle.RowScope?.ExcludeTotalRows) {
-                    shouldRender = false;
-                }
-            }
-            else if (isGroupedRow) {
-                if (badgeStyle.RowScope?.ExcludeGroupRows) {
-                    shouldRender = false;
-                }
+            this.eGui.className = wrapperClassName;
+            if (spacing != null) {
+                // Set the inter-badge gap directly so it doesn't depend on theme CSS.
+                this.eGui.style.setProperty('--ab-cmp-badge__spacing', `${spacing}px`);
             }
-            else if (isSummaryRow) {
-                if (badgeStyle.RowScope?.ExcludeSummaryRows) {
-                    shouldRender = false;
-                }
-            }
-            else {
-                if (badgeStyle.RowScope?.ExcludeDataRows) {
-                    shouldRender = false;
-                }
+            if (rowJustify) {
+                // Position the badge row within the cell. `width: 100%` is needed so
+                // `justify-content` has room to act on an `inline-flex` container.
+                this.eGui.style.setProperty('justify-content', rowJustify);
+                this.eGui.style.setProperty('width', '100%');
             }
-            if (!shouldRender) {
+            if (!shouldRenderStyledColumnOnRow(styledColumn, params.node, adaptableApi)) {
                 const formattedValue = params.formatValue?.(params.value) ?? params.value ?? '';
                 this.eGui.innerHTML = formattedValue;
                 return;
@@ -115,17 +129,19 @@ export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
                 if (!badge) {
                     return React.createElement('span', {
                         key: index,
-                        className: 'ab-Badge ab-Badge__unstyled',
+                        className: 'ab-Badge ab-Badge--normal ab-Badge__unstyled',
                         children: value,
                     });
                 }
                 return React.createElement(Badge, {
                     key: index,
-                    adaptableStyle: badge.Style,
+                    pillStyle: badge.PillStyle,
                     children: value,
                     icon: badge.Icon,
                     iconPosition: badge.IconPosition ?? 'start',
-                    gap: 5,
+                    shape: badge.Shape,
+                    density: badgeStyle.Density ?? 'Normal',
+                    iconGap: badge.IconGap,
                 });
             });
             this.unmountReactRoot = api.internalApi

package/src/agGrid/cellRenderers/BulletChartRenderer.d.ts

@@ -0,0 +1,4 @@
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
+export declare const getBulletChartRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;