@adaptabletools/adaptable 23.0.0-canary.7 → 23.0.0-canary.9

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() {

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

@@ -1,4 +1,5 @@
-import { IconStyle, IconStyleMapping, StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { IconStyle, IconStyleMapping } from '../../AdaptableState/StyledColumns/IconStyle';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
 /**

package/src/agGrid/cellRenderers/IconRenderer.js

@@ -2,9 +2,8 @@ import * as React from 'react';
 import { IconComponent, isAdaptableSystemIcon, isAdaptableCustomIcon, isAdaptableElementIcon, } from '../../components/Icon';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import Helper from '../../Utilities/Helpers/Helper';
-import { getIconStylePresetMappings } from '../../Utilities/Helpers/IconStylePresets';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
-import { isUnsupportedColumnDataTypeForIconStyle } from '../../Utilities/Helpers/iconStyledColumnColumnSupport';
+import { getIconStylePresetMappings, isUnsupportedColumnDataTypeForIconStyle, } from '../../Utilities/Helpers/StyledColumns/IconStyleHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 import { errorOnce } from '../AdaptableLogger';
 const DEFAULT_SIZE = 18;
 const DEFAULT_GAP = 4;
@@ -193,7 +192,9 @@ export const getIconRendererForColumn = (styledColumn, abColumn, api) => {
     const iconStyle = styledColumn.IconStyle;
     const size = iconStyle.Size ?? DEFAULT_SIZE;
     const gap = iconStyle.Gap ?? DEFAULT_GAP;
-    const textPosition = iconStyle.CellTextPosition ?? 'After';
+    const cellTextProperties = iconStyle.CellTextProperties;
+    const textPosition = cellTextProperties?.CellTextPosition ?? 'After';
+    const cellTextTokens = cellTextProperties?.CellText ?? [];
     const matchMode = iconStyle.MatchMode ?? 'Exact';
     // Resolve once at column-setup time. Cheap; recomputed when the column
     // is reconfigured (which is when this factory is re-invoked anyway).
@@ -230,16 +231,15 @@ export const getIconRendererForColumn = (styledColumn, abColumn, api) => {
             const formatted = params.formatValue?.(cellValue) ??
                 (cellValue != undefined ? String(cellValue) : '');
             // `CellText` describes the *companion text alongside a matched icon*.
-            // `Fallback` describes *what to do when no mapping matches*. They are
-            // independent: when there is no match, `Fallback` decides on its own
-            // — `CellText` does not get to override `Fallback: 'Hide'`.
+            // `FallbackProperties.Mode` describes *what to do when no mapping matches*.
+            // They are independent: when there is no match, the fallback decides
+            // on its own — `CellText` does not get to override `Mode: 'Hide'`.
             let iconSpec;
             let text;
             let descriptionForTooltip;
             if (matched) {
                 iconSpec = matched.Icon;
                 descriptionForTooltip = matched.Description;
-                const cellTextTokens = iconStyle.CellText ?? [];
                 const textParts = [];
                 if (cellTextTokens.includes('CellValue') && formatted) {
                     textParts.push(formatted);
@@ -250,17 +250,18 @@ export const getIconRendererForColumn = (styledColumn, abColumn, api) => {
                 text = textParts.length > 0 ? textParts.join(' · ') : undefined;
             }
             else if (!cellValueIsEmpty) {
-                // Unmatched, non-empty cell: defer entirely to `Fallback`.
-                const fallback = iconStyle.Fallback ?? 'Hide';
-                if (fallback === 'ShowText') {
+                // Unmatched, non-empty cell: defer entirely to the fallback config.
+                const fallbackMode = iconStyle.FallbackProperties?.Mode ?? 'Hide';
+                const fallbackIcon = iconStyle.FallbackProperties?.Icon;
+                if (fallbackMode === 'ShowText') {
                     text = formatted || undefined;
                 }
-                else if (fallback === 'Icon' && iconStyle.FallbackIcon) {
-                    iconSpec = iconStyle.FallbackIcon;
+                else if (fallbackMode === 'Icon' && fallbackIcon) {
+                    iconSpec = fallbackIcon;
                 }
                 // 'Hide' (and the unsupported permutations) render nothing.
             }
-            // else: empty cell → render nothing, regardless of `Fallback`.
+            // else: empty cell → render nothing, regardless of fallback config.
             // If we have nothing to draw, leave the cell empty (and skip mounting
             // a React root for this row).
             if (!iconSpec && !text) {

package/src/agGrid/cellRenderers/PercentBarRenderer.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 { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 /**
  * Resolve the origin value (in the same numeric space as `min`/`max`) the bar
  * should grow from.
@@ -41,58 +42,6 @@ const columnComparisonUsesCentredAxis = (origin) => {
     }
     return o === 'Zero' || o === 'Auto';
 };
-/**
- * Linear (non-comparison) mode: bar grows from an interior point of the scale
- * (so positives / negatives can diverge left and right).
- */
-const linearScaleUsesCentredAxis = (percentBarStyle, cellValue, min, max) => {
-    const origin = percentBarStyle.Origin ?? 'Auto';
-    if (origin === 'Zero') {
-        return true;
-    }
-    if (origin === 'Min') {
-        return false;
-    }
-    if (typeof origin === 'number') {
-        if (max === min) {
-            return false;
-        }
-        const f = toFraction(origin, min, max);
-        return f > 0 && f < 1;
-    }
-    // Auto — same condition as resolveOrigin using 0 as the pivot.
-    return min < 0 || max < 0 || cellValue < 0;
-};
-const resolveCellTextAlignCss = (percentBarStyle, args) => {
-    const mode = percentBarStyle.CellTextAlignment;
-    if (mode == undefined) {
-        return undefined;
-    }
-    if (mode === 'Left') {
-        return 'left';
-    }
-    if (mode === 'Right') {
-        return 'right';
-    }
-    if (mode === 'Center') {
-        return 'center';
-    }
-    // Auto
-    const centred = args.hasColumnComparison
-        ? columnComparisonUsesCentredAxis(percentBarStyle.Origin)
-        : linearScaleUsesCentredAxis(percentBarStyle, args.numericValue, args.min, args.max);
-    if (!centred) {
-        return undefined;
-    }
-    const v = args.hasColumnComparison ? args.percentageValue : args.numericValue;
-    if (v > 0) {
-        return 'right';
-    }
-    if (v < 0) {
-        return 'left';
-    }
-    return 'center';
-};
 export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.PercentBarStyle) {
         return;
@@ -191,11 +140,14 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 }
             }
             // ----- Build the DOM -------------------------------------------------
-            const hasCellText = percentBarStyle.CellText && percentBarStyle.CellText.length > 0;
-            const isTextPositionMerged = percentBarStyle.CellTextPosition === 'Merged';
+            const cellTextProperties = percentBarStyle.CellTextProperties;
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
+            // Wrapper always fills the cell. The bar is the flex-grow child so it
+            // claims whatever space the (compact) text rows leave, with a small
+            // floor to stay visible even on short rows.
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-PercentBar__wrapper';
-            this.eGui.style.height = hasCellText && !isTextPositionMerged ? '80%' : '100%';
+            this.eGui.style.height = '100%';
             this.eGui.style.display = 'flex';
             this.eGui.style.flexDirection = 'column';
             this.eGui.style.justifyContent = 'center';
@@ -208,7 +160,10 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             if (percentBarStyle.BackColor) {
                 barEl.style.background = percentBarStyle.BackColor;
             }
-            barEl.style.flex = '1';
+            barEl.style.flex = '1 1 0';
+            // Floor so the bar can't be squeezed out of existence when both
+            // `Above` and `Below` bands are populated on a short row.
+            barEl.style.minHeight = '6px';
             // Render the inside bar whenever a colour has been resolved, even at
             // 0% width. A zero-width div is visually identical to skipping the
             // element but keeps the DOM consistent so tests / tooling can still
@@ -229,47 +184,20 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             }
             this.eGui.append(barEl);
             if (hasCellText) {
-                const textEl = document.createElement('div');
-                textEl.className = 'ab-PercentBar__text';
-                textEl.style.lineHeight = '1.2';
-                const parts = [];
-                if (percentBarStyle.CellText.includes('CellValue')) {
-                    parts.push(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
-                }
-                if (percentBarStyle.CellText.includes('PercentageValue')) {
-                    parts.push(`${percentageValue.toFixed(0)}%`);
-                }
-                textEl.innerText = parts.join(' ');
-                const textAlignCss = resolveCellTextAlignCss(percentBarStyle, {
-                    numericValue,
-                    percentageValue,
-                    min,
-                    max,
-                    hasColumnComparison: !!percentBarStyle.ColumnComparison,
+                // Coerce to string: when no `valueFormatter` is set on the column,
+                // `params.formatValue` returns the raw value (a number for numeric
+                // columns), which then propagates through the helpers as a non-string
+                // and breaks string-only operations (e.g. `.length` checks).
+                const formattedCellValue = String(params.formatValue?.(rawCellValue) ?? rawCellValue);
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${percentageValue.toFixed(0)}%`);
+                mountBarStyleCellText({
+                    wrapperEl: this.eGui,
+                    mergedOverlayEl: barEl,
+                    textClassName: 'ab-PercentBar__text',
+                    cellTextProperties,
+                    labels,
+                    mergedPointerEventsNone: false,
                 });
-                if (textAlignCss) {
-                    textEl.style.textAlign = textAlignCss;
-                }
-                switch (percentBarStyle.CellTextPosition) {
-                    case 'Above':
-                        this.eGui.prepend(textEl);
-                        break;
-                    case 'Merged':
-                        textEl.style.position = 'absolute';
-                        // Centre vertically without knowing the row height
-                        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';
-                        barEl.append(textEl);
-                        break;
-                    case 'Below':
-                    default:
-                        this.eGui.append(textEl);
-                        break;
-                }
             }
         }
         getGui() {

package/src/agGrid/cellRenderers/RangeBarRenderer.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_TRACK_HEIGHT = 4;
 const DEFAULT_BAND_HEIGHT = 14;
@@ -46,8 +47,7 @@ const normaliseMarker = (override, defaults) => {
     return {
         Shape: shape,
         Color: override?.Color ?? defaults.Color,
-        Size: override?.Size ??
-            (shape === 'Line' ? DEFAULT_LINE_MARKER_THICKNESS : defaults.Size),
+        Size: override?.Size ?? (shape === 'Line' ? DEFAULT_LINE_MARKER_THICKNESS : defaults.Size),
     };
 };
 /**
@@ -96,8 +96,9 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.append(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
                 return;
             }
-            const referenceValue = rangeStyle.Reference != undefined
-                ? resolveBoundValue(rangeStyle.Reference, abColumn, params.node, api)
+            const referenceProperties = rangeStyle.Reference;
+            const referenceValue = referenceProperties?.Value != undefined
+                ? resolveBoundValue(referenceProperties.Value, abColumn, params.node, api)
                 : undefined;
             // Markers - resolve user overrides against per-marker defaults.
             const valueMarker = normaliseMarker(rangeStyle.Marker, {
@@ -105,21 +106,24 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                 Color: DEFAULT_VALUE_MARKER_COLOR,
                 Size: DEFAULT_VALUE_MARKER_SIZE,
             });
-            const referenceMarker = normaliseMarker(rangeStyle.ReferenceMarker, {
+            const referenceMarker = normaliseMarker(referenceProperties?.Marker, {
                 Shape: 'Line',
                 Color: DEFAULT_REFERENCE_MARKER_COLOR,
                 Size: DEFAULT_LINE_MARKER_THICKNESS,
             });
             // Out-of-range handling
-            const outOfRangeMode = rangeStyle.OutOfRangeMode ?? 'Clamp';
+            const outOfRangeProperties = rangeStyle.OutOfRange;
+            const outOfRangeMode = outOfRangeProperties?.Mode ?? 'Clamp';
+            const outOfRangeColor = outOfRangeProperties?.Color;
             const isOutOfRange = numericValue < min || numericValue > max;
             const hideValueMarker = isOutOfRange && outOfRangeMode === 'Hide';
             // Layout
             const isVertical = rangeStyle.Orientation === 'Vertical';
-            const trackThickness = rangeStyle.TrackHeight ?? DEFAULT_TRACK_HEIGHT;
+            const trackProperties = rangeStyle.Track;
+            const trackThickness = trackProperties?.Height ?? DEFAULT_TRACK_HEIGHT;
             const bandThickness = Math.max(trackThickness + 6, DEFAULT_BAND_HEIGHT);
-            const hasCellText = rangeStyle.CellText && rangeStyle.CellText.length > 0;
-            const isTextMerged = rangeStyle.CellTextPosition === 'Merged';
+            const cellTextProperties = rangeStyle.CellTextProperties;
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
             // Map a 0..1 fraction onto the long-axis viewBox (0..100). Vertical
             // orientation inverts so that lower values appear at the bottom of
             // the cell, matching user expectation.
@@ -132,7 +136,7 @@ export const getRangeBarRendererForColumn = (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%';
             const svg = document.createElementNS(SVG_NS, 'svg');
             svg.setAttribute('class', 'ab-RangeBar__svg');
             svg.setAttribute('preserveAspectRatio', 'none');
@@ -191,11 +195,11 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
             const trackCrossOffset = (bandThickness - trackThickness) / 2;
             const track = document.createElementNS(SVG_NS, 'rect');
             setRectAxes(track, 0, 100, trackCrossOffset, trackThickness);
-            track.setAttribute('fill', rangeStyle.TrackColor ?? DEFAULT_TRACK_COLOR);
+            track.setAttribute('fill', trackProperties?.Color ?? DEFAULT_TRACK_COLOR);
             track.setAttribute('class', 'ab-RangeBar__track');
             // Slight transparency by default so the track doesn't drown out the
-            // band colours; honour explicit user TrackColor as-is.
-            if (rangeStyle.TrackColor == undefined) {
+            // band colours; honour explicit user Track.Color as-is.
+            if (trackProperties?.Color == undefined) {
                 // With no bands the cell background is often plain — the same muted
                 // foreground at 0.35 opacity can disappear (only the accent marker reads).
                 // Bands provide contrast underneath, so keep the subtle blend there.
@@ -224,8 +228,8 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                     valueFraction = toFraction(numericValue, min, max);
                 }
                 const valueCoord = valueAxisCoord(valueFraction);
-                const effectiveMarker = isOutOfRange && outOfRangeMode === 'Clamp' && rangeStyle.OutOfRangeColor
-                    ? { ...valueMarker, Color: rangeStyle.OutOfRangeColor }
+                const effectiveMarker = isOutOfRange && outOfRangeMode === 'Clamp' && outOfRangeColor
+                    ? { ...valueMarker, Color: outOfRangeColor }
                     : valueMarker;
                 const markerEl = createMarkerElement(effectiveMarker, valueCoord, bandThickness, isVertical);
                 if (markerEl) {
@@ -233,40 +237,38 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                     svg.appendChild(markerEl);
                 }
             }
-            this.eGui.appendChild(svg);
+            // Wrap the SVG in a positioned container so a `Merged` text row sits
+            // centred on the *bar*, not on the cell — see BulletChartRenderer for
+            // the same fix and Percent Bar for the matching behaviour via its
+            // `barEl`.
+            const svgContainer = document.createElement('div');
+            svgContainer.style.position = 'relative';
+            svgContainer.style.display = 'flex';
+            svgContainer.style.alignItems = 'center';
+            svgContainer.style.justifyContent = 'center';
+            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-RangeBar__text';
-                textEl.style.lineHeight = '1.2';
-                const parts = [];
-                if (rangeStyle.CellText.includes('CellValue')) {
-                    parts.push(params.formatValue?.(numericValue) ?? String(numericValue));
-                }
-                if (rangeStyle.CellText.includes('PercentageValue')) {
-                    const pct = clamp((numericValue - min) / (max - min), 0, 1) * 100;
-                    parts.push(`${pct.toFixed(0)}%`);
-                }
-                textEl.innerText = parts.join(' ');
-                switch (rangeStyle.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;
-                }
+                const pct = clamp((numericValue - min) / (max - min), 0, 1) * 100;
+                // 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?.(numericValue) ?? numericValue);
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${pct.toFixed(0)}%`);
+                mountBarStyleCellText({
+                    wrapperEl: this.eGui,
+                    mergedOverlayEl: svgContainer,
+                    textClassName: 'ab-RangeBar__text',
+                    cellTextProperties,
+                    labels,
+                });
             }
         }
         getGui() {

package/src/agGrid/cellRenderers/RatingRenderer.js

@@ -1,6 +1,6 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_MAX = 5;
 const DEFAULT_SIZE = 14;

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -3,7 +3,7 @@ import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableCon
 import { InternalAdaptableDateEditor, } from './InternalAdaptableDateEditor';
 import { KeyCode } from 'ag-grid-enterprise';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../../Utilities/Helpers/DisplayFormatHelper';
 function shouldClearExistingValue(params) {
     return params.eventKey === KeyCode.BACKSPACE || params.eventKey === KeyCode.DELETE;
 }

package/src/components/ColorPicker/ColorPicker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useCallback, useEffect } from 'react';
-import debounce from '../../Utilities/utils/debounce';
+import { debounce } from '../../Utilities/Helpers/TimingHelper';
 import { cn } from '../../lib/utils';
 import Input from '../Input';
 import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';

package/src/components/Datepicker/index.js

@@ -4,7 +4,7 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import useProperty from '../utils/useProperty';
 import SimpleButton from '../SimpleButton';
 import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
-import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../Utilities/Helpers/DisplayFormatHelper';
 import { useDatepickerContext } from './DatepickerContext';
 import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
 import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays, } from 'date-fns';

package/src/components/FormLayout/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { createContext, useContext } from 'react';
-import merge from '../../Utilities/utils/merge';
+import { merge } from '../../Utilities/Extensions/ObjectExtensions';
 import join from '../utils/join';
 import { Box } from '../Flex';
 const FormLayoutContext = createContext(null);