Avatar.tsx

import { useComponentCssInjection } from "@salt-ds/styles";
import { useWindow } from "@salt-ds/window";
import { clsx } from "clsx";
import {
  type ComponentPropsWithoutRef,
  forwardRef,
  type HTMLAttributes,
  type ReactNode,
} from "react";
import { useIcon } from "../semantic-icon-provider";
import { makePrefixer, type RenderPropsType, renderProps } from "../utils";
import avatarCss from "./Avatar.css";
import { useAvatarImage } from "./useAvatarImage";

export type NameToInitials = (name?: string) => string;

export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
  /**
   * The name that Avatar represents.
   */
  name?: string;
  /**
   * Defines the function that gets initials. Default is capital first letter of each separate word in name.
   * If a function is not passed or returns undefined, Avatar will default to Icon.
   */
  nameToInitials?: NameToInitials;
  /**
   * Image src of Avatar.
   */
  src?: string;
  /**
   * Multiplier for the base avatar.
   */
  size?: number;
  /**
   * Icon to be used as a default item. Defaults to the semantic `UserIcon` when
   * `kind` is `"person"`, and the semantic `EntityIcon` when `kind`
   * is `"entity"`.
   */
  fallbackIcon?: ReactNode;
  /**
   * What the Avatar depicts, which determines its default shape and fallback icon:
   * - `"person"` renders a circular Avatar (default).
   * - `"entity"` renders a square Avatar.
   *
   * @default "person"
   */
  kind?: "person" | "entity";
  /**
   * Changes Avatar's color.
   */
  color?:
    | "accent"
    | "category-1"
    | "category-2"
    | "category-3"
    | "category-4"
    | "category-5"
    | "category-6"
    | "category-7"
    | "category-8"
    | "category-9"
    | "category-10"
    | "category-11"
    | "category-12"
    | "category-13"
    | "category-14"
    | "category-15"
    | "category-16"
    | "category-17"
    | "category-18"
    | "category-19"
    | "category-20";
  /**
   * Render prop to enable customization of the avatar root element.
   */
  render?: RenderPropsType["render"];
}

const withBaseName = makePrefixer("saltAvatar");
const DEFAULT_AVATAR_SIZE = 2; // medium

interface AvatarActionProps extends ComponentPropsWithoutRef<"div"> {
  render?: RenderPropsType["render"];
}

const AvatarAction = forwardRef<HTMLDivElement, AvatarActionProps>(
  function AvatarAction(props, ref) {
    return renderProps("div", { ...props, ref });
  },
);

const defaultNameToInitials = (name?: string) =>
  name
    ?.split(" ")
    .slice(0, 2)
    .map((n) => n[0])
    .join("")
    .toUpperCase();

export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
  {
    className,
    children: childrenProp,
    color = "accent",
    name,
    nameToInitials = defaultNameToInitials,
    kind = "person",
    src,
    size = DEFAULT_AVATAR_SIZE,
    style: styleProp,
    fallbackIcon: fallbackIconProp,
    render,
    ...rest
  },
  ref,
) {
  const targetWindow = useWindow();
  const { UserIcon, EntityIcon } = useIcon();

  const DefaultFallbackIcon = kind === "entity" ? EntityIcon : UserIcon;
  const fallbackIcon =
    fallbackIconProp === undefined ? (
      <DefaultFallbackIcon aria-hidden />
    ) : (
      fallbackIconProp
    );

  useComponentCssInjection({
    testId: "salt-avatar",
    css: avatarCss,
    window: targetWindow,
  });

  let children: ReactNode;

  const style = {
    ...styleProp,
    "--saltAvatar-size-multiplier": `${size}`,
  };

  const status = useAvatarImage({ src });
  const hasImgNotFailing = status === "loaded";
  if (hasImgNotFailing) {
    children = <img alt="" src={src} />;
  } else if (childrenProp != null) {
    children = childrenProp;
  }

  const avatarInitials = nameToInitials(name);

  const ariaProps = name
    ? render
      ? {
          "aria-label": name,
        }
      : {
          role: "img",
          "aria-label": name,
        }
    : {};

  return (
    <AvatarAction
      ref={ref}
      render={render}
      style={style}
      className={clsx(
        withBaseName(),
        withBaseName(color),
        withBaseName(kind),
        {
          [withBaseName("withImage")]: hasImgNotFailing,
        },
        className,
      )}
      {...ariaProps}
      {...rest}
    >
      {children || avatarInitials || fallbackIcon}
    </AvatarAction>
  );
});