@xh/hoist 73.0.0-SNAPSHOT.1746829743606 → 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"

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1746829743606",
+  "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",