@xh/hoist 72.0.0-SNAPSHOT.1737676613505 → 72.0.0-SNAPSHOT.1737733122023

package/CHANGELOG.md

@@ -15,7 +15,8 @@
 ### 🐞 Bug Fixes
 
 * Fixed `ViewManagerModel` unique name validation.
-* `GridModel.restoreDefaultsAsync()` now restores default filter rather than simply clearing it.
+* Fixed `GridModel.restoreDefaultsAsync()` to restore any default filter, rather than simply clearing it.
+* Improved suboptimal column state synchronization between `GridModel` and AG Grid.
 
 ### ⚙️ Technical
 

package/admin/tabs/cluster/instances/InstancesTabModel.ts

@@ -17,12 +17,11 @@ import {memoryMonitorPanel} from '@xh/hoist/admin/tabs/cluster/instances/memory/
 import {servicePanel} from '@xh/hoist/admin/tabs/cluster/instances/services/ServicePanel';
 import {webSocketPanel} from '@xh/hoist/admin/tabs/cluster/instances/websocket/WebSocketPanel';
 import {badge} from '@xh/hoist/cmp/badge';
-import {GridModel, numberCol} from '@xh/hoist/cmp/grid';
+import {GridContextMenuSpec, GridModel, numberCol} from '@xh/hoist/cmp/grid';
 import {hbox} from '@xh/hoist/cmp/layout';
 import {getRelativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';
 import {TabContainerModel, TabModel} from '@xh/hoist/cmp/tab';
 import {HoistModel, LoadSpec, lookup, managed, PlainObject, XH} from '@xh/hoist/core';
-import {RecordActionSpec} from '@xh/hoist/data';
 import {Icon} from '@xh/hoist/icon';
 import {makeObservable} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
@@ -38,15 +37,6 @@ export class InstancesTabModel extends HoistModel {
     @managed readonly tabContainerModel: TabContainerModel = this.createTabContainerModel();
     @managed readonly timer: Timer;
 
-    shutdownAction: RecordActionSpec = {
-        icon: Icon.skull(),
-        text: 'Shutdown Instance',
-        intent: 'danger',
-        actionFn: ({record}) => this.shutdownInstanceAsync(record.data),
-        displayFn: () => ({hidden: AppModel.readonly}),
-        recordsRequired: 1
-    };
-
     get instance(): PlainObject {
         return this.gridModel.selectedRecord?.data;
     }
@@ -182,10 +172,25 @@ export class InstancesTabModel extends HoistModel {
                     rendererIsComplex: true
                 }
             ],
-            contextMenu: [this.shutdownAction, '-', ...GridModel.defaultContextMenu]
+            contextMenu: this.createContextMenu()
         });
     }
 
+    private createContextMenu(): GridContextMenuSpec {
+        return [
+            {
+                icon: Icon.skull(),
+                text: 'Shutdown Instance',
+                intent: 'danger',
+                actionFn: ({record}) => this.shutdownInstanceAsync(record.data),
+                displayFn: () => ({hidden: AppModel.readonly}),
+                recordsRequired: 1
+            },
+            '-',
+            ...GridModel.defaultContextMenu
+        ];
+    }
+
     private createTabContainerModel() {
         return new TabContainerModel({
             route: 'default.cluster.instances',

package/build/types/admin/tabs/cluster/instances/InstancesTabModel.d.ts

@@ -1,7 +1,6 @@
 import { GridModel } from '@xh/hoist/cmp/grid';
 import { TabContainerModel } from '@xh/hoist/cmp/tab';
 import { HoistModel, LoadSpec, PlainObject } from '@xh/hoist/core';
-import { RecordActionSpec } from '@xh/hoist/data';
 import { Timer } from '@xh/hoist/utils/async';
 import { ReactNode } from 'react';
 export declare class InstancesTabModel extends HoistModel {
@@ -12,7 +11,6 @@ export declare class InstancesTabModel extends HoistModel {
     readonly gridModel: GridModel;
     readonly tabContainerModel: TabContainerModel;
     readonly timer: Timer;
-    shutdownAction: RecordActionSpec;
     get instance(): PlainObject;
     get instanceName(): string;
     get isMultiInstance(): boolean;
@@ -21,6 +19,7 @@ export declare class InstancesTabModel extends HoistModel {
     constructor();
     formatInstance(instance: PlainObject): ReactNode;
     private createGridModel;
+    private createContextMenu;
     private createTabContainerModel;
     private shutdownInstanceAsync;
     private get autoRefreshInterval();

package/build/types/cmp/grid/Grid.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 /// <reference types="lodash" />
-import { HoistModel, HoistProps, LayoutProps, PlainObject, TestSupportProps } from '@xh/hoist/core';
+import { GridApi } from '@ag-grid-community/core';
+import { ColumnState } from '@xh/hoist/cmp/grid';
+import { HoistModel, HoistProps, LayoutProps, PlainObject, ReactionSpec, TestSupportProps } from '@xh/hoist/core';
 import { RecordSet } from '@xh/hoist/data/impl/RecordSet';
 import type { ColDef, ColGroupDef, GetContextMenuItemsParams, GridOptions, GridReadyEvent, ProcessCellForExportParams } from '@xh/hoist/kit/ag-grid';
 import './Grid.scss';
@@ -53,7 +55,7 @@ export declare class GridLocalModel extends HoistModel {
     onLinked(): void;
     private createDefaultAgOptions;
     getColumnDefs(): Array<ColDef | ColGroupDef>;
-    getContextMenuItems: (params: GetContextMenuItemsParams) => (string | import("@xh/hoist/kit/ag-grid").MenuItemDef<any, any>)[];
+    getContextMenuItems: (params: GetContextMenuItemsParams) => (string | import("@ag-grid-community/core").MenuItemDef<any, any>)[];
     dataReaction(): {
         track: () => (boolean | import("@xh/hoist/core").VSide | import("../../data").StoreRecord[] | RecordSet)[];
         run: () => void;
@@ -63,11 +65,11 @@ export declare class GridLocalModel extends HoistModel {
         run: () => void;
     };
     sortReaction(): {
-        track: () => (import("@xh/hoist/kit/ag-grid").GridApi<any> | import("@xh/hoist/cmp/grid").GridSorter[])[];
+        track: () => (GridApi<any> | import("@xh/hoist/cmp/grid").GridSorter[])[];
         run: ([agApi, sortBy]: [any, any]) => void;
     };
     groupReaction(): {
-        track: () => (string[] | import("@xh/hoist/kit/ag-grid").GridApi<any>)[];
+        track: () => (string[] | GridApi<any>)[];
         run: ([agApi, groupBy]: [any, any]) => void;
     };
     get calculatedRowHeight(): any;
@@ -83,13 +85,10 @@ export declare class GridLocalModel extends HoistModel {
     get useScrollOptimization(): boolean;
     applyScrollOptimization(): void;
     columnsReaction(): {
-        track: () => (import("@xh/hoist/kit/ag-grid").GridApi<any> | (import("@xh/hoist/cmp/grid").Column | import("@xh/hoist/cmp/grid").ColumnGroup)[])[];
+        track: () => (GridApi<any> | (import("@xh/hoist/cmp/grid").Column | import("@xh/hoist/cmp/grid").ColumnGroup)[])[];
         run: ([api]: [any]) => void;
     };
-    columnStateReaction(): {
-        track: () => (import("@xh/hoist/kit/ag-grid").GridApi<any> | import("@xh/hoist/cmp/grid").ColumnState[])[];
-        run: ([api, colState]: [any, any]) => void;
-    };
+    columnStateReaction(): ReactionSpec<[GridApi, ColumnState[]]>;
     sizingModeReaction(): {
         track: () => import("@xh/hoist/core").SizingMode;
         run: () => void;
@@ -126,7 +125,7 @@ export declare class GridLocalModel extends HoistModel {
     readFilterState(): import("@ag-grid-community/core").FilterModel;
     writeFilterState(filterState: any): void;
     processCellForClipboard: ({ value, node, column }: ProcessCellForExportParams) => any;
-    navigateToNextCell: (agParams: any) => import("@xh/hoist/kit/ag-grid").CellPosition;
+    navigateToNextCell: (agParams: any) => import("@ag-grid-community/core").CellPosition;
     onCellMouseDown: (evt: any) => void;
     onKeyDown: (evt: any) => void;
     onRowClicked: (evt: any) => void;

package/build/types/cmp/grid/GridModel.d.ts

@@ -1,4 +1,4 @@
-import { CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, RowClickedEvent, RowDoubleClickedEvent } from '@ag-grid-community/core';
+import { CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, ColumnState as AgColumnState, RowClickedEvent, RowDoubleClickedEvent } from '@ag-grid-community/core';
 import { AgGridModel } from '@xh/hoist/cmp/ag-grid';
 import { Column, ColumnGroup, ColumnGroupSpec, ColumnSpec, GridAutosizeMode, GridFilterModelConfig, GridGroupSortFn, TreeStyle } from '@xh/hoist/cmp/grid';
 import { GridFilterModel } from '@xh/hoist/cmp/grid/filter/GridFilterModel';
@@ -430,7 +430,7 @@ export declare class GridModel extends HoistModel {
     setColumns(colConfigs: Array<ColumnSpec | ColumnGroupSpec>): void;
     setColumnState(colState: Partial<ColumnState>[]): void;
     showColChooser(): void;
-    noteAgColumnStateChanged(agColState: any): void;
+    noteAgColumnStateChanged(agColState: AgColumnState[]): void;
     setExpandState(expandState: any): void;
     noteAgExpandStateChange(): void;
     noteAgSelectionStateChanged(): void;

package/cmp/ag-grid/AgGridModel.ts

@@ -395,7 +395,7 @@ export class AgGridModel extends HoistModel {
             ];
 
         let {isPivot, columns} = colState;
-        agApi.setPivotMode(isPivot);
+        agApi.setGridOption('pivotMode', isPivot);
 
         if (isPivot && columns.some(it => !isNil(it.pivotIndex) && it.pivotIndex >= 0)) {
             // Exclude the auto group column as this causes issues with ag-grid when in pivot mode

package/cmp/grid/Grid.ts

@@ -4,9 +4,10 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {ColumnState as AgColumnState, GridApi} from '@ag-grid-community/core';
 import composeRefs from '@seznam/compose-react-refs';
 import {agGrid, AgGrid} from '@xh/hoist/cmp/ag-grid';
-import {getTreeStyleClasses} from '@xh/hoist/cmp/grid';
+import {ColumnState, getTreeStyleClasses} from '@xh/hoist/cmp/grid';
 import {gridHScrollbar} from '@xh/hoist/cmp/grid/impl/GridHScrollbar';
 import {getAgGridMenuItems} from '@xh/hoist/cmp/grid/impl/MenuSupport';
 import {div, fragment, frame, vframe} from '@xh/hoist/cmp/layout';
@@ -17,6 +18,7 @@ import {
     LayoutProps,
     lookup,
     PlainObject,
+    ReactionSpec,
     TestSupportProps,
     useLocalModel,
     uses,
@@ -44,7 +46,7 @@ import {wait} from '@xh/hoist/promise';
 import {consumeEvent, isDisplayed, logWithDebug} from '@xh/hoist/utils/js';
 import {createObservableRef, getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {debounce, isEmpty, isEqual, isNil, max, maxBy, merge} from 'lodash';
+import {compact, debounce, isBoolean, isEmpty, isEqual, isNil, max, maxBy, merge} from 'lodash';
 import './Grid.scss';
 import {GridModel} from './GridModel';
 import {columnGroupHeader} from './impl/ColumnGroupHeader';
@@ -463,7 +465,7 @@ export class GridLocalModel extends HoistModel {
         };
     }
 
-    columnStateReaction() {
+    columnStateReaction(): ReactionSpec<[GridApi, ColumnState[]]> {
         const {model} = this;
         return {
             track: () => [model.agApi, model.columnState],
@@ -472,65 +474,57 @@ export class GridLocalModel extends HoistModel {
 
                 const agColState = api.getColumnState();
 
-                // 0) Insert the auto group col state if it exists, since we won't have it in our column state list
+                // Insert the auto group col state if it exists, since we won't have it in our column state list
                 const autoColState = agColState.find(c => c.colId === 'ag-Grid-AutoColumn');
                 if (autoColState) {
-                    colState.splice(agColState.indexOf(autoColState), 0, autoColState);
+                    const {colId, width, hide, pinned} = autoColState;
+                    colState.splice(agColState.indexOf(autoColState), 0, {
+                        colId,
+                        width,
+                        hidden: hide,
+                        pinned: isBoolean(pinned) ? (pinned ? 'left' : null) : pinned
+                    });
                 }
 
-                // 1) Columns all in right place -- simply update incorrect props we maintain
-                if (
-                    isEqual(
-                        colState.map(c => c.colId),
-                        agColState.map(c => c.colId)
-                    )
-                ) {
-                    let hasChanges = false;
-                    colState.forEach((col, index) => {
-                        const agCol = agColState[index],
-                            id = col.colId;
-
-                        if (agCol.width !== col.width) {
-                            api.setColumnWidths([{key: id, newWidth: col.width}]);
+                // Determine if column order has changed
+                const applyOrder = !isEqual(
+                    colState.map(c => c.colId),
+                    agColState.map(c => c.colId)
+                );
+
+                // Build a list of column state changes
+                colState = compact(
+                    colState.map(({colId, width, hidden, pinned}) => {
+                        const agCol: AgColumnState = agColState.find(c => c.colId === colId) || {
+                                colId
+                            },
+                            ret: any = {colId};
+
+                        let hasChanges = applyOrder;
+
+                        if (agCol.width !== width) {
+                            ret.width = width;
                             hasChanges = true;
                         }
-                        if (agCol.hide !== col.hidden) {
-                            api.setColumnsVisible([id], !col.hidden);
+
+                        if (agCol.hide !== hidden) {
+                            ret.hide = hidden;
                             hasChanges = true;
                         }
-                        if (agCol.pinned !== col.pinned) {
-                            api.setColumnsPinned([id], col.pinned);
+
+                        if (agCol.pinned !== pinned) {
+                            ret.pinned = pinned;
                             hasChanges = true;
                         }
-                    });
-
-                    // We need to tell agGrid to refresh its flexed column sizes due to
-                    // a regression introduced in 25.1.0.  See #2341
-                    if (hasChanges) {
-                        api.columnModel.refreshFlexedColumns({
-                            updateBodyWidths: true,
-                            fireResizedEvent: true
-                        });
-                    }
 
-                    return;
-                }
+                        return hasChanges ? ret : null;
+                    })
+                );
 
-                // 2) Otherwise do an (expensive) full refresh of column state
-                // Merge our state onto the ag column state to get any state which we do not yet support
-                colState = colState.map(({colId, width, hidden, pinned}) => {
-                    const agCol = agColState.find(c => c.colId === colId) || {};
-                    return {
-                        colId,
-                        ...agCol,
-                        width,
-                        pinned,
-                        hide: hidden
-                    };
-                });
+                if (isEmpty(colState)) return;
 
                 this.doWithPreservedState({expansion: false}, () => {
-                    api.applyColumnState({state: colState, applyOrder: true});
+                    api.applyColumnState({state: colState, applyOrder});
                 });
             }
         };
@@ -870,6 +864,7 @@ export class GridLocalModel extends HoistModel {
      * by conditionally stopping the focus event from propagating.
      */
     private static didAddFocusFixListener = false;
+
     static addFocusFixListener() {
         if (this.didAddFocusFixListener) return;
         document.addEventListener(

package/cmp/grid/GridModel.ts

@@ -9,6 +9,7 @@ import {
     CellContextMenuEvent,
     CellDoubleClickedEvent,
     ColumnEvent,
+    ColumnState as AgColumnState,
     RowClickedEvent,
     RowDoubleClickedEvent
 } from '@ag-grid-community/core';
@@ -77,6 +78,7 @@ import {
     first,
     forEach,
     isArray,
+    isBoolean,
     isEmpty,
     isFunction,
     isNil,
@@ -1073,17 +1075,19 @@ export class GridModel extends HoistModel {
         (this.colChooserModel as any)?.open();
     }
 
-    noteAgColumnStateChanged(agColState) {
-        const colStateChanges = agColState.map(({colId, width, hide, pinned}) => {
-            const col = this.findColumn(this.columns, colId);
-            if (!col) return null;
-            return {
-                colId,
-                pinned: pinned ?? null,
-                hidden: !!hide,
-                width: col.flex ? undefined : width
-            };
-        });
+    noteAgColumnStateChanged(agColState: AgColumnState[]) {
+        const colStateChanges: Partial<ColumnState>[] = agColState.map(
+            ({colId, width, hide, pinned}) => {
+                const col = this.findColumn(this.columns, colId);
+                if (!col) return null;
+                return {
+                    colId,
+                    pinned: isBoolean(pinned) ? (pinned ? 'left' : null) : pinned,
+                    hidden: !!hide,
+                    width: col.flex ? undefined : width
+                };
+            }
+        );
 
         pull(colStateChanges, null);
         this.applyColumnStateChanges(colStateChanges);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "72.0.0-SNAPSHOT.1737676613505",
+  "version": "72.0.0-SNAPSHOT.1737733122023",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",