# All files / snackbar toastStyles.ts

100% Statements 88/88
66.66% Branches 6/9
100% Functions 1/1
100% Lines 88/88

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
    891x
    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
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    5x
    4x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
    273x
     import { cnb } from "cnbuilder";
    import { cssUtils, type BackgroundColor } from "../cssUtils.js";
    import { bem } from "../utils/bem.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-toast-color"?: string;
        "--rmd-toast-background-color"?: string;
        "--rmd-toast-offset"?: string | number;
      }
    }

    const styles = bem("rmd-toast");

    /**
     * @remarks
     * \@since 2.0.0
     * \@since 6.0.0 Added the `"top-left"`, `"top-right"`, `"bottom-left"`, and
     * `"bottom-right"` positions
     * \@since 6.0.0 Renamed from `SnackbarPosition` to `ToastPosition` so that each
     * individual toast can have a separate position... even though it isn't really
     * recommended.
     */
    export type ToastPosition =
      | "bottom"
      | "bottom-left"
      | "bottom-right"
      | "top"
      | "top-left"
      | "top-right";

    /** @remarks \@since 6.0.0 */
    export interface ToastClassNameOptions {
      className?: string;
      /** @defaultValue `"surface"` */
      theme?: BackgroundColor;
      /** @defaultValue `false` */
      action?: boolean;
      /** @defaultValue `false` */
      paused?: boolean;
      /** @defaultValue `false` */
      stacked?: boolean;
      /** @defaultValue `"bottom"` */
      position?: ToastPosition;
      /** @defaultValue `false` */
      reordered?: boolean;
      /** @defaultValue `false` */
      closeButton?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function toast(options: ToastClassNameOptions = {}): string {
      const {
        className,
        theme = "surface",
        action,
        paused,
        stacked,
        position = "bottom",
        reordered,
        closeButton,
      } = options;
      const bottom =
        position === "bottom" ||
        position === "bottom-left" ||
        position === "bottom-right";

      return cnb(
        styles({
          x: closeButton,
          action,
          paused,
          "small-gap": closeButton && action,
          stacked,
          reordered: stacked && reordered,
          bottom,
          start: position === "top-left" || position === "bottom-left",
          end: position === "top-right" || position === "bottom-right",
        }),
        cssUtils({
          backgroundColor:
            theme !== "surface" && theme !== "current-color" ? theme : undefined,
        }),
        className
      );
    }