@xh/hoist 87.1.0 → 87.2.0

package/core/types/Telemetry.ts

@@ -88,7 +88,7 @@ export interface FullSpanConfig extends SpanConfig {
      */
     startTime?: number;
 
-    /** Source for the `code.namespace` tag - usually the calling object/function. */
+    /** Usually the calling object/function - source of the `code.namespace` and `xh.name` tags. */
     caller?: NameSource;
 }
 

package/data/README.md

@@ -113,6 +113,7 @@ const store = new Store({
 | `idEncodesTreePath` | `boolean` | `false` | IDs imply a fixed tree position (performance). Not supported on View-connected stores |
 | `validationIsComplex` | `boolean` | `false` | Validate all uncommitted records on every change |
 | `experimental` | `PlainObject` | `{}` | Flags for experimental features - see [Performance and Memory](#performance-and-memory) |
+| `xhName` | `string` | `null` | Developer-facing name for logs, telemetry, and Inspector |
 
 `Store.defaults` exposes `freezeData` for an app-wide override. See `StoreDefaults` for details.
 
@@ -1066,7 +1067,8 @@ store.diagnostics.reset();
 ```
 
 Diagnostics log at `debug` level by default. Set `diagnostics.logLevel = 'info'` on one instance to
-follow that object alone at any `XH.logLevel`.
+follow that object alone at any `XH.logLevel`. Give the owning objects an `xhName` to tell
+their output apart - several stores logging at once are otherwise all labelled `[Store]`.
 
 ```typescript
 gridModel.store.diagnostics.logLevel = 'info';

package/data/Store.ts

@@ -43,6 +43,7 @@ import {
     partition,
     remove as lodashRemove,
     uniq,
+    uniqBy,
     values
 } from 'lodash';
 import {instanceManager} from '../core/impl/InstanceManager';
@@ -237,6 +238,9 @@ export interface StoreConfig {
      *     it may also be changed on an existing Store at any time.
      */
     experimental?: PlainObject;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -447,6 +451,7 @@ export class Store
         projectionOnly = null,
         validationIsComplex = false,
         experimental,
+        xhName = null,
         data
     }: StoreConfig) {
         super();
@@ -456,6 +461,7 @@ export class Store
             'Store.projectionOnly cannot be used with processRawData - a projection adopts data already parsed by its provider.'
         );
 
+        this.xhName = xhName;
         this.experimental = this.parseExperimental(experimental);
         this.fields = this.parseFields(fields, fieldDefaults);
         this.idSpec = this.parseIdSpec(idSpec);
@@ -1352,6 +1358,7 @@ export class Store
             `Applications must not specify a field named '__proto__' - assigning it would replace the
             prototype of each record's data object rather than setting a value on it.`
         );
+        throwIf(uniqBy(ret, 'name').length !== ret.length, 'Field names must be unique.');
         return ret;
     }
 

package/data/StoreSelectionModel.ts

@@ -22,6 +22,9 @@ export interface StoreSelectionConfig {
     mode?: 'single' | 'multiple' | 'disabled';
     /** @internal */
     xhImpl?: boolean;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -50,11 +53,12 @@ export class StoreSelectionModel extends HoistModel {
         return this.mode !== 'disabled';
     }
 
-    constructor({store, mode = 'single', xhImpl = false}: StoreSelectionConfig) {
+    constructor({store, mode = 'single', xhName = null, xhImpl = false}: StoreSelectionConfig) {
         super();
         makeObservable(this);
 
         this.xhImpl = xhImpl;
+        this.xhName = xhName;
         this.store = store;
         this.mode = mode;
         this.addReaction(this.cullSelectionReaction());

package/data/cube/Cube.ts

@@ -76,6 +76,9 @@ export interface CubeConfig {
      * Return true to omit the row.
      */
     omitFn?: OmitFn;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 /**
@@ -187,11 +190,14 @@ export class Cube extends HoistBase {
         info = {},
         lockFn,
         bucketSpecFn,
-        omitFn
+        omitFn,
+        xhName = null
     }: CubeConfig) {
         super();
         makeObservable(this);
+        this.xhName = xhName;
         this.store = new Store({
+            xhName: this.childXhName('store'),
             ...store,
             fields: this.parseFields(fields, fieldDefaults),
             idSpec,
@@ -281,16 +287,19 @@ export class Cube extends HoistBase {
     createView({
         query,
         stores,
-        connect = false
+        connect = false,
+        xhName = null
     }: {
         query: QueryConfig;
         stores?: Store[] | Store;
         connect?: boolean;
+        xhName?: string;
     }): View {
         return new View({
             query: new Query({...query, cube: this}),
             stores,
-            connect
+            connect,
+            xhName
         });
     }
 

package/data/cube/View.ts

@@ -63,6 +63,9 @@ export interface ViewConfig {
      * capture a snapshot without further (automatic) updates.
      */
     connect?: boolean;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 
 export interface ViewResult {
@@ -169,8 +172,9 @@ export class View
         makeObservable(this);
 
         const start = performance.now(),
-            {query, stores = [], connect = false} = config;
+            {query, stores = [], connect = false, xhName = null} = config;
 
+        this.xhName = xhName;
         this.query = query;
         this.stores = this.parseStores(stores);
         this._rowCache = new RowCache(this);

package/desktop/README.md

@@ -113,6 +113,7 @@ Desktop form inputs with Blueprint styling:
 | `Slider` | Range slider |
 | `ButtonGroupInput` | Segmented button selection |
 | `SegmentedControl` | Toggle group for mutually exclusive options with strong visual differentiation of the active selection |
+| `IntentInput` | Compact swatch row for selecting a Hoist `Intent`, with optional intent names |
 | `CodeInput` | Code editor with syntax highlighting |
 | `JsonInput` | JSON editor with validation |
 
@@ -355,6 +356,7 @@ leftRightChooser({model})
 | `/appOption/` | App-wide configuration options UI |
 | `/clipboard/` | Clipboard operations (copy with feedback) |
 | `/contextmenu/` | Right-click context menu support |
+| `/daterange/` | Date range picker - presets, relative lookbacks, months and years, custom ranges (see [Date Range README](../cmp/daterange/README.md)) |
 | `/filechooser/` | File selection input |
 | `/filter/` | Filter chooser and filter editor |
 | `/form/` | FormField wrapper for desktop inputs |

package/desktop/appcontainer/LoginPanel.ts

@@ -50,6 +50,7 @@ export const loginPanel = hoistCmp.factory({
                             leftIcon: Icon.user(),
                             placeholder: 'Username',
                             autoComplete: 'username',
+                            enablePasswordManagers: true,
                             autoFocus: true,
                             commitOnChange: true,
                             onKeyDown,
@@ -61,6 +62,7 @@ export const loginPanel = hoistCmp.factory({
                             leftIcon: Icon.lock(),
                             placeholder: 'Password...',
                             autoComplete: 'current-password',
+                            enablePasswordManagers: true,
                             type: 'password',
                             commitOnChange: true,
                             onKeyDown,

package/desktop/cmp/button/Button.scss

@@ -5,6 +5,14 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 
+// Active-state selectors throughout this file match `bp6-active` alongside Hoist's own
+// `xh-button--active`. The Hoist `active` prop sets both, but Blueprint additionally sets
+// `bp6-active` on the button that triggered an *uncontrolled* popover it opened - so a button that
+// simply opens a menu picks up the active look with no per-component code. Blueprint deliberately
+// skips this for controlled popovers (those passed an `isOpen`), which must pass `active`
+// themselves. A component that needs full control of the look can therefore opt out by taking
+// ownership of `isOpen`.
+
 //-----------------------------------------------
 // Core button styles for both light+dark themes
 // (Color-related styles in separate block below)
@@ -130,7 +138,8 @@
   .xh-button.bp6-button {
     // Shaded/filled-in (non-minimal) mode.
     &.xh-button--standard {
-      &.xh-button--active {
+      &.xh-button--active,
+      &.bp6-active {
         box-shadow: var(--xh-button-active-box-shadow);
       }
 
@@ -138,7 +147,8 @@
         color: var(--xh-button-text-color);
         background-color: var(--xh-button-bg-lightest);
 
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-button-active-bg);
           color: var(--xh-button-active-text-color);
         }
@@ -146,7 +156,7 @@
         // highlight on hover for a disabled button. Note that :active pseudo-selector here is
         // triggered while button is being "held down" by user.
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-button-bg-lighter);
           }
           &:active {
@@ -158,11 +168,12 @@
       &.xh-button--intent-primary {
         color: white;
         background-color: var(--xh-intent-primary);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-primary-darkest);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-primary-darker);
           }
           &:active {
@@ -174,11 +185,12 @@
       &.xh-button--intent-success {
         color: white;
         background-color: var(--xh-intent-success);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-success-darkest);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-success-darker);
           }
           &:active {
@@ -192,12 +204,13 @@
       &.xh-button--intent-warning {
         color: white;
         background-color: var(--xh-intent-warning);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           color: white;
           background-color: var(--xh-intent-warning-darkest);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             color: white;
             background-color: var(--xh-intent-warning-darker);
           }
@@ -210,11 +223,12 @@
       &.xh-button--intent-danger {
         color: white;
         background-color: var(--xh-intent-danger);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-danger-darkest);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-danger-darker);
           }
           &:active {
@@ -231,12 +245,13 @@
         color: var(--xh-button-text-color);
         background-color: transparent;
         border-color: var(--xh-button-border-color);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-button-active-bg);
           color: var(--xh-button-active-text-color);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-button-bg-darker);
           }
           &:active {
@@ -249,11 +264,12 @@
         color: var(--xh-intent-primary-darker);
         background-color: transparent;
         border-color: var(--xh-intent-primary);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-primary-trans2);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-primary-trans1);
           }
           &:active {
@@ -266,11 +282,12 @@
         color: var(--xh-intent-success-darker);
         background-color: transparent;
         border-color: var(--xh-intent-success);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-success-trans2);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-success-trans1);
           }
           &:active {
@@ -283,11 +300,12 @@
         color: var(--xh-intent-warning-darker);
         background-color: transparent;
         border-color: var(--xh-intent-warning);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-warning-trans2);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-warning-trans1);
           }
           &:active {
@@ -300,11 +318,12 @@
         color: var(--xh-intent-danger-darker);
         background-color: transparent;
         border-color: var(--xh-intent-danger);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-danger-trans2);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-danger-trans1);
           }
           &:active {
@@ -327,12 +346,13 @@
       &.xh-button--intent-none {
         color: var(--xh-button-text-color);
         background-color: var(--xh-button-bg);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-button-active-bg);
           color: var(--xh-button-active-text-color);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-button-bg-darker);
           }
           &:active {
@@ -344,11 +364,12 @@
       &.xh-button--intent-primary {
         color: white;
         background-color: var(--xh-intent-primary);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-primary-darkest);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-primary-darker);
           }
           &:active {
@@ -360,11 +381,12 @@
       &.xh-button--intent-success {
         color: white;
         background-color: var(--xh-intent-success);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-success-darkest);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-success-darker);
           }
           &:active {
@@ -376,11 +398,12 @@
       &.xh-button--intent-warning {
         color: white;
         background-color: var(--xh-intent-warning);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-warning-darkest);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-warning-darker);
           }
           &:active {
@@ -392,11 +415,12 @@
       &.xh-button--intent-danger {
         color: white;
         background-color: var(--xh-intent-danger);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-danger-darkest);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-danger-darker);
           }
           &:active {
@@ -413,12 +437,13 @@
         color: var(--xh-button-text-color);
         background-color: transparent;
         border-color: var(--xh-button-border-color);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-button-active-bg);
           color: var(--xh-button-active-text-color);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-button-bg-darker);
           }
           &:active {
@@ -431,11 +456,12 @@
         color: var(--xh-intent-primary-lighter);
         background-color: transparent;
         border-color: var(--xh-intent-primary-lighter);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-primary-trans2);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-primary-trans1);
           }
           &:active {
@@ -448,11 +474,12 @@
         color: var(--xh-intent-success-lighter);
         background-color: transparent;
         border-color: var(--xh-intent-success-lighter);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-success-trans2);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-success-trans1);
           }
           &:active {
@@ -465,11 +492,12 @@
         color: var(--xh-intent-warning-lighter);
         background-color: transparent;
         border-color: var(--xh-intent-warning-lighter);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-warning-trans2);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-warning-trans1);
           }
           &:active {
@@ -482,11 +510,12 @@
         color: var(--xh-intent-danger-lighter);
         background-color: transparent;
         border-color: var(--xh-intent-danger-lighter);
-        &.xh-button--active {
+        &.xh-button--active,
+        &.bp6-active {
           background-color: var(--xh-intent-danger-trans2);
         }
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-danger-trans1);
           }
           &:active {
@@ -510,7 +539,7 @@
     .xh-button.bp6-button.xh-button--minimal {
       &.xh-button--intent-none {
         &.xh-button--enabled {
-          &:hover:not(:active):not(.xh-button--active) {
+          &:hover:not(:active):not(.xh-button--active):not(.bp6-active) {
             background-color: var(--xh-intent-neutral-trans1);
           }
           &:active {

package/desktop/cmp/button/Button.ts

@@ -6,6 +6,7 @@
  */
 import {ButtonProps as BpButtonProps} from '@blueprintjs/core';
 import {
+    DomAttrsProps,
     hoistCmp,
     HoistModel,
     HoistProps,
@@ -23,7 +24,13 @@ import {ReactElement, ReactNode} from 'react';
 import './Button.scss';
 
 export interface ButtonProps<M extends HoistModel = null>
-    extends HoistProps<M>, StyleProps, LayoutProps, TestSupportProps, Omit<BpButtonProps, 'ref'> {
+    extends
+        HoistProps<M>,
+        StyleProps,
+        LayoutProps,
+        TestSupportProps,
+        DomAttrsProps,
+        Omit<BpButtonProps, 'ref'> {
     active?: boolean;
     autoFocus?: boolean;
     disabled?: boolean;
@@ -83,6 +90,7 @@ export const [Button, button] = hoistCmp.withFactory<ButtonProps, ButtonDefaults
             tooltip,
             active,
             testId,
+            domAttrs,
             ...rest
         } = nonLayoutProps;
 
@@ -111,6 +119,7 @@ export const [Button, button] = hoistCmp.withFactory<ButtonProps, ButtonDefaults
             className: classNames(className, classes),
             ref,
             [TEST_ID]: testId,
+            ...domAttrs,
             disabled,
             icon,
             intent,

package/desktop/cmp/button/ButtonGroup.ts

@@ -6,6 +6,7 @@
  */
 import {ButtonGroupProps as BpButtonGroupProps} from '@blueprintjs/core';
 import {
+    DomAttrsProps,
     hoistCmp,
     HoistModel,
     HoistProps,
@@ -25,6 +26,7 @@ export interface ButtonGroupProps<M extends HoistModel = null>
         LayoutProps,
         StyleProps,
         TestSupportProps,
+        DomAttrsProps,
         SetOptional<Omit<BpButtonGroupProps, 'ref'>, 'children'> {
     /** True to have all buttons fill available width equally. */
     fill?: boolean;
@@ -45,13 +47,14 @@ export const [ButtonGroup, buttonGroup] = hoistCmp.withFactory<ButtonGroupProps>
     className: 'xh-button-group',
 
     render(props, ref) {
-        const [layoutProps, {fill, minimal, vertical, style, testId, ...rest}] =
+        const [layoutProps, {fill, minimal, vertical, style, testId, domAttrs, ...rest}] =
             splitLayoutProps(props);
         return bpButtonGroup({
             fill,
             minimal,
             vertical,
             [TEST_ID]: testId,
+            ...domAttrs,
             style: {
                 ...style,
                 ...layoutProps

package/desktop/cmp/button/grid/ColChooserButton.ts

@@ -99,7 +99,15 @@ export const [ColChooserButton, colChooserButton] = hoistCmp.withFactory<ColChoo
             popoverClassName: 'xh-col-chooser-popover',
             position: withDefault(popoverPosition, 'auto'),
             isOpen: modalModel.isPopoverOpen,
-            item: button({icon, title, className, disabled, onClick, ...rest}),
+            item: button({
+                icon,
+                title,
+                className,
+                disabled,
+                active: modalModel.isPopoverOpen,
+                onClick,
+                ...rest
+            }),
             disabled,
             content: vbox({
                 onClick: stopPropagation,

package/desktop/cmp/button/zoneGrid/ZoneMapperButton.ts

@@ -61,6 +61,7 @@ export const [ZoneMapperButton, zoneMapperButton] = hoistCmp.withFactory<ZoneMap
                 title: withDefault(title, 'Customize fields...'),
                 className,
                 disabled,
+                active: isOpen,
                 ...rest
             }),
             disabled,

package/desktop/cmp/dash/DashConfig.ts

@@ -50,4 +50,7 @@ export interface DashConfig<VSPEC extends DashViewSpec, VSTATE extends DashViewS
      * including when the dash container is empty.
      */
     extraMenuItems?: MenuItemLike[];
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }

package/desktop/cmp/dash/DashViewModel.ts

@@ -92,7 +92,15 @@ export abstract class DashViewModel<T extends DashViewSpec = DashViewSpec> exten
         return this.viewSpec.refreshMode ?? this.containerModel.refreshMode;
     }
 
-    constructor({id, viewSpec, icon, title, viewState = null, containerModel}: DashViewConfig<T>) {
+    constructor({
+        id,
+        viewSpec,
+        icon,
+        title,
+        viewState = null,
+        containerModel,
+        xhName = null
+    }: DashViewConfig<T>) {
         super();
         makeObservable(this);
         throwIf(!id, 'DashViewModel requires an id');
@@ -104,8 +112,10 @@ export abstract class DashViewModel<T extends DashViewSpec = DashViewSpec> exten
         this.title = title ?? viewSpec.title;
         this.viewState = viewState;
         this.containerModel = containerModel;
+        this.xhName = xhName ?? containerModel?.childXhName(id);
 
         this.refreshContextModel = new ManagedRefreshContextModel(this);
+        this.refreshContextModel.xhName = this.childXhName('refreshContextModel');
     }
 
     /**
@@ -154,4 +164,7 @@ export interface DashViewConfig<T extends DashViewSpec = DashViewSpec> {
     title?: string;
     viewState?: DashViewState;
     containerModel?: any;
+
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }