@xh/hoist 73.0.0-SNAPSHOT.1746476925456 → 73.0.0-SNAPSHOT.1746482507483

package/build/types/mobile/cmp/input/DateInput.d.ts

@@ -1,7 +1,8 @@
 import { HoistInputProps } from '@xh/hoist/cmp/input';
-import { HoistProps, StyleProps, LayoutProps, HSide, PlainObject } from '@xh/hoist/core';
+import { HoistProps, StyleProps, LayoutProps, PlainObject } from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
 import { LocalDate } from '@xh/hoist/utils/datetime';
+import type { Property } from 'csstype';
 import './DateInput.scss';
 import { ReactElement } from 'react';
 export interface DateInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
@@ -43,7 +44,7 @@ export interface DateInputProps extends HoistProps, HoistInputProps, StyleProps,
     /** Props passed to SingleDatePicker component, as per SingleDatePicker docs. */
     singleDatePickerProps?: PlainObject;
     /** Alignment of entry text within control, default 'left'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
     /** Type of value to publish. Defaults to 'date'. */
     valueType?: 'date' | 'localDate';
 }

package/build/types/mobile/cmp/input/NumberInput.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { HoistInputProps } from '@xh/hoist/cmp/input';
-import { HoistProps, HSide, LayoutProps, StyleProps } from '@xh/hoist/core';
+import { HoistProps, LayoutProps, StyleProps } from '@xh/hoist/core';
 import { NumericPrecision, ZeroPad } from '@xh/hoist/format';
 import '@xh/hoist/mobile/register';
+import type { Property } from 'csstype';
 import './NumberInput.scss';
 export interface NumberInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
     value?: number;
@@ -38,7 +39,7 @@ export interface NumberInputProps extends HoistProps, HoistInputProps, StyleProp
     /** True to select contents when control receives focus. */
     selectOnFocus?: boolean;
     /** Alignment of entry text within control, default 'right'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
     /**
      * Text appended to the rendered value within control when not editing.
      * Can be used to append e.g. "%" or a unit without need for an external right label.

package/build/types/mobile/cmp/input/SearchInput.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { HoistInputProps } from '@xh/hoist/cmp/input';
-import { HoistProps, HSide } from '@xh/hoist/core';
+import { HoistProps } from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
 import './SearchInput.scss';
+import type { Property } from 'csstype';
 export interface SearchInputProps extends HoistProps, HoistInputProps {
     value?: string;
     /** True to commit on every change/keystroke, default false. */
@@ -16,7 +17,7 @@ export interface SearchInputProps extends HoistProps, HoistInputProps {
     /** Whether to allow browser spell check, defaults to false */
     spellCheck?: boolean;
     /** Alignment of entry text within control, default 'left'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
 }
 /**
  * A Search Input

package/build/types/mobile/cmp/input/TextInput.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { HoistInputProps } from '@xh/hoist/cmp/input';
-import { HoistProps, HSide, LayoutProps, StyleProps } from '@xh/hoist/core';
+import { HoistProps, LayoutProps, StyleProps } from '@xh/hoist/core';
 import '@xh/hoist/mobile/register';
+import type { Property } from 'csstype';
 import './TextInput.scss';
 export interface TextInputProps extends HoistProps, HoistInputProps, StyleProps, LayoutProps {
     value?: string;
@@ -36,7 +37,7 @@ export interface TextInputProps extends HoistProps, HoistInputProps, StyleProps,
     /** Whether to allow browser spell check, defaults to false */
     spellCheck?: boolean;
     /** Alignment of entry text within control, default 'left'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
     /** Underlying HTML <input> element type. */
     type?: 'text' | 'password';
 }

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/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTab.scss

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

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

@@ -5,10 +5,11 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {grid} from '@xh/hoist/cmp/grid';
-import {div, placeholder, vframe} from '@xh/hoist/cmp/layout';
+import {div, hframe, placeholder, span, vbox, vframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {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';
@@ -47,7 +48,33 @@ 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;
+    return vbox({
+        className: 'store-filter-header',
+        items: [
+            hframe(
+                checkbox({
+                    disabled: store.empty,
+                    displayUnsetState: true,
+                    value: allVisibleRecsChecked,
+                    onChange: () => model.toggleAllRecsChecked()
+                }),
+                span(`(Select All${filterText ? ' Search Results' : ''})`)
+            ),
+            hframe({
+                omit: !filterText || store.empty || headerFilterModel.commitOnChange,
+                items: [
+                    checkbox({bind: 'combineCurrentFilters'}),
+                    span(`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;
 
+    /*
+     * Available only when commit on change is false merge
+     * current filter with pendingValues on commit
+     */
+    @bindable combineCurrentFilters: boolean = false;
+
     /** FieldFilter output by this model. */
     @computed.struct
     get filter(): FieldFilterSpec {
@@ -81,11 +87,18 @@ 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, this.combineCurrentFilters],
+                run: () => this.setPendingValues(),
+                debounce: 300
+            }
+        );
     }
 
     syncWithFilter() {
@@ -115,6 +128,23 @@ export class ValuesTabModel extends HoistModel {
     //-------------------
     // Implementation
     //-------------------
+    @action
+    setPendingValues() {
+        if (!this.filterText) {
+            this.doSyncWithFilter();
+            this.syncGrid();
+            return;
+        }
+
+        const {records} = this.gridModel.store,
+            currentFilterValues = flatten(map(this.columnFilters, 'value')),
+            values = map(records, 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)),
@@ -217,17 +247,10 @@ export class ValuesTabModel extends HoistModel {
             onRowClicked: ({data: record}) => {
                 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 +268,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/desktop/cmp/input/DateInput.ts

@@ -9,7 +9,7 @@ import {TimePickerProps} from '@blueprintjs/datetime';
 import {ReactDayPickerSingleProps} from '@blueprintjs/datetime2/src/common/reactDayPickerProps';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {div, hbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, HSide, LayoutProps, Some} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, LayoutProps, Some} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {textInput, TextInputModel} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';
@@ -22,6 +22,7 @@ import {isLocalDate, LocalDate} from '@xh/hoist/utils/datetime';
 import {consumeEvent, getTestId, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
+import type {Property} from 'csstype';
 import {assign, castArray, clone, isEmpty, trim} from 'lodash';
 import moment from 'moment';
 import {createRef, ReactElement, ReactNode} from 'react';
@@ -128,7 +129,7 @@ export interface DateInputProps extends HoistProps, LayoutProps, HoistInputProps
     strictInputParsing?: boolean;
 
     /** Alignment of entry text within control, default 'left'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
 
     /**
      * Props passed to the TimePicker, as per Blueprint docs.

package/desktop/cmp/input/NumberInput.ts

@@ -6,13 +6,14 @@
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {hoistCmp, HoistProps, HSide, LayoutProps, StyleProps} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {fmtNumber, NumericPrecision, parseNumber, Precision, ZeroPad} from '@xh/hoist/format';
 import {numericInput} from '@xh/hoist/kit/blueprint';
 import {wait} from '@xh/hoist/promise';
 import {TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
+import type {Property} from 'csstype';
 import {debounce, isNaN, isNil, isNumber, round} from 'lodash';
 import {KeyboardEventHandler, ReactElement, ReactNode, Ref, useLayoutEffect} from 'react';
 
@@ -82,7 +83,7 @@ export interface NumberInputProps extends HoistProps, LayoutProps, StyleProps, H
     stepSize?: number;
 
     /** Alignment of entry text within control, default 'right'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
 
     /**
      * Text appended to the rendered value within control when not editing.

package/desktop/cmp/input/TextInput.ts

@@ -7,13 +7,14 @@
 import composeRefs from '@seznam/compose-react-refs';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {div} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, HSide, LayoutProps, StyleProps} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {inputGroup} from '@xh/hoist/kit/blueprint';
 import {getTestId, TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
+import type {Property} from 'csstype';
 import {isEmpty} from 'lodash';
 import {FocusEvent, KeyboardEventHandler, ReactElement, ReactNode, Ref} from 'react';
 
@@ -63,7 +64,7 @@ export interface TextInputProps extends HoistProps, HoistInputProps, LayoutProps
     selectOnFocus?: boolean;
 
     /** Alignment of entry text within control, default 'left'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
 
     /** True to allow browser spell check, default false. */
     spellCheck?: boolean;

package/mobile/cmp/input/DateInput.ts

@@ -6,7 +6,7 @@
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {div} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, StyleProps, LayoutProps, HSide, PlainObject} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, StyleProps, LayoutProps, PlainObject} from '@xh/hoist/core';
 import {fmtDate} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
 import {singleDatePicker} from '@xh/hoist/kit/react-dates';
@@ -15,6 +15,7 @@ import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {isLocalDate, LocalDate} from '@xh/hoist/utils/datetime';
 import {withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
+import type {Property} from 'csstype';
 import moment from 'moment';
 import './DateInput.scss';
 import {ReactElement} from 'react';
@@ -68,7 +69,7 @@ export interface DateInputProps extends HoistProps, HoistInputProps, StyleProps,
     singleDatePickerProps?: PlainObject;
 
     /** Alignment of entry text within control, default 'left'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
 
     /** Type of value to publish. Defaults to 'date'. */
     valueType?: 'date' | 'localDate';

package/mobile/cmp/input/NumberInput.ts

@@ -5,13 +5,14 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {hoistCmp, HoistProps, HSide, LayoutProps, StyleProps} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import {fmtNumber, NumericPrecision, Precision, ZeroPad} from '@xh/hoist/format';
 import {input} from '@xh/hoist/kit/onsen';
 import '@xh/hoist/mobile/register';
 import {wait} from '@xh/hoist/promise';
 import {throwIf, withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
+import type {Property} from 'csstype';
 import {debounce, isNaN, isNil, isNumber, round} from 'lodash';
 import './NumberInput.scss';
 
@@ -60,7 +61,7 @@ export interface NumberInputProps extends HoistProps, HoistInputProps, StyleProp
     selectOnFocus?: boolean;
 
     /** Alignment of entry text within control, default 'right'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
 
     /**
      * Text appended to the rendered value within control when not editing.

package/mobile/cmp/input/SearchInput.ts

@@ -5,12 +5,13 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
-import {hoistCmp, HoistProps, HSide} from '@xh/hoist/core';
+import {hoistCmp, HoistProps} from '@xh/hoist/core';
 import {searchInput as onsenSearchInput} from '@xh/hoist/kit/onsen';
 import '@xh/hoist/mobile/register';
 import {withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import './SearchInput.scss';
+import type {Property} from 'csstype';
 
 export interface SearchInputProps extends HoistProps, HoistInputProps {
     value?: string;
@@ -31,7 +32,7 @@ export interface SearchInputProps extends HoistProps, HoistInputProps {
     spellCheck?: boolean;
 
     /** Alignment of entry text within control, default 'left'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
 }
 
 /**

package/mobile/cmp/input/TextInput.ts

@@ -6,13 +6,14 @@
  */
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {hbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, HSide, LayoutProps, StyleProps} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {input} from '@xh/hoist/kit/onsen';
 import {button} from '@xh/hoist/mobile/cmp/button';
 import '@xh/hoist/mobile/register';
 import {withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
+import type {Property} from 'csstype';
 import {isEmpty} from 'lodash';
 import './TextInput.scss';
 
@@ -58,7 +59,7 @@ export interface TextInputProps extends HoistProps, HoistInputProps, StyleProps,
     spellCheck?: boolean;
 
     /** Alignment of entry text within control, default 'left'. */
-    textAlign?: HSide;
+    textAlign?: Property.TextAlign;
 
     /** Underlying HTML <input> element type. */
     type?: 'text' | 'password';

package/package.json

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