@xh/hoist 76.0.0-SNAPSHOT.1755703653662 → 76.0.0-SNAPSHOT.1755706915375

package/CHANGELOG.md

@@ -7,6 +7,8 @@
 * Added new `extraConfirmText`, `extraConfirmLabel` properties to `MessageOptions`. Use this option
   to require the specified text to be re-typed by a user when confirming a potentially destructive
   or disruptive action.
+* Updated grid column filters to apply on `Enter` / dismiss on `Esc` and tweaked the filter popup
+  toolbar for clarity.
 
 ### 🐞 Bug Fixes
 

package/admin/jsonsearch/JsonSearch.ts

@@ -296,5 +296,14 @@ const queryExamples = [
     {
         query: '$..grid[?(@.version == 1)]',
         explanation: 'Find all nodes with a key of "grid" and a property "version" equal to 1'
+    },
+    {
+        query: '$.currentView[?(@.desktop == null && @.desktop)]',
+        explanation:
+            'Find all JSON documents with path "currentView.desktop" that is explicitly set to null'
+    },
+    {
+        query: '$.[?(@ == "someString")]',
+        explanation: 'Find all JSON documents with an array that contains the value "someString"'
     }
 ];

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

@@ -1,6 +1,7 @@
 import { TabContainerModel } from '@xh/hoist/cmp/tab';
 import { HoistModel } from '@xh/hoist/core';
-import { GridFilterFieldSpec } from '@xh/hoist/cmp/grid';
+import { CompoundFilter, FieldFilter, FieldType, Filter, FilterLike, Store } from '@xh/hoist/data';
+import { GridFilterFieldSpec, GridFilterModel } from '@xh/hoist/cmp/grid';
 import { CustomTabModel } from './custom/CustomTabModel';
 import { ValuesTabModel } from './values/ValuesTabModel';
 import { ColumnHeaderFilterModel } from '../ColumnHeaderFilterModel';
@@ -11,15 +12,17 @@ export declare class HeaderFilterModel extends HoistModel {
     tabContainerModel: TabContainerModel;
     valuesTabModel: ValuesTabModel;
     customTabModel: CustomTabModel;
-    get filterModel(): import("@xh/hoist/cmp/grid").GridFilterModel;
+    get filterModel(): GridFilterModel;
     get field(): string;
-    get store(): import("../../../../../../data").Store;
-    get fieldType(): import("../../../../../../data").FieldType;
-    get currentGridFilter(): import("../../../../../../data").Filter;
-    get columnFilters(): import("../../../../../../data").FieldFilter[];
-    get columnCompoundFilter(): import("../../../../../../data").CompoundFilter;
+    get store(): Store;
+    get fieldType(): FieldType;
+    get currentGridFilter(): Filter;
+    get columnFilters(): FieldFilter[];
+    get columnCompoundFilter(): CompoundFilter;
     get hasFilter(): boolean;
+    get pendingFilter(): FilterLike;
     get hasPendingFilter(): boolean;
+    get isDirty(): boolean;
     get isCustomFilter(): boolean;
     get commitOnChange(): boolean;
     onLinked(): void;

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilter.ts

@@ -12,6 +12,7 @@ import {button, buttonGroup} from '@xh/hoist/desktop/cmp/button';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
+import {wait} from '@xh/hoist/promise';
 import {stopPropagation} from '@xh/hoist/utils/js';
 import {HeaderFilterModel} from './HeaderFilterModel';
 
@@ -22,7 +23,7 @@ import {HeaderFilterModel} from './HeaderFilterModel';
  */
 export const headerFilter = hoistCmp.factory({
     model: creates(HeaderFilterModel),
-    render() {
+    render({model}) {
         return panel({
             title: `Filter`,
             className: 'xh-column-header-filter',
@@ -31,31 +32,49 @@ export const headerFilter = hoistCmp.factory({
             onDoubleClick: stopPropagation,
             headerItems: [switcher()],
             item: tabContainer(),
-            bbar: bbar()
+            bbar: bbar(),
+            hotkeys: [
+                {
+                    allowInInput: true,
+                    combo: 'enter',
+                    label: 'Apply',
+                    group: 'Column Filter',
+                    onKeyDown: () =>
+                        // Wait for debounced reaction in `ValuesTabModel` to run before committing
+                        wait(400).then(() => {
+                            if (model.isDirty) model.commit();
+                        })
+                }
+            ]
         });
     }
 });
 
 const bbar = hoistCmp.factory<HeaderFilterModel>({
     render({model}) {
-        const {commitOnChange} = model;
+        const {commitOnChange, hasFilter, isDirty} = model;
         return toolbar({
             compact: true,
             items: [
-                filler(),
                 button({
                     icon: Icon.delete(),
-                    text: 'Clear Filter',
+                    text: 'Clear',
                     intent: 'danger',
-                    disabled: !model.hasFilter,
+                    disabled: !hasFilter,
                     onClick: () => model.clear()
                 }),
+                filler(),
+                button({
+                    omit: commitOnChange,
+                    text: 'Cancel',
+                    onClick: () => model.parent.close()
+                }),
                 button({
                     omit: commitOnChange,
-                    icon: Icon.check(),
-                    text: 'Apply Filter',
-                    intent: 'success',
-                    disabled: !model.hasFilter && !model.hasPendingFilter,
+                    text: 'Apply',
+                    disabled: !isDirty,
+                    intent: 'primary',
+                    minimal: false,
                     onClick: () => model.commit()
                 })
             ]

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilterModel.ts

@@ -7,10 +7,19 @@
 
 import {TabContainerModel} from '@xh/hoist/cmp/tab';
 import {HoistModel, managed, lookup} from '@xh/hoist/core';
+import {
+    CompoundFilter,
+    FieldFilter,
+    FieldType,
+    Filter,
+    FilterLike,
+    parseFilter,
+    Store
+} from '@xh/hoist/data';
 import {action, computed} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
 import {isEmpty} from 'lodash';
-import {GridFilterFieldSpec} from '@xh/hoist/cmp/grid';
+import {GridFilterFieldSpec, GridFilterModel} from '@xh/hoist/cmp/grid';
 import {customTab} from './custom/CustomTab';
 import {CustomTabModel} from './custom/CustomTabModel';
 import {valuesTab} from './values/ValuesTab';
@@ -29,43 +38,54 @@ export class HeaderFilterModel extends HoistModel {
     @managed valuesTabModel: ValuesTabModel;
     @managed customTabModel: CustomTabModel;
 
-    get filterModel() {
+    get filterModel(): GridFilterModel {
         return this.parent.filterModel;
     }
 
-    get field() {
+    get field(): string {
         return this.fieldSpec.field;
     }
 
-    get store() {
+    get store(): Store {
         return this.filterModel.gridModel.store;
     }
 
-    get fieldType() {
+    get fieldType(): FieldType {
         return this.store.getField(this.field).type;
     }
 
-    get currentGridFilter() {
+    get currentGridFilter(): Filter {
         return this.filterModel.filter;
     }
 
-    get columnFilters() {
+    get columnFilters(): FieldFilter[] {
         return this.filterModel.getColumnFilters(this.field);
     }
 
-    get columnCompoundFilter() {
+    get columnCompoundFilter(): CompoundFilter {
         return this.filterModel.getColumnCompoundFilter(this.field);
     }
 
-    get hasFilter() {
+    get hasFilter(): boolean {
         return !isEmpty(this.columnFilters);
     }
 
-    get hasPendingFilter() {
+    get pendingFilter(): FilterLike {
         const {activeTabId} = this.tabContainerModel;
         return activeTabId === 'valuesFilter'
-            ? !!this.valuesTabModel.filter
-            : !!this.customTabModel.filter;
+            ? this.valuesTabModel.filter
+            : this.customTabModel.filter;
+    }
+
+    get hasPendingFilter(): boolean {
+        return !!this.pendingFilter;
+    }
+
+    @computed
+    get isDirty(): boolean {
+        const current = parseFilter(this.columnFilters),
+            pending = parseFilter(this.pendingFilter);
+        return current ? !current.equals(pending) : !!pending;
     }
 
     @computed

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

@@ -96,6 +96,8 @@ export class ValuesTabModel extends HoistModel {
             {
                 track: () => this.filterText,
                 run: () => this.onFilterTextChange(),
+                // Must be longer than the `filterBuffer` on `storeFilterField` since this Grid's
+                // filtered RecordSet must be current before `onFilterTextChange` can run.
                 debounce: 300
             },
             {

package/package.json

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