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

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 10.3.1
+
+### Patch Changes
+
+- [`cf6977530a136`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf6977530a136) -
+  Support fullwidth slash ／ (U+FF0F) as a quick insert trigger for Japanese/CJK keyboard users.
+  Japanese keyboards produce the fullwidth slash when pressing the / key, which previously did not
+  open the quick insert menu. The fix adds a `customRegex` to the quick-insert typeahead handler
+  that matches both ASCII slash `/` and fullwidth slash `／`, and extends the trigger cleanup logic
+  in `openTypeAheadAtCursor` to handle `customRegex` alternatives.
+- [`cf6977530a136`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf6977530a136) -
+  Add ./commands entry point exposing openTypeAheadAtCursor for test consumption
+- Updated dependencies
+
+## 10.3.0
+
+### Minor Changes
+
+- [`beab4fffee103`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/beab4fffee103) -
+  EDITOR-7318: Add type-ahead sections support with getSections handler API.
+
+  Adds `TypeAheadSection` and `TypeAheadSectionUpdate` types and an optional `getSections()` method
+  to `TypeAheadHandler` in `editor-common`. Implements section grouping in
+  `editor-plugin-type-ahead` via `buildSectionedResult`. Adds People/Agents section split to
+  `editor-plugin-mentions`.
+
+  Removes the `updateSection` action and associated `sectionOverrides`/`sectionsRefreshKey`
+  pm-plugin state — section definitions are now derived directly from `getSections()` at load time
+  rather than being mutated at runtime.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.2.2
 
 ### Patch Changes

package/commands/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/editor-plugin-type-ahead/commands",
+  "main": "../dist/cjs/entry-points/commands.js",
+  "module": "../dist/esm/entry-points/commands.js",
+  "module:es2019": "../dist/es2019/entry-points/commands.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/commands.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/commands.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/entry-points/commands.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "openTypeAhead", {
+  enumerable: true,
+  get: function get() {
+    return _openTypeaheadAtCursor.openTypeAhead;
+  }
+});
+Object.defineProperty(exports, "openTypeAheadAtCursor", {
+  enumerable: true,
+  get: function get() {
+    return _openTypeaheadAtCursor.openTypeAheadAtCursor;
+  }
+});
+var _openTypeaheadAtCursor = require("../pm-plugins/commands/open-typeahead-at-cursor");

package/dist/cjs/pm-plugins/commands/open-typeahead-at-cursor.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.openTypeAheadAtCursor = exports.openTypeAhead = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("../actions");
 var _key = require("../key");
 var openTypeAhead = exports.openTypeAhead = function openTypeAhead(props) {
@@ -49,7 +50,7 @@ var openTypeAheadAtCursor = exports.openTypeAheadAtCursor = function openTypeAhe
       // delete 1 pos before wherever selection is now - that will delete the empty space
       tr.delete(tr.selection.from - 1, tr.selection.from);
     } else {
-      var _selection$$head, _selection$$head$pare, _selection$$head$pare2;
+      var _selection$$head$pare, _selection$$head$pare2, _selection$$head;
       if (selection instanceof _state.NodeSelection) {
         if (isInline) {
           tr.deleteSelection();
@@ -78,7 +79,11 @@ var openTypeAheadAtCursor = exports.openTypeAheadAtCursor = function openTypeAhe
       // being inserted due to composition by checking if we have the trigger
       // directly before the typeahead. This should not happen unless it has
       // been eroneously added because we require whitespace/newline for typeahead.
-      if (cursorPos >= 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head = _selection$$head.parent) !== null && _selection$$head !== void 0 && _selection$$head.textContent) && (_selection$$head$pare = (_selection$$head$pare2 = selection.$head.parent.textContent).endsWith) !== null && _selection$$head$pare !== void 0 && _selection$$head$pare.call(_selection$$head$pare2, triggerHandler.trigger)) {
+      // Check if the text ends with the trigger character (or any character matched
+      // by customRegex, to support wide-char variants like fullwidth slash ／)
+      var triggerPattern = (0, _expValEquals.expValEquals)('platform_editor_wide_slash_trigger', 'isEnabled', true) && triggerHandler.customRegex ? new RegExp("(".concat(triggerHandler.customRegex, ")$"), 'u') : null;
+      var endsWithTrigger = ((_selection$$head$pare = (_selection$$head$pare2 = selection.$head.parent.textContent).endsWith) === null || _selection$$head$pare === void 0 ? void 0 : _selection$$head$pare.call(_selection$$head$pare2, triggerHandler.trigger)) || triggerPattern && triggerPattern.test(selection.$head.parent.textContent);
+      if (cursorPos >= 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head = _selection$$head.parent) !== null && _selection$$head !== void 0 && _selection$$head.textContent) && endsWithTrigger) {
         tr.delete(cursorPos - 1, cursorPos);
       }
     }

package/dist/cjs/pm-plugins/commands/update-list-items.js

@@ -7,12 +7,14 @@ exports.updateListItem = void 0;
 var _actions = require("../actions");
 var _key = require("../key");
 var updateListItem = exports.updateListItem = function updateListItem(items) {
+  var sections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return function (state, dispatch) {
     var tr = state.tr;
     tr.setMeta(_key.pluginKey, {
       action: _actions.ACTIONS.UPDATE_LIST_ITEMS,
       params: {
-        items: items
+        items: items,
+        sections: sections
       }
     });
     if (dispatch) {

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

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = createPlugin;
 var _steps = require("@atlaskit/adf-schema/steps");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("./actions");
+var _openTypeaheadAtCursor = require("./commands/open-typeahead-at-cursor");
 var _constants = require("./constants");
 var _decorations = require("./decorations");
 var _isInsertionTransaction = require("./isInsertionTransaction");
@@ -49,6 +52,11 @@ function createPlugin(_ref) {
     typeAheadHandlers: typeAheadHandlers,
     popupMountRef: popupMountRef
   });
+
+  // Tracks a wide-char trigger handler detected during IME composition (e.g. ／).
+  // Set by compositionupdate, cleared by compositionend. Used by handleKeyDown
+  // to intercept Enter that confirms the composition.
+  var pendingWideSlashHandler = null;
   return new _safePlugin.SafePlugin({
     key: _key.pluginKey,
     state: {
@@ -59,6 +67,7 @@ function createPlugin(_ref) {
           decorationSet: _view.DecorationSet.empty,
           decorationElement: null,
           items: [],
+          sections: [],
           errorInfo: null,
           selectedIndex: -1,
           stats: null,
@@ -100,8 +109,53 @@ function createPlugin(_ref) {
         var _pluginKey$getState;
         return (_pluginKey$getState = _key.pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet;
       },
+      handleKeyDown: function handleKeyDown(view, event) {
+        // When composing a wide-char trigger (e.g. ／), intercept the Enter key
+        // that confirms the composition so we can open the typeahead instead.
+        if (pendingWideSlashHandler && event.isComposing && (event.key === 'Enter' || event.keyCode === 13)) {
+          var handler = pendingWideSlashHandler;
+          pendingWideSlashHandler = null;
+          // Defer until ProseMirror has flushed the composed text into its state.
+          setTimeout(function () {
+            var command = (0, _openTypeaheadAtCursor.openTypeAheadAtCursor)({
+              triggerHandler: handler,
+              inputMethod: _analytics.INPUT_METHOD.KEYBOARD
+            });
+            var tr = command({
+              tr: view.state.tr
+            });
+            if (tr) {
+              view.dispatch(tr);
+            }
+          }, 0);
+          return true;
+        }
+        return false;
+      },
       handleDOMEvents: {
+        compositionupdate: function compositionupdate(view, event) {
+          // When the experiment is on, track whether the current composition
+          // exactly matches a wide-char trigger (e.g. ／ from Japanese keyboard).
+          // We can't open the typeahead yet because composition is still active,
+          // but we record the matching handler so the next keydown (Enter) can use it.
+          if ((0, _expValEquals.expValEquals)('platform_editor_wide_slash_trigger', 'isEnabled', true)) {
+            var _event$data, _typeAheadHandlers$fi;
+            var pendingData = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : '';
+            pendingWideSlashHandler = (_typeAheadHandlers$fi = typeAheadHandlers.find(function (handler) {
+              if (!handler.customRegex) {
+                return false;
+              }
+              // Only match if the entire composition is a trigger character
+              var pattern = new RegExp("^(".concat(handler.customRegex, ")$"), 'u');
+              return pattern.test(pendingData);
+            })) !== null && _typeAheadHandlers$fi !== void 0 ? _typeAheadHandlers$fi : null;
+          }
+          return false;
+        },
         compositionend: function compositionend(view, event) {
+          // Clear the pending handler when composition ends (cancelled or committed
+          // via a non-Enter key like Space, which we don't want to intercept).
+          pendingWideSlashHandler = null;
           return false;
         },
         click: function click(view, event) {

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

@@ -76,6 +76,7 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
       inputMethod: inputMethod,
       selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
       items: [],
+      sections: [],
       query: reopenQuery || '',
       removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
     });
@@ -94,6 +95,7 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
       stats: null,
       triggerHandler: undefined,
       items: [],
+      sections: [],
       removePrefixTriggerOnCancel: undefined
     });
   };
@@ -144,13 +146,17 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
       return _objectSpread(_objectSpread({}, currentPluginState), {}, {
         errorInfo: errorInfo,
         items: [],
+        sections: [],
         selectedIndex: -1
       });
     } else if (shouldUpdateListItems) {
-      var items = params.items;
+      var items = params.items,
+        _params$sections = params.sections,
+        sections = _params$sections === void 0 ? [] : _params$sections;
       var selectedIndex = currentPluginState.selectedIndex;
       return _objectSpread(_objectSpread({}, currentPluginState), {}, {
         items: items,
+        sections: sections,
         selectedIndex: Math.max(selectedIndex >= items.length ? items.length - 1 : selectedIndex, -1)
       });
     } else if (shouldUpdateSelectedIndex) {

package/dist/cjs/typeAheadPlugin.js

@@ -214,7 +214,7 @@ var typeAheadPlugin = exports.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: '',
@@ -225,6 +225,7 @@ var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref) {
           decorationElement: null,
           triggerHandler: undefined,
           items: [],
+          sections: [],
           errorInfo: null,
           selectedIndex: 0
         };
@@ -240,6 +241,7 @@ var typeAheadPlugin = exports.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/cjs/ui/ContentComponent.js

@@ -13,25 +13,27 @@ function ContentComponent(_ref) {
     editorView = _ref.editorView,
     popupMountRef = _ref.popupMountRef;
   var _useSharedPluginState = (0, _hooks.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.default.createElement(_TypeAheadMenu.TypeAheadMenu, {
@@ -42,6 +44,7 @@ function ContentComponent(_ref) {
     typeAheadState: {
       triggerHandler: triggerHandler,
       items: items,
+      sections: sections,
       errorInfo: errorInfo,
       decorationElement: decorationElement,
       decorationSet: decorationSet,

package/dist/cjs/ui/TypeAheadList.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TypeAheadList = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntl = require("react-intl");
@@ -19,6 +20,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _menu = require("@atlaskit/menu");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _closeTypeAhead = require("../pm-plugins/commands/close-type-ahead");
 var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
 var _constants = require("../pm-plugins/constants");
@@ -42,8 +44,43 @@ var list = (0, _react2.css)({
     padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)")
   }
 });
-var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/_react.default.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 = (0, _toConsumableArray2.default)(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.default.memo(function (_ref2) {
+  var numberOfResults = _ref2.numberOfResults;
   var intl = (0, _reactIntl.useIntl)();
   return (0, _react2.jsx)(_ui.AssistiveText, {
     assistiveText: intl.formatMessage(_typeAhead.typeAheadListMessages.searchResultsLabel, {
@@ -55,21 +92,22 @@ var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/_react.default.memo(funct
     id: _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
   });
 });
-var TypeAheadListComponent = /*#__PURE__*/_react.default.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.default.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 = (0, _react.useRef)();
   var listContainerRef = (0, _react.useRef)(null);
   var lastInputMethodRef = (0, _react.useRef)('keyboard');
@@ -96,6 +134,27 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     cache = _useState4[0],
     setCache = _useState4[1];
+  var listRows = (0, _react.useMemo)(function () {
+    return buildTypeAheadRows({
+      itemsLength: itemsLength,
+      sections: sections || []
+    });
+  }, [itemsLength, sections]);
+  var itemRowIndexByItemIndex = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function (props) {
     lastVisibleIndexes.current = props;
   }, []);
@@ -132,8 +191,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
   var lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
   var onScroll = (0, _react.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;
     }
@@ -151,28 +210,32 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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';
-    (0, _updateSelectedIndex.updateSelectedIndex)(index, api)(editorView.state, editorView.dispatch);
+    (0, _updateSelectedIndex.updateSelectedIndex)(itemIndex, api)(editorView.state, editorView.dispatch);
   };
   (0, _react.useLayoutEffect)(function () {
     if (mouseMovedRef.current) {
@@ -186,17 +249,17 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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]);
   (0, _react.useLayoutEffect)(function () {
     setCache(new _CellMeasurer.CellMeasurerCache({
       fixedWidth: true,
@@ -212,10 +275,10 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
         listContainerRef.current.firstChild.scrollTo(0, 0);
       }
     });
-  }, [items]);
+  }, [items, sections]);
   (0, _react.useLayoutEffect)(function () {
     // Exclude view more item from the count
-    var itemsToRender = showMoreOptionsButton ? items.slice(0, -1) : items;
+    var itemsToRender = (0, _experiments.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) {
@@ -224,7 +287,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       });
     }, 0), fitHeight);
     setHeight(height);
-  }, [items, cache, fitHeight, showMoreOptionsButton]);
+  }, [listRows, items, cache, fitHeight, showMoreOptionsButton]);
   (0, _react.useLayoutEffect)(function () {
     if (!listContainerRef.current) {
       return;
@@ -287,8 +350,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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;
       (0, _closeTypeAhead.closeTypeAhead)(tr);
       config === null || config === void 0 || config.onClick({
         tr: tr
@@ -296,22 +359,25 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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 (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
       key: key,
       cache: cache,
       parent: parent,
       columnIndex: 0,
       rowIndex: index
-    }, function (_ref6) {
-      var measure = _ref6.measure;
+    }, function (_ref7) {
+      var measure = _ref7.measure;
       return (0, _react2.jsx)(_ListRow.ListRow, {
         measure: measure,
         index: index
@@ -323,21 +389,29 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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);
         }
-      }, (0, _react2.jsx)(_TypeAheadListItem.TypeAheadListItem, {
-        key: items[index].title,
-        item: currentItem,
+      }, currentRow.type === 'section' ? populatedSectionCount === 1 ? null : (0, _react2.jsx)(_compiled.Box, {
+        paddingInline: "space.150",
+        paddingBlock: "space.050"
+      }, (0, _react2.jsx)(_compiled.Text, {
+        as: "span",
+        size: "small",
+        color: "color.text.subtle",
+        weight: "medium"
+      }, currentRow.section.title)) : (0, _react2.jsx)(_TypeAheadListItem.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, _analytics.INPUT_METHOD.MOUSE);
+        onItemClick: function onItemClick(mode, itemIndex) {
+          actions.onItemClick(mode, itemIndex, _analytics.INPUT_METHOD.MOUSE);
         },
-        ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
+        ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, items[currentRow.itemIndex]).listItemAriaLabel,
         moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
         api: api,
         lastInputMethodRef: lastInputMethodRef
@@ -371,7 +445,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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/cjs/ui/TypeAheadMenu.js

@@ -23,6 +23,8 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
   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,
@@ -103,6 +105,7 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
     anchorElement: decorationElement,
     triggerHandler: triggerHandler,
     items: items,
+    sections: sections,
     emptyItem: emptyItem,
     errorInfo: errorInfo,
     selectedIndex: selectedIndex,