@adaptabletools/adaptable-cjs 22.0.0-canary.1 → 22.0.0-canary.3

package/src/agGrid/AgGridFilterAdapter.js

@@ -18,6 +18,10 @@ const AgGridFilterAdapterFactory = (adaptable) => {
         return 'filter_' + colId + '_' + adaptable.adaptableOptions.adaptableId;
     }
     return class AgGridFilterAdapter {
+        params;
+        filterContainer;
+        column;
+        unmountReactRoot;
         init(params) {
             this.params = params;
             this.column = params.column;

package/src/agGrid/AgGridFloatingFilterAdapter.js

@@ -62,6 +62,9 @@ const AgGridFloatingFilterAdapterFactory = (adaptable) => {
         }
     }
     return class AgGridFloatingFilterAdapter {
+        colId;
+        filterContainer;
+        unmountReactRoot;
         init(params) {
             const colId = params.column.getColId();
             this.colId = colId;

package/src/agGrid/AgGridMenuAdapter.js

@@ -7,6 +7,7 @@ const icons_1 = require("../components/icons");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
 class AgGridMenuAdapter {
+    _adaptableInstance;
     constructor(_adaptableInstance) {
         this._adaptableInstance = _adaptableInstance;
     }

package/src/agGrid/AgGridModulesAdapter.js

@@ -5,9 +5,10 @@ const _1 = require(".");
 const ag_grid_enterprise_1 = require("ag-grid-enterprise");
 exports.AG_GRID_VERSION = ag_grid_enterprise_1.AllEnterpriseModule.version;
 class AgGridModulesAdapter {
+    adaptableInstance;
+    allAgGridModules = new Set();
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
-        this.allAgGridModules = new Set();
         this.allAgGridModules = this.extractAgGridModuleNames(ag_grid_enterprise_1.AllEnterpriseModule);
     }
     destroy() {

package/src/agGrid/AgGridOptionsService.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AgGridOptionsService = void 0;
 class AgGridOptionsService {
+    adaptableInstance;
+    gridOptionsPropertyCache;
+    colDefPropertyCache;
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
         this.gridOptionsPropertyCache = new Map();

package/src/agGrid/AgGridThemeAdapter.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AgGridThemeAdapter = void 0;
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
 class AgGridThemeAdapter {
+    _adaptableInstance;
+    agGridThemeMode;
     constructor(_adaptableInstance) {
         this._adaptableInstance = _adaptableInstance;
     }

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -102,6 +102,11 @@ const ReactActionColumnRenderer = (props) => {
 };
 exports.ReactActionColumnRenderer = ReactActionColumnRenderer;
 class ActionColumnRenderer {
+    eGui;
+    eventListener;
+    unmountReactRoot;
+    layoutSwitchUnsubscribe;
+    actionButtons;
     // gets called once before the renderer is used
     init(params) {
         const adaptable = params.context.__adaptable;

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -7,6 +7,8 @@ const renderWithAdaptableContext_1 = require("../../View/renderWithAdaptableCont
 const React = tslib_1.__importStar(require("react"));
 const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
     return class BadgetRenderer {
+        eGui;
+        unmountReactRoot;
         getAdaptableInstance(params) {
             const adaptable = params.context.__adaptable;
             return adaptable;

package/src/agGrid/cellRenderers/PercentBarRenderer.js

@@ -9,6 +9,7 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
         return;
     }
     return class PercentBarRenderer {
+        eGui;
         init(params) {
             const min = api.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
             const max = api.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -98,9 +98,12 @@ exports.AdaptableReactDateEditor = (0, react_1.forwardRef)((props, ref) => {
  * We strongly recommend you specify a `colDef.valueParser` function
  */
 class AdaptableDateEditor {
-    constructor() {
-        this.valueParser = defaultDateValueParser;
-    }
+    value;
+    el;
+    params;
+    editor;
+    unmountReactRoot;
+    valueParser = defaultDateValueParser;
     init(params) {
         this.value = getStartValue(params);
         const { valueParser } = params.column.getColDef();

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -86,18 +86,13 @@ exports.AdaptableReactNumberEditor.displayName = 'AdaptableReactNumberEditor';
  * Number Editor provided by AdapTable and used by default for all `number` columns
  */
 class AdaptableNumberEditor {
-    constructor() {
-        this.valueParser = defaultValueParser;
-        this.onValueChange = (value) => {
-            this.value = this.valueParser
-                ? this.valueParser({
-                    ...this.params,
-                    oldValue: this.params.value,
-                    newValue: value,
-                })
-                : value;
-        };
-    }
+    value;
+    columnId;
+    el;
+    params;
+    editor;
+    valueParser = defaultValueParser;
+    unmountReactRoot;
     init(params) {
         this.value = getStartValue(params);
         this.params = params;
@@ -148,5 +143,14 @@ class AdaptableNumberEditor {
     destroy() {
         this.unmountReactRoot?.();
     }
+    onValueChange = (value) => {
+        this.value = this.valueParser
+            ? this.valueParser({
+                ...this.params,
+                oldValue: this.params.value,
+                newValue: value,
+            })
+            : value;
+    };
 }
 exports.AdaptableNumberEditor = AdaptableNumberEditor;

package/src/agGrid/editors/AdaptablePercentageEditor/index.js

@@ -69,19 +69,13 @@ exports.AdaptableReactPercentageEditor.displayName = 'AdaptableReactPercentageEd
  * Used to edit percentage columns as percentages (similar to how its done in Excel)
  */
 class AdaptablePercentageEditor {
-    constructor() {
-        this.valueParser = defaultValueParser;
-        this.onValueChange = (value) => {
-            const newValue = this.valueParser
-                ? this.valueParser({
-                    ...this.params,
-                    oldValue: this.params.value,
-                    newValue: value,
-                })
-                : value;
-            this.value = NumberExtensions_1.default.divideBy100(newValue);
-        };
-    }
+    value;
+    columnId;
+    el;
+    params;
+    editor;
+    valueParser = defaultValueParser;
+    unmountReactRoot;
     init(params) {
         this.value = (0, AdaptableNumberEditor_1.getStartValue)(params);
         this.params = params;
@@ -132,5 +126,15 @@ class AdaptablePercentageEditor {
     destroy() {
         this.unmountReactRoot?.();
     }
+    onValueChange = (value) => {
+        const newValue = this.valueParser
+            ? this.valueParser({
+                ...this.params,
+                oldValue: this.params.value,
+                newValue: value,
+            })
+            : value;
+        this.value = NumberExtensions_1.default.divideBy100(newValue);
+    };
 }
 exports.AdaptablePercentageEditor = AdaptablePercentageEditor;

package/src/agGrid/index.d.ts

@@ -2,5 +2,11 @@ import { Adaptable, AdaptableNoCodeWizard as ABWizard } from './Adaptable';
 import { AdaptableLogger as ABLogger } from './AdaptableLogger';
 export { default as AdaptableWizardView } from '../View/AdaptableWizardView';
 export default Adaptable;
+/**
+ * AdapTable's No Code Wizard
+ */
 export declare const AdaptableNoCodeWizard: typeof ABWizard;
+/**
+ * AdapTable's Logger
+ */
 export declare const AdaptableLogger: typeof ABLogger;

package/src/agGrid/index.js

@@ -7,5 +7,11 @@ const AdaptableLogger_1 = require("./AdaptableLogger");
 var AdaptableWizardView_1 = require("../View/AdaptableWizardView");
 Object.defineProperty(exports, "AdaptableWizardView", { enumerable: true, get: function () { return tslib_1.__importDefault(AdaptableWizardView_1).default; } });
 exports.default = Adaptable_1.Adaptable;
+/**
+ * AdapTable's No Code Wizard
+ */
 exports.AdaptableNoCodeWizard = Adaptable_1.AdaptableNoCodeWizard;
+/**
+ * AdapTable's Logger
+ */
 exports.AdaptableLogger = AdaptableLogger_1.AdaptableLogger;

package/src/components/Dashboard/DashboardToolbar.js

@@ -12,5 +12,5 @@ function DashboardToolbar(props) {
         React.createElement(Flex_1.Flex, { className: "ab-Dashboard__toolbar-title twa:items-center twa:justify-center twa:px-2 twa:pb-1 twa:opacity-70", flexDirection: "row" },
             React.createElement("span", { className: "twa:text-2" }, props.title),
             props.showConfigure && (React.createElement(SimpleButton_1.default, { "aria-label": `Configure ${props.title}`, icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
-            props.showClose && (React.createElement(SimpleButton_1.default, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
+            props.showClose && (React.createElement(SimpleButton_1.default, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, className: "twa:ml-1", tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose?.() })))));
 }

package/src/components/Datepicker/index.js

@@ -116,7 +116,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, className: "twa:p-0", onClick: () => setVisible(true) }));
     const overlayDOMRef = (0, react_1.useRef)(null);
-    return (React.createElement(Flex_1.Flex, null,
+    return (React.createElement(Flex_1.Flex, { className: "twa:flex-1" },
         React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { overlayDOMRef: overlayDOMRef, onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);

package/src/components/ExpressionEditor/EditorInput.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const BaseEditorInput_1 = require("./BaseEditorInput");
 const editorButtonsSearch_1 = require("./editorButtonsSearch");
 const EditorContext_1 = require("./EditorContext");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const editorButtonsAggregatedScalar_1 = require("./editorButtonsAggregatedScalar");
 const aggregatedScalarExpressionFunctions_1 = require("../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions");
 const editorButtonsCumulativeAggregatedScalar_1 = require("./editorButtonsCumulativeAggregatedScalar");
@@ -52,8 +51,25 @@ function EditorInput(props) {
             };
     }, [props.type]);
     const { setSelectedFunction } = (0, EditorContext_1.useExpressionEditor)();
-    const queryName = `${StringExtensions_1.default.CapitaliseFirstLetter(props.type)}Query`;
-    return (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: props.value, placeholder: `Create ${queryName}`, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
+    let queryName;
+    switch (props.type) {
+        case 'boolean':
+            queryName = 'Create an Expression that returns true / false';
+            break;
+        case 'scalar':
+            queryName = "Create an Expression that returns a single value of any type";
+            break;
+        case 'aggregatedScalar':
+            queryName = "Create an Expression that evaluates multiple rows and returns a value of any type";
+            break;
+        case 'cumulativeAggregatedScalar':
+            queryName = "Create a Cumulative Expression";
+            break;
+        case 'quantileAggregatedScalar':
+            queryName = "Create a Quantile Expression";
+            break;
+    }
+    return (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: props.value, placeholder: queryName, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
             ? editorButtonsAggregatedScalar_1.editorButtonsAggregatedScalar
             : props.type === 'cumulativeAggregatedScalar'
                 ? editorButtonsCumulativeAggregatedScalar_1.editorButtonsCumulativeAggregatedScalar

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

@@ -254,7 +254,7 @@ function TreeDropdown(props) {
                     } }, children));
             } },
             React.createElement(FieldWrap_1.default, { style: props.fieldStyle, className: "twa:w-full" },
-                React.createElement(Input_1.default, { type: "text", readOnly: true, "data-name": "Select Values", placeholder: props.placeholder ?? 'Select a value', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
+                React.createElement(Input_1.default, { type: "text", readOnly: true, "data-name": "Select Values", "aria-expanded": visible, placeholder: props.placeholder ?? 'Select a value', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
                         if (!visible) {
                             setVisible(true);
                         }

package/src/components/overlayBaseZIndex.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OVERLAY_BASE_Z_INDEX = void 0;
-exports.OVERLAY_BASE_Z_INDEX = 9999999;
+exports.OVERLAY_BASE_Z_INDEX = 9_999_999;

package/src/components/utils/useContainerScrollObserver/index.js

@@ -3,21 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useContainerScrollObserver = void 0;
 const react_1 = require("react");
 class SectionSelector {
+    scrollTop = 0;
+    node;
+    boxHeight;
+    childrenHeights = [];
+    maxScrollTop;
     constructor(node) {
-        this.scrollTop = 0;
-        this.childrenHeights = [];
-        this.select = (scrollTop) => {
-            this.refreshFromDOM();
-            const relativeCurrentHeight = (scrollTop * this.boxHeight) / this.maxScrollTop;
-            let heightSum = 0;
-            for (let i = 0, len = this.childrenHeights.length; i < len; i++) {
-                heightSum += this.childrenHeights[i];
-                if (heightSum > relativeCurrentHeight) {
-                    return i;
-                }
-            }
-            return this.childrenHeights.length - 1;
-        };
         this.node = node;
         this.refreshFromDOM();
     }
@@ -36,6 +27,18 @@ class SectionSelector {
             height,
         };
     }
+    select = (scrollTop) => {
+        this.refreshFromDOM();
+        const relativeCurrentHeight = (scrollTop * this.boxHeight) / this.maxScrollTop;
+        let heightSum = 0;
+        for (let i = 0, len = this.childrenHeights.length; i < len; i++) {
+            heightSum += this.childrenHeights[i];
+            if (heightSum > relativeCurrentHeight) {
+                return i;
+            }
+        }
+        return this.childrenHeights.length - 1;
+    };
 }
 const useContainerScrollObserver = (callback) => {
     const containerNodeRef = (0, react_1.useRef)(null);

package/src/devTools/index.js

@@ -27,66 +27,32 @@ function getColor(identifier) {
     return color;
 }
 class DevToolsMarker {
+    adaptableId;
     static create(adaptableId) {
         return new DevToolsMarker(adaptableId);
     }
+    markerDetails = {
+        label: '',
+        track: '',
+        trackGroup: undefined,
+        color: undefined,
+        details: [],
+        tooltip: undefined,
+    };
+    stopped = false;
     constructor(adaptableId) {
         this.adaptableId = adaptableId;
-        this.markerDetails = {
-            label: '',
-            track: '',
-            trackGroup: undefined,
-            color: undefined,
-            details: [],
-            tooltip: undefined,
-        };
-        this.stopped = false;
-        this.start = (startDetails) => {
-            if (this.markerDetails.startTs) {
-                return this;
-            }
-            const start = performance.now();
-            this.markerDetails.details = startDetails?.details ?? [];
-            this.markerDetails.startTs = start;
-            return this;
-        };
-        this.end = (markerDetails = {}) => {
-            if (this.stopped) {
-                return this;
-            }
-            this.stopped = true;
-            const start = markerDetails.startTs ?? this.markerDetails.startTs;
-            const end = markerDetails.endTs ?? this.markerDetails.endTs ?? performance.now();
-            let color = markerDetails.color || this.markerDetails.color || '';
-            const trackGroup = markerDetails.trackGroup ||
-                this.markerDetails.trackGroup ||
-                `AdapTable (${this.adaptableId})`;
-            const details = [...(this.markerDetails.details || []), ...(markerDetails.details || [])];
-            const tooltip = markerDetails.tooltip || this.markerDetails.tooltip;
-            const label = markerDetails.label || this.markerDetails.label || 'Unknown';
-            const track = markerDetails.track || this.markerDetails.track || 'Unknown';
-            if (!color) {
-                const identifier = `${trackGroup}:${track}:${label}`;
-                color = getColor(identifier);
-            }
-            performance.measure(label, {
-                start,
-                end,
-                detail: {
-                    devtools: {
-                        dataType: 'track-entry',
-                        trackGroup,
-                        track,
-                        color: color || 'primary',
-                        properties: details.length > 0 ? details.map((detail) => [detail.name, detail.value]) : undefined,
-                        tooltipText: tooltip,
-                    },
-                },
-            });
-            return this;
-        };
         this.adaptableId = adaptableId;
     }
+    start = (startDetails) => {
+        if (this.markerDetails.startTs) {
+            return this;
+        }
+        const start = performance.now();
+        this.markerDetails.details = startDetails?.details ?? [];
+        this.markerDetails.startTs = start;
+        return this;
+    };
     get startTimestamp() {
         return this.markerDetails.startTs;
     }
@@ -136,6 +102,41 @@ class DevToolsMarker {
             return acc;
         }, {});
     }
+    end = (markerDetails = {}) => {
+        if (this.stopped) {
+            return this;
+        }
+        this.stopped = true;
+        const start = markerDetails.startTs ?? this.markerDetails.startTs;
+        const end = markerDetails.endTs ?? this.markerDetails.endTs ?? performance.now();
+        let color = markerDetails.color || this.markerDetails.color || '';
+        const trackGroup = markerDetails.trackGroup ||
+            this.markerDetails.trackGroup ||
+            `AdapTable (${this.adaptableId})`;
+        const details = [...(this.markerDetails.details || []), ...(markerDetails.details || [])];
+        const tooltip = markerDetails.tooltip || this.markerDetails.tooltip;
+        const label = markerDetails.label || this.markerDetails.label || 'Unknown';
+        const track = markerDetails.track || this.markerDetails.track || 'Unknown';
+        if (!color) {
+            const identifier = `${trackGroup}:${track}:${label}`;
+            color = getColor(identifier);
+        }
+        performance.measure(label, {
+            start,
+            end,
+            detail: {
+                devtools: {
+                    dataType: 'track-entry',
+                    trackGroup,
+                    track,
+                    color: color || 'primary',
+                    properties: details.length > 0 ? details.map((detail) => [detail.name, detail.value]) : undefined,
+                    tooltipText: tooltip,
+                },
+            },
+        });
+        return this;
+    };
 }
 exports.DevToolsMarker = DevToolsMarker;
 function areAdaptableProfileTracksEnabled(adaptableId) {

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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: 1769179439939 || Date.now(),
-    VERSION: "22.0.0-canary.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1770107080647 || Date.now(),
+    VERSION: "22.0.0-canary.3" || '--current-version--',
 };

package/src/layout-manager/src/LMEmitter.js

@@ -5,20 +5,20 @@ const LMLogger_1 = require("./LMLogger");
 function x(a, b) { }
 const xtype = [1, '2'];
 class LMEmitter extends LMLogger_1.LMLogger {
+    destroyed = false;
+    suspended = false;
     constructor(options) {
         super(options);
-        this.destroyed = false;
-        this.suspended = false;
-        /**
-         * For each supported event, we have a Set that holds all the callbacks that should be executed
-         * when the event is triggered.
-         */
-        this.eventSets = {
-            gridLayoutChanged: new Set(),
-            columnDefsChanged: new Set(),
-            rowModelUpdated: new Set(),
-        };
     }
+    /**
+     * For each supported event, we have a Set that holds all the callbacks that should be executed
+     * when the event is triggered.
+     */
+    eventSets = {
+        gridLayoutChanged: new Set(),
+        columnDefsChanged: new Set(),
+        rowModelUpdated: new Set(),
+    };
     on(event, callback) {
         this.eventSets[event].add(callback);
         return () => {

package/src/layout-manager/src/LMLogger.js

@@ -7,6 +7,13 @@ const performanceTime = (previousTime) => {
     return Math.round(previousTime ? now - previousTime : now);
 };
 class LMLogger {
+    debugger;
+    infoLogger;
+    successLogger;
+    warnLogger;
+    errorLogger;
+    perfLogger;
+    debugId;
     constructor(options) {
         this.debugId = options.debugId;
         this.debugger = (0, infinite_react_1.debug)(this.debugId ? `LayoutManager:${this.debugId}` : 'LayoutManager');

package/src/layout-manager/src/index.js

@@ -142,59 +142,20 @@ function getDefaultColumnSizeStateForColDef(colId, colDef, options) {
     return undefined;
 }
 class LayoutManager extends LMEmitter_1.LMEmitter {
+    gridApi;
+    fieldsToIds = {};
+    idsToFields = {};
+    idsToColDefs = {};
+    initialColumnWidths = {};
+    currentLayout = null;
+    layoutChangeDebounce;
+    _prevFiredLayout;
+    setGridOption_default;
+    suppressGlobalAgGridEventListener = false;
+    supressGlobalAgGridEventTimeoutId = null;
+    layoutManagerDebugId;
     constructor(options) {
         super({ debugId: options.debugId });
-        this.fieldsToIds = {};
-        this.idsToFields = {};
-        this.idsToColDefs = {};
-        this.initialColumnWidths = {};
-        this.currentLayout = null;
-        this.suppressGlobalAgGridEventListener = false;
-        this.supressGlobalAgGridEventTimeoutId = null;
-        this.globalAgGridEventListener = (type, event) => {
-            if (this.destroyed || this.suppressGlobalAgGridEventListener) {
-                return;
-            }
-            if (type in COLUMN_EVENTS_THAT_TRIGGERS_AUTO_LAYOUT_SAVE) {
-                if (type === 'columnResized' && !event.finished) {
-                    return;
-                }
-                // called while dragging a column from the sidebar, to the row groups panel
-                if (type === 'displayedColumnsChanged' && event.source === 'uiColumnDragged') {
-                    return;
-                }
-                this.warn(`globalAgGridEventListener-${type}`, event);
-                if (!this.currentLayout) {
-                    const gridLayout = this.getLayoutModelFromGrid();
-                    // if there's no layout set currently in AG Grid
-                    // then emit the gridLayoutChanged event directly
-                    // as we don't have a current layout to compare to
-                    this.onGridLayoutChanged(gridLayout);
-                    return;
-                }
-                const gridLayout = this.getLayoutModelFromGrid();
-                // but if we do have a current layout set
-                // then only emit the event if the layout has changed
-                if (!isGridLayoutSame({
-                    layoutFromGrid: gridLayout,
-                    layoutFromModel: this.currentLayout,
-                })) {
-                    this.onGridLayoutChanged(gridLayout);
-                    return;
-                }
-            }
-        };
-        this.columnDefsChanged = (colDefs) => {
-            if (this.suppressGlobalAgGridEventListener) {
-                return;
-            }
-            this.warn('onColumnDefsChanged');
-            this.indexColumns();
-            if (this.currentLayout) {
-                this.applyLayout(this.currentLayout);
-            }
-            this.emitSync('columnDefsChanged', colDefs);
-        };
         this.layoutChangeDebounce = options.layoutChangeDebounce ?? 0;
         if (this.layoutChangeDebounce) {
             this.onGridLayoutChanged = (0, infinite_react_1.debounce)(this.onGridLayoutChanged, {
@@ -249,6 +210,50 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
         };
         this.gridApi.setGridOption = setGridOption;
     }
+    globalAgGridEventListener = (type, event) => {
+        if (this.destroyed || this.suppressGlobalAgGridEventListener) {
+            return;
+        }
+        if (type in COLUMN_EVENTS_THAT_TRIGGERS_AUTO_LAYOUT_SAVE) {
+            if (type === 'columnResized' && !event.finished) {
+                return;
+            }
+            // called while dragging a column from the sidebar, to the row groups panel
+            if (type === 'displayedColumnsChanged' && event.source === 'uiColumnDragged') {
+                return;
+            }
+            this.warn(`globalAgGridEventListener-${type}`, event);
+            if (!this.currentLayout) {
+                const gridLayout = this.getLayoutModelFromGrid();
+                // if there's no layout set currently in AG Grid
+                // then emit the gridLayoutChanged event directly
+                // as we don't have a current layout to compare to
+                this.onGridLayoutChanged(gridLayout);
+                return;
+            }
+            const gridLayout = this.getLayoutModelFromGrid();
+            // but if we do have a current layout set
+            // then only emit the event if the layout has changed
+            if (!isGridLayoutSame({
+                layoutFromGrid: gridLayout,
+                layoutFromModel: this.currentLayout,
+            })) {
+                this.onGridLayoutChanged(gridLayout);
+                return;
+            }
+        }
+    };
+    columnDefsChanged = (colDefs) => {
+        if (this.suppressGlobalAgGridEventListener) {
+            return;
+        }
+        this.warn('onColumnDefsChanged');
+        this.indexColumns();
+        if (this.currentLayout) {
+            this.applyLayout(this.currentLayout);
+        }
+        this.emitSync('columnDefsChanged', colDefs);
+    };
     indexColumns() {
         const colDefs = this.gridApi.getColumnDefs();
         this.fieldsToIds = {};