@atlaskit/mention 27.15.2 → 27.17.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/mention
 
+## 27.17.0
+
+### Minor Changes
+
+- [`6997a74055219`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6997a74055219) -
+  Add profile card on hover in the mentions typeahead for agent mentions
+
+## 27.16.0
+
+### Minor Changes
+
+- [`13e86ff9f1588`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/13e86ff9f1588) -
+  [ux] Display avatars for mention nodes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 27.15.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -31,6 +31,9 @@
 		{
 			"path": "../../../design-system/avatar/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/css/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/focus-ring/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -31,6 +31,9 @@
 		{
 			"path": "../../../design-system/avatar/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/css/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/focus-ring/afm-products/tsconfig.json"
 		},

package/dist/cjs/_constants.js

@@ -3,5 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ELEMENTS_CHANNEL = void 0;
-var ELEMENTS_CHANNEL = exports.ELEMENTS_CHANNEL = 'fabric-elements';
+exports.UNKNOWN_USER_ID = exports.ELEMENTS_CHANNEL = void 0;
+var ELEMENTS_CHANNEL = exports.ELEMENTS_CHANNEL = 'fabric-elements';
+var UNKNOWN_USER_ID = exports.UNKNOWN_USER_ID = '_|unknown|_';

package/dist/cjs/components/Mention/PrimitiveMention.js

@@ -12,7 +12,7 @@ var _react = require("@emotion/react");
 var _react2 = require("react");
 var _mentionStyle = require("./mention-style");
 var _templateObject;
-var _excluded = ["mentionType"];
+var _excluded = ["isAvatarVisible", "mentionType"];
 /* eslint-disable @atlaskit/design-system/no-html-button */
 /**
  * @jsxRuntime classic
@@ -24,13 +24,16 @@ var getStyle = function getStyle(_ref, property) {
   return _mentionStyle.mentionStyle[mentionType][property];
 };
 var PrimitiveMention = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref2, ref) {
-  var mentionType = _ref2.mentionType,
+  var _ref2$isAvatarVisible = _ref2.isAvatarVisible,
+    isAvatarVisible = _ref2$isAvatarVisible === void 0 ? false : _ref2$isAvatarVisible,
+    mentionType = _ref2.mentionType,
     other = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   return (0, _react.jsx)("span", (0, _extends2.default)({
-    ref: ref
+    ref: ref,
+    "data-avatar-visible": isAvatarVisible || undefined
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\tdisplay: inline;\n\t\t\t\tborder: ", " solid ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: 20px;\n\t\t\t\tcursor: pointer;\n\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\tline-height: 1.714;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tfont-weight: ", ";\n\t\t\t\tword-break: break-word;\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t}\n\t\t\t\t&:active {\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t}\n\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
+    css: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tborder: ", " solid ", ";\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\t\tline-height: 1.714;\n\t\t\t\t\tfont-size: 1em;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tword-break: break-word;\n\t\t\t\t\t&[data-avatar-visible='true'] {\n\t\t\t\t\t\tpadding: 1px 0.3em 1px 0.23em;\n\t\t\t\t\t}\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t\t&:active {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
       mentionType: mentionType
     }, 'borderColor'), getStyle({
       mentionType: mentionType

package/dist/cjs/components/Mention/ResourcedMention.js

@@ -123,10 +123,14 @@ var ResourcedMention = exports.default = /*#__PURE__*/function (_React$PureCompo
         isDisabled: props.isDisabled,
         disabledTooltip: props.disabledTooltip,
         accessLevel: props.accessLevel,
+        appType: props.appType,
+        avatarUrl: props.avatarUrl,
+        isAvatarImagePreShaped: props.isAvatarImagePreShaped,
         localId: props.localId,
         onClick: props.onClick,
         onMouseEnter: props.onMouseEnter,
         onMouseLeave: props.onMouseLeave,
+        renderAvatarSlot: props.renderAvatarSlot,
         ssrPlaceholderId: props.ssrPlaceholderId
       });
     }

package/dist/cjs/components/Mention/index.compiled.css

@@ -0,0 +1,17 @@
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._2rkoidpf{border-radius:0}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
+._1e0c116y{display:inline-flex}
+._1e0c1ule{display:block}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
+._5ral1dfr{object-fit:cover}
+._mkrz1l17{clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)}
+._s7n410e5{vertical-align:-.125em}
+._s7n41q9y{vertical-align:baseline}

package/dist/cjs/components/Mention/index.js

@@ -1,10 +1,20 @@
+/* index.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.UNKNOWN_USER_ID = exports.MentionInternal = exports.ANALYTICS_HOVER_DELAY = void 0;
+exports.MentionInternal = exports.ANALYTICS_HOVER_DELAY = void 0;
+Object.defineProperty(exports, "UNKNOWN_USER_ID", {
+  enumerable: true,
+  get: function get() {
+    return _constants.UNKNOWN_USER_ID;
+  }
+});
+exports.default = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -18,6 +28,7 @@ var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvi
 var _PrimitiveMention = _interopRequireDefault(require("./PrimitiveMention"));
 var _NoAccessTooltip = _interopRequireDefault(require("../NoAccessTooltip"));
 var _DisabledMentionTooltip = _interopRequireDefault(require("../DisabledMentionTooltip"));
+var _constants = require("../../_constants");
 var _types = require("../../types");
 var _analytics = require("../../util/analytics");
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
@@ -29,12 +40,23 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-deprecated-imports, @typescript-eslint/ban-types -- Preserve existing mention implementation while focus-ring usage is reviewed separately. */
 var ANALYTICS_HOVER_DELAY = exports.ANALYTICS_HOVER_DELAY = 1000;
-var UNKNOWN_USER_ID = exports.UNKNOWN_USER_ID = '_|unknown|_';
+var avatarStyles = null;
+var avatarFallbackStyles = null;
+var avatarImageStyles = null;
+var agentAvatarStyles = null;
 var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
   function MentionInternal(props) {
     var _this;
     (0, _classCallCheck2.default)(this, MentionInternal);
     _this = _callSuper(this, MentionInternal, [props]);
+    (0, _defineProperty2.default)(_this, "state", {
+      hasAvatarError: false
+    });
+    (0, _defineProperty2.default)(_this, "handleAvatarError", function () {
+      _this.setState({
+        hasAvatarError: true
+      });
+    });
     (0, _defineProperty2.default)(_this, "handleOnClick", function (e) {
       var _this$props = _this.props,
         id = _this$props.id,
@@ -127,17 +149,26 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
   }, {
     key: "render",
     value: function render() {
-      var handleOnClick = this.handleOnClick,
+      var handleAvatarError = this.handleAvatarError,
+        handleOnClick = this.handleOnClick,
         handleOnMouseEnter = this.handleOnMouseEnter,
         handleOnMouseLeave = this.handleOnMouseLeave,
         props = this.props;
-      var text = props.text,
+      var appType = props.appType,
+        avatarUrl = props.avatarUrl,
+        text = props.text,
         id = props.id,
         accessLevel = props.accessLevel,
         localId = props.localId,
-        disabledTooltip = props.disabledTooltip;
+        disabledTooltip = props.disabledTooltip,
+        isAvatarImagePreShaped = props.isAvatarImagePreShaped,
+        renderAvatarSlot = props.renderAvatarSlot;
       var mentionType = this.getMentionType();
-      var failedMention = text === "@".concat(UNKNOWN_USER_ID);
+      var failedMention = text === "@".concat(_constants.UNKNOWN_USER_ID);
+      var showAvatarSlot = Boolean(renderAvatarSlot) && !failedMention;
+      var visibleText = showAvatarSlot && text.startsWith('@') ? text.slice(1) : text;
+      var shouldApplyAgentShape = appType === 'agent' && !isAvatarImagePreShaped;
+      var shouldRenderAvatar = avatarUrl && !this.state.hasAvatarError;
       var showRestrictedTooltip = mentionType === _types.MentionType.RESTRICTED;
       var showDisabledTooltip = mentionType === _types.MentionType.DISABLED && !!disabledTooltip;
 
@@ -154,6 +185,7 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
         'aria-label': "".concat(text || '@...', " \u2014 ").concat(disabledTooltip)
       } : {}) : {};
       var mentionComponent = /*#__PURE__*/_react.default.createElement(_focusRing.default, null, /*#__PURE__*/_react.default.createElement(_PrimitiveMention.default, (0, _extends2.default)({
+        isAvatarVisible: showAvatarSlot,
         mentionType: mentionType,
         onClick: handleOnClick,
         onMouseEnter: handleOnMouseEnter,
@@ -162,7 +194,22 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
         "data-testid": "mention-".concat(id),
         "data-mention-type": mentionType,
         "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
-      }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : text || '@...'));
+      }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : showAvatarSlot ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+        "aria-hidden": "true",
+        "data-testid": "mention-avatar-slot",
+        className: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb7vkz _4t3i7vkz _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n41q9y"])
+      }, shouldRenderAvatar ? /*#__PURE__*/_react.default.createElement("img", {
+        alt: "",
+        decoding: "async",
+        draggable: false,
+        height: 16,
+        loading: "lazy",
+        onError: handleAvatarError,
+        src: avatarUrl,
+        "data-testid": "mention-avatar",
+        width: 16,
+        className: (0, _runtime.ax)(["_1e0c1ule _1bsb1osq _4t3i1osq _5ral1dfr"])
+      }) : this.state.hasAvatarError ? '@' : null), /*#__PURE__*/_react.default.createElement("span", null, visibleText || '...')) : text || '@...'));
       var ssrPlaceholderProp = props.ssrPlaceholderId ? {
         'data-ssr-placeholder': props.ssrPlaceholderId
       } : {};
@@ -193,6 +240,17 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
         spellCheck: false
       }, ssrPlaceholderProp), /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, wrappedMention)));
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.avatarUrl !== state.avatarUrl) {
+        return {
+          avatarUrl: props.avatarUrl,
+          hasAvatarError: false
+        };
+      }
+      return null;
+    }
   }]);
 }(_react.default.PureComponent);
 var MentionWithAnalytics = (0, _withAnalyticsEvents.default)({

package/dist/cjs/util/analytics.js

@@ -12,7 +12,7 @@ var _types = require("../types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/mention";
-var packageVersion = "27.15.1";
+var packageVersion = "27.16.0";
 var SLI_EVENT_TYPE = exports.SLI_EVENT_TYPE = 'sli';
 var SMART_EVENT_TYPE = exports.SMART_EVENT_TYPE = 'smart';
 var fireAnalyticsMentionTypeaheadEvent = exports.fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

package/dist/es2019/_constants.js

@@ -1 +1,2 @@
-export const ELEMENTS_CHANNEL = 'fabric-elements';
+export const ELEMENTS_CHANNEL = 'fabric-elements';
+export const UNKNOWN_USER_ID = '_|unknown|_';

package/dist/es2019/components/Mention/PrimitiveMention.js

@@ -12,42 +12,47 @@ const getStyle = ({
   mentionType
 }, property) => mentionStyle[mentionType][property];
 const PrimitiveMention = /*#__PURE__*/forwardRef(({
+  isAvatarVisible = false,
   mentionType,
   ...other
 }, ref) => {
   return jsx("span", _extends({
-    ref: ref
+    ref: ref,
+    "data-avatar-visible": isAvatarVisible || undefined
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: css`
-				display: inline;
-				border: ${"var(--ds-border-width, 1px)"} solid ${getStyle({
+					display: inline;
+					border: ${"var(--ds-border-width, 1px)"} solid ${getStyle({
       mentionType
     }, 'borderColor')};
-				background: ${getStyle({
+					background: ${getStyle({
       mentionType
     }, 'background')};
-				color: ${getStyle({
+					color: ${getStyle({
       mentionType
     }, 'text')};
-				border-radius: 20px;
-				cursor: pointer;
-				padding: 0 0.3em 2px 0.23em;
-				line-height: 1.714;
-				font-size: 1em;
-				font-weight: ${"var(--ds-font-weight-regular, 400)"};
-				word-break: break-word;
-				&:hover {
-					background: ${getStyle({
+					border-radius: 20px;
+					cursor: pointer;
+					padding: 0 0.3em 2px 0.23em;
+					line-height: 1.714;
+					font-size: 1em;
+					font-weight: ${"var(--ds-font-weight-regular, 400)"};
+					word-break: break-word;
+					&[data-avatar-visible='true'] {
+						padding: 1px 0.3em 1px 0.23em;
+					}
+					&:hover {
+						background: ${getStyle({
       mentionType
     }, 'hoveredBackground')};
-				}
-				&:active {
-					background: ${getStyle({
+					}
+					&:active {
+						background: ${getStyle({
       mentionType
     }, 'pressedBackground')};
-				}
-			`
+					}
+				`
   }, other));
 });
 export default PrimitiveMention;

package/dist/es2019/components/Mention/ResourcedMention.js

@@ -97,10 +97,14 @@ export default class ResourcedMention extends React.PureComponent {
       isDisabled: props.isDisabled,
       disabledTooltip: props.disabledTooltip,
       accessLevel: props.accessLevel,
+      appType: props.appType,
+      avatarUrl: props.avatarUrl,
+      isAvatarImagePreShaped: props.isAvatarImagePreShaped,
       localId: props.localId,
       onClick: props.onClick,
       onMouseEnter: props.onMouseEnter,
       onMouseLeave: props.onMouseLeave,
+      renderAvatarSlot: props.renderAvatarSlot,
       ssrPlaceholderId: props.ssrPlaceholderId
     });
   }

package/dist/es2019/components/Mention/index.compiled.css

@@ -0,0 +1,17 @@
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._2rkoidpf{border-radius:0}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
+._1e0c116y{display:inline-flex}
+._1e0c1ule{display:block}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
+._5ral1dfr{object-fit:cover}
+._mkrz1l17{clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)}
+._s7n410e5{vertical-align:-.125em}
+._s7n41q9y{vertical-align:baseline}

package/dist/es2019/components/Mention/index.js

@@ -1,5 +1,8 @@
+/* index.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/design-system/no-deprecated-imports, @typescript-eslint/ban-types -- Preserve existing mention implementation while focus-ring usage is reviewed separately. */
 import React from 'react';
 import FocusRing from '@atlaskit/focus-ring';
@@ -7,6 +10,7 @@ import MessagesIntlProvider from '../MessagesIntlProvider';
 import PrimitiveMention from './PrimitiveMention';
 import AsyncNoAccessTooltip from '../NoAccessTooltip';
 import AsyncDisabledMentionTooltip from '../DisabledMentionTooltip';
+import { UNKNOWN_USER_ID } from '../../_constants';
 import { isRestricted, MentionType } from '../../types';
 import { fireAnalyticsMentionEvent } from '../../util/analytics';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
@@ -14,10 +18,22 @@ import { UFOExperienceState } from '@atlaskit/ufo';
 import { UnknownUserError } from '../../util/i18n';
 import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
 export const ANALYTICS_HOVER_DELAY = 1000;
-export const UNKNOWN_USER_ID = '_|unknown|_';
+export { UNKNOWN_USER_ID } from '../../_constants';
+const avatarStyles = null;
+const avatarFallbackStyles = null;
+const avatarImageStyles = null;
+const agentAvatarStyles = null;
 export class MentionInternal extends React.PureComponent {
   constructor(props) {
     super(props);
+    _defineProperty(this, "state", {
+      hasAvatarError: false
+    });
+    _defineProperty(this, "handleAvatarError", () => {
+      this.setState({
+        hasAvatarError: true
+      });
+    });
     _defineProperty(this, "handleOnClick", e => {
       const {
         id,
@@ -85,6 +101,15 @@ export class MentionInternal extends React.PureComponent {
   componentDidMount() {
     mentionRenderedUfoExperience.getInstance(this.props.id).success();
   }
+  static getDerivedStateFromProps(props, state) {
+    if (props.avatarUrl !== state.avatarUrl) {
+      return {
+        avatarUrl: props.avatarUrl,
+        hasAvatarError: false
+      };
+    }
+    return null;
+  }
   componentWillUnmount() {
     if (this.hoverTimeout) {
       clearTimeout(this.hoverTimeout);
@@ -103,20 +128,29 @@ export class MentionInternal extends React.PureComponent {
   }
   render() {
     const {
+      handleAvatarError,
       handleOnClick,
       handleOnMouseEnter,
       handleOnMouseLeave,
       props
     } = this;
     const {
+      appType,
+      avatarUrl,
       text,
       id,
       accessLevel,
       localId,
-      disabledTooltip
+      disabledTooltip,
+      isAvatarImagePreShaped,
+      renderAvatarSlot
     } = props;
     const mentionType = this.getMentionType();
     const failedMention = text === `@${UNKNOWN_USER_ID}`;
+    const showAvatarSlot = Boolean(renderAvatarSlot) && !failedMention;
+    const visibleText = showAvatarSlot && text.startsWith('@') ? text.slice(1) : text;
+    const shouldApplyAgentShape = appType === 'agent' && !isAvatarImagePreShaped;
+    const shouldRenderAvatar = avatarUrl && !this.state.hasAvatarError;
     const showRestrictedTooltip = mentionType === MentionType.RESTRICTED;
     const showDisabledTooltip = mentionType === MentionType.DISABLED && !!disabledTooltip;
 
@@ -134,6 +168,7 @@ export class MentionInternal extends React.PureComponent {
       } : {})
     } : {};
     const mentionComponent = /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(PrimitiveMention, _extends({
+      isAvatarVisible: showAvatarSlot,
       mentionType: mentionType,
       onClick: handleOnClick,
       onMouseEnter: handleOnMouseEnter,
@@ -142,7 +177,22 @@ export class MentionInternal extends React.PureComponent {
       "data-testid": `mention-${id}`,
       "data-mention-type": mentionType,
       "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
-    }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : text || '@...'));
+    }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : showAvatarSlot ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": "true",
+      "data-testid": "mention-avatar-slot",
+      className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb7vkz _4t3i7vkz _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n41q9y"])
+    }, shouldRenderAvatar ? /*#__PURE__*/React.createElement("img", {
+      alt: "",
+      decoding: "async",
+      draggable: false,
+      height: 16,
+      loading: "lazy",
+      onError: handleAvatarError,
+      src: avatarUrl,
+      "data-testid": "mention-avatar",
+      width: 16,
+      className: ax(["_1e0c1ule _1bsb1osq _4t3i1osq _5ral1dfr"])
+    }) : this.state.hasAvatarError ? '@' : null), /*#__PURE__*/React.createElement("span", null, visibleText || '...')) : text || '@...'));
     const ssrPlaceholderProp = props.ssrPlaceholderId ? {
       'data-ssr-placeholder': props.ssrPlaceholderId
     } : {};

package/dist/es2019/util/analytics.js

@@ -2,7 +2,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 import { ELEMENTS_CHANNEL } from '../_constants';
 import { ComponentNames, isSpecialMentionText } from '../types';
 const packageName = "@atlaskit/mention";
-const packageVersion = "27.15.1";
+const packageVersion = "27.16.0";
 export const SLI_EVENT_TYPE = 'sli';
 export const SMART_EVENT_TYPE = 'smart';
 export const fireAnalyticsMentionTypeaheadEvent = props => (action, duration, userIds = [], query) => {

package/dist/esm/_constants.js

@@ -1 +1,2 @@
-export var ELEMENTS_CHANNEL = 'fabric-elements';
+export var ELEMENTS_CHANNEL = 'fabric-elements';
+export var UNKNOWN_USER_ID = '_|unknown|_';

package/dist/esm/components/Mention/PrimitiveMention.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["mentionType"];
+var _excluded = ["isAvatarVisible", "mentionType"];
 /* eslint-disable @atlaskit/design-system/no-html-button */
 /**
  * @jsxRuntime classic
@@ -17,13 +17,16 @@ var getStyle = function getStyle(_ref, property) {
   return mentionStyle[mentionType][property];
 };
 var PrimitiveMention = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var mentionType = _ref2.mentionType,
+  var _ref2$isAvatarVisible = _ref2.isAvatarVisible,
+    isAvatarVisible = _ref2$isAvatarVisible === void 0 ? false : _ref2$isAvatarVisible,
+    mentionType = _ref2.mentionType,
     other = _objectWithoutProperties(_ref2, _excluded);
   return jsx("span", _extends({
-    ref: ref
+    ref: ref,
+    "data-avatar-visible": isAvatarVisible || undefined
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\tdisplay: inline;\n\t\t\t\tborder: ", " solid ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: 20px;\n\t\t\t\tcursor: pointer;\n\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\tline-height: 1.714;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tfont-weight: ", ";\n\t\t\t\tword-break: break-word;\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t}\n\t\t\t\t&:active {\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t}\n\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t\tdisplay: inline;\n\t\t\t\t\tborder: ", " solid ", ";\n\t\t\t\t\tbackground: ", ";\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tpadding: 0 0.3em 2px 0.23em;\n\t\t\t\t\tline-height: 1.714;\n\t\t\t\t\tfont-size: 1em;\n\t\t\t\t\tfont-weight: ", ";\n\t\t\t\t\tword-break: break-word;\n\t\t\t\t\t&[data-avatar-visible='true'] {\n\t\t\t\t\t\tpadding: 1px 0.3em 1px 0.23em;\n\t\t\t\t\t}\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t\t&:active {\n\t\t\t\t\t\tbackground: ", ";\n\t\t\t\t\t}\n\t\t\t\t"])), "var(--ds-border-width, 1px)", getStyle({
       mentionType: mentionType
     }, 'borderColor'), getStyle({
       mentionType: mentionType

package/dist/esm/components/Mention/ResourcedMention.js

@@ -114,10 +114,14 @@ var ResourcedMention = /*#__PURE__*/function (_React$PureComponent) {
         isDisabled: props.isDisabled,
         disabledTooltip: props.disabledTooltip,
         accessLevel: props.accessLevel,
+        appType: props.appType,
+        avatarUrl: props.avatarUrl,
+        isAvatarImagePreShaped: props.isAvatarImagePreShaped,
         localId: props.localId,
         onClick: props.onClick,
         onMouseEnter: props.onMouseEnter,
         onMouseLeave: props.onMouseLeave,
+        renderAvatarSlot: props.renderAvatarSlot,
         ssrPlaceholderId: props.ssrPlaceholderId
       });
     }

package/dist/esm/components/Mention/index.compiled.css

@@ -0,0 +1,17 @@
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
+._2rkoidpf{border-radius:0}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
+._1e0c116y{display:inline-flex}
+._1e0c1ule{display:block}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
+._5ral1dfr{object-fit:cover}
+._mkrz1l17{clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%)}
+._s7n410e5{vertical-align:-.125em}
+._s7n41q9y{vertical-align:baseline}

package/dist/esm/components/Mention/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -5,6 +6,8 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -16,6 +19,7 @@ import MessagesIntlProvider from '../MessagesIntlProvider';
 import PrimitiveMention from './PrimitiveMention';
 import AsyncNoAccessTooltip from '../NoAccessTooltip';
 import AsyncDisabledMentionTooltip from '../DisabledMentionTooltip';
+import { UNKNOWN_USER_ID } from '../../_constants';
 import { isRestricted, MentionType } from '../../types';
 import { fireAnalyticsMentionEvent } from '../../util/analytics';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
@@ -23,12 +27,24 @@ import { UFOExperienceState } from '@atlaskit/ufo';
 import { UnknownUserError } from '../../util/i18n';
 import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
 export var ANALYTICS_HOVER_DELAY = 1000;
-export var UNKNOWN_USER_ID = '_|unknown|_';
+export { UNKNOWN_USER_ID } from '../../_constants';
+var avatarStyles = null;
+var avatarFallbackStyles = null;
+var avatarImageStyles = null;
+var agentAvatarStyles = null;
 export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
   function MentionInternal(props) {
     var _this;
     _classCallCheck(this, MentionInternal);
     _this = _callSuper(this, MentionInternal, [props]);
+    _defineProperty(_this, "state", {
+      hasAvatarError: false
+    });
+    _defineProperty(_this, "handleAvatarError", function () {
+      _this.setState({
+        hasAvatarError: true
+      });
+    });
     _defineProperty(_this, "handleOnClick", function (e) {
       var _this$props = _this.props,
         id = _this$props.id,
@@ -121,17 +137,26 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var handleOnClick = this.handleOnClick,
+      var handleAvatarError = this.handleAvatarError,
+        handleOnClick = this.handleOnClick,
         handleOnMouseEnter = this.handleOnMouseEnter,
         handleOnMouseLeave = this.handleOnMouseLeave,
         props = this.props;
-      var text = props.text,
+      var appType = props.appType,
+        avatarUrl = props.avatarUrl,
+        text = props.text,
         id = props.id,
         accessLevel = props.accessLevel,
         localId = props.localId,
-        disabledTooltip = props.disabledTooltip;
+        disabledTooltip = props.disabledTooltip,
+        isAvatarImagePreShaped = props.isAvatarImagePreShaped,
+        renderAvatarSlot = props.renderAvatarSlot;
       var mentionType = this.getMentionType();
       var failedMention = text === "@".concat(UNKNOWN_USER_ID);
+      var showAvatarSlot = Boolean(renderAvatarSlot) && !failedMention;
+      var visibleText = showAvatarSlot && text.startsWith('@') ? text.slice(1) : text;
+      var shouldApplyAgentShape = appType === 'agent' && !isAvatarImagePreShaped;
+      var shouldRenderAvatar = avatarUrl && !this.state.hasAvatarError;
       var showRestrictedTooltip = mentionType === MentionType.RESTRICTED;
       var showDisabledTooltip = mentionType === MentionType.DISABLED && !!disabledTooltip;
 
@@ -148,6 +173,7 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
         'aria-label': "".concat(text || '@...', " \u2014 ").concat(disabledTooltip)
       } : {}) : {};
       var mentionComponent = /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(PrimitiveMention, _extends({
+        isAvatarVisible: showAvatarSlot,
         mentionType: mentionType,
         onClick: handleOnClick,
         onMouseEnter: handleOnMouseEnter,
@@ -156,7 +182,22 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
         "data-testid": "mention-".concat(id),
         "data-mention-type": mentionType,
         "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
-      }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : text || '@...'));
+      }, disabledA11yProps), failedMention ? this.renderUnknownUserError(id) : showAvatarSlot ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        "aria-hidden": "true",
+        "data-testid": "mention-avatar-slot",
+        className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb7vkz _4t3i7vkz _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n41q9y"])
+      }, shouldRenderAvatar ? /*#__PURE__*/React.createElement("img", {
+        alt: "",
+        decoding: "async",
+        draggable: false,
+        height: 16,
+        loading: "lazy",
+        onError: handleAvatarError,
+        src: avatarUrl,
+        "data-testid": "mention-avatar",
+        width: 16,
+        className: ax(["_1e0c1ule _1bsb1osq _4t3i1osq _5ral1dfr"])
+      }) : this.state.hasAvatarError ? '@' : null), /*#__PURE__*/React.createElement("span", null, visibleText || '...')) : text || '@...'));
       var ssrPlaceholderProp = props.ssrPlaceholderId ? {
         'data-ssr-placeholder': props.ssrPlaceholderId
       } : {};
@@ -187,6 +228,17 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
         spellCheck: false
       }, ssrPlaceholderProp), /*#__PURE__*/React.createElement(MessagesIntlProvider, null, wrappedMention)));
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.avatarUrl !== state.avatarUrl) {
+        return {
+          avatarUrl: props.avatarUrl,
+          hasAvatarError: false
+        };
+      }
+      return null;
+    }
   }]);
 }(React.PureComponent);
 var MentionWithAnalytics = withAnalyticsEvents({

package/dist/esm/util/analytics.js

@@ -5,7 +5,7 @@ import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 import { ELEMENTS_CHANNEL } from '../_constants';
 import { ComponentNames, isSpecialMentionText } from '../types';
 var packageName = "@atlaskit/mention";
-var packageVersion = "27.15.1";
+var packageVersion = "27.16.0";
 export var SLI_EVENT_TYPE = 'sli';
 export var SMART_EVENT_TYPE = 'smart';
 export var fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

package/dist/types/_constants.d.ts

@@ -1 +1,2 @@
 export declare const ELEMENTS_CHANNEL = "fabric-elements";
+export declare const UNKNOWN_USER_ID = "_|unknown|_";

package/dist/types/components/Mention/PrimitiveMention.d.ts

@@ -1,6 +1,7 @@
 import { type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';
 import type { MentionType } from '../../types';
 export interface PrimitiveMentionProps extends HTMLAttributes<HTMLSpanElement> {
+    isAvatarVisible?: boolean;
     mentionType: MentionType;
 }
 declare const PrimitiveMention: ForwardRefExoticComponent<PrimitiveMentionProps & RefAttributes<HTMLSpanElement>>;

package/dist/types/components/Mention/ResourcedMention.d.ts

@@ -3,14 +3,18 @@ import { type MentionProvider } from '../../api/MentionResource';
 import { type MentionEventHandler } from '../../types';
 export interface Props {
     accessLevel?: string;
+    appType?: string | null;
+    avatarUrl?: string;
     disabledTooltip?: string;
     id: string;
+    isAvatarImagePreShaped?: boolean;
     isDisabled?: boolean;
     localId?: string;
     mentionProvider?: Promise<MentionProvider>;
     onClick?: MentionEventHandler;
     onMouseEnter?: MentionEventHandler;
     onMouseLeave?: MentionEventHandler;
+    renderAvatarSlot?: boolean;
     ssrPlaceholderId?: string;
     text: string;
 }

package/dist/types/components/Mention/index.d.ts

@@ -1,10 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag React.Fragment
+ */
 import React from 'react';
 import { type MentionEventHandler } from '../../types';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 export declare const ANALYTICS_HOVER_DELAY = 1000;
-export declare const UNKNOWN_USER_ID = "_|unknown|_";
+export { UNKNOWN_USER_ID } from '../../_constants';
 export type OwnProps = {
     accessLevel?: string;
+    appType?: string | null;
+    avatarUrl?: string;
     /**
      * Tooltip text shown on hover when the chip is disabled. Ignored when
      * `isDisabled` is false. When omitted, no tooltip is rendered even if
@@ -12,6 +19,7 @@ export type OwnProps = {
      */
     disabledTooltip?: string;
     id: string;
+    isAvatarImagePreShaped?: boolean;
     /**
      * When true, the mention chip is rendered in its disabled visual state
      * (`MentionType.DISABLED`) and click handlers are not invoked. Takes
@@ -24,14 +32,23 @@ export type OwnProps = {
     onHover?: () => void;
     onMouseEnter?: MentionEventHandler;
     onMouseLeave?: MentionEventHandler;
+    /** Whether the upstream integration has enabled the avatar treatment for this mention. */
+    renderAvatarSlot?: boolean;
     ssrPlaceholderId?: string;
     text: string;
 };
 export type Props = OwnProps & WithAnalyticsEventsProps;
-export declare class MentionInternal extends React.PureComponent<Props, {}> {
+type State = {
+    avatarUrl?: string;
+    hasAvatarError: boolean;
+};
+export declare class MentionInternal extends React.PureComponent<Props, State> {
     private hoverTimeout?;
+    state: State;
     constructor(props: Props);
     componentDidMount(): void;
+    static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null;
+    private handleAvatarError;
     private handleOnClick;
     private handleOnMouseEnter;
     private handleOnMouseLeave;

package/dist/types/types.d.ts

@@ -1,5 +1,11 @@
 import { type SyntheticEvent } from 'react';
 import { type ServiceConfig } from '@atlaskit/util-service-support/types';
+export interface MentionNodeData {
+    appType?: string | null;
+    avatarUrl?: string;
+    /** The image already contains its intended user/agent shape and must not be clipped again. */
+    isAvatarImagePreShaped?: boolean;
+}
 export interface MentionNameResolver {
     cacheName(id: string, name: string): void;
     lookupName(id: string): Promise<MentionNameDetails> | MentionNameDetails;
@@ -212,6 +218,7 @@ export interface RealMentionDescription {
     appType?: string | null;
     avatarUrl?: string;
     context?: MentionDescContext;
+    description?: string;
     highlight?: Highlight;
     id: string;
     inContext?: boolean;

package/package.json

@@ -30,6 +30,7 @@
 		"@atlaskit/analytics-gas-types": "^6.0.0",
 		"@atlaskit/analytics-next": "^12.3.0",
 		"@atlaskit/avatar": "^27.0.0",
+		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/focus-ring": "^5.0.0",
 		"@atlaskit/heading": "^7.0.0",
 		"@atlaskit/icon": "^37.3.0",
@@ -41,7 +42,7 @@
 		"@atlaskit/skeleton": "^4.2.0",
 		"@atlaskit/tag": "^15.4.0",
 		"@atlaskit/teams-avatar": "^4.1.0",
-		"@atlaskit/tmp-editor-statsig": "^147.0.0",
+		"@atlaskit/tmp-editor-statsig": "^147.1.0",
 		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/ufo": "^1.0.0",
@@ -125,5 +126,5 @@
 		}
 	},
 	"types": "dist/types/index.d.ts",
-	"version": "27.15.2"
+	"version": "27.17.0"
 }

package/mention.docs.tsx

@@ -1,72 +0,0 @@
-/**
- * Structured MCP docs for `@atlaskit/mention`.
- */
-
-import path from 'path';
-
-import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
-
-import packageJson from './package.json';
-
-const packagePath = path.resolve(__dirname);
-
-const documentation: StructuredContentSource = {
-	package: {
-		package: '@atlaskit/mention',
-		packagePath,
-		packageJson,
-		overview:
-			'React components for displaying user and team mentions. It includes support for mention items, lists, and pickers with integration for profile cards and presence.',
-	},
-	components: [
-		{
-			name: 'Mention',
-			description: 'A component for displaying a single mention.',
-			status: 'general-availability',
-			import: {
-				name: 'Mention',
-				package: '@atlaskit/mention',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: ['Use `Mention` to render a mention for a user or team.'],
-			keywords: ['mention', 'user', 'team'],
-			categories: ['elements'],
-			examples: [
-				{
-					name: 'Simple mention',
-					description: 'Basic usage of the Mention component.',
-					source: path.resolve(packagePath, './examples/07-simple-mention.tsx'),
-				},
-			],
-		},
-		{
-			name: 'MentionPicker',
-			description: 'A component that provides a searchable picker for mentions.',
-			status: 'general-availability',
-			import: {
-				name: 'MentionPicker',
-				package: '@atlaskit/mention',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: [
-				'Use `MentionPicker` to allow users to select a user or team to mention.',
-				'Requires a `MentionResource` to fetch and manage mention data.',
-			],
-			keywords: ['mention', 'picker', 'select'],
-			categories: ['elements'],
-			examples: [
-				{
-					name: 'Mention list picker',
-					description: 'Basic usage of MentionPicker.',
-					source: path.resolve(packagePath, './examples/05-mention-list-picker.tsx'),
-				},
-			],
-		},
-	],
-};
-
-export default documentation;