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

package/data/impl/StoreValidator.ts

@@ -6,11 +6,15 @@
  */
 
 import {HoistBase} from '@xh/hoist/core';
+import {
+    StoreValidationMessagesMap,
+    StoreValidationResultsMap,
+    ValidationState
+} from '@xh/hoist/data';
 import {computed, makeObservable, runInAction, observable} from '@xh/hoist/mobx';
 import {sumBy, chunk} from 'lodash';
 import {findIn} from '@xh/hoist/utils/js';
-import {RecordErrorMap, RecordValidator} from './RecordValidator';
-import {ValidationState} from '../validation/ValidationState';
+import {RecordValidator} from './RecordValidator';
 import {Store} from '../Store';
 import {StoreRecordId} from '../StoreRecord';
 
@@ -41,7 +45,7 @@ export class StoreValidator extends HoistBase {
 
     /** Map of StoreRecord IDs to StoreRecord-level error maps. */
     @computed.struct
-    get errors(): StoreErrorMap {
+    get errors(): StoreValidationMessagesMap {
         return this.getErrorMap();
     }
 
@@ -51,6 +55,12 @@ export class StoreValidator extends HoistBase {
         return sumBy(this.validators, 'errorCount');
     }
 
+    /** Map of StoreRecord IDs to StoreRecord-level ValidationResults maps. */
+    @computed.struct
+    get validationResults(): StoreValidationResultsMap {
+        return this.getValidationResultsMap();
+    }
+
     /** True if any records are currently recomputing their validation state. */
     @computed
     get isPending() {
@@ -76,7 +86,7 @@ export class StoreValidator extends HoistBase {
     }
 
     /**
-     * Recompute validations for the store and return true if valid.
+     * Recompute ValidationResults for the store and return true if valid.
      */
     async validateAsync(): Promise<boolean> {
         await this.validateInChunksAsync(this.validators);
@@ -92,12 +102,18 @@ export class StoreValidator extends HoistBase {
     }
 
     /** @returns map of StoreRecord IDs to StoreRecord-level error maps. */
-    getErrorMap(): StoreErrorMap {
-        const ret = {};
+    getErrorMap(): StoreValidationMessagesMap {
+        const ret: StoreValidationMessagesMap = {};
         this._validators.forEach(v => (ret[v.id] = v.errors));
         return ret;
     }
 
+    getValidationResultsMap(): StoreValidationResultsMap {
+        const ret: StoreValidationResultsMap = {};
+        this._validators.forEach(v => (ret[v.id] = v.validationResults));
+        return ret;
+    }
+
     /**
      * @param id - ID of RecordValidator (should match record.id)
      */
@@ -155,6 +171,3 @@ export class StoreValidator extends HoistBase {
         return Array.from(this._validators.values(), fn);
     }
 }
-
-/** Map of StoreRecord IDs to StoreRecord-level error maps. */
-export type StoreErrorMap = Record<StoreRecordId, RecordErrorMap>;

package/data/index.ts

@@ -42,3 +42,4 @@ export * from './cube/ViewRowData';
 export * from './validation/constraints';
 export * from './validation/Rule';
 export * from './validation/ValidationState';
+export * from './validation/Types';

package/data/validation/Rule.ts

@@ -4,10 +4,8 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {Awaitable, PlainObject, Some} from '../../core';
-import {castArray} from 'lodash';
-import {StoreRecord} from '../StoreRecord';
-import {BaseFieldModel} from '../../cmp/form';
+import {Constraint, RuleSpec, ValidationResult, ValidationSeverity, When} from '@xh/hoist/data';
+import {castArray, groupBy, isEmpty} from 'lodash';
 
 /**
  * Immutable object representing a validation rule.
@@ -23,54 +21,16 @@ export class Rule {
 }
 
 /**
- * Function to validate a value.
+ * Utility to determine the maximum severity from a list of ValidationResults.
  *
- * @param fieldState - context w/value for the constraint's target Field.
- * @param allValues - current values for all fields in form, keyed by field name.
- * @returns String(s) or array of strings describing errors, or null or undefined if rule passes
- * successfully. May return a Promise of strings for async validation.
+ * @param validationResults - list of ValidationResults to evaluate.
+ * @returns The highest severity level found, or null if none.
  */
-export type Constraint<T = any> = (
-    fieldState: FieldState<T>,
-    allValues: PlainObject
-) => Awaitable<Some<string>>;
-
-/**
- * Function to determine when to perform validation on a value.
- *
- * @param entity - the entity being evaluated.  Typically a field for store validation or
- *      a BaseFieldModel for Form validation.
- * @param allValues - current values for all fields in form or record, keyed by field name.
- * @returns true if this rule is currently active.
- */
-export type When = (entity: any, allValues: PlainObject) => boolean;
-
-export interface FieldState<T = any> {
-    /** Current value of the field */
-    value: T;
-
-    /** Name of the field */
-    name: string;
-
-    /** Display name of the field */
-    displayName: string;
-
-    /** Record being validated, if validating Store data. */
-    record?: StoreRecord;
-
-    /** FieldModel being validated, if validating Form data. */
-    fieldModel?: BaseFieldModel;
-}
-
-export interface RuleSpec {
-    /** Function(s) to perform validation. */
-    check: Some<Constraint>;
-
-    /**
-     *  Function to determine when this rule is active.
-     *  If not specified rule is considered to be always active.
-     */
-    when?: When;
+export function maxSeverity(validationResults: ValidationResult[]): ValidationSeverity {
+    if (isEmpty(validationResults)) return null;
+    const bySeverity = groupBy(validationResults, 'severity');
+    if ('error' in bySeverity) return 'error';
+    if ('warning' in bySeverity) return 'warning';
+    if ('info' in bySeverity) return 'info';
+    return null;
 }
-
-export type RuleLike = RuleSpec | Constraint | Rule;

package/data/validation/Types.ts

@@ -0,0 +1,81 @@
+/*
+ * 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 type {BaseFieldModel} from '@xh/hoist/cmp/form';
+import type {Awaitable, PlainObject, Some} from '@xh/hoist/core';
+import type {Rule, StoreRecord, StoreRecordId} from '@xh/hoist/data';
+
+/**
+ * Function to validate a value.
+ *
+ * @param fieldState - context w/value for the constraint's target Field.
+ * @param allValues - current values for all fields in form, keyed by field name.
+ * @returns ValidationResult(s) or string(s) describing errors or null / undefined if rule passes.
+ * May return a Promise resolving to the same for async validation.
+ */
+export type Constraint<T = any> = (
+    fieldState: FieldState<T>,
+    allValues: PlainObject
+) => Awaitable<Some<string | ValidationResult>>;
+
+/**
+ * Function to determine when to perform validation on a value.
+ *
+ * @param entity - the entity being evaluated.  Typically a field for store validation or
+ *      a BaseFieldModel for Form validation.
+ * @param allValues - current values for all fields in form or record, keyed by field name.
+ * @returns true if this rule is currently active.
+ */
+export type When = (entity: any, allValues: PlainObject) => boolean;
+
+export interface FieldState<T = any> {
+    /** Current value of the field */
+    value: T;
+
+    /** Name of the field */
+    name: string;
+
+    /** Display name of the field */
+    displayName: string;
+
+    /** Record being validated, if validating Store data. */
+    record?: StoreRecord;
+
+    /** FieldModel being validated, if validating Form data. */
+    fieldModel?: BaseFieldModel;
+}
+
+export interface RuleSpec {
+    /** Function(s) to perform validation. */
+    check: Some<Constraint>;
+
+    /**
+     *  Function to determine when this rule is active.
+     *  If not specified rule is considered to be always active.
+     */
+    when?: When;
+}
+
+export type RuleLike = RuleSpec | Constraint | Rule;
+
+export interface ValidationResult {
+    severity: ValidationSeverity;
+    message: string;
+}
+
+export type ValidationSeverity = 'error' | 'warning' | 'info';
+
+/** Map of StoreRecord IDs to StoreRecord-level messages maps. */
+export type StoreValidationMessagesMap = Record<StoreRecordId, RecordValidationMessagesMap>;
+
+/** Map of StoreRecord IDs to StoreRecord-level ValidationResults maps. */
+export type StoreValidationResultsMap = Record<StoreRecordId, RecordValidationResultsMap>;
+
+/** Map of Field names to Field-level Validation lists. */
+export type RecordValidationResultsMap = Record<string, ValidationResult[]>;
+
+/** Map of Field names to Field-level validation message lists. */
+export type RecordValidationMessagesMap = Record<string, string[]>;

package/data/validation/constraints.ts

@@ -4,11 +4,12 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import {Constraint} from '@xh/hoist/data';
 import {LocalDate} from '@xh/hoist/utils/datetime';
 import {pluralize} from '@xh/hoist/utils/js';
 import {isArray, isEmpty, isFinite, isNil, isString, uniq} from 'lodash';
 import moment from 'moment';
-import {Constraint} from './Rule';
+
 /**
  * A set of validation functions to assist in form field validation.
  */

package/desktop/appcontainer/OptionsDialog.scss

@@ -8,7 +8,7 @@
 .xh-options-dialog {
   width: 500px;
 
-  .xh-form-field-label {
+  .xh-form-field__label {
     min-width: 120px !important;
   }
 }

package/desktop/cmp/form/FormField.scss

@@ -8,14 +8,39 @@
 .xh-form-field {
   display: flex;
   flex-direction: column;
-  padding: 3px;
-  margin: 0 0 var(--xh-pad-px);
+  padding: var(--xh-form-field-padding);
+  margin: var(--xh-form-field-margin);
+
+  &__label {
+    // Common label attrs
+    color: var(--xh-form-field-label-color);
+    font-size: var(--xh-form-field-label-font-size);
+    font-style: var(--xh-form-field-label-font-style);
+    font-weight: var(--xh-form-field-label-font-weight);
+    text-transform: var(--xh-form-field-label-text-transform);
+
+    // Borders + padding - editable, not inline - the default case.
+    border-bottom: var(--xh-form-field-label-border-bottom);
+    margin: var(--xh-form-field-label-margin);
+    padding: var(--xh-form-field-label-padding);
+
+    // Borders + padding - readonly, not inline - commonly used to add bottom border when using
+    // forms as a kind of detail view, as readonly fields often lack other visual boundaries.
+    .xh-form-field--readonly:not(.xh-form-field--inline) & {
+      border-bottom: var(--xh-form-field-readonly-label-border-bottom);
+      margin: var(--xh-form-field-readonly-label-margin);
+      padding: var(--xh-form-field-readonly-label-padding);
+    }
 
-  .xh-form-field-label {
-    padding: 0 0 3px;
+    // Borders + padding - inline, both editable and readonly.
+    .xh-form-field--inline & {
+      border-bottom: var(--xh-form-field-inline-label-border-bottom);
+      margin: var(--xh-form-field-inline-label-margin);
+      padding: var(--xh-form-field-inline-label-padding);
+    }
   }
 
-  .xh-form-field-inner {
+  &__inner {
     // Used for unsizeable children
     &--block {
       display: block;
@@ -45,63 +70,72 @@
         flex: 1;
       }
     }
-  }
 
-  .xh-form-field-info,
-  .xh-form-field-error-msg {
-    font-size: var(--xh-font-size-small-px);
-    line-height: calc(var(--xh-font-size-small-px) + var(--xh-pad-px));
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
+    &__info-msg,
+    &__validation-msg {
+      font-size: var(--xh-form-field-msg-font-size);
+      line-height: var(--xh-form-field-msg-line-height);
+      margin: var(--xh-form-field-msg-margin);
+      text-transform: var(--xh-form-field-msg-text-transform);
+    }
+
+    &__validation-msg {
+      &--error {
+        color: var(--xh-form-field-invalid-color);
+      }
+
+      &--info {
+        color: var(--xh-form-field-info-color);
+      }
 
-  .xh-form-field-error-msg {
-    color: var(--xh-red);
+      &--warning {
+        color: var(--xh-form-field-warning-color);
+      }
+    }
   }
 
-  &.xh-form-field-inline {
+  &--inline {
     flex-direction: row;
     align-items: baseline;
 
-    &.xh-form-field-json-input {
+    &.xh-form-field--json-input {
       align-items: start;
     }
 
-    .xh-form-field-label {
+    .xh-form-field__label {
       padding: 0 var(--xh-pad-half-px) 0 0;
     }
   }
 
-  &.xh-form-field-readonly {
-    &.xh-form-field-json-input {
-      .xh-form-field-inner {
-        &--flex {
-          border: var(--xh-border-solid);
-          padding: var(--xh-pad-half-px);
-          background-color: var(--xh-input-disabled-bg);
-          font-family: var(--xh-font-family-mono);
-        }
-      }
-    }
-
-    .xh-form-field-error-msg {
+  &--readonly {
+    .xh-form-field__validation-msg {
       display: none;
     }
 
-    .xh-form-field-inner {
-      &--flex {
-        overflow-y: auto;
-      }
+    .xh-form-field__inner--flex {
+      overflow-y: auto;
     }
 
-    .xh-form-field-readonly-display {
+    .xh-form-field__readonly-display {
       padding: 6px 0;
       white-space: pre-wrap;
     }
+
+    &.xh-form-field--json-input {
+      .xh-form-field__inner--flex {
+        background-color: var(--xh-input-disabled-bg);
+        border: var(--xh-border-solid);
+        font-family: var(--xh-font-family-mono);
+        padding: var(--xh-pad-half-px);
+      }
+    }
   }
 
-  &.xh-form-field-invalid:not(.xh-form-field-readonly) {
+  &.xh-form-field--invalid:not(.xh-form-field--readonly) {
+    .xh-form-field__label {
+      color: var(--xh-form-field-invalid-color);
+    }
+
     .xh-check-box span {
       box-shadow: var(--xh-form-field-invalid-box-shadow) !important;
     }
@@ -119,16 +153,76 @@
     }
 
     .xh-text-input > svg {
-      color: var(--xh-intent-danger);
+      color: var(--xh-form-field-invalid-color);
     }
 
     .xh-text-area.textarea {
       border: var(--xh-form-field-invalid-border) !important;
     }
   }
+
+  &.xh-form-field--warning:not(.xh-form-field--readonly) {
+    .xh-form-field__label {
+      color: var(--xh-form-field-warning-color);
+    }
+
+    .xh-check-box span {
+      box-shadow: var(--xh-form-field-warning-box-shadow) !important;
+    }
+
+    .xh-button-group-input button.xh-button {
+      box-shadow: var(--xh-form-field-warning-box-shadow);
+    }
+
+    .xh-slider span {
+      box-shadow: var(--xh-form-field-warning-box-shadow);
+    }
+
+    div.xh-select__control {
+      border: var(--xh-form-field-warning-border);
+    }
+
+    .xh-text-input > svg {
+      color: var(--xh-form-field-warning-color);
+    }
+
+    .xh-text-area.textarea {
+      border: var(--xh-form-field-warning-border) !important;
+    }
+  }
+
+  &.xh-form-field--info:not(.xh-form-field--readonly) {
+    .xh-form-field__label {
+      color: var(--xh-form-field-info-color);
+    }
+
+    .xh-check-box span {
+      box-shadow: var(--xh-form-field-info-box-shadow) !important;
+    }
+
+    .xh-button-group-input button.xh-button {
+      box-shadow: var(--xh-form-field-info-box-shadow);
+    }
+
+    .xh-slider span {
+      box-shadow: var(--xh-form-field-info-box-shadow);
+    }
+
+    div.xh-select__control {
+      border: var(--xh-form-field-info-border);
+    }
+
+    .xh-text-input > svg {
+      color: var(--xh-form-field-info-color);
+    }
+
+    .xh-text-area.textarea {
+      border: var(--xh-form-field-info-border) !important;
+    }
+  }
 }
 
-ul.xh-form-field-error-tooltip {
+ul.xh-form-field__validation-tooltip {
   margin: 0;
   padding: 0 1em 0 2em;
 }
@@ -141,12 +235,12 @@ ul.xh-form-field-error-tooltip {
   align-items: baseline;
   overflow: visible !important;
 
-  .xh-form-field-inner--flex {
+  .xh-form-field__inner--flex {
     flex-direction: row;
     align-items: center;
   }
 
-  .xh-form-field-error-msg {
+  .xh-form-field__validation-msg {
     margin: 0 var(--xh-pad-px);
   }
 }