@atlaskit/editor-plugin-mentions 21.0.2 → 21.1.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-mentions
 
+## 21.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.1.0
+
+### Minor Changes
+
+- [`1012a17b207ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1012a17b207ba) -
+  Migrate the editor mentions profile card loader to react-loosely-lazy behind the
+  `platform_editor_loosely_lazy_migration` experiment.
+- [`d28cad9beb783`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d28cad9beb783) -
+  Enable mention avatars when the platform_editor_mention_node_graphql_provider experiment is
+  enabled
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.0.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -172,7 +172,7 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
       api = config.api,
       portalProviderAPI = config.portalProviderAPI,
       editorView = config.editorView;
-    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_node_avatar');
+    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_node_avatar') || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_node_graphql_provider'));
     var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(node, this.hasAvatarSlot)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;

package/dist/cjs/pm-plugins/main.js

@@ -44,7 +44,7 @@ var ACTIONS = exports.ACTIONS = {
   CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "21.0.1";
+var PACKAGE_VERSION = "21.1.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/ui/ProfileCardComponent.js

@@ -17,34 +17,54 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _bindEventListener = require("bind-event-listener");
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _reactLooselyLazy = require("react-loosely-lazy");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _lazyProfileCard = require("@atlaskit/profilecard/lazy-profile-card");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 var _PopperWrapper = require("./PopperWrapper");
-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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, 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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); } // oxlint-disable-next-line @atlassian/no-restricted-imports
 // eslint-disable-next-line require-unicode-regexp
 var LEADING_AT_SIGN_RE = /^@/;
-var AgentProfileCardResourcedLazy = (0, _reactLoadable.default)({
-  loader: function loader() {
-    return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
-      '@atlaskit/profilecard/agent-profile-card-resourced'));
-    }).then(function (_ref) {
-      var AgentProfileCardResourced = _ref.AgentProfileCardResourced;
-      return AgentProfileCardResourced;
-    });
-  },
+var loadAgentProfileCardResourced = function loadAgentProfileCardResourced() {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
+    '@atlaskit/profilecard/agent-profile-card-resourced'));
+  }).then(function (_ref) {
+    var AgentProfileCardResourced = _ref.AgentProfileCardResourced;
+    return AgentProfileCardResourced;
+  });
+};
+var AgentProfileCardResourcedLazy = (0, _reactLooselyLazy.lazyForPaint)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
+    '@atlaskit/profilecard/agent-profile-card-resourced'));
+  }).then(function (_ref2) {
+    var AgentProfileCardResourced = _ref2.AgentProfileCardResourced;
+    return AgentProfileCardResourced;
+  });
+});
+var AgentProfileCardResourcedLoadable = (0, _reactLoadable.default)({
+  loader: loadAgentProfileCardResourced,
   loading: function loading() {
     return null;
   }
 });
+var AgentProfileCardResourced = function AgentProfileCardResourced(props) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(_reactLooselyLazy.LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, props)) :
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-props-no-spreading -- forward the loader props to the profile card
+  React.createElement(AgentProfileCardResourcedLoadable, props);
+};
 var styles = {
   loadingStyles: "_2rko12b0 _16qs130s"
 };
-var LoadingWrapper = function LoadingWrapper(_ref2) {
-  var children = _ref2.children,
-    isLoading = _ref2.isLoading;
+var LoadingWrapper = function LoadingWrapper(_ref3) {
+  var children = _ref3.children,
+    isLoading = _ref3.isLoading;
   return isLoading ? /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([styles.loadingStyles])
   }, children) : children;
@@ -52,9 +72,9 @@ var LoadingWrapper = function LoadingWrapper(_ref2) {
 var isAgentMentionType = exports.isAgentMentionType = function isAgentMentionType(userType) {
   return userType === 'APP' || userType === 'AGENT';
 };
-var useProfileCardState = exports.useProfileCardState = function useProfileCardState(_ref3) {
-  var id = _ref3.id,
-    provider = _ref3.provider;
+var useProfileCardState = exports.useProfileCardState = function useProfileCardState(_ref4) {
+  var id = _ref4.id,
+    provider = _ref4.provider;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     data = _useState2[0],
@@ -83,7 +103,7 @@ var useProfileCardState = exports.useProfileCardState = function useProfileCardS
   // From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
   (0, _react.useEffect)(function () {
     var fetchData = /*#__PURE__*/function () {
-      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var _yield$Promise$all, _yield$Promise$all2, _data, reportingLines, shouldGiveKudos, _teamCentralBaseUrl, _t;
         return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -130,7 +150,7 @@ var useProfileCardState = exports.useProfileCardState = function useProfileCardS
         }, _callee, null, [[2, 4, 5, 6]]);
       }));
       return function fetchData() {
-        return _ref4.apply(this, arguments);
+        return _ref5.apply(this, arguments);
       };
     }();
     fetchData();
@@ -148,17 +168,17 @@ var useProfileCardState = exports.useProfileCardState = function useProfileCardS
 /**
  * Renders the profile card popup for an editor mention node.
  */
-function ProfileCardComponent(_ref5) {
-  var _ref7;
-  var profilecardProvider = _ref5.profilecardProvider,
-    activeMention = _ref5.activeMention,
-    dom = _ref5.dom,
-    closeComponent = _ref5.closeComponent,
-    onAgentMentionChatClick = _ref5.onAgentMentionChatClick,
-    placement = _ref5.placement,
-    offset = _ref5.offset,
-    disableFocusTrap = _ref5.disableFocusTrap,
-    hideActions = _ref5.hideActions;
+function ProfileCardComponent(_ref6) {
+  var _ref8;
+  var profilecardProvider = _ref6.profilecardProvider,
+    activeMention = _ref6.activeMention,
+    dom = _ref6.dom,
+    closeComponent = _ref6.closeComponent,
+    onAgentMentionChatClick = _ref6.onAgentMentionChatClick,
+    placement = _ref6.placement,
+    offset = _ref6.offset,
+    disableFocusTrap = _ref6.disableFocusTrap,
+    hideActions = _ref6.hideActions;
   var _useState11 = (0, _react.useState)(undefined),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
     provider = _useState12[0],
@@ -168,11 +188,11 @@ function ProfileCardComponent(_ref5) {
       setProvider(p);
     });
   }, [profilecardProvider]);
-  var _ref6 = (_ref7 = activeMention.attrs) !== null && _ref7 !== void 0 ? _ref7 : {},
-    id = _ref6.id,
-    text = _ref6.text,
-    accessLevel = _ref6.accessLevel,
-    userType = _ref6.userType;
+  var _ref7 = (_ref8 = activeMention.attrs) !== null && _ref8 !== void 0 ? _ref8 : {},
+    id = _ref7.id,
+    text = _ref7.text,
+    accessLevel = _ref7.accessLevel,
+    userType = _ref7.userType;
   (0, _react.useEffect)(function () {
     return (0, _bindEventListener.bind)(window, {
       type: 'keydown',
@@ -225,12 +245,12 @@ function ProfileCardComponent(_ref5) {
     hideActions: hideActions
   }));
 }
-var UserProfileCardContent = function UserProfileCardContent(_ref8) {
-  var accessLevel = _ref8.accessLevel,
-    id = _ref8.id,
-    provider = _ref8.provider,
-    text = _ref8.text,
-    hideActions = _ref8.hideActions;
+var UserProfileCardContent = function UserProfileCardContent(_ref9) {
+  var accessLevel = _ref9.accessLevel,
+    id = _ref9.id,
+    provider = _ref9.provider,
+    text = _ref9.text,
+    hideActions = _ref9.hideActions;
   var actions = (0, _react.useMemo)(function () {
     return hideActions ? [] : provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel);
   }, [hideActions, accessLevel, id, provider, text]);
@@ -271,14 +291,14 @@ var UserProfileCardContent = function UserProfileCardContent(_ref8) {
     isRenderedInPortal: (0, _expValEquals.expValEquals)('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)
   }));
 };
-var AgentProfileCardContent = function AgentProfileCardContent(_ref9) {
-  var accountId = _ref9.accountId,
-    provider = _ref9.provider,
-    text = _ref9.text,
-    onChatClick = _ref9.onChatClick,
-    hideActions = _ref9.hideActions;
+var AgentProfileCardContent = function AgentProfileCardContent(_ref0) {
+  var accountId = _ref0.accountId,
+    provider = _ref0.provider,
+    text = _ref0.text,
+    onChatClick = _ref0.onChatClick,
+    hideActions = _ref0.hideActions;
   var agentName = (text !== null && text !== void 0 ? text : '').replace(LEADING_AT_SIGN_RE, '');
-  return (0, _expVal.expVal)('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
+  return (0, _expVal.expVal)('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? /*#__PURE__*/React.createElement(AgentProfileCardResourced, {
     accountId: accountId,
     cloudId: provider.cloudId,
     resourceClient: provider.resourceClient,
@@ -289,7 +309,7 @@ var AgentProfileCardContent = function AgentProfileCardContent(_ref9) {
     hideStarButton: hideActions,
     hideAiDisclaimer: hideActions,
     showCreatorNameWithoutLink: hideActions
-  }) : /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
+  }) : /*#__PURE__*/React.createElement(AgentProfileCardResourced, {
     accountId: accountId,
     cloudId: provider.cloudId,
     resourceClient: provider.resourceClient,

package/dist/es2019/nodeviews/mentionNodeView.js

@@ -135,7 +135,7 @@ export class MentionNodeView {
       portalProviderAPI,
       editorView
     } = config;
-    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && isExperimentEnabled('platform_editor_mention_node_avatar');
+    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && (isExperimentEnabled('platform_editor_mention_node_avatar') || isExperimentEnabled('platform_editor_mention_node_graphql_provider'));
     const {
       dom,
       contentDOM

package/dist/es2019/pm-plugins/main.js

@@ -33,7 +33,7 @@ export const ACTIONS = {
   CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
 };
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "21.0.1";
+const PACKAGE_VERSION = "21.1.0";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/ui/ProfileCardComponent.js

@@ -5,6 +5,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Loadable from 'react-loadable';
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { ProfileCardLazy } from '@atlaskit/profilecard/lazy-profile-card';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -13,13 +16,24 @@ import { Popup } from './PopperWrapper';
 
 // eslint-disable-next-line require-unicode-regexp
 const LEADING_AT_SIGN_RE = /^@/;
-const AgentProfileCardResourcedLazy = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
-  '@atlaskit/profilecard/agent-profile-card-resourced').then(({
-    AgentProfileCardResourced
-  }) => AgentProfileCardResourced),
+const loadAgentProfileCardResourced = () => import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
+'@atlaskit/profilecard/agent-profile-card-resourced').then(({
+  AgentProfileCardResourced
+}) => AgentProfileCardResourced);
+const AgentProfileCardResourcedLazy = lazyForPaint(() => import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
+'@atlaskit/profilecard/agent-profile-card-resourced').then(({
+  AgentProfileCardResourced
+}) => AgentProfileCardResourced));
+const AgentProfileCardResourcedLoadable = Loadable({
+  loader: loadAgentProfileCardResourced,
   loading: () => null
 });
+const AgentProfileCardResourced = props => isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(LazySuspense, {
+  fallback: null
+}, /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, props)) :
+/*#__PURE__*/
+// eslint-disable-next-line react/jsx-props-no-spreading -- forward the loader props to the profile card
+React.createElement(AgentProfileCardResourcedLoadable, props);
 const styles = {
   loadingStyles: "_2rko12b0 _16qs130s"
 };
@@ -209,7 +223,7 @@ const AgentProfileCardContent = ({
   hideActions
 }) => {
   const agentName = (text !== null && text !== void 0 ? text : '').replace(LEADING_AT_SIGN_RE, '');
-  return expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
+  return expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? /*#__PURE__*/React.createElement(AgentProfileCardResourced, {
     accountId: accountId,
     cloudId: provider.cloudId,
     resourceClient: provider.resourceClient,
@@ -220,7 +234,7 @@ const AgentProfileCardContent = ({
     hideStarButton: hideActions,
     hideAiDisclaimer: hideActions,
     showCreatorNameWithoutLink: hideActions
-  }) : /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
+  }) : /*#__PURE__*/React.createElement(AgentProfileCardResourced, {
     accountId: accountId,
     cloudId: provider.cloudId,
     resourceClient: provider.resourceClient,

package/dist/esm/nodeviews/mentionNodeView.js

@@ -167,7 +167,7 @@ export var MentionNodeView = /*#__PURE__*/function () {
       api = config.api,
       portalProviderAPI = config.portalProviderAPI,
       editorView = config.editorView;
-    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && isExperimentEnabled('platform_editor_mention_node_avatar');
+    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && (isExperimentEnabled('platform_editor_mention_node_avatar') || isExperimentEnabled('platform_editor_mention_node_graphql_provider'));
     var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(node, this.hasAvatarSlot)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;

package/dist/esm/pm-plugins/main.js

@@ -36,7 +36,7 @@ export var ACTIONS = {
   CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "21.0.1";
+var PACKAGE_VERSION = "21.1.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/esm/ui/ProfileCardComponent.js

@@ -8,6 +8,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Loadable from 'react-loadable';
+// oxlint-disable-next-line @atlassian/no-restricted-imports
+import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { ProfileCardLazy } from '@atlaskit/profilecard/lazy-profile-card';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -16,24 +19,40 @@ import { Popup } from './PopperWrapper';
 
 // eslint-disable-next-line require-unicode-regexp
 var LEADING_AT_SIGN_RE = /^@/;
-var AgentProfileCardResourcedLazy = Loadable({
-  loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
-    '@atlaskit/profilecard/agent-profile-card-resourced').then(function (_ref) {
-      var AgentProfileCardResourced = _ref.AgentProfileCardResourced;
-      return AgentProfileCardResourced;
-    });
-  },
+var loadAgentProfileCardResourced = function loadAgentProfileCardResourced() {
+  return import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
+  '@atlaskit/profilecard/agent-profile-card-resourced').then(function (_ref) {
+    var AgentProfileCardResourced = _ref.AgentProfileCardResourced;
+    return AgentProfileCardResourced;
+  });
+};
+var AgentProfileCardResourcedLazy = lazyForPaint(function () {
+  return import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
+  '@atlaskit/profilecard/agent-profile-card-resourced').then(function (_ref2) {
+    var AgentProfileCardResourced = _ref2.AgentProfileCardResourced;
+    return AgentProfileCardResourced;
+  });
+});
+var AgentProfileCardResourcedLoadable = Loadable({
+  loader: loadAgentProfileCardResourced,
   loading: function loading() {
     return null;
   }
 });
+var AgentProfileCardResourced = function AgentProfileCardResourced(props) {
+  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, props)) :
+  /*#__PURE__*/
+  // eslint-disable-next-line react/jsx-props-no-spreading -- forward the loader props to the profile card
+  React.createElement(AgentProfileCardResourcedLoadable, props);
+};
 var styles = {
   loadingStyles: "_2rko12b0 _16qs130s"
 };
-var LoadingWrapper = function LoadingWrapper(_ref2) {
-  var children = _ref2.children,
-    isLoading = _ref2.isLoading;
+var LoadingWrapper = function LoadingWrapper(_ref3) {
+  var children = _ref3.children,
+    isLoading = _ref3.isLoading;
   return isLoading ? /*#__PURE__*/React.createElement("div", {
     className: ax([styles.loadingStyles])
   }, children) : children;
@@ -41,9 +60,9 @@ var LoadingWrapper = function LoadingWrapper(_ref2) {
 export var isAgentMentionType = function isAgentMentionType(userType) {
   return userType === 'APP' || userType === 'AGENT';
 };
-export var useProfileCardState = function useProfileCardState(_ref3) {
-  var id = _ref3.id,
-    provider = _ref3.provider;
+export var useProfileCardState = function useProfileCardState(_ref4) {
+  var id = _ref4.id,
+    provider = _ref4.provider;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
@@ -72,7 +91,7 @@ export var useProfileCardState = function useProfileCardState(_ref3) {
   // From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
   useEffect(function () {
     var fetchData = /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var _yield$Promise$all, _yield$Promise$all2, _data, reportingLines, shouldGiveKudos, _teamCentralBaseUrl, _t;
         return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -119,7 +138,7 @@ export var useProfileCardState = function useProfileCardState(_ref3) {
         }, _callee, null, [[2, 4, 5, 6]]);
       }));
       return function fetchData() {
-        return _ref4.apply(this, arguments);
+        return _ref5.apply(this, arguments);
       };
     }();
     fetchData();
@@ -137,17 +156,17 @@ export var useProfileCardState = function useProfileCardState(_ref3) {
 /**
  * Renders the profile card popup for an editor mention node.
  */
-export function ProfileCardComponent(_ref5) {
-  var _ref7;
-  var profilecardProvider = _ref5.profilecardProvider,
-    activeMention = _ref5.activeMention,
-    dom = _ref5.dom,
-    closeComponent = _ref5.closeComponent,
-    onAgentMentionChatClick = _ref5.onAgentMentionChatClick,
-    placement = _ref5.placement,
-    offset = _ref5.offset,
-    disableFocusTrap = _ref5.disableFocusTrap,
-    hideActions = _ref5.hideActions;
+export function ProfileCardComponent(_ref6) {
+  var _ref8;
+  var profilecardProvider = _ref6.profilecardProvider,
+    activeMention = _ref6.activeMention,
+    dom = _ref6.dom,
+    closeComponent = _ref6.closeComponent,
+    onAgentMentionChatClick = _ref6.onAgentMentionChatClick,
+    placement = _ref6.placement,
+    offset = _ref6.offset,
+    disableFocusTrap = _ref6.disableFocusTrap,
+    hideActions = _ref6.hideActions;
   var _useState11 = useState(undefined),
     _useState12 = _slicedToArray(_useState11, 2),
     provider = _useState12[0],
@@ -157,11 +176,11 @@ export function ProfileCardComponent(_ref5) {
       setProvider(p);
     });
   }, [profilecardProvider]);
-  var _ref6 = (_ref7 = activeMention.attrs) !== null && _ref7 !== void 0 ? _ref7 : {},
-    id = _ref6.id,
-    text = _ref6.text,
-    accessLevel = _ref6.accessLevel,
-    userType = _ref6.userType;
+  var _ref7 = (_ref8 = activeMention.attrs) !== null && _ref8 !== void 0 ? _ref8 : {},
+    id = _ref7.id,
+    text = _ref7.text,
+    accessLevel = _ref7.accessLevel,
+    userType = _ref7.userType;
   useEffect(function () {
     return bind(window, {
       type: 'keydown',
@@ -214,12 +233,12 @@ export function ProfileCardComponent(_ref5) {
     hideActions: hideActions
   }));
 }
-var UserProfileCardContent = function UserProfileCardContent(_ref8) {
-  var accessLevel = _ref8.accessLevel,
-    id = _ref8.id,
-    provider = _ref8.provider,
-    text = _ref8.text,
-    hideActions = _ref8.hideActions;
+var UserProfileCardContent = function UserProfileCardContent(_ref9) {
+  var accessLevel = _ref9.accessLevel,
+    id = _ref9.id,
+    provider = _ref9.provider,
+    text = _ref9.text,
+    hideActions = _ref9.hideActions;
   var actions = useMemo(function () {
     return hideActions ? [] : provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel);
   }, [hideActions, accessLevel, id, provider, text]);
@@ -260,14 +279,14 @@ var UserProfileCardContent = function UserProfileCardContent(_ref8) {
     isRenderedInPortal: expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)
   }));
 };
-var AgentProfileCardContent = function AgentProfileCardContent(_ref9) {
-  var accountId = _ref9.accountId,
-    provider = _ref9.provider,
-    text = _ref9.text,
-    onChatClick = _ref9.onChatClick,
-    hideActions = _ref9.hideActions;
+var AgentProfileCardContent = function AgentProfileCardContent(_ref0) {
+  var accountId = _ref0.accountId,
+    provider = _ref0.provider,
+    text = _ref0.text,
+    onChatClick = _ref0.onChatClick,
+    hideActions = _ref0.hideActions;
   var agentName = (text !== null && text !== void 0 ? text : '').replace(LEADING_AT_SIGN_RE, '');
-  return expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
+  return expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? /*#__PURE__*/React.createElement(AgentProfileCardResourced, {
     accountId: accountId,
     cloudId: provider.cloudId,
     resourceClient: provider.resourceClient,
@@ -278,7 +297,7 @@ var AgentProfileCardContent = function AgentProfileCardContent(_ref9) {
     hideStarButton: hideActions,
     hideAiDisclaimer: hideActions,
     showCreatorNameWithoutLink: hideActions
-  }) : /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
+  }) : /*#__PURE__*/React.createElement(AgentProfileCardResourced, {
     accountId: accountId,
     cloudId: provider.cloudId,
     resourceClient: provider.resourceClient,

package/dist/types/entry-points/mention-node-data-provider.d.ts

@@ -1,2 +1,2 @@
 export { MentionNodeDataProvider } from '../providers/mention-node-data-provider';
-export type { FetchMentionNodeData } from '../providers/mention-node-data-provider';
+export type { FetchMentionNodeData, ResolveMentionNodeData, } from '../providers/mention-node-data-provider';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "21.0.2",
+	"version": "21.1.1",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,7 +21,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^57.5.0",
+		"@atlaskit/adf-schema": "^57.6.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/editor-json-transformer": "^9.8.0",
 		"@atlaskit/editor-plugin-analytics": "^19.0.0",
@@ -47,7 +47,7 @@
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/teams-app-config": "^3.1.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^201.0.0",
+		"@atlaskit/tmp-editor-statsig": "^202.0.0",
 		"@atlaskit/tokens": "^18.2.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/user-picker": "^13.13.0",
@@ -56,16 +56,17 @@
 		"bind-event-listener": "^3.0.0",
 		"focus-trap": "^2.4.5",
 		"react-loadable": "^5.1.0",
+		"react-loosely-lazy": "^1.0.0",
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.2.0",
+		"@atlaskit/editor-common": "^123.5.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"devDependencies": {
-		"@atlaskit/button": "^25.3.0",
+		"@atlaskit/button": "^25.4.0",
 		"@atlaskit/editor-core": "^229.1.0",
 		"@atlassian/workbench": "workspace:*",
 		"@testing-library/react": "^16.3.0",