@xh/hoist 80.0.0-SNAPSHOT.1768931272469 → 80.0.0-SNAPSHOT.1769011463076

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

@@ -6,6 +6,7 @@
  */
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, XH} from '@xh/hoist/core';
+import type {FilterMatchMode, StoreRecord} from '@xh/hoist/data';
 import {TextInputModel} from '@xh/hoist/desktop/cmp/input';
 import {action, bindable, comparer, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {stripTags, withDefault} from '@xh/hoist/utils/js';
@@ -32,22 +33,25 @@ export class GridFindFieldImplModel extends HoistModel {
     @bindable
     query: string = null;
 
-    get matchMode(): string {
+    get matchMode(): FilterMatchMode {
         return this.componentProps.matchMode ?? 'startWord';
     }
+
     get queryBuffer(): number {
         return this.componentProps.queryBuffer ?? 200;
     }
+
     get includeFields(): string[] {
         return this.componentProps.includeFields;
     }
+
     get excludeFields(): string[] {
         return this.componentProps.excludeFields;
     }
 
     @observable.ref results;
     inputRef = createObservableRef<TextInputModel>();
-    _records = null;
+    _records: StoreRecord[] = null;
 
     get count(): number {
         return this.results?.length;
@@ -81,7 +85,7 @@ export class GridFindFieldImplModel extends HoistModel {
     }
 
     @computed
-    get gridModel() {
+    get gridModel(): GridModel {
         const ret = withDefault(this.componentProps.gridModel, this.lookupModel(GridModel));
         if (!ret) {
             this.logError("No GridModel available.  Provide via a 'gridModel' prop, or context.");
@@ -100,30 +104,30 @@ export class GridFindFieldImplModel extends HoistModel {
     }
 
     override onLinked() {
-        this.addReaction({
-            track: () => this.query,
-            run: () => this.updateResults(true),
-            debounce: this.queryBuffer
-        });
-
-        this.addReaction({
-            track: () => [
-                this.gridModel?.store.records,
-                this.gridModel?.columns,
-                this.gridModel?.sortBy,
-                this.gridModel?.groupBy
-            ],
-            run: () => {
-                this._records = null;
-                if (this.hasQuery) this.updateResults();
+        this.addReaction(
+            {
+                track: () => this.query,
+                run: () => this.updateResults(true),
+                debounce: this.queryBuffer
+            },
+            {
+                track: () => [
+                    this.gridModel?.store.records,
+                    this.gridModel?.columns,
+                    this.gridModel?.sortBy,
+                    this.gridModel?.groupBy
+                ],
+                run: () => {
+                    this._records = null;
+                    if (this.hasQuery) this.updateResults();
+                }
+            },
+            {
+                track: () => [this.includeFields, this.excludeFields, this.matchMode],
+                run: () => this.updateResults(),
+                equals: comparer.structural
             }
-        });
-
-        this.addReaction({
-            track: () => [this.includeFields, this.excludeFields],
-            run: () => this.updateResults(),
-            equals: comparer.structural
-        });
+        );
     }
 
     selectPrev() {
@@ -180,7 +184,7 @@ export class GridFindFieldImplModel extends HoistModel {
         }
     }
 
-    private getRecords() {
+    private getRecords(): StoreRecord[] {
         if (!this._records) {
             const records = this.sortRecordsRecursive([...this.gridModel.store.rootRecords]);
             this._records = this.sortRecordsByGroupBy(records);
@@ -189,10 +193,10 @@ export class GridFindFieldImplModel extends HoistModel {
     }
 
     // Sort records with GridModel's sortBy(s) using the Column's comparator
-    private sortRecordsRecursive(records) {
+    private sortRecordsRecursive(records: StoreRecord[]): StoreRecord[] {
         const {gridModel} = this,
             {sortBy, treeMode, agApi, store} = gridModel,
-            ret = [];
+            ret: StoreRecord[] = [];
 
         [...sortBy].reverse().forEach(it => {
             const column = gridModel.getColumn(it.colId);
@@ -225,7 +229,7 @@ export class GridFindFieldImplModel extends HoistModel {
     }
 
     // Sort records with GridModel's groupBy(s) using the GridModel's groupSortFn
-    private sortRecordsByGroupBy(records) {
+    private sortRecordsByGroupBy(records: StoreRecord[]) {
         const {gridModel} = this,
             {agApi, groupBy, groupSortFn, store} = gridModel;
 
@@ -249,7 +253,7 @@ export class GridFindFieldImplModel extends HoistModel {
         return records;
     }
 
-    private getRegex(searchTerm) {
+    private getRegex(searchTerm: string): RegExp {
         searchTerm = escapeRegExp(searchTerm);
         switch (this.matchMode) {
             case 'any':
@@ -262,12 +266,12 @@ export class GridFindFieldImplModel extends HoistModel {
         throw XH.exception('Unknown matchMode in GridFindField');
     }
 
-    private getActiveFields() {
+    private getActiveFields(): string[] {
         const {gridModel, includeFields, excludeFields} = this,
             groupBy = gridModel.groupBy,
             visibleCols = gridModel.getVisibleLeafColumns();
 
-        let ret = ['id', ...gridModel.store.fields.map(f => f.name)];
+        let ret = ['id', ...gridModel.store.fieldNames];
         if (includeFields) ret = intersection(ret, includeFields);
         if (excludeFields) ret = without(ret, ...excludeFields);
 
@@ -301,7 +305,7 @@ export class GridFindFieldImplModel extends HoistModel {
         return ret;
     }
 
-    private getValGetters(fieldName) {
+    private getValGetters(fieldName: string) {
         const {gridModel} = this,
             {store} = gridModel,
             field = store.getField(fieldName);
@@ -313,7 +317,7 @@ export class GridFindFieldImplModel extends HoistModel {
 
             return cols.map(column => {
                 const {renderer, getValueFn} = column;
-                return record => {
+                return (record: StoreRecord) => {
                     const ctx = {
                             record,
                             field: fieldName,
@@ -332,7 +336,7 @@ export class GridFindFieldImplModel extends HoistModel {
         // Otherwise just match raw.
         // Use expensive get() only when needed to support dot-separated paths.
         return fieldName.includes('.')
-            ? rec => get(rec.data, fieldName)
-            : rec => rec.data[fieldName];
+            ? (rec: StoreRecord) => get(rec.data, fieldName)
+            : (rec: StoreRecord) => rec.data[fieldName];
     }
 }

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

@@ -32,14 +32,14 @@ export const colChooser = hoistCmp.factory<ColChooserProps>({
     className: 'xh-col-chooser',
 
     render({model, className}) {
-        const {commitOnChange, showRestoreDefaults, width, height} = model;
+        const {commitOnChange, showRestoreDefaults, width, height, filterMatchMode} = model;
 
         return panel({
             className,
             items: [
                 leftRightChooser({width, height}),
                 toolbar(
-                    leftRightChooserFilter(),
+                    leftRightChooserFilter({matchMode: filterMatchMode}),
                     filler(),
                     button({
                         omit: !showRestoreDefaults,

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

@@ -4,8 +4,9 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {GridModel} from '@xh/hoist/cmp/grid';
+import {ColChooserConfig, GridModel} 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';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {sortBy} from 'lodash';
@@ -29,8 +30,9 @@ export class ColChooserModel extends HoistModel {
     commitOnChange: boolean;
     showRestoreDefaults: boolean;
     autosizeOnCommit: boolean;
-    width: number;
-    height: number;
+    width: string | number;
+    height: string | number;
+    filterMatchMode: FilterMatchMode;
 
     constructor({
         gridModel,
@@ -38,8 +40,9 @@ export class ColChooserModel extends HoistModel {
         showRestoreDefaults = true,
         autosizeOnCommit = false,
         width = !commitOnChange && showRestoreDefaults ? 600 : 520,
-        height = 300
-    }) {
+        height = 300,
+        filterMatchMode = 'startWord'
+    }: ColChooserConfig) {
         super();
         makeObservable(this);
 
@@ -49,6 +52,7 @@ export class ColChooserModel extends HoistModel {
         this.autosizeOnCommit = autosizeOnCommit;
         this.width = width;
         this.height = height;
+        this.filterMatchMode = filterMatchMode;
 
         this.lrModel = new LeftRightChooserModel({
             leftTitle: 'Available Columns',

package/desktop/cmp/leftrightchooser/LeftRightChooserFilter.ts

@@ -4,7 +4,8 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {hoistCmp, HoistModel, HoistProps, lookup, useLocalModel, uses} from '@xh/hoist/core';
+import {hoistCmp, HoistModel, HoistProps, lookup, useLocalModel, uses, XH} from '@xh/hoist/core';
+import type {FilterMatchMode} from '@xh/hoist/data';
 import {textInput} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
@@ -16,8 +17,8 @@ export interface LeftRightChooserFilterProps extends HoistProps<LeftRightChooser
     /** Names of fields in chooser on which to filter. Defaults to ['text', 'group'] */
     fields?: string[];
 
-    /** True to prevent regex start line anchor from being added. */
-    anyMatch?: boolean;
+    /** Mode to use when filtering (default 'startWord'). */
+    matchMode?: FilterMatchMode;
 }
 
 /**
@@ -51,34 +52,48 @@ class LeftRightChooserFilterLocalModel extends HoistModel {
     @bindable
     value = null;
 
+    get matchMode(): FilterMatchMode {
+        return this.componentProps.matchMode ?? 'startWord';
+    }
+
     constructor() {
         super();
         makeObservable(this);
         this.addReaction({
-            track: () => this.value,
+            track: () => [this.value, this.matchMode],
             run: () => this.runFilter()
         });
     }
 
     private runFilter() {
-        const {fields = ['text', 'group'], anyMatch = false} = this.componentProps;
-        let searchTerm = escapeRegExp(this.value);
-
-        if (!anyMatch) {
-            searchTerm = `(^|\\W)${searchTerm}`;
-        }
+        const {fields = ['text', 'group']} = this.componentProps,
+            searchTerm = this.value,
+            regex = this.getRegex(searchTerm);
 
         const filter = raw => {
             return fields.some(f => {
                 if (!searchTerm) return true;
                 const fieldVal = raw.data[f];
-                return fieldVal && new RegExp(searchTerm, 'ig').test(fieldVal);
+                return fieldVal && regex.test(fieldVal);
             });
         };
 
         this.model.setDisplayFilter(filter);
     }
 
+    private getRegex(searchTerm: string): RegExp {
+        searchTerm = escapeRegExp(searchTerm);
+        switch (this.matchMode) {
+            case 'any':
+                return new RegExp(searchTerm, 'i');
+            case 'start':
+                return new RegExp(`^${searchTerm}`, 'i');
+            case 'startWord':
+                return new RegExp(`(^|\\W)${searchTerm}`, 'i');
+        }
+        throw XH.exception('Unknown matchMode in StoreFilterField');
+    }
+
     override destroy() {
         // This unusual bit of code is extremely important -- the model we are linking to might
         // survive the display of this component and should be restored. (This happens with GridColumnChooser)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "80.0.0-SNAPSHOT.1768931272469",
+  "version": "80.0.0-SNAPSHOT.1769011463076",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",