@adaptabletools/adaptable 23.0.21 → 23.1.0-canary.0

package/src/agGrid/AgGridColumnAdapter.js

@@ -49,6 +49,22 @@ const stripCssKeys = (style, keys) => {
 };
 const stripFontCssKeys = (style) => stripCssKeys(style, FONT_CSS_KEYS);
 const stripCellBoxCssKeys = (style) => stripCssKeys(style, CELL_BOX_CSS_KEYS);
+const STABLE_CALLBACK_COL_DEF_PROPERTIES = new Set([
+    'cellStyle',
+    'cellClass',
+    'headerStyle',
+    'headerClass',
+    'valueGetter',
+    'valueFormatter',
+    'valueSetter',
+    'editable',
+    'comparator',
+    'pivotComparator',
+    'getFindText',
+    'getQuickFilterText',
+    'tooltipValueGetter',
+    'cellEditorParams',
+]);
 export function getEditorForColumnDataType(columnDataType, variant) {
     if (columnDataType === 'number') {
         return variant === 'react' ? AdaptableReactNumberEditor : AdaptableNumberEditor;
@@ -60,9 +76,20 @@ export function getEditorForColumnDataType(columnDataType, variant) {
 export class AgGridColumnAdapter {
     adaptableInstance;
     colDefPropertyCache;
+    workingColDefs;
+    sortCacheInvalidationNeeded = false;
+    stableCallbacks;
+    stableCallbackImplementations;
+    stableCallbackOwners;
+    adaptableColumnFilterDef;
+    adaptableFloatingFilterComponent;
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
         this.colDefPropertyCache = new Map();
+        this.workingColDefs = new Map();
+        this.stableCallbacks = new Map();
+        this.stableCallbackImplementations = new Map();
+        this.stableCallbackOwners = new WeakMap();
     }
     getVariant() {
         return this.adaptableInstance.variant;
@@ -71,6 +98,15 @@ export class AgGridColumnAdapter {
         this.adaptableInstance = null;
         this.colDefPropertyCache.clear();
         this.colDefPropertyCache = null;
+        this.workingColDefs.clear();
+        this.workingColDefs = null;
+        this.stableCallbacks.clear();
+        this.stableCallbacks = null;
+        this.stableCallbackImplementations.clear();
+        this.stableCallbackImplementations = null;
+        this.stableCallbackOwners = null;
+        this.adaptableColumnFilterDef = null;
+        this.adaptableFloatingFilterComponent = null;
     }
     get adaptableApi() {
         return this.adaptableInstance.api;
@@ -81,9 +117,55 @@ export class AgGridColumnAdapter {
     get agGridApi() {
         return this.adaptableApi.agGridApi;
     }
+    getColDefForSetup(col) {
+        return this.workingColDefs.get(col.getColId()) ?? col.getColDef();
+    }
+    beginColDefChanges(col) {
+        const workingColDef = { ...col.getColDef() };
+        this.workingColDefs.set(col.getColId(), workingColDef);
+        return workingColDef;
+    }
+    commitColDefChanges(col) {
+        const colId = col.getColId();
+        const workingColDef = this.workingColDefs.get(colId);
+        this.workingColDefs.delete(colId);
+        if (!workingColDef) {
+            return;
+        }
+        const agColumn = col;
+        if (typeof agColumn.setColDef !== 'function') {
+            errorOnce(`CRITICAL: AG Grid 'AgColumn.setColDef()' is not available, Adaptable cannot commit column definition changes! (see #col_def_commit)`);
+            Object.assign(col.getColDef(), workingColDef);
+            return;
+        }
+        agColumn.setColDef(workingColDef, col.getUserProvidedColDef(), 'api');
+    }
+    toStableCallback(colId, propertyName, implementation) {
+        const key = `${colId}.${propertyName}`;
+        this.stableCallbackImplementations.set(key, implementation);
+        let stableCallback = this.stableCallbacks.get(key);
+        if (!stableCallback) {
+            stableCallback = (...args) => {
+                return this.stableCallbackImplementations?.get(key)?.(...args);
+            };
+            this.stableCallbacks.set(key, stableCallback);
+            this.stableCallbackOwners.set(stableCallback, { colId, propertyName });
+        }
+        return stableCallback;
+    }
+    resolveUserProvidedValue(propertyName, value) {
+        if (typeof value !== 'function') {
+            return value;
+        }
+        const owner = this.stableCallbackOwners.get(value);
+        if (!owner) {
+            return value;
+        }
+        return this.colDefPropertyCache.get(`user.${owner.colId}.${propertyName}`);
+    }
     setColDefProperty(col, propertyName, propertyGetter) {
         const colId = col.getColId();
-        const colDef = col.getColDef();
+        const colDef = this.getColDefForSetup(col);
         const colSetupInfo = {
             col,
             colDef,
@@ -94,10 +176,15 @@ export class AgGridColumnAdapter {
         const value = colDef[propertyName];
         const isUserDefined = value !== this.colDefPropertyCache.get(adaptableKey);
         if (isUserDefined) {
-            this.colDefPropertyCache.set(userKey, value);
+            this.colDefPropertyCache.set(userKey, this.resolveUserProvidedValue(propertyName, value));
         }
         const userValue = this.colDefPropertyCache.get(userKey);
-        const adaptableValue = propertyGetter(userValue);
+        let adaptableValue = propertyGetter(userValue);
+        if (typeof adaptableValue === 'function' &&
+            adaptableValue !== userValue &&
+            STABLE_CALLBACK_COL_DEF_PROPERTIES.has(propertyName)) {
+            adaptableValue = this.toStableCallback(colId, propertyName, adaptableValue);
+        }
         if (adaptableValue != null) {
             this.colDefPropertyCache.set(adaptableKey, adaptableValue);
         }
@@ -115,7 +202,12 @@ export class AgGridColumnAdapter {
         if (theValue === undefined && colDef[propertyName] === undefined) {
             return;
         }
+        const previousValue = colDef[propertyName];
         colDef[propertyName] = theValue;
+        if ((propertyName === 'comparator' || propertyName === 'pivotComparator') &&
+            previousValue !== theValue) {
+            this.sortCacheInvalidationNeeded = true;
+        }
     }
     getUserColDefProperty(columnId, propertyName) {
         const userKey = `user.${columnId}.${propertyName}`;
@@ -148,42 +240,54 @@ export class AgGridColumnAdapter {
             cols = cols.filter((col) => specificColumnIds.includes(col.getColId()));
         }
         cols.forEach((col) => {
-            const colDef = col.getColDef();
             const colId = col.getColId();
             if (this.shouldSkipColumn(colId)) {
                 return;
             }
-            const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(colId);
-            const colSetupInfo = {
-                col,
-                colDef,
-                colId,
-                abColumn,
-            };
-            const isAutoRowGroupColumn = this.adaptableApi.columnApi.isAutoRowGroupColumn(colId);
-            this.setupColumnCellRenderer(colSetupInfo);
-            this.setupColumnCellStyle(colSetupInfo);
-            this.setupColumnCellClass(colSetupInfo);
-            this.setupColumnHeaderStyle(colSetupInfo);
-            this.setupColumnHeaderClass(colSetupInfo);
-            this.setupColumnValueGetter(colSetupInfo);
-            this.setupColumnTooltipValueGetter(colSetupInfo);
-            if (!isAutoRowGroupColumn) {
-                this.setupColumnFilter(colSetupInfo);
-                this.setupColumnFloatingFilter(colSetupInfo);
+            const colDef = this.beginColDefChanges(col);
+            try {
+                this.setupColumn({ col, colDef, colId });
+            }
+            finally {
+                this.commitColDefChanges(col);
             }
-            this.setupColumnValueFormatter(colSetupInfo);
-            this.setupColumnEditable(colSetupInfo);
-            this.setupColumnValueSetter(colSetupInfo);
-            this.setupColumnComparator(colSetupInfo);
-            this.setupColumnGetFindText(colSetupInfo);
-            this.setupColumnCellEditor(colSetupInfo);
-            this.setupColumnHeader(colSetupInfo);
-            this.setupColumnQuickFilterText(colSetupInfo);
-            this.setupColumnAllowedAggFuncs(colSetupInfo);
-            this.setupColumnType(colSetupInfo);
-            this.setupColumnCellDataType(colSetupInfo);
         });
+        if (this.sortCacheInvalidationNeeded) {
+            this.sortCacheInvalidationNeeded = false;
+            this.adaptableInstance.agGridAdapter?.DANGER_invalidateSortCache();
+        }
+    }
+    setupColumn({ col, colDef, colId }) {
+        const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(colId);
+        const colSetupInfo = {
+            col,
+            colDef,
+            colId,
+            abColumn,
+        };
+        const isAutoRowGroupColumn = this.adaptableApi.columnApi.isAutoRowGroupColumn(colId);
+        this.setupColumnCellRenderer(colSetupInfo);
+        this.setupColumnCellStyle(colSetupInfo);
+        this.setupColumnCellClass(colSetupInfo);
+        this.setupColumnHeaderStyle(colSetupInfo);
+        this.setupColumnHeaderClass(colSetupInfo);
+        this.setupColumnValueGetter(colSetupInfo);
+        this.setupColumnTooltipValueGetter(colSetupInfo);
+        if (!isAutoRowGroupColumn) {
+            this.setupColumnFilter(colSetupInfo);
+            this.setupColumnFloatingFilter(colSetupInfo);
+        }
+        this.setupColumnValueFormatter(colSetupInfo);
+        this.setupColumnEditable(colSetupInfo);
+        this.setupColumnValueSetter(colSetupInfo);
+        this.setupColumnComparator(colSetupInfo);
+        this.setupColumnGetFindText(colSetupInfo);
+        this.setupColumnCellEditor(colSetupInfo);
+        this.setupColumnHeader(colSetupInfo);
+        this.setupColumnQuickFilterText(colSetupInfo);
+        this.setupColumnAllowedAggFuncs(colSetupInfo);
+        this.setupColumnType(colSetupInfo);
+        this.setupColumnCellDataType(colSetupInfo);
     }
     setupColumnValueGetter({ col }) {
         this.setColDefProperty(col, 'valueGetter', (userValue) => {
@@ -744,11 +848,23 @@ export class AgGridColumnAdapter {
                 this.adaptableApi.consoleError(`Column "${colId}" has a custom filter in colDef.filter, but Adaptable filtering only accepts boolean (true/false) values for this property.`);
                 return false;
             }
-            return {
+            return this.getAdaptableColumnFilterDef();
+        });
+    }
+    getAdaptableColumnFilterDef() {
+        if (!this.adaptableColumnFilterDef) {
+            this.adaptableColumnFilterDef = {
                 component: AgGridFilterAdapterFactory(this.adaptableInstance),
                 handler: () => new AdaptableFilterHandler(this.adaptableApi),
             };
-        });
+        }
+        return this.adaptableColumnFilterDef;
+    }
+    getAdaptableFloatingFilterComponent() {
+        if (!this.adaptableFloatingFilterComponent) {
+            this.adaptableFloatingFilterComponent = AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
+        }
+        return this.adaptableFloatingFilterComponent;
     }
     setupColumnFloatingFilter({ col, colDef }) {
         const userProvidedFilterProp = this.getUserColDefProperty(col.getColId(), 'filter');
@@ -775,13 +891,13 @@ export class AgGridColumnAdapter {
             if (isFloatingFilterDisabled) {
                 return;
             }
-            return AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
+            return this.getAdaptableFloatingFilterComponent();
         });
         this.setColDefProperty(col, 'floatingFilter', () => {
             if (isFloatingFilterDisabled) {
                 return;
             }
-            return AgGridFloatingFilterAdapterFactory(this.adaptableInstance);
+            return this.getAdaptableFloatingFilterComponent();
         });
         this.setColDefProperty(col, 'suppressFloatingFilterButton', () => {
             return !isFloatingFilterDisabled;

package/src/agGrid/AgGridMenuAdapter.d.ts

@@ -1,5 +1,5 @@
 import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { DefaultMenuItem, GetContextMenuItems, GetContextMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from 'ag-grid-enterprise';
+import { DefaultMenuItem, GetContextMenuItems, GetContextMenuItemsParams, GetColumnMenuItemsParams, GetMainMenuItems, GetMainMenuItemsParams, MenuItemDef } from 'ag-grid-enterprise';
 import { AdaptableColumn } from '../AdaptableState/Common/AdaptableColumn';
 import { AdaptableMenuItem } from '../AdaptableState/Common/Menu';
 export declare class AgGridMenuAdapter {
@@ -8,8 +8,14 @@ export declare class AgGridMenuAdapter {
     private get adaptableOptions();
     private get adaptableApi();
     destroy(): void;
-    buildColumnMenu(params: GetMainMenuItemsParams, originalGetMainMenuItems: GetMainMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    buildColumnMenu(params: GetMainMenuItemsParams | GetColumnMenuItemsParams, _originalGetMainMenuItems?: GetMainMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    /**
+     * Columns Tool Panel / Column Chooser (AG Grid 36.1 `getColumnMenuItems`).
+     * Phase 1 only strips dual-UI items; AdapTable items are added in Phase 2.
+     */
+    buildColumnsToolPanelMenu(params: GetColumnMenuItemsParams): (DefaultMenuItem | MenuItemDef)[];
     buildContextMenu(params: GetContextMenuItemsParams, originalGetContextMenuItems: GetContextMenuItems): (DefaultMenuItem | MenuItemDef)[];
+    private filterSuppressedAgGridDualUiMenuItems;
     private mapAgGridItemTypeToAgGridMenuItem;
     private removeConsecutiveSeparators;
     private createColumnMenuContextObject;

package/src/agGrid/AgGridMenuAdapter.js

@@ -3,6 +3,13 @@ import { iconToString } from '../components/icons';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { MENU_SEPARATOR } from '../Utilities/Constants/GeneralConstants';
 import { getAggFuncName, getDisplayAggFuncNames, isWeightedAverageAggregation, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../AdaptableState/Common/AggregationColumns';
+const AG_GRID_DUAL_UI_MENU_ITEMS = new Set([
+    'calculatedColumn',
+    'editCalculatedColumn',
+    'removeCalculatedColumn',
+    'editColumnName',
+    'showValuesAsSubMenu',
+]);
 function createAgGridIcon(name) {
     const element = document.createElement('span');
     element.className = `ag-icon ag-icon-${name}`;
@@ -114,8 +121,8 @@ export class AgGridMenuAdapter {
     destroy() {
         this._adaptableInstance = null;
     }
-    buildColumnMenu(params, originalGetMainMenuItems) {
-        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+    buildColumnMenu(params, _originalGetMainMenuItems) {
+        const agGridMenuItems = this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []);
         if (!params.column) {
             return agGridMenuItems;
         }
@@ -158,18 +165,21 @@ export class AgGridMenuAdapter {
         ];
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
+    buildColumnsToolPanelMenu(params) {
+        return this.removeConsecutiveSeparators(this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []));
+    }
     buildContextMenu(params, originalGetContextMenuItems) {
         if (!params.column) {
             return [];
         }
         if (!this.adaptableApi.userInterfaceApi.isAdaptableUIVisible()) {
-            return (params.defaultItems ? [...params.defaultItems] : []);
+            return this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []);
         }
         this._adaptableInstance.refreshSelectedCellsState();
         const contextMenuOptions = this.adaptableOptions.contextMenuOptions;
         const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId(params.column?.getColId());
         const menuContext = this.createContextMenuContextObject(params, adaptableColumn);
-        const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
+        const agGridMenuItems = this.filterSuppressedAgGridDualUiMenuItems(params.defaultItems ? [...params.defaultItems] : []);
         const agGridCopyItems = agGridMenuItems.filter((item) => ['copy', 'copyWithHeaders', 'copyWithGroupHeaders', 'cut', 'paste'].includes(item));
         const otherAgGridItems = agGridMenuItems.filter((item) => !agGridCopyItems.includes(item) &&
             !['export', 'csvExport', 'excelExport'].includes(item));
@@ -213,6 +223,9 @@ export class AgGridMenuAdapter {
         ];
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
+    filterSuppressedAgGridDualUiMenuItems(items) {
+        return items.filter((item) => typeof item !== 'string' || !AG_GRID_DUAL_UI_MENU_ITEMS.has(item));
+    }
     mapAgGridItemTypeToAgGridMenuItem(itemName) {
         return {
             menuType: 'AgGrid',

package/src/agGrid/AgGridModulesAdapter.js

@@ -17,6 +17,12 @@ export class AgGridModulesAdapter {
         return this.adaptableInstance.agGridAdapter.getAgGridApi();
     }
     isAgGridModuleRegistered(moduleName) {
+        if (moduleName === 'ClientSideRowModelModule') {
+            const rowModelType = this.agGridApi.getGridOption('rowModelType');
+            if (rowModelType == null || rowModelType === 'clientSide') {
+                return true;
+            }
+        }
         let isModuleRegistered = this.agGridApi.isModuleRegistered(moduleName);
         if (!isModuleRegistered) {
             const serverSideDependencies = [
@@ -61,7 +67,6 @@ export class AgGridModulesAdapter {
                 mandatoryModules.push('ViewportRowModelModule');
                 break;
             default:
-                mandatoryModules.push('ClientSideRowModelModule');
                 mandatoryModules.push('ClientSideRowModelApiModule');
         }
         mandatoryModules.push('CellApiModule', 'CellStyleModule', 'ColumnApiModule', 'ColumnMenuModule', 'ContextMenuModule', 'CustomFilterModule', 'EventApiModule', 'ExternalFilterModule', 'GridStateModule', 'GroupFilterModule', 'RenderApiModule', 'RowApiModule', 'RowGroupingModule', 'RowStyleModule', 'ScrollApiModule');

package/src/agGrid/AgGridThemeAdapter.d.ts

@@ -13,7 +13,24 @@ export declare class AgGridThemeAdapter {
     applyAgGridThemeOnAdaptableThemeChange(adaptableTheme: AdaptableTheme, variantTheme: string, agGridContainer: HTMLElement, themesToRemove: AdaptableTheme[]): void;
     private getAgGridContainerElement;
     private legacy_applyAgGridThemeOnAdaptableThemeChange;
+    /**
+     * Returns the space-separated `ag-theme-*` class names which have to be applied to elements rendered
+     * OUTSIDE the grid DOM (e.g. AdapTable popups/tooltips portaled to `document.body`) so that they
+     * pick up the AG Grid theme.
+     *
+     * - legacy theme mode: the `ag-theme-<name>` class of the grid container
+     * - Theming API: the `ag-theme-inherit-N` + `ag-theme-<part>-N ... ag-theme-params-N` classes
+     *   AG Grid 36 applies on the grid-owned `.ag-styled-root` wrappers around the grid
+     */
     getAgGridCurrentThemeClassNames(): string;
+    /**
+     * AG Grid 36+ wraps the grid in three grid-owned `div.ag-styled-root` elements
+     * (outer: `ag-theme-inherit-N`, middle: `ag-theme-<part>-N ... ag-theme-params-N`, inner: `ag-ltr|ag-rtl`);
+     * `AgGridAdapter.getAgGridRootElement()` is the innermost one.
+     * Collects the `ag-theme-*` classes of these wrappers (direction classes are skipped).
+     */
+    private getThemeClassNamesFromStyledRoots;
+    private getThemeClassNamesFromThemeInternals;
     private getAgGridLightThemeName;
     private legacy_getAgGridCurrentThemeClassNames;
 }

package/src/agGrid/AgGridThemeAdapter.js

@@ -74,15 +74,46 @@ export class AgGridThemeAdapter {
         }
     }
     getAgGridCurrentThemeClassNames() {
-        if (this.agGridThemeMode === 'legacy') {
-            this.legacy_getAgGridCurrentThemeClassNames();
-        }
         const currentAgGridTheme = this._adaptableInstance.agGridAdapter.getGridOption('theme');
-        if (currentAgGridTheme === 'legacy') {
+        if (this.agGridThemeMode === 'legacy' || currentAgGridTheme === 'legacy') {
             return this.legacy_getAgGridCurrentThemeClassNames();
         }
-        const currentAgGridTheme__cssClassCache = currentAgGridTheme?._cssClassCache;
-        return currentAgGridTheme__cssClassCache ?? '';
+        const classNamesFromDom = this.getThemeClassNamesFromStyledRoots();
+        if (classNamesFromDom) {
+            return classNamesFromDom;
+        }
+        return this.getThemeClassNamesFromThemeInternals(currentAgGridTheme);
+    }
+    getThemeClassNamesFromStyledRoots() {
+        const gridRoot = this._adaptableInstance.agGridAdapter.getAgGridRootElement();
+        const themeClassNames = [];
+        let element = gridRoot ?? null;
+        while (element && element.classList?.contains('ag-styled-root')) {
+            element.classList.forEach((cls) => {
+                if (cls.indexOf('ag-theme-') === 0) {
+                    themeClassNames.push(cls);
+                }
+            });
+            element = element.parentElement;
+        }
+        return themeClassNames.join(' ');
+    }
+    getThemeClassNamesFromThemeInternals(theme) {
+        if (!theme || typeof theme === 'string') {
+            return '';
+        }
+        const themeInternals = theme;
+        let cssClasses;
+        try {
+            cssClasses = themeInternals._getCssClasses?.() ?? themeInternals._cssClassCache;
+        }
+        catch {
+            cssClasses = themeInternals._cssClassCache;
+        }
+        if (Array.isArray(cssClasses)) {
+            return cssClasses.filter(Boolean).join(' ');
+        }
+        return typeof cssClasses === 'string' ? cssClasses : '';
     }
     getAgGridLightThemeName() {
         const container = this.getAgGridContainerElement();

package/src/components/Combobox/index.d.ts

@@ -33,7 +33,18 @@ export type MultiComboboxProps<T extends ComboboxItemType> = Omit<AdaptableCombo
 } & ComboboxDataProps<T>;
 export declare const MultiCombobox: <T extends ComboboxItemType>(props: MultiComboboxProps<T>) => React.JSX.Element;
 export type GridFilterComboboxProps<T extends ComboboxItemType> = Omit<MultiComboboxProps<T>, 'showSelectAllCheckbox' | 'searchable' | 'renderInput' | 'renderInputValues'> & {
+    /**
+     * When true, prefix the selected values in the collapsed input with the
+     * selected count (e.g. `(3)`). Ignored when `renderInputValues` is provided.
+     */
     showSelectedCount?: boolean;
+    /**
+     * Custom content for the selected values in the collapsed input (rendered inside the
+     * standard wrapper). When provided, the built-in selected count is not rendered -
+     * include one in the returned content if needed.
+     * When omitted, selected labels are joined with a comma.
+     */
+    renderInputValues?: (items: T[]) => React.ReactNode;
 };
 export declare const GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME: string;
 export declare const GridFilterCombobox: <T extends ComboboxItemType>(props: GridFilterComboboxProps<T>) => React.JSX.Element;

package/src/components/Combobox/index.js

@@ -567,7 +567,7 @@ export const MultiCombobox = (props) => {
 };
 export const GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME = cn('twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', 'twa:[.ab-FloatingFilter_&]:[line-height:1]', 'twa:[.ab-FloatingFilter_[data-slot=combobox-trigger]]:py-0', 'twa:[.ab-FloatingFilter_&]:[container-type:size]');
 export const GridFilterCombobox = (props) => {
-    const { showSelectedCount = false, placeholder = 'Select...', ...comboboxProps } = props;
+    const { showSelectedCount = false, placeholder = 'Select...', renderInputValues: renderInputValuesProp, ...comboboxProps } = props;
     const sharedProps = {
         placeholder,
         showSelectAllCheckbox: true,
@@ -579,11 +579,13 @@ export const GridFilterCombobox = (props) => {
         showClear: false,
         showTrigger: false,
         renderInputValues: (items) => {
-            let children = items.map((item) => getItemTextLabel(item)).join(', ');
+            let children = renderInputValuesProp
+                ? renderInputValuesProp(items)
+                : items.map((item) => getItemTextLabel(item)).join(', ');
             if (items.length === 0) {
                 children = (_jsx("span", { "data-name": "placeholder", className: "twa:text-muted-foreground", children: placeholder }));
             }
-            return (_jsx(_Fragment, { children: _jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && items.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", items.length, ")"] })), children] }) }));
+            return (_jsx(_Fragment, { children: _jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && !renderInputValuesProp && items.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("span", { "data-name": "multiple-values-count", children: ["(", items.length, ")"] }), ' '] })), children] }) }));
         },
     };
     const className = cn(GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, comboboxProps.className);

package/src/components/Radio/index.d.ts

@@ -22,14 +22,14 @@ export interface RadioProps extends TypeProps, Omit<BoxProps, keyof TypeProps> {
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
 }
-export declare const useRadioContext: <T extends unknown>() => {
+export declare const useRadioContext: <T extends any>() => {
     value: T;
     onChange: (value: T) => void;
     name: string;
     variant: Variant;
 };
 declare const Radio: ({ children, checked, onChange, value, name, gapDistance, childrenPosition, as, id, tabIndex, disabled, ...props }: RadioProps) => React.JSX.Element;
-export declare const RadioGroup: <T extends unknown>(props: {
+export declare const RadioGroup: <T extends any>(props: {
     orientation: "horizontal" | "vertical";
     value?: T;
     name?: string;

package/src/components/Tree/TreeDropdown/index.d.ts

@@ -48,7 +48,18 @@ export type GridFilterTreeDropdownProps<T extends TreeListItem<any>> = Omit<NewT
     /**
      * When true, prefix the selected-values summary with `(N)` where N is the
      * number of selected leaves. Mirrors `GridFilterCombobox.showSelectedCount`.
+     * Ignored when `renderInputValues` is provided.
      */
     showSelectedCount?: boolean;
+    /**
+     * Custom content for the selected values in the collapsed input (rendered inside the
+     * standard wrapper). Mirrors `GridFilterCombobox.renderInputValues`: called with one
+     * item per selected leaf (`value` is the full leaf path, `label` its display label).
+     * When provided, the built-in selected count is not rendered.
+     */
+    renderInputValues?: (items: {
+        value: any;
+        label: string;
+    }[]) => React.ReactNode;
 };
 export declare function GridFilterTreeDropdown<T extends TreeListItem<any>>(props: GridFilterTreeDropdownProps<T>): React.JSX.Element;

package/src/components/Tree/TreeDropdown/index.js

@@ -399,17 +399,20 @@ export function TreeDropdown(props) {
     return (_jsx(MultiCombobox, { ...comboboxProps }));
 }
 export function GridFilterTreeDropdown(props) {
-    const { showSelectedCount = false, placeholder = 'Select...', className, ...rest } = props;
+    const { showSelectedCount = false, placeholder = 'Select...', renderInputValues: renderInputValuesProp, className, ...rest } = props;
     const renderSelectedValues = useCallback(({ selectedLeafPaths, getLabelForPath }) => {
         let children;
         if (selectedLeafPaths.length === 0) {
             children = (_jsx("span", { "data-name": "placeholder", className: "twa:text-muted-foreground", children: placeholder }));
         }
+        else if (renderInputValuesProp) {
+            children = renderInputValuesProp(selectedLeafPaths.map((path) => ({ value: path, label: getLabelForPath(path) })));
+        }
         else {
             children = selectedLeafPaths.map((path) => getLabelForPath(path)).join(', ');
         }
-        return (_jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && selectedLeafPaths.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", selectedLeafPaths.length, ")"] })), children] }));
-    }, [placeholder, showSelectedCount]);
+        return (_jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && !renderInputValuesProp && selectedLeafPaths.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", selectedLeafPaths.length, ")"] })), children] }));
+    }, [placeholder, showSelectedCount, renderInputValuesProp]);
     const mergedClassName = cn(GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, className);
     return (_jsx(TreeDropdown, { ...rest, placeholder: placeholder, className: mergedClassName, showClear: rest.showClear ?? false, resizable: rest.resizable ?? true, renderSelectedValues: renderSelectedValues }));
 }

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1787139899825 || Date.now(),
-    VERSION: "23.0.21" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1789413930421 || Date.now(),
+    VERSION: "23.1.0-canary.0" || '--current-version--',
 };

package/src/layout-manager/src/index.d.ts

@@ -104,6 +104,15 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private computeColumnOrderAndVisibility;
     autoSizeColumns(columnIds?: string[]): false | string[];
     private applyPivotLayout;
+    /**
+     * Applies the layout state that targets pivot result columns (order, sorts, pinning).
+     *
+     * Must be called after the primary applyColumnState call(s) - i.e. after the pivot
+     * result columns have been (re)generated by AG Grid - because pivot result column
+     * state included in the same call that changes pivot/aggregation config is applied
+     * to the previous generation of pivot result columns (see AG Grid 36 notes in applyPivotLayout).
+     */
+    private applyPivotResultColumnsState;
     applyPivotTotals(layout: PivotLayoutModel): void;
     applyColumnGroupCollapseExpandState(layout: PivotLayoutModel | TableLayoutModel): void;
     private withSuppressColumnAnimation;