@xh/hoist 56.1.0 → 56.3.0

package/CHANGELOG.md

@@ -1,12 +1,60 @@
 # Changelog
 
-## 56.1.0 - 2023-04-14
-* Add support for new memory management diagnostics provided by hoist-core
- (requires hoist-core 16.1.0 for full operation).
+## v56.3.0 - 2023-05-08
+
+### 🎁 New Features
+
+* Added support for new `sortOrder` argument to `XH.showBanner()`. A default sort order is applied
+  if unspecified, ensuring banners do not unexpectedly change order when refreshed.
+
+### ⚙️ Typescript API Adjustments
+
+* Improved the recommendation for the app `declare` statement within
+  our [TypeScript migration docs](https://github.com/xh/hoist-react/blob/develop/docs/upgrade-to-typescript.md#bootstrapts--service-declarations).
+    * See this [Toolbox commit](https://github.com/xh/toolbox/commit/8df642cf) for a small,
+      recommended app-level change to improve autocompletion and usage checks within IntelliJ.
+* Added generic support to `XH.message()` and `XH.prompt()` signatures with return type
+  of `Promise<T | boolean>`.
+* Moved declaration of optional `children` prop to base `HoistProps` interface - required for TSX
+  support.
+
+### ✨ Styles
+
+* Removed `--xh-banner-height` CSS var.
+    * Desktop banners are implemented via `Toolbar`, which correctly sets a min height.
+    * Mobile banners now specify `min-height: 40px` via the `.xh-banner` class.
+    * This change allows banners containing custom components to grow to fit their contents without
+      requiring app-level CSS overrides.
+* Added new `--xh-grid-filter-popover-[height|width]-px` CSS variables to support easier custom
+  sizing for grid column header filter popovers.
+
+### ⚙️ Technical
+
+* Updated internal config defaults to support latest AG Grid v29.3.4+ with use of
+  AG `suppressBrowserResizeObserver` config. Applications are encouraged to update to the latest AG
+  Grid dependencies to take advantage of ongoing performance updates.
+
+## v56.2.0 - 2023-04-28
+
+### 🎁 New Features
+
+* Added `DashContainerModel.margin` config to customize the width of the resize splitters
+  between widgets.
+
+### ⚙️ Technical
+
+* Improve scrolling performance for `Grid` and `DataView` via internal configuration updates.
+
+## v56.1.0 - 2023-04-14
+
+### 🎁 New Features
+
+* Display improved memory management diagnostics within Admin console Memory Monitor.
+    * New metrics require optional-but-recommended update to `hoist-core >= v16.1.0`.
 
 ### 🐞 Bug Fixes
-* Fixes bug with display/reporting of exceptions during app initialization sequence.
 
+* Fixes bug with display/reporting of exceptions during app initialization sequence.
 
 ## v56.0.0 - 2023-03-29
 
@@ -28,10 +76,12 @@
     * Add a dependency on `@ag-grid-community/styles` to import new dedicated styles package.
     * Imports of AG Grid CSS files within your app's `Bootstrap.ts` file will also need to be
       updated to import styles from their new location. The recommended imports are now:
+
 ```typescript
 import '@ag-grid-community/styles/ag-grid.css';
 import '@ag-grid-community/styles/ag-theme-balham.css';
 ```
+
 * New `xhActivityTrackingConfig` soft-configuration entry places new limits on the size of
   any `data` objects passed to `XH.track()` calls.
     * Any track requests with data objects exceeding this length will be persisted, but without the
@@ -65,20 +115,14 @@ import '@ag-grid-community/styles/ag-theme-balham.css';
 
 ## v55.4.0 - 2023-03-23
 
-### 🐞 Bug Fixes
-* Addresses `AgGrid` v28 regression whereby changing column visibility via state throws an
-  exception and doesn't
-  render the grid when column groups are set via the `groupId` property.
-
 ### 💥 Breaking Changes
-* Hoist now requires `AgGrid` v29.1.0 or higher - update your `AgGrid` dependency in your app's
-`package.json` file. See the [ag-Grid Changelog](https://www.ag-grid.com/changelog) for details.
-* `AgGrid` stylesheets are now imported from the new `@ag-grid-community/styles` module. Update
-  your app's `Bootstrap.ts` file to import `ag-grid.css` and `ag-theme-balham.css` from this
-  module, and include it as a dependency in your app's `package.json` file.
 
-### ⚙️ Technical
-* AgGrid `28.1.0 -> 29.1.0`
+* Requires AG Grid v29.0.0 or higher - see release notes for v56.0.0 above.
+
+### 🐞 Bug Fixes
+
+* Addresses `AgGrid` v28 regression whereby changing column visibility via state breaks grid
+  rendering when column groups are set via the `groupId` property.
 
 ## v55.3.2 - 2023-03-22
 
@@ -1019,7 +1063,7 @@ to use TypeScript for its own app-level code.
   with the select library component and touch devices.
 * Ensure `Column.autosizeBufferPx` is respected if provided.
 
-### ✨ Style
+### ✨ Styles
 
 * New `--xh-menu-item` CSS vars added, with tweaks to default desktop menu styling.
 * Highlight background color added to mobile menu items while pressed.
@@ -1143,7 +1187,7 @@ to use TypeScript for its own app-level code.
 * Triggering inline editing of text or select editor cells by typing characters will no longer lose
   the first character pressed.
 
-### ✨ Style
+### ✨ Styles
 
 * New `TreeStyle.COLORS` and `TreeStyle.COLORS_AND_BORDERS` tree grid styles have been added. Use
   the `--xh-grid-tree-group-color-level-*` CSS vars to customize colors as needed.
@@ -1185,7 +1229,7 @@ to use TypeScript for its own app-level code.
   `agOptions`.
 * Fixes an issue on iOS where `NumberInput` would incorrectly bring up a text keyboard.
 
-### ✨ Style
+### ✨ Styles
 
 * Reduced default Grid header and group row heights to minimize their use of vertical space,
   especially at larger sizing modes. As before, apps can override via the `AgGrid.HEADER_HEIGHTS`
@@ -1210,7 +1254,7 @@ to use TypeScript for its own app-level code.
 * The in-app changelog will no longer prompt the user with the "What's New" button if category-based
   filtering results in a version without any release notes.
 
-### ✨ Style
+### ✨ Styles
 
 * New CSS vars added to support easier customization of desktop Tab font/size/color. Tabs now
   respect standard `--xh-font-size` by default.
@@ -1232,7 +1276,7 @@ to use TypeScript for its own app-level code.
 * Mobile `Select` input now supports async `queryFn` prop for parity with desktop.
 * `TreeMapModel` now supports new `maxLabels` config for improved performance.
 
-### ✨ Style
+### ✨ Styles
 
 * Hoist's default font is now [Inter](https://rsms.me/inter/), shipped and bundled via the
   `inter-ui` npm package. Inter is a modern, open-source font that leverages optical sizing to
@@ -1293,7 +1337,7 @@ to use TypeScript for its own app-level code.
 
 * Fixed an issue preventing `FormField` labels from rendering if `fieldDefaults` was undefined.
 
-### ✨ Style
+### ✨ Styles
 
 * New `Badge.compact` prop sets size to half that of parent element when true (default false). The
   `position` prop has been removed in favor of customizing placement of the component.
@@ -1347,7 +1391,7 @@ to use TypeScript for its own app-level code.
       and
       `selectedIds`, respectively, in `StoreSelectionModel`
 
-### ✨ Style
+### ✨ Styles
 
 * Higher contrast on grid context menus for improved legibility.
 
@@ -1415,7 +1459,7 @@ to use TypeScript for its own app-level code.
   custom handling in a raw `AgGrid` component, see the example here:
   https://www.ag-grid.com/javascript-grid/row-selection/#example-selection-with-keyboard-arrow-keys
 
-### ✨ Style
+### ✨ Styles
 
 * The red and green color values applied in dark mode have been lightened for improved legibility.
 * The default `colorSpec` config for number formatters has changed to use new dedicated CSS classes
@@ -1471,7 +1515,7 @@ to use TypeScript for its own app-level code.
 * `withShortDebug` has been deprecated. Use `withDebug` instead, which has the identical behavior.
   This API simplification mirrors a recent change to `hoist-core`.
 
-### ✨ Style
+### ✨ Styles
 
 * If the first child of a `Placeholder` component is a Hoist icon, it will not automatically be
   styled to 4x size with reduced opacity. (See new Toolbox example under the "Other" tab.)
@@ -1640,7 +1684,7 @@ your dev-utils dependency for your project to build.
 * Improvements to exception serialization, especially for any raw javascript `Error` thrown by
   client-side code.
 
-### ✨ Style
+### ✨ Styles
 
 * Buttons nested inline within desktop input components (e.g. clear buttons) tweaked to avoid
   odd-looking background highlight on hover.
@@ -1993,7 +2037,7 @@ decorators, in favor of a simpler inheritance-based approach to defining models
 * Fix issue where grid row striping inadvertently disabled by default for non-tree grids.
 * Fix issue where grid empty text cleared on autosize.
 
-### ✨ Style
+### ✨ Styles
 
 * Default `Chart` themes reworked in both light and dark modes to better match overall Hoist theme.
 
@@ -2302,7 +2346,7 @@ below regarding related updates to `GridModel.columns` config processing.
     * `StoreFilterField.filterOptions` has been removed. Set `filterIncludesChildren` directly on
       the store instead.
 
-### ✨ Style
+### ✨ Styles
 
 * CSS variables for "intents" - most commonly used on buttons - have been reworked to use HSL color
   values and support several standard variations of lightness and transparency.
@@ -3651,7 +3695,7 @@ leverage the context for model support discussed above.
 * When checking for a possible expired session within `XH.handleException()`, prompt for app login
   only for Ajax requests made to relative URLs (not e.g. remote APIs accessed via CORS). #1189
 
-### ✨ Style
+### ✨ Styles
 
 * Panel splitter collapse button more visible in dark theme. CSS vars to customize further fixed.
 * The mobile app menu button has been moved to the right side of the top appBar, consistent with its
@@ -3908,7 +3952,7 @@ leverage the context for model support discussed above.
 * FetchService's fetch methods no longer support `acceptJson` parameter. Instead, pass an {"Accept":
   "application/json"} header using the `headers` parameter.
 
-### ✨ Style
+### ✨ Styles
 
 * Black point + grid colors adjusted in dark theme to better blend with overall blue-gray tint.
 * Mobile styles have been adjusted to increase the default font size and grid row height, in

package/admin/tabs/server/memory/MemoryMonitorModel.ts

@@ -87,7 +87,8 @@ export class MemoryMonitorModel extends HoistModel {
                         floor: 0,
                         top: '30%',
                         height: '70%',
-                        title: {text: 'Heap (mb)'}
+                        title: {text: 'Heap (mb)'},
+                        offset: 0
                     }
                 ],
                 tooltip: {outside: true, shared: true}
@@ -185,7 +186,7 @@ export class MemoryMonitorModel extends HoistModel {
     async dumpHeapAsync() {
         try {
             const appEnv = XH.getEnv('appEnvironment').toLowerCase(),
-                filename = await XH.prompt({
+                filename = await XH.prompt<string>({
                     title: 'Dump Heap',
                     icon: Icon.fileArchive(),
                     message: `Specify a filename for the heap dump (to be saved in ${this.heapDumpDir})`,

package/admin/tabs/server/websocket/WebSocketModel.ts

@@ -93,7 +93,7 @@ export class WebSocketModel extends HoistModel {
         const {selectedRecords} = this.gridModel;
         if (isEmpty(selectedRecords)) return;
 
-        const message = await XH.prompt({
+        const message = await XH.prompt<string>({
             title: 'Force suspend',
             icon: Icon.stopCircle(),
             confirmProps: {text: 'Force Suspend', icon: Icon.stopCircle(), intent: 'danger'},

package/appcontainer/AppContainerModel.ts

@@ -19,6 +19,7 @@ import {SizingModeModel} from './SizingModeModel';
 import {ViewportSizeModel} from './ViewportSizeModel';
 import {ThemeModel} from './ThemeModel';
 import {ToastSourceModel} from './ToastSourceModel';
+import {BannerModel} from './BannerModel';
 
 /**
  * Root object for Framework GUI State.
@@ -87,10 +88,11 @@ export class AppContainerModel extends HoistModel {
             buttonText = mobile ? version : `Update to ${version}`;
 
         XH.showBanner({
-            category: 'app-update',
+            category: 'xhAppUpdate',
             message,
             icon: Icon.rocket({size: 'lg'}),
             intent: 'warning',
+            sortOrder: BannerModel.BANNER_SORTS.APP_UPDATE,
             enableClose: false,
             actionButtonProps: {
                 icon: Icon.refresh(),

package/appcontainer/BannerModel.ts

@@ -18,36 +18,46 @@ export class BannerModel extends HoistModel {
     icon;
     message;
     intent;
+    sortOrder;
     className;
     enableClose;
     onClose;
     onClick;
     actionButtonProps;
-    props;
 
-    constructor({
-        category = 'default',
-        icon,
-        message,
-        intent = 'primary',
-        className,
-        enableClose = true,
-        onClose,
-        onClick,
-        actionButtonProps,
-        ...props
-    }: BannerSpec) {
+    /**
+     * Sort order for Hoist-provided banners.
+     */
+    static BANNER_SORTS = {
+        APP_UPDATE: -2,
+        ADMIN_ALERT: -1
+    };
+
+    constructor(spec: BannerSpec) {
         super();
 
+        const {
+            category = 'default',
+            icon,
+            message,
+            intent = 'primary',
+            sortOrder,
+            className,
+            enableClose = true,
+            onClose,
+            onClick,
+            actionButtonProps
+        } = spec;
+
         this.category = category;
         this.icon = icon;
         this.message = message;
         this.intent = intent;
+        this.sortOrder = sortOrder;
         this.className = className;
         this.enableClose = enableClose;
         this.onClose = onClose;
         this.onClick = onClick;
         this.actionButtonProps = actionButtonProps;
-        this.props = props;
     }
 }

package/appcontainer/BannerSourceModel.ts

@@ -6,7 +6,7 @@
  */
 import {XH, HoistModel, managed, BannerSpec} from '@xh/hoist/core';
 import {action, observable, makeObservable} from '@xh/hoist/mobx';
-import {find, reject} from 'lodash';
+import {find, reject, sortBy, without, last} from 'lodash';
 
 import {BannerModel} from './BannerModel';
 
@@ -22,17 +22,29 @@ export class BannerSourceModel extends HoistModel {
     @observable.ref
     bannerModels: BannerModel[] = [];
 
-    MAX_BANNERS = 4;
-
     constructor() {
         super();
         makeObservable(this);
     }
 
     @action
-    show(config: BannerSpec): BannerModel {
-        const ret = new BannerModel(config);
-        this.addModel(ret);
+    show(spec: BannerSpec): BannerModel {
+        let {bannerModels} = this,
+            ret = new BannerModel(spec);
+
+        // Removes banner from new banner's category if it exists.
+        const existing = find(bannerModels, {category: ret.category});
+        if (existing) {
+            bannerModels = without(bannerModels, existing);
+            XH.safeDestroy(existing);
+        }
+
+        // Place in requested pos, existing pos, or last
+        const maxSortOrder = last(bannerModels)?.sortOrder ?? 0;
+        ret.sortOrder = spec.sortOrder ?? existing?.sortOrder ?? maxSortOrder + 1;
+        bannerModels = sortBy([...bannerModels, ret], 'sortOrder');
+
+        this.bannerModels = bannerModels;
         return ret;
     }
 
@@ -43,24 +55,7 @@ export class BannerSourceModel extends HoistModel {
         this.bannerModels = reject(this.bannerModels, {category});
     }
 
-    //-----------------------------------
-    // Implementation
-    //------------------------------------
-    @action
-    addModel(model: BannerModel) {
-        // Remove existing banner for category
-        this.hide(model.category);
-
-        // Add new banner, removing old banners if limit exceeded
-        const models = [...this.bannerModels, model];
-        while (models.length > this.MAX_BANNERS) {
-            const bannerModel = models.shift();
-            XH.safeDestroy(bannerModel);
-        }
-        this.bannerModels = models;
-    }
-
-    getBanner(category: string): BannerModel {
+    private getBanner(category: string): BannerModel {
         return find(this.bannerModels, {category});
     }
 }

package/cmp/ag-grid/AgGrid.ts

@@ -35,13 +35,18 @@ export interface AgGridProps extends HoistProps<AgGridModel>, GridOptions, Layou
  * via the `model` prop to control additional Hoist customizations.
  *
  * This component complements and contrasts with the primary Hoist `Grid` class, which provides a
- * significantly more managed and opinionated wrapper around ag-Grid and a number of Hoist-specific
+ * significantly more managed and opinionated use of ag-Grid and a number of Hoist-specific
  * extensions and customizations. That fully managed component is expected to cover the majority of
  * use cases within Hoist apps and is recommended as the primary grid class within the toolkit.
  *
  * This wrapper is provided for advanced usages of grid that wish to leverage features of the
  * underlying component not yet supported by the Hoist layer - most notably pivoting - where the
  * managed option would conflict with or complicate access to those features.
+ *
+ * Note that this component uses the ag-Grid `getRowHeight` prop to provide the grid with row
+ * heights.  As of 4/2023, this may cause scrolling to be slow in large data sets, and
+ * applications may wish to set this prop to `null` and use either a fixed `rowWidth` property, or
+ * an explicit per-row setting instead. See GridModel for a more efficient, data aware approach.
  */
 export const [AgGrid, agGrid] = hoistCmp.withFactory<AgGridProps>({
     displayName: 'AgGrid',
@@ -79,6 +84,7 @@ export const [AgGrid, agGrid] = hoistCmp.withFactory<AgGridProps>({
             item: createElement(AgGridReact, {
                 // Default some ag-grid props, but allow overriding.
                 getRowHeight: impl.getRowHeight,
+                suppressBrowserResizeObserver: true,
                 // Pass others on directly.
                 ...agGridProps,
 
@@ -125,8 +131,10 @@ class AgGridLocalModel extends HoistModel {
     @lookup(AgGridModel) model: AgGridModel;
 
     get headerHeight() {
-        const {hideHeaders, sizingMode} = this.model;
-        return hideHeaders ? 0 : (AgGrid as any).getHeaderHeightForSizingMode(sizingMode);
+        const {hideHeaders, sizingMode} = this.model,
+            AgGridCmp = AgGrid as any;
+
+        return hideHeaders ? 0 : AgGridCmp.getHeaderHeightForSizingMode(sizingMode);
     }
 
     override onLinked() {
@@ -141,15 +149,20 @@ class AgGridLocalModel extends HoistModel {
         }
     }
 
+    getRowHeight = ({node}) => {
+        const {sizingMode} = this.model,
+            {groupDisplayType} = this.componentProps,
+            AgGridCmp = AgGrid as any;
+        return node.group && groupDisplayType === 'groupRows'
+            ? AgGridCmp.getGroupRowHeightForSizingMode(sizingMode)
+            : AgGridCmp.getRowHeightForSizingMode(sizingMode);
+    };
+
     noteGridReady = agParams => {
         this.model.handleGridReady(agParams);
         this.componentProps.onGridReady?.(agParams);
     };
 
-    getRowHeight = () => {
-        return (AgGrid as any).getRowHeightForSizingMode(this.model.sizingMode);
-    };
-
     override destroy() {
         this.model?.handleGridUnmount();
         super.destroy();

package/cmp/filter/FilterChooserModel.ts

@@ -60,7 +60,7 @@ export interface FilterChooserConfig {
     fieldSpecs?: Array<FilterChooserFieldSpecConfig | string>;
 
     /** Default properties to be assigned to all FilterChooserFieldSpecs created by this model. */
-    fieldSpecDefaults?: FilterChooserFieldSpecConfig;
+    fieldSpecDefaults?: Partial<FilterChooserFieldSpecConfig>;
 
     /**
      * Store or cube View that should actually be filtered as this model's value changes.
@@ -460,7 +460,7 @@ export class FilterChooserModel extends HoistModel {
     //--------------------------------
     parseFieldSpecs(
         specs: Array<FilterChooserFieldSpecConfig | string>,
-        fieldSpecDefaults: FilterChooserFieldSpecConfig
+        fieldSpecDefaults: Partial<FilterChooserFieldSpecConfig>
     ): Array<FilterChooserFieldSpec> {
         const {valueSource} = this;
 

package/cmp/form/FormModel.ts

@@ -79,7 +79,7 @@ export class FormModel extends HoistModel {
      *
      * See {@link getData} instead if you need to get or react to the values of *any/all* fields.
      */
-    get values(): Record<string, any> {
+    get values(): PlainObject {
         return this.valuesProxy;
     }
 

package/cmp/grid/Grid.ts

@@ -8,7 +8,6 @@ import composeRefs from '@seznam/compose-react-refs';
 import {agGrid, AgGrid} from '@xh/hoist/cmp/ag-grid';
 import {getTreeStyleClasses} from '@xh/hoist/cmp/grid';
 import {getAgGridMenuItems} from '@xh/hoist/cmp/grid/impl/MenuSupport';
-import {Column} from './columns/Column';
 import {div, fragment, frame} from '@xh/hoist/cmp/layout';
 import {
     hoistCmp,
@@ -17,7 +16,6 @@ import {
     LayoutProps,
     lookup,
     PlainObject,
-    SizingMode,
     useLocalModel,
     uses,
     XH
@@ -137,23 +135,9 @@ class GridLocalModel extends HoistModel {
     private model: GridModel;
     agOptions: GridOptions;
     viewRef = createRef<HTMLElement>();
-    private fixedRowHeight: number;
     private rowKeyNavSupport: RowKeyNavSupport;
     private prevRs: RecordSet;
 
-    getRowHeight(node) {
-        const {model, agOptions} = this,
-            {sizingMode, groupRowHeight} = model,
-            {groupDisplayType} = agOptions;
-
-        if (node?.group) {
-            return groupRowHeight ?? groupDisplayType === 'groupRows'
-                ? (AgGrid as any).getGroupRowHeightForSizingMode(sizingMode)
-                : (AgGrid as any).getRowHeightForSizingMode(sizingMode);
-        }
-        return this.fixedRowHeight;
-    }
-
     /** @returns true if any root-level records have children */
     @computed
     get isHierarchical(): boolean {
@@ -220,7 +204,7 @@ class GridLocalModel extends HoistModel {
             suppressRowClickSelection: !selModel.isEnabled,
             isRowSelectable: () => selModel.isEnabled,
             tooltipShowDelay: 0,
-            getRowHeight: ({node}) => this.getRowHeight(node),
+            getRowHeight: this.defaultGetRowHeight,
             getRowClass: ({data}) => (model.rowClassFn ? model.rowClassFn(data) : null),
             rowClassRules: model.rowClassRules,
             noRowsOverlayComponent: observer(() => div(this.emptyText)),
@@ -367,20 +351,78 @@ class GridLocalModel extends HoistModel {
         };
     }
 
+    //----------------------
+    // Row Height Management
+    //----------------------
+    @computed
+    get calculatedRowHeight() {
+        const {model} = this,
+            AgGridCmp = AgGrid as any;
+        return max([
+            AgGridCmp.getRowHeightForSizingMode(model.sizingMode),
+            maxBy(model.getVisibleLeafColumns(), 'rowHeight')?.rowHeight
+        ]);
+    }
+
+    @computed
+    get calculatedGroupRowHeight() {
+        const {sizingMode, groupRowHeight} = this.model,
+            {groupDisplayType} = this.agOptions,
+            AgGridCmp = AgGrid as any;
+        return groupRowHeight ?? groupDisplayType === 'groupRows'
+            ? AgGridCmp.getGroupRowHeightForSizingMode(sizingMode)
+            : AgGridCmp.getRowHeightForSizingMode(sizingMode);
+    }
+
+    defaultGetRowHeight = ({node}) => {
+        return node.group ? this.calculatedGroupRowHeight : this.calculatedRowHeight;
+    };
+
     rowHeightReaction() {
-        const {model} = this;
         return {
-            track: () => [model.getVisibleLeafColumns(), model.sizingMode],
-            run: ([visibleCols, sizingMode]: [Column[], SizingMode]) => {
-                this.fixedRowHeight = max([
-                    (AgGrid as any).getRowHeightForSizingMode(sizingMode),
-                    maxBy(visibleCols, 'rowHeight')?.rowHeight
-                ]);
+            track: () => [
+                this.useScrollOptimization,
+                this.calculatedRowHeight,
+                this.calculatedGroupRowHeight
+            ],
+            run: () => {
+                const {agApi} = this.model;
+                if (!agApi) return;
+                agApi.resetRowHeights();
+                this.applyScrollOptimization();
             },
-            fireImmediately: true
+            debounce: 1
         };
     }
 
+    @computed
+    get useScrollOptimization() {
+        // When true, we preemptively evaluate and assign functional row heights after data loading.
+        // This improves slow scrolling but means function not guaranteed to be re-called
+        // when node is rendered in viewport.
+        const {model, agOptions} = this;
+        return (
+            agOptions.getRowHeight &&
+            !agOptions.rowHeight &&
+            !model.getVisibleLeafColumns().some(c => c.autoHeight) &&
+            model.experimental.useScrollOptimization !== false
+        );
+    }
+
+    applyScrollOptimization() {
+        if (!this.useScrollOptimization) return;
+        const {agApi, agColumnApi} = this.model,
+            {getRowHeight} = this.agOptions,
+            params = {api: agApi, columnApi: agColumnApi, context: null} as any;
+
+        agApi.forEachNode(node => {
+            params.node = node;
+            params.data = node.data;
+            node.setRowHeight(getRowHeight(params));
+        });
+        agApi.onRowHeightChanged();
+    }
+
     columnsReaction() {
         const {model} = this;
         return {
@@ -627,6 +669,7 @@ class GridLocalModel extends HoistModel {
         model.noteAgExpandStateChange();
 
         this.prevRs = newRs;
+        this.applyScrollOptimization();
     }
 
     syncSelection() {

package/core/HoistComponent.ts

@@ -43,8 +43,10 @@ import {
 } from 'react';
 
 /**
- * Configuration for creating a Component.  May be specified either as a render function,
- * or an object containing a render function and associated metadata.
+ * Type representing props passed to a HoistComponent's render function.
+ *
+ * This type removes from its base type several props that are used by HoistComponent itself and
+ * not provided to the render function.
  */
 export type RenderPropsOf<P extends HoistProps> = P & {
     /** Pre-processed by HoistComponent internals into a mounted model.  Never passed to render. */
@@ -52,15 +54,12 @@ export type RenderPropsOf<P extends HoistProps> = P & {
 
     /** Pre-processed by HoistComponent internals and attached to model.  Never passed to render. */
     modelRef: never;
-
-    /**
-     *  React Children. Populated on props by React internally, before rendering.  Applications
-     *  will typically provide children to a component via JSX or the `item(s)` property passed to
-     *  an element factory.
-     */
-    children?: ReactNode;
 };
 
+/**
+ * Configuration for creating a Component.  May be specified either as a render function,
+ * or an object containing a render function and associated metadata.
+ */
 export type ComponentConfig<P extends HoistProps> =
     | ((props: RenderPropsOf<P>, ref?: ForwardedRef<any>) => ReactNode)
     | {