@atlaskit/editor-plugin-mentions 17.0.0 → 17.1.0

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

@@ -12,11 +12,11 @@ import uuid from 'uuid';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages, mentionMessages } from '@atlaskit/editor-common/messages';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { IconMention } from '@atlaskit/editor-common/quick-insert';
+import { IconMention } from '@atlaskit/editor-common/assets';
 import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 import { MentionNameStatus, isPromise } from '@atlaskit/mention/types';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertMention } from './editor-commands';
 import { mentionNodeSpec } from './nodeviews/mentionNodeSpec';
@@ -26,6 +26,7 @@ import { ACTIONS, createMentionPlugin } from './pm-plugins/main';
 import { InlineInvitePopupContainer } from './ui/InlineInvitePopupContainer';
 import { SecondaryToolbarComponent } from './ui/SecondaryToolbarComponent';
 import { createTypeAheadConfig } from './ui/type-ahead';
+import { getMentionQuickInsertComponents } from './ui/quick-insert/getMentionQuickInsertComponents';
 var processName = function processName(name, intl) {
   var unknownLabel = intl.formatMessage(mentionMessages.unknownLabel);
   if (name.status === MentionNameStatus.OK) {
@@ -102,9 +103,18 @@ 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
   });
+  var isRegisteredSlashCommandEnabled = 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(getMentionQuickInsertComponents({
+      api: api,
+      typeAhead: typeAhead
+    }));
+  }
   return {
     name: 'mention',
     nodes: function nodes() {
@@ -274,7 +284,7 @@ var mentionsPlugin = function mentionsPlugin(_ref3) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref9) {
+      quickInsert: isRegisteredSlashCommandEnabled ? undefined : function (_ref9) {
         var formatMessage = _ref9.formatMessage;
         return [{
           id: 'mention',

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

package/dist/esm/ui/AnchoredPopup.js

@@ -25,5 +25,10 @@ export 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/esm/ui/InlineInvitePopupContainer.js

@@ -95,7 +95,6 @@ export var InlineInvitePopupContainer = function InlineInvitePopupContainer(_ref
     }
     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,
@@ -113,7 +112,7 @@ export var InlineInvitePopupContainer = function InlineInvitePopupContainer(_ref
     }));
     pendingMentionRef.current = null;
     setAnchorElement(null);
-  }, [api, removePendingMention]);
+  }, [api]);
   var handleReady = useCallback(function (show) {
     if (!provider) {
       return;

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/quick-insert/MentionQuickInsertMenuItem.js

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconMention } from '@atlaskit/editor-common/assets';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { mentionPluginKey } from '../../pm-plugins/key';
+export var MentionQuickInsertMenuItem = function MentionQuickInsertMenuItem(_ref) {
+  var api = _ref.api,
+    typeAhead = _ref.typeAhead;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var onSelect = useCallback(function (_ref2) {
+    var _mentionPluginKey$get, _api$typeAhead;
+    var editorView = _ref2.editorView,
+      insert = _ref2.insert;
+    if (((_mentionPluginKey$get = 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: INPUT_METHOD.QUICK_INSERT
+    })(tr);
+    return tr;
+  }, [api, typeAhead]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(IconMention, null),
+    onSelect: onSelect,
+    shortcut: "@",
+    title: formatMessage(messages.mention)
+  });
+};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
+import { MEDIA_SECTION, MENTION_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
+import { MEDIA_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { MentionQuickInsertMenuItem } from './MentionQuickInsertMenuItem';
+export var getMentionQuickInsertComponents = function getMentionQuickInsertComponents(_ref) {
+  var api = _ref.api,
+    typeAhead = _ref.typeAhead;
+  return [{
+    key: MENTION_MENU_ITEM.key,
+    type: MENTION_MENU_ITEM.type,
+    parents: [{
+      key: MEDIA_SECTION.key,
+      type: MEDIA_SECTION.type,
+      rank: MEDIA_SECTION_RANK[MENTION_MENU_ITEM.key]
+    }],
+    match: createQuickInsertMatcher(function (_ref2) {
+      var formatMessage = _ref2.formatMessage;
+      return {
+        description: formatMessage(messages.mentionDescription),
+        keywords: ['team', 'user'],
+        shortcut: '@',
+        title: formatMessage(messages.mention)
+      };
+    }),
+    component: function component() {
+      return /*#__PURE__*/React.createElement(MentionQuickInsertMenuItem, {
+        api: api,
+        typeAhead: typeAhead
+      });
+    }
+  }];
+};

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
+  }));
+}