@adaptabletools/adaptable 21.2.1 → 22.0.0-canary.0

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

@@ -1,14 +1,18 @@
 import * as React from 'react';
 import { CSSProperties } from 'react';
-import { TextProps } from 'rebass';
+import { BoxProps } from '../../components/Flex';
 export type OnePageWizardContextType<T> = {
     data: T;
     sections: (OnePageWizardSection<T> | '-')[];
     setCurrentSection: (index: number) => void;
 };
-export declare const SummaryTag: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
-export declare const SummaryText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
-export declare const FormDescriptionText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+type CmpProps = BoxProps & {
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const SummaryTag: React.FunctionComponent<React.PropsWithChildren<CmpProps>>;
+export declare const SummaryText: React.FunctionComponent<React.PropsWithChildren<CmpProps>>;
+export declare const FormDescriptionText: React.FunctionComponent<React.PropsWithChildren<CmpProps>>;
 export declare const OnePageWizardContext: React.Context<OnePageWizardContextType<any>>;
 export declare function useOnePageWizardContext<ENTITY>(): OnePageWizardContextType<ENTITY>;
 export type OnePageWizardSection<ENTITY> = {
@@ -21,6 +25,7 @@ export type OnePageWizardSection<ENTITY> = {
 };
 export interface OnePageWizardProps<ENTITY> {
     data: ENTITY;
+    modal?: boolean;
     name: string;
     sections: (OnePageWizardSection<ENTITY> | '-')[];
     currentIndex?: number;
@@ -37,3 +42,4 @@ export interface OnePageWizardProps<ENTITY> {
     finishText?: React.ReactNode;
 }
 export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => React.JSX.Element;
+export {};

package/src/View/Wizard/OnePageWizards.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState, useRef } from 'react';
-import { Flex, Box, Text } from 'rebass';
+import clsx from 'clsx';
 import Dialog from '../../components/Dialog';
 import SimpleButton from '../../components/SimpleButton';
 import useProperty from '../../components/utils/useProperty';
@@ -10,9 +10,12 @@ import { Icon } from '../../components/icons';
 import { useResizeObserver } from '../../components/ResizeObserver';
 import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
 import { useKeyboardNavigation } from './useKeyboardNavigation';
-export const SummaryTag = (props) => (React.createElement(Text, { ...props }));
-export const SummaryText = (props) => (React.createElement(Text, { fontSize: 2, mb: 3, ...props }));
-export const FormDescriptionText = (props) => React.createElement(Text, { fontSize: 2, mt: 1, ...props });
+import { Box, Flex } from '../../components/Flex';
+import { twMerge } from '../../twMerge';
+import { targetOwn } from '../../components/twUtils';
+export const SummaryTag = (props) => (React.createElement(Box, { ...props }));
+export const SummaryText = (props) => (React.createElement(Box, { ...props, className: twMerge('twa:text-2 twa:mb-3', props.className) }));
+export const FormDescriptionText = (props) => React.createElement(Box, { ...props, className: twMerge('twa:text-2 twa:mt-1', props.className) });
 export const OnePageWizardContext = React.createContext({
     data: null,
     sections: [],
@@ -41,12 +44,14 @@ export const OnePageWizard = (props) => {
             section.isVisible(props.data, contextValue));
     }, [props.sections]);
     contextValue.sections = visibleSections;
-    if (props.defaultCurrentSectionName) {
-        const candidate = visibleSections.findIndex((section) => section !== '-' && section?.title === props.defaultCurrentSectionName);
-        if (candidate >= 0) {
-            defaultCurrentIndex = candidate;
+    React.useEffect(() => {
+        if (props.defaultCurrentSectionName) {
+            const candidate = visibleSections.findIndex((section) => section !== '-' && section?.title === props.defaultCurrentSectionName);
+            if (candidate >= 0) {
+                setCurrentSection(candidate);
+            }
         }
-    }
+    }, [props.defaultCurrentSectionName, visibleSections]);
     const [namedQuery, setNamedQuery] = useState(false);
     const [navIndexMap] = useState(() => new Map());
     const handleClickFinish = () => {
@@ -57,18 +62,13 @@ export const OnePageWizard = (props) => {
         if (section === '-') {
             return React.createElement(React.Fragment, { key: index });
         }
-        return (React.createElement(Flex, { flexDirection: "column", key: index, "data-name": `section-${index}`, style: { minHeight: '100%' }, mr: 2 },
-            React.createElement(Box, { py: 3, paddingLeft: 2, fontSize: 4, className: "ab-OnePageWizard__details" }, section.details),
-            React.createElement(Box, { flex: 1, className: "ab-OnePageWizard__section" }, section.render(props.data, index))));
+        return (React.createElement(Flex, { flexDirection: "column", key: index, "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2" },
+            React.createElement(Box, { className: "ab-OnePageWizard__details twa:text-4 twa:py-3 twa:pl-2" }, section.details),
+            React.createElement(Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-defaultbackground" }, section.render(props.data, index))));
     };
+    const handleNavigation = useKeyboardNavigation(setCurrentSection, visibleSections);
     const selectedNodeRef = useRef(null);
-    const selectedFeedback = (React.createElement("div", { ref: selectedNodeRef, className: "ab-OnePageWizard__selected-title-overlay", style: {
-            position: 'absolute',
-            background: 'var(--ab-cmp-one-page-wizard-selected-title__background)',
-            pointerEvents: 'none',
-            borderRadius: 'var(--ab__border-radius)',
-            transition: 'top 0.2s',
-        } }));
+    const selectedFeedback = (React.createElement("div", { ref: selectedNodeRef, onKeyDown: (event) => handleNavigation(event), tabIndex: 0, className: clsx('ab-OnePageWizard__selected-title-overlay', 'twa:absolute twa:rounded-standard twa:select-none twa:bg-accent twa:transition-top twa:duration-200', targetOwn.focusOutline) }));
     const sizeOwnerRef = useRef(null);
     const [width, setWidth] = useState(0);
     useResizeObserver(sizeOwnerRef, ({ width }) => {
@@ -82,6 +82,7 @@ export const OnePageWizard = (props) => {
         node.style.left = `${activeElement.offsetLeft}px`;
         node.style.height = `${activeElement.offsetHeight}px`;
         node.style.width = `${activeElement.offsetWidth}px`;
+        node.focus();
     }, [currentSection, width]);
     let navIndex = 0;
     const dialogRef = useRef(null);
@@ -102,15 +103,10 @@ export const OnePageWizard = (props) => {
         acc.set(index, valid);
         return acc;
     }, new Map());
-    useKeyboardNavigation(setCurrentSection, visibleSections);
     const canFinish = !invalidCount;
     return (React.createElement(NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
         React.createElement(OnePageWizardContext.Provider, { value: contextValue },
-            React.createElement(Dialog, { modal: true, isOpen: true, showCloseButton: false, focusOnBrowserVisible: true, style: {
-                    borderRadius: 'var(--ab__border-radius)',
-                    overflow: 'hidden',
-                    height: '90vh',
-                }, ref: dialogRef, onDismiss: () => props.onHide?.(), onKeyDown: (event) => {
+            React.createElement(Dialog, { modal: props.modal ?? true, isOpen: true, showCloseButton: false, focusOnBrowserVisible: true, className: "twa:rounded-standard twa:overflow-hidden twa:h-[90vh]", ref: dialogRef, onDismiss: () => props.onHide?.(), onKeyDown: (event) => {
                     if (event.metaKey || event.ctrlKey) {
                         const { key } = event;
                         if (!isNaN(Number(key))) {
@@ -127,64 +123,54 @@ export const OnePageWizard = (props) => {
                         }
                     }
                 } },
-                React.createElement(Flex, { className: "ab-OnePageWizard", flexDirection: "column", "data-name": props.name, style: {
-                        height: '100%',
-                        width: '90vw',
-                        maxWidth: 1200,
-                        ...props.style,
-                    } },
-                    React.createElement(Flex, { flexDirection: "row", alignItems: "stretch", flex: 1, style: { overflow: 'auto' } },
-                        React.createElement(Flex, { flexDirection: "column", padding: 3, className: "ab-OnePageWizard__section-title-container", ref: sizeOwnerRef, style: {
-                                overflow: 'auto',
-                                position: 'relative',
-                                flex: 'none',
-                                ...props.titleContainerStyle,
-                            } },
+                React.createElement(Box, { className: clsx('ab-OnePageWizard twa:flex twa:flex-col twa:h-full twa:w-[90vw] twa:max-w-[1200px]', 'twa:bg-primarylight twa:text-primary-foreground'), "data-name": props.name, style: props.style },
+                    React.createElement(Flex, { flexDirection: "row", alignItems: "stretch", className: "twa:flex-1 twa:overflow-auto" },
+                        React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:p-3 twa:flex-none twa:overflow-auto twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle },
                             visibleSections.map((section, index) => {
                                 if (section === '-') {
-                                    return (React.createElement(Box, { as: "hr", mt: 2, className: "ab-OnePageWizard__section-separator", key: `${index}-`, style: {
-                                            width: '100%',
-                                            border: 'none',
-                                            borderTop: `1px solid var(--ab-color-inputborder)`,
-                                        } }));
+                                    return (React.createElement(Box, { as: "hr", className: "ab-OnePageWizard__section-separator twa:mt-2 twa:w-full twa:border-t twa:border-t-inputborder", key: `${index}-` }));
                                 }
                                 navIndex++;
                                 navIndexMap.set(navIndex, index);
                                 const active = index === currentSection;
                                 const disabled = false; //!active && !currentSectionValid;
-                                return (React.createElement(Flex, { className: "ab-OnePageWizard__section-title", "data-name": section.title, flexDirection: "row", style: {
-                                        cursor: disabled ? 'auto' : 'pointer',
-                                        zIndex: 10,
+                                return (React.createElement(Flex, { className: clsx('ab-OnePageWizard__section-title twa:p-2', {
+                                        'twa:cursor-auto': disabled,
+                                        'twa:cursor-pointer': !disabled,
+                                        'twa:z-10': true,
+                                        'twa:opacity-50': disabled,
+                                        'twa:opacity-100': !disabled,
+                                        'twa:mt-2': index > 0,
+                                        'twa:mt-0': index === 0,
+                                        'twa:text-accent-foreground twa:pointer-events-none': active,
+                                    }), "data-name": section.title, flexDirection: "row", style: {
                                         transition: 'color 0.2s',
-                                        opacity: disabled ? 0.5 : 1,
-                                    }, key: section.title, color: active ? 'var(--ab-cmp-one-page-wizard-section-title__color)' : '', px: 2, py: 1, mt: index ? 2 : 0, onClick: () => {
+                                    }, key: section.title, onClick: () => {
                                         if (disabled) {
                                             return;
                                         }
+                                        if (active) {
+                                            return;
+                                        }
                                         setCurrentSection(index);
                                     } },
-                                    React.createElement(KeyHint, { mr: 2, style: { display: 'inline-block' } }, navIndex),
-                                    React.createElement("div", { style: { flex: 1 } }, section.title),
-                                    React.createElement(Icon, { name: "error", style: {
-                                            marginLeft: 'var(--ab-space-2)',
-                                            visibility: validSectionsMap.get(index) !== true ? 'visible' : 'hidden',
-                                        } })));
+                                    React.createElement(KeyHint, { className: "twa:mr-2 twa:inline-block twa:text-color-accent-foreground" }, navIndex),
+                                    React.createElement("div", { className: "twa:flex-1" }, section.title),
+                                    React.createElement(Icon, { name: "error", className: clsx('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:hidden') })));
                             }),
                             selectedFeedback,
-                            React.createElement(Box, { flex: 1 }),
-                            React.createElement(KeyHint, { style: { lineHeight: 1.5 }, className: "ab-OnePageWizard__key-hint" },
+                            React.createElement(Box, { className: "twa:flex-1" }),
+                            React.createElement(KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal" },
                                 isMacLike() ? 'Cmd' : 'Ctrl',
                                 " + #",
                                 React.createElement("br", null),
+                                "or arrow keys",
+                                React.createElement("br", null),
                                 "to navigate")),
-                        React.createElement(Flex, { flex: 1, flexDirection: "column", className: "ab-OnePageWizard__section-container" }, renderSection(currentSection))),
-                    React.createElement(Flex, { flexDirection: "row", padding: 2, alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer" },
+                        React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:flex-1" }, renderSection(currentSection))),
+                    React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2" },
                         React.createElement(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: 'Full' }, props.closeText ?? 'CLOSE'),
-                        React.createElement(KeyHint, { ml: 2 }, "Esc"),
-                        React.createElement(Text, { fontSize: 2, mr: 3, className: "ab-OnePageWizard__error", style: {
-                                flex: 1,
-                                color: 'var(--ab-color-error)',
-                                textAlign: 'end',
-                            } }, firstErrorMessage),
+                        React.createElement(KeyHint, { className: "twa:ml-2" }, "Esc"),
+                        React.createElement(Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-error twa:text-end" }, firstErrorMessage),
                         React.createElement(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, props.finishText ?? 'Finish')))))));
 };

package/src/View/Wizard/TypeRadio.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Flex, Text } from 'rebass';
 import Radio from '../../components/Radio';
+import { Box, Flex } from '../../components/Flex';
 export const TypeRadio = (props) => (React.createElement(Radio, { onClick: () => props.onClick?.(), checked: props.checked, value: props.value },
     React.createElement(Flex, { flexDirection: "column" },
-        React.createElement(Text, null, props.text),
-        React.createElement(Text, { fontSize: 2, marginTop: 1 }, props.description))));
+        React.createElement(Box, null, props.text),
+        React.createElement(Box, { className: "twa:text-2 twa:mt-1" }, props.description))));

package/src/View/Wizard/WizardLegend.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
-import { Box } from 'rebass';
+import { Box } from '../../components/Flex';
 export class WizardLegend extends React.Component {
     render() {
         let count = this.props.StepNames.length - 1;
@@ -10,11 +10,10 @@ export class WizardLegend extends React.Component {
             let isDisabled = this.props.CanShowAllSteps
                 ? false
                 : isActiveStep || index > activeStepIndex;
-            let style = isActiveStep ? 'primary' : 'default';
             let lastStep = index == count;
-            return (React.createElement("div", { className: "ab-WizardLegend__step", "data-name": s, key: index, style: { display: 'inline-block' } },
+            return (React.createElement("div", { className: "ab-WizardLegend__step twa:inline-block", "data-name": s, key: index },
                 React.createElement(SimpleButton, { variant: isActiveStep ? 'raised' : 'outlined', tone: isActiveStep ? 'accent' : 'neutral', disabled: isDisabled, onClick: () => this.onStepButtonClicked(s) }, s),
-                lastStep == false && (React.createElement(Box, { mx: 2, "data-name": "separator", className: "ab-WizardLegend__step__separator", style: { display: 'inline-block' } }, "\u2014"))));
+                lastStep == false && (React.createElement(Box, { "data-name": "separator", className: "ab-WizardLegend__step__separator twa:mx-2 twa:inline-block" }, "\u2014"))));
         });
         return React.createElement("div", null, stepButtons);
     }

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

@@ -1,2 +1,2 @@
 import { OnePageWizardSection } from './OnePageWizards';
-export declare const useKeyboardNavigation: <ENTITY>(setCurrentSection: (value: number | ((v: number) => number)) => void, sections: (OnePageWizardSection<ENTITY> | '-')[]) => void;
+export declare const useKeyboardNavigation: <ENTITY>(setCurrentSection: (value: number | ((v: number) => number)) => void, sections: (OnePageWizardSection<ENTITY> | "-")[]) => (event: KeyboardEvent) => void;

package/src/View/Wizard/useKeyboardNavigation.js

@@ -1,9 +1,12 @@
 import * as React from 'react';
-import { useGlobalEvent } from '../../components/utils/useGlobalEvent';
 export const useKeyboardNavigation = (setCurrentSection, sections) => {
     const handleKeyPress = React.useCallback((event) => {
-        if ((event.ctrlKey || event.metaKey) &&
-            (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
+        if (
+        // (event.ctrlKey || event.metaKey) &&
+        event.code === 'ArrowUp' ||
+            event.code === 'ArrowDown') {
+            event.preventDefault();
+            event.stopPropagation();
             const isKeyUp = event.code === 'ArrowUp';
             const validIndexes = sections.reduce((acc, item, index) => {
                 if (item !== '-') {
@@ -27,5 +30,5 @@ export const useKeyboardNavigation = (setCurrentSection, sections) => {
             });
         }
     }, [sections, setCurrentSection]);
-    useGlobalEvent('keydown', handleKeyPress);
+    return handleKeyPress;
 };

package/src/View/renderWithAdaptableContext.js

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import { Provider } from 'react-redux';
-import { ThemeProvider } from 'styled-components';
-import theme from '../theme';
 import AdaptableContext from './AdaptableContext';
 import { WithAdaptableComputedCSSVars } from './AdaptableComputedCSSVarsContext';
 export const renderWithAdaptableContext = (children, adaptable) => {
     return (React.createElement(Provider, { store: adaptable.adaptableStore.TheStore },
-        React.createElement(ThemeProvider, { theme: theme },
-            React.createElement(WithAdaptableComputedCSSVars, null,
-                React.createElement(AdaptableContext.Provider, { value: adaptable }, children)))));
+        React.createElement(WithAdaptableComputedCSSVars, null,
+            React.createElement(AdaptableContext.Provider, { value: adaptable }, children))));
 };

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
 import { ChartRef, Column, GridApi, GridOptions, IRowNode, Module, RowModelType } from 'ag-grid-enterprise';
 import { AdaptableLogger } from './AdaptableLogger';
@@ -21,12 +20,12 @@ import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
 import { AnnotationsService } from '../Utilities/Services/AnnotationsService';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
 import { AgGridMenuAdapter } from './AgGridMenuAdapter';
-import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, InFilterValueResult, DataUpdateConfig, GridCell, Layout, SelectedCellInfo, SelectedRowInfo } from '../types';
+import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, DataUpdateConfig, GridCell, InFilterValueResult, Layout, SelectedCellInfo, SelectedRowInfo } from '../types';
 import { RenderReactRootFn } from '../renderReactRoot';
 import { AgGridOptionsService } from './AgGridOptionsService';
 import { AgGridColumnAdapter } from './AgGridColumnAdapter';
 import { RowFormService } from '../Utilities/Services/RowFormService';
-import { GridCellWithCount, GridCellWithChildren } from '../AdaptableState/Selection/GridCell';
+import { GridCellWithChildren, GridCellWithCount } from '../AdaptableState/Selection/GridCell';
 import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
 import { PivotLayoutModel, TableLayoutModel } from '../layout-manager/src/LayoutManagerModel';
@@ -149,9 +148,19 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private normaliseToolPanelState;
     private getCurrentLayoutModel;
     silentUpdateCurrentLayoutModel(layoutModel?: TableLayoutModel | PivotLayoutModel): void;
+    /**
+     * Returns TRUE if filtering was applied, FALSE otherwise
+     * This is important in the INIT phase because applying filtering will automatically refresh AG Grids columnState,
+     * implicitly refreshing the sorting state too (hence we don't need to apply sorting separately)
+     */
     applyFiltering(config?: {
         updateColumnFilterModel?: boolean;
-    }): void;
+    }): boolean;
+    /**
+     * Checks if the current layout has ColumnSorts for columns that have CustomSort defined
+     * (either via initialState CustomSorts or via customSortComparers option) and refreshes the sort if needed.
+     */
+    private refreshInitialSortIfNeeded;
     showQuickFilter(): void;
     hideQuickFilter(): void;
     private normalizeAdaptableOptions;

package/src/agGrid/AdaptableAgGrid.js

@@ -102,6 +102,10 @@ import { AgGridModulesAdapter } from './AgGridModulesAdapter';
 import { getMarker } from '../devTools';
 import { DeepMap } from '@infinite-table/infinite-react';
 import { DateFormatter } from '../Utilities/Helpers/FormatHelper';
+import { clearPredicateDefMapMemo } from '../Api/Implementation/PredicateApiImpl';
+import { AgGridFilterAdapterFactory } from './AgGridFilterAdapter';
+import { AdaptableFilterHandler } from './AdaptableFilterHandler';
+import { AgGridFloatingFilterAdapterFactory } from './AgGridFloatingFilterAdapter';
 const LocalEventService_Prototype = LocalEventService.prototype;
 const LocalEventService_dispatchEvent = LocalEventService_Prototype.dispatchEvent;
 LocalEventService_Prototype.dispatchEvent = function (event) {
@@ -446,10 +450,14 @@ export class AdaptableAgGrid {
         this.api.themeApi.applyCurrentTheme();
         this.validatePrimaryKey();
         this.checkShouldClearExistingFiltersOrSearches();
-        // FIXME AFL FILTER: talk with Radu: should ColumnFilters still be ignored?!
-        // see layoutModel.Ignore_ColumnFilters
         // initial filter model
-        this.applyFiltering();
+        const filteringApplied = this.applyFiltering();
+        // We may need to re-apply sort if there are ColumnSorts for columns with CustomSort defined
+        // This is required because AG Grid wasn't aware of the CustomSort when applying sorting initially
+        // this is not required when filtering was applied because filtering also triggers a sort refresh internally
+        if (!filteringApplied) {
+            this.refreshInitialSortIfNeeded();
+        }
         // apply quick search if there is one
         // yes, we could have put this on the gridOptions.findSearchValue
         // but we need to wait for setupColumns to run first so as to correctly
@@ -621,26 +629,67 @@ You need to define at least one Layout!`);
             normalize: true,
         });
     }
+    /**
+     * Returns TRUE if filtering was applied, FALSE otherwise
+     * This is important in the INIT phase because applying filtering will automatically refresh AG Grids columnState,
+     * implicitly refreshing the sorting state too (hence we don't need to apply sorting separately)
+     */
     applyFiltering(config) {
+        let filteringApplied = false;
         // default updateColumnFilterModel to TRUE, if not provided
         const updateColumnFilterModel = config?.updateColumnFilterModel ?? true;
         const agGridApi = this.agGridAdapter.getAgGridApi();
         if (updateColumnFilterModel) {
             const columnFilters = this.api.filterApi.columnFilterApi
                 .getActiveColumnFilters()
-                // FIXME AFL: we need this additional filter because 'getActiveColumnFilters' checks only for suspended while 'isColumnFilterActive' also checkss for COMPLETE filters
+                // we need this additional filter because 'getActiveColumnFilters' checks only for suspended while 'isColumnFilterActive' also checkss for COMPLETE filters
                 .filter((columnFilter) => this.api.filterApi.columnFilterApi.isColumnFilterActive(columnFilter));
             const filterModel = {};
             columnFilters.forEach((columnFilter) => {
                 filterModel[columnFilter.ColumnId] = columnFilter;
             });
             agGridApi.setFilterModel(filterModel);
+            filteringApplied = Object.keys(filterModel).length > 0;
         }
         // FIXME AFL FILTER why is this needed???
         this.refreshSelectedCellsState();
         this.refreshSelectedRowsState();
-        agGridApi.onFilterChanged();
+        // FIXME AFL: this is temporary, will be replaced with v22's new autoCol filtering
+        const currentPivotLayoutHasAutoCols = this.api.layoutApi.isCurrentLayoutPivot() &&
+            !!this.api.layoutApi.getCurrentRowGroupsColumnIds()?.length;
+        // agGridApi.setFilterModel() already triggered onFilterChanged(), so we skip it if updateColumnFilterModel is TRUE
+        if (!filteringApplied || currentPivotLayoutHasAutoCols) {
+            agGridApi.onFilterChanged();
+            filteringApplied = true;
+        }
         this._emit('AdapTableFiltersApplied');
+        return filteringApplied;
+    }
+    /**
+     * Checks if the current layout has ColumnSorts for columns that have CustomSort defined
+     * (either via initialState CustomSorts or via customSortComparers option) and refreshes the sort if needed.
+     */
+    refreshInitialSortIfNeeded() {
+        const currentLayout = this.api.layoutApi.getCurrentLayout();
+        const columnSorts = currentLayout?.ColumnSorts;
+        if (!columnSorts || columnSorts.length === 0) {
+            return;
+        }
+        const hasCustomSortForSortedColumn = columnSorts.some((columnSort) => {
+            // Check if there's a CustomSort defined in state for this column
+            const customSort = this.api.customSortApi.getCustomSortForColumn(columnSort.ColumnId);
+            if (customSort && !customSort.IsSuspended) {
+                return true;
+            }
+            // Check if there's a customSortComparer defined in options for this column
+            if (this.api.customSortApi.internalApi.columnHasCustomSortComparer(columnSort.ColumnId)) {
+                return true;
+            }
+            return false;
+        });
+        if (hasCustomSortForSortedColumn) {
+            this.layoutManager.refreshSort();
+        }
     }
     showQuickFilter() {
         const height = this.api.optionsApi.getFilterOptions().columnFilterOptions.quickFilterHeight;
@@ -721,6 +770,92 @@ You need to define at least one Layout!`);
             });
             return defaultColGroupDef;
         });
+        /**
+         * `autoGroupColumnDef`
+         */
+        this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'autoGroupColumnDef', (original_autoGroupColumnDef) => {
+            // #autoGroupColumnDef
+            const useAdaptableFilter = this.adaptableOptions.filterOptions.useAdaptableFiltering;
+            if (!useAdaptableFilter) {
+                return original_autoGroupColumnDef;
+            }
+            if (original_autoGroupColumnDef?.filter === false) {
+                // if user disables filter on autoGroupColumnDef, we respect that
+                this.logger.info(`autoGroupColumnDef.filter is disabled as per user configuration.`);
+                return original_autoGroupColumnDef;
+            }
+            if (typeof original_autoGroupColumnDef?.filter === 'object') {
+                this.logger.warn(`autoGroupColumnDef.filter is set and overrides the Adaptable custom filter mechanism! We recommend using a ColumnOptions.columnHeader instead!`);
+                return original_autoGroupColumnDef;
+            }
+            const autoGroupColumnDef = { ...original_autoGroupColumnDef };
+            // this is required to make sure that AG Grid doesn't disable the filter
+            // !! DO NOT REMOVE THIS !!
+            // see https://github.com/ag-grid/ag-grid/blob/6f43ff257c2e285068eb425b655e58d6eeb89816/packages/ag-grid-enterprise/src/rowHierarchy/autoColService.ts#L225
+            autoGroupColumnDef.filterValueGetter = (params) => {
+                this.logger.error('autoGroupColumnDef.filterValueGetter was called unexpectedly; this is not an expected execution path!', params);
+                return '';
+            };
+            // !! it is important that we always return the same component / handler instances
+            // otherwise AG Grid will re-create the filter instance on each filterModel change
+            const autoGroupFilterComponent = AgGridFilterAdapterFactory(this);
+            const autoGroupFilterHandlerGenerator = () => new AdaptableFilterHandler(this.api);
+            // Use a getter to dynamically return different filter values based on Layout.RowGroupDisplayType
+            Object.defineProperty(autoGroupColumnDef, 'filter', {
+                get: () => {
+                    const rowGroupDisplayType = this.api.layoutApi.internalApi.getCurrentLayoutRowGroupDisplayType();
+                    if (rowGroupDisplayType === 'single') {
+                        return {
+                            component: autoGroupFilterComponent,
+                            handler: autoGroupFilterHandlerGenerator,
+                        };
+                    }
+                    const groupedColumnFilterConfig = this.api.layoutApi.internalApi.areAllGroupedColumnsFilterable();
+                    if (groupedColumnFilterConfig.filter) {
+                        return 'agGroupColumnFilter';
+                    }
+                    return original_autoGroupColumnDef?.filter;
+                },
+                enumerable: true,
+                configurable: true,
+            });
+            if (original_autoGroupColumnDef?.floatingFilter !== false) {
+                autoGroupColumnDef.suppressFloatingFilterButton = true;
+                Object.defineProperty(autoGroupColumnDef, 'floatingFilter', {
+                    get: () => {
+                        const rowGroupDisplayType = this.api.layoutApi.internalApi.getCurrentLayoutRowGroupDisplayType();
+                        if (rowGroupDisplayType === 'single') {
+                            return true;
+                        }
+                        if (rowGroupDisplayType === 'multi') {
+                            const groupedColumnFilterConfig = this.api.layoutApi.internalApi.areAllGroupedColumnsFilterable();
+                            if (groupedColumnFilterConfig.floatingFilter) {
+                                return true;
+                            }
+                        }
+                        return original_autoGroupColumnDef?.floatingFilter;
+                    },
+                    enumerable: true,
+                    configurable: true,
+                });
+                // !! it is important that we always return the same component / handler instances
+                // otherwise AG Grid will re-create the filter instance on each filterModel change
+                const autoGroupFloatingFilterComponent = AgGridFloatingFilterAdapterFactory(this);
+                // Use a getter to dynamically return different floatingFilterComponent values based on Layout.RowGroupDisplayType
+                Object.defineProperty(autoGroupColumnDef, 'floatingFilterComponent', {
+                    get: () => {
+                        const rowGroupDisplayType = this.api.layoutApi.internalApi.getCurrentLayoutRowGroupDisplayType();
+                        if (rowGroupDisplayType === 'single') {
+                            return autoGroupFloatingFilterComponent;
+                        }
+                        return;
+                    },
+                    enumerable: true,
+                    configurable: true,
+                });
+            }
+            return autoGroupColumnDef;
+        });
         /**
          * `theme`
          */
@@ -1679,19 +1814,7 @@ You need to define at least one Layout!`);
     deriveAdaptableColumnStateFromAgGrid() {
         const allColumns = [];
         const gridApi = this.agGridAdapter.getAgGridApi();
-        const isPivot = this.isInPivotMode();
-        let agGridCols = isPivot
-            ? gridApi.getColumns()
-            : // we call getAllGridColumns because we want to also have the generated group columns
-                gridApi.getAllGridColumns();
-        if (isPivot) {
-            // let's also support the pivot result columns
-            const pivotResultColumns = gridApi.getPivotResultColumns() || [];
-            const autoGroupColumns = gridApi
-                .getAllGridColumns()
-                .filter((column) => this.api.columnApi.isAutoRowGroupColumn(column.getColId()));
-            agGridCols = [...autoGroupColumns, ...agGridCols, ...pivotResultColumns];
-        }
+        let agGridCols = this.agGridColumnAdapter.getAllAgGridColumns();
         const columnGroupChildren = gridApi.getAllDisplayedColumnGroups();
         const groupsCount = {};
         const colsToGroups = (columnGroupChildren ?? []).reduce((acc, columnGroup) => {
@@ -1764,14 +1887,21 @@ You need to define at least one Layout!`);
         let _displayValue = defaults ? defaults.displayValue : undefined;
         let _normalisedValue = defaults ? defaults.normalisedValue : undefined;
         let _isRowGroupCell;
-        const _isPivotCell = this.api.columnApi.isPivotResultColumn(columnId) ||
-            this.api.columnApi.isPivotAggColumnWithNoPivotColumns(columnId);
+        let _isPivotCell;
         const self = this;
         const api = this.api;
+        const getIsPivotCell = () => {
+            if (_isPivotCell === undefined) {
+                _isPivotCell =
+                    api.columnApi.isPivotResultColumn(columnId) ||
+                        api.columnApi.isPivotAggColumnWithNoPivotColumns(columnId);
+            }
+            return _isPivotCell;
+        };
         const getRawValue = () => {
             if (_rawValue === undefined) {
                 _rawValue = self.getRawValueFromRowNode(rowNode, columnId);
-                if (_isPivotCell && _rawValue?.value != undefined) {
+                if (_rawValue?.value != undefined && getIsPivotCell()) {
                     // for pivot result columns, the raw value is an object with a value property
                     // we want to return the value property as the raw value
                     _rawValue = _rawValue.value;
@@ -1814,7 +1944,7 @@ You need to define at least one Layout!`);
                 return _primaryKeyValue;
             },
             get isPivotCell() {
-                return _isPivotCell;
+                return getIsPivotCell();
             },
             get isRowGroupCell() {
                 if (_isRowGroupCell === undefined) {
@@ -3386,6 +3516,7 @@ You need to define at least one Layout!`);
         this.__prevLayoutForRefresh = undefined;
         this.layoutManager?.destroy();
         this.layoutManager = null;
+        clearPredicateDefMapMemo();
         const agGridApi = this.agGridAdapter?.getAgGridApi();
         if (agGridApi && !agGridApi.isDestroyed()) {
             agGridApi.removeEventListener('firstDataRendered', this.listenerFirstDataRendered);
@@ -3967,7 +4098,8 @@ You need to define at least one Layout!`);
                 }
             }
             // also we need to reset the cache for the group column, when we have rowGripDisplayType single
-            if (layout.RowGroupDisplayType === 'single') {
+            if (layout.RowGroupDisplayType === 'single' &&
+                (layout.RowGroupedColumns?.length || layout.PivotGroupedColumns?.length)) {
                 this.api.filterApi.columnFilterApi.resetFilterValues(AG_GRID_GROUPED_COLUMN);
             }
         }

package/src/agGrid/AdaptableFilterHandler.d.ts

@@ -1,16 +1,15 @@
 import { DoesFilterPassParams, FilterHandler, FilterHandlerParams } from 'ag-grid-enterprise';
 import { AdaptableApi } from '../Api/AdaptableApi';
-import { ColumnSetupInfo } from '../AdaptableState/Common/ColumnSetupInfo';
 import { InFilterValueResult } from '../AdaptableOptions/FilterOptions';
 import { ColumnFilter } from '../types';
-export declare class AdaptableFilterHandler implements FilterHandler {
+export declare class AdaptableFilterHandler implements FilterHandler<any, any, ColumnFilter> {
     private adaptableApi;
-    readonly colId: string;
+    colId: string;
     private filterDisplayValuesResult;
     private previousFilterDisplayValuesResult;
-    constructor(adaptableApi: AdaptableApi, columnSetup: ColumnSetupInfo);
-    getCurrentColumnFilters(): ColumnFilter[];
-    doesFilterPass(params: DoesFilterPassParams): boolean;
+    constructor(adaptableApi: AdaptableApi);
+    init(params: FilterHandlerParams): void;
+    doesFilterPass(params: DoesFilterPassParams<any, any, ColumnFilter>): boolean;
     getCachedFilterDisplayValues(): InFilterValueResult | undefined;
     getLastCachedFilterDisplayValues(): InFilterValueResult | undefined;
     getFromCacheOrFetchFilterDisplayValues(options: {