@hitachivantara/uikit-react-core/dist/cjs/Avatar/Avatar.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const MuiAvatar = require("@mui/material/Avatar");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const AvatarGroupContext = require("../AvatarGroup/AvatarGroupContext.cjs");
const useImageLoaded = require("../hooks/useImageLoaded.cjs");
const icons = require("../icons.cjs");
const Avatar_styles = require("./Avatar.styles.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const MuiAvatar__default = /* @__PURE__ */ _interopDefault(MuiAvatar);
const decreaseSizeMap = {
  xl: "lg",
  lg: "md",
  md: "sm",
  sm: "xs",
  xs: "xs"
};
const HvAvatar = React.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
  } = uikitReactUtils.useDefaultProps("HvAvatar", props);
  const { classes, cx } = Avatar_styles.useClasses(classesProp);
  const avatarGroupContext = AvatarGroupContext.useAvatarGroupContext();
  const size = sizeProp || avatarGroupContext?.size || "sm";
  let children;
  const imageLoaded = useImageLoaded.useImageLoaded(src, srcSet);
  const hasImg = src || srcSet;
  const hasImgNotFailing = hasImg && imageLoaded !== "error";
  if (hasImgNotFailing) {
    children = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
      icons.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 = uikitStyles.getColor(backgroundColor, "text");
    inlineStyle.color = uikitStyles.getColor(color, "textDimmed");
  }
  const statusInlineStyle = {};
  if (status) {
    const statusColor = uikitStyles.getColor(status, "positive");
    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
  }
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      ref,
      className: cx(classes.container, classes.status, classes[variant]),
      style: statusInlineStyle,
      ...others,
      children: [
        badge && /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            className: classes.badge,
            style: { backgroundColor: uikitStyles.getColor(badge, "positive") }
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          MuiAvatar__default.default,
          {
            component,
            className: cx(classes.root, classes.avatar, classes[size], className),
            style: inlineStyle,
            variant,
            size,
            ...avatarProps,
            children
          }
        )
      ]
    }
  );
});
exports.avatarClasses = Avatar_styles.staticClasses;
exports.HvAvatar = HvAvatar;