@react-types/shared 3.20.0 → 3.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-types/shared",
-  "version": "3.20.0",
+  "version": "3.22.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "types": "src/index.d.ts",
@@ -14,5 +14,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "54fbaa67cc56867506811819fef765546d403253"
+  "gitHead": "9ce2f674eab2cc8912800d3162dcf00a1ce94274"
 }

package/src/collections.d.ts

@@ -10,9 +10,11 @@
  * 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> {
+export interface ItemProps<T> extends LinkDOMProps {
   /** Rendered contents of the item or child items. */
   children: ReactNode,
   /** Rendered contents of the item if `children` contains child items. */

package/src/dna.d.ts

@@ -475,7 +475,8 @@ export type BorderSizeValue =
   | 'thin'
   | 'thick'
   | 'thicker'
-  | 'thickest';
+  | 'thickest'
+  | 'none';
 
 export type BorderRadiusValue =
   | 'xsmall'

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/dom.d.ts

@@ -17,6 +17,8 @@ import {
   CompositionEventHandler,
   CSSProperties,
   FormEventHandler,
+  HTMLAttributeAnchorTarget,
+  HTMLAttributeReferrerPolicy,
   DOMAttributes as ReactDOMAttributes,
   ReactEventHandler
 } from 'react';
@@ -167,6 +169,22 @@ export interface TextInputDOMProps extends DOMProps, InputDOMProps, TextInputDOM
   inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
 }
 
+// Make sure to update filterDOMProps.ts when updating this.
+export interface LinkDOMProps {
+  /** A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). */
+  href?: string,
+  /** The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */
+  target?: HTMLAttributeAnchorTarget,
+  /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */
+  rel?: string,
+  /** Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). */
+  download?: boolean | string,
+  /** A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping). */
+  ping?: string,
+  /** How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+}
+
 /** Any focusable element, including both HTML and SVG elements. */
 export interface FocusableElement extends Element, HTMLOrSVGElement {}
 
@@ -178,3 +196,7 @@ export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, Rea
   style?: CSSProperties | undefined,
   className?: string | undefined
 }
+
+export interface GroupDOMAttributes extends Omit<DOMAttributes<HTMLElement>, 'role'> {
+  role?: 'group' | 'region' | 'presentation'
+}

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. */