@react-types/shared 3.21.0 → 3.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-types/shared",
-  "version": "3.21.0",
+  "version": "3.22.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "types": "src/index.d.ts",
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4122e44d1991c90507d630d35ed297f89db435d3"
+  "gitHead": "de9f84a22583fc741c29b341d14cd35ef4cca161"
 }

package/src/collections.d.ts

@@ -10,8 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Key, ReactElement, ReactNode} from 'react';
+import {Key} from '@react-types/shared';
 import {LinkDOMProps} from './dom';
+import {ReactElement, ReactNode} from 'react';
 
 export interface ItemProps<T> extends LinkDOMProps {
   /** Rendered contents of the item or child items. */
@@ -165,7 +166,7 @@ export interface Node<T> {
   key: Key,
   /** The object value the node was created from. */
   value: T | null,
-  /** The level of depth this node is at in the heirarchy. */
+  /** The level of depth this node is at in the hierarchy. */
   level: number,
   /** Whether this item has children, even if not loaded yet. */
   hasChildNodes: boolean,

package/src/dnd.d.ts

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Key, RefObject} from 'react';
+import {Key} from '@react-types/shared';
+import {RefObject} from 'react';
 
 export interface DragDropEvent {
   /** The x coordinate of the event, relative to the target element. */

package/src/index.d.ts

@@ -23,3 +23,4 @@ export * from './refs';
 export * from './labelable';
 export * from './orientation';
 export * from './locale';
+export * from './key';

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?: (value: T) => ValidationError | true | null | undefined
+}
+
+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.

package/src/key.d.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export type Key = string | number;

package/src/selection.d.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Key} from 'react';
+import {Key} from '@react-types/shared';
 
 export interface SingleSelection {
   /** Whether the collection allows empty selection. */