@xh/hoist 76.0.0 → 76.2.0

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,10 +56,16 @@ export const impersonationBar = hoistCmp.factory({
                     bind: 'pendingTarget',
                     options: targets,
                     enableCreate: true,
-                    placeholder: 'Select User...',
-                    width: 250,
-                    menuWidth: 300,
-                    onCommit: model.onCommit
+                    // Autofocus when shown to begin impersonation
+                    autoFocus: !isImpersonating,
+                    placeholder,
+                    createMessageFn: q => `Impersonate new user "${q}"`,
+                    minWidth: 150,
+                    maxWidth: 350,
+                    menuWidth: 350,
+                    flex: 1,
+                    onCommit: model.onCommit,
+                    ref: model.inputRef
                 }),
                 button({
                     text: isImpersonating ? 'Exit Impersonation' : 'Cancel',
@@ -71,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(
@@ -94,7 +104,8 @@ const showUseResponsiblyAlert = () => {
             )
         ),
         confirmProps: {
-            text: 'I understand and will be careful'
+            text: 'I understand and will be careful',
+            autoFocus: false
         }
     });
 };

package/desktop/appcontainer/VersionBar.ts

@@ -18,13 +18,16 @@ export const versionBar = hoistCmp.factory({
         const inspectorSvc = XH.inspectorService,
             envSvc = XH.environmentService,
             env = envSvc.get('appEnvironment'),
+            build = envSvc.get('clientBuild'),
             version = envSvc.get('clientVersion'),
-            isAdminApp = window.location.pathname?.startsWith('/admin/');
+            isAdminApp = window.location.pathname?.startsWith('/admin/'),
+            versionAndBuild =
+                !build || build === 'UNKNOWN' ? version : `${version} (build ${build})`;
 
         return box({
             className: `xh-version-bar xh-version-bar--${env.toLowerCase()}`,
             items: [
-                [XH.appName, env, version].join(' • '),
+                [XH.appName, env, versionAndBuild].join(' • '),
                 span({
                     className: 'xh-version-bar__spacer',
                     items: '|'

package/desktop/cmp/dash/DashViewModel.ts

@@ -4,6 +4,8 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {isNil} from 'lodash';
+import {ReactElement} from 'react';
 import {
     HoistModel,
     managed,
@@ -16,7 +18,6 @@ import {
 import '@xh/hoist/desktop/register';
 import {makeObservable, bindable} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
-import {ReactElement} from 'react';
 import {DashViewSpec} from './DashViewSpec';
 
 export type DashViewState = PlainObject;
@@ -44,9 +45,20 @@ export class DashViewModel<T extends DashViewSpec = DashViewSpec> extends HoistM
      */
     containerModel: any;
 
-    /** Title with which to initialize the view. */
+    /** Title with which to initialize the view.  Value is persisted. */
     @bindable title: string;
 
+    /**
+     * Additional info that will be displayed after the title.
+     * Applications can bind to this property to provide dynamic title details.
+     * Value is not persisted.
+     **/
+    @bindable titleDetails: string;
+
+    get fullTitle(): string {
+        return [this.title, this.titleDetails].filter(it => !isNil(it)).join(' ');
+    }
+
     /** Icon with which to initialize the view. */
     @bindable.ref icon: ReactElement;
 

package/desktop/cmp/dash/canvas/impl/DashCanvasView.ts

@@ -34,13 +34,13 @@ export const dashCanvasView = hoistCmp.factory({
     model: uses(DashCanvasViewModel, {publishMode: 'limited'}),
 
     render({model, className}) {
-        const {viewSpec, ref, hidePanelHeader, headerItems, autoHeight} = model,
+        const {viewSpec, ref, hidePanelHeader, headerItems, autoHeight, fullTitle, icon} = model,
             headerProps = hidePanelHeader
                 ? {}
                 : {
                       compactHeader: true,
-                      title: model.title,
-                      icon: model.icon,
+                      title: fullTitle,
+                      icon,
                       headerItems: [...headerItems, headerMenu({model})]
                   };
         return panel({

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -338,7 +338,7 @@ export class DashContainerModel
     renameView(id: string) {
         const view = this.getItemByViewModel(id);
         if (!view) return;
-        this.showTitleForm(view.tab.element);
+        this.showTitleForm(view.tab.element, this.getViewModel(id));
     }
 
     onResize() {
@@ -528,10 +528,10 @@ export class DashContainerModel
 
             const $el = item.tab.element, // Note: this is a jquery element
                 stack = item.parent,
-                $titleEl = $el.find('.lm_title').first(),
+                $titleEl = this.getTitleElement($el),
                 iconSelector = 'svg.svg-inline--fa',
                 viewSpec = this.getViewSpec(item.config.component),
-                {icon, title} = viewModel;
+                {icon} = viewModel;
 
             $el.off('contextmenu').contextmenu(e => {
                 const index = stack.contentItems.indexOf(item);
@@ -551,14 +551,9 @@ export class DashContainerModel
                 }
             }
 
-            if (title) {
-                const currentTitle = $titleEl.text();
-                if (currentTitle !== title) $titleEl.text(title);
-            }
-
             if (viewSpec.allowRename) {
                 this.insertTitleForm($el, viewModel);
-                $titleEl.off('dblclick').dblclick(() => this.showTitleForm($el));
+                $titleEl.off('dblclick').dblclick(() => this.showTitleForm($el, viewModel));
             }
         });
     }
@@ -568,7 +563,7 @@ export class DashContainerModel
         if ($el.find(formSelector).length) return;
 
         // Create and insert form
-        const $titleEl = $el.find('.lm_title').first();
+        const $titleEl = this.getTitleElement($el);
         $titleEl.after(`<form class="title-form"><input type="text"/></form>`);
 
         // Attach listeners
@@ -579,7 +574,6 @@ export class DashContainerModel
         $formEl.submit(() => {
             const title = $inputEl.val();
             if (title.length) {
-                $titleEl.text(title);
                 viewModel.title = title;
             }
 
@@ -588,12 +582,11 @@ export class DashContainerModel
         });
     }
 
-    private showTitleForm($tabEl) {
+    private showTitleForm($tabEl, viewModel: DashViewModel) {
         if (this.renameLocked) return;
 
-        const $titleEl = $tabEl.find('.lm_title').first(),
-            $inputEl = $tabEl.find('.title-form input').first(),
-            currentTitle = $titleEl.text();
+        const $inputEl = $tabEl.find('.title-form input').first(),
+            currentTitle = viewModel.title;
 
         $tabEl.addClass('show-title-form');
         $inputEl.val(currentTitle);
@@ -647,6 +640,16 @@ export class DashContainerModel
                     containerModel: this
                 });
 
+                model.addReaction({
+                    track: () => model.fullTitle,
+                    run: () => {
+                        const item = this.getItemByViewModel(id),
+                            $titleEl = this.getTitleElement(item.tab.element);
+
+                        $titleEl.text(model.fullTitle);
+                    }
+                });
+
                 this.addViewModel(model);
                 return modelLookupContextProvider({
                     value: this.modelLookupContext,
@@ -662,6 +665,10 @@ export class DashContainerModel
         return ret;
     }
 
+    private getTitleElement($el) {
+        return $el.find('.lm_title').first();
+    }
+
     @action
     private destroyGoldenLayout() {
         XH.safeDestroy(this.goldenLayout);

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilter.ts

@@ -54,7 +54,6 @@ const bbar = hoistCmp.factory<HeaderFilterModel>({
     render({model}) {
         const {commitOnChange, hasFilter, isDirty} = model;
         return toolbar({
-            compact: true,
             items: [
                 button({
                     icon: Icon.delete(),

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilterModel.ts

@@ -5,8 +5,9 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
+import {Column, GridFilterFieldSpec, GridFilterModel, GridModel} from '@xh/hoist/cmp/grid';
 import {TabContainerModel} from '@xh/hoist/cmp/tab';
-import {HoistModel, managed, lookup} from '@xh/hoist/core';
+import {HoistModel, lookup, managed} from '@xh/hoist/core';
 import {
     CompoundFilter,
     FieldFilter,
@@ -19,12 +20,11 @@ import {
 import {action, computed} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
 import {isEmpty} from 'lodash';
-import {GridFilterFieldSpec, GridFilterModel} from '@xh/hoist/cmp/grid';
+import {ColumnHeaderFilterModel} from '../ColumnHeaderFilterModel';
 import {customTab} from './custom/CustomTab';
 import {CustomTabModel} from './custom/CustomTabModel';
 import {valuesTab} from './values/ValuesTab';
 import {ValuesTabModel} from './values/ValuesTabModel';
-import {ColumnHeaderFilterModel} from '../ColumnHeaderFilterModel';
 
 export class HeaderFilterModel extends HoistModel {
     override xhImpl = true;
@@ -46,8 +46,16 @@ export class HeaderFilterModel extends HoistModel {
         return this.fieldSpec.field;
     }
 
+    get gridModel(): GridModel {
+        return this.filterModel.gridModel;
+    }
+
     get store(): Store {
-        return this.filterModel.gridModel.store;
+        return this.gridModel.store;
+    }
+
+    get column(): Column {
+        return this.parent.column;
     }
 
     get fieldType(): FieldType {

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTab.scss

@@ -1,24 +1,32 @@
 .xh-values-filter-tab {
-  .store-filter-header {
-    padding: 5px 7px;
+  &__filter-controls {
     border-bottom: 1px solid var(--xh-grid-header-border-color);
+    padding: 5px 7px;
     row-gap: 5px;
+
     .bp5-control-indicator {
       font-size: 1em;
     }
+
     label {
       font-size: var(--xh-grid-compact-header-font-size-px);
       color: var(--xh-grid-header-text-color);
       cursor: pointer;
     }
+
+    &__sort-icon {
+      border-left: var(--xh-menu-border);
+      padding-left: var(--xh-pad-half-px);
+      color: var(--xh-grid-header-text-color);
+    }
   }
 
   &__hidden-values-message {
-    display: flex;
-    padding: var(--xh-pad-half-px);
     background-color: var(--xh-bg-alt);
     border-top: var(--xh-border-solid);
     color: var(--xh-text-color-muted);
+    display: flex;
+    padding: var(--xh-pad-half-px);
 
     .xh-icon {
       margin-right: var(--xh-pad-half-px);

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTab.ts

@@ -6,7 +6,7 @@
  */
 import {isEmpty} from 'lodash';
 import {grid} from '@xh/hoist/cmp/grid';
-import {div, hframe, placeholder, label, vbox, vframe} from '@xh/hoist/cmp/layout';
+import {div, hframe, placeholder, label, vbox, vframe, filler} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {XH, hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
@@ -60,7 +60,7 @@ const storeFilterSelect = hoistCmp.factory<ValuesTabModel>(({model}) => {
         addToFilterId = XH.genId();
 
     return vbox({
-        className: 'store-filter-header',
+        className: 'xh-values-filter-tab__filter-controls',
         items: [
             hframe(
                 checkbox({
@@ -73,6 +73,12 @@ const storeFilterSelect = hoistCmp.factory<ValuesTabModel>(({model}) => {
                 label({
                     htmlFor: selectAllId,
                     item: `(Select All${filterText ? ' Search Results' : ''})`
+                }),
+                filler(),
+                div({
+                    className: 'xh-values-filter-tab__filter-controls__sort-icon',
+                    item: model.sortIcon,
+                    onClick: () => model.toggleSort()
                 })
             ),
             hframe({

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTabModel.ts

@@ -7,26 +7,27 @@
 import {GridFilterModel, GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
 import {FieldFilterSpec} from '@xh/hoist/data';
-import {HeaderFilterModel} from '../HeaderFilterModel';
 import {checkbox} from '@xh/hoist/desktop/cmp/input';
+import {Icon} from '@xh/hoist/icon';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {castArray, difference, flatten, isEmpty, map, partition, uniq, without} from 'lodash';
+import {HeaderFilterModel} from '../HeaderFilterModel';
 
 export class ValuesTabModel extends HoistModel {
     override xhImpl = true;
 
     headerFilterModel: HeaderFilterModel;
 
-    /** Checkbox grid to display enumerated set of values */
-    @managed @observable.ref gridModel: GridModel;
+    /** Checkbox grid to display enumerated set of values. */
+    @managed gridModel: GridModel;
 
-    /** List of currently checked values in the list*/
+    /** List of currently checked values. */
     @observable.ref pendingValues: any[] = [];
 
-    /** Bound search term for `StoreFilterField` */
+    /** Bound search term for `StoreFilterField`. */
     @bindable filterText: string = null;
 
-    /*
+    /**
      * Merge current filter with pendingValues on commit.
      * Used when commitOnChange is false.
      */
@@ -80,12 +81,26 @@ export class ValuesTabModel extends HoistModel {
         return this.values.length < this.valueCount;
     }
 
+    get sortIcon() {
+        const {sort, abs} = this.gridModel.sortBy[0];
+        if (sort === 'asc') {
+            if (abs) return Icon.sortAbsAsc();
+            return Icon.sortAsc();
+        }
+        if (sort === 'desc') {
+            if (abs) return Icon.sortAbsDesc();
+            return Icon.sortDesc();
+        }
+        return null;
+    }
+
     constructor(headerFilterModel: HeaderFilterModel) {
         super();
         makeObservable(this);
 
         this.headerFilterModel = headerFilterModel;
         this.gridModel = this.createGridModel();
+        this.initGridSortBy();
 
         this.addReaction(
             {
@@ -125,6 +140,13 @@ export class ValuesTabModel extends HoistModel {
             : without(this.pendingValues, ...values);
     }
 
+    @action
+    toggleSort() {
+        const {colId, sort, abs} = this.gridModel.sortBy.find(it => it.colId === 'value'),
+            newSort = sort === 'asc' ? 'desc' : 'asc';
+        this.gridModel.setSortBy({colId, sort: newSort, abs});
+    }
+
     toggleAllRecsChecked() {
         const setAllToChecked = !this.allVisibleRecsChecked,
             values = this.gridModel.store.records.map(it => it.get('value'));
@@ -244,13 +266,22 @@ export class ValuesTabModel extends HoistModel {
         this.gridModel.loadData(data);
     }
 
+    private initGridSortBy() {
+        const {gridModel: srcGridModel, column} = this.headerFilterModel,
+            srcColGridSorter = srcGridModel.sortBy.find(it => it.colId === column.colId);
+
+        this.gridModel.setSortBy({
+            colId: 'value',
+            sort: srcColGridSorter?.sort ?? 'asc',
+            abs: srcColGridSorter?.abs ?? false
+        });
+    }
+
     private createGridModel() {
         const {BLANK_PLACEHOLDER} = GridFilterModel,
             {headerFilterModel, fieldSpec} = this,
-            {fieldType} = headerFilterModel,
-            renderer =
-                fieldSpec.renderer ??
-                (fieldType !== 'tags' ? this.headerFilterModel.parent.column.renderer : null);
+            {fieldType, column} = headerFilterModel,
+            renderer = fieldSpec.renderer ?? (fieldType !== 'tags' ? column.renderer : null);
 
         return new GridModel({
             store: {
@@ -301,6 +332,7 @@ export class ValuesTabModel extends HoistModel {
                 {
                     field: 'value',
                     align: 'left',
+                    tooltip: true,
                     comparator: (v1, v2, sortDir, abs, {defaultComparator}) => {
                         const mul = sortDir === 'desc' ? -1 : 1;
                         if (v1 === BLANK_PLACEHOLDER) return 1 * mul;

package/desktop/cmp/viewmanager/dialog/ManageDialog.ts

@@ -88,7 +88,7 @@ export const viewsGrid = hoistCmp.factory<GridModel>({
                 grid({
                     model,
                     agOptions: {
-                        suppressMakeColumnVisibleAfterUnGroup: true
+                        suppressGroupChangesColumnVisibility: 'suppressShowOnUngroup'
                     }
                 }),
                 div({

package/mobile/appcontainer/ImpersonationBar.ts

@@ -36,7 +36,7 @@ export const impersonationBar = hoistCmp.factory({
                     enableFilter: true,
                     enableFullscreen: true,
                     placeholder: 'Select a user to impersonate...',
-                    createMessageFn: q => `Impersonate ${q}`,
+                    createMessageFn: q => `Impersonate new user "${q}"`,
                     onCommit: model.onCommit
                 }),
                 button({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "76.0.0",
+  "version": "76.2.0",
   "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",

package/promise/Promise.ts

@@ -132,15 +132,15 @@ export function waitFor(
     condition: () => boolean,
     {interval = 50, timeout = 5 * SECONDS}: {interval?: number; timeout?: number} = {}
 ): Promise<void> {
-    if (!isNumber(interval) || interval <= 0) throw new Error('Invalid interval');
-    if (!isNumber(timeout) || timeout <= 0) throw new Error('Invalid timeout');
+    if (interval <= 0) throw new Error('Invalid interval');
+    if (timeout != null && timeout <= 0) throw new Error('Invalid timeout');
 
     const startTime = Date.now();
     return new Promise((resolve, reject) => {
         const resolveOnMet = () => {
             if (condition()) {
                 resolve();
-            } else if (olderThan(startTime, timeout)) {
+            } else if (timeout != null && olderThan(startTime, timeout)) {
                 reject(Exception.timeout({interval: Date.now() - startTime}));
             } else {
                 setTimeout(resolveOnMet, interval);

package/styles/vars.scss

@@ -522,8 +522,8 @@ body {
   --xh-zone-grid-label-color: var(--zone-grid-label-color, inherit);
 
   // Grid column-header-based filter popover (desktop only)
-  --xh-grid-filter-popover-height-px: var(--grid-filter-popover-height-px, 350px);
-  --xh-grid-filter-popover-width-px: var(--grid-filter-popover-width-px, 240px);
+  --xh-grid-filter-popover-height-px: var(--grid-filter-popover-height-px, 400px);
+  --xh-grid-filter-popover-width-px: var(--grid-filter-popover-width-px, 280px);
 
   // Dark Grid
   &.xh-dark {