@xh/hoist 73.0.0-SNAPSHOT.1746829743606 → 73.0.0-SNAPSHOT.1746837312368

package/CHANGELOG.md

@@ -11,7 +11,7 @@
   applicable. This did not previously have any effect, but is required now for the superclass to
   initialize a new `ViewManagerModel`.
   * For clarity, [here is where Toolbox makes that call](https://github.com/xh/toolbox/blob/f15a8018ce36c2ae998b45724b48a16320b88e49/client-app/src/admin/AppModel.ts#L12).
-
+* Requires call to `makeObservable(this)` in model constructors with `@bindable` (see below).
 
 ### 🎁 New Features
 
@@ -27,7 +27,8 @@
       the "skip weekends" option.
     * Client Error reports and user feedback have also been consolidated into the new tracking
       system for more integrated and powerful reporting.
-
+* Added new `PopoverFilterChooser` component - wraps `FilterChooser` in a `Popover` to allow it to
+  expand vertically when used in a `Toolbar` or other space-constrained, single-line layout.
 * Updated `FormModel` to support `persistWith` for storing and recalling its values, including
   developer options to persist all or a provided subset of fields.
 
@@ -35,17 +36,13 @@
 
 * Fixed drag-and-drop usability issues with the mobile `ColChooser`.
 * Made `GridModel.defaultGroupSortFn` null-safe and improved type signature.
-* Disable `dashCanvasAddViewButton` if there are no `menuItems` to show.
-* Improvements to `@bindable` and `@persist` to handle lifecycle-related bugs. Note that previously
+* Disabled `dashCanvasAddViewButton` if there are no `menuItems` to show.
+* Hardened `@bindable` and `@persist` to handle lifecycle-related bugs. Note that previously
   `@bindable` would work even if `makeObservable()` was not called, but this is no longer the case.
-  Please ensure that `makeObservable()` is called in your model's constructor when using `@bindable`.
-
-### ⚙️ Typescript API Adjustments
-
-* Corrected `GridGroupSortFn` param types.
-* Corrected `StoreCountLabelProps` interface.
-* Corrected `textAlign` type in `DateInputProps`, `NumberInputProps` `SearchInputProps` and
-  `TextInputProps`.
+  Please ensure you call `makeObservable(this)` in your model's constructor when using `@bindable`!
+* Improved client `WebSocketService` heartbeat to check that it has been receiving inbound messages
+  from the server, not just successfully sending outbound heartbeats. Will auto-reconnect if needed
+  in a newly throttled/managed manner.
 
 ### ⚙️ Technical
 
@@ -59,9 +56,12 @@
       as the server - would result in a false positive for an upgrade. The two should always match.
 * Calls to `Promise.track()` that are rejected with an exception will be tracked with new
   severity level of `TrackSeverity.ERROR`.
-* Improved client `WebSocketService` heartbeat to check that it has been receiving inbound messages
-  from the server, not just successfully sending outbound heartbeats.
-* Improved client `WebSocketService` to throttle its reconnect attempts.
+
+### ⚙️ Typescript API Adjustments
+
+* Corrected `GridGroupSortFn` param types.
+* Corrected `StoreCountLabelProps` interface.
+* Corrected `textAlign` type across several `HoistInput` prop interfaces.
 
 ## v72.5.1 - 2025-04-15
 

package/admin/tabs/activity/tracking/ActivityTrackingPanel.ts

@@ -11,7 +11,7 @@ import {grid} from '@xh/hoist/cmp/grid';
 import {div, filler, hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, buttonGroup, colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
-import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
+import {popoverFilterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {groupingChooser} from '@xh/hoist/desktop/cmp/grouping';
 import {dateInput, DateInputProps, select} from '@xh/hoist/desktop/cmp/input';
@@ -137,7 +137,7 @@ const filterChooserToggleButton = hoistCmp.factory<ActivityTrackingModel>(({mode
 const filterBar = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
     return model.showFilterChooser
         ? toolbar(
-              filterChooser({
+              popoverFilterChooser({
                   flex: 1,
                   enableClear: true
               })

package/admin/tabs/userData/roles/RolePanel.ts

@@ -10,7 +10,7 @@ import {fragment, hframe, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, colChooserButton} from '@xh/hoist/desktop/cmp/button';
 import {errorMessage} from '@xh/hoist/cmp/error';
-import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
+import {popoverFilterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {switchInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
@@ -44,7 +44,7 @@ export const rolePanel = hoistCmp.factory({
                         selModel: gridModel.selModel
                     }),
                     '-',
-                    filterChooser({flex: 1}),
+                    popoverFilterChooser({flex: 1}),
                     '-',
                     switchInput({
                         bind: 'showInGroups',

package/build/types/cmp/filter/FilterChooserModel.d.ts

@@ -79,6 +79,7 @@ export declare class FilterChooserModel extends HoistModel {
     favoritesIsOpen: boolean;
     unsupportedFilter: boolean;
     inputRef: import("react").RefObject<HTMLElement> & import("react").RefCallback<HTMLElement>;
+    get tagCount(): number;
     constructor({ fieldSpecs, fieldSpecDefaults, bind, valueSource, initialValue, initialFavorites, suggestFieldsWhenEmpty, sortFieldSuggestions, maxTags, maxResults, persistWith, introHelpText }?: FilterChooserConfig);
     /**
      * Set the value displayed by this control.

package/build/types/desktop/cmp/filter/FilterChooser.d.ts

@@ -10,6 +10,8 @@ export interface FilterChooserProps extends HoistProps<FilterChooserModel>, Layo
     disabled?: boolean;
     /** True to show a "clear" button at the right of the control.  Defaults to true. */
     enableClear?: boolean;
+    /** True to show count of filter tags next to the left icon. */
+    displayCount?: boolean;
     /** Icon to display inline on the left side of the input. */
     leftIcon?: ReactElement;
     /** Max-height of dropdown. Either a number in pixels or a valid CSS string, such as '80vh'. */

package/build/types/desktop/cmp/filter/PopoverFilterChooser.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import '@xh/hoist/desktop/register';
+import './PopoverFilterChooser.scss';
+import { FilterChooserProps } from './FilterChooser';
+/**
+ * A wrapper around a FilterChooser that renders in a popover when opened, allowing it to expand
+ * vertically beyond the height of a toolbar.
+ * @see FilterChooser
+ */
+export declare const PopoverFilterChooser: import("react").FC<FilterChooserProps>, popoverFilterChooser: import("@xh/hoist/core").ElementFactory<FilterChooserProps>;

package/build/types/desktop/cmp/filter/index.d.ts

@@ -1,2 +1,3 @@
 export * from './FilterChooser';
+export * from './PopoverFilterChooser';
 export * from '@xh/hoist/cmp/filter';

package/build/types/mobile/cmp/navigator/NavigatorModel.d.ts

@@ -27,6 +27,10 @@ export interface NavigatorConfig {
      * See enum for description of supported modes.
      */
     refreshMode?: RefreshMode;
+    /**
+     * Base route name for this navigator, with the route for each page being "[route]/[page.id]".
+     */
+    route?: string;
 }
 /**
  * Model for handling stack-based navigation between pages.
@@ -34,6 +38,8 @@ export interface NavigatorConfig {
  */
 export declare class NavigatorModel extends HoistModel {
     disableAppRefreshButton: boolean;
+    readonly route: string;
+    readonly routePrefix: string;
     stack: PageModel[];
     pages: PageConfig[];
     track: boolean;
@@ -49,7 +55,7 @@ export declare class NavigatorModel extends HoistModel {
     get activePageIdx(): number;
     get allowSlideNext(): boolean;
     get allowSlidePrev(): boolean;
-    constructor({ pages, track, pullDownToRefresh, transitionMs, renderMode, refreshMode }: NavigatorConfig);
+    constructor({ pages, route, track, pullDownToRefresh, transitionMs, renderMode, refreshMode }: NavigatorConfig);
     /**
      * @param callback - function to execute (once) after the next page transition.
      */

package/cmp/filter/FilterChooserModel.ts

@@ -145,6 +145,10 @@ export class FilterChooserModel extends HoistModel {
     @observable unsupportedFilter = false;
     inputRef = createObservableRef<HTMLElement>();
 
+    get tagCount(): number {
+        return this.selectValue?.length ?? 0;
+    }
+
     constructor({
         fieldSpecs,
         fieldSpecDefaults,

package/cmp/tab/TabContainerModel.ts

@@ -144,10 +144,10 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         this.refreshContextModel.xhImpl = xhImpl;
 
         if (route) {
-            if (XH.isMobileApp) {
-                this.logWarn('TabContainer routing is not supported for mobile applications.');
-                return;
-            }
+            // if (XH.isMobileApp) {
+            //     this.logWarn('TabContainer routing is not supported for mobile applications.');
+            //     return;
+            // }
 
             this.addReaction({
                 track: () => XH.routerState,

package/desktop/cmp/filter/FilterChooser.scss

@@ -10,6 +10,11 @@
     display: flex;
     flex: 1;
   }
+
+  &__count {
+    margin: 7px 4px;
+    align-self: start;
+  }
 }
 
 .xh-filter-chooser-option {

package/desktop/cmp/filter/FilterChooser.ts

@@ -16,6 +16,7 @@ import {withDefault} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {isEmpty, sortBy} from 'lodash';
+import {badge} from '@xh/hoist/cmp/badge';
 import {ReactElement} from 'react';
 import './FilterChooser.scss';
 
@@ -26,6 +27,8 @@ export interface FilterChooserProps extends HoistProps<FilterChooserModel>, Layo
     disabled?: boolean;
     /** True to show a "clear" button at the right of the control.  Defaults to true. */
     enableClear?: boolean;
+    /** True to show count of filter tags next to the left icon. */
+    displayCount?: boolean;
     /** Icon to display inline on the left side of the input. */
     leftIcon?: ReactElement;
     /** Max-height of dropdown. Either a number in pixels or a valid CSS string, such as '80vh'. */
@@ -47,10 +50,23 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
     className: 'xh-filter-chooser',
     render({model, className, ...props}, ref) {
         const [layoutProps, chooserProps] = splitLayoutProps(props),
-            {inputRef, suggestFieldsWhenEmpty, selectOptions, unsupportedFilter, favoritesIsOpen} =
-                model,
-            {autoFocus, enableClear, leftIcon, maxMenuHeight, menuPlacement, menuWidth} =
-                chooserProps,
+            {
+                inputRef,
+                suggestFieldsWhenEmpty,
+                selectOptions,
+                unsupportedFilter,
+                favoritesIsOpen,
+                tagCount
+            } = model,
+            {
+                autoFocus,
+                enableClear,
+                displayCount,
+                leftIcon,
+                maxMenuHeight,
+                menuPlacement,
+                menuWidth
+            } = chooserProps,
             disabled = unsupportedFilter || chooserProps.disabled,
             placeholder = unsupportedFilter
                 ? 'Unsupported filter (click to clear)'
@@ -61,42 +77,49 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
             className,
             ...layoutProps,
             item: popover({
-                item: select({
-                    flex: 1,
-                    height: layoutProps?.height,
-                    bind: 'selectValue',
-                    ref: inputRef,
+                item: hframe(
+                    badge({
+                        omit: !displayCount || tagCount < 1,
+                        className: 'xh-filter-chooser__count',
+                        item: tagCount
+                    }),
+                    select({
+                        flex: 1,
+                        height: layoutProps?.height,
+                        bind: 'selectValue',
+                        ref: inputRef,
 
-                    autoFocus,
-                    disabled,
-                    menuPlacement,
-                    menuWidth,
-                    placeholder,
-                    leftIcon: withDefault(leftIcon, Icon.filter()),
-                    enableClear: withDefault(enableClear, true),
+                        autoFocus,
+                        disabled,
+                        menuPlacement,
+                        menuWidth,
+                        placeholder,
+                        leftIcon: withDefault(leftIcon, Icon.filter()),
+                        enableClear: withDefault(enableClear, true),
 
-                    enableMulti: true,
-                    queryFn: q => model.queryAsync(q),
-                    options: selectOptions,
-                    optionRenderer,
-                    rsOptions: {
-                        defaultOptions: suggestFieldsWhenEmpty,
-                        openMenuOnClick: suggestFieldsWhenEmpty,
-                        openMenuOnFocus: false,
-                        isOptionDisabled: opt => opt.type === 'msg',
-                        noOptionsMessage: () => null,
-                        loadingMessage: () => null,
-                        styles: {
-                            menuList: base => ({
-                                ...base,
-                                maxHeight: withDefault(maxMenuHeight, '50vh')
-                            })
-                        },
-                        components: {
-                            DropdownIndicator: () => favoritesIcon(model)
+                        enableMulti: true,
+                        queryFn: q => model.queryAsync(q),
+                        options: selectOptions,
+                        optionRenderer,
+                        rsOptions: {
+                            defaultOptions: suggestFieldsWhenEmpty,
+                            openMenuOnClick: suggestFieldsWhenEmpty,
+                            openMenuOnFocus: false,
+                            isOptionDisabled: opt => opt.type === 'msg',
+                            noOptionsMessage: () => null,
+                            loadingMessage: () => null,
+                            styles: {
+                                menuList: base => ({
+                                    ...base,
+                                    maxHeight: withDefault(maxMenuHeight, '50vh')
+                                })
+                            },
+                            components: {
+                                DropdownIndicator: () => favoritesIcon(model)
+                            }
                         }
-                    }
-                }),
+                    })
+                ),
                 content: favoritesMenu(),
                 isOpen: favoritesIsOpen,
                 position: 'bottom-right',

package/desktop/cmp/filter/PopoverFilterChooser.scss

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+.xh-popover-filter-chooser {
+  & > .bp5-popover-target {
+    display: flex;
+    flex: 1;
+  }
+
+  // Extra class names required to override the default styles of the popover
+  &__popover.bp5-popover.bp5-minimal {
+    margin-top: -15px !important;
+    box-shadow: none;
+
+    .bp5-popover-content {
+      background: transparent;
+    }
+
+    .xh-select__value-container--is-multi {
+      height: unset;
+      line-height: unset;
+    }
+  }
+
+  &__filter-chooser {
+    .xh-select__value-container--is-multi {
+      overflow-y: hidden !important;
+    }
+
+    .xh-select {
+      .xh-select__control--is-disabled {
+        background: var(--xh-input-bg);
+      }
+      .xh-select__multi-value--is-disabled .xh-select__multi-value__label {
+        color: unset;
+      }
+    }
+  }
+}

package/desktop/cmp/filter/PopoverFilterChooser.ts

@@ -0,0 +1,104 @@
+/*
+ * 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 {hoistCmp, HoistModel, lookup, useLocalModel, uses} from '@xh/hoist/core';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {box, hframe} from '@xh/hoist/cmp/layout';
+import '@xh/hoist/desktop/register';
+import {popover} from '@xh/hoist/kit/blueprint';
+import {getLayoutProps} from '@xh/hoist/utils/react';
+import './PopoverFilterChooser.scss';
+import {filterChooser, FilterChooserProps} from './FilterChooser';
+import {FilterChooserModel} from '@xh/hoist/cmp/filter';
+
+/**
+ * A wrapper around a FilterChooser that renders in a popover when opened, allowing it to expand
+ * vertically beyond the height of a toolbar.
+ * @see FilterChooser
+ */
+export const [PopoverFilterChooser, popoverFilterChooser] =
+    hoistCmp.withFactory<FilterChooserProps>({
+        model: uses(FilterChooserModel),
+        className: 'xh-popover-filter-chooser',
+        render({model, className, ...props}, ref) {
+            const layoutProps = getLayoutProps(props),
+                impl = useLocalModel(PopoverFilterChooserLocalModel);
+
+            return box({
+                ref,
+                className,
+                ...layoutProps,
+                item: popover({
+                    isOpen: impl.popoverIsOpen,
+                    popoverClassName: 'xh-popover-filter-chooser__popover',
+                    item: hframe(
+                        filterChooser({
+                            model,
+                            // Omit when popover is open to force update the inputRef
+                            omit: impl.popoverIsOpen,
+                            className: 'xh-popover-filter-chooser__filter-chooser',
+                            displayCount: true,
+                            ...props,
+                            disabled: true
+                        })
+                    ),
+                    content: filterChooser({
+                        model,
+                        displayCount: true,
+                        ...props
+                    }),
+                    matchTargetWidth: true,
+                    minimal: true,
+                    position: 'bottom',
+                    onInteraction: open => {
+                        if (open) {
+                            impl.open();
+                        } else {
+                            impl.close();
+                        }
+                    }
+                })
+            });
+        }
+    });
+
+class PopoverFilterChooserLocalModel extends HoistModel {
+    override xhImpl = true;
+
+    @lookup(FilterChooserModel)
+    model: FilterChooserModel;
+
+    @bindable
+    popoverIsOpen: boolean = false;
+
+    get displaySelectValue() {
+        return this.model.selectValue[0];
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    open() {
+        this.popoverIsOpen = true;
+
+        // Focus and open the menu when rendered
+        this.addReaction({
+            when: () => !!this.model.inputRef.current,
+            run: () => {
+                const inputRef = this.model.inputRef.current;
+                inputRef.focus();
+                (inputRef as any).reactSelectRef.current.select.onMenuOpen();
+            }
+        });
+    }
+
+    close() {
+        this.popoverIsOpen = false;
+    }
+}

package/desktop/cmp/filter/index.ts

@@ -1,2 +1,3 @@
 export * from './FilterChooser';
+export * from './PopoverFilterChooser';
 export * from '@xh/hoist/cmp/filter';

package/mobile/cmp/navigator/NavigatorModel.ts

@@ -44,6 +44,11 @@ export interface NavigatorConfig {
      * See enum for description of supported modes.
      */
     refreshMode?: RefreshMode;
+
+    /**
+     * Base route name for this navigator, with the route for each page being "[route]/[page.id]".
+     */
+    route?: string;
 }
 
 /**
@@ -53,6 +58,9 @@ export interface NavigatorConfig {
 export class NavigatorModel extends HoistModel {
     @bindable disableAppRefreshButton: boolean;
 
+    readonly route: string;
+    readonly routePrefix: string;
+
     @bindable.ref
     stack: PageModel[] = [];
 
@@ -89,6 +97,7 @@ export class NavigatorModel extends HoistModel {
 
     constructor({
         pages,
+        route,
         track = false,
         pullDownToRefresh = true,
         transitionMs = 500,
@@ -101,6 +110,9 @@ export class NavigatorModel extends HoistModel {
         ensureNotEmpty(pages, 'NavigatorModel needs at least one page.');
         ensureUniqueBy(pages, 'id', 'Multiple NavigatorModel PageModels have the same id.');
 
+        this.route = route ?? '';
+        this.routePrefix = route ? route.substring(0, route.lastIndexOf('.') + 1) : '';
+
         this.pages = pages;
         this.track = track;
         this.pullDownToRefresh = pullDownToRefresh;
@@ -209,7 +221,7 @@ export class NavigatorModel extends HoistModel {
         this.stack = this.stack.slice(0, this._swiper.activeIndex + 1);
 
         // 2) Sync route to match the current page stack
-        const newRouteName = this.stack.map(it => it.id).join('.'),
+        const newRouteName = this.routePrefix + this.stack.map(it => it.id).join('.'),
             newRouteParams = mergeDeep({}, ...this.stack.map(it => it.props));
 
         XH.navigate(newRouteName, newRouteParams);
@@ -226,16 +238,17 @@ export class NavigatorModel extends HoistModel {
     };
 
     private onRouteChange(init: boolean = false) {
-        if (!this._swiper || !XH.routerState) return;
+        const {route: myRoute, routePrefix: myRoutePrefix, _swiper} = this;
+        if (!XH.routerState || (myRoute && !XH.router.isActive(myRoute)) || !_swiper) return;
 
-        // Break the current route name into parts, and collect any params for each part.
-        // Use meta.params to determine which params are associated with each route part.
-        // Save these params to use as props for the page.
+        // Break the current route name into parts, only looking at our part of it (myRoute and below).
+        // Collect any params for each part. Use meta.params to determine which params are associated
+        // with each route part. Save these params to use as props for the page.
         const {meta, name, params} = XH.routerState,
-            parts = name.split('.');
+            parts = name.replace(myRoutePrefix, '').split('.');
 
         const routeParts = parts.map((id, idx) => {
-            const metaKey = parts.slice(0, idx + 1).join('.'),
+            const metaKey = myRoutePrefix + parts.slice(0, idx + 1).join('.'),
                 props = {};
 
             // Extract props for this part
@@ -262,7 +275,7 @@ export class NavigatorModel extends HoistModel {
             // we drop the rest of the route and redirect to the route so far
             if (init && pageModelCfg.disableDirectLink) {
                 const completedRouteParts = routeParts.slice(0, i),
-                    newRouteName = completedRouteParts.map(it => it.id).join('.'),
+                    newRouteName = myRoutePrefix + completedRouteParts.map(it => it.id).join('.'),
                     newRouteParams = mergeDeep({}, ...completedRouteParts.map(it => it.props));
 
                 XH.navigate(newRouteName, newRouteParams, {replace: true});

package/package.json

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