@xh/hoist 77.0.0-SNAPSHOT.1760707577281 → 77.0.0-SNAPSHOT.1760710210101

package/CHANGELOG.md

@@ -9,6 +9,17 @@
   apps to programmatically show dynamic info in a widget header without perturbing its saved state.
 * Enhanced grid column filtering to support sorting the list of available values.
 
+### ⚙️ Technical
+
+* Autofocus the user input when the impersonation bar is shown.
+
+### 📚 Libraries
+
+* @auth0/auth0-spa-js `2.4 → 2.7`
+* @azure/msal-browser `4.23 → 4.25`
+* dompurify `3.2 → 3.3`
+* mobx `6.13 → 6.15`
+
 ## 76.0.0 - 2025-09-26
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - AG Grid update, Hoist React upgrade)

package/appcontainer/ImpersonationBarModel.ts

@@ -4,9 +4,11 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {HoistInputModel} from '@xh/hoist/cmp/input';
 import {HoistModel, XH} from '@xh/hoist/core';
-import {action, observable, makeObservable, bindable} from '@xh/hoist/mobx';
+import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
+import {createRef} from 'react';
 
 /**
  *  @internal
@@ -18,6 +20,9 @@ export class ImpersonationBarModel extends HoistModel {
     @observable.ref targets: string[] = [];
     @bindable pendingTarget: string = null;
 
+    // For managed focus of desktop select.
+    inputRef = createRef<HoistInputModel>();
+
     constructor() {
         super();
         makeObservable(this);
@@ -58,7 +63,7 @@ export class ImpersonationBarModel extends HoistModel {
     @action
     toggleVisibility() {
         if (this.isOpen) {
-            this.hide();
+            XH.identityService.isImpersonating ? this.inputRef.current?.focus() : this.hide();
         } else {
             this.show();
         }

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

@@ -1,3 +1,4 @@
+import { HoistInputModel } from '@xh/hoist/cmp/input';
 import { HoistModel } from '@xh/hoist/core';
 /**
  *  @internal
@@ -7,6 +8,7 @@ export declare class ImpersonationBarModel extends HoistModel {
     showRequested: boolean;
     targets: string[];
     pendingTarget: string;
+    inputRef: import("react").RefObject<HoistInputModel>;
     constructor();
     init(): void;
     get isOpen(): boolean;

package/desktop/appcontainer/AppContainer.ts

@@ -4,32 +4,34 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {HotkeyConfig} from '@blueprintjs/core/src/hooks/hotkeys/hotkeyConfig';
 import {AppContainerModel} from '@xh/hoist/appcontainer/AppContainerModel';
+import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 import {fragment, frame, vframe, viewport} from '@xh/hoist/cmp/layout';
+import {mask} from '@xh/hoist/cmp/mask';
 import {createElement, hoistCmp, refreshContextView, uses, XH} from '@xh/hoist/core';
-import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 import {changelogDialog} from '@xh/hoist/desktop/appcontainer/ChangelogDialog';
-import {suspendPanel} from './suspend/SuspendPanel';
 import {dockContainerImpl} from '@xh/hoist/desktop/cmp/dock/impl/DockContainer';
+import {errorMessageImpl} from '@xh/hoist/desktop/cmp/error/impl/ErrorMessage';
 import {colChooserDialog as colChooser} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColChooserDialog';
 import {ColChooserModel} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColChooserModel';
-import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/impl/ZoneMapperDialog';
 import {columnHeaderFilter} from '@xh/hoist/desktop/cmp/grid/impl/filter/ColumnHeaderFilter';
 import {ColumnHeaderFilterModel} from '@xh/hoist/desktop/cmp/grid/impl/filter/ColumnHeaderFilterModel';
 import {gridFilterDialog} from '@xh/hoist/desktop/cmp/grid/impl/filter/GridFilterDialog';
-import {mask} from '@xh/hoist/cmp/mask';
+import {maskImpl} from '@xh/hoist/desktop/cmp/mask/impl/Mask';
 import {ModalSupportModel} from '@xh/hoist/desktop/cmp/modalsupport';
 import {pinPadImpl} from '@xh/hoist/desktop/cmp/pinpad/impl/PinPad';
 import {storeFilterFieldImpl} from '@xh/hoist/desktop/cmp/store/impl/StoreFilterField';
 import {tabContainerImpl} from '@xh/hoist/desktop/cmp/tab/impl/TabContainer';
+import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/impl/ZoneMapperDialog';
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import {installDesktopImpls} from '@xh/hoist/dynamics/desktop';
 import {inspectorPanel} from '@xh/hoist/inspector/InspectorPanel';
 import {blueprintProvider} from '@xh/hoist/kit/blueprint';
-import {errorMessageImpl} from '@xh/hoist/desktop/cmp/error/impl/ErrorMessage';
-import {maskImpl} from '@xh/hoist/desktop/cmp/mask/impl/Mask';
+import {consumeEvent} from '@xh/hoist/utils/js';
 import {elementFromContent, useOnMount} from '@xh/hoist/utils/react';
 import {isEmpty} from 'lodash';
+import {ReactElement} from 'react';
 import {aboutDialog} from './AboutDialog';
 import {banner} from './Banner';
 import {exceptionDialog} from './ExceptionDialog';
@@ -39,9 +41,9 @@ import {lockoutPanel} from './LockoutPanel';
 import {loginPanel} from './LoginPanel';
 import {messageSource} from './MessageSource';
 import {optionsDialog} from './OptionsDialog';
+import {suspendPanel} from './suspend/SuspendPanel';
 import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
-import {ReactElement} from 'react';
 
 installDesktopImpls({
     tabContainerImpl,
@@ -183,9 +185,9 @@ const bannerList = hoistCmp.factory<AppContainerModel>({
     }
 });
 
-function globalHotKeys(model) {
+function globalHotKeys(model: AppContainerModel) {
     const {impersonationBarModel, optionsDialogModel} = model,
-        ret = [
+        ret: HotkeyConfig[] = [
             {
                 global: true,
                 combo: 'shift + r',
@@ -199,7 +201,10 @@ function globalHotKeys(model) {
             global: true,
             combo: 'shift + i',
             label: 'Impersonate another user',
-            onKeyDown: () => impersonationBarModel.toggleVisibility()
+            onKeyDown: e => {
+                consumeEvent(e); // avoid typing "i" in the impersonation bar select
+                impersonationBarModel.toggleVisibility();
+            }
         });
     }
     if (optionsDialogModel.hasOptions) {

package/desktop/appcontainer/ImpersonationBar.ts

@@ -31,9 +31,12 @@ export const impersonationBar = hoistCmp.factory({
 
         const {targets} = model;
 
-        let msg = `Logged in as ${authUsername}`;
+        let msg = `Logged in as ${authUsername}`,
+            placeholder = 'Select a user...';
+
         if (isImpersonating) {
             msg += ` › impersonating ${username}`;
+            placeholder = `Impersonating ${username}`;
         }
 
         return toolbar({
@@ -53,11 +56,16 @@ export const impersonationBar = hoistCmp.factory({
                     bind: 'pendingTarget',
                     options: targets,
                     enableCreate: true,
-                    placeholder: 'Select User...',
+                    // Autofocus when shown to begin impersonation
+                    autoFocus: !isImpersonating,
+                    placeholder,
                     createMessageFn: q => `Impersonate new user "${q}"`,
-                    width: 250,
-                    menuWidth: 300,
-                    onCommit: model.onCommit
+                    minWidth: 150,
+                    maxWidth: 350,
+                    menuWidth: 350,
+                    flex: 1,
+                    onCommit: model.onCommit,
+                    ref: model.inputRef
                 }),
                 button({
                     text: isImpersonating ? 'Exit Impersonation' : 'Cancel',
@@ -72,6 +80,7 @@ export const impersonationBar = hoistCmp.factory({
 const showUseResponsiblyAlert = () => {
     XH.alert({
         title: 'Important Reminders',
+        icon: Icon.warning(),
         message: fragment(
             h3('With great power comes great responsibility.'),
             ul(
@@ -95,7 +104,8 @@ const showUseResponsiblyAlert = () => {
             )
         ),
         confirmProps: {
-            text: 'I understand and will be careful'
+            text: 'I understand and will be careful',
+            autoFocus: false
         }
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "77.0.0-SNAPSHOT.1760707577281",
+  "version": "77.0.0-SNAPSHOT.1760710210101",
   "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.4.1",
-    "@azure/msal-browser": "~4.23.0",
+    "@auth0/auth0-spa-js": "~2.7.0",
+    "@azure/msal-browser": "~4.25.0",
     "@blueprintjs/core": "^5.10.5",
     "@blueprintjs/datetime": "^5.3.7",
     "@blueprintjs/datetime2": "^2.3.7",
@@ -48,7 +48,7 @@
     "codemirror": "~5.65.0",
     "core-js": "3.x",
     "debounce-promise": "~3.1.0",
-    "dompurify": "~3.2.3",
+    "dompurify": "~3.3.0",
     "downloadjs": "~1.4.7",
     "fast-deep-equal": "~3.1.1",
     "filesize": "~11.0.2",
@@ -58,7 +58,7 @@
     "jwt-decode": "~4.0.0",
     "lodash": "~4.17.21",
     "lodash-inflection": "~1.5.0",
-    "mobx": "~6.13.2",
+    "mobx": "~6.15.0",
     "mobx-react-lite": "~4.1.0",
     "moment": "~2.30.1",
     "numbro": "~2.5.0",