@xh/hoist 86.0.1 → 86.2.0

package/cmp/grid/filter/GridFilterFieldSpec.ts

@@ -4,7 +4,6 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {ColumnRenderer} from '@xh/hoist/cmp/grid';
 import {HoistInputProps} from '@xh/hoist/cmp/input';
 import {PlainObject} from '@xh/hoist/core';
 import {
@@ -19,17 +18,38 @@ import {
     BaseFilterFieldSpecConfig
 } from '@xh/hoist/data/filter/BaseFilterFieldSpec';
 import {castArray, compact, flatMap, isDate, isEmpty, uniqBy} from 'lodash';
+import {ReactNode} from 'react';
 import {GridFilterModel} from './GridFilterModel';
 
+/**
+ * Produces the display content for an entry in the Values tab of a column filter. Must be a pure
+ * transform of the value - the values list carries no source record, and there is no column or
+ * grid context to reach for (unlike a Column's `renderer`, which runs against the source grid).
+ */
+export type GridFilterRenderer = (value: any) => ReactNode;
+
+/**
+ * Produces the value to sort by for an entry in the Values tab of a column filter. Must be a pure
+ * transform of the value - the values list carries no source record, and there is no column or
+ * grid context to reach for (unlike a Column's `sortValue`, which runs against the source grid).
+ */
+export type GridFilterSortValueFn = (value: any) => any;
+
 export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
     /** GridFilterModel instance owning this fieldSpec. */
     filterModel?: GridFilterModel;
 
     /**
-     * Function returning a formatted string for each value in this values filter display.
-     * If not provided, the Column's renderer will be used.
+     * Pure function producing the display content for each entry in the values filter display. If
+     * not provided, the Column's renderer is used where it can be applied to a bare value.
+     */
+    renderer?: GridFilterRenderer;
+
+    /**
+     * Pure function producing the value to sort each entry of the values filter display by. If not
+     * provided, the Column's sortValue is used where it can be applied to a bare value.
      */
-    renderer?: ColumnRenderer;
+    sortValue?: GridFilterSortValueFn;
 
     /**
      * Props to pass through to the HoistInput components used on the custom filter tab.
@@ -47,7 +67,8 @@ export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
  */
 export class GridFilterFieldSpec extends BaseFilterFieldSpec {
     filterModel: GridFilterModel;
-    renderer: ColumnRenderer;
+    renderer: GridFilterRenderer;
+    sortValue: GridFilterSortValueFn;
     inputProps: PlainObject;
     defaultOp: FieldFilterOperator;
 
@@ -57,6 +78,7 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
     constructor({
         filterModel,
         renderer,
+        sortValue,
         inputProps,
         defaultOp,
         ...rest
@@ -65,6 +87,7 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
 
         this.filterModel = filterModel;
         this.renderer = renderer;
+        this.sortValue = sortValue;
         this.inputProps = inputProps;
         this.defaultOp = this.ops.includes(defaultOp) ? defaultOp : this.ops[0];
     }
@@ -87,10 +110,13 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
         // Values from current column filter. `flatMap` here unwraps the array `parseVal` returns
         // for `tags`-typed fields, lining those values up with the scalar values produced by
         // `Store.getValuesForFieldFilter` above. Without this, a filter value like `'foo'` would
-        // survive as `['foo']` and dedupe incorrectly.
+        // survive as `['foo']` and dedupe incorrectly. The `filter` drops the non-selectable null
+        // value carried by a blank `tags` filter.
         const colFilterVals = flatMap(columnFilters, filter => {
             return castArray(filter.value).flatMap(val => sourceField.parseVal(val));
-        }).map(it => this.toDisplayValue(it));
+        })
+            .filter(it => sourceField.type !== 'tags' || it != null)
+            .map(it => this.toDisplayValue(it));
 
         // Combine + unique - these are all values that *could* be shown in the filter UI.
         const allValues = uniqBy([...allSrcVals, ...colFilterVals], this.getUniqueValue);

package/cmp/grid/impl/GridHScrollbar.ts

@@ -79,6 +79,10 @@ class GridHScrollbarModel extends HoistModel {
         return this.viewRef.current.querySelector('.ag-center-cols-viewport');
     }
 
+    private get agHeaderViewport(): HTMLDivElement {
+        return this.viewRef.current.querySelector('.ag-header-viewport');
+    }
+
     private get agVerticalScrollContainer(): HTMLDivElement {
         return this.viewRef.current.querySelector('.ag-body-vertical-scroll-container');
     }
@@ -102,6 +106,7 @@ class GridHScrollbarModel extends HoistModel {
 
     scrollViewport(left: number) {
         this.agViewport.scrollLeft = left;
+        this.agHeaderViewport.scrollLeft = left;
     }
 
     override afterLinked() {
@@ -110,9 +115,11 @@ class GridHScrollbarModel extends HoistModel {
             run: () => {
                 const {agViewport, viewRef} = this;
                 this.viewWidth = viewRef.current.clientWidth;
-                agViewport.addEventListener('scroll', e =>
-                    this.scrollScroller((e.target as HTMLDivElement).scrollLeft)
-                );
+                agViewport.addEventListener('scroll', e => {
+                    const left = (e.target as HTMLDivElement).scrollLeft;
+                    this.scrollScroller(left);
+                    this.agHeaderViewport.scrollLeft = left;
+                });
                 this.agViewportResizeObserver = observeResize(
                     () => this.onAgViewportResized(),
                     agViewport,

package/cmp/grid/impl/MenuSupport.ts

@@ -280,15 +280,13 @@ function levelExpandAction(gridModel: GridModel): RecordAction {
     return new RecordAction({
         text: 'Expand to...',
         displayFn: () => {
-            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
+            const {maxDepth, resolvedLevelLabels} = gridModel;
 
             // Don't show for flat grid models or if we don't have labels
             if (!maxDepth || !resolvedLevelLabels) return {hidden: true};
 
             const items = resolvedLevelLabels.map((label, idx) => {
-                const isCurrLevel =
-                    expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
+                const isCurrLevel = gridModel.isCurrentExpandLevel(idx);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : null,

package/cmp/input/SegmentedControlOption.ts

@@ -0,0 +1,61 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+import {Intent} from '@xh/hoist/core';
+import {LocalDate} from '@xh/hoist/utils/datetime';
+import {ReactElement} from 'react';
+
+/** Primitive value types supported as a SegmentedControl option value/label. */
+export type OptionPrimitive = string | number | boolean | LocalDate;
+
+/**
+ * Option for a SegmentedControl, shared by the desktop and mobile implementations.
+ */
+export interface SegmentedControlOption {
+    /** Value for this option. */
+    value: OptionPrimitive;
+
+    /** Display label. Defaults to `value.toString()` if omitted. */
+    label?: string;
+
+    /** Icon element, displayed before the label. */
+    icon?: ReactElement;
+
+    /** True to disable this individual option. */
+    disabled?: boolean;
+
+    /**
+     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
+     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
+     * `intent` default. Defaults to the control's `intent`.
+     */
+    intent?: Intent;
+}
+
+/**
+ * Variant of SegmentedControlOption for representing a null/"no value" selection.
+ * Label is required to force use case to override default js 'null' toString rendering.
+ */
+export interface SegmentedControlNullOption {
+    /** Null value for this option. */
+    value: null;
+
+    /** Display label - required for null options. */
+    label: string;
+
+    /** Icon element, displayed before the label. */
+    icon?: ReactElement;
+
+    /** True to disable this individual option. */
+    disabled?: boolean;
+
+    /**
+     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
+     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
+     * `intent` default. Defaults to the control's `intent`.
+     */
+    intent?: Intent;
+}

package/cmp/input/index.ts

@@ -1,2 +1,3 @@
 export * from './HoistInputModel';
 export * from './HoistInputProps';
+export * from './SegmentedControlOption';

package/core/AppSpec.ts

@@ -7,7 +7,7 @@
 import {ElementFactory, HoistAppModel, HoistAuthModel, HoistProps, XH} from '@xh/hoist/core';
 import {throwIf} from '@xh/hoist/utils/js';
 import {isFunction, isNil, isString} from 'lodash';
-import {Component, ComponentClass, FunctionComponent} from 'react';
+import {Component, ComponentClass, FunctionComponent, ReactElement} from 'react';
 
 /**
  * Spec for a client-side Hoist application. A config matching this class's shape is provided
@@ -118,6 +118,12 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
     /** Optional message to show users when denied access to app. */
     lockoutMessage?: string;
 
+    /**
+     * Icon to display on the form-based login page, if active via `enableLoginForm: true`.
+     * Defaults to `Icon.shieldHalved()`.
+     */
+    loginPanelIcon?: ReactElement;
+
     /** Optional message to show on login form, if `showLoginForm: true`. */
     loginMessage?: string;
 
@@ -156,6 +162,7 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         lockoutMessage = null,
         lockoutPanel = null,
         loginMessage = null,
+        loginPanelIcon = null,
         modelClass,
         showBrowserContextMenu = false,
         trackAppLoad = true
@@ -191,6 +198,7 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         this.lockoutMessage = lockoutMessage;
         this.lockoutPanel = lockoutPanel;
         this.loginMessage = loginMessage;
+        this.loginPanelIcon = loginPanelIcon;
         this.modelClass = modelClass;
         this.showBrowserContextMenu = showBrowserContextMenu;
         this.trackAppLoad = trackAppLoad;

package/core/HoistAuthModel.ts

@@ -66,8 +66,12 @@ export class HoistAuthModel extends HoistModel {
      * Process a manual login, submitted by user via form.
      * @returns identity of the user authenticated with the server; null if not yet authenticated.
      */
-    async loginWithCredentialsAsync(username: string, password: string): Promise<IdentityInfo> {
-        return this.runner()
+    async loginWithCredentialsAsync(
+        username: string,
+        password: string,
+        ctx?: CallContextLike
+    ): Promise<IdentityInfo> {
+        return this.runner(ctx)
             .span('login')
             .run(async ctx => {
                 const {success, identity} = await XH.fetchJson(
@@ -87,8 +91,8 @@ export class HoistAuthModel extends HoistModel {
      * The default implementation will call the 'logout' endpoint on the Grails server, clearing
      * any server-side session state there. Override to manage any client-side or third-party state.
      */
-    async logoutAsync(): Promise<void> {
-        await this.runner().span('logout').fetchJson({url: 'xh/logout'});
+    async logoutAsync(ctx?: CallContextLike): Promise<void> {
+        await this.runner(ctx).span('logout').fetchJson({url: 'xh/logout'});
     }
 
     /**
@@ -96,9 +100,12 @@ export class HoistAuthModel extends HoistModel {
      * whitelisted by Hoist to allow access prior to user authentication. For use in bootstrapping
      * client-side auth solutions that require configs such as OAuth endpoint URLs and client IDs.
      * See `BaseAuthenticationService.getClientConfig()` in hoist-core.
+     *
+     * @param ctx - tracing/load context. When called from within a `completeAuthAsync` override,
+     *      forward the supplied context so this fetch nests under the bootstrap trace.
      */
-    async loadConfigAsync(): Promise<PlainObject> {
-        return this.runner().span('config').fetchJson({url: 'xh/authConfig'});
+    async loadConfigAsync(ctx?: CallContextLike): Promise<PlainObject> {
+        return this.runner(ctx).span('config').fetchJson({url: 'xh/authConfig'});
     }
 
     /**

package/data/Field.ts

@@ -166,7 +166,9 @@ export function parseFieldValue(
         case 'date':
             return isLocalDate(val) ? val.date : isDate(val) ? val : new Date(val);
         case 'localDate':
-            return isLocalDate(val) ? val : LocalDate.get(val);
+            if (isLocalDate(val)) return val;
+            // `get` parses strict 'YYYYMMDD'/'YYYY-MM-DD' strings; `from` coerces Date/number/moment.
+            return isString(val) ? LocalDate.get(val) : LocalDate.from(val);
     }
 
     throw XH.exception(`Unknown field type '${type}'`);

package/data/filter/BaseFilterFieldSpec.ts

@@ -21,7 +21,12 @@ import {FieldFilterOperator} from './Types';
 export interface BaseFilterFieldSpecConfig {
     /** Identifying field name to filter on. */
     field: string;
-    /** Type of field, will default from related field on source if provided, or 'auto'. */
+    /**
+     * Type of field, will default from related field on source if provided, or 'auto'. A `date`
+     * (timestamp) source defaults to 'localDate' so filtering compares by calendar day (range and
+     * equality operators use full-day bounds). Set explicitly to 'date' to filter by exact
+     * timestamp instead.
+     */
     fieldType?: FieldType;
     /** DisplayName, will default from related field on source if provided */
     displayName?: string;
@@ -77,7 +82,11 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
         this.source = source;
 
         const sourceField = this.sourceField;
-        this.fieldType = fieldType ?? sourceField?.type ?? 'auto';
+        // Default a `date` (timestamp) source to `localDate` so filtering compares by calendar day
+        // rather than against midnight (#3338). Apps wanting exact-timestamp filtering can set
+        // `fieldType: 'date'` explicitly.
+        this.fieldType =
+            fieldType ?? (sourceField?.type === 'date' ? 'localDate' : sourceField?.type) ?? 'auto';
         this.displayName = displayName ?? sourceField?.displayName ?? genDisplayName(field);
         this.ops = this.parseOperators(ops);
         this.forceSelection = forceSelection ?? false;
@@ -183,7 +192,12 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
             : ['>', '>=', '<', '<=', '=', '!='];
     }
 
+    private get isLocalDateFilteringTimestamp(): boolean {
+        return this.fieldType === 'localDate' && this.sourceField?.type === 'date';
+    }
+
     private get isEnumerableByDefault(): boolean {
+        if (this.isLocalDateFilteringTimestamp) return false;
         switch (this.fieldType) {
             case 'int':
             case 'number':

package/data/filter/FieldFilter.ts

@@ -14,6 +14,7 @@ import {
     escapeRegExp,
     first,
     isArray,
+    isEmpty,
     isEqual,
     isNil,
     isString,
@@ -112,9 +113,9 @@ export class FieldFilter extends Filter {
     // Overrides
     //-----------------
     override getTestFn(store?: Store): FilterTestFn {
-        let {field, op, value} = this,
-            regExps;
+        const {field, op, value} = this;
 
+        let storeFieldType: FieldType;
         if (store) {
             const storeField = store.getField(field);
             if (!storeField) {
@@ -127,29 +128,72 @@ export class FieldFilter extends Filter {
                 }
                 return () => true;
             }
+            storeFieldType = storeField.type;
+        }
+
+        const opFn = this.getOpFn(op, value, storeFieldType);
+
+        if (!store) return r => opFn(r[field]);
+
+        return (r: StoreRecord) => {
+            const val = r.get(field);
+            if (opFn(val)) return true;
+
+            // Maximize chances of matching. Always pass adds ...
+            if (r.isAdd) return true;
 
-            const fieldType = storeField.type === 'tags' ? 'string' : storeField.type;
+            // ... and check any differing original value as well
+            const committedVal = r.committedData[field];
+            return committedVal !== val && opFn(committedVal);
+        };
+    }
+
+    private getOpFn(
+        op: FieldFilterOperator,
+        value: any,
+        storeFieldType?: FieldType
+    ): (v: any) => boolean {
+        const RANGE_OPS = FieldFilter.RANGE_LIKE_OPERATORS,
+            ARR_OPS = FieldFilter.ARRAY_OPERATORS;
+
+        // Day-aware filtering for LocalDate value(s) over a timestamp field - compares against
+        // full calendar-day bounds for range and equality operators (#3338).
+        const firstVal = isArray(value) ? value[0] : value;
+        if (
+            storeFieldType === 'date' &&
+            LocalDate.isLocalDate(firstVal) &&
+            (RANGE_OPS.includes(op) || op === '=' || op === '!=')
+        ) {
+            return this.getDayBoundedOpFn(op, value);
+        }
+
+        // Coerce candidate value(s) to the store field's type when filtering against a store.
+        if (storeFieldType) {
+            const fieldType = storeFieldType === 'tags' ? 'string' : storeFieldType;
             value = isArray(value)
                 ? value.map(v => parseFieldValue(v, fieldType))
                 : parseFieldValue(value, fieldType);
         }
-
-        if (FieldFilter.ARRAY_OPERATORS.includes(op)) {
+        if (ARR_OPS.includes(op)) {
             value = castArray(value);
         }
 
-        let opFn: (v: any) => boolean;
+        // Treat null, empty string, and empty array (blank `tags`) alike as "blank".
+        const isBlank = (v: any) => isNil(v) || v === '' || (isArray(v) && isEmpty(v));
+
+        let regExps, opFn: (v: any) => boolean;
         switch (op) {
             case '=':
                 opFn = v => {
-                    if (isNil(v) || v === '') v = null;
-                    return value.some(it => isEqual(v, it));
+                    if (isBlank(v)) v = null;
+                    // A blank filter (empty `value`) matches only blank record values.
+                    return (v == null && isEmpty(value)) || value.some(it => isEqual(v, it));
                 };
                 break;
             case '!=':
                 opFn = v => {
-                    if (isNil(v) || v === '') v = null;
-                    return !value.some(it => isEqual(v, it));
+                    if (isBlank(v)) v = null;
+                    return (v != null || !isEmpty(value)) && !value.some(it => isEqual(v, it));
                 };
                 break;
             case '>':
@@ -197,20 +241,45 @@ export class FieldFilter extends Filter {
             default:
                 throw XH.exception(`Unknown operator: ${op}`);
         }
+        return opFn;
+    }
 
-        if (!store) return r => opFn(r[field]);
+    // Compare a timestamp against full calendar-day bounds `[dayStart, nextDayStart)` so a
+    // LocalDate value filters by date part. Supports range and equality operators (#3338).
+    private getDayBoundedOpFn(
+        op: FieldFilterOperator,
+        value: LocalDate | LocalDate[]
+    ): (v: any) => boolean {
+        const toMillis = (v: any) => (v instanceof Date ? v.getTime() : v);
 
-        return (r: StoreRecord) => {
-            const val = r.get(field);
-            if (opFn(val)) return true;
-
-            // Maximize chances of matching. Always pass adds ...
-            if (r.isAdd) return true;
+        // Equality ops test the date part against any of the candidate day(s).
+        if (op === '=' || op === '!=') {
+            const ranges = castArray(value).map(d => [
+                    d.date.getTime(),
+                    d.nextDay().date.getTime()
+                ]),
+                inAnyDay = (t: number) => ranges.some(([start, next]) => t >= start && t < next);
+            return op === '='
+                ? v => !isNil(v) && inAnyDay(toMillis(v))
+                : v => isNil(v) || !inAnyDay(toMillis(v));
+        }
 
-            // ... and check any differing original value as well
-            const committedVal = r.committedData[field];
-            return committedVal !== val && opFn(committedVal);
-        };
+        // Range ops compare against the bounds of a single day.
+        const day = value as LocalDate,
+            dayStart = day.date.getTime(),
+            nextDayStart = day.nextDay().date.getTime();
+        switch (op) {
+            case '>':
+                return v => !isNil(v) && toMillis(v) >= nextDayStart;
+            case '>=':
+                return v => !isNil(v) && toMillis(v) >= dayStart;
+            case '<':
+                return v => !isNil(v) && toMillis(v) < dayStart;
+            case '<=':
+                return v => !isNil(v) && toMillis(v) < nextDayStart;
+            default:
+                throw XH.exception(`Unsupported calendar-day operator: ${op}`);
+        }
     }
 
     override equals(other: Filter): boolean {

package/desktop/appcontainer/LoginPanel.ts

@@ -24,7 +24,7 @@ export const loginPanel = hoistCmp.factory({
     model: creates(LoginPanelModel),
 
     render({model}) {
-        const {loginMessage} = XH.appSpec,
+        const {loginMessage, loginPanelIcon} = XH.appSpec,
             {loadObserver, warning, isValid, loginInProgress} = model;
 
         const onKeyDown = ev => {
@@ -36,8 +36,8 @@ export const loginPanel = hoistCmp.factory({
             justifyContent: 'center',
             flexDirection: 'column',
             item: panel({
-                title: XH.clientAppName,
-                icon: Icon.login(),
+                title: `Login to ${XH.clientAppName}`,
+                icon: loginPanelIcon ?? Icon.shieldHalved({prefix: 'fas'}),
                 className: 'xh-login',
                 testId: 'xh-login',
                 width: 300,
@@ -47,6 +47,7 @@ export const loginPanel = hoistCmp.factory({
                     form(
                         textInput({
                             bind: 'username',
+                            leftIcon: Icon.user(),
                             placeholder: 'Username',
                             autoComplete: 'username',
                             autoFocus: true,
@@ -57,6 +58,7 @@ export const loginPanel = hoistCmp.factory({
                         }),
                         textInput({
                             bind: 'password',
+                            leftIcon: Icon.lock(),
                             placeholder: 'Password...',
                             autoComplete: 'current-password',
                             type: 'password',

package/desktop/cmp/button/grid/ExpandToLevelButton.ts

@@ -28,7 +28,8 @@ export interface ExpandToLevelButtonProps extends Omit<ButtonProps, 'title'> {
 
 /**
  * A menu button to expand a multi-level grouped or tree grid out to a desired level.
- * Requires {@link GridConfig.levelLabels} to be configured on the bound GridModel.
+ * Requires {@link GridConfig.levelLabels} to be configured on the bound GridModel - the menu offers
+ * one entry per labelled level, so a partial array will limit the available expand-to targets.
  */
 export const [ExpandToLevelButton, expandToLevelButton] =
     hoistCmp.withFactory<ExpandToLevelButtonProps>({
@@ -53,13 +54,11 @@ export const [ExpandToLevelButton, expandToLevelButton] =
             }
 
             // Render a disabled button if requested, if we have a flat grid, or no level labels
-            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
+            const {maxDepth, resolvedLevelLabels} = gridModel;
             if (disabled || !maxDepth || !resolvedLevelLabels) return disabledButton();
 
             const menuItems: MenuItemLike[] = resolvedLevelLabels.map((label, idx) => {
-                const isCurrLevel =
-                    expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
+                const isCurrLevel = gridModel.isCurrentExpandLevel(idx);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : Icon.placeholder(),

package/desktop/cmp/filechooser/FileChooserModel.ts

@@ -96,7 +96,7 @@ export class FileChooserModel extends HoistModel {
     private readonly rejectToastMessage: (rejectedFiles: FileRejection[]) => ReactNode;
     private readonly rejectToastSpec: Partial<ToastSpec>;
 
-    constructor(config: FileChooserConfig) {
+    constructor(config: FileChooserConfig = {}) {
         super();
         makeObservable(this);
 

package/desktop/cmp/grid/editors/NumberEditor.ts

@@ -6,8 +6,8 @@
  */
 import {withDefault} from '@xh/hoist/utils/js';
 import {isNil} from 'lodash';
-import {useCallback, useEffect} from 'react';
-import {CustomCellEditorProps, useGridCellEditor} from '@xh/hoist/kit/ag-grid';
+import {useEffect} from 'react';
+import {CustomCellEditorProps} from '@xh/hoist/kit/ag-grid';
 import {hoistCmp} from '@xh/hoist/core';
 import {numberInput, NumberInputProps} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';
@@ -39,20 +39,19 @@ export const [NumberEditor, numberEditor] = hoistCmp.withFactory<NumberEditorPro
     }
 });
 
-const useNumberGuard = ({onValueChange, eventKey}: CustomCellEditorProps) => {
-    // Needed (strangely) by agGrid to trigger call of isCancelBeforeStart
-    useEffect(() => {
-        if (eventKey?.length === 1) onValueChange(eventKey);
-    }, [eventKey, onValueChange]);
-
-    // Gets called before editor component is rendered, to give agGrid a chance to
-    // cancel the editing before it even starts if char is not a number.
-    const isCancelBeforeStart = useCallback(
-        () => eventKey?.length === 1 && '1234567890'.indexOf(eventKey) < 0,
-        [eventKey]
-    );
+// Characters that can validly begin a numeric entry - digits, sign, and decimal point.
+const NUMBER_START_RE = /[0-9.+-]/;
 
-    useGridCellEditor({
-        isCancelBeforeStart
-    });
+const useNumberGuard = ({onValueChange, eventKey, stopEditing}: CustomCellEditorProps) => {
+    // When editing is started by typing a printable character, seed the editor with it if it can
+    // legally begin a number (digit, `-`, `+`, or `.`), otherwise stop editing to reject the
+    // keystroke - reverting to the original value, as the editor was never seeded.
+    useEffect(() => {
+        if (eventKey?.length !== 1) return;
+        if (NUMBER_START_RE.test(eventKey)) {
+            onValueChange(eventKey);
+        } else {
+            stopEditing(true);
+        }
+    }, [eventKey, onValueChange, stopEditing]);
 };

package/desktop/cmp/grid/editors/SelectEditor.ts

@@ -30,16 +30,21 @@ export const [SelectEditor, selectEditor] = hoistCmp.withFactory<SelectEditorPro
                 onCommit: flushOnCommit
                     ? () => wait().then(() => props.agParams.stopEditing())
                     : null,
-                rsOptions: {
-                    styles: {
-                        menu: styles => ({
-                            ...styles,
-                            whiteSpace: 'nowrap',
-                            width: 'auto',
-                            minWidth: '100%'
-                        })
-                    }
-                },
+                // Auto-size the menu to content, not the narrow cell - but skip when width is already
+                // set, via windowed measurement (#4325) or an explicit `menuWidth` (#4057).
+                rsOptions:
+                    props.inputProps?.enableWindowed || props.inputProps?.menuWidth != null
+                        ? {}
+                        : {
+                              styles: {
+                                  menu: styles => ({
+                                      ...styles,
+                                      whiteSpace: 'nowrap',
+                                      width: 'auto',
+                                      minWidth: '100%'
+                                  })
+                              }
+                          },
                 ...props.inputProps
             }
         };