@react-types/shared 3.0.0-nightly.2517 → 3.0.0-nightly.2531

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-types/shared",
-  "version": "3.0.0-nightly.2517+8906e4f80",
+  "version": "3.0.0-nightly.2531+068ecd12e",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "types": "src/index.d.ts",
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8906e4f807e0aa639746dff66ac1ce223ec87452"
+  "gitHead": "068ecd12e8a8c61546dfda691b04ca87cbdae687"
 }

package/src/inputs.d.ts

@@ -14,16 +14,43 @@ import {ReactNode} from 'react';
 
 export type ValidationState = 'valid' | 'invalid';
 
-export interface Validation {
+export type ValidationError = string | string[];
+export type ValidationErrors = Record<string, ValidationError>;
+export type ValidationFunction<T> = (value: T) => ValidationError | true | null | undefined;
+
+export interface Validation<T> {
   /** Whether user input is required on the input before form submission. */
   isRequired?: boolean,
   /** Whether the input value is invalid. */
   isInvalid?: boolean,
   /** @deprecated Use `isInvalid` instead. */
-  validationState?: ValidationState
+  validationState?: ValidationState,
+  /**
+   * Whether to use native HTML form validation to prevent form submission
+   * when the value is missing or invalid, or mark the field as required
+   * or invalid via ARIA.
+   * @default 'aria'
+   */
+  validationBehavior?: 'aria' | 'native',
+  /**
+   * A function that returns an error message if a given value is invalid.
+   * Validation errors are displayed to the user when the form is submitted
+   * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
+   * prop instead.
+   */
+  validate?: ValidationFunction<T>
+}
+
+export interface ValidationResult {
+  /** Whether the input value is invalid. */
+  isInvalid: boolean,
+  /** The current error messages for the input if it is invalid, otherwise an empty array. */
+  validationErrors: string[],
+  /** The native validation details for the input. */
+  validationDetails: ValidityState
 }
 
-export interface SpectrumFieldValidation extends Omit<Validation, 'isInvalid' | 'validationState'> {
+export interface SpectrumFieldValidation<T> extends Omit<Validation<T>, 'isInvalid' | 'validationState'> {
   /** Whether the input should display its "valid" or "invalid" visual styling. */
   validationState?: ValidationState
 }
@@ -78,7 +105,7 @@ export interface HelpTextProps {
   /** A description for the field. Provides a hint such as specific requirements for what to choose. */
   description?: ReactNode,
   /** An error message for the field. */
-  errorMessage?: ReactNode
+  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode)
 }
 
 // Spectrum specific types. Extends `Validation` so that the `validationState` prop is available.