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

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## 75.0-SNAPSHOT - NOT YET RELEASED
+## 75.0-SNAPSHOT - Unreleased
 
 ### 🐞 Bug Fixes
 
@@ -9,6 +9,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

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/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/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/package.json

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