@atlaskit/mention 27.6.0 → 27.7.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/mention
 
+## 27.7.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 27.7.0
+
+### Minor Changes
+
+- [`d6596dc895420`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d6596dc895420) -
+  Show a loading shimmer in the mention typeahead Agents section while the (slower) agent source
+  resolves. The Rovo chat mention provider now emits a non-selectable loading placeholder in the
+  agents slot until agents arrive (gated by rovo_chat_agent_selection); @atlaskit/mention renders it
+  as a skeleton row, and the editor mention plugin guards it from selection/analytics.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 27.6.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -52,6 +52,9 @@
 		{
 			"path": "../../../react-compiler/react-compiler-gating/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/skeleton/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tag/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -52,6 +52,9 @@
 		{
 			"path": "../../../react-compiler/react-compiler-gating/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/skeleton/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tag/afm-products/tsconfig.json"
 		},

package/dist/cjs/api/MentionResource.js

@@ -469,6 +469,10 @@ var MentionResource = exports.MentionResource = /*#__PURE__*/function (_Abstract
     key: "transformServiceResponse",
     value: function transformServiceResponse(result, query) {
       var mentions = result.mentions.map(function (mention) {
+        // Loading placeholders carry none of these fields and pass through untouched.
+        if (mention.isPlaceholder) {
+          return mention;
+        }
         var lozenge;
         if ((0, _types.isAppMention)(mention)) {
           lozenge = mention.userType;

package/dist/cjs/components/MentionItem/MentionItemPlaceholder.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MentionItemPlaceholder;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _skeleton = _interopRequireDefault(require("@atlaskit/skeleton"));
+var _i18n = require("../i18n");
+var _styles = require("./styles");
+/**
+ * Non-interactive skeleton row rendered for a placeholder mention
+ * (`mention.isPlaceholder`). Mirrors the avatar + name layout of a real
+ * row so the list doesn't jump when the real items swap in, and exposes
+ * an accessible loading label. Deliberately wires no selection/hover
+ * handlers — it must not be clickable.
+ *
+ * Lives in its own module (lazy-loaded by `MentionItem`) so the
+ * `@atlaskit/skeleton` dependency only enters the bundle when a
+ * placeholder is actually rendered, not for every `@atlaskit/mention`
+ * consumer.
+ */
+function MentionItemPlaceholder(_ref) {
+  var height = _ref.height,
+    forwardedRef = _ref.forwardedRef,
+    id = _ref.id;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(_i18n.messages.loadingPlaceholder);
+  return /*#__PURE__*/_react.default.createElement(_styles.MentionItemStyle, {
+    height: height,
+    "data-mention-item": true,
+    "data-testid": "mention-item-".concat(id),
+    "data-mention-id": id,
+    ref: forwardedRef,
+    role: "status",
+    "aria-label": label
+  }, /*#__PURE__*/_react.default.createElement(_styles.RowStyle, null, /*#__PURE__*/_react.default.createElement(_styles.AvatarStyle, null, /*#__PURE__*/_react.default.createElement(_styles.AvatarSkeletonWrapper, null, /*#__PURE__*/_react.default.createElement(_skeleton.default, {
+    width: 32,
+    height: 32,
+    borderRadius: "var(--ds-radius-full, 9999px)",
+    isShimmering: true
+  }))), /*#__PURE__*/_react.default.createElement(_styles.NameSectionStyle, null, /*#__PURE__*/_react.default.createElement(_skeleton.default, {
+    width: 140,
+    height: 12,
+    isShimmering: true
+  }))));
+}

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

@@ -42,6 +42,15 @@ var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvi
 var _MentionAvatar = require("../MentionAvatar");
 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; })(); }
+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" != (0, _typeof2.default)(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); }
+// Lazy-loaded so `@atlaskit/skeleton` (only needed for the loading
+// placeholder) doesn't enter the bundle for every `@atlaskit/mention`
+// consumer — only when an `isPlaceholder` mention is actually rendered.
+var MentionItemPlaceholder = /*#__PURE__*/_react.default.lazy(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_mention-item-placeholder" */'./MentionItemPlaceholder'));
+  });
+});
 var lozengeAppearanceToTagColor = {
   default: 'standard',
   success: 'lime',
@@ -135,6 +144,18 @@ var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent)
         lozenge = mention.lozenge,
         accessLevel = mention.accessLevel,
         isXProductUser = mention.isXProductUser;
+      if (mention.isPlaceholder) {
+        return /*#__PURE__*/_react.default.createElement(_MessagesIntlProvider.default, null, /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
+          fallback: /*#__PURE__*/_react.default.createElement(_styles.MentionItemStyle, {
+            height: height,
+            "aria-hidden": true
+          })
+        }, /*#__PURE__*/_react.default.createElement(MentionItemPlaceholder, {
+          height: height,
+          forwardedRef: forwardedRef,
+          id: id
+        })));
+      }
       var _ref = presence || {},
         time = _ref.time;
       var restricted = (0, _types.isRestricted)(accessLevel);

package/dist/cjs/components/MentionItem/styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TimeStyle = exports.RowStyle = exports.NameSectionStyle = exports.MentionItemStyle = exports.MENTION_ITEM_HEIGHT_REFRESHED = exports.MENTION_ITEM_HEIGHT = exports.InfoSectionStyle = exports.FullNameStyle = exports.AvatarStyle = exports.AccessSectionStyle = void 0;
+exports.TimeStyle = exports.RowStyle = exports.NameSectionStyle = exports.MentionItemStyle = exports.MENTION_ITEM_HEIGHT_REFRESHED = exports.MENTION_ITEM_HEIGHT = exports.InfoSectionStyle = exports.FullNameStyle = exports.AvatarStyle = exports.AvatarSkeletonWrapper = exports.AccessSectionStyle = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -33,6 +33,21 @@ var AvatarStyle = exports.AvatarStyle = _styled.default.span(function (props) {
   };
 });
 
+/**
+ * Footprint of the loading placeholder avatar. Matches the real
+ * `@atlaskit/avatar` `size="medium"` layout: a 32px circle (the image)
+ * centered inside a 36px wrapper, so the loading row and the resolved row
+ * line up identically and the row doesn't shift on swap.
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var AvatarSkeletonWrapper = exports.AvatarSkeletonWrapper = _styled.default.div({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '36px',
+  height: '36px'
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 var NameSectionStyle = exports.NameSectionStyle = _styled.default.div(function (props) {
   return {

package/dist/cjs/components/i18n.js

@@ -65,5 +65,10 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
     id: 'fabric.elements.mentions.xproduct.mention.description',
     defaultMessage: 'Needs access to Confluence',
     description: 'Description for a x-product mention item in the mention list in Confluence'
+  },
+  loadingPlaceholder: {
+    id: 'fabric.elements.mentions.loading.placeholder',
+    defaultMessage: 'Loading',
+    description: 'Accessible label for a loading placeholder row shown in the mention list while a slower mention source (such as agents) is still loading.'
   }
 });

package/dist/cjs/types.js

@@ -26,6 +26,23 @@ exports.isTeamMention = isTeamMention;
  * type so the config callback and the provider method share the same input
  * surface, and so callers do not have to fabricate fields they do not have.
  */
+/**
+ * Real-mention fields forbidden on a placeholder. Declaring them as `never`
+ * (rather than omitting them) keeps `mention.name` etc. readable on the
+ * {@link MentionDescription} union — so the hundreds of consumers that never
+ * encounter a placeholder are unaffected — while still making illegal
+ * combinations like `{ isPlaceholder: true, name: 'Real User' }` a compile
+ * error.
+ */
+/**
+ * Non-selectable loading placeholder surfaced in the mention list while a
+ * slower mention source (e.g. agents) resolves. Its own member of the
+ * {@link MentionDescription} discriminated union (discriminated on
+ * `isPlaceholder`).
+ *
+ * `id` must be unique per placeholder — the typeahead keys rows by id — so
+ * multiple placeholders can be rendered at once.
+ */
 // data is returned from team search service
 var MentionType = exports.MentionType = /*#__PURE__*/function (MentionType) {
   MentionType[MentionType["SELF"] = 0] = "SELF";

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.5.2";
+var packageVersion = "27.7.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/api/MentionResource.js

@@ -319,6 +319,10 @@ export class MentionResource extends AbstractMentionResource {
   }
   transformServiceResponse(result, query) {
     const mentions = result.mentions.map(mention => {
+      // Loading placeholders carry none of these fields and pass through untouched.
+      if (mention.isPlaceholder) {
+        return mention;
+      }
       let lozenge;
       if (isAppMention(mention)) {
         lozenge = mention.userType;

package/dist/es2019/components/MentionItem/MentionItemPlaceholder.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import Skeleton from '@atlaskit/skeleton';
+import { messages } from '../i18n';
+import { AvatarSkeletonWrapper, AvatarStyle, MentionItemStyle, NameSectionStyle, RowStyle } from './styles';
+/**
+ * Non-interactive skeleton row rendered for a placeholder mention
+ * (`mention.isPlaceholder`). Mirrors the avatar + name layout of a real
+ * row so the list doesn't jump when the real items swap in, and exposes
+ * an accessible loading label. Deliberately wires no selection/hover
+ * handlers — it must not be clickable.
+ *
+ * Lives in its own module (lazy-loaded by `MentionItem`) so the
+ * `@atlaskit/skeleton` dependency only enters the bundle when a
+ * placeholder is actually rendered, not for every `@atlaskit/mention`
+ * consumer.
+ */
+export default function MentionItemPlaceholder({
+  height,
+  forwardedRef,
+  id
+}) {
+  const {
+    formatMessage
+  } = useIntl();
+  const label = formatMessage(messages.loadingPlaceholder);
+  return /*#__PURE__*/React.createElement(MentionItemStyle, {
+    height: height,
+    "data-mention-item": true,
+    "data-testid": `mention-item-${id}`,
+    "data-mention-id": id,
+    ref: forwardedRef,
+    role: "status",
+    "aria-label": label
+  }, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, null, /*#__PURE__*/React.createElement(AvatarSkeletonWrapper, null, /*#__PURE__*/React.createElement(Skeleton, {
+    width: 32,
+    height: 32,
+    borderRadius: "var(--ds-radius-full, 9999px)",
+    isShimmering: true
+  }))), /*#__PURE__*/React.createElement(NameSectionStyle, null, /*#__PURE__*/React.createElement(Skeleton, {
+    width: 140,
+    height: 12,
+    isShimmering: true
+  }))));
+}

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

@@ -15,6 +15,11 @@ import { renderHighlight } from './MentionHighlightHelpers';
 import MentionDescriptionByline from '../MentionDescriptionByline';
 import MessagesIntlProvider from '../MessagesIntlProvider';
 import { MentionAvatar } from '../MentionAvatar';
+
+// Lazy-loaded so `@atlaskit/skeleton` (only needed for the loading
+// placeholder) doesn't enter the bundle for every `@atlaskit/mention`
+// consumer — only when an `isPlaceholder` mention is actually rendered.
+const MentionItemPlaceholder = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_mention-item-placeholder" */'./MentionItemPlaceholder'));
 export { MENTION_ITEM_HEIGHT, MENTION_ITEM_HEIGHT_REFRESHED } from './styles';
 const lozengeAppearanceToTagColor = {
   default: 'standard',
@@ -107,6 +112,18 @@ export default class MentionItem extends React.PureComponent {
       accessLevel,
       isXProductUser
     } = mention;
+    if (mention.isPlaceholder) {
+      return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: /*#__PURE__*/React.createElement(MentionItemStyle, {
+          height: height,
+          "aria-hidden": true
+        })
+      }, /*#__PURE__*/React.createElement(MentionItemPlaceholder, {
+        height: height,
+        forwardedRef: forwardedRef,
+        id: id
+      })));
+    }
     const {
       time
     } = presence || {};

package/dist/es2019/components/MentionItem/styles.js

@@ -23,6 +23,21 @@ export const AvatarStyle = styled.span(props => ({
   opacity: props.restricted ? '0.5' : 'inherit'
 }));
 
+/**
+ * Footprint of the loading placeholder avatar. Matches the real
+ * `@atlaskit/avatar` `size="medium"` layout: a 32px circle (the image)
+ * centered inside a 36px wrapper, so the loading row and the resolved row
+ * line up identically and the row doesn't shift on swap.
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const AvatarSkeletonWrapper = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '36px',
+  height: '36px'
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export const NameSectionStyle = styled.div(props => ({
   flex: 1,

package/dist/es2019/components/i18n.js

@@ -59,5 +59,10 @@ export const messages = defineMessages({
     id: 'fabric.elements.mentions.xproduct.mention.description',
     defaultMessage: 'Needs access to Confluence',
     description: 'Description for a x-product mention item in the mention list in Confluence'
+  },
+  loadingPlaceholder: {
+    id: 'fabric.elements.mentions.loading.placeholder',
+    defaultMessage: 'Loading',
+    description: 'Accessible label for a loading placeholder row shown in the mention list while a slower mention source (such as agents) is still loading.'
   }
 });

package/dist/es2019/types.js

@@ -17,6 +17,25 @@
  * surface, and so callers do not have to fabricate fields they do not have.
  */
 
+/**
+ * Real-mention fields forbidden on a placeholder. Declaring them as `never`
+ * (rather than omitting them) keeps `mention.name` etc. readable on the
+ * {@link MentionDescription} union — so the hundreds of consumers that never
+ * encounter a placeholder are unaffected — while still making illegal
+ * combinations like `{ isPlaceholder: true, name: 'Real User' }` a compile
+ * error.
+ */
+
+/**
+ * Non-selectable loading placeholder surfaced in the mention list while a
+ * slower mention source (e.g. agents) resolves. Its own member of the
+ * {@link MentionDescription} discriminated union (discriminated on
+ * `isPlaceholder`).
+ *
+ * `id` must be unique per placeholder — the typeahead keys rows by id — so
+ * multiple placeholders can be rendered at once.
+ */
+
 // data is returned from team search service
 
 export let MentionType = /*#__PURE__*/function (MentionType) {

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.5.2";
+const packageVersion = "27.7.0";
 export const SLI_EVENT_TYPE = 'sli';
 export const SMART_EVENT_TYPE = 'smart';
 export const fireAnalyticsMentionTypeaheadEvent = props => (action, duration, userIds = [], query) => {

package/dist/esm/api/MentionResource.js

@@ -462,6 +462,10 @@ export var MentionResource = /*#__PURE__*/function (_AbstractMentionResou) {
     key: "transformServiceResponse",
     value: function transformServiceResponse(result, query) {
       var mentions = result.mentions.map(function (mention) {
+        // Loading placeholders carry none of these fields and pass through untouched.
+        if (mention.isPlaceholder) {
+          return mention;
+        }
         var lozenge;
         if (isAppMention(mention)) {
           lozenge = mention.userType;

package/dist/esm/components/MentionItem/MentionItemPlaceholder.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import Skeleton from '@atlaskit/skeleton';
+import { messages } from '../i18n';
+import { AvatarSkeletonWrapper, AvatarStyle, MentionItemStyle, NameSectionStyle, RowStyle } from './styles';
+/**
+ * Non-interactive skeleton row rendered for a placeholder mention
+ * (`mention.isPlaceholder`). Mirrors the avatar + name layout of a real
+ * row so the list doesn't jump when the real items swap in, and exposes
+ * an accessible loading label. Deliberately wires no selection/hover
+ * handlers — it must not be clickable.
+ *
+ * Lives in its own module (lazy-loaded by `MentionItem`) so the
+ * `@atlaskit/skeleton` dependency only enters the bundle when a
+ * placeholder is actually rendered, not for every `@atlaskit/mention`
+ * consumer.
+ */
+export default function MentionItemPlaceholder(_ref) {
+  var height = _ref.height,
+    forwardedRef = _ref.forwardedRef,
+    id = _ref.id;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(messages.loadingPlaceholder);
+  return /*#__PURE__*/React.createElement(MentionItemStyle, {
+    height: height,
+    "data-mention-item": true,
+    "data-testid": "mention-item-".concat(id),
+    "data-mention-id": id,
+    ref: forwardedRef,
+    role: "status",
+    "aria-label": label
+  }, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, null, /*#__PURE__*/React.createElement(AvatarSkeletonWrapper, null, /*#__PURE__*/React.createElement(Skeleton, {
+    width: 32,
+    height: 32,
+    borderRadius: "var(--ds-radius-full, 9999px)",
+    isShimmering: true
+  }))), /*#__PURE__*/React.createElement(NameSectionStyle, null, /*#__PURE__*/React.createElement(Skeleton, {
+    width: 140,
+    height: 12,
+    isShimmering: true
+  }))));
+}

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

@@ -23,6 +23,13 @@ import { renderHighlight } from './MentionHighlightHelpers';
 import MentionDescriptionByline from '../MentionDescriptionByline';
 import MessagesIntlProvider from '../MessagesIntlProvider';
 import { MentionAvatar } from '../MentionAvatar';
+
+// Lazy-loaded so `@atlaskit/skeleton` (only needed for the loading
+// placeholder) doesn't enter the bundle for every `@atlaskit/mention`
+// consumer — only when an `isPlaceholder` mention is actually rendered.
+var MentionItemPlaceholder = /*#__PURE__*/React.lazy(function () {
+  return import( /* webpackChunkName: "@atlaskit-internal_mention-item-placeholder" */'./MentionItemPlaceholder');
+});
 export { MENTION_ITEM_HEIGHT, MENTION_ITEM_HEIGHT_REFRESHED } from './styles';
 var lozengeAppearanceToTagColor = {
   default: 'standard',
@@ -117,6 +124,18 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
         lozenge = mention.lozenge,
         accessLevel = mention.accessLevel,
         isXProductUser = mention.isXProductUser;
+      if (mention.isPlaceholder) {
+        return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(React.Suspense, {
+          fallback: /*#__PURE__*/React.createElement(MentionItemStyle, {
+            height: height,
+            "aria-hidden": true
+          })
+        }, /*#__PURE__*/React.createElement(MentionItemPlaceholder, {
+          height: height,
+          forwardedRef: forwardedRef,
+          id: id
+        })));
+      }
       var _ref = presence || {},
         time = _ref.time;
       var restricted = isRestricted(accessLevel);

package/dist/esm/components/MentionItem/styles.js

@@ -25,6 +25,21 @@ export var AvatarStyle = styled.span(function (props) {
   };
 });
 
+/**
+ * Footprint of the loading placeholder avatar. Matches the real
+ * `@atlaskit/avatar` `size="medium"` layout: a 32px circle (the image)
+ * centered inside a 36px wrapper, so the loading row and the resolved row
+ * line up identically and the row doesn't shift on swap.
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var AvatarSkeletonWrapper = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '36px',
+  height: '36px'
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
 export var NameSectionStyle = styled.div(function (props) {
   return {

package/dist/esm/components/i18n.js

@@ -59,5 +59,10 @@ export var messages = defineMessages({
     id: 'fabric.elements.mentions.xproduct.mention.description',
     defaultMessage: 'Needs access to Confluence',
     description: 'Description for a x-product mention item in the mention list in Confluence'
+  },
+  loadingPlaceholder: {
+    id: 'fabric.elements.mentions.loading.placeholder',
+    defaultMessage: 'Loading',
+    description: 'Accessible label for a loading placeholder row shown in the mention list while a slower mention source (such as agents) is still loading.'
   }
 });

package/dist/esm/types.js

@@ -17,6 +17,25 @@
  * surface, and so callers do not have to fabricate fields they do not have.
  */
 
+/**
+ * Real-mention fields forbidden on a placeholder. Declaring them as `never`
+ * (rather than omitting them) keeps `mention.name` etc. readable on the
+ * {@link MentionDescription} union — so the hundreds of consumers that never
+ * encounter a placeholder are unaffected — while still making illegal
+ * combinations like `{ isPlaceholder: true, name: 'Real User' }` a compile
+ * error.
+ */
+
+/**
+ * Non-selectable loading placeholder surfaced in the mention list while a
+ * slower mention source (e.g. agents) resolves. Its own member of the
+ * {@link MentionDescription} discriminated union (discriminated on
+ * `isPlaceholder`).
+ *
+ * `id` must be unique per placeholder — the typeahead keys rows by id — so
+ * multiple placeholders can be rendered at once.
+ */
+
 // data is returned from team search service
 
 export var MentionType = /*#__PURE__*/function (MentionType) {

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.5.2";
+var packageVersion = "27.7.0";
 export var SLI_EVENT_TYPE = 'sli';
 export var SMART_EVENT_TYPE = 'smart';
 export var fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

package/dist/types/components/MentionItem/MentionItemPlaceholder.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+type MentionItemPlaceholderProps = {
+    forwardedRef?: React.Ref<HTMLDivElement>;
+    height?: number;
+    id: string;
+};
+/**
+ * Non-interactive skeleton row rendered for a placeholder mention
+ * (`mention.isPlaceholder`). Mirrors the avatar + name layout of a real
+ * row so the list doesn't jump when the real items swap in, and exposes
+ * an accessible loading label. Deliberately wires no selection/hover
+ * handlers — it must not be clickable.
+ *
+ * Lives in its own module (lazy-loaded by `MentionItem`) so the
+ * `@atlaskit/skeleton` dependency only enters the bundle when a
+ * placeholder is actually rendered, not for every `@atlaskit/mention`
+ * consumer.
+ */
+export default function MentionItemPlaceholder({ height, forwardedRef, id, }: MentionItemPlaceholderProps): React.JSX.Element;
+export {};

package/dist/types/components/MentionItem/styles.d.ts

@@ -22,6 +22,16 @@ export declare const AvatarStyle: StyledComponent<{
     as?: React.ElementType;
     theme?: Theme;
 } & AvatarSectionStyleProps, DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/**
+ * Footprint of the loading placeholder avatar. Matches the real
+ * `@atlaskit/avatar` `size="medium"` layout: a 32px circle (the image)
+ * centered inside a 36px wrapper, so the loading row and the resolved row
+ * line up identically and the row doesn't shift on swap.
+ */
+export declare const AvatarSkeletonWrapper: StyledComponent<{
+    as?: React.ElementType;
+    theme?: Theme;
+}, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const NameSectionStyle: StyledComponent<{
     as?: React.ElementType;
     theme?: Theme;

package/dist/types/components/i18n.d.ts

@@ -1,62 +1,67 @@
 export declare const messages: {
-    unknownUserError: {
-        id: string;
+    defaultAdvisedAction: {
         defaultMessage: string;
         description: string;
-    };
-    noAccessWarning: {
         id: string;
-        defaultMessage: string;
-        description: string;
     };
-    noAccessLabel: {
-        id: string;
+    defaultHeadline: {
         defaultMessage: string;
         description: string;
-    };
-    defaultHeadline: {
         id: string;
+    };
+    differentText: {
         defaultMessage: string;
         description: string;
-    };
-    defaultAdvisedAction: {
         id: string;
+    };
+    loadingPlaceholder: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
     loginAgain: {
-        id: string;
         defaultMessage: string;
         description: string;
-    };
-    differentText: {
         id: string;
-        defaultMessage: string;
-        description: string;
     };
     memberCountWithoutYou: {
-        id: string;
         defaultMessage: string;
         description: string;
+        id: string;
     };
     memberCountWithYou: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    noAccessLabel: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
-    plus50MembersWithoutYou: {
+    noAccessWarning: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    plus50MembersWithoutYou: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
     plus50MembersWithYou: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    unknownUserError: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
     xProductMentionDescription: {
-        id: string;
         defaultMessage: string;
         description: string;
+        id: string;
     };
 };

package/dist/types/types.d.ts

@@ -207,7 +207,7 @@ export interface LozengeProps {
     appearance?: LozengeColor;
     text: React.ReactNode;
 }
-export interface MentionDescription {
+export interface RealMentionDescription {
     accessLevel?: string;
     appType?: string | null;
     avatarUrl?: string;
@@ -215,6 +215,8 @@ export interface MentionDescription {
     highlight?: Highlight;
     id: string;
     inContext?: boolean;
+    /** Discriminant: real mentions are never placeholders. */
+    isPlaceholder?: false;
     isXProductUser?: boolean;
     lozenge?: string | LozengeProps;
     mentionName?: string;
@@ -224,6 +226,33 @@ export interface MentionDescription {
     source?: string;
     userType?: string;
 }
+/**
+ * Real-mention fields forbidden on a placeholder. Declaring them as `never`
+ * (rather than omitting them) keeps `mention.name` etc. readable on the
+ * {@link MentionDescription} union — so the hundreds of consumers that never
+ * encounter a placeholder are unaffected — while still making illegal
+ * combinations like `{ isPlaceholder: true, name: 'Real User' }` a compile
+ * error.
+ */
+type RealMentionFieldsForbidden = {
+    [Field in Exclude<keyof RealMentionDescription, 'id' | 'isPlaceholder' | 'userType' | 'appType'>]?: never;
+};
+/**
+ * Non-selectable loading placeholder surfaced in the mention list while a
+ * slower mention source (e.g. agents) resolves. Its own member of the
+ * {@link MentionDescription} discriminated union (discriminated on
+ * `isPlaceholder`).
+ *
+ * `id` must be unique per placeholder — the typeahead keys rows by id — so
+ * multiple placeholders can be rendered at once.
+ */
+export type MentionPlaceholder = RealMentionFieldsForbidden & {
+    appType?: 'agent';
+    id: string;
+    isPlaceholder: true;
+    userType?: 'APP';
+};
+export type MentionDescription = RealMentionDescription | MentionPlaceholder;
 export interface MentionDescContext {
     includesYou: boolean;
     memberCount: number;
@@ -319,3 +348,4 @@ export interface InviteFromMentionProvider {
 export interface XProductInviteMentionProvider {
     inviteXProductUser?: (userId: string, mentionName: string) => Promise<void>;
 }
+export {};

package/package.json

@@ -37,9 +37,10 @@
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/primitives": "^21.0.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
+		"@atlaskit/skeleton": "^4.2.0",
 		"@atlaskit/tag": "^15.3.0",
 		"@atlaskit/teams-avatar": "^3.1.0",
-		"@atlaskit/tokens": "^15.8.0",
+		"@atlaskit/tokens": "^16.0.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@atlaskit/util-service-support": "^7.2.0",
@@ -117,5 +118,5 @@
 		}
 	},
 	"types": "dist/types/index.d.ts",
-	"version": "27.6.0"
+	"version": "27.7.1"
 }