@xh/hoist 86.2.0 → 86.3.0

package/desktop/cmp/filter/FilterChooser.ts

@@ -6,14 +6,23 @@
  */
 import {FilterChooserFilter, FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {box, div, hbox, hframe, vbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, LayoutProps, uses} from '@xh/hoist/core';
+import {
+    hoistCmp,
+    HoistModel,
+    HoistProps,
+    LayoutProps,
+    lookup,
+    useLocalModel,
+    uses
+} from '@xh/hoist/core';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {select} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
-import {withDefault} from '@xh/hoist/utils/js';
-import {splitLayoutProps} from '@xh/hoist/utils/react';
+import {elemWithin, withDefault} from '@xh/hoist/utils/js';
+import {getLayoutProps, splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {isEmpty, sortBy} from 'lodash';
 import {badge} from '@xh/hoist/cmp/badge';
@@ -41,6 +50,11 @@ export interface FilterChooserProps extends HoistProps<FilterChooserModel>, Layo
     placeholder?: string;
     /** Icon clicked to launch favorites menu. (Defaults to Icon.favorite()) */
     favoritesIcon?: ReactElement;
+    /**
+     * True to render collapsed in-place, expanding into a popover when opened - useful in toolbars
+     * and other height-constrained containers. Opens in the direction set by `menuPlacement`.
+     */
+    popover?: boolean;
 }
 
 /**
@@ -50,6 +64,30 @@ export interface FilterChooserProps extends HoistProps<FilterChooserModel>, Layo
 export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooserProps>({
     model: uses(FilterChooserModel),
     className: 'xh-filter-chooser',
+    render({model, className, ...props}, ref) {
+        return props.popover
+            ? popoverFilterChooser({model, className, ...props, ref})
+            : filterChooserControl({model, className, ...props, ref});
+    }
+});
+
+//------------------
+// Implementation
+//------------------
+interface FilterChooserControlProps extends FilterChooserProps {
+    /** Internal - false to render a non-interactive display (the collapsed popover trigger). */
+    xhInteractive?: boolean;
+    /** Internal - override for the favorites menu open state. */
+    xhFavoritesOpen?: boolean;
+}
+
+/**
+ * The Select-based control shared by the inline FilterChooser and both faces (collapsed trigger and
+ * expanded content) of the popover variant. Only the interactive instance binds `model.inputRef`,
+ * so the popover can mount trigger and content simultaneously without contention.
+ */
+const filterChooserControl = hoistCmp.factory<FilterChooserControlProps>({
+    model: uses(FilterChooserModel),
     render({model, className, ...props}, ref) {
         const [layoutProps, chooserProps] = splitLayoutProps(props),
             {
@@ -68,7 +106,9 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
                 maxMenuHeight,
                 menuPlacement,
                 menuWidth,
-                favoritesIcon
+                favoritesIcon,
+                xhInteractive = true,
+                xhFavoritesOpen
             } = chooserProps,
             disabled = unsupportedFilter || chooserProps.disabled,
             placeholder = unsupportedFilter
@@ -90,7 +130,8 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
                         flex: 1,
                         height: layoutProps?.height,
                         bind: 'selectValue',
-                        ref: inputRef,
+                        // Only the interactive instance owns the shared inputRef.
+                        ref: xhInteractive ? inputRef : undefined,
 
                         autoFocus,
                         disabled,
@@ -119,12 +160,15 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
                             },
                             components: {
                                 DropdownIndicator: () => favoritesIconCmp(model, favoritesIcon)
-                            }
+                            },
+                            // Display-only trigger: suppress menu + typing, but leave clear and
+                            // favorites affordances live for single-click access.
+                            ...(xhInteractive ? {} : {menuIsOpen: false, isSearchable: false})
                         }
                     })
                 ),
                 content: favoritesMenu(),
-                isOpen: favoritesIsOpen,
+                isOpen: xhFavoritesOpen ?? favoritesIsOpen,
                 position: 'bottom-right',
                 minimal: true,
                 onInteraction: willOpen => {
@@ -136,6 +180,102 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
     }
 });
 
+/**
+ * Wraps a FilterChooser so it renders collapsed in-place and expands into a popover when opened,
+ * allowing it to grow vertically beyond the height of a toolbar. The collapsed trigger always
+ * occupies its space (so surrounding layout never shifts) and routes single clicks on its clear
+ * and favorites controls directly, rather than first opening the popover.
+ */
+const popoverFilterChooser = hoistCmp.factory<FilterChooserProps>({
+    model: uses(FilterChooserModel),
+    render({model, className, ...props}, ref) {
+        const impl = useLocalModel(FilterChooserLocalModel),
+            {popoverIsOpen} = impl,
+            {popover: _popover, ...rest} = props,
+            layoutProps = getLayoutProps(rest);
+
+        return box({
+            ref,
+            className: classNames(className, 'xh-filter-chooser--popover'),
+            ...layoutProps,
+            item: popover({
+                isOpen: popoverIsOpen,
+                popoverClassName: 'xh-filter-chooser__popover',
+                matchTargetWidth: true,
+                minimal: true,
+                position: 'bottom',
+                item: filterChooserControl({
+                    model,
+                    flex: 1,
+                    className: 'xh-filter-chooser__trigger',
+                    ...rest,
+                    displayCount: true,
+                    xhInteractive: false,
+                    // Trigger hosts the favorites menu only while collapsed; once open, the
+                    // expanded content takes over.
+                    xhFavoritesOpen: model.favoritesIsOpen && !popoverIsOpen
+                }),
+                content: filterChooserControl({
+                    model,
+                    flex: 1,
+                    className: 'xh-filter-chooser__content',
+                    ...rest,
+                    displayCount: true
+                }),
+                onInteraction: (willOpen, e) => {
+                    if (willOpen) {
+                        // Let clicks on the inline clear / favorites controls act directly.
+                        const target = e?.target as HTMLElement;
+                        if (
+                            target &&
+                            (elemWithin(target, 'xh-select__clear-indicator') ||
+                                elemWithin(target, 'xh-filter-chooser-favorite-icon'))
+                        ) {
+                            return;
+                        }
+                        impl.open();
+                    } else {
+                        impl.close();
+                    }
+                }
+            })
+        });
+    }
+});
+
+class FilterChooserLocalModel extends HoistModel {
+    override xhImpl = true;
+
+    @lookup(FilterChooserModel)
+    model: FilterChooserModel;
+
+    @bindable
+    popoverIsOpen: boolean = false;
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    open() {
+        this.popoverIsOpen = true;
+
+        // Focus the (now-mounted) interactive input and open its menu once available.
+        this.addReaction({
+            when: () => !!this.model.inputRef.current,
+            run: () => {
+                const inputRef = this.model.inputRef.current;
+                inputRef.focus();
+                (inputRef as any).reactSelectRef.current?.openMenu('first');
+            }
+        });
+    }
+
+    close() {
+        this.popoverIsOpen = false;
+    }
+}
+
 //-----------------
 // Options
 //------------------

package/desktop/cmp/filter/PopoverFilterChooser.ts

@@ -5,100 +5,23 @@
  * Copyright © 2026 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 {hoistCmp, uses} from '@xh/hoist/core';
 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';
+import {filterChooser, 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.
+ *
+ * @deprecated Use `filterChooser({popover: true})` instead - the popover behavior is now a built-in
+ *      mode of `FilterChooser`. This alias will be removed in a future major release.
  * @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();
-                        }
-                    }
-                })
-            });
+        render(props) {
+            return filterChooser({popover: true, ...props});
         }
     });
-
-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?.openMenu('first');
-            }
-        });
-    }
-
-    close() {
-        this.popoverIsOpen = false;
-    }
-}

package/desktop/cmp/grid/editors/impl/InlineEditorModel.ts

@@ -35,7 +35,12 @@ export function useInlineEditorModel(
 
     useGridCellEditor({
         // This is called in full-row editing when the user tabs into the cell
-        focusIn: useCallback(() => impl.focus(), [impl])
+        focusIn: useCallback(() => impl.focus(), [impl]),
+        // Backstop to flush any pending edit when editing ends, in case no blur fired (#4134).
+        isCancelAfterEnd: useCallback(() => {
+            impl.ref.current?.doCommit();
+            return false;
+        }, [impl])
     });
 
     return component({

package/desktop/cmp/grid/find/impl/GridFindFieldImplModel.ts

@@ -268,7 +268,6 @@ export class GridFindFieldImplModel extends HoistModel {
 
     private getActiveFields(): string[] {
         const {gridModel, includeFields, excludeFields} = this,
-            groupBy = gridModel.groupBy,
             visibleCols = gridModel.getVisibleLeafColumns();
 
         let ret = ['id', ...gridModel.store.fieldNames];
@@ -293,12 +292,11 @@ export class GridFindFieldImplModel extends HoistModel {
         // Run exclude once more to support explicitly excluding a dot-sep field added above.
         if (excludeFields) ret = without(ret, ...excludeFields);
 
-        // Final filter for column visibility, or explicit request for inclusion.
+        // Final filter for column visibility, or explicit request for inclusion. Deliberately not
+        // keyed to groupBy, so query results stay stable across regrouping (see #4070).
         ret = ret.filter(f => {
             return (
-                (includeFields && includeFields.includes(f)) ||
-                visibleCols.find(c => c.field === f) ||
-                groupBy.includes(f)
+                (includeFields && includeFields.includes(f)) || visibleCols.find(c => c.field === f)
             );
         });
 

package/desktop/cmp/grid/impl/colchooser/ColChooserModel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {ColChooserConfig, GridModel} from '@xh/hoist/cmp/grid';
+import {ColChooserConfig, GridModel, IColChooserModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
 import type {FilterMatchMode} from '@xh/hoist/data';
 import {LeftRightChooserModel} from '@xh/hoist/desktop/cmp/leftrightchooser';
@@ -15,7 +15,7 @@ import {sortBy} from 'lodash';
  * State management for the ColChooser component.
  * @internal
  */
-export class ColChooserModel extends HoistModel {
+export class ColChooserModel extends HoistModel implements IColChooserModel {
     override xhImpl = true;
 
     gridModel: GridModel;

package/desktop/cmp/grid/impl/filter/headerfilter/custom/CustomRow.ts

@@ -12,7 +12,7 @@ import {dateInput, numberInput, select, textInput} from '@xh/hoist/desktop/cmp/i
 import {Icon} from '@xh/hoist/icon';
 import {kebabCase} from 'lodash';
 
-import {CustomRowModel} from './CustomRowModel';
+import {CustomRowModel, usesMultiValueInput} from './CustomRowModel';
 
 /**
  * Row with operator and value combination for CustomTab.
@@ -74,17 +74,7 @@ const inputField = hoistCmp.factory<CustomRowModel>(({model}) => {
             ...fieldSpec.inputProps
         };
 
-    if (fieldSpec.isNumericFieldType) {
-        return numberInput({
-            ...props,
-            enableShorthandUnits: true
-        });
-    } else if (fieldSpec.isDateBasedFieldType) {
-        return dateInput({
-            ...props,
-            valueType: fieldSpec.fieldType as 'localDate' | 'date'
-        });
-    } else if (fieldSpec.supportsSuggestions(op as FieldFilterOperator)) {
+    if (usesMultiValueInput(fieldSpec, op as FieldFilterOperator)) {
         return select({
             ...props,
             options: fieldSpec.values,
@@ -94,6 +84,16 @@ const inputField = hoistCmp.factory<CustomRowModel>(({model}) => {
             hideSelectedOptionCheck: true,
             enableClear: false
         });
+    } else if (fieldSpec.isNumericFieldType) {
+        return numberInput({
+            ...props,
+            enableShorthandUnits: true
+        });
+    } else if (fieldSpec.isDateBasedFieldType) {
+        return dateInput({
+            ...props,
+            valueType: fieldSpec.fieldType as 'localDate' | 'date'
+        });
     } else {
         return textInput(props);
     }

package/desktop/cmp/grid/impl/filter/headerfilter/custom/CustomRowModel.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import type {GridFilterFieldSpec} from '@xh/hoist/cmp/grid';
 import {HoistModel} from '@xh/hoist/core';
 import {FieldFilterOperator, FieldFilterSpec} from '@xh/hoist/data';
 import {HeaderFilterModel} from '../HeaderFilterModel';
@@ -13,6 +14,23 @@ import {CustomTabModel} from './CustomTabModel';
 
 type OperatorOptionValue = 'blank' | 'not blank' | FieldFilterOperator;
 
+/**
+ * Whether a row for the given op renders the multi-value `select` input - the only custom-tab input
+ * that holds an array of values directly. The single-value inputs (number, date, text) are used
+ * otherwise, so array filter values bound for them must be expanded into one row each (see
+ * `CustomTabModel.doSyncWithFilter`). Mirrors the input choice made in `CustomRow`.
+ */
+export function usesMultiValueInput(
+    fieldSpec: GridFilterFieldSpec,
+    op: FieldFilterOperator
+): boolean {
+    return (
+        !fieldSpec.isNumericFieldType &&
+        !fieldSpec.isDateBasedFieldType &&
+        fieldSpec.supportsSuggestions(op)
+    );
+}
+
 /**
  * @internal
  */

package/desktop/cmp/grid/impl/filter/headerfilter/custom/CustomTab.scss

@@ -9,6 +9,11 @@
     }
   }
 
+  &__unsupported {
+    padding: var(--xh-pad-px);
+    color: var(--xh-text-color-muted);
+  }
+
   &__tbar {
     background-color: transparent;
     .xh-button {

package/desktop/cmp/grid/impl/filter/headerfilter/custom/CustomTab.ts

@@ -23,13 +23,24 @@ import {CustomTabModel} from './CustomTabModel';
 export const customTab = hoistCmp.factory({
     model: uses(CustomTabModel),
     render({model}) {
+        const {rowModels} = model;
+        if (!rowModels) {
+            return panel({
+                className: 'xh-custom-filter-tab',
+                item: div({
+                    className: 'xh-custom-filter-tab__unsupported',
+                    item: 'This filter is too complex to edit here.'
+                })
+            });
+        }
+
         return panel({
             className: 'xh-custom-filter-tab',
             tbar: tbar(),
             items: div({
                 className: 'xh-custom-filter-tab__list',
                 items: [
-                    ...model.rowModels.map(m => customRow({model: m})),
+                    ...rowModels.map(m => customRow({model: m})),
                     div({
                         className: 'xh-custom-filter-tab__list__add-btn-row',
                         items: [
@@ -52,7 +63,7 @@ export const customTab = hoistCmp.factory({
 const tbar = hoistCmp.factory<CustomTabModel>(({model}) => {
     return toolbar({
         className: 'xh-custom-filter-tab__tbar',
-        omit: model.rowModels.length < 2,
+        omit: !model.rowModels || model.rowModels.length < 2,
         compact: true,
         items: [
             filler(),

package/desktop/cmp/grid/impl/filter/headerfilter/custom/CustomTabModel.ts

@@ -5,12 +5,18 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {HoistModel, XH} from '@xh/hoist/core';
-import {CompoundFilterOperator, FilterLike} from '@xh/hoist/data';
+import {
+    CompoundFilterOperator,
+    FieldFilter,
+    FieldFilterOperator,
+    FieldFilterSpec,
+    FilterLike
+} from '@xh/hoist/data';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
-import {compact, isEmpty} from 'lodash';
+import {compact, first, flatMap, forEach, groupBy, isArray, isEmpty, uniq} from 'lodash';
 import {HeaderFilterModel} from '../HeaderFilterModel';
 
-import {CustomRowModel} from './CustomRowModel';
+import {CustomRowModel, usesMultiValueInput} from './CustomRowModel';
 
 export class CustomTabModel extends HoistModel {
     override xhImpl = true;
@@ -23,11 +29,16 @@ export class CustomTabModel extends HoistModel {
     /** Filter config output by this model. */
     @computed.struct
     get filter(): FilterLike {
-        const {op, rowModels} = this,
-            filters = compact(rowModels.map(it => it.value));
-        if (isEmpty(filters)) return null;
-        if (filters.length > 1) return {filters, op};
-        return filters;
+        const {op, rowModels} = this;
+
+        // Null rowModels flags an unrepresentable filter - emit it unchanged so commit is a no-op.
+        if (!rowModels) return this.columnCompoundFilter ?? this.columnFilters;
+
+        const specs = compact(rowModels.map(it => it.value));
+        if (isEmpty(specs)) return null;
+
+        const filters = this.collapseToArrayFilters(specs, op);
+        return filters.length > 1 ? {filters, op} : first(filters);
     }
 
     get fieldSpec() {
@@ -42,6 +53,10 @@ export class CustomTabModel extends HoistModel {
         return this.headerFilterModel.columnFilters;
     }
 
+    get columnCompoundFilter() {
+        return this.headerFilterModel.columnCompoundFilter;
+    }
+
     constructor(headerFilterModel: HeaderFilterModel) {
         super();
         makeObservable(this);
@@ -74,13 +89,27 @@ export class CustomTabModel extends HoistModel {
     //-------------------
     @action
     private doSyncWithFilter() {
-        const {columnFilters} = this,
-            rowModels = [];
+        const {columnCompoundFilter} = this,
+            op = this.deriveOp();
+        this.op = op;
+
+        if (!this.isRepresentable) {
+            this.logWarn('Filter cannot be edited in the custom tab; leaving it unchanged');
+            this.rowModels = null;
+            return;
+        }
 
-        // Create rows based on filter.
-        columnFilters.forEach(filter => {
-            const {op, value} = filter;
-            rowModels.push(new CustomRowModel(this, op, value));
+        // Expand a multi-value clause destined for a single-value input into one row per value
+        // (joined under the tab op); the multi-select input holds the array directly as one row.
+        const rowModels = [],
+            children = (columnCompoundFilter?.filters ?? this.columnFilters) as FieldFilter[];
+        children.forEach(filter => {
+            const {op: fieldOp, value} = filter;
+            if (this.needsExpansion(filter)) {
+                value.forEach(v => rowModels.push(new CustomRowModel(this, fieldOp, v)));
+            } else {
+                rowModels.push(new CustomRowModel(this, fieldOp, value));
+            }
         });
 
         // Add an empty pending row
@@ -90,4 +119,58 @@ export class CustomTabModel extends HoistModel {
 
         this.rowModels = rowModels;
     }
+
+    // Whether a multi-value clause must be expanded to one row per value (vs held by a multi-select).
+    private needsExpansion({op, value}: FieldFilter): boolean {
+        return isArray(value) && value.length > 1 && !usesMultiValueInput(this.fieldSpec, op);
+    }
+
+    // The op a multi-value clause joins under: `=`-family => OR, negated => AND.
+    private mergeOpFor(op: FieldFilterOperator): CompoundFilterOperator {
+        return FieldFilter.INCLUDE_LIKE_OPERATORS.includes(op) ? 'OR' : 'AND';
+    }
+
+    // Op joining the tab's rows
+    private deriveOp(): CompoundFilterOperator {
+        const {columnCompoundFilter, columnFilters} = this;
+        if (columnCompoundFilter) return columnCompoundFilter.op;
+
+        const arrayFilter = columnFilters.find(f => this.needsExpansion(f));
+        return arrayFilter ? this.mergeOpFor(arrayFilter.op) : 'AND';
+    }
+
+    // Filter must be representable as a flat set of rows with a single op
+    private get isRepresentable(): boolean {
+        const {columnCompoundFilter} = this,
+            op = this.deriveOp(),
+            children = columnCompoundFilter?.filters ?? this.columnFilters;
+        return children.every(
+            f =>
+                FieldFilter.isFieldFilter(f) &&
+                (!this.needsExpansion(f) || op === this.mergeOpFor(f.op))
+        );
+    }
+
+    // Inverse of the expand in `doSyncWithFilter`: collapse same-field/op rows into one multi-value FieldFilter
+    private collapseToArrayFilters(
+        specs: FieldFilterSpec[],
+        op: CompoundFilterOperator
+    ): FieldFilterSpec[] {
+        const ret: FieldFilterSpec[] = [];
+        forEach(groupBy(specs, 'op'), (groupSpecs, groupOp: FieldFilterOperator) => {
+            const canMerge =
+                groupSpecs.length > 1 &&
+                FieldFilter.ARRAY_OPERATORS.includes(groupOp) &&
+                op === this.mergeOpFor(groupOp);
+
+            if (canMerge) {
+                const {field} = groupSpecs[0],
+                    value = uniq(flatMap(groupSpecs, it => it.value));
+                ret.push({field, op: groupOp, value});
+            } else {
+                ret.push(...groupSpecs);
+            }
+        });
+        return ret;
+    }
 }