# All files / src/snackbar ToastContent.tsx

100% Statements 93/93
100% Branches 8/8
100% Functions 1/1
100% Lines 93/93

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
    941x
    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
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    250x
    33x
    33x
    33x
    33x
    32x
    32x
    1x
    1x
    250x
    250x
    250x
    250x
    250x
    1x
    1x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    249x
    1x
     "use client";
    import { forwardRef, useCallback, useState, type HTMLAttributes } from "react";
    import { useResizeObserver } from "../useResizeObserver.js";
    import { toastContent } from "./toastContentStyles.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface ToastContentProps extends HTMLAttributes<HTMLDivElement> {
      /** @defaultValue `false` */
      action?: boolean;

      /** @defaultValue `false` */
      stacked?: boolean;

      /**
       * Set this to `true` if you know that the {@link children} span multiple
       * lines. When this is omitted, a `ResizeObserver` will be used to
       * automatically detect multiline content.
       */
      multiline?: boolean;

      /** @defaultValue `false` */
      closeButton?: boolean;

      /**
       * Set this to `true` if you do not want to wrap the `children` in a `<div>`
       * that applies some toast layout styles. This should really only be used for
       * custom `Toast` implementations.
       *
       * @internal
       * @defaultValue `false`
       */
      disableWrapper?: boolean;
    }

    /**
     * **Client Component**
     *
     * @remarks \@since 6.0.0
     */
    export const ToastContent = forwardRef<HTMLDivElement, ToastContentProps>(
      function ToastContent(props, ref) {
        const {
          className,
          children,
          action,
          stacked,
          multiline: propMultiline,
          closeButton,
          disableWrapper,
          ...remaining
        } = props;

        const [isMultiline, setMultiline] = useState(false);
        const nodeRef = useResizeObserver({
          ref,
          disabled: disableWrapper || typeof propMultiline === "boolean",
          disableWidth: true,
          onUpdate: useCallback((entry) => {
            const element = entry.target;
            const style = window.getComputedStyle(element);
            const lineHeight = parseFloat(style.lineHeight);
            if (Number.isNaN(lineHeight)) {
              return;
            }

            setMultiline(element.scrollHeight > lineHeight);
          }, []),
        });
        const multiline = propMultiline ?? isMultiline;

        if (disableWrapper) {
          return <>{children}</>;
        }

        return (
          <div
            {...remaining}
            ref={nodeRef}
            className={toastContent({
              action,
              stacked,
              multiline,
              closeButton,
              className,
            })}
          >
            {children}
          </div>
        );
      }
    );