@xh/hoist 73.0.0-SNAPSHOT.1747146913330 → 73.0.0-SNAPSHOT.1747155067044

package/CHANGELOG.md

@@ -35,6 +35,12 @@
    allow the client to do a potentially interactive popup login during the session to re-establish
    the login.  This is especially useful to allow recovery from expired or invalidated refresh
    tokens.
+*  New utility method `XH.openWindow()` for ensuring that new windows/tabs are opened without
+   an unintended `opener` relationship with the original window.
+* 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`
+    * Grid column header filtering functionality now similar to Excel on Windows
 
 ### 🐞 Bug Fixes
 

package/admin/AppModel.ts

@@ -155,7 +155,8 @@ export class AppModel extends HoistAppModel {
 
     /** Open the primary business-facing application, typically 'app'. */
     openPrimaryApp() {
-        window.open(`/${this.getPrimaryAppCode()}`);
+        const appCode = this.getPrimaryAppCode();
+        XH.openWindow(`/${appCode}`, appCode);
     }
 
     getPrimaryAppCode() {

package/build/types/cmp/grid/Types.d.ts

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

package/build/types/cmp/store/StoreFilterField.d.ts

@@ -11,9 +11,8 @@ export interface StoreFilterFieldProps extends DefaultHoistProps {
     autoApply?: boolean;
     /**
      * Field on optional model to which this component should bind its raw (text) value to persist
-     * across renders. Specify this field to control the state of this component directly or if
-     * deliberately not connecting this component to a Store/GridModel. These are both advanced
-     * use-cases - this prop is typically left unset.
+     * across renders. Specify this field to control the state of this component directly from a model.
+     * These are both advanced use-cases - this prop is typically left unset.
      */
     bind?: string;
     /** Names of field(s) to exclude from search. Cannot be used with `includeFields`. */

package/build/types/core/XH.d.ts

@@ -218,6 +218,14 @@ export declare class XHApi {
      * {@link reloadApp} instead.
      */
     refreshAppAsync(): Promise<void>;
+    /**
+     * Open a url in an external browser window/tab.
+     *
+     * Unlike a simple call to `open`, this method ensures the "opener" method on the
+     * new window is null. This ensures that the new page will not share sessionState with
+     * this page.  See https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
+     */
+    openWindow(url: string, target?: string): void;
     /**
      * Flags for controlling experimental, hotfix, or otherwise provisional features.
      *

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

@@ -11,6 +11,7 @@ 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;
@@ -26,6 +27,8 @@ export declare class ValuesTabModel extends HoistModel {
     reset(): void;
     setRecsChecked(isChecked: boolean, values: any[]): void;
     toggleAllRecsChecked(): void;
+    private onFilterTextChange;
+    private onCombineCurrentFiltersToggle;
     private getFilter;
     private doSyncWithFilter;
     private syncGrid;

package/cmp/grid/Types.ts

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

package/cmp/grid/filter/GridFilterModel.ts

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

package/cmp/store/StoreFilterField.ts

@@ -21,9 +21,8 @@ export interface StoreFilterFieldProps extends DefaultHoistProps {
 
     /**
      * Field on optional model to which this component should bind its raw (text) value to persist
-     * across renders. Specify this field to control the state of this component directly or if
-     * deliberately not connecting this component to a Store/GridModel. These are both advanced
-     * use-cases - this prop is typically left unset.
+     * across renders. Specify this field to control the state of this component directly from a model.
+     * These are both advanced use-cases - this prop is typically left unset.
      */
     bind?: string;
 

package/core/XH.ts

@@ -442,6 +442,17 @@ export class XHApi {
         return this.refreshContextModel.refreshAsync();
     }
 
+    /**
+     * Open a url in an external browser window/tab.
+     *
+     * Unlike a simple call to `open`, this method ensures the "opener" method on the
+     * new window is null. This ensures that the new page will not share sessionState with
+     * this page.  See https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
+     */
+    openWindow(url: string, target?: string) {
+        window.open(url, target ?? '_blank', 'noopener=true');
+    }
+
     /**
      * Flags for controlling experimental, hotfix, or otherwise provisional features.
      *

package/desktop/appcontainer/VersionBar.ts

@@ -55,7 +55,7 @@ export const versionBar = hoistCmp.factory({
                 Icon.wrench({
                     omit: isAdminApp || !XH.getUser().isHoistAdminReader,
                     title: 'Open Admin Console',
-                    onClick: () => window.open('/admin')
+                    onClick: () => XH.openWindow('/admin', 'xhAdmin')
                 })
             ]
         });

package/desktop/cmp/button/AppMenuButton.ts

@@ -143,7 +143,7 @@ function buildMenuItems(props: AppMenuButtonProps) {
             omit: hideAdminItem,
             text: 'Admin',
             icon: Icon.wrench(),
-            actionFn: () => window.open('/admin')
+            actionFn: () => XH.openWindow('/admin', 'xhAdmin')
         },
         {
             omit: hideImpersonateItem,

package/desktop/cmp/button/LaunchAdminButton.ts

@@ -25,7 +25,7 @@ export const [LaunchAdminButton, launchAdminButton] = hoistCmp.withFactory<Launc
             ref,
             icon: Icon.wrench(),
             title: 'Launch admin client...',
-            onClick: () => window.open('/admin'),
+            onClick: () => XH.openWindow('/admin', 'xhAdmin'),
             ...props
         });
     }

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

@@ -1,4 +1,18 @@
 .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;
+    }
+    label {
+      font-size: var(--xh-grid-compact-header-font-size-px);
+      color: var(--xh-grid-header-text-color);
+      cursor: pointer;
+    }
+  }
+
   &__hidden-values-message {
     display: flex;
     padding: var(--xh-pad-half-px);

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

@@ -4,11 +4,13 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {isEmpty} from 'lodash';
 import {grid} from '@xh/hoist/cmp/grid';
-import {div, placeholder, vframe} from '@xh/hoist/cmp/layout';
+import {div, hframe, placeholder, label, vbox, vframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
-import {hoistCmp, uses} from '@xh/hoist/core';
+import {XH, 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';
@@ -39,7 +41,8 @@ const tbar = hoistCmp.factory(() => {
             placeholder: 'Search...',
             flex: 1,
             autoFocus: true,
-            matchMode: 'any'
+            matchMode: 'any',
+            includeFields: ['value']
         })
     );
 });
@@ -47,7 +50,50 @@ const tbar = hoistCmp.factory(() => {
 const body = hoistCmp.factory<ValuesTabModel>(({model}) => {
     const {isCustomFilter} = model.headerFilterModel;
     if (isCustomFilter) return customFilterPlaceholder();
-    return vframe(grid(), hiddenValuesMessage());
+    return vframe(storeFilterSelect(), grid(), hiddenValuesMessage());
+});
+
+const storeFilterSelect = hoistCmp.factory<ValuesTabModel>(({model}) => {
+    const {gridModel, allVisibleRecsChecked, filterText, headerFilterModel} = model,
+        {store} = gridModel,
+        selectAllId = XH.genId(),
+        addToFilterId = XH.genId();
+
+    return vbox({
+        className: 'store-filter-header',
+        items: [
+            hframe(
+                checkbox({
+                    id: selectAllId,
+                    disabled: store.empty,
+                    displayUnsetState: true,
+                    value: allVisibleRecsChecked,
+                    onChange: () => model.toggleAllRecsChecked()
+                }),
+                label({
+                    htmlFor: selectAllId,
+                    item: `(Select All${filterText ? ' Search Results' : ''})`
+                })
+            ),
+            hframe({
+                omit:
+                    !filterText ||
+                    isEmpty(model.columnFilters) ||
+                    store.empty ||
+                    headerFilterModel.commitOnChange,
+                items: [
+                    checkbox({
+                        id: addToFilterId,
+                        bind: 'combineCurrentFilters'
+                    }),
+                    label({
+                        htmlFor: addToFilterId,
+                        item: 'Add current selection to filter'
+                    })
+                ]
+            })
+        ]
+    });
 });
 
 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, isEmpty, partition, uniq, without} from 'lodash';
+import {castArray, difference, flatten, isEmpty, map, partition, uniq, without} from 'lodash';
 
 export class ValuesTabModel extends HoistModel {
     override xhImpl = true;
@@ -26,6 +26,12 @@ export class ValuesTabModel extends HoistModel {
     /** Bound search term for `StoreFilterField` */
     @bindable filterText: string = null;
 
+    /*
+     * Merge current filter with pendingValues on commit.
+     * Used when commitOnChange is false.
+     */
+    @bindable combineCurrentFilters: boolean = false;
+
     /** FieldFilter output by this model. */
     @computed.struct
     get filter(): FieldFilterSpec {
@@ -81,11 +87,22 @@ export class ValuesTabModel extends HoistModel {
         this.headerFilterModel = headerFilterModel;
         this.gridModel = this.createGridModel();
 
-        this.addReaction({
-            track: () => this.pendingValues,
-            run: () => this.syncGrid(),
-            fireImmediately: true
-        });
+        this.addReaction(
+            {
+                track: () => this.pendingValues,
+                run: () => this.syncGrid(),
+                fireImmediately: true
+            },
+            {
+                track: () => this.filterText,
+                run: () => this.onFilterTextChange(),
+                debounce: 300
+            },
+            {
+                track: () => this.combineCurrentFilters,
+                run: () => this.onCombineCurrentFiltersToggle()
+            }
+        );
     }
 
     syncWithFilter() {
@@ -115,6 +132,43 @@ export class ValuesTabModel extends HoistModel {
     //-------------------
     // Implementation
     //-------------------
+    @action
+    private onFilterTextChange() {
+        if (!this.filterText) {
+            this.combineCurrentFilters = false;
+            this.doSyncWithFilter();
+            return;
+        }
+
+        const {records} = this.gridModel.store,
+            currentFilterValues = flatten(map(this.columnFilters, 'value')),
+            checkedRecs = records.filter(
+                it =>
+                    this.headerFilterModel.commitOnChange ||
+                    !isEmpty(currentFilterValues) ||
+                    it.get('isChecked')
+            ),
+            values = map(checkedRecs, it => it.get('value'));
+
+        this.pendingValues = uniq(
+            this.combineCurrentFilters ? [...currentFilterValues, ...values] : values
+        );
+    }
+
+    @action
+    private onCombineCurrentFiltersToggle() {
+        if (!this.filterText) return;
+
+        const {records} = this.gridModel.store,
+            currentFilterValues = flatten(map(this.columnFilters, 'value')),
+            checkedRecs = records.filter(it => it.get('isChecked')),
+            values = map(checkedRecs, 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)),
@@ -204,7 +258,7 @@ export class ValuesTabModel extends HoistModel {
                     {name: 'isChecked', type: 'bool'}
                 ]
             },
-            selModel: 'disabled',
+            selModel: 'single',
             emptyText: 'No records found...',
             contextMenu: null,
             // Autosize enabled to ensure that long values don't get clipped and user can scroll
@@ -217,17 +271,16 @@ export class ValuesTabModel extends HoistModel {
             onRowClicked: ({data: record}) => {
                 this.setRecsChecked(!record.get('isChecked'), record.get('value'));
             },
+            onKeyDown: evt => {
+                if (evt.key === ' ' || evt.code.toUpperCase() === 'SPACE') {
+                    const record = this.gridModel.selectedRecord;
+                    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,
@@ -245,7 +298,6 @@ 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.1747146913330",
+  "version": "73.0.0-SNAPSHOT.1747155067044",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",