@xh/hoist 75.0.0-SNAPSHOT.1753722797428 → 75.0.0-SNAPSHOT.1753727619217

package/CHANGELOG.md

@@ -37,6 +37,10 @@
 
 ### ⚙️ Technical
 
+* WebSockets are now enabled by default for client apps, as they have been on the server since Hoist
+  Core v20.2. Maintaining a WebSocket connection back to the Hoist server enables useful Admin
+  Console functionality and is recommended, but clients that must disable WebSockets can do so via
+  `AppSpec.disableWebSockets`. Note `AppSpec.enableWebSockets` is deprecated and can be removed.
 * Hoist now sets a reference to an app's singleton `AuthModel` on a static `instance` property of
   the app-specified class. App developers can declare a typed static `instance` property on their
   model class and use it to access the singleton with its proper type, vs. `XH.authModel`.
@@ -51,6 +55,18 @@
 * Removed deprecated `FetchService.setDefaultTimeout`
 * Removed deprecated `IdentityService.logoutAsync`
 
+### 📚 Libraries
+
+* @auth0/auth0-spa-js `2.1 → 2.3`
+* @azure/msal-browser `4.12 → 4.16`
+* filesize `6.4 → 11.0`
+* mobx-react-lite `4.0 → 4.1`
+* qs `6.13 → 6.14`
+* react-markdown `9.0 → 10.1`
+* regenerator-runtime `0.13 → 0.14`
+* semver `7.6 → 7.7`
+* short-unique-id `5.2 → 5.3`
+* ua-parser-js `1.0 → 2.0`
 
 ## v74.1.2 - 2025-07-03
 

package/appcontainer/UserAgentModel.ts

@@ -5,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {HoistModel} from '@xh/hoist/core';
-import parser from 'ua-parser-js';
+import {UAParser} from 'ua-parser-js';
 
 /**
  * Support for user agent parsing.
@@ -32,6 +32,6 @@ export class UserAgentModel extends HoistModel {
     // Implementation
     //---------------------
     private get uaParser() {
-        return (this._uaParser = this._uaParser ?? new parser());
+        return (this._uaParser = this._uaParser ?? new UAParser());
     }
 }

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

@@ -1,4 +1,4 @@
-import { HoistAppModel, HoistAuthModel, ElementFactory, HoistProps } from '@xh/hoist/core';
+import { ElementFactory, HoistAppModel, HoistAuthModel, HoistProps } from '@xh/hoist/core';
 import { Component, ComponentClass, FunctionComponent } from 'react';
 /**
  * Spec for a client-side Hoist application. A config matching this class's shape is provided
@@ -50,6 +50,13 @@ export declare class AppSpec<T extends HoistAppModel = HoistAppModel> {
      * either `@xh/hoist/desktop/AppContainer` or `@xh/hoist/mobile/AppContainer`.
      */
     containerClass: ComponentClass<HoistProps> | FunctionComponent<HoistProps>;
+    /**
+     * True to disable Hoist's built-in WebSocket support for this client app. Even if the app
+     * itself is not using WebSockets for business data, the Hoist Admin Console's "Clients" tab and
+     * related functionality benefit from having them enabled, so disable only if there is a good
+     * reason to do so.
+     */
+    disableWebSockets?: boolean;
     /**
      * True to disable Field-level XSS protection by default across all Stores/Fields in the app.
      * For use with secure, internal apps that do not display arbitrary/external user input and
@@ -102,15 +109,16 @@ export declare class AppSpec<T extends HoistAppModel = HoistAppModel> {
      *  initialized, including a breakdown of elapsed time throughout the init process.
      */
     trackAppLoad?: boolean;
-    /** True to enable Hoist websocket connectivity. */
+    /** @deprecated - use {@link AppSpec.disableWebSockets} instead. */
     webSocketsEnabled?: boolean;
-    constructor({ authModelClass, checkAccess, clientAppCode, clientAppName, componentClass, containerClass, disableXssProtection, enableLoginForm, enableLogout, idlePanel, isMobileApp, lockoutMessage, lockoutPanel, loginMessage, modelClass, showBrowserContextMenu, trackAppLoad, webSocketsEnabled }: {
+    constructor({ authModelClass, checkAccess, clientAppCode, clientAppName, componentClass, containerClass, disableWebSockets, disableXssProtection, enableLoginForm, enableLogout, idlePanel, isMobileApp, lockoutMessage, lockoutPanel, loginMessage, modelClass, showBrowserContextMenu, trackAppLoad, webSocketsEnabled }: {
         authModelClass?: typeof HoistAuthModel;
         checkAccess: any;
         clientAppCode?: string;
         clientAppName?: string;
         componentClass: any;
         containerClass: any;
+        disableWebSockets?: boolean;
         disableXssProtection?: boolean;
         enableLoginForm?: boolean;
         enableLogout?: boolean;
@@ -122,6 +130,6 @@ export declare class AppSpec<T extends HoistAppModel = HoistAppModel> {
         modelClass: any;
         showBrowserContextMenu?: boolean;
         trackAppLoad?: boolean;
-        webSocketsEnabled?: boolean;
+        webSocketsEnabled: any;
     });
 }

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

@@ -15,18 +15,18 @@ export declare const swiper: import("@xh/hoist/core").ElementFactory<import("rea
     onHashChange?: (swiper: import("swiper/react").SwiperClass) => void;
     onHashSet?: (swiper: import("swiper/react").SwiperClass) => void;
     onKeyPress?: (swiper: import("swiper/react").SwiperClass, keyCode: string) => void;
-    onScroll?: (swiper: import("swiper/react").SwiperClass, event: WheelEvent) => void;
     onNavigationHide?: (swiper: import("swiper/react").SwiperClass) => void;
     onNavigationShow?: (swiper: import("swiper/react").SwiperClass) => void;
     onNavigationPrev?: (swiper: import("swiper/react").SwiperClass) => void;
     onNavigationNext?: (swiper: import("swiper/react").SwiperClass) => void;
+    onScroll?: (swiper: import("swiper/react").SwiperClass, event: WheelEvent) => void;
+    onScrollbarDragStart?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onScrollbarDragMove?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onScrollbarDragEnd?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
     onPaginationRender?: (swiper: import("swiper/react").SwiperClass, paginationEl: HTMLElement) => void;
     onPaginationUpdate?: (swiper: import("swiper/react").SwiperClass, paginationEl: HTMLElement) => void;
     onPaginationHide?: (swiper: import("swiper/react").SwiperClass) => void;
     onPaginationShow?: (swiper: import("swiper/react").SwiperClass) => void;
-    onScrollbarDragStart?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onScrollbarDragMove?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
-    onScrollbarDragEnd?: (swiper: import("swiper/react").SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
     onZoomChange?: (swiper: import("swiper/react").SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
     onInit?: (swiper: import("swiper/react").SwiperClass) => any;
     onBeforeDestroy?: (swiper: import("swiper/react").SwiperClass) => void;

package/build/types/svc/WebSocketService.d.ts

@@ -24,14 +24,14 @@ import { HoistService, PlainObject } from '@xh/hoist/core';
  */
 export declare class WebSocketService extends HoistService {
     static instance: WebSocketService;
-    readonly HEARTBEAT_TOPIC = "xhHeartbeat";
     /** Check connection and send a new heartbeat (which should be promptly ack'd) every 10s. */
+    readonly HEARTBEAT_TOPIC = "xhHeartbeat";
     readonly HEARTBEAT_INTERVAL: number;
     readonly REG_SUCCESS_TOPIC = "xhRegistrationSuccess";
     readonly FORCE_APP_SUSPEND_TOPIC = "xhForceAppSuspend";
     readonly REQ_CLIENT_HEALTH_RPT_TOPIC = "xhRequestClientHealthReport";
     readonly METADATA_FOR_HANDSHAKE: string[];
-    /** True if WebSockets generally enabled - set statically in code via {@link AppSpec}. */
+    /** True if WebSockets not explicitly disabled via {@link AppSpec.disableWebSockets}. */
     enabled: boolean;
     /** Unique channel assigned by server upon successful connection. */
     channelKey: string;

package/cmp/error/ErrorMessage.scss

@@ -15,7 +15,7 @@
     border: 1px solid var(--xh-intent-danger);
     max-width: 50%;
     text-align: center;
-    word-break: break-word;
+    overflow-wrap: break-word;
 
     & > * {
       margin: 0 0 var(--xh-pad-px);

package/cmp/layout/TileFrame.scss

@@ -5,10 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 .xh-tile-frame {
-  // Scrollbar will be shown above the content in order to not take up width.
-  // Consider increasing the spacing for TileFrames that are expected to scroll.
-  overflow-y: overlay !important;
-  overflow-x: overlay !important;
+  overflow: auto !important;
 
   &__tile {
     position: absolute !important;

package/core/AppSpec.ts

@@ -4,9 +4,9 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {XH, HoistAppModel, HoistAuthModel, ElementFactory, HoistProps} from '@xh/hoist/core';
-import {throwIf} from '@xh/hoist/utils/js';
-import {isFunction, isNil, isString} from 'lodash';
+import {ElementFactory, HoistAppModel, HoistAuthModel, HoistProps, XH} from '@xh/hoist/core';
+import {apiDeprecated, throwIf} from '@xh/hoist/utils/js';
+import {isFunction, isNil, isString, isUndefined} from 'lodash';
 import {Component, ComponentClass, FunctionComponent} from 'react';
 
 /**
@@ -62,6 +62,14 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
      */
     containerClass: ComponentClass<HoistProps> | FunctionComponent<HoistProps>;
 
+    /**
+     * True to disable Hoist's built-in WebSocket support for this client app. Even if the app
+     * itself is not using WebSockets for business data, the Hoist Admin Console's "Clients" tab and
+     * related functionality benefit from having them enabled, so disable only if there is a good
+     * reason to do so.
+     */
+    disableWebSockets?: boolean;
+
     /**
      * True to disable Field-level XSS protection by default across all Stores/Fields in the app.
      * For use with secure, internal apps that do not display arbitrary/external user input and
@@ -125,7 +133,7 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
      */
     trackAppLoad?: boolean;
 
-    /** True to enable Hoist websocket connectivity. */
+    /** @deprecated - use {@link AppSpec.disableWebSockets} instead. */
     webSocketsEnabled?: boolean;
 
     constructor({
@@ -135,6 +143,7 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         clientAppName = XH.appName,
         componentClass,
         containerClass,
+        disableWebSockets = false,
         disableXssProtection = false,
         enableLoginForm = false,
         enableLogout = false,
@@ -146,7 +155,7 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         modelClass,
         showBrowserContextMenu = false,
         trackAppLoad = true,
-        webSocketsEnabled = false
+        webSocketsEnabled
     }) {
         throwIf(!componentClass, 'A Hoist App must define a componentClass');
 
@@ -164,12 +173,24 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
             'A Hoist App must specify a required role string or a function for checkAccess.'
         );
 
+        if (!isUndefined(webSocketsEnabled)) {
+            let msg: string;
+            if (webSocketsEnabled === false) {
+                disableWebSockets = true;
+                msg = `Specify disableWebSockets: true to continue actively disabling WebSockets if required.`;
+            } else {
+                msg = `WebSockets are now enabled by default - this property can be safely removed from your appSpec.`;
+            }
+            apiDeprecated('webSocketsEnabled', {msg, v: 'v78'});
+        }
+
         this.authModelClass = authModelClass;
         this.checkAccess = checkAccess;
         this.clientAppCode = clientAppCode;
         this.clientAppName = clientAppName;
         this.componentClass = componentClass;
         this.containerClass = containerClass;
+        this.disableWebSockets = disableWebSockets;
         this.disableXssProtection = disableXssProtection;
         this.enableLoginForm = enableLoginForm;
         this.enableLogout = enableLogout;
@@ -181,6 +202,6 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         this.modelClass = modelClass;
         this.showBrowserContextMenu = showBrowserContextMenu;
         this.trackAppLoad = trackAppLoad;
-        this.webSocketsEnabled = webSocketsEnabled;
+        this.webSocketsEnabled = !disableWebSockets;
     }
 }

package/core/XH.ts

@@ -386,7 +386,6 @@ export class XHApi {
             clientAppCode: 'admin',
             clientAppName: `${this.appName} Admin`,
             isMobileApp: false,
-            webSocketsEnabled: true,
             checkAccess: 'HOIST_ADMIN_READER',
             ...appSpec
         });

package/desktop/appcontainer/Toast.scss

@@ -30,7 +30,7 @@
     }
 
     .bp5-toast-message {
-      word-break: break-word;
+      overflow-wrap: break-word;
     }
 
     // High level of specificity here required to override built-in BP styles

package/desktop/cmp/filechooser/FileChooserModel.ts

@@ -11,7 +11,7 @@ import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {isEmpty} from 'codemirror/src/util/misc';
-import filesize from 'filesize';
+import {filesize} from 'filesize';
 import {find, uniqBy, without} from 'lodash';
 
 export class FileChooserModel extends HoistModel {

package/kit/blueprint/styles.scss

@@ -51,12 +51,12 @@
     // See https://github.com/xh/hoist-react/issues/862 for why this is necessary. Note need for
     // datepicker workaround below - indicates that this might be a problematic solution in general
     // to the original issue, but after a few years that's been the only reported issue, so...
-    word-break: break-word;
+    overflow-wrap: break-word;
 
     // Ensure that date numbers in the datepicker do not wrap if the datePicker portal is rendered
     // inside a dialogBody - e.g. `dateEditor` in a grid in a dialog. See comment on #862.
     .bp5-datepicker {
-      word-break: normal;
+      overflow-wrap: normal;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "75.0.0-SNAPSHOT.1753722797428",
+  "version": "75.0.0-SNAPSHOT.1753727619217",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -28,8 +28,8 @@
     ]
   },
   "dependencies": {
-    "@auth0/auth0-spa-js": "~2.1.3",
-    "@azure/msal-browser": "~4.12.0",
+    "@auth0/auth0-spa-js": "~2.3.0",
+    "@azure/msal-browser": "~4.16.0",
     "@blueprintjs/core": "^5.10.5",
     "@blueprintjs/datetime": "^5.3.7",
     "@blueprintjs/datetime2": "^2.3.7",
@@ -39,19 +39,19 @@
     "@fortawesome/pro-regular-svg-icons": "^6.6.0",
     "@fortawesome/pro-solid-svg-icons": "^6.6.0",
     "@fortawesome/pro-thin-svg-icons": "^6.6.0",
-    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@fortawesome/react-fontawesome": "^0.2.3",
     "@onsenui/fastclick": "~1.1.1",
     "@popperjs/core": "~2.11.0",
     "@seznam/compose-react-refs": "~1.0.5",
     "classnames": "~2.5.1",
     "clipboard-copy": "~4.0.1",
     "codemirror": "~5.65.0",
-    "core-js": "^3.0",
+    "core-js": "3.x",
     "debounce-promise": "~3.1.0",
     "dompurify": "~3.2.3",
     "downloadjs": "~1.4.7",
     "fast-deep-equal": "~3.1.1",
-    "filesize": "~6.4.0",
+    "filesize": "~11.0.2",
     "golden-layout": "~1.5.9",
     "http-status-codes": "~2.3.0",
     "inter-ui": "~3.19.3",
@@ -59,32 +59,32 @@
     "lodash": "~4.17.21",
     "lodash-inflection": "~1.5.0",
     "mobx": "~6.13.2",
-    "mobx-react-lite": "~4.0.7",
+    "mobx-react-lite": "~4.1.0",
     "moment": "~2.30.1",
     "numbro": "~2.5.0",
     "onsenui": "~2.12.8",
-    "qs": "~6.13.0",
+    "qs": "~6.14.0",
     "react-beautiful-dnd": "~13.1.0",
     "react-dates": "~21.8.0",
     "react-dropzone": "~10.2.2",
     "react-grid-layout": "1.5.0",
-    "react-markdown": "~9.0.1",
+    "react-markdown": "~10.1.0",
     "react-onsenui": "~1.13.2",
     "react-popper": "~2.3.0",
     "react-select": "~4.3.1",
     "react-transition-group": "~4.4.2",
     "react-windowed-select": "~3.1.2",
-    "regenerator-runtime": "~0.13.11",
+    "regenerator-runtime": "~0.14.1",
     "remark-breaks": "~4.0.0",
     "remark-gfm": "~4.0.0",
     "resize-observer-polyfill": "~1.5.1",
     "router5": "~7.0.2",
     "router5-plugin-browser": "~7.0.2",
-    "semver": "~7.6.0",
-    "short-unique-id": "~5.2.0",
+    "semver": "~7.7.2",
+    "short-unique-id": "~5.3.2",
     "store2": "~2.14.3",
     "swiper": "^11.2.0",
-    "ua-parser-js": "~1.0.2"
+    "ua-parser-js": "~2.0.4"
   },
   "peerDependencies": {
     "react": "~18.2.0",
@@ -102,13 +102,13 @@
     "eslint-config-prettier": "10.x",
     "eslint-plugin-tsdoc": "0.x",
     "husky": "9.x",
-    "lint-staged": "15.x",
+    "lint-staged": "16.x",
     "postcss": "8.x",
     "prettier": "3.x",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "stylelint": "16.x",
-    "stylelint-config-standard-scss": "14.x",
+    "stylelint-config-standard-scss": "15.x",
     "type-fest": "4.x",
     "typescript": "~5.8.3"
   },

package/svc/WebSocketService.ts

@@ -38,8 +38,8 @@ import {find, pull} from 'lodash';
 export class WebSocketService extends HoistService {
     static instance: WebSocketService;
 
-    readonly HEARTBEAT_TOPIC = 'xhHeartbeat';
     /** Check connection and send a new heartbeat (which should be promptly ack'd) every 10s. */
+    readonly HEARTBEAT_TOPIC = 'xhHeartbeat';
     readonly HEARTBEAT_INTERVAL = 10 * SECONDS;
 
     readonly REG_SUCCESS_TOPIC = 'xhRegistrationSuccess';
@@ -47,8 +47,8 @@ export class WebSocketService extends HoistService {
     readonly REQ_CLIENT_HEALTH_RPT_TOPIC = 'xhRequestClientHealthReport';
     readonly METADATA_FOR_HANDSHAKE = ['appVersion', 'appBuild', 'loadId', 'tabId'];
 
-    /** True if WebSockets generally enabled - set statically in code via {@link AppSpec}. */
-    enabled: boolean = XH.appSpec.webSocketsEnabled;
+    /** True if WebSockets not explicitly disabled via {@link AppSpec.disableWebSockets}. */
+    enabled: boolean = !XH.appSpec.disableWebSockets;
 
     /** Unique channel assigned by server upon successful connection. */
     @observable channelKey: string = null;
@@ -84,7 +84,7 @@ export class WebSocketService extends HoistService {
         const {environmentService} = XH;
         if (environmentService.get('webSocketsEnabled') === false) {
             this.logError(
-                `WebSockets enabled on this client app but disabled on server. Adjust your server-side config.`
+                `WebSockets enabled on this client app but disabled on server - unexpected! WebSockets will not be available, review and reconcile your server configuration.`
             );
             this.enabled = false;
             return;