@adaptabletools/adaptable 19.2.4 → 20.0.0-canary.0

package/src/{agGrid → Utilities}/weightedAverage.js

@@ -1,5 +1,4 @@
 import toNumber from 'lodash/toNumber';
-import { _agGridApi_getValue } from './AgGridAdapter';
 export const getNumericValue = (input) => {
     if (typeof input === 'number') {
         return input;
@@ -14,9 +13,9 @@ export const weightedAverage = (params, columnId, weightColumnId) => {
     // TODO AFL: improve performance by using the intermediary aggregated values (for nested groups)
     groupRowNode.allLeafChildren.forEach((rowNode) => {
         // when editing values might be converted to strings
-        const rawColumnValue = _agGridApi_getValue(columnId, rowNode, gridApi);
+        const rawColumnValue = gridApi.getCellValue({ colKey: columnId, rowNode });
         const columnValue = getNumericValue(rawColumnValue);
-        const rawWeightedColumnValue = _agGridApi_getValue(weightColumnId, rowNode, gridApi);
+        const rawWeightedColumnValue = gridApi.getCellValue({ colKey: weightColumnId, rowNode });
         const weightedColumnValue = getNumericValue(rawWeightedColumnValue);
         if (weightedColumnValue !== null) {
             weightedColumnValueSum += weightedColumnValue;

package/src/View/AdaptablePopover/index.d.ts

@@ -19,5 +19,5 @@ export interface AdaptablePopoverProps extends React.ClassAttributes<React.Props
     visible?: boolean;
 }
 export declare class AdaptablePopover extends React.Component<React.PropsWithChildren<AdaptablePopoverProps>, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/src/View/AdaptablePopover/index.js

@@ -7,9 +7,8 @@ import OverlayTrigger from '../../components/OverlayTrigger';
 import { Flex, Box, Text } from 'rebass';
 export class AdaptablePopover extends React.Component {
     render() {
-        var _a, _b, _c;
         let messageType = this.props.MessageType != null ? this.props.MessageType : 'Info';
-        const showIcon = (_a = this.props.showIcon) !== null && _a !== void 0 ? _a : true;
+        const showIcon = this.props.showIcon ?? true;
         let useButton = this.props.useButton != null ? this.props.useButton : false;
         let popoverMinWidth = this.props.popoverMinWidth != null ? this.props.popoverMinWidth.toString() + 'px' : 'auto';
         const title = StringExtensions.IsNotNullOrEmpty(this.props.headerText)
@@ -19,10 +18,10 @@ export class AdaptablePopover extends React.Component {
                 margin: '0px',
                 padding: '0px',
                 minWidth: popoverMinWidth,
-                maxWidth: (_b = this.props.popoverMaxWidth) !== null && _b !== void 0 ? _b : 300,
+                maxWidth: this.props.popoverMaxWidth ?? 300,
             } },
             title ? (React.createElement(Text, { fontSize: 4, padding: 2 }, title)) : null,
-            React.createElement(Box, { className: "ab-Popover__body", padding: (_c = this.props.popupPadding) !== null && _c !== void 0 ? _c : 2 }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
+            React.createElement(Box, { className: "ab-Popover__body", padding: this.props.popupPadding ?? 2 }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
         const icon = 'info'; // - think this is wrong - UIHelper.getGlyphByMessageType(messageType);
         const color = UIHelper.getColorByMessageType(messageType);
         const iconStyle = {

package/src/View/AdaptableView.js

@@ -15,8 +15,7 @@ import { QuickSearchDrawer } from './QuickSearch/FloatingQuickSearch/FloatingQui
 import { renderWithAdaptableContext } from './renderWithAdaptableContext';
 class AdaptableView extends React.Component {
     render() {
-        var _a, _b, _c, _d;
-        const watermark = (_d = (_c = (_b = (_a = this.props.AdaptableApi) === null || _a === void 0 ? void 0 : _a.internalApi) === null || _b === void 0 ? void 0 : _b.getSystemState()) === null || _c === void 0 ? void 0 : _c.License) === null || _d === void 0 ? void 0 : _d.watermark;
+        const watermark = this.props.AdaptableApi?.internalApi?.getInternalState()?.License?.watermark;
         const adaptableOptions = this.props.AdaptableApi.optionsApi.getAdaptableOptions();
         return (React.createElement("div", null,
             React.createElement(GridCellPopup, null),
@@ -26,13 +25,11 @@ class AdaptableView extends React.Component {
             Boolean(this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup) && (React.createElement(AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi })),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),
             React.createElement(ToastContainer
-            // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
-            // instance is destroyed and re-created many times
+            // Ensure to set containerId to avoid memory leaks when Adaptable instance is destroyed and re-created many times
             , { 
-                // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
-                // instance is destroyed and re-created many times
+                // Ensure to set containerId to avoid memory leaks when Adaptable instance is destroyed and re-created many times
                 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(LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
+            watermark?.show && React.createElement(LicenseWatermark, null, watermark?.text),
             React.createElement(WindowPopups, null),
             React.createElement(FormPopups, null),
             React.createElement(ProgressIndicator, null)));
@@ -41,7 +38,7 @@ class AdaptableView extends React.Component {
 function mapStateToProps(state, ownProps) {
     return {
         PopupState: state.Popup,
-        SystemState: state.System,
+        InternalState: state.Internal,
         AdaptableApi: ownProps.Adaptable.api,
     };
 }
@@ -57,4 +54,4 @@ function mapDispatchToProps(dispatch) {
     };
 }
 let AdaptableWrapper = connect(mapStateToProps, mapDispatchToProps)(AdaptableView);
-export const AdaptableApp = ({ Adaptable }) => renderWithAdaptableContext(React.createElement(AdaptableWrapper, { Adaptable: Adaptable }), Adaptable);
+export const AdaptableApp = ({ Adaptable, }) => renderWithAdaptableContext(React.createElement(AdaptableWrapper, { Adaptable: Adaptable }), Adaptable);

package/src/View/AdaptableViewFactory.js

@@ -14,7 +14,7 @@ import { BulkUpdateViewPanelControl } from './BulkUpdate/BulkUpdateViewPanel';
 import { CellSummaryViewPanelControl } from './CellSummary/CellSummaryViewPanel';
 import { FilterViewPanelControl } from './Filter/FilterViewPanel';
 import { DashboardViewPanelControl } from './Dashboard/DashboardViewPanel';
-import { ExportViewPanelControl } from './Export/ExportViewPanel';
+import { ExportViewPanel } from './Export/ExportViewPanel';
 import { LayoutViewPanelControl } from './Layout/LayoutViewPanel';
 import { GridFilterPanelControl } from './GridFilter/GridFilterViewPanel';
 import { QuickSearchViewPanelControl } from './QuickSearch/QuickSearchViewPanel';
@@ -57,7 +57,7 @@ export const AdaptableViewPanelFactory = new Map([
     [ModuleConstants.CellSummaryModuleId, CellSummaryViewPanelControl],
     [ModuleConstants.ColumnFilterModuleId, FilterViewPanelControl],
     [ModuleConstants.DashboardModuleId, DashboardViewPanelControl],
-    [ModuleConstants.ExportModuleId, ExportViewPanelControl],
+    [ModuleConstants.ExportModuleId, ExportViewPanel],
     [ModuleConstants.LayoutModuleId, LayoutViewPanelControl],
     [ModuleConstants.GridFilterModuleId, GridFilterPanelControl],
     [ModuleConstants.QuickSearchModuleId, QuickSearchViewPanelControl],

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

@@ -1,5 +1,5 @@
 import { AdaptableOptions } from '../../../AdaptableOptions/AdaptableOptions';
-import { GridOptions } from '@ag-grid-community/core';
+import { GridOptions } from 'ag-grid-enterprise';
 /**
  * Config used by No Code Plugin to set up AdapTable
  */

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

@@ -11,14 +11,14 @@ const LABEL_WIDTH = 250;
 const SUPPORTED_PRIMITEVE_TYPES = ['s', 'n', 'b'];
 const OptionInput = (props) => {
     const { name, defaultValue, value, description, uiLabel } = props.option;
-    const label = uiLabel !== null && uiLabel !== void 0 ? uiLabel : StringExtensions.Humanize(name);
+    const label = uiLabel ?? StringExtensions.Humanize(name);
     let input = React.createElement(React.Fragment, null);
     const info = (React.createElement(Box, { ml: 2 },
         React.createElement(AdaptablePopover, { headerText: null, bodyText: [description] })));
-    const handleInputChange = (event) => props.onChange(Object.assign(Object.assign({}, props.option), { value: event.currentTarget.value }));
-    const handleCheckboxChange = (checked) => props.onChange(Object.assign(Object.assign({}, props.option), { value: checked }));
+    const handleInputChange = (event) => props.onChange({ ...props.option, value: event.currentTarget.value });
+    const handleCheckboxChange = (checked) => props.onChange({ ...props.option, value: checked });
     // option is mutated to acomodate complex types overrides
-    const option = Object.assign({}, props.option);
+    const option = { ...props.option };
     const isOptionNonHomogenusUnion = (option) => {
         const isUnion = option.kind.includes('|');
         return isUnion && option.kind.split('|').some((unionEl) => !/['"]/.test(unionEl));
@@ -33,7 +33,7 @@ const OptionInput = (props) => {
             option.kind = newKind;
     }
     const inputProps = {
-        value: value !== null && value !== void 0 ? value : defaultValue,
+        value: value ?? defaultValue,
         minWidth: 200,
         fontSize: 3,
         mr: 2,
@@ -44,17 +44,17 @@ const OptionInput = (props) => {
             .map((str) => str.trim().replace(/['"]/g, ''))
             .map((str) => ({
             label: StringExtensions.Humanize(str),
-            onClick: () => props.onChange(Object.assign(Object.assign({}, option), { value: str })),
+            onClick: () => props.onChange({ ...option, value: str }),
         }));
-        input = (React.createElement(DropdownButton, Object.assign({}, inputProps, { columns: ['label'], items: options }), StringExtensions.Humanize(value)));
+        input = (React.createElement(DropdownButton, { ...inputProps, columns: ['label'], items: options }, StringExtensions.Humanize(value)));
     }
     else {
         switch (option.kind) {
             case 'n':
-                input = React.createElement(Input, Object.assign({ type: "number", onChange: handleInputChange }, inputProps));
+                input = React.createElement(Input, { type: "number", onChange: handleInputChange, ...inputProps });
                 break;
             case 's':
-                input = React.createElement(Input, Object.assign({ type: "text", onChange: handleInputChange }, inputProps));
+                input = React.createElement(Input, { type: "text", onChange: handleInputChange, ...inputProps });
                 break;
             case 'b':
                 input = (React.createElement(CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date" }, label));
@@ -76,12 +76,11 @@ const OptionInput = (props) => {
     return (React.createElement(Flex, { mb: 2, pl: 1 }, content));
 };
 const OptionsSection = (props) => {
-    var _a;
     if (!props.options.length) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement(Box, { mb: 2 },
-        React.createElement(HelpBlock, { mb: 2 }, (_a = props.name) !== null && _a !== void 0 ? _a : props.id),
+        React.createElement(HelpBlock, { mb: 2 }, props.name ?? props.id),
         props.options.map((option, index) => (React.createElement(OptionInput, { key: index, option: option, onChange: props.onChange })))));
 };
 export const AdaptableOptionsForm = (props) => {
@@ -90,14 +89,18 @@ export const AdaptableOptionsForm = (props) => {
         return [...metamodelService.getGridInfoNoCodeOptions()];
     }, [props.adaptableOptions]);
     const handleOptionChange = (sectionName) => (option) => {
-        const adaptableOptions = Object.assign({}, props.adaptableOptions);
+        const adaptableOptions = { ...props.adaptableOptions };
         if (sectionName === 'baseOptions') {
             // @ts-ignore
             adaptableOptions[option.name] = option.value;
         }
         else {
             // @ts-ignore
-            adaptableOptions[sectionName] = Object.assign(Object.assign({}, adaptableOptions[sectionName]), { [option.name]: option.value });
+            adaptableOptions[sectionName] = {
+                // @ts-ignore
+                ...adaptableOptions[sectionName],
+                [option.name]: option.value,
+            };
         }
         props.onChangedAdaptableOptions(adaptableOptions);
     };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ColDef } from '@ag-grid-community/core';
+import { ColDef } from 'ag-grid-enterprise';
 export interface NocodeColumn extends Partial<ColDef> {
     field?: string;
     type?: string | string[];
@@ -15,5 +15,5 @@ declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onVa
     selectedColumns?: {
         [key: string]: boolean;
     };
-}) => JSX.Element>;
+}) => React.JSX.Element>;
 export default _default;

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

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import useSelection from './useSelection';
 import { CheckBox } from '../../../components/CheckBox';
@@ -12,16 +11,16 @@ import { Box, Flex } from 'rebass';
 import throttle from 'lodash/throttle';
 const dataTypes = [
     {
-        value: 'abColDefString',
+        value: 'text',
         label: 'Text (string)',
     },
-    { value: 'abColDefNumber', label: 'Number' },
+    { value: 'number', label: 'Number' },
     {
-        value: 'abColDefDate',
+        value: 'date',
         label: 'Date',
     },
     {
-        value: 'abColDefBoolean',
+        value: 'boolean',
         label: 'Boolean',
     },
 ];
@@ -61,7 +60,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     const columnsRef = useRef(cols);
     const silentSetColumns = (columns) => {
         columnsRef.current = columns;
-        onChange === null || onChange === void 0 ? void 0 : onChange(columns);
+        onChange?.(columns);
     };
     const setColumns = (columns) => {
         silentSetColumns(columns);
@@ -70,7 +69,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     const getColumns = () => columnsRef.current;
     const columns = columnsRef.current;
     const onColumnChange = (col, value, property) => {
-        col = Object.assign(Object.assign({}, col), { [property]: value });
+        col = { ...col, [property]: value };
         const cols = getColumns().map((c) => {
             if (c.field === col.field) {
                 return col;
@@ -80,13 +79,13 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
         setColumns(cols);
     };
     const onColumnBatchChange = (value, property) => {
-        const cols = getColumns().map((c) => (Object.assign(Object.assign({}, c), { [property]: value })));
+        const cols = getColumns().map((c) => ({ ...c, [property]: value }));
         setColumns(cols);
     };
     const setColumnCaption = (caption, field) => {
         const cols = getColumns().map((c) => {
             if (c.field === field) {
-                const newCol = Object.assign(Object.assign({}, c), { caption });
+                const newCol = { ...c, caption };
                 return newCol;
             }
             return c;
@@ -96,14 +95,14 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     const onColumnTypeChange = (col, type) => {
         const cols = getColumns().map((c) => {
             if (c.field === col.field) {
-                return Object.assign(Object.assign({}, c), { type });
+                return { ...c, type };
             }
             return c;
         });
         setColumns(cols);
     };
     const [primaryKeyField, setPrimaryKeyField] = React.useState(columns[0].field);
-    const { selected: includedColumnsMap, isSelected: isIncludedColumn, isAllSelected: isAllIncludedColumns, isNoneSelected: isNoneIncludedColumns, selectColumn: includeColumn, deselectColumn: excludeColumn, selectAll: includeAllColumns, deselectAll: excludeAllColumns, } = useSelection(columns, selectedColumns !== null && selectedColumns !== void 0 ? selectedColumns : true, null, { onChange: onSelectionChange });
+    const { selected: includedColumnsMap, isSelected: isIncludedColumn, isAllSelected: isAllIncludedColumns, isNoneSelected: isNoneIncludedColumns, selectColumn: includeColumn, deselectColumn: excludeColumn, selectAll: includeAllColumns, deselectAll: excludeAllColumns, } = useSelection(columns, selectedColumns ?? true, null, { onChange: onSelectionChange });
     handle.current = {
         getColumns: () => getColumns().filter((col) => isIncludedColumn(col.field)),
         getPrimaryKey: () => primaryKeyField,
@@ -156,12 +155,21 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     const rowHeight = 40;
     const data = columns;
     const CellWrapper = (props) => {
-        return (React.createElement(Flex, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { position: 'absolute', textAlign: 'center', top: 0, left: 0, height: '100%', width: '100%', whiteSpace: 'normal' }), justifyContent: "center", alignItems: "center" }), props.children));
+        return (React.createElement(Flex, { ...props, style: {
+                ...props.style,
+                position: 'absolute',
+                textAlign: 'center',
+                top: 0,
+                left: 0,
+                height: '100%',
+                width: '100%',
+                whiteSpace: 'normal',
+            }, justifyContent: "center", alignItems: "center" }, props.children));
     };
-    const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, Object.assign({}, props, { fontSize: 3, style: { fontWeight: 600 } })));
+    const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, { ...props, fontSize: 3, style: { fontWeight: 600 } }));
     const HeaderWithCheckbox = (props) => {
-        const { label, onChange, checked } = props, flexProps = __rest(props, ["label", "onChange", "checked"]);
-        return (React.createElement(HeaderCellWrapper, Object.assign({}, flexProps, { flexDirection: "column" }),
+        const { label, onChange, checked, ...flexProps } = props;
+        return (React.createElement(HeaderCellWrapper, { ...flexProps, flexDirection: "column" },
             React.createElement(Box, null, label),
             React.createElement(Box, { style: { textAlign: 'center' } },
                 React.createElement(CheckBox, { checked: checked, onChange: onChange }))));
@@ -175,7 +183,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             render: (params) => {
                 const { data } = params;
                 const column = data;
-                const isPrimaryKey = (column === null || column === void 0 ? void 0 : column.field) === primaryKeyField;
+                const isPrimaryKey = column?.field === primaryKeyField;
                 return (React.createElement(Radio, { checked: isPrimaryKey, onChange: (checked) => {
                         if (checked && isIncludedColumn(column.field)) {
                             setPrimaryKeyField(column.field);
@@ -227,10 +235,9 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             maxWidth: 140,
             renderMenuIcon: false,
             render: (params) => {
-                var _a;
                 const column = params.data;
                 return (React.createElement(CellWrapper, { paddingLeft: 1, paddingRight: 1 },
-                    React.createElement(Dropdown, { style: inputStyle, showClearButton: false, options: dataTypes, value: (_a = column === null || column === void 0 ? void 0 : column.type) !== null && _a !== void 0 ? _a : '', onChange: onColumnTypeChange.bind(null, column) })));
+                    React.createElement(Dropdown, { style: inputStyle, showClearButton: false, options: dataTypes, value: column?.type ?? '', onChange: onColumnTypeChange.bind(null, column) })));
             },
         },
         sortable: {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/Components/FormBox.js

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Box } from 'rebass';
 import join from '../../../../components/utils/join';
-export const NocodeWizardFormBox = (props) => (React.createElement(Box, Object.assign({}, props, { padding: 2, mb: 2, className: join('ab-NocodeWizardFormBox', props.className) })));
+export const NocodeWizardFormBox = (props) => (React.createElement(Box, { ...props, padding: 2, mb: 2, className: join('ab-NocodeWizardFormBox', props.className) }));

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

@@ -16,24 +16,29 @@ export const ConfigurationWizard = (props) => {
                 toolPanels: ['columns', 'filters', 'adaptable'],
             },
         };
-        const gridOptions = Object.assign(Object.assign({}, gridOptionDefaults), props.adaptableConfig.gridOptions);
+        const gridOptions = {
+            ...gridOptionDefaults,
+            ...props.adaptableConfig.gridOptions,
+        };
         const adaptableOptions = applyDefaultAdaptableOptions(props.adaptableConfig.adaptableOptions);
         return { gridOptions, adaptableOptions };
     });
     const [selectedColumns, setSelectedColumns] = useState(() => {
-        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) => {
+        return props.adaptableConfig.gridOptions?.columnDefs?.reduce((acc, col) => {
             acc[col.field] = true;
             return acc;
         }, {});
     });
-    const columnsHandle = React.useRef();
+    const columnsHandle = React.useRef(null);
     const handleFinish = () => {
-        const newAdaptableOptions = Object.assign({}, adaptableConfig.adaptableOptions);
-        const newGridOptions = Object.assign({}, adaptableConfig.gridOptions);
+        const newAdaptableOptions = { ...adaptableConfig.adaptableOptions };
+        const newGridOptions = { ...adaptableConfig.gridOptions };
         if (columnsHandle.current) {
             adaptableConfig.gridOptions.columnDefs = columnsHandle.current.getColumns().map((column) => {
-                const newColumn = Object.assign(Object.assign({}, column), { headerName: column.caption || StringExtensions.Humanize(column.field) });
+                const newColumn = {
+                    ...column,
+                    headerName: column.caption || StringExtensions.Humanize(column.field),
+                };
                 delete newColumn.caption;
                 return newColumn;
             });
@@ -50,20 +55,29 @@ export const ConfigurationWizard = (props) => {
         setIsValid(newIsValid);
     }, []);
     const handleColumnsChange = React.useCallback((columns) => {
-        setAdaptableConfig((adaptableConfig) => (Object.assign(Object.assign({}, adaptableConfig), { gridOptions: Object.assign(Object.assign({}, adaptableConfig.gridOptions), { columnDefs: columns }) })));
+        setAdaptableConfig((adaptableConfig) => ({
+            ...adaptableConfig,
+            gridOptions: { ...adaptableConfig.gridOptions, columnDefs: columns },
+        }));
     }, []);
     const handleColumnSelectionChange = React.useCallback((col, flag) => {
         setSelectedColumns((selectedColumns) => {
-            const newSelectedColumns = selectedColumns !== null && selectedColumns !== void 0 ? selectedColumns : {};
+            const newSelectedColumns = selectedColumns ?? {};
             newSelectedColumns[col.field] = flag;
             return newSelectedColumns;
         });
     }, []);
     const handleAdaptableOptionsChange = React.useCallback((adaptableOptions) => {
-        setAdaptableConfig((adaptableConfig) => (Object.assign(Object.assign({}, adaptableConfig), { adaptableOptions: adaptableOptions })));
+        setAdaptableConfig((adaptableConfig) => ({
+            ...adaptableConfig,
+            adaptableOptions: adaptableOptions,
+        }));
     }, []);
     const handleGridOptionsChange = React.useCallback((gridOptions) => {
-        setAdaptableConfig((adaptableConfig) => (Object.assign(Object.assign({}, adaptableConfig), { gridOptions: gridOptions })));
+        setAdaptableConfig((adaptableConfig) => ({
+            ...adaptableConfig,
+            gridOptions: gridOptions,
+        }));
     }, []);
     let sections = [
         {

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

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import ColumnsList from './ColumnsList';
 export const ConfigurationWizardColumnsStep = (props) => {
-    var _a, _b;
     let theme = 'light';
     if (typeof props.adaptableConfig.adaptableOptions.predefinedConfig === 'object' &&
-        ((_a = props.adaptableConfig.adaptableOptions.predefinedConfig.Theme) === null || _a === void 0 ? void 0 : _a.CurrentTheme)) {
+        props.adaptableConfig.adaptableOptions.predefinedConfig.Theme?.CurrentTheme) {
         theme = props.adaptableConfig.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
     }
     return (React.createElement(ColumnsList, { theme: theme, handle: props.columnsHandle, onValidityChange: (valid) => {
             props.setPrimaryKeyIsNotSelected(valid);
-        }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_b = props.adaptableConfig.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs }));
+        }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: props.adaptableConfig.gridOptions?.columnDefs }));
 };

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

@@ -15,9 +15,8 @@ const tableDOMProps = {
     },
 };
 const EntitlementsListForm = (props) => {
-    var _a, _b, _c;
     let abOptions = props.adaptableOptions;
-    const entitlements = (_b = (_a = abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions) === null || _a === void 0 ? void 0 : _a.moduleEntitlements) !== null && _b !== void 0 ? _b : [];
+    const entitlements = abOptions?.entitlementOptions?.moduleEntitlements ?? [];
     if (typeof entitlements === 'function') {
         return (React.createElement(HelpBlock, { mt: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
     }
@@ -26,7 +25,7 @@ const EntitlementsListForm = (props) => {
             acc[entitlement.adaptableModule] = entitlement.accessLevel;
             return acc;
         }, {});
-    }, [abOptions === null || abOptions === void 0 ? void 0 : abOptions.entitlementOptions]);
+    }, [abOptions?.entitlementOptions]);
     const handleOnChange = React.useCallback((module, accessLevel) => {
         let newEntitlements = entitlements;
         // change
@@ -45,8 +44,14 @@ const EntitlementsListForm = (props) => {
                 { adaptableModule: module, accessLevel: accessLevel },
             ];
         }
-        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]);
+        props.onChangedAptableOptions({
+            ...abOptions,
+            entitlementOptions: {
+                ...abOptions.entitlementOptions,
+                moduleEntitlements: newEntitlements,
+            },
+        });
+    }, [abOptions?.entitlementOptions]);
     if (typeof entitlements === 'function') {
         return (React.createElement(HelpBlock, { mb: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
     }
@@ -86,7 +91,7 @@ const EntitlementsListForm = (props) => {
     const data = ALL_ENTITLEMENTS_MODULES.map((module) => ({ name: ADAPTABLE_MODULE_MAP[module] }));
     let theme = 'light';
     if (typeof props.adaptableOptions.predefinedConfig === 'object' &&
-        ((_c = props.adaptableOptions.predefinedConfig.Theme) === null || _c === void 0 ? void 0 : _c.CurrentTheme)) {
+        props.adaptableOptions.predefinedConfig.Theme?.CurrentTheme) {
         theme = props.adaptableOptions.predefinedConfig.Theme.CurrentTheme;
     }
     return (React.createElement(Box, { flex: 1, height: "100%", className: theme },
@@ -102,16 +107,21 @@ const EntitlementsListForm = (props) => {
                 }, columnHeaderHeight: 50, domProps: tableDOMProps, columns: columnsMap }))));
 };
 const DefaultEntitlementForm = (props) => {
-    var _a, _b;
     const abOptions = props.adaptableOptions;
-    const entitlementOptions = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.entitlementOptions;
-    const defaultEntitlement = entitlementOptions === null || entitlementOptions === void 0 ? void 0 : entitlementOptions.defaultAccessLevel;
+    const entitlementOptions = props.adaptableOptions?.entitlementOptions;
+    const defaultEntitlement = entitlementOptions?.defaultAccessLevel;
     if (typeof defaultEntitlement === 'function') {
         return React.createElement(HelpBlock, { mb: 2 }, "Default Entitlement is controlled by a custom function");
     }
     const handleDefaultEntitlementChange = React.useCallback((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]);
+        props.onChangedAptableOptions({
+            ...abOptions,
+            entitlementOptions: {
+                ...abOptions.entitlementOptions,
+                defaultAccessLevel: accessLevel,
+            },
+        });
+    }, [abOptions?.entitlementOptions?.defaultAccessLevel]);
     return (React.createElement(FormLayout, { mb: 2 },
         React.createElement(FormRow, { label: "Default Entitlement:" },
             React.createElement(Radio, { onClick: () => handleDefaultEntitlementChange('Full'), checked: defaultEntitlement === 'Full', mr: 3 }, "Visible"),
@@ -121,7 +131,7 @@ const DefaultEntitlementForm = (props) => {
 const EntitlementsForm = (props) => {
     let abOptions = props.adaptableOptions;
     return (React.createElement(Flex, { height: "100%", flexDirection: "column", p: 2 },
-        React.createElement(DefaultEntitlementForm, Object.assign({}, props)),
-        React.createElement(EntitlementsListForm, Object.assign({}, props))));
+        React.createElement(DefaultEntitlementForm, { ...props }),
+        React.createElement(EntitlementsListForm, { ...props })));
 };
 export default EntitlementsForm;

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

@@ -4,7 +4,7 @@ export {};
 This is no longer required since we cannot build FDC3 columns
 But keeping it like this as it was rather useful ...
 
-import { ColDef } from '@ag-grid-community/core';
+import { ColDef } from 'ag-grid-enterprise';
 import * as React from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
 import { CheckBox } from '../../../../components/CheckBox';

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

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

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

@@ -4,31 +4,36 @@ import { CheckBox } from '../../../components/CheckBox';
 import HelpBlock from '../../../components/HelpBlock';
 import { Box } from 'rebass';
 const GridOptionsForm = (props) => {
-    var _a;
     let { gridOptions } = props;
     return (React.createElement(Box, { p: 2 },
         React.createElement(HelpBlock, null, "Grid Options"),
         React.createElement(FormLayout, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
             React.createElement(FormRow, { label: "Enable Cell Selection" },
                 React.createElement(CheckBox, { checked: !!gridOptions.cellSelection, onChange: (enableCellSelection) => {
-                        gridOptions = Object.assign(Object.assign({}, gridOptions), { cellSelection: enableCellSelection });
+                        gridOptions = { ...gridOptions, cellSelection: enableCellSelection };
                         props.onChangedGridOptions(gridOptions);
                     } })),
             React.createElement(FormRow, { label: "Show Filter Bar" },
-                React.createElement(CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
-                        gridOptions = Object.assign(Object.assign({}, gridOptions), { defaultColDef: {
+                React.createElement(CheckBox, { checked: gridOptions.defaultColDef?.floatingFilter, onChange: (floatingFilter) => {
+                        gridOptions = {
+                            ...gridOptions,
+                            defaultColDef: {
                                 floatingFilter,
-                            } });
+                            },
+                        };
                         props.onChangedGridOptions(gridOptions);
                     } })),
             React.createElement(FormRow, { label: "Suppress Column Virtualisation" },
                 React.createElement(CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
-                        gridOptions = Object.assign(Object.assign({}, gridOptions), { suppressColumnVirtualisation: suppressColumnVirtualisation });
+                        gridOptions = {
+                            ...gridOptions,
+                            suppressColumnVirtualisation: suppressColumnVirtualisation,
+                        };
                         props.onChangedGridOptions(gridOptions);
                     } })),
             React.createElement(FormRow, { label: "Show Column Menu Button" },
                 React.createElement(CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
-                        gridOptions = Object.assign(Object.assign({}, gridOptions), { suppressMenuHide: suppressMenuHide });
+                        gridOptions = { ...gridOptions, suppressMenuHide: suppressMenuHide };
                         props.onChangedGridOptions(gridOptions);
                     } })))));
 };

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

@@ -1,4 +1,4 @@
-import { GridOptions } from '@ag-grid-community/core';
+import { GridOptions } from 'ag-grid-enterprise';
 import * as React from 'react';
 export declare const UIOptionsSidebarForm: React.FunctionComponent<{
     gridOptions: GridOptions;