@xh/hoist 73.0.0-SNAPSHOT.1746562572803 → 73.0.0-SNAPSHOT.1746638889909

package/CHANGELOG.md

@@ -127,6 +127,10 @@
 
 ### 🎁 New Features
 
+* Improvements to  Grid columns `HeaderFilter` component:
+    * `GridFilterModel` `commitOnChage` now set to `false` by default
+    * Addition of ability to append terms to active filter **only** when `commitOnChage:false`
+    * Column header filtering functionality now similar to Excel on Windows
 * Introduced a new "JSON Search" feature to the Hoist Admin Console, accessible from the Config,
   User Preference, and JSON Blob tabs. Supports searching JSON values stored within these objects
   to filter and match data using JSON Path expressions.

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

@@ -60,7 +60,10 @@ export interface GridFilterModelConfig {
      * gridModel's store.
      */
     bind?: Store | View;
-    /** True (default) to update filters immediately after each change made in the column-based filter UI.*/
+    /**
+     * True to update filters immediately after each change made in the column-based filter UI.
+     * Defaults to False.
+     */
     commitOnChange?: boolean;
     /**
      * Specifies the fields this model supports for filtering. Should be configs for

package/build/types/cmp/store/StoreFilterField.d.ts

@@ -11,9 +11,8 @@ export interface StoreFilterFieldProps extends DefaultHoistProps {
     autoApply?: boolean;
     /**
      * Field on optional model to which this component should bind its raw (text) value to persist
-     * across renders. Specify this field to control the state of this component directly or if
-     * deliberately not connecting this component to a Store/GridModel. These are both advanced
-     * use-cases - this prop is typically left unset.
+     * across renders. Specify this field to control the state of this component directly from a model.
+     * These are both advanced use-cases - this prop is typically left unset.
      */
     bind?: string;
     /** Names of field(s) to exclude from search. Cannot be used with `includeFields`. */

package/build/types/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTabModel.d.ts

@@ -11,6 +11,7 @@ export declare class ValuesTabModel extends HoistModel {
     pendingValues: any[];
     /** Bound search term for `StoreFilterField` */
     filterText: string;
+    combineCurrentFilters: boolean;
     /** FieldFilter output by this model. */
     get filter(): FieldFilterSpec;
     get allVisibleRecsChecked(): boolean;
@@ -26,6 +27,7 @@ export declare class ValuesTabModel extends HoistModel {
     reset(): void;
     setRecsChecked(isChecked: boolean, values: any[]): void;
     toggleAllRecsChecked(): void;
+    setPendingValues(): void;
     private getFilter;
     private doSyncWithFilter;
     private syncGrid;

package/cmp/grid/Types.ts

@@ -90,7 +90,10 @@ export interface GridFilterModelConfig {
      */
     bind?: Store | View;
 
-    /** True (default) to update filters immediately after each change made in the column-based filter UI.*/
+    /**
+     * True to update filters immediately after each change made in the column-based filter UI.
+     * Defaults to False.
+     */
     commitOnChange?: boolean;
 
     /**

package/cmp/grid/filter/GridFilterModel.ts

@@ -46,7 +46,7 @@ export class GridFilterModel extends HoistModel {
     static BLANK_PLACEHOLDER = '[blank]';
 
     constructor(
-        {bind, commitOnChange = true, fieldSpecs, fieldSpecDefaults}: GridFilterModelConfig,
+        {bind, commitOnChange = false, fieldSpecs, fieldSpecDefaults}: GridFilterModelConfig,
         gridModel: GridModel
     ) {
         super();

package/cmp/store/StoreFilterField.ts

@@ -21,9 +21,8 @@ export interface StoreFilterFieldProps extends DefaultHoistProps {
 
     /**
      * Field on optional model to which this component should bind its raw (text) value to persist
-     * across renders. Specify this field to control the state of this component directly or if
-     * deliberately not connecting this component to a Store/GridModel. These are both advanced
-     * use-cases - this prop is typically left unset.
+     * across renders. Specify this field to control the state of this component directly from a model.
+     * These are both advanced use-cases - this prop is typically left unset.
      */
     bind?: string;
 

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTab.scss

@@ -1,4 +1,17 @@
 .xh-values-filter-tab {
+  .store-filter-header {
+    padding: 5px 7px;
+    border-bottom: 1px solid var(--xh-grid-header-border-color);
+    row-gap: 5px;
+    .bp5-control-indicator {
+      font-size: 1em;
+    }
+    span {
+      font-size: var(--xh-grid-compact-header-font-size-px);
+      color: var(--xh-grid-header-text-color);
+    }
+  }
+
   &__hidden-values-message {
     display: flex;
     padding: var(--xh-pad-half-px);

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTab.ts

@@ -5,10 +5,11 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {grid} from '@xh/hoist/cmp/grid';
-import {div, placeholder, vframe} from '@xh/hoist/cmp/layout';
+import {div, hframe, placeholder, span, vbox, vframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
+import {checkbox} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
@@ -39,7 +40,8 @@ const tbar = hoistCmp.factory(() => {
             placeholder: 'Search...',
             flex: 1,
             autoFocus: true,
-            matchMode: 'any'
+            matchMode: 'any',
+            includeFields: ['value']
         })
     );
 });
@@ -47,7 +49,33 @@ const tbar = hoistCmp.factory(() => {
 const body = hoistCmp.factory<ValuesTabModel>(({model}) => {
     const {isCustomFilter} = model.headerFilterModel;
     if (isCustomFilter) return customFilterPlaceholder();
-    return vframe(grid(), hiddenValuesMessage());
+    return vframe(storeFilterSelect(), grid(), hiddenValuesMessage());
+});
+
+const storeFilterSelect = hoistCmp.factory<ValuesTabModel>(({model}) => {
+    const {gridModel, allVisibleRecsChecked, filterText, headerFilterModel} = model,
+        {store} = gridModel;
+    return vbox({
+        className: 'store-filter-header',
+        items: [
+            hframe(
+                checkbox({
+                    disabled: store.empty,
+                    displayUnsetState: true,
+                    value: allVisibleRecsChecked,
+                    onChange: () => model.toggleAllRecsChecked()
+                }),
+                span(`(Select All${filterText ? ' Search Results' : ''})`)
+            ),
+            hframe({
+                omit: !filterText || store.empty || headerFilterModel.commitOnChange,
+                items: [
+                    checkbox({bind: 'combineCurrentFilters'}),
+                    span(`Add current selection to filter`)
+                ]
+            })
+        ]
+    });
 });
 
 const customFilterPlaceholder = hoistCmp.factory<ValuesTabModel>(({model}) => {

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTabModel.ts

@@ -10,7 +10,7 @@ import {FieldFilterSpec} from '@xh/hoist/data';
 import {HeaderFilterModel} from '../HeaderFilterModel';
 import {checkbox} from '@xh/hoist/desktop/cmp/input';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
-import {castArray, difference, isEmpty, partition, uniq, without} from 'lodash';
+import {castArray, difference, flatten, isEmpty, map, partition, uniq, without} from 'lodash';
 
 export class ValuesTabModel extends HoistModel {
     override xhImpl = true;
@@ -26,6 +26,12 @@ export class ValuesTabModel extends HoistModel {
     /** Bound search term for `StoreFilterField` */
     @bindable filterText: string = null;
 
+    /*
+     * Available only when commit on change is false merge
+     * current filter with pendingValues on commit
+     */
+    @bindable combineCurrentFilters: boolean = false;
+
     /** FieldFilter output by this model. */
     @computed.struct
     get filter(): FieldFilterSpec {
@@ -81,11 +87,18 @@ export class ValuesTabModel extends HoistModel {
         this.headerFilterModel = headerFilterModel;
         this.gridModel = this.createGridModel();
 
-        this.addReaction({
-            track: () => this.pendingValues,
-            run: () => this.syncGrid(),
-            fireImmediately: true
-        });
+        this.addReaction(
+            {
+                track: () => this.pendingValues,
+                run: () => this.syncGrid(),
+                fireImmediately: true
+            },
+            {
+                track: () => [this.filterText, this.combineCurrentFilters],
+                run: () => this.setPendingValues(),
+                debounce: 300
+            }
+        );
     }
 
     syncWithFilter() {
@@ -115,6 +128,29 @@ export class ValuesTabModel extends HoistModel {
     //-------------------
     // Implementation
     //-------------------
+    @action
+    setPendingValues() {
+        if (!this.filterText) {
+            this.doSyncWithFilter();
+            this.syncGrid();
+            return;
+        }
+
+        const {records} = this.gridModel.store,
+            currentFilterValues = flatten(map(this.columnFilters, 'value')),
+            checkedRecs = records.filter(
+                it =>
+                    this.headerFilterModel.commitOnChange ||
+                    currentFilterValues.length ||
+                    it.get('isChecked')
+            ),
+            values = map(checkedRecs, it => it.get('value'));
+
+        this.pendingValues = uniq(
+            this.combineCurrentFilters ? [...currentFilterValues, ...values] : values
+        );
+    }
+
     private getFilter() {
         const {gridFilterModel, pendingValues, values, valueCount, field} = this,
             included = pendingValues.map(it => gridFilterModel.fromDisplayValue(it)),
@@ -217,17 +253,10 @@ export class ValuesTabModel extends HoistModel {
             onRowClicked: ({data: record}) => {
                 this.setRecsChecked(!record.get('isChecked'), record.get('value'));
             },
+            hideHeaders: true,
             columns: [
                 {
                     field: 'isChecked',
-                    headerName: ({gridModel}) => {
-                        return checkbox({
-                            disabled: gridModel.store.empty,
-                            displayUnsetState: true,
-                            value: this.allVisibleRecsChecked,
-                            onChange: () => this.toggleAllRecsChecked()
-                        });
-                    },
                     width: 28,
                     autosizable: false,
                     pinned: true,
@@ -245,7 +274,6 @@ export class ValuesTabModel extends HoistModel {
                 },
                 {
                     field: 'value',
-                    displayName: '(Select All)',
                     align: 'left',
                     comparator: (v1, v2, sortDir, abs, {defaultComparator}) => {
                         const mul = sortDir === 'desc' ? -1 : 1;

package/package.json

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