# All files / src/snackbar ToastCloseButton.tsx

100% Statements 88/88
100% Branches 8/8
100% Functions 3/3
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
    2x
    2x
    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
    19x
    19x
    19x
    19x
    15x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
    4x
    4x
    1x
    1x
    3x
    3x
    3x
    19x
    19x
    19x
    19x
    19x
    19x
    19x
     "use client";
    import { cnb } from "cnbuilder";
    import { forwardRef } from "react";
    import { Button, type ButtonProps } from "../button/Button.js";
    import { type ButtonType } from "../button/buttonStyles.js";
    import { getIcon } from "../icon/iconConfig.js";
    import { bem } from "../utils/bem.js";
    import { useCurrentToastActions } from "./useCurrentToastActions.js";

    const styles = bem("rmd-toast-x");
    const noop = (): void => {
      // do nothing
    };

    /**
     * @remarks \@since 6.0.0
     */
    export interface ToastCloseButtonProps extends ButtonProps {
      /**
       * Note: This default value will only be used if the {@link buttonType} is not
       * `"text"` and an `aria-labelledby` is not provided.
       *
       * @defaultValue `"Close"`
       */
      "aria-label"?: string;

      /** @defaultValue `"icon-square"` */
      buttonType?: ButtonType;

      /**
       * Set this to `true` when there is a close button visible and the content is
       * stacked. This will update the styles so the button renders next to the
       * content and above the action button.
       *
       * @defaultValue `false`
       */
      reordered?: boolean;
    }

    /**
     * **Client Component**
     *
     * This button will automatically close the toast when clicked unless
     * `event.stopPropagation()` is called from the `onClick` prop.
     *
     * @remarks \@since 6.0.0
     */
    export const ToastCloseButton = forwardRef<
      HTMLButtonElement,
      ToastCloseButtonProps
    >(function ToastCloseButton(props, ref) {
      const {
        buttonType = "icon-square",
        "aria-labelledby": ariaLabelledBy,
        "aria-label": ariaLabel = buttonType !== "text" && !ariaLabelledBy
          ? "Close"
          : undefined,
        children: propChildren,
        className,
        onClick = noop,
        reordered,
        ...remaining
      } = props;

      const children = getIcon("close", propChildren);
      const { removeToast } = useCurrentToastActions();

      return (
        <Button
          {...remaining}
          aria-label={ariaLabel}
          aria-labelledby={ariaLabelledBy}
          ref={ref}
          onClick={(event) => {
            onClick(event);
            if (event.isPropagationStopped()) {
              return;
            }

            removeToast(true);
          }}
          className={cnb(styles({ reordered }), className)}
          buttonType={buttonType}
        >
          {children}
        </Button>
      );
    });