@xh/hoist 76.0.0 → 76.1.0

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -338,7 +338,7 @@ export class DashContainerModel
     renameView(id: string) {
         const view = this.getItemByViewModel(id);
         if (!view) return;
-        this.showTitleForm(view.tab.element);
+        this.showTitleForm(view.tab.element, this.getViewModel(id));
     }
 
     onResize() {
@@ -528,10 +528,10 @@ export class DashContainerModel
 
             const $el = item.tab.element, // Note: this is a jquery element
                 stack = item.parent,
-                $titleEl = $el.find('.lm_title').first(),
+                $titleEl = this.getTitleElement($el),
                 iconSelector = 'svg.svg-inline--fa',
                 viewSpec = this.getViewSpec(item.config.component),
-                {icon, title} = viewModel;
+                {icon} = viewModel;
 
             $el.off('contextmenu').contextmenu(e => {
                 const index = stack.contentItems.indexOf(item);
@@ -551,14 +551,9 @@ export class DashContainerModel
                 }
             }
 
-            if (title) {
-                const currentTitle = $titleEl.text();
-                if (currentTitle !== title) $titleEl.text(title);
-            }
-
             if (viewSpec.allowRename) {
                 this.insertTitleForm($el, viewModel);
-                $titleEl.off('dblclick').dblclick(() => this.showTitleForm($el));
+                $titleEl.off('dblclick').dblclick(() => this.showTitleForm($el, viewModel));
             }
         });
     }
@@ -568,7 +563,7 @@ export class DashContainerModel
         if ($el.find(formSelector).length) return;
 
         // Create and insert form
-        const $titleEl = $el.find('.lm_title').first();
+        const $titleEl = this.getTitleElement($el);
         $titleEl.after(`<form class="title-form"><input type="text"/></form>`);
 
         // Attach listeners
@@ -579,7 +574,6 @@ export class DashContainerModel
         $formEl.submit(() => {
             const title = $inputEl.val();
             if (title.length) {
-                $titleEl.text(title);
                 viewModel.title = title;
             }
 
@@ -588,12 +582,11 @@ export class DashContainerModel
         });
     }
 
-    private showTitleForm($tabEl) {
+    private showTitleForm($tabEl, viewModel: DashViewModel) {
         if (this.renameLocked) return;
 
-        const $titleEl = $tabEl.find('.lm_title').first(),
-            $inputEl = $tabEl.find('.title-form input').first(),
-            currentTitle = $titleEl.text();
+        const $inputEl = $tabEl.find('.title-form input').first(),
+            currentTitle = viewModel.title;
 
         $tabEl.addClass('show-title-form');
         $inputEl.val(currentTitle);
@@ -647,6 +640,16 @@ export class DashContainerModel
                     containerModel: this
                 });
 
+                model.addReaction({
+                    track: () => model.fullTitle,
+                    run: () => {
+                        const item = this.getItemByViewModel(id),
+                            $titleEl = this.getTitleElement(item.tab.element);
+
+                        $titleEl.text(model.fullTitle);
+                    }
+                });
+
                 this.addViewModel(model);
                 return modelLookupContextProvider({
                     value: this.modelLookupContext,
@@ -662,6 +665,10 @@ export class DashContainerModel
         return ret;
     }
 
+    private getTitleElement($el) {
+        return $el.find('.lm_title').first();
+    }
+
     @action
     private destroyGoldenLayout() {
         XH.safeDestroy(this.goldenLayout);

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/desktop/cmp/viewmanager/dialog/ManageDialog.ts

@@ -88,7 +88,7 @@ export const viewsGrid = hoistCmp.factory<GridModel>({
                 grid({
                     model,
                     agOptions: {
-                        suppressMakeColumnVisibleAfterUnGroup: true
+                        suppressGroupChangesColumnVisibility: 'suppressShowOnUngroup'
                     }
                 }),
                 div({

package/mobile/appcontainer/ImpersonationBar.ts

@@ -36,7 +36,7 @@ export const impersonationBar = hoistCmp.factory({
                     enableFilter: true,
                     enableFullscreen: true,
                     placeholder: 'Select a user to impersonate...',
-                    createMessageFn: q => `Impersonate ${q}`,
+                    createMessageFn: q => `Impersonate new user "${q}"`,
                     onCommit: model.onCommit
                 }),
                 button({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "76.0.0",
+  "version": "76.1.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -28,8 +28,8 @@
     ]
   },
   "dependencies": {
-    "@auth0/auth0-spa-js": "~2.4.1",
-    "@azure/msal-browser": "~4.23.0",
+    "@auth0/auth0-spa-js": "~2.7.0",
+    "@azure/msal-browser": "~4.25.0",
     "@blueprintjs/core": "^5.10.5",
     "@blueprintjs/datetime": "^5.3.7",
     "@blueprintjs/datetime2": "^2.3.7",
@@ -48,7 +48,7 @@
     "codemirror": "~5.65.0",
     "core-js": "3.x",
     "debounce-promise": "~3.1.0",
-    "dompurify": "~3.2.3",
+    "dompurify": "~3.3.0",
     "downloadjs": "~1.4.7",
     "fast-deep-equal": "~3.1.1",
     "filesize": "~11.0.2",
@@ -58,7 +58,7 @@
     "jwt-decode": "~4.0.0",
     "lodash": "~4.17.21",
     "lodash-inflection": "~1.5.0",
-    "mobx": "~6.13.2",
+    "mobx": "~6.15.0",
     "mobx-react-lite": "~4.1.0",
     "moment": "~2.30.1",
     "numbro": "~2.5.0",

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 {