@xh/hoist 80.0.0-SNAPSHOT.1768323341476 → 80.0.0-SNAPSHOT.1768360784265

package/cmp/form/field/BaseFieldModel.ts

@@ -5,12 +5,19 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {HoistModel, managed, TaskObserver} from '@xh/hoist/core';
-import {genDisplayName, required, Rule, RuleLike, ValidationState} from '@xh/hoist/data';
+import {
+    genDisplayName,
+    required,
+    Rule,
+    RuleLike,
+    ValidationResult,
+    ValidationState
+} from '@xh/hoist/data';
 import {action, bindable, computed, makeObservable, observable, runInAction} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
 import {executeIfFunction, withDefault} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {compact, flatten, isEmpty, isEqual, isFunction, isNil} from 'lodash';
+import {compact, flatten, isEmpty, isEqual, isFunction, isNil, isString} from 'lodash';
 import {FormModel} from '../FormModel';
 
 export interface BaseFieldConfig {
@@ -91,11 +98,11 @@ export abstract class BaseFieldModel extends HoistModel {
 
     boundInputRef = createObservableRef();
 
-    // An array with the result of evaluating each rule.  Each element will be array of strings
-    // containing any validation errors for the rule.  If validation for the rule has not
-    // completed will contain null
+    // An array with the result of evaluating each rule. Each element will be an array of
+    // ValidationResults for the rule. If validation for the rule has not completed will contain
+    // null.
     @observable
-    private _errors: string[][];
+    private validationResultsInternal: ValidationResult[][];
 
     @managed
     private validationTask = TaskObserver.trackLast();
@@ -118,7 +125,7 @@ export abstract class BaseFieldModel extends HoistModel {
         this._disabled = disabled;
         this._readonly = readonly;
         this.rules = this.processRuleSpecs(rules);
-        this._errors = this.rules.map(() => null);
+        this.validationResultsInternal = this.rules.map(() => null);
     }
 
     //-----------------------------
@@ -175,12 +182,25 @@ export abstract class BaseFieldModel extends HoistModel {
     /** All validation errors for this field. */
     @computed
     get errors(): string[] {
-        return compact(flatten(this._errors));
+        return this.validationResults.filter(it => it.severity === 'error').map(it => it.message);
+    }
+
+    /** All ValidationResults for this field. */
+    @computed
+    get validationResults(): ValidationResult[] {
+        return compact(flatten(this.validationResultsInternal));
     }
 
     /** All validation errors for this field and its sub-forms. */
     get allErrors(): string[] {
-        return this.errors;
+        return this.allValidationResults
+            .filter(it => it.severity === 'error')
+            .map(it => it.message);
+    }
+
+    /** All ValidationResults for this field and its sub-forms. */
+    get allValidationResults(): ValidationResult[] {
+        return this.validationResults;
     }
 
     /**
@@ -202,7 +222,7 @@ export abstract class BaseFieldModel extends HoistModel {
 
         // Force an immediate 'Unknown' state -- the async recompute leaves the old state in place until it completed.
         // (We want that for a value change, but not reset/init)  Force the recompute only if needed.
-        this._errors.fill(null);
+        this.validationResultsInternal.fill(null);
         wait().then(() => {
             if (!this.isValidationPending && this.validationState === 'Unknown') {
                 this.computeValidationAsync();
@@ -300,7 +320,7 @@ export abstract class BaseFieldModel extends HoistModel {
     }
 
     /**
-     * Recompute all validations and return true if the field is valid.
+     * Recompute all ValidationResults and return true if the field is valid.
      *
      * @param display - true to trigger the display of validation errors (if any)
      *      by the bound FormField component after validation is complete.
@@ -339,13 +359,13 @@ export abstract class BaseFieldModel extends HoistModel {
         const promises = this.rules.map(async (rule, idx) => {
             const result = await this.evaluateRuleAsync(rule);
             if (runId === this.validationRunId) {
-                runInAction(() => (this._errors[idx] = result));
+                runInAction(() => (this.validationResultsInternal[idx] = result));
             }
         });
         await Promise.all(promises);
     }
 
-    private async evaluateRuleAsync(rule): Promise<string[]> {
+    private async evaluateRuleAsync(rule: Rule): Promise<ValidationResult[]> {
         if (this.ruleIsActive(rule)) {
             const promises = rule.check.map(async constraint => {
                 const {value, name, displayName} = this,
@@ -355,7 +375,9 @@ export abstract class BaseFieldModel extends HoistModel {
             });
 
             const ret = await Promise.all(promises);
-            return compact(flatten(ret));
+            return compact(flatten(ret)).map(issue =>
+                isString(issue) ? {message: issue, severity: 'error'} : issue
+            );
         }
         return [];
     }
@@ -367,10 +389,8 @@ export abstract class BaseFieldModel extends HoistModel {
     }
 
     protected deriveValidationState(): ValidationState {
-        const {_errors} = this;
-
-        if (_errors.some(e => !isEmpty(e))) return 'NotValid';
-        if (_errors.some(e => isNil(e))) return 'Unknown';
+        if (!isEmpty(this.errors)) return 'NotValid';
+        if (this.validationResultsInternal.some(e => isNil(e))) return 'Unknown';
         return 'Valid';
     }
 }

package/cmp/form/field/SubformsFieldModel.ts

@@ -5,7 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {managed, PlainObject, XH} from '@xh/hoist/core';
-import {ValidationState} from '@xh/hoist/data';
+import {ValidationResult, ValidationState} from '@xh/hoist/data';
 import {action, computed, makeObservable, override} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
 import {clone, defaults, isEqual, flatMap, isArray, partition, without} from 'lodash';
@@ -47,7 +47,7 @@ export interface SubformAddOptions {
  * all existing form contents to new values. Call {@link add} or {@link remove} on one of these
  * fields to adjust the contents of its collection while preserving existing state.
  *
- * Validation rules for the entire collection may be specified as for any field, but validations on
+ * Validation rules for the entire collection may be specified as for any field, but ValidationResults on
  * the subforms will also bubble up to this field, affecting its overall validation state.
  */
 export class SubformsFieldModel extends BaseFieldModel {
@@ -114,9 +114,9 @@ export class SubformsFieldModel extends BaseFieldModel {
     }
 
     @computed
-    override get allErrors(): string[] {
-        const subErrs = flatMap(this.value, s => s.allErrors);
-        return [...this.errors, ...subErrs];
+    override get allValidationResults(): ValidationResult[] {
+        const subVals = flatMap(this.value, s => s.allValidations);
+        return [...this.validationResults, ...subVals];
     }
 
     @override

package/cmp/grid/Grid.scss

@@ -104,16 +104,16 @@
     padding-right: 0;
   }
 
-  // Render badge on invalid cells
-  .ag-cell.xh-cell--invalid {
+  // Render badge on cells with validation issues
+  .ag-cell.xh-cell--invalid,
+  .ag-cell.xh-cell--warning,
+  .ag-cell.xh-cell--info {
     &::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       border-color: transparent;
-      border-right-color: var(--xh-intent-danger);
-      border-top-color: var(--xh-intent-danger);
       border-style: solid;
     }
 
@@ -125,6 +125,21 @@
     }
   }
 
+  .ag-cell.xh-cell--invalid::before {
+    border-right-color: var(--xh-intent-danger);
+    border-top-color: var(--xh-intent-danger);
+  }
+
+  .ag-cell.xh-cell--warning::before {
+    border-right-color: var(--xh-intent-warning);
+    border-top-color: var(--xh-intent-warning);
+  }
+
+  .ag-cell.xh-cell--info::before {
+    border-right-color: var(--xh-intent-primary);
+    border-top-color: var(--xh-intent-primary);
+  }
+
   // Render left / right group borders
   .ag-cell.xh-cell--group-border-left {
     @include AgGrid.group-border(left);
@@ -136,25 +151,33 @@
 
   .xh-ag-grid {
     &--tiny {
-      .ag-cell.xh-cell--invalid::before {
+      .ag-cell.xh-cell--invalid::before,
+      .ag-cell.xh-cell--warning::before,
+      .ag-cell.xh-cell--info::before {
         border-width: 3px;
       }
     }
 
     &--compact {
-      .ag-cell.xh-cell--invalid::before {
+      .ag-cell.xh-cell--invalid::before,
+      .ag-cell.xh-cell--warning::before,
+      .ag-cell.xh-cell--info::before {
         border-width: 4px;
       }
     }
 
     &--standard {
-      .ag-cell.xh-cell--invalid::before {
+      .ag-cell.xh-cell--invalid::before,
+      .ag-cell.xh-cell--warning::before,
+      .ag-cell.xh-cell--info::before {
         border-width: 5px;
       }
     }
 
     &--large {
-      .ag-cell.xh-cell--invalid::before {
+      .ag-cell.xh-cell--invalid::before,
+      .ag-cell.xh-cell--warning::before,
+      .ag-cell.xh-cell--info::before {
         border-width: 6px;
       }
     }

package/cmp/grid/columns/Column.ts

@@ -10,9 +10,12 @@ import {
     CubeFieldSpec,
     FieldSpec,
     genDisplayName,
+    maxSeverity,
     RecordAction,
     RecordActionSpec,
-    StoreRecord
+    StoreRecord,
+    ValidationResult,
+    ValidationSeverity
 } from '@xh/hoist/data';
 import {logDebug, logWarn, throwIf, warnIf, withDefault} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
@@ -21,6 +24,7 @@ import {
     clone,
     find,
     get,
+    groupBy,
     isArray,
     isEmpty,
     isFinite,
@@ -867,20 +871,28 @@ export class Column {
                 if (location === 'header') return div({ref: wrapperRef, item: this.headerTooltip});
                 if (!hasRecord) return null;
 
-                // Override with validation errors, if present
+                // Override with validation errors, if present -- only show highest-severity level
                 if (editor) {
-                    const errors = record.errors[field];
-                    if (!isEmpty(errors)) {
+                    const validationsBySeverity = groupBy(
+                            record.validationResults[field],
+                            'severity'
+                        ) as Record<ValidationSeverity, ValidationResult[]>,
+                        validationMessages = (
+                            validationsBySeverity.error ??
+                            validationsBySeverity.warning ??
+                            validationsBySeverity.info
+                        )?.map(v => v.message);
+                    if (!isEmpty(validationMessages)) {
                         return div({
                             ref: wrapperRef,
                             item: ul({
                                 className: classNames(
                                     'xh-grid-tooltip--validation',
-                                    errors.length === 1
+                                    validationMessages.length === 1
                                         ? 'xh-grid-tooltip--validation--single'
                                         : null
                                 ),
-                                items: errors.map((it, idx) => li({key: idx, item: it}))
+                                items: validationMessages.map((it, idx) => li({key: idx, item: it}))
                             })
                         });
                     }
@@ -1007,10 +1019,12 @@ export class Column {
             });
             ret.cellEditorPopup = this.editorIsPopup;
             ret.cellClassRules = {
-                'xh-cell--invalid': agParams => {
-                    const record = agParams.data;
-                    return record && !isEmpty(record.errors[field]);
-                },
+                'xh-cell--invalid': agParams =>
+                    maxSeverity(agParams.data.validationResults[field]) === 'error',
+                'xh-cell--warning': agParams =>
+                    maxSeverity(agParams.data.validationResults[field]) === 'warning',
+                'xh-cell--info': agParams =>
+                    maxSeverity(agParams.data.validationResults[field]) === 'info',
                 'xh-cell--editable': agParams => {
                     return this.isEditableForRecord(agParams.data);
                 },

package/cmp/input/HoistInput.scss

@@ -6,9 +6,27 @@
  */
 
 .xh-input {
-  &.xh-input-invalid {
+  // Override browser user agent styles on input elements.
+  input {
+    font-family: var(--xh-input-font-family);
+    font-feature-settings: var(--xh-input-font-feature-settings);
+  }
+
+  &.xh-input--invalid {
     input {
       border: var(--xh-form-field-invalid-border);
     }
   }
+
+  &.xh-input--warning {
+    input {
+      border: var(--xh-form-field-warning-border);
+    }
+  }
+
+  &.xh-input--info {
+    input {
+      border: var(--xh-form-field-info-border);
+    }
+  }
 }

package/cmp/input/HoistInputModel.ts

@@ -6,6 +6,7 @@
  */
 import {FieldModel} from '@xh/hoist/cmp/form';
 import {DefaultHoistProps, HoistModel, HoistModelClass, useLocalModel} from '@xh/hoist/core';
+import {maxSeverity} from '@xh/hoist/data';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {createObservableRef} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
@@ -336,13 +337,20 @@ export function useHoistInputModel(
     useImperativeHandle(ref, () => inputModel);
 
     const field = inputModel.getField(),
-        validityClass = field?.isNotValid && field?.validationDisplayed ? 'xh-input-invalid' : null,
+        severityToDisplay = field?.validationDisplayed && maxSeverity(field?.validationResults),
+        displayInvalid = severityToDisplay === 'error',
         disabledClass = props.disabled ? 'xh-input-disabled' : null;
 
     return component({
         ...props,
         model: inputModel,
         ref: inputModel.domRef,
-        className: classNames('xh-input', validityClass, disabledClass, props.className)
+        className: classNames(
+            'xh-input',
+            severityToDisplay && `xh-input--${severityToDisplay}`,
+            displayInvalid && 'xh-input--invalid',
+            disabledClass,
+            props.className
+        )
     });
 }

package/data/Field.ts

@@ -6,9 +6,10 @@
  */
 
 import {XH} from '@xh/hoist/core';
+import {RuleLike} from '@xh/hoist/data/validation/Types';
 import {isLocalDate, LocalDate} from '@xh/hoist/utils/datetime';
 import {withDefault} from '@xh/hoist/utils/js';
-import {Rule, RuleLike} from './validation/Rule';
+import {Rule} from './validation/Rule';
 import equal from 'fast-deep-equal';
 import {isDate, isString, toNumber, isFinite, startCase, isFunction, castArray} from 'lodash';
 import DOMPurify from 'dompurify';

package/data/Store.ts

@@ -16,8 +16,12 @@ import {
     parseFilter,
     StoreRecord,
     StoreRecordId,
-    StoreRecordOrId
+    StoreRecordOrId,
+    StoreValidationMessagesMap,
+    StoreValidationResultsMap,
+    ValidationResult
 } from '@xh/hoist/data';
+import {StoreValidator} from '@xh/hoist/data/impl/StoreValidator';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {logWithDebug, throwIf, warnIf} from '@xh/hoist/utils/js';
 import equal from 'fast-deep-equal';
@@ -41,7 +45,6 @@ import {
 } from 'lodash';
 import {instanceManager} from '../core/impl/InstanceManager';
 import {RecordSet} from './impl/RecordSet';
-import {StoreErrorMap, StoreValidator} from './impl/StoreValidator';
 
 export interface StoreConfig {
     /** Field names, configs, or instances. */
@@ -893,10 +896,14 @@ export class Store extends HoistBase implements FilterBindTarget, FilterValueSou
         return this._current.maxDepth; // maxDepth should not be effected by filtering.
     }
 
-    get errors(): StoreErrorMap {
+    get errors(): StoreValidationMessagesMap {
         return this.validator.errors;
     }
 
+    get validationResults(): StoreValidationResultsMap {
+        return this.validator.validationResults;
+    }
+
     /** Count of all validation errors for the store. */
     get errorCount(): number {
         return this.validator.errorCount;
@@ -907,6 +914,11 @@ export class Store extends HoistBase implements FilterBindTarget, FilterValueSou
         return uniq(flatMapDeep(this.errors, values));
     }
 
+    /** Array of all ValidationResults for this store. */
+    get allValidationResults(): ValidationResult[] {
+        return uniq(flatMapDeep(this.validationResults, values));
+    }
+
     /**
      * Get a record by ID, or null if no matching record found.
      *
@@ -979,7 +991,7 @@ export class Store extends HoistBase implements FilterBindTarget, FilterValueSou
         return this.validator.isNotValid;
     }
 
-    /** Recompute validations for all records and return true if the store is valid. */
+    /** Recompute ValidationResults for all records and return true if the store is valid. */
     async validateAsync(): Promise<boolean> {
         return this.validator.validateAsync();
     }

package/data/StoreRecord.ts

@@ -5,6 +5,7 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {PlainObject} from '@xh/hoist/core';
+import {ValidationResult} from '@xh/hoist/data/validation/Types';
 import {throwIf} from '@xh/hoist/utils/js';
 import {isNil, flatMap, isMatch, isEmpty, pickBy} from 'lodash';
 import {Store} from './Store';
@@ -153,11 +154,21 @@ export class StoreRecord {
         return this.validator?.errors ?? {};
     }
 
+    /** Map of field names to list of ValidationResults. */
+    get validationResults(): Record<string, ValidationResult[]> {
+        return this.validator?.validationResults ?? {};
+    }
+
     /** Array of all errors for this record. */
     get allErrors() {
         return flatMap(this.errors);
     }
 
+    /** Array of all ValidationResults for this record. */
+    get allValidationResults(): ValidationResult[] {
+        return flatMap(this.validationResults);
+    }
+
     /** Count of all validation errors for the record. */
     get errorCount(): number {
         return this.validator?.errorCount ?? 0;

package/data/impl/RecordValidator.ts

@@ -4,9 +4,18 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {Field, Rule, StoreRecord, StoreRecordId, ValidationState} from '@xh/hoist/data';
+import {
+    Field,
+    RecordValidationMessagesMap,
+    RecordValidationResultsMap,
+    Rule,
+    StoreRecord,
+    StoreRecordId,
+    ValidationResult,
+    ValidationState
+} from '@xh/hoist/data';
 import {computed, observable, makeObservable, runInAction} from '@xh/hoist/mobx';
-import {compact, flatten, isEmpty, mapValues, values} from 'lodash';
+import {compact, flatten, isEmpty, isString, mapValues, values} from 'lodash';
 import {TaskObserver} from '../../core';
 
 /**
@@ -16,9 +25,9 @@ import {TaskObserver} from '../../core';
 export class RecordValidator {
     record: StoreRecord;
 
-    @observable.ref _fieldErrors: RecordErrorMap = null;
-    _validationTask = TaskObserver.trackLast();
-    _validationRunId = 0;
+    @observable.ref private fieldValidations: RecordValidationResultsMap = null;
+    private validationTask = TaskObserver.trackLast();
+    private validationRunId = 0;
 
     get id(): StoreRecordId {
         return this.record.id;
@@ -44,20 +53,28 @@ export class RecordValidator {
 
     /** Map of field names to field-level errors. */
     @computed.struct
-    get errors(): RecordErrorMap {
-        return this._fieldErrors ?? {};
+    get errors(): RecordValidationMessagesMap {
+        return mapValues(this.fieldValidations ?? {}, issues =>
+            compact(issues.map(it => (it?.severity === 'error' ? it.message : null)))
+        );
+    }
+
+    /** Map of field names to field-level ValidationResults. */
+    @computed.struct
+    get validationResults(): RecordValidationResultsMap {
+        return this.fieldValidations ?? {};
     }
 
     /** Count of all validation errors for the record. */
     @computed
     get errorCount(): number {
-        return flatten(values(this._fieldErrors)).length;
+        return flatten(values(this.errors)).length;
     }
 
     /** True if any fields are currently recomputing their validation state. */
     @computed
     get isPending(): boolean {
-        return this._validationTask.isPending;
+        return this.validationTask.isPending;
     }
 
     private _validators = [];
@@ -68,41 +85,43 @@ export class RecordValidator {
     }
 
     /**
-     * Recompute validations for the record and return true if valid.
+     * Recompute ValidationResults for the record and return true if valid.
      */
     async validateAsync(): Promise<boolean> {
-        let runId = ++this._validationRunId,
-            fieldErrors = {},
+        let runId = ++this.validationRunId,
+            fieldValidations = {},
             {record} = this,
             fieldsToValidate = record.store.fields.filter(it => !isEmpty(it.rules));
 
         const promises = fieldsToValidate.flatMap(field => {
-            fieldErrors[field.name] = [];
+            fieldValidations[field.name] = [];
             return field.rules.map(async rule => {
                 const result = await this.evaluateRuleAsync(record, field, rule);
-                fieldErrors[field.name].push(result);
+                fieldValidations[field.name].push(result);
             });
         });
-        await Promise.all(promises).linkTo(this._validationTask);
+        await Promise.all(promises).linkTo(this.validationTask);
 
-        if (runId !== this._validationRunId) return;
-        fieldErrors = mapValues(fieldErrors, it => compact(flatten(it)));
+        if (runId !== this.validationRunId) return;
+        fieldValidations = mapValues(fieldValidations, it => compact(flatten(it)));
 
-        runInAction(() => (this._fieldErrors = fieldErrors));
+        runInAction(() => (this.fieldValidations = fieldValidations));
 
         return this.isValid;
     }
 
     /** The current validation state for the record. */
     getValidationState(): ValidationState {
-        const {_fieldErrors} = this;
-
-        if (_fieldErrors === null) return 'Unknown'; // Before executing any rules
-
-        return values(_fieldErrors).some(errors => !isEmpty(errors)) ? 'NotValid' : 'Valid';
+        if (this.fieldValidations === null) return 'Unknown'; // Before executing any rules
+        if (this.errorCount) return 'NotValid';
+        return 'Valid';
     }
 
-    async evaluateRuleAsync(record: StoreRecord, field: Field, rule: Rule): Promise<string[]> {
+    async evaluateRuleAsync(
+        record: StoreRecord,
+        field: Field,
+        rule: Rule
+    ): Promise<ValidationResult[]> {
         const values = record.getValues(),
             {name, displayName} = field,
             value = record.get(name);
@@ -114,7 +133,9 @@ export class RecordValidator {
             });
 
             const ret = await Promise.all(promises);
-            return compact(flatten(ret));
+            return compact(flatten(ret)).map(issue =>
+                isString(issue) ? {message: issue, severity: 'error'} : issue
+            );
         }
     }
 
@@ -123,6 +144,3 @@ export class RecordValidator {
         return !when || when(field, record.getValues());
     }
 }
-
-/** Map of Field names to Field-level error lists. */
-export type RecordErrorMap = Record<string, string[]>;