@xh/hoist 76.0.0-SNAPSHOT.1758565564006 → 76.0.0-SNAPSHOT.1758671078490

package/CHANGELOG.md

@@ -2,7 +2,22 @@
 
 ## 76.0.0-SNAPSHOT - unreleased
 
-### 💥 Breaking Changes (upgrade difficulty: 🟢 LOW - upgrade to Hoist Core, change to Tab constructor)
+### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - AG Grid update, Hoist React upgrade)
+
+* Hoist v76 upgrades AG Grid to v34 (from v31), covering three major AG Grid releases with their own
+  potentially breaking changes. Fortunately, internal Hoist updates to our managed API wrappers mean
+  that most apps will see very minimal changes, although there are required adjustments to app-level
+  `package.json` to install updated grid dependencies and `Bootstrap.ts` to import and register
+  your licensed grid modules at their new import paths.
+
+  Applications implementing `groupRowRenderer` should note that the `value` property passed to this
+  function is no longer stringified, but is instead the raw field value for the group.
+
+  See AG's upgrade guides for more details:
+  ** [Upgrade to v32](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-32/)
+  ** [Upgrade to v33](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-33/)
+  ** [Upgrade to v34](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-34/)
+
 *  The constructor for `TabModel` has changed to take its owning container as a second argument.
    (Most applications do not create `TabModels` directly, but it is possible.)
 *  The `Exception` class and `HoistException` type have been moved from `@xh\hoist\core` to a new
@@ -29,6 +44,10 @@
 * New constraint rule: `validEmails` - to validate one or more email addresses in an input field.
 * `DashCanvas` accepts a new prop `rglOptions` to pass additional options to the underlying
   `react-grid-layout`.
+* * Experimental grid feature  `enableFullWidthScroll` has been promoted to a first-class property
+    on `GridModel`.   Set to true to ensure that the grid will have a single horizontal scrollbar
+    spanning the width of all columns, including any pinned columns.
+
 
 ### 🐞 Bug Fixes
 

package/admin/tabs/userData/roles/details/members/BaseMembersModel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {RowClickedEvent} from '@ag-grid-community/core';
+import {RowDoubleClickedEvent} from '@xh/hoist/kit/ag-grid';
 import {ColumnRenderer, GridModel} from '@xh/hoist/cmp/grid';
 import {hbox} from '@xh/hoist/cmp/layout';
 import {HoistModel, lookup, managed, PlainObject} from '@xh/hoist/core';
@@ -91,7 +91,7 @@ export abstract class BaseMembersModel extends HoistModel {
             .join(', ');
     };
 
-    protected onRowDoubleClicked: (e: RowClickedEvent) => void = null;
+    protected onRowDoubleClicked: (e: RowDoubleClickedEvent) => void = null;
 
     //-----------------
     // Implementation

package/build/types/admin/tabs/userData/roles/details/members/BaseMembersModel.d.ts

@@ -1,4 +1,4 @@
-import { RowClickedEvent } from '@ag-grid-community/core';
+import { RowDoubleClickedEvent } from '@xh/hoist/kit/ag-grid';
 import { ColumnRenderer, GridModel } from '@xh/hoist/cmp/grid';
 import { HoistModel, PlainObject } from '@xh/hoist/core';
 import { ReactNode } from 'react';
@@ -19,7 +19,7 @@ export declare abstract class BaseMembersModel extends HoistModel {
     protected nameRenderer: ColumnRenderer;
     protected sourcesRenderer: ColumnRenderer;
     protected sourcesExportRenderer: ColumnRenderer;
-    protected onRowDoubleClicked: (e: RowClickedEvent) => void;
+    protected onRowDoubleClicked: (e: RowDoubleClickedEvent) => void;
     private createGridModel;
     private loadGridData;
 }

package/build/types/cmp/dataview/DataViewModel.d.ts

@@ -1,4 +1,4 @@
-import { RowClickedEvent, RowDoubleClickedEvent, RowHeightParams } from '@ag-grid-community/core';
+import { RowClickedEvent, RowDoubleClickedEvent, RowHeightParams } from '@xh/hoist/kit/ag-grid';
 import { ColumnRenderer, GridConfig, GridModel, GroupRowRenderer, RowClassFn, RowClassRuleFn, GridSorterLike, GridContextMenuSpec, GridGroupSortFn } from '@xh/hoist/cmp/grid';
 import { HoistModel, LoadSpec, PlainObject, Some } from '@xh/hoist/core';
 import { Store, StoreConfig, StoreRecord, StoreRecordOrId, StoreSelectionConfig, StoreSelectionModel, StoreTransaction } from '@xh/hoist/data';

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

@@ -1,4 +1,4 @@
-import { GridApi } from '@ag-grid-community/core';
+import { GridApi } from '@xh/hoist/kit/ag-grid';
 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';
@@ -53,7 +53,7 @@ export declare class GridLocalModel extends HoistModel {
     onLinked(): void;
     private createDefaultAgOptions;
     getColumnDefs(): Array<ColDef | ColGroupDef>;
-    getContextMenuItems: (params: GetContextMenuItemsParams) => (string | import("@ag-grid-community/core").MenuItemDef<any, any>)[];
+    getContextMenuItems: (params: GetContextMenuItemsParams) => (string | import("@xh/hoist/kit/ag-grid").MenuItemDef<any, any>)[];
     dataReaction(): {
         track: () => (boolean | RecordSet | import("../../data").StoreRecord[] | import("@xh/hoist/core").VSide)[];
         run: () => void;
@@ -120,10 +120,10 @@ export declare class GridLocalModel extends HoistModel {
         nodeB: any;
     }) => number;
     doWithPreservedState({ filters }: PlainObject, fn: any): void;
-    readFilterState(): import("@ag-grid-community/core").FilterModel;
+    readFilterState(): import("ag-grid-community").FilterModel;
     writeFilterState(filterState: any): void;
     processCellForClipboard: ({ value, node, column }: ProcessCellForExportParams) => any;
-    navigateToNextCell: (agParams: any) => import("@ag-grid-community/core").CellPosition;
+    navigateToNextCell: (agParams: any) => import("@xh/hoist/kit/ag-grid").CellPosition;
     onCellMouseDown: (evt: any) => void;
     onKeyDown: (evt: any) => void;
     onRowClicked: (evt: any) => void;

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

@@ -1,11 +1,11 @@
-import { CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, ColumnState as AgColumnState, RowClickedEvent, RowDoubleClickedEvent } from '@ag-grid-community/core';
+import { CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, CellEditingStartedEvent, CellEditingStoppedEvent, AgColumnState, RowClickedEvent, RowDoubleClickedEvent } from '@xh/hoist/kit/ag-grid';
 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';
 import { Awaitable, HoistModel, HSide, PlainObject, SizingMode, Some, TaskObserver, Thunkable, VSide } from '@xh/hoist/core';
 import { Store, StoreConfig, StoreRecord, StoreRecordId, StoreRecordOrId, StoreSelectionConfig, StoreSelectionModel, StoreTransaction } from '@xh/hoist/data';
 import { ExportOptions } from '@xh/hoist/svc/GridExportService';
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { GridAutosizeOptions } from './GridAutosizeOptions';
 import { GridContextMenuSpec } from './GridContextMenu';
 import { GridSorter, GridSorterLike } from './GridSorter';
@@ -191,6 +191,12 @@ export interface GridConfig {
      * otherwise false.
      */
     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.
@@ -232,6 +238,7 @@ export declare class GridModel extends HoistModel {
     showGroupRowCounts: boolean;
     enableColumnPinning: boolean;
     enableExport: boolean;
+    enableFullWidthScroll: boolean;
     externalSort: boolean;
     exportOptions: ExportOptions;
     useVirtualColumns: boolean;
@@ -257,6 +264,7 @@ export declare class GridModel extends HoistModel {
     appData: PlainObject;
     filterModel: GridFilterModel;
     agGridModel: AgGridModel;
+    viewRef: RefObject<HTMLDivElement>;
     columns: Array<ColumnGroup | Column>;
     columnState: ColumnState[];
     expandState: any;
@@ -271,7 +279,7 @@ export declare 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.
      */
-    isEditing: boolean;
+    get isEditing(): boolean;
     /**
      * Flag to track inline editing at a general level.
      * Will not change during transient navigation from cell to cell or row to row,
@@ -280,6 +288,7 @@ export declare class GridModel extends HoistModel {
      */
     isInEditingMode: boolean;
     static defaultContextMenu: string[];
+    private editingCell;
     private _defaultState;
     /**
      * Is autosizing enabled on this grid?
@@ -287,6 +296,7 @@ export declare class GridModel extends HoistModel {
      */
     get autosizeEnabled(): boolean;
     get maxDepth(): number;
+    get bodyViewport(): HTMLElement;
     /** Tracks execution of filtering operations.*/
     filterTask: TaskObserver;
     /** Tracks execution of autosize operations. */
@@ -403,7 +413,7 @@ export declare class GridModel extends HoistModel {
     /** True if this grid has no records to show in its store. */
     get empty(): boolean;
     get isReady(): boolean;
-    get agApi(): import("@ag-grid-community/core").GridApi<any>;
+    get agApi(): import("@xh/hoist/kit/ag-grid").GridApi<any>;
     get sizingMode(): SizingMode;
     set sizingMode(v: SizingMode);
     setSizingMode(v: SizingMode): void;
@@ -543,9 +553,9 @@ export declare class GridModel extends HoistModel {
      */
     endEditAsync(dropPendingChanges?: boolean): Promise<void>;
     /** @internal */
-    onCellEditingStarted: () => void;
+    onCellEditingStarted: (e: CellEditingStartedEvent) => void;
     /** @internal*/
-    onCellEditingStopped: () => void;
+    onCellEditingStopped: (e: CellEditingStoppedEvent) => void;
     /**
      * Returns true as soon as the underlying agGridModel is ready, waiting a limited period
      * of time if needed to allow the component to initialize. Returns false if grid not ready

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

@@ -1,4 +1,3 @@
-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';
@@ -6,7 +5,7 @@ import { ReactElement, ReactNode } from 'react';
 import { Column } from './columns/Column';
 import { ColumnGroup } from './columns/ColumnGroup';
 import { GridModel } from './GridModel';
-import type { CellClassParams, HeaderClassParams, HeaderValueGetterParams, ICellRendererParams, IRowNode, ITooltipParams, RowClassParams, ValueSetterParams } from '@xh/hoist/kit/ag-grid';
+import type { CellClassParams, HeaderClassParams, HeaderValueGetterParams, ICellRendererParams, IRowNode, ITooltipParams, RowClassParams, ValueSetterParams, CustomCellEditorProps } from '@xh/hoist/kit/ag-grid';
 export interface ColumnState {
     colId: string;
     width: number;

package/build/types/cmp/grid/columns/Column.d.ts

@@ -3,8 +3,7 @@ import { CubeFieldSpec, FieldSpec, RecordAction, RecordActionSpec, StoreRecord }
 import { FunctionComponent, ReactNode } from 'react';
 import { GridModel } from '../GridModel';
 import { ColumnCellClassFn, ColumnCellClassRuleFn, ColumnComparator, ColumnEditableFn, ColumnEditorFn, ColumnEditorProps, ColumnExcelFormatFn, ColumnExportValueFn, ColumnGetValueFn, ColumnHeaderClassFn, ColumnHeaderNameFn, ColumnRenderer, ColumnSetValueFn, ColumnSortSpec, ColumnSortValueFn, ColumnTooltipFn } from '../Types';
-import type { ColDef } from '@xh/hoist/kit/ag-grid';
-import { CellClickedEvent } from '@ag-grid-community/core';
+import type { ColDef, CellClickedEvent } from '@xh/hoist/kit/ag-grid';
 export interface ColumnSpec {
     /**
      * Name of data store field to display within the column, or object containing properties

package/build/types/cmp/grid/impl/ColumnGroupHeader.d.ts

@@ -1,6 +1,6 @@
 import { ColumnGroup, GridModel } from '@xh/hoist/cmp/grid';
 import { HoistModel, HoistProps } from '@xh/hoist/core';
-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>, IHeaderGroupParams {
     gridModel: GridModel;
     xhColumnGroup: ColumnGroup;
@@ -15,10 +15,10 @@ declare class ColumnGroupHeaderModel extends HoistModel {
     xhImpl: boolean;
     isExpanded: boolean;
     get isExpandable(): boolean;
-    get agColumnGroup(): AgColumnGroup;
+    get agColumnGroup(): AgProvidedColumnGroup;
     constructor();
     onLinked(): void;
     destroy(): void;
-    syncIsExpanded: () => boolean;
+    syncIsExpanded: () => void;
 }
 export {};

package/build/types/cmp/zoneGrid/ZoneGridModel.d.ts

@@ -1,4 +1,4 @@
-import { CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, RowClickedEvent, RowDoubleClickedEvent } from '@ag-grid-community/core';
+import { CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, RowClickedEvent, RowDoubleClickedEvent } from '@xh/hoist/kit/ag-grid';
 import { ColumnRenderer, ColumnSpec, GridContextMenuSpec, GridGroupSortFn, GridModel, GridSorter, GridSorterLike, GroupRowRenderer, RowClassFn, RowClassRuleFn, TreeStyle } from '@xh/hoist/cmp/grid';
 import { Awaitable, HoistModel, LoadSpec, PlainObject, Some, Thunkable, VSide } from '@xh/hoist/core';
 import { RecordAction, Store, StoreConfig, StoreRecordOrId, StoreSelectionConfig, StoreSelectionModel, StoreTransaction } from '@xh/hoist/data';

package/build/types/desktop/cmp/grid/editors/EditorProps.d.ts

@@ -1,4 +1,4 @@
-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/build/types/desktop/cmp/rest/RestGridModel.d.ts

@@ -1,4 +1,4 @@
-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, PlainObject } from '@xh/hoist/core';

package/build/types/kit/ag-grid/index.d.ts

@@ -1,3 +1,4 @@
+import { Component } from 'react';
 /**
  * The exports below are ag-Grid components provided at runtime by applications.
  *
@@ -11,9 +12,11 @@ export declare let agGridVersion: any;
  * However Hoist does import the following community-only TYPES to help validate its internal
  * implementations.
  */
-export type { GridOptions, GridApi, SortDirection, ColDef, ColGroupDef, GetContextMenuItemsParams, GridReadyEvent, IHeaderGroupParams, IHeaderParams, ProcessCellForExportParams, CellClassParams, HeaderClassParams, HeaderValueGetterParams, ICellRendererParams, ITooltipParams, IRowNode, RowClassParams, ValueGetterParams, ValueSetterParams, MenuItemDef, CellPosition, NavigateToNextCellParams, Column as AgColumn, ColumnGroup as AgColumnGroup } from '@ag-grid-community/core';
+export type { GridOptions, GridApi, SortDirection, ColDef, ColGroupDef, GetContextMenuItemsParams, GridReadyEvent, IHeaderGroupParams, IHeaderParams, ProcessCellForExportParams, CellClassParams, HeaderClassParams, HeaderValueGetterParams, ICellRendererParams, ITooltipParams, IRowNode, RowClassParams, ValueGetterParams, ValueSetterParams, MenuItemDef, CellPosition, NavigateToNextCellParams, ColumnEvent, ColumnState as AgColumnState, Column as AgColumn, ColumnGroup as AgColumnGroup, AgProvidedColumnGroup, RowDoubleClickedEvent, RowClickedEvent, RowHeightParams, CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, CellEditingStartedEvent, CellEditingStoppedEvent } from 'ag-grid-community';
+export type { CustomCellEditorProps } from 'ag-grid-react';
+export { useGridCellEditor } from 'ag-grid-react';
 /**
  * Expose application versions of ag-Grid to Hoist.
  * Typically called in the Bootstrap.js. of the application.
  */
-export declare function installAgGrid(ComponentReactWrapper: any, version: string): void;
+export declare function installAgGrid(ComponentReactWrapper: Component, version: string): void;

package/cmp/ag-grid/AgGrid.ts

@@ -100,7 +100,6 @@ export const [AgGrid, agGrid] = hoistCmp.withFactory<AgGridProps>({
             item: createElement(AgGridReact, {
                 ...AgGrid['DEFAULT_PROPS'],
                 // Default some ag-grid props, but allow overriding.
-                reactiveCustomComponents: true, // will be default in ag-grid v32
                 getRowHeight: impl.getRowHeight,
                 // Pass others on directly.
                 ...agGridProps,

package/cmp/ag-grid/AgGridModel.ts

@@ -305,65 +305,22 @@ export class AgGridModel extends HoistModel {
                 it => !isArray(it.colId)
             ),
             {agApi} = this,
-            isPivot = agApi.isPivotMode(),
-            havePivotCols = !isEmpty(agApi.getPivotColumns()),
             defaultState = {
                 sort: null,
                 sortIndex: null
             };
 
-        // ag-Grid does not allow "secondary" columns to be manipulated by applyColumnState
-        // so this approach is required for setting sort config on secondary columns.
-        if (isPivot && havePivotCols && !isEmpty(secondaryColumnState)) {
-            // 1st clear all pre-existing primary column sorts
-            // with an explicit clear of the auto_group column,
-            // which is not cleared by the defaultState config.
-            agApi.applyColumnState({
-                state: [
-                    {
-                        colId: AgGridModel.AUTO_GROUP_COL_ID,
-                        sort: null,
-                        sortIndex: null
-                    }
-                ],
-                defaultState
-            });
-
-            // 2nd clear all pre-existing secondary column sorts
-            agApi.getPivotResultColumns().forEach(col => {
-                if (col) {
-                    // When using `applyColumnState`, `undefined` means do nothing, `null` means set to none, not cleared.
-                    // But when using the setSort & setSortIndex methods directly, to clear all sort settings as if no sort
-                    // had ever been specified, `undefined` must be used.
-                    col.setSort(undefined, null);
-                    col.setSortIndex(undefined);
-                }
-            });
-
-            // finally apply sorts from state to secondary columns
-            secondaryColumnState.forEach(state => {
-                // TODO -- state saving for pivot appears broken.
-                // Related to TS error below? Need to analyze and tear down if no longer needed.
-                // @ts-ignore
-                const col = agApi.getPivotResultColumn(state.colId[0], state.colId[1]);
-                if (col) {
-                    col.setSort(state.sort, null);
-                    col.setSortIndex(state.sortIndex);
-                } else {
-                    this.logWarn(
-                        'Could not find a secondary column to associate with the pivot column path',
-                        state.colId
-                    );
-                }
-            });
-        }
+        // ag-Grid has had issues manipulating secondary columns with applyColumnState
+        // If support here deemed necessary, more investigation could be done.
+        throwIf(
+            agApi.isPivotMode() &&
+                !isEmpty(agApi.getPivotColumns()) &&
+                !isEmpty(secondaryColumnState),
+            'setSortState not currently supported for PivotGrid with secondary column state '
+        );
 
         // always apply any sorts on primary columns (includes the auto_group column on pivot grids)
-        agApi.applyColumnState({
-            state: primaryColumnState,
-            defaultState
-        });
-
+        agApi.applyColumnState({state: primaryColumnState, defaultState});
         agApi.onSortChanged();
     }
 
@@ -416,7 +373,6 @@ export class AgGridModel extends HoistModel {
         const sortBy = castArray(value).map(it => GridSorter.parse(it));
         const {agApi} = this,
             prevSortBy = this._prevSortBy;
-        let togglingAbsSort = false;
 
         if (isEqual(prevSortBy, sortBy)) return;
 
@@ -429,7 +385,6 @@ export class AgGridModel extends HoistModel {
                 )
             )
         ) {
-            togglingAbsSort = true;
             agApi.applyColumnState({defaultState: {sort: null, sortIndex: null}});
         }
 
@@ -447,12 +402,6 @@ export class AgGridModel extends HoistModel {
             defaultState: {sort: null, sortIndex: null}
         });
 
-        // Workaround needed for ag v27.
-        // https://github.com/xh/hoist-react/issues/2997
-        if (togglingAbsSort) {
-            agApi.redrawRows();
-        }
-
         this._prevSortBy = sortBy;
     }
 

package/cmp/dataview/DataViewModel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {RowClickedEvent, RowDoubleClickedEvent, RowHeightParams} from '@ag-grid-community/core';
+import {RowClickedEvent, RowDoubleClickedEvent, RowHeightParams} from '@xh/hoist/kit/ag-grid';
 import {
     ColumnRenderer,
     ColumnSpec,

package/cmp/grid/Grid.ts

@@ -4,7 +4,8 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {ColumnState as AgColumnState, GridApi} from '@ag-grid-community/core';
+import {GridApi, AgColumnState} from '@xh/hoist/kit/ag-grid';
+
 import composeRefs from '@seznam/compose-react-refs';
 import {agGrid, AgGrid} from '@xh/hoist/cmp/ag-grid';
 import {ColumnState, getTreeStyleClasses} from '@xh/hoist/cmp/grid';
@@ -94,11 +95,19 @@ export const [Grid, grid] = hoistCmp.withFactory<GridProps>({
     className: 'xh-grid',
 
     render({model, className, testId, ...props}, ref) {
-        const {store, treeMode, treeStyle, highlightRowOnClick, colChooserModel, filterModel} =
-                model,
+        const {
+                store,
+                treeMode,
+                treeStyle,
+                highlightRowOnClick,
+                colChooserModel,
+                filterModel,
+                enableFullWidthScroll
+            } = model,
             impl = useLocalModel(GridLocalModel),
             platformColChooser = XH.isMobileApp ? mobileColChooser : desktopColChooser,
-            maxDepth = impl.isHierarchical ? store.maxDepth : null;
+            maxDepth = impl.isHierarchical ? store.maxDepth : null,
+            container = enableFullWidthScroll ? vframe : frame;
 
         className = classNames(
             className,
@@ -109,9 +118,6 @@ export const [Grid, grid] = hoistCmp.withFactory<GridProps>({
             highlightRowOnClick ? 'xh-grid--highlight-row-on-click' : null
         );
 
-        const {enableFullWidthScroll} = model.experimental,
-            container = enableFullWidthScroll ? vframe : frame;
-
         return fragment(
             container({
                 className,
@@ -128,7 +134,7 @@ export const [Grid, grid] = hoistCmp.withFactory<GridProps>({
                 ],
                 testId,
                 onKeyDown: impl.onKeyDown,
-                ref: composeRefs(impl.viewRef, ref)
+                ref: composeRefs(impl.viewRef, model.viewRef, ref)
             }),
             colChooserModel ? platformColChooser({model: colChooserModel}) : null,
             filterModel ? gridFilterDialog({model: filterModel}) : null
@@ -193,13 +199,13 @@ export class GridLocalModel extends HoistModel {
             {clicksToEdit, selModel} = model;
 
         let ret: GridOptions = {
-            reactiveCustomComponents: true, // will be default in ag-grid v32
             animateRows: false,
             suppressColumnVirtualisation: !model.useVirtualColumns,
             getRowId: ({data}) => data.agId,
             defaultColDef: {
                 sortable: true,
                 resizable: true,
+                suppressHeaderContextMenu: true,
                 suppressHeaderMenuButton: true,
                 menuTabs: ['filterMenuTab']
             },
@@ -220,9 +226,6 @@ export class GridLocalModel extends HoistModel {
                 agColumnHeader: props => columnHeader({...props, gridModel: model}),
                 agColumnGroupHeader: props => columnGroupHeader({...props, gridModel: model})
             },
-            rowSelection: selModel.mode == 'disabled' ? undefined : selModel.mode,
-            suppressRowClickSelection: !selModel.isEnabled,
-            isRowSelectable: () => selModel.isEnabled,
             tooltipShowDelay: 0,
             getRowHeight: this.defaultGetRowHeight,
             getRowClass: ({data}) => (model.rowClassFn ? model.rowClassFn(data) : null),
@@ -255,8 +258,7 @@ export class GridLocalModel extends HoistModel {
             autoGroupColumnDef: {
                 suppressSizeToFit: true // Without this the auto group col will get shrunk when we size to fit
             },
-            autoSizePadding: 3, // tighten up cells for ag-Grid native autosizing.  Remove when Hoist autosizing no longer experimental,
-            editType: model.fullRowEditing ? 'fullRow' : undefined,
+            editType: model.fullRowEditing ? 'fullRow' : 'singleCell',
             singleClickEdit: clicksToEdit === 1,
             suppressClickEdit: clicksToEdit !== 1 && clicksToEdit !== 2,
             stopEditingWhenCellsLoseFocus: true,
@@ -266,6 +268,16 @@ export class GridLocalModel extends HoistModel {
             processUnpinnedColumns: () => []
         };
 
+        if (selModel.mode != 'disabled') {
+            ret.rowSelection = {
+                mode: selModel.mode == 'single' ? 'singleRow' : 'multiRow',
+                enableClickSelection: selModel.isEnabled,
+                isRowSelectable: () => selModel.isEnabled,
+                checkboxes: false,
+                headerCheckbox: false
+            };
+        }
+
         // Platform specific defaults
         if (XH.isMobileApp) {
             ret = {
@@ -277,7 +289,7 @@ export class GridLocalModel extends HoistModel {
             ret = {
                 ...ret,
                 allowContextMenuWithControlKey: true,
-                getContextMenuItems: this.getContextMenuItems
+                getContextMenuItems: this.getContextMenuItems as any
             };
         }
 
@@ -292,7 +304,7 @@ export class GridLocalModel extends HoistModel {
         }
 
         // Support for FullWidthScroll
-        if (model.experimental.enableFullWidthScroll) {
+        if (model.enableFullWidthScroll) {
             ret.suppressHorizontalScroll = true;
         }
 
@@ -307,12 +319,12 @@ export class GridLocalModel extends HoistModel {
     }
 
     getContextMenuItems = (params: GetContextMenuItemsParams) => {
-        const {model, agOptions} = this,
+        const {model} = this,
             {contextMenu} = model;
         if (!contextMenu || XH.isMobileApp || model.isEditing) return null;
 
         // Manipulate selection if needed.
-        if (!agOptions.suppressRowClickSelection) {
+        if (model.selModel.isEnabled) {
             const record = params.node?.data,
                 {selModel} = model;
 
@@ -431,8 +443,7 @@ export class GridLocalModel extends HoistModel {
         return (
             agOptions.getRowHeight &&
             !agOptions.rowHeight &&
-            !model.getVisibleLeafColumns().some(c => c.autoHeight) &&
-            model.experimental.useScrollOptimization !== false
+            !model.getVisibleLeafColumns().some(c => c.autoHeight)
         );
     }