@xh/hoist 77.0.0-SNAPSHOT.1759414848931 → 77.0.0-SNAPSHOT.1759849276739

package/CHANGELOG.md

@@ -2,13 +2,6 @@
 
 ## 77.0.0-SNAPSHOT - unreleased
 
-### 🎁 New Features
-
-* `DashCanvasView` and `DashContainerView` components now have a public `@bindable` `titleDetails`
-  property on their models to support displaying additional information in the title bar of these
-  components.  `titleDetails` is not persisted, and is expected to be set programmatically by the
-  application as needed.
-
 ## 76.0.0 - 2025-09-26
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - AG Grid update, Hoist React upgrade)

package/build/types/core/model/HoistModel.d.ts

@@ -9,7 +9,7 @@ import { Class } from 'type-fest';
  *
  * The most common use of `HoistModel` is to support Hoist components. Components can be configured
  * to create or lookup an instance of an appropriate model subclass using the `model` config passed
- * to {@link hoistComponent.factory}. Hoist will automatically pass the resolved model instance as a
+ * to {@link hoistCmp.factory}. Hoist will automatically pass the resolved model instance as a
  * prop to the component's `render()` function, where the model's properties can be read/rendered
  * and any imperative APIs wired to buttons, callbacks, and other handlers.
  *

package/build/types/desktop/cmp/dash/DashViewModel.d.ts

@@ -1,6 +1,5 @@
 import { HoistModel, MenuItemLike, PlainObject, RefreshMode, RenderMode } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
-import { IReactionDisposer } from 'mobx/dist/internal';
 import { ReactElement } from 'react';
 import { DashViewSpec } from './DashViewSpec';
 export type DashViewState = PlainObject;
@@ -24,16 +23,8 @@ export declare class DashViewModel<T extends DashViewSpec = DashViewSpec> extend
      * constructing these models - no need to specify manually.
      */
     containerModel: any;
-    /** Title with which to initialize the view.  Value is persisted. */
+    /** Title with which to initialize the view. */
     title: string;
-    /**
-     * Additional info that will be displayed after the title.
-     * Applications can bind to this property to provide dynamic title details.
-     * Value is not persisted.
-     **/
-    titleDetails: string;
-    get fullTitle(): string;
-    fullTitleReaction: IReactionDisposer;
     /** Icon with which to initialize the view. */
     icon: ReactElement;
     /** State with which to initialize the view. */

package/core/model/HoistModel.ts

@@ -20,7 +20,7 @@ import {Class} from 'type-fest';
  *
  * The most common use of `HoistModel` is to support Hoist components. Components can be configured
  * to create or lookup an instance of an appropriate model subclass using the `model` config passed
- * to {@link hoistComponent.factory}. Hoist will automatically pass the resolved model instance as a
+ * to {@link hoistCmp.factory}. Hoist will automatically pass the resolved model instance as a
  * prop to the component's `render()` function, where the model's properties can be read/rendered
  * and any imperative APIs wired to buttons, callbacks, and other handlers.
  *

package/desktop/cmp/dash/DashViewModel.ts

@@ -16,7 +16,6 @@ import {
 import '@xh/hoist/desktop/register';
 import {makeObservable, bindable} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
-import {IReactionDisposer} from 'mobx/dist/internal';
 import {ReactElement} from 'react';
 import {DashViewSpec} from './DashViewSpec';
 
@@ -45,22 +44,9 @@ export class DashViewModel<T extends DashViewSpec = DashViewSpec> extends HoistM
      */
     containerModel: any;
 
-    /** Title with which to initialize the view.  Value is persisted. */
+    /** Title with which to initialize the view. */
     @bindable title: string;
 
-    /**
-     * Additional info that will be displayed after the title.
-     * Applications can bind to this property to provide dynamic title details.
-     * Value is not persisted.
-     **/
-    @bindable titleDetails: string;
-
-    get fullTitle(): string {
-        return this.title + (this.titleDetails ? ' ' + this.titleDetails : '');
-    }
-
-    fullTitleReaction: IReactionDisposer;
-
     /** Icon with which to initialize the view. */
     @bindable.ref icon: ReactElement;
 

package/desktop/cmp/dash/canvas/impl/DashCanvasView.ts

@@ -34,13 +34,13 @@ export const dashCanvasView = hoistCmp.factory({
     model: uses(DashCanvasViewModel, {publishMode: 'limited'}),
 
     render({model, className}) {
-        const {viewSpec, ref, hidePanelHeader, headerItems, autoHeight, fullTitle, icon} = model,
+        const {viewSpec, ref, hidePanelHeader, headerItems, autoHeight} = model,
             headerProps = hidePanelHeader
                 ? {}
                 : {
                       compactHeader: true,
-                      title: fullTitle,
-                      icon,
+                      title: model.title,
+                      icon: model.icon,
                       headerItems: [...headerItems, headerMenu({model})]
                   };
         return panel({

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -338,7 +338,7 @@ export class DashContainerModel
     renameView(id: string) {
         const view = this.getItemByViewModel(id);
         if (!view) return;
-        this.showTitleForm(view.tab.element, this.getViewModel(id));
+        this.showTitleForm(view.tab.element);
     }
 
     onResize() {
@@ -531,7 +531,7 @@ export class DashContainerModel
                 $titleEl = $el.find('.lm_title').first(),
                 iconSelector = 'svg.svg-inline--fa',
                 viewSpec = this.getViewSpec(item.config.component),
-                {icon} = viewModel;
+                {icon, title} = viewModel;
 
             $el.off('contextmenu').contextmenu(e => {
                 const index = stack.contentItems.indexOf(item);
@@ -551,21 +551,15 @@ export class DashContainerModel
                 }
             }
 
+            if (title) {
+                const currentTitle = $titleEl.text();
+                if (currentTitle !== title) $titleEl.text(title);
+            }
+
             if (viewSpec.allowRename) {
                 this.insertTitleForm($el, viewModel);
-                $titleEl.off('dblclick').dblclick(() => this.showTitleForm($el, viewModel));
+                $titleEl.off('dblclick').dblclick(() => this.showTitleForm($el));
             }
-
-            viewModel.fullTitleReaction?.();
-            viewModel.fullTitleReaction = viewModel.addReaction({
-                track: () => viewModel.fullTitle,
-                run: () => {
-                    const currentTitle = $titleEl.text(),
-                        newTitle = viewModel.fullTitle;
-
-                    if (currentTitle !== newTitle) $titleEl.text(newTitle);
-                }
-            });
         });
     }
 
@@ -585,6 +579,7 @@ export class DashContainerModel
         $formEl.submit(() => {
             const title = $inputEl.val();
             if (title.length) {
+                $titleEl.text(title);
                 viewModel.title = title;
             }
 
@@ -593,11 +588,12 @@ export class DashContainerModel
         });
     }
 
-    private showTitleForm($tabEl, viewModel: DashViewModel) {
+    private showTitleForm($tabEl) {
         if (this.renameLocked) return;
 
-        const $inputEl = $tabEl.find('.title-form input').first(),
-            currentTitle = viewModel.title;
+        const $titleEl = $tabEl.find('.lm_title').first(),
+            $inputEl = $tabEl.find('.title-form input').first(),
+            currentTitle = $titleEl.text();
 
         $tabEl.addClass('show-title-form');
         $inputEl.val(currentTitle);

package/package.json

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