# All files ToastCloseButton.tsx

54.11% Statements 46/85
100% Branches 0/0
0% Functions 0/2
54.11% Lines 46/85

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
    861x
    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

     import { cnb } from "cnbuilder";
    import { forwardRef } from "react";
    import type { ButtonProps, ButtonType } from "../button";
    import { Button } from "../button";
    import { useIcon } from "../icon";
    import { bem } from "../utils";
    import { useRemoveToast } from "./useRemoveToast";

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

    /**
     * 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 = useIcon("close", propChildren);
      const removeToast = useRemoveToast();

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

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