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

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

@@ -149,6 +149,19 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'String') {
         return 'String';
     }
+    if ('ColumnTypes' in scope && scope.ColumnTypes.length) {
+        // need to check if all column with this column type has the same data type and return that particular one
+        const columns = scope.ColumnTypes.flatMap((columnType) => {
+            return api.columnApi.getColumnsByColumnType(columnType);
+        });
+        // check if all have the same type
+        if (columns.length &&
+            columns.every((column) => column.dataType === columns[0].dataType) &&
+            // supported data types
+            ['Number', 'Date', 'String'].includes(columns[0].dataType)) {
+            return columns[0].dataType;
+        }
+    }
     return undefined;
 };
 exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
@@ -196,7 +209,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ] })))))));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -255,13 +268,13 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(rebass_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, { mr: 3 },
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator, onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: (_a = data.DisplayFormat.Options.FractionSeparator) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Integer Separator" },
-                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: data.DisplayFormat.Options.IntegerSeparator, onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "integer-separator", value: (_b = data.DisplayFormat.Options.IntegerSeparator) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
-                            React.createElement(Input_1.default, { "data-name": "prefix", value: (_a = data.DisplayFormat.Options.Prefix) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "prefix", value: (_c = data.DisplayFormat.Options.Prefix) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "suffix", value: (_d = data.DisplayFormat.Options.Suffix) !== null && _d !== void 0 ? _d : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "truncate-checkbox", checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Ceiling" },
@@ -286,7 +299,7 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                             React.createElement(Input_1.default, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
                         ' ',
                         React.createElement(FormLayout_1.FormRow, { label: "Content" },
-                            React.createElement(Input_1.default, { "data-name": "content", value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "content", value: (_e = data.DisplayFormat.Options.Content) !== null && _e !== void 0 ? _e : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
                         ' ',
                         React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),

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

@@ -11,11 +11,6 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
 const ToggleGroup_1 = require("../../../components/Toggle/ToggleGroup");
 const Toggle_1 = require("../../../components/Toggle/Toggle");
-let alignmentOptions = [
-    { value: 'Left', label: 'Left' },
-    { value: 'Right', label: 'Right' },
-    { value: 'Center', label: 'Center' },
-];
 const renderFormatColumnSettingsSummary = (data) => {
     var _a;
     return (React.createElement(rebass_1.Box, { padding: 2 },

package/src/View/Layout/TransposedPopup.js

@@ -11,7 +11,7 @@ const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
 const AdaptableAgGrid_1 = require("../../agGrid/AdaptableAgGrid");
 const TransposedPopup = (props) => {
     const adaptable = (0, AdaptableContext_1.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()
@@ -100,7 +100,7 @@ const TransposedPopup = (props) => {
             },
             layoutOptions: {
                 createDefaultLayout: false,
-                autoSizeColumnsInLayout: true,
+                autoSizeColumnsInLayout: autosize,
             },
             predefinedConfig: {
                 Layout: {

package/src/View/Note/NotePopup.js

@@ -6,9 +6,11 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InfiniteTable_1 = require("../../components/InfiniteTable");
 const NoteRedux_1 = require("../../Redux/ActionsReducers/NoteRedux");
+const format_1 = tslib_1.__importDefault(require("date-fns/format"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
+const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -17,8 +19,10 @@ const tableDOMProps = {
     },
 };
 const NotePopup = (props) => {
+    var _a;
     const adaptable = (0, AdaptableContext_1.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 : GeneralConstants_1.DEFAULT_DATE_FORMAT_PATTERN_WITH_TIME;
     const allNotes = (0, react_redux_1.useSelector)((state) => (0, NoteRedux_1.GetAllNotesSelector)(state.Note));
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Note') === 'ReadOnly';
     const columnsMap = React.useMemo(() => {
@@ -43,8 +47,7 @@ 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 (0, format_1.default)(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

@@ -100,6 +100,7 @@ const Modal_1 = require("../components/Modal");
 const AdaptableLoadingScreen_1 = require("../View/Components/Popups/AdaptableLoadingScreen");
 const react_1 = require("react");
 const AdaptableHelper_1 = require("../Utilities/Helpers/AdaptableHelper");
+const buildSortedColumnStateForLayout_1 = require("./buildSortedColumnStateForLayout");
 const RowNodeProto = core_1.RowNode.prototype;
 const RowNode_dispatchLocalEvent = RowNodeProto.dispatchLocalEvent;
 /**
@@ -309,15 +310,14 @@ class AdaptableAgGrid {
              * e.g. adding default Layout, migrating deprecated state, etc.
              */
             postLoadHook: (state) => {
-                if (this.adaptableOptions.autoMigrateState) {
+                if (this.adaptableOptions.stateOptions.autoMigrateState) {
                     state = AdaptableUpgradeHelper_1.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;
             },
         });
@@ -392,10 +392,15 @@ 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);
@@ -431,7 +436,7 @@ 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;
@@ -2203,53 +2208,20 @@ 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 (0, buildSortedColumnStateForLayout_1.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);
@@ -3190,10 +3162,6 @@ 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) => {
@@ -3225,20 +3193,19 @@ 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;
             }
@@ -3247,11 +3214,7 @@ 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

@@ -64,6 +64,10 @@ 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

@@ -106,24 +106,11 @@ 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) => {
@@ -291,36 +278,6 @@ 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,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildSortedColumnStateForLayout = void 0;
+const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
+const ColumnInternalApi_1 = require("../Api/Internal/ColumnInternalApi");
+const ColumnApiImpl_1 = require("../Api/Implementation/ColumnApiImpl");
+const sortColumnStateForVisibleColumns_1 = require("./sortColumnStateForVisibleColumns");
+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[(0, ColumnInternalApi_1.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(GeneralConstants_1.AG_GRID_GROUPED_COLUMN)) {
+                visibleColumnList = [GeneralConstants_1.AG_GRID_GROUPED_COLUMN, ...visibleColumnList];
+            }
+            generatedRowGroupColumnsIds.push(GeneralConstants_1.AG_GRID_GROUPED_COLUMN);
+        }
+        else {
+            let missingGroupColumns = 0;
+            [...layout.RowGroupedColumns].reverse().forEach((colId) => {
+                const groupColId = (0, ColumnInternalApi_1.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 = (0, ColumnApiImpl_1.isAutoRowGroupColumn)(colId1);
+                    const isRowGroup2 = (0, ColumnApiImpl_1.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(ColumnApiImpl_1.isAutoRowGroupColumn);
+        visibleColumnList = visibleColumnList.filter((colId) => !(0, ColumnApiImpl_1.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 ((0, ColumnApiImpl_1.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 (0, sortColumnStateForVisibleColumns_1.sortColumnStateForVisibleColumns)(newColumnState, visibleColumnList);
+}
+exports.buildSortedColumnStateForLayout = buildSortedColumnStateForLayout;

package/src/agGrid/defaultAdaptableOptions.js

@@ -14,7 +14,6 @@ const DefaultAdaptableOptions = {
     adaptableStateKey: undefined,
     primaryKey: '',
     autogeneratePrimaryKey: false,
-    autoMigrateState: true,
     userName: GeneralConstants.USER_NAME,
     predefinedConfig: undefined,
     alertOptions: {
@@ -148,7 +147,6 @@ const DefaultAdaptableOptions = {
     customSortOptions: { customSortComparers: undefined },
     dataSetOptions: { dataSets: GeneralConstants_1.EMPTY_ARRAY },
     groupingOptions: {
-        balancedGroupsKey: undefined,
         restoreUngroupedColumns: false,
         autoOrderGroupedColumns: true,
     },
@@ -248,6 +246,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,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sortColumnStateForVisibleColumns = void 0;
+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.
+ *
+ */
+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;
+}
+exports.sortColumnStateForVisibleColumns = sortColumnStateForVisibleColumns;

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1712070501504 || Date.now(),
-    VERSION: "18.0.0-canary.20" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1712232556015 || Date.now(),
+    VERSION: "18.0.0-canary.22" || '--current-version--',
 };