@react-aria/textfield 3.3.1 → 3.5.2

package/src/useTextField.ts

@@ -11,27 +11,88 @@
  */
 
 import {AriaTextFieldProps} from '@react-types/textfield';
-import {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, RefObject, TextareaHTMLAttributes} from 'react';
-import {ElementType} from 'react';
+import {
+  ChangeEvent,
+  DOMFactory,
+  HTMLAttributes,
+  LabelHTMLAttributes,
+  ReactDOM,
+  RefObject
+} from 'react';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {useField} from '@react-aria/label';
 import {useFocusable} from '@react-aria/focus';
-import {useLabel} from '@react-aria/label';
 
-export interface TextFieldAria {
-  /** Props for the input element. */
-  inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,
-  /** Props for the text field's visible label element (if any). */
-  labelProps: LabelHTMLAttributes<HTMLLabelElement>
-}
+/**
+ * A map of HTML element names and their interface types.
+ * For example `'a'` -> `HTMLAnchorElement`.
+ */
+type IntrinsicHTMLElements = {
+  [K in keyof IntrinsicHTMLAttributes]: IntrinsicHTMLAttributes[K] extends HTMLAttributes<infer T> ? T : never
+};
+
+/**
+ * A map of HTML element names and their attribute interface types.
+ * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.
+ */
+type IntrinsicHTMLAttributes = {
+  [K in keyof ReactDOM]: ReactDOM[K] extends DOMFactory<infer T, any> ? T : never
+};
+
+type DefaultElementType = 'input';
+
+/**
+ * The intrinsic HTML element names that `useTextField` supports; e.g. `input`,
+ * `textarea`.
+ */
+type TextFieldIntrinsicElements = keyof Pick<IntrinsicHTMLElements, 'input' | 'textarea'>;
 
-interface AriaTextFieldOptions extends AriaTextFieldProps {
+ /**
+  * The HTML element interfaces that `useTextField` supports based on what is
+  * defined for `TextFieldIntrinsicElements`; e.g. `HTMLInputElement`,
+  * `HTMLTextAreaElement`.
+  */
+type TextFieldHTMLElementType = Pick<IntrinsicHTMLElements, TextFieldIntrinsicElements>;
+
+ /**
+  * The HTML attributes interfaces that `useTextField` supports based on what
+  * is defined for `TextFieldIntrinsicElements`; e.g. `InputHTMLAttributes`,
+  * `TextareaHTMLAttributes`.
+  */
+type TextFieldHTMLAttributesType = Pick<IntrinsicHTMLAttributes, TextFieldIntrinsicElements>;
+
+/**
+ * The type of `inputProps` returned by `useTextField`; e.g. `InputHTMLAttributes`,
+ * `TextareaHTMLAttributes`.
+ */
+type TextFieldInputProps<T extends TextFieldIntrinsicElements> = TextFieldHTMLAttributesType[T];
+
+interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> extends AriaTextFieldProps {
   /**
    * The HTML element used to render the input, e.g. 'input', or 'textarea'.
    * It determines whether certain HTML attributes will be included in `inputProps`.
    * For example, [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type).
    * @default 'input'
    */
-  inputElementType?: ElementType
+  inputElementType?: T
+}
+
+/**
+ * The type of `ref` object that can be passed to `useTextField` based on the given
+ * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,
+ * `RefObject<HTMLTextAreaElement>`.
+ */
+type TextFieldRefObject<T extends TextFieldIntrinsicElements> = RefObject<TextFieldHTMLElementType[T]>;
+
+export interface TextFieldAria<T extends TextFieldIntrinsicElements = DefaultElementType> {
+  /** Props for the input element. */
+  inputProps: TextFieldInputProps<T>,
+  /** Props for the text field's visible label element, if any. */
+  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
+  /** Props for the text field's description element, if any. */
+  descriptionProps: HTMLAttributes<HTMLElement>,
+  /** Props for the text field's error message element, if any. */
+  errorMessageProps: HTMLAttributes<HTMLElement>
 }
 
 /**
@@ -39,10 +100,10 @@ interface AriaTextFieldOptions extends AriaTextFieldProps {
  * @param props - Props for the text field.
  * @param ref - Ref to the HTML input or textarea element.
  */
-export function useTextField(
-  props: AriaTextFieldOptions,
-  ref: RefObject<HTMLInputElement | HTMLTextAreaElement>
-): TextFieldAria {
+export function useTextField<T extends TextFieldIntrinsicElements = DefaultElementType>(
+  props: AriaTextFieldOptions<T>,
+  ref: TextFieldRefObject<T>
+): TextFieldAria<T> {
   let {
     inputElementType = 'input',
     isDisabled = false,
@@ -51,9 +112,9 @@ export function useTextField(
     validationState,
     type = 'text',
     onChange = () => {}
-  } = props;
+  }: AriaTextFieldOptions<TextFieldIntrinsicElements> = props;
   let {focusableProps} = useFocusable(props, ref);
-  let {labelProps, fieldProps} = useLabel(props);
+  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);
   let domProps = filterDOMProps(props, {labelable: true});
 
   const inputOnlyProps = {
@@ -104,6 +165,8 @@ export function useTextField(
         ...focusableProps,
         ...fieldProps
       }
-    )
+    ),
+    descriptionProps,
+    errorMessageProps
   };
 }