@xh/hoist 86.2.0 → 86.3.0

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

@@ -1,8 +1,16 @@
+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';
 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 declare function usesMultiValueInput(fieldSpec: GridFilterFieldSpec, op: FieldFilterOperator): boolean;
 /**
  * @internal
  */
@@ -14,7 +22,7 @@ export declare class CustomRowModel extends HoistModel {
     inputVal: any;
     /** FieldFilter config output of this row. */
     get value(): FieldFilterSpec;
-    get fieldSpec(): import("../../../../../../../cmp/grid").GridFilterFieldSpec;
+    get fieldSpec(): GridFilterFieldSpec;
     get options(): {
         label: string;
         value: OperatorOptionValue;

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

@@ -1,5 +1,5 @@
 import { HoistModel } from '@xh/hoist/core';
-import { CompoundFilterOperator, FilterLike } from '@xh/hoist/data';
+import { CompoundFilterOperator, FieldFilter, FilterLike } from '@xh/hoist/data';
 import { HeaderFilterModel } from '../HeaderFilterModel';
 import { CustomRowModel } from './CustomRowModel';
 export declare class CustomTabModel extends HoistModel {
@@ -11,11 +11,17 @@ export declare class CustomTabModel extends HoistModel {
     get filter(): FilterLike;
     get fieldSpec(): import("../../../../../../../cmp/grid").GridFilterFieldSpec;
     get currentGridFilter(): import("@xh/hoist/data").Filter;
-    get columnFilters(): import("@xh/hoist/data").FieldFilter[];
+    get columnFilters(): FieldFilter[];
+    get columnCompoundFilter(): import("@xh/hoist/data").CompoundFilter;
     constructor(headerFilterModel: HeaderFilterModel);
     syncWithFilter(): void;
     reset(): void;
     addEmptyRow(): void;
     removeRow(model: any): void;
     private doSyncWithFilter;
+    private needsExpansion;
+    private mergeOpFor;
+    private deriveOp;
+    private get isRepresentable();
+    private collapseToArrayFilters;
 }

package/build/types/desktop/cmp/input/Select.d.ts

@@ -127,6 +127,14 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
     selectOnFocus?: boolean;
     /** Field on provided options for sourcing each option's value (default `value`). */
     valueField?: string;
+    /**
+     * Function to generate a `SelectOption` for a (non-null) selected value not present in the
+     * current options list. Return null to fall back to the default value-as-label behavior.
+     *
+     * Useful with queryFn-based selects, readonly forms, or any case where options may not be
+     * loaded when a value is set, ensuring the value renders with its proper label.
+     */
+    generateOptionFn?: (value: any) => SelectOption;
 }
 /**
  * A managed wrapper around the React-Select combobox/dropdown component.

package/build/types/kit/react-dropzone/index.d.ts

@@ -1,4 +1,5 @@
 import Dropzone from 'react-dropzone';
 export { Dropzone };
+export { ErrorCode } from 'react-dropzone';
 export type { Accept, FileRejection, FileWithPath } from 'react-dropzone';
 export declare const dropzone: import("@xh/hoist/core").ElementFactory<import("react-dropzone").DropzoneProps & import("react").RefAttributes<import("react-dropzone").DropzoneRef>>;

package/build/types/kit/swiper/index.d.ts

@@ -27,6 +27,7 @@ export declare const swiper: import("@xh/hoist/core").ElementFactory<import("rea
     onScrollbarDragStart?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
     onScrollbarDragMove?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
     onScrollbarDragEnd?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onVirtualUpdate?: (swiper: import("swiper/types").Swiper) => void;
     onZoomChange?: (swiper: import("swiper/types").Swiper, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
     onInit?: (swiper: import("swiper/types").Swiper) => any;
     onBeforeDestroy?: (swiper: import("swiper/types").Swiper) => void;
@@ -53,8 +54,8 @@ export declare const swiper: import("@xh/hoist/core").ElementFactory<import("rea
     onReachEnd?: (swiper: import("swiper/types").Swiper) => void;
     onToEdge?: (swiper: import("swiper/types").Swiper) => void;
     onFromEdge?: (swiper: import("swiper/types").Swiper) => void;
-    onSetTranslate?: (swiper: import("swiper/types").Swiper, translate: number) => void;
-    onSetTransition?: (swiper: import("swiper/types").Swiper, transition: number) => void;
+    onSetTranslate?: (swiper: import("swiper/types").Swiper, translate: number, byController?: boolean | Swiper) => void;
+    onSetTransition?: (swiper: import("swiper/types").Swiper, transition: number, byController?: boolean | Swiper) => void;
     onResize?: (swiper: import("swiper/types").Swiper) => void;
     onObserverUpdate?: (swiper: import("swiper/types").Swiper) => void;
     onBeforeLoopFix?: (swiper: import("swiper/types").Swiper) => void;
@@ -77,7 +78,7 @@ export declare const swiper: import("@xh/hoist/core").ElementFactory<import("rea
     onBeforeInit?: (swiper: import("swiper/types").Swiper) => void;
     onBeforeResize?: (swiper: import("swiper/types").Swiper) => void;
     onBeforeSlideChangeStart?: (swiper: import("swiper/types").Swiper) => void;
-    onBeforeTransitionStart?: (swiper: import("swiper/types").Swiper, speed: number, internal: any) => void;
+    onBeforeTransitionStart?: (swiper: import("swiper/types").Swiper, speed: number, internal: unknown) => void;
     onChangeDirection?: (swiper: import("swiper/types").Swiper) => void;
     onDoubleClick?: (swiper: import("swiper/types").Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
     onDestroy?: (swiper: import("swiper/types").Swiper) => void;

package/build/types/mobile/cmp/grid/impl/ColChooserModel.d.ts

@@ -1,4 +1,4 @@
-import { GridModel } from '@xh/hoist/cmp/grid';
+import { GridModel, IColChooserModel } from '@xh/hoist/cmp/grid';
 import { HoistModel, HSide } from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
 /**
@@ -7,7 +7,7 @@ import '@xh/hoist/mobile/register';
  * It is not necessary to manually create instances of this class within an application.
  * @internal
  */
-export declare class ColChooserModel extends HoistModel {
+export declare class ColChooserModel extends HoistModel implements IColChooserModel {
     xhImpl: boolean;
     gridModel: GridModel;
     showRestoreDefaults: boolean;

package/build/types/mobile/cmp/input/Select.d.ts

@@ -109,6 +109,14 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
     title?: string;
     /** Field on provided options for sourcing each option's value (default `value`). */
     valueField?: string;
+    /**
+     * Function to generate a `SelectOption` for a (non-null) selected value not present in the
+     * current options list. Return null to fall back to the default value-as-label behavior.
+     *
+     * Useful with queryFn-based selects, readonly forms, or any case where options may not be
+     * loaded when a value is set, ensuring the value renders with its proper label.
+     */
+    generateOptionFn?: (value: any) => SelectOption;
 }
 /**
  * A managed wrapper around the React-Select combobox/dropdown component.

package/cmp/grid/Grid.ts

@@ -49,6 +49,7 @@ import {composeRefs, createObservableRef, getLayoutProps} from '@xh/hoist/utils/
 import classNames from 'classnames';
 import {compact, debounce, isBoolean, isEmpty, isEqual, isNil, max, maxBy, merge} from 'lodash';
 import {type MouseEvent} from 'react';
+import {PartialDeep} from 'type-fest';
 import './Grid.scss';
 import {GridModel} from './GridModel';
 import {columnGroupHeader} from './impl/ColumnGroupHeader';
@@ -66,7 +67,7 @@ export interface GridProps<M extends GridModel = GridModel>
      *
      * Note that changes to these options after the component's initial render will be ignored.
      */
-    agOptions?: GridOptions;
+    agOptions?: PartialDeep<GridOptions>;
 
     /**
      * Callback when the grid has initialized. The component will call this with the ag-Grid
@@ -392,7 +393,14 @@ export class GridLocalModel extends HoistModel {
         return {
             track: () => [model.agApi, model.groupBy],
             run: ([agApi, groupBy]) => {
-                if (agApi) agApi.setRowGroupColumns(groupBy);
+                if (!agApi) return;
+                agApi.setRowGroupColumns(groupBy);
+
+                // Re-assert configured visibility - AG Grid re-shows a column when ungrouped (#4473).
+                const state = model.columnState
+                    .filter(({colId}) => !groupBy.includes(colId))
+                    .map(({colId, hidden}) => ({colId, hide: hidden}));
+                agApi.applyColumnState({state});
             }
         };
     }

package/cmp/grid/GridModel.ts

@@ -16,6 +16,7 @@ import {
     GridAutosizeMode,
     GridFilterModelConfig,
     GridGroupSortFn,
+    IColChooserModel,
     isColumnSpec,
     TreeStyle
 } from '@xh/hoist/cmp/grid';
@@ -498,7 +499,7 @@ export class GridModel extends HoistModel {
     store: Store;
     selModel: StoreSelectionModel;
     treeMode: boolean;
-    colChooserModel: HoistModel;
+    colChooserModel: IColChooserModel;
     rowClassFn: RowClassFn;
     rowClassRules: Record<string, RowClassRuleFn>;
     contextMenu: GridContextMenuSpec;
@@ -1259,7 +1260,7 @@ export class GridModel extends HoistModel {
     }
 
     showColChooser() {
-        (this.colChooserModel as any)?.open();
+        this.colChooserModel?.open();
     }
 
     noteAgColumnStateChanged(agColState: AgColumnState[]) {
@@ -1986,7 +1987,7 @@ export class GridModel extends HoistModel {
         };
     }
 
-    private parseChooserModel(chooserModel: GridConfig['colChooserModel']): HoistModel {
+    private parseChooserModel(chooserModel: GridConfig['colChooserModel']): IColChooserModel {
         if (!chooserModel) return null;
 
         const modelClass = XH.isMobileApp ? MobileColChooserModel : DesktopColChooserModel;

package/cmp/grid/Types.ts

@@ -5,7 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 
-import type {HSide, PersistOptions, Some} from '@xh/hoist/core';
+import type {HoistModel, HSide, PersistOptions, Some} from '@xh/hoist/core';
 import type {
     FilterBindTarget,
     FilterMatchMode,
@@ -142,6 +142,14 @@ export interface GridFilterBindTarget extends FilterBindTarget, FilterValueSourc
  */
 export type GroupRowRenderer = (context: ICellRendererParams) => ReactNode;
 
+/** Cross-platform interface for desktop and mobile ColChooserModels. */
+export interface IColChooserModel extends HoistModel {
+    readonly gridModel: GridModel;
+    readonly isOpen: boolean;
+    open(): void;
+    close(): void;
+}
+
 /**
  * Configuration for a {@link ColChooserModel} - the model backing the grid column chooser UI.
  * Passed via the `colChooserModel` config on {@link GridConfig}, or set app-wide via

package/cmp/grid/impl/MenuSupport.ts

@@ -138,7 +138,7 @@ function replaceHoistToken(token: string, gridModel: GridModel): Some<RecordActi
                 text: 'Columns...',
                 icon: Icon.gridPanel(),
                 hidden: !gridModel?.colChooserModel,
-                actionFn: () => (gridModel.colChooserModel as any)?.open()
+                actionFn: () => gridModel.colChooserModel?.open()
             });
         case 'expandCollapseAll': // For backward compatibility
         case 'expandCollapse':

package/cmp/input/SegmentedControlOption.ts

@@ -33,6 +33,13 @@ export interface SegmentedControlOption {
      * `intent` default. Defaults to the control's `intent`.
      */
     intent?: Intent;
+
+    /**
+     * Optional stable identifier emitted on this option's rendered button as `data-testid`, for
+     * use by E2E tests. If omitted and the control itself has a `testId`, one is auto-derived as
+     * `${controlTestId}-${value}`. If neither is set, no attribute is emitted.
+     */
+    testId?: string;
 }
 
 /**
@@ -58,4 +65,11 @@ export interface SegmentedControlNullOption {
      * `intent` default. Defaults to the control's `intent`.
      */
     intent?: Intent;
+
+    /**
+     * Optional stable identifier emitted on this option's rendered button as `data-testid`, for
+     * use by E2E tests. If omitted and the control itself has a `testId`, one is auto-derived as
+     * `${controlTestId}-null`. If neither is set, no attribute is emitted.
+     */
+    testId?: string;
 }

package/cmp/store/impl/StoreFilterFieldImplModel.ts

@@ -66,7 +66,7 @@ export class StoreFilterFieldImplModel extends HoistModel {
 
         this.addReaction(
             {
-                track: () => [this.filterText, gridModel?.columns, gridModel?.groupBy],
+                track: () => [this.filterText, gridModel?.columns],
                 run: () => this.regenerateFilter(),
                 fireImmediately: true
             },
@@ -161,8 +161,7 @@ export class StoreFilterFieldImplModel extends HoistModel {
         if (excludeFields) ret = without(ret, ...excludeFields);
 
         if (gridModel) {
-            const groupBy = gridModel.groupBy,
-                visibleCols = gridModel.getVisibleLeafColumns();
+            const visibleCols = gridModel.getVisibleLeafColumns();
 
             // Push on dot-delimited grid column fields. These are supported by Grid and traverse
             // sub-objects in StoreRecord.data to display nested properties. Given that Grid treats these
@@ -182,12 +181,12 @@ export class StoreFilterFieldImplModel 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 filter 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)
+                    visibleCols.find(c => c.field === f)
                 );
             });
         }

package/core/HoistAppModel.ts

@@ -5,8 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {webSocketIndicator} from '@xh/hoist/cmp/websocket';
-import {AppOptionSpec, HoistModel, InitContext, Thunkable} from './';
-import {Route} from 'router5';
+import {AppOptionSpec, HoistModel, HoistRoute, InitContext, Thunkable} from './';
 import {ReactNode} from 'react';
 /**
  * Specialized base class for defining the central model for a Hoist app as specified by its
@@ -52,7 +51,7 @@ export class HoistAppModel extends HoistModel {
     /**
      * Provide the initial set of Router5 Routes to be used by this application.
      */
-    getRoutes(): Route[] {
+    getRoutes(): HoistRoute[] {
         return [];
     }
 

package/core/types/Types.ts

@@ -9,6 +9,7 @@ import {LocalDate} from '@xh/hoist/utils/datetime';
 import {MomentInput} from 'moment';
 import {Component, FunctionComponent, ReactElement} from 'react';
 import {DebounceSettings} from 'lodash';
+import {Route} from 'router5';
 
 /** Values available for intents. */
 export type Intent = 'primary' | 'success' | 'warning' | 'danger';
@@ -55,14 +56,22 @@ export type DebounceSpec = number | (DebounceSettings & {interval: number});
  * function that returns a ReactElement. In either case, the function will be called with no arguments.
  */
 export type Content =
-    | ReactElement
-    | FunctionComponent
-    | Component
-    | ElementFactory
-    | (() => ReactElement);
+    ReactElement | FunctionComponent | Component | ElementFactory | (() => ReactElement);
 
 export type DateLike = Date | LocalDate | MomentInput;
 
+/**
+ * A Router5 {@link Route} spec, extended with Hoist's `omit` support for declarative exclusion of
+ * routes at registration time (e.g. role-gated sections). Note `omit` is evaluated once when routes
+ * are added to the router during app startup - it is not reactive.
+ *
+ * @see HoistAppModel.getRoutes
+ */
+export interface HoistRoute extends Omit<Route, 'children'> {
+    omit?: Thunkable<boolean>;
+    children?: HoistRoute[];
+}
+
 /** Valid units for the {@link LocalDate} adjustment methods. */
 export type LocalDateUnit =
     | 'year'

package/desktop/cmp/filechooser/FileChooser.ts

@@ -12,7 +12,7 @@ import {dropzone} from '@xh/hoist/kit/react-dropzone';
 import {elementFromContent, getLayoutProps} from '@xh/hoist/utils/react';
 import {FileRejection} from 'react-dropzone';
 import {FileChooserModel} from './FileChooserModel';
-import {fromPairs, isEmpty} from 'lodash';
+import {isEmpty} from 'lodash';
 import classNames from 'classnames';
 import {defaultEmptyDisplay} from './impl/DefaultEmptyDisplay';
 import {defaultFileDisplay} from './impl/DefaultFileDisplay';
@@ -88,8 +88,11 @@ export const [FileChooser, fileChooser] = hoistCmp.withFactory<FileChooserProps>
 
         return dropzone({
             ref: model.dropzoneRef,
-            // react-dropzone wants a {type: [extensions]} map; extensions serve as their own keys.
-            accept: accept ? fromPairs(accept.map(ext => [ext, [ext]])) : null,
+            // react-dropzone expects `accept` to be a {type: [extensions]} map. The FileChooserModel
+            // only accepts a list of extensions. Extensions alone are sufficient for validation and
+            // a MIME type is not required. Use `_/_` as a dummy MIME type to prevent console warnings
+            // from react-dropzone.
+            accept: accept ? {'_/_': accept} : null,
             // Disable interaction (drag/click/drop) at the limit; the target shows a clear message.
             disabled: disabled || atLimit,
             maxFiles,

package/desktop/cmp/filechooser/FileChooserModel.ts

@@ -7,7 +7,7 @@
 import {em, li, span, ul, vbox} from '@xh/hoist/cmp/layout';
 import {HoistModel, Some, ToastSpec, XH} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
-import {FileRejection} from '@xh/hoist/kit/react-dropzone';
+import {ErrorCode, FileRejection} from '@xh/hoist/kit/react-dropzone';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {pluralize, withDefault} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
@@ -187,10 +187,17 @@ export class FileChooserModel extends HoistModel {
         return true;
     }
 
-    private defaultRejectMessage(rejections: FileRejection[]): ReactElement {
-        // 1) Map rejected files to error messages
+    private defaultRejectMessage = (rejections: FileRejection[]): ReactElement => {
+        // 1) Map rejected files to error messages. Use custom message for invalid types to avoid displaying dummy MIME type.
         const errorsByFile = fromPairs(
-            map(rejections, ({file, errors}) => [file.name, map(errors, 'message')])
+            map(rejections, ({file, errors}) => [
+                file.name,
+                map(errors, e =>
+                    e.code === ErrorCode.FileInvalidType
+                        ? `File type must be one of ${this.accept.join(', ')}`
+                        : e.message
+                )
+            ])
         );
 
         // 2) List files with bulleted error messages
@@ -207,7 +214,7 @@ export class FileChooserModel extends HoistModel {
             });
 
         return vbox(rejectItems);
-    }
+    };
 
     private getRejectToastSpec(params: Partial<ToastSpec> | boolean): Partial<ToastSpec> {
         if (params == false) return null;

package/desktop/cmp/filter/FilterChooser.scss

@@ -15,6 +15,47 @@
     margin: 7px 4px;
     align-self: start;
   }
+
+  // Popover mode - collapsed trigger expands into an overlaid popover.
+  &--popover > .bp6-popover-target {
+    display: flex;
+    flex: 1;
+  }
+
+  &__trigger {
+    .xh-select__value-container--is-multi {
+      overflow-y: hidden !important;
+    }
+  }
+
+  // Extra class names required to override the default styles of the popover.
+  &__popover.bp6-popover.bp6-minimal {
+    box-shadow: none;
+
+    // Overlay the expanded input onto the collapsed 30px trigger. Offset follows Blueprint's
+    // resolved placement, which flips (bottom-anchored) near the viewport's bottom edge.
+    &.bp6-popover-placement-bottom {
+      margin-top: -30px !important;
+    }
+    &.bp6-popover-placement-top {
+      margin-bottom: -30px !important;
+    }
+
+    // Content is portaled out of .xh-filter-chooser - restate the flex rule so it fills the width.
+    .bp6-popover-target {
+      display: flex;
+      flex: 1;
+    }
+
+    .bp6-popover-content {
+      background: transparent;
+    }
+
+    .xh-select__value-container--is-multi {
+      height: unset;
+      line-height: unset;
+    }
+  }
 }
 
 .xh-filter-chooser-option {