@atlaskit/editor-plugin-type-ahead 16.1.10 → 16.1.12

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 16.1.12
+
+### Patch Changes
+
+- [`edcef04b6350e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/edcef04b6350e) -
+  Add the Quick Insert recommendation resolver API and typed surface context support for the gated
+  `platform_editor_slash_command` Recommended menu. TypeAhead uses immutable surface context for
+  visibility and React context for registered Quick Insert rendering, while Quick Insert keeps one
+  recommendation snapshot per menu open. Fix Quick Insert declaration generation.
+- Updated dependencies
+
+## 16.1.11
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.1.10
 
 ### Patch Changes

package/dist/cjs/ui/registered-menu/RegisteredTypeAheadMenu.js

@@ -12,8 +12,10 @@ var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
+var _typeAheadSurfaceContext = require("@atlaskit/editor-common/type-ahead-surface-context");
 var _typeAheadIsSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-is-section-overflow-item-key");
 var _ui = require("@atlaskit/editor-common/ui");
+var _types = require("@atlaskit/editor-ui-control-model/types");
 var _constants = require("@atlaskit/editor-shared-styles/constants");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _InputQuery = require("../InputQuery");
@@ -53,10 +55,20 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
   var generatedId = (0, _react.useId)();
   var listId = "".concat(surface.listIdPrefix, "-").concat(generatedId);
   var menuRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    selectedItemIndex = _useState2[0],
-    setSelectedItemIndex = _useState2[1];
+  var _useState = (0, _react.useState)(function () {
+      return {
+        menuOpenId: Symbol('type-ahead-menu-open')
+      };
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    typeAheadSurfaceContext = _useState2[0];
+  var surfaceContext = (0, _react.useMemo)(function () {
+    return (0, _types.createSurfaceContext)(_typeAheadSurfaceContext.TYPE_AHEAD_SURFACE_CONTEXT, typeAheadSurfaceContext);
+  }, [typeAheadSurfaceContext]);
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectedItemIndex = _useState4[0],
+    setSelectedItemIndex = _useState4[1];
   var components = (0, _react.useMemo)(function () {
     var _api$uiControlRegistr, _api$uiControlRegistr2;
     return (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.root.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
@@ -68,8 +80,14 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
     });
   }, [components]);
   var menuModel = (0, _react.useMemo)(function () {
-    return query === '' ? (0, _buildTypeAheadMenuModel.buildTypeAheadMenuModel)(components, surface.root, hasSectionOverflowItems ? SECTION_OVERFLOW_LIMIT : undefined) : (0, _getMatchingComponents.getMatchingComponents)(components, surface.root, query, formatMessage);
-  }, [components, formatMessage, hasSectionOverflowItems, query, surface.root]);
+    return query === '' ? (0, _buildTypeAheadMenuModel.buildTypeAheadMenuModel)(components, surface.root, hasSectionOverflowItems ? SECTION_OVERFLOW_LIMIT : undefined, surfaceContext) : (0, _getMatchingComponents.getMatchingComponents)({
+      components: components,
+      rootComponent: surface.root,
+      query: query,
+      formatMessage: formatMessage,
+      surfaceContext: surfaceContext
+    });
+  }, [components, formatMessage, hasSectionOverflowItems, query, surfaceContext, surface.root]);
   var rows = (0, _react.useMemo)(function () {
     return menuModel.sections.flat();
   }, [menuModel.sections]);
@@ -115,11 +133,13 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
       api: api,
       editorView: editorView,
       inputMethod: surface.inputMethod,
+      menuOpenId: typeAheadSurfaceContext.menuOpenId,
       onClose: onClose,
       query: query,
+      surfaceContext: surfaceContext,
       triggerHandler: triggerHandler
     };
-  }, [api, editorView, onClose, query, surface.inputMethod, triggerHandler]);
+  }, [api, editorView, onClose, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
   var noOp = (0, _react.useCallback)(function () {}, []);
   var SurfaceProvider = surface.Provider;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputQuery.InputQuery, {

package/dist/cjs/ui/registered-menu/buildTypeAheadMenuModel.js

@@ -12,11 +12,18 @@ var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-render
 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; }
-var buildTypeAheadMenuModel = exports.buildTypeAheadMenuModel = function buildTypeAheadMenuModel(components, rootComponent, sectionOverflowLimit) {
+var buildTypeAheadMenuModel = exports.buildTypeAheadMenuModel = function buildTypeAheadMenuModel(components, rootComponent, sectionOverflowLimit, surfaceContext) {
   var _resolveSurface = (0, _surfaceRenderer.resolveSurface)(components, rootComponent),
     root = _resolveSurface.root,
     childrenMap = _resolveSurface.childrenMap,
     topLevelChildren = _resolveSurface.topLevelChildren;
+  if (!root || !(0, _surfaceRenderer.willComponentRender)(root, childrenMap, surfaceContext)) {
+    return {
+      footer: undefined,
+      root: undefined,
+      sections: []
+    };
+  }
   var sections = [];
   var footer;
   var _iterator = _createForOfIteratorHelper(topLevelChildren !== null && topLevelChildren !== void 0 ? topLevelChildren : []),
@@ -25,26 +32,26 @@ var buildTypeAheadMenuModel = exports.buildTypeAheadMenuModel = function buildTy
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var _childrenMap$get;
       var section = _step.value;
-      if (section.type !== 'menu-section' || !(0, _surfaceRenderer.willComponentRender)(section, childrenMap)) {
+      if (section.type !== 'menu-section' || !(0, _surfaceRenderer.willComponentRender)(section, childrenMap, surfaceContext)) {
         continue;
       }
       var children = (_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : [];
       if ((0, _typeAheadIsMenuFooterSectionKey.isMenuFooterSectionKey)(section.key)) {
         footer = children.find(function (child) {
-          return child.type === 'menu-item' && (0, _surfaceRenderer.willComponentRender)(child, childrenMap);
+          return child.type === 'menu-item' && (0, _surfaceRenderer.willComponentRender)(child, childrenMap, surfaceContext);
         });
         continue;
       }
       var viewMoreItem = void 0;
       for (var index = children.length - 1; index >= 0; index--) {
         var child = children[index];
-        if ((child === null || child === void 0 ? void 0 : child.type) === 'menu-item' && (0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(child.key) && (0, _surfaceRenderer.willComponentRender)(child, childrenMap)) {
+        if ((child === null || child === void 0 ? void 0 : child.type) === 'menu-item' && (0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(child.key) && (0, _surfaceRenderer.willComponentRender)(child, childrenMap, surfaceContext)) {
           viewMoreItem = child;
           break;
         }
       }
       var items = children.filter(function (child) {
-        return child.type === 'menu-item' && !(0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(child.key) && (0, _surfaceRenderer.willComponentRender)(child, childrenMap);
+        return child.type === 'menu-item' && !(0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(child.key) && (0, _surfaceRenderer.willComponentRender)(child, childrenMap, surfaceContext);
       });
       if (items.length === 0) {
         continue;

package/dist/cjs/ui/registered-menu/getMatchingComponents.js

@@ -24,15 +24,20 @@ var compareMatchedItems = function compareMatchedItems(a, b) {
  * Resolves registered menu items for a non-empty query. This intentionally has
  * no empty-query path so browse behavior remains owned by buildTypeAheadMenuModel.
  */
-var getMatchingComponents = exports.getMatchingComponents = function getMatchingComponents(components, rootComponent, query, formatMessage) {
+var getMatchingComponents = exports.getMatchingComponents = function getMatchingComponents(_ref) {
+  var components = _ref.components,
+    rootComponent = _ref.rootComponent,
+    query = _ref.query,
+    formatMessage = _ref.formatMessage,
+    surfaceContext = _ref.surfaceContext;
   var _resolveSurface = (0, _surfaceRenderer.resolveSurface)(components, rootComponent),
     childrenMap = _resolveSurface.childrenMap,
     root = _resolveSurface.root,
     topLevelChildren = _resolveSurface.topLevelChildren;
-  if (!root || !topLevelChildren) {
+  if (!root || !(0, _surfaceRenderer.willComponentRender)(root, childrenMap, surfaceContext) || !topLevelChildren) {
     return {
       footer: undefined,
-      root: root,
+      root: undefined,
       sections: []
     };
   }
@@ -43,7 +48,7 @@ var getMatchingComponents = exports.getMatchingComponents = function getMatching
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var _childrenMap$get;
       var section = _step.value;
-      if (section.type !== 'menu-section' || (0, _typeAheadIsMenuFooterSectionKey.isMenuFooterSectionKey)(section.key) || !(0, _surfaceRenderer.willComponentRender)(section, childrenMap)) {
+      if (section.type !== 'menu-section' || (0, _typeAheadIsMenuFooterSectionKey.isMenuFooterSectionKey)(section.key) || !(0, _surfaceRenderer.willComponentRender)(section, childrenMap, surfaceContext)) {
         continue;
       }
       var _iterator3 = _createForOfIteratorHelper((_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : []),
@@ -52,7 +57,7 @@ var getMatchingComponents = exports.getMatchingComponents = function getMatching
         for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
           var _item$match, _match$score;
           var item = _step3.value;
-          if (item.type !== 'menu-item' || (0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(item.key) || !(0, _surfaceRenderer.willComponentRender)(item, childrenMap)) {
+          if (item.type !== 'menu-item' || (0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(item.key) || !(0, _surfaceRenderer.willComponentRender)(item, childrenMap, surfaceContext)) {
             continue;
           }
           var match = (_item$match = item.match) === null || _item$match === void 0 ? void 0 : _item$match.call(item, {

package/dist/cjs/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -21,6 +21,8 @@ var TypeAheadQuickInsertItem = exports.TypeAheadQuickInsertItem = function TypeA
     return {
       editorView: quickInsertContext.editorView,
       isOffline: quickInsertContext.isOffline,
+      menuOpenId: quickInsertContext.menuOpenId,
+      surfaceContext: quickInsertContext.surfaceContext,
       item: {
         id: id,
         isSelected: isSelected

package/dist/cjs/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js

@@ -18,8 +18,10 @@ var TypeAheadQuickInsertProvider = exports.TypeAheadQuickInsertProvider = functi
     api = _useTypeAheadContext.api,
     editorView = _useTypeAheadContext.editorView,
     inputMethod = _useTypeAheadContext.inputMethod,
+    menuOpenId = _useTypeAheadContext.menuOpenId,
     onClose = _useTypeAheadContext.onClose,
     query = _useTypeAheadContext.query,
+    surfaceContext = _useTypeAheadContext.surfaceContext,
     triggerHandler = _useTypeAheadContext.triggerHandler;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (_ref2) {
       var connectivityState = _ref2.connectivityState;
@@ -43,9 +45,11 @@ var TypeAheadQuickInsertProvider = exports.TypeAheadQuickInsertProvider = functi
     return {
       editorView: editorView,
       isOffline: isOffline,
-      select: select
+      menuOpenId: menuOpenId,
+      select: select,
+      surfaceContext: surfaceContext
     };
-  }, [editorView, isOffline, select]);
+  }, [editorView, isOffline, menuOpenId, select, surfaceContext]);
   return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
     value: contextValue
   }, children);

package/dist/es2019/ui/registered-menu/RegisteredTypeAheadMenu.js

@@ -3,8 +3,10 @@ import "./RegisteredTypeAheadMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
+import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/types';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
 import { Box } from '@atlaskit/primitives/compiled';
 import { InputQuery } from '../InputQuery';
@@ -44,6 +46,10 @@ export const RegisteredTypeAheadMenu = ({
   const generatedId = useId();
   const listId = `${surface.listIdPrefix}-${generatedId}`;
   const menuRef = useRef(null);
+  const [typeAheadSurfaceContext] = useState(() => ({
+    menuOpenId: Symbol('type-ahead-menu-open')
+  }));
+  const surfaceContext = useMemo(() => createSurfaceContext(TYPE_AHEAD_SURFACE_CONTEXT, typeAheadSurfaceContext), [typeAheadSurfaceContext]);
   const [selectedItemIndex, setSelectedItemIndex] = useState(0);
   const components = useMemo(() => {
     var _api$uiControlRegistr, _api$uiControlRegistr2;
@@ -52,7 +58,13 @@ export const RegisteredTypeAheadMenu = ({
   const hasSectionOverflowItems = useMemo(() => components.some(({
     key
   }) => isSectionOverflowItemKey(key)), [components]);
-  const menuModel = useMemo(() => query === '' ? buildTypeAheadMenuModel(components, surface.root, hasSectionOverflowItems ? SECTION_OVERFLOW_LIMIT : undefined) : getMatchingComponents(components, surface.root, query, formatMessage), [components, formatMessage, hasSectionOverflowItems, query, surface.root]);
+  const menuModel = useMemo(() => query === '' ? buildTypeAheadMenuModel(components, surface.root, hasSectionOverflowItems ? SECTION_OVERFLOW_LIMIT : undefined, surfaceContext) : getMatchingComponents({
+    components,
+    rootComponent: surface.root,
+    query,
+    formatMessage,
+    surfaceContext
+  }), [components, formatMessage, hasSectionOverflowItems, query, surfaceContext, surface.root]);
   const rows = useMemo(() => menuModel.sections.flat(), [menuModel.sections]);
   const selectableRowIndexes = useMemo(() => rows.flatMap((registration, rowIndex) => registration.type === 'menu-item' ? [rowIndex] : []), [rows]);
   const selectableRowKeys = selectableRowIndexes.map(index => {
@@ -91,10 +103,12 @@ export const RegisteredTypeAheadMenu = ({
     api,
     editorView,
     inputMethod: surface.inputMethod,
+    menuOpenId: typeAheadSurfaceContext.menuOpenId,
     onClose,
     query,
+    surfaceContext,
     triggerHandler
-  }), [api, editorView, onClose, query, surface.inputMethod, triggerHandler]);
+  }), [api, editorView, onClose, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
   const noOp = useCallback(() => {}, []);
   const SurfaceProvider = surface.Provider;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputQuery, {

package/dist/es2019/ui/registered-menu/buildTypeAheadMenuModel.js

@@ -1,33 +1,40 @@
 import { isMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-is-menu-footer-section-key';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 import { resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
-export const buildTypeAheadMenuModel = (components, rootComponent, sectionOverflowLimit) => {
+export const buildTypeAheadMenuModel = (components, rootComponent, sectionOverflowLimit, surfaceContext) => {
   const {
     root,
     childrenMap,
     topLevelChildren
   } = resolveSurface(components, rootComponent);
+  if (!root || !willComponentRender(root, childrenMap, surfaceContext)) {
+    return {
+      footer: undefined,
+      root: undefined,
+      sections: []
+    };
+  }
   const sections = [];
   let footer;
   for (const section of topLevelChildren !== null && topLevelChildren !== void 0 ? topLevelChildren : []) {
     var _childrenMap$get;
-    if (section.type !== 'menu-section' || !willComponentRender(section, childrenMap)) {
+    if (section.type !== 'menu-section' || !willComponentRender(section, childrenMap, surfaceContext)) {
       continue;
     }
     const children = (_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : [];
     if (isMenuFooterSectionKey(section.key)) {
-      footer = children.find(child => child.type === 'menu-item' && willComponentRender(child, childrenMap));
+      footer = children.find(child => child.type === 'menu-item' && willComponentRender(child, childrenMap, surfaceContext));
       continue;
     }
     let viewMoreItem;
     for (let index = children.length - 1; index >= 0; index--) {
       const child = children[index];
-      if ((child === null || child === void 0 ? void 0 : child.type) === 'menu-item' && isSectionOverflowItemKey(child.key) && willComponentRender(child, childrenMap)) {
+      if ((child === null || child === void 0 ? void 0 : child.type) === 'menu-item' && isSectionOverflowItemKey(child.key) && willComponentRender(child, childrenMap, surfaceContext)) {
         viewMoreItem = child;
         break;
       }
     }
-    const items = children.filter(child => child.type === 'menu-item' && !isSectionOverflowItemKey(child.key) && willComponentRender(child, childrenMap));
+    const items = children.filter(child => child.type === 'menu-item' && !isSectionOverflowItemKey(child.key) && willComponentRender(child, childrenMap, surfaceContext));
     if (items.length === 0) {
       continue;
     }

package/dist/es2019/ui/registered-menu/getMatchingComponents.js

@@ -11,27 +11,33 @@ const compareMatchedItems = (a, b) => a.score - b.score || a.sectionRank - b.sec
  * Resolves registered menu items for a non-empty query. This intentionally has
  * no empty-query path so browse behavior remains owned by buildTypeAheadMenuModel.
  */
-export const getMatchingComponents = (components, rootComponent, query, formatMessage) => {
+export const getMatchingComponents = ({
+  components,
+  rootComponent,
+  query,
+  formatMessage,
+  surfaceContext
+}) => {
   const {
     childrenMap,
     root,
     topLevelChildren
   } = resolveSurface(components, rootComponent);
-  if (!root || !topLevelChildren) {
+  if (!root || !willComponentRender(root, childrenMap, surfaceContext) || !topLevelChildren) {
     return {
       footer: undefined,
-      root,
+      root: undefined,
       sections: []
     };
   }
   const matches = new Map();
   for (const section of topLevelChildren) {
-    if (section.type !== 'menu-section' || isMenuFooterSectionKey(section.key) || !willComponentRender(section, childrenMap)) {
+    if (section.type !== 'menu-section' || isMenuFooterSectionKey(section.key) || !willComponentRender(section, childrenMap, surfaceContext)) {
       continue;
     }
     for (const item of (_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : []) {
       var _childrenMap$get, _item$match, _match$score;
-      if (item.type !== 'menu-item' || isSectionOverflowItemKey(item.key) || !willComponentRender(item, childrenMap)) {
+      if (item.type !== 'menu-item' || isSectionOverflowItemKey(item.key) || !willComponentRender(item, childrenMap, surfaceContext)) {
         continue;
       }
       const match = (_item$match = item.match) === null || _item$match === void 0 ? void 0 : _item$match.call(item, {

package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -13,6 +13,8 @@ export const TypeAheadQuickInsertItem = ({
   const contextValue = useMemo(() => ({
     editorView: quickInsertContext.editorView,
     isOffline: quickInsertContext.isOffline,
+    menuOpenId: quickInsertContext.menuOpenId,
+    surfaceContext: quickInsertContext.surfaceContext,
     item: {
       id,
       isSelected

package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js

@@ -11,8 +11,10 @@ export const TypeAheadQuickInsertProvider = ({
     api,
     editorView,
     inputMethod,
+    menuOpenId,
     onClose,
     query,
+    surfaceContext,
     triggerHandler
   } = useTypeAheadContext();
   const {
@@ -36,8 +38,10 @@ export const TypeAheadQuickInsertProvider = ({
   const contextValue = useMemo(() => ({
     editorView,
     isOffline,
-    select
-  }), [editorView, isOffline, select]);
+    menuOpenId,
+    select,
+    surfaceContext
+  }), [editorView, isOffline, menuOpenId, select, surfaceContext]);
   return /*#__PURE__*/React.createElement(QuickInsertProvider, {
     value: contextValue
   }, children);

package/dist/esm/ui/registered-menu/RegisteredTypeAheadMenu.js

@@ -4,8 +4,10 @@ import "./RegisteredTypeAheadMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
+import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/types';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
 import { Box } from '@atlaskit/primitives/compiled';
 import { InputQuery } from '../InputQuery';
@@ -44,10 +46,20 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
   var generatedId = useId();
   var listId = "".concat(surface.listIdPrefix, "-").concat(generatedId);
   var menuRef = useRef(null);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedItemIndex = _useState2[0],
-    setSelectedItemIndex = _useState2[1];
+  var _useState = useState(function () {
+      return {
+        menuOpenId: Symbol('type-ahead-menu-open')
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    typeAheadSurfaceContext = _useState2[0];
+  var surfaceContext = useMemo(function () {
+    return createSurfaceContext(TYPE_AHEAD_SURFACE_CONTEXT, typeAheadSurfaceContext);
+  }, [typeAheadSurfaceContext]);
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedItemIndex = _useState4[0],
+    setSelectedItemIndex = _useState4[1];
   var components = useMemo(function () {
     var _api$uiControlRegistr, _api$uiControlRegistr2;
     return (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.root.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
@@ -59,8 +71,14 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
     });
   }, [components]);
   var menuModel = useMemo(function () {
-    return query === '' ? buildTypeAheadMenuModel(components, surface.root, hasSectionOverflowItems ? SECTION_OVERFLOW_LIMIT : undefined) : getMatchingComponents(components, surface.root, query, formatMessage);
-  }, [components, formatMessage, hasSectionOverflowItems, query, surface.root]);
+    return query === '' ? buildTypeAheadMenuModel(components, surface.root, hasSectionOverflowItems ? SECTION_OVERFLOW_LIMIT : undefined, surfaceContext) : getMatchingComponents({
+      components: components,
+      rootComponent: surface.root,
+      query: query,
+      formatMessage: formatMessage,
+      surfaceContext: surfaceContext
+    });
+  }, [components, formatMessage, hasSectionOverflowItems, query, surfaceContext, surface.root]);
   var rows = useMemo(function () {
     return menuModel.sections.flat();
   }, [menuModel.sections]);
@@ -106,11 +124,13 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
       api: api,
       editorView: editorView,
       inputMethod: surface.inputMethod,
+      menuOpenId: typeAheadSurfaceContext.menuOpenId,
       onClose: onClose,
       query: query,
+      surfaceContext: surfaceContext,
       triggerHandler: triggerHandler
     };
-  }, [api, editorView, onClose, query, surface.inputMethod, triggerHandler]);
+  }, [api, editorView, onClose, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
   var noOp = useCallback(function () {}, []);
   var SurfaceProvider = surface.Provider;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputQuery, {

package/dist/esm/ui/registered-menu/buildTypeAheadMenuModel.js

@@ -5,11 +5,18 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import { isMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-is-menu-footer-section-key';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 import { resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
-export var buildTypeAheadMenuModel = function buildTypeAheadMenuModel(components, rootComponent, sectionOverflowLimit) {
+export var buildTypeAheadMenuModel = function buildTypeAheadMenuModel(components, rootComponent, sectionOverflowLimit, surfaceContext) {
   var _resolveSurface = resolveSurface(components, rootComponent),
     root = _resolveSurface.root,
     childrenMap = _resolveSurface.childrenMap,
     topLevelChildren = _resolveSurface.topLevelChildren;
+  if (!root || !willComponentRender(root, childrenMap, surfaceContext)) {
+    return {
+      footer: undefined,
+      root: undefined,
+      sections: []
+    };
+  }
   var sections = [];
   var footer;
   var _iterator = _createForOfIteratorHelper(topLevelChildren !== null && topLevelChildren !== void 0 ? topLevelChildren : []),
@@ -18,26 +25,26 @@ export var buildTypeAheadMenuModel = function buildTypeAheadMenuModel(components
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var _childrenMap$get;
       var section = _step.value;
-      if (section.type !== 'menu-section' || !willComponentRender(section, childrenMap)) {
+      if (section.type !== 'menu-section' || !willComponentRender(section, childrenMap, surfaceContext)) {
         continue;
       }
       var children = (_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : [];
       if (isMenuFooterSectionKey(section.key)) {
         footer = children.find(function (child) {
-          return child.type === 'menu-item' && willComponentRender(child, childrenMap);
+          return child.type === 'menu-item' && willComponentRender(child, childrenMap, surfaceContext);
         });
         continue;
       }
       var viewMoreItem = void 0;
       for (var index = children.length - 1; index >= 0; index--) {
         var child = children[index];
-        if ((child === null || child === void 0 ? void 0 : child.type) === 'menu-item' && isSectionOverflowItemKey(child.key) && willComponentRender(child, childrenMap)) {
+        if ((child === null || child === void 0 ? void 0 : child.type) === 'menu-item' && isSectionOverflowItemKey(child.key) && willComponentRender(child, childrenMap, surfaceContext)) {
           viewMoreItem = child;
           break;
         }
       }
       var items = children.filter(function (child) {
-        return child.type === 'menu-item' && !isSectionOverflowItemKey(child.key) && willComponentRender(child, childrenMap);
+        return child.type === 'menu-item' && !isSectionOverflowItemKey(child.key) && willComponentRender(child, childrenMap, surfaceContext);
       });
       if (items.length === 0) {
         continue;

package/dist/esm/ui/registered-menu/getMatchingComponents.js

@@ -18,15 +18,20 @@ var compareMatchedItems = function compareMatchedItems(a, b) {
  * Resolves registered menu items for a non-empty query. This intentionally has
  * no empty-query path so browse behavior remains owned by buildTypeAheadMenuModel.
  */
-export var getMatchingComponents = function getMatchingComponents(components, rootComponent, query, formatMessage) {
+export var getMatchingComponents = function getMatchingComponents(_ref) {
+  var components = _ref.components,
+    rootComponent = _ref.rootComponent,
+    query = _ref.query,
+    formatMessage = _ref.formatMessage,
+    surfaceContext = _ref.surfaceContext;
   var _resolveSurface = resolveSurface(components, rootComponent),
     childrenMap = _resolveSurface.childrenMap,
     root = _resolveSurface.root,
     topLevelChildren = _resolveSurface.topLevelChildren;
-  if (!root || !topLevelChildren) {
+  if (!root || !willComponentRender(root, childrenMap, surfaceContext) || !topLevelChildren) {
     return {
       footer: undefined,
-      root: root,
+      root: undefined,
       sections: []
     };
   }
@@ -37,7 +42,7 @@ export var getMatchingComponents = function getMatchingComponents(components, ro
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var _childrenMap$get;
       var section = _step.value;
-      if (section.type !== 'menu-section' || isMenuFooterSectionKey(section.key) || !willComponentRender(section, childrenMap)) {
+      if (section.type !== 'menu-section' || isMenuFooterSectionKey(section.key) || !willComponentRender(section, childrenMap, surfaceContext)) {
         continue;
       }
       var _iterator3 = _createForOfIteratorHelper((_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : []),
@@ -46,7 +51,7 @@ export var getMatchingComponents = function getMatchingComponents(components, ro
         for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
           var _item$match, _match$score;
           var item = _step3.value;
-          if (item.type !== 'menu-item' || isSectionOverflowItemKey(item.key) || !willComponentRender(item, childrenMap)) {
+          if (item.type !== 'menu-item' || isSectionOverflowItemKey(item.key) || !willComponentRender(item, childrenMap, surfaceContext)) {
             continue;
           }
           var match = (_item$match = item.match) === null || _item$match === void 0 ? void 0 : _item$match.call(item, {

package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -13,6 +13,8 @@ export var TypeAheadQuickInsertItem = function TypeAheadQuickInsertItem(_ref) {
     return {
       editorView: quickInsertContext.editorView,
       isOffline: quickInsertContext.isOffline,
+      menuOpenId: quickInsertContext.menuOpenId,
+      surfaceContext: quickInsertContext.surfaceContext,
       item: {
         id: id,
         isSelected: isSelected

package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js

@@ -10,8 +10,10 @@ export var TypeAheadQuickInsertProvider = function TypeAheadQuickInsertProvider(
     api = _useTypeAheadContext.api,
     editorView = _useTypeAheadContext.editorView,
     inputMethod = _useTypeAheadContext.inputMethod,
+    menuOpenId = _useTypeAheadContext.menuOpenId,
     onClose = _useTypeAheadContext.onClose,
     query = _useTypeAheadContext.query,
+    surfaceContext = _useTypeAheadContext.surfaceContext,
     triggerHandler = _useTypeAheadContext.triggerHandler;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity'], function (_ref2) {
       var connectivityState = _ref2.connectivityState;
@@ -35,9 +37,11 @@ export var TypeAheadQuickInsertProvider = function TypeAheadQuickInsertProvider(
     return {
       editorView: editorView,
       isOffline: isOffline,
-      select: select
+      menuOpenId: menuOpenId,
+      select: select,
+      surfaceContext: surfaceContext
     };
-  }, [editorView, isOffline, select]);
+  }, [editorView, isOffline, menuOpenId, select, surfaceContext]);
   return /*#__PURE__*/React.createElement(QuickInsertProvider, {
     value: contextValue
   }, children);

package/dist/types/ui/registered-menu/TypeAheadContext.d.ts

@@ -2,13 +2,16 @@ import type { Context } from 'react';
 import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { ExtractInjectionAPI, TypeAheadHandler } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
 import type { TypeAheadPlugin } from '../../typeAheadPluginType';
 export type TypeAheadContextValue = {
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
     editorView: EditorView;
     inputMethod: INPUT_METHOD.QUICK_INSERT;
+    menuOpenId: symbol;
     onClose: () => void;
     query: string;
+    surfaceContext: SurfaceContext;
     triggerHandler: TypeAheadHandler;
 };
 export declare const TypeAheadContext: Context<TypeAheadContextValue | null>;

package/dist/types/ui/registered-menu/buildTypeAheadMenuModel.d.ts

@@ -1,9 +1,9 @@
 import type { SurfaceIdentifier } from '@atlaskit/editor-ui-control-model/surface-renderer/types';
-import type { RegisterComponent, RegisterMenuItem, RegisterMenuSection } from '@atlaskit/editor-ui-control-model/types';
+import type { RegisterComponent, RegisterMenuItem, RegisterMenuSection, SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
 export type TypeAheadMenuSection = [RegisterMenuSection, ...RegisterMenuItem[]];
 export type TypeAheadMenuModel = {
     footer: RegisterMenuItem | undefined;
     root: RegisterComponent | undefined;
     sections: TypeAheadMenuSection[];
 };
-export declare const buildTypeAheadMenuModel: (components: RegisterComponent[], rootComponent: SurfaceIdentifier, sectionOverflowLimit?: number) => TypeAheadMenuModel;
+export declare const buildTypeAheadMenuModel: (components: RegisterComponent[], rootComponent: SurfaceIdentifier, sectionOverflowLimit?: number, surfaceContext?: SurfaceContext) => TypeAheadMenuModel;

package/dist/types/ui/registered-menu/getMatchingComponents.d.ts

@@ -1,9 +1,15 @@
 import type { IntlShape } from 'react-intl';
 import type { SurfaceIdentifier } from '@atlaskit/editor-ui-control-model/surface-renderer/types';
-import type { RegisterComponent } from '@atlaskit/editor-ui-control-model/types';
+import type { RegisterComponent, SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
 import type { TypeAheadMenuModel } from './buildTypeAheadMenuModel';
 /**
  * Resolves registered menu items for a non-empty query. This intentionally has
  * no empty-query path so browse behavior remains owned by buildTypeAheadMenuModel.
  */
-export declare const getMatchingComponents: (components: RegisterComponent[], rootComponent: SurfaceIdentifier, query: string, formatMessage: IntlShape['formatMessage']) => TypeAheadMenuModel;
+export declare const getMatchingComponents: ({ components, rootComponent, query, formatMessage, surfaceContext, }: {
+    components: RegisterComponent[];
+    formatMessage: IntlShape['formatMessage'];
+    query: string;
+    rootComponent: SurfaceIdentifier;
+    surfaceContext?: SurfaceContext;
+}) => TypeAheadMenuModel;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "16.1.10",
+	"version": "16.1.12",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,20 +30,20 @@
 		"@atlaskit/editor-plugin-ui-control-registry": "^9.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
-		"@atlaskit/editor-ui-control-model": "^2.7.0",
+		"@atlaskit/editor-ui-control-model": "^2.8.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
-		"@atlaskit/heading": "^7.0.0",
-		"@atlaskit/icon": "^37.4.0",
+		"@atlaskit/heading": "^7.1.0",
+		"@atlaskit/icon": "^37.5.0",
 		"@atlaskit/insm": "^2.0.0",
-		"@atlaskit/menu": "^10.0.0",
+		"@atlaskit/menu": "^10.1.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/primitives": "^22.3.0",
+		"@atlaskit/primitives": "^22.4.0",
 		"@atlaskit/prosemirror-history": "^1.2.0",
 		"@atlaskit/prosemirror-input-rules": "^4.0.0",
-		"@atlaskit/tmp-editor-statsig": "^156.0.0",
-		"@atlaskit/tokens": "^16.7.0",
-		"@atlaskit/visually-hidden": "^4.2.0",
+		"@atlaskit/tmp-editor-statsig": "^157.0.0",
+		"@atlaskit/tokens": "^16.8.0",
+		"@atlaskit/visually-hidden": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
@@ -53,7 +53,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^119.12.0",
+		"@atlaskit/editor-common": "^119.14.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"