@xh/hoist 73.0.0-SNAPSHOT.1746826954718 → 73.0.0-SNAPSHOT.1746830066260

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## v73.0.0-SNAPSHOT - unreleased
 
+### 🎁 New Features
+
+* Added `PopoverFilterChooser`, which wraps `FilterChooser` in a `Popover` to allow it to expand
+  vertically when used in a `Toolbar`.
+
 ### 💥 Breaking Changes (upgrade difficulty: 🟢 TRIVIAL - minor upgrade to Hoist Core)
 
 * Requires `hoist-core >= 30.1.0` with new APIs to support the consolidated Admin Console "Clients"
@@ -36,6 +41,9 @@
 * 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
+  `@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
 

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/mobx/overrides.d.ts

@@ -6,4 +6,4 @@ export declare function makeObservable(target: any, annotations?: AnnotationsMap
 /**
  * An enhanced version of the native mobx isObservableProp
  */
-export declare function isObservableProp(target: any, propertyKey: PropertyKey): any;
+export declare function isObservableProp(target: any, propertyKey: PropertyKey): boolean;

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/core/HoistBaseDecorators.ts

@@ -4,6 +4,8 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {wait} from '@xh/hoist/promise';
+import {observable} from 'mobx';
 import {logError, throwIf} from '../utils/js';
 import {HoistBaseClass, PersistableState, PersistenceProvider, PersistOptions} from './';
 
@@ -71,38 +73,38 @@ function createPersistDescriptor(
         );
         return descriptor;
     }
-    const codeValue = descriptor.initializer;
-    let hasInitialized = false,
-        ret;
-    const initializer = function () {
-        // Initializer can be called multiple times when stacking decorators.
-        if (hasInitialized) return ret;
+    const codeValue = descriptor.initializer,
+        initializer = function () {
+            // codeValue undefined if no initial in-code value provided, otherwise call to get initial value.
+            let ret = codeValue?.call(this);
 
-        // codeValue undefined if no initial in-code value provided, otherwise call to get initial value.
-        ret = codeValue?.call(this);
-
-        const persistOptions = {
-            path: property,
-            ...PersistenceProvider.mergePersistOptions(this.persistWith, options)
-        };
-        PersistenceProvider.create({
-            persistOptions,
-            owner: this,
-            target: {
-                getPersistableState: () =>
-                    new PersistableState(hasInitialized ? this[property] : ret),
-                setPersistableState: state => {
-                    if (!hasInitialized) {
-                        ret = state.value;
-                    } else {
-                        this[property] = state.value;
+            // Property is not available on the instance until after the next tick.
+            const propertyAvailable = observable.box(false),
+                persistOptions = {
+                    path: property,
+                    ...PersistenceProvider.mergePersistOptions(this.persistWith, options)
+                };
+            PersistenceProvider.create({
+                persistOptions,
+                owner: this,
+                target: {
+                    getPersistableState: () =>
+                        new PersistableState(propertyAvailable.get() ? this[property] : ret),
+                    setPersistableState: state => {
+                        if (!propertyAvailable.get()) {
+                            ret = state.value;
+                        } else {
+                            this[property] = state.value;
+                        }
                     }
                 }
-            }
-        });
+            });
 
-        hasInitialized = true;
-        return ret;
-    };
+            // Wait for next tick to ensure construction has completed and property has been made
+            // observable via makeObservable.
+            wait().thenAction(() => propertyAvailable.set(true));
+
+            return ret;
+        };
     return {...descriptor, initializer};
 }

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/mobx/decorators.ts

@@ -5,8 +5,6 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {upperFirst} from 'lodash';
-import {observable, runInAction} from 'mobx';
-import {getOrCreate} from '../utils/js';
 
 /**
  * Decorator to mark a property as observable and also provide a simple MobX action of the
@@ -40,40 +38,14 @@ function createBindable(target, name, descriptor, isRef) {
         Object.defineProperty(target, setterName, {value});
     }
 
-    // 2) Place a hidden getter on prototype that wraps the backing observable.
-    const {initializer} = descriptor,
-        propName = `_${name}_bindable`,
-        valName = `_${name}_bindable_value`;
-    Object.defineProperty(target, propName, {
-        get() {
-            return getOrCreate(this, valName, () => {
-                const initVal = initializer?.call(this);
-                return isRef ? observable.box(initVal, {deep: false}) : observable.box(initVal);
-            });
-        }
-    });
-
-    // 3) Create the descriptor for a getter/setter pair..
-    descriptor = {
-        get() {
-            return this[propName].get();
-        },
-        set(v) {
-            runInAction(() => this[propName].set(v));
-        },
-        enumerable: true,
-        configurable: true
-    };
-
-    // 4) Record on class, so we can later create on *instance* in makeObservable.
-    // (Be sure to create cloned list for *this* particular class.)
+    // 2) Record on class, so we can later create on *instance* in makeObservable.
+    // (Be sure to create cloned list since this will exist on prototype superclasses of this class)
     const key = '_xhBindableProperties';
     if (!target.hasOwnProperty(key)) {
         target[key] = {...target[key]};
     }
-    target[key][name] = descriptor;
+    target[key][name] = {isRef};
 
-    // 5) Return the get/set to be placed on prototype.  (If makeObservable() never called, or called
-    // late, the non-enumerable property will still be available.)
+    // 3) Return original descriptor.
     return descriptor;
 }

package/mobx/overrides.ts

@@ -9,7 +9,9 @@ import {
     AnnotationsMap,
     CreateObservableOptions,
     makeObservable as baseMakeObservable,
-    isObservableProp as baseIsObservableProp
+    isObservableProp as baseIsObservableProp,
+    observable,
+    runInAction
 } from 'mobx';
 
 /**
@@ -21,10 +23,21 @@ export function makeObservable(
     options?: CreateObservableOptions
 ) {
     // Finish creating 'bindable' properties for this instance.
-    // Do here to ensure it's enumerable on *instance*
     const bindables = target._xhBindableProperties;
-    forEach(bindables, (descriptor, name) => {
-        Object.defineProperty(target, name, descriptor);
+    forEach(bindables, ({isRef}, name) => {
+        const propName = `_${name}_bindable`,
+            initVal = target[name];
+        target[propName] = isRef ? observable.box(initVal, {deep: false}) : observable.box(initVal);
+        Object.defineProperty(target, name, {
+            get() {
+                return this[propName].get();
+            },
+            set(v) {
+                runInAction(() => this[propName].set(v));
+            },
+            enumerable: true,
+            configurable: true
+        });
     });
 
     return baseMakeObservable(target, annotations, options);
@@ -33,8 +46,8 @@ export function makeObservable(
 /**
  * An enhanced version of the native mobx isObservableProp
  */
-export function isObservableProp(target: any, propertyKey: PropertyKey) {
+export function isObservableProp(target: any, propertyKey: PropertyKey): boolean {
     return (
-        baseIsObservableProp(target, propertyKey) || target?._xhBindableProperties?.[propertyKey]
+        baseIsObservableProp(target, propertyKey) || !!target?._xhBindableProperties?.[propertyKey]
     );
 }

package/package.json

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