@atlaskit/editor-plugin-mentions 17.0.0 → 17.1.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-mentions
 
+## 17.1.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
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.0.1
+
+### Patch Changes
+
+- [`4273da2e1a648`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4273da2e1a648) -
+  Register native Quick Insert items behind `platform_editor_slash_command`.
+- [`fa754a973daeb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa754a973daeb) -
+  Keep the pending mention chip visible until the invite popup is dismissed on failure, instead of
+  removing it immediately, and fix keyboard navigation in the project role picker rendered inside
+  the popup.
+- Updated dependencies
+
 ## 17.0.0
 
 ### Patch Changes

package/dist/cjs/mentionsPlugin.js

@@ -16,11 +16,11 @@ var _uuid = _interopRequireDefault(require("uuid"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
-var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _assets = require("@atlaskit/editor-common/assets");
 var _resource = require("@atlaskit/mention/resource");
 var _types = require("@atlaskit/mention/types");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _editorCommands = require("./editor-commands");
 var _mentionNodeSpec = require("./nodeviews/mentionNodeSpec");
@@ -30,6 +30,7 @@ var _main = require("./pm-plugins/main");
 var _InlineInvitePopupContainer = require("./ui/InlineInvitePopupContainer");
 var _SecondaryToolbarComponent = require("./ui/SecondaryToolbarComponent");
 var _typeAhead = require("./ui/type-ahead");
+var _getMentionQuickInsertComponents = require("./ui/quick-insert/getMentionQuickInsertComponents");
 var _excluded2 = ["pendingPastedAgentMention"]; // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -110,9 +111,18 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
     handleMentionsChanged: options === null || options === void 0 ? void 0 : options.handleMentionsChanged,
     enableAgentSectioning: options === null || options === void 0 ? void 0 : options.enableAgentSectioning,
     showAgentMentionsLabsLozenge: options === null || options === void 0 ? void 0 : options.showAgentMentionsLabsLozenge,
+    profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
     fireEvent: fireEvent,
     api: api
   });
+  var isRegisteredSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getMentionQuickInsertComponents.getMentionQuickInsertComponents)({
+      api: api,
+      typeAhead: typeAhead
+    }));
+  }
   return {
     name: 'mention',
     nodes: function nodes() {
@@ -164,7 +174,7 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Component, {
             mentionProvider: mentionProvider,
             api: api
-          }), (0, _platformFeatureFlags.fg)('inline_invite_from_mentions_kill_switch') && /*#__PURE__*/_react.default.createElement(_InlineInvitePopupContainer.InlineInvitePopupContainer, {
+          }), (0, _fg.fg)('inline_invite_from_mentions_kill_switch') && /*#__PURE__*/_react.default.createElement(_InlineInvitePopupContainer.InlineInvitePopupContainer, {
             mentionProvider: mentionProvider,
             api: api,
             editorView: editorView
@@ -219,7 +229,7 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
           return _regenerator.default.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                if ((0, _platformFeatureFlags.fg)('platform_editor_mention_provider_via_plugin_config')) {
+                if ((0, _fg.fg)('platform_editor_mention_provider_via_plugin_config')) {
                   _context.next = 1;
                   break;
                 }
@@ -282,7 +292,7 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref9) {
+      quickInsert: isRegisteredSlashCommandEnabled ? undefined : function (_ref9) {
         var formatMessage = _ref9.formatMessage;
         return [{
           id: 'mention',
@@ -292,7 +302,7 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
           priority: 400,
           keyshortcut: '@',
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconMention, null);
+            return /*#__PURE__*/_react.default.createElement(_assets.IconMention, null);
           },
           action: function action(insert, state) {
             var _api$typeAhead3;

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

@@ -67,7 +67,7 @@ var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 var AGENT_MENTION_INACTIVITY_MS = 3000;
 var MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "16.2.0";
+var PACKAGE_VERSION = "17.0.1";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/ui/AnchoredPopup.js

@@ -33,5 +33,10 @@ function AnchoredPopup(_ref) {
     placement: "bottom-start",
     content: renderContent,
     trigger: renderTrigger
+    // Drops this popup's own `overflow: auto`, which otherwise clips the role picker's
+    // menu — it renders as a normal DOM child here (not a body portal) so it stays inside
+    // this popup's focus trap.
+    ,
+    shouldRenderToParent: true
   });
 }

package/dist/cjs/ui/InlineInvitePopupContainer.js

@@ -104,7 +104,6 @@ var InlineInvitePopupContainer = exports.InlineInvitePopupContainer = function I
     }
     var invitedUser = (_result$invited$ = result.invited[0]) !== null && _result$invited$ !== void 0 ? _result$invited$ : result.requested[0];
     if (!invitedUser || !(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2 = _api$core2.actions) !== null && _api$core2 !== void 0 && _api$core2.execute) || !(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention = _api$mention.commands) !== null && _api$mention !== void 0 && _api$mention.insertMention)) {
-      removePendingMention();
       return;
     }
     var userId = invitedUser.id,
@@ -122,7 +121,7 @@ var InlineInvitePopupContainer = exports.InlineInvitePopupContainer = function I
     }));
     pendingMentionRef.current = null;
     setAnchorElement(null);
-  }, [api, removePendingMention]);
+  }, [api]);
   var handleReady = (0, _react.useCallback)(function (show) {
     if (!provider) {
       return;

package/dist/cjs/ui/PopperWrapper.js

@@ -10,7 +10,7 @@ exports.RepositionOnUpdate = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _popper = require("@atlaskit/popper");
+var _main = require("@atlaskit/popper/main");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
 var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
@@ -84,22 +84,27 @@ function useResizeAwarePopper(_ref2) {
  */
 function Popup(_ref3) {
   var referenceElement = _ref3.referenceElement,
-    children = _ref3.children;
+    children = _ref3.children,
+    _ref3$placement = _ref3.placement,
+    placement = _ref3$placement === void 0 ? 'bottom-end' : _ref3$placement,
+    _ref3$offset = _ref3.offset,
+    offset = _ref3$offset === void 0 ? [0, 8] : _ref3$offset,
+    _ref3$disableFocusTra = _ref3.disableFocusTrap,
+    disableFocusTrap = _ref3$disableFocusTra === void 0 ? false : _ref3$disableFocusTra;
   var _React$useState = _react.default.useState(null),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     targetRef = _React$useState2[0],
     setPopupRef = _React$useState2[1];
   (0, _useFocusTrap.useFocusTrap)({
-    targetRef: targetRef
+    targetRef: targetRef,
+    enabled: !disableFocusTrap
   });
   return /*#__PURE__*/_react.default.createElement(_react.Suspense, null, /*#__PURE__*/_react.default.createElement(_portal.default, {
     zIndex: _constants.layers.modal()
-  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
-    referenceElement: referenceElement
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    offset: [0, 8],
-    placement: "bottom-end",
+  }, /*#__PURE__*/_react.default.createElement(_main.Popper, {
+    referenceElement: referenceElement,
+    offset: offset,
+    placement: placement,
     strategy: "fixed"
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,

package/dist/cjs/ui/ProfileCardComponent.js

@@ -154,7 +154,11 @@ function ProfileCardComponent(_ref5) {
     activeMention = _ref5.activeMention,
     dom = _ref5.dom,
     closeComponent = _ref5.closeComponent,
-    onAgentMentionChatClick = _ref5.onAgentMentionChatClick;
+    onAgentMentionChatClick = _ref5.onAgentMentionChatClick,
+    placement = _ref5.placement,
+    offset = _ref5.offset,
+    disableFocusTrap = _ref5.disableFocusTrap,
+    hideActions = _ref5.hideActions;
   var _useState11 = (0, _react.useState)(undefined),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
     provider = _useState12[0],
@@ -181,20 +185,28 @@ function ProfileCardComponent(_ref5) {
   });
   if (!(0, _expVal.expVal)('platform_editor_agent_mentions', 'isEnabled', false)) {
     return /*#__PURE__*/React.createElement(_PopperWrapper.Popup, {
-      referenceElement: dom
+      referenceElement: dom,
+      placement: placement,
+      offset: offset,
+      disableFocusTrap: disableFocusTrap
     }, /*#__PURE__*/React.createElement(UserProfileCardContent, {
       accessLevel: accessLevel,
       id: id,
       provider: provider,
-      text: text
+      text: text,
+      hideActions: hideActions
     }));
   }
   var isAgentMention = isAgentMentionType(userType);
   return /*#__PURE__*/React.createElement(_PopperWrapper.Popup, {
-    referenceElement: dom
+    referenceElement: dom,
+    placement: placement,
+    offset: offset,
+    disableFocusTrap: disableFocusTrap
   }, isAgentMention && provider && id ? /*#__PURE__*/React.createElement(AgentProfileCardContent, {
     accountId: id,
     provider: provider,
+    hideActions: hideActions,
     text: (0, _expVal.expVal)('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? text : undefined,
     onChatClick: onAgentMentionChatClick && (0, _platformFeatureFlags.fg)('platform_editor_agent_mentions_drop_one_fixes') ? function (event, agentStudioId) {
       return (
@@ -207,17 +219,19 @@ function ProfileCardComponent(_ref5) {
     accessLevel: accessLevel,
     id: id,
     provider: provider,
-    text: text
+    text: text,
+    hideActions: hideActions
   }));
 }
 var UserProfileCardContent = function UserProfileCardContent(_ref8) {
   var accessLevel = _ref8.accessLevel,
     id = _ref8.id,
     provider = _ref8.provider,
-    text = _ref8.text;
+    text = _ref8.text,
+    hideActions = _ref8.hideActions;
   var actions = (0, _react.useMemo)(function () {
-    return provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel);
-  }, [accessLevel, id, provider, text]);
+    return hideActions ? [] : provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel);
+  }, [hideActions, accessLevel, id, provider, text]);
   var _useProfileCardState = useProfileCardState({
       id: id,
       provider: provider
@@ -259,18 +273,29 @@ var AgentProfileCardContent = function AgentProfileCardContent(_ref9) {
   var accountId = _ref9.accountId,
     provider = _ref9.provider,
     text = _ref9.text,
-    onChatClick = _ref9.onChatClick;
+    onChatClick = _ref9.onChatClick,
+    hideActions = _ref9.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, {
     accountId: accountId,
     cloudId: provider.cloudId,
     resourceClient: provider.resourceClient,
     agentName: agentName,
-    onChatClick: onChatClick
+    onChatClick: onChatClick,
+    hideAgentActions: hideActions,
+    hideConversationStarters: hideActions,
+    hideStarButton: hideActions,
+    hideAiDisclaimer: hideActions,
+    showCreatorNameWithoutLink: hideActions
   }) : /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
     accountId: accountId,
     cloudId: provider.cloudId,
     resourceClient: provider.resourceClient,
-    onChatClick: onChatClick
+    onChatClick: onChatClick,
+    hideAgentActions: hideActions,
+    hideConversationStarters: hideActions,
+    hideStarButton: hideActions,
+    hideAiDisclaimer: hideActions,
+    showCreatorNameWithoutLink: hideActions
   });
 };

package/dist/cjs/ui/quick-insert/MentionQuickInsertMenuItem.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionQuickInsertMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _assets = require("@atlaskit/editor-common/assets");
+var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _key = require("../../pm-plugins/key");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var MentionQuickInsertMenuItem = exports.MentionQuickInsertMenuItem = function MentionQuickInsertMenuItem(_ref) {
+  var api = _ref.api,
+    typeAhead = _ref.typeAhead;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var onSelect = (0, _react.useCallback)(function (_ref2) {
+    var _mentionPluginKey$get, _api$typeAhead;
+    var editorView = _ref2.editorView,
+      insert = _ref2.insert;
+    if (((_mentionPluginKey$get = _key.mentionPluginKey.getState(editorView.state)) === null || _mentionPluginKey$get === void 0 ? void 0 : _mentionPluginKey$get.canInsertMention) === false) {
+      return false;
+    }
+    var tr = insert(undefined);
+    api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || _api$typeAhead.actions.openAtTransaction({
+      triggerHandler: typeAhead,
+      inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+    })(tr);
+    return tr;
+  }, [api, typeAhead]);
+  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_assets.IconMention, null),
+    onSelect: onSelect,
+    shortcut: "@",
+    title: formatMessage(_messages.toolbarInsertBlockMessages.mention)
+  });
+};

package/dist/cjs/ui/quick-insert/getMentionQuickInsertComponents.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMentionQuickInsertComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _createQuickInsertMatcher = require("@atlaskit/editor-common/quick-insert/create-quick-insert-matcher");
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _rank = require("@atlaskit/editor-common/quick-insert/rank");
+var _MentionQuickInsertMenuItem = require("./MentionQuickInsertMenuItem");
+var getMentionQuickInsertComponents = exports.getMentionQuickInsertComponents = function getMentionQuickInsertComponents(_ref) {
+  var api = _ref.api,
+    typeAhead = _ref.typeAhead;
+  return [{
+    key: _keys.MENTION_MENU_ITEM.key,
+    type: _keys.MENTION_MENU_ITEM.type,
+    parents: [{
+      key: _keys.MEDIA_SECTION.key,
+      type: _keys.MEDIA_SECTION.type,
+      rank: _rank.MEDIA_SECTION_RANK[_keys.MENTION_MENU_ITEM.key]
+    }],
+    match: (0, _createQuickInsertMatcher.createQuickInsertMatcher)(function (_ref2) {
+      var formatMessage = _ref2.formatMessage;
+      return {
+        description: formatMessage(_messages.toolbarInsertBlockMessages.mentionDescription),
+        keywords: ['team', 'user'],
+        shortcut: '@',
+        title: formatMessage(_messages.toolbarInsertBlockMessages.mention)
+      };
+    }),
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MentionQuickInsertMenuItem.MentionQuickInsertMenuItem, {
+        api: api,
+        typeAhead: typeAhead
+      });
+    }
+  }];
+};

package/dist/cjs/ui/type-ahead/MentionItemWithProfileCard.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionItemWithProfileCard = MentionItemWithProfileCard;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _item = require("@atlaskit/mention/item");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _ProfileCardComponent = require("../ProfileCardComponent");
+var _utils = require("./utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// Delay before mounting the card and fetching the profile data
+var SHOW_DELAY_MS = 600;
+var HIDE_DELAY_MS = 200;
+/**
+ * Renders a mentions typeahead row that shows a (reduced) profile card
+ * when hovered
+ */
+function MentionItemWithProfileCard(_ref) {
+  var mention = _ref.mention,
+    selected = _ref.selected,
+    onSelection = _ref.onSelection,
+    height = _ref.height,
+    profilecardProvider = _ref.profilecardProvider;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    referenceElement = _useState2[0],
+    setReferenceElement = _useState2[1];
+  var showTimerRef = (0, _react.useRef)();
+  var hideTimerRef = (0, _react.useRef)();
+  var clearTimers = (0, _react.useCallback)(function () {
+    clearTimeout(showTimerRef.current);
+    clearTimeout(hideTimerRef.current);
+  }, []);
+  (0, _react.useEffect)(function () {
+    return clearTimers;
+  }, [clearTimers]);
+  var isAgent = (0, _utils.isAgentMention)(mention);
+  var handleMouseEnter = (0, _react.useCallback)(function (_mention, event) {
+    // Currently showing profile cards for agents only
+    if (mention.isPlaceholder || !mention.id || !profilecardProvider || !isAgent) {
+      return;
+    }
+    var rowElement = event === null || event === void 0 ? void 0 : event.currentTarget;
+    if (!(rowElement instanceof HTMLElement)) {
+      return;
+    }
+    clearTimers();
+    showTimerRef.current = setTimeout(function () {
+      setReferenceElement(rowElement);
+    }, SHOW_DELAY_MS);
+  }, [mention.isPlaceholder, mention.id, isAgent, profilecardProvider, clearTimers]);
+  var scheduleHide = (0, _react.useCallback)(function () {
+    clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(function () {
+      setReferenceElement(null);
+    }, HIDE_DELAY_MS);
+  }, []);
+  var cancelHide = (0, _react.useCallback)(function () {
+    clearTimeout(hideTimerRef.current);
+  }, []);
+  var handleMouseLeave = (0, _react.useCallback)(function () {
+    clearTimeout(showTimerRef.current);
+    scheduleHide();
+  }, [scheduleHide]);
+  var closeCard = (0, _react.useCallback)(function () {
+    clearTimers();
+    setReferenceElement(null);
+  }, [clearTimers]);
+  var userType = isAgent ? 'APP' : undefined;
+  var activeMention = (0, _react.useMemo)(function () {
+    return {
+      attrs: {
+        id: mention.id,
+        text: mention.name,
+        userType: userType,
+        accessLevel: mention.accessLevel
+      }
+    };
+  }, [mention.id, mention.name, mention.accessLevel, userType]);
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    testId: "mention-item-with-profile-card",
+    onMouseOver: cancelHide,
+    onMouseOut: scheduleHide,
+    onMouseLeave: handleMouseLeave,
+    onBlur: handleMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_item.MentionItem, {
+    mention: mention,
+    selected: selected,
+    onMouseEnter: handleMouseEnter,
+    onSelection: onSelection,
+    height: height
+  }), referenceElement && profilecardProvider && /*#__PURE__*/_react.default.createElement(_ProfileCardComponent.ProfileCardComponent, {
+    activeMention: activeMention,
+    profilecardProvider: profilecardProvider,
+    dom: referenceElement,
+    closeComponent: closeCard,
+    placement: "right",
+    disableFocusTrap: true,
+    hideActions: true
+  }));
+}