@atlaskit/editor-plugin-mentions 18.2.2 → 18.2.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-mentions
 
+## 18.2.4
+
+### Patch Changes
+
+- [`4cc06eff6f3d1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4cc06eff6f3d1) -
+  [ux] Behind platform_editor_mention_search_order, allow mention item subscription when sectioning
+  is enabled and keep loading rows non-interactive
+- Updated dependencies
+
+## 18.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.2.2
 
 ### Patch Changes

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

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

package/dist/cjs/ui/type-ahead/MentionItemWithProfileCard.compiled.css

@@ -0,0 +1,2 @@
+._80om73ad{cursor:default}
+._lcxvglyw{pointer-events:none}

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

@@ -1,3 +1,4 @@
+/* MentionItemWithProfileCard.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,9 +7,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MentionItemWithProfileCard = MentionItemWithProfileCard;
+require("./MentionItemWithProfileCard.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _item = require("@atlaskit/mention/item");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _ProfileCardComponent = require("../ProfileCardComponent");
@@ -19,6 +23,10 @@ var SHOW_DELAY_MS = 600;
 var HIDE_DELAY_MS = 200;
 // Gap between the typeahead row and the profile card
 var CARD_GAP_PX = 8;
+var styles = {
+  placeholderContainer: "_80om73ad",
+  placeholderContent: "_lcxvglyw"
+};
 function getScrollbarWidth(row) {
   var node = row;
   while (node) {
@@ -104,6 +112,20 @@ function MentionItemWithProfileCard(_ref) {
     }
     return [0, CARD_GAP_PX + getScrollbarWidth(referenceElement)];
   }, [referenceElement]);
+  if (mention.isPlaceholder && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_search_order')) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      testId: "mention-item-with-profile-card",
+      xcss: styles.placeholderContainer
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.placeholderContent
+    }, /*#__PURE__*/_react.default.createElement(_item.MentionItem, {
+      mention: mention,
+      selected: selected,
+      onMouseEnter: handleMouseEnter,
+      onSelection: onSelection,
+      height: height
+    })));
+  }
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     testId: "mention-item-with-profile-card",
     onMouseOver: cancelHide,

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

@@ -118,12 +118,33 @@ var makeMentionToTypeaheadItem = function makeMentionToTypeaheadItem(_ref4) {
     profilecardProvider = _ref4.profilecardProvider;
   return function (mention) {
     var itemHeight = useRefreshedItemHeight ? _item.MENTION_ITEM_HEIGHT_REFRESHED : _item.MENTION_ITEM_HEIGHT;
+    if (isLoadingPlaceholder(mention) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_search_order')) {
+      return {
+        title: mention.id,
+        isNonInteractive: true,
+        render: function render(_ref5) {
+          var isSelected = _ref5.isSelected,
+            onClick = _ref5.onClick;
+          return /*#__PURE__*/_react.default.createElement(_MentionItemWithProfileCard.MentionItemWithProfileCard, {
+            mention: mention,
+            selected: isSelected,
+            onSelection: onClick,
+            height: itemHeight,
+            profilecardProvider: profilecardProvider
+          });
+        },
+        getCustomComponentHeight: function getCustomComponentHeight() {
+          return itemHeight;
+        },
+        mention: mention
+      };
+    }
     return {
       title: mention.id,
-      render: function render(_ref5) {
-        var isSelected = _ref5.isSelected,
-          onClick = _ref5.onClick,
-          onHover = _ref5.onHover;
+      render: function render(_ref6) {
+        var isSelected = _ref6.isSelected,
+          onClick = _ref6.onClick,
+          onHover = _ref6.onHover;
         return (0, _expVal.expVal)('platform_editor_agent_mentions', 'isEnabled', false) && (0, _fg.fg)('platform_editor_mention_typeahead_profilecard') ? /*#__PURE__*/_react.default.createElement(_MentionItemWithProfileCard.MentionItemWithProfileCard, {
           mention: mention,
           selected: isSelected,
@@ -177,12 +198,12 @@ function memoize(fn
   };
 }
 var buildAndSendElementsTypeAheadAnalytics = function buildAndSendElementsTypeAheadAnalytics(fireEvent) {
-  return function (_ref6) {
-    var query = _ref6.query,
-      mentions = _ref6.mentions,
-      stats = _ref6.stats,
-      mentionTypeaheadSessionId = _ref6.mentionTypeaheadSessionId,
-      agentAnalytics = _ref6.agentAnalytics;
+  return function (_ref7) {
+    var query = _ref7.query,
+      mentions = _ref7.mentions,
+      stats = _ref7.stats,
+      mentionTypeaheadSessionId = _ref7.mentionTypeaheadSessionId,
+      agentAnalytics = _ref7.agentAnalytics;
     var duration = 0;
     var userOrTeamIds = null;
     var teams = null;
@@ -284,19 +305,19 @@ var buildNodesForTeamMention = function buildNodesForTeamMention(schema, selecte
  * `createTypeAheadConfig` and intentionally mutated here as a
  * side-effect — preserves the existing single-shot semantics.
  */
-var makeTransformMentionsToTypeAheadItems = function makeTransformMentionsToTypeAheadItems(_ref7) {
-  var fireEvent = _ref7.fireEvent,
-    getFirstQueryWithoutResults = _ref7.getFirstQueryWithoutResults,
-    setFirstQueryWithoutResults = _ref7.setFirstQueryWithoutResults,
-    toItem = _ref7.toItem,
-    enableAgentSectioning = _ref7.enableAgentSectioning;
-  return function (_ref8) {
-    var mentions = _ref8.mentions,
-      query = _ref8.query,
-      stats = _ref8.stats,
-      mentionProvider = _ref8.mentionProvider,
-      contextIdentifierProvider = _ref8.contextIdentifierProvider,
-      sessionId = _ref8.sessionId;
+var makeTransformMentionsToTypeAheadItems = function makeTransformMentionsToTypeAheadItems(_ref8) {
+  var fireEvent = _ref8.fireEvent,
+    getFirstQueryWithoutResults = _ref8.getFirstQueryWithoutResults,
+    setFirstQueryWithoutResults = _ref8.setFirstQueryWithoutResults,
+    toItem = _ref8.toItem,
+    enableAgentSectioning = _ref8.enableAgentSectioning;
+  return function (_ref9) {
+    var mentions = _ref9.mentions,
+      query = _ref9.query,
+      stats = _ref9.stats,
+      mentionProvider = _ref9.mentionProvider,
+      contextIdentifierProvider = _ref9.contextIdentifierProvider,
+      sessionId = _ref9.sessionId;
     var displayMentions = shouldApplyMentionSearchOrder(query) ? (0, _utils3.orderMentionsForDisplay)(mentions) : mentions;
     var mentionItems = displayMentions.map(function (mention) {
       return toItem(mention);
@@ -344,18 +365,18 @@ var makeTransformMentionsToTypeAheadItems = function makeTransformMentionsToType
     })(mentionItems);
   };
 };
-var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
-  var sanitizePrivateContent = _ref9.sanitizePrivateContent,
-    mentionInsertDisplayName = _ref9.mentionInsertDisplayName,
-    fireEvent = _ref9.fireEvent,
-    HighlightComponent = _ref9.HighlightComponent,
-    api = _ref9.api,
-    handleMentionsChanged = _ref9.handleMentionsChanged,
-    _ref9$enableAgentSect = _ref9.enableAgentSectioning,
-    enableAgentSectioning = _ref9$enableAgentSect === void 0 ? false : _ref9$enableAgentSect,
-    _ref9$showAgentMentio = _ref9.showAgentMentionsLabsLozenge,
-    showAgentMentionsLabsLozenge = _ref9$showAgentMentio === void 0 ? false : _ref9$showAgentMentio,
-    profilecardProvider = _ref9.profilecardProvider;
+var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeAheadConfig(_ref0) {
+  var sanitizePrivateContent = _ref0.sanitizePrivateContent,
+    mentionInsertDisplayName = _ref0.mentionInsertDisplayName,
+    fireEvent = _ref0.fireEvent,
+    HighlightComponent = _ref0.HighlightComponent,
+    api = _ref0.api,
+    handleMentionsChanged = _ref0.handleMentionsChanged,
+    _ref0$enableAgentSect = _ref0.enableAgentSectioning,
+    enableAgentSectioning = _ref0$enableAgentSect === void 0 ? false : _ref0$enableAgentSect,
+    _ref0$showAgentMentio = _ref0.showAgentMentionsLabsLozenge,
+    showAgentMentionsLabsLozenge = _ref0$showAgentMentio === void 0 ? false : _ref0$showAgentMentio,
+    profilecardProvider = _ref0.profilecardProvider;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var sessionId = (0, _uuid.default)();
   var firstQueryWithoutResults = null;
@@ -388,18 +409,18 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
       }
       return null;
     },
-    getItems: function getItems(_ref0) {
+    getItems: function getItems(_ref1) {
       var _api$contextIdentifie, _api$contextIdentifie2;
-      var query = _ref0.query,
-        editorState = _ref0.editorState;
+      var query = _ref1.query,
+        editorState = _ref1.editorState;
       lastTypeAheadQuery = query || '';
       var pluginState = (0, _utils2.getMentionPluginState)(editorState);
       if (!(pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider)) {
         return Promise.resolve([]);
       }
       var mentionProvider = pluginState.mentionProvider;
-      var _ref1 = (_api$contextIdentifie = api === null || api === void 0 || (_api$contextIdentifie2 = api.contextIdentifier) === null || _api$contextIdentifie2 === void 0 ? void 0 : _api$contextIdentifie2.sharedState.currentState()) !== null && _api$contextIdentifie !== void 0 ? _api$contextIdentifie : {},
-        contextIdentifierProvider = _ref1.contextIdentifierProvider;
+      var _ref10 = (_api$contextIdentifie = api === null || api === void 0 || (_api$contextIdentifie2 = api.contextIdentifier) === null || _api$contextIdentifie2 === void 0 ? void 0 : _api$contextIdentifie2.sharedState.currentState()) !== null && _api$contextIdentifie !== void 0 ? _api$contextIdentifie : {},
+        contextIdentifierProvider = _ref10.contextIdentifierProvider;
       return new Promise(function (resolve, reject) {
         // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
         var key = "loadingMentionsForTypeAhead_".concat((0, _uuid.default)());
@@ -434,8 +455,8 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
         }));
       });
     },
-    getSections: function getSections(_ref10) {
-      var intl = _ref10.intl;
+    getSections: function getSections(_ref11) {
+      var intl = _ref11.intl;
       if (!enableAgentSectioning) {
         return [];
       }
@@ -479,12 +500,12 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
       firstQueryWithoutResults = null;
       lastTypeAheadQuery = '';
     },
-    selectItem: function selectItem(state, item, insert, _ref11) {
+    selectItem: function selectItem(state, item, insert, _ref12) {
       var _api$contextIdentifie3, _api$contextIdentifie4;
-      var mode = _ref11.mode,
-        stats = _ref11.stats,
-        query = _ref11.query,
-        sourceListItem = _ref11.sourceListItem;
+      var mode = _ref12.mode,
+        stats = _ref12.stats,
+        query = _ref12.query,
+        sourceListItem = _ref12.sourceListItem;
       var schema = state.schema;
 
       // Placeholder isn't selectable. Return `false` (not a transaction) so
@@ -501,8 +522,8 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
         accessLevel = _item$mention.accessLevel,
         userType = _item$mention.userType,
         isXProductUser = _item$mention.isXProductUser;
-      var _ref12 = (_api$contextIdentifie3 = api === null || api === void 0 || (_api$contextIdentifie4 = api.contextIdentifier) === null || _api$contextIdentifie4 === void 0 ? void 0 : _api$contextIdentifie4.sharedState.currentState()) !== null && _api$contextIdentifie3 !== void 0 ? _api$contextIdentifie3 : {},
-        contextIdentifierProvider = _ref12.contextIdentifierProvider;
+      var _ref13 = (_api$contextIdentifie3 = api === null || api === void 0 || (_api$contextIdentifie4 = api.contextIdentifier) === null || _api$contextIdentifie4 === void 0 ? void 0 : _api$contextIdentifie4.sharedState.currentState()) !== null && _api$contextIdentifie3 !== void 0 ? _api$contextIdentifie3 : {},
+        contextIdentifierProvider = _ref13.contextIdentifierProvider;
       var mentionContext = _objectSpread(_objectSpread({}, contextIdentifierProvider), {}, {
         sessionId: sessionId
       });
@@ -629,11 +650,11 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
       }
       return tr;
     },
-    dismiss: function dismiss(_ref13) {
-      var editorState = _ref13.editorState,
-        query = _ref13.query,
-        stats = _ref13.stats,
-        wasItemInserted = _ref13.wasItemInserted;
+    dismiss: function dismiss(_ref14) {
+      var editorState = _ref14.editorState,
+        query = _ref14.query,
+        stats = _ref14.stats,
+        wasItemInserted = _ref14.wasItemInserted;
       firstQueryWithoutResults = null;
       var pickerElapsedTime = stats.startedAt ? performance.now() - stats.startedAt : 0;
       if (!wasItemInserted) {
@@ -677,10 +698,10 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
    * so we only attach it when the gate is on — otherwise the proven
    * single-shot `getItems` path continues to drive every consumer.
    */
-  var subscribeToItemsUpdates = function subscribeToItemsUpdates(_ref14) {
+  var subscribeToItemsUpdates = function subscribeToItemsUpdates(_ref15) {
     var _api$contextIdentifie5, _api$contextIdentifie6;
-    var query = _ref14.query,
-      editorState = _ref14.editorState;
+    var query = _ref15.query,
+      editorState = _ref15.editorState;
     lastTypeAheadQuery = query || '';
     var pluginState = (0, _utils2.getMentionPluginState)(editorState);
     if (!(pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider)) {
@@ -692,8 +713,8 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
       };
     }
     var mentionProvider = pluginState.mentionProvider;
-    var _ref15 = (_api$contextIdentifie5 = api === null || api === void 0 || (_api$contextIdentifie6 = api.contextIdentifier) === null || _api$contextIdentifie6 === void 0 ? void 0 : _api$contextIdentifie6.sharedState.currentState()) !== null && _api$contextIdentifie5 !== void 0 ? _api$contextIdentifie5 : {},
-      contextIdentifierProvider = _ref15.contextIdentifierProvider;
+    var _ref16 = (_api$contextIdentifie5 = api === null || api === void 0 || (_api$contextIdentifie6 = api.contextIdentifier) === null || _api$contextIdentifie6 === void 0 ? void 0 : _api$contextIdentifie6.sharedState.currentState()) !== null && _api$contextIdentifie5 !== void 0 ? _api$contextIdentifie5 : {},
+      contextIdentifierProvider = _ref16.contextIdentifierProvider;
 
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     var key = "loadingMentionsForTypeAhead_".concat((0, _uuid.default)());
@@ -701,6 +722,7 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
     var initialReject = null;
     var initialResolved = false;
     var updateCallback = null;
+    var pendingUpdate = null;
     var unsubscribed = false;
     var initial = new Promise(function (resolve, reject) {
       initialResolve = resolve;
@@ -729,6 +751,9 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
         var _initialResolve;
         initialResolved = true;
         (_initialResolve = initialResolve) === null || _initialResolve === void 0 || _initialResolve(items);
+      } else if (enableAgentSectioning && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_search_order') && !updateCallback) {
+        // Agent Studio can resolve before the typeahead installs its update subscriber.
+        pendingUpdate = items;
       } else {
         var _updateCallback;
         (_updateCallback = updateCallback) === null || _updateCallback === void 0 || _updateCallback(items);
@@ -756,9 +781,14 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
           throw new Error('TypeAhead mention updates support only one subscriber');
         }
         updateCallback = update;
+        if (enableAgentSectioning && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_search_order') && pendingUpdate) {
+          updateCallback(pendingUpdate);
+          pendingUpdate = null;
+        }
         return function () {
           unsubscribed = true;
           updateCallback = null;
+          pendingUpdate = null;
           mentionProvider.unsubscribe(key);
           subscriptionKeys.delete(key);
           // If cleanup runs before the first emission, settle the initial
@@ -773,6 +803,9 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
       }
     };
   };
+  if (enableAgentSectioning && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_search_order')) {
+    typeAhead.subscribeToItemsUpdates = subscribeToItemsUpdates;
+  }
 
   // Presence of `subscribeToItemsUpdates` is how the type-ahead hook
   // opts a handler into the multi-emit path, so only expose it when the

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

@@ -58,7 +58,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 = "18.2.1";
+const PACKAGE_VERSION = "18.2.3";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/ui/type-ahead/MentionItemWithProfileCard.compiled.css

@@ -0,0 +1,2 @@
+._80om73ad{cursor:default}
+._lcxvglyw{pointer-events:none}

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

@@ -1,5 +1,9 @@
+/* MentionItemWithProfileCard.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./MentionItemWithProfileCard.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { MentionItem } from '@atlaskit/mention/item';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled';
 import { ProfileCardComponent } from '../ProfileCardComponent';
@@ -10,6 +14,10 @@ const SHOW_DELAY_MS = 600;
 const HIDE_DELAY_MS = 200;
 // Gap between the typeahead row and the profile card
 const CARD_GAP_PX = 8;
+const styles = {
+  placeholderContainer: "_80om73ad",
+  placeholderContent: "_lcxvglyw"
+};
 function getScrollbarWidth(row) {
   let node = row;
   while (node) {
@@ -89,6 +97,20 @@ export function MentionItemWithProfileCard({
     }
     return [0, CARD_GAP_PX + getScrollbarWidth(referenceElement)];
   }, [referenceElement]);
+  if (mention.isPlaceholder && isExperimentEnabled('platform_editor_mention_search_order')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      testId: "mention-item-with-profile-card",
+      xcss: styles.placeholderContainer
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.placeholderContent
+    }, /*#__PURE__*/React.createElement(MentionItem, {
+      mention: mention,
+      selected: selected,
+      onMouseEnter: handleMouseEnter,
+      onSelection: onSelection,
+      height: height
+    })));
+  }
   return /*#__PURE__*/React.createElement(Box, {
     testId: "mention-item-with-profile-card",
     onMouseOver: cancelHide,

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

@@ -91,6 +91,26 @@ const makeMentionToTypeaheadItem = ({
   profilecardProvider
 }) => mention => {
   const itemHeight = useRefreshedItemHeight ? MENTION_ITEM_HEIGHT_REFRESHED : MENTION_ITEM_HEIGHT;
+  if (isLoadingPlaceholder(mention) && isExperimentEnabled('platform_editor_mention_search_order')) {
+    return {
+      title: mention.id,
+      isNonInteractive: true,
+      render: ({
+        isSelected,
+        onClick
+      }) => /*#__PURE__*/React.createElement(MentionItemWithProfileCard, {
+        mention: mention,
+        selected: isSelected,
+        onSelection: onClick,
+        height: itemHeight,
+        profilecardProvider: profilecardProvider
+      }),
+      getCustomComponentHeight: () => {
+        return itemHeight;
+      },
+      mention
+    };
+  }
   return {
     title: mention.id,
     render: ({
@@ -668,6 +688,7 @@ export const createTypeAheadConfig = ({
     let initialReject = null;
     let initialResolved = false;
     let updateCallback = null;
+    let pendingUpdate = null;
     let unsubscribed = false;
     const initial = new Promise((resolve, reject) => {
       initialResolve = resolve;
@@ -694,6 +715,9 @@ export const createTypeAheadConfig = ({
         var _initialResolve;
         initialResolved = true;
         (_initialResolve = initialResolve) === null || _initialResolve === void 0 ? void 0 : _initialResolve(items);
+      } else if (enableAgentSectioning && isExperimentEnabled('platform_editor_mention_search_order') && !updateCallback) {
+        // Agent Studio can resolve before the typeahead installs its update subscriber.
+        pendingUpdate = items;
       } else {
         var _updateCallback;
         (_updateCallback = updateCallback) === null || _updateCallback === void 0 ? void 0 : _updateCallback(items);
@@ -722,9 +746,14 @@ export const createTypeAheadConfig = ({
           throw new Error('TypeAhead mention updates support only one subscriber');
         }
         updateCallback = update;
+        if (enableAgentSectioning && isExperimentEnabled('platform_editor_mention_search_order') && pendingUpdate) {
+          updateCallback(pendingUpdate);
+          pendingUpdate = null;
+        }
         return () => {
           unsubscribed = true;
           updateCallback = null;
+          pendingUpdate = null;
           mentionProvider.unsubscribe(key);
           subscriptionKeys.delete(key);
           // If cleanup runs before the first emission, settle the initial
@@ -739,6 +768,9 @@ export const createTypeAheadConfig = ({
       }
     };
   };
+  if (enableAgentSectioning && isExperimentEnabled('platform_editor_mention_search_order')) {
+    typeAhead.subscribeToItemsUpdates = subscribeToItemsUpdates;
+  }
 
   // Presence of `subscribeToItemsUpdates` is how the type-ahead hook
   // opts a handler into the multi-emit path, so only expose it when the

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

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

package/dist/esm/ui/type-ahead/MentionItemWithProfileCard.compiled.css

@@ -0,0 +1,2 @@
+._80om73ad{cursor:default}
+._lcxvglyw{pointer-events:none}

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

@@ -1,6 +1,10 @@
+/* MentionItemWithProfileCard.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./MentionItemWithProfileCard.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { MentionItem } from '@atlaskit/mention/item';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box } from '@atlaskit/primitives/compiled';
 import { ProfileCardComponent } from '../ProfileCardComponent';
@@ -11,6 +15,10 @@ var SHOW_DELAY_MS = 600;
 var HIDE_DELAY_MS = 200;
 // Gap between the typeahead row and the profile card
 var CARD_GAP_PX = 8;
+var styles = {
+  placeholderContainer: "_80om73ad",
+  placeholderContent: "_lcxvglyw"
+};
 function getScrollbarWidth(row) {
   var node = row;
   while (node) {
@@ -96,6 +104,20 @@ export function MentionItemWithProfileCard(_ref) {
     }
     return [0, CARD_GAP_PX + getScrollbarWidth(referenceElement)];
   }, [referenceElement]);
+  if (mention.isPlaceholder && isExperimentEnabled('platform_editor_mention_search_order')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      testId: "mention-item-with-profile-card",
+      xcss: styles.placeholderContainer
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.placeholderContent
+    }, /*#__PURE__*/React.createElement(MentionItem, {
+      mention: mention,
+      selected: selected,
+      onMouseEnter: handleMouseEnter,
+      onSelection: onSelection,
+      height: height
+    })));
+  }
   return /*#__PURE__*/React.createElement(Box, {
     testId: "mention-item-with-profile-card",
     onMouseOver: cancelHide,

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

@@ -109,12 +109,33 @@ var makeMentionToTypeaheadItem = function makeMentionToTypeaheadItem(_ref4) {
     profilecardProvider = _ref4.profilecardProvider;
   return function (mention) {
     var itemHeight = useRefreshedItemHeight ? MENTION_ITEM_HEIGHT_REFRESHED : MENTION_ITEM_HEIGHT;
+    if (isLoadingPlaceholder(mention) && isExperimentEnabled('platform_editor_mention_search_order')) {
+      return {
+        title: mention.id,
+        isNonInteractive: true,
+        render: function render(_ref5) {
+          var isSelected = _ref5.isSelected,
+            onClick = _ref5.onClick;
+          return /*#__PURE__*/React.createElement(MentionItemWithProfileCard, {
+            mention: mention,
+            selected: isSelected,
+            onSelection: onClick,
+            height: itemHeight,
+            profilecardProvider: profilecardProvider
+          });
+        },
+        getCustomComponentHeight: function getCustomComponentHeight() {
+          return itemHeight;
+        },
+        mention: mention
+      };
+    }
     return {
       title: mention.id,
-      render: function render(_ref5) {
-        var isSelected = _ref5.isSelected,
-          onClick = _ref5.onClick,
-          onHover = _ref5.onHover;
+      render: function render(_ref6) {
+        var isSelected = _ref6.isSelected,
+          onClick = _ref6.onClick,
+          onHover = _ref6.onHover;
         return expVal('platform_editor_agent_mentions', 'isEnabled', false) && fg('platform_editor_mention_typeahead_profilecard') ? /*#__PURE__*/React.createElement(MentionItemWithProfileCard, {
           mention: mention,
           selected: isSelected,
@@ -168,12 +189,12 @@ export function memoize(fn
   };
 }
 var buildAndSendElementsTypeAheadAnalytics = function buildAndSendElementsTypeAheadAnalytics(fireEvent) {
-  return function (_ref6) {
-    var query = _ref6.query,
-      mentions = _ref6.mentions,
-      stats = _ref6.stats,
-      mentionTypeaheadSessionId = _ref6.mentionTypeaheadSessionId,
-      agentAnalytics = _ref6.agentAnalytics;
+  return function (_ref7) {
+    var query = _ref7.query,
+      mentions = _ref7.mentions,
+      stats = _ref7.stats,
+      mentionTypeaheadSessionId = _ref7.mentionTypeaheadSessionId,
+      agentAnalytics = _ref7.agentAnalytics;
     var duration = 0;
     var userOrTeamIds = null;
     var teams = null;
@@ -275,19 +296,19 @@ var buildNodesForTeamMention = function buildNodesForTeamMention(schema, selecte
  * `createTypeAheadConfig` and intentionally mutated here as a
  * side-effect — preserves the existing single-shot semantics.
  */
-var makeTransformMentionsToTypeAheadItems = function makeTransformMentionsToTypeAheadItems(_ref7) {
-  var fireEvent = _ref7.fireEvent,
-    getFirstQueryWithoutResults = _ref7.getFirstQueryWithoutResults,
-    setFirstQueryWithoutResults = _ref7.setFirstQueryWithoutResults,
-    toItem = _ref7.toItem,
-    enableAgentSectioning = _ref7.enableAgentSectioning;
-  return function (_ref8) {
-    var mentions = _ref8.mentions,
-      query = _ref8.query,
-      stats = _ref8.stats,
-      mentionProvider = _ref8.mentionProvider,
-      contextIdentifierProvider = _ref8.contextIdentifierProvider,
-      sessionId = _ref8.sessionId;
+var makeTransformMentionsToTypeAheadItems = function makeTransformMentionsToTypeAheadItems(_ref8) {
+  var fireEvent = _ref8.fireEvent,
+    getFirstQueryWithoutResults = _ref8.getFirstQueryWithoutResults,
+    setFirstQueryWithoutResults = _ref8.setFirstQueryWithoutResults,
+    toItem = _ref8.toItem,
+    enableAgentSectioning = _ref8.enableAgentSectioning;
+  return function (_ref9) {
+    var mentions = _ref9.mentions,
+      query = _ref9.query,
+      stats = _ref9.stats,
+      mentionProvider = _ref9.mentionProvider,
+      contextIdentifierProvider = _ref9.contextIdentifierProvider,
+      sessionId = _ref9.sessionId;
     var displayMentions = shouldApplyMentionSearchOrder(query) ? orderMentionsForDisplay(mentions) : mentions;
     var mentionItems = displayMentions.map(function (mention) {
       return toItem(mention);
@@ -335,18 +356,18 @@ var makeTransformMentionsToTypeAheadItems = function makeTransformMentionsToType
     })(mentionItems);
   };
 };
-export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
-  var sanitizePrivateContent = _ref9.sanitizePrivateContent,
-    mentionInsertDisplayName = _ref9.mentionInsertDisplayName,
-    fireEvent = _ref9.fireEvent,
-    HighlightComponent = _ref9.HighlightComponent,
-    api = _ref9.api,
-    handleMentionsChanged = _ref9.handleMentionsChanged,
-    _ref9$enableAgentSect = _ref9.enableAgentSectioning,
-    enableAgentSectioning = _ref9$enableAgentSect === void 0 ? false : _ref9$enableAgentSect,
-    _ref9$showAgentMentio = _ref9.showAgentMentionsLabsLozenge,
-    showAgentMentionsLabsLozenge = _ref9$showAgentMentio === void 0 ? false : _ref9$showAgentMentio,
-    profilecardProvider = _ref9.profilecardProvider;
+export var createTypeAheadConfig = function createTypeAheadConfig(_ref0) {
+  var sanitizePrivateContent = _ref0.sanitizePrivateContent,
+    mentionInsertDisplayName = _ref0.mentionInsertDisplayName,
+    fireEvent = _ref0.fireEvent,
+    HighlightComponent = _ref0.HighlightComponent,
+    api = _ref0.api,
+    handleMentionsChanged = _ref0.handleMentionsChanged,
+    _ref0$enableAgentSect = _ref0.enableAgentSectioning,
+    enableAgentSectioning = _ref0$enableAgentSect === void 0 ? false : _ref0$enableAgentSect,
+    _ref0$showAgentMentio = _ref0.showAgentMentionsLabsLozenge,
+    showAgentMentionsLabsLozenge = _ref0$showAgentMentio === void 0 ? false : _ref0$showAgentMentio,
+    profilecardProvider = _ref0.profilecardProvider;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var sessionId = uuid();
   var firstQueryWithoutResults = null;
@@ -379,18 +400,18 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
       }
       return null;
     },
-    getItems: function getItems(_ref0) {
+    getItems: function getItems(_ref1) {
       var _api$contextIdentifie, _api$contextIdentifie2;
-      var query = _ref0.query,
-        editorState = _ref0.editorState;
+      var query = _ref1.query,
+        editorState = _ref1.editorState;
       lastTypeAheadQuery = query || '';
       var pluginState = getMentionPluginState(editorState);
       if (!(pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider)) {
         return Promise.resolve([]);
       }
       var mentionProvider = pluginState.mentionProvider;
-      var _ref1 = (_api$contextIdentifie = api === null || api === void 0 || (_api$contextIdentifie2 = api.contextIdentifier) === null || _api$contextIdentifie2 === void 0 ? void 0 : _api$contextIdentifie2.sharedState.currentState()) !== null && _api$contextIdentifie !== void 0 ? _api$contextIdentifie : {},
-        contextIdentifierProvider = _ref1.contextIdentifierProvider;
+      var _ref10 = (_api$contextIdentifie = api === null || api === void 0 || (_api$contextIdentifie2 = api.contextIdentifier) === null || _api$contextIdentifie2 === void 0 ? void 0 : _api$contextIdentifie2.sharedState.currentState()) !== null && _api$contextIdentifie !== void 0 ? _api$contextIdentifie : {},
+        contextIdentifierProvider = _ref10.contextIdentifierProvider;
       return new Promise(function (resolve, reject) {
         // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
         var key = "loadingMentionsForTypeAhead_".concat(uuid());
@@ -425,8 +446,8 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
         }));
       });
     },
-    getSections: function getSections(_ref10) {
-      var intl = _ref10.intl;
+    getSections: function getSections(_ref11) {
+      var intl = _ref11.intl;
       if (!enableAgentSectioning) {
         return [];
       }
@@ -470,12 +491,12 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
       firstQueryWithoutResults = null;
       lastTypeAheadQuery = '';
     },
-    selectItem: function selectItem(state, item, insert, _ref11) {
+    selectItem: function selectItem(state, item, insert, _ref12) {
       var _api$contextIdentifie3, _api$contextIdentifie4;
-      var mode = _ref11.mode,
-        stats = _ref11.stats,
-        query = _ref11.query,
-        sourceListItem = _ref11.sourceListItem;
+      var mode = _ref12.mode,
+        stats = _ref12.stats,
+        query = _ref12.query,
+        sourceListItem = _ref12.sourceListItem;
       var schema = state.schema;
 
       // Placeholder isn't selectable. Return `false` (not a transaction) so
@@ -492,8 +513,8 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
         accessLevel = _item$mention.accessLevel,
         userType = _item$mention.userType,
         isXProductUser = _item$mention.isXProductUser;
-      var _ref12 = (_api$contextIdentifie3 = api === null || api === void 0 || (_api$contextIdentifie4 = api.contextIdentifier) === null || _api$contextIdentifie4 === void 0 ? void 0 : _api$contextIdentifie4.sharedState.currentState()) !== null && _api$contextIdentifie3 !== void 0 ? _api$contextIdentifie3 : {},
-        contextIdentifierProvider = _ref12.contextIdentifierProvider;
+      var _ref13 = (_api$contextIdentifie3 = api === null || api === void 0 || (_api$contextIdentifie4 = api.contextIdentifier) === null || _api$contextIdentifie4 === void 0 ? void 0 : _api$contextIdentifie4.sharedState.currentState()) !== null && _api$contextIdentifie3 !== void 0 ? _api$contextIdentifie3 : {},
+        contextIdentifierProvider = _ref13.contextIdentifierProvider;
       var mentionContext = _objectSpread(_objectSpread({}, contextIdentifierProvider), {}, {
         sessionId: sessionId
       });
@@ -620,11 +641,11 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
       }
       return tr;
     },
-    dismiss: function dismiss(_ref13) {
-      var editorState = _ref13.editorState,
-        query = _ref13.query,
-        stats = _ref13.stats,
-        wasItemInserted = _ref13.wasItemInserted;
+    dismiss: function dismiss(_ref14) {
+      var editorState = _ref14.editorState,
+        query = _ref14.query,
+        stats = _ref14.stats,
+        wasItemInserted = _ref14.wasItemInserted;
       firstQueryWithoutResults = null;
       var pickerElapsedTime = stats.startedAt ? performance.now() - stats.startedAt : 0;
       if (!wasItemInserted) {
@@ -668,10 +689,10 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
    * so we only attach it when the gate is on — otherwise the proven
    * single-shot `getItems` path continues to drive every consumer.
    */
-  var subscribeToItemsUpdates = function subscribeToItemsUpdates(_ref14) {
+  var subscribeToItemsUpdates = function subscribeToItemsUpdates(_ref15) {
     var _api$contextIdentifie5, _api$contextIdentifie6;
-    var query = _ref14.query,
-      editorState = _ref14.editorState;
+    var query = _ref15.query,
+      editorState = _ref15.editorState;
     lastTypeAheadQuery = query || '';
     var pluginState = getMentionPluginState(editorState);
     if (!(pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider)) {
@@ -683,8 +704,8 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
       };
     }
     var mentionProvider = pluginState.mentionProvider;
-    var _ref15 = (_api$contextIdentifie5 = api === null || api === void 0 || (_api$contextIdentifie6 = api.contextIdentifier) === null || _api$contextIdentifie6 === void 0 ? void 0 : _api$contextIdentifie6.sharedState.currentState()) !== null && _api$contextIdentifie5 !== void 0 ? _api$contextIdentifie5 : {},
-      contextIdentifierProvider = _ref15.contextIdentifierProvider;
+    var _ref16 = (_api$contextIdentifie5 = api === null || api === void 0 || (_api$contextIdentifie6 = api.contextIdentifier) === null || _api$contextIdentifie6 === void 0 ? void 0 : _api$contextIdentifie6.sharedState.currentState()) !== null && _api$contextIdentifie5 !== void 0 ? _api$contextIdentifie5 : {},
+      contextIdentifierProvider = _ref16.contextIdentifierProvider;
 
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     var key = "loadingMentionsForTypeAhead_".concat(uuid());
@@ -692,6 +713,7 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
     var initialReject = null;
     var initialResolved = false;
     var updateCallback = null;
+    var pendingUpdate = null;
     var unsubscribed = false;
     var initial = new Promise(function (resolve, reject) {
       initialResolve = resolve;
@@ -720,6 +742,9 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
         var _initialResolve;
         initialResolved = true;
         (_initialResolve = initialResolve) === null || _initialResolve === void 0 || _initialResolve(items);
+      } else if (enableAgentSectioning && isExperimentEnabled('platform_editor_mention_search_order') && !updateCallback) {
+        // Agent Studio can resolve before the typeahead installs its update subscriber.
+        pendingUpdate = items;
       } else {
         var _updateCallback;
         (_updateCallback = updateCallback) === null || _updateCallback === void 0 || _updateCallback(items);
@@ -747,9 +772,14 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
           throw new Error('TypeAhead mention updates support only one subscriber');
         }
         updateCallback = update;
+        if (enableAgentSectioning && isExperimentEnabled('platform_editor_mention_search_order') && pendingUpdate) {
+          updateCallback(pendingUpdate);
+          pendingUpdate = null;
+        }
         return function () {
           unsubscribed = true;
           updateCallback = null;
+          pendingUpdate = null;
           mentionProvider.unsubscribe(key);
           subscriptionKeys.delete(key);
           // If cleanup runs before the first emission, settle the initial
@@ -764,6 +794,9 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref9) {
       }
     };
   };
+  if (enableAgentSectioning && isExperimentEnabled('platform_editor_mention_search_order')) {
+    typeAhead.subscribeToItemsUpdates = subscribeToItemsUpdates;
+  }
 
   // Presence of `subscribeToItemsUpdates` is how the type-ahead hook
   // opts a handler into the multi-emit path, so only expose it when the

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "18.2.2",
+	"version": "18.2.4",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -47,7 +47,7 @@
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/teams-app-config": "^3.0.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^170.0.0",
+		"@atlaskit/tmp-editor-statsig": "^171.0.0",
 		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/user-picker": "^13.12.0",
@@ -73,43 +73,6 @@
 		"react-intl": "^7.0.0",
 		"wait-for-expect": "^1.2.0"
 	},
-	"techstack": {
-		"@atlassian/frontend": {
-			"code-structure": [
-				"editor-plugin"
-			],
-			"import-structure": [
-				"atlassian-conventions"
-			],
-			"circular-dependencies": [
-				"file-and-folder-level"
-			]
-		},
-		"@repo/internal": {
-			"dom-events": "use-bind-event-listener",
-			"design-tokens": [
-				"color"
-			],
-			"theming": [
-				"react-context"
-			],
-			"ui-components": [
-				"lite-mode"
-			],
-			"deprecation": "no-deprecated-imports",
-			"styling": [
-				"compiled"
-			],
-			"imports": [
-				"import-no-extraneous-disable-for-examples-and-docs"
-			]
-		}
-	},
-	"techstackIgnore": {
-		"stricter": [
-			"@atlassian/tangerine/project-structure"
-		]
-	},
 	"platform-feature-flags": {
 		"team-mention-inline-smartlink": {
 			"type": "boolean"