@adaptabletools/adaptable 16.0.0-canary.0 → 16.0.0-canary.2

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizard.js

@@ -16,44 +16,47 @@ const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/He
 const ConfigurationWizard = (props) => {
     var _a, _b;
     const [isPrimaryKeySelected, setIsValid] = React.useState(true);
-    const [adaptableOptions, setAdaptableOptions] = (0, react_1.useState)(() => {
-        var _a;
+    const [adaptableConfig, setAdaptableConfig] = (0, react_1.useState)(() => {
         const gridOptionDefaults = {
             sideBar: {
                 toolPanels: ['columns', 'filters', 'adaptable'],
             },
         };
-        const preparedAdaptableOptions = Object.assign(Object.assign({}, props.adaptableOptions), { gridOptions: Object.assign(Object.assign({}, gridOptionDefaults), (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) });
-        return AdaptableHelper_1.default.assignAdaptableOptions(preparedAdaptableOptions);
+        const gridOptions = Object.assign(Object.assign({}, gridOptionDefaults), props.adaptableConfig.gridOptions);
+        const adaptableOptions = AdaptableHelper_1.default.assignAdaptableOptions(props.adaptableConfig.adaptableOptions);
+        return { gridOptions, adaptableOptions };
     });
     const [selectedColumns, setSelectedColumns] = (0, react_1.useState)(() => {
-        return props.adaptableOptions.gridOptions.columnDefs.reduce((acc, col) => {
+        var _a, _b;
+        return (_b = (_a = props.adaptableConfig.gridOptions) === null || _a === void 0 ? void 0 : _a.columnDefs) === null || _b === void 0 ? void 0 : _b.reduce((acc, col) => {
             acc[col.field] = true;
             return acc;
         }, {});
     });
     const columnsHandle = React.useRef();
     const handleFinish = () => {
-        const newAdaptableOptions = Object.assign({}, adaptableOptions);
-        newAdaptableOptions.gridOptions = Object.assign({}, adaptableOptions.gridOptions);
+        const newAdaptableOptions = Object.assign({}, adaptableConfig.adaptableOptions);
+        const newGridOptions = Object.assign({}, adaptableConfig.gridOptions);
         if (columnsHandle.current) {
-            newAdaptableOptions.gridOptions.columnDefs = columnsHandle
-                .current.getColumns()
-                .map((column) => {
+            adaptableConfig.gridOptions.columnDefs = columnsHandle.current.getColumns().map((column) => {
                 const newColumn = Object.assign(Object.assign({}, column), { headerName: column.caption || StringExtensions_1.default.Humanize(column.field) });
                 delete newColumn.caption;
                 return newColumn;
             });
             newAdaptableOptions.primaryKey = columnsHandle.current.getPrimaryKey();
         }
-        setAdaptableOptions(newAdaptableOptions);
-        props.onFinish(newAdaptableOptions);
+        const newAdaptableConfig = {
+            adaptableOptions: newAdaptableOptions,
+            gridOptions: newGridOptions,
+        };
+        setAdaptableConfig(newAdaptableConfig);
+        props.onFinish(newAdaptableConfig);
     };
     const handlePrimaryKeyColumnIsNotSelected = React.useCallback((newIsValid) => {
         setIsValid(newIsValid);
     }, []);
     const handleColumnsChange = React.useCallback((columns) => {
-        setAdaptableOptions((adaptableOptions) => (Object.assign(Object.assign({}, adaptableOptions), { gridOptions: Object.assign(Object.assign({}, adaptableOptions.gridOptions), { columnDefs: columns }) })));
+        setAdaptableConfig((adaptableConfig) => (Object.assign(Object.assign({}, adaptableConfig), { gridOptions: Object.assign(Object.assign({}, adaptableConfig.gridOptions), { columnDefs: columns }) })));
     }, []);
     const handleColumnSelectionChange = React.useCallback((col, flag) => {
         setSelectedColumns((selectedColumns) => {
@@ -62,7 +65,13 @@ const ConfigurationWizard = (props) => {
             return newSelectedColumns;
         });
     }, []);
-    const financePlugin = (_b = (_a = adaptableOptions.plugins) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (plugin) => plugin.pluginId === 'finance');
+    const handleAdaptableOptionsChange = React.useCallback((adaptableOptions) => {
+        setAdaptableConfig((adaptableConfig) => (Object.assign(Object.assign({}, adaptableConfig), { adaptableOptions: adaptableOptions })));
+    }, []);
+    const handleGridOptionsChange = React.useCallback((gridOptions) => {
+        setAdaptableConfig((adaptableConfig) => (Object.assign(Object.assign({}, adaptableConfig), { gridOptions: gridOptions })));
+    }, []);
+    const financePlugin = (_b = (_a = adaptableConfig.adaptableOptions.plugins) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (plugin) => plugin.pluginId === 'finance');
     let sections = [
         {
             title: 'Columns',
@@ -73,33 +82,33 @@ const ConfigurationWizard = (props) => {
                 }
                 return true;
             },
-            render: () => (React.createElement(ConfigurationWizardColumnsStep_1.ConfigurationWizardColumnsStep, { adaptableOptions: adaptableOptions, setPrimaryKeyIsNotSelected: handlePrimaryKeyColumnIsNotSelected, onChange: setAdaptableOptions, selectedColumns: selectedColumns, onSelectionChange: handleColumnSelectionChange, onColumnChange: handleColumnsChange, columnsHandle: columnsHandle })),
+            render: () => (React.createElement(ConfigurationWizardColumnsStep_1.ConfigurationWizardColumnsStep, { adaptableConfig: adaptableConfig, setPrimaryKeyIsNotSelected: handlePrimaryKeyColumnIsNotSelected, onChange: setAdaptableConfig, selectedColumns: selectedColumns, onSelectionChange: handleColumnSelectionChange, onColumnChange: handleColumnsChange, columnsHandle: columnsHandle })),
         },
         {
             title: 'AdapTable Options',
             details: 'Configure Adaptable Options',
-            isValid: () => (adaptableOptions.adaptableId ? true : 'Adaptable ID is required'),
-            render: () => (React.createElement(AdaptableOptionsForm_1.AdaptableOptionsForm, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
+            isValid: () => adaptableConfig.adaptableOptions.adaptableId ? true : 'Adaptable ID is required',
+            render: () => (React.createElement(AdaptableOptionsForm_1.AdaptableOptionsForm, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange })),
         },
         {
             title: 'AG Grid Options',
             details: 'Configure AG Grid Options',
-            render: () => (React.createElement(GridOptionsForm_1.default, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
+            render: () => (React.createElement(GridOptionsForm_1.default, { gridOptions: adaptableConfig.gridOptions, onChangedGridOptions: handleGridOptionsChange })),
         },
         {
             title: 'UI Elements',
             details: 'Configure UI Elements',
-            render: () => (React.createElement(UiOptionsForm_1.UIElementsForm, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
+            render: () => (React.createElement(UiOptionsForm_1.UIElementsForm, { adaptableOptions: adaptableConfig.adaptableOptions, gridOptions: adaptableConfig.gridOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange, onChangedGridOptions: handleGridOptionsChange })),
         },
         {
             title: 'Entitlements',
             details: 'Configure Entitlements',
-            render: () => (React.createElement(EntitlementsForm_1.default, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
+            render: () => (React.createElement(EntitlementsForm_1.default, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAptableOptions: handleAdaptableOptionsChange })),
         },
         financePlugin && {
             title: 'Finance',
             details: 'Finance Options',
-            render: () => (React.createElement(FinanceForm_1.FinanceForm, { adaptableOptions: adaptableOptions, onChangeadAptableOptions: setAdaptableOptions })),
+            render: () => (React.createElement(FinanceForm_1.FinanceForm, { adaptableConfig: adaptableConfig, onChangedAdaptableConfig: setAdaptableConfig })),
         },
     ].filter(Boolean);
     if (props.startSections) {
@@ -110,13 +119,13 @@ const ConfigurationWizard = (props) => {
                     isValid: section.isValid,
                     isVisible: section.isVisible,
                     render: () => {
-                        return section.render(adaptableOptions, setAdaptableOptions, setSelectedColumns);
+                        return section.render(adaptableConfig, setAdaptableConfig, setSelectedColumns);
                     },
                 };
             }),
             ...sections,
         ];
     }
-    return (React.createElement(OnePageWizards_1.OnePageWizard, { data: adaptableOptions, name: "Configure", defaultCurrentSectionName: 'default section name', onHide: () => null, onFinish: handleFinish, sections: sections }));
+    return (React.createElement(OnePageWizards_1.OnePageWizard, { data: adaptableConfig, name: "Configure", defaultCurrentSectionName: 'default section name', onHide: () => null, onFinish: handleFinish, sections: sections }));
 };
 exports.ConfigurationWizard = ConfigurationWizard;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizardColumnsStep.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { NocodeColumn } from './ColumnsList';
-import { AdaptableOptions } from '../../../types';
+import { AdaptableConfig } from './AdaptableConfig';
 export interface ConfigurationWizardColumnsStepProps {
-    adaptableOptions: AdaptableOptions;
-    onChange: (newOptions: AdaptableOptions) => void;
+    adaptableConfig: AdaptableConfig;
+    onChange: (newConfig: AdaptableConfig) => void;
     columnsHandle: React.MutableRefObject<{
         getColumns: () => any[];
         getPrimaryKey: () => string;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizardColumnsStep.js

@@ -5,14 +5,14 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
 const ConfigurationWizardColumnsStep = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     let theme = 'light';
-    if (typeof props.adaptableOptions.predefinedConfig === 'object' &&
-        ((_a = props.adaptableOptions.predefinedConfig.Theme) === null || _a === void 0 ? void 0 : _a.CurrentTheme)) {
-        theme = props.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
+    if (typeof props.adaptableConfig.adaptableOptions.predefinedConfig === 'object' &&
+        ((_a = props.adaptableConfig.adaptableOptions.predefinedConfig.Theme) === null || _a === void 0 ? void 0 : _a.CurrentTheme)) {
+        theme = props.adaptableConfig.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
     }
     return (React.createElement(ColumnsList_1.default, { theme: theme, handle: props.columnsHandle, onValidityChange: (valid) => {
             props.setPrimaryKeyIsNotSelected(valid);
-        }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_c = (_b = props.adaptableOptions) === null || _b === void 0 ? void 0 : _b.gridOptions) === null || _c === void 0 ? void 0 : _c.columnDefs }));
+        }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_b = props.adaptableConfig.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs }));
 };
 exports.ConfigurationWizardColumnsStep = ConfigurationWizardColumnsStep;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/EntitlementsForm.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AdaptableOptions } from '../../../types';
 interface EntitlementsFormOptions {
     adaptableOptions: AdaptableOptions;
-    onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    onChangedAptableOptions: (adaptableOptions: AdaptableOptions) => void;
 }
 declare const EntitlementsForm: React.FunctionComponent<EntitlementsFormOptions>;
 export default EntitlementsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/EntitlementsForm.js

@@ -48,7 +48,7 @@ const EntitlementsListForm = (props) => {
                 { adaptableModule: module, accessLevel: accessLevel },
             ];
         }
-        props.onChangeadAptableOptions(Object.assign(Object.assign({}, abOptions), { entitlementOptions: Object.assign(Object.assign({}, abOptions.entitlementOptions), { moduleEntitlements: newEntitlements }) }));
+        props.onChangedAptableOptions(Object.assign(Object.assign({}, abOptions), { entitlementOptions: Object.assign(Object.assign({}, abOptions.entitlementOptions), { moduleEntitlements: newEntitlements }) }));
     }, [abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions]);
     if (typeof entitlements === 'function') {
         return (React.createElement(HelpBlock_1.default, { mb: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
@@ -113,7 +113,7 @@ const DefaultEntitlementForm = (props) => {
         return React.createElement(HelpBlock_1.default, { mb: 2 }, "Default Entitlement is controlled by a custom function");
     }
     const handleDefaultEntitlementChange = React.useCallback((accessLevel) => {
-        props.onChangeadAptableOptions(Object.assign(Object.assign({}, abOptions), { entitlementOptions: Object.assign(Object.assign({}, abOptions.entitlementOptions), { defaultAccessLevel: accessLevel }) }));
+        props.onChangedAptableOptions(Object.assign(Object.assign({}, abOptions), { entitlementOptions: Object.assign(Object.assign({}, abOptions.entitlementOptions), { defaultAccessLevel: accessLevel }) }));
     }, [(_b = abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions) === null || _b === void 0 ? void 0 : _b.defaultAccessLevel]);
     return (React.createElement(FormLayout_1.default, { mb: 2 },
         React.createElement(FormLayout_1.FormRow, { label: "Default Entitlement:" },

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/FinanceForm/FinanceForm.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AdaptableOptions } from '../../../../types';
+import { AdaptableConfig } from '../../../../types';
 export interface FinanceFormProps {
-    adaptableOptions: AdaptableOptions;
-    onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    adaptableConfig: AdaptableConfig;
+    onChangedAdaptableConfig: (adaptableConfig: AdaptableConfig) => void;
 }
 export declare const FinanceForm: React.FunctionComponent<React.PropsWithChildren<FinanceFormProps>>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/FinanceForm/FinanceForm.js

@@ -216,17 +216,17 @@ const FDC3ColumnCreator = (props) => {
 const FinanceFormSectionTitle = (props) => (React.createElement(rebass_1.Box, Object.assign({}, props, { mb: 2 }),
     React.createElement(HelpBlock_1.default, null, props.children)));
 const FinanceForm = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    const columnOptions = (_d = (_c = (_b = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs) === null || _c === void 0 ? void 0 : _c.map) === null || _d === void 0 ? void 0 : _d.call(_c, (item) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const columnOptions = (_c = (_b = (_a = props.adaptableConfig.gridOptions) === null || _a === void 0 ? void 0 : _a.columnDefs) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, (item) => {
         var _a;
         return ({
             label: StringExtensions_1.default.Humanize((_a = item.headerName) !== null && _a !== void 0 ? _a : item.field),
             value: item.field,
         });
     });
-    const financePlugin = (_f = (_e = props.adaptableOptions) === null || _e === void 0 ? void 0 : _e.plugins) === null || _f === void 0 ? void 0 : _f.find((item) => item.pluginId === 'finance');
-    const financePluginOptions = ((_g = financePlugin === null || financePlugin === void 0 ? void 0 : financePlugin.options) !== null && _g !== void 0 ? _g : {});
-    const fdc3Columns = (_h = financePluginOptions === null || financePluginOptions === void 0 ? void 0 : financePluginOptions.fdc3Columns) !== null && _h !== void 0 ? _h : {};
+    const financePlugin = (_e = (_d = props.adaptableConfig.adaptableOptions) === null || _d === void 0 ? void 0 : _d.plugins) === null || _e === void 0 ? void 0 : _e.find((item) => item.pluginId === 'finance');
+    const financePluginOptions = ((_f = financePlugin === null || financePlugin === void 0 ? void 0 : financePlugin.options) !== null && _f !== void 0 ? _f : {});
+    const fdc3Columns = (_g = financePluginOptions === null || financePluginOptions === void 0 ? void 0 : financePluginOptions.fdc3Columns) !== null && _g !== void 0 ? _g : {};
     const handleSetFdc3Columns = (key, newFDC3Columns) => {
         var _a;
         // Unfurtunatly finance plugin options need to be mutated.
@@ -235,7 +235,7 @@ const FinanceForm = (props) => {
         financePluginOptions.fdc3Columns = (_a = financePluginOptions.fdc3Columns) !== null && _a !== void 0 ? _a : {};
         financePluginOptions.fdc3Columns[key] = newFDC3Columns;
         // on change is called with a new array of plugins so the component refreshes.
-        props.onChangeadAptableOptions(Object.assign(Object.assign({}, props.adaptableOptions), { plugins: [...props.adaptableOptions.plugins] }));
+        props.onChangedAdaptableConfig(Object.assign(Object.assign({}, props.adaptableConfig), { adaptableOptions: Object.assign(Object.assign({}, props.adaptableConfig.adaptableOptions), { plugins: [...props.adaptableConfig.adaptableOptions.plugins] }) }));
     };
     const renderEditor = (fdc3ColumnType, fdc3ColumnsItems) => {
         return fdc3ColumnsItems.map((fdc3Column, currentFDCColumnId) => (React.createElement(rebass_1.Box, { key: currentFDCColumnId, mb: 3 },
@@ -261,19 +261,19 @@ const FinanceForm = (props) => {
                     var _a;
                     handleSetFdc3Columns(type, [...((_a = fdc3Columns[type]) !== null && _a !== void 0 ? _a : []), fdc3Column]);
                 } })),
-        Boolean((_j = fdc3Columns.instrumentColumns) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement(rebass_1.Box, null,
+        Boolean((_h = fdc3Columns.instrumentColumns) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement(rebass_1.Box, null,
             React.createElement(FinanceFormSectionTitle, null, "Instrument Columns"),
             renderEditor('instrumentColumns', fdc3Columns.instrumentColumns))),
-        Boolean((_k = fdc3Columns.positionColumns) === null || _k === void 0 ? void 0 : _k.length) && (React.createElement(rebass_1.Box, null,
+        Boolean((_j = fdc3Columns.positionColumns) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement(rebass_1.Box, null,
             React.createElement(FinanceFormSectionTitle, null, "Position Columns"),
             renderEditor('positionColumns', fdc3Columns.positionColumns))),
-        Boolean((_l = fdc3Columns.contactColumns) === null || _l === void 0 ? void 0 : _l.length) && (React.createElement(rebass_1.Box, null,
+        Boolean((_k = fdc3Columns.contactColumns) === null || _k === void 0 ? void 0 : _k.length) && (React.createElement(rebass_1.Box, null,
             React.createElement(FinanceFormSectionTitle, null, "Contact Columns"),
             renderEditor('contactColumns', fdc3Columns.contactColumns))),
-        Boolean((_m = fdc3Columns.countryColumns) === null || _m === void 0 ? void 0 : _m.length) && (React.createElement(rebass_1.Box, null,
+        Boolean((_l = fdc3Columns.countryColumns) === null || _l === void 0 ? void 0 : _l.length) && (React.createElement(rebass_1.Box, null,
             React.createElement(FinanceFormSectionTitle, null, "Country Columns"),
             renderEditor('countryColumns', fdc3Columns.countryColumns))),
-        Boolean((_o = fdc3Columns.organizationColumns) === null || _o === void 0 ? void 0 : _o.length) && (React.createElement(rebass_1.Box, null,
+        Boolean((_m = fdc3Columns.organizationColumns) === null || _m === void 0 ? void 0 : _m.length) && (React.createElement(rebass_1.Box, null,
             React.createElement(FinanceFormSectionTitle, null, "Organization Columns"),
             renderEditor('organizationColumns', fdc3Columns.organizationColumns)))));
 };

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { AdaptableOptions } from '../../../types';
+import { GridOptions } from '@ag-grid-community/core';
 interface GridOptionsFormOptions {
-    adaptableOptions: AdaptableOptions;
-    onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    gridOptions: GridOptions;
+    onChangedGridOptions: (gridOptions: GridOptions) => void;
 }
 declare const GridOptionsForm: (props: GridOptionsFormOptions) => JSX.Element;
 export default GridOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -5,44 +5,34 @@ const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
 const rebass_1 = require("rebass");
 const GridOptionsForm = (props) => {
     var _a;
-    let abOptions = props.adaptableOptions;
-    const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.gridOptions), abOptions.gridOptions);
+    let { gridOptions } = props;
     return (React.createElement(rebass_1.Box, { p: 2 },
         React.createElement(HelpBlock_1.default, null, "Grid Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
             React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-                        abOptions.gridOptions.enableRangeSelection = enableRangeSelection;
-                        props.onChangeadAptableOptions(abOptions);
+                        gridOptions = Object.assign(Object.assign({}, gridOptions), { enableRangeSelection: enableRangeSelection });
+                        props.onChangedGridOptions(gridOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Quick Filter" },
                 React.createElement(CheckBox_1.CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-                        abOptions.gridOptions.defaultColDef = {
-                            floatingFilter,
-                        };
-                        props.onChangeadAptableOptions(abOptions);
+                        gridOptions = Object.assign(Object.assign({}, gridOptions), { defaultColDef: {
+                                floatingFilter,
+                            } });
+                        props.onChangedGridOptions(gridOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Suppress Column Virtualisation" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-                        abOptions.gridOptions.suppressColumnVirtualisation = suppressColumnVirtualisation;
-                        props.onChangeadAptableOptions(abOptions);
+                        gridOptions = Object.assign(Object.assign({}, gridOptions), { suppressColumnVirtualisation: suppressColumnVirtualisation });
+                        props.onChangedGridOptions(gridOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Column Menu Button" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-                        abOptions.gridOptions.suppressMenuHide = suppressMenuHide;
-                        props.onChangeadAptableOptions(abOptions);
+                        gridOptions = Object.assign(Object.assign({}, gridOptions), { suppressMenuHide: suppressMenuHide });
+                        props.onChangedGridOptions(gridOptions);
                     } })))));
 };
 exports.default = GridOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.d.ts

@@ -1,6 +1,6 @@
+import { GridOptions } from '@ag-grid-community/core';
 import * as React from 'react';
-import { AdaptableOptions } from '../../../../../types';
 export declare const UIOptionsSidebarForm: React.FunctionComponent<{
-    abOptions: AdaptableOptions;
-    onChange: (abOptions: AdaptableOptions) => void;
+    gridOptions: GridOptions;
+    onChange: (gridOptions: GridOptions) => void;
 }>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.js

@@ -38,8 +38,7 @@ const isSidebarChecked = (sideBar, panelName) => {
 };
 const UIOptionsSidebarForm = (props) => {
     var _a;
-    const { abOptions, onChange } = props;
-    const { gridOptions } = props.abOptions;
+    const { gridOptions, onChange } = props;
     const sideBar = prepareSidebarDef(gridOptions.sideBar);
     const renderSidebarCheckbox = (sidebarName) => {
         return (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.Humanize(sidebarName)));
@@ -60,13 +59,13 @@ const UIOptionsSidebarForm = (props) => {
         if (newPanels.length === 0) {
             hiddenByDefault = true;
         }
-        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions.gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { toolPanels: newPanels, hiddenByDefault }) }) });
-        props.onChange(newAbOptions);
+        const newGridOptions = Object.assign(Object.assign({}, gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { toolPanels: newPanels, hiddenByDefault }) });
+        props.onChange(newGridOptions);
     };
     let sidebarPosition = (_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.position) !== null && _a !== void 0 ? _a : 'right';
     const handleSidebarPositionChange = (position) => {
-        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions.gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { position }) }) });
-        props.onChange(newAbOptions);
+        const newGridOptions = Object.assign(Object.assign({}, gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { position }) });
+        props.onChange(newGridOptions);
     };
     return (React.createElement(rebass_1.Box, null,
         React.createElement(HelpBlock_1.default, null, "Tool Panels"),

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AdaptableOptions } from '../../../../types';
+import { GridOptions } from '@ag-grid-community/core';
 export declare const UIOptionsStatusbarForm: React.FunctionComponent<{
-    abOptions: AdaptableOptions;
-    onChange: (abOptions: AdaptableOptions) => void;
+    gridOptions: GridOptions;
+    onChange: (gridOptions: GridOptions) => void;
 }>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -13,7 +13,7 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components
 const FormBox_1 = require("../Components/FormBox");
 const UIOptionsStatusbarForm = (props) => {
     var _a, _b, _c, _d;
-    const allPanels = (_c = (_b = (_a = props.abOptions.gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
+    const allPanels = (_c = (_b = (_a = props.gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
     const panelIdtoPanel = (panelsIds, align) => panelsIds.map((panelId) => {
         const previousItem = allPanels.find((panel) => panel.key === panelId || panel.statusPanel === panelId);
         if (previousItem) {
@@ -35,7 +35,7 @@ const UIOptionsStatusbarForm = (props) => {
         const centerPanels = panelIdtoPanel(tabs[1].Items, 'center');
         const rightPanels = panelIdtoPanel(tabs[2].Items, 'right');
         const newStatusbarPanels = [...leftPanels, ...centerPanels, ...rightPanels];
-        props.onChange(Object.assign(Object.assign({}, props.abOptions), { gridOptions: Object.assign(Object.assign({}, props.abOptions.gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+        props.onChange(Object.assign(Object.assign({}, props.gridOptions), { statusBar: Object.assign(Object.assign({}, props.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }));
     };
     const disabled = false;
     const panelToTabItemId = (panel) => { var _a; return (_a = panel.key) !== null && _a !== void 0 ? _a : panel.statusPanel; };
@@ -78,7 +78,7 @@ const UIOptionsStatusbarForm = (props) => {
         const newStatusbarPanels = [...allPanels, newAdaptablePanel];
         setAdaptablePanelTitle('');
         setAdaptablePanelAlign('left');
-        props.onChange(Object.assign(Object.assign({}, props.abOptions), { gridOptions: Object.assign(Object.assign({}, props.abOptions.gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+        props.onChange(Object.assign(Object.assign({}, props.gridOptions), { statusBar: Object.assign(Object.assign({}, props.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }));
     };
     return (React.createElement(rebass_1.Box, null,
         React.createElement(HelpBlock_1.default, null, "Status Bar"),

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.d.ts

@@ -1,8 +1,11 @@
+import { GridOptions } from '@ag-grid-community/core';
 import * as React from 'react';
 import { AdaptableOptions } from '../../../../types';
 interface UIElementsOptionsProps {
     adaptableOptions: AdaptableOptions;
-    onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    gridOptions: GridOptions;
+    onChangedAdaptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    onChangedGridOptions: (gridOptions: GridOptions) => void;
 }
 export declare const UIElementsForm: React.FunctionComponent<UIElementsOptionsProps>;
 export {};

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.js

@@ -9,18 +9,17 @@ const UIOptionsActionColumnsForm_1 = require("./UIOptionsActionColumnsForm");
 const UIOptionsSidebarForm_1 = require("./UIOptionsSidebarForm");
 const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
 const UIElementsForm = (props) => {
-    let abOptions = props.adaptableOptions;
     return (React.createElement(rebass_1.Box, { p: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Tool Panel"),
             React.createElement(Tabs_1.Tabs.Tab, null, "Status Bar"),
             React.createElement(Tabs_1.Tabs.Tab, null, "Action Rows"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })),
+                React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { gridOptions: props.gridOptions, onChange: props.onChangedGridOptions })),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })),
+                React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { gridOptions: props.gridOptions, onChange: props.onChangedGridOptions })),
             ' ',
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })))));
+                React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: props.adaptableOptions, onChange: props.onChangedAdaptableOptions })))));
 };
 exports.UIElementsForm = UIElementsForm;

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

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { Reducer, ReactNode } from 'react';
+import { GridOptions } from '@ag-grid-community/core';
 import { AdaptableOptions } from '../../types';
 import { ConfigurationWizardProps } from './AdaptableConfigurationDialog/ConfigurationWizard';
 export interface AdaptableWizardViewProps {
     adaptableOptions?: Omit<AdaptableOptions, 'primaryKey'> & {
         primaryKey?: string;
     };
+    gridOptions?: GridOptions;
     /**
      * Default true.
      */
@@ -16,7 +18,7 @@ export interface AdaptableWizardViewProps {
      * This mode skips over interpreting data to figure-out columns.
      */
     skipToWizard?: boolean;
-    onInit: (adaptableOptions: AdaptableOptions) => any;
+    onInit: (adaptableOptions: AdaptableOptions, gridOptions: GridOptions) => any;
     fileContentsToJSON?: (str: string) => Promise<any> | any;
     readFile?: (file: File) => Promise<any>;
     fileAccept?: string;
@@ -39,6 +41,7 @@ interface WizardState {
     dropped: boolean;
     error: any;
     adaptableOptions: AdaptableOptions;
+    gridOptions: GridOptions;
 }
 /**
  * The wizard in a few modes:

package/src/View/AdaptableWizardView/Wizard.js

@@ -14,7 +14,7 @@ exports.initialState = {
 };
 const reducer = (state, action) => {
     if (action.type === 'DROPPED') {
-        return Object.assign(Object.assign({}, state), { adaptableOptions: action.payload, dropped: true, error: null });
+        return Object.assign(Object.assign({}, state), { adaptableOptions: action.payload.adaptableOptions, gridOptions: action.payload.gridOptions, dropped: true, error: null });
     }
     if (action.type === 'ERROR') {
         return Object.assign(Object.assign({}, state), { dropped: false, error: action.payload });
@@ -37,11 +37,10 @@ exports.reducer = reducer;
  */
 const Wizard = (props) => {
     var _a;
-    const [state, dispatch] = (0, react_1.useReducer)(exports.reducer, Object.assign(Object.assign({}, exports.initialState), { adaptableOptions: props.adaptableOptions }));
+    const [state, dispatch] = (0, react_1.useReducer)(exports.reducer, Object.assign(Object.assign({}, exports.initialState), { adaptableOptions: props.adaptableOptions, gridOptions: props.gridOptions }));
     const [droppableKey, setDroppableKey] = (0, react_1.useState)(Date.now());
     const [isDataLoading, setIsDataLoading] = (0, react_1.useState)(false);
     const handleDataSource = (array, file) => {
-        var _a;
         const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
         try {
             (0, Utils_1.validDataSource)(dataSourceInfo);
@@ -52,10 +51,9 @@ const Wizard = (props) => {
                 payload: `Invalid adaptable configuration - ${err}`,
             });
         }
-        const gridOptions = (0, helper_1.prepareGridOptions)(dataSourceInfo, (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions);
+        const gridOptions = (0, helper_1.prepareGridOptions)(dataSourceInfo, props.gridOptions);
         const adaptableOptions = Object.assign({}, props.adaptableOptions);
         adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
-        adaptableOptions.gridOptions = gridOptions;
         if (dataSourceInfo.primaryKey) {
             adaptableOptions.primaryKey = dataSourceInfo.primaryKey;
         }
@@ -63,24 +61,27 @@ const Wizard = (props) => {
         if (shouldShowWizard) {
             dispatch({
                 type: 'DROPPED',
-                payload: adaptableOptions,
+                payload: { adaptableOptions, gridOptions },
             });
         }
         else {
-            props.onInit(adaptableOptions);
+            props.onInit(adaptableOptions, gridOptions);
         }
     };
     let wizard;
     if (props.skipToWizard || state.dropped) {
-        wizard = (React.createElement(AdaptableConfigurationDialog_1.default, { startSections: props.startSections, adaptableOptions: state.adaptableOptions, onCancel: () => {
+        wizard = (React.createElement(AdaptableConfigurationDialog_1.default, { startSections: props.startSections, adaptableConfig: {
+                adaptableOptions: state.adaptableOptions,
+                gridOptions: state.gridOptions,
+            }, onCancel: () => {
                 // change the file droppable component key
                 // so it's remounted and it's in the initial state
                 setDroppableKey(Date.now());
                 dispatch({
                     type: 'CANCEL',
                 });
-            }, onFinish: (adaptableOptions) => {
-                props.onInit(adaptableOptions);
+            }, onFinish: (adaptableConfig) => {
+                props.onInit(adaptableConfig.adaptableOptions, adaptableConfig.gridOptions);
             } }));
     }
     (0, react_1.useEffect)(() => {

package/src/View/Dashboard/Dashboard.js

@@ -99,7 +99,7 @@ const DashboardComponent = (props) => {
     };
     const renderQuickSearch = () => {
         return (React.createElement(rebass_1.Box, { ml: 2 },
-            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.optionsApi.getSearchOptions().quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
+            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
     };
     let instanceName = props.api.internalApi.getToolbarTitle();
     let dashboardOptions = props.api.optionsApi.getDashboardOptions();

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -23,9 +23,13 @@ const DataChangeHistoryGrid = (props) => {
         const initializeAdaptableGrid = async () => {
             const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
             const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, gridOptions, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange);
+            const agGridOptions = {
+                gridOptions,
+                modules: mainAdaptableInstance.getAgGridRegisteredModules(),
+            };
             // 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);
+            const dataChangeHistoryAdaptableApi = await adaptableInitFn(adaptableOptions, agGridOptions);
             setAdaptableApi(dataChangeHistoryAdaptableApi);
         };
         initializeAdaptableGrid();
@@ -97,7 +101,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         };
     }
     const options = {
-        gridOptions: gridOptions,
+        _gridOptions: gridOptions,
         primaryKey: 'primaryKey',
         licenseKey: mainAdaptableOptions.licenseKey,
         userName: `${mainAdaptableOptions.userName}`,

package/src/View/Export/ExportViewPanel.d.ts

@@ -25,5 +25,5 @@ declare class ExportViewPanelComponent extends React.Component<ExportViewPanelCo
     private isCustomDestination;
     private onNewReportSchedule;
 }
-export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "CurrentReport" | "CurrentDestination" | "Columns" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "UserReports">>;
+export declare let ExportViewPanelControl: import("react-redux").ConnectedComponent<typeof ExportViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<ExportViewPanelComponent> & ExportViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "Columns" | "CurrentReport" | "CurrentDestination" | "viewType" | "onApplyExport" | "onSelectReport" | "onSelectDestination" | "onNewReport" | "onEditReport" | "onNewReportSchedule" | "UserReports">>;
 export {};