@adaptabletools/adaptable 18.0.0-canary.20 → 18.0.0-canary.22

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -7,11 +7,6 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Tag } from '../../../components/Tag';
 import { ToggleGroup } from '../../../components/Toggle/ToggleGroup';
 import { Toggle } from '../../../components/Toggle/Toggle';
-let alignmentOptions = [
-    { value: 'Left', label: 'Left' },
-    { value: 'Right', label: 'Right' },
-    { value: 'Center', label: 'Center' },
-];
 export const renderFormatColumnSettingsSummary = (data) => {
     var _a;
     return (React.createElement(Box, { padding: 2 },

package/src/View/Layout/TransposedPopup.js

@@ -7,7 +7,7 @@ import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
 export const TransposedPopup = (props) => {
     const adaptable = useAdaptable();
-    const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows } = props.popupProps;
+    const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows, autosize } = props.popupProps;
     const rowNodes = React.useMemo(() => {
         return props.popupProps.visibleRows
             ? adaptable.api.gridApi.getVisibleRowNodes()
@@ -96,7 +96,7 @@ export const TransposedPopup = (props) => {
             },
             layoutOptions: {
                 createDefaultLayout: false,
-                autoSizeColumnsInLayout: true,
+                autoSizeColumnsInLayout: autosize,
             },
             predefinedConfig: {
                 Layout: {

package/src/View/Note/NotePopup.js

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
 import { GetAllNotesSelector } from '../../Redux/ActionsReducers/NoteRedux';
+import dateFnsFormat from 'date-fns/format';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import { DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME } from '../../Utilities/Constants/GeneralConstants';
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -13,8 +15,10 @@ const tableDOMProps = {
     },
 };
 export const NotePopup = (props) => {
+    var _a;
     const adaptable = useAdaptable();
     const primaryKeyHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(adaptable.api.columnApi.getPrimaryKeyColumn().columnId);
+    const dateFormat = (_a = adaptable.api.optionsApi.getNoteOptions().dateFormat) !== null && _a !== void 0 ? _a : DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME;
     const allNotes = useSelector((state) => GetAllNotesSelector(state.Note));
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Note') === 'ReadOnly';
     const columnsMap = React.useMemo(() => {
@@ -39,8 +43,7 @@ export const NotePopup = (props) => {
             timestamp: {
                 field: 'Timestamp',
                 valueGetter: (params) => {
-                    var _a;
-                    return (_a = new Date(params.data.Timestamp)) === null || _a === void 0 ? void 0 : _a.toDateString();
+                    return dateFnsFormat(params.data.Timestamp, dateFormat);
                 },
             },
             delete: {

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -7,6 +7,7 @@ import { EmitterCallback } from '../Utilities/Emitter';
 import { AdaptablePlugin } from '../AdaptableOptions/AdaptablePlugin';
 import { AgGridAdapter } from './AgGridAdapter';
 import { IDataService } from '../Utilities/Services/Interface/IDataService';
+import { AdaptableState } from '../PredefinedConfig/AdaptableState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { ICalculatedColumnExpressionService } from '../Utilities/Services/Interface/ICalculatedColumnExpressionService';
 import { IEntitlementService } from '../Utilities/Services/Interface/IEntitlementService';
@@ -134,6 +135,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
      */
     static _initInternal(config: AdaptableInitInternalConfig): Promise<AdaptableApi>;
     private _initAdaptableAgGrid;
+    normalizeAdaptableState(state: AdaptableState, gridOptions: GridOptions): AdaptableState;
     private normaliseLayoutState;
     private normaliseToolPanelState;
     refreshQuickFilter(): void;

package/src/agGrid/AdaptableAgGrid.js

@@ -96,6 +96,7 @@ import { ensurePortalElement } from '../components/Modal';
 import { AdaptableLoadingScreen } from '../View/Components/Popups/AdaptableLoadingScreen';
 import { createElement } from 'react';
 import { removeUuidAndSource } from '../Utilities/Helpers/AdaptableHelper';
+import { buildSortedColumnStateForLayout } from './buildSortedColumnStateForLayout';
 const RowNodeProto = RowNode.prototype;
 const RowNode_dispatchLocalEvent = RowNodeProto.dispatchLocalEvent;
 /**
@@ -305,15 +306,14 @@ export class AdaptableAgGrid {
              * e.g. adding default Layout, migrating deprecated state, etc.
              */
             postLoadHook: (state) => {
-                if (this.adaptableOptions.autoMigrateState) {
+                if (this.adaptableOptions.stateOptions.autoMigrateState) {
                     state = AdaptableUpgradeHelper.migrateAdaptableState(state, {
                         // version 16 actually includes all versions up until 16
                         fromVersion: 16,
                         logger: this.logger,
                     });
                 }
-                state = this.normaliseLayoutState(state, config);
-                state = this.normaliseToolPanelState(state);
+                state = this.normalizeAdaptableState(state, config.gridOptions);
                 return state;
             },
         });
@@ -388,10 +388,15 @@ export class AdaptableAgGrid {
         perfInitAdaptableAgGrid.end();
         return Promise.resolve(this.api);
     }
-    normaliseLayoutState(state, config) {
+    normalizeAdaptableState(state, gridOptions) {
+        state = this.normaliseLayoutState(state, gridOptions);
+        state = this.normaliseToolPanelState(state);
+        return state;
+    }
+    normaliseLayoutState(state, gridOptions) {
         var _a, _b, _c, _d, _e, _f;
         if (this.shouldCreateDefaultLayout(state, this.adaptableOptions)) {
-            const defaultLayout = this.createDefaultLayout(state, config.gridOptions.columnDefs);
+            const defaultLayout = this.createDefaultLayout(state, gridOptions.columnDefs);
             const layoutState = state.Layout || {};
             const availableLayouts = layoutState.Layouts || [];
             availableLayouts.push(defaultLayout);
@@ -427,7 +432,7 @@ export class AdaptableAgGrid {
          * logic where layout is applied, it is easier and
          * less error prone to just remove it.
          */
-        if (config.gridOptions.rowModelType === 'viewport') {
+        if (gridOptions.rowModelType === 'viewport') {
             (_f = state.Layout.Layouts) === null || _f === void 0 ? void 0 : _f.forEach((layout) => {
                 if (layout.RowGroupedColumns) {
                     delete layout.RowGroupedColumns;
@@ -2199,53 +2204,20 @@ export class AdaptableAgGrid {
         });
         this.deriveAdaptableColumnStateFromAgGrid();
     }
-    getSortedColumnStateForVisibleColumns(visibleColumnList, columnState, isPivot) {
+    getSortedColumnStateForVisibleColumns(visibleColumnList, columnState, layout) {
+        layout = layout || this.api.layoutApi.getCurrentLayout();
+        visibleColumnList = visibleColumnList || layout.Columns;
         columnState = columnState || this.agGridAdapter.getAgGridApi().getColumnState();
-        const pivotMode = isPivot !== null && isPivot !== void 0 ? isPivot : this.api.layoutApi.isCurrentLayoutPivot();
-        const NewVisibleColumnIdsMap = visibleColumnList.reduce((acc, colId, index) => {
-            acc[colId] = index;
-            return acc;
-        }, {});
-        const columnsStateIndexes = columnState.reduce((acc, colState, index) => {
-            acc[colState.colId] = index;
-            return acc;
-        }, {});
-        const newVisibleColumnsMap = visibleColumnList.reduce((acc, colId, index) => {
-            acc[colId] = index;
-            return acc;
-        }, {});
-        const result = [...columnState]
-            .sort((colState1, colState2) => {
-            const colId1 = colState1.colId;
-            const colId2 = colState2.colId;
-            const originalIndex1 = columnsStateIndexes[colId1];
-            const originalIndex2 = columnsStateIndexes[colId2];
-            if (pivotMode) {
-                const isRowGroup1 = this.api.columnApi.isAutoRowGroupColumn(colId1);
-                const isRowGroup2 = this.api.columnApi.isAutoRowGroupColumn(colId2);
-                if (isRowGroup1 && isRowGroup2) {
-                    return 1;
-                }
-                if (isRowGroup1) {
-                    return -1;
-                }
-                if (isRowGroup2) {
-                    return 1;
-                }
-            }
-            if (newVisibleColumnsMap[colId1] != null && newVisibleColumnsMap[colId2] == null) {
-                return -1;
-            }
-            if (newVisibleColumnsMap[colId1] == null && newVisibleColumnsMap[colId2] != null) {
-                return 1;
-            }
-            if (newVisibleColumnsMap[colId1] == null && newVisibleColumnsMap[colId2] == null) {
-                return originalIndex1 - originalIndex2;
-            }
-            return newVisibleColumnsMap[colState1.colId] - newVisibleColumnsMap[colState2.colId];
-        })
-            .map((colState) => (Object.assign(Object.assign({}, colState), { hide: NewVisibleColumnIdsMap[colState.colId] == null })));
-        return result;
+        return buildSortedColumnStateForLayout({
+            columnState: columnState.map((colState) => {
+                return {
+                    colId: colState.colId,
+                    hide: colState.hide,
+                };
+            }),
+            layout: Object.assign(Object.assign({}, layout), { Columns: visibleColumnList }),
+            gridOptions: this.agGridAdapter.getLiveGridOptions(),
+        });
     }
     getDistinctValuesForColumn(column, distinctValuesParams) {
         let gridCells = this.getGridCellsForPermittedValues(column, distinctValuesParams);
@@ -3186,10 +3158,6 @@ export class AdaptableAgGrid {
             layout.PinnedColumnsMap = layout.PinnedColumnsMap || {};
             layout.PinnedColumnsMap[actionRowColumn.colId] = actionRowColumn.pinned;
         }
-        const layoutColumnsMap = layout.Columns.reduce((acc, colId) => {
-            acc[colId] = true;
-            return acc;
-        }, {});
         const columnsState = this.agGridAdapter.getAgGridApi().getColumnState();
         const columnsStateIndexes = {};
         const columnsStateMap = columnsState.reduce((acc, colState, index) => {
@@ -3221,20 +3189,19 @@ export class AdaptableAgGrid {
                 .getPivotResultColumns()) === null || _b === void 0 ? void 0 : _b.map((column) => column.getColId())) || [];
         let isChanged = false;
         const colsToAutoSize = {};
-        let newColumnsState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState, !!layout.EnablePivot);
+        let newColumnsState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState, layout);
         newColumnsState = newColumnsState
             .map((colState) => {
             var _a, _b, _c;
             const { colId } = colState;
             const oldColState = columnsStateMap[colId];
-            const hide = this.api.columnApi.isAutoPivotColumn(colId)
-                ? colState.hide
-                : !layoutColumnsMap[colId];
-            const newColState = Object.assign(Object.assign({}, oldColState), { hide });
+            // it's important to have width here, so it's not inherited from the existing colState
+            // which could be from a different layout
+            const newColState = Object.assign(Object.assign(Object.assign({}, oldColState), { width: null }), colState);
             if (layout.ColumnWidthMap && layout.ColumnWidthMap[colId] != null) {
                 newColState.width = layout.ColumnWidthMap[colId];
             }
-            else if (!hide) {
+            else if (!colState.hide) {
                 // autosize only the columns which are part of the selected layout
                 colsToAutoSize[colId] = true;
             }
@@ -3243,11 +3210,7 @@ export class AdaptableAgGrid {
             }
             newColState.rowGroupIndex =
                 groupedColumnsIndexesMap[colId] != null ? groupedColumnsIndexesMap[colId] : null;
-            const previousRowGroup = newColState.rowGroup;
             newColState.rowGroup = newColState.rowGroupIndex != null;
-            if (!previousRowGroup && newColState.rowGroup) {
-                this.agGridColumnAdapter.triggerSetupColumnKeyCreator(colId);
-            }
             const normalizePinned = (pinnedValue) => {
                 if (typeof pinnedValue === 'string') {
                     return pinnedValue;

package/src/agGrid/AgGridAdapter.d.ts

@@ -24,6 +24,7 @@ export declare class AgGridAdapter {
     grabAgGridApiOnTheFly(args: unknown): void;
     getLiveGridOptions(): GridOptions | undefined;
     updateGridOptions(options: ManagedGridOptions): void;
+    getGridOption<Key extends keyof GridOptions>(key: Key): GridOptions[Key];
     setGridOption<Key extends ManagedGridOptionKey>(key: Key, value: GridOptions[Key]): void;
     getUserGridOptionsProperty<T extends keyof GridOptions>(propertyName: T): GridOptions[T];
     updateColumnFilterActiveState(): void;

package/src/agGrid/AgGridAdapter.js

@@ -60,6 +60,10 @@ export class AgGridAdapter {
         var _a;
         (_a = this.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.updateGridOptions(options);
     }
+    getGridOption(key) {
+        var _a;
+        return (_a = this.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.getGridOption(key);
+    }
     setGridOption(key, value) {
         var _a;
         (_a = this.getAgGridApi()) === null || _a === void 0 ? void 0 : _a.setGridOption(key, value);

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -12,7 +12,6 @@ export declare class AgGridColumnAdapter {
     setColDefProperty<T extends keyof ColDef>(col: Column, propertyName: T, propertyGetter: (userPropertyValue: ColDef[T]) => ColDef[T] | undefined): void;
     getUserColDefProperty<T extends keyof ColDef>(columnId: string, propertyName: T): ColDef[T] | undefined;
     setupColumns(): void;
-    triggerSetupColumnKeyCreator(colId: string): void;
     private setupColumnValueGetter;
     private setupColumnCellClass;
     private setupColumnCellStyle;
@@ -21,7 +20,6 @@ export declare class AgGridColumnAdapter {
     private setupColumnTooltipValueGetter;
     private setupColumnQuickFilerText;
     private setupColumnAllowedAggFuncs;
-    private setupColumnKeyCreator;
     private setupColumnCellDataType;
     setupColumnHeader({ col, abColumn }: ColumnSetupInfo): boolean;
     private setupColumnFilter;

package/src/agGrid/AgGridColumnAdapter.js

@@ -102,24 +102,11 @@ export class AgGridColumnAdapter {
             this.setupColumnHeader(colSetupInfo);
             this.setupColumnQuickFilerText(colSetupInfo);
             this.setupColumnAllowedAggFuncs(colSetupInfo);
-            this.setupColumnKeyCreator(colSetupInfo);
             // this is just to make sure that AG Grid does NOT infer the cellDataType
             // https://github.com/AdaptableTools/adaptable/issues/2230 should render it obsolete
             this.setupColumnCellDataType(colSetupInfo);
         });
     }
-    triggerSetupColumnKeyCreator(colId) {
-        const col = this.agGridApi.getColumn(colId);
-        const colDef = col.getColDef();
-        const abColumn = this.adaptableApi.columnApi.getColumnWithColumnId(colId);
-        const colSetupInfo = {
-            col,
-            colDef,
-            colId,
-            abColumn,
-        };
-        this.setupColumnKeyCreator(colSetupInfo);
-    }
     setupColumnValueGetter({ col }) {
         // need this here if we want plugins to intercept
         this.setColDefProperty(col, 'valueGetter', (userValue) => {
@@ -287,36 +274,6 @@ export class AgGridColumnAdapter {
             return abColumn.availableAggregationFunctions;
         });
     }
-    setupColumnKeyCreator(columnSetupInfo) {
-        const { col, abColumn } = columnSetupInfo;
-        const adaptableOptions = this.adaptableOptions;
-        this.setColDefProperty(col, 'keyCreator', (userPropertyValue) => {
-            return (params) => {
-                var _a;
-                if (typeof userPropertyValue === 'function') {
-                    return userPropertyValue(params);
-                }
-                const value = params.value;
-                if (this.adaptableInstance.agGridAdapter.getLiveGridOptions().groupAllowUnbalanced) {
-                    return value;
-                }
-                const balancedGroupsKey = (_a = adaptableOptions.groupingOptions) === null || _a === void 0 ? void 0 : _a.balancedGroupsKey;
-                if (!balancedGroupsKey) {
-                    return value;
-                }
-                let groupBalancedGroupsUnderKeyValue = typeof balancedGroupsKey === 'function'
-                    ? balancedGroupsKey({
-                        adaptableApi: this.adaptableApi,
-                        userName: this.adaptableOptions.userName,
-                        adaptableId: this.adaptableOptions.adaptableId,
-                        adaptableColumn: abColumn,
-                        params,
-                    })
-                    : balancedGroupsKey;
-                return value === null || value === undefined ? groupBalancedGroupsUnderKeyValue : value;
-            };
-        });
-    }
     setupColumnCellDataType(columnSetupInfo) {
         const { col } = columnSetupInfo;
         // AG Grid introduced since v30.x an inferred cellDataType

package/src/agGrid/buildSortedColumnStateForLayout.d.ts

@@ -0,0 +1,7 @@
+import { ColumnState, GridOptions } from '@ag-grid-community/core';
+import { Layout } from '../types';
+export declare function buildSortedColumnStateForLayout(params: {
+    columnState: ColumnState[];
+    layout: Layout;
+    gridOptions: GridOptions;
+}): ColumnState[];

package/src/agGrid/buildSortedColumnStateForLayout.js

@@ -0,0 +1,120 @@
+import { AG_GRID_GROUPED_COLUMN } from '../Utilities/Constants/GeneralConstants';
+import { getAutoRowGroupColumnIdFor } from '../Api/Internal/ColumnInternalApi';
+import { isAutoRowGroupColumn } from '../Api/Implementation/ColumnApiImpl';
+import { sortColumnStateForVisibleColumns } from './sortColumnStateForVisibleColumns';
+export function buildSortedColumnStateForLayout(params) {
+    const { columnState, layout, gridOptions } = params;
+    let visibleColumnList = [...layout.Columns];
+    const multipleGroupColumns = gridOptions.groupDisplayType === 'multipleColumns';
+    const singleGroupColumn = !multipleGroupColumns;
+    const rowGroupedColumnsIndexes = {};
+    let generatedRowGroupColumnsIds = [];
+    // here we make sure the visibleColumnList includes all the generated group columns
+    if (layout.RowGroupedColumns) {
+        layout.RowGroupedColumns.forEach((colId, index) => {
+            rowGroupedColumnsIndexes[colId] = index;
+            rowGroupedColumnsIndexes[getAutoRowGroupColumnIdFor(colId)] = index;
+        });
+        // if the layout does not include the grouped columns,
+        // make sure we add the grouped columns to the visible column list
+        // at the start of the list
+        if (singleGroupColumn) {
+            if (!visibleColumnList.includes(AG_GRID_GROUPED_COLUMN)) {
+                visibleColumnList = [AG_GRID_GROUPED_COLUMN, ...visibleColumnList];
+            }
+            generatedRowGroupColumnsIds.push(AG_GRID_GROUPED_COLUMN);
+        }
+        else {
+            let missingGroupColumns = 0;
+            [...layout.RowGroupedColumns].reverse().forEach((colId) => {
+                const groupColId = getAutoRowGroupColumnIdFor(colId);
+                if (!visibleColumnList.includes(groupColId)) {
+                    visibleColumnList = [groupColId, ...visibleColumnList];
+                    missingGroupColumns++;
+                }
+                generatedRowGroupColumnsIds = [groupColId, ...generatedRowGroupColumnsIds];
+            });
+            // now we need to sort the visibleColumnList to contain the group columns
+            // in the correct order
+            // but we only need to do this if the layout.Columns list missed some of the
+            // group columns, but not all of them. if all were missing, we already
+            // inserted them at the start of the list
+            if (missingGroupColumns && missingGroupColumns < layout.RowGroupedColumns.length) {
+                visibleColumnList.sort((colId1, colId2) => {
+                    const isRowGroup1 = isAutoRowGroupColumn(colId1);
+                    const isRowGroup2 = isAutoRowGroupColumn(colId2);
+                    if (isRowGroup1 && isRowGroup2) {
+                        return rowGroupedColumnsIndexes[colId1] - rowGroupedColumnsIndexes[colId2];
+                    }
+                    return 0;
+                });
+            }
+        }
+    }
+    const visibleColumnsIndexes = visibleColumnList.reduce((acc, colId, index) => {
+        acc[colId] = index;
+        return acc;
+    }, {});
+    const pivotMode = layout.EnablePivot;
+    if (pivotMode) {
+        // in pivot mode, we sort the Visible columns of the layout
+        // to make sure the group cols are at the beginning
+        const groupCols = visibleColumnList.filter(isAutoRowGroupColumn);
+        visibleColumnList = visibleColumnList.filter((colId) => !isAutoRowGroupColumn(colId));
+        visibleColumnList = [...groupCols, ...visibleColumnList];
+    }
+    // we're now ready to go over the columnState
+    // we want as much as possible to keep the order of the columns
+    // as they are in the column state.
+    // if the order is different in the visibleColumns, we only move those columns around
+    // if some columns in the columnState are not in the visibleColumns, we need to return them as hide: true
+    // first step - keep the same order, but filter out old group columns
+    // VERY IMPORTANT to only filter out OLD group columns, that is,
+    // group columns that are not in the layout anymore
+    // since we might have different group columns in the layout
+    let newColumnState = [...columnState].filter((colState) => {
+        const { colId } = colState;
+        if (isAutoRowGroupColumn(colId) && rowGroupedColumnsIndexes[colId] == null) {
+            return false;
+        }
+        return true;
+    });
+    // second step - keep the same order
+    // but make sure the visibility is adjusted to reflect the
+    // visible columns in the layout
+    newColumnState = newColumnState.map((colState) => {
+        const { colId } = colState;
+        const visibleIndex = visibleColumnsIndexes[colId];
+        if (visibleIndex == null) {
+            return Object.assign(Object.assign({}, colState), { hide: true });
+        }
+        return Object.assign(Object.assign({}, colState), { hide: null });
+    });
+    // third step - correctly mark the columns that are grouped
+    newColumnState = newColumnState.map((colState) => {
+        const { colId } = colState;
+        const groupIndex = rowGroupedColumnsIndexes[colId];
+        if (groupIndex != null) {
+            return Object.assign(Object.assign({}, colState), { rowGroup: true, rowGroupIndex: groupIndex });
+        }
+        return Object.assign(Object.assign({}, colState), { rowGroup: false, rowGroupIndex: null });
+    });
+    // fourth step - add the new group columns, if they are missing
+    const columnStateIndexes = newColumnState.reduce((acc, colState, index) => {
+        acc[colState.colId] = index;
+        return acc;
+    }, {});
+    generatedRowGroupColumnsIds.reverse().forEach((rowGroupColId) => {
+        if (columnStateIndexes[rowGroupColId] == null) {
+            newColumnState = [
+                {
+                    colId: rowGroupColId,
+                },
+                ...newColumnState,
+            ];
+        }
+    });
+    // fitfth step - sort the column state to respect the order of the visible columns
+    // we can't simply call sort in this case
+    return sortColumnStateForVisibleColumns(newColumnState, visibleColumnList);
+}

package/src/agGrid/defaultAdaptableOptions.js

@@ -10,7 +10,6 @@ const DefaultAdaptableOptions = {
     adaptableStateKey: undefined,
     primaryKey: '',
     autogeneratePrimaryKey: false,
-    autoMigrateState: true,
     userName: GeneralConstants.USER_NAME,
     predefinedConfig: undefined,
     alertOptions: {
@@ -144,7 +143,6 @@ const DefaultAdaptableOptions = {
     customSortOptions: { customSortComparers: undefined },
     dataSetOptions: { dataSets: EMPTY_ARRAY },
     groupingOptions: {
-        balancedGroupsKey: undefined,
         restoreUngroupedColumns: false,
         autoOrderGroupedColumns: true,
     },
@@ -244,6 +242,7 @@ const DefaultAdaptableOptions = {
         loadState: undefined,
         persistState: undefined,
         clearState: undefined,
+        autoMigrateState: true,
     },
     teamSharingOptions: {
         enableTeamSharing: false,

package/src/agGrid/sortColumnStateForVisibleColumns.d.ts

@@ -0,0 +1,12 @@
+type ColState = {
+    colId: string;
+    hide?: boolean | null;
+};
+/**
+ * This method takes a column state and the list of visible columns
+ * and returns a new column state that respects the order of the visible columns
+ * while trying to keep the hidden columns in their original order.
+ *
+ */
+export declare function sortColumnStateForVisibleColumns<T extends ColState>(columnState: T[], visibleColumns: string[]): T[];
+export {};

package/src/agGrid/sortColumnStateForVisibleColumns.js

@@ -0,0 +1,46 @@
+function insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset = 0, lastVisibleOffset = 0) {
+    const prevColState = result[result.length - 1 - offset];
+    if (!prevColState) {
+        result.splice(result.length - lastVisibleOffset, 0, colState);
+        return;
+    }
+    if (prevColState.hide) {
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset + 1, 
+        /* do not advance this as, as we've encountered a hidden column*/ lastVisibleOffset);
+        return;
+    }
+    const prevCol_visibilityIndex = visibleColumnsIndexes[prevColState.colId];
+    const currentCol_visibilityIndex = visibleColumnsIndexes[colState.colId];
+    if (currentCol_visibilityIndex < prevCol_visibilityIndex) {
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset + 1, 
+        /*make sure we sync with the normal offset, as we've hit a visible col*/ offset + 1);
+    }
+    else {
+        result.splice(result.length - lastVisibleOffset, 0, colState);
+    }
+}
+/**
+ * This method takes a column state and the list of visible columns
+ * and returns a new column state that respects the order of the visible columns
+ * while trying to keep the hidden columns in their original order.
+ *
+ */
+export function sortColumnStateForVisibleColumns(columnState, visibleColumns) {
+    const visibleColumnsIndexes = visibleColumns.reduce((acc, colId, index) => {
+        acc[colId] = index;
+        return acc;
+    }, {});
+    const result = [];
+    for (let i = 0, len = columnState.length; i < len; i++) {
+        const colState = columnState[i];
+        const colVisible = visibleColumnsIndexes[colState.colId] != null;
+        if (!colVisible) {
+            // for cols not present in this layout, we keep them
+            // where they are
+            result.push(colState);
+            continue;
+        }
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes);
+    }
+    return result;
+}

package/src/env.js

@@ -1,5 +1,5 @@
 export 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: 1712070469439 || Date.now(),
-    VERSION: "18.0.0-canary.20" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1712232524555 || Date.now(),
+    VERSION: "18.0.0-canary.22" || '--current-version--',
 };