# All files / src/form FormMessageContainer.tsx

100% Statements 46/46
100% Branches 3/3
100% Functions 1/1
100% Lines 46/46

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
    471x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    440x
    440x
    438x
    438x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
     import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes } from "react";
    import { type PropsWithRef } from "../types.js";
    import { FormMessage } from "./FormMessage.js";
    import { type FormMessageProps } from "./types.js";

    /**
     * @remarks \@since 2.5.0
     */
    export interface FormMessageContainerProps
      extends HTMLAttributes<HTMLDivElement> {
      /**
       * If the extension doesn't actually want to render the `FormMessage`
       * component, these props are optional. It kind of eliminates the whole
       * purpose of this component though.
       */
      messageProps?: PropsWithRef<FormMessageProps, HTMLDivElement>;
    }

    /**
     * **Server Component**
     * Conditionally wraps the `children` in a `.rmd-form-message-container` wrapper
     * and renders the {@link FormMessage} component.
     *
     * @remarks \@since 2.5.0
     */
    export const FormMessageContainer = forwardRef<
      HTMLDivElement,
      FormMessageContainerProps
    >(function FormMessageContainer(props, ref) {
      const { className, children, messageProps, ...remaining } = props;
      if (!messageProps) {
        return <>{children}</>;
      }

      return (
        <div
          {...remaining}
          ref={ref}
          className={cnb("rmd-form-message-container", className)}
        >
          {children}
          <FormMessage {...messageProps} />
        </div>
      );
    });