@adaptabletools/adaptable 23.0.0-canary.0 → 23.0.0-canary.10

package/src/agGrid/AgGridColumnAdapter.js

@@ -1,7 +1,9 @@
-import kebabCase from '../Utilities/utils/kebabCase';
+import { kebabCase } from '../Utilities/Extensions/StringExtensions';
 import { resolveDisplayFormat } from '../AdaptableState/Common/AdaptableFormatPresets';
-import merge from '../Utilities/utils/merge';
-import { convertAdaptableStyleToCSS, getVariableColor, hasCellBoxStyle, hasCellFontStyle, normalizeStyleForAgGrid, } from '../Utilities/Helpers/StyleHelper';
+import { merge } from '../Utilities/Extensions/ObjectExtensions';
+import { resolveSparklineOptionsForRender } from '../Utilities/Helpers/StyledColumns/SparklineStyleHelper';
+import { hasBarStyleCellTextConfigured } from '../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { convertAdaptableStyleToCSS, getAutoContrastTextColor, getVariableColor, hasCellBoxStyle, hasCellFontStyle, normalizeStyleForAgGrid, } from '../Utilities/Helpers/StyleHelper';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
 import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
 import tinycolor from 'tinycolor2';
@@ -11,11 +13,11 @@ import { getBadgeRendererForColumn } from './cellRenderers/BadgeRenderer';
 import { getBulletChartRendererForColumn } from './cellRenderers/BulletChartRenderer';
 import { getRangeBarRendererForColumn } from './cellRenderers/RangeBarRenderer';
 import { getRatingRendererForColumn } from './cellRenderers/RatingRenderer';
-import { shouldRenderStyledColumnOnRow } from './cellRenderers/shouldRenderStyledColumnOnRow';
+import { shouldRenderStyledColumnOnRow } from '../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 import { findIconStyleMappingForValue, getIconRendererForColumn, } from './cellRenderers/IconRenderer';
-import Helper from '../Utilities/Helpers/Helper';
-import { getRuleAlertProperties } from '../Utilities/Helpers/ScheduledAlertHelper';
-import { isNegativeZeroCentredBand, expandGradientCellRanges, gradientStyleRangeLookupValueType, DEFAULT_GRADIENT_MIN_ALPHA, DEFAULT_GRADIENT_MAX_ALPHA, } from '../Utilities/Helpers/StyledColumnGradientHelper';
+import { clamp } from '../Utilities/Extensions/NumberExtensions';
+import { getRuleAlertProperties } from '../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
+import { isNegativeZeroCentredBand, expandGradientCellRanges, gradientStyleRangeLookupValueType, DEFAULT_GRADIENT_MIN_ALPHA, DEFAULT_GRADIENT_MAX_ALPHA, } from '../Utilities/Helpers/StyledColumns/GradientStyleHelper';
 import { AdaptableNumberEditor, AdaptableReactNumberEditor } from './editors/AdaptableNumberEditor';
 import { AdaptableDateEditor, AdaptableReactDateEditor } from './editors/AdaptableDateEditor';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
@@ -25,8 +27,8 @@ import { AdaptableFilterHandler } from './AdaptableFilterHandler';
 import { AgGridFilterAdapterFactory } from './AgGridFilterAdapter';
 import { AgGridFloatingFilterAdapterFactory } from './AgGridFloatingFilterAdapter';
 import { errorOnce } from './AdaptableLogger';
-import { isUnsupportedColumnDataTypeForIconStyle } from '../Utilities/Helpers/iconStyledColumnColumnSupport';
-import { isParameterizedAggFuncName } from '../Aggregation/ParameterizedAggregationRegistry';
+import { isUnsupportedColumnDataTypeForIconStyle } from '../Utilities/Helpers/StyledColumns/IconStyleHelper';
+import { isWeightedAverageAggFuncName, } from '../AdaptableState/Common/AggregationColumns';
 /**
  * CSS property keys produced by `convertAdaptableStyleToCSS` from a
  * `CellFontStyle` slice. Used to strip Format-Column-derived font CSS
@@ -552,7 +554,7 @@ export class AgGridColumnAdapter {
             if (styledColumn && !styledColumn.IsSuspended) {
                 if (styledColumn.SparklineStyle) {
                     const sanitizedSparklineOptions = AdaptableHelper.removeAdaptableObjectPrimitives(styledColumn.SparklineStyle.options);
-                    const sparklineOptions = merge({}, userDefined?.sparklineOptions, sanitizedSparklineOptions);
+                    const sparklineOptions = resolveSparklineOptionsForRender(merge({}, userDefined?.sparklineOptions, sanitizedSparklineOptions));
                     return {
                         ...userDefined,
                         sparklineOptions,
@@ -571,8 +573,7 @@ export class AgGridColumnAdapter {
             // Icon Style has its own tooltip vocabulary (`'CellValue'` /
             // `'IconDescription'`) so we handle it before falling through to the
             // numeric tooltip branch.
-            if (styledColumn.IconStyle &&
-                !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType)) {
+            if (styledColumn.IconStyle && !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType)) {
                 const iconTokens = styledColumn.IconStyle.ToolTipText ?? [];
                 if (iconTokens.length === 0) {
                     return undefined;
@@ -610,7 +611,7 @@ export class AgGridColumnAdapter {
                     if (ratingToolTip.includes('PercentageValue') && ratingMax > 0) {
                         const n = Number(params.value);
                         if (!isNaN(n)) {
-                            const clamped = Helper.clamp(n, 0, ratingMax);
+                            const clamped = clamp(n, 0, ratingMax);
                             const percentageValue = (clamped / ratingMax) * 100;
                             const pct = `${percentageValue.toFixed(0)}%`;
                             returnValue = returnValue ? `${returnValue} (${pct})` : pct;
@@ -650,9 +651,7 @@ export class AgGridColumnAdapter {
                 if (textOptions.includes('CellValue')) {
                     returnValue = String(params.value ?? '');
                 }
-                if (textOptions.includes('PercentageValue') &&
-                    min != undefined &&
-                    max != undefined) {
+                if (textOptions.includes('PercentageValue') && min != undefined && max != undefined) {
                     let percentageValue;
                     if (styledColumn.PercentBarStyle?.ColumnComparison) {
                         const absMax = Math.abs(max);
@@ -660,9 +659,8 @@ export class AgGridColumnAdapter {
                     }
                     else {
                         const scaleSpan = max - min;
-                        const clamped = Helper.clamp(Number(params.value), min, max);
-                        percentageValue =
-                            scaleSpan === 0 ? 0 : ((clamped - min) / scaleSpan) * 100;
+                        const clamped = clamp(Number(params.value), min, max);
+                        percentageValue = scaleSpan === 0 ? 0 : ((clamped - min) / scaleSpan) * 100;
                     }
                     returnValue += ` (${percentageValue.toFixed(0)}%)`;
                 }
@@ -728,8 +726,7 @@ export class AgGridColumnAdapter {
             if (!abColumn.availableAggregationFunctions) {
                 return undefined;
             }
-            return abColumn.availableAggregationFunctions.filter((func) => !isParameterizedAggFuncName(func));
-            // .filter((func) => func !== ONLY_AGG_FN_NAME);
+            return abColumn.availableAggregationFunctions.filter((func) => !isWeightedAverageAggFuncName(func));
         });
     }
     setupColumnType(columnSetupInfo) {
@@ -951,10 +948,7 @@ export class AgGridColumnAdapter {
                 // 1. evaluate EditOptions.isCellEditable if provided
                 if (this.adaptableApi.gridApi.internalApi.hasCellEditableAccordingToEditOptions()) {
                     const gridCell = this.adaptableApi.gridApi.getGridCellFromRowNode(params.node, params.column.getColId());
-                    const editOptionsEditability = this.adaptableApi.gridApi.internalApi.isCellEditableAccordingToEditOptions(gridCell, getOriginalColDefEditable());
-                    if (editOptionsEditability) {
-                        return editOptionsEditability;
-                    }
+                    return this.adaptableApi.gridApi.internalApi.isCellEditableAccordingToEditOptions(gridCell, getOriginalColDefEditable());
                 }
                 // 2. otherwise, fallback to colDef.editable
                 return getOriginalColDefEditable();
@@ -1433,11 +1427,11 @@ export class AgGridColumnAdapter {
             }
             const minAlphaBound = gradientStyle.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
             const maxAlphaBound = gradientStyle.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
-            const lo = Math.min(Helper.clamp(minAlphaBound, 0, 1), Helper.clamp(maxAlphaBound, 0, 1));
-            const hi = Math.max(Helper.clamp(minAlphaBound, 0, 1), Helper.clamp(maxAlphaBound, 0, 1));
+            const lo = Math.min(clamp(minAlphaBound, 0, 1), clamp(maxAlphaBound, 0, 1));
+            const hi = Math.max(clamp(minAlphaBound, 0, 1), clamp(maxAlphaBound, 0, 1));
             const span = Math.abs(max - min);
             let t = span === 0 ? 0.5 : (Number(colValue) - min) / span;
-            t = Helper.clamp(t, 0, 1);
+            t = clamp(t, 0, 1);
             if (reverseGradient) {
                 t = 1 - t;
             }
@@ -1448,11 +1442,12 @@ export class AgGridColumnAdapter {
                 const bg = tinycolor(preparedColor).setAlpha(alpha);
                 style.backgroundColor = bg.toRgbString();
                 if (gradientStyle.AutoContrastText) {
-                    style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+                    style.color = getAutoContrastTextColor(preparedColor, alpha);
                 }
             }
         }
-        if (styledColumn.PercentBarStyle && styledColumn.PercentBarStyle.CellText) {
+        if (styledColumn.PercentBarStyle &&
+            hasBarStyleCellTextConfigured(styledColumn.PercentBarStyle.CellTextProperties)) {
             style.paddingTop = 0;
             style.paddingBottom = 0;
         }
@@ -1466,8 +1461,7 @@ export class AgGridColumnAdapter {
         // basis when a Gradient cell has a tinted background, even if the user
         // also set `Font.ForeColor` as a baseline.
         const autoContrastColor = gradientStyle?.AutoContrastText && style.color ? style.color : undefined;
-        const iconStyleFontApplies = styledColumn.IconStyle &&
-            !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType);
+        const iconStyleFontApplies = styledColumn.IconStyle && !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType);
         const fontSlot = styledColumn.GradientStyle?.Font ??
             styledColumn.PercentBarStyle?.Font ??
             styledColumn.BulletChartStyle?.Font ??
@@ -1479,8 +1473,7 @@ export class AgGridColumnAdapter {
         if (fontSlot) {
             style = { ...style, ...convertAdaptableStyleToCSS(fontSlot) };
         }
-        const iconStyleCellApplies = styledColumn.IconStyle &&
-            !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType);
+        const iconStyleCellApplies = styledColumn.IconStyle && !isUnsupportedColumnDataTypeForIconStyle(abColumn.dataType);
         const cellSlot = styledColumn.RatingStyle?.Cell ??
             styledColumn.SparklineStyle?.Cell ??
             styledColumn.BadgeStyle?.Cell ??

package/src/agGrid/AgGridExportAdapter.js

@@ -5,7 +5,7 @@ import { createUuid } from '../AdaptableState/Uuid';
 import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../Utilities/Constants/GeneralConstants';
 import { ExportModuleId } from '../Utilities/Constants/ModuleConstants';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
-import FormatHelper, { DateFormatter } from '../Utilities/Helpers/FormatHelper';
+import FormatHelper, { DateFormatter } from '../Utilities/Helpers/DisplayFormatHelper';
 import { convertCSSAbsoluteFontSizeToPt, getVariableColor, sanitizeStyle, } from '../Utilities/Helpers/StyleHelper';
 import { waitForTimeout } from '../Utilities/waitForTimeout';
 export class AgGridExportAdapter {

package/src/agGrid/AgGridFilterAdapter.js

@@ -38,10 +38,12 @@ export const AgGridFilterAdapterFactory = (adaptable) => {
             const columnId = this.column.getColId();
             let column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
             if (column) {
+                const isFiltersToolPanel = typeof params?.hidePopup !== 'function';
+                const location = isFiltersToolPanel ? 'filtersToolPanel' : 'columnMenu';
                 this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(AdaptableColumnFilter, {
                     columnId,
                     wrapperProps: { className: 'twa:p-2' },
-                    location: 'columnMenu',
+                    location,
                 }), adaptable), this.filterContainer);
             }
         }

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -9,7 +9,6 @@ export declare class AgGridMenuAdapter {
     private get adaptableApi();
     destroy(): void;
     buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (DefaultMenuItem | MenuItemDef)[];
-    private injectParameterizedAggregationColumnMenuItems;
     buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (DefaultMenuItem | MenuItemDef)[];
     private mapAgGridItemTypeToAgGridMenuItem;
     private removeConsecutiveSeparators;

package/src/agGrid/AgGridMenuAdapter.js

@@ -2,8 +2,133 @@ 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';
+import { getAggFuncName, getDisplayAggFuncNames, isWeightedAverageAggregation, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../AdaptableState/Common/AggregationColumns';
+/**
+ * Creates an AG Grid icon element for the given icon name.
+ *
+ * Mimics AG Grid's internal icon creation, producing a
+ * `<span class="ag-icon ag-icon-{name}" role="presentation" unselectable="on">`
+ * so the icon picks up AG Grid's own icon font/theme styling.
+ *
+ * @see https://github.com/ag-grid/ag-grid/blob/5ca14e73188f6f52fd7d545d595c067bf1b72168/packages/ag-grid-community/src/utils/icon.ts#L139
+ */
+function createAgGridIcon(name) {
+    const element = document.createElement('span');
+    element.className = `ag-icon ag-icon-${name}`;
+    element.setAttribute('role', 'presentation');
+    element.setAttribute('unselectable', 'on');
+    return element;
+}
+const toFuncLabel = (funcName) => {
+    if (funcName === 'avg') {
+        return 'Average';
+    }
+    if (funcName === 'weightedAvg') {
+        return 'Weighted Average';
+    }
+    return funcName ? funcName.charAt(0).toUpperCase() + funcName.slice(1) : funcName;
+};
+/**
+ * Builds the replacement for AG Grid's built-in `valueAggSubMenu` column menu item.
+ *
+ * AG Grid does not allow customizing the built-in submenu, so we rebuild an
+ * equivalent one: the column's existing aggregation functions plus a
+ * `Weighted Average` item whose submenu lists the numeric columns that can be
+ * used as the weight parameter.
+ *
+ * Both standard and weighted selections persist through the current Layout
+ * (`updateCurrentLayout`), so the existing `weightedAvg` aggFunc can read the
+ * chosen `weightedColumnId` back from the Layout.
+ *
+ * Weighted Average is never used in Pivot Layouts, so this only deals with the
+ * Table Layout aggregations and the caller skips it entirely in Pivot mode.
+ */
+function buildValueAggregationMenuItem(adaptableApi, menuContext) {
+    const column = menuContext.adaptableColumn;
+    const columnId = column.columnId;
+    const currentLayout = adaptableApi.layoutApi.getCurrentLayout();
+    const aggregationColumns = currentLayout.TableAggregationColumns || [];
+    const currentAggFunc = aggregationColumns.find((agg) => agg.ColumnId === columnId)?.AggFunc;
+    let activeAggFuncName;
+    if (currentAggFunc != null) {
+        const aggFuncName = getAggFuncName(currentAggFunc);
+        activeAggFuncName = aggFuncName === true ? column.aggregationFunction : aggFuncName;
+    }
+    const activeWeightColumnId = isWeightedAverageAggregation(currentAggFunc)
+        ? currentAggFunc.weightedColumnId
+        : undefined;
+    const applyAggregation = (aggFuncValue) => {
+        const upsert = (cols) => {
+            const list = cols ? [...cols] : [];
+            const index = list.findIndex((col) => col.ColumnId === columnId);
+            if (index >= 0) {
+                list[index] = { ...list[index], AggFunc: aggFuncValue };
+            }
+            else {
+                list.push({ ColumnId: columnId, AggFunc: aggFuncValue });
+            }
+            return list;
+        };
+        adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+            const tableLayout = layout;
+            return {
+                ...tableLayout,
+                TableAggregationColumns: upsert(tableLayout.TableAggregationColumns),
+            };
+        });
+    };
+    const removeAggregation = () => {
+        adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+            const tableLayout = layout;
+            return {
+                ...tableLayout,
+                TableAggregationColumns: (tableLayout.TableAggregationColumns || []).filter((col) => col.ColumnId !== columnId),
+            };
+        });
+    };
+    // 'None' clears any aggregation for the column and is checked when none is set
+    const subMenu = [
+        {
+            name: 'None',
+            checked: activeAggFuncName == null,
+            action: () => removeAggregation(),
+        },
+    ];
+    // getDisplayAggFuncNames already positions weightedAvg right after 'avg'
+    // (and only includes it when the column is eligible)
+    const aggFuncItems = getDisplayAggFuncNames(column).map((funcName) => {
+        // Weighted Average needs a weight column parameter, so instead of a plain
+        // action it gets a submenu listing the numeric columns usable as the weight.
+        if (funcName === WEIGHTED_AVERAGE_AGG_FN_NAME) {
+            const weightColumnItems = adaptableApi.columnApi
+                .getNumericColumns()
+                .filter((numericColumn) => numericColumn.columnId !== columnId)
+                .map((numericColumn) => ({
+                name: numericColumn.friendlyName ?? numericColumn.columnId,
+                checked: activeWeightColumnId === numericColumn.columnId,
+                action: () => applyAggregation({
+                    type: 'weightedAverage',
+                    weightedColumnId: numericColumn.columnId,
+                }),
+            }));
+            return {
+                name: 'Weighted Average',
+                checked: activeAggFuncName === WEIGHTED_AVERAGE_AGG_FN_NAME,
+                subMenu: weightColumnItems,
+            };
+        }
+        return {
+            name: toFuncLabel(funcName),
+            checked: activeAggFuncName === funcName,
+            action: () => applyAggregation(funcName),
+        };
+    });
+    subMenu.push(...aggFuncItems);
+    return {
+        name: 'Value Aggregation',
+        subMenu,
+    };
+}
 export class AgGridMenuAdapter {
     _adaptableInstance;
     constructor(_adaptableInstance) {
@@ -55,42 +180,25 @@ export class AgGridMenuAdapter {
                 .filter(Boolean);
         }
         // 2. if not, return the default context menu
-        let defaultContextMenu = [
-            ...agGridMenuItems,
+        // AG Grid does not allow customizing the built-in `valueAggSubMenu`, so we
+        // replace it with an Adaptable-built equivalent that also offers a Weighted
+        // Average aggregation (with a submenu to pick the weight column).
+        // Weighted Average is never used in Pivot Layouts, so we leave the AG Grid
+        // default item untouched there.
+        const isPivotLayout = this.adaptableApi.layoutApi.isCurrentLayoutPivot();
+        const mappedAgGridMenuItems = agGridMenuItems.map((itemName) => itemName === 'valueAggSubMenu' && !isPivotLayout
+            ? {
+                ...buildValueAggregationMenuItem(this.adaptableApi, menuContext),
+                icon: createAgGridIcon('aggregation'),
+            }
+            : itemName);
+        const defaultContextMenu = [
+            ...mappedAgGridMenuItems,
             '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 [];
@@ -269,7 +377,7 @@ export class AgGridMenuAdapter {
                     ? () => this.adaptableApi.internalApi.dispatchReduxAction(fullMenuItem.reduxAction)
                     : undefined,
             icon: this.mapAdaptableIconToAgGridIcon(fullMenuItem.icon, {
-                fill: 'var(--ab-color-text-on-primary)',
+                fill: 'var(--ab-color-primary-foreground)',
             }),
             subMenu: fullMenuItem.subItems?.map((subMenuItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(subMenuItem)),
         };
@@ -282,7 +390,7 @@ export class AgGridMenuAdapter {
             return {
                 name: customMenuItem.label,
                 icon: this.mapAdaptableIconToAgGridIcon(customMenuItem.icon, {
-                    fill: 'var(--ab-color-text-on-primary)',
+                    fill: 'var(--ab-color-primary-foreground)',
                 }),
                 disabled: customMenuItem.disabled,
                 subMenu: !customMenuItem.disabled
@@ -310,7 +418,7 @@ export class AgGridMenuAdapter {
             name: userMenuItem.label,
             action: () => (userMenuItem.onClick ? userMenuItem.onClick(menuContext) : null),
             icon: this.mapAdaptableIconToAgGridIcon(userMenuItem.icon, {
-                fill: 'var(--ab-color-text-on-primary)',
+                fill: 'var(--ab-color-primary-foreground)',
             }),
             disabled: userMenuItem.disabled,
             subMenu: userMenuItem.subMenuItems
@@ -735,7 +843,7 @@ export class AgGridMenuAdapter {
         }
         else {
             return iconToString(icon, {
-                fill: 'var(--ab-color-text-on-primary)',
+                fill: 'var(--ab-color-primary-foreground)',
             });
         }
     }

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import DropdownButton from '../../components/DropdownButton';
+import { NewDropdownButton } from '../../components/DropdownButton';
 import * as React from 'react';
 import { IconComponent } from '../../components/Icon';
 import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../../View/Components/AdaptableButton';
@@ -13,10 +13,7 @@ function getActionColumnButtonProps(button, index, adaptableApi, context, rerend
     }
     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}`;
+    const identifier = button.label ?? button.icon?.name ?? button.tooltip ?? `${index + 1}`;
     return {
         button,
         buttonLabel,
@@ -52,7 +49,7 @@ const ActionColumnDropdown = (props) => {
         });
         return {
             label: buttonLabel || buttonTooltip,
-            icon: menuIcon ? (_jsx(IconComponent, { icon: menuIcon })) : undefined,
+            icon: menuIcon ? _jsx(IconComponent, { icon: menuIcon }) : undefined,
             disabled,
             onClick: () => {
                 actionButton.onClick?.(actionButton, context);
@@ -64,7 +61,7 @@ const ActionColumnDropdown = (props) => {
     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 }));
+    return (_jsx(NewDropdownButton, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, accessLevel: ACCESS_LEVEL_FULL, children: dropdownLabel }));
 };
 const ActionColumnCellContent = (props) => {
     const { buttons, actionColumn, adaptableApi, context, rerender } = props;

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -1,7 +1,7 @@
 import { Badge } from '../../View/Components/Badge';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import * as React from 'react';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const OVERFLOW_CLASS = {
     Truncate: 'ab-Badge__wrapper--truncate',
     Wrap: 'ab-Badge__wrapper--wrap',
@@ -83,7 +83,9 @@ export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                     ...adaptableApi.internalApi.buildBaseContext(),
                 };
                 const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
-                const formattedValue = badge?.IconOnly ? '' : params.formatValue?.(value) ?? value ?? '';
+                const formattedValue = badge?.IconProperties?.IconOnly
+                    ? ''
+                    : params.formatValue?.(value) ?? value ?? '';
                 const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
                 if (!isNullValue) {
                     const config = { value: formattedValue };
@@ -113,7 +115,7 @@ export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
-            if (badge.IconOnly) {
+            if (badge.IconProperties?.IconOnly) {
                 formattedValue = '';
             }
             this.renderBadges([
@@ -137,11 +139,11 @@ export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                     key: index,
                     pillStyle: badge.PillStyle,
                     children: value,
-                    icon: badge.Icon,
-                    iconPosition: badge.IconPosition ?? 'start',
+                    icon: badge.IconProperties?.Icon,
+                    iconPosition: badge.IconProperties?.Position ?? 'start',
                     shape: badge.Shape,
                     density: badgeStyle.Density ?? 'Normal',
-                    iconGap: badge.IconGap,
+                    iconGap: badge.IconProperties?.Gap,
                 });
             });
             this.unmountReactRoot = api.internalApi

package/src/agGrid/cellRenderers/BulletChartRenderer.js

@@ -1,6 +1,7 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_BAR_HEIGHT = 8;
 const DEFAULT_BAND_HEIGHT = 14;
@@ -52,19 +53,18 @@ const normaliseMarker = (override, base) => {
     };
 };
 const resolveTargets = (bulletStyle, styledColumn, abColumn, rowNode, api) => {
-    if (bulletStyle.Target == undefined) {
+    const targetSpec = bulletStyle.TargetProperties?.Target;
+    if (targetSpec == undefined) {
         return [];
     }
-    const targets = Array.isArray(bulletStyle.Target)
-        ? bulletStyle.Target
-        : [bulletStyle.Target];
+    const targets = Array.isArray(targetSpec) ? targetSpec : [targetSpec];
     const resolved = [];
     for (const target of targets) {
         const value = resolveTargetValue(target, styledColumn, abColumn, rowNode, api);
         if (value == undefined || isNaN(value)) {
             continue;
         }
-        const marker = normaliseMarker(isTargetDefinition(target) ? target.Marker : undefined, bulletStyle.TargetMarker);
+        const marker = normaliseMarker(isTargetDefinition(target) ? target.Marker : undefined, bulletStyle.TargetProperties?.Marker);
         resolved.push({
             value,
             marker,
@@ -152,10 +152,10 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
             // `BarThickness` is the bar's *short* axis (height in horizontal,
             // width in vertical). `BandThickness` is the matching short-axis
             // size of the surrounding bands.
-            const barThickness = bulletStyle.BarHeight ?? DEFAULT_BAR_HEIGHT;
+            const barThickness = bulletStyle.Bar?.Height ?? DEFAULT_BAR_HEIGHT;
             const bandThickness = Math.max(barThickness + 6, DEFAULT_BAND_HEIGHT);
-            const hasCellText = bulletStyle.CellText && bulletStyle.CellText.length > 0;
-            const isTextMerged = bulletStyle.CellTextPosition === 'Merged';
+            const cellTextProperties = bulletStyle.CellTextProperties;
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
             // Map a 0..1 value fraction onto the long-axis viewBox (0..100).
             // In horizontal: 0 -> left, 1 -> right.
             // In vertical:   0 -> bottom, 1 -> top (SVG y origin is at the top so
@@ -172,7 +172,7 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
             this.eGui.style.alignItems = isVertical ? 'center' : 'stretch';
             this.eGui.style.justifyContent = 'center';
             this.eGui.style.position = 'relative';
-            this.eGui.style.height = hasCellText && !isTextMerged ? '80%' : '100%';
+            this.eGui.style.height = '100%';
             // SVG chart - we let `preserveAspectRatio="none"` stretch the long axis
             // (viewBox 0..100) to fill the cell while the short axis stays fixed
             // in pixels.
@@ -243,7 +243,7 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
             const barCrossOffset = (bandThickness - barThickness) / 2;
             const bar = document.createElementNS(SVG_NS, 'rect');
             setRectAxes(bar, Math.min(valueCoord, originCoord), Math.abs(valueCoord - originCoord), barCrossOffset, barThickness);
-            bar.setAttribute('fill', bulletStyle.BarColor ?? DEFAULT_BAR_COLOR);
+            bar.setAttribute('fill', bulletStyle.Bar?.Color ?? DEFAULT_BAR_COLOR);
             bar.setAttribute('class', 'ab-BulletChart__bar');
             svg.appendChild(bar);
             // Target markers
@@ -255,39 +255,40 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
                     svg.appendChild(marker);
                 }
             }
-            this.eGui.appendChild(svg);
+            // Wrap the SVG in a positioned container so a `Merged` text row can
+            // be absolute-positioned to the centre of the *bar* (matching Percent
+            // Bar's behaviour) instead of falling through to the wrapper centre,
+            // which would otherwise overlap an `Above` / `Below` band.
+            const svgContainer = document.createElement('div');
+            svgContainer.style.position = 'relative';
+            svgContainer.style.display = 'flex';
+            svgContainer.style.alignItems = 'center';
+            svgContainer.style.justifyContent = 'center';
+            // Horizontal: take the SVG's natural (bandThickness) height.
+            // Vertical: stretch to fill the wrapper so the SVG's `height: 100%`
+            // resolves against a real size.
+            if (isVertical) {
+                svgContainer.style.flex = '1 1 auto';
+                svgContainer.style.minHeight = '0';
+            }
+            else {
+                svgContainer.style.flex = '0 0 auto';
+            }
+            svgContainer.appendChild(svg);
+            this.eGui.appendChild(svgContainer);
             if (hasCellText) {
-                const textEl = document.createElement('div');
-                textEl.className = 'ab-BulletChart__text';
-                textEl.style.lineHeight = '1.2';
-                const parts = [];
-                if (bulletStyle.CellText.includes('CellValue')) {
-                    parts.push(params.formatValue?.(cellValue) ?? String(cellValue));
-                }
-                if (bulletStyle.CellText.includes('PercentageValue')) {
-                    parts.push(`${(valueFraction * 100).toFixed(0)}%`);
-                }
-                textEl.innerText = parts.join(' ');
-                switch (bulletStyle.CellTextPosition) {
-                    case 'Above':
-                        this.eGui.prepend(textEl);
-                        break;
-                    case 'Merged':
-                        textEl.style.position = 'absolute';
-                        textEl.style.top = '50%';
-                        textEl.style.transform = 'translateY(-50%)';
-                        textEl.style.left = '0';
-                        textEl.style.right = '0';
-                        textEl.style.paddingLeft = '5px';
-                        textEl.style.paddingRight = '5px';
-                        textEl.style.pointerEvents = 'none';
-                        this.eGui.appendChild(textEl);
-                        break;
-                    case 'Below':
-                    default:
-                        this.eGui.appendChild(textEl);
-                        break;
-                }
+                // See PercentBarRenderer: `params.formatValue` on a column without a
+                // `valueFormatter` returns the raw value (a number here), so coerce
+                // to string before it flows into the helpers.
+                const formattedCellValue = String(params.formatValue?.(cellValue) ?? cellValue);
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${(valueFraction * 100).toFixed(0)}%`);
+                mountBarStyleCellText({
+                    wrapperEl: this.eGui,
+                    mergedOverlayEl: svgContainer,
+                    textClassName: 'ab-BulletChart__text',
+                    cellTextProperties,
+                    labels,
+                });
             }
         }
         getGui() {