@xh/hoist 86.1.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/NumberEditor.ts

@@ -6,8 +6,8 @@
  */
 import {withDefault} from '@xh/hoist/utils/js';
 import {isNil} from 'lodash';
-import {useCallback, useEffect} from 'react';
-import {CustomCellEditorProps, useGridCellEditor} from '@xh/hoist/kit/ag-grid';
+import {useEffect} from 'react';
+import {CustomCellEditorProps} from '@xh/hoist/kit/ag-grid';
 import {hoistCmp} from '@xh/hoist/core';
 import {numberInput, NumberInputProps} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';
@@ -39,20 +39,19 @@ export const [NumberEditor, numberEditor] = hoistCmp.withFactory<NumberEditorPro
     }
 });
 
-const useNumberGuard = ({onValueChange, eventKey}: CustomCellEditorProps) => {
-    // Needed (strangely) by agGrid to trigger call of isCancelBeforeStart
-    useEffect(() => {
-        if (eventKey?.length === 1) onValueChange(eventKey);
-    }, [eventKey, onValueChange]);
-
-    // Gets called before editor component is rendered, to give agGrid a chance to
-    // cancel the editing before it even starts if char is not a number.
-    const isCancelBeforeStart = useCallback(
-        () => eventKey?.length === 1 && '1234567890'.indexOf(eventKey) < 0,
-        [eventKey]
-    );
+// Characters that can validly begin a numeric entry - digits, sign, and decimal point.
+const NUMBER_START_RE = /[0-9.+-]/;
 
-    useGridCellEditor({
-        isCancelBeforeStart
-    });
+const useNumberGuard = ({onValueChange, eventKey, stopEditing}: CustomCellEditorProps) => {
+    // When editing is started by typing a printable character, seed the editor with it if it can
+    // legally begin a number (digit, `-`, `+`, or `.`), otherwise stop editing to reject the
+    // keystroke - reverting to the original value, as the editor was never seeded.
+    useEffect(() => {
+        if (eventKey?.length !== 1) return;
+        if (NUMBER_START_RE.test(eventKey)) {
+            onValueChange(eventKey);
+        } else {
+            stopEditing(true);
+        }
+    }, [eventKey, onValueChange, stopEditing]);
 };

package/desktop/cmp/grid/editors/SelectEditor.ts

@@ -30,16 +30,21 @@ export const [SelectEditor, selectEditor] = hoistCmp.withFactory<SelectEditorPro
                 onCommit: flushOnCommit
                     ? () => wait().then(() => props.agParams.stopEditing())
                     : null,
-                rsOptions: {
-                    styles: {
-                        menu: styles => ({
-                            ...styles,
-                            whiteSpace: 'nowrap',
-                            width: 'auto',
-                            minWidth: '100%'
-                        })
-                    }
-                },
+                // Auto-size the menu to content, not the narrow cell - but skip when width is already
+                // set, via windowed measurement (#4325) or an explicit `menuWidth` (#4057).
+                rsOptions:
+                    props.inputProps?.enableWindowed || props.inputProps?.menuWidth != null
+                        ? {}
+                        : {
+                              styles: {
+                                  menu: styles => ({
+                                      ...styles,
+                                      whiteSpace: 'nowrap',
+                                      width: 'auto',
+                                      minWidth: '100%'
+                                  })
+                              }
+                          },
                 ...props.inputProps
             }
         };

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/GridFilterDialog.ts

@@ -55,7 +55,7 @@ const filterForm = hoistCmp.factory(({impl}) => {
         fieldDefaults: {label: null, minimal: true},
         item: formField({
             field: 'filter',
-            item: jsonInput()
+            item: jsonInput({autoFormat: true})
         })
     });
 });
@@ -147,7 +147,7 @@ class GridFilterDialogLocalModel extends HoistModel {
     loadForm() {
         const filter = this.model.filter?.removeFunctionFilters();
         this.formModel.init({
-            filter: JSON.stringify(filter?.toJSON() ?? null, undefined, 2)
+            filter: JSON.stringify(filter ?? null)
         });
     }
 

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(),