@xh/hoist 86.0.1 → 86.2.0

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # Changelog
 
+## 86.2.0 - 2026-06-25
+
+### 🎁 New Features
+
+* `CodeInput` / `JsonInput` now auto-format content for display via their configured `formatter`,
+  controlled by a new `autoFormat` prop. On editable inputs, content is tidied automatically on blur
+  (never mid-edit) - users get clean, consistently-formatted JSON without reaching for the format
+  button. For `readonly` inputs it defaults to true, so applications can bind directly to raw source
+  values and drop their pre-formatting logic, simplifying call sites substantially.
+* Grid column filter specs now support a `sortValue` config, letting the Values tab of the filter
+  dialog sort its entries the same way the underlying grid column sorts them. When not provided,
+  the column's own `sortValue` is used.
+* `GridModel.levelLabels` now accepts a partial array covering only the top levels of a tree or
+  grouped grid. The "Expand to..." menu and `ExpandToLevelButton` offer one entry per labelled
+  level, so deeper, unlabelled levels (e.g. system-managed) are no longer required and are omitted
+  as expand-to targets - previously a too-short array disabled the feature entirely.
+* Added a `lossless` option to `fmtQuantity` to compact values to millions / billions units only
+  when doing so loses no precision, rendering the full value otherwise (e.g. `7,100,100` stays
+  `7,100,100` rather than collapsing to `7.10m`).
+
+### 🐞 Bug Fixes
+
+* Fixed grid `NumberEditor` to allow starting an edit by typing `-`, `+`, or `.` (e.g. to enter a
+  negative or decimal value), while reliably rejecting other non-numeric keypresses.
+* `fmtNumber` now treats a `precision` of `null` as full, unrestricted precision rather than
+  `'auto'`, aligning a `NumberInput` with `precision: null` so its blurred display matches its
+  focused and committed (full-precision) value.
+* Fixed inline grid editing not ending when clicking empty grid space to the right of the last
+  column or below the last row - such clicks now commit the active edit.
+* Fixed `Icon.placeholder()` to render with the correct width.
+* `CheckboxButton` no longer leaks `HoistInputProps` into underlying HTML `<button>` element.
+* Fixed `Select` (and `SelectEditor`) dropdown menu sizing: windowed menus now auto-size to their
+  option labels instead of the control/cell width, and an explicit `menuWidth` is respected rather
+  than overridden by content auto-sizing.
+
+### ⚙️ Typescript API Adjustments
+
+* `GridFilterFieldSpec.renderer` is now typed as a pure value transform (`GridFilterRenderer`),
+  rather than a `ColumnRenderer`. This more accurately represents the existing run-time limitation
+  that a complex column renderer would throw.
+
+### ✨ Styles
+
+* Vertical (left/right) `TabContainer` switchers now render a modern rounded-pill treatment by
+  default, customizable via new `--xh-tab-switcher-vertical-*` CSS variables.
+
+## 86.1.0 - 2026-06-22
+
+### 🎁 New Features
+
+* Added a mobile `SegmentedControl` input - the mobile counterpart to the desktop component, with a
+  matching `options`-driven API for selecting a single value from a set of mutually exclusive
+  choices. Built on Hoist's mobile `Button` (no Blueprint dependency).
+    * The shared `SegmentedControlOption` option types now export from `@xh/hoist/cmp/input` rather
+      than the desktop `SegmentedControl` module; update any direct type imports.
+* Added a `leftIcon` prop to mobile `TextInput`.
+* `FilterChooser` and grid column filters on a timestamp (`date`) field now filter by calendar day,
+  comparing against full-day bounds for range and equality operators rather than midnight - e.g.
+  `> 2023-05-31` excludes the 31st and `= 2023-05-31` matches any time that day. Filter specs now
+  default a `date` source field to `fieldType: 'localDate'`; set `fieldType: 'date'` for exact
+  timestamps. Applications using workarounds to provide similar behavior may be able to unwind that
+  behavior and rely on Hoist default behavior.
+
+### 🐞 Bug Fixes
+
+* Fixed the "Is blank" / "Is not blank" grid column filters for `tags`-typed fields - empty tag
+  arrays now correctly match "Is blank", and such filters are edited on the Custom tab rather than
+  producing a phantom blank entry in the Values list.
+* Fixed an issue where `Grid` column headers could fall out of sync with body content during
+  horizontal scrolling when both `enableFullWidthScroll` and `useVirtualColumns` were enabled.
+* Updated `DynamicTabSwitcher` to properly apply `testId` passed down by `TabContainer`.
+* Ensure publication of `router5-plugin-browser` TS module augmentation.
+* Set an explicit `%` unit on the `flex-basis: 0` of `TabContainer`'s flex shorthand to ensure
+  that the `0` is not interpreted as a `0px` basis and that the container sizes as expected.
+    * ⚠️Apps that upgrade to `hoist-dev-utils v13.x` and use `flex: 1 1 0` or `flex-basis: 0` should
+      verify that their flex layouts continue to work as expected and add an explicit unit if
+      not (e.g. `flex: 1 1 0%` or `flex-basis: 0%`).
+
+### ⚙️ Technical
+
+* `JsonBlobService` and `HoistAuthModel` now accept an optional `CallContextLike` argument on all of
+  their public methods, allowing callers to nest their fetches within an existing trace.
+
+### ✨ Styles
+
+* Mobile `Button` now defaults to a more touch-friendly height (40px, up from 28px) and rounder
+  corners for buttons in body content. Toolbar buttons derive their height from the toolbar size so
+  a single token drives both, landing slightly taller than before (34px, up from 28px).
+    * `SegmentedControl` adopts the same standard height for a consistent control row.
+    * ⚠️ Mobile buttons outside toolbars are now taller - verify body / form / panel layouts that
+      pair tightly with button dimensions.
+* Mobile tab content (`TabContainer`) now takes the themed app background, so content reads
+  correctly in dark mode rather than showing through to Onsen's light default page background.
+* Applied the active theme's `color-scheme` onto `html` and added a `theme-color` meta tag matching
+  the active theme's app-bar color, so browser chrome and overscroll / safe-area regions might
+  better match the theme.
+
+### 📚 Libraries
+
+* @azure/msal-browser `5.13 → 5.14`
 
 ## 86.0.1 - 2026-06-16
 
@@ -14,6 +114,10 @@
   the page is hidden or unloaded, reacting to `XH.pageState` and issuing the flush via
   `fetch({keepalive: true})` (replacing the less reliable `beforeunload` + normal-fetch approach).
 
+### 📚 Libraries
+
+* @azure/msal-browser `5.11 → 5.13`
+* mobx `6.15 → 6.16`
 
 ## 86.0.0 - 2026-06-12
 

package/admin/AdminJsonDisplay.ts

@@ -0,0 +1,31 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp} from '@xh/hoist/core';
+import {jsonInput, JsonInputProps} from '@xh/hoist/desktop/cmp/input';
+import {fmtJson, timestampReplacer} from '@xh/hoist/format';
+
+/**
+ * Readonly `jsonInput` preconfigured for Admin Console stat / config displays - sized to fill its
+ * container, without line numbers or a fullscreen button, and rendering timestamp-suffixed fields
+ * as readable dates. Pass the data via `value` (any object) or `bind`, plus any additional
+ * `jsonInput` props (e.g. `enableSearch`) to extend or override the defaults.
+ */
+export const adminJsonDisplay = hoistCmp.factory<JsonInputProps>({
+    displayName: 'AdminJsonDisplay',
+    render(props) {
+        return jsonInput({
+            readonly: true,
+            flex: 1,
+            width: '100%',
+            height: '100%',
+            showFullscreenButton: false,
+            lineNumbers: false,
+            formatter: v => fmtJson(v, {replacer: timestampReplacer()}),
+            ...props
+        });
+    }
+});

package/admin/App.scss

@@ -6,19 +6,11 @@
  */
 
 .xh-admin-app {
+  // The admin console uses left side-tab rails throughout - give them a consistent minimum width.
+  // All other vertical-switcher styling is inherited from the framework default.
   .xh-tab-switcher--left,
   .xh-tab-switcher--right {
-    min-width: 160px;
-    background-color: var(--xh-grid-bg-odd);
-    border-right: var(--xh-border-solid);
-
-    .bp6-tab {
-      border-radius: 0 !important;
-    }
-
-    .xh-tab-switcher__tab {
-      line-height: 40px;
-    }
+    --xh-tab-switcher-vertical-min-width: 160px;
   }
 
   &__editor-dialog {

package/admin/jsonsearch/impl/JsonSearchImplModel.ts

@@ -6,7 +6,7 @@
  */
 
 import {GridConfig, GridModel} from '@xh/hoist/cmp/grid';
-import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
+import {HoistModel, managed, PlainObject, TaskObserver, XH} from '@xh/hoist/core';
 import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
 import {pluralize} from '@xh/hoist/utils/js';
 import {isEmpty, zipWith} from 'lodash';
@@ -32,7 +32,7 @@ export class JsonSearchImplModel extends HoistModel {
     @bindable path: string = '';
     @bindable readerContentType: 'document' | 'matches' = 'matches';
     @bindable pathFormat: 'XPath' | 'JSONPath' = 'XPath';
-    @bindable readerContent: string = '';
+    @bindable readerContent: string | PlainObject[] = '';
     @bindable matchingNodeCount: number = 0;
 
     get subjectName(): string {
@@ -137,7 +137,7 @@ export class JsonSearchImplModel extends HoistModel {
         const {json} = this.selectedRecord.data;
 
         if (this.readerContentType === 'document') {
-            this.readerContent = JSON.stringify(JSON.parse(json), null, 2);
+            this.readerContent = json;
             return;
         }
 
@@ -162,7 +162,7 @@ export class JsonSearchImplModel extends HoistModel {
                         value
                     };
                 });
-                this.readerContent = JSON.stringify(nodes, null, 2);
+                this.readerContent = nodes;
             });
     }
 

package/admin/tabs/cluster/instances/connpool/ConnPoolMonitorPanel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import {adminJsonDisplay} from '@xh/hoist/admin/AdminJsonDisplay';
 import {AppModel} from '@xh/hoist/admin/AppModel';
 import {ConnPoolMonitorModel} from '@xh/hoist/admin/tabs/cluster/instances/connpool/ConnPoolMonitorModel';
 import {chart} from '@xh/hoist/cmp/chart';
@@ -12,7 +13,6 @@ import {filler, hframe, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
 import {errorMessage} from '@xh/hoist/cmp/error';
-import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
@@ -74,7 +74,7 @@ const bbar = hoistCmp.factory<ConnPoolMonitorModel>({
 });
 
 const poolConfigPanel = hoistCmp.factory<ConnPoolMonitorModel>({
-    render({model}) {
+    render() {
         return panel({
             title: 'Pool Configuration',
             icon: Icon.info(),
@@ -84,15 +84,7 @@ const poolConfigPanel = hoistCmp.factory<ConnPoolMonitorModel>({
                 defaultSize: 450,
                 defaultCollapsed: true
             },
-            item: jsonInput({
-                readonly: true,
-                height: '100%',
-                width: '100%',
-                enableSearch: true,
-                showFullscreenButton: false,
-                lineNumbers: false,
-                value: JSON.stringify(model.poolConfiguration, null, 2)
-            })
+            item: adminJsonDisplay({enableSearch: true, bind: 'poolConfiguration'})
         });
     }
 });

package/admin/tabs/cluster/instances/services/DetailsPanel.ts

@@ -4,15 +4,14 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import {adminJsonDisplay} from '@xh/hoist/admin/AdminJsonDisplay';
 import {DetailsModel} from '@xh/hoist/admin/tabs/cluster/instances/services/DetailsModel';
 import {placeholder} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 import {errorMessage} from '@xh/hoist/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
-import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
 import {isEmpty} from 'lodash';
-import {fmtJson, timestampReplacer} from '@xh/hoist/format';
 
 export const detailsPanel = hoistCmp.factory({
     model: creates(DetailsModel),
@@ -50,16 +49,6 @@ const stats = hoistCmp.factory<DetailsModel>({
                       ? []
                       : [Icon.questionCircle(), 'This service does not report any admin stats.'])
               )
-            : panel(
-                  jsonInput({
-                      readonly: true,
-                      width: '100%',
-                      height: '100%',
-                      enableSearch: true,
-                      showFullscreenButton: false,
-                      lineNumbers: false,
-                      value: fmtJson(stats, {replacer: timestampReplacer()})
-                  })
-              );
+            : panel(adminJsonDisplay({enableSearch: true, bind: 'stats'}));
     }
 });

package/admin/tabs/cluster/objects/DetailPanel.ts

@@ -4,21 +4,20 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import {adminJsonDisplay} from '@xh/hoist/admin/AdminJsonDisplay';
 import {grid} from '@xh/hoist/cmp/grid';
 import {placeholder} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
-import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon';
 import {DetailModel} from './DetailModel';
 import './ClusterObjects.scss';
-import {fmtJson, timestampReplacer} from '@xh/hoist/format';
 
 export const detailPanel = hoistCmp.factory({
     model: creates(DetailModel),
 
     render({model}) {
-        const {instanceName, selectedAdminStats, objectName, objectType} = model;
+        const {instanceName, objectName, objectType} = model;
         if (!objectName) return placeholder(Icon.grip(), 'Select an object to view details...');
 
         return panel({
@@ -36,15 +35,7 @@ export const detailPanel = hoistCmp.factory({
                         defaultSize: '80%',
                         collapsible: false
                     },
-                    item: jsonInput({
-                        readonly: true,
-                        flex: 1,
-                        width: '100%',
-                        height: '100%',
-                        showFullscreenButton: false,
-                        lineNumbers: false,
-                        value: fmtJson(selectedAdminStats, {replacer: timestampReplacer()})
-                    })
+                    item: adminJsonDisplay({bind: 'selectedAdminStats'})
                 })
             ]
         });

package/admin/tabs/userData/roles/RoleModel.ts

@@ -12,12 +12,10 @@ import {fragment, p} from '@xh/hoist/cmp/layout';
 import {CallContext, HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {RecordActionSpec} from '@xh/hoist/data';
 import {actionCol, calcActionColWidth} from '@xh/hoist/desktop/cmp/grid';
-import {fmtDate} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {action, bindable, makeObservable, observable, runInAction} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
 import {compact, groupBy, mapValues} from 'lodash';
-import moment from 'moment/moment';
 import {RoleEditorModel} from './editor/RoleEditorModel';
 import {HoistRole, RoleModuleConfig} from './Types';
 
@@ -397,23 +395,7 @@ export class RoleModel extends HoistModel {
                 config.directoryGroupsSupported && 'effectiveDirectoryGroupNames',
                 'effectiveRoleNames',
                 'lastUpdatedBy',
-                {
-                    field: 'lastUpdated',
-                    example: 'YYYY-MM-DD',
-                    valueParser: (v, op) => {
-                        let ret = moment(v, ['YYYY-MM-DD', 'YYYYMMDD'], true);
-                        if (!ret.isValid()) return null;
-
-                        // Note special handling for '>' & '<=' queries.
-                        if (['>', '<='].includes(op)) {
-                            ret = moment(ret).endOf('day');
-                        }
-
-                        return ret.toDate();
-                    },
-                    valueRenderer: v => fmtDate(v),
-                    ops: ['>', '>=', '<', '<=']
-                }
+                'lastUpdated'
             ]),
             persistWith: {...RoleModel.PERSIST_WITH, path: 'mainFilterChooser'}
         });

package/appcontainer/RouterModel.ts

@@ -10,6 +10,8 @@ import {mergeDeep} from '@xh/hoist/utils/js';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {createRouter, Router, State} from 'router5';
 import browserPlugin from 'router5-plugin-browser';
+// Required so downstream consumers pick up Router TS augmentation (buildUrl, etc.).
+import 'router5-plugin-browser';
 
 /**
  * Top-level model for managing application routing in Hoist.

package/appcontainer/ThemeModel.ts

@@ -31,7 +31,14 @@ export class ThemeModel extends HoistModel {
         const classList = document.body.classList;
         classList.toggle('xh-dark', value);
         classList.toggle('bp6-dark', value);
+
+        // Set color-scheme on the document root (<html>) so browser chrome and overscroll / safe-area
+        // regions match the theme - the theme class only reaches <body>, leaving the root light.
+        // See https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+        document.documentElement.style.colorScheme = value ? 'dark' : 'light';
+
         this.darkTheme = value;
+        this.syncThemeColorMeta();
     }
 
     @action
@@ -64,4 +71,38 @@ export class ThemeModel extends HoistModel {
             }
         });
     }
+
+    /**
+     * Sync the `<meta name="theme-color">` tag to the active theme's app-bar color, creating it if
+     * needed. This tints browser chrome to match the app - e.g. Android Chrome's status bar and task
+     * switcher, and desktop installed PWAs. Hoist's theme is independent of the OS color scheme, so
+     * the tag's content must be updated on each theme change rather than relying on the static
+     * `media="(prefers-color-scheme)"` form. Note Safari 26+ ignores `theme-color`, instead deriving
+     * its chrome color from the page background (see the companion `color-scheme` handling above).
+     */
+    private syncThemeColorMeta() {
+        // Resolve --xh-appbar-bg (a chain of var() fallbacks) to a concrete color via a throwaway
+        // probe - reading computed `color` fully substitutes the var chain.
+        const probe = document.createElement('div');
+        probe.style.cssText = 'display: none; color: var(--xh-appbar-bg)';
+        document.body.appendChild(probe);
+        const color = window.getComputedStyle(probe).color;
+        probe.remove();
+
+        // Bail if the color failed to resolve (e.g. styles not yet applied) rather than write a
+        // bad value - the next theme change will sync it.
+        if (!color) return;
+
+        // Maintain our own tag, marked so we can find it again on subsequent theme changes. If an
+        // app has hand-authored any theme-color tag, defer to it entirely.
+        let meta = document.querySelector('meta[name=theme-color][data-xh-managed]');
+        if (!meta) {
+            if (document.querySelector('meta[name=theme-color]')) return;
+            meta = document.createElement('meta');
+            meta.setAttribute('name', 'theme-color');
+            meta.setAttribute('data-xh-managed', '');
+            document.head.appendChild(meta);
+        }
+        meta.setAttribute('content', color);
+    }
 }

package/appcontainer/login/LoginPanelModel.ts

@@ -34,8 +34,12 @@ export class LoginPanelModel extends HoistModel {
     // Debounce to defend against double-click fast enough to get through masking + button disable.
     @debounced(300)
     async submitAsync() {
-        const {username, password, loginTask, isValid} = this;
-        if (!isValid) return;
+        const {username, password, loginTask, isValid, loginInProgress} = this;
+        if (loginInProgress) return;
+        if (!isValid) {
+            this.warning = 'Please enter a username and password.';
+            return;
+        }
 
         try {
             this.loginInProgress = true;

package/build/types/admin/AdminJsonDisplay.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Readonly `jsonInput` preconfigured for Admin Console stat / config displays - sized to fill its
+ * container, without line numbers or a fullscreen button, and rendering timestamp-suffixed fields
+ * as readable dates. Pass the data via `value` (any object) or `bind`, plus any additional
+ * `jsonInput` props (e.g. `enableSearch`) to extend or override the defaults.
+ */
+export declare const adminJsonDisplay: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/desktop/cmp/input").CodeInputProps>;

package/build/types/admin/jsonsearch/impl/JsonSearchImplModel.d.ts

@@ -1,5 +1,5 @@
 import { GridConfig, GridModel } from '@xh/hoist/cmp/grid';
-import { HoistModel, TaskObserver } from '@xh/hoist/core';
+import { HoistModel, PlainObject, TaskObserver } from '@xh/hoist/core';
 /**
  * @internal
  */
@@ -16,7 +16,7 @@ export declare class JsonSearchImplModel extends HoistModel {
     path: string;
     readerContentType: 'document' | 'matches';
     pathFormat: 'XPath' | 'JSONPath';
-    readerContent: string;
+    readerContent: string | PlainObject[];
     matchingNodeCount: number;
     get subjectName(): string;
     get docSearchUrl(): string;

package/build/types/appcontainer/RouterModel.d.ts

@@ -1,5 +1,6 @@
 import { HoistModel } from '../core';
 import { Router, State } from 'router5';
+import 'router5-plugin-browser';
 /**
  * Top-level model for managing application routing in Hoist.
  *

package/build/types/appcontainer/ThemeModel.d.ts

@@ -10,4 +10,13 @@ export declare class ThemeModel extends HoistModel {
     setDarkTheme(value: boolean): void;
     setTheme(value: Theme, persist?: boolean): void;
     init(): void;
+    /**
+     * Sync the `<meta name="theme-color">` tag to the active theme's app-bar color, creating it if
+     * needed. This tints browser chrome to match the app - e.g. Android Chrome's status bar and task
+     * switcher, and desktop installed PWAs. Hoist's theme is independent of the OS color scheme, so
+     * the tag's content must be updated on each theme change rather than relying on the static
+     * `media="(prefers-color-scheme)"` form. Note Safari 26+ ignores `theme-color`, instead deriving
+     * its chrome color from the page background (see the companion `color-scheme` handling above).
+     */
+    private syncThemeColorMeta;
 }

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

@@ -3,6 +3,7 @@ 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 { type MouseEvent } from 'react';
 import './Grid.scss';
 import { GridModel } from './GridModel';
 export interface GridProps<M extends GridModel = GridModel> extends HoistProps<M>, LayoutProps, TestSupportProps {
@@ -41,6 +42,7 @@ export interface GridProps<M extends GridModel = GridModel> extends HoistProps<M
 export declare const Grid: import("react").FC<GridProps<GridModel>>, grid: import("@xh/hoist/core").ElementFactory<GridProps<GridModel>>;
 export declare class GridLocalModel extends HoistModel {
     xhImpl: boolean;
+    private static EMPTY_SPACE_SELECTOR;
     private model;
     agOptions: GridOptions;
     viewRef: import("react").RefObject<HTMLElement> & import("react").RefCallback<HTMLElement>;
@@ -55,7 +57,7 @@ export declare class GridLocalModel extends HoistModel {
     getColumnDefs(): Array<ColDef | ColGroupDef>;
     getContextMenuItems: (params: GetContextMenuItemsParams) => (string | import("ag-grid-community").MenuItemDef<any, any>)[];
     dataReaction(): {
-        track: () => (boolean | import("../../data").StoreRecord[] | RecordSet | import("@xh/hoist/core").VSide)[];
+        track: () => (boolean | import("@xh/hoist/core").VSide | import("../../data").StoreRecord[] | RecordSet)[];
         run: () => void;
     };
     selectionReaction(): {
@@ -63,7 +65,7 @@ export declare class GridLocalModel extends HoistModel {
         run: () => void;
     };
     sortReaction(): {
-        track: () => (import("@xh/hoist/cmp/grid").GridSorter[] | GridApi<any>)[];
+        track: () => (GridApi<any> | import("@xh/hoist/cmp/grid").GridSorter[])[];
         run: ([agApi, sortBy]: [any, any]) => void;
     };
     groupReaction(): {
@@ -83,7 +85,7 @@ export declare class GridLocalModel extends HoistModel {
     get useScrollOptimization(): boolean;
     applyScrollOptimization(): void;
     columnsReaction(): {
-        track: () => (import("@xh/hoist/cmp/grid").ColumnOrGroup[] | GridApi<any>)[];
+        track: () => (GridApi<any> | import("@xh/hoist/cmp/grid").ColumnOrGroup[])[];
         run: ([api]: [any]) => void;
     };
     columnStateReaction(): ReactionSpec<[GridApi, ColumnState[]]>;
@@ -129,6 +131,7 @@ export declare class GridLocalModel extends HoistModel {
     writeFilterState(filterState: any): void;
     processCellForClipboard: ({ value, node, column }: ProcessCellForExportParams) => any;
     navigateToNextCell: (agParams: any) => import("ag-grid-community").CellPosition;
+    onViewMouseDown: (evt: MouseEvent) => void;
     onCellMouseDown: (evt: any) => void;
     onKeyDown: (evt: any) => void;
     onRowClicked: (evt: any) => void;

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

@@ -155,6 +155,10 @@ export interface GridConfig {
      * expand/collapse options in the default context menu will be enhanced to allow users to
      * expand/collapse to a specific level. See {@link GroupingChooserModel.valueDisplayNames}
      * for a convenient getter that will satisfy this API when a GroupingChooser is in play.
+     *
+     * Labels are matched to levels top-down and need not cover the full depth of the grid - provide
+     * a partial array to label only the top levels (e.g. when deeper levels should not be
+     * expand-to targets). Deeper, unlabelled levels are omitted from the menu.
      */
     levelLabels?: Thunkable<string[]>;
     /**
@@ -501,8 +505,15 @@ export declare class GridModel extends HoistModel {
     expandToLevel(level: number): void;
     /**
      * Get the resolved level labels for the current state of the grid.
+     * An over-long array is truncated to the current `maxDepth`.
      */
     get resolvedLevelLabels(): string[];
+    /**
+     * True if the given `resolvedLevelLabels` index is the grid's current expand level - used to
+     * mark the active item in the "Expand to..." menu. The deepest labelled level counts as current
+     * whenever the grid is expanded to or beyond it.
+     */
+    isCurrentExpandLevel(idx: number): boolean;
     /**
      * Sort this grid.
      * This method is a no-op if provided any sorters without a corresponding column.

package/build/types/cmp/grid/filter/GridFilterFieldSpec.d.ts

@@ -1,17 +1,34 @@
-import { ColumnRenderer } from '@xh/hoist/cmp/grid';
 import { HoistInputProps } from '@xh/hoist/cmp/input';
 import { PlainObject } from '@xh/hoist/core';
 import { FieldFilterOperator } from '@xh/hoist/data';
 import { BaseFilterFieldSpec, BaseFilterFieldSpecConfig } from '@xh/hoist/data/filter/BaseFilterFieldSpec';
+import { ReactNode } from 'react';
 import { GridFilterModel } from './GridFilterModel';
+/**
+ * Produces the display content for an entry in the Values tab of a column filter. Must be a pure
+ * transform of the value - the values list carries no source record, and there is no column or
+ * grid context to reach for (unlike a Column's `renderer`, which runs against the source grid).
+ */
+export type GridFilterRenderer = (value: any) => ReactNode;
+/**
+ * Produces the value to sort by for an entry in the Values tab of a column filter. Must be a pure
+ * transform of the value - the values list carries no source record, and there is no column or
+ * grid context to reach for (unlike a Column's `sortValue`, which runs against the source grid).
+ */
+export type GridFilterSortValueFn = (value: any) => any;
 export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
     /** GridFilterModel instance owning this fieldSpec. */
     filterModel?: GridFilterModel;
     /**
-     * Function returning a formatted string for each value in this values filter display.
-     * If not provided, the Column's renderer will be used.
+     * Pure function producing the display content for each entry in the values filter display. If
+     * not provided, the Column's renderer is used where it can be applied to a bare value.
+     */
+    renderer?: GridFilterRenderer;
+    /**
+     * Pure function producing the value to sort each entry of the values filter display by. If not
+     * provided, the Column's sortValue is used where it can be applied to a bare value.
      */
-    renderer?: ColumnRenderer;
+    sortValue?: GridFilterSortValueFn;
     /**
      * Props to pass through to the HoistInput components used on the custom filter tab.
      * Note that the HoistInput component used is decided by fieldType.
@@ -26,12 +43,13 @@ export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
  */
 export declare class GridFilterFieldSpec extends BaseFilterFieldSpec {
     filterModel: GridFilterModel;
-    renderer: ColumnRenderer;
+    renderer: GridFilterRenderer;
+    sortValue: GridFilterSortValueFn;
     inputProps: PlainObject;
     defaultOp: FieldFilterOperator;
     /** Total number of unique values for this field in the source, regardless of other filters. */
     allValuesCount: number;
-    constructor({ filterModel, renderer, inputProps, defaultOp, ...rest }: GridFilterFieldSpecConfig);
+    constructor({ filterModel, renderer, sortValue, inputProps, defaultOp, ...rest }: GridFilterFieldSpecConfig);
     getUniqueValue(value: unknown): unknown;
     loadValuesFromSource(): void;
     private cleanFilter;