@xh/hoist 80.0.0-SNAPSHOT.1769000829579 → 80.0.0-SNAPSHOT.1769042130982

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.1769000829579",
+  "version": "80.0.0-SNAPSHOT.1769042130982",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",