@xh/hoist 73.0.0-SNAPSHOT.1744142528681 → 73.0.0-SNAPSHOT.1744144713361

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## v73.0.0-SNAPSHOT - unreleased
 
+### 🎁 New Features
+
+`ViewManagerConfig` takes new key `viewRouteParam` to allow ViewManagers implemented with routing to
+have the view buttons on their menu items be right clickable/Ctrl+ Click to open views in new tabs or windows.
+
 ## v72.3.0 - 2025-04-08
 
 ### 🎁 New Features

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

@@ -85,6 +85,12 @@ export interface ViewManagerConfig {
      * Optional user-facing display name for describing global views. Defaults to 'global'
      */
     globalDisplayName?: string;
+    /**
+     * Optional key used as route param for view tokens.  Specify if you have customized your
+     * ViewManager implementation to be routable, and you want users to be able to Ctrl+Click or
+     * ContextMenu Click to open views from the view menu in new tabs or windows.
+     */
+    viewRouteParam?: string;
 }
 /**
  *  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 viewRouteParam: string;
     readonly enableAutoSave: boolean;
     readonly enableDefault: boolean;
     readonly enableGlobal: boolean;

package/cmp/viewmanager/ViewManagerModel.ts

@@ -123,6 +123,13 @@ export interface ViewManagerConfig {
      * Optional user-facing display name for describing global views. Defaults to 'global'
      */
     globalDisplayName?: string;
+
+    /**
+     * Optional key used as route param for view tokens.  Specify if you have customized your
+     * ViewManager implementation to be routable, and you want users to be able to Ctrl+Click or
+     * ContextMenu Click to open views from the view menu in new tabs or windows.
+     */
+    viewRouteParam?: string;
 }
 
 /**
@@ -165,6 +172,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
     readonly instance: string;
     readonly typeDisplayName: string;
     readonly globalDisplayName: string;
+    readonly viewRouteParam: string;
     readonly enableAutoSave: boolean;
     readonly enableDefault: boolean;
     readonly enableGlobal: boolean;
@@ -283,6 +291,7 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
         instance = 'default',
         typeDisplayName,
         globalDisplayName = 'global',
+        viewRouteParam,
         manageGlobal = false,
         enableAutoSave = true,
         enableDefault = true,
@@ -296,13 +305,19 @@ export class ViewManagerModel<T = PlainObject> extends HoistModel {
 
         throwIf(
             !enableDefault && !initialViewSpec,
-            "ViewManagerModel requires 'initialViewSpec' if `enableDefault` is false."
+            "ViewManagerModel requires 'initialViewSpec' if 'enableDefault' is false."
+        );
+
+        throwIf(
+            viewRouteParam && isNil(XH.routerState),
+            "Cannot use 'viewRouteParam' if your app does not define a router."
         );
 
         this.type = type;
         this.instance = instance;
         this.typeDisplayName = lowerCase(typeDisplayName ?? genDisplayName(type));
         this.globalDisplayName = globalDisplayName;
+        this.viewRouteParam = viewRouteParam;
         this.manageGlobal = executeIfFunction(manageGlobal) ?? false;
         this.enableDefault = enableDefault;
         this.enableGlobal = enableGlobal;

package/desktop/cmp/viewmanager/ViewMenu.ts

@@ -5,12 +5,12 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
-import {hoistCmp} from '@xh/hoist/core';
+import {hoistCmp, XH} from '@xh/hoist/core';
 import {ViewManagerModel, ViewInfo} from '@xh/hoist/cmp/viewmanager';
 import {switchInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
 import {menu, menuDivider, menuItem} from '@xh/hoist/kit/blueprint';
-import {pluralize} from '@xh/hoist/utils/js';
+import {consumeEvent, pluralize} from '@xh/hoist/utils/js';
 import {Dictionary} from 'express-serve-static-core';
 import {each, filter, groupBy, isEmpty, orderBy, some, startCase} from 'lodash';
 import {ReactNode} from 'react';
@@ -157,17 +157,34 @@ function getGroupedMenuItems(
 
 function viewMenuItem(view: ViewInfo, model: ViewManagerModel): ReactNode {
     const icon = view.isCurrentView ? Icon.check() : Icon.placeholder(),
-        title = [];
+        title = [],
+        usingRouting = !!(XH.routerState && model.viewRouteParam);
 
     if (!view.isOwned && view.owner) title.push(view.owner);
     if (view.description) title.push(view.description);
 
+    const href = usingRouting
+        ? XH.router.buildUrl(XH.routerState.name, {
+              ...XH.routerState.params,
+              [model.viewRouteParam]: view.token
+          })
+        : undefined;
+
     return menuItem({
         className: 'xh-view-manager__menu-item',
         key: view.token,
         text: view.name,
         title: title.join(' | '),
         icon,
-        onClick: () => model.selectViewAsync(view).catchDefault()
+        href,
+        onClick: e => {
+            if (!usingRouting || (e.button === 0 && !e.ctrlKey && !e.metaKey)) {
+                consumeEvent(e);
+                model.selectViewAsync(view).catchDefault();
+                return false;
+            }
+
+            return true;
+        }
     });
 }

package/package.json

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