@adaptabletools/adaptable 23.0.0-canary.3 → 23.0.0-canary.5

package/src/Utilities/Helpers/StyledColumnGradientHelper.js

@@ -1,3 +1,7 @@
+import tinycolor from 'tinycolor2';
+import { convertAdaptableStyleToCSS } from './StyleHelper';
+import { getVariableColor } from './StyleHelper';
+import clamp from '../utils/clamp';
 /**
  * Default alpha at the **low** end of a Gradient range when `MinAlpha` is unset.
  * Slightly above zero so the bottom-edge value of every range still shows its
@@ -8,6 +12,206 @@ export const DEFAULT_GRADIENT_MIN_ALPHA = 0.15;
  * Default alpha at the **high** end of a Gradient range when `MaxAlpha` is unset.
  */
 export const DEFAULT_GRADIENT_MAX_ALPHA = 1;
+export const hasGradientRangesConfigured = (gs) => !!(gs?.ZeroCentred || gs?.CellRanges?.length || gs?.ColumnComparison);
+const evenlySpacedValues = (min, max, count) => {
+    if (count <= 1) {
+        return [min];
+    }
+    const step = (max - min) / (count - 1);
+    return Array.from({ length: count }, (_, i) => min + step * i);
+};
+/** Number of sample cells shown in Gradient / Percent Bar style previews. */
+export const STYLED_COLUMN_PREVIEW_SAMPLE_COUNT = 6;
+/** Illustrative zero-centred scale endpoints for preview geometry. */
+export const ZERO_CENTRED_PREVIEW_SCALE_MIN = -20;
+export const ZERO_CENTRED_PREVIEW_SCALE_MAX = 20;
+/** @deprecated Use {@link getZeroCentredGradientPreviewValues} — kept for callers using endpoints. */
+export const ZERO_CENTRED_GRADIENT_PREVIEW_VALUES = evenlySpacedValues(ZERO_CENTRED_PREVIEW_SCALE_MIN, ZERO_CENTRED_PREVIEW_SCALE_MAX, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+export const getZeroCentredGradientPreviewValues = () => evenlySpacedValues(ZERO_CENTRED_PREVIEW_SCALE_MIN, ZERO_CENTRED_PREVIEW_SCALE_MAX, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+export function isDivergingZeroCellRanges(ranges) {
+    if (!ranges || ranges.length !== 2) {
+        return false;
+    }
+    const [a, b] = ranges;
+    return a.Max === 0 && b.Min === 0;
+}
+export function isZeroCentredGradientStyle(gs) {
+    return !!(gs.ZeroCentred || isDivergingZeroCellRanges(gs.CellRanges));
+}
+/**
+ * Sample cell values for gradient preview strips — spread across the effective scale.
+ */
+export const getGradientPreviewSampleValues = (styledColumn, api) => {
+    const gs = styledColumn.GradientStyle;
+    if (!gs || !hasGradientRangesConfigured(gs)) {
+        return [];
+    }
+    if (isZeroCentredGradientStyle(gs)) {
+        return getZeroCentredGradientPreviewValues();
+    }
+    if (gs.ColumnComparison) {
+        const min = Number(gs.ColumnComparison.MinValue);
+        const max = Number(gs.ColumnComparison.MaxValue);
+        if (!Number.isNaN(min) && !Number.isNaN(max)) {
+            return evenlySpacedValues(min, max, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+        }
+        return evenlySpacedValues(0, 100, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+    }
+    const column = styledColumn.ColumnId
+        ? api.columnApi.getColumnWithColumnId(styledColumn.ColumnId)
+        : undefined;
+    if (!column) {
+        return evenlySpacedValues(0, 100, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+    }
+    const colMin = api.styledColumnApi.internalApi.getMinValueForNumericColumn(column);
+    const colMax = api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column);
+    if (colMin === colMax) {
+        return [colMin];
+    }
+    return evenlySpacedValues(colMin, colMax, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+};
+const getZeroCentredPreviewColors = (gradientStyle) => {
+    if (gradientStyle.ZeroCentred) {
+        return {
+            negative: gradientStyle.ZeroCentred.NegativeColor,
+            positive: gradientStyle.ZeroCentred.PositiveColor,
+        };
+    }
+    const ranges = gradientStyle.CellRanges;
+    if (isDivergingZeroCellRanges(ranges)) {
+        return {
+            negative: ranges[0].Color,
+            positive: ranges[1].Color,
+        };
+    }
+    return null;
+};
+/**
+ * Zero-centred preview uses a fixed -20…20 illustrative scale so negative
+ * colours always appear — independent of whether the column currently has
+ * negative values (Col-Min may be above zero today).
+ */
+const getZeroCentredGradientPreviewCellStyle = (cellValue, gradientStyle) => {
+    const colors = getZeroCentredPreviewColors(gradientStyle);
+    if (!colors) {
+        return {};
+    }
+    const previewMin = ZERO_CENTRED_PREVIEW_SCALE_MIN;
+    const previewMax = ZERO_CENTRED_PREVIEW_SCALE_MAX;
+    const syntheticRanges = [
+        { Min: previewMin, Max: 0, Color: colors.negative },
+        { Min: 0, Max: previewMax, Color: colors.positive },
+    ];
+    let matchingRange = null;
+    for (const range of syntheticRanges) {
+        const min = range.Min;
+        const max = range.Max;
+        if (cellValue >= min && cellValue <= max) {
+            matchingRange = range;
+            break;
+        }
+    }
+    if (!matchingRange) {
+        return {};
+    }
+    const min = matchingRange.Min;
+    const max = matchingRange.Max;
+    const reverseGradient = matchingRange.Min === previewMin && matchingRange.Max === 0;
+    const minAlphaBound = gradientStyle.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxAlphaBound = gradientStyle.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
+    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(cellValue) - min) / span;
+    t = clamp(t, 0, 1);
+    if (reverseGradient) {
+        t = 1 - t;
+    }
+    const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
+    let style = {};
+    const bg = tinycolor(getVariableColor(matchingRange.Color)).setAlpha(alpha);
+    style.backgroundColor = bg.toRgbString();
+    if (gradientStyle.AutoContrastText) {
+        style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+    }
+    const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;
+    if (gradientStyle.Font) {
+        style = { ...style, ...convertAdaptableStyleToCSS(gradientStyle.Font) };
+    }
+    if (autoContrastColor) {
+        style.color = autoContrastColor;
+    }
+    if (gradientStyle.Font?.Alignment && gradientStyle.Font.Alignment !== 'Default') {
+        style.textAlign = gradientStyle.Font.Alignment.toLowerCase();
+    }
+    return style;
+};
+/**
+ * Cell CSS for gradient preview — mirrors `AgGridColumnAdapter.getStyledColumnStyle` gradient path.
+ */
+export const getGradientPreviewCellStyle = (cellValue, styledColumn, api, rowNode) => {
+    const gradientStyle = styledColumn.GradientStyle;
+    if (!gradientStyle || !hasGradientRangesConfigured(gradientStyle)) {
+        return {};
+    }
+    if (isZeroCentredGradientStyle(gradientStyle)) {
+        return getZeroCentredGradientPreviewCellStyle(cellValue, gradientStyle);
+    }
+    const column = styledColumn.ColumnId
+        ? api.columnApi.getColumnWithColumnId(styledColumn.ColumnId)
+        : undefined;
+    if (!column) {
+        return {};
+    }
+    const node = rowNode ?? api.gridApi?.getRowNodeForIndex(0) ?? null;
+    const internalApi = api.styledColumnApi.internalApi;
+    let style = {};
+    const min = internalApi.getNumericStyleMinValue(styledColumn, column, node, cellValue);
+    const max = internalApi.getNumericStyleMaxValue(styledColumn, column, node, cellValue);
+    let cellBackColor;
+    let reverseGradient = false;
+    if (gradientStyle.ColumnComparison) {
+        cellBackColor = gradientStyle.ColumnComparison.Color;
+    }
+    else {
+        const matchingRange = internalApi.findRangeForColumn(expandGradientCellRanges(gradientStyle), column, gradientStyleRangeLookupValueType(gradientStyle), cellValue);
+        if (matchingRange) {
+            cellBackColor = matchingRange.Color;
+            reverseGradient =
+                (!!gradientStyle.ZeroCentred && isNegativeZeroCentredBand(matchingRange)) ||
+                    !!matchingRange.ReverseGradient;
+        }
+    }
+    const minAlphaBound = gradientStyle.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxAlphaBound = gradientStyle.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
+    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(cellValue) - min) / span;
+    t = clamp(t, 0, 1);
+    if (reverseGradient) {
+        t = 1 - t;
+    }
+    const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
+    if (cellBackColor) {
+        const bg = tinycolor(getVariableColor(cellBackColor)).setAlpha(alpha);
+        style.backgroundColor = bg.toRgbString();
+        if (gradientStyle.AutoContrastText) {
+            style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+        }
+    }
+    const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;
+    if (gradientStyle.Font) {
+        style = { ...style, ...convertAdaptableStyleToCSS(gradientStyle.Font) };
+    }
+    if (autoContrastColor) {
+        style.color = autoContrastColor;
+    }
+    if (gradientStyle.Font?.Alignment && gradientStyle.Font.Alignment !== 'Default') {
+        style.textAlign = gradientStyle.Font.Alignment.toLowerCase();
+    }
+    return style;
+};
 /**
  * Effective cell ranges for gradient rendering / range lookup.
  * When `ZeroCentred` is set, expands to the canonical Col-Min…0 and 0…Col-Max bands.

package/src/Utilities/Helpers/ThemeHelpers.d.ts

@@ -0,0 +1,5 @@
+import { AdaptableTheme, SystemThemeEntry } from '../../AdaptableState/ThemeState';
+import { AdaptableLogger } from '../../agGrid/AdaptableLogger';
+export declare function isLegacySystemThemeObject(theme: SystemThemeEntry | AdaptableTheme): theme is AdaptableTheme;
+export declare function resolveSystemThemeDescription(name: string): string;
+export declare function systemThemeEntryToAdaptableTheme(theme: SystemThemeEntry | AdaptableTheme, logger?: AdaptableLogger): AdaptableTheme;

package/src/Utilities/Helpers/ThemeHelpers.js

@@ -0,0 +1,38 @@
+import { StaticThemes } from '../../themes';
+import { logDeprecation } from '../logDeprecation';
+const LEGACY_SYSTEM_THEME_PROPS = ['Description', 'CSSVariables', 'Variant'];
+export function isLegacySystemThemeObject(theme) {
+    if (typeof theme === 'string') {
+        return false;
+    }
+    return LEGACY_SYSTEM_THEME_PROPS.some((prop) => prop in theme && theme[prop] !== undefined);
+}
+export function resolveSystemThemeDescription(name) {
+    return StaticThemes.find((staticTheme) => staticTheme.Name === name)?.Description ?? name;
+}
+export function systemThemeEntryToAdaptableTheme(theme, logger) {
+    if (typeof theme === 'string') {
+        return {
+            Name: theme,
+            Description: resolveSystemThemeDescription(theme),
+        };
+    }
+    if (isLegacySystemThemeObject(theme)) {
+        if (logger) {
+            logDeprecation(logger, 'ThemeState', 'SystemThemes', undefined, 'Passing a full AdaptableTheme object in SystemThemes is deprecated. Use a theme name string or SystemThemeOptions (Name with AgThemeMode / AgGridClassName only).');
+        }
+        return {
+            Name: theme.Name,
+            Description: theme.Description ?? resolveSystemThemeDescription(theme.Name),
+            AgThemeMode: theme.AgThemeMode,
+            AgGridClassName: theme.AgGridClassName,
+        };
+    }
+    const options = theme;
+    return {
+        Name: options.Name,
+        Description: resolveSystemThemeDescription(options.Name),
+        AgThemeMode: options.AgThemeMode,
+        AgGridClassName: options.AgGridClassName,
+    };
+}

package/src/Utilities/Helpers/percentBarPreviewHelper.d.ts

@@ -0,0 +1,19 @@
+import { PercentBarStyle, StyledColumn } from '../../AdaptableState/StyledColumnState';
+export declare const hasPercentBarRangesConfigured: (pb: PercentBarStyle | undefined) => boolean;
+/** Illustrative scale for preview — shows negatives when origin is Auto or Zero. */
+export declare const getPercentBarPreviewScale: (pb: PercentBarStyle) => {
+    min: number;
+    max: number;
+};
+export declare const getPercentBarPreviewSampleValues: (pb: PercentBarStyle) => number[];
+export type PercentBarPreviewGeometry = {
+    barLeftPercent: number;
+    barWidthPercent: number;
+    percentageValue: number;
+    barColor?: string;
+};
+export declare const getPercentBarPreviewGeometry: (numericValue: number, pb: PercentBarStyle, min: number, max: number) => PercentBarPreviewGeometry;
+export declare const formatPercentBarPreviewCellText: (numericValue: number, percentageValue: number, pb: PercentBarStyle) => string;
+export declare const getPercentBarPreviewTrackColor: (pb: PercentBarStyle) => string | undefined;
+export declare const getPercentBarPreviewResolvedBarColor: (color: string | undefined) => string | undefined;
+export declare const hasPercentBarStylePreview: (styledColumn: StyledColumn) => boolean;

package/src/Utilities/Helpers/percentBarPreviewHelper.js

@@ -0,0 +1,143 @@
+import { getVariableColor } from './StyleHelper';
+import clamp from '../utils/clamp';
+import { STYLED_COLUMN_PREVIEW_SAMPLE_COUNT, ZERO_CENTRED_PREVIEW_SCALE_MAX, ZERO_CENTRED_PREVIEW_SCALE_MIN, } from './StyledColumnGradientHelper';
+const evenlySpacedValues = (min, max, count) => {
+    if (count <= 1) {
+        return [min];
+    }
+    const step = (max - min) / (count - 1);
+    return Array.from({ length: count }, (_, i) => min + step * i);
+};
+const toFraction = (value, min, max) => {
+    if (max === min) {
+        return 0;
+    }
+    return clamp((value - min) / (max - min), 0, 1);
+};
+const resolveOrigin = (percentBarStyle, cellValue, min, max) => {
+    const origin = percentBarStyle.Origin ?? 'Auto';
+    if (typeof origin === 'number') {
+        return origin;
+    }
+    if (origin === 'Zero') {
+        return 0;
+    }
+    if (origin === 'Min') {
+        return min;
+    }
+    if (min < 0 || max < 0 || cellValue < 0) {
+        return 0;
+    }
+    return min;
+};
+const columnComparisonUsesCentredAxis = (origin) => {
+    const o = origin ?? 'Auto';
+    if (typeof o === 'number') {
+        return false;
+    }
+    return o === 'Zero' || o === 'Auto';
+};
+const resolveRangeEndpoint = (endpoint, scaleMin, scaleMax) => {
+    if (endpoint === 'Col-Min') {
+        return scaleMin;
+    }
+    if (endpoint === 'Col-Max') {
+        return scaleMax;
+    }
+    if (typeof endpoint === 'number') {
+        return endpoint;
+    }
+    return scaleMin;
+};
+const getPreviewBarColor = (value, pb, scaleMin, scaleMax) => {
+    if (pb.ColumnComparison) {
+        return pb.ColumnComparison.Color;
+    }
+    for (const range of pb.CellRanges ?? []) {
+        const rMin = resolveRangeEndpoint(range.Min, scaleMin, scaleMax);
+        const rMax = resolveRangeEndpoint(range.Max, scaleMin, scaleMax);
+        if (value >= Math.min(rMin, rMax) && value <= Math.max(rMin, rMax)) {
+            return range.Color;
+        }
+    }
+    return pb.CellRanges?.[0]?.Color;
+};
+export const hasPercentBarRangesConfigured = (pb) => !!(pb?.CellRanges?.length || pb?.ColumnComparison);
+/** Illustrative scale for preview — shows negatives when origin is Auto or Zero. */
+export const getPercentBarPreviewScale = (pb) => {
+    const origin = pb.Origin ?? 'Auto';
+    if (origin === 'Zero' || origin === 'Auto') {
+        return { min: ZERO_CENTRED_PREVIEW_SCALE_MIN, max: ZERO_CENTRED_PREVIEW_SCALE_MAX };
+    }
+    return { min: 0, max: 100 };
+};
+export const getPercentBarPreviewSampleValues = (pb) => {
+    const { min, max } = getPercentBarPreviewScale(pb);
+    return evenlySpacedValues(min, max, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+};
+export const getPercentBarPreviewGeometry = (numericValue, pb, min, max) => {
+    let percentageValue = 0;
+    let barLeftPercent = 0;
+    let barWidthPercent = 0;
+    if (pb.ColumnComparison) {
+        const absMax = Math.abs(max);
+        percentageValue = absMax === 0 ? 0 : (numericValue / absMax) * 100;
+        const magnitude = Math.min(100, Math.abs(percentageValue));
+        const origin = pb.Origin ?? 'Auto';
+        const isCentred = columnComparisonUsesCentredAxis(origin);
+        if (isCentred) {
+            const halfWidth = magnitude / 2;
+            if (percentageValue >= 0) {
+                barLeftPercent = 50;
+                barWidthPercent = halfWidth;
+            }
+            else {
+                barLeftPercent = 50 - halfWidth;
+                barWidthPercent = halfWidth;
+            }
+        }
+        else {
+            barLeftPercent = 0;
+            barWidthPercent = magnitude;
+        }
+    }
+    else if (max === min) {
+        percentageValue = 0;
+        barLeftPercent = 0;
+        barWidthPercent = 0;
+    }
+    else {
+        percentageValue = ((clamp(numericValue, min, max) - min) / (max - min)) * 100;
+        const origin = resolveOrigin(pb, numericValue, min, max);
+        const valueFrac = toFraction(numericValue, min, max);
+        const originFrac = toFraction(origin, min, max);
+        const start = Math.min(valueFrac, originFrac);
+        const end = Math.max(valueFrac, originFrac);
+        barLeftPercent = start * 100;
+        barWidthPercent = (end - start) * 100;
+    }
+    return {
+        barLeftPercent,
+        barWidthPercent,
+        percentageValue,
+        barColor: getPreviewBarColor(numericValue, pb, min, max),
+    };
+};
+export const formatPercentBarPreviewCellText = (numericValue, percentageValue, pb) => {
+    const parts = [];
+    if (pb.CellText?.includes('CellValue')) {
+        parts.push(Number.isInteger(numericValue) ? String(numericValue) : numericValue.toFixed(1));
+    }
+    if (pb.CellText?.includes('PercentageValue')) {
+        parts.push(`${percentageValue.toFixed(0)}%`);
+    }
+    return parts.join(' ');
+};
+export const getPercentBarPreviewTrackColor = (pb) => {
+    if (pb.ColumnComparison) {
+        return pb.BackColor ?? undefined;
+    }
+    return pb.BackColor ?? undefined;
+};
+export const getPercentBarPreviewResolvedBarColor = (color) => color ? getVariableColor(color) : undefined;
+export const hasPercentBarStylePreview = (styledColumn) => hasPercentBarRangesConfigured(styledColumn.PercentBarStyle);

package/src/Utilities/ObjectFactory.d.ts

@@ -16,7 +16,7 @@ import { PlusMinusNudge } from '../AdaptableState/PlusMinusState';
 import { Shortcut } from '../AdaptableState/ShortcutState';
 import { NotificationsOptions } from '../AdaptableOptions/NotificationsOptions';
 import { CellSummmaryInfo } from '../AdaptableState/Common/CellSummary';
-import { AdaptableTheme, ChartDefinition, ColumnFilter, CommentThread, CustomDisplayFormatterContext, FlashingCellDefinition, RowDataChangedInfo, SpecialColumnSettings, SystemFilterPredicateId } from '../types';
+import { ChartDefinition, ColumnFilter, CommentThread, CustomDisplayFormatterContext, FlashingCellDefinition, RowDataChangedInfo, SpecialColumnSettings, SystemFilterPredicateId } from '../types';
 import { IRowNode } from 'ag-grid-enterprise';
 import { AdaptableApi, AdaptableComment, BadgeStyleDefinition, CellAddress, NamedQuery, PivotLayout, TableLayout } from '../../types';
 import { ToastOptions } from '../components/Toastify';
@@ -54,7 +54,6 @@ export declare function CreateEmptyStyledColumn(): StyledColumn;
 export declare function CreateDefaultStyledColumnBadge(): BadgeStyleDefinition;
 export declare function CreateEmptyChartDefinition(chartDefinition?: ChartDefinition): ChartDefinition;
 export declare function CreateCustomDisplayFormatterContext(value: any, node: IRowNode, abColumn: AdaptableColumn, api: AdaptableApi): CustomDisplayFormatterContext;
-export declare function CreateEmptyTheme(name?: string): AdaptableTheme;
 export declare function CreateEmptyCommentThread(cellAddress: CellAddress): CommentThread;
 export declare function CreateToastOptions(notificationsOptions: NotificationsOptions, { onClose, containerId }: {
     onClose?: VoidFunction;
@@ -91,7 +90,6 @@ export declare const ObjectFactory: {
     CreateEmptyStyledColumn: typeof CreateEmptyStyledColumn;
     CreateDefaultStyledColumnBadge: typeof CreateDefaultStyledColumnBadge;
     CreateEmptyChartDefinition: typeof CreateEmptyChartDefinition;
-    CreateEmptyTheme: typeof CreateEmptyTheme;
     CreateEmptyCommentThread: typeof CreateEmptyCommentThread;
     CreateAdaptableComment: typeof CreateAdaptableComment;
     CreateDefaultSchedule: typeof CreateDefaultSchedule;

package/src/Utilities/ObjectFactory.js

@@ -288,13 +288,6 @@ export function CreateCustomDisplayFormatterContext(value, node, abColumn, api)
         ...api.internalApi.buildBaseContext(),
     };
 }
-export function CreateEmptyTheme(name) {
-    return {
-        Uuid: createUuid(),
-        Name: name || 'Custom Theme',
-        Description: name || 'Custom Theme',
-    };
-}
 export function CreateEmptyCommentThread(cellAddress) {
     return {
         ...cellAddress,
@@ -389,7 +382,6 @@ export const ObjectFactory = {
     CreateEmptyStyledColumn,
     CreateDefaultStyledColumnBadge,
     CreateEmptyChartDefinition,
-    CreateEmptyTheme,
     CreateEmptyCommentThread,
     CreateAdaptableComment,
     CreateDefaultSchedule,

package/src/Utilities/Services/CalculatedColumnExpressionService.d.ts

@@ -8,6 +8,7 @@ export declare class CalculatedColumnExpressionService implements ICalculatedCol
     private adaptableApi;
     private aggregatedScalarLiveValuesMap;
     constructor(adaptableApi: AdaptableApi);
+    buildSyntheticCellDataChangedInfosForCalcColumns(cellDataChangedInfo: CellDataChangedInfo): CellDataChangedInfo[];
     listentoCellDataChange(cellDataChangedInfo: CellDataChangedInfo): void;
     listentoRowDataChange(rowDataChangedInfo: RowDataChangedInfo): void;
     destroy(): void;

package/src/Utilities/Services/CalculatedColumnExpressionService.js

@@ -1,5 +1,6 @@
 import { CalculatedColumnModuleId } from '../Constants/ModuleConstants';
 import { AggregatedScalarLiveValue } from './AggregatedScalarLiveValue';
+import { buildSyntheticCellDataChangedInfosForCalcColumns } from './CalculatedColumnSyntheticChange';
 export class CalculatedColumnExpressionService {
     adaptableApi;
     aggregatedScalarLiveValuesMap = new Map();
@@ -7,7 +8,13 @@ export class CalculatedColumnExpressionService {
         this.adaptableApi = adaptableApi;
         this.adaptableApi = adaptableApi;
     }
+    buildSyntheticCellDataChangedInfosForCalcColumns(cellDataChangedInfo) {
+        return buildSyntheticCellDataChangedInfosForCalcColumns(this.adaptableApi, cellDataChangedInfo);
+    }
     listentoCellDataChange(cellDataChangedInfo) {
+        if (cellDataChangedInfo.trigger === 'calculatedColumnChange') {
+            return;
+        }
         const refreshedCalculatedColumns = [];
         this.aggregatedScalarLiveValuesMap.forEach((aggregatedScalarLiveValue, calculatedColumnId) => {
             const calculatedColumn = this.adaptableApi.calculatedColumnApi.getCalculatedColumnById(calculatedColumnId);

package/src/Utilities/Services/CalculatedColumnSyntheticChange.d.ts

@@ -0,0 +1,4 @@
+import { AdaptableApi } from '../../types';
+import { CellDataChangedInfo } from '../../AdaptableState/Common/CellDataChangedInfo';
+export declare function buildSyntheticCellDataChangedInfosForCalcColumns(adaptableApi: AdaptableApi, info: CellDataChangedInfo): CellDataChangedInfo[];
+export declare function expandCellDataChangedInfosWithCalculatedColumns(adaptableApi: AdaptableApi, cellDataChangedInfos: CellDataChangedInfo[]): CellDataChangedInfo[];

package/src/Utilities/Services/CalculatedColumnSyntheticChange.js

@@ -0,0 +1,115 @@
+import * as parser from '../../parser/src';
+import { CalculatedColumnModuleId } from '../Constants/ModuleConstants';
+import Helper from '../Helpers/Helper';
+function isScalarCalculatedColumn(calculatedColumn) {
+    return !!calculatedColumn.Query?.ScalarExpression;
+}
+function collectDependentScalarCalculatedColumns(adaptableApi, rootColumnId) {
+    const collected = [];
+    const seenCalcColumnIds = new Set();
+    const queue = [rootColumnId];
+    while (queue.length > 0) {
+        const columnId = queue.shift();
+        const adaptableColumn = adaptableApi.columnApi.getColumnWithColumnId(columnId);
+        if (!adaptableColumn) {
+            continue;
+        }
+        const dependentColumnIds = adaptableApi.calculatedColumnApi.internalApi.getCalculatedColumnsDependentOnColumn(adaptableColumn);
+        dependentColumnIds.forEach((dependentColumnId) => {
+            if (seenCalcColumnIds.has(dependentColumnId)) {
+                return;
+            }
+            const calculatedColumn = adaptableApi.calculatedColumnApi.getCalculatedColumnForColumnId(dependentColumnId);
+            if (!calculatedColumn || !isScalarCalculatedColumn(calculatedColumn)) {
+                return;
+            }
+            seenCalcColumnIds.add(dependentColumnId);
+            collected.push(calculatedColumn);
+            queue.push(dependentColumnId);
+        });
+    }
+    return collected;
+}
+function buildShadowRowData(adaptableApi, info) {
+    const shadowData = Helper.cloneObject(info.rowNode?.data ?? info.rowData ?? {});
+    const fieldName = info.column.field ?? info.column.columnId;
+    adaptableApi.internalApi.setValueUsingField(shadowData, fieldName, info.oldValue);
+    return shadowData;
+}
+function evaluateScalarExpressionWithShadowData(adaptableApi, calculatedColumn, rowNode, shadowData) {
+    const internalApi = adaptableApi.internalApi;
+    const moduleFns = internalApi
+        .getQueryLanguageService()
+        .getModuleExpressionFunctionsMap(CalculatedColumnModuleId);
+    const baseFunctions = { ...moduleFns.booleanFunctions, ...moduleFns.scalarFunctions };
+    const resolveColumnValue = (columnId) => {
+        const childCalculatedColumn = adaptableApi.calculatedColumnApi.getCalculatedColumnForColumnId(columnId);
+        if (childCalculatedColumn?.Query?.ScalarExpression) {
+            return evaluateScalarExpressionWithShadowData(adaptableApi, childCalculatedColumn, rowNode, shadowData);
+        }
+        const adaptableColumn = adaptableApi.columnApi.getColumnWithColumnId(columnId);
+        return internalApi.getValueUsingField(shadowData, adaptableColumn?.field ?? columnId);
+    };
+    const customFunctions = {
+        ...baseFunctions,
+        COL: {
+            ...baseFunctions.COL,
+            handler: (args) => resolveColumnValue(args[0]),
+        },
+        FIELD: {
+            ...baseFunctions.FIELD,
+            handler: (args) => internalApi.getValueUsingField(shadowData, args[0]),
+        },
+    };
+    return parser.evaluate(calculatedColumn.Query.ScalarExpression, {
+        node: { ...rowNode, data: shadowData },
+        functions: customFunctions,
+        ...internalApi.buildBaseContext(),
+    });
+}
+export function buildSyntheticCellDataChangedInfosForCalcColumns(adaptableApi, info) {
+    if (!info.rowNode ||
+        info.preventEdit ||
+        info.trigger === 'undo' ||
+        info.trigger === 'aggChange' ||
+        info.trigger === 'calculatedColumnChange') {
+        return [];
+    }
+    const calculatedColumns = collectDependentScalarCalculatedColumns(adaptableApi, info.column.columnId);
+    if (!calculatedColumns.length) {
+        return [];
+    }
+    const shadowData = buildShadowRowData(adaptableApi, info);
+    const expressionService = adaptableApi.internalApi.getCalculatedColumnExpressionService();
+    const syntheticEvents = [];
+    calculatedColumns.forEach((calculatedColumn) => {
+        const oldValue = evaluateScalarExpressionWithShadowData(adaptableApi, calculatedColumn, info.rowNode, shadowData);
+        const newValue = expressionService.evaluateCalculatedColumnQuery(calculatedColumn, info.rowNode);
+        if (oldValue == newValue) {
+            return;
+        }
+        const column = adaptableApi.columnApi.getColumnWithColumnId(calculatedColumn.ColumnId);
+        if (!column) {
+            return;
+        }
+        syntheticEvents.push(adaptableApi.internalApi.buildCellDataChangedInfo({
+            oldValue,
+            newValue,
+            column,
+            primaryKeyValue: info.primaryKeyValue,
+            rowNode: info.rowNode,
+            trigger: 'calculatedColumnChange',
+        }));
+    });
+    return syntheticEvents;
+}
+export function expandCellDataChangedInfosWithCalculatedColumns(adaptableApi, cellDataChangedInfos) {
+    if (!cellDataChangedInfos.length) {
+        return cellDataChangedInfos;
+    }
+    const syntheticEvents = cellDataChangedInfos.flatMap((info) => buildSyntheticCellDataChangedInfosForCalcColumns(adaptableApi, info));
+    if (!syntheticEvents.length) {
+        return cellDataChangedInfos;
+    }
+    return [...cellDataChangedInfos, ...syntheticEvents];
+}

package/src/Utilities/Services/Interface/ICalculatedColumnExpressionService.d.ts

@@ -11,4 +11,5 @@ export interface ICalculatedColumnExpressionService extends IAdaptableService {
     destroyAggregatedScalarLiveValue(calculatedColumn: CalculatedColumn): void;
     listentoCellDataChange(cellDataChangedInfo: CellDataChangedInfo): void;
     listentoRowDataChange(rowDataChangedInfo: RowDataChangedInfo): void;
+    buildSyntheticCellDataChangedInfosForCalcColumns(cellDataChangedInfo: CellDataChangedInfo): CellDataChangedInfo[];
 }

package/src/Utilities/Services/ThemeService.js

@@ -20,7 +20,7 @@ export class ThemeService {
         document.adoptedStyleSheets = [...document.adoptedStyleSheets].filter((sheet) => sheet !== this.styleSheetObject);
     }
     subscribe() {
-        const themeChangedUnsubscribe = this.api.eventApi.on('ThemeChanged', this.onThemeChanged);
+        const themeChangedUnsubscribe = this.api.eventApi.on('ThemeSelected', this.onThemeChanged);
         const prefferedColorSchemeUnsubscribe = this.attachPrefferedColorSchemeListener();
         this.unsubscribe = () => {
             themeChangedUnsubscribe();