@hitachivantara/uikit-react-core/dist/esm/Avatar/Avatar.js

Core React components for the NEXT Design System.

import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import MuiAvatar from "@mui/material/Avatar";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { getColor } from "@hitachivantara/uikit-styles";
import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
import { useImageLoaded } from "../hooks/useImageLoaded.js";
import { HvIcon } from "../icons.js";
import { useClasses } from "./Avatar.styles.js";
import { staticClasses } from "./Avatar.styles.js";
const decreaseSizeMap = {
  xl: "lg",
  lg: "md",
  md: "sm",
  sm: "xs",
  xs: "xs"
};
const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
  const {
    className,
    style,
    classes: classesProp,
    children: childrenProp,
    component = "div",
    size: sizeProp,
    backgroundColor = "text",
    color = "bgContainer",
    src,
    srcSet,
    sizes,
    alt,
    imgProps,
    status,
    badge,
    variant = "circular",
    avatarProps,
    ...others
  } = useDefaultProps("HvAvatar", props);
  const { classes, cx } = useClasses(classesProp);
  const avatarGroupContext = useAvatarGroupContext();
  const size = sizeProp || avatarGroupContext?.size || "sm";
  let children;
  const imageLoaded = useImageLoaded(src, srcSet);
  const hasImg = src || srcSet;
  const hasImgNotFailing = hasImg && imageLoaded !== "error";
  if (hasImgNotFailing) {
    children = /* @__PURE__ */ jsx(
      "img",
      {
        alt,
        src,
        srcSet,
        sizes,
        className: classes.img,
        ...imgProps
      }
    );
  } else if (childrenProp != null) {
    children = childrenProp;
  } else if (hasImg && alt) {
    [children] = alt;
  } else {
    children = /* @__PURE__ */ jsx(
      HvIcon,
      {
        name: "User",
        color,
        size: decreaseSizeMap[size],
        className: classes.fallback
      }
    );
  }
  const inlineStyle = {
    ...style
  };
  if (component != null && typeof component !== "string") {
    inlineStyle.borderRadius = "50%";
  }
  if (!hasImgNotFailing) {
    inlineStyle.backgroundColor = getColor(backgroundColor, "text");
    inlineStyle.color = getColor(color, "textDimmed");
  }
  const statusInlineStyle = {};
  if (status) {
    const statusColor = getColor(status, "positive");
    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref,
      className: cx(classes.container, classes.status, classes[variant]),
      style: statusInlineStyle,
      ...others,
      children: [
        badge && /* @__PURE__ */ jsx(
          "div",
          {
            className: classes.badge,
            style: { backgroundColor: getColor(badge, "positive") }
          }
        ),
        /* @__PURE__ */ jsx(
          MuiAvatar,
          {
            component,
            className: cx(classes.root, classes.avatar, classes[size], className),
            style: inlineStyle,
            variant,
            size,
            ...avatarProps,
            children
          }
        )
      ]
    }
  );
});
export {
  HvAvatar,
  staticClasses as avatarClasses
};