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

package/CHANGELOG.md

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

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

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

package/cmp/grid/filter/GridFilterModel.ts

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

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

@@ -1,17 +1,4 @@
 .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,11 +5,10 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {grid} from '@xh/hoist/cmp/grid';
-import {div, hframe, placeholder, span, vbox, vframe} from '@xh/hoist/cmp/layout';
+import {div, placeholder, 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';
@@ -32,11 +31,10 @@ export const valuesTab = hoistCmp.factory({
     }
 });
 
-const tbar = hoistCmp.factory<ValuesTabModel>(({model}) => {
+const tbar = hoistCmp.factory(() => {
     return toolbar(
         storeFilterField({
             bind: 'filterText',
-            model,
             leftIcon: Icon.search(),
             placeholder: 'Search...',
             flex: 1,
@@ -49,33 +47,7 @@ const tbar = hoistCmp.factory<ValuesTabModel>(({model}) => {
 const body = hoistCmp.factory<ValuesTabModel>(({model}) => {
     const {isCustomFilter} = model.headerFilterModel;
     if (isCustomFilter) return customFilterPlaceholder();
-    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`)
-                ]
-            })
-        ]
-    });
+    return vframe(grid(), hiddenValuesMessage());
 });
 
 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, flatten, isEmpty, map, partition, uniq, without} from 'lodash';
+import {castArray, difference, isEmpty, partition, uniq, without} from 'lodash';
 
 export class ValuesTabModel extends HoistModel {
     override xhImpl = true;
@@ -26,12 +26,6 @@ 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 {
@@ -87,18 +81,11 @@ export class ValuesTabModel extends HoistModel {
         this.headerFilterModel = headerFilterModel;
         this.gridModel = this.createGridModel();
 
-        this.addReaction(
-            {
-                track: () => this.pendingValues,
-                run: () => this.syncGrid(),
-                fireImmediately: true
-            },
-            {
-                track: () => [this.filterText, this.combineCurrentFilters],
-                run: () => this.setPendingValues(),
-                debounce: 300
-            }
-        );
+        this.addReaction({
+            track: () => this.pendingValues,
+            run: () => this.syncGrid(),
+            fireImmediately: true
+        });
     }
 
     syncWithFilter() {
@@ -128,23 +115,6 @@ 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')),
-            values = map(records, 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)),
@@ -247,10 +217,17 @@ 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,
@@ -268,6 +245,7 @@ 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.1746562287920",
+  "version": "73.0.0-SNAPSHOT.1746562572803",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",