@xh/hoist 73.0.0-SNAPSHOT.1744147015222 → 73.0.0-SNAPSHOT.1744206740883

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## v73.0.0-SNAPSHOT - unreleased
 
+### 🎁 New Features
+
+`ViewManagerConfig` takes new optional key `viewMenuItemFn` to allow ViewManager implementations to customize
+the menu items for views in the view manager menu.
+
 ### ⚙️ Technical
 * Added enhanced `ClientHealthService` for managing client health report.
 

package/build/types/cmp/viewmanager/ViewManagerModel.d.ts

@@ -1,5 +1,6 @@
 import { HoistModel, LoadSpec, PlainObject, TaskObserver, Thunkable } from '@xh/hoist/core';
 import type { ViewManagerProvider } from '@xh/hoist/core';
+import { ReactNode } from 'react';
 import { ViewInfo } from './ViewInfo';
 import { View } from './View';
 export interface ViewCreateSpec {
@@ -85,6 +86,11 @@ export interface ViewManagerConfig {
      * Optional user-facing display name for describing global views. Defaults to 'global'
      */
     globalDisplayName?: string;
+    /**
+     * Optional key to pass a method that returns a customized BlueprintJS `menuItem` for listing
+     * views in the ViewManager menu.
+     */
+    viewMenuItemFn?: (view: ViewInfo, model: ViewManagerModel) => ReactNode;
 }
 /**
  *  ViewManagerModel coordinates the loading, saving, and management of user-defined bundles of
@@ -121,6 +127,7 @@ export declare class ViewManagerModel<T = PlainObject> extends HoistModel {
     readonly instance: string;
     readonly typeDisplayName: string;
     readonly globalDisplayName: string;
+    readonly viewMenuItemFn: (view: ViewInfo, model: ViewManagerModel) => ReactNode;
     readonly enableAutoSave: boolean;
     readonly enableDefault: boolean;
     readonly enableGlobal: boolean;

package/cmp/viewmanager/ViewManagerModel.ts

@@ -123,6 +123,12 @@ export interface ViewManagerConfig {
      * Optional user-facing display name for describing global views. Defaults to 'global'
      */
     globalDisplayName?: string;
+
+    /**
+     * Optional key to pass a method that returns a customized BlueprintJS `menuItem` for listing
+     * views in the ViewManager menu.
+     */
+    viewMenuItemFn?: (view: ViewInfo, model: ViewManagerModel) => ReactNode;
 }
 
 /**
@@ -165,6 +171,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     readonly instance: string;
     readonly typeDisplayName: string;
     readonly globalDisplayName: string;
+    readonly viewMenuItemFn: (view: ViewInfo, model: ViewManagerModel) => ReactNode;
     readonly enableAutoSave: boolean;
     readonly enableDefault: boolean;
     readonly enableGlobal: boolean;
@@ -283,6 +290,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         instance = 'default',
         typeDisplayName,
         globalDisplayName = 'global',
+        viewMenuItemFn,
         manageGlobal = false,
         enableAutoSave = true,
         enableDefault = true,
@@ -296,13 +304,14 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
 
         throwIf(
             !enableDefault && !initialViewSpec,
-            "ViewManagerModel requires 'initialViewSpec' if `enableDefault` is false."
+            "ViewManagerModel requires 'initialViewSpec' if 'enableDefault' is false."
         );
 
         this.type = type;
         this.instance = instance;
         this.typeDisplayName = lowerCase(typeDisplayName ?? genDisplayName(type));
         this.globalDisplayName = globalDisplayName;
+        this.viewMenuItemFn = viewMenuItemFn;
         this.manageGlobal = executeIfFunction(manageGlobal) ?? false;
         this.enableDefault = enableDefault;
         this.enableGlobal = enableGlobal;

package/desktop/cmp/viewmanager/ViewMenu.ts

@@ -12,7 +12,7 @@ import {Icon} from '@xh/hoist/icon';
 import {menu, menuDivider, menuItem} from '@xh/hoist/kit/blueprint';
 import {pluralize} from '@xh/hoist/utils/js';
 import {Dictionary} from 'express-serve-static-core';
-import {each, filter, groupBy, isEmpty, orderBy, some, startCase} from 'lodash';
+import {each, filter, groupBy, isEmpty, isFunction, orderBy, some, startCase} from 'lodash';
 import {ReactNode} from 'react';
 import {ViewManagerLocalModel} from './ViewManagerLocalModel';
 
@@ -162,12 +162,14 @@ function viewMenuItem(view: ViewInfo, model: ViewManagerModel): ReactNode {
     if (!view.isOwned && view.owner) title.push(view.owner);
     if (view.description) title.push(view.description);
 
-    return menuItem({
-        className: 'xh-view-manager__menu-item',
-        key: view.token,
-        text: view.name,
-        title: title.join(' | '),
-        icon,
-        onClick: () => model.selectViewAsync(view).catchDefault()
-    });
+    return isFunction(model.viewMenuItemFn)
+        ? model.viewMenuItemFn(view, model)
+        : menuItem({
+              className: 'xh-view-manager__menu-item',
+              key: view.token,
+              text: view.name,
+              title: title.join(' | '),
+              icon,
+              onClick: () => model.selectViewAsync(view).catchDefault()
+          });
 }

package/package.json

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