@atlaskit/avatar/dist/esm/avatar-content.js

An avatar is a visual representation of a user or entity.

/* avatar-content.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./avatar-content.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, useContext } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { AvatarContentContext } from './internal/content-context';
import { useEnsureIsInsideAvatar } from './internal/use-ensure-is-inside-avatar';
var boxShadowCssVar = '--avatar-box-shadow';
var bgColorCssVar = '--avatar-bg-color';
var styles = {
  root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _kqswpfqs _4cvr1fhb _1bah1h6o _2lx21bp4 _80om1kw7 _6rthv77o _1pfhv77o _12l2v77o _ahbqv77o _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _t9ec1aqe _9v7aze3t _qc5o1p41 _z0ai1osq _18postnw _1hfk1j28 _aetrf705 _1peqidpf _11fnglyw _1ejjglyw _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa _4dave4h9",
  circle: "_2rko1qll _14mj1qll",
  square: "_2rkol0p1",
  positionRelative: "_kqswh2mm",
  disabled: "_80om13gf _1hfkvuon _1peq2wxo"
};
var unboundStyles = {
  rootCustomBorder: "_11q7cxp3",
  root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
  hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _195g1ksc _bfhk1j28 _mkrz1k6g _1o9o1v1w",
  updatedHexagonClipPath: "_mkrz1ezo",
  hexagonBorderContainerCustomBorder: "_11q7cxp3",
  hexagonBorderContainer: "_1rjcf6hp _18zruxly _1mou18m8 _195gzwb8 _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
  hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
  interactive: "_80omtlke _4tpu1f0r _ez1ykb7n _gcm1jer9 _eeh8kb7n _jlxit94y",
  interactiveMotion: "_v5641krm _m6k41e03 _1llweo6y"
};
var hexagonBorderFixStyles = {
  hexagonBorderContainer: "_85i5pe44 _1q51pe44 _y4tipe44 _bozgpe44 _6rthn6b1 _1pfhn6b1 _12l2n6b1 _ahbqn6b1",
  hexagonFocusContainer: "_85i5i44o _1q51i44o _y4tii44o _bozgi44o _6rthnlpx _1pfhnlpx _12l2nlpx _ahbqnlpx"
};

// See https://hello.atlassian.net/wiki/spaces/DST/pages/7432283012
var updatedHexagonBorderFixStyles = {
  hexagonBorderContainer: "_85i5di1a _1q51di1a _y4tiidpf _bozgidpf _6rthwit5 _1pfhwit5 _12l2idpf _ahbqidpf",
  hexagonFocusContainer: "_85i51hhc _1q511hhc _y4ti1dm9 _bozg1dm9 _6rthypyw _1pfhypyw _12l21ksc _ahbq1ksc"
};
var widthHeightMap = {
  xxsmall: "_1bsb7vkz _4t3i7vkz",
  xsmall: "_1bsb7vkz _4t3i7vkz",
  UNSAFE_xsmall: "_1bsbgktf _4t3igktf",
  small: "_1bsb1tcg _4t3i1tcg",
  medium: "_1bsbzwfg _4t3izwfg",
  large: "_1bsb1ylp _4t3i1ylp",
  xlarge: "_1bsb16xz _4t3i16xz",
  xxlarge: "_1bsb1qr7 _4t3i1qr7"
};

// The sole source of truth for the updated hexagon width/height geometry (per size).
var updatedHexagonDimensionMap = {
  xxsmall: "_1bsbgaek _4t3ikzaa",
  small: "_1bsb1ftb _4t3i1pm0",
  medium: "_1bsb1cun _4t3i3vj5",
  large: "_1bsbctg4 _4t3i15zd",
  xlarge: "_1bsbovoe _4t3i1sfy",
  xxlarge: "_1bsbhec5 _4t3i1ejz"
};
/**
 * __Avatar content__
 *
 * Avatar content renders the avatar content. It can be composed with the Avatar component
 * to create a custom avatar.
 *
 * - [Examples](https://atlassian.design/components/avatar/examples)
 * - [Code](https://atlassian.design/components/avatar/code)
 * - [Usage](https://atlassian.design/components/avatar/usage)
 */
export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children;
  useEnsureIsInsideAvatar();
  var _useContext = useContext(AvatarContentContext),
    Container = _useContext.as,
    appearance = _useContext.appearance,
    UNSAFE_isUpdatedGeometry = _useContext.UNSAFE_isUpdatedGeometry,
    avatarImage = _useContext.avatarImage,
    _useContext$borderCol = _useContext.borderColor,
    borderColor = _useContext$borderCol === void 0 ? "var(--ds-surface, #FFFFFF)" : _useContext$borderCol,
    href = _useContext.href,
    isDisabled = _useContext.isDisabled,
    label = _useContext.label,
    onClick = _useContext.onClick,
    contextRef = _useContext.ref,
    tabIndex = _useContext.tabIndex,
    target = _useContext.target,
    testId = _useContext.testId,
    size = _useContext.size,
    stackIndex = _useContext.stackIndex,
    ariaControls = _useContext['aria-controls'],
    ariaExpanded = _useContext['aria-expanded'],
    ariaHasPopup = _useContext['aria-haspopup'];
  var isInteractive = Boolean(onClick || href || isDisabled || ariaHasPopup);
  var renderedContent = /*#__PURE__*/React.createElement(Container, _extends({
    style: _defineProperty(_defineProperty({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
    ref: ref || contextRef,
    "aria-label": isInteractive ? label : undefined,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-haspopup": ariaHasPopup,
    onClick: onClick,
    tabIndex: tabIndex,
    "data-testid": testId,
    disabled: isDisabled,
    type: Container === 'button' ? 'button' : undefined
  }, href && {
    href: href,
    target: target,
    rel: target === '_blank' ? 'noopener noreferrer' : undefined
  }, {
    className: ax([unboundStyles.root, fg('avatar-custom-border') && unboundStyles.rootCustomBorder, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], UNSAFE_isUpdatedGeometry && updatedHexagonDimensionMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isInteractive && !isDisabled && appearance !== 'hexagon' && fg('platform-dst-motion-uplift') && unboundStyles.interactiveMotion, isDisabled && styles.disabled])
  }), children || avatarImage);
  if (appearance !== 'hexagon') {
    return renderedContent;
  }

  // For a Hexagon Avatar in order to have hexagonal "border" and "outline", we have to
  // layer multiple elements and use their background colors to create the different layers.
  return /*#__PURE__*/React.createElement("div", {
    style: _defineProperty(_defineProperty({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
    "data-testid": testId ? "".concat(testId, "-hexagon-focus-container") : 'hexagon-focus-container',
    className: ax([unboundStyles.hexagonFocusContainer, UNSAFE_isUpdatedGeometry && unboundStyles.updatedHexagonClipPath, isInteractive && !isDisabled && fg('platform-dst-motion-uplift') && unboundStyles.interactiveMotion, UNSAFE_isUpdatedGeometry && updatedHexagonBorderFixStyles.hexagonFocusContainer, fg('platform_editor_agent_mentions_drop_one_fixes') && !UNSAFE_isUpdatedGeometry && hexagonBorderFixStyles.hexagonFocusContainer])
  }, /*#__PURE__*/React.createElement("div", {
    "data-testid": testId ? "".concat(testId, "-hexagon-border-container") : 'hexagon-border-container',
    className: ax([unboundStyles.hexagonBorderContainer, fg('avatar-custom-border') && unboundStyles.hexagonBorderContainerCustomBorder, UNSAFE_isUpdatedGeometry && updatedHexagonBorderFixStyles.hexagonBorderContainer, fg('platform_editor_agent_mentions_drop_one_fixes') && !UNSAFE_isUpdatedGeometry && hexagonBorderFixStyles.hexagonBorderContainer])
  }, renderedContent));
});