# All files / avatar Avatar.tsx

70.66% Statements 106/150
100% Branches 0/0
0% Functions 0/1
70.66% Lines 106/150

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
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    1511x
    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
    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
     import {
      forwardRef,
      type HTMLAttributes,
      type ImgHTMLAttributes,
      type ReactNode,
    } from "react";
    import { type PropsWithRef } from "../types.js";
    import { avatar, avatarImage, type AvatarClassNameOptions } from "./styles.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-avatar-background-color"?: string;
        "--rmd-avatar-color"?: string;
        "--rmd-avatar-border-color"?: string;
        "--rmd-avatar-border-radius"?: string | number;
        "--rmd-avatar-size"?: string | number;
        "--rmd-avatar-font-size"?: string | number;
      }
    }

    export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;

    /**
     * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
     * the `role="presentation"`.
     */
    export interface AvatarProps
      extends Omit<HTMLAttributes<HTMLSpanElement>, "color">,
        AvatarClassNameOptions {
      /**
       * Since avatars are normally presentational data, they are hidden from screen
       * readers by default.
       *
       * @defaultValue `true`
       */
      "aria-hidden"?: HTMLAttributes<HTMLSpanElement>["aria-hidden"];

      /**
       * This should be an image `src` attribute to create an avatar from. When this
       * prop is defined, you should not add any children to the avatar as the
       * positioning will break.
       */
      src?: string;

      /**
       * An optional alt tag to display on the `<img>` when the `src` prop is also
       * applied.
       *
       * For accessibility and screen readers, you normally do not want to actually
       * provide this prop. This should only be used if the `Avatar` is not
       * accompanied by some other component or main content as it will be extra
       * noise for screen readers.
       *
       * @defaultValue `""`
       */
      alt?: string;

      /**
       * An optional `referrerPolicy` to provide to the `<img>` element if the `src`
       * or `imgProps` props are provided.
       *
       * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}
       *
       * @remarks \@since 2.2.0
       */
      referrerPolicy?: AvatarImgAttributes["referrerPolicy"];

      /**
       * An optional object of image props and ref that can be used to create an
       * image within the `Avatar`. This can be useful to add a custom `style`
       * or`className` to the `<img>` element if that additional customization is
       * needed.
       *
       * Note: The values in this object will override the `src`, `alt`, and
       * `referrerPolicy` root level avatar props if they exist on this object.
       *
       * @remarks \@since 2.2.0
       */
      imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;
    }

    /**
     * **Server Component**
     *
     * An `Avatar` is generally used to represent objects or people within your app.
     * The avatar can consist of an image, an icon, or some text to display. When
     * the avatar is not an image, different themes can be applied to make the
     * avatar more unique.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { Avatar } from "@react-md/core";
     * import { type ReactElement } from "react";
     *
     * export function Example(): ReactElement {
     *   return <Avatar src="/path-to-img.png" />;
     * }
     * ```
     *
     * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
     * the `role="presentation"`.
     */
    export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
      function Avatar(props, ref) {
        const {
          "aria-hidden": ariaHidden = true,
          className,
          children,
          src,
          alt = "",
          size = "avatar",
          color = "",
          theme,
          imgProps,
          referrerPolicy,
          ...remaining
        } = props;

        let img: ReactNode;
        if (src || imgProps) {
          img = (
            <img
              src={src}
              alt={alt}
              referrerPolicy={referrerPolicy}
              {...imgProps}
              className={avatarImage({ className: imgProps?.className })}
            />
          );
        }

        return (
          <span
            {...remaining}
            aria-hidden={ariaHidden}
            ref={ref}
            className={avatar({
              size,
              color,
              theme,
              className,
            })}
          >
            {img}
            {children}
          </span>
        );
      }
    );