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

package/CHANGELOG.md

@@ -4,60 +4,53 @@
 
 ### 🎁 New Features
 
-* `DashCanvasView` and `DashContainerView` components now have a public `@bindable` `titleDetails`
-  property on their models to support displaying additional information in the title bar of these
-  components.  `titleDetails` is not persisted, and is expected to be set programmatically by the
-  application as needed.
+* 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
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - AG Grid update, Hoist React upgrade)
 
-* Hoist v76 upgrades AG Grid to v34 (from v31), covering three major AG Grid releases with their own
-  potentially breaking changes. Fortunately, internal Hoist updates to our managed API wrappers mean
-  that most apps will see very minimal changes, although there are required adjustments to app-level
-  `package.json` to install updated grid dependencies and `Bootstrap.ts` to import and register
-  your licensed grid modules at their new import paths.
-
-  Applications implementing `groupRowRenderer` should note that the `value` property passed to this
-  function is no longer stringified, but is instead the raw field value for the group.
-
-  See AG's upgrade guides for more details:
-  ** [Upgrade to v32](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-32/)
-  ** [Upgrade to v33](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-33/)
-  ** [Upgrade to v34](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-34/)
-
-*  The constructor for `TabModel` has changed to take its owning container as a second argument.
-   (Most applications do not create `TabModels` directly, but it is possible.)
-*  The `Exception` class and `HoistException` type have been moved from `@xh\hoist\core` to a new
-    lower level package `@xh\hoist\exception`.  This new structure is not expected to effect most
-    applications, and was put in place to reduce the risk of circular dependencies between internal
-    hoist packages.
-
-### 🎁 New Features
-
-* Added new `extraConfirmText`, `extraConfirmLabel` properties to `MessageOptions`. Use this option
+* Hoist v76 **upgrades AG Grid to v34** (from v31), covering three major AG Grid releases with their
+  own potentially breaking changes.
+    * Fortunately, internal Hoist updates to our managed API wrappers mean that most apps will see
+      very minimal changes, although there are required adjustments to app-level `package.json` to
+      install updated grid dependencies and `Bootstrap.ts` to import and register your licensed grid
+      modules at their new import paths.
+    * Applications implementing `groupRowRenderer` should note that the `value` property passed
+      to this function is no longer stringified, but is instead the raw field value for the group.
+    * See AG's upgrade guides for more details:
+        * [Upgrade to v32](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-32/)
+        * [Upgrade to v33](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-33/)
+        * [Upgrade to v34](https://www.ag-grid.com/react-data-grid/upgrading-to-ag-grid-34/)
+* Modified the `TabModel` constructor to take its owning container as a second argument.
+    * Apps very rarely create `TabModels` directly, so this unlikely to require changes.
+* Moved the `Exception` class and `HoistException` type from `@xh\hoist\core` to a new lower-level
+  package `@xh\hoist\exception` to reduce the risk of circule dependencies within Hoist.
+    * Apps rarely interact with these directly, so also unlikely to require changes.
+
+### 🎁 New Features
+
+* Added `extraConfirmText` + `extraConfirmLabel` configs to `MessageOptions`. Use these new options
   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
+  or disruptive action. Note their usage within Hoist's Admin Console when deleting a role.
+* Updated grid column filters to apply on `Enter` / dismiss on `Esc`. Tweaked the filter popup
   toolbar for clarity.
-* Added new ability to specify nested tab containers in a single declarative config.  Apps may now
+* Added new ability to specify nested tab containers in a single declarative config. Apps may now
   provide a spec for a nested tab container directly to the `TabConfig.content` property.
-* Improvements to View Management:
-  ** Allow users to create 'Global' views directly in 'Save/Save As' Dialog.
-  ** Simplify presentation/edit of view visibility to new "Visibility" control
-  ** Support for the 'isDefaultPinned' attribute on global views has been removed.  All global
-  views will be pinned by default.  This feature was deemed too confusing, and not useful in
-  practice.  App maintainers should ensure that all global views are appropriate and well
-  organized enough to be shown immediately to new users in the view menu.
-* New constraint rule: `validEmails` - to validate one or more email addresses in an input field.
-* `DashCanvas` accepts a new prop `rglOptions` to pass additional options to the underlying
-  `react-grid-layout`.
-* Experimental grid feature  `enableFullWidthScroll` has been promoted to a first-class property
-    on `GridModel`.   Set to true to ensure that the grid will have a single horizontal scrollbar
-    spanning the width of all columns, including any pinned columns.
-* New `@sharePendingPromise` decorator for returning a shared Promise across concurrent async calls.
-
+* Improved `ViewManager` features:
+    * Enabled globally sharing a new view directly from the 'Save/Save As' dialog.
+    * Simplified presentation and management of view visibility via new "Visibility" control.
+    * Removed support for the `isDefaultPinned` attribute on global views. All global views will be
+      pinned (i.e. show up in user menus) by default. Users can still explicitly "unpin" any global
+      views to remove them from their menus.
+* Added a `validEmails` constraint rule to validate one or more email addresses in an input field.
+* Added `DashCanvas.rglOptions` prop - passed through to the underlying `react-grid-layout`.
+* Promoted experimental grid feature `enableFullWidthScroll` to a first-class `GridModel` config.
+  Set to true to ensure that the grid will have a single horizontal scrollbar spanning the width of
+  all columns, including any pinned columns.
 
 ### 🐞 Bug Fixes
 
@@ -73,6 +66,9 @@
 
 ### ⚙️ Technical
 
+* Added a new `@sharePendingPromise` decorator for returning a shared Promise across concurrent
+  async calls. Calls made to a decorated method while a prior call with the same args is still
+  pending won't kick off a new call, but will instead receive the same Promise as the first call.
 * Added `XH.logLevel` to define a minimum logging severity threshold for Hoist's client-side logging
   utilities. Defaulted to 'info' to prevent possible memory and performance impacts of verbose
   logging on 'debug'. Change at runtime via new `XH.setLogLevel()` when troubleshooting. See

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.1760631134539",
+  "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 {