@dnb/eufemia/components/avatar/Avatar.js

DNB Eufemia Design System UI Library

"use client";

import React from 'react';
import clsx from 'clsx';
import { applySpacing } from "../space/SpacingUtils.js";
import { createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import Icon from "../icon/Icon.js";
import IconPrimary from "../IconPrimary.js";
import Img from "../../elements/img/Img.js";
import Context from "../../shared/Context.js";
import { validateDOMAttributes, extendPropsWithContext, warn } from "../../shared/component-helper.js";
import AvatarGroup, { AvatarGroupContext, AvatarGroupItemContext } from "./AvatarGroup.js";
import { getColor } from "../../shared/helpers.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const defaultProps = {
  size: 'medium',
  variant: 'primary',
  skeleton: false
};
const Avatar = localProps => {
  const context = React.useContext(Context);
  const avatarGroupContext = React.useContext(AvatarGroupContext);
  const avatarGroupItemContext = React.useContext(AvatarGroupItemContext);
  const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Avatar, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  }, avatarGroupContext);
  const {
    alt,
    className,
    children: childrenProp,
    size,
    skeleton,
    variant,
    src,
    imgProps,
    icon,
    hasLabel,
    backgroundColor,
    color,
    ...props
  } = allProps;
  let children = null;
  const skeletonClasses = createSkeletonClass('shape', skeleton, context);
  const childrenIsString = typeof childrenProp === 'string';
  if (icon) {
    children = isIconComponent(icon) ? iconAutoSize(icon) : _jsx(IconPrimary, {
      icon: icon,
      size: "auto",
      "aria-hidden": childrenIsString ? true : null,
      skeleton: skeleton
    });
  } else if (src || imgProps) {
    const imageProps = {
      src,
      alt,
      ...imgProps
    };
    children = _jsx(Img, {
      ...imageProps
    });
  } else if (childrenIsString) {
    const firstLetterUpperCase = childrenProp.charAt(0).toUpperCase();
    children = _jsx("span", {
      "aria-hidden": true,
      children: firstLetterUpperCase
    });
  } else if (React.Children.count(childrenProp) === 1 && isIconComponent(childrenProp)) {
    children = iconAutoSize(childrenProp);
  } else {
    children = childrenProp;
  }
  if (!avatarGroupContext && !hasLabel) {
    warn(`Avatar group required: An Avatar requires an Avatar.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
  }
  validateDOMAttributes(allProps, props);
  const style = {
    '--background-color': getColor(backgroundColor),
    '--color': getColor(color),
    ...(props === null || props === void 0 ? void 0 : props.style),
    ...((avatarGroupItemContext === null || avatarGroupItemContext === void 0 ? void 0 : avatarGroupItemContext.zIndex) != null && {
      zIndex: avatarGroupItemContext.zIndex
    })
  };
  const rootProps = applySpacing(allProps, {
    ...props,
    className: clsx(`dnb-avatar dnb-avatar--${variant || 'primary'} dnb-avatar--size-${size || 'medium'}`, skeletonClasses, className),
    style
  });
  return _jsxs("span", {
    ...rootProps,
    children: [childrenIsString && _jsx("span", {
      className: "dnb-sr-only",
      children: childrenProp
    }), children]
  });
};
Avatar.Group = AvatarGroup;
export { AvatarGroup };
withComponentMarkers(Avatar, {
  _supportsSpacingProps: true
});
export default Avatar;
function isIconComponent(element) {
  return React.isValidElement(element) && (element.type === Icon || element.type === IconPrimary);
}
function iconAutoSize(icon) {
  if (!icon.props.size) {
    return React.createElement(icon.type, {
      ...icon.props,
      size: 'auto'
    });
  }
  return icon;
}
//# sourceMappingURL=Avatar.js.map