# All files / src/form FormMessage.tsx

100% Statements 79/79
33.33% Branches 1/3
100% Functions 1/1
100% Lines 79/79

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    801x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
     import { forwardRef } from "react";
    import { useEnsuredId } from "../useEnsuredId.js";
    import { FormMessageCounter } from "./FormMessageCounter.js";
    import { getFormConfig } from "./formConfig.js";
    import { formMessage, formMessageText } from "./formMessageStyles.js";
    import {
      type FormMessageInputLengthCounterProps,
      type FormMessageProps,
    } from "./types.js";

    /**
     * **Server Component**
     *
     * The `FormMessage` component is used to create additional helper messages or
     * error messages and generally placed below the related `TextField`. If a
     * `length` (of the `value`) and `maxLength` are provided, a counter will also
     * be displayed to the right of the `children`.
     *
     * This component can also be used to create form-level validation messages by
     * setting the `role` prop to `"alert"`.
     */
    export const FormMessage = forwardRef<
      HTMLDivElement,
      FormMessageProps & Partial<FormMessageInputLengthCounterProps>
    >(function FormMessage(props, ref) {
      const {
        id: propId,
        role,
        className,
        counterStyle,
        counterClassName,
        messageStyle,
        messageClassName,
        error = false,
        disableWrap = false,
        theme: propTheme,
        children,
        length,
        maxLength,
        ...remaining
      } = props;
      const id = useEnsuredId(propId, "form-message");
      const theme = getFormConfig("theme", propTheme);

      let message = children;
      if (!disableWrap && children) {
        message = (
          <p
            id={`${id}-message`}
            style={messageStyle}
            className={formMessageText({ className: messageClassName })}
          >
            {children}
          </p>
        );
      }

      return (
        <div
          {...remaining}
          id={id}
          ref={ref}
          aria-live={role !== "alert" ? "polite" : undefined}
          role={role}
          className={formMessage({ error, theme, className })}
        >
          {message}
          {typeof length === "number" && typeof maxLength === "number" && (
            <FormMessageCounter
              id={`${id}-counter`}
              style={counterStyle}
              className={counterClassName}
            >
              {`${length} / ${maxLength}`}
            </FormMessageCounter>
          )}
        </div>
      );
    });