@xh/hoist 72.2.0 → 72.4.0

package/desktop/cmp/grid/editors/BooleanEditor.ts

@@ -49,11 +49,23 @@ export const [BooleanEditor, booleanEditor] = hoistCmp.withFactory<BooleanEditor
     }
 });
 
-function useInstantEditor({onValueChange, initialValue, stopEditing}: CustomCellEditorProps, ref) {
+function useInstantEditor(
+    {onValueChange, initialValue, stopEditing, eventKey, eGridCell}: CustomCellEditorProps,
+    ref
+) {
+    // Don't toggle if the user has tabbed into the editor. See https://github.com/xh/hoist-react/issues/3943.
+    // Fortunately, `eventKey` is null for tab, so we can use that to accept other keyboard events.
+    // Unfortunately, it is also null for mouse events, so we check if the grid cell is currently
+    // underneath the mouse position via `:hover` selector.
     useEffect(() => {
-        onValueChange(!initialValue);
+        const els = document.querySelectorAll(':hover'),
+            topEl = els[els.length - 1];
+
+        if (eventKey || topEl === eGridCell) {
+            onValueChange(!initialValue);
+        }
         stopEditing();
-    }, [stopEditing, initialValue, onValueChange]);
+    }, [stopEditing, initialValue, onValueChange, eventKey, eGridCell]);
 
     return null;
 }

package/desktop/cmp/tab/TabSwitcher.ts

@@ -41,7 +41,7 @@ import {CSSProperties, ReactElement, KeyboardEvent} from 'react';
  *
  * Overflowing tabs can be displayed in a dropdown menu if `enableOverflow` is true.
  * Note that in order for tabs to overflow, the TabSwitcher or it's wrapper must have a
- * a maximum width.
+ * maximum width.
  */
 export const [TabSwitcher, tabSwitcher] = hoistCmp.withFactory<TabSwitcherProps>({
     displayName: 'TabSwitcher',

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/format/FormatDate.ts

@@ -4,11 +4,11 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {isLocalDate, LocalDate} from '@xh/hoist/utils/datetime';
-import {defaults, isString} from 'lodash';
+import {DAYS, isLocalDate, LocalDate} from '@xh/hoist/utils/datetime';
+import {defaults, isFinite, isString} from 'lodash';
 import moment from 'moment';
 import {ReactNode} from 'react';
-import {DateLike} from '../core/types/Types';
+import {DateLike, PlainObject} from '../core/types/Types';
 import {fmtSpan, FormatOptions} from './FormatMisc';
 import {createRenderer} from './FormatUtils';
 import {saveOriginal} from './impl/Utils';
@@ -148,6 +148,48 @@ export function fmtCompactDate(v: DateLike, opts?: CompactDateFormatOptions) {
     return fmtDate(v, dateOpts);
 }
 
+export interface TimestampReplacerConfig {
+    /**
+     * Suffixes used to identify keys that may hold timestamps.
+     * Defaults to ['time', 'date', 'timestamp']
+     */
+    suffixes?: string[];
+
+    /**
+     * Format for replaced timestamp.
+     * Defaults to 'MMM DD HH:mm:ss.SSS'
+     */
+    format?: string;
+}
+
+/**
+ * Replace timestamps in an Object with formatted strings.
+ */
+export function withFormattedTimestamps(
+    obj: PlainObject,
+    config: TimestampReplacerConfig = {}
+): PlainObject {
+    return JSON.parse(JSON.stringify(obj, timestampReplacer(config)));
+}
+
+/**
+ * Create a replacer, suitable for JSON.stringify, that will replace timestamps with
+ * formatted strings.
+ */
+export function timestampReplacer(
+    config: TimestampReplacerConfig = {}
+): (k: string, v: any) => any {
+    const suffixes = config.suffixes ?? ['time', 'date', 'timestamp'],
+        fmt = 'MMM DD HH:mm:ss.SSS';
+    return (k: string, v: any) => {
+        return suffixes.some(s => k.toLowerCase().endsWith(s.toLowerCase())) &&
+            isFinite(v) &&
+            v > Date.now() - 25 * 365 * DAYS // heuristic to avoid catching smaller ms ranges
+            ? fmtDateTime(v, {fmt})
+            : v;
+    };
+}
+
 export const dateRenderer = createRenderer(fmtDate),
     dateTimeRenderer = createRenderer(fmtDateTime),
     dateTimeSecRenderer = createRenderer(fmtDateTimeSec),

package/format/FormatMisc.ts

@@ -5,8 +5,9 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {span} from '@xh/hoist/cmp/layout';
-import {capitalize, isNil, kebabCase, map} from 'lodash';
+import {capitalize, isNil, isString, kebabCase, map} from 'lodash';
 import {CSSProperties, ReactNode} from 'react';
+import {PlainObject} from '@xh/hoist/core';
 
 export interface FormatOptions<T = any> {
     /** Display value for null values. */
@@ -63,11 +64,12 @@ export interface JSONFormatOptions {
 }
 
 /**
- * Pretty-print a JSON string, adding line breaks and indentation.
+ * Pretty-print a JSON string or (JSON Object), adding line breaks and indentation.
  */
-export function fmtJson(str: string, opts?: JSONFormatOptions): string {
+export function fmtJson(v: string | PlainObject, opts?: JSONFormatOptions): string {
     const {replacer = undefined, space = 2} = opts ?? {};
-    return isNil(str) ? '' : JSON.stringify(JSON.parse(str), replacer, space);
+    if (isString(v)) v = JSON.parse(v);
+    return isNil(v) ? '' : JSON.stringify(v, replacer, space);
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "72.2.0",
+  "version": "72.4.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@auth0/auth0-spa-js": "~2.1.3",
-    "@azure/msal-browser": "~3.28.0",
+    "@azure/msal-browser": "~4.8.0",
     "@blueprintjs/core": "^5.10.5",
     "@blueprintjs/datetime": "^5.3.7",
     "@blueprintjs/datetime2": "^2.3.7",

package/security/BaseOAuthClient.ts

@@ -64,14 +64,13 @@ export interface BaseOAuthClientConfig<S extends AccessTokenSpec> {
     idScopes?: string[];
 
     /**
-     * Optional map of access tokens to be loaded and maintained.
+     * Optional spec for access tokens to be loaded and maintained to support access to one or more
+     * different back-end resources, distinct from the core Hoist auth flow via ID token.
      *
-     * Map of code to a spec for an access token.  The code is app-determined and
-     * will simply be used to get the loaded token via tha getAccessToken() method. The
-     * spec is implementation specific, but will typically include scopes to be loaded
-     * for the access token and potentially other meta-data required by the underlying provider.
-     *
-     * Use this map to gain targeted access tokens for different back-end resources.
+     * Map of key to a spec for an access token. The key is an arbitrary, app-determined string
+     * used to retrieve the loaded token via {@link getAccessTokenAsync}. The spec is implementation
+     * specific, but will typically include scopes to be loaded for the access token and potentially
+     * other metadata required by the underlying provider.
      */
     accessTokens?: Record<string, S>;
 }
@@ -120,7 +119,7 @@ export abstract class BaseOAuthClient<
         throwIf(!config.clientId, 'Missing OAuth clientId. Please review your configuration.');
 
         this.idScopes = union(['openid', 'email'], config.idScopes);
-        this.accessSpecs = this.config.accessTokens;
+        this.accessSpecs = this.config.accessTokens ?? {};
     }
 
     /**
@@ -164,7 +163,10 @@ export abstract class BaseOAuthClient<
      * Get an Access token.
      */
     async getAccessTokenAsync(key: string): Promise<Token> {
-        return this.fetchAccessTokenAsync(this.accessSpecs[key], true);
+        const spec = this.accessSpecs[key];
+        if (!spec) throw XH.exception(`No access token spec configured for key "${key}"`);
+
+        return this.fetchAccessTokenAsync(spec, true);
     }
 
     /**
@@ -314,7 +316,7 @@ export abstract class BaseOAuthClient<
         const eagerOnly = opts?.eagerOnly ?? false,
             useCache = opts?.useCache ?? true,
             accessSpecs = eagerOnly
-                ? pickBy(this.accessSpecs, spec => spec.fetchMode === 'eager')
+                ? pickBy(this.accessSpecs, spec => spec.fetchMode !== 'lazy') // specs are eager by default - opt-in to lazy
                 : this.accessSpecs,
             ret: TokenMap = {};
 

package/security/Types.ts

@@ -7,16 +7,45 @@
 
 import {Token} from './Token';
 
-export type TokenMap = Record<string, Token>;
-
 export interface AccessTokenSpec {
     /**
-     * Mode governing when the access token should be requested from provider.
-     *      eager (default) - initiate lookup on initialization, but do not block on failure.
-     *      lazy - lookup when requested by client.
+     * Mode governing when the access token should be requested from provider:
+     *      - eager (or undefined) - load on overall initialization, but do not block on failure.
+     *        Useful for tokens that an app is almost certain to require during a user session.
+     *      - lazy - defer loading until first requested by client. Useful for tokens that might
+     *        never be needed by the app during a given user session.
      */
-    fetchMode: 'eager' | 'lazy';
+    fetchMode?: 'eager' | 'lazy';
 
     /** Scopes for the desired access token.*/
     scopes: string[];
 }
+
+export type TokenMap = Record<string, Token>;
+
+/** Aggregated telemetry results, produced by {@link MsalClient} when enabled via config. */
+export interface TelemetryResults {
+    /** Stats by event type - */
+    events: Record<string, TelemetryEventResults>;
+}
+
+/** Aggregated telemetry results for a single type of event. */
+export interface TelemetryEventResults {
+    firstTime: number;
+    lastTime: number;
+    successCount: number;
+    failureCount: number;
+    /** Timing info (in ms) for event instances reported with duration. */
+    duration: {
+        count: number;
+        total: number;
+        average: number;
+        worst: number;
+    };
+    lastFailure?: {
+        time: number;
+        duration: number;
+        code: string;
+        name: string;
+    };
+}

package/security/msal/MsalClient.ts

@@ -7,17 +7,20 @@
 import * as msal from '@azure/msal-browser';
 import {
     AccountInfo,
+    BrowserPerformanceClient,
+    Configuration,
     IPublicClientApplication,
     LogLevel,
     PopupRequest,
     SilentRequest
 } from '@azure/msal-browser';
-import {XH} from '@xh/hoist/core';
+import {AppState, PlainObject, XH} from '@xh/hoist/core';
 import {Token} from '@xh/hoist/security/Token';
-import {AccessTokenSpec, TokenMap} from '../Types';
 import {logDebug, logError, logInfo, logWarn, mergeDeep, throwIf} from '@xh/hoist/utils/js';
+import {withFormattedTimestamps} from '@xh/hoist/format';
 import {flatMap, union, uniq} from 'lodash';
 import {BaseOAuthClient, BaseOAuthClientConfig} from '../BaseOAuthClient';
+import {AccessTokenSpec, TelemetryResults, TokenMap} from '../Types';
 
 export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
     /**
@@ -34,6 +37,13 @@ export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
      */
     domainHint?: string;
 
+    /**
+     * True to enable support for built-in telemetry provided by this class's internal MSAL client.
+     * Captured performance events will be summarized via {@link telemetryResults}.
+     * See https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/performance.md
+     */
+    enableTelemetry?: boolean;
+
     /**
      * If specified, the client will use this value when initializing the app to enforce a minimum
      * amount of time during which no further auth flow with the provider should be necessary.
@@ -104,6 +114,10 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
     private account: AccountInfo; // Authenticated account
     private initialTokenLoad: boolean;
 
+    /** Enable telemetry via `enableTelemetry` ctor config, or via {@link enableTelemetry}. */
+    telemetryResults: TelemetryResults = {events: {}};
+    private _telemetryCbHandle: string = null;
+
     constructor(config: MsalClientConfig) {
         super({
             initRefreshTokenExpirationOffsetSecs: -1,
@@ -118,6 +132,9 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
     //-------------------------------------------
     protected override async doInitAsync(): Promise<TokenMap> {
         const client = (this.client = await this.createClientAsync());
+        if (this.config.enableTelemetry) {
+            this.enableTelemetry();
+        }
 
         // 0) Handle redirect return
         const redirectResp = await client.handleRedirectPromise();
@@ -247,6 +264,85 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
             : await client.logoutPopup(opts);
     }
 
+    //------------------------
+    // Telemetry
+    //------------------------
+    getFormattedTelemetry(): PlainObject {
+        return withFormattedTimestamps(this.telemetryResults);
+    }
+
+    enableTelemetry(): void {
+        if (this._telemetryCbHandle) {
+            this.logInfo('Telemetry already enabled', this.getFormattedTelemetry());
+            return;
+        }
+
+        this.telemetryResults = {events: {}};
+
+        this._telemetryCbHandle = this.client.addPerformanceCallback(events => {
+            events.forEach(e => {
+                try {
+                    const {events} = this.telemetryResults,
+                        {name, startTimeMs, durationMs, success, errorName, errorCode} = e,
+                        eTime = startTimeMs ?? Date.now();
+
+                    const eResult = (events[name] ??= {
+                        firstTime: eTime,
+                        lastTime: eTime,
+                        successCount: 0,
+                        failureCount: 0,
+                        duration: {count: 0, total: 0, average: 0, worst: 0},
+                        lastFailure: null
+                    });
+                    eResult.lastTime = eTime;
+
+                    if (success) {
+                        eResult.successCount++;
+                    } else {
+                        eResult.failureCount++;
+                        eResult.lastFailure = {
+                            time: eTime,
+                            duration: e.durationMs,
+                            code: errorCode,
+                            name: errorName
+                        };
+                    }
+
+                    if (durationMs) {
+                        const {duration} = eResult;
+                        duration.count++;
+                        duration.total += durationMs;
+                        duration.average = Math.round(duration.total / duration.count);
+                        duration.worst = Math.max(duration.worst, durationMs);
+                    }
+                } catch (e) {
+                    this.logError(`Error processing telemetry event`, e);
+                }
+            });
+        });
+
+        // Wait for clientHealthService (this client likely initialized during earlier AUTHENTICATING.)
+        this.addReaction({
+            when: () => XH.appState === AppState.INITIALIZING_APP,
+            run: () => XH.clientHealthService.addSource('msalClient', () => this.telemetryResults)
+        });
+
+        this.logInfo('Telemetry enabled');
+    }
+
+    disableTelemetry(): void {
+        if (!this._telemetryCbHandle) {
+            this.logInfo('Telemetry already disabled');
+            return;
+        }
+
+        this.client.removePerformanceCallback(this._telemetryCbHandle);
+        this._telemetryCbHandle = null;
+
+        XH.clientHealthService.removeSource('msalClient');
+        this.logInfo('Telemetry disabled', this.getFormattedTelemetry());
+    }
+
     //------------------------
     // Private implementation
     //------------------------
@@ -263,29 +359,38 @@ export class MsalClient extends BaseOAuthClient<MsalClientConfig, MsalTokenSpec>
     }
 
     private async createClientAsync(): Promise<IPublicClientApplication> {
-        const {clientId, authority, msalLogLevel, msalClientOptions} = this.config;
+        const {clientId, authority, msalLogLevel, msalClientOptions, enableTelemetry} = this.config;
         throwIf(!authority, 'Missing MSAL authority. Please review your configuration.');
 
-        return msal.PublicClientApplication.createPublicClientApplication(
-            mergeDeep(
-                {
-                    auth: {
-                        clientId,
-                        authority,
-                        postLogoutRedirectUri: this.postLogoutRedirectUrl
-                    },
-                    system: {
-                        loggerOptions: {
-                            loggerCallback: this.logFromMsal,
-                            logLevel: msalLogLevel
-                        }
-                    },
-                    cache: {
-                        cacheLocation: 'localStorage' // allows sharing auth info across tabs.
+        const mergedConf: Configuration = mergeDeep(
+            {
+                auth: {
+                    clientId,
+                    authority,
+                    postLogoutRedirectUri: this.postLogoutRedirectUrl
+                },
+                system: {
+                    loggerOptions: {
+                        loggerCallback: this.logFromMsal,
+                        logLevel: msalLogLevel
                     }
                 },
-                msalClientOptions
-            )
+                cache: {
+                    cacheLocation: 'localStorage' // allows sharing auth info across tabs.
+                }
+            },
+            msalClientOptions
+        );
+
+        return msal.PublicClientApplication.createPublicClientApplication(
+            enableTelemetry
+                ? {
+                      ...mergedConf,
+                      telemetry: {
+                          client: new BrowserPerformanceClient(mergedConf)
+                      }
+                  }
+                : mergedConf
         );
     }
 

package/svc/ClientHealthService.ts

@@ -0,0 +1,165 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+import {HoistService, PageState, PlainObject, XH} from '@xh/hoist/core';
+import {Timer} from '@xh/hoist/utils/async';
+import {MINUTES} from '@xh/hoist/utils/datetime';
+import {withFormattedTimestamps} from '@xh/hoist/format';
+import {pick, round} from 'lodash';
+
+/**
+ * Service for gathering data about client health.
+ *
+ * Hoist sends this data once on application load, and can be configured to send
+ * it at regularly scheduled intervals.  Configure via soft-config property
+ * 'xhActivityTracking.clientHealthReport'.
+ */
+export class ClientHealthService extends HoistService {
+    static instance: ClientHealthService;
+
+    private sources: Map<string, () => any> = new Map();
+
+    override async initAsync() {
+        const {clientHealthReport} = XH.trackService.conf;
+        Timer.create({
+            runFn: () => this.sendReport(),
+            interval: clientHealthReport.intervalMins * MINUTES,
+            delay: true
+        });
+    }
+
+    /**
+     * Main entry point.  Return a default report of client health.
+     */
+    getReport(): ClientHealthReport {
+        return {
+            general: this.getGeneral(),
+            memory: this.getMemory(),
+            connection: this.getConnection(),
+            ...this.getCustom()
+        };
+    }
+
+    /** Get report, suitable for viewing in console. **/
+    getFormattedReport(): PlainObject {
+        return withFormattedTimestamps(this.getReport());
+    }
+
+    /**
+     * Register a new source for client health report data. No-op if background health report is
+     * not generally enabled via `xhActivityTrackingConfig.clientHealthReport.intervalMins`.
+     *
+     * @param key - key under which to report the data - can be used to remove this source later.
+     * @param callback - function returning serializable to include with each report.
+     */
+    addSource(key: string, callback: () => any) {
+        this.sources.set(key, callback);
+    }
+
+    /** Unregister a previously-enabled source for client health report data. */
+    removeSource(key: string) {
+        this.sources.delete(key);
+    }
+
+    // -----------------------------------
+    // Generate individual report sections
+    //------------------------------------
+    getGeneral(): GeneralData {
+        const startTime = XH.appContainerModel.appStateModel.loadStarted,
+            elapsedMins = (ts: number) => round((Date.now() - ts) / 60_000, 1);
+
+        return {
+            startTime,
+            durationMins: elapsedMins(startTime),
+            idleMins: elapsedMins(XH.lastActivityMs),
+            pageState: XH.pageState,
+            webSocket: XH.webSocketService.channelKey
+        };
+    }
+
+    getConnection(): ConnectionData {
+        const nav = window.navigator as any;
+        if (!nav.connection) return null;
+        return pick(nav.connection, ['downlink', 'effectiveType', 'rtt']);
+    }
+
+    getMemory(): MemoryData {
+        const perf = window.performance as any;
+        if (!perf?.memory) return null;
+
+        const ret: MemoryData = {modelCount: XH.getModels().length};
+        ['jsHeapSizeLimit', 'totalJSHeapSize', 'usedJSHeapSize'].forEach(key => {
+            const raw = perf.memory[key];
+            if (raw) ret[key] = round(raw / 1024 / 1024); // convert to MB
+        });
+
+        const {jsHeapSizeLimit: limit, usedJSHeapSize: used} = ret;
+        if (limit && used) {
+            ret.usedPctLimit = round((used / limit) * 100);
+        }
+
+        return ret;
+    }
+
+    getCustom(): PlainObject {
+        const ret = {};
+        this.sources.forEach((cb, k) => {
+            try {
+                ret[k] = cb();
+            } catch (e) {
+                ret[k] = `Error: ${e.message}`;
+                this.logWarn(`Error running client health report callback for [${k}]`, e);
+            }
+        });
+        return ret;
+    }
+
+    //------------------
+    // Implementation
+    //------------------
+    private sendReport() {
+        const {intervalMins, ...rest} = XH.trackService.conf.clientHealthReport ?? {};
+
+        XH.track({
+            category: 'App',
+            message: 'Submitted health report',
+            ...rest,
+            data: {
+                clientId: XH.clientId,
+                sessionId: XH.sessionId,
+                ...this.getReport()
+            }
+        });
+    }
+}
+
+export interface GeneralData {
+    startTime: number;
+    durationMins: number;
+    idleMins: number;
+    pageState: PageState;
+    webSocket: string;
+}
+
+export interface ConnectionData {
+    downlink: number;
+    effectiveType: string;
+    rtt: number;
+}
+
+export interface MemoryData {
+    modelCount: number;
+    usedPctLimit?: number;
+    jsHeapSizeLimit?: number;
+    totalJSHeapSize?: number;
+    usedJSHeapSize?: number;
+}
+
+export interface ClientHealthReport {
+    general: GeneralData;
+    connection: ConnectionData;
+    memory: MemoryData;
+}

package/svc/FetchService.ts

@@ -217,8 +217,9 @@ export class FetchService extends HoistService {
     //-----------------------
     private async fetchInternalAsync(opts: FetchOptions): Promise<any> {
         opts = this.withCorrelationId(opts);
-        opts = await this.withDefaultHeadersAsync(opts);
-        let ret = this.managedFetchAsync(opts);
+
+        // Core Promise - chained with custom headers callback to ensure that work is included in overall tracked time.
+        let ret = this.withDefaultHeadersAsync(opts).then(opts => this.managedFetchAsync(opts));
 
         // Apply tracking
         const {correlationId, loadSpec, track} = opts;