@adaptabletools/adaptable-cjs 18.0.0-canary.6 → 18.0.0-canary.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-cjs",
-  "version": "18.0.0-canary.6",
+  "version": "18.0.0-canary.8",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",
@@ -61,7 +61,7 @@
     "tinycolor2": "^1.4.2",
     "tslib": "^2.3.0",
     "uuid": "^3.3.2",
-    "react-toastify": "10.0.1"
+    "react-toastify": "9.1.3"
   },
   "peerDependencies": {
     "ag-grid-community": ">=31.1.0"

package/src/Utilities/Services/LicenseService/index.js

@@ -26,17 +26,19 @@ var LicenseValidityType;
 const SANDPACK_REGEX = /(https):\/\/\d+\-\d+\-\d+\-(sandpack\.codesandbox\.io)/g;
 const SANDBOX_REGEX = /(https):\/\/\S+(\.csb\.app)/g;
 const DEMO_REGEX = /(https):\/\/\S+(\.adaptabletools\.com)/g;
-const origin = typeof window !== 'undefined' ? window.location.origin : '';
+const getOrigin = () => {
+    return typeof window !== 'undefined' ? window.location.origin : '';
+};
 const isInsideSandpack = () => {
-    const [_fullUrl, protocol, sandpackUrl] = Array.from(SANDPACK_REGEX.exec(origin) || []);
+    const [_fullUrl, protocol, sandpackUrl] = Array.from(SANDPACK_REGEX.exec(getOrigin()) || []);
     return protocol === 'https' && sandpackUrl === 'sandpack.codesandbox.io';
 };
 const isInsideSandbox = () => {
-    const [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(origin) || []);
+    const [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(getOrigin()) || []);
     return protocol === 'https' && sandboxUrl === '.csb.app';
 };
 const isDemoApp = () => {
-    const [_fullUrl, protocol, demoAppUrl] = Array.from(DEMO_REGEX.exec(origin) || []);
+    const [_fullUrl, protocol, demoAppUrl] = Array.from(DEMO_REGEX.exec(getOrigin()) || []);
     return protocol === 'https' && demoAppUrl === '.adaptabletools.com';
 };
 class LicenseService {

package/src/View/AdaptableView.js

@@ -35,7 +35,7 @@ class AdaptableView extends React.Component {
             , { 
                 // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
                 // instance is destroyed and re-created many times
-                containerId: adaptableOptions.adaptableId, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
+                containerId: `Toastify-${adaptableOptions.adaptableId}`, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
             (watermark === null || watermark === void 0 ? void 0 : watermark.show) && React.createElement(License_1.LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
             React.createElement(WindowPopups_1.WindowPopups, null),
             React.createElement(FormPopups_1.FormPopups, null),

package/src/View/Components/Popups/AdaptableToaster.js

@@ -16,7 +16,7 @@ const showToast = (props) => {
     });
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
     const toastProps = ObjectFactory_1.default.CreateToastOptions(adaptableOptions.notificationsOptions, {
-        containerId: adaptableOptions.adaptableId,
+        containerId: `Toastify-${adaptableOptions.adaptableId}`,
         onClose: () => {
             off();
         },

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataChangeHistoryGrid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const AdaptableContext_1 = require("../AdaptableContext");
 const react_1 = require("react");
+const AdaptableContext_1 = require("../AdaptableContext");
 const usePrevious_1 = tslib_1.__importDefault(require("../../components/utils/usePrevious"));
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const buildActionColumnButton_1 = require("./buildActionColumnButton");
+const AdaptableAgGrid_1 = require("../../agGrid/AdaptableAgGrid");
 const DataChangeHistoryGrid = (props) => {
     const { changeHistoryLog, adaptableContainerId, agGridContainerId, onUndoChange, onClearRow } = props;
     const mainAdaptableInstance = (0, AdaptableContext_1.useAdaptable)();
@@ -24,13 +25,12 @@ const DataChangeHistoryGrid = (props) => {
             const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
             const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow);
             const modules = mainAdaptableInstance.getAgGridRegisteredModules();
-            const agGridConfig = {
+            const dataChangeHistoryAdaptableApi = await AdaptableAgGrid_1.AdaptableAgGrid._initInternal({
+                variant: 'vanilla',
+                adaptableOptions,
                 gridOptions,
-                modules: modules,
-            };
-            // to avoid direct dependency to Adaptable.ts and thus creating a circular dependency;
-            const adaptableInitFn = Object.getPrototypeOf(mainAdaptableInstance).constructor.init;
-            const dataChangeHistoryAdaptableApi = await adaptableInitFn(adaptableOptions, agGridConfig);
+                modules,
+            });
             setAdaptableApi(dataChangeHistoryAdaptableApi);
         };
         initializeAdaptableGrid();

package/src/View/Layout/TransposedPopup.js

@@ -98,7 +98,7 @@ const TransposedPopup = (props) => {
             },
             layoutOptions: {
                 createDefaultLayout: false,
-                autoSizeColumnsInLayout: false,
+                autoSizeColumnsInLayout: true,
             },
             predefinedConfig: {
                 Layout: {

package/src/agGrid/ActionColumnRenderer.js

@@ -9,7 +9,7 @@ const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext
 const ActionButtons = (props) => {
     const { buttons, adaptableApi, context, rerender } = props;
     return (React.createElement(React.Fragment, null, buttons.map((button, index) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         if (button.hidden && button.hidden(button, context)) {
             return;
         }
@@ -31,7 +31,8 @@ const ActionButtons = (props) => {
             }, 16);
         };
         const disabled = button.disabled && button.disabled(button, context);
-        return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' }, buttonLabel));
+        const identifier = (_d = (_c = (_a = button.label) !== null && _a !== void 0 ? _a : (_b = button.icon) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : button.tooltip) !== null && _d !== void 0 ? _d : `${index + 1}`;
+        return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${identifier}`, variant: (_e = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _e !== void 0 ? _e : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: (_f = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _f !== void 0 ? _f : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' }, buttonLabel));
     })));
 };
 const ReactActionColumnRenderer = (props) => {

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -27,7 +27,7 @@ import { AgGridOptionsService } from './AgGridOptionsService';
 import { AgGridColumnAdapter } from './AgGridColumnAdapter';
 import { RowEditService } from '../Utilities/Services/RowEditService';
 export type AdaptableVariant = 'vanilla' | 'react' | 'angular';
-export type AdaptableLifecycleState = 'initial' | 'preprocessOptions' | 'initAdaptableState' | 'setupAgGrid' | 'initAgGrid' | 'ready' | 'ready' | 'preDestroyed';
+export type AdaptableLifecycleState = 'initial' | 'preprocessOptions' | 'initAdaptableState' | 'setupAgGrid' | 'initAgGrid' | 'available' | 'ready' | 'preDestroyed';
 type RenderAgGridFrameworkComponentResult = false | GridApi;
 interface AdaptableInitInternalConfig<TData = any> {
     variant: AdaptableVariant;
@@ -115,6 +115,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private static collectInstance;
     private static dismissInstance;
     get isReady(): boolean;
+    get isAvailable(): boolean;
     get isDestroyed(): boolean;
     _emit: (eventName: string, data?: any) => Promise<any>;
     _emitSync: (eventName: string, data?: any) => any;
@@ -125,9 +126,9 @@ export declare class AdaptableAgGrid implements IAdaptable {
      * @private
      */
     static _initInternal(config: AdaptableInitInternalConfig): Promise<AdaptableApi>;
+    private _initAdaptableAgGrid;
     private normaliseLayoutState;
     private normaliseToolPanelState;
-    private _initAdaptableAgGrid;
     applyColumnFiltering(): void;
     applyGridFiltering(): void;
     private refreshColDefs;

package/src/agGrid/AdaptableAgGrid.js

@@ -195,6 +195,9 @@ class AdaptableAgGrid {
     get isReady() {
         return this.lifecycleState === 'ready';
     }
+    get isAvailable() {
+        return this.lifecycleState === 'available' || this.lifecycleState === 'ready';
+    }
     get isDestroyed() {
         return this.lifecycleState === 'preDestroyed';
     }
@@ -246,73 +249,6 @@ class AdaptableAgGrid {
             return doInit(adaptableInstance);
         }
     }
-    normaliseLayoutState(state, config) {
-        var _a, _b, _c;
-        if (this.shouldCreateDefaultLayout(state, this.adaptableOptions)) {
-            const defaultLayout = this.createDefaultLayout(state, config.gridOptions.columnDefs);
-            const layoutState = state.Layout || {};
-            const availableLayouts = layoutState.Layouts || [];
-            availableLayouts.push(defaultLayout);
-            layoutState.Layouts = availableLayouts;
-            layoutState.CurrentLayout = defaultLayout.Name;
-            state.Layout = layoutState;
-        }
-        else {
-            const layoutState = state.Layout;
-            // ensure CurrentLayout is valid
-            if (!layoutState.CurrentLayout ||
-                !layoutState.Layouts.find((l) => l.Name === layoutState.CurrentLayout)) {
-                layoutState.CurrentLayout = (_b = (_a = layoutState.Layouts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Name;
-            }
-        }
-        // for the initial state, we need to dynamically add the ActionRowColumn (if necessary)
-        // for subsequent layout changes, the `Adaptable.setLayout()` method handles this
-        // this is a serious code smell, hopefully we will delete `setLayout()` at some point
-        const actionRowColDefs = this.api.actionRowApi.internalApi.getColDefsForActionRowColumns();
-        actionRowColDefs.forEach((actionRowColDef) => {
-            const currentLayout = state.Layout.Layouts.find((l) => l.Name === state.Layout.CurrentLayout);
-            if (currentLayout && !currentLayout.Columns.includes(actionRowColDef.colId)) {
-                currentLayout.Columns.push(actionRowColDef.colId);
-                currentLayout.PinnedColumnsMap = currentLayout.PinnedColumnsMap || {};
-                currentLayout.PinnedColumnsMap[actionRowColDef.colId] = actionRowColDef.pinned;
-            }
-        });
-        /**
-         * Viewport mode does not support a few
-         * features instead of complicating the
-         * logic where layout is applied, it is easier and
-         * less error prone to just remove it.
-         */
-        if (config.gridOptions.rowModelType === 'viewport') {
-            (_c = state.Layout.Layouts) === null || _c === void 0 ? void 0 : _c.forEach((layout) => {
-                if (layout.RowGroupedColumns) {
-                    delete layout.RowGroupedColumns;
-                }
-                if (layout.AggregationColumns) {
-                    delete layout.AggregationColumns;
-                }
-                if (layout.PivotColumns) {
-                    delete layout.PivotColumns;
-                    delete layout.EnablePivot;
-                }
-            });
-        }
-        return state;
-    }
-    normaliseToolPanelState(state) {
-        var _a, _b, _c;
-        if ((_a = state === null || state === void 0 ? void 0 : state.ToolPanel) === null || _a === void 0 ? void 0 : _a.ToolPanels) {
-            return state;
-        }
-        // no predefined config provided, we will display all the panels collapsed (custom & module)
-        const defaultToolPanels = [];
-        (_c = (_b = this.adaptableOptions.toolPanelOptions) === null || _b === void 0 ? void 0 : _b.customToolPanels) === null || _c === void 0 ? void 0 : _c.forEach((customToolPanel) => defaultToolPanels.push({ Name: customToolPanel.name }));
-        Types_1.ALL_TOOL_PANELS.forEach((moduleToolPanel) => defaultToolPanels.push({ Name: moduleToolPanel }));
-        const toolPanelState = state.ToolPanel || {};
-        toolPanelState.ToolPanels = defaultToolPanels;
-        state.ToolPanel = toolPanelState;
-        return state;
-    }
     async _initAdaptableAgGrid(config) {
         var _a, _b;
         // Phase 1: Preprocess Adaptable Options
@@ -387,6 +323,8 @@ class AdaptableAgGrid {
         }
         this.forPlugins((plugin) => plugin.afterInitServices(this));
         this.forPlugins((plugin) => plugin.afterInitModules(this, this.adaptableModules));
+        // do this now so it sets module entitlements
+        this.EntitlementService.setModulesEntitlements();
         /**
          * At this point it's mandatory to have the ALL the Adaptable blocks initialized:
          * Store, APIs, Services, Modules
@@ -413,7 +351,10 @@ class AdaptableAgGrid {
         /**
          * At this point AG Grid is initialized!
          */
-        this.updateColumnModelAndRefreshGrid();
+        this.deriveAdaptableColumnStateFromAgGrid();
+        this.agGridColumnAdapter.setupColumns();
+        // we need this because we need the internal Column state to be ready before doing any extra business logic
+        this.lifecycleState = 'available';
         this.api.themeApi.applyCurrentTheme();
         this.validatePrimaryKey();
         this.embedColumnMenu = this.agGridAdapter.isModulePresent(core_1.ModuleNames.MenuModule);
@@ -423,8 +364,8 @@ class AdaptableAgGrid {
         this.applyColumnFiltering();
         this.addGridEventListeners();
         this.temporaryAdaptableStateUpdates();
-        // do this now so it sets module entitlements
-        this.EntitlementService.setModulesEntitlements();
+        this.redrawBody();
+        this.refreshHeader();
         // create the module menu (for use in the dashboard and the toolpanel)
         // TODO see #create-create-module-menu - make sure it's the same here and there
         this.ModuleService.createModuleMenus();
@@ -445,6 +386,75 @@ class AdaptableAgGrid {
         perfInitAdaptableAgGrid.end();
         return Promise.resolve(this.api);
     }
+    normaliseLayoutState(state, config) {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.shouldCreateDefaultLayout(state, this.adaptableOptions)) {
+            const defaultLayout = this.createDefaultLayout(state, config.gridOptions.columnDefs);
+            const layoutState = state.Layout || {};
+            const availableLayouts = layoutState.Layouts || [];
+            availableLayouts.push(defaultLayout);
+            layoutState.Layouts = availableLayouts;
+            layoutState.CurrentLayout = defaultLayout.Name;
+            state.Layout = layoutState;
+        }
+        else {
+            const layoutState = state.Layout;
+            // ensure CurrentLayout is valid
+            if (!layoutState.CurrentLayout ||
+                !layoutState.Layouts.find((l) => l.Name === layoutState.CurrentLayout)) {
+                layoutState.CurrentLayout = (_b = (_a = layoutState.Layouts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Name;
+            }
+        }
+        // for the initial state, we need to dynamically add the ActionRowColumn (if necessary)
+        // for subsequent layout changes, the `Adaptable.setLayout()` method handles this
+        // this is a serious code smell, hopefully we will delete `setLayout()` at some point
+        const hasActionRowButtons = !!((_c = this.adaptableOptions.actionRowOptions) === null || _c === void 0 ? void 0 : _c.actionRowButtons);
+        if (hasActionRowButtons) {
+            const currentLayout = state.Layout.Layouts.find((l) => l.Name === state.Layout.CurrentLayout);
+            if (currentLayout && !currentLayout.Columns.includes(GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS)) {
+                currentLayout.Columns.push(GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS);
+                const columnPosition = (_e = (_d = this.adaptableOptions.actionRowOptions) === null || _d === void 0 ? void 0 : _d.actionRowButtonOptions) === null || _e === void 0 ? void 0 : _e.position;
+                currentLayout.PinnedColumnsMap = currentLayout.PinnedColumnsMap || {};
+                currentLayout.PinnedColumnsMap[GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS] =
+                    columnPosition === 'pinnedRight' ? 'right' : 'left';
+            }
+        }
+        /**
+         * Viewport mode does not support a few
+         * features instead of complicating the
+         * logic where layout is applied, it is easier and
+         * less error prone to just remove it.
+         */
+        if (config.gridOptions.rowModelType === 'viewport') {
+            (_f = state.Layout.Layouts) === null || _f === void 0 ? void 0 : _f.forEach((layout) => {
+                if (layout.RowGroupedColumns) {
+                    delete layout.RowGroupedColumns;
+                }
+                if (layout.AggregationColumns) {
+                    delete layout.AggregationColumns;
+                }
+                if (layout.PivotColumns) {
+                    delete layout.PivotColumns;
+                    delete layout.EnablePivot;
+                }
+            });
+        }
+        return state;
+    }
+    normaliseToolPanelState(state) {
+        var _a, _b, _c;
+        if ((_a = state === null || state === void 0 ? void 0 : state.ToolPanel) === null || _a === void 0 ? void 0 : _a.ToolPanels) {
+            return state;
+        }
+        // no predefined config provided, we will display all the panels collapsed (custom & module)
+        const defaultToolPanels = [];
+        (_c = (_b = this.adaptableOptions.toolPanelOptions) === null || _b === void 0 ? void 0 : _b.customToolPanels) === null || _c === void 0 ? void 0 : _c.forEach((customToolPanel) => defaultToolPanels.push({ Name: customToolPanel.name }));
+        Types_1.ALL_TOOL_PANELS.forEach((moduleToolPanel) => defaultToolPanels.push({ Name: moduleToolPanel }));
+        const toolPanelState = state.ToolPanel || {};
+        toolPanelState.ToolPanels = defaultToolPanels;
+        state.ToolPanel = toolPanelState;
+        return state;
+    }
     applyColumnFiltering() {
         if (this.api.columnFilterApi.isQuickFilterAvailable()) {
             if (this.api.columnFilterApi.isQuickFilterVisible()) {
@@ -592,7 +602,7 @@ class AdaptableAgGrid {
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'isExternalFilterPresent', (original_isExternalFilterPresent) => {
             return (params) => {
-                if (this.isDestroyed) {
+                if (!this.isAvailable) {
                     return true;
                 }
                 const columnFilters = this.api.columnFilterApi.getActiveColumnFilters();
@@ -609,7 +619,7 @@ class AdaptableAgGrid {
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'doesExternalFilterPass', (original_doesExternalFilterPass) => {
             return (node) => {
-                if (this.isDestroyed) {
+                if (!this.isAvailable) {
                     return true;
                 }
                 // first we assess a Grid Filter (if its running locally)
@@ -920,7 +930,8 @@ class AdaptableAgGrid {
                 const gridRoot = agGridApi.ctrlsService.gridBodyCtrl.eGridBody;
                 const gridContainer = gridRoot === null || gridRoot === void 0 ? void 0 : gridRoot.closest('[class*="ag-theme"]');
                 if (!gridContainer) {
-                    this.logger.consoleError('No AG Grid container element found in the DOM. Please provide a valid container element in `ContainerOptions.agGridContainer`');
+                    this.logger.consoleError(`No AG Grid container could be derived from the Adaptable framework wrapper.
+            Please contact AdapTable Support and in the meantime provide a valid container element in 'ContainerOptions.agGridContainer'!`);
                 }
                 this.DANGER_USE_GETTER_agGridContainerElement = gridContainer;
             }

package/src/agGrid/AgGridAdapter.d.ts

@@ -7,6 +7,7 @@ import { ColGroupDef } from '@ag-grid-community/core/dist/esm/es6/entities/colDe
 export declare class AgGridAdapter {
     private adaptableInstance;
     private DANGER_USE_GETTER_gridApi;
+    private DANGER_gridApi_from_args;
     initialGridOptions: GridOptions;
     constructor(adaptableInstance: AdaptableAgGrid);
     private get adaptableOptions();
@@ -15,6 +16,12 @@ export declare class AgGridAdapter {
     destroy(): void;
     setAgGridApi(gridApi: GridApi): void;
     getAgGridApi(skipLogging?: boolean): GridApi | undefined;
+    /**
+     * When AG Grid is rendered the first time, the AG GridApi is not yet set in the Adaptable context (as it's set only AFTER the grid is fully initialised)
+     * yet we need it when evaluating custom GridOptions properties on the first render.
+     * to handle this edge case, we try to extract the AG GridApi from the invocation arguments
+     */
+    grabAgGridApiOnTheFly(args: unknown): void;
     getLiveGridOptions(): GridOptions | undefined;
     updateGridOptions(options: ManagedGridOptions): void;
     setGridOption<Key extends ManagedGridOptionKey>(key: Key, value: GridOptions[Key]): void;

package/src/agGrid/AgGridAdapter.js

@@ -30,10 +30,30 @@ class AgGridAdapter {
         if (this.DANGER_USE_GETTER_gridApi) {
             return this.DANGER_USE_GETTER_gridApi;
         }
+        if (this.DANGER_gridApi_from_args) {
+            return this.DANGER_gridApi_from_args;
+        }
         if (!skipLogging) {
             console.error('AgGridApi is not available yet');
         }
     }
+    /**
+     * When AG Grid is rendered the first time, the AG GridApi is not yet set in the Adaptable context (as it's set only AFTER the grid is fully initialised)
+     * yet we need it when evaluating custom GridOptions properties on the first render.
+     * to handle this edge case, we try to extract the AG GridApi from the invocation arguments
+     */
+    grabAgGridApiOnTheFly(args) {
+        var _a, _b;
+        if (this.DANGER_USE_GETTER_gridApi) {
+            return;
+        }
+        if (Array.isArray(args) &&
+            typeof ((_a = args[0]) === null || _a === void 0 ? void 0 : _a.api) === 'object' &&
+            ((_b = args[0]) === null || _b === void 0 ? void 0 : _b.api) instanceof core_1.GridApi) {
+            this.DANGER_gridApi_from_args = args[0].api;
+        }
+    }
+    // TODO AFL check if this is still needed if GridAPI offers the `getOption` method
     // do NOT ever mutate the returned object!!
     getLiveGridOptions() {
         var _a, _b;

package/src/agGrid/AgGridOptionsService.d.ts

@@ -8,4 +8,5 @@ export declare class AgGridOptionsService {
     destroy(): void;
     setGridOptionsProperty<T extends keyof GridOptions>(gridOptions: GridOptions, propertyName: T, propertyGetter: (userPropertyValue: GridOptions[T]) => GridOptions[T] | undefined): GridOptions;
     revertGridOptionsPropertiesToUserValue<T extends keyof GridOptions>(gridOptions: GridOptions, propertyNames: T[]): void;
+    private get agGridAdapter();
 }

package/src/agGrid/AgGridOptionsService.js

@@ -33,6 +33,7 @@ class AgGridOptionsService {
                 if (this.adaptableInstance.isDestroyed) {
                     return;
                 }
+                this.agGridAdapter.grabAgGridApiOnTheFly(args);
                 return previousValue(...args);
             };
         }
@@ -50,5 +51,8 @@ class AgGridOptionsService {
             gridOptions[propertyName] = userValue;
         }
     }
+    get agGridAdapter() {
+        return this.adaptableInstance.agGridAdapter;
+    }
 }
 exports.AgGridOptionsService = AgGridOptionsService;

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     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: 1710607851386 || Date.now(),
-    VERSION: "18.0.0-canary.6" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1710788450625 || Date.now(),
+    VERSION: "18.0.0-canary.8" || '--current-version--',
 };

package/src/metamodel/adaptable.metamodel.d.ts

@@ -5299,6 +5299,33 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         }[];
     };
+    UpgradeConfig: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: ({
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+            defVal?: undefined;
+            ref?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            defVal: string;
+            ref: string;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            defVal: string;
+            ref?: undefined;
+        })[];
+    };
     UserColumnMenuItem: {
         name: string;
         kind: string;

package/src/metamodel/adaptable.metamodel.js

@@ -4412,6 +4412,12 @@ exports.ADAPTABLE_METAMODEL = {
                 "desc": "Callback function invoked when a batch successfully updates",
                 "isOpt": true
             },
+            {
+                "name": "flushAsync",
+                "kind": "b",
+                "desc": "Whether to flush async updates.",
+                "isOpt": true
+            },
             {
                 "name": "runAsync",
                 "kind": "b",
@@ -8975,6 +8981,33 @@ exports.ADAPTABLE_METAMODEL = {
             }
         ]
     },
+    "UpgradeConfig": {
+        "name": "UpgradeConfig",
+        "kind": "I",
+        "desc": "The upgrade config object",
+        "props": [
+            {
+                "name": "fromVersion",
+                "kind": "n",
+                "desc": "The version to upgrade from"
+            },
+            {
+                "name": "logger",
+                "kind": "R",
+                "desc": "The logger object",
+                "isOpt": true,
+                "defVal": "The console object",
+                "ref": "unknown"
+            },
+            {
+                "name": "toVersion",
+                "kind": "n",
+                "desc": "The version to upgrade to",
+                "isOpt": true,
+                "defVal": "The current version"
+            }
+        ]
+    },
     "UserColumnMenuItem": {
         "name": "UserColumnMenuItem",
         "kind": "I",
@@ -9157,6 +9190,27 @@ exports.ADAPTABLE_METAMODEL = {
                 "desc": "Custom column values for Values Column Filter and Grid Filter Builder",
                 "isOpt": true
             },
+            {
+                "name": "loadingScreenDelay",
+                "kind": "n",
+                "desc": "Delay in milliseconds before Loading Screen appears. `showLoadingScreen` must be true for this to take effect",
+                "isOpt": true,
+                "defVal": "200"
+            },
+            {
+                "name": "loadingScreenText",
+                "kind": "s",
+                "desc": "Text to display in Loading Screen.",
+                "isOpt": true,
+                "defVal": "'Retrieving your settings and setting up the grid...'"
+            },
+            {
+                "name": "loadingScreenTitle",
+                "kind": "s",
+                "desc": "Title to display in Loading Screen.",
+                "isOpt": true,
+                "defVal": "'Initialising Grid'"
+            },
             {
                 "name": "objectTags",
                 "kind": "u",