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

package/CHANGELOG.md

@@ -4,8 +4,14 @@
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟢 TRIVIAL - minor upgrade to Hoist Core)
 
-Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Console "Clients" tab
-and new properties on `TrackLog`.
+* Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Console "Clients"
+  tab and new properties on `TrackLog`.
+* Apps with a custom `AppModel` for their admin app that extends `@xh/hoist/admin/AppModel` must
+  ensure they call `super.initAsync()` within their override of that lifecycle method, if
+  applicable. This did not previously have any effect, but is required now for the superclass to
+  initialize a new `ViewManagerModel`.
+  * For clarity, [here is where Toolbox makes that call](https://github.com/xh/toolbox/blob/f15a8018ce36c2ae998b45724b48a16320b88e49/client-app/src/admin/AppModel.ts#L12).
+
 
 ### 🎁 New Features
 
@@ -32,6 +38,8 @@ and new properties on `TrackLog`.
 
 * Corrected `GridGroupSortFn` param types.
 * Corrected `StoreCountLabelProps` interface.
+* Corrected `textAlign` type in `DateInputProps`, `NumberInputProps` `SearchInputProps` and
+  `TextInputProps`.
 
 ### ⚙️ Technical
 
@@ -41,7 +49,7 @@ and new properties on `TrackLog`.
     * The two versions *should* be the same, but in cases where a browser "restores" a tab and
       re-inits an app without reloading the code itself, the upgrade check would miss the fact that
       the client remained on an older version.
-    * Note that a misconfigured build - where the client build version is not set to the same value
+    * ⚠️ NOTE that a misconfigured build - where the client version is not set to the same value
       as the server - would result in a false positive for an upgrade. The two should always match.
 * Calls to `Promise.track()` that are rejected with an exception will be tracked with new
   severity level of `TrackSeverity.ERROR`
@@ -119,6 +127,10 @@ and new properties on `TrackLog`.
 
 ### 🎁 New Features
 
+* 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`
+    * Column header filtering functionality now similar to Excel on Windows
 * Introduced a new "JSON Search" feature to the Hoist Admin Console, accessible from the Config,
   User Preference, and JSON Blob tabs. Supports searching JSON values stored within these objects
   to filter and match data using JSON Path expressions.

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

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

@@ -2,10 +2,11 @@ import { PopperBoundary, PopperModifierOverrides } from '@blueprintjs/core';
 import { TimePickerProps } from '@blueprintjs/datetime';
 import { ReactDayPickerSingleProps } from '@blueprintjs/datetime2/src/common/reactDayPickerProps';
 import { HoistInputProps } from '@xh/hoist/cmp/input';
-import { HoistProps, HSide, LayoutProps, Some } from '@xh/hoist/core';
+import { HoistProps, LayoutProps, Some } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import { Position } from '@xh/hoist/kit/blueprint';
 import { LocalDate } from '@xh/hoist/utils/datetime';
+import type { Property } from 'csstype';
 import { ReactElement, ReactNode } from 'react';
 import './DateInput.scss';
 export interface DateInputProps extends HoistProps, LayoutProps, HoistInputProps {
@@ -88,7 +89,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.
      * @see https://blueprintjs.com/docs/#datetime/dateinput

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

@@ -1,7 +1,8 @@
 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/desktop/register';
 import { NumericPrecision, ZeroPad } from '@xh/hoist/format';
+import type { Property } from 'csstype';
 import { KeyboardEventHandler, ReactElement, ReactNode, Ref } from 'react';
 export interface NumberInputProps extends HoistProps, LayoutProps, StyleProps, HoistInputProps {
     value?: number;
@@ -51,7 +52,7 @@ export interface NumberInputProps extends HoistProps, LayoutProps, StyleProps, H
     /** Standard step size for increment/decrement handling. */
     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.
      * Can be used to append e.g. "%" or a unit without need for an external right label.

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

@@ -1,6 +1,7 @@
 import { HoistInputModel, 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/desktop/register';
+import type { Property } from 'csstype';
 import { FocusEvent, KeyboardEventHandler, ReactElement, ReactNode, Ref } from 'react';
 export interface TextInputProps extends HoistProps, HoistInputProps, LayoutProps, StyleProps {
     value?: string;
@@ -36,7 +37,7 @@ export interface TextInputProps extends HoistProps, HoistInputProps, LayoutProps
     /** True to select contents when control receives focus. */
     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;
     /** Underlying HTML <input> element type. */

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