@xh/hoist 80.0.0-SNAPSHOT.1768360784265 → 80.0.0-SNAPSHOT.1768517142984

package/build/types/cmp/grid/Grid.d.ts

@@ -83,7 +83,7 @@ export declare class GridLocalModel extends HoistModel {
     get useScrollOptimization(): boolean;
     applyScrollOptimization(): void;
     columnsReaction(): {
-        track: () => ((import("@xh/hoist/cmp/grid").Column | import("@xh/hoist/cmp/grid").ColumnGroup)[] | GridApi<any>)[];
+        track: () => (import("@xh/hoist/cmp/grid").ColumnOrGroup[] | GridApi<any>)[];
         run: ([api]: [any]) => void;
     };
     columnStateReaction(): ReactionSpec<[GridApi, ColumnState[]]>;

package/build/types/cmp/grid/GridModel.d.ts

@@ -1,5 +1,5 @@
 import { AgGridModel } from '@xh/hoist/cmp/ag-grid';
-import { Column, ColumnGroup, ColumnGroupSpec, ColumnSpec, GridAutosizeMode, GridFilterModelConfig, GridGroupSortFn, TreeStyle } from '@xh/hoist/cmp/grid';
+import { Column, ColumnGroup, ColumnOrGroup, ColumnOrGroupSpec, ColumnSpec, GridAutosizeMode, GridFilterModelConfig, GridGroupSortFn, TreeStyle } from '@xh/hoist/cmp/grid';
 import { GridFilterModel } from '@xh/hoist/cmp/grid/filter/GridFilterModel';
 import { Awaitable, HoistModel, HSide, PlainObject, SizingMode, Some, TaskObserver, Thunkable, VSide } from '@xh/hoist/core';
 import { Store, StoreConfig, StoreRecord, StoreRecordId, StoreRecordOrId, StoreSelectionConfig, StoreSelectionModel, StoreTransaction } from '@xh/hoist/data';
@@ -12,7 +12,7 @@ import { GridSorter, GridSorterLike } from './GridSorter';
 import { ColChooserConfig, ColumnState, GridModelPersistOptions, GroupRowRenderer, RowClassFn, RowClassRuleFn } from './Types';
 export interface GridConfig {
     /** Columns for this grid. */
-    columns?: Array<ColumnSpec | ColumnGroupSpec>;
+    columns?: ColumnOrGroupSpec[];
     /**  Column configs to be set on all columns.  Merges deeply. */
     colDefaults?: Partial<ColumnSpec>;
     /**
@@ -280,7 +280,7 @@ export declare class GridModel extends HoistModel {
     filterModel: GridFilterModel;
     agGridModel: AgGridModel;
     viewRef: RefObject<HTMLDivElement>;
-    columns: Array<ColumnGroup | Column>;
+    columns: ColumnOrGroup[];
     columnState: ColumnState[];
     expandState: any;
     sortBy: GridSorter[];
@@ -478,7 +478,7 @@ export declare class GridModel extends HoistModel {
     updateData(rawData: PlainObject[] | StoreTransaction): import("@xh/hoist/data").StoreChangeLog;
     /** Clear the underlying store, removing all rows. */
     clear(): void;
-    setColumns(colConfigs: Array<ColumnSpec | ColumnGroupSpec>): void;
+    setColumns(colConfigs: ColumnOrGroupSpec[]): void;
     setColumnState(colState: ColumnState[]): void;
     showColChooser(): void;
     noteAgColumnStateChanged(agColState: AgColumnState[]): void;
@@ -530,9 +530,9 @@ export declare class GridModel extends HoistModel {
      */
     getColumnPinned(colId: string): HSide;
     /** Return matching leaf-level Column object from the provided collection. */
-    findColumn(cols: Array<Column | ColumnGroup>, colId: string): Column;
+    findColumn(cols: ColumnOrGroup[], colId: string): Column;
     /** Return matching ColumnGroup from the provided collection. */
-    findColumnGroup(cols: Array<Column | ColumnGroup>, groupId: string): ColumnGroup;
+    findColumnGroup(cols: ColumnOrGroup[], groupId: string): ColumnGroup;
     /**
      * Return the current state object representation for the given colId.
      *

package/build/types/cmp/grid/Types.d.ts

@@ -1,11 +1,11 @@
 import { GridFilterFieldSpecConfig } from '@xh/hoist/cmp/grid/filter/GridFilterFieldSpec';
 import { HSide, PersistOptions, Some } from '@xh/hoist/core';
-import { Store, StoreRecord, View } from '@xh/hoist/data';
-import { ReactElement, ReactNode } from 'react';
-import { Column } from './columns/Column';
-import { ColumnGroup } from './columns/ColumnGroup';
-import { GridModel } from './GridModel';
-import type { CellClassParams, HeaderClassParams, HeaderValueGetterParams, ICellRendererParams, IRowNode, ITooltipParams, RowClassParams, ValueSetterParams, CustomCellEditorProps } from '@xh/hoist/kit/ag-grid';
+import { FilterBindTarget, FilterValueSource, Store, StoreRecord } from '@xh/hoist/data';
+import type { CellClassParams, CustomCellEditorProps, HeaderClassParams, HeaderValueGetterParams, ICellRendererParams, IRowNode, ITooltipParams, RowClassParams, ValueSetterParams } from '@xh/hoist/kit/ag-grid';
+import type { ReactElement, ReactNode } from 'react';
+import type { Column, ColumnSpec } from './columns/Column';
+import type { ColumnGroup, ColumnGroupSpec } from './columns/ColumnGroup';
+import type { GridModel } from './GridModel';
 export interface ColumnState {
     colId: string;
     width: number;
@@ -57,10 +57,11 @@ export interface GridModelPersistOptions extends PersistOptions {
 }
 export interface GridFilterModelConfig {
     /**
-     * Store / Cube View to be filtered as column filters are applied. Defaulted to the
-     * gridModel's store.
+     * Target (typically a {@link Store} or Cube {@link View}) to be filtered as column filters
+     * are applied and used as a source for unique values displayed in the filtering UI when
+     * applicable. Defaulted to the gridModel's store.
      */
-    bind?: Store | View;
+    bind?: GridFilterBindTarget;
     /**
      * True to update filters immediately after each change made in the column-based filter UI.
      * Defaults to False.
@@ -68,13 +69,14 @@ export interface GridFilterModelConfig {
     commitOnChange?: boolean;
     /**
      * Specifies the fields this model supports for filtering. Should be configs for
-     * {@link GridFilterFieldSpec}, string names to match with Fields in bound Store/View, or omitted
-     * entirely to indicate that all fields should be filter-enabled.
+     * {@link GridFilterFieldSpec}, string names to match with Fields in bound Store/View, or
+     * omitted entirely to indicate that all fields should be filter-enabled.
      */
     fieldSpecs?: Array<string | GridFilterFieldSpecConfig>;
     /** Default properties to be assigned to all fieldSpecs created by this model. */
     fieldSpecDefaults?: Omit<GridFilterFieldSpecConfig, 'field'>;
 }
+export type GridFilterBindTarget = FilterBindTarget & FilterValueSource;
 /**
  * Renderer for a group row
  * @param context - The group renderer params from ag-Grid
@@ -102,6 +104,9 @@ export interface ColChooserConfig {
     /** Chooser height for popover and dialog. Desktop only. */
     height?: string | number;
 }
+export type ColumnOrGroup = Column | ColumnGroup;
+export type ColumnOrGroupSpec = ColumnSpec | ColumnGroupSpec;
+export declare function isColumnSpec(spec: ColumnOrGroupSpec): spec is ColumnSpec;
 /**
  * Sort comparator function for a grid column. Note that this comparator will also be called if
  * agGrid-provided column filtering is enabled: it is used to sort values shown for set filter
@@ -191,7 +196,7 @@ export type ColumnTooltipFn<T = any> = (value: T, cellContext: CellContext & {
  * @returns CSS class(es) to use.
  */
 export type ColumnHeaderClassFn = (context: {
-    column: Column | ColumnGroup;
+    column: ColumnOrGroup;
     gridModel: GridModel;
     agParams: HeaderClassParams;
 }) => Some<string>;

package/build/types/cmp/grid/columns/ColumnGroup.d.ts

@@ -2,7 +2,7 @@ import { HAlign, PlainObject, Some, Thunkable } from '@xh/hoist/core';
 import type { ColGroupDef } from '@xh/hoist/kit/ag-grid';
 import { ReactNode } from 'react';
 import { GridModel } from '../GridModel';
-import { ColumnHeaderClassFn, ColumnHeaderNameFn } from '../Types';
+import { ColumnHeaderClassFn, ColumnHeaderNameFn, ColumnOrGroup } from '../Types';
 import { Column, ColumnSpec } from './Column';
 export interface ColumnGroupSpec {
     /** Column or ColumnGroup configs for children of this group.*/
@@ -35,7 +35,7 @@ export interface ColumnGroupSpec {
  * Provided to GridModels as plain configuration objects.
  */
 export declare class ColumnGroup {
-    readonly children: Array<ColumnGroup | Column>;
+    readonly children: ColumnOrGroup[];
     readonly gridModel: GridModel;
     readonly groupId: string;
     readonly headerName: ReactNode | ColumnHeaderNameFn;
@@ -60,7 +60,7 @@ export declare class ColumnGroup {
      *
      * @internal
      */
-    constructor(config: ColumnGroupSpec, gridModel: GridModel, children: Array<Column | ColumnGroup>);
+    constructor(config: ColumnGroupSpec, gridModel: GridModel, children: ColumnOrGroup[]);
     getAgSpec(): ColGroupDef;
     getLeafColumns(): Column[];
 }

package/build/types/cmp/grid/filter/GridFilterModel.d.ts

@@ -1,6 +1,6 @@
-import { GridFilterFieldSpec, GridFilterModelConfig } from '@xh/hoist/cmp/grid';
+import { GridFilterBindTarget, GridFilterFieldSpec, GridFilterModelConfig } from '@xh/hoist/cmp/grid';
 import { HoistModel } from '@xh/hoist/core';
-import { CompoundFilter, FieldFilter, Filter, FilterLike, Store, View } from '@xh/hoist/data';
+import { CompoundFilter, FieldFilter, Filter, FilterLike } from '@xh/hoist/data';
 import { GridModel } from '../GridModel';
 /**
  * Model for managing a Grid's column filters.
@@ -9,7 +9,7 @@ import { GridModel } from '../GridModel';
 export declare class GridFilterModel extends HoistModel {
     xhImpl: boolean;
     gridModel: GridModel;
-    bind: Store | View;
+    bind: GridFilterBindTarget;
     commitOnChange: boolean;
     fieldSpecs: GridFilterFieldSpec[];
     get filter(): Filter;

package/build/types/cmp/grid/impl/Utils.d.ts

@@ -1,5 +1,5 @@
-import { Column, ColumnGroup, ColumnRenderer, GroupRowRenderer } from '@xh/hoist/cmp/grid';
-import { HeaderClassParams } from '@xh/hoist/kit/ag-grid';
+import { ColumnOrGroup, ColumnRenderer, GroupRowRenderer } from '@xh/hoist/cmp/grid';
+import type { HeaderClassParams } from '@xh/hoist/kit/ag-grid';
 /** @internal */
 export declare function managedRenderer<T extends ColumnRenderer | GroupRowRenderer>(fn: T, identifier: string): T;
 /**
@@ -8,4 +8,4 @@ export declare function managedRenderer<T extends ColumnRenderer | GroupRowRende
  *
  *   @internal
  */
-export declare function getAgHeaderClassFn(column: Column | ColumnGroup): (params: HeaderClassParams) => string[];
+export declare function getAgHeaderClassFn(column: ColumnOrGroup): (params: HeaderClassParams) => string[];

package/build/types/cmp/tab/TabContainerModel.d.ts

@@ -75,7 +75,7 @@ export declare class TabContainerModel extends HoistModel {
     protected lastActiveTabId: string;
     /**
      * @param config - TabContainer configuration.
-     * @param [depth] - Depth in hierarchy of nested TabContainerModels. Not for application use.
+     * @param depth - Depth in hierarchy of nested TabContainerModels. Not for application use.
      */
     constructor({ tabs, defaultTabId, route, track, renderMode, refreshMode, persistWith, emptyText, xhImpl, switcher }: TabContainerConfig, depth?: number);
     /** Set/replace all tabs within the container. */

package/build/types/data/cube/Cube.d.ts

@@ -1,14 +1,14 @@
 import { HoistBase, PlainObject, Some } from '@xh/hoist/core';
-import { CubeField, CubeFieldSpec } from './CubeField';
-import { ViewRowData } from './ViewRowData';
-import { QueryConfig } from './Query';
-import { View } from './View';
 import { Store, StoreRecordIdSpec, StoreTransaction } from '../Store';
 import { StoreRecord } from '../StoreRecord';
+import { BucketSpec } from './BucketSpec';
+import { CubeField, CubeFieldSpec } from './CubeField';
+import { QueryConfig } from './Query';
 import { AggregateRow } from './row/AggregateRow';
-import { BucketRow } from './row/BucketRow';
 import { BaseRow } from './row/BaseRow';
-import { BucketSpec } from './BucketSpec';
+import { BucketRow } from './row/BucketRow';
+import { View } from './View';
+import { ViewRowData } from './ViewRowData';
 export interface CubeConfig {
     fields: CubeField[] | CubeFieldSpec[];
     /** Default configs applied to all `CubeField`s constructed internally by this Cube. */
@@ -91,6 +91,7 @@ export declare class Cube extends HoistBase {
     get empty(): boolean;
     /** Count of currently connected, auto-updating Views. */
     get connectedViewCount(): number;
+    getField(name: string): CubeField;
     /**
      * Query the cube.
      *

package/cmp/grid/GridModel.ts

@@ -10,10 +10,13 @@ import {
     ColumnCellClassRuleFn,
     ColumnGroup,
     ColumnGroupSpec,
+    ColumnOrGroup,
+    ColumnOrGroupSpec,
     ColumnSpec,
     GridAutosizeMode,
     GridFilterModelConfig,
     GridGroupSortFn,
+    isColumnSpec,
     TreeStyle
 } from '@xh/hoist/cmp/grid';
 import {GridFilterModel} from '@xh/hoist/cmp/grid/filter/GridFilterModel';
@@ -32,6 +35,7 @@ import {
     XH
 } from '@xh/hoist/core';
 import {
+    Field,
     FieldSpec,
     Store,
     StoreConfig,
@@ -117,7 +121,7 @@ import {
 
 export interface GridConfig {
     /** Columns for this grid. */
-    columns?: Array<ColumnSpec | ColumnGroupSpec>;
+    columns?: ColumnOrGroupSpec[];
 
     /**  Column configs to be set on all columns.  Merges deeply. */
     colDefaults?: Partial<ColumnSpec>;
@@ -454,7 +458,7 @@ export class GridModel extends HoistModel {
     //------------------------
     // Observable API
     //------------------------
-    @observable.ref columns: Array<ColumnGroup | Column> = [];
+    @observable.ref columns: ColumnOrGroup[] = [];
     @observable.ref columnState: ColumnState[] = [];
     @observable.ref expandState: any = {};
     @observable.ref sortBy: GridSorter[] = [];
@@ -1167,7 +1171,7 @@ export class GridModel extends HoistModel {
     }
 
     @action
-    setColumns(colConfigs: Array<ColumnSpec | ColumnGroupSpec>) {
+    setColumns(colConfigs: ColumnOrGroupSpec[]) {
         this.validateColConfigs(colConfigs);
         colConfigs = this.enhanceColConfigsFromStore(colConfigs);
 
@@ -1362,7 +1366,7 @@ export class GridModel extends HoistModel {
     }
 
     /** Return matching leaf-level Column object from the provided collection. */
-    findColumn(cols: Array<Column | ColumnGroup>, colId: string): Column {
+    findColumn(cols: ColumnOrGroup[], colId: string): Column {
         for (let col of cols) {
             if (col instanceof ColumnGroup) {
                 const ret = this.findColumn(col.children, colId);
@@ -1375,7 +1379,7 @@ export class GridModel extends HoistModel {
     }
 
     /** Return matching ColumnGroup from the provided collection. */
-    findColumnGroup(cols: Array<Column | ColumnGroup>, groupId: string): ColumnGroup {
+    findColumnGroup(cols: ColumnOrGroup[], groupId: string): ColumnGroup {
         for (let col of cols) {
             if (col instanceof ColumnGroup) {
                 if (col.groupId === groupId) return col;
@@ -1595,7 +1599,7 @@ export class GridModel extends HoistModel {
     //-----------------------
     // Implementation
     //-----------------------
-    private buildColumn(config: ColumnGroupSpec | ColumnSpec, borderedGroup?: ColumnGroupSpec) {
+    private buildColumn(config: ColumnOrGroupSpec, borderedGroup?: ColumnGroupSpec): ColumnOrGroup {
         // Merge leaf config with defaults.
         // Ensure *any* tooltip setting on column itself always wins.
         if (this.colDefaults && !this.isGroupSpec(config)) {
@@ -1609,9 +1613,7 @@ export class GridModel extends HoistModel {
 
         if (this.isGroupSpec(config)) {
             if (config.borders !== false) borderedGroup = config;
-            const children = compact(
-                config.children.map(c => this.buildColumn(c, borderedGroup))
-            ) as Array<ColumnGroup | Column>;
+            const children = compact(config.children.map(c => this.buildColumn(c, borderedGroup)));
             return !isEmpty(children)
                 ? new ColumnGroup(config as ColumnGroupSpec, this, children)
                 : null;
@@ -1649,19 +1651,23 @@ export class GridModel extends HoistModel {
         }
     }
 
-    private gatherLeaves(columns, leaves = []) {
+    private gatherLeaves(columns: ColumnOrGroup[], leaves: Column[] = []): Column[] {
         columns.forEach(col => {
-            if (col.groupId) this.gatherLeaves(col.children, leaves);
-            if (col.colId) leaves.push(col);
+            if (col instanceof ColumnGroup) {
+                this.gatherLeaves(col.children, leaves);
+            } else {
+                leaves.push(col);
+            }
         });
 
         return leaves;
     }
 
-    private collectIds(cols, ids = []) {
+    private collectIds(cols: ColumnOrGroup[], ids: string[] = []) {
         cols.forEach(col => {
-            if (col.colId) ids.push(col.colId);
-            if (col.groupId) {
+            if (col instanceof Column) {
+                ids.push(col.colId);
+            } else {
                 ids.push(col.groupId);
                 this.collectIds(col.children, ids);
             }
@@ -1686,7 +1692,10 @@ export class GridModel extends HoistModel {
     // so it can be better re-used across Hoist APIs such as `Filter` and `FormModel`. However for
     // convenience, a `GridModel.store` config can also be very minimal (or non-existent), and
     // in this case GridModel should work out the required Store fields from column definitions.
-    private parseAndSetColumnsAndStore(colConfigs, store = {}) {
+    private parseAndSetColumnsAndStore(
+        colConfigs: ColumnOrGroupSpec[],
+        store: Store | StoreConfig = {}
+    ) {
         // 1) Validate configs.
         this.validateStoreConfig(store);
         this.validateColConfigs(colConfigs);
@@ -1711,14 +1720,14 @@ export class GridModel extends HoistModel {
         this.store = newStore;
     }
 
-    private validateStoreConfig(store) {
+    private validateStoreConfig(store: Store | StoreConfig) {
         throwIf(
             !(store instanceof Store || isPlainObject(store)),
             'GridModel.store config must be either an instance of a Store or a config to create one.'
         );
     }
 
-    private validateColConfigs(colConfigs) {
+    private validateColConfigs(colConfigs: ColumnOrGroupSpec[]) {
         throwIf(!isArray(colConfigs), 'GridModel.columns config must be an array.');
         throwIf(
             colConfigs.some(c => !isPlainObject(c)),
@@ -1726,7 +1735,7 @@ export class GridModel extends HoistModel {
         );
     }
 
-    private validateColumns(cols) {
+    private validateColumns(cols: ColumnOrGroup[]) {
         if (isEmpty(cols)) return;
 
         const ids = this.collectIds(cols);
@@ -1782,16 +1791,30 @@ export class GridModel extends HoistModel {
 
     // Selectively enhance raw column configs with field-level metadata from store.fields and/or
     // field config partials provided by the column configs themselves.
-    private enhanceColConfigsFromStore(colConfigs, storeOrConfig?) {
+    private enhanceColConfigsFromStore(
+        colConfigs: ColumnOrGroupSpec[],
+        storeOrConfig?: Store | StoreConfig
+    ): ColumnOrGroupSpec[] {
         const store = storeOrConfig || this.store,
             storeFields = store?.fields,
-            fieldsByName = {};
+            fieldsByName: Record<string, Field | FieldSpec> = {};
 
         // Extract field definitions in all supported forms: pull Field instances/configs from
-        // storeFields first, then fill in with any col-level `field` config objects.
-        storeFields?.forEach(sf => (fieldsByName[sf.name] = sf));
+        // storeFields first...
+        storeFields?.forEach(sf => {
+            if (sf && !isString(sf)) {
+                fieldsByName[sf.name] = sf;
+            }
+        });
+
+        // Then fill in with any col-level `field` config objects.
         colConfigs.forEach(cc => {
-            if (isPlainObject(cc.field) && !fieldsByName[cc.field.name]) {
+            if (
+                isColumnSpec(cc) &&
+                cc.field &&
+                !isString(cc.field) &&
+                !fieldsByName[cc.field.name]
+            ) {
                 fieldsByName[cc.field.name] = cc.field;
             }
         });
@@ -1800,16 +1823,17 @@ export class GridModel extends HoistModel {
 
         const numTypes = ['int', 'number'],
             dateTypes = ['date', 'localDate'];
+
         return colConfigs.map(col => {
             // Recurse into children for column groups
-            if (col.children) {
+            if (!isColumnSpec(col)) {
                 return {
                     ...col,
                     children: this.enhanceColConfigsFromStore(col.children, storeOrConfig)
                 };
             }
 
-            const colFieldName = isPlainObject(col.field) ? col.field.name : col.field,
+            const colFieldName = isString(col.field) ? col.field : col.field?.name,
                 field = fieldsByName[colFieldName];
 
             if (!field) return col;
@@ -1837,9 +1861,9 @@ export class GridModel extends HoistModel {
     // Ensure store config has a complete set of fields for all configured columns. Note this
     // requires columns to have been constructed and set, and will only work with a raw store
     // config object, not an instance.
-    private enhanceStoreConfigFromColumns(storeConfig) {
+    private enhanceStoreConfigFromColumns(storeConfig: StoreConfig) {
         const fields = storeConfig.fields ?? [],
-            storeFieldNames = fields.map(it => it.name ?? it),
+            storeFieldNames = fields.map(it => (isString(it) ? it : it.name)),
             leafColsByFieldName = this.leafColsByFieldName();
 
         const newFields: FieldSpec[] = [];
@@ -1886,31 +1910,33 @@ export class GridModel extends HoistModel {
         return sizingMode;
     }
 
-    private parseSelModel(selModel): StoreSelectionModel {
-        const {store} = this;
-        selModel = withDefault(selModel, XH.isMobileApp ? 'disabled' : 'single');
-
+    private parseSelModel(selModel: GridConfig['selModel']): StoreSelectionModel {
+        // Return actual instance directly.
         if (selModel instanceof StoreSelectionModel) {
             return selModel;
         }
 
-        if (isPlainObject(selModel)) {
-            return this.markManaged(new StoreSelectionModel({...selModel, store, xhImpl: true}));
+        // Default unspecified based on platform, treat explicit null as disabled.
+        if (selModel === undefined) {
+            selModel = XH.isMobileApp ? 'disabled' : 'single';
+        } else if (selModel === null) {
+            selModel = 'disabled';
         }
 
-        // Assume its just the mode...
-        let mode: any = 'single';
+        // Strings specify the mode.
         if (isString(selModel)) {
-            mode = selModel;
-        } else if (selModel === null) {
-            mode = 'disabled';
+            selModel = {mode: selModel};
         }
-        return this.markManaged(new StoreSelectionModel({mode, store, xhImpl: true}));
+
+        return this.markManaged(
+            new StoreSelectionModel({...selModel, store: this.store, xhImpl: true})
+        );
     }
 
-    private parseFilterModel(filterModel) {
+    private parseFilterModel(filterModel: GridConfig['filterModel']) {
         if (XH.isMobileApp || !filterModel) return null;
-        filterModel = isPlainObject(filterModel) ? filterModel : {};
+
+        filterModel = filterModel === true ? {} : filterModel;
         return new GridFilterModel({bind: this.store, ...filterModel}, this);
     }
 
@@ -1921,17 +1947,15 @@ export class GridModel extends HoistModel {
         };
     }
 
-    private parseChooserModel(chooserModel): HoistModel {
-        const modelClass = XH.isMobileApp ? MobileColChooserModel : DesktopColChooserModel;
-
-        if (isPlainObject(chooserModel)) {
-            return this.markManaged(new modelClass({...chooserModel, gridModel: this}));
-        }
+    private parseChooserModel(chooserModel: GridConfig['colChooserModel']): HoistModel {
+        if (!chooserModel) return null;
 
-        return chooserModel ? this.markManaged(new modelClass({gridModel: this})) : null;
+        const modelClass = XH.isMobileApp ? MobileColChooserModel : DesktopColChooserModel;
+        chooserModel = chooserModel === true ? {} : chooserModel;
+        return this.markManaged(new modelClass({...chooserModel, gridModel: this}));
     }
 
-    private isGroupSpec(col: ColumnGroupSpec | ColumnSpec): col is ColumnGroupSpec {
+    private isGroupSpec(col: ColumnOrGroupSpec): col is ColumnGroupSpec {
         return 'children' in col;
     }
 

package/cmp/grid/Types.ts

@@ -7,23 +7,23 @@
 
 import {GridFilterFieldSpecConfig} from '@xh/hoist/cmp/grid/filter/GridFilterFieldSpec';
 import {HSide, PersistOptions, Some} from '@xh/hoist/core';
-import {Store, StoreRecord, View} from '@xh/hoist/data';
-import {ReactElement, ReactNode} from 'react';
-import {Column} from './columns/Column';
-import {ColumnGroup} from './columns/ColumnGroup';
-import {GridModel} from './GridModel';
+import {FilterBindTarget, FilterValueSource, Store, StoreRecord} from '@xh/hoist/data';
 
 import type {
     CellClassParams,
+    CustomCellEditorProps,
     HeaderClassParams,
     HeaderValueGetterParams,
     ICellRendererParams,
     IRowNode,
     ITooltipParams,
     RowClassParams,
-    ValueSetterParams,
-    CustomCellEditorProps
+    ValueSetterParams
 } from '@xh/hoist/kit/ag-grid';
+import type {ReactElement, ReactNode} from 'react';
+import type {Column, ColumnSpec} from './columns/Column';
+import type {ColumnGroup, ColumnGroupSpec} from './columns/ColumnGroup';
+import type {GridModel} from './GridModel';
 
 export interface ColumnState {
     colId: string;
@@ -87,10 +87,11 @@ export interface GridModelPersistOptions extends PersistOptions {
 
 export interface GridFilterModelConfig {
     /**
-     * Store / Cube View to be filtered as column filters are applied. Defaulted to the
-     * gridModel's store.
+     * Target (typically a {@link Store} or Cube {@link View}) to be filtered as column filters
+     * are applied and used as a source for unique values displayed in the filtering UI when
+     * applicable. Defaulted to the gridModel's store.
      */
-    bind?: Store | View;
+    bind?: GridFilterBindTarget;
 
     /**
      * True to update filters immediately after each change made in the column-based filter UI.
@@ -100,8 +101,8 @@ export interface GridFilterModelConfig {
 
     /**
      * Specifies the fields this model supports for filtering. Should be configs for
-     * {@link GridFilterFieldSpec}, string names to match with Fields in bound Store/View, or omitted
-     * entirely to indicate that all fields should be filter-enabled.
+     * {@link GridFilterFieldSpec}, string names to match with Fields in bound Store/View, or
+     * omitted entirely to indicate that all fields should be filter-enabled.
      */
     fieldSpecs?: Array<string | GridFilterFieldSpecConfig>;
 
@@ -109,6 +110,8 @@ export interface GridFilterModelConfig {
     fieldSpecDefaults?: Omit<GridFilterFieldSpecConfig, 'field'>;
 }
 
+export type GridFilterBindTarget = FilterBindTarget & FilterValueSource;
+
 /**
  * Renderer for a group row
  * @param context - The group renderer params from ag-Grid
@@ -142,6 +145,13 @@ export interface ColChooserConfig {
     height?: string | number;
 }
 
+export type ColumnOrGroup = Column | ColumnGroup;
+export type ColumnOrGroupSpec = ColumnSpec | ColumnGroupSpec;
+
+export function isColumnSpec(spec: ColumnOrGroupSpec): spec is ColumnSpec {
+    return !(spec as ColumnGroupSpec).children;
+}
+
 /**
  * Sort comparator function for a grid column. Note that this comparator will also be called if
  * agGrid-provided column filtering is enabled: it is used to sort values shown for set filter
@@ -248,7 +258,7 @@ export type ColumnTooltipFn<T = any> = (
  * @returns CSS class(es) to use.
  */
 export type ColumnHeaderClassFn = (context: {
-    column: Column | ColumnGroup;
+    column: ColumnOrGroup;
     gridModel: GridModel;
     agParams: HeaderClassParams;
 }) => Some<string>;

package/cmp/grid/columns/ColumnGroup.ts

@@ -13,7 +13,7 @@ import {throwIf, withDefault} from '@xh/hoist/utils/js';
 import {clone, isEmpty, isFunction, isString, keysIn} from 'lodash';
 import {ReactNode} from 'react';
 import {GridModel} from '../GridModel';
-import {ColumnHeaderClassFn, ColumnHeaderNameFn} from '../Types';
+import {ColumnHeaderClassFn, ColumnHeaderNameFn, ColumnOrGroup} from '../Types';
 import {Column, ColumnSpec} from './Column';
 
 export interface ColumnGroupSpec {
@@ -51,7 +51,7 @@ export interface ColumnGroupSpec {
  * Provided to GridModels as plain configuration objects.
  */
 export class ColumnGroup {
-    readonly children: Array<ColumnGroup | Column>;
+    readonly children: ColumnOrGroup[];
     readonly gridModel: GridModel;
     readonly groupId: string;
     readonly headerName: ReactNode | ColumnHeaderNameFn;
@@ -79,11 +79,7 @@ export class ColumnGroup {
      *
      * @internal
      */
-    constructor(
-        config: ColumnGroupSpec,
-        gridModel: GridModel,
-        children: Array<Column | ColumnGroup>
-    ) {
+    constructor(config: ColumnGroupSpec, gridModel: GridModel, children: ColumnOrGroup[]) {
         const {
             children: childrenSpecs,
             groupId,