@adaptabletools/adaptable 23.0.22 → 23.1.0-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.0.22",
+  "version": "23.1.0-canary.0",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",
@@ -68,7 +68,8 @@
     "uuid": "9.0.1"
   },
   "peerDependencies": {
-    "ag-grid-enterprise": ">=35.3.0"
+    "ag-grid-enterprise": ">=36.1.0",
+    "ag-stack": ">=36.1.0"
   },
   "publishTimestamp": 0,
   "type": "module",

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -281,6 +281,7 @@ export interface IAdaptable {
     getAdaptableContainerElement(): HTMLElement | null;
     getAgGridContainerElement(): HTMLElement | null;
     updateColumnModelAndRefreshGrid(): void;
+    refreshSortIfColumnsSorted(): void;
     getAgGridColumnForColumnId(columnId: string): Column;
     getMinMaxCachedValueForColumn(column: AdaptableColumn, aggregation: 'min' | 'max' | 'avg' | 'median'): number | undefined;
     destroy(config?: DestroyConfig): void;

package/src/AdaptableOptions/ColumnMenuOptions.d.ts

@@ -125,4 +125,4 @@ export interface UserColumnMenuItem {
 /**
  * Defines AG Grid Column Menu Items
  */
-export type AgGridColumnMenuItemType = 'sortAscending' | 'sortDescending' | 'sortUnSort' | 'columnFilter' | 'columnChooser' | 'pinSubMenu' | 'valueAggSubMenu' | 'autoSizeThis' | 'autoSizeAll' | 'rowGroup' | 'rowUnGroup' | 'resetColumns' | 'expandAll' | 'contractAll' | 'separator';
+export type AgGridColumnMenuItemType = 'sortAscending' | 'sortDescending' | 'sortUnSort' | 'columnFilter' | 'columnChooser' | 'pinSubMenu' | 'valueAggSubMenu' | 'showValuesAsSubMenu' | 'autoSizeThis' | 'autoSizeAll' | 'rowGroup' | 'rowUnGroup' | 'resetColumns' | 'expandAll' | 'contractAll' | 'calculatedColumn' | 'editCalculatedColumn' | 'removeCalculatedColumn' | 'editColumnName' | 'separator';

package/src/AdaptableOptions/ContextMenuOptions.d.ts

@@ -120,7 +120,7 @@ export interface UserContextMenuItem {
 /**
  * Defines AG Grid Context Menu Items
  */
-export type AgGridContextMenuItemType = 'autoSizeAll' | 'expandAll' | 'contractAll' | 'copy' | 'copyWithHeaders' | 'copyWithGroupHeaders' | 'cut' | 'paste' | 'resetColumns' | 'export' | 'csvExport' | 'excelExport' | 'chartRange' | 'pivotChart' | 'separator';
+export type AgGridContextMenuItemType = 'autoSizeAll' | 'expandAll' | 'contractAll' | 'copy' | 'copyWithHeaders' | 'copyWithGroupHeaders' | 'cut' | 'paste' | 'resetColumns' | 'export' | 'csvExport' | 'excelExport' | 'chartRange' | 'pivotChart' | 'calculatedColumn' | 'editCalculatedColumn' | 'removeCalculatedColumn' | 'editColumnName' | 'showValuesAsSubMenu' | 'separator';
 /**
  * The Context Menu provided by AadapTable by default
  */

package/src/AdaptableOptions/FilterOptions.d.ts

@@ -209,8 +209,7 @@ export interface InFilterValueResult {
     /**
      * Custom text for the collapsed IN Filter input.
      *
-     * Receives the currently selected items (and their count) and must return a
-     * string.
+     * Receives an {@link InFilterLabelContext} and must return a string.
      *
      * When omitted, the input shows the selected count (e.g. `(3)`) followed by the
      * selected labels joined with a comma. When provided, it fully replaces that
@@ -220,10 +219,27 @@ export interface InFilterValueResult {
      * is one entry in `selectedValues`: its `value` is the full leaf path and its
      * `label` the joined path label. `selectedCount` is the number of selected leaves.
      */
-    renderInputValues?: (params: {
-        selectedValues: InFilterValue[];
-        selectedCount: number;
-    }) => string;
+    inFilterLabel?: (context: InFilterLabelContext) => string;
+}
+/**
+ * Context passed to {@link InFilterValueResult.inFilterLabel} when customising
+ * the collapsed IN Filter label.
+ */
+export interface InFilterLabelContext extends BaseContext {
+    /**
+     * Currently selected items, in selection order.
+     *
+     * For tree-shaped filters (group columns and date columns), each selected leaf
+     * is one entry: its `value` is the full leaf path and its `label` the joined
+     * path label.
+     */
+    selectedValues: InFilterValue[];
+    /**
+     * Number of selected items.
+     *
+     * For tree-shaped filters, this is the number of selected leaves (not parent nodes).
+     */
+    selectedCount: number;
 }
 /**
  * Information about items in the IN Column Filter

package/src/Redux/Store/AdaptableStore.js

@@ -562,7 +562,11 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case StyledColumnRedux.STYLED_COLUMN_SUSPEND:
                 case StyledColumnRedux.STYLED_COLUMN_UNSUSPEND:
                 case StyledColumnRedux.STYLED_COLUMN_SUSPEND_ALL:
-                case StyledColumnRedux.STYLED_COLUMN_UNSUSPEND_ALL:
+                case StyledColumnRedux.STYLED_COLUMN_UNSUSPEND_ALL: {
+                    const returnAction = next(action);
+                    adaptable.updateColumnModelAndRefreshGrid();
+                    return returnAction;
+                }
                 case CustomSortRedux.CUSTOM_SORT_ADD:
                 case CustomSortRedux.CUSTOM_SORT_EDIT:
                 case CustomSortRedux.CUSTOM_SORT_DELETE:
@@ -572,6 +576,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                 case CustomSortRedux.CUSTOM_SORT_UNSUSPEND_ALL: {
                     const returnAction = next(action);
                     adaptable.updateColumnModelAndRefreshGrid();
+                    adaptable.refreshSortIfColumnsSorted();
                     return returnAction;
                 }
                 case QuickSearchRedux.QUICK_SEARCH_RUN: {

package/src/Utilities/Helpers/StyledColumns/SparklineStyleHelper.d.ts

@@ -1,4 +1,6 @@
 import type { AgSparklineOptions } from 'ag-charts-types';
+/** AG Charts 14 colours may be a CSS string or a theme colour-ref object. */
+export declare const cssColorToString: (color: unknown) => string | undefined;
 /**
  * AG Charts sparklines do not resolve Adaptable `var(--ab-color-*)` tokens.
  * Resolve palette / theme CSS variables to concrete colours at render time so

package/src/Utilities/Helpers/StyledColumns/SparklineStyleHelper.js

@@ -1,7 +1,10 @@
 import { getVariableColor } from '../StyleHelper';
+export const cssColorToString = (color) => {
+    return typeof color === 'string' ? color : undefined;
+};
 const resolveCssColor = (color) => {
-    if (color == null || color === '') {
-        return color;
+    if (typeof color !== 'string' || color === '') {
+        return typeof color === 'string' ? color : undefined;
     }
     const resolved = getVariableColor(color);
     return resolved || color;
@@ -11,23 +14,23 @@ const resolveHighlightStyle = (style) => {
         return style;
     }
     const resolved = { ...style };
-    if (style.fill != null) {
+    if (typeof style.fill === 'string') {
         resolved.fill = resolveCssColor(style.fill);
     }
-    if (style.stroke != null) {
+    if (typeof style.stroke === 'string') {
         resolved.stroke = resolveCssColor(style.stroke);
     }
     return resolved;
 };
 export function resolveSparklineOptionsForRender(options) {
     const resolved = { ...options };
-    if ('fill' in options && options.fill != null) {
+    if ('fill' in options && typeof options.fill === 'string') {
         resolved.fill = resolveCssColor(options.fill);
     }
-    if (options.stroke != null) {
+    if (typeof options.stroke === 'string') {
         resolved.stroke = resolveCssColor(options.stroke);
     }
-    if (options.background?.fill != null) {
+    if (typeof options.background?.fill === 'string') {
         resolved.background = {
             ...options.background,
             fill: resolveCssColor(options.background.fill),
@@ -35,10 +38,10 @@ export function resolveSparklineOptionsForRender(options) {
     }
     if ('marker' in options && options.marker) {
         const marker = { ...options.marker };
-        if (marker.fill != null) {
+        if (typeof marker.fill === 'string') {
             marker.fill = resolveCssColor(marker.fill);
         }
-        if (marker.stroke != null) {
+        if (typeof marker.stroke === 'string') {
             marker.stroke = resolveCssColor(marker.stroke);
         }
         resolved.marker = marker;
@@ -50,7 +53,7 @@ export function resolveSparklineOptionsForRender(options) {
             highlightedSeries: resolveHighlightStyle(options.highlight.highlightedSeries),
         };
     }
-    if (options.axis && typeof options.axis === 'object' && options.axis.stroke != null) {
+    if (options.axis && typeof options.axis === 'object' && typeof options.axis.stroke === 'string') {
         resolved.axis = {
             ...options.axis,
             stroke: resolveCssColor(options.axis.stroke),

package/src/Utilities/Hooks/useAdaptableOptions.d.ts

@@ -1,2 +1,2 @@
 import { AdaptableOptions } from '../../types';
-export declare const useAdaptableOptions: <T = AdaptableOptions<any, Record<string, any>>>(fn?: (adaptableOptions: AdaptableOptions) => T) => T;
+export declare const useAdaptableOptions: <T = AdaptableOptions>(fn?: (adaptableOptions: AdaptableOptions) => T) => T;

package/src/Utilities/Services/AnnotationsService.js

@@ -61,16 +61,16 @@ export class AnnotationsService {
         if (!target?.classList?.contains?.('ag-cell')) {
             return null;
         }
-        try {
-            const PrimaryKeyValue = target.parentElement.getAttribute('row-id');
-            return {
-                PrimaryKeyValue,
-                ColumnId: target.getAttribute('col-id'),
-            };
-        }
-        catch (e) {
+        const rowElement = target.closest('[row-id]');
+        const PrimaryKeyValue = rowElement?.getAttribute('row-id');
+        const ColumnId = target.getAttribute('col-id');
+        if (PrimaryKeyValue == null || ColumnId == null) {
             return null;
         }
+        return {
+            PrimaryKeyValue,
+            ColumnId,
+        };
     }
     handleMouseEnter(event) {
         const editMode = this.getEditMode();

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ColumnValuesSelectProps } from '../../FilterForm/ListBoxFilterForm';
-import { InFilterValue } from '../../../../types';
+import { InFilterLabelContext } from '../../../../types';
 /** Suggested page size passed to `customInFilterValues` as `context.limit`. */
 export declare const IN_FILTER_VALUES_PAGE_SIZE = 1000;
 export interface FloatingFilterValuesProps {
@@ -32,10 +32,7 @@ export declare function useDistinctFilterColumnValues(options: {
         skipDefaultSearch: boolean;
         searchValueUsedInFilterValue: boolean;
         hasMore: boolean;
-        renderInputValues?: (params: {
-            selectedValues: InFilterValue[];
-            selectedCount: number;
-        }) => string;
+        inFilterLabel?: (context: InFilterLabelContext) => string;
     };
     setQuickFilterValues: React.Dispatch<React.SetStateAction<{
         values: {
@@ -46,10 +43,7 @@ export declare function useDistinctFilterColumnValues(options: {
         skipDefaultSearch: boolean;
         searchValueUsedInFilterValue: boolean;
         hasMore: boolean;
-        renderInputValues?: (params: {
-            selectedValues: InFilterValue[];
-            selectedCount: number;
-        }) => string;
+        inFilterLabel?: (context: InFilterLabelContext) => string;
     }>>;
     triggerValuesLoad: (options?: {
         usePrevious: boolean;

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -118,7 +118,7 @@ export function useDistinctFilterColumnValues(options) {
                 skipDefaultSearch: !!result.skipDefaultSearch,
                 searchValueUsedInFilterValue: prev.searchValueUsedInFilterValue || searchValueUsedInFilterValue,
                 hasMore: !!result.hasMore,
-                renderInputValues: result.renderInputValues,
+                inFilterLabel: result.inFilterLabel,
                 dataLoadIsComplete: true,
             }));
         })
@@ -172,7 +172,7 @@ export function useDistinctFilterColumnValues(options) {
                 skipDefaultSearch: !!distinctFilterDisplayValues.skipDefaultSearch,
                 searchValueUsedInFilterValue,
                 hasMore: !!distinctFilterDisplayValues.hasMore,
-                renderInputValues: distinctFilterDisplayValues.renderInputValues,
+                inFilterLabel: distinctFilterDisplayValues.inFilterLabel,
             });
             lastRequestedOffsetRef.current = 0;
             setIsDistinctColumnValuesLoading(false);
@@ -337,10 +337,14 @@ export const FloatingFilterValues = (props) => {
             triggerValuesLoad();
         }
     }, []);
-    const { skipDefaultSearch, renderInputValues } = quickFilterValues;
-    const renderComboboxInputValues = React.useMemo(() => renderInputValues
-        ? (items) => renderInputValues({ selectedValues: items, selectedCount: items.length })
-        : undefined, [renderInputValues]);
+    const { skipDefaultSearch, inFilterLabel } = quickFilterValues;
+    const renderComboboxInputValues = React.useMemo(() => inFilterLabel
+        ? (items) => inFilterLabel({
+            ...api.internalApi.buildBaseContext(),
+            selectedValues: items,
+            selectedCount: items.length,
+        })
+        : undefined, [api, inFilterLabel]);
     if (props.columnId === AG_GRID_GROUPED_COLUMN) {
         if (Array.isArray(props.value) && !props.value.every((value) => Array.isArray(value))) {
             logOnce(`All the inputs for the IN predicate for the column "${props.columnId}" need to be arrays. Example:

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -64,10 +64,14 @@ export const PredicateEditor = (props) => {
             triggerValuesLoad();
         }
     }, []);
-    const { skipDefaultSearch, renderInputValues } = quickFilterValues;
-    const renderComboboxInputValues = React.useMemo(() => renderInputValues
-        ? (items) => renderInputValues({ selectedValues: items, selectedCount: items.length })
-        : undefined, [renderInputValues]);
+    const { skipDefaultSearch, inFilterLabel } = quickFilterValues;
+    const renderComboboxInputValues = React.useMemo(() => inFilterLabel
+        ? (items) => inFilterLabel({
+            ...adaptable.api.internalApi.buildBaseContext(),
+            selectedValues: items,
+            selectedCount: items.length,
+        })
+        : undefined, [adaptable.api, inFilterLabel]);
     return (_jsxs(Box, { className: baseClassName, children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && _jsx(Tag, { className: "twa:mr-2", children: icon }), _jsx(SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: props.predicate?.PredicateId ?? null, onValueChange: (value) => {
                             const option = predicateDefsOptions.find((x) => x.value === value);
                             props.onChange({

package/src/View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection.js

@@ -10,6 +10,7 @@ import { ColorPicker } from '../../../components/ColorPicker';
 import { CheckBox } from '../../../components/CheckBox';
 import { Box, Flex } from '../../../components/Flex';
 import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { cssColorToString } from '../../../Utilities/Helpers/StyledColumns/SparklineStyleHelper';
 import { Card } from '../../../components/Card';
 import ErrorBox from '../../../components/ErrorBox';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
@@ -193,9 +194,18 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         delete next.theme;
         onChange(next);
     };
+    const getPaddingOptions = () => {
+        const padding = sparklineOptions.padding;
+        if (padding == null) {
+            return {};
+        }
+        if (typeof padding === 'number') {
+            return { top: padding, right: padding, bottom: padding, left: padding };
+        }
+        return padding;
+    };
     const handlePaddingChange = (key, value) => {
-        const currentPadding = sparklineOptions.padding || {};
-        handleChange('padding', { ...currentPadding, [key]: value });
+        handleChange('padding', { ...getPaddingOptions(), [key]: value });
     };
     const themes = [
         { value: SPARKLINE_CUSTOM_COLOURS_THEME, label: 'Custom colours' },
@@ -212,9 +222,9 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         { value: 'ag-financial', label: 'Financial' },
         { value: 'ag-financial-dark', label: 'Financial Dark' },
     ];
-    return (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsxs(Box, { children: [_jsx(ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => applySeriesColour({ fill: color }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Bar, column, and area body colour." })] }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => applySeriesColour({ stroke: color }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: sparklineOptions.type === 'line'
+    return (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsxs(Box, { children: [_jsx(ColorPicker, { title: "The colour for filling shapes", api: api, value: cssColorToString(sparklineOptions.fill) ?? '', onChange: (color) => applySeriesColour({ fill: color }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Bar, column, and area body colour." })] }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the stroke", api: api, value: cssColorToString(sparklineOptions.stroke) ?? '', onChange: (color) => applySeriesColour({ stroke: color }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: sparklineOptions.type === 'line'
                                 ? 'Line colour. Marker colours are in the Markers card.'
-                                : 'Outline colour — increase width to see it on bars and columns.' })] }) }), _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Top" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" })] }) }), _jsx(FormRow, { label: "Line Dash", children: _jsx(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
+                                : 'Outline colour — increase width to see it on bars and columns.' })] }) }), _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Top" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), _jsx(AdaptableInput, { type: "number", min: 0, value: getPaddingOptions().left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" })] }) }), _jsx(FormRow, { label: "Line Dash", children: _jsx(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
                         const value = e.target.value;
                         const dashArray = value
                             ? value
@@ -226,7 +236,7 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
                     } }) }), _jsx(FormRow, { label: "Line Dash Offset", children: _jsx(AdaptableInput, { title: "The offset of the line dash pattern in pixels", type: "number", min: 0, value: sparklineOptions.lineDashOffset ?? '', onChange: (e) => handleChange('lineDashOffset', Number(e.target.value)) }) }), _jsx(FormRow, { label: "Background", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: sparklineOptions.background?.visible ?? false, onChange: (visible) => handleChange('background', {
                                 ...sparklineOptions.background,
                                 visible,
-                            }) }), _jsx(Box, { className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: !sparklineOptions.background?.visible, title: "The colour of the chart background", api: api, value: sparklineOptions.background?.fill, onChange: (fill) => handleChange('background', {
+                            }) }), _jsx(Box, { className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: !sparklineOptions.background?.visible, title: "The colour of the chart background", api: api, value: cssColorToString(sparklineOptions.background?.fill) ?? '', onChange: (fill) => handleChange('background', {
                                     ...sparklineOptions.background,
                                     fill,
                                 }) }) })] }) }), typeof sparklineOptions.theme !== 'object' && (_jsx(FormRow, { label: "Theme", children: _jsxs(Box, { children: [_jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: sparklineOptions.theme ?? SPARKLINE_CUSTOM_COLOURS_THEME, onValueChange: (themeName) => {
@@ -263,7 +273,7 @@ const SparklineAxisOptions = ({ options, onChange, }) => {
         { value: 'time', label: 'Time' },
     ];
     const isAxisEnabled = sparklineOptions.axis?.visible ?? false;
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Axis", children: _jsx(CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) }) }), _jsx(FormRow, { label: "Axis Type", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onValueChange: (type) => handleChange({ type }), items: axisTypes }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: sparklineOptions.axis?.stroke, onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, className: "twa:w-[70px]", title: "The width in pixels of the axis line", type: "number", min: 0, value: sparklineOptions.axis?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }) })] }) }), _jsx(FormRow, { label: "Reverse Scale", children: _jsx(CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) }) }), sparklineOptions.axis.type === 'category' && (_jsx(_Fragment, { children: _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Inner" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The size of the gap between categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingInner ?? '', onChange: (e) => handleChange({ paddingInner: Number(e.target.value) }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Outer" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The padding on the outside of first and last categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingOuter ?? '', onChange: (e) => handleChange({ paddingOuter: Number(e.target.value) }) })] }) }) }))] }));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Axis", children: _jsx(CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) }) }), _jsx(FormRow, { label: "Axis Type", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onValueChange: (type) => handleChange({ type }), items: axisTypes }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: cssColorToString(sparklineOptions.axis?.stroke) ?? '', onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, className: "twa:w-[70px]", title: "The width in pixels of the axis line", type: "number", min: 0, value: sparklineOptions.axis?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }) })] }) }), _jsx(FormRow, { label: "Reverse Scale", children: _jsx(CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) }) }), sparklineOptions.axis.type === 'category' && (_jsx(_Fragment, { children: _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Inner" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The size of the gap between categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingInner ?? '', onChange: (e) => handleChange({ paddingInner: Number(e.target.value) }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Outer" }), _jsx(AdaptableInput, { disabled: !isAxisEnabled, title: "The padding on the outside of first and last categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingOuter ?? '', onChange: (e) => handleChange({ paddingOuter: Number(e.target.value) }) })] }) }) }))] }));
 };
 const SparklineTooltipOptions = ({ options, onChange, }) => {
     const sparklineOptions = options;
@@ -331,7 +341,7 @@ const SparklineMarkerOptions = ({ options, onChange }) => {
         { value: 'triangle', label: 'Triangle' },
     ];
     const isMarkerEnabled = sparklineOptions.marker?.enabled ?? false;
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Markers", children: _jsx(CheckBox, { checked: isMarkerEnabled, onChange: (enabled) => handleChange({ enabled }) }) }), _jsx(FormRow, { label: "Marker Size", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { disabled: !isMarkerEnabled, type: "number", className: "twa:w-full", min: 1, value: sparklineOptions.marker?.size ?? '', onChange: (e) => handleChange({ size: Number(e.target.value) }), title: "The size in pixels of the markers" }) }) }), _jsx(FormRow, { label: "Marker Shape", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onValueChange: (shape) => handleChange({ shape: shape }), items: markerShapes }) }) }), _jsx(FormRow, { label: "Fill", children: _jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: sparklineOptions.marker?.stroke, onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isMarkerEnabled, className: "twa:w-[70px]", type: "number", min: 0, value: sparklineOptions.marker?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }), title: "The width of the marker stroke in pixels" })] }) })] }));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Markers", children: _jsx(CheckBox, { checked: isMarkerEnabled, onChange: (enabled) => handleChange({ enabled }) }) }), _jsx(FormRow, { label: "Marker Size", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { disabled: !isMarkerEnabled, type: "number", className: "twa:w-full", min: 1, value: sparklineOptions.marker?.size ?? '', onChange: (e) => handleChange({ size: Number(e.target.value) }), title: "The size in pixels of the markers" }) }) }), _jsx(FormRow, { label: "Marker Shape", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onValueChange: (shape) => handleChange({ shape: shape }), items: markerShapes }) }) }), _jsx(FormRow, { label: "Fill", children: _jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: cssColorToString(sparklineOptions.marker?.stroke) ?? '', onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { disabled: !isMarkerEnabled, className: "twa:w-[70px]", type: "number", min: 0, value: sparklineOptions.marker?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }), title: "The width of the marker stroke in pixels" })] }) })] }));
 };
 const SparklineHighlightOptions = ({ options, onChange, }) => {
     const { api } = useOnePageAdaptableWizardContext();
@@ -369,5 +379,5 @@ const SparklineHighlightOptions = ({ options, onChange, }) => {
             },
         });
     };
-    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Item Fill", children: _jsx(ColorPicker, { title: "The colour for filling highlighted items", api: api, value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) }) }), _jsx(FormRow, { label: "Item Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: highlightOptions?.highlightedItem?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedItem?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" })] }) }), _jsx(FormRow, { label: "Series", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Stroke Width" }), _jsx(AdaptableInput, { disabled: !highlightOptions?.enabled, className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedSeries?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })] }) })] }));
+    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Item Fill", children: _jsx(ColorPicker, { title: "The colour for filling highlighted items", api: api, value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) }) }), _jsx(FormRow, { label: "Item Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: cssColorToString(highlightOptions?.highlightedItem?.stroke) ?? '', onChange: (stroke) => handleItemChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedItem?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" })] }) }), _jsx(FormRow, { label: "Series", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Stroke Width" }), _jsx(AdaptableInput, { disabled: !highlightOptions?.enabled, className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedSeries?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })] }) })] }));
 };

package/src/View/Wizard/OnePageAdaptableWizard.d.ts

@@ -65,6 +65,6 @@ export interface OnePageAdaptableWizardProps<ENTITY> {
      */
     headerPreview?: React.ReactNode;
 }
-export declare const OnePageAdaptableWizard: <ENTITY extends unknown>(props: OnePageAdaptableWizardProps<ENTITY>) => React.JSX.Element;
-export declare const OnePageWizardSummary: <ENTITY extends unknown>() => React.JSX.Element;
+export declare const OnePageAdaptableWizard: <ENTITY extends any>(props: OnePageAdaptableWizardProps<ENTITY>) => React.JSX.Element;
+export declare const OnePageWizardSummary: <ENTITY extends any>() => React.JSX.Element;
 export {};

package/src/View/Wizard/OnePageWizards.d.ts

@@ -50,5 +50,5 @@ export interface OnePageWizardProps<ENTITY> {
      */
     headerPreview?: React.ReactNode;
 }
-export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => React.JSX.Element;
+export declare const OnePageWizard: <ENTITY extends any>(props: OnePageWizardProps<ENTITY>) => React.JSX.Element;
 export {};

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -5,7 +5,7 @@ import { AdaptableApi, DestroyConfig } from '../Api/AdaptableApi';
 import { AdaptableVariant, IAdaptable, NormalizeAdaptableStateOptions } from '../AdaptableInterfaces/IAdaptable';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { AdaptablePlugin } from '../AdaptableOptions/AdaptablePlugin';
-import { AgGridAdapter } from './AgGridAdapter';
+import { AgGridAdapter, RowNodeEvent } from './AgGridAdapter';
 import { IDataService } from '../Utilities/Services/Interface/IDataService';
 import { AdaptableState } from '../AdaptableState/AdaptableState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
@@ -54,7 +54,6 @@ interface AdaptableInitInternalConfig<TData = any> {
 }
 export declare class AdaptableAgGrid implements IAdaptable {
     logger: AdaptableLogger;
-    private _id;
     lifecycleState: AdaptableLifecycleState;
     variant: AdaptableVariant;
     private emitter;
@@ -94,7 +93,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     ThemeService: IThemeService;
     private LicenseService;
     private ChartingService;
-    private rowListeners;
+    private isListeningToAgGridRowNodeEvents;
     private debouncedSetSelectedRows;
     private debouncedSetSelectedCells;
     private agGridListenerKeydown;
@@ -131,9 +130,6 @@ export declare class AdaptableAgGrid implements IAdaptable {
     constructor(config?: {
         getAgGridColumnApiModuleReference?: () => Module;
     });
-    static forEachAdaptable(fn: (adaptable: AdaptableAgGrid) => void): void;
-    private static collectInstance;
-    private static dismissInstance;
     get isAgGridInitialising(): boolean;
     get isReady(): boolean;
     get isAvailable(): boolean;
@@ -187,6 +183,22 @@ export declare class AdaptableAgGrid implements IAdaptable {
      * Either initializes the AG Grid instance or delegates it to the framework wrappers (React/Anglar)
      */
     private initializeAgGrid;
+    /**
+     * Derives the host element of the grid (the element the framework wrapper / `createGrid()` renders
+     * the grid into) when `ContainerOptions.agGridContainer` is not provided.
+     *
+     * AG Grid 36+ wraps the grid in three grid-owned `div.ag-styled-root` elements which mirror the
+     * theme classes (`ag-theme-params-N ...`, or the host's `ag-theme-<name>` in legacy mode);
+     * `AgGridAdapter.getAgGridRootElement()` is the innermost one. These wrappers must be skipped:
+     * they are re-classed by AG Grid on every theme change, so anything AdapTable adds/removes on them
+     * (legacy theme switching) would be lost.
+     *
+     * Resolution order:
+     * 1. the closest non-`.ag-styled-root` ancestor of the grid root (the host element)
+     * 2. legacy theme mode only: if the host element has no `ag-theme-*` class, the closest ancestor
+     *    which has one (AG Grid itself accepts the theme class anywhere up the tree)
+     */
+    private deriveAgGridContainerElement;
     useRowNodeLookUp(): boolean;
     private buildInitContainerContext;
     getAgGridContainerElement(): HTMLElement | null;
@@ -198,6 +210,13 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private initAdaptableStore;
     private mapAdaptableStateToAgGridState;
     private addGridEventListeners;
+    /**
+     * see #local_event_service_monkey_patch (AgGridAdapter.ts)
+     *
+     * Entry point for the AG Grid RowNode `dataChanged` / `cellChanged` events, which AG Grid does not expose publicly.
+     * These drive Adaptable's data change detection (CellChanged events, Alerts, Flashing Cells, etc.)
+     */
+    onAgGridRowNodeEvent(event: RowNodeEvent): void;
     private shouldAutoSizeLayout;
     private autoSizeLayoutIfNeeded;
     forPlugins(callback: (plugin: AdaptablePlugin) => any): void;
@@ -232,6 +251,11 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private __forceUpdateColumnModel;
     updateColumnModelAndRefreshGrid(): void;
     _updateColumnModelAndRefreshGridNow(): void;
+    /**
+     * Re-applies the current sort, eg. after a Custom Sort was added/edited/removed at runtime.
+     * The column comparators are already up to date (see #stable_col_def_callbacks), AG Grid just has to sort again.
+     */
+    refreshSortIfColumnsSorted(): void;
     redrawBody(): void;
     refreshHeader(): void;
     redrawRows(rowNodes?: IRowNode[]): void;