@atlaskit/editor-plugin-mentions 17.0.1 → 17.1.1

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

@@ -51,7 +51,7 @@ const AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 const AGENT_MENTION_INACTIVITY_MS = 3000;
 const MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "17.0.0";
+const PACKAGE_VERSION = "17.1.0";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/ui/PopperWrapper.js

@@ -1,6 +1,6 @@
 import React, { useRef, useLayoutEffect, useEffect, Suspense } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Popper as ReactPopper } from '@atlaskit/popper';
+import { Popper as ReactPopper } from '@atlaskit/popper/main';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
@@ -73,20 +73,22 @@ function useResizeAwarePopper({
  */
 export function Popup({
   referenceElement,
-  children
+  children,
+  placement = 'bottom-end',
+  offset = [0, 8],
+  disableFocusTrap = false
 }) {
   const [targetRef, setPopupRef] = React.useState(null);
   useFocusTrap({
-    targetRef: targetRef
+    targetRef: targetRef,
+    enabled: !disableFocusTrap
   });
   return /*#__PURE__*/React.createElement(Suspense, null, /*#__PURE__*/React.createElement(Portal, {
     zIndex: layers.modal()
   }, /*#__PURE__*/React.createElement(ReactPopper, {
-    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",
+    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/es2019/ui/ProfileCardComponent.js

@@ -84,7 +84,11 @@ export function ProfileCardComponent({
   activeMention,
   dom,
   closeComponent,
-  onAgentMentionChatClick
+  onAgentMentionChatClick,
+  placement,
+  offset,
+  disableFocusTrap,
+  hideActions
 }) {
   var _ref;
   const [provider, setProvider] = useState(undefined);
@@ -111,20 +115,28 @@ export function ProfileCardComponent({
   });
   if (!expVal('platform_editor_agent_mentions', 'isEnabled', false)) {
     return /*#__PURE__*/React.createElement(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
     }));
   }
   const isAgentMention = isAgentMentionType(userType);
   return /*#__PURE__*/React.createElement(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: expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? text : undefined,
     onChatClick: onAgentMentionChatClick && fg('platform_editor_agent_mentions_drop_one_fixes') ? (event, agentStudioId) =>
     // agentMentionContext is already captured in the onAgentMentionChatClick
@@ -134,16 +146,18 @@ export function ProfileCardComponent({
     accessLevel: accessLevel,
     id: id,
     provider: provider,
-    text: text
+    text: text,
+    hideActions: hideActions
   }));
 }
 const UserProfileCardContent = ({
   accessLevel,
   id,
   provider,
-  text
+  text,
+  hideActions
 }) => {
-  const actions = useMemo(() => provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel), [accessLevel, id, provider, text]);
+  const actions = useMemo(() => hideActions ? [] : provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel), [hideActions, accessLevel, id, provider, text]);
   const {
     data,
     reportingLinesData,
@@ -186,7 +200,8 @@ const AgentProfileCardContent = ({
   accountId,
   provider,
   text,
-  onChatClick
+  onChatClick,
+  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, {
@@ -194,11 +209,21 @@ const AgentProfileCardContent = ({
     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/es2019/ui/type-ahead/MentionItemWithProfileCard.js

@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { MentionItem } from '@atlaskit/mention/item';
+import { Box } from '@atlaskit/primitives/compiled';
+import { ProfileCardComponent } from '../ProfileCardComponent';
+import { isAgentMention } from './utils';
+
+// Delay before mounting the card and fetching the profile data
+const SHOW_DELAY_MS = 600;
+const HIDE_DELAY_MS = 200;
+/**
+ * Renders a mentions typeahead row that shows a (reduced) profile card
+ * when hovered
+ */
+export function MentionItemWithProfileCard({
+  mention,
+  selected,
+  onSelection,
+  height,
+  profilecardProvider
+}) {
+  const [referenceElement, setReferenceElement] = useState(null);
+  const showTimerRef = useRef();
+  const hideTimerRef = useRef();
+  const clearTimers = useCallback(() => {
+    clearTimeout(showTimerRef.current);
+    clearTimeout(hideTimerRef.current);
+  }, []);
+  useEffect(() => clearTimers, [clearTimers]);
+  const isAgent = isAgentMention(mention);
+  const handleMouseEnter = useCallback((_mention, event) => {
+    // Currently showing profile cards for agents only
+    if (mention.isPlaceholder || !mention.id || !profilecardProvider || !isAgent) {
+      return;
+    }
+    const rowElement = event === null || event === void 0 ? void 0 : event.currentTarget;
+    if (!(rowElement instanceof HTMLElement)) {
+      return;
+    }
+    clearTimers();
+    showTimerRef.current = setTimeout(() => {
+      setReferenceElement(rowElement);
+    }, SHOW_DELAY_MS);
+  }, [mention.isPlaceholder, mention.id, isAgent, profilecardProvider, clearTimers]);
+  const scheduleHide = useCallback(() => {
+    clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(() => {
+      setReferenceElement(null);
+    }, HIDE_DELAY_MS);
+  }, []);
+  const cancelHide = useCallback(() => {
+    clearTimeout(hideTimerRef.current);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    clearTimeout(showTimerRef.current);
+    scheduleHide();
+  }, [scheduleHide]);
+  const closeCard = useCallback(() => {
+    clearTimers();
+    setReferenceElement(null);
+  }, [clearTimers]);
+  const userType = isAgent ? 'APP' : undefined;
+  const activeMention = useMemo(() => ({
+    attrs: {
+      id: mention.id,
+      text: mention.name,
+      userType,
+      accessLevel: mention.accessLevel
+    }
+  }), [mention.id, mention.name, mention.accessLevel, userType]);
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: "mention-item-with-profile-card",
+    onMouseOver: cancelHide,
+    onMouseOut: scheduleHide,
+    onMouseLeave: handleMouseLeave,
+    onBlur: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(MentionItem, {
+    mention: mention,
+    selected: selected,
+    onMouseEnter: handleMouseEnter,
+    onSelection: onSelection,
+    height: height
+  }), referenceElement && profilecardProvider && /*#__PURE__*/React.createElement(ProfileCardComponent, {
+    activeMention: activeMention,
+    profilecardProvider: profilecardProvider,
+    dom: referenceElement,
+    closeComponent: closeCard,
+    placement: "right",
+    disableFocusTrap: true,
+    hideActions: true
+  }));
+}

package/dist/es2019/ui/type-ahead/index.js

@@ -20,9 +20,8 @@ import { getMentionPluginState } from '../../pm-plugins/utils';
 import InviteItem, { INVITE_ITEM_DESCRIPTION } from '../InviteItem';
 import InviteItemWithEmailDomain from '../InviteItem/InviteItemWithEmailDomain';
 import { buildTypeAheadCancelPayload, buildTypeAheadInsertedPayload, buildTypeAheadInviteItemClickedPayload, buildTypeAheadInviteItemViewedPayload, buildTypeAheadRenderedPayload } from './analytics';
-import { isInviteItem, isTeamStats, isTeamType, shouldKeepInviteItem } from './utils';
-const isAgentUserType = userType => userType === 'APP' || userType === 'AGENT';
-const isAgentMention = mention => isAgentUserType(mention.userType) || mention.appType === 'agent';
+import { MentionItemWithProfileCard } from './MentionItemWithProfileCard';
+import { isAgentMention, isInviteItem, isTeamStats, isTeamType, shouldKeepInviteItem } from './utils';
 const isAgentTypeAheadItem = item => item.mention ? isAgentMention(item.mention) : false;
 
 // A non-selectable loading placeholder injected by the provider (e.g.
@@ -84,7 +83,10 @@ const withInviteItem = ({
   // invite item should be shown at the bottom
   inviteItem];
 };
-const makeMentionToTypeaheadItem = useRefreshedItemHeight => mention => {
+const makeMentionToTypeaheadItem = ({
+  useRefreshedItemHeight,
+  profilecardProvider
+}) => mention => {
   const itemHeight = useRefreshedItemHeight ? MENTION_ITEM_HEIGHT_REFRESHED : MENTION_ITEM_HEIGHT;
   return {
     title: mention.id,
@@ -92,7 +94,13 @@ const makeMentionToTypeaheadItem = useRefreshedItemHeight => mention => {
       isSelected,
       onClick,
       onHover
-    }) => /*#__PURE__*/React.createElement(MentionItem, {
+    }) => expVal('platform_editor_agent_mentions', 'isEnabled', false) && fg('platform_editor_mention_typeahead_profilecard') ? /*#__PURE__*/React.createElement(MentionItemWithProfileCard, {
+      mention: mention,
+      selected: isSelected,
+      onSelection: onClick,
+      height: itemHeight,
+      profilecardProvider: profilecardProvider
+    }) : /*#__PURE__*/React.createElement(MentionItem, {
       mention: mention,
       selected: isSelected,
       onMouseEnter: onHover,
@@ -105,7 +113,9 @@ const makeMentionToTypeaheadItem = useRefreshedItemHeight => mention => {
     mention
   };
 };
-export const mentionToTypeaheadItem = mention => makeMentionToTypeaheadItem(expVal('platform_editor_agent_mentions', 'isEnabled', false))(mention);
+export const mentionToTypeaheadItem = mention => makeMentionToTypeaheadItem({
+  useRefreshedItemHeight: expVal('platform_editor_agent_mentions', 'isEnabled', false)
+})(mention);
 
 /**
  * Caches mention typeahead items by mention ID.
@@ -302,7 +312,8 @@ export const createTypeAheadConfig = ({
   api,
   handleMentionsChanged,
   enableAgentSectioning = false,
-  showAgentMentionsLabsLozenge = false
+  showAgentMentionsLabsLozenge = false,
+  profilecardProvider
 }) => {
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   let sessionId = uuid();
@@ -315,7 +326,10 @@ export const createTypeAheadConfig = ({
     setFirstQueryWithoutResults: query => {
       firstQueryWithoutResults = query;
     },
-    toItem: memoize(makeMentionToTypeaheadItem(enableAgentSectioning)).call
+    toItem: memoize(makeMentionToTypeaheadItem({
+      useRefreshedItemHeight: enableAgentSectioning,
+      profilecardProvider
+    })).call
   });
   const typeAhead = {
     id: TypeAheadAvailableNodes.MENTION,

package/dist/es2019/ui/type-ahead/utils.js

@@ -12,6 +12,8 @@ export const isTeamType = userType => userType === 'TEAM';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isTeamStats = stat => stat && !isNaN(stat.teamMentionDuration);
 export const isInviteItem = mention => mention && mention.id === INVITE_ITEM_DESCRIPTION.id;
+export const isAgentUserType = userType => userType === 'APP' || userType === 'AGENT';
+export const isAgentMention = mention => isAgentUserType(mention.userType) || mention.appType === 'agent';
 
 /**
  * Actions

package/dist/es2019/ui/useFocusTrap.js

@@ -6,10 +6,11 @@
 import { useEffect } from 'react';
 import createFocusTrap from 'focus-trap';
 export const useFocusTrap = ({
-  targetRef
+  targetRef,
+  enabled = true
 }) => {
   useEffect(() => {
-    if (!targetRef) {
+    if (!targetRef || !enabled) {
       return;
     }
     const trapConfig = {
@@ -33,5 +34,5 @@ export const useFocusTrap = ({
       }
       focusTrap.deactivate();
     };
-  }, [targetRef]);
+  }, [targetRef, enabled]);
 };

package/dist/esm/mentionsPlugin.js

@@ -103,6 +103,7 @@ var 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
   });

package/dist/esm/nodeviews/mentionNodeView.js

@@ -8,6 +8,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+// oxlint-disable-next-line import/no-duplicates
+
 import { UNKNOWN_USER_ID } from '@atlaskit/mention/constants';
 import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention/resource';
 import { isRestricted } from '@atlaskit/mention/types';

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

@@ -58,7 +58,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 = "17.0.0";
+var PACKAGE_VERSION = "17.1.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/esm/ui/PopperWrapper.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useRef, useLayoutEffect, useEffect, Suspense } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Popper as ReactPopper } from '@atlaskit/popper';
+import { Popper as ReactPopper } from '@atlaskit/popper/main';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
@@ -74,22 +74,27 @@ function useResizeAwarePopper(_ref2) {
  */
 export 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.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     targetRef = _React$useState2[0],
     setPopupRef = _React$useState2[1];
   useFocusTrap({
-    targetRef: targetRef
+    targetRef: targetRef,
+    enabled: !disableFocusTrap
   });
   return /*#__PURE__*/React.createElement(Suspense, null, /*#__PURE__*/React.createElement(Portal, {
     zIndex: layers.modal()
   }, /*#__PURE__*/React.createElement(ReactPopper, {
-    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",
+    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/esm/ui/ProfileCardComponent.js

@@ -143,7 +143,11 @@ export 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 = useState(undefined),
     _useState12 = _slicedToArray(_useState11, 2),
     provider = _useState12[0],
@@ -170,20 +174,28 @@ export function ProfileCardComponent(_ref5) {
   });
   if (!expVal('platform_editor_agent_mentions', 'isEnabled', false)) {
     return /*#__PURE__*/React.createElement(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(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: expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? text : undefined,
     onChatClick: onAgentMentionChatClick && fg('platform_editor_agent_mentions_drop_one_fixes') ? function (event, agentStudioId) {
       return (
@@ -196,17 +208,19 @@ export 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 = 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
@@ -248,18 +262,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 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/esm/ui/type-ahead/MentionItemWithProfileCard.js

@@ -0,0 +1,98 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { MentionItem } from '@atlaskit/mention/item';
+import { Box } from '@atlaskit/primitives/compiled';
+import { ProfileCardComponent } from '../ProfileCardComponent';
+import { isAgentMention } from './utils';
+
+// 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
+ */
+export function MentionItemWithProfileCard(_ref) {
+  var mention = _ref.mention,
+    selected = _ref.selected,
+    onSelection = _ref.onSelection,
+    height = _ref.height,
+    profilecardProvider = _ref.profilecardProvider;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    referenceElement = _useState2[0],
+    setReferenceElement = _useState2[1];
+  var showTimerRef = useRef();
+  var hideTimerRef = useRef();
+  var clearTimers = useCallback(function () {
+    clearTimeout(showTimerRef.current);
+    clearTimeout(hideTimerRef.current);
+  }, []);
+  useEffect(function () {
+    return clearTimers;
+  }, [clearTimers]);
+  var isAgent = isAgentMention(mention);
+  var handleMouseEnter = 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 = useCallback(function () {
+    clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(function () {
+      setReferenceElement(null);
+    }, HIDE_DELAY_MS);
+  }, []);
+  var cancelHide = useCallback(function () {
+    clearTimeout(hideTimerRef.current);
+  }, []);
+  var handleMouseLeave = useCallback(function () {
+    clearTimeout(showTimerRef.current);
+    scheduleHide();
+  }, [scheduleHide]);
+  var closeCard = useCallback(function () {
+    clearTimers();
+    setReferenceElement(null);
+  }, [clearTimers]);
+  var userType = isAgent ? 'APP' : undefined;
+  var activeMention = 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.createElement(Box, {
+    testId: "mention-item-with-profile-card",
+    onMouseOver: cancelHide,
+    onMouseOut: scheduleHide,
+    onMouseLeave: handleMouseLeave,
+    onBlur: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(MentionItem, {
+    mention: mention,
+    selected: selected,
+    onMouseEnter: handleMouseEnter,
+    onSelection: onSelection,
+    height: height
+  }), referenceElement && profilecardProvider && /*#__PURE__*/React.createElement(ProfileCardComponent, {
+    activeMention: activeMention,
+    profilecardProvider: profilecardProvider,
+    dom: referenceElement,
+    closeComponent: closeCard,
+    placement: "right",
+    disableFocusTrap: true,
+    hideActions: true
+  }));
+}