@adaptabletools/adaptable-cjs 21.2.2-canary.0 → 22.0.0-canary.1

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,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OnePageWizard = exports.useOnePageWizardContext = exports.OnePageWizardContext = exports.FormDescriptionText = exports.SummaryText = exports.SummaryTag = void 0;
+exports.OnePageWizard = exports.OnePageWizardContext = exports.FormDescriptionText = exports.SummaryText = exports.SummaryTag = void 0;
+exports.useOnePageWizardContext = useOnePageWizardContext;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Dialog_1 = tslib_1.__importDefault(require("../../components/Dialog"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const useProperty_1 = tslib_1.__importDefault(require("../../components/utils/useProperty"));
@@ -14,11 +15,14 @@ const icons_1 = require("../../components/icons");
 const ResizeObserver_1 = require("../../components/ResizeObserver");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const useKeyboardNavigation_1 = require("./useKeyboardNavigation");
-const SummaryTag = (props) => (React.createElement(rebass_1.Text, { ...props }));
+const Flex_1 = require("../../components/Flex");
+const twMerge_1 = require("../../twMerge");
+const twUtils_1 = require("../../components/twUtils");
+const SummaryTag = (props) => (React.createElement(Flex_1.Box, { ...props }));
 exports.SummaryTag = SummaryTag;
-const SummaryText = (props) => (React.createElement(rebass_1.Text, { fontSize: 2, mb: 3, ...props }));
+const SummaryText = (props) => (React.createElement(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)('twa:text-2 twa:mb-3', props.className) }));
 exports.SummaryText = SummaryText;
-const FormDescriptionText = (props) => React.createElement(rebass_1.Text, { fontSize: 2, mt: 1, ...props });
+const FormDescriptionText = (props) => React.createElement(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)('twa:text-2 twa:mt-1', props.className) });
 exports.FormDescriptionText = FormDescriptionText;
 exports.OnePageWizardContext = React.createContext({
     data: null,
@@ -28,7 +32,6 @@ exports.OnePageWizardContext = React.createContext({
 function useOnePageWizardContext() {
     return React.useContext(exports.OnePageWizardContext);
 }
-exports.useOnePageWizardContext = useOnePageWizardContext;
 const OnePageWizard = (props) => {
     let defaultCurrentIndex = 0;
     const [currentSection, setCurrentSection] = (0, useProperty_1.default)(props, 'currentIndex', defaultCurrentIndex, {
@@ -49,12 +52,14 @@ 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] = (0, react_1.useState)(false);
     const [navIndexMap] = (0, react_1.useState)(() => new Map());
     const handleClickFinish = () => {
@@ -65,18 +70,13 @@ const OnePageWizard = (props) => {
         if (section === '-') {
             return React.createElement(React.Fragment, { key: index });
         }
-        return (React.createElement(rebass_1.Flex, { flexDirection: "column", key: index, "data-name": `section-${index}`, style: { minHeight: '100%' }, mr: 2 },
-            React.createElement(rebass_1.Box, { py: 3, paddingLeft: 2, fontSize: 4, className: "ab-OnePageWizard__details" }, section.details),
-            React.createElement(rebass_1.Box, { flex: 1, className: "ab-OnePageWizard__section" }, section.render(props.data, index))));
+        return (React.createElement(Flex_1.Flex, { flexDirection: "column", key: index, "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2" },
+            React.createElement(Flex_1.Box, { className: "ab-OnePageWizard__details twa:text-4 twa:py-3 twa:pl-2" }, section.details),
+            React.createElement(Flex_1.Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-defaultbackground" }, section.render(props.data, index))));
     };
+    const handleNavigation = (0, useKeyboardNavigation_1.useKeyboardNavigation)(setCurrentSection, visibleSections);
     const selectedNodeRef = (0, react_1.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: (0, clsx_1.default)('ab-OnePageWizard__selected-title-overlay', 'twa:absolute twa:rounded-standard twa:select-none twa:bg-accent twa:transition-top twa:duration-200', twUtils_1.targetOwn.focusOutline) }));
     const sizeOwnerRef = (0, react_1.useRef)(null);
     const [width, setWidth] = (0, react_1.useState)(0);
     (0, ResizeObserver_1.useResizeObserver)(sizeOwnerRef, ({ width }) => {
@@ -90,6 +90,7 @@ 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 = (0, react_1.useRef)(null);
@@ -110,15 +111,10 @@ const OnePageWizard = (props) => {
         acc.set(index, valid);
         return acc;
     }, new Map());
-    (0, useKeyboardNavigation_1.useKeyboardNavigation)(setCurrentSection, visibleSections);
     const canFinish = !invalidCount;
     return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
         React.createElement(exports.OnePageWizardContext.Provider, { value: contextValue },
-            React.createElement(Dialog_1.default, { 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_1.default, { 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))) {
@@ -135,65 +131,55 @@ const OnePageWizard = (props) => {
                         }
                     }
                 } },
-                React.createElement(rebass_1.Flex, { className: "ab-OnePageWizard", flexDirection: "column", "data-name": props.name, style: {
-                        height: '100%',
-                        width: '90vw',
-                        maxWidth: 1200,
-                        ...props.style,
-                    } },
-                    React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "stretch", flex: 1, style: { overflow: 'auto' } },
-                        React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 3, className: "ab-OnePageWizard__section-title-container", ref: sizeOwnerRef, style: {
-                                overflow: 'auto',
-                                position: 'relative',
-                                flex: 'none',
-                                ...props.titleContainerStyle,
-                            } },
+                React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('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_1.Flex, { flexDirection: "row", alignItems: "stretch", className: "twa:flex-1 twa:overflow-auto" },
+                        React.createElement(Flex_1.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(rebass_1.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(Flex_1.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(rebass_1.Flex, { className: "ab-OnePageWizard__section-title", "data-name": section.title, flexDirection: "row", style: {
-                                        cursor: disabled ? 'auto' : 'pointer',
-                                        zIndex: 10,
+                                return (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('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_1.KeyHint, { mr: 2, style: { display: 'inline-block' } }, navIndex),
-                                    React.createElement("div", { style: { flex: 1 } }, section.title),
-                                    React.createElement(icons_1.Icon, { name: "error", style: {
-                                            marginLeft: 'var(--ab-space-2)',
-                                            visibility: validSectionsMap.get(index) !== true ? 'visible' : 'hidden',
-                                        } })));
+                                    React.createElement(KeyHint_1.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(icons_1.Icon, { name: "error", className: (0, clsx_1.default)('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:hidden') })));
                             }),
                             selectedFeedback,
-                            React.createElement(rebass_1.Box, { flex: 1 }),
-                            React.createElement(KeyHint_1.KeyHint, { style: { lineHeight: 1.5 }, className: "ab-OnePageWizard__key-hint" },
+                            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
+                            React.createElement(KeyHint_1.KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal" },
                                 (0, isMacLike_1.isMacLike)() ? 'Cmd' : 'Ctrl',
                                 " + #",
                                 React.createElement("br", null),
+                                "or arrow keys",
+                                React.createElement("br", null),
                                 "to navigate")),
-                        React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "column", className: "ab-OnePageWizard__section-container" }, renderSection(currentSection))),
-                    React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer" },
+                        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:flex-1" }, renderSection(currentSection))),
+                    React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2" },
                         React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: 'Full' }, props.closeText ?? 'CLOSE'),
-                        React.createElement(KeyHint_1.KeyHint, { ml: 2 }, "Esc"),
-                        React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, className: "ab-OnePageWizard__error", style: {
-                                flex: 1,
-                                color: 'var(--ab-color-error)',
-                                textAlign: 'end',
-                            } }, firstErrorMessage),
+                        React.createElement(KeyHint_1.KeyHint, { className: "twa:ml-2" }, "Esc"),
+                        React.createElement(Flex_1.Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-error twa:text-end" }, firstErrorMessage),
                         React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, props.finishText ?? 'Finish')))))));
 };
 exports.OnePageWizard = OnePageWizard;

package/src/View/Wizard/TypeRadio.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TypeRadio = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const Flex_1 = require("../../components/Flex");
 const TypeRadio = (props) => (React.createElement(Radio_1.default, { onClick: () => props.onClick?.(), checked: props.checked, value: props.value },
-    React.createElement(rebass_1.Flex, { flexDirection: "column" },
-        React.createElement(rebass_1.Text, null, props.text),
-        React.createElement(rebass_1.Text, { fontSize: 2, marginTop: 1 }, props.description))));
+    React.createElement(Flex_1.Flex, { flexDirection: "column" },
+        React.createElement(Flex_1.Box, null, props.text),
+        React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mt-1" }, props.description))));
 exports.TypeRadio = TypeRadio;

package/src/View/Wizard/WizardLegend.js

@@ -4,7 +4,7 @@ exports.WizardLegend = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../components/Flex");
 class WizardLegend extends React.Component {
     render() {
         let count = this.props.StepNames.length - 1;
@@ -14,11 +14,10 @@ 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_1.default, { variant: isActiveStep ? 'raised' : 'outlined', tone: isActiveStep ? 'accent' : 'neutral', disabled: isDisabled, onClick: () => this.onStepButtonClicked(s) }, s),
-                lastStep == false && (React.createElement(rebass_1.Box, { mx: 2, "data-name": "separator", className: "ab-WizardLegend__step__separator", style: { display: 'inline-block' } }, "\u2014"))));
+                lastStep == false && (React.createElement(Flex_1.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

@@ -3,11 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useKeyboardNavigation = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const useGlobalEvent_1 = require("../../components/utils/useGlobalEvent");
 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 !== '-') {
@@ -31,6 +34,6 @@ const useKeyboardNavigation = (setCurrentSection, sections) => {
             });
         }
     }, [sections, setCurrentSection]);
-    (0, useGlobalEvent_1.useGlobalEvent)('keydown', handleKeyPress);
+    return handleKeyPress;
 };
 exports.useKeyboardNavigation = useKeyboardNavigation;

package/src/View/renderWithAdaptableContext.js

@@ -4,14 +4,11 @@ exports.renderWithAdaptableContext = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const styled_components_1 = require("styled-components");
-const theme_1 = tslib_1.__importDefault(require("../theme"));
 const AdaptableContext_1 = tslib_1.__importDefault(require("./AdaptableContext"));
 const AdaptableComputedCSSVarsContext_1 = require("./AdaptableComputedCSSVarsContext");
 const renderWithAdaptableContext = (children, adaptable) => {
     return (React.createElement(react_redux_1.Provider, { store: adaptable.adaptableStore.TheStore },
-        React.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
-            React.createElement(AdaptableComputedCSSVarsContext_1.WithAdaptableComputedCSSVars, null,
-                React.createElement(AdaptableContext_1.default.Provider, { value: adaptable }, children)))));
+        React.createElement(AdaptableComputedCSSVarsContext_1.WithAdaptableComputedCSSVars, null,
+            React.createElement(AdaptableContext_1.default.Provider, { value: adaptable }, children))));
 };
 exports.renderWithAdaptableContext = renderWithAdaptableContext;

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';
@@ -258,6 +257,15 @@ export declare class AdaptableAgGrid implements IAdaptable {
         added: IRowNode[];
         updated: IRowNode[];
     }>;
+    applyGridDataTransaction(dataTransaction: {
+        add?: any[];
+        update?: any[];
+        remove?: any[];
+    }, config?: DataUpdateConfig): Promise<{
+        addedRows: IRowNode[];
+        updatedRows: IRowNode[];
+        removedRows: IRowNode[];
+    }>;
     deleteRows(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<IRowNode[]>;
     getRowNodeForPrimaryKey(primaryKeyValue: any): any;
     hideColumn(columnId: string): void;

package/src/agGrid/AdaptableAgGrid.js

@@ -107,6 +107,9 @@ const devTools_1 = require("../devTools");
 const infinite_react_1 = require("@infinite-table/infinite-react");
 const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
 const PredicateApiImpl_1 = require("../Api/Implementation/PredicateApiImpl");
+const AgGridFilterAdapter_1 = require("./AgGridFilterAdapter");
+const AdaptableFilterHandler_1 = require("./AdaptableFilterHandler");
+const AgGridFloatingFilterAdapter_1 = require("./AgGridFloatingFilterAdapter");
 const LocalEventService_Prototype = ag_grid_enterprise_1.LocalEventService.prototype;
 const LocalEventService_dispatchEvent = LocalEventService_Prototype.dispatchEvent;
 LocalEventService_Prototype.dispatchEvent = function (event) {
@@ -655,11 +658,8 @@ You need to define at least one Layout!`);
         // FIXME AFL FILTER why is this needed???
         this.refreshSelectedCellsState();
         this.refreshSelectedRowsState();
-        // 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) {
+        if (!filteringApplied) {
             agGridApi.onFilterChanged();
             filteringApplied = true;
         }
@@ -771,6 +771,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 = (0, AgGridFilterAdapter_1.AgGridFilterAdapterFactory)(this);
+            const autoGroupFilterHandlerGenerator = () => new AdaptableFilterHandler_1.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 = (0, AgGridFloatingFilterAdapter_1.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`
          */
@@ -1729,19 +1815,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) => {
@@ -2331,6 +2405,66 @@ You need to define at least one Layout!`);
             });
         }
     }
+    async applyGridDataTransaction(dataTransaction, config = {}) {
+        const result = {
+            addedRows: [],
+            updatedRows: [],
+            removedRows: [],
+        };
+        if (!dataTransaction) {
+            return result;
+        }
+        const addDataRows = dataTransaction.add;
+        const updateDataRows = dataTransaction.update;
+        const removeDataRows = dataTransaction.remove;
+        if (this.hasAutogeneratedPrimaryKey) {
+            this.addSyntheticPrimaryKeyIfMissing(addDataRows);
+        }
+        if (config.runAsync) {
+            return new Promise((resolve) => {
+                this.applyAgGridTransactionAsync({
+                    update: updateDataRows,
+                    add: addDataRows,
+                    remove: removeDataRows,
+                    addIndex: config.addIndex,
+                }, (transaction) => {
+                    if (typeof config.callback === 'function') {
+                        config.callback(transaction);
+                    }
+                    if (transaction?.add) {
+                        this.updateRowGroupsAndColumnGroupsExpandedState();
+                    }
+                    resolve({
+                        addedRows: transaction?.add,
+                        updatedRows: transaction?.update,
+                        removedRows: transaction?.remove,
+                    });
+                });
+                if (config.flushAsync) {
+                    this.agGridAdapter.getAgGridApi().flushAsyncTransactions();
+                }
+            });
+        }
+        else {
+            const transaction = this.applyAgGridTransaction({
+                update: updateDataRows,
+                add: addDataRows,
+                remove: removeDataRows,
+                addIndex: config.addIndex,
+            });
+            if (transaction?.add) {
+                this.updateRowGroupsAndColumnGroupsExpandedState();
+            }
+            if (config.flushAsync) {
+                this.agGridAdapter.getAgGridApi().flushAsyncTransactions();
+            }
+            return Promise.resolve({
+                addedRows: transaction?.add,
+                updatedRows: transaction?.update,
+                removedRows: transaction?.remove,
+            });
+        }
+    }
     deleteRows(dataRows, dataUpdateConfig) {
         dataUpdateConfig = dataUpdateConfig || {};
         if (dataUpdateConfig.runAsync) {
@@ -4025,7 +4159,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(GeneralConstants_1.AG_GRID_GROUPED_COLUMN);
             }
         }

package/src/agGrid/AdaptableFilterHandler.d.ts

@@ -1,17 +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;
-    private currentColumnFilters_MEMO;
-    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: {