@atlaskit/tag/dist/esm/tag-new/avatar-tag.js

A tag labels UI objects for quick recognition and navigation.

/* avatar-tag.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["text", "type", "avatar", "href", "linkComponent", "isRemovable", "removeButtonLabel", "onBeforeRemoveAction", "onAfterRemoveAction", "testId", "isVerified", "maxWidth", "hasMargin", "onClick"];
import "./avatar-tag.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
// Clips avatar-tag text during motion and restores measured truncation after it settles.
import { cloneElement, forwardRef, isValidElement, memo, useCallback } from 'react';
import StatusVerifiedIcon from '@atlaskit/icon/core/status-verified';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { LinkWrapper } from './link-wrapper';
import { RemovableWrapper } from './removable-wrapper';
import { TagMotion } from './tag-motion';
import { markAsTagMotionCapable } from './tag-motion-capability';
import { useButtonInteraction } from './use-button-interaction';
import { useLink } from './use-link';
import { useRemoveButton } from './use-remove-button';
import { useTagRemoval } from './use-tag-removal';

/**
 * The type values that AvatarTag accepts.
 */

/**
 * Props controlled by AvatarTag that will be passed to the avatar component.
 * These props are managed internally by AvatarTag.
 */

/**
 * Common props shared across all AvatarTag types.
 */

/**
 * Props for user avatar tags with circular avatars.
 */

/**
 * Props for other/teams avatar tags with square avatars.
 */

/**
 * Props for agent avatar tags with hexagonal avatars.
 */

/**
 * Props for AvatarTag component. Uses discriminated union based on `type`.
 */

var styles = {
  baseStyles: "_zulpv77o _2rko1rr0 _11c8wadc _1dqonqa1 _189ee4h9 _1rjcze3t _1mou1b66 _195g1b66 _1e0c116y _vchhusvi _1ul9idpf _p12ff6dh _4t3iv47k _kqswh2mm _4cvr1h6o _s7n4nkob _bfhksm61 _syazi7uo _80om73ad _y4tii2wt _bozgze3t _1rfu1q9c",
  noMarginStyles: "_1mouze3t _195gze3t",
  otherBaseStyles: "_2rko12b0 _y4ti1b66",
  agentBaseStyles: "_2rko12b0 _y4ti1b66",
  removableStyles: "_y4ti1l7b _1ul98pqr",
  userRemovableStyles: "_y4ti1l7b _1ul98pqr",
  avatarStyles: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rko1rr0 _1reo15vq _18m915vq _1e0c116y _4cvr1h6o _1o9zidpf _ahbq1n1a",
  otherAvatarStyles: "_2rko12b0",
  agentAvatarStyles: "_2rkoidpf",
  textStyles: "_1reo15vq _18m915vq _16jlkb7n _1o9zkb7n _i0dlf1ug _o5721q9c _1ul9idpf _syazi7uo",
  textEllipsis: "_1bto1l2s",
  textClip: "_1btozryt",
  afterStyles: "_16jlidpf _1o9zidpf _i0dl1wug _1e0c1txw _4cvr1h6o _lcxv1wug _ahbqv77o _kqswh2mm",
  afterMotionStyles: "_1ul9utpp",
  verifiedIconStyles: "_1e0c116y _4cvr1h6o _1o9zidpf _syaz6txe _ahbqt94y",
  focusRingStyles: "_1ygbdfik _1ah3v77o",
  childFocusRingStyles: "_1a37dfik _1cwgv77o",
  interactiveBaseStyles: "_80omtlke _7nm0v77o _59381r31 _yha2glyw _1nmznqa1 _1ufy15vq _turg15vq _jr6g1snc _1ymragmp _1y1s10yn _1hw7116y _6wji1h6o _1k6fidpf _43dsjdj5 _jwdiagmp _1cayjdj5 _102s1snc _yi8hagmp _h79h10yn _9m7f1r31 _w7swglyw _15a9nqa1 _jxlhagmp",
  interactiveHoverStyles: "_fs7a1r31 _1uxk8stv _12u8nqa1 _irr31dpa _oxk4jdj5 _1di6fcek",
  interactiveMotionStyles: "_v564k6bl _1ggl5xtf",
  activeMotionStyles: "_1reo15vq _18m915vq"
};

/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-important-styles */
// Border color style - gray only for AvatarTag.
// Uses the new color.border.accent.gray.subtle token directly so no OKLCH/color-mix
// runtime transforms are needed.
var borderColorStyles = {
  root: "_119bmsup"
};

// Border filter styles - base state
var borderFilterStyles = {
  root: "_1h6dip4g"
};

/* eslint-enable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-important-styles */

/**
 * __AvatarTag__
 *
 * AvatarTag is a specialized tag for representing people, teams/other entities, or agents with an avatar and name.
 * The visual appearance (round, square, or hexagonal) is determined by the `type` prop.
 */
var AvatarTagComponent = /*#__PURE__*/forwardRef(function AvatarTag(_ref, ref) {
  var text = _ref.text,
    type = _ref.type,
    AvatarComponent = _ref.avatar,
    href = _ref.href,
    linkComponent = _ref.linkComponent,
    _ref$isRemovable = _ref.isRemovable,
    isRemovable = _ref$isRemovable === void 0 ? true : _ref$isRemovable,
    removeButtonLabel = _ref.removeButtonLabel,
    onBeforeRemoveAction = _ref.onBeforeRemoveAction,
    onAfterRemoveAction = _ref.onAfterRemoveAction,
    testId = _ref.testId,
    isVerified = _ref.isVerified,
    maxWidth = _ref.maxWidth,
    _ref$hasMargin = _ref.hasMargin,
    hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
    onClick = _ref.onClick,
    other = _objectWithoutProperties(_ref, _excluded);
  var isMotionEnabled = fg('platform-dst-motion-uplift-labels');
  var _useTagRemoval = useTagRemoval(onBeforeRemoveAction),
    status = _useTagRemoval.status,
    handleRemoveRequest = _useTagRemoval.handleRemoveRequest,
    onKeyPress = _useTagRemoval.onKeyPress,
    removingTag = _useTagRemoval.removingTag,
    showingTag = _useTagRemoval.showingTag;
  var onShrinkOutExitComplete = useCallback(function () {
    onAfterRemoveAction === null || onAfterRemoveAction === void 0 || onAfterRemoveAction(text);
  }, [onAfterRemoveAction, text]);
  var _useLink = useLink(href, linkComponent),
    isLink = _useLink.isLink,
    LinkComponent = _useLink.LinkComponent;
  var _useButtonInteraction = useButtonInteraction(),
    isLinkHovered = _useButtonInteraction.isLinkHovered,
    isOverButton = _useButtonInteraction.isOverButton,
    isButtonFocused = _useButtonInteraction.isButtonFocused,
    isLinkFocused = _useButtonInteraction.isLinkFocused,
    buttonHandlers = _useButtonInteraction.buttonHandlers,
    linkHandlers = _useButtonInteraction.linkHandlers;

  // Determine styles based on type
  var isOtherType = type === 'other';
  var isAgentType = type === 'agent';
  var isUserType = type === 'user';

  // isVerified is only available for 'other' type
  var showVerified = isOtherType && isVerified;

  // Determine avatar appearance based on type
  var avatarAppearance = isUserType ? 'circle' : isAgentType ? 'hexagon' : 'square';

  // Determine remove button shape based on type
  var removeButtonShape = isUserType ? 'circle' : 'default';
  var removeButton = useRemoveButton({
    isRemovable: isRemovable,
    tagText: text,
    removeButtonLabel: removeButtonLabel,
    testId: testId,
    handleRemoveRequest: handleRemoveRequest,
    removingTag: removingTag,
    showingTag: showingTag,
    onKeyPress: onKeyPress,
    shape: removeButtonShape,
    buttonHandlers: buttonHandlers
  });

  // Render the avatar with controlled props, then clone so our props are applied
  var controlledProps = {
    size: 'xxsmall',
    appearance: avatarAppearance,
    borderColor: 'transparent'
  };
  var AvatarComponentTyped = AvatarComponent;
  var rendered = /*#__PURE__*/React.createElement(AvatarComponentTyped, controlledProps);
  var avatarElement =
  // eslint-disable-next-line @repo/internal/react/no-clone-element
  /*#__PURE__*/isValidElement(rendered) ? /*#__PURE__*/cloneElement(rendered, controlledProps) : rendered;
  var renderTagContent = function renderTagContent(tagRef) {
    var isEntering = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    var isExiting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    var hasEllipsis = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
    return /*#__PURE__*/React.createElement("span", _extends({}, other, {
      ref: tagRef,
      "data-testid": testId
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- maxWidth is a runtime consumer value
      ,
      style: maxWidth !== undefined ? {
        maxWidth: maxWidth
      } : undefined,
      className: ax([styles.baseStyles, (isMotionEnabled || !hasMargin) && styles.noMarginStyles, isOtherType && styles.otherBaseStyles, isAgentType && styles.agentBaseStyles, borderColorStyles.root, borderFilterStyles.root, isLink && styles.interactiveBaseStyles, isLink && styles.focusRingStyles, isLink && isMotionEnabled && styles.interactiveMotionStyles, (isEntering || isExiting) && styles.activeMotionStyles, isLink && isLinkHovered && !isOverButton && styles.interactiveHoverStyles, isRemovable && !isUserType && styles.removableStyles, isRemovable && isUserType && styles.userRemovableStyles, isLinkFocused && !isButtonFocused && styles.childFocusRingStyles])
    }), /*#__PURE__*/React.createElement(LinkWrapper, {
      isLink: isLink,
      href: href,
      LinkComponent: LinkComponent,
      testId: testId,
      linkHandlers: linkHandlers,
      onClick: onClick
    }, /*#__PURE__*/React.createElement("span", {
      className: ax([styles.avatarStyles, isOtherType && styles.otherAvatarStyles, isAgentType && styles.agentAvatarStyles])
    }, avatarElement), /*#__PURE__*/React.createElement("span", {
      "data-tag-text": true,
      className: ax([styles.textStyles, hasEllipsis === false ? styles.textClip : styles.textEllipsis])
    }, text)), showVerified && /*#__PURE__*/React.createElement("span", {
      className: ax([styles.verifiedIconStyles])
    }, /*#__PURE__*/React.createElement(StatusVerifiedIcon, {
      label: "Verified",
      size: "small"
    })), removeButton && /*#__PURE__*/React.createElement("span", {
      className: ax([styles.afterStyles, isMotionEnabled && styles.afterMotionStyles])
    }, !isExiting && removeButton));
  };
  if (isMotionEnabled) {
    return /*#__PURE__*/React.createElement(TagMotion, {
      forwardedRef: ref,
      hasMargin: hasMargin,
      onExitComplete: isRemovable ? onShrinkOutExitComplete : undefined,
      status: status
    }, function (_ref2) {
      var hasEllipsis = _ref2.hasEllipsis,
        isEntering = _ref2.isEntering,
        isExiting = _ref2.isExiting,
        motionRef = _ref2.ref;
      return renderTagContent(motionRef, isEntering, isExiting, hasEllipsis);
    });
  }
  return /*#__PURE__*/React.createElement(RemovableWrapper, {
    isRemovable: isRemovable,
    status: status,
    onShrinkOutExitComplete: isRemovable ? onShrinkOutExitComplete : undefined
  }, renderTagContent(ref));
});

/**
 * __Avatar tag__
 */
var AvatarTag = markAsTagMotionCapable( /*#__PURE__*/memo(AvatarTagComponent));
export default AvatarTag;