@atlaskit/editor-plugin-mentions 12.2.10 → 12.3.0

package/dist/esm/ui/ProfileCardComponent.js

@@ -5,24 +5,41 @@ import "./ProfileCardComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import Loadable from 'react-loadable';
 import { ProfileCardLazy } from '@atlaskit/profilecard/user';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { Popup } from './PopperWrapper';
+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;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
 var styles = {
   loadingStyles: "_2rko12b0 _16qs130s"
 };
-var LoadingWrapper = function LoadingWrapper(_ref) {
-  var children = _ref.children,
-    isLoading = _ref.isLoading;
+var LoadingWrapper = function LoadingWrapper(_ref2) {
+  var children = _ref2.children,
+    isLoading = _ref2.isLoading;
   return isLoading ? /*#__PURE__*/React.createElement("div", {
     className: ax([styles.loadingStyles])
   }, children) : children;
 };
-export var useProfileCardState = function useProfileCardState(_ref2) {
-  var id = _ref2.id,
-    provider = _ref2.provider;
+export var isAgentMentionType = function isAgentMentionType(userType) {
+  return userType === 'APP' || userType === 'AGENT';
+};
+export var useProfileCardState = function useProfileCardState(_ref3) {
+  var id = _ref3.id,
+    provider = _ref3.provider;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
@@ -51,7 +68,7 @@ export var useProfileCardState = function useProfileCardState(_ref2) {
   // From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
   useEffect(function () {
     var fetchData = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref4 = _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) {
@@ -98,7 +115,7 @@ export var useProfileCardState = function useProfileCardState(_ref2) {
         }, _callee, null, [[2, 4, 5, 6]]);
       }));
       return function fetchData() {
-        return _ref3.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }();
     fetchData();
@@ -112,12 +129,16 @@ export var useProfileCardState = function useProfileCardState(_ref2) {
     hasError: hasError
   };
 };
-export function ProfileCardComponent(_ref4) {
-  var _ref6;
-  var profilecardProvider = _ref4.profilecardProvider,
-    activeMention = _ref4.activeMention,
-    dom = _ref4.dom,
-    closeComponent = _ref4.closeComponent;
+
+/**
+ * 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;
   var _useState11 = useState(undefined),
     _useState12 = _slicedToArray(_useState11, 2),
     provider = _useState12[0],
@@ -127,10 +148,58 @@ export function ProfileCardComponent(_ref4) {
       setProvider(p);
     });
   }, [profilecardProvider]);
-  var _ref5 = (_ref6 = activeMention.attrs) !== null && _ref6 !== void 0 ? _ref6 : {},
-    id = _ref5.id,
-    text = _ref5.text,
-    accessLevel = _ref5.accessLevel;
+  var _ref6 = (_ref7 = activeMention.attrs) !== null && _ref7 !== void 0 ? _ref7 : {},
+    id = _ref6.id,
+    text = _ref6.text,
+    accessLevel = _ref6.accessLevel,
+    userType = _ref6.userType;
+  useEffect(function () {
+    return bind(window, {
+      type: 'keydown',
+      listener: function listener(e) {
+        if (e.key === 'Escape') {
+          closeComponent();
+        }
+      }
+    });
+  });
+  if (!expVal('platform_editor_agent_mentions', 'isEnabled', false)) {
+    return /*#__PURE__*/React.createElement(Popup, {
+      referenceElement: dom
+    }, /*#__PURE__*/React.createElement(UserProfileCardContent, {
+      accessLevel: accessLevel,
+      id: id,
+      provider: provider,
+      text: text
+    }));
+  }
+  var isAgentMention = isAgentMentionType(userType);
+  return /*#__PURE__*/React.createElement(Popup, {
+    referenceElement: dom
+  }, isAgentMention && provider && id ? /*#__PURE__*/React.createElement(AgentProfileCardContent, {
+    accountId: id,
+    provider: provider
+  }) : /*#__PURE__*/React.createElement(UserProfileCardContent, {
+    accessLevel: accessLevel,
+    id: id,
+    provider: provider,
+    text: text
+  }));
+}
+var AgentProfileCardContent = function AgentProfileCardContent(_ref8) {
+  var accountId = _ref8.accountId,
+    provider = _ref8.provider;
+  return /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
+    accountId: accountId,
+    cloudId: provider.cloudId,
+    resourceClient: provider.resourceClient
+  });
+};
+var UserProfileCardContent = function UserProfileCardContent(_ref9) {
+  var accessLevel = _ref9.accessLevel,
+    id = _ref9.id,
+    provider = _ref9.provider,
+    text = _ref9.text;
   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]);
@@ -144,19 +213,7 @@ export function ProfileCardComponent(_ref4) {
     teamCentralBaseUrl = _useProfileCardState.teamCentralBaseUrl,
     isLoading = _useProfileCardState.isLoading,
     hasError = _useProfileCardState.hasError;
-  useEffect(function () {
-    return bind(window, {
-      type: 'keydown',
-      listener: function listener(e) {
-        if (e.key === 'Escape') {
-          closeComponent();
-        }
-      }
-    });
-  });
-  return /*#__PURE__*/React.createElement(Popup, {
-    referenceElement: dom
-  }, /*#__PURE__*/React.createElement(LoadingWrapper, {
+  return /*#__PURE__*/React.createElement(LoadingWrapper, {
     isLoading: isLoading
   }, /*#__PURE__*/React.createElement(ProfileCardLazy, {
     avatarUrl: data === null || data === void 0 ? void 0 : data.avatarUrl,
@@ -181,5 +238,5 @@ export function ProfileCardComponent(_ref4) {
     isKudosEnabled: shouldShowGiveKudos,
     teamCentralBaseUrl: teamCentralBaseUrl,
     isRenderedInPortal: expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)
-  })));
-}
+  }));
+};

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

@@ -17,6 +17,7 @@ import { MENTION_ITEM_HEIGHT, MentionItem } from '@atlaskit/mention/item';
 import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { createSingleMentionFragment } from '../../editor-commands';
 import { mentionPlaceholderPluginKey, MENTION_PLACEHOLDER_ACTIONS } from '../../pm-plugins/mentionPlaceholder';
 import { getMentionPluginState } from '../../pm-plugins/utils';
@@ -24,9 +25,12 @@ 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';
-var isAgentType = function isAgentType(userType) {
+var isAgentUserType = function isAgentUserType(userType) {
   return userType === 'APP' || userType === 'AGENT';
 };
+var isAgentMention = function isAgentMention(mention) {
+  return isAgentUserType(mention.userType) || mention.appType === 'agent';
+};
 var createInviteItem = function createInviteItem(_ref) {
   var mentionProvider = _ref.mentionProvider,
     onInviteItemMount = _ref.onInviteItemMount,
@@ -316,7 +320,7 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
         title: intl.formatMessage(mentionMessages.typeAheadSectionPeople),
         filter: function filter(item) {
           var _item$mention;
-          return !isAgentType(((_item$mention = item.mention) === null || _item$mention === void 0 ? void 0 : _item$mention.userType) || '');
+          return !isAgentUserType(((_item$mention = item.mention) === null || _item$mention === void 0 ? void 0 : _item$mention.userType) || '');
         },
         limit: 6
       }, {
@@ -324,7 +328,7 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
         title: intl.formatMessage(mentionMessages.typeAheadSectionAgents),
         filter: function filter(item) {
           var _item$mention2;
-          return isAgentType(((_item$mention2 = item.mention) === null || _item$mention2 === void 0 ? void 0 : _item$mention2.userType) || '');
+          return isAgentUserType(((_item$mention2 = item.mention) === null || _item$mention2 === void 0 ? void 0 : _item$mention2.userType) || '');
         }
       }];
     },
@@ -352,6 +356,7 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
       var mentionContext = _objectSpread(_objectSpread({}, contextIdentifierProvider), {}, {
         sessionId: sessionId
       });
+      var shouldSuppressInviteForAgentMention = expVal('platform_editor_agent_mentions', 'isEnabled', false) && isAgentMention(item.mention);
       if (mentionProvider && !isInviteItem(item.mention)) {
         mentionProvider.recordMentionSelection(item.mention, mentionContext);
       }
@@ -403,21 +408,20 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
       // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
       var mentionLocalId = uuid();
       if (handleMentionsChanged) {
+        var mentionChange = _objectSpread({
+          id: id,
+          localId: mentionLocalId,
+          method: 'typed',
+          type: 'added'
+        }, shouldSuppressInviteForAgentMention ? {
+          shouldSuppressMentionNotification: true
+        } : {});
         if (taskItemId) {
-          handleMentionsChanged([{
-            type: 'added',
-            localId: mentionLocalId,
-            id: id,
-            taskLocalId: taskItemId,
-            method: 'typed'
-          }]);
+          handleMentionsChanged([_objectSpread(_objectSpread({}, mentionChange), {}, {
+            taskLocalId: taskItemId
+          })]);
         } else {
-          handleMentionsChanged([{
-            type: 'added',
-            localId: mentionLocalId,
-            id: id,
-            method: 'typed'
-          }]);
+          handleMentionsChanged([mentionChange]);
         }
       }
       fireEvent(buildTypeAheadInsertedPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, mode, item.mention, mentionLocalId, sourceListItem.map(function (x) {
@@ -429,14 +433,15 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
       if (mentionProvider && isTeamType(userType)) {
         return insert(buildNodesForTeamMention(schema, item.mention, mentionProvider, sanitizePrivateContent));
       }
-      if (isXProductUser && mentionProvider && mentionProvider.inviteXProductUser) {
+      if (!shouldSuppressInviteForAgentMention && isXProductUser && mentionProvider && mentionProvider.inviteXProductUser) {
         mentionProvider.inviteXProductUser(id, name);
       }
       return insert(createSingleMentionFragment({
         mentionProvider: mentionProvider,
         mentionInsertDisplayName: mentionInsertDisplayName,
         tr: state.tr,
-        sanitizePrivateContent: sanitizePrivateContent
+        sanitizePrivateContent: sanitizePrivateContent,
+        suppressInviteXProductUser: shouldSuppressInviteForAgentMention
       })({
         name: name,
         id: id,

package/dist/types/editor-commands/index.d.ts

@@ -25,8 +25,9 @@ type SingleMentionFragmentParams = {
     mentionInsertDisplayName: boolean | undefined;
     mentionProvider: MentionProvider | undefined;
     sanitizePrivateContent: boolean | undefined;
+    suppressInviteXProductUser?: boolean;
     tr: Transaction;
 };
-export declare const createSingleMentionFragment: ({ mentionInsertDisplayName, mentionProvider, tr, sanitizePrivateContent, }: SingleMentionFragmentParams) => ({ name, id, userType, nickname, localId, accessLevel, isXProductUser, }: InsertMentionParameters) => Fragment;
+export declare const createSingleMentionFragment: ({ mentionInsertDisplayName, mentionProvider, tr, sanitizePrivateContent, suppressInviteXProductUser, }: SingleMentionFragmentParams) => ({ name, id, userType, nickname, localId, accessLevel, isXProductUser, }: InsertMentionParameters) => Fragment;
 export declare const insertMention: ({ sanitizePrivateContent, api, mentionInsertDisplayName }: InternalParams) => ({ name, id, userType, localId, nickname, accessLevel, isXProductUser, }: InsertMentionParameters) => EditorCommand;
 export {};

package/dist/types/mentionsPluginType.d.ts

@@ -11,6 +11,7 @@ export type MentionActionOpenTypeAhead = (inputMethod: TypeAheadInputMethod) =>
 export type MentionActionAnnounceMentionsInsertion = (mentionIds: {
     id: string;
     localId: string;
+    shouldSuppressMentionNotification?: boolean;
     taskLocalId?: string;
     type: 'added' | 'deleted';
 }[]) => void;

package/dist/types/types/index.d.ts

@@ -17,12 +17,12 @@ export interface MentionPluginConfig {
 export type MentionsChangedHandler = (changes: {
     id: string;
     localId: string;
+    shouldSuppressMentionNotification?: boolean;
     taskLocalId?: string;
     type: 'added' | 'deleted';
 }[]) => void;
 export interface MentionsPluginOptions extends MentionPluginConfig {
     allowZeroWidthSpaceAfter?: boolean;
-    handleMentionsChanged?: MentionsChangedHandler;
     /**
      * User ID to highlight as a self-mention (typically the current user).
      *
@@ -31,6 +31,7 @@ export interface MentionsPluginOptions extends MentionPluginConfig {
      * Takes priority over `MentionProvider.shouldHighlightMention()` if both are present.
      */
     currentUserId?: string;
+    handleMentionsChanged?: MentionsChangedHandler;
     mentionProvider?: Providers['mentionProvider'];
     sanitizePrivateContent?: boolean;
 }

package/dist/types/ui/ProfileCardComponent.d.ts

@@ -5,6 +5,7 @@ interface ProfileCardStateProps {
     id: string | undefined;
     provider: ProfilecardProvider | undefined;
 }
+export declare const isAgentMentionType: (userType: unknown) => boolean;
 export declare const useProfileCardState: ({ id, provider, }: ProfileCardStateProps) => {
     data: ProfileCardClientData | undefined;
     hasError: boolean;
@@ -13,6 +14,9 @@ export declare const useProfileCardState: ({ id, provider, }: ProfileCardStatePr
     shouldShowGiveKudos: boolean;
     teamCentralBaseUrl: string | undefined;
 };
+/**
+ * Renders the profile card popup for an editor mention node.
+ */
 export declare function ProfileCardComponent({ profilecardProvider, activeMention, dom, closeComponent, }: {
     activeMention: PMNode;
     closeComponent: () => void;

package/dist/types/ui/type-ahead/index.d.ts

@@ -15,6 +15,7 @@ type Props = {
         id: string;
         localId: string;
         method?: 'pasted' | 'typed';
+        shouldSuppressMentionNotification?: boolean;
         taskLocalId?: string;
         type: 'added' | 'deleted';
     }[]) => void;

package/dist/types-ts4.5/editor-commands/index.d.ts

@@ -25,8 +25,9 @@ type SingleMentionFragmentParams = {
     mentionInsertDisplayName: boolean | undefined;
     mentionProvider: MentionProvider | undefined;
     sanitizePrivateContent: boolean | undefined;
+    suppressInviteXProductUser?: boolean;
     tr: Transaction;
 };
-export declare const createSingleMentionFragment: ({ mentionInsertDisplayName, mentionProvider, tr, sanitizePrivateContent, }: SingleMentionFragmentParams) => ({ name, id, userType, nickname, localId, accessLevel, isXProductUser, }: InsertMentionParameters) => Fragment;
+export declare const createSingleMentionFragment: ({ mentionInsertDisplayName, mentionProvider, tr, sanitizePrivateContent, suppressInviteXProductUser, }: SingleMentionFragmentParams) => ({ name, id, userType, nickname, localId, accessLevel, isXProductUser, }: InsertMentionParameters) => Fragment;
 export declare const insertMention: ({ sanitizePrivateContent, api, mentionInsertDisplayName }: InternalParams) => ({ name, id, userType, localId, nickname, accessLevel, isXProductUser, }: InsertMentionParameters) => EditorCommand;
 export {};

package/dist/types-ts4.5/mentionsPluginType.d.ts

@@ -11,6 +11,7 @@ export type MentionActionOpenTypeAhead = (inputMethod: TypeAheadInputMethod) =>
 export type MentionActionAnnounceMentionsInsertion = (mentionIds: {
     id: string;
     localId: string;
+    shouldSuppressMentionNotification?: boolean;
     taskLocalId?: string;
     type: 'added' | 'deleted';
 }[]) => void;

package/dist/types-ts4.5/types/index.d.ts

@@ -17,12 +17,12 @@ export interface MentionPluginConfig {
 export type MentionsChangedHandler = (changes: {
     id: string;
     localId: string;
+    shouldSuppressMentionNotification?: boolean;
     taskLocalId?: string;
     type: 'added' | 'deleted';
 }[]) => void;
 export interface MentionsPluginOptions extends MentionPluginConfig {
     allowZeroWidthSpaceAfter?: boolean;
-    handleMentionsChanged?: MentionsChangedHandler;
     /**
      * User ID to highlight as a self-mention (typically the current user).
      *
@@ -31,6 +31,7 @@ export interface MentionsPluginOptions extends MentionPluginConfig {
      * Takes priority over `MentionProvider.shouldHighlightMention()` if both are present.
      */
     currentUserId?: string;
+    handleMentionsChanged?: MentionsChangedHandler;
     mentionProvider?: Providers['mentionProvider'];
     sanitizePrivateContent?: boolean;
 }

package/dist/types-ts4.5/ui/ProfileCardComponent.d.ts

@@ -5,6 +5,7 @@ interface ProfileCardStateProps {
     id: string | undefined;
     provider: ProfilecardProvider | undefined;
 }
+export declare const isAgentMentionType: (userType: unknown) => boolean;
 export declare const useProfileCardState: ({ id, provider, }: ProfileCardStateProps) => {
     data: ProfileCardClientData | undefined;
     hasError: boolean;
@@ -13,6 +14,9 @@ export declare const useProfileCardState: ({ id, provider, }: ProfileCardStatePr
     shouldShowGiveKudos: boolean;
     teamCentralBaseUrl: string | undefined;
 };
+/**
+ * Renders the profile card popup for an editor mention node.
+ */
 export declare function ProfileCardComponent({ profilecardProvider, activeMention, dom, closeComponent, }: {
     activeMention: PMNode;
     closeComponent: () => void;

package/dist/types-ts4.5/ui/type-ahead/index.d.ts

@@ -15,6 +15,7 @@ type Props = {
         id: string;
         localId: string;
         method?: 'pasted' | 'typed';
+        shouldSuppressMentionNotification?: boolean;
         taskLocalId?: string;
         type: 'added' | 'deleted';
     }[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "12.2.10",
+	"version": "12.3.0",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -55,10 +55,11 @@
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
 		"focus-trap": "^2.4.5",
+		"react-loadable": "^5.1.0",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.50.0",
+		"@atlaskit/editor-common": "^114.54.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"