@xh/hoist 76.0.0-SNAPSHOT.1758310971360 → 76.0.0-SNAPSHOT.1758570404363

package/cmp/grid/GridModel.ts

@@ -8,11 +8,13 @@ import {
     CellClickedEvent,
     CellContextMenuEvent,
     CellDoubleClickedEvent,
+    CellEditingStartedEvent,
+    CellEditingStoppedEvent,
     ColumnEvent,
-    ColumnState as AgColumnState,
+    AgColumnState,
     RowClickedEvent,
     RowDoubleClickedEvent
-} from '@ag-grid-community/core';
+} from '@xh/hoist/kit/ag-grid';
 import {AgGridModel} from '@xh/hoist/cmp/ag-grid';
 import {
     Column,
@@ -95,7 +97,7 @@ import {
     pull,
     take
 } from 'lodash';
-import {ReactNode} from 'react';
+import {createRef, ReactNode, RefObject} from 'react';
 import {GridAutosizeOptions} from './GridAutosizeOptions';
 import {GridContextMenuSpec} from './GridContextMenu';
 import {GridSorter, GridSorterLike} from './GridSorter';
@@ -341,6 +343,13 @@ export interface GridConfig {
      */
     highlightRowOnClick?: boolean;
 
+    /**
+     *  Set to true to ensure that the grid will have a single horizontal scrollbar spanning the
+     *  width of all columns, including any pinned columns.  A value of false (default) will show
+     *  the scrollbar only under the scrollable area.
+     */
+    enableFullWidthScroll?: boolean;
+
     /**
      * Flags for experimental features. These features are designed for early client-access and
      * testing, but are not yet part of the Hoist API.
@@ -393,6 +402,7 @@ export class GridModel extends HoistModel {
     showGroupRowCounts: boolean;
     enableColumnPinning: boolean;
     enableExport: boolean;
+    enableFullWidthScroll: boolean;
     externalSort: boolean;
     exportOptions: ExportOptions;
     useVirtualColumns: boolean;
@@ -419,6 +429,7 @@ export class GridModel extends HoistModel {
 
     @managed filterModel: GridFilterModel;
     @managed agGridModel: AgGridModel;
+    viewRef: RefObject<HTMLDivElement> = createRef();
 
     //------------------------
     // Observable API
@@ -442,7 +453,9 @@ export class GridModel extends HoistModel {
      * Flag to track inline editing at a granular level. Will toggle each time row
      * or cell editing is activated or ended.
      */
-    @observable isEditing = false;
+    get isEditing(): boolean {
+        return !!this.editingCell;
+    }
 
     /**
      * Flag to track inline editing at a general level.
@@ -469,7 +482,7 @@ export class GridModel extends HoistModel {
         'colChooser',
         'autosizeColumns'
     ];
-
+    @observable.ref private editingCell: {colId: string; rowIndex: number} = null;
     private _defaultState; // initial state provided to ctor - powers restoreDefaults().
 
     /**
@@ -485,6 +498,10 @@ export class GridModel extends HoistModel {
         return treeMode ? store.maxDepth : groupBy ? groupBy.length : 0;
     }
 
+    get bodyViewport(): HTMLElement {
+        return this.viewRef.current?.querySelector('.ag-body-viewport') as HTMLElement;
+    }
+
     /** Tracks execution of filtering operations.*/
     @managed filterTask = TaskObserver.trackAll();
 
@@ -545,6 +562,7 @@ export class GridModel extends HoistModel {
             expandLevel = treeMode ? 0 : 1,
             levelLabels,
             highlightRowOnClick = XH.isMobileApp,
+            enableFullWidthScroll = false,
             experimental,
             appData,
             xhImpl,
@@ -571,6 +589,7 @@ export class GridModel extends HoistModel {
             contextMenu === false ? [] : withDefault(contextMenu, GridModel.defaultContextMenu);
         this.useVirtualColumns = useVirtualColumns;
         this.externalSort = externalSort;
+        this.enableFullWidthScroll = enableFullWidthScroll;
         this.autosizeOptions = defaults(
             {...autosizeOptions},
             {
@@ -1216,7 +1235,7 @@ export class GridModel extends HoistModel {
 
         // 1) Update any width, visibility or pinned changes
         colStateChanges.forEach(change => {
-            const col = find(columnState, {colId: change.colId});
+            const col: ColumnState = find(columnState, {colId: change.colId});
 
             if (!isNil(change.width)) col.width = change.width;
             if (!isNil(change.hidden)) col.hidden = change.hidden;
@@ -1354,7 +1373,7 @@ export class GridModel extends HoistModel {
      */
     @logWithDebug
     async autosizeAsync(overrideOpts: Omit<GridAutosizeOptions, 'mode'> = {}) {
-        const options = {...this.autosizeOptions, ...overrideOpts};
+        const options: GridAutosizeOptions = {...this.autosizeOptions, ...overrideOpts};
 
         if (options.mode === 'disabled') {
             return;
@@ -1464,14 +1483,27 @@ export class GridModel extends HoistModel {
 
     /** @internal */
     @action
-    onCellEditingStarted = () => {
-        this.isEditing = true;
+    onCellEditingStarted = (e: CellEditingStartedEvent) => {
+        this.editingCell = {colId: e.column.getColId(), rowIndex: e.rowIndex};
     };
 
     /** @internal*/
     @action
-    onCellEditingStopped = () => {
-        this.isEditing = false;
+    onCellEditingStopped = (e: CellEditingStoppedEvent) => {
+        const origCell = this.editingCell;
+        this.editingCell = null;
+        const {agApi} = this,
+            focusedCell = agApi.getFocusedCell();
+
+        // If the rowIndex has moved since we started edit, sorting might have caused the wrong row
+        // to be focused.  In this (rare) case, just conservatively keep focus on what was edited
+        if (
+            !isUndefined(e.rowIndex) &&
+            origCell?.rowIndex != e.rowIndex &&
+            focusedCell?.rowIndex != e.rowIndex
+        ) {
+            agApi.setFocusedCell(e.rowIndex, origCell.colId);
+        }
     };
 
     /**
@@ -1547,11 +1579,11 @@ export class GridModel extends HoistModel {
         await this.whenReadyAsync();
         if (!this.isReady) return;
 
-        const {agApi, empty} = this,
+        const {agApi} = this,
             {showMask} = options;
 
         if (showMask) {
-            agApi.showLoadingOverlay();
+            agApi.updateGridOptions({loading: true});
         }
 
         try {
@@ -1559,11 +1591,7 @@ export class GridModel extends HoistModel {
         } finally {
             if (showMask) {
                 await wait();
-                if (empty) {
-                    agApi.showNoRowsOverlay();
-                } else {
-                    agApi.hideOverlay();
-                }
+                agApi.updateGridOptions({loading: false});
             }
         }
     }

package/cmp/grid/Types.ts

@@ -5,7 +5,6 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
-import {CustomCellEditorProps} from '@ag-grid-community/react';
 import {GridFilterFieldSpecConfig} from '@xh/hoist/cmp/grid/filter/GridFilterFieldSpec';
 import {HSide, PersistOptions, Some} from '@xh/hoist/core';
 import {Store, StoreRecord, View} from '@xh/hoist/data';
@@ -22,7 +21,8 @@ import type {
     IRowNode,
     ITooltipParams,
     RowClassParams,
-    ValueSetterParams
+    ValueSetterParams,
+    CustomCellEditorProps
 } from '@xh/hoist/kit/ag-grid';
 
 export interface ColumnState {

package/cmp/grid/columns/Column.ts

@@ -4,7 +4,6 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {CustomCellEditorProps} from '@ag-grid-community/react';
 import {div, li, span, ul} from '@xh/hoist/cmp/layout';
 import {HAlign, HSide, PlainObject, Some, XH, Thunkable} from '@xh/hoist/core';
 import {
@@ -69,9 +68,10 @@ import type {
     ColDef,
     ITooltipParams,
     ValueGetterParams,
-    ValueSetterParams
+    ValueSetterParams,
+    CustomCellEditorProps,
+    CellClickedEvent
 } from '@xh/hoist/kit/ag-grid';
-import {CellClickedEvent} from '@ag-grid-community/core';
 
 export interface ColumnSpec {
     /**

package/cmp/grid/impl/ColumnGroupHeader.ts

@@ -13,7 +13,7 @@ import classNames from 'classnames';
 import {isFunction} from 'lodash';
 import {ReactNode} from 'react';
 
-import type {AgColumnGroup, IHeaderGroupParams} from '@xh/hoist/kit/ag-grid';
+import type {AgProvidedColumnGroup, IHeaderGroupParams} from '@xh/hoist/kit/ag-grid';
 
 export interface ColumnGroupHeaderProps
     extends HoistProps<ColumnGroupHeaderModel>,
@@ -80,7 +80,7 @@ class ColumnGroupHeaderModel extends HoistModel {
         return this.agColumnGroup.isExpandable();
     }
 
-    get agColumnGroup(): AgColumnGroup {
+    get agColumnGroup(): AgProvidedColumnGroup {
         return this.componentProps.columnGroup.providedColumnGroup;
     }
 
@@ -99,5 +99,7 @@ class ColumnGroupHeaderModel extends HoistModel {
         super.destroy();
     }
 
-    syncIsExpanded = () => (this.isExpanded = this.agColumnGroup.isExpanded());
+    syncIsExpanded = () => {
+        this.isExpanded = this.agColumnGroup.isExpanded();
+    };
 }

package/cmp/grid/impl/ColumnHeader.ts

@@ -11,7 +11,7 @@ import {Column, GridModel} from '@xh/hoist/cmp/grid';
 import {Icon} from '@xh/hoist/icon';
 import {columnHeaderFilter, ColumnHeaderFilterModel} from '@xh/hoist/dynamics/desktop';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {debounced} from '@xh/hoist/utils/js';
+import {debounced, consumeEvent} from '@xh/hoist/utils/js';
 import {olderThan} from '@xh/hoist/utils/datetime';
 import {
     filter,
@@ -253,8 +253,7 @@ class ColumnHeaderModel extends HoistModel {
     onExpandOrCollapse = e => {
         const {gridModel, majorityIsExpanded} = this;
 
-        e.stopPropagation();
-        e.preventDefault();
+        consumeEvent(e);
         if (majorityIsExpanded) {
             gridModel.collapseAll();
         } else {

package/cmp/grid/impl/MenuSupport.ts

@@ -16,6 +16,7 @@ import {renderToStaticMarkup} from '@xh/hoist/utils/react';
 import {GridContextMenuItemLike, GridContextMenuSpec} from '../GridContextMenu';
 
 import type {GetContextMenuItemsParams, MenuItemDef} from '@xh/hoist/kit/ag-grid';
+import {wait} from '@xh/hoist/promise';
 
 /**
  * @internal
@@ -294,7 +295,7 @@ function levelExpandAction(gridModel: GridModel): RecordAction {
                 return {
                     icon: isCurrLevel ? Icon.check() : null,
                     text: label,
-                    actionFn: () => gridModel.expandToLevel(idx)
+                    actionFn: () => wait().then(() => gridModel.expandToLevel(idx))
                 };
             });
             return {items};

package/cmp/zoneGrid/ZoneGrid.ts

@@ -52,8 +52,7 @@ export const [ZoneGrid, zoneGrid] = hoistCmp.withFactory<ZoneGridProps>({
                 ref,
                 model: gridModel,
                 agOptions: {
-                    suppressRowGroupHidesColumns: true,
-                    suppressMakeColumnVisibleAfterUnGroup: true,
+                    suppressGroupChangesColumnVisibility: true,
                     ...props.agOptions
                 }
             }),

package/cmp/zoneGrid/ZoneGridModel.ts

@@ -10,7 +10,7 @@ import {
     CellDoubleClickedEvent,
     RowClickedEvent,
     RowDoubleClickedEvent
-} from '@ag-grid-community/core';
+} from '@xh/hoist/kit/ag-grid';
 import {
     Column,
     ColumnRenderer,

package/desktop/cmp/grid/editors/BooleanEditor.ts

@@ -5,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {useEffect} from 'react';
-import {CustomCellEditorProps} from '@ag-grid-community/react';
+import {CustomCellEditorProps} from '@xh/hoist/kit/ag-grid';
 import {hoistCmp} from '@xh/hoist/core';
 import {checkbox, CheckboxProps} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';

package/desktop/cmp/grid/editors/DateEditor.ts

@@ -23,13 +23,8 @@ export const [DateEditor, dateEditor] = hoistCmp.withFactory<DateEditorProps>({
         // We need to render the day picker popover inside the grid viewport in order for
         // `stopEditingWhenCellsLoseFocus` to work properly - otherwise the day picker becomes
         // unusable due to the grid losing focus and stopping editing when clicking inside picker
-        // @ts-ignore -- private
-        const portalContainer = props.gridModel.agApi.gridBodyCtrl?.eBodyViewport;
-
-        warnIf(
-            !portalContainer,
-            'Could not find the grid body viewport for rendering DateEditor picker popover.'
-        );
+        const portalContainer = props.gridModel.bodyViewport;
+        warnIf(!portalContainer, 'Could not find the grid viewport for rendering DateEditor');
 
         props = {
             ...props,

package/desktop/cmp/grid/editors/EditorProps.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {CustomCellEditorProps} from '@ag-grid-community/react';
+import {CustomCellEditorProps} from '@xh/hoist/kit/ag-grid';
 import {Column, GridModel} from '@xh/hoist/cmp/grid';
 import {HoistInputProps} from '@xh/hoist/cmp/input';
 import {HoistProps} from '@xh/hoist/core';

package/desktop/cmp/grid/editors/NumberEditor.ts

@@ -7,7 +7,7 @@
 import {withDefault} from '@xh/hoist/utils/js';
 import {isNil} from 'lodash';
 import {useCallback, useEffect} from 'react';
-import {CustomCellEditorProps, useGridCellEditor} from '@ag-grid-community/react';
+import {CustomCellEditorProps, useGridCellEditor} from '@xh/hoist/kit/ag-grid';
 import {hoistCmp} from '@xh/hoist/core';
 import {numberInput, NumberInputProps} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';

package/desktop/cmp/grid/editors/impl/InlineEditorModel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {CustomCellEditorProps, useGridCellEditor} from '@ag-grid-community/react';
+import {CustomCellEditorProps, useGridCellEditor} from '@xh/hoist/kit/ag-grid';
 import composeRefs from '@seznam/compose-react-refs';
 import {HoistInputModel} from '@xh/hoist/cmp/input';
 import {ElementFactory, HoistModel, useLocalModel} from '@xh/hoist/core';
@@ -52,7 +52,7 @@ export function useInlineEditorModel(
             // Call the onCommit callback last - if provided by the app developer.
             // If app's onCommit invokes agParams.stopEditing() before onValueChange is called,
             // it will prevent the value change.
-            props.inputProps?.onCommit?.(value, oldValue);
+            inputProps?.onCommit?.(value, oldValue);
         }
     });
 }

package/desktop/cmp/rest/RestGridModel.ts

@@ -5,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
-import {RowDoubleClickedEvent} from '@ag-grid-community/core';
+import {RowDoubleClickedEvent} from '@xh/hoist/kit/ag-grid';
 import {BaseFieldConfig} from '@xh/hoist/cmp/form';
 import {GridConfig, GridModel} from '@xh/hoist/cmp/grid';
 import {ElementSpec, HoistModel, managed, PlainObject, XH} from '@xh/hoist/core';

package/inspector/instances/InstancesPanel.ts

@@ -62,8 +62,7 @@ export const instancesPanel = hoistCmp.factory({
                     item: grid({
                         model: model.instancesGridModel,
                         agOptions: {
-                            suppressRowGroupHidesColumns: true,
-                            suppressMakeColumnVisibleAfterUnGroup: true
+                            suppressGroupChangesColumnVisibility: true
                         }
                     }),
                     bbar: instanceGridBar(),

package/kit/ag-grid/index.ts

@@ -6,6 +6,7 @@
  */
 
 import {checkVersion, logError} from '@xh/hoist/utils/js';
+import {Component} from 'react';
 
 /**
  * The exports below are ag-Grid components provided at runtime by applications.
@@ -44,18 +45,32 @@ export type {
     MenuItemDef,
     CellPosition,
     NavigateToNextCellParams,
+    ColumnEvent,
+    ColumnState as AgColumnState,
     Column as AgColumn,
-    ColumnGroup as AgColumnGroup
-} from '@ag-grid-community/core';
+    ColumnGroup as AgColumnGroup,
+    AgProvidedColumnGroup,
+    RowDoubleClickedEvent,
+    RowClickedEvent,
+    RowHeightParams,
+    CellClickedEvent,
+    CellContextMenuEvent,
+    CellDoubleClickedEvent,
+    CellEditingStartedEvent,
+    CellEditingStoppedEvent
+} from 'ag-grid-community';
 
-const MIN_VERSION = '31.2.0';
-const MAX_VERSION = '31.*.*';
+export type {CustomCellEditorProps} from 'ag-grid-react';
+export {useGridCellEditor} from 'ag-grid-react';
+
+const MIN_VERSION = '34.1.1';
+const MAX_VERSION = '34.*.*';
 
 /**
  * Expose application versions of ag-Grid to Hoist.
  * Typically called in the Bootstrap.js. of the application.
  */
-export function installAgGrid(ComponentReactWrapper, version: string) {
+export function installAgGrid(ComponentReactWrapper: Component, version: string) {
     if (!checkVersion(version, MIN_VERSION, MAX_VERSION)) {
         logError(
             `This version of Hoist requires an ag-Grid version between ${MIN_VERSION} and ` +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "76.0.0-SNAPSHOT.1758310971360",
+  "version": "76.0.0-SNAPSHOT.1758570404363",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -91,13 +91,12 @@
     "react-dom": "~18.2.0"
   },
   "devDependencies": {
-    "@ag-grid-community/client-side-row-model": "31.x",
-    "@ag-grid-community/core": "31.x",
-    "@ag-grid-community/react": "31.x",
     "@types/react": "18.x",
     "@types/react-dom": "18.x",
     "@types/react-grid-layout": "1.3.5",
     "@xh/hoist-dev-utils": "11.x",
+    "ag-grid-community": "34.x",
+    "ag-grid-react": "34.x",
     "csstype": "3.x",
     "eslint": "9.x",
     "eslint-config-prettier": "10.x",