@atlaskit/tag
Version:
A tag labels UI objects for quick recognition and navigation.
237 lines (219 loc) • 12 kB
JavaScript
/* avatar-tag.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./avatar-tag.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _statusVerified = _interopRequireDefault(require("@atlaskit/icon/core/status-verified"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _linkWrapper = require("./link-wrapper");
var _removableWrapper = require("./removable-wrapper");
var _tagMotion = require("./tag-motion");
var _tagMotionCapability = require("./tag-motion-capability");
var _useButtonInteraction2 = require("./use-button-interaction");
var _useLink2 = require("./use-link");
var _useRemoveButton = require("./use-remove-button");
var _useTagRemoval2 = require("./use-tag-removal");
var _excluded = ["text", "type", "avatar", "href", "linkComponent", "isRemovable", "removeButtonLabel", "onBeforeRemoveAction", "onAfterRemoveAction", "testId", "isVerified", "maxWidth", "hasMargin", "onClick"]; // Clips avatar-tag text during motion and restores measured truncation after it settles.
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
* 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__*/(0, _react.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var isMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-labels');
var _useTagRemoval = (0, _useTagRemoval2.useTagRemoval)(onBeforeRemoveAction),
status = _useTagRemoval.status,
handleRemoveRequest = _useTagRemoval.handleRemoveRequest,
onKeyPress = _useTagRemoval.onKeyPress,
removingTag = _useTagRemoval.removingTag,
showingTag = _useTagRemoval.showingTag;
var onShrinkOutExitComplete = (0, _react.useCallback)(function () {
onAfterRemoveAction === null || onAfterRemoveAction === void 0 || onAfterRemoveAction(text);
}, [onAfterRemoveAction, text]);
var _useLink = (0, _useLink2.useLink)(href, linkComponent),
isLink = _useLink.isLink,
LinkComponent = _useLink.LinkComponent;
var _useButtonInteraction = (0, _useButtonInteraction2.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 = (0, _useRemoveButton.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__*/(0, _react.isValidElement)(rendered) ? /*#__PURE__*/(0, _react.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", (0, _extends2.default)({}, 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: (0, _runtime.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.LinkWrapper, {
isLink: isLink,
href: href,
LinkComponent: LinkComponent,
testId: testId,
linkHandlers: linkHandlers,
onClick: onClick
}, /*#__PURE__*/React.createElement("span", {
className: (0, _runtime.ax)([styles.avatarStyles, isOtherType && styles.otherAvatarStyles, isAgentType && styles.agentAvatarStyles])
}, avatarElement), /*#__PURE__*/React.createElement("span", {
"data-tag-text": true,
className: (0, _runtime.ax)([styles.textStyles, hasEllipsis === false ? styles.textClip : styles.textEllipsis])
}, text)), showVerified && /*#__PURE__*/React.createElement("span", {
className: (0, _runtime.ax)([styles.verifiedIconStyles])
}, /*#__PURE__*/React.createElement(_statusVerified.default, {
label: "Verified",
size: "small"
})), removeButton && /*#__PURE__*/React.createElement("span", {
className: (0, _runtime.ax)([styles.afterStyles, isMotionEnabled && styles.afterMotionStyles])
}, !isExiting && removeButton));
};
if (isMotionEnabled) {
return /*#__PURE__*/React.createElement(_tagMotion.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.RemovableWrapper, {
isRemovable: isRemovable,
status: status,
onShrinkOutExitComplete: isRemovable ? onShrinkOutExitComplete : undefined
}, renderTagContent(ref));
});
/**
* __Avatar tag__
*/
var AvatarTag = (0, _tagMotionCapability.markAsTagMotionCapable)( /*#__PURE__*/(0, _react.memo)(AvatarTagComponent));
var _default = exports.default = AvatarTag;