@xh/hoist 72.1.0 → 72.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## v72.2.0 - 2025-03-13
+
+### 🎁 New Features
+* Modified `TabContainerModel` to make more methods `protected`, improving extensibility for
+  advanced use-cases.
+* Enhanced `XH.reloadApp` with new argument to clear query parameters before loading.
+* Enhanced exception handling in `FetchService` to capture messages returned as raw strings, or
+  without explicit names.
+* Added dedicated columns to the Admin Console "Client Errors" tab for error names and messages.
+* `BaseOAuthClient` has been enhanced to allow `lazy` loading of Access Tokens, and also made more
+  robust such that Access Tokens that fail to load will never prevent the client from
+  initialization.
+
+### 🐞 Bug Fixes
+
+* Prevent native browser context menu on Dash Canvas surfaces. It can hide the Dash Canvas custom
+  context menu when an app's `showBrowserContextMenu` flag is `true`.
+
 ## v72.1.0 - 2025-02-13
 
 ### 🎁 New Features

package/admin/tabs/activity/clienterrors/ClientErrorsModel.ts

@@ -9,7 +9,7 @@ import * as Col from '@xh/hoist/admin/columns';
 import {FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {FormModel} from '@xh/hoist/cmp/form';
 import {GridModel} from '@xh/hoist/cmp/grid';
-import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
+import {HoistModel, LoadSpec, managed, PlainObject, XH} from '@xh/hoist/core';
 import {StoreRecord} from '@xh/hoist/data';
 import {fmtJson} from '@xh/hoist/format';
 import {action, bindable, comparer, computed, makeObservable, observable} from '@xh/hoist/mobx';
@@ -62,6 +62,14 @@ export class ClientErrorsModel extends HoistModel {
                 {...Col.appVersion},
                 {...Col.appEnvironment},
                 {...Col.msg, displayName: 'User Message', hidden},
+                {
+                    field: {name: 'errorName', type: 'string'},
+                    autosizeMaxWidth: 400
+                },
+                {
+                    field: {name: 'errorMessage', type: 'string'},
+                    autosizeMaxWidth: 400
+                },
                 {...Col.error, hidden},
                 {...Col.url},
                 {...Col.correlationId},
@@ -119,18 +127,29 @@ export class ClientErrorsModel extends HoistModel {
     }
 
     override async doLoadAsync(loadSpec: LoadSpec) {
-        const {gridModel} = this;
+        const {query, gridModel} = this;
 
         try {
-            const data = await XH.fetchService.postJson({
+            const data: PlainObject[] = await XH.fetchService.postJson({
                 url: 'clientErrorAdmin',
-                body: this.query,
+                body: query,
                 loadSpec
             });
 
+            // Parse name + message from JSON-serialized error object out to top-level properties.
+            data.forEach(it => {
+                try {
+                    const error = JSON.parse(it.error);
+                    it.errorName = error?.name;
+                    it.errorMessage = error?.message;
+                } catch (ignored) {}
+            });
+
             gridModel.loadData(data);
             await gridModel.preSelectFirstAsync();
         } catch (e) {
+            if (loadSpec.isStale || loadSpec.isAutoRefresh) return;
+
             gridModel.clear();
             XH.handleException(e);
         }

package/admin/tabs/userData/roles/details/RoleDetailsModel.ts

@@ -44,7 +44,7 @@ export class RoleDetailsModel extends HoistModel {
                 );
 
                 this.setTabTitle('users', 'Users', role?.effectiveUsers);
-                this.setTabTitle('directories', 'Directories', role?.effectiveDirectoryGroups);
+                this.setTabTitle('directories', 'Dir. Groups', role?.effectiveDirectoryGroups);
                 this.setTabTitle('effectiveRoles', 'Granted To', role?.effectiveRoles);
                 this.setTabTitle('inheritedRoles', 'Inheriting From', role?.inheritedRoles);
             },
@@ -77,6 +77,7 @@ export class RoleDetailsModel extends HoistModel {
                 },
                 {
                     id: 'directories',
+                    title: 'Dir. Groups',
                     omit: !this.roleModel.moduleConfig.directoryGroupsSupported,
                     content: directoryMembers
                 },

package/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel.ts

@@ -65,8 +65,8 @@ export class RecategorizeDialogModel extends HoistModel {
                     }
                 })
                 .linkTo(this.savingTask);
-            await this.parent.refreshAsync();
             this.close();
+            await this.parent.refreshAsync();
         } catch (e) {
             XH.handleException(e);
         }

package/build/types/cmp/tab/TabContainerModel.d.ts

@@ -68,7 +68,7 @@ export declare class TabContainerModel extends HoistModel implements Persistable
     refreshMode: RefreshMode;
     emptyText: ReactNode;
     refreshContextModel: RefreshContextModel;
-    private lastActiveTabId;
+    protected lastActiveTabId: string;
     constructor({ tabs, defaultTabId, route, switcher, track, renderMode, refreshMode, persistWith, emptyText, xhImpl }: TabContainerConfig);
     /** Set/replace all tabs within the container. */
     setTabs(tabs: Array<TabModel | TabConfig>): void;
@@ -110,10 +110,10 @@ export declare class TabContainerModel extends HoistModel implements Persistable
     setPersistableState(state: PersistableState<{
         activeTabId: string;
     }>): void;
-    private setActiveTabIdInternal;
-    private syncWithRouter;
-    private forwardRouterToTab;
-    private calculateActiveTabId;
+    protected setActiveTabIdInternal(id: any): void;
+    protected syncWithRouter(): void;
+    protected forwardRouterToTab(id: any): void;
+    protected calculateActiveTabId(tabs: any): any;
 }
 export interface AddTabOptions {
     /** Index in tab collection where tab is to be added. */

package/build/types/core/HoistProps.d.ts

@@ -95,6 +95,7 @@ export interface LayoutProps {
     flexGrow?: string | number;
     flexShrink?: string | number;
     flexWrap?: Property.FlexWrap;
+    gap?: string | number;
     alignItems?: string;
     alignSelf?: string;
     alignContent?: string;

package/build/types/core/XH.d.ts

@@ -9,9 +9,9 @@ import { AppContainerModel } from '../appcontainer/AppContainerModel';
 import { BannerModel } from '../appcontainer/BannerModel';
 import { ToastModel } from '../appcontainer/ToastModel';
 import '../styles/XH.scss';
-import { AppSpec, AppState, AppSuspendData, BannerSpec, ExceptionHandler, ExceptionHandlerOptions, HoistAppModel, HoistException, HoistService, HoistServiceClass, HoistUser, MessageSpec, PageState, PlainObject, SizingMode, TaskObserver, Theme, ToastSpec, TrackOptions } from './';
+import { AppSpec, AppState, AppSuspendData, BannerSpec, ExceptionHandler, ExceptionHandlerOptions, HoistAppModel, HoistException, HoistService, HoistServiceClass, HoistUser, MessageSpec, PageState, PlainObject, ReloadAppOptions, SizingMode, TaskObserver, Theme, ToastSpec, TrackOptions } from './';
 import { HoistModel, ModelSelector, RefreshContextModel } from './model';
-export declare const MIN_HOIST_CORE_VERSION = "21.0";
+export declare const MIN_HOIST_CORE_VERSION = "28.0";
 /**
  * Top-level Singleton model for Hoist. This is the main entry point for the API.
  *
@@ -193,13 +193,13 @@ export declare class XHApi {
     /**
      * Trigger a full reload of the current application.
      *
-     * @param path - relative path to reload (e.g. 'mobile/').  Defaults to the
-     * existing location pathname.
+     * @param opts - options to govern reload. To support legacy usages, a provided
+     *       string will be treated as `ReloadAppOptions.path`.
      *
      * This method will reload the entire application document in the browser - to trigger a
      * refresh of the loadable content within the app, use {@link refreshAppAsync} instead.
      */
-    reloadApp(path?: string): void;
+    reloadApp(opts?: ReloadAppOptions | string): void;
     /**
      * Refresh the current application.
      *

package/build/types/core/types/Interfaces.d.ts

@@ -19,6 +19,15 @@ export interface HoistUser {
     hasRole(s: string): boolean;
     hasGate(s: string): boolean;
 }
+/**
+ * Options governing XH.reloadApp().
+ */
+export interface ReloadAppOptions {
+    /** Relative path to reload (e.g. 'mobile/').  Defaults to the existing location pathname. */
+    path?: string;
+    /** Should the query parameters be removed from the url before reload.  Default false. */
+    removeQueryParams?: boolean;
+}
 /**
  * Options for showing a "toast" notification that appears and then automatically dismisses.
  */

package/build/types/desktop/cmp/appOption/AutoRefreshAppOption.d.ts

@@ -61,6 +61,7 @@ export declare const autoRefreshAppOption: ({ formFieldProps, inputProps }?: Aut
         flexGrow?: string | number;
         flexShrink?: string | number;
         flexWrap?: import("csstype").Property.FlexWrap;
+        gap?: string | number;
         alignItems?: string;
         alignSelf?: string;
         alignContent?: string;

package/build/types/desktop/cmp/appOption/ThemeAppOption.d.ts

@@ -59,6 +59,7 @@ export declare const themeAppOption: ({ formFieldProps, inputProps }?: ThemeAppO
         flexGrow?: string | number;
         flexShrink?: string | number;
         flexWrap?: import("csstype").Property.FlexWrap;
+        gap?: string | number;
         alignItems?: string;
         alignSelf?: string;
         alignContent?: string;

package/build/types/kit/blueprint/Wrappers.d.ts

@@ -2,5 +2,5 @@
 import { Alert, Button, ButtonGroup, Callout, Card, Checkbox, ControlGroup, Dialog, Drawer, EditableText, FileInput, FormGroup, Hotkey, Hotkeys, InputGroup, Label, Menu, MenuDivider, MenuItem, Navbar, NavbarDivider, NavbarGroup, NavbarHeading, NumericInput, OverflowList, Overlay2 as Overlay, Popover, Radio, RadioGroup, RangeSlider, Slider, Switch, Tab, Tabs, Tag, TagInput, Text, TextArea, Tooltip, Tree } from '@blueprintjs/core';
 import { DatePicker3 as DatePicker } from '@blueprintjs/datetime2';
 export { Alert, Button, ButtonGroup, Callout, Card, Checkbox, ControlGroup, DatePicker, Dialog, Drawer, EditableText, FileInput, FormGroup, Hotkeys, Hotkey, InputGroup, Label, Menu, MenuItem, MenuDivider, Navbar, NavbarDivider, NavbarGroup, NavbarHeading, NumericInput, OverflowList, Overlay, Popover, Radio, RadioGroup, RangeSlider, Slider, Switch, Tab, Tabs, Tag, TagInput, TextArea, Text, Tooltip, Tree };
-export declare const alert: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").AlertProps>, button: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").ButtonProps>, controlGroup: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").ControlGroupProps>, checkbox: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").CheckboxProps>, dialog: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").DialogProps>, datePicker: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/datetime2").DatePicker3Props>, menuDivider: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").MenuDividerProps>, menuItem: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").MenuItemProps>, navbarDivider: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").NavbarDividerProps>, numericInput: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").HTMLInputProps & import("@blueprintjs/core").NumericInputProps>, overflowList: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").OverflowListProps<any>>, popover: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").PopoverProps<import("@blueprintjs/core").DefaultPopoverTargetHTMLProps>>, radio: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").ControlProps>, rangeSlider: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").RangeSliderProps>, slider: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").SliderProps>, switchControl: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").SwitchProps>, textArea: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TextAreaProps>, tree: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TreeProps<unknown>>, tagInput: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TagInputProps>, fileInput: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").FileInputProps>, overlay: import("@xh/hoist/core").ElementFactory<Pick<import("@blueprintjs/core").Overlay2Props, "lazy" | "className" | "onClose" | "children" | "key" | "autoFocus" | "transitionDuration" | "canEscapeKeyClose" | "enforceFocus" | "shouldReturnFocusOnClose" | "usePortal" | "portalClassName" | "portalContainer" | "portalStopPropagationEvents" | "isOpen" | "transitionName" | "onClosing" | "onClosed" | "onOpening" | "onOpened" | "backdropClassName" | "backdropProps" | "canOutsideClickClose" | "hasBackdrop" | "childRef" | "childRefs"> & import("react").RefAttributes<import("@blueprintjs/core").OverlayInstance>>, tooltip: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TooltipProps<import("@blueprintjs/core").DefaultPopoverTargetHTMLProps>>;
+export declare const alert: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").AlertProps>, button: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").ButtonProps>, controlGroup: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").ControlGroupProps>, checkbox: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").CheckboxProps>, dialog: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").DialogProps>, datePicker: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/datetime2").DatePicker3Props>, menuDivider: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").MenuDividerProps>, menuItem: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").MenuItemProps>, navbarDivider: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").NavbarDividerProps>, numericInput: import("@xh/hoist/core").ElementFactory<Omit<import("@blueprintjs/core").HTMLInputProps, "size"> & import("@blueprintjs/core").NumericInputProps>, overflowList: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").OverflowListProps<any>>, popover: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").PopoverProps<import("@blueprintjs/core").DefaultPopoverTargetHTMLProps>>, radio: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").ControlProps>, rangeSlider: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").RangeSliderProps>, slider: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").SliderProps>, switchControl: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").SwitchProps>, textArea: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TextAreaProps>, tree: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TreeProps<unknown>>, tagInput: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TagInputProps>, fileInput: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").FileInputProps>, overlay: import("@xh/hoist/core").ElementFactory<Omit<import("@blueprintjs/core").Overlay2Props, "ref"> & import("react").RefAttributes<import("@blueprintjs/core").OverlayInstance>>, tooltip: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TooltipProps<import("@blueprintjs/core").DefaultPopoverTargetHTMLProps>>;
 export declare const buttonGroup: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").ButtonGroupProps>, callout: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").CalloutProps>, card: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").CardProps>, drawer: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").DrawerProps>, editableText: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").EditableTextProps>, formGroup: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").FormGroupProps>, hotkey: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").HotkeyProps>, hotkeys: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").HotkeysProps>, inputGroup: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").InputGroupProps>, label: import("@xh/hoist/core").ElementFactory<import("react").AllHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLLabelElement>>, menu: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").MenuProps>, navbar: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").NavbarProps>, navbarHeading: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").NavbarHeadingProps>, navbarGroup: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").NavbarGroupProps>, radioGroup: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").RadioGroupProps>, tabs: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TabsProps>, tab: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TabProps>, tag: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TagProps>, text: import("@xh/hoist/core").ElementFactory<import("@blueprintjs/core").TextProps>;

package/build/types/kit/swiper/index.d.ts

@@ -13,13 +13,10 @@ export declare const swiper: import("@xh/hoist/core").ElementFactory<import("rea
     onAutoplayResume?: (swiper: import("swiper/types/swiper-class").default) => void;
     onAutoplayTimeLeft?: (swiper: import("swiper/types/swiper-class").default, timeLeft: number, percentage: number) => void;
     onAutoplay?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onKeyPress?: (swiper: import("swiper/types/swiper-class").default, keyCode: string) => void;
     onHashChange?: (swiper: import("swiper/types/swiper-class").default) => void;
     onHashSet?: (swiper: import("swiper/types/swiper-class").default) => void;
-    onKeyPress?: (swiper: import("swiper/types/swiper-class").default, keyCode: string) => void;
     onScroll?: (swiper: import("swiper/types/swiper-class").default, event: WheelEvent) => void;
-    onScrollbarDragStart?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
-    onScrollbarDragMove?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
-    onScrollbarDragEnd?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
     onNavigationHide?: (swiper: import("swiper/types/swiper-class").default) => void;
     onNavigationShow?: (swiper: import("swiper/types/swiper-class").default) => void;
     onNavigationPrev?: (swiper: import("swiper/types/swiper-class").default) => void;
@@ -28,6 +25,9 @@ export declare const swiper: import("@xh/hoist/core").ElementFactory<import("rea
     onPaginationUpdate?: (swiper: import("swiper/types/swiper-class").default, paginationEl: HTMLElement) => void;
     onPaginationHide?: (swiper: import("swiper/types/swiper-class").default) => void;
     onPaginationShow?: (swiper: import("swiper/types/swiper-class").default) => void;
+    onScrollbarDragStart?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onScrollbarDragMove?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
+    onScrollbarDragEnd?: (swiper: import("swiper/types/swiper-class").default, event: MouseEvent | PointerEvent | TouchEvent) => void;
     onZoomChange?: (swiper: import("swiper/types/swiper-class").default, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
     onInit?: (swiper: import("swiper/types/swiper-class").default) => any;
     onBeforeDestroy?: (swiper: import("swiper/types/swiper-class").default) => void;

package/build/types/security/BaseOAuthClient.d.ts

@@ -1,7 +1,8 @@
 import { HoistBase } from '@xh/hoist/core';
-import { Token, TokenMap } from '@xh/hoist/security/Token';
+import { Token } from '@xh/hoist/security/Token';
+import { AccessTokenSpec, TokenMap } from './Types';
 export type LoginMethod = 'REDIRECT' | 'POPUP';
-export interface BaseOAuthClientConfig<S> {
+export interface BaseOAuthClientConfig<S extends AccessTokenSpec> {
     /** Client ID (GUID) of your app registered with your Oauth provider. */
     clientId: string;
     /**
@@ -23,24 +24,16 @@ export interface BaseOAuthClientConfig<S> {
      * Governs an optional refresh timer that will work to keep the tokens fresh.
      *
      * A typical refresh will use the underlying provider cache, and should not result in
-     * network activity. However, if any token lifetime falls below`autoRefreshSkipCacheSecs`,
+     * network activity. However, if any token would expire before the next autoRefresh,
      * this client will force a call to the underlying provider to get the token.
      *
      * In order to allow aging tokens to be replaced in a timely manner, this value should be
      * significantly shorter than both the minimum token lifetime that will be
-     * returned by the underlying API and `autoRefreshSkipCacheSecs`.
+     * returned by the underlying API.
      *
      * Default is -1, disabling this behavior.
      */
     autoRefreshSecs?: number;
-    /**
-     * During auto-refresh, if the remaining lifetime for any token is below this threshold,
-     * force the provider to skip the local cache and go directly to the underlying provider for
-     * new tokens and refresh tokens.
-     *
-     * Default is -1, disabling this behavior.
-     */
-    autoRefreshSkipCacheSecs?: number;
     /**
      * Scopes to request - if any - beyond the core `['openid', 'email']` scopes, which
      * this client will always request.
@@ -63,13 +56,12 @@ export interface BaseOAuthClientConfig<S> {
  * suitable concrete implementation to power a client-side OauthService. See `MsalClient` and
  * `AuthZeroClient`
  *
- * Initialize such a service and this client within the `preAuthInitAsync()` lifecycle method of
- * `AppModel` to use the tokens it acquires to authenticate with the Hoist server. (Note this
- * requires a suitable server-side `AuthenticationService` implementation to validate the token and
- * actually resolve the user.) On init, the client implementation will initiate a pop-up or redirect
- * flow as necessary.
+ * Initialize such a service and this client within an app's primary {@link HoistAuthModel} to use
+ * the tokens it acquires to authenticate with the Hoist server. (Note this requires a suitable
+ * server-side `AuthenticationService` implementation to validate the token and actually resolve
+ * the user.) On init, the client impl will initiate a pop-up or redirect flow as necessary.
  */
-export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>, S> extends HoistBase {
+export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>, S extends AccessTokenSpec> extends HoistBase {
     /** Config loaded from UI server + init method. */
     protected config: C;
     /** ID Scopes */
@@ -101,9 +93,12 @@ export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>
      */
     getAccessTokenAsync(key: string): Promise<Token>;
     /**
-     * Get all available tokens.
+     * Get all configured tokens.
      */
-    getAllTokensAsync(): Promise<TokenMap>;
+    getAllTokensAsync(opts?: {
+        eagerOnly?: boolean;
+        useCache?: boolean;
+    }): Promise<TokenMap>;
     /**
      * The last authenticated OAuth username.
      *
@@ -144,7 +139,10 @@ export declare abstract class BaseOAuthClient<C extends BaseOAuthClientConfig<S>
     protected restoreRedirectState(key: string): void;
     /** Call after requesting the provider library redirect the user away for auth. */
     protected maskAfterRedirectAsync(): Promise<void>;
-    protected fetchAllTokensAsync(useCache?: boolean): Promise<TokenMap>;
+    protected fetchAllTokensAsync(opts?: {
+        eagerOnly?: boolean;
+        useCache?: boolean;
+    }): Promise<TokenMap>;
     protected getLocalStorage(key: string, defaultValue?: any): any;
     protected setLocalStorage(key: string, value: any): void;
     private fetchIdTokenSafeAsync;

package/build/types/security/Token.d.ts

@@ -1,5 +1,4 @@
 import { PlainObject } from '@xh/hoist/core';
-export type TokenMap = Record<string, Token>;
 export declare class Token {
     readonly value: string;
     readonly decoded: PlainObject;

package/build/types/security/Types.d.ts

@@ -0,0 +1,12 @@
+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.
+     */
+    fetchMode: 'eager' | 'lazy';
+    /** Scopes for the desired access token.*/
+    scopes: string[];
+}

package/build/types/security/authzero/AuthZeroClient.d.ts

@@ -1,5 +1,6 @@
 import type { Auth0ClientOptions } from '@auth0/auth0-spa-js';
-import { Token, TokenMap } from '@xh/hoist/security/Token';
+import { Token } from '@xh/hoist/security/Token';
+import { AccessTokenSpec, TokenMap } from '../Types';
 import { BaseOAuthClient, BaseOAuthClientConfig } from '../BaseOAuthClient';
 export interface AuthZeroClientConfig extends BaseOAuthClientConfig<AuthZeroTokenSpec> {
     /** Domain of your app registered with Auth0.  */
@@ -24,9 +25,7 @@ export interface AuthZeroClientConfig extends BaseOAuthClientConfig<AuthZeroToke
      */
     authZeroClientOptions?: Partial<Auth0ClientOptions>;
 }
-export interface AuthZeroTokenSpec {
-    /** Scopes for the desired access token.*/
-    scopes: string[];
+export interface AuthZeroTokenSpec extends AccessTokenSpec {
     /**
      * Audience (i.e. API) identifier for AccessToken.  Must be registered with Auth0.
      * Note that this is required to ensure that issued token is a JWT and not an opaque string.

package/build/types/security/msal/MsalClient.d.ts

@@ -1,6 +1,7 @@
 import * as msal from '@azure/msal-browser';
 import { LogLevel } from '@azure/msal-browser';
-import { Token, TokenMap } from '@xh/hoist/security/Token';
+import { Token } from '@xh/hoist/security/Token';
+import { AccessTokenSpec, TokenMap } from '../Types';
 import { BaseOAuthClient, BaseOAuthClientConfig } from '../BaseOAuthClient';
 export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
     /**
@@ -44,9 +45,7 @@ export interface MsalClientConfig extends BaseOAuthClientConfig<MsalTokenSpec> {
      */
     msalClientOptions?: Partial<msal.Configuration>;
 }
-export interface MsalTokenSpec {
-    /** Scopes for the desired access token. */
-    scopes: string[];
+export interface MsalTokenSpec extends AccessTokenSpec {
     /**
      * Scopes to be added to the scopes requested during interactive and SSO logins.
      * See the `scopes` property on  `PopupRequest`, `RedirectRequest`, and `SSORequest`

package/cmp/tab/TabContainerModel.ts

@@ -108,7 +108,7 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
     @managed
     refreshContextModel: RefreshContextModel;
 
-    private lastActiveTabId: string;
+    protected lastActiveTabId: string;
 
     constructor({
         tabs = [],
@@ -342,7 +342,7 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
     // Implementation
     //-------------------------
     @action
-    private setActiveTabIdInternal(id) {
+    protected setActiveTabIdInternal(id) {
         const tab = this.findTab(id);
         throwIf(!tab, `Unknown Tab ${id} in TabContainer.`);
         throwIf(tab.disabled, `Cannot activate Tab ${id} because it is disabled!`);
@@ -351,7 +351,7 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         this.forwardRouterToTab(id);
     }
 
-    private syncWithRouter() {
+    protected syncWithRouter() {
         const {tabs, route} = this,
             {router} = XH,
             state = router.getState();
@@ -364,14 +364,14 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         }
     }
 
-    private forwardRouterToTab(id) {
+    protected forwardRouterToTab(id) {
         const {route} = this;
         if (route && id) {
             XH.router.forward(route, route + '.' + id);
         }
     }
 
-    private calculateActiveTabId(tabs) {
+    protected calculateActiveTabId(tabs) {
         let ret;
 
         // try route

package/core/HoistProps.ts

@@ -118,6 +118,7 @@ export interface LayoutProps {
     flexGrow?: string | number;
     flexShrink?: string | number;
     flexWrap?: Property.FlexWrap;
+    gap?: string | number;
 
     alignItems?: string;
     alignSelf?: string;

package/core/XH.ts

@@ -54,6 +54,7 @@ import {
     MessageSpec,
     PageState,
     PlainObject,
+    ReloadAppOptions,
     SizingMode,
     TaskObserver,
     Theme,
@@ -64,7 +65,7 @@ import {installServicesAsync} from './impl/InstallServices';
 import {instanceManager} from './impl/InstanceManager';
 import {HoistModel, ModelSelector, RefreshContextModel} from './model';
 
-export const MIN_HOIST_CORE_VERSION = '21.0';
+export const MIN_HOIST_CORE_VERSION = '28.0';
 
 declare const xhAppCode: string;
 declare const xhAppName: string;
@@ -392,18 +393,25 @@ export class XHApi {
     /**
      * Trigger a full reload of the current application.
      *
-     * @param path - relative path to reload (e.g. 'mobile/').  Defaults to the
-     * existing location pathname.
+     * @param opts - options to govern reload. To support legacy usages, a provided
+     *       string will be treated as `ReloadAppOptions.path`.
      *
      * This method will reload the entire application document in the browser - to trigger a
      * refresh of the loadable content within the app, use {@link refreshAppAsync} instead.
      */
     @action
-    reloadApp(path?: string) {
+    reloadApp(opts?: ReloadAppOptions | string) {
         never().linkTo(this.appLoadModel);
+
+        opts = isString(opts) ? {path: opts} : (opts ?? {});
+
         const {location} = window,
-            href = path ? `${location.origin}/${path.replace(/^\/+/, '')}` : location.href,
+            href = opts.path
+                ? `${location.origin}/${opts.path.replace(/^\/+/, '')}`
+                : location.href,
             url = new URL(href);
+
+        if (opts.removeQueryParams) url.search = '';
         // Add a unique query param to force a full reload without using the browser cache.
         url.searchParams.set('xhCacheBuster', Date.now().toString());
         document.location.assign(url);

package/core/exception/Exception.ts

@@ -7,7 +7,7 @@
 import {PlainObject, XH} from '@xh/hoist/core';
 import {FetchOptions} from '@xh/hoist/svc';
 import {pluralize} from '@xh/hoist/utils/js';
-import {isPlainObject} from 'lodash';
+import {isPlainObject, truncate} from 'lodash';
 import {FetchException, HoistException, TimeoutException, TimeoutExceptionConfig} from './Types';
 
 /**
@@ -90,17 +90,16 @@ export class Exception {
         // Try to "smart" decode as server provided JSON Exception (with a name)
         try {
             const cType = headers.get('Content-Type');
-            if (cType && cType.includes('application/json')) {
-                const serverDetails = JSON.parse(responseText);
-                if (serverDetails?.name) {
-                    return this.createFetchException({
-                        ...defaults,
-                        name: serverDetails.name,
-                        message: serverDetails.message,
-                        isRoutine: serverDetails.isRoutine ?? false,
-                        serverDetails
-                    });
-                }
+            if (cType?.includes('application/json')) {
+                const obj = safeParseJson(responseText),
+                    message = obj ? obj.message : truncate(responseText?.trim(), {length: 255});
+                return this.createFetchException({
+                    ...defaults,
+                    name: obj?.name ?? defaults.name,
+                    message: message ?? statusText,
+                    isRoutine: obj?.isRoutine ?? false,
+                    serverDetails: obj ?? responseText
+                });
             }
         } catch (ignored) {}
 
@@ -222,6 +221,14 @@ export class Exception {
     }
 }
 
+function safeParseJson(txt: string): PlainObject {
+    try {
+        return JSON.parse(txt);
+    } catch (ignored) {
+        return null;
+    }
+}
+
 export function isHoistException(src: unknown): src is HoistException {
     return src?.['isHoistException'];
 }

package/core/types/Interfaces.ts

@@ -28,6 +28,17 @@ export interface HoistUser {
     hasGate(s: string): boolean;
 }
 
+/**
+ * Options governing XH.reloadApp().
+ */
+export interface ReloadAppOptions {
+    /** Relative path to reload (e.g. 'mobile/').  Defaults to the existing location pathname. */
+    path?: string;
+
+    /** Should the query parameters be removed from the url before reload.  Default false. */
+    removeQueryParams?: boolean;
+}
+
 /**
  * Options for showing a "toast" notification that appears and then automatically dismisses.
  */

package/desktop/appcontainer/ExceptionDialog.ts

@@ -79,7 +79,7 @@ export const dismissButton = hoistCmp.factory<ExceptionDialogModel>(({model}) =>
               icon: Icon.refresh(),
               text: 'Reload App',
               autoFocus: true,
-              onClick: () => XH.reloadApp()
+              onClick: () => XH.reloadApp({removeQueryParams: true})
           })
         : button({
               text: 'Close',

package/desktop/cmp/dash/canvas/DashCanvas.ts

@@ -18,7 +18,7 @@ import {
 import {dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button/DashCanvasAddViewButton';
 import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
-import {TEST_ID} from '@xh/hoist/utils/js';
+import {consumeEvent, TEST_ID} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
 import {DashCanvasModel} from './DashCanvasModel';
@@ -125,6 +125,7 @@ const onContextMenu = (e, model) => {
             x = clientX + model.ref.current.scrollLeft,
             y = clientY + model.ref.current.scrollTop;
 
+        consumeEvent(e);
         showContextMenu(
             dashCanvasContextMenu({
                 dashCanvasModel: model,

package/package.json

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