@xh/hoist 77.0.0-SNAPSHOT.1760663247565 → 77.0.0-SNAPSHOT.1760707577281

package/CHANGELOG.md

@@ -7,6 +7,7 @@
 * Added a public `@bindable titleDetails` config to `DashViewModel` to support displaying additional
   information in the title bar of dashboard widgets. The new property is not persisted, allowing
   apps to programmatically show dynamic info in a widget header without perturbing its saved state.
+* Enhanced grid column filtering to support sorting the list of available values.
 
 ## 76.0.0 - 2025-09-26
 

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

@@ -1,10 +1,10 @@
+import { Column, GridFilterFieldSpec, GridFilterModel, GridModel } from '@xh/hoist/cmp/grid';
 import { TabContainerModel } from '@xh/hoist/cmp/tab';
 import { HoistModel } from '@xh/hoist/core';
 import { CompoundFilter, FieldFilter, FieldType, Filter, FilterLike, Store } from '@xh/hoist/data';
-import { GridFilterFieldSpec, GridFilterModel } from '@xh/hoist/cmp/grid';
+import { ColumnHeaderFilterModel } from '../ColumnHeaderFilterModel';
 import { CustomTabModel } from './custom/CustomTabModel';
 import { ValuesTabModel } from './values/ValuesTabModel';
-import { ColumnHeaderFilterModel } from '../ColumnHeaderFilterModel';
 export declare class HeaderFilterModel extends HoistModel {
     xhImpl: boolean;
     fieldSpec: GridFilterFieldSpec;
@@ -14,7 +14,9 @@ export declare class HeaderFilterModel extends HoistModel {
     customTabModel: CustomTabModel;
     get filterModel(): GridFilterModel;
     get field(): string;
+    get gridModel(): GridModel;
     get store(): Store;
+    get column(): Column;
     get fieldType(): FieldType;
     get currentGridFilter(): Filter;
     get columnFilters(): FieldFilter[];

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

@@ -5,12 +5,16 @@ import { HeaderFilterModel } from '../HeaderFilterModel';
 export declare class ValuesTabModel extends HoistModel {
     xhImpl: boolean;
     headerFilterModel: HeaderFilterModel;
-    /** Checkbox grid to display enumerated set of values */
+    /** Checkbox grid to display enumerated set of values. */
     gridModel: GridModel;
-    /** List of currently checked values in the list*/
+    /** List of currently checked values. */
     pendingValues: any[];
-    /** Bound search term for `StoreFilterField` */
+    /** Bound search term for `StoreFilterField`. */
     filterText: string;
+    /**
+     * Merge current filter with pendingValues on commit.
+     * Used when commitOnChange is false.
+     */
     combineCurrentFilters: boolean;
     /** FieldFilter output by this model. */
     get filter(): FieldFilterSpec;
@@ -22,15 +26,18 @@ export declare class ValuesTabModel extends HoistModel {
     get values(): any[];
     get valueCount(): number;
     get hasHiddenValues(): boolean;
+    get sortIcon(): any;
     constructor(headerFilterModel: HeaderFilterModel);
     syncWithFilter(): void;
     reset(): void;
     setRecsChecked(isChecked: boolean, values: any[]): void;
+    toggleSort(): void;
     toggleAllRecsChecked(): void;
     private onFilterTextChange;
     private onCombineCurrentFiltersToggle;
     private getFilter;
     private doSyncWithFilter;
     private syncGrid;
+    private initGridSortBy;
     private createGridModel;
 }

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

@@ -54,7 +54,6 @@ const bbar = hoistCmp.factory<HeaderFilterModel>({
     render({model}) {
         const {commitOnChange, hasFilter, isDirty} = model;
         return toolbar({
-            compact: true,
             items: [
                 button({
                     icon: Icon.delete(),

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

@@ -5,8 +5,9 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
+import {Column, GridFilterFieldSpec, GridFilterModel, GridModel} from '@xh/hoist/cmp/grid';
 import {TabContainerModel} from '@xh/hoist/cmp/tab';
-import {HoistModel, managed, lookup} from '@xh/hoist/core';
+import {HoistModel, lookup, managed} from '@xh/hoist/core';
 import {
     CompoundFilter,
     FieldFilter,
@@ -19,12 +20,11 @@ import {
 import {action, computed} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
 import {isEmpty} from 'lodash';
-import {GridFilterFieldSpec, GridFilterModel} from '@xh/hoist/cmp/grid';
+import {ColumnHeaderFilterModel} from '../ColumnHeaderFilterModel';
 import {customTab} from './custom/CustomTab';
 import {CustomTabModel} from './custom/CustomTabModel';
 import {valuesTab} from './values/ValuesTab';
 import {ValuesTabModel} from './values/ValuesTabModel';
-import {ColumnHeaderFilterModel} from '../ColumnHeaderFilterModel';
 
 export class HeaderFilterModel extends HoistModel {
     override xhImpl = true;
@@ -46,8 +46,16 @@ export class HeaderFilterModel extends HoistModel {
         return this.fieldSpec.field;
     }
 
+    get gridModel(): GridModel {
+        return this.filterModel.gridModel;
+    }
+
     get store(): Store {
-        return this.filterModel.gridModel.store;
+        return this.gridModel.store;
+    }
+
+    get column(): Column {
+        return this.parent.column;
     }
 
     get fieldType(): FieldType {

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

@@ -1,24 +1,32 @@
 .xh-values-filter-tab {
-  .store-filter-header {
-    padding: 5px 7px;
+  &__filter-controls {
     border-bottom: 1px solid var(--xh-grid-header-border-color);
+    padding: 5px 7px;
     row-gap: 5px;
+
     .bp5-control-indicator {
       font-size: 1em;
     }
+
     label {
       font-size: var(--xh-grid-compact-header-font-size-px);
       color: var(--xh-grid-header-text-color);
       cursor: pointer;
     }
+
+    &__sort-icon {
+      border-left: var(--xh-menu-border);
+      padding-left: var(--xh-pad-half-px);
+      color: var(--xh-grid-header-text-color);
+    }
   }
 
   &__hidden-values-message {
-    display: flex;
-    padding: var(--xh-pad-half-px);
     background-color: var(--xh-bg-alt);
     border-top: var(--xh-border-solid);
     color: var(--xh-text-color-muted);
+    display: flex;
+    padding: var(--xh-pad-half-px);
 
     .xh-icon {
       margin-right: var(--xh-pad-half-px);

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

@@ -6,7 +6,7 @@
  */
 import {isEmpty} from 'lodash';
 import {grid} from '@xh/hoist/cmp/grid';
-import {div, hframe, placeholder, label, vbox, vframe} from '@xh/hoist/cmp/layout';
+import {div, hframe, placeholder, label, vbox, vframe, filler} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {XH, hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
@@ -60,7 +60,7 @@ const storeFilterSelect = hoistCmp.factory<ValuesTabModel>(({model}) => {
         addToFilterId = XH.genId();
 
     return vbox({
-        className: 'store-filter-header',
+        className: 'xh-values-filter-tab__filter-controls',
         items: [
             hframe(
                 checkbox({
@@ -73,6 +73,12 @@ const storeFilterSelect = hoistCmp.factory<ValuesTabModel>(({model}) => {
                 label({
                     htmlFor: selectAllId,
                     item: `(Select All${filterText ? ' Search Results' : ''})`
+                }),
+                filler(),
+                div({
+                    className: 'xh-values-filter-tab__filter-controls__sort-icon',
+                    item: model.sortIcon,
+                    onClick: () => model.toggleSort()
                 })
             ),
             hframe({

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

@@ -7,26 +7,27 @@
 import {GridFilterModel, GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
 import {FieldFilterSpec} from '@xh/hoist/data';
-import {HeaderFilterModel} from '../HeaderFilterModel';
 import {checkbox} from '@xh/hoist/desktop/cmp/input';
+import {Icon} from '@xh/hoist/icon';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {castArray, difference, flatten, isEmpty, map, partition, uniq, without} from 'lodash';
+import {HeaderFilterModel} from '../HeaderFilterModel';
 
 export class ValuesTabModel extends HoistModel {
     override xhImpl = true;
 
     headerFilterModel: HeaderFilterModel;
 
-    /** Checkbox grid to display enumerated set of values */
-    @managed @observable.ref gridModel: GridModel;
+    /** Checkbox grid to display enumerated set of values. */
+    @managed gridModel: GridModel;
 
-    /** List of currently checked values in the list*/
+    /** List of currently checked values. */
     @observable.ref pendingValues: any[] = [];
 
-    /** Bound search term for `StoreFilterField` */
+    /** Bound search term for `StoreFilterField`. */
     @bindable filterText: string = null;
 
-    /*
+    /**
      * Merge current filter with pendingValues on commit.
      * Used when commitOnChange is false.
      */
@@ -80,12 +81,26 @@ export class ValuesTabModel extends HoistModel {
         return this.values.length < this.valueCount;
     }
 
+    get sortIcon() {
+        const {sort, abs} = this.gridModel.sortBy[0];
+        if (sort === 'asc') {
+            if (abs) return Icon.sortAbsAsc();
+            return Icon.sortAsc();
+        }
+        if (sort === 'desc') {
+            if (abs) return Icon.sortAbsDesc();
+            return Icon.sortDesc();
+        }
+        return null;
+    }
+
     constructor(headerFilterModel: HeaderFilterModel) {
         super();
         makeObservable(this);
 
         this.headerFilterModel = headerFilterModel;
         this.gridModel = this.createGridModel();
+        this.initGridSortBy();
 
         this.addReaction(
             {
@@ -125,6 +140,13 @@ export class ValuesTabModel extends HoistModel {
             : without(this.pendingValues, ...values);
     }
 
+    @action
+    toggleSort() {
+        const {colId, sort, abs} = this.gridModel.sortBy.find(it => it.colId === 'value'),
+            newSort = sort === 'asc' ? 'desc' : 'asc';
+        this.gridModel.setSortBy({colId, sort: newSort, abs});
+    }
+
     toggleAllRecsChecked() {
         const setAllToChecked = !this.allVisibleRecsChecked,
             values = this.gridModel.store.records.map(it => it.get('value'));
@@ -244,13 +266,22 @@ export class ValuesTabModel extends HoistModel {
         this.gridModel.loadData(data);
     }
 
+    private initGridSortBy() {
+        const {gridModel: srcGridModel, column} = this.headerFilterModel,
+            srcColGridSorter = srcGridModel.sortBy.find(it => it.colId === column.colId);
+
+        this.gridModel.setSortBy({
+            colId: 'value',
+            sort: srcColGridSorter?.sort ?? 'asc',
+            abs: srcColGridSorter?.abs ?? false
+        });
+    }
+
     private createGridModel() {
         const {BLANK_PLACEHOLDER} = GridFilterModel,
             {headerFilterModel, fieldSpec} = this,
-            {fieldType} = headerFilterModel,
-            renderer =
-                fieldSpec.renderer ??
-                (fieldType !== 'tags' ? this.headerFilterModel.parent.column.renderer : null);
+            {fieldType, column} = headerFilterModel,
+            renderer = fieldSpec.renderer ?? (fieldType !== 'tags' ? column.renderer : null);
 
         return new GridModel({
             store: {
@@ -301,6 +332,7 @@ export class ValuesTabModel extends HoistModel {
                 {
                     field: 'value',
                     align: 'left',
+                    tooltip: true,
                     comparator: (v1, v2, sortDir, abs, {defaultComparator}) => {
                         const mul = sortDir === 'desc' ? -1 : 1;
                         if (v1 === BLANK_PLACEHOLDER) return 1 * mul;

package/package.json

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

package/styles/vars.scss

@@ -522,8 +522,8 @@ body {
   --xh-zone-grid-label-color: var(--zone-grid-label-color, inherit);
 
   // Grid column-header-based filter popover (desktop only)
-  --xh-grid-filter-popover-height-px: var(--grid-filter-popover-height-px, 350px);
-  --xh-grid-filter-popover-width-px: var(--grid-filter-popover-width-px, 240px);
+  --xh-grid-filter-popover-height-px: var(--grid-filter-popover-height-px, 400px);
+  --xh-grid-filter-popover-width-px: var(--grid-filter-popover-width-px, 280px);
 
   // Dark Grid
   &.xh-dark {