@atlaskit/editor-plugin-type-ahead 10.2.2 → 10.3.0

package/dist/esm/typeAheadPlugin.js

@@ -206,7 +206,7 @@ export var typeAheadPlugin = function typeAheadPlugin(_ref) {
       }];
     },
     getSharedState: function getSharedState(editorState) {
-      var _state$decorationSet, _state$decorationElem, _state$items, _state$errorInfo, _state$selectedIndex;
+      var _state$decorationSet, _state$decorationElem, _state$items, _state$sections, _state$errorInfo, _state$selectedIndex;
       if (!editorState) {
         return {
           query: '',
@@ -217,6 +217,7 @@ export var typeAheadPlugin = function typeAheadPlugin(_ref) {
           decorationElement: null,
           triggerHandler: undefined,
           items: [],
+          sections: [],
           errorInfo: null,
           selectedIndex: 0
         };
@@ -232,6 +233,7 @@ export var typeAheadPlugin = function typeAheadPlugin(_ref) {
         decorationElement: (_state$decorationElem = state === null || state === void 0 ? void 0 : state.decorationElement) !== null && _state$decorationElem !== void 0 ? _state$decorationElem : null,
         triggerHandler: state === null || state === void 0 ? void 0 : state.triggerHandler,
         items: (_state$items = state === null || state === void 0 ? void 0 : state.items) !== null && _state$items !== void 0 ? _state$items : [],
+        sections: (_state$sections = state === null || state === void 0 ? void 0 : state.sections) !== null && _state$sections !== void 0 ? _state$sections : [],
         errorInfo: (_state$errorInfo = state === null || state === void 0 ? void 0 : state.errorInfo) !== null && _state$errorInfo !== void 0 ? _state$errorInfo : null,
         selectedIndex: (_state$selectedIndex = state === null || state === void 0 ? void 0 : state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0
       };

package/dist/esm/ui/ContentComponent.js

@@ -6,25 +6,27 @@ export function ContentComponent(_ref) {
     editorView = _ref.editorView,
     popupMountRef = _ref.popupMountRef;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['typeAhead'], function (states) {
-      var _states$typeAheadStat, _states$typeAheadStat2, _states$typeAheadStat3, _states$typeAheadStat4, _states$typeAheadStat5, _states$typeAheadStat6, _states$typeAheadStat7;
+      var _states$typeAheadStat, _states$typeAheadStat2, _states$typeAheadStat3, _states$typeAheadStat4, _states$typeAheadStat5, _states$typeAheadStat6, _states$typeAheadStat7, _states$typeAheadStat8;
       return {
         triggerHandler: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.triggerHandler,
         items: (_states$typeAheadStat2 = states.typeAheadState) === null || _states$typeAheadStat2 === void 0 ? void 0 : _states$typeAheadStat2.items,
-        errorInfo: (_states$typeAheadStat3 = states.typeAheadState) === null || _states$typeAheadStat3 === void 0 ? void 0 : _states$typeAheadStat3.errorInfo,
-        decorationElement: (_states$typeAheadStat4 = states.typeAheadState) === null || _states$typeAheadStat4 === void 0 ? void 0 : _states$typeAheadStat4.decorationElement,
-        decorationSet: (_states$typeAheadStat5 = states.typeAheadState) === null || _states$typeAheadStat5 === void 0 ? void 0 : _states$typeAheadStat5.decorationSet,
-        query: (_states$typeAheadStat6 = states.typeAheadState) === null || _states$typeAheadStat6 === void 0 ? void 0 : _states$typeAheadStat6.query,
-        selectedIndex: (_states$typeAheadStat7 = states.typeAheadState) === null || _states$typeAheadStat7 === void 0 ? void 0 : _states$typeAheadStat7.selectedIndex
+        sections: (_states$typeAheadStat3 = states.typeAheadState) === null || _states$typeAheadStat3 === void 0 ? void 0 : _states$typeAheadStat3.sections,
+        errorInfo: (_states$typeAheadStat4 = states.typeAheadState) === null || _states$typeAheadStat4 === void 0 ? void 0 : _states$typeAheadStat4.errorInfo,
+        decorationElement: (_states$typeAheadStat5 = states.typeAheadState) === null || _states$typeAheadStat5 === void 0 ? void 0 : _states$typeAheadStat5.decorationElement,
+        decorationSet: (_states$typeAheadStat6 = states.typeAheadState) === null || _states$typeAheadStat6 === void 0 ? void 0 : _states$typeAheadStat6.decorationSet,
+        query: (_states$typeAheadStat7 = states.typeAheadState) === null || _states$typeAheadStat7 === void 0 ? void 0 : _states$typeAheadStat7.query,
+        selectedIndex: (_states$typeAheadStat8 = states.typeAheadState) === null || _states$typeAheadStat8 === void 0 ? void 0 : _states$typeAheadStat8.selectedIndex
       };
     }),
     triggerHandler = _useSharedPluginState.triggerHandler,
     items = _useSharedPluginState.items,
+    sections = _useSharedPluginState.sections,
     errorInfo = _useSharedPluginState.errorInfo,
     decorationElement = _useSharedPluginState.decorationElement,
     decorationSet = _useSharedPluginState.decorationSet,
     query = _useSharedPluginState.query,
     selectedIndex = _useSharedPluginState.selectedIndex;
-  if (items === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
+  if (items === undefined || sections === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
     return null;
   }
   return /*#__PURE__*/React.createElement(TypeAheadMenu, {
@@ -35,6 +37,7 @@ export function ContentComponent(_ref) {
     typeAheadState: {
       triggerHandler: triggerHandler,
       items: items,
+      sections: sections,
       errorInfo: errorInfo,
       decorationElement: decorationElement,
       decorationSet: decorationSet,

package/dist/esm/ui/TypeAheadList.js

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -18,6 +19,7 @@ import { AssistiveText } from '@atlaskit/editor-common/ui';
 import { MenuGroup } from '@atlaskit/menu';
 import { Text, Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
@@ -33,8 +35,43 @@ var list = css({
     padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)")
   }
 });
-var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref) {
-  var numberOfResults = _ref.numberOfResults;
+var buildTypeAheadRows = function buildTypeAheadRows(_ref) {
+  var itemsLength = _ref.itemsLength,
+    sections = _ref.sections;
+  if (sections.length === 0) {
+    return Array.from({
+      length: itemsLength
+    }, function (_, itemIndex) {
+      return {
+        type: 'item',
+        itemIndex: itemIndex
+      };
+    });
+  }
+  var sortedSections = _toConsumableArray(sections).sort(function (left, right) {
+    return left.startIndex - right.startIndex;
+  });
+  var sectionsByStartIndex = new Map(sortedSections.map(function (section) {
+    return [section.startIndex, section];
+  }));
+  var rows = [];
+  for (var itemIndex = 0; itemIndex < itemsLength; itemIndex++) {
+    var section = sectionsByStartIndex.get(itemIndex);
+    if (section) {
+      rows.push({
+        type: 'section',
+        section: section
+      });
+    }
+    rows.push({
+      type: 'item',
+      itemIndex: itemIndex
+    });
+  }
+  return rows;
+};
+var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref2) {
+  var numberOfResults = _ref2.numberOfResults;
   var intl = useIntl();
   return jsx(AssistiveText, {
     assistiveText: intl.formatMessage(typeAheadListMessages.searchResultsLabel, {
@@ -46,21 +83,22 @@ var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(function (_ref
     id: TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
   });
 });
-var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
-  var _triggerHandler$getMo, _decorationElement$qu2;
-  var items = _ref2.items,
-    emptyItem = _ref2.emptyItem,
-    selectedIndex = _ref2.selectedIndex,
-    editorView = _ref2.editorView,
-    onItemClick = _ref2.onItemClick,
-    intl = _ref2.intl,
-    fitHeight = _ref2.fitHeight,
-    decorationElement = _ref2.decorationElement,
-    triggerHandler = _ref2.triggerHandler,
-    moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
-    api = _ref2.api,
-    showMoreOptionsButton = _ref2.showMoreOptionsButton,
-    onMoreOptionsClicked = _ref2.onMoreOptionsClicked;
+var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref3) {
+  var _itemRowIndexByItemIn, _triggerHandler$getMo, _decorationElement$qu2;
+  var items = _ref3.items,
+    sections = _ref3.sections,
+    emptyItem = _ref3.emptyItem,
+    selectedIndex = _ref3.selectedIndex,
+    editorView = _ref3.editorView,
+    onItemClick = _ref3.onItemClick,
+    intl = _ref3.intl,
+    fitHeight = _ref3.fitHeight,
+    decorationElement = _ref3.decorationElement,
+    triggerHandler = _ref3.triggerHandler,
+    moreElementsInQuickInsertViewEnabled = _ref3.moreElementsInQuickInsertViewEnabled,
+    api = _ref3.api,
+    showMoreOptionsButton = _ref3.showMoreOptionsButton,
+    onMoreOptionsClicked = _ref3.onMoreOptionsClicked;
   var listRef = useRef();
   var listContainerRef = useRef(null);
   var lastInputMethodRef = useRef('keyboard');
@@ -87,6 +125,27 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     cache = _useState4[0],
     setCache = _useState4[1];
+  var listRows = useMemo(function () {
+    return buildTypeAheadRows({
+      itemsLength: itemsLength,
+      sections: sections || []
+    });
+  }, [itemsLength, sections]);
+  var itemRowIndexByItemIndex = useMemo(function () {
+    var rowIndexByItemIndex = new Map();
+    listRows.forEach(function (row, rowIndex) {
+      if (row.type === 'item') {
+        rowIndexByItemIndex.set(row.itemIndex, rowIndex);
+      }
+    });
+    return rowIndexByItemIndex;
+  }, [listRows]);
+  var populatedSectionCount = useMemo(function () {
+    return listRows.filter(function (row) {
+      return row.type === 'section';
+    }).length;
+  }, [listRows]);
+  var selectedItemRowIndex = selectedIndex >= 0 ? (_itemRowIndexByItemIn = itemRowIndexByItemIndex.get(selectedIndex)) !== null && _itemRowIndexByItemIn !== void 0 ? _itemRowIndexByItemIn : -1 : -1;
   var onItemsRendered = useCallback(function (props) {
     lastVisibleIndexes.current = props;
   }, []);
@@ -123,8 +182,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
   var lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
   var onScroll = useCallback(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function (_ref3) {
-    var scrollUpdateWasRequested = _ref3.scrollUpdateWasRequested;
+  function (_ref4) {
+    var scrollUpdateWasRequested = _ref4.scrollUpdateWasRequested;
     if (!scrollUpdateWasRequested) {
       return;
     }
@@ -142,28 +201,32 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     requestAnimationFrame(function () {
       requestAnimationFrame(function () {
         var isViewMoreSelected = showMoreOptionsButton && selectedIndex === itemsLength;
-        var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex ||
+        var isSelectedItemVisible = selectedItemRowIndex >= lastVisibleStartIndex && selectedItemRowIndex <= lastVisibleStopIndex ||
         // view more is always visible, hence no scrolling
         isViewMoreSelected;
 
         //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
         if (!isSelectedItemVisible && selectedIndex !== -1) {
-          listRef.current.scrollToRow(selectedIndex);
+          listRef.current.scrollToRow(selectedItemRowIndex);
         } else if (selectedIndex === -1) {
           listRef.current.scrollToRow(0);
         }
       });
     });
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton]);
-  var _onMouseMove = function onMouseMove(event, index) {
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton, selectedItemRowIndex]);
+  var _onMouseMove = function onMouseMove(event, row) {
+    if (row.type !== 'item') {
+      return;
+    }
+    var itemIndex = row.itemIndex;
     event.preventDefault();
     event.stopPropagation();
-    if (selectedIndex === index) {
+    if (selectedIndex === itemIndex) {
       return;
     }
     mouseMovedRef.current = true;
     lastInputMethodRef.current = 'mouse';
-    updateSelectedIndex(index, api)(editorView.state, editorView.dispatch);
+    updateSelectedIndex(itemIndex, api)(editorView.state, editorView.dispatch);
   };
   useLayoutEffect(function () {
     if (mouseMovedRef.current) {
@@ -177,17 +240,17 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       return;
     }
     var isViewMoreSelected = showMoreOptionsButton && selectedIndex === itemsLength;
-    var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex ||
+    var isSelectedItemVisible = selectedItemRowIndex >= lastVisibleStartIndex && selectedItemRowIndex <= lastVisibleStopIndex ||
     // view more is always visible, hence no scrolling
     isViewMoreSelected;
 
     //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
     if (!isSelectedItemVisible && selectedIndex !== -1) {
-      listRef.current.scrollToRow(selectedIndex);
+      listRef.current.scrollToRow(selectedItemRowIndex);
     } else if (selectedIndex === -1) {
       listRef.current.scrollToRow(0);
     }
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showMoreOptionsButton, selectedItemRowIndex]);
   useLayoutEffect(function () {
     setCache(new CellMeasurerCache({
       fixedWidth: true,
@@ -203,10 +266,10 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
         listContainerRef.current.firstChild.scrollTo(0, 0);
       }
     });
-  }, [items]);
+  }, [items, sections]);
   useLayoutEffect(function () {
     // Exclude view more item from the count
-    var itemsToRender = showMoreOptionsButton ? items.slice(0, -1) : items;
+    var itemsToRender = editorExperiment('platform_editor_agent_mentions', true) ? listRows : showMoreOptionsButton ? items.slice(0, -1) : items;
     var height = Math.min(
     // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
     itemsToRender.reduce(function (prevValue, currentValue, index) {
@@ -215,7 +278,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       });
     }, 0), fitHeight);
     setHeight(height);
-  }, [items, cache, fitHeight, showMoreOptionsButton]);
+  }, [listRows, items, cache, fitHeight, showMoreOptionsButton]);
   useLayoutEffect(function () {
     if (!listContainerRef.current) {
       return;
@@ -278,8 +341,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     if (onMoreOptionsClicked) {
       onMoreOptionsClicked();
     }
-    api === null || api === void 0 || api.core.actions.execute(function (_ref4) {
-      var tr = _ref4.tr;
+    api === null || api === void 0 || api.core.actions.execute(function (_ref5) {
+      var tr = _ref5.tr;
       closeTypeAhead(tr);
       config === null || config === void 0 || config.onClick({
         tr: tr
@@ -287,22 +350,25 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       return tr;
     });
   };
-  var renderRow = function renderRow(_ref5) {
-    var index = _ref5.index,
-      key = _ref5.key,
-      style = _ref5.style,
-      parent = _ref5.parent,
-      isScrolling = _ref5.isScrolling,
-      isVisible = _ref5.isVisible;
-    var currentItem = items[index];
+  var renderRow = function renderRow(_ref6) {
+    var index = _ref6.index,
+      key = _ref6.key,
+      style = _ref6.style,
+      parent = _ref6.parent,
+      isScrolling = _ref6.isScrolling,
+      isVisible = _ref6.isVisible;
+    var currentRow = listRows[index];
+    if (!currentRow) {
+      return null;
+    }
     return jsx(CellMeasurer, {
       key: key,
       cache: cache,
       parent: parent,
       columnIndex: 0,
       rowIndex: index
-    }, function (_ref6) {
-      var measure = _ref6.measure;
+    }, function (_ref7) {
+      var measure = _ref7.measure;
       return jsx(ListRow, {
         measure: measure,
         index: index
@@ -314,21 +380,29 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         onMouseMove: function onMouseMove(e) {
-          return _onMouseMove(e, index);
+          return _onMouseMove(e, currentRow);
         }
-      }, jsx(TypeAheadListItem, {
-        key: items[index].title,
-        item: currentItem,
+      }, currentRow.type === 'section' ? populatedSectionCount === 1 ? null : jsx(Box, {
+        paddingInline: "space.150",
+        paddingBlock: "space.050"
+      }, jsx(Text, {
+        as: "span",
+        size: "small",
+        color: "color.text.subtle",
+        weight: "medium"
+      }, currentRow.section.title)) : jsx(TypeAheadListItem, {
+        key: items[currentRow.itemIndex].title,
+        item: items[currentRow.itemIndex],
         firstOnlineSupportedIndex: firstOnlineSupportedRow,
         itemsLength: itemsLength,
-        itemIndex: index,
+        itemIndex: currentRow.itemIndex,
         selectedIndex: selectedIndex
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
-        onItemClick: function onItemClick(mode, index) {
-          actions.onItemClick(mode, index, INPUT_METHOD.MOUSE);
+        onItemClick: function onItemClick(mode, itemIndex) {
+          actions.onItemClick(mode, itemIndex, INPUT_METHOD.MOUSE);
         },
-        ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
+        ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, items[currentRow.itemIndex]).listItemAriaLabel,
         moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
         api: api,
         lastInputMethodRef: lastInputMethodRef
@@ -362,7 +436,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     ref: listRef
     // Skip rendering the view more button in the list
     ,
-    rowCount: itemsLength,
+    rowCount: listRows.length,
     rowHeight: cache.rowHeight,
     onRowsRendered: onItemsRendered,
     width: LIST_WIDTH,

package/dist/esm/ui/TypeAheadMenu.js

@@ -16,6 +16,8 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
   var isOpen = typeAheadState.decorationSet.find().length > 0;
   var triggerHandler = typeAheadState.triggerHandler,
     items = typeAheadState.items,
+    _typeAheadState$secti = typeAheadState.sections,
+    sections = _typeAheadState$secti === void 0 ? [] : _typeAheadState$secti,
     errorInfo = typeAheadState.errorInfo,
     decorationElement = typeAheadState.decorationElement,
     decorationSet = typeAheadState.decorationSet,
@@ -96,6 +98,7 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     anchorElement: decorationElement,
     triggerHandler: triggerHandler,
     items: items,
+    sections: sections,
     emptyItem: emptyItem,
     errorInfo: errorInfo,
     selectedIndex: selectedIndex,

package/dist/esm/ui/TypeAheadPopup.js

@@ -60,6 +60,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     popupsBoundariesElement = props.popupsBoundariesElement,
     popupsScrollableElement = props.popupsScrollableElement,
     items = props.items,
+    _props$sections = props.sections,
+    sections = _props$sections === void 0 ? [] : _props$sections,
     emptyItem = props.emptyItem,
     errorInfo = props.errorInfo,
     selectedIndex = props.selectedIndex,
@@ -335,6 +337,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     triggerHandler: triggerHandler
   }), jsx(TypeAheadList, {
     items: items,
+    sections: sections,
     emptyItem: emptyItem,
     selectedIndex: selectedIndex
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)

package/dist/esm/ui/WrapperTypeAhead.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -31,6 +32,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
   if (editorExperiment('platform_editor_controls', 'variant1')) {
     showMoreOptionsButton = !!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getMoreOptionsButtonConfig);
   }
+  var intl = useIntl();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     closed = _useState2[0],
@@ -41,7 +43,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     setQuery = _useState4[1];
   var queryRef = useRef(query);
   var editorViewRef = useRef(editorView);
-  var items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api);
+  var items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api, intl);
   useEffect(function () {
     if (!closed && fg('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;

package/dist/esm/ui/hooks/build-sectioned-result.js

@@ -0,0 +1,124 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export var buildSectionedResult = function buildSectionedResult(_ref) {
+  var _triggerHandler$getSe;
+  var items = _ref.items,
+    triggerHandler = _ref.triggerHandler,
+    intl = _ref.intl;
+  if (!editorExperiment('platform_editor_agent_mentions', true) || !intl) {
+    return {
+      items: items,
+      sections: []
+    };
+  }
+  var sectionDefinitions = (_triggerHandler$getSe = triggerHandler.getSections) === null || _triggerHandler$getSe === void 0 ? void 0 : _triggerHandler$getSe.call(triggerHandler, {
+    intl: intl
+  });
+  if (!sectionDefinitions || sectionDefinitions.length === 0) {
+    return {
+      items: items,
+      sections: []
+    };
+  }
+
+  // Track which item indexes have been claimed by a section, or excluded (matched a section but
+  // cut by that section's limit). Items excluded by limit should not appear anywhere in the output.
+  var assignedToSection = new Set();
+  var excludedByLimit = new Set();
+  var groupedBySection = new Map();
+  var _iterator = _createForOfIteratorHelper(sectionDefinitions),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var section = _step.value;
+      var matchingIndexes = [];
+      for (var _i = 0; _i < items.length; _i++) {
+        if (assignedToSection.has(_i) || excludedByLimit.has(_i)) {
+          continue;
+        }
+        if (section.filter(items[_i])) {
+          matchingIndexes.push(_i);
+        }
+      }
+      var acceptedIndexes = section.limit !== undefined ? matchingIndexes.slice(0, section.limit) : matchingIndexes;
+      var rejectedByLimit = matchingIndexes.slice(acceptedIndexes.length);
+      var _iterator3 = _createForOfIteratorHelper(acceptedIndexes),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _i2 = _step3.value;
+          assignedToSection.add(_i2);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      var _iterator4 = _createForOfIteratorHelper(rejectedByLimit),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var _i3 = _step4.value;
+          excludedByLimit.add(_i3);
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+      if (acceptedIndexes.length === 0) {
+        continue;
+      }
+      groupedBySection.set(section.id, {
+        indexes: acceptedIndexes,
+        section: section
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var flattenedItems = [];
+  var sections = [];
+  var _iterator2 = _createForOfIteratorHelper(sectionDefinitions),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _section = _step2.value;
+      var grouped = groupedBySection.get(_section.id);
+      if (!grouped) {
+        continue;
+      }
+      var startIndex = flattenedItems.length;
+      flattenedItems.push.apply(flattenedItems, _toConsumableArray(grouped.indexes.map(function (i) {
+        return items[i];
+      })));
+      var endIndex = flattenedItems.length - 1;
+      sections.push({
+        endIndex: endIndex,
+        id: _section.id,
+        startIndex: startIndex,
+        title: _section.title
+      });
+    }
+
+    // Append items not claimed by any section and not excluded by a limit
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  for (var i = 0; i < items.length; i++) {
+    if (!assignedToSection.has(i) && !excludedByLimit.has(i)) {
+      flattenedItems.push(items[i]);
+    }
+  }
+  return {
+    items: flattenedItems,
+    sections: sections
+  };
+};

package/dist/esm/ui/hooks/use-load-items.js

@@ -5,8 +5,9 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearListError } from '../../pm-plugins/commands/clear-list-error';
 import { updateListError } from '../../pm-plugins/commands/update-list-error';
 import { updateListItem } from '../../pm-plugins/commands/update-list-items';
+import { buildSectionedResult } from './build-sectioned-result';
 var EMPTY_LIST_ITEM = [];
-export var useLoadItems = function useLoadItems(triggerHandler, editorView, query, showViewMore, api) {
+export var useLoadItems = function useLoadItems(triggerHandler, editorView, query, showViewMore, api, intl) {
   var _useState = useState(EMPTY_LIST_ITEM),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
@@ -37,7 +38,14 @@ export var useLoadItems = function useLoadItems(triggerHandler, editorView, quer
       var emptyItem = result.length === 0 && expValEquals('platform_editor_insert_menu_ai', 'isEnabled', true) ? (_triggerHandler$getEm = triggerHandler.getEmptyItem) === null || _triggerHandler$getEm === void 0 ? void 0 : _triggerHandler$getEm.call(triggerHandler, {
         editorState: editorView.state
       }) : undefined;
-      var list = result.length > 0 ? result : emptyItem ? [emptyItem] : EMPTY_LIST_ITEM;
+      var rawList = result.length > 0 ? result : emptyItem ? [emptyItem] : EMPTY_LIST_ITEM;
+      var _buildSectionedResult = buildSectionedResult({
+          items: rawList,
+          triggerHandler: triggerHandler,
+          intl: intl !== null && intl !== void 0 ? intl : null
+        }),
+        list = _buildSectionedResult.items,
+        sections = _buildSectionedResult.sections;
       if (componentIsMounted.current) {
         setItems(list);
       }
@@ -47,7 +55,7 @@ export var useLoadItems = function useLoadItems(triggerHandler, editorView, quer
         title: 'View more'
       };
       queueMicrotask(function () {
-        updateListItem(showViewMore ? list.concat(viewMoreItem) : list)(view.state, view.dispatch);
+        updateListItem(showViewMore ? list.concat(viewMoreItem) : list, sections)(view.state, view.dispatch);
       });
     }).catch(function (e) {
       if (editorExperiment('platform_editor_offline_editing_web', true)) {
@@ -65,7 +73,7 @@ export var useLoadItems = function useLoadItems(triggerHandler, editorView, quer
     // ignore because EditorView is mutable but we don't want to
     // call loadItems when it changes, only when the query changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggerHandler, query]);
+  }, [triggerHandler, query, intl]);
   useEffect(function () {
     return function () {
       componentIsMounted.current = false;

package/dist/types/pm-plugins/commands/update-list-items.d.ts

@@ -1,2 +1,3 @@
 import type { Command, TypeAheadItem } from '@atlaskit/editor-common/types';
-export declare const updateListItem: (items: Array<TypeAheadItem>) => Command;
+import type { TypeAheadResolvedSection } from '../../types';
+export declare const updateListItem: (items: Array<TypeAheadItem>, sections?: Array<TypeAheadResolvedSection>) => Command;

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

@@ -35,11 +35,18 @@ export type TypeAheadPluginState = {
      * If true, removes the trigger character from query when typeahead is closed
      */
     removePrefixTriggerOnCancel?: boolean;
+    sections: Array<TypeAheadResolvedSection>;
     selectedIndex: number;
     stats: TypeAheadStatsSerializable | null;
     triggerHandler?: TypeAheadHandler;
     typeAheadHandlers: Array<TypeAheadHandler>;
 };
+export type TypeAheadResolvedSection = {
+    endIndex: number;
+    id: string;
+    startIndex: number;
+    title: string;
+};
 export type OnInsertSelectedItemProps = {
     index: number;
     mode: SelectItemMode;
@@ -88,6 +95,7 @@ export interface TypeAheadPluginSharedState {
     isOpen: boolean;
     items: Array<TypeAheadItem>;
     query: string;
+    sections: Array<TypeAheadResolvedSection>;
     selectedIndex: number;
     triggerHandler?: TypeAheadHandler;
 }