# All files / typography TextContainer.tsx

100% Statements 116/116
100% Branches 2/2
100% Functions 2/2
100% Lines 116/116

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
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    1171x
    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
    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
    1x
    1x
    1x
    6x
    6x
    6x
    6x
    6x
    6x
    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
    1x
    1x
    1x
    1x
    1x
    1x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    1x
     import { cnb } from "cnbuilder";
    import type { HTMLAttributes } from "react";
    import { forwardRef } from "react";
    import { bem } from "../utils";

    declare module "react" {
      interface CSSProperties {
        "--rmd-line-length"?: string | number;
        "--rmd-text-container-padding"?: string | number;
      }
    }

    const styles = bem("rmd-text-container");

    /**
     * A union of the available text container sizes. One of these values must be
     * chosen to help set the max width for text.
     */
    export type TextContainerSize = "auto" | "mobile" | "desktop";

    export interface TextContainerClassNameOptions {
      /**
       * @defaultValue `"auto"`
       * @see {@link TextContainerSize}
       */
      size?: TextContainerSize;

      /**
       * An optional className to merge with typography text container styles.
       */
      className?: string;
    }

    /**
     * @example
     * Simple Example
     * ```tsx
     * import { getTextContainerClassName, Typography } from "@react-md/core";
     *
     * function Example() {
     *   return (
     *     <main className={getTextContainerClassName()}>
     *       <Typography type="headline-1">Heading</Typography>
     *       <Typography>
     *         Pretend this is a giant paragraph of text that wraps multiple lines.
     *       </Typography>
     *       <Typography>
     *         Pretend this is another giant paragraph of text that wraps multiple
     *         lines.
     *       </Typography>
     *     </main>
     *   ):
     * }
     * ```
     *
     * @param options - An optional object of options used to create the text
     * container class name.
     * @returns the text container class name
     * @see {@link TextContainer}
     * @remarks \@since 6.0.0
     */
    export function textContainer(
      options: TextContainerClassNameOptions = {}
    ): string {
      const { size = "auto", className } = options;

      return cnb(styles({ [size]: true }), className);
    }

    export interface TextContainerProps
      extends HTMLAttributes<HTMLDivElement>,
        TextContainerClassNameOptions {}

    /**
     * This component should be used to render text based content with an
     * appropriate max line length to optimize legibility.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { TextContainer, Typography } from "@react-md/core";
     *
     * function Example() {
     *   return (
     *     <TextContainer>
     *       <Typography type="headline-1">Heading</Typography>
     *       <Typography>
     *         Pretend this is a giant paragraph of text that wraps multiple lines.
     *       </Typography>
     *       <Typography>
     *         Pretend this is another giant paragraph of text that wraps multiple
     *         lines.
     *       </Typography>
     *     </TextContainer>
     *   );
     * }
     * ```
     *
     * @remarks
     * **Server Component**
     */
    export const TextContainer = forwardRef<HTMLDivElement, TextContainerProps>(
      function TextContainer(props, ref) {
        const { size = "auto", className, children, ...remaining } = props;

        return (
          <div
            {...remaining}
            ref={ref}
            className={textContainer({ size, className })}
          >
            {children}
          </div>
        );
      }
    );