# All files / form FormMessage.tsx

31.64% Statements 25/79
100% Branches 0/0
0% Functions 0/1
31.64% Lines 25/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

     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>
      );
    });