@xh/hoist 87.1.1 → 87.2.0

package/appcontainer/ImpersonationBarModel.ts

@@ -17,6 +17,7 @@ export class ImpersonationBarModel extends HoistModel {
     override telemetryPrefix = 'xh.client.identity';
 
     override xhImpl = true;
+    override xhName = 'impersonationBarModel';
 
     @observable showRequested: boolean = false;
     @observable.ref targets: string[] = [];

package/appcontainer/MessageSourceModel.ts

@@ -17,6 +17,7 @@ import {MessageModel} from './MessageModel';
  */
 export class MessageSourceModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'messageSourceModel';
 
     @managed
     @observable.ref

package/appcontainer/OptionsDialogModel.ts

@@ -18,6 +18,7 @@ import {AppOption} from './AppOption';
  */
 export class OptionsDialogModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'optionsDialogModel';
 
     @observable isOpen: boolean = false;
     @observable.ref options: AppOption[] = [];

package/appcontainer/PageStateModel.ts

@@ -16,6 +16,7 @@ import {action, makeObservable, observable} from '@xh/hoist/mobx';
  */
 export class PageStateModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'pageStateModel';
 
     @observable state: PageState = null;
 

package/appcontainer/RouterModel.ts

@@ -20,6 +20,8 @@ import 'router5-plugin-browser';
  * underlying routes, presenting them to the application as a set of MobX observables.
  */
 export class RouterModel extends HoistModel {
+    override xhName = 'routerModel';
+
     /** Router5 state object representing the current state. */
     @observable.ref
     currentState: State;

package/appcontainer/SizingModeModel.ts

@@ -14,6 +14,7 @@ import {values, isPlainObject} from 'lodash';
  */
 export class SizingModeModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'sizingModeModel';
 
     @observable
     sizingMode: SizingMode = null;

package/appcontainer/ThemeModel.ts

@@ -12,6 +12,7 @@ import {action, observable, makeObservable} from '@xh/hoist/mobx';
  */
 export class ThemeModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'themeModel';
 
     @observable
     darkTheme: boolean;

package/appcontainer/ToastSourceModel.ts

@@ -15,6 +15,7 @@ import {ToastModel} from './ToastModel';
  */
 export class ToastSourceModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'toastSourceModel';
 
     @managed
     @observable.ref

package/appcontainer/UserAgentModel.ts

@@ -13,6 +13,7 @@ import {UAParser} from 'ua-parser-js';
  */
 export class UserAgentModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'userAgentModel';
 
     private _uaParser: any = null;
 

package/appcontainer/ViewportSizeModel.ts

@@ -16,6 +16,7 @@ import {isFinite, isString} from 'lodash';
  */
 export class ViewportSizeModel extends HoistModel {
     override xhImpl = true;
+    override xhName = 'viewportSizeModel';
 
     @observable.ref
     size: {width: number; height: number};

package/build/types/admin/AdminUtils.d.ts

@@ -1,4 +1,5 @@
 import { AppModel } from '@xh/hoist/admin/AppModel';
+import { ReactElement, ReactNode } from 'react';
 /**
  * Generate a standardized filename for an Admin module grid export, without datestamp.
  */
@@ -9,3 +10,31 @@ export declare function exportFilename(moduleName: string): string;
  */
 export declare function exportFilenameWithDate(moduleName: string): () => string;
 export declare function getAppModel<T extends AppModel>(): T;
+/** Muted "N/A" placeholder for empty values in read-only detail forms. */
+export declare function naSpan(): ReactNode;
+/**
+ * Default readonly renderer for detail forms - FormField's standard formatting (dates, numbers,
+ * booleans, JSON, text), or {@link naSpan} when null.
+ */
+export declare function valOrNa(v: any): ReactNode;
+/**
+ * Read-only JsonInput for detail displays - fixed to `height` if given, otherwise filling its
+ * container. Pair fill mode with the `xh-admin-readonly-form__fill` class on the enclosing
+ * `formFieldSet` to have it take the remaining panel height.
+ */
+export declare function readonlyJsonInput(value: any, height?: number): ReactElement;
+/**
+ * Readonly renderer for stored scalar values (config / preference values) - the value as literal
+ * text, with no number or date formatting, or {@link naSpan} when null.
+ */
+export declare function rawValueRenderer(v: any): ReactNode;
+/** Readonly renderer for JSON fields in detail forms - {@link readonlyJsonInput} in fill mode. */
+export declare function jsonRenderer(v: any): ReactNode;
+/** Readonly renderer for boolean fields in detail forms - "Yes" / "No", or {@link naSpan} when null. */
+export declare function yesNoRenderer(v: boolean): ReactNode;
+/**
+ * Readonly renderer for free-text fields in detail forms that may contain Markdown (notes,
+ * descriptions). Renders via {@link markdown} within a wrapper styled for compact display, or
+ * {@link naSpan} when null.
+ */
+export declare function markdownRenderer(v: string): ReactNode;

package/build/types/admin/columns/UserData.d.ts

@@ -1,7 +1,10 @@
 import { ColumnSpec } from '@xh/hoist/cmp/grid/columns';
+import { ReactElement } from 'react';
 export declare const value: ColumnSpec;
 export declare const defaultValue: ColumnSpec;
 export declare const userValue: ColumnSpec;
 export declare const valueType: ColumnSpec;
+/** Renders a config value type (json, string, int, bool, pwd...) as an icon + colored badge. */
+export declare function valueTypeRenderer(valueType: string): ReactElement;
 export declare const groupName: ColumnSpec;
 export declare const clientVisible: ColumnSpec;

package/build/types/admin/detail/RestDetailModel.d.ts

@@ -0,0 +1,20 @@
+import { FormModel } from '@xh/hoist/cmp/form';
+import { HoistModel } from '@xh/hoist/core';
+import { StoreRecord } from '@xh/hoist/data';
+import { RestGridModel } from '@xh/hoist/desktop/cmp/rest';
+/**
+ * Backs a {@link restDetailPanel}. Resolves the host RestGridModel via `@lookup` - the model of an
+ * enclosing component must expose it as a public property - then tracks its single selection and
+ * mirrors the selected record into a read-only FormModel with a field for every store field.
+ */
+export declare class RestDetailModel extends HoistModel {
+    xhImpl: boolean;
+    gridModel: RestGridModel;
+    formModel: FormModel;
+    get record(): StoreRecord;
+    get hasSelection(): boolean;
+    get readonly(): boolean;
+    constructor();
+    onLinked(): void;
+    edit(): void;
+}

package/build/types/admin/detail/RestDetailPanel.d.ts

@@ -0,0 +1,34 @@
+import { FormModel } from '@xh/hoist/cmp/form';
+import { HoistProps, PersistOptions } from '@xh/hoist/core';
+import { StoreRecord } from '@xh/hoist/data';
+import { ReactElement, ReactNode } from 'react';
+import { RestDetailModel } from './RestDetailModel';
+export interface RestDetailPanelProps extends HoistProps<RestDetailModel> {
+    /** Icon for the panel header and empty-state placeholder. */
+    icon: ReactElement;
+    /** Placeholder text when no single record is selected. */
+    emptyText?: string;
+    /** Default width in pixels. */
+    defaultSize?: number;
+    /** Minimum width in pixels. */
+    minSize?: number;
+    /** Options for persisting panel size and collapsed state. */
+    persistWith?: PersistOptions;
+    /** Panel title for the selected record - defaults to its `name`. */
+    titleFn?: (record: StoreRecord) => ReactNode;
+    /**
+     * Renders the form body for the selected record - typically one or more `formFieldSet`s of
+     * `formField`s bound to the store's field names. Rendered within a read-only `form` bound to
+     * the model's FormModel, styled with the `xh-admin-readonly-form` class.
+     */
+    renderForm: (record: StoreRecord, formModel: FormModel) => ReactNode;
+}
+/**
+ * Read-only detail view of the record selected in a RestGrid, docked to its right. Tracks the
+ * grid's selection, refreshes when the grid reloads, and offers an Edit button to open the grid's
+ * editor dialog for the selected record.
+ *
+ * Render as a sibling of `restGrid()` within an `hframe`. The host RestGridModel is resolved via
+ * `@lookup`, so the model of an enclosing component must expose it as a public property.
+ */
+export declare const restDetailPanel: import("@xh/hoist/core").ElementFactory<RestDetailPanelProps>;

package/build/types/admin/tabs/activity/tracking/ActivityTrackingModel.d.ts

@@ -1,26 +1,18 @@
 import { ActivityTrackingDataFieldSpec, DataFieldsEditorModel } from '@xh/hoist/admin/tabs/activity/tracking/datafields/DataFieldsEditorModel';
+import { DateRangePickerModel } from '@xh/hoist/cmp/daterange';
 import { FilterChooserModel } from '@xh/hoist/cmp/filter';
 import { FormModel } from '@xh/hoist/cmp/form';
 import { ColumnSpec, GridModel } from '@xh/hoist/cmp/grid';
 import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
-import { HoistModel, LoadSpec, LocalDateUnit, PlainObject } from '@xh/hoist/core';
+import { HoistModel, LoadSpec, PlainObject } from '@xh/hoist/core';
 import { Cube } from '@xh/hoist/data';
-import { LocalDate } from '@xh/hoist/utils/datetime';
 import { ActivityDetailProvider } from './detail/ActivityDetailModel';
-/**
- * A relative time interval (e.g. 7 days) ending on the current app day. Drives the quick-select
- * buttons and the persisted time period, which rolls forward to end on today on restore.
- */
-export interface ActivityInterval {
-    value: number;
-    unit: LocalDateUnit;
-}
-/** Quick-select intervals offered in the toolbar - labels are derived as `${value}${unit[0]}`. */
-export declare const INTERVALS: ActivityInterval[];
 export declare class ActivityTrackingModel extends HoistModel implements ActivityDetailProvider {
     telemetryPrefix: string;
     /** FormModel for server-side querying controls. */
     formModel: FormModel;
+    /** Period to query, resolved against the current app day. */
+    dateRangePickerModel: DateRangePickerModel;
     /** Models for data-handling components - can be rebuilt due to change in dataFields. */
     groupingChooserModel: GroupingChooserModel;
     cube: Cube;
@@ -36,7 +28,6 @@ export declare class ActivityTrackingModel extends HoistModel implements Activit
     showFilterChooser: boolean;
     get enabled(): boolean;
     get dimensions(): string[];
-    get endDay(): LocalDate;
     get hasFilter(): boolean;
     get maxRowOptions(): {
         value: number;
@@ -54,12 +45,9 @@ export declare class ActivityTrackingModel extends HoistModel implements Activit
     doLoadAsync(loadSpec: LoadSpec): Promise<void>;
     setDataFields(dataFields: ActivityTrackingDataFieldSpec[]): void;
     toggleFilterChooser(): void;
-    adjustDates(dir: 'add' | 'subtract'): void;
-    adjustStartDate(interval: ActivityInterval): void;
-    isInterval(interval: ActivityInterval): boolean;
     getDisplayName(fieldName: string): string;
     private createQueryFormModel;
-    private setupPeriodPersistence;
+    private createDateRangePickerModel;
     private loadGridAsync;
     private cubeLabelComparator;
     private getComparableValForDim;

package/build/types/admin/tabs/general/config/ConfigDetailPanel.d.ts

@@ -0,0 +1,7 @@
+import { ConfigPanelModel } from './ConfigPanelModel';
+/**
+ * Read-only detail view of the config selected in the grid. Shows the config's metadata and every
+ * available view of its value - resolved, instance override, database, and typedClass defaults -
+ * opening on the most-derived view.
+ */
+export declare const configDetailPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ConfigPanelModel>>;

package/build/types/admin/tabs/general/config/ConfigValue.d.ts

@@ -3,16 +3,22 @@ import { TabContainerModel } from '@xh/hoist/cmp/tab';
 import { HoistModel } from '@xh/hoist/core';
 import './ConfigValue.scss';
 /**
- * Presentation of a config's value within the config editor, bound to the enclosing RestForm's
- * `value` field. Plain configs render a single editor by type; configs with a typedClass and/or
- * an active instance-config override render a tab set over the applicable views of the value.
+ * Presentation of a config's value, bound to the `value` field of an enclosing Form. Plain configs
+ * render a single editor by type; configs with a typedClass and/or an active instance-config
+ * override render a tab set over the applicable views of the value.
+ *
+ * Used within the RestGrid editor dialog (editable, opening on the Database tab) and the docked
+ * detail panel (read-only, opening on the most-derived view). Pass `height` for a fixed-height
+ * display, or omit it to fill the available space.
  */
 export declare const configValue: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ConfigValueModel>>;
 declare class ConfigValueModel extends HoistModel {
     xhImpl: boolean;
     tabContainerModel: TabContainerModel;
     get formModel(): FormModel;
-    get height(): number;
+    /** Fixed height for the value display, or null to fill available space. */
+    get height(): number | null;
+    get readonly(): boolean;
     get valueField(): import("@xh/hoist/cmp/form").BaseFieldModel;
     get resolvedValue(): any;
     get defaultValue(): any;

package/build/types/admin/tabs/userData/jsonblob/JsonBlobDetailPanel.d.ts

@@ -0,0 +1,3 @@
+import { JsonBlobModel } from './JsonBlobModel';
+/** Read-only detail view of the JSON Blob selected in the grid. */
+export declare const jsonBlobDetailPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<JsonBlobModel>>;

package/build/types/admin/tabs/userData/prefs/UserPreferenceDetailPanel.d.ts

@@ -0,0 +1,3 @@
+import { UserPreferenceModel } from './UserPreferenceModel';
+/** Read-only detail view of the user preference value selected in the grid. */
+export declare const userPreferenceDetailPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<UserPreferenceModel>>;

package/build/types/admin/tabs/userData/prefs/UserPreferenceModel.d.ts

@@ -1,6 +1,9 @@
 import { HoistModel, LoadSpec } from '@xh/hoist/core';
 import { RestGridModel } from '@xh/hoist/desktop/cmp/rest';
 export declare class UserPreferenceModel extends HoistModel {
+    persistWith: {
+        localStorageKey: string;
+    };
     gridModel: RestGridModel;
     showEditorDialog: boolean;
     constructor();

package/build/types/appcontainer/AboutDialogModel.d.ts

@@ -4,6 +4,7 @@ import { AboutDialogItem, HoistModel } from '@xh/hoist/core';
  */
 export declare class AboutDialogModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     isOpen: boolean;
     constructor();
     init(): void;

package/build/types/appcontainer/AppContainerModel.d.ts

@@ -21,6 +21,7 @@ import { RouterModel } from './RouterModel';
  * Root object for Framework GUI State.
  */
 export declare class AppContainerModel extends HoistModel {
+    xhName: string;
     telemetryPrefix: string;
     private initCalled;
     appSpec: AppSpec;

package/build/types/appcontainer/AppStateModel.d.ts

@@ -6,6 +6,7 @@ import { AppState, AppSuspendData, HoistModel } from '@xh/hoist/core';
  */
 export declare class AppStateModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     state: AppState;
     lastActivityMs: number;
     suspendData: AppSuspendData;

package/build/types/appcontainer/BannerSourceModel.d.ts

@@ -7,6 +7,7 @@ import { BannerModel } from './BannerModel';
  */
 export declare class BannerSourceModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     bannerModels: BannerModel[];
     constructor();
     show(spec: BannerSpec): BannerModel;

package/build/types/appcontainer/ChangelogDialogModel.d.ts

@@ -1,6 +1,7 @@
 import { HoistModel } from '@xh/hoist/core';
 export declare class ChangelogDialogModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     isOpen: boolean;
     constructor();
     init(): void;

package/build/types/appcontainer/ColChooserOptionsModel.d.ts

@@ -7,6 +7,7 @@ import { HoistModel } from '@xh/hoist/core';
  */
 export declare class ColChooserOptionsModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     persistWith: {
         localStorageKey: string;
     };

package/build/types/appcontainer/ExceptionDialogModel.d.ts

@@ -10,6 +10,7 @@ import { ExceptionHandlerOptions, HoistModel } from '@xh/hoist/core';
  */
 export declare class ExceptionDialogModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     displayData: {
         exception: HoistException;
         options: ExceptionHandlerOptions;

package/build/types/appcontainer/FeedbackDialogModel.d.ts

@@ -5,6 +5,7 @@ import { HoistModel } from '@xh/hoist/core';
  */
 export declare class FeedbackDialogModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     isOpen: boolean;
     message: string;
     constructor();

package/build/types/appcontainer/ImpersonationBarModel.d.ts

@@ -6,6 +6,7 @@ import { HoistModel } from '@xh/hoist/core';
 export declare class ImpersonationBarModel extends HoistModel {
     telemetryPrefix: string;
     xhImpl: boolean;
+    xhName: string;
     showRequested: boolean;
     targets: string[];
     pendingTarget: string;

package/build/types/appcontainer/MessageSourceModel.d.ts

@@ -7,6 +7,7 @@ import { MessageModel } from './MessageModel';
  */
 export declare class MessageSourceModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     msgModels: MessageModel[];
     constructor();
     message(config: MessageSpec): any;

package/build/types/appcontainer/OptionsDialogModel.d.ts

@@ -7,6 +7,7 @@ import { AppOption } from './AppOption';
  */
 export declare class OptionsDialogModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     isOpen: boolean;
     options: AppOption[];
     loadTask: TaskObserver;

package/build/types/appcontainer/PageStateModel.d.ts

@@ -8,6 +8,7 @@ import { HoistModel, PageState } from '@xh/hoist/core';
  */
 export declare class PageStateModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     state: PageState;
     constructor();
     private setState;

package/build/types/appcontainer/RouterModel.d.ts

@@ -8,6 +8,7 @@ import 'router5-plugin-browser';
  * underlying routes, presenting them to the application as a set of MobX observables.
  */
 export declare class RouterModel extends HoistModel {
+    xhName: string;
     /** Router5 state object representing the current state. */
     currentState: State;
     /** Underlying Router5 Router object implementing the routing state. */

package/build/types/appcontainer/SizingModeModel.d.ts

@@ -4,6 +4,7 @@ import { HoistModel, SizingMode } from '@xh/hoist/core';
  */
 export declare class SizingModeModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     sizingMode: SizingMode;
     constructor();
     setSizingMode(sizingMode: SizingMode): void;

package/build/types/appcontainer/ThemeModel.d.ts

@@ -4,6 +4,7 @@ import { HoistModel, Theme } from '@xh/hoist/core';
  */
 export declare class ThemeModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     darkTheme: boolean;
     constructor();
     toggleTheme(): void;

package/build/types/appcontainer/ToastSourceModel.d.ts

@@ -6,6 +6,7 @@ import { ToastModel } from './ToastModel';
  */
 export declare class ToastSourceModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     toastModels: ToastModel[];
     constructor();
     show(config: ToastSpec | string): ToastModel;

package/build/types/appcontainer/UserAgentModel.d.ts

@@ -5,6 +5,7 @@ import { HoistModel } from '@xh/hoist/core';
  */
 export declare class UserAgentModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     private _uaParser;
     get isPhone(): boolean;
     get isTablet(): boolean;

package/build/types/appcontainer/ViewportSizeModel.d.ts

@@ -6,6 +6,7 @@ import { HoistModel } from '@xh/hoist/core';
  */
 export declare class ViewportSizeModel extends HoistModel {
     xhImpl: boolean;
+    xhName: string;
     size: {
         width: number;
         height: number;

package/build/types/cmp/ag-grid/AgGridModel.d.ts

@@ -27,6 +27,8 @@ export interface AgGridModelConfig {
     hideHeaders?: boolean;
     /** @internal */
     xhImpl?: boolean;
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 /**
  * @see https://www.ag-grid.com/javascript-grid-column-definitions/#saving-and-restoring-column-state
@@ -75,7 +77,7 @@ export declare class AgGridModel extends HoistModel {
     hideHeaders: boolean;
     agApi: GridApi;
     private _prevSortBy;
-    constructor({ sizingMode, showHover, rowBorders, cellBorders, stripeRows, showCellFocus, hideHeaders, xhImpl }?: AgGridModelConfig);
+    constructor({ sizingMode, showHover, rowBorders, cellBorders, stripeRows, showCellFocus, hideHeaders, xhName, xhImpl }?: AgGridModelConfig);
     /** True if the grid fully initialized and its state can be queried/mutated. */
     get isReady(): boolean;
     /**

package/build/types/cmp/card/Card.d.ts

@@ -1,8 +1,8 @@
-import { BoxProps, HoistProps, Intent, LayoutProps, TestSupportProps } from '@xh/hoist/core';
+import { BoxProps, DomAttrsProps, HoistProps, Intent, LayoutProps, TestSupportProps } from '@xh/hoist/core';
 import { type ReactElement, type ReactNode } from 'react';
 import { CardModel } from './CardModel';
 import './Card.scss';
-export interface CardProps<M extends CardModel = CardModel> extends HoistProps<M>, TestSupportProps, LayoutProps {
+export interface CardProps<M extends CardModel = CardModel> extends HoistProps<M>, TestSupportProps, DomAttrsProps, LayoutProps {
     /** An icon placed left of the title. */
     icon?: ReactElement;
     /** Intent to apply to the inline header and border. */

package/build/types/cmp/chart/ChartModel.d.ts

@@ -11,6 +11,8 @@ interface ChartConfig {
     contextMenu?: ChartContextMenuSpec;
     /** @internal */
     xhImpl?: boolean;
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 export interface ChartModelDefaults {
     contextMenu?: ChartMenuToken[];

package/build/types/cmp/dataview/DataViewModel.d.ts

@@ -76,6 +76,8 @@ export interface DataViewConfig {
      * with its usages of GridModel.
      */
     gridOptions?: Omit<GridConfig, keyof DataViewConfig>;
+    /** See {@link HoistBase.xhName}. */
+    xhName?: string;
 }
 export type ItemHeightFn = (params: {
     record: StoreRecord;