# All files / snackbar ToastContent.tsx

0% Statements 0/93
0% Branches 0/1
0% Functions 0/1
0% Lines 0/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
    94

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