@xh/hoist 75.0.0-SNAPSHOT.1752604774043 → 75.0.0-SNAPSHOT.1752777363110

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 
-## 75.0-SNAPSHOT - NOT YET RELEASED
+## 75.0-SNAPSHOT - Unreleased
+
+### 🎁 New Features
+
+* Added new `GroupingChooserModel.sortDimensions` config - can be set to false to respect the order
+  in which dimensions are provided to the model.
 
 ### 🐞 Bug Fixes
 
@@ -9,6 +14,12 @@
 * DashCanvas: style with `position: relative;` to ensure that the empty state overlay is positioned
   within the canvas, not the next parent container up that has `position: relative;`.
 
+* `useContextModel` is now reactive to a change of an (observable) resolved model when it is set.
+  Previously this value was cached on first render.
+
+* Fixes to framework components that bind to grids (e.g. `ColChooserButton`, `ColAutosizeButton`,
+  `GridFindField`) to rebind to a new observable GridModel available via context.
+
 ## v74.1.2 - 2025-07-03
 
 ### 🐞 Bug Fixes
@@ -20,9 +31,9 @@
 ### 🎁 New Features
 
 * Further refinements to the `GroupingChooser` desktop UI.
-  * Added new props `favoritesSide` and `favoritesTitle`.
-  * Deprecated `popoverTitle` prop - use `editorTitle` instead.
-  * Moved "Save as Favorite" button to a new compact toolbar within the popover.
+    * Added new props `favoritesSide` and `favoritesTitle`.
+    * Deprecated `popoverTitle` prop - use `editorTitle` instead.
+    * Moved "Save as Favorite" button to a new compact toolbar within the popover.
 
 ### 🐞 Bug Fixes
 

package/admin/columns/Tracking.ts

@@ -130,6 +130,7 @@ export const deviceIcon: ColumnSpec = {
     chooserGroup: 'Client App / Browser',
     headerName: Icon.desktop(),
     headerTooltip: 'Device',
+    exportName: 'Device',
     tooltip: true,
     resizable: false,
     align: 'center',
@@ -291,6 +292,7 @@ export const severityIcon: ColumnSpec = {
     field: severity.field,
     headerName: Icon.info(),
     headerTooltip: 'Severity',
+    exportName: 'Severity',
     tooltip: true,
     resizable: false,
     align: 'center',

package/admin/tabs/activity/tracking/ActivityTrackingPanel.ts

@@ -146,7 +146,6 @@ const filterBar = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
 });
 
 const aggregateView = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
-    const {gridModel} = model;
     return panel({
         collapsedTitle: 'Aggregate Activity',
         collapsedIcon: Icon.users(),
@@ -161,8 +160,8 @@ const aggregateView = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
             items: [
                 groupingChooser({flex: 10, maxWidth: 300}),
                 filler(),
-                colChooserButton({gridModel}),
-                exportButton({gridModel})
+                colChooserButton(),
+                exportButton()
             ]
         }),
         items: [

package/admin/tabs/activity/tracking/detail/ActivityDetailView.ts

@@ -36,16 +36,15 @@ export const activityDetailView = hoistCmp.factory({
 });
 
 const tbar = hoistCmp.factory<ActivityDetailModel>(({model}) => {
-    const {gridModel} = model;
     return toolbar({
         compact: true,
         items: [
             filler(),
-            gridCountLabel({gridModel, unit: 'entry'}),
+            gridCountLabel({unit: 'entry'}),
             '-',
-            gridFindField({gridModel, key: gridModel.xhId, width: 250}),
-            colChooserButton({gridModel}),
-            exportButton({gridModel})
+            gridFindField({width: 250}),
+            colChooserButton(),
+            exportButton()
         ]
     });
 });

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

@@ -275,8 +275,6 @@ export declare class GridModel extends HoistModel {
     filterTask: TaskObserver;
     /** Tracks execution of autosize operations. */
     autosizeTask: TaskObserver;
-    /** @internal - used internally by any GridFindField that is bound to this GridModel. */
-    xhFindQuery: string;
     constructor(config: GridConfig);
     /**
      * Restore the column, sorting, and grouping configs as specified by the application at

package/build/types/cmp/grouping/GroupingChooserModel.d.ts

@@ -1,29 +1,34 @@
-import { HoistModel, PersistOptions } from '@xh/hoist/core';
+import { HoistModel, PersistOptions, SelectOption } from '@xh/hoist/core';
 export interface GroupingChooserConfig {
+    /** True to accept an empty list as a valid value. */
+    allowEmpty?: boolean;
+    /**
+     * False (default) waits for the user to dismiss the popover before updating the
+     * external/observable value.
+     */
+    commitOnChange?: boolean;
     /**
      * Dimensions available for selection. When using GroupingChooser to create Cube queries,
      * it is recommended to pass the `dimensions` from the related cube (or a subset thereof).
      * Note that {@link CubeField} meets the `DimensionSpec` interface.
      */
     dimensions?: (DimensionSpec | string)[];
-    /** Initial value as an array of dimension names, or a function to produce such an array. */
-    initialValue?: string[] | (() => string[]);
     /**
      * Initial favorites as an array of dim name arrays, or a function to produce such an array.
      * Ignored if `persistWith.persistFavorites: false`.
      */
     initialFavorites?: string[][] | (() => string[][]);
-    /** Options governing persistence. */
-    persistWith?: GroupingChooserPersistOptions;
-    /** True to accept an empty list as a valid value. */
-    allowEmpty?: boolean;
+    /** Initial value as an array of dimension names, or a function to produce such an array. */
+    initialValue?: string[] | (() => string[]);
     /** Maximum number of dimensions allowed in a single grouping. */
     maxDepth?: number;
+    /** Options governing persistence. */
+    persistWith?: GroupingChooserPersistOptions;
     /**
-     * False (default) waits for the user to dismiss the popover before updating the
-     * external/observable value.
+     * True (default) to auto-sort dimensions by label. Set to false to show them in the order
+     * provided in the `dimensions` config.
      */
-    commitOnChange?: boolean;
+    sortDimensions?: boolean;
 }
 /**
  * Metadata for dimensions that are available for selection via a GroupingChooser control.
@@ -45,9 +50,10 @@ export declare class GroupingChooserModel extends HoistModel {
     value: string[];
     favorites: string[][];
     allowEmpty: boolean;
-    maxDepth: number;
     commitOnChange: boolean;
+    maxDepth: number;
     persistFavorites: boolean;
+    sortDimensions: boolean;
     pendingValue: string[];
     editorIsOpen: boolean;
     popoverRef: import("react").RefObject<HTMLElement> & import("react").RefCallback<HTMLElement>;
@@ -58,11 +64,13 @@ export declare class GroupingChooserModel extends HoistModel {
     get isValid(): boolean;
     get isAddEnabled(): boolean;
     get isAddFavoriteEnabled(): boolean;
-    constructor({ dimensions, initialValue, initialFavorites, persistWith, allowEmpty, maxDepth, commitOnChange }: GroupingChooserConfig);
+    constructor({ allowEmpty, commitOnChange, dimensions, initialFavorites, initialValue, maxDepth, persistWith, sortDimensions }: GroupingChooserConfig);
     setDimensions(dimensions: Array<DimensionSpec | string>): void;
     setValue(value: string[]): void;
     toggleEditor(): void;
     closeEditor(): void;
+    /** Transform dimension names into SelectOptions, with displayName and optional sort. */
+    getDimSelectOpts(dims?: string[]): SelectOption[];
     addPendingDim(dimName: string): void;
     replacePendingDimAtIdx(dimName: string, idx: number): void;
     removePendingDimAtIdx(idx: number): void;

package/build/types/desktop/cmp/grid/find/impl/GridFindFieldImplModel.d.ts

@@ -1,4 +1,3 @@
-import { GridModel } from '@xh/hoist/cmp/grid';
 import { HoistModel } from '@xh/hoist/core';
 import { TextInputModel } from '@xh/hoist/desktop/cmp/input';
 /**
@@ -6,7 +5,7 @@ import { TextInputModel } from '@xh/hoist/desktop/cmp/input';
  */
 export declare class GridFindFieldImplModel extends HoistModel {
     xhImpl: boolean;
-    gridModel: GridModel;
+    query: string;
     get matchMode(): string;
     get queryBuffer(): number;
     get includeFields(): string[];
@@ -20,8 +19,7 @@ export declare class GridFindFieldImplModel extends HoistModel {
     get hasFocus(): boolean;
     get hasQuery(): boolean;
     get hasResults(): boolean;
-    get query(): string;
-    setQuery(v: any): void;
+    get gridModel(): any;
     constructor();
     onLinked(): void;
     selectPrev(): void;

package/cmp/grid/GridModel.ts

@@ -467,9 +467,6 @@ export class GridModel extends HoistModel {
     /** Tracks execution of autosize operations. */
     @managed autosizeTask = TaskObserver.trackAll();
 
-    /** @internal - used internally by any GridFindField that is bound to this GridModel. */
-    @bindable xhFindQuery: string = null;
-
     constructor(config: GridConfig) {
         super();
         makeObservable(this);

package/cmp/grouping/GroupingChooserModel.ts

@@ -5,14 +5,39 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
-import {HoistModel, PersistableState, PersistenceProvider, PersistOptions} from '@xh/hoist/core';
+import {
+    HoistModel,
+    PersistableState,
+    PersistenceProvider,
+    PersistOptions,
+    SelectOption
+} from '@xh/hoist/core';
 import {genDisplayName} from '@xh/hoist/data';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {executeIfFunction, throwIf} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {difference, isArray, isEmpty, isEqual, isObject, isString, keys, sortBy} from 'lodash';
+import {
+    compact,
+    difference,
+    isArray,
+    isEmpty,
+    isEqual,
+    isObject,
+    isString,
+    keys,
+    sortBy
+} from 'lodash';
 
 export interface GroupingChooserConfig {
+    /** True to accept an empty list as a valid value. */
+    allowEmpty?: boolean;
+
+    /**
+     * False (default) waits for the user to dismiss the popover before updating the
+     * external/observable value.
+     */
+    commitOnChange?: boolean;
+
     /**
      * Dimensions available for selection. When using GroupingChooser to create Cube queries,
      * it is recommended to pass the `dimensions` from the related cube (or a subset thereof).
@@ -20,29 +45,26 @@ export interface GroupingChooserConfig {
      */
     dimensions?: (DimensionSpec | string)[];
 
-    /** Initial value as an array of dimension names, or a function to produce such an array. */
-    initialValue?: string[] | (() => string[]);
-
     /**
      * Initial favorites as an array of dim name arrays, or a function to produce such an array.
      * Ignored if `persistWith.persistFavorites: false`.
      */
     initialFavorites?: string[][] | (() => string[][]);
 
-    /** Options governing persistence. */
-    persistWith?: GroupingChooserPersistOptions;
-
-    /** True to accept an empty list as a valid value. */
-    allowEmpty?: boolean;
+    /** Initial value as an array of dimension names, or a function to produce such an array. */
+    initialValue?: string[] | (() => string[]);
 
     /** Maximum number of dimensions allowed in a single grouping. */
     maxDepth?: number;
 
+    /** Options governing persistence. */
+    persistWith?: GroupingChooserPersistOptions;
+
     /**
-     * False (default) waits for the user to dismiss the popover before updating the
-     * external/observable value.
+     * True (default) to auto-sort dimensions by label. Set to false to show them in the order
+     * provided in the `dimensions` config.
      */
-    commitOnChange?: boolean;
+    sortDimensions?: boolean;
 }
 
 /**
@@ -70,9 +92,10 @@ export class GroupingChooserModel extends HoistModel {
     @observable.ref favorites: string[][] = [];
 
     allowEmpty: boolean;
-    maxDepth: number;
     commitOnChange: boolean;
+    maxDepth: number;
     persistFavorites: boolean = false;
+    sortDimensions: boolean;
 
     // Implementation fields for Control
     @observable.ref pendingValue: string[] = [];
@@ -117,20 +140,22 @@ export class GroupingChooserModel extends HoistModel {
     }
 
     constructor({
+        allowEmpty = false,
+        commitOnChange = false,
         dimensions,
-        initialValue = [],
         initialFavorites = [],
-        persistWith = null,
-        allowEmpty = false,
+        initialValue = [],
         maxDepth = null,
-        commitOnChange = false
+        persistWith = null,
+        sortDimensions = true
     }: GroupingChooserConfig) {
         super();
         makeObservable(this);
 
         this.allowEmpty = allowEmpty;
-        this.maxDepth = maxDepth;
         this.commitOnChange = commitOnChange;
+        this.maxDepth = maxDepth;
+        this.sortDimensions = sortDimensions;
 
         this.setDimensions(dimensions);
 
@@ -187,6 +212,15 @@ export class GroupingChooserModel extends HoistModel {
         this.editorIsOpen = false;
     }
 
+    /** Transform dimension names into SelectOptions, with displayName and optional sort. */
+    getDimSelectOpts(dims: string[] = this.availableDims): SelectOption[] {
+        const ret = compact(dims).map(dimName => ({
+            value: dimName,
+            label: this.getDimDisplayName(dimName)
+        }));
+        return this.sortDimensions ? sortBy(ret, 'label') : ret;
+    }
+
     //-------------------------
     // Value handling
     //-------------------------

package/core/RefreshContextView.ts

@@ -30,7 +30,7 @@ export const [RefreshContextView, refreshContextView] = hoistCmp.withFactory({
                 parent.register(model);
                 return () => parent.unregister(model);
             }
-        });
+        }, [model, parent]);
 
         return children;
     }

package/core/model/Hooks.ts

@@ -27,9 +27,8 @@ import {each, isUndefined} from 'lodash';
  * @returns model or null if no matching model found.
  */
 export function useContextModel<T extends HoistModel>(selector: ModelSelector<T> = '*'): T {
-    const modelLookup = useContext(ModelLookupContext),
-        [ret] = useState(() => modelLookup?.lookupModel(selector) ?? null);
-    return ret;
+    const modelLookup = useContext(ModelLookupContext);
+    return modelLookup?.lookupModel(selector);
 }
 
 /**

package/desktop/cmp/grid/find/impl/GridFindFieldImplModel.ts

@@ -7,8 +7,8 @@
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, XH} from '@xh/hoist/core';
 import {TextInputModel} from '@xh/hoist/desktop/cmp/input';
-import {action, comparer, computed, makeObservable, observable} from '@xh/hoist/mobx';
-import {errorIf, stripTags, throwIf, withDefault} from '@xh/hoist/utils/js';
+import {action, bindable, comparer, computed, makeObservable, observable} from '@xh/hoist/mobx';
+import {stripTags, withDefault} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
 import {
     escapeRegExp,
@@ -29,7 +29,8 @@ import {
 export class GridFindFieldImplModel extends HoistModel {
     override xhImpl = true;
 
-    gridModel: GridModel;
+    @bindable
+    query: string = null;
 
     get matchMode(): string {
         return this.componentProps.matchMode ?? 'startWord';
@@ -79,35 +80,26 @@ export class GridFindFieldImplModel extends HoistModel {
         return !isNil(this.results) && !isEmpty(this.results);
     }
 
+    @computed
+    get gridModel() {
+        const ret = withDefault(this.componentProps.gridModel, this.lookupModel(GridModel));
+        if (!ret) {
+            this.logError("No GridModel available.  Provide via a 'gridModel' prop, or context.");
+        } else if (!ret.selModel?.isEnabled) {
+            this.logError('GridFindField must be bound to GridModel with selection enabled.');
+        }
+        return ret;
+    }
+
     //------------------------------------------------------------------
     // Trampoline value to grid
     //------------------------------------------------------------------
-    get query() {
-        return this.gridModel.xhFindQuery;
-    }
-
-    @action
-    setQuery(v) {
-        this.gridModel.xhFindQuery = v;
-    }
-
     constructor() {
         super();
         makeObservable(this);
     }
 
     override onLinked() {
-        const gridModel = (this.gridModel = withDefault(
-            this.componentProps.gridModel,
-            this.lookupModel(GridModel)
-        ));
-        errorIf(
-            !gridModel?.selModel?.isEnabled,
-            'GridFindField must be bound to GridModel with an enabled StoreSelectionModel.'
-        );
-
-        throwIf(!gridModel, "Must specify 'gridModel' in GridFindField.");
-
         this.addReaction({
             track: () => this.query,
             run: () => this.updateResults(true),
@@ -116,10 +108,10 @@ export class GridFindFieldImplModel extends HoistModel {
 
         this.addReaction({
             track: () => [
-                gridModel.store.records,
-                gridModel.columns,
-                gridModel.sortBy,
-                gridModel.groupBy
+                this.gridModel?.store.records,
+                this.gridModel?.columns,
+                this.gridModel?.sortBy,
+                this.gridModel?.groupBy
             ],
             run: () => {
                 this._records = null;
@@ -184,7 +176,7 @@ export class GridFindFieldImplModel extends HoistModel {
 
         // Auto-select first matching result
         if (autoSelect && this.hasResults && !isFinite(this.selectedIdx)) {
-            gridModel.selectAsync(this.results[0]);
+            gridModel?.selectAsync(this.results[0]);
         }
     }
 

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -29,7 +29,7 @@ import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautif
 import {apiDeprecated, elemWithin, getTestId} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {compact, isEmpty, isNil, isUndefined, sortBy} from 'lodash';
+import {isEmpty, isNil, isUndefined} from 'lodash';
 import './GroupingChooser.scss';
 import {ReactNode} from 'react';
 
@@ -264,7 +264,7 @@ const dimensionList = hoistCmp.factory<GroupingChooserModel>({
 const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
     render({model, dimension, idx}) {
         // The options for this select include its current value
-        const options = getDimOptions([...model.availableDims, dimension], model);
+        const options = model.getDimSelectOpts([...model.availableDims, dimension]);
 
         return draggable({
             key: dimension,
@@ -346,7 +346,8 @@ const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
 const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
     render({model}) {
         if (!model.isAddEnabled) return null;
-        const options = getDimOptions(model.availableDims, model);
+
+        const options = model.getDimSelectOpts();
         return div({
             className: 'xh-grouping-chooser__add-control',
             items: [
@@ -372,9 +373,8 @@ const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
 });
 
 /**
- * Extract integer values from CSS transform string.
- * Works for both `translate` and `translate3d`
- * e.g. `translate3d(250px, 150px, 0px)` is equivalent to [250, 150, 0]
+ * Extract integer values from CSS transform string. Works for both `translate` and `translate3d`.
+ * e.g. `translate3d(250px, 150px, 0px) -> [250, 150, 0]`
  */
 function parseTransform(transformStr: string): number[] {
     return transformStr
@@ -383,16 +383,6 @@ function parseTransform(transformStr: string): number[] {
         ?.map(it => parseInt(it));
 }
 
-/**
- * Convert a list of dim names into select options
- */
-function getDimOptions(dims, model) {
-    const ret = compact(dims).map(dimName => {
-        return {value: dimName, label: model.getDimDisplayName(dimName)};
-    });
-    return sortBy(ret, 'label');
-}
-
 //------------------
 // Favorites
 //------------------

package/mobile/cmp/grouping/GroupingChooser.ts

@@ -15,7 +15,7 @@ import '@xh/hoist/mobile/register';
 import {dialogPanel, panel} from '@xh/hoist/mobile/cmp/panel';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {compact, isEmpty, sortBy} from 'lodash';
+import {isEmpty} from 'lodash';
 
 import './GroupingChooser.scss';
 
@@ -134,7 +134,7 @@ const dimensionList = hoistCmp.factory<GroupingChooserModel>({
 const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
     render({model, dimension, idx}) {
         // The options for this select include its current value
-        const options = getDimOptions([...model.availableDims, dimension], model);
+        const options = model.getDimSelectOpts([...model.availableDims, dimension]);
 
         return draggable({
             key: dimension,
@@ -182,7 +182,8 @@ const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
 const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
     render({model}) {
         if (!model.isAddEnabled) return null;
-        const options = getDimOptions(model.availableDims, model);
+
+        const options = model.getDimSelectOpts();
         return div({
             className: 'xh-grouping-chooser__add-control',
             items: [
@@ -203,16 +204,6 @@ const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
     }
 });
 
-/**
- * Convert a list of dim names into select options
- */
-function getDimOptions(dims, model) {
-    const ret = compact(dims).map(dimName => {
-        return {value: dimName, label: model.getDimDisplayName(dimName)};
-    });
-    return sortBy(ret, 'label');
-}
-
 //------------------
 // Favorites
 //------------------

package/package.json

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