@atlaskit/mention 27.17.1 → 27.18.0

package/dist/esm/api/PresenceResource.js

@@ -1,64 +1,27 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
+
 import { buildAtlAttributionHeaderValue } from '../util/atl-attribution';
-import debug from '../util/logger';
-import { AbstractResource } from './MentionResource';
+import { AbstractPresenceResource } from './AbstractPresenceResource';
+import { DefaultPresenceCache } from './DefaultPresenceCache';
+import { DefaultPresenceParser } from './DefaultPresenceParser';
 
 /**
  * Configuration for the PresenceResource, which manages real-time user
  * presence (online/offline/busy/focus status) by querying a GraphQL-based
  * presence service.
  */
-var CacheEntry = /*#__PURE__*/function () {
-  function CacheEntry(pres, timeout) {
-    _classCallCheck(this, CacheEntry);
-    this.presence = pres;
-    this.expiry = Date.now() + timeout;
-  }
-  return _createClass(CacheEntry, [{
-    key: "expired",
-    value: function expired() {
-      return Date.now() > this.expiry;
-    }
-  }]);
-}();
-var AbstractPresenceResource = /*#__PURE__*/function (_AbstractResource) {
-  function AbstractPresenceResource() {
-    _classCallCheck(this, AbstractPresenceResource);
-    return _callSuper(this, AbstractPresenceResource, arguments);
-  }
-  _inherits(AbstractPresenceResource, _AbstractResource);
-  return _createClass(AbstractPresenceResource, [{
-    key: "refreshPresence",
-    value: function refreshPresence(userIds) {
-      throw new Error("not yet implemented.\nParams: userIds=".concat(userIds));
-    }
-  }, {
-    key: "notifyListeners",
-    value: function notifyListeners(presences) {
-      this.changeListeners.forEach(function (listener, key) {
-        try {
-          listener(presences);
-        } catch (e) {
-          // ignore error from listener
-          debug("error from listener '".concat(key, "', ignoring"), e);
-        }
-      });
-    }
-  }]);
-}(AbstractResource);
-var PresenceResource = /*#__PURE__*/function (_AbstractPresenceReso) {
+
+export var PresenceResource = /*#__PURE__*/function (_AbstractPresenceReso) {
   function PresenceResource(config) {
     var _this;
     _classCallCheck(this, PresenceResource);
@@ -137,216 +100,19 @@ var PresenceResource = /*#__PURE__*/function (_AbstractPresenceReso) {
     }
   }]);
 }(AbstractPresenceResource);
-export var DefaultPresenceCache = /*#__PURE__*/function () {
-  function DefaultPresenceCache(cacheTimeout, cacheTrigger) {
-    _classCallCheck(this, DefaultPresenceCache);
-    this.expiryInMillis = cacheTimeout ? cacheTimeout : DefaultPresenceCache.defaultTimeout;
-    this.flushTrigger = cacheTrigger ? cacheTrigger : DefaultPresenceCache.defaultFlushTrigger;
-    this.cache = {};
-    this.size = 0;
-  }
-
-  /**
-   * Precondition: _delete is only called internally if userId exists in cache
-   * Removes cache entry
-   * @param userId
-   */
-  return _createClass(DefaultPresenceCache, [{
-    key: "_delete",
-    value: function _delete(userId) {
-      delete this.cache[userId];
-      this.size--;
-    }
-
-    /**
-     * Checks a cache entry and calls delete if the info has expired
-     * @param userId
-     */
-  }, {
-    key: "_deleteIfExpired",
-    value: function _deleteIfExpired(userId) {
-      if (this.contains(userId) && this.cache[userId].expired()) {
-        this._delete(userId);
-      }
-    }
-
-    /**
-     * Cleans expired entries from cache
-     */
-  }, {
-    key: "_removeExpired",
-    value: function _removeExpired() {
-      var _this3 = this;
-      Object.keys(this.cache).forEach(function (id) {
-        _this3._deleteIfExpired(id);
-      });
-    }
-
-    /**
-     * Checks if a user exists in the cache
-     * @param userId
-     */
-  }, {
-    key: "contains",
-    value: function contains(userId) {
-      return this.cache.hasOwnProperty(userId);
-    }
-
-    /**
-     * Retrieves a presence from the cache after checking for expired entries
-     * @param userId - to index the cache
-     * @returns Presence - the presence that matches the userId
-     */
-  }, {
-    key: "get",
-    value: function get(userId) {
-      this._deleteIfExpired(userId);
-      if (!this.contains(userId)) {
-        return {};
-      }
-      return this.cache[userId].presence;
-    }
+export default PresenceResource;
 
-    /**
-     * Retrieve multiple presences at once from the cache
-     * @param userIds - to index the cache
-     * @returns PresenceMap - A map of userIds to cached Presences
-     */
-  }, {
-    key: "getBulk",
-    value: function getBulk(userIds) {
-      var presences = {};
-      var _iterator = _createForOfIteratorHelper(userIds),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var _userId = _step.value;
-          if (this.contains(_userId)) {
-            presences[_userId] = this.get(_userId);
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      return presences;
-    }
-
-    /**
-     * For a given list of ids, returns a subset
-     * of all the ids with missing cache entries.
-     * @param userIds - to index the cache
-     * @returns string[] - ids missing from the cache
-     */
-  }, {
-    key: "getMissingUserIds",
-    value: function getMissingUserIds(userIds) {
-      var _this4 = this;
-      return userIds.filter(function (id) {
-        return !_this4.contains(id);
-      });
-    }
+/**
+ * @deprecated Use `import { DefaultPresenceCache } from '@atlaskit/mention/presence-resource'` instead.
+ */
+export { DefaultPresenceCache } from './DefaultPresenceCache';
 
-    /**
-     * Precondition: presMap only contains ids of users not in cache
-     *               expired users must first be removed then reinserted with updated presence
-     * Updates the cache by adding the new Presence entries and setting the expiry time
-     * @param presMap
-     */
-  }, {
-    key: "update",
-    value: function update(presMap) {
-      var _this5 = this;
-      if (this.size >= this.flushTrigger) {
-        this._removeExpired();
-      }
-      Object.keys(presMap).forEach(function (userId) {
-        _this5.cache[userId] = new CacheEntry(presMap[userId], _this5.expiryInMillis);
-        _this5.size++;
-      });
-    }
-  }]);
-}();
-_defineProperty(DefaultPresenceCache, "defaultTimeout", 20000);
-_defineProperty(DefaultPresenceCache, "defaultFlushTrigger", 50);
-export var DefaultPresenceParser = /*#__PURE__*/function () {
-  function DefaultPresenceParser() {
-    _classCallCheck(this, DefaultPresenceParser);
-  }
-  return _createClass(DefaultPresenceParser, [{
-    key: "mapState",
-    value: function mapState(state) {
-      if (state === 'unavailable') {
-        return 'offline';
-      } else if (state === 'available') {
-        return 'online';
-      } else {
-        return state;
-      }
-    }
-  }, {
-    key: "parse",
-    value: function parse(response) {
-      var presences = {};
-      if (response.hasOwnProperty('data') && response['data'].hasOwnProperty('PresenceBulk')) {
-        var results = response['data'].PresenceBulk;
-        // Store map of state and time indexed by userId.  Ignore null results.
-        var _iterator2 = _createForOfIteratorHelper(results),
-          _step2;
-        try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            var user = _step2.value;
-            if (user.userId && user.state) {
-              var _state = DefaultPresenceParser.extractState(user) || user.state;
-              presences[user.userId] = {
-                status: this.mapState(_state)
-              };
-            } else if (!user.hasOwnProperty('userId') || !user.hasOwnProperty('state')) {
-              // eslint-disable-next-line no-console
-              console.error('Unexpected response from presence service contains keys: ' + Object.keys(user));
-            }
-          }
-        } catch (err) {
-          _iterator2.e(err);
-        } finally {
-          _iterator2.f();
-        }
-      }
-      return presences;
-    }
-  }], [{
-    key: "extractState",
-    value: function extractState(presence) {
-      if (DefaultPresenceParser.isFocusState(presence)) {
-        return DefaultPresenceParser.FOCUS_STATE;
-      }
-      return presence.state;
-    }
+/**
+ * @deprecated Use `import { DefaultPresenceParser } from '@atlaskit/mention/presence-resource'` instead.
+ */
+export { DefaultPresenceParser } from './DefaultPresenceParser';
 
-    /*
-       This is a bit of an odd exception. In the case where a user is in "Focus Mode", their presence state
-       is returned as 'busy' along with a `stateMetadata` object containing a `focus` field.
-       In this case we ignore the value of the `state` field and treat the presence as a 'focus' state.
-      */
-  }, {
-    key: "isFocusState",
-    value: function isFocusState(presence) {
-      if (presence.stateMetadata) {
-        try {
-          var metadata = JSON.parse(presence.stateMetadata);
-          return metadata && !!metadata.focus;
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.error("Failed to parse presence's stateMetadata for user with id ".concat(presence.userId, ": ").concat(presence.stateMetadata));
-          // eslint-disable-next-line no-console
-          console.error(e);
-        }
-      }
-      return false;
-    }
-  }]);
-}();
-_defineProperty(DefaultPresenceParser, "FOCUS_STATE", 'focus');
-export { AbstractPresenceResource };
-export default PresenceResource;
+/**
+ * @deprecated Use `import { AbstractPresenceResource } from '@atlaskit/mention/presence-resource'` instead.
+ */
+export { AbstractPresenceResource } from './AbstractPresenceResource';

package/dist/esm/api/Queue.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/api/isResolvingMentionProvider.js

@@ -0,0 +1,3 @@
+export var isResolvingMentionProvider = function isResolvingMentionProvider(p) {
+  return !!(p && p.supportsMentionNameResolving && p.supportsMentionNameResolving());
+};

package/dist/esm/api/mergeNameResolverQueues.js

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * Merge the two queues making sure to merge callback arrays for items in queueB already in queueA.
+ * This addresses [this ticket](https://product-fabric.atlassian.net/browse/QS-3789).
+ */
+export function mergeNameResolverQueues(queueA, queueB) {
+  var queueBeingMerged = new Map(_toConsumableArray(queueA));
+
+  // now add the items from the second queue that are not already in the
+  //  merged queue being built
+  _toConsumableArray(queueB).forEach(function (item) {
+    var _item = _slicedToArray(item, 2),
+      key = _item[0],
+      queueBCallbacks = _item[1];
+    var itemAlreadyInMergedQueue = queueBeingMerged.has(key);
+    if (!itemAlreadyInMergedQueue) {
+      queueBeingMerged.set(key, queueBCallbacks);
+    } else {
+      var _queueBeingMerged$get;
+      // item already in merged queue, merge the callback arrays
+      var queueACallbacks = (_queueBeingMerged$get = queueBeingMerged.get(key)) !== null && _queueBeingMerged$get !== void 0 ? _queueBeingMerged$get : [];
+      var mergedCallbacks = new Set([].concat(_toConsumableArray(queueBCallbacks), _toConsumableArray(queueACallbacks)));
+      var deduplicatedCallbacks = Array.from(mergedCallbacks.values()); // prevents calling them twice
+      queueBeingMerged.set(key, deduplicatedCallbacks);
+    }
+  });
+  return queueBeingMerged;
+}

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

@@ -0,0 +1,242 @@
+/* MentionInternal.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";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./MentionInternal.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)); }
+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. */
+
+import React from 'react';
+import FocusRing from '@atlaskit/focus-ring';
+import { UFOExperienceState } from '@atlaskit/ufo';
+import { UNKNOWN_USER_ID } from '../../_constants';
+import { isRestricted } from '../../is-restricted';
+import { MentionType } from '../../types';
+import { UnknownUserError } from '../../util/i18n';
+import AsyncDisabledMentionTooltip from '../DisabledMentionTooltip';
+import MessagesIntlProvider from '../MessagesIntlProvider';
+import AsyncNoAccessTooltip from '../NoAccessTooltip';
+import PrimitiveMention from './PrimitiveMention';
+import { ANALYTICS_HOVER_DELAY } from './index';
+import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
+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,
+        text = _this$props.text,
+        onClick = _this$props.onClick,
+        isDisabled = _this$props.isDisabled;
+      if (isDisabled) {
+        // Disabled chips do not invoke their click handler.
+        return;
+      }
+      if (onClick) {
+        onClick(id, text, e);
+      }
+    });
+    _defineProperty(_this, "handleOnMouseEnter", function (e) {
+      var _this$props2 = _this.props,
+        id = _this$props2.id,
+        text = _this$props2.text,
+        onMouseEnter = _this$props2.onMouseEnter,
+        onHover = _this$props2.onHover;
+      if (onMouseEnter) {
+        onMouseEnter(id, text, e);
+      }
+      _this.hoverTimeout = window.setTimeout(function () {
+        if (onHover) {
+          onHover();
+        }
+        _this.hoverTimeout = undefined;
+      }, ANALYTICS_HOVER_DELAY);
+    });
+    _defineProperty(_this, "handleOnMouseLeave", function (e) {
+      var _this$props3 = _this.props,
+        id = _this$props3.id,
+        text = _this$props3.text,
+        onMouseLeave = _this$props3.onMouseLeave;
+      if (onMouseLeave) {
+        onMouseLeave(id, text, e);
+      }
+      if (_this.hoverTimeout) {
+        clearTimeout(_this.hoverTimeout);
+      }
+    });
+    _defineProperty(_this, "getMentionType", function () {
+      var _this$props4 = _this.props,
+        accessLevel = _this$props4.accessLevel,
+        isHighlighted = _this$props4.isHighlighted,
+        isDisabled = _this$props4.isDisabled;
+      if (isDisabled) {
+        return MentionType.DISABLED;
+      }
+      if (isHighlighted) {
+        return MentionType.SELF;
+      }
+      if (isRestricted(accessLevel)) {
+        return MentionType.RESTRICTED;
+      }
+      return MentionType.DEFAULT;
+    });
+    mentionRenderedUfoExperience.getInstance(props.id).start();
+    return _this;
+  }
+  _inherits(MentionInternal, _React$PureComponent);
+  return _createClass(MentionInternal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      mentionRenderedUfoExperience.getInstance(this.props.id).success();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.hoverTimeout) {
+        clearTimeout(this.hoverTimeout);
+      }
+      var ufoInstance = mentionRenderedUfoExperience.getInstance(this.props.id);
+      if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
+        ufoInstance.abort();
+      }
+    }
+  }, {
+    key: "renderUnknownUserError",
+    value: function renderUnknownUserError(id) {
+      return /*#__PURE__*/React.createElement(UnknownUserError, {
+        values: {
+          userId: id.slice(-5)
+        }
+      }, function (message) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, "@".concat(message));
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var handleAvatarError = this.handleAvatarError,
+        handleOnClick = this.handleOnClick,
+        handleOnMouseEnter = this.handleOnMouseEnter,
+        handleOnMouseLeave = this.handleOnMouseLeave,
+        props = this.props;
+      var appType = props.appType,
+        avatarUrl = props.avatarUrl,
+        text = props.text,
+        id = props.id,
+        accessLevel = props.accessLevel,
+        localId = props.localId,
+        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;
+
+      // A11y: when the chip is in the disabled visual state, expose
+      // `aria-disabled` so assistive tech announces it as such. The
+      // disabled-tooltip text is mirrored into `aria-label` so the
+      // announcement carries the reason even without portal-id wiring for
+      // `aria-describedby`.
+      var isDisabledChip = mentionType === MentionType.DISABLED;
+      var disabledA11yProps = isDisabledChip ? _objectSpread({
+        'aria-disabled': true,
+        tabIndex: 0
+      }, disabledTooltip ? {
+        '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,
+        onMouseLeave: handleOnMouseLeave,
+        spellCheck: false,
+        "data-testid": "mention-".concat(id),
+        "data-mention-type": mentionType,
+        "data-mention-tooltip": showRestrictedTooltip || showDisabledTooltip
+      }, 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
+      } : {};
+      var wrappedMention = function () {
+        if (showRestrictedTooltip) {
+          return /*#__PURE__*/React.createElement(React.Suspense, {
+            fallback: mentionComponent
+          }, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
+            name: text
+          }, mentionComponent));
+        }
+        if (showDisabledTooltip) {
+          return /*#__PURE__*/React.createElement(React.Suspense, {
+            fallback: mentionComponent
+          }, /*#__PURE__*/React.createElement(AsyncDisabledMentionTooltip, {
+            tooltip: disabledTooltip
+          }, mentionComponent));
+        }
+        return mentionComponent;
+      }();
+      return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+        id: id
+      }, /*#__PURE__*/React.createElement("span", _extends({
+        id: localId,
+        "data-mention-id": id,
+        "data-local-id": localId,
+        "data-access-level": accessLevel,
+        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);

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

@@ -7,10 +7,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
-import { isResolvingMentionProvider } from '../../api/MentionResource';
-import { isPromise, MentionNameStatus } from '../../types';
-import Mention, { UNKNOWN_USER_ID } from './';
+import { isResolvingMentionProvider } from '../../api/isResolvingMentionProvider';
+import { isPromise } from '../../is-promise';
+import { MentionNameStatus } from '../../types';
 import debug from '../../util/logger';
+import Mention, { UNKNOWN_USER_ID } from './';
 var ResourcedMention = /*#__PURE__*/function (_React$PureComponent) {
   function ResourcedMention(_props) {
     var _this;