@react-md/core 1.0.0-next.2 → 1.0.0-next.21

package/dist/form/useTextField.d.ts

@@ -4,12 +4,11 @@ import { type TextFieldProps } from "./TextField.js";
 import { type FormMessageInputLengthCounterProps, type FormMessageProps } from "./types.js";
 import { type GetErrorIcon, type GetErrorMessage, type IsErrored, type TextFieldValidationOptions, type TextFieldValidationType } from "./validation.js";
 /**
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Added the `onInvalid` handler
+ * @since 2.5.0
+ * @since 6.0.0 Added the `onInvalid` handler
  */
 export type TextFieldChangeHandlers<E extends HTMLInputElement | HTMLTextAreaElement> = Pick<HTMLAttributes<E>, "onBlur" | "onChange" | "onInvalid">;
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ErrorChangeHandlerOptions<E extends HTMLInputElement | HTMLTextAreaElement> {
     /**
      * A ref containing the `TextField` or `TextArea` if you need access to that
@@ -49,12 +48,11 @@ export interface ErrorChangeHandlerOptions<E extends HTMLInputElement | HTMLText
  * <Button type="submit" disabled={invalid} onClick={submitForm}>Submit</Button>
  * ```
  *
- * @remarks
- * \@since 2.5.0
- * \@since 6.0.0 Changed to object argument.
+ * @since 2.5.0
+ * @since 6.0.0 Changed to object argument.
  */
 export type ErrorChangeHandler<E extends HTMLInputElement | HTMLTextAreaElement> = (options: ErrorChangeHandlerOptions<E>) => void;
-/** @remarks \@since 2.5.6 */
+/** @since 2.5.6 */
 export interface TextFieldHookState {
     /**
      * The current value for the `TextField` or `TextArea`.
@@ -75,7 +73,7 @@ export interface TextFieldHookState {
  * All the props that will be generated and return from the `useTextField` hook
  * that should be passed to a `FormMessage` component.
  *
- * @remarks \@since 2.5.0
+ * @since 2.5.0
  */
 export interface ProvidedFormMessageProps extends Pick<FormMessageProps, "id" | "theme" | "children">, Required<Pick<TextFieldProps, "error">>, Partial<Pick<FormMessageInputLengthCounterProps, "length" | "maxLength">> {
 }
@@ -83,19 +81,19 @@ export interface ProvidedFormMessageProps extends Pick<FormMessageProps, "id" |
  * All the props that will be generated and returned by the `useTextField` hook
  * that should be passed to a `TextField` component.
  *
- * @remarks \@since 2.5.0
+ * @since 2.5.0
  */
 export interface ProvidedTextFieldProps<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldValidationOptions, TextFieldChangeHandlers<E>, Required<Pick<TextFieldProps, "id" | "name" | "value" | "error">>, Pick<TextFieldProps, "aria-describedby" | "rightAddon"> {
     /**
      * A ref that must be passed to the `TextField`/`TextArea` so that the custom
      * validity behavior can work.
      *
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     ref: RefCallback<E>;
 }
 /**
- * @remarks \@since 2.5.0
+ * @since 2.5.0
  */
 export interface ProvidedTextFieldMessageProps<E extends HTMLInputElement | HTMLTextAreaElement> extends ProvidedTextFieldProps<E> {
     /**
@@ -104,7 +102,7 @@ export interface ProvidedTextFieldMessageProps<E extends HTMLInputElement | HTML
      */
     messageProps: ProvidedFormMessageProps;
 }
-/** @remarks \@since 2.5.6 */
+/** @since 2.5.6 */
 export interface TextFieldHookOptions<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldValidationOptions, TextFieldChangeHandlers<E> {
     /**
      * An optional id to use for the `TextField` or `TextArea` that is also used
@@ -120,10 +118,10 @@ export interface TextFieldHookOptions<E extends HTMLInputElement | HTMLTextAreaE
      * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook
      * instead.
      *
-     * @example
-     * Accessing TextField DOM Node
+     * @example Accessing TextField DOM Node
      * ```tsx
-     * import { TextField, useTextField } from "@react-md/core";
+     * import { TextField } from "@react-md/core/form/TextField";
+     * import { useTextField } from "@react-md/core/form/useTextField";
      * import { useEffect } from "react";
      * import type { ReactElement } from "react";
      *
@@ -217,11 +215,12 @@ export interface TextFieldHookOptions<E extends HTMLInputElement | HTMLTextAreaE
      */
     onErrorChange?: ErrorChangeHandler<E>;
     /**
-     * Boolean if the `TextField` or `TextArea` will **not** be rendered along
-     * with a `FormMessage` component. This will prevent the `aria-describedby`
-     * prop from being returned when set to `true`.
+     * Set this to `true` to prevent the `errorMessage` from being
+     * rendered inline below the `TextField`.
      *
      * @defaultValue `false`
+     * @since 6.0.0 Only disables the `errorMessage` behavior so
+     * that counters and help text can still be rendered easily.
      */
     disableMessage?: boolean;
     /**
@@ -239,18 +238,18 @@ export interface TextFieldHookOptions<E extends HTMLInputElement | HTMLTextAreaE
      */
     validationType?: TextFieldValidationType;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface TextFieldImplementation<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldHookState {
     fieldRef: RefObject<E>;
-    reset(): void;
+    reset: () => void;
     setState: UseStateSetter<Readonly<TextFieldHookState>>;
     fieldProps: ProvidedTextFieldProps<E>;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface TextFieldWithMessageImplementation<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldImplementation<E> {
     fieldProps: ProvidedTextFieldMessageProps<E>;
 }
-/** @remarks \@since 6.0.0 */
+/** @since 6.0.0 */
 export interface ValidatedTextFieldImplementation<E extends HTMLInputElement | HTMLTextAreaElement> extends TextFieldImplementation<E> {
     fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;
 }
@@ -258,11 +257,11 @@ export interface ValidatedTextFieldImplementation<E extends HTMLInputElement | H
  * If you do not want to display the error messages below the `TextField` and
  * handle error messages separately, set the `disableMessage` option to `true`.
  *
- * @example
- * No Inline Error Messages
+ * @example No Inline Error Messages
  * ```tsx
- * import type { ReactElement } from "react";
- * import { TextField, useTextField } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { useTextField } from "@react-md/core/form/useTextField";
  *
  * function Example(): ReactElement {
  *   const { fieldProps } = useTextField({
@@ -275,16 +274,19 @@ export interface ValidatedTextFieldImplementation<E extends HTMLInputElement | H
  * ```
  *
  * Look at the other {@link useTextField} override for additional examples.
+ *
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}
  */
 export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(options: TextFieldHookOptions<E> & {
     disableMessage: true;
 }): TextFieldImplementation<E>;
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import type { ReactElement } from "react";
- * import { TextField, useTextField } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { useTextField } from "@react-md/core/form/useTextField";
  *
  * function Example(): ReactElement {
  *   const { fieldProps } = useTextField({
@@ -295,11 +297,11 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  * }
  * ```
  *
- * @example
- * Inline Counter
+ * @example Inline Counter
  * ```tsx
- * import type { ReactElement } from "react";
- * import { TextField, useTextField } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { useTextField } from "@react-md/core/form/useTextField";
  *
  * function Example(): ReactElement {
  *   const { fieldProps } = useTextField({
@@ -307,6 +309,8 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  *     counter: true,
  *     required: true,
  *     maxLength: 20,
+ *     // this allows the user to type beyond the max length limit and display
+ *     // an error message. omit or set to `false` to enforce the max length instead
  *     disableMaxLength: true,
  *   });
  *
@@ -314,11 +318,11 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  * }
  * ```
  *
- * @example
- * Adding Constraints
+ * @example Adding Constraints
  * ```tsx
- * import type { ReactElement } from "react";
- * import { TextField, useTextField } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { useTextField } from "@react-md/core/form/useTextField";
  *
  * function Example(): ReactElement {
  *   const { fieldProps } = useTextField({
@@ -333,11 +337,11 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  * }
  * ```
  *
- * @example
- * Custom Validation
+ * @example Custom Validation
  * ```tsx
- * import type { ReactElement } from "react";
- * import { TextField, useTextField } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ * import { TextField } from "@react-md/core/form/TextField";
+ * import { useTextField } from "@react-md/core/form/useTextField";
  *
  * function Example(): ReactElement {
  *   const { fieldProps } = useTextField({
@@ -381,9 +385,12 @@ export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaEl
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}
  * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
- * @remarks
- * \@since 2.5.6
- * \@since 6.0.0 This hook returns an object instead of an ordered list.
+ * @since 2.5.6
+ * @since 6.0.0 This hook returns an object instead of an ordered list. Also
+ * added the ability to display an inline counter and help text while disabling
+ * the error messaging.
  */
 export declare function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(options: TextFieldHookOptions<E>): TextFieldWithMessageImplementation<E>;

package/dist/form/useTextField.js

@@ -1,13 +1,17 @@
 "use client";
 import { useCallback, useRef, useState } from "react";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { defaultGetErrorIcon, defaultGetErrorMessage, defaultIsErrored } from "./validation.js";
 const noop = ()=>{
 // do nothing
 };
-export function useTextField(options) {
+/**
+ * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}
+ * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}
+ * @since 6.0.0
+ */ export function useTextField(options) {
     const { id: propId, ref: propRef, name, defaultValue = "", isNumber = false, required, pattern, minLength, maxLength, onBlur = noop, onChange = noop, onInvalid = noop, counter = false, helpText, validationType = "recommended", disableMessage = false, disableMaxLength = false, errorIcon: propErrorIcon, isErrored = defaultIsErrored, onErrorChange = noop, getErrorIcon = defaultGetErrorIcon, getErrorMessage = defaultGetErrorMessage } = options;
     const id = useEnsuredId(propId, "text-field");
     const messageId = `${id}-message`;
@@ -132,9 +136,10 @@ export function useTextField(options) {
                 return;
             }
             if (validationType === "blur") {
+                const { value } = event.currentTarget;
                 setState((prevState)=>({
                         ...prevState,
-                        value: event.currentTarget.value
+                        value
                     }));
                 return;
             }
@@ -163,14 +168,15 @@ export function useTextField(options) {
             });
         }
     };
-    if (!disableMessage) {
+    const isCounter = counter && typeof maxLength === "number";
+    if (isCounter || helpText || !disableMessage) {
         fieldProps["aria-describedby"] = messageId;
         fieldProps.messageProps = {
             id: messageId,
             error,
             length: counter ? value.length : undefined,
-            maxLength: counter && typeof maxLength === "number" ? maxLength : undefined,
-            children: errorMessage || helpText
+            maxLength: counter && maxLength || undefined,
+            children: !disableMessage && errorMessage || helpText
         };
     }
     return {

package/dist/form/useTextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { type TextFieldProps } from \"./TextField.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\nimport {\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Added the `onInvalid` handler\n */\nexport type TextFieldChangeHandlers<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @remarks \\@since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> {\n  /**\n   * A ref containing the `TextField` or `TextArea` if you need access to that\n   * DOM node for error reporting.\n   */\n  ref: RefObject<E>;\n\n  /**\n   * The current name for the `TextField` or `TextArea`.\n   */\n  name: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that reports the error state changing. A good use-case for this is\n * to keep track of all the errors within your form and keep a submit button\n * disabled until they have been resolved.\n *\n * Example:\n *\n * ```ts\n * const [errors, setErrors] = useState<Record<string, boolean | undefined>>({});\n * const onErrorChange: ErrorChangeHandler = ({ name, error }) =>\n *   setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));\n *\n * const invalid = Object.values(errors).some(Boolean);\n *\n * // form implementation is left as an exercise for the reader\n * <Button type=\"submit\" disabled={invalid} onClick={submitForm}>Submit</Button>\n * ```\n *\n * @remarks\n * \\@since 2.5.0\n * \\@since 6.0.0 Changed to object argument.\n */\nexport type ErrorChangeHandler<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = (options: ErrorChangeHandlerOptions<E>) => void;\n\n/** @remarks \\@since 2.5.6 */\nexport interface TextFieldHookState {\n  /**\n   * The current value for the `TextField` or `TextArea`.\n   */\n  value: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * All the props that will be generated and return from the `useTextField` hook\n * that should be passed to a `FormMessage` component.\n *\n * @remarks \\@since 2.5.0\n */\nexport interface ProvidedFormMessageProps\n  extends Pick<FormMessageProps, \"id\" | \"theme\" | \"children\">,\n    Required<Pick<TextFieldProps, \"error\">>,\n    Partial<Pick<FormMessageInputLengthCounterProps, \"length\" | \"maxLength\">> {}\n\n/**\n * All the props that will be generated and returned by the `useTextField` hook\n * that should be passed to a `TextField` component.\n *\n * @remarks \\@since 2.5.0\n */\nexport interface ProvidedTextFieldProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E>,\n    Required<Pick<TextFieldProps, \"id\" | \"name\" | \"value\" | \"error\">>,\n    Pick<TextFieldProps, \"aria-describedby\" | \"rightAddon\"> {\n  /**\n   * A ref that must be passed to the `TextField`/`TextArea` so that the custom\n   * validity behavior can work.\n   *\n   * @remarks \\@since 6.0.0\n   */\n  ref: RefCallback<E>;\n}\n\n/**\n * @remarks \\@since 2.5.0\n */\nexport interface ProvidedTextFieldMessageProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends ProvidedTextFieldProps<E> {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @remarks \\@since 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E> {\n  /**\n   * An optional id to use for the `TextField` or `TextArea` that is also used\n   * to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref that should be merged with the ref returned by this hook.\n   * This should really only be used if you are making a custom component using\n   * this hook and forwarding refs. If you need a ref to access the `<input>` or\n   * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook\n   * instead.\n   *\n   * @example\n   * Accessing TextField DOM Node\n   * ```tsx\n   * import { TextField, useTextField } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldRef, fieldProps } = useTextField({ name: \"example\" });\n   *\n   *   useEffect(() => {\n   *     fieldRef.current;\n   *     //       ^ HTMLInputElement | null\n   *   }, [fieldRef]);\n   *\n   *   return <TextField {...fieldProps} label=\"Example\" />;\n   * }\n   * ```\n   */\n  ref?: Ref<E>;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea` or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * Boolean if the `FormMessage` should also display a counter for the\n   * remaining letters allowed based on the `maxLength`.\n   *\n   * This will still be considered false if the `maxLength` value is not\n   * provided.\n   *\n   * @defaultValue `false`\n   */\n  counter?: boolean;\n\n  /**\n   * This is used internally for the `useNumberField` hook and probably\n   * shouldn't be used otherwise. This is just passed into the\n   * {@link getErrorMessage} options and is used for additional validation.\n   *\n   * @defaultValue `false`\n   */\n  isNumber?: boolean;\n\n  /**\n   * The default value to use for the `TextField` or `TextArea` one initial\n   * render. If you want to manually change the value to something else after\n   * the initial render, either change the `key` for the component containing\n   * this hook, or use the `setState` function returned from this hook.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<string>;\n\n  /**\n   * An optional help text to display in the `FormMessage` component when there\n   * is not an error.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * A function used to determine if the `TextField` or `TextArea` is an in\n   * errored state.\n   *\n   * @see {@link defaultIsErrored}\n   * @defaultValue `defaultIsErrored`\n   */\n  isErrored?: IsErrored;\n\n  /**\n   * An optional error icon used in the {@link getErrorIcon} option.\n   *\n   * @defaultValue `getIcon(\"error\")`\n   */\n  errorIcon?: ReactNode;\n\n  /**\n   * A function used to get the error icon to display at the right of the\n   * `TextField` or `TextArea`. The default behavior will only show an icon when\n   * the `error` state is `true` and an `errorIcon` option has been provided.\n   *\n   * @see {@link defaultGetErrorIcon}\n   * @defaultValue `defaultGetErrorIcon`\n   */\n  getErrorIcon?: GetErrorIcon;\n\n  /**\n   * A function to get and display an error message based on the `TextField` or\n   * `TextArea` validity.\n   *\n   * @see {@link defaultGetErrorMessage}\n   * @defaultValue `defaultGetErrorMessage`\n   */\n  getErrorMessage?: GetErrorMessage;\n\n  /**\n   * An optional function that will be called whenever the `error` state is\n   * changed. This can be used for more complex forms to `disable` the Submit\n   * button or anything else if any field has an error.\n   *\n   * @defaultValue `() => {}`\n   */\n  onErrorChange?: ErrorChangeHandler<E>;\n\n  /**\n   * Boolean if the `TextField` or `TextArea` will **not** be rendered along\n   * with a `FormMessage` component. This will prevent the `aria-describedby`\n   * prop from being returned when set to `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableMessage?: boolean;\n\n  /**\n   * Boolean if the `maxLength` prop should not be passed to the `TextField`\n   * component since it will prevent any additional characters from being\n   * entered in the text field which might feel like weird behavior to some\n   * users. This should really only be used when the `counter` option is also\n   * enabled and rendering along with a `FormMessage` component.\n   *\n   * @defaultValue `false`\n   */\n  disableMaxLength?: boolean;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  validationType?: TextFieldValidationType;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E>;\n  reset(): void;\n  setState: UseStateSetter<Readonly<TextFieldHookState>>;\n  fieldProps: ProvidedTextFieldProps<E>;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface TextFieldWithMessageImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;\n}\n\n/**\n * If you do not want to display the error messages below the `TextField` and\n * handle error messages separately, set the `disableMessage` option to `true`.\n *\n * @example\n * No Inline Error Messages\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     disableMessage: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * Look at the other {@link useTextField} override for additional examples.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E> & { disableMessage: true }\n): TextFieldImplementation<E>;\n\n/**\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example\n * Inline Counter\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     disableMaxLength: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example\n * Adding Constraints\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-z]+$\",\n *     minLength: 4,\n *     maxLength: 20,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example\n * Custom Validation\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { TextField, useTextField } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     getErrorMessage(options) {\n *       const {\n *         value,\n *         pattern,\n *         required,\n *         minLength,\n *         maxLength,\n *         validity,\n *         validationMessage,\n *         isNumber,\n *         isBlurEvent,\n *         validationType,\n *       } = options;\n *\n *       if (validity.tooLong) {\n *         return `No more than ${maxLength} characters.`;\n *       }\n *\n *       if (validity.tooShort) {\n *         return `No more than ${minLength} characters.`;\n *       }\n *\n *       if (validity.valueMissing) {\n *         return \"This value is required!\";\n *       }\n *\n *       if (value === \"bad value\") {\n *         return \"Value cannot be bad value\";\n *       }\n *\n *       return defaultGetErrorMessage(options);\n *     }\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @remarks\n * \\@since 2.5.6\n * \\@since 6.0.0 This hook returns an object instead of an ordered list.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): TextFieldWithMessageImplementation<E>;\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    defaultValue = \"\",\n    isNumber = false,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    onBlur = noop,\n    onChange = noop,\n    onInvalid = noop,\n    counter = false,\n    helpText,\n    validationType = \"recommended\",\n    disableMessage = false,\n    disableMaxLength = false,\n    errorIcon: propErrorIcon,\n    isErrored = defaultIsErrored,\n    onErrorChange = noop,\n    getErrorIcon = defaultGetErrorIcon,\n    getErrorMessage = defaultGetErrorMessage,\n  } = options;\n\n  const id = useEnsuredId(propId, \"text-field\");\n  const messageId = `${id}-message`;\n  const [fieldRef, ref] = useEnsuredRef(propRef);\n  const [state, setState] = useState<TextFieldHookState>(() => {\n    const value =\n      typeof defaultValue === \"function\" ? defaultValue() : defaultValue;\n\n    return {\n      value,\n      error: false,\n      errorMessage: \"\",\n    };\n  });\n  const { value, error, errorMessage } = state;\n\n  // using a `ref` instead of a `useCallback` makes it so the `defaultValue`\n  // will always be used once reset.\n  const reset = useRef(() => {\n    fieldRef.current?.setCustomValidity(\"\");\n    setState({ value, error: false, errorMessage: \"\" });\n  }).current;\n\n  const errored = useRef(error);\n  const checkValidity = useCallback(\n    (isBlurEvent: boolean) => {\n      const field = fieldRef.current;\n      if (!field) {\n        throw new Error(\"Unable to check validity due to missing ref\");\n      }\n\n      // need to temporarily set the `maxLength` back so it can be \"verified\"\n      // through the validity api\n      /* istanbul ignore next */\n      if (isBlurEvent && disableMaxLength && typeof maxLength === \"number\") {\n        field.maxLength = maxLength;\n      }\n\n      const { value } = field;\n      field.setCustomValidity(\"\");\n      field.checkValidity();\n\n      // remove the temporarily set `maxLength` attribute after checking the\n      // validity\n      /* istanbul ignore next */\n      if (disableMaxLength && typeof maxLength === \"number\") {\n        field.removeAttribute(\"maxLength\");\n      }\n\n      const options: ErrorMessageOptions = {\n        value,\n        pattern,\n        required,\n        minLength,\n        maxLength,\n        isBlurEvent,\n        isNumber,\n        validationType,\n        validity: field.validity,\n        validationMessage: field.validationMessage,\n      };\n      const errorMessage = getErrorMessage(options);\n      const error = isErrored({ ...options, errorMessage });\n\n      if (errored.current !== error) {\n        errored.current = error;\n        onErrorChange({\n          ref: fieldRef,\n          name,\n          error,\n          errorMessage,\n        });\n      }\n\n      /* istanbul ignore next */\n      if (errorMessage !== field.validationMessage) {\n        field.setCustomValidity(errorMessage);\n      }\n\n      setState((prevState) => {\n        if (\n          prevState.value === value &&\n          prevState.error === error &&\n          prevState.errorMessage === errorMessage\n        ) {\n          return prevState;\n        }\n\n        return {\n          value,\n          error,\n          errorMessage,\n        };\n      });\n    },\n    [\n      disableMaxLength,\n      fieldRef,\n      getErrorMessage,\n      isErrored,\n      isNumber,\n      maxLength,\n      minLength,\n      name,\n      onErrorChange,\n      pattern,\n      required,\n      validationType,\n    ]\n  );\n\n  const errorIcon = getIcon(\"error\", propErrorIcon);\n  const fieldProps: ProvidedTextFieldProps<E> & {\n    messageProps?: ProvidedFormMessageProps;\n  } = {\n    id,\n    ref,\n    name,\n    value,\n    error,\n    required,\n    pattern,\n    minLength,\n    maxLength: disableMaxLength ? undefined : maxLength,\n    rightAddon: getErrorIcon({\n      error,\n      errorIcon,\n      errorMessage,\n    }),\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        setState((prevState) => ({\n          ...prevState,\n          value: event.currentTarget.value,\n        }));\n        return;\n      }\n\n      checkValidity(false);\n    },\n    onInvalid(event) {\n      onInvalid(event);\n      if (\n        event.isPropagationStopped() ||\n        event.currentTarget === document.activeElement\n      ) {\n        return;\n      }\n\n      // this makes it so that if a submit button is clicked in a form, all\n      // textfields will gain the error state immediately\n      // also need to extract the validationMessage immediately because of the\n      // SyntheticEvent behavior in React. By the time the `setState` is called,\n      // the event might've been deleted\n      const { validationMessage } = event.currentTarget;\n\n      setState((prevState) => {\n        if (prevState.error) {\n          return prevState;\n        }\n\n        return {\n          ...prevState,\n          error: true,\n          errorMessage: validationMessage,\n        };\n      });\n    },\n  };\n\n  if (!disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength:\n        counter && typeof maxLength === \"number\" ? maxLength : undefined,\n      children: errorMessage || helpText,\n    };\n  }\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","validationType","disableMessage","disableMaxLength","errorIcon","propErrorIcon","isErrored","onErrorChange","getErrorIcon","getErrorMessage","messageId","fieldRef","state","setState","value","error","errorMessage","reset","current","setCustomValidity","errored","checkValidity","isBlurEvent","field","Error","removeAttribute","validity","validationMessage","prevState","fieldProps","undefined","rightAddon","event","isPropagationStopped","currentTarget","document","activeElement","messageProps","length","children"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/useTextField.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n  type RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { type TextFieldProps } from \"./TextField.js\";\nimport {\n  type FormMessageInputLengthCounterProps,\n  type FormMessageProps,\n} from \"./types.js\";\nimport {\n  type ErrorMessageOptions,\n  type GetErrorIcon,\n  type GetErrorMessage,\n  type IsErrored,\n  type TextFieldValidationOptions,\n  type TextFieldValidationType,\n  defaultGetErrorIcon,\n  defaultGetErrorMessage,\n  defaultIsErrored,\n} from \"./validation.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.5.0\n * @since 6.0.0 Added the `onInvalid` handler\n */\nexport type TextFieldChangeHandlers<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = Pick<HTMLAttributes<E>, \"onBlur\" | \"onChange\" | \"onInvalid\">;\n\n/** @since 6.0.0 */\nexport interface ErrorChangeHandlerOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> {\n  /**\n   * A ref containing the `TextField` or `TextArea` if you need access to that\n   * DOM node for error reporting.\n   */\n  ref: RefObject<E>;\n\n  /**\n   * The current name for the `TextField` or `TextArea`.\n   */\n  name: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * A function that reports the error state changing. A good use-case for this is\n * to keep track of all the errors within your form and keep a submit button\n * disabled until they have been resolved.\n *\n * Example:\n *\n * ```ts\n * const [errors, setErrors] = useState<Record<string, boolean | undefined>>({});\n * const onErrorChange: ErrorChangeHandler = ({ name, error }) =>\n *   setErrors((prevErrors) => ({ ...prevErrors, [name]: error }));\n *\n * const invalid = Object.values(errors).some(Boolean);\n *\n * // form implementation is left as an exercise for the reader\n * <Button type=\"submit\" disabled={invalid} onClick={submitForm}>Submit</Button>\n * ```\n *\n * @since 2.5.0\n * @since 6.0.0 Changed to object argument.\n */\nexport type ErrorChangeHandler<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> = (options: ErrorChangeHandlerOptions<E>) => void;\n\n/** @since 2.5.6 */\nexport interface TextFieldHookState {\n  /**\n   * The current value for the `TextField` or `TextArea`.\n   */\n  value: string;\n\n  /**\n   * This will be `true` when the `TextField`/`TextArea` has an error.\n   */\n  error: boolean;\n\n  /**\n   * The error message returned by {@link GetErrorMessage}/the browser's\n   * validation message. This is normally an empty string when the {@link error}\n   * state is `false`.\n   */\n  errorMessage: string;\n}\n\n/**\n * All the props that will be generated and return from the `useTextField` hook\n * that should be passed to a `FormMessage` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedFormMessageProps\n  extends Pick<FormMessageProps, \"id\" | \"theme\" | \"children\">,\n    Required<Pick<TextFieldProps, \"error\">>,\n    Partial<Pick<FormMessageInputLengthCounterProps, \"length\" | \"maxLength\">> {}\n\n/**\n * All the props that will be generated and returned by the `useTextField` hook\n * that should be passed to a `TextField` component.\n *\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E>,\n    Required<Pick<TextFieldProps, \"id\" | \"name\" | \"value\" | \"error\">>,\n    Pick<TextFieldProps, \"aria-describedby\" | \"rightAddon\"> {\n  /**\n   * A ref that must be passed to the `TextField`/`TextArea` so that the custom\n   * validity behavior can work.\n   *\n   * @since 6.0.0\n   */\n  ref: RefCallback<E>;\n}\n\n/**\n * @since 2.5.0\n */\nexport interface ProvidedTextFieldMessageProps<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends ProvidedTextFieldProps<E> {\n  /**\n   * These props will be defined as long as the `disableMessage` prop is not\n   * `true` from the `useTextField` hook.\n   */\n  messageProps: ProvidedFormMessageProps;\n}\n\n/** @since 2.5.6 */\nexport interface TextFieldHookOptions<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldValidationOptions,\n    TextFieldChangeHandlers<E> {\n  /**\n   * An optional id to use for the `TextField` or `TextArea` that is also used\n   * to create an id for the inline help/error messages.\n   *\n   * @defaultValue `\"text-field-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref that should be merged with the ref returned by this hook.\n   * This should really only be used if you are making a custom component using\n   * this hook and forwarding refs. If you need a ref to access the `<input>` or\n   * `<textarea>` DOM node, you can use the `fieldRef` returned by this hook\n   * instead.\n   *\n   * @example Accessing TextField DOM Node\n   * ```tsx\n   * import { TextField } from \"@react-md/core/form/TextField\";\n   * import { useTextField } from \"@react-md/core/form/useTextField\";\n   * import { useEffect } from \"react\";\n   * import type { ReactElement } from \"react\";\n   *\n   * function Example(): ReactElement {\n   *   const { fieldRef, fieldProps } = useTextField({ name: \"example\" });\n   *\n   *   useEffect(() => {\n   *     fieldRef.current;\n   *     //       ^ HTMLInputElement | null\n   *   }, [fieldRef]);\n   *\n   *   return <TextField {...fieldProps} label=\"Example\" />;\n   * }\n   * ```\n   */\n  ref?: Ref<E>;\n\n  /**\n   * A unique name to attach to the `TextField`, `TextArea` or `Password`\n   * component.\n   */\n  name: string;\n\n  /**\n   * Boolean if the `FormMessage` should also display a counter for the\n   * remaining letters allowed based on the `maxLength`.\n   *\n   * This will still be considered false if the `maxLength` value is not\n   * provided.\n   *\n   * @defaultValue `false`\n   */\n  counter?: boolean;\n\n  /**\n   * This is used internally for the `useNumberField` hook and probably\n   * shouldn't be used otherwise. This is just passed into the\n   * {@link getErrorMessage} options and is used for additional validation.\n   *\n   * @defaultValue `false`\n   */\n  isNumber?: boolean;\n\n  /**\n   * The default value to use for the `TextField` or `TextArea` one initial\n   * render. If you want to manually change the value to something else after\n   * the initial render, either change the `key` for the component containing\n   * this hook, or use the `setState` function returned from this hook.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: UseStateInitializer<string>;\n\n  /**\n   * An optional help text to display in the `FormMessage` component when there\n   * is not an error.\n   */\n  helpText?: ReactNode;\n\n  /**\n   * A function used to determine if the `TextField` or `TextArea` is an in\n   * errored state.\n   *\n   * @see {@link defaultIsErrored}\n   * @defaultValue `defaultIsErrored`\n   */\n  isErrored?: IsErrored;\n\n  /**\n   * An optional error icon used in the {@link getErrorIcon} option.\n   *\n   * @defaultValue `getIcon(\"error\")`\n   */\n  errorIcon?: ReactNode;\n\n  /**\n   * A function used to get the error icon to display at the right of the\n   * `TextField` or `TextArea`. The default behavior will only show an icon when\n   * the `error` state is `true` and an `errorIcon` option has been provided.\n   *\n   * @see {@link defaultGetErrorIcon}\n   * @defaultValue `defaultGetErrorIcon`\n   */\n  getErrorIcon?: GetErrorIcon;\n\n  /**\n   * A function to get and display an error message based on the `TextField` or\n   * `TextArea` validity.\n   *\n   * @see {@link defaultGetErrorMessage}\n   * @defaultValue `defaultGetErrorMessage`\n   */\n  getErrorMessage?: GetErrorMessage;\n\n  /**\n   * An optional function that will be called whenever the `error` state is\n   * changed. This can be used for more complex forms to `disable` the Submit\n   * button or anything else if any field has an error.\n   *\n   * @defaultValue `() => {}`\n   */\n  onErrorChange?: ErrorChangeHandler<E>;\n\n  /**\n   * Set this to `true` to prevent the `errorMessage` from being\n   * rendered inline below the `TextField`.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 Only disables the `errorMessage` behavior so\n   * that counters and help text can still be rendered easily.\n   */\n  disableMessage?: boolean;\n\n  /**\n   * Boolean if the `maxLength` prop should not be passed to the `TextField`\n   * component since it will prevent any additional characters from being\n   * entered in the text field which might feel like weird behavior to some\n   * users. This should really only be used when the `counter` option is also\n   * enabled and rendering along with a `FormMessage` component.\n   *\n   * @defaultValue `false`\n   */\n  disableMaxLength?: boolean;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  validationType?: TextFieldValidationType;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldHookState {\n  fieldRef: RefObject<E>;\n  reset: () => void;\n  setState: UseStateSetter<Readonly<TextFieldHookState>>;\n  fieldProps: ProvidedTextFieldProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface TextFieldWithMessageImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldMessageProps<E>;\n}\n\n/** @since 6.0.0 */\nexport interface ValidatedTextFieldImplementation<\n  E extends HTMLInputElement | HTMLTextAreaElement,\n> extends TextFieldImplementation<E> {\n  fieldProps: ProvidedTextFieldProps<E> | ProvidedTextFieldMessageProps<E>;\n}\n\n/**\n * If you do not want to display the error messages below the `TextField` and\n * handle error messages separately, set the `disableMessage` option to `true`.\n *\n * @example No Inline Error Messages\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     disableMessage: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * Look at the other {@link useTextField} override for additional examples.\n *\n * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E> & { disableMessage: true }\n): TextFieldImplementation<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Inline Counter\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     counter: true,\n *     required: true,\n *     maxLength: 20,\n *     // this allows the user to type beyond the max length limit and display\n *     // an error message. omit or set to `false` to enforce the max length instead\n *     disableMaxLength: true,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Adding Constraints\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     pattern: \"^[A-z]+$\",\n *     minLength: 4,\n *     maxLength: 20,\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @example Custom Validation\n * ```tsx\n * import { type ReactElement } from \"react\";\n * import { TextField } from \"@react-md/core/form/TextField\";\n * import { useTextField } from \"@react-md/core/form/useTextField\";\n *\n * function Example(): ReactElement {\n *   const { fieldProps } = useTextField({\n *     name: \"example\",\n *     required: true,\n *     getErrorMessage(options) {\n *       const {\n *         value,\n *         pattern,\n *         required,\n *         minLength,\n *         maxLength,\n *         validity,\n *         validationMessage,\n *         isNumber,\n *         isBlurEvent,\n *         validationType,\n *       } = options;\n *\n *       if (validity.tooLong) {\n *         return `No more than ${maxLength} characters.`;\n *       }\n *\n *       if (validity.tooShort) {\n *         return `No more than ${minLength} characters.`;\n *       }\n *\n *       if (validity.valueMissing) {\n *         return \"This value is required!\";\n *       }\n *\n *       if (value === \"bad value\") {\n *         return \"Value cannot be bad value\";\n *       }\n *\n *       return defaultGetErrorMessage(options);\n *     }\n *   });\n *\n *   return <TextField {...fieldProps} label=\"Example\" />;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}\n * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation\n * @since 2.5.6\n * @since 6.0.0 This hook returns an object instead of an ordered list. Also\n * added the ability to display an inline counter and help text while disabling\n * the error messaging.\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): TextFieldWithMessageImplementation<E>;\n/**\n * @see {@link https://next.react-md.dev/components/text-field | TextField Demos}\n * @see {@link https://next.react-md.dev/hooks/use-text-field | useTextField Demos}\n * @since 6.0.0\n */\nexport function useTextField<E extends HTMLInputElement | HTMLTextAreaElement>(\n  options: TextFieldHookOptions<E>\n): ValidatedTextFieldImplementation<E> {\n  const {\n    id: propId,\n    ref: propRef,\n    name,\n    defaultValue = \"\",\n    isNumber = false,\n    required,\n    pattern,\n    minLength,\n    maxLength,\n    onBlur = noop,\n    onChange = noop,\n    onInvalid = noop,\n    counter = false,\n    helpText,\n    validationType = \"recommended\",\n    disableMessage = false,\n    disableMaxLength = false,\n    errorIcon: propErrorIcon,\n    isErrored = defaultIsErrored,\n    onErrorChange = noop,\n    getErrorIcon = defaultGetErrorIcon,\n    getErrorMessage = defaultGetErrorMessage,\n  } = options;\n\n  const id = useEnsuredId(propId, \"text-field\");\n  const messageId = `${id}-message`;\n  const [fieldRef, ref] = useEnsuredRef(propRef);\n  const [state, setState] = useState<TextFieldHookState>(() => {\n    const value =\n      typeof defaultValue === \"function\" ? defaultValue() : defaultValue;\n\n    return {\n      value,\n      error: false,\n      errorMessage: \"\",\n    };\n  });\n  const { value, error, errorMessage } = state;\n\n  // using a `ref` instead of a `useCallback` makes it so the `defaultValue`\n  // will always be used once reset.\n  const reset = useRef(() => {\n    fieldRef.current?.setCustomValidity(\"\");\n    setState({ value, error: false, errorMessage: \"\" });\n  }).current;\n\n  const errored = useRef(error);\n  const checkValidity = useCallback(\n    (isBlurEvent: boolean) => {\n      const field = fieldRef.current;\n      if (!field) {\n        throw new Error(\"Unable to check validity due to missing ref\");\n      }\n\n      // need to temporarily set the `maxLength` back so it can be \"verified\"\n      // through the validity api\n      /* istanbul ignore next */\n      if (isBlurEvent && disableMaxLength && typeof maxLength === \"number\") {\n        field.maxLength = maxLength;\n      }\n\n      const { value } = field;\n      field.setCustomValidity(\"\");\n      field.checkValidity();\n\n      // remove the temporarily set `maxLength` attribute after checking the\n      // validity\n      /* istanbul ignore next */\n      if (disableMaxLength && typeof maxLength === \"number\") {\n        field.removeAttribute(\"maxLength\");\n      }\n\n      const options: ErrorMessageOptions = {\n        value,\n        pattern,\n        required,\n        minLength,\n        maxLength,\n        isBlurEvent,\n        isNumber,\n        validationType,\n        validity: field.validity,\n        validationMessage: field.validationMessage,\n      };\n      const errorMessage = getErrorMessage(options);\n      const error = isErrored({ ...options, errorMessage });\n\n      if (errored.current !== error) {\n        errored.current = error;\n        onErrorChange({\n          ref: fieldRef,\n          name,\n          error,\n          errorMessage,\n        });\n      }\n\n      /* istanbul ignore next */\n      if (errorMessage !== field.validationMessage) {\n        field.setCustomValidity(errorMessage);\n      }\n\n      setState((prevState) => {\n        if (\n          prevState.value === value &&\n          prevState.error === error &&\n          prevState.errorMessage === errorMessage\n        ) {\n          return prevState;\n        }\n\n        return {\n          value,\n          error,\n          errorMessage,\n        };\n      });\n    },\n    [\n      disableMaxLength,\n      fieldRef,\n      getErrorMessage,\n      isErrored,\n      isNumber,\n      maxLength,\n      minLength,\n      name,\n      onErrorChange,\n      pattern,\n      required,\n      validationType,\n    ]\n  );\n\n  const errorIcon = getIcon(\"error\", propErrorIcon);\n  const fieldProps: ProvidedTextFieldProps<E> & {\n    messageProps?: ProvidedFormMessageProps;\n  } = {\n    id,\n    ref,\n    name,\n    value,\n    error,\n    required,\n    pattern,\n    minLength,\n    maxLength: disableMaxLength ? undefined : maxLength,\n    rightAddon: getErrorIcon({\n      error,\n      errorIcon,\n      errorMessage,\n    }),\n    onBlur(event) {\n      onBlur(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      checkValidity(true);\n    },\n    onChange(event) {\n      onChange(event);\n      if (event.isPropagationStopped()) {\n        return;\n      }\n\n      if (validationType === \"blur\") {\n        const { value } = event.currentTarget;\n        setState((prevState) => ({\n          ...prevState,\n          value,\n        }));\n        return;\n      }\n\n      checkValidity(false);\n    },\n    onInvalid(event) {\n      onInvalid(event);\n      if (\n        event.isPropagationStopped() ||\n        event.currentTarget === document.activeElement\n      ) {\n        return;\n      }\n\n      // this makes it so that if a submit button is clicked in a form, all\n      // textfields will gain the error state immediately\n      // also need to extract the validationMessage immediately because of the\n      // SyntheticEvent behavior in React. By the time the `setState` is called,\n      // the event might've been deleted\n      const { validationMessage } = event.currentTarget;\n\n      setState((prevState) => {\n        if (prevState.error) {\n          return prevState;\n        }\n\n        return {\n          ...prevState,\n          error: true,\n          errorMessage: validationMessage,\n        };\n      });\n    },\n  };\n\n  const isCounter = counter && typeof maxLength === \"number\";\n  if (isCounter || helpText || !disableMessage) {\n    fieldProps[\"aria-describedby\"] = messageId;\n    fieldProps.messageProps = {\n      id: messageId,\n      error,\n      length: counter ? value.length : undefined,\n      maxLength: (counter && maxLength) || undefined,\n      children: (!disableMessage && errorMessage) || helpText,\n    };\n  }\n\n  return {\n    ...state,\n    reset,\n    setState,\n    fieldRef,\n    fieldProps,\n  };\n}\n"],"names":["useCallback","useRef","useState","getIcon","useEnsuredId","useEnsuredRef","defaultGetErrorIcon","defaultGetErrorMessage","defaultIsErrored","noop","useTextField","options","id","propId","ref","propRef","name","defaultValue","isNumber","required","pattern","minLength","maxLength","onBlur","onChange","onInvalid","counter","helpText","validationType","disableMessage","disableMaxLength","errorIcon","propErrorIcon","isErrored","onErrorChange","getErrorIcon","getErrorMessage","messageId","fieldRef","state","setState","value","error","errorMessage","reset","current","setCustomValidity","errored","checkValidity","isBlurEvent","field","Error","removeAttribute","validity","validationMessage","prevState","fieldProps","undefined","rightAddon","event","isPropagationStopped","currentTarget","document","activeElement","isCounter","messageProps","length","children"],"mappings":"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"}

package/dist/form/useTextFieldContainerAddons.d.ts

@@ -0,0 +1,88 @@
+import { type CSSProperties, type Ref, type RefCallback } from "react";
+import { type FormTheme } from "./types.js";
+/**
+ * @since 6.0.0
+ */
+export interface TextFieldContainerAddonsOptions {
+    /**
+     * This style will automatically be merged with the returned `style`.
+     */
+    style?: CSSProperties;
+    /** @defaultValue `getFormConfig("theme")` */
+    theme?: FormTheme;
+    /**
+     * Set this to `true` if the `leftAddon` should be watched for size changes.
+     */
+    leftAddon: boolean;
+    /**
+     * An optional ref that will be merged with the returned
+     * {@link TextFieldContainerAddonsImplementation.leftAddonRef}.
+     */
+    leftAddonRef?: Ref<HTMLSpanElement>;
+    /**
+     * This can be used to update the CSS `calc()` expression to change the
+     * padding.
+     *
+     * @example Add an additional 0.25rem padding
+     * ```
+     * leftAddonExtraCalc="+ 0.25rem"
+     * ```
+     *
+     * @defaultValue `""`
+     */
+    leftAddonExtraCalc?: string;
+    /**
+     * Set this to `true` if the `rightAddon` should be watched for size changes.
+     */
+    rightAddon: boolean;
+    /**
+     * An optional ref that will be merged with the returned
+     * {@link TextFieldContainerAddonsImplementation.rightAddonRef}.
+     */
+    rightAddonRef?: Ref<HTMLSpanElement>;
+    /**
+     * This can be used to update the CSS `calc()` expression to change the
+     * padding.
+     *
+     * @example Add an additional 0.25rem padding
+     * ```
+     * leftAddonExtraCalc="+ 0.25rem"
+     * ```
+     *
+     * @defaultValue `""`
+     */
+    rightAddonExtraCalc?: string;
+}
+/**
+ * @since 6.0.0
+ */
+export interface TextFieldContainerAddonsImplementation {
+    style?: CSSProperties;
+    leftAddonRef: RefCallback<HTMLSpanElement>;
+    rightAddonRef: RefCallback<HTMLSpanElement>;
+}
+/**
+ * This hook can be used to automatically update the padding on the
+ * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.
+ *
+ * @example Simple Example
+ * ```tsx
+ * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({
+ *   leftAddon: true,
+ *   rightAddon: true,
+ * });
+ *
+ * return (
+ *   <TextField
+ *     style={style}
+ *     leftAddon={<SomeDynamicAddon />}
+ *     leftAddonProps={{ ref: leftAddonRef }}
+ *     rightAddon={<SomeDynamicAddon />}
+ *     rightAddonProps={{ ref: rightAddonRef }}
+ *   />
+ * );
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function useTextFieldContainerAddons(options: TextFieldContainerAddonsOptions): TextFieldContainerAddonsImplementation;

package/dist/form/useTextFieldContainerAddons.js

@@ -0,0 +1,85 @@
+"use client";
+import { useCallback, useState } from "react";
+import { useResizeObserver } from "../useResizeObserver.js";
+import { getFormConfig } from "./formConfig.js";
+/**
+ * @since 6.0.0
+ * @internal
+ */ function useAddonPadding(options) {
+    const { ref, addon, theme, extra } = options;
+    const [padding, setPadding] = useState();
+    const addonRef = useResizeObserver({
+        ref,
+        onUpdate: useCallback((entry)=>{
+            const inlineSize = entry.borderBoxSize[0]?.inlineSize;
+            if (typeof inlineSize !== "number") {
+                return;
+            }
+            // the leading space for the extra calc is required
+            setPadding(`calc(var(--rmd-text-field-${theme}d-padding) + ${inlineSize}px${extra ? ` ${extra}` : ""})`);
+        }, [
+            extra,
+            theme
+        ]),
+        disabled: !addon,
+        disableHeight: true
+    });
+    return [
+        padding,
+        addonRef
+    ];
+}
+/**
+ * This hook can be used to automatically update the padding on the
+ * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.
+ *
+ * @example Simple Example
+ * ```tsx
+ * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({
+ *   leftAddon: true,
+ *   rightAddon: true,
+ * });
+ *
+ * return (
+ *   <TextField
+ *     style={style}
+ *     leftAddon={<SomeDynamicAddon />}
+ *     leftAddonProps={{ ref: leftAddonRef }}
+ *     rightAddon={<SomeDynamicAddon />}
+ *     rightAddonProps={{ ref: rightAddonRef }}
+ *   />
+ * );
+ * ```
+ *
+ * @since 6.0.0
+ */ export function useTextFieldContainerAddons(options) {
+    const { style: propStyle, theme: propTheme, leftAddon, rightAddon, leftAddonRef: propLeftAddonRef, rightAddonRef: propRightAddonRef, leftAddonExtraCalc = "", rightAddonExtraCalc = "" } = options;
+    const theme = getFormConfig("theme", propTheme);
+    const [paddingLeft, leftAddonRef] = useAddonPadding({
+        ref: propLeftAddonRef,
+        theme,
+        addon: leftAddon,
+        extra: `+ var(--rmd-addon-spacing)${leftAddonExtraCalc ? ` ${leftAddonExtraCalc}` : ""}`
+    });
+    const [paddingRight, rightAddonRef] = useAddonPadding({
+        ref: propRightAddonRef,
+        theme,
+        addon: rightAddon,
+        extra: rightAddonExtraCalc
+    });
+    let style = propStyle;
+    if (typeof paddingLeft === "string" || typeof paddingRight === "string") {
+        style = {
+            ...propStyle,
+            "--rmd-text-field-padding-left": paddingLeft ?? propStyle?.["--rmd-text-field-padding-left"],
+            "--rmd-text-field-padding-right": paddingRight ?? propStyle?.["--rmd-text-field-padding-right"]
+        };
+    }
+    return {
+        style,
+        leftAddonRef,
+        rightAddonRef
+    };
+}
+
+//# sourceMappingURL=useTextFieldContainerAddons.js.map

package/dist/form/useTextFieldContainerAddons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/useTextFieldContainerAddons.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  type CSSProperties,\n  type Ref,\n  type RefCallback,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { type FormTheme } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\ninterface AddonPaddingOptions {\n  ref?: Ref<HTMLSpanElement>;\n  addon: boolean;\n  theme: FormTheme;\n  extra: string;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nfunction useAddonPadding(\n  options: AddonPaddingOptions\n): [padding: string | undefined, addonRef: RefCallback<HTMLSpanElement>] {\n  const { ref, addon, theme, extra } = options;\n  const [padding, setPadding] = useState<string | undefined>();\n  const addonRef = useResizeObserver({\n    ref,\n    onUpdate: useCallback(\n      (entry) => {\n        const inlineSize = entry.borderBoxSize[0]?.inlineSize;\n        if (typeof inlineSize !== \"number\") {\n          return;\n        }\n\n        // the leading space for the extra calc is required\n        setPadding(\n          `calc(var(--rmd-text-field-${theme}d-padding) + ${inlineSize}px${extra ? ` ${extra}` : \"\"})`\n        );\n      },\n      [extra, theme]\n    ),\n    disabled: !addon,\n    disableHeight: true,\n  });\n\n  return [padding, addonRef];\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TextFieldContainerAddonsOptions {\n  /**\n   * This style will automatically be merged with the returned `style`.\n   */\n  style?: CSSProperties;\n\n  /** @defaultValue `getFormConfig(\"theme\")` */\n  theme?: FormTheme;\n\n  /**\n   * Set this to `true` if the `leftAddon` should be watched for size changes.\n   */\n  leftAddon: boolean;\n\n  /**\n   * An optional ref that will be merged with the returned\n   * {@link TextFieldContainerAddonsImplementation.leftAddonRef}.\n   */\n  leftAddonRef?: Ref<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the CSS `calc()` expression to change the\n   * padding.\n   *\n   * @example Add an additional 0.25rem padding\n   * ```\n   * leftAddonExtraCalc=\"+ 0.25rem\"\n   * ```\n   *\n   * @defaultValue `\"\"`\n   */\n  leftAddonExtraCalc?: string;\n\n  /**\n   * Set this to `true` if the `rightAddon` should be watched for size changes.\n   */\n  rightAddon: boolean;\n\n  /**\n   * An optional ref that will be merged with the returned\n   * {@link TextFieldContainerAddonsImplementation.rightAddonRef}.\n   */\n  rightAddonRef?: Ref<HTMLSpanElement>;\n\n  /**\n   * This can be used to update the CSS `calc()` expression to change the\n   * padding.\n   *\n   * @example Add an additional 0.25rem padding\n   * ```\n   * leftAddonExtraCalc=\"+ 0.25rem\"\n   * ```\n   *\n   * @defaultValue `\"\"`\n   */\n  rightAddonExtraCalc?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TextFieldContainerAddonsImplementation {\n  style?: CSSProperties;\n  leftAddonRef: RefCallback<HTMLSpanElement>;\n  rightAddonRef: RefCallback<HTMLSpanElement>;\n}\n\n/**\n * This hook can be used to automatically update the padding on the\n * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.\n *\n * @example Simple Example\n * ```tsx\n * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({\n *   leftAddon: true,\n *   rightAddon: true,\n * });\n *\n * return (\n *   <TextField\n *     style={style}\n *     leftAddon={<SomeDynamicAddon />}\n *     leftAddonProps={{ ref: leftAddonRef }}\n *     rightAddon={<SomeDynamicAddon />}\n *     rightAddonProps={{ ref: rightAddonRef }}\n *   />\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function useTextFieldContainerAddons(\n  options: TextFieldContainerAddonsOptions\n): TextFieldContainerAddonsImplementation {\n  const {\n    style: propStyle,\n    theme: propTheme,\n    leftAddon,\n    rightAddon,\n    leftAddonRef: propLeftAddonRef,\n    rightAddonRef: propRightAddonRef,\n    leftAddonExtraCalc = \"\",\n    rightAddonExtraCalc = \"\",\n  } = options;\n  const theme = getFormConfig(\"theme\", propTheme);\n\n  const [paddingLeft, leftAddonRef] = useAddonPadding({\n    ref: propLeftAddonRef,\n    theme,\n    addon: leftAddon,\n    extra: `+ var(--rmd-addon-spacing)${leftAddonExtraCalc ? ` ${leftAddonExtraCalc}` : \"\"}`,\n  });\n\n  const [paddingRight, rightAddonRef] = useAddonPadding({\n    ref: propRightAddonRef,\n    theme,\n    addon: rightAddon,\n    extra: rightAddonExtraCalc,\n  });\n\n  let style = propStyle;\n  if (typeof paddingLeft === \"string\" || typeof paddingRight === \"string\") {\n    style = {\n      ...propStyle,\n      \"--rmd-text-field-padding-left\":\n        paddingLeft ?? propStyle?.[\"--rmd-text-field-padding-left\"],\n      \"--rmd-text-field-padding-right\":\n        paddingRight ?? propStyle?.[\"--rmd-text-field-padding-right\"],\n    };\n  }\n\n  return {\n    style,\n    leftAddonRef,\n    rightAddonRef,\n  };\n}\n"],"names":["useCallback","useState","useResizeObserver","getFormConfig","useAddonPadding","options","ref","addon","theme","extra","padding","setPadding","addonRef","onUpdate","entry","inlineSize","borderBoxSize","disabled","disableHeight","useTextFieldContainerAddons","style","propStyle","propTheme","leftAddon","rightAddon","leftAddonRef","propLeftAddonRef","rightAddonRef","propRightAddonRef","leftAddonExtraCalc","rightAddonExtraCalc","paddingLeft","paddingRight"],"mappings":"AAAA;AAEA,SAIEA,WAAW,EACXC,QAAQ,QACH,QAAQ;AAEf,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,aAAa,QAAQ,kBAAkB;AAchD;;;CAGC,GACD,SAASC,gBACPC,OAA4B;IAE5B,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGJ;IACrC,MAAM,CAACK,SAASC,WAAW,GAAGV;IAC9B,MAAMW,WAAWV,kBAAkB;QACjCI;QACAO,UAAUb,YACR,CAACc;YACC,MAAMC,aAAaD,MAAME,aAAa,CAAC,EAAE,EAAED;YAC3C,IAAI,OAAOA,eAAe,UAAU;gBAClC;YACF;YAEA,mDAAmD;YACnDJ,WACE,CAAC,0BAA0B,EAAEH,MAAM,aAAa,EAAEO,WAAW,EAAE,EAAEN,QAAQ,CAAC,CAAC,EAAEA,OAAO,GAAG,GAAG,CAAC,CAAC;QAEhG,GACA;YAACA;YAAOD;SAAM;QAEhBS,UAAU,CAACV;QACXW,eAAe;IACjB;IAEA,OAAO;QAACR;QAASE;KAAS;AAC5B;AAwEA;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASO,4BACdd,OAAwC;IAExC,MAAM,EACJe,OAAOC,SAAS,EAChBb,OAAOc,SAAS,EAChBC,SAAS,EACTC,UAAU,EACVC,cAAcC,gBAAgB,EAC9BC,eAAeC,iBAAiB,EAChCC,qBAAqB,EAAE,EACvBC,sBAAsB,EAAE,EACzB,GAAGzB;IACJ,MAAMG,QAAQL,cAAc,SAASmB;IAErC,MAAM,CAACS,aAAaN,aAAa,GAAGrB,gBAAgB;QAClDE,KAAKoB;QACLlB;QACAD,OAAOgB;QACPd,OAAO,CAAC,0BAA0B,EAAEoB,qBAAqB,CAAC,CAAC,EAAEA,oBAAoB,GAAG,IAAI;IAC1F;IAEA,MAAM,CAACG,cAAcL,cAAc,GAAGvB,gBAAgB;QACpDE,KAAKsB;QACLpB;QACAD,OAAOiB;QACPf,OAAOqB;IACT;IAEA,IAAIV,QAAQC;IACZ,IAAI,OAAOU,gBAAgB,YAAY,OAAOC,iBAAiB,UAAU;QACvEZ,QAAQ;YACN,GAAGC,SAAS;YACZ,iCACEU,eAAeV,WAAW,CAAC,gCAAgC;YAC7D,kCACEW,gBAAgBX,WAAW,CAAC,iCAAiC;QACjE;IACF;IAEA,OAAO;QACLD;QACAK;QACAE;IACF;AACF"}

package/dist/form/utils.d.ts

@@ -16,23 +16,32 @@ import { type KeyboardEvent } from "react";
  * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
  * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
  * @internal
- * @remarks
- * \@since 2.7.0
- * \@since 6.0.0 No longer returns a boolean, added the `formId` parameter, and
+ * @since 2.7.0
+ * @since 6.0.0 No longer returns a boolean, added the `formId` parameter, and
  * moved into the form package.
- * \@since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button
+ * @since 6.0.0 Uses `form.requestSubmit` instead of clicking the submit button
  */
 export declare function tryToSubmitRelatedForm<E extends HTMLElement>(event: KeyboardEvent<E>, formId: string | undefined): void;
 /**
  * @internal
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
-export type ChangeableHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+export type EditableHTMLElement = HTMLInputElement | HTMLTextAreaElement;
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export type ChangeableHTMLElement = EditableHTMLElement | HTMLSelectElement;
+/**
+ * @internal
+ * @since 6.0.0
+ */
+export declare function isChangeableHTMLElement(element: Element | null): element is ChangeableHTMLElement;
 /**
  * This is used to trigger a change event for a form element.
  *
  * @internal
  * @see https://stackoverflow.com/a/46012210
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function triggerManualChangeEvent(element: ChangeableHTMLElement | null, value: string | number): void;