@atlaskit/editor-plugin-type-ahead 30.0.5 → 31.0.0

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

@@ -11,264 +11,165 @@ require("./RegisteredTypeAheadMenu.compiled.css");
 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 _isOfflineMode = require("@atlaskit/editor-common/connectivity/isOfflineMode");
 var _Popup = _interopRequireDefault(require("@atlaskit/editor-common/Popup"));
-var _registeredMenuModel = require("@atlaskit/editor-common/quick-insert/registered-menu-model");
-var _useMenuPopupSizing = require("@atlaskit/editor-common/quick-insert/use-menu-popup-sizing");
-var _useSearchAnalytics = require("@atlaskit/editor-common/quick-insert/use-search-analytics");
-var _typeAheadIsSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-is-section-overflow-item-key");
-var _typeAheadSurfaceContext = require("@atlaskit/editor-common/type-ahead-surface-context");
+var _context = require("@atlaskit/editor-common/registered-menu/context");
+var _popupSizing = require("@atlaskit/editor-common/registered-menu/popup-sizing");
+var _surfaceContext = require("@atlaskit/editor-common/registered-menu/surface-context");
+var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
 var _constants = require("@atlaskit/editor-shared-styles/constants");
-var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
+var _insertTypeAheadItem = require("../../pm-plugins/commands/insert-type-ahead-item");
 var _InputQuery = require("../InputQuery");
-var _getTypeAheadGlobalViewMoreId = require("./getTypeAheadGlobalViewMoreId");
-var _getTypeAheadItemId = require("./getTypeAheadItemId");
-var _TypeAheadMenuRenderer = require("./TypeAheadMenuRenderer");
-var _TypeAheadProvider = require("./TypeAheadProvider");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var styles = {
-  menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51idpf _85i5idpf _1bsbnklw"
-};
 var DEFAULT_MENU_MAX_HEIGHT = 480;
-var MENU_WIDTH = 320;
 var POPUP_OFFSET = [0, 8];
+var styles = {
+  popup: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _1q51idpf _85i5idpf _16qs130s _1bsbnklw"
+};
 var EMPTY_COMPONENTS = [];
 var subscribeToNothing = function subscribeToNothing() {
   return function () {};
 };
-var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
-  var _api$uiControlRegistr2, _api$uiControlRegistr3, _api$analytics;
-  var anchorElement = _ref.anchorElement,
-    api = _ref.api,
-    cancel = _ref.cancel,
-    editorView = _ref.editorView,
-    forceFocus = _ref.forceFocus,
-    _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? DEFAULT_MENU_MAX_HEIGHT : _ref$maxHeight,
-    onClose = _ref.onClose,
-    onUndoRedo = _ref.onUndoRedo,
-    popupsBoundariesElement = _ref.popupsBoundariesElement,
-    popupsMountPoint = _ref.popupsMountPoint,
-    popupsScrollableElement = _ref.popupsScrollableElement,
-    query = _ref.query,
-    reopenQuery = _ref.reopenQuery,
-    setQuery = _ref.setQuery,
-    surface = _ref.surface,
-    triggerHandler = _ref.triggerHandler;
-  var menuHeight = (0, _useMenuPopupSizing.useMenuPopupSizing)({
-    target: anchorElement,
-    boundariesElement: popupsBoundariesElement,
-    scrollableElement: popupsScrollableElement,
-    maxHeight: maxHeight,
+var noOp = function noOp() {};
+var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(props) {
+  var _props$maxHeight, _api$uiControlRegistr2, _api$uiControlRegistr3, _root$isHidden;
+  var api = props.api,
+    registeredMenuKey = props.registeredMenuKey,
+    query = props.query,
+    editorView = props.editorView,
+    onClose = props.onClose,
+    triggerHandler = props.triggerHandler,
+    popupsMountPoint = props.popupsMountPoint;
+  var rootComponent = (0, _react.useMemo)(function () {
+    return {
+      key: registeredMenuKey,
+      type: 'menu'
+    };
+  }, [registeredMenuKey]);
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    menuInteraction = _useState2[0],
+    setMenuInteraction = _useState2[1];
+  var registerInteraction = (0, _react.useCallback)(function (interaction) {
+    setMenuInteraction(interaction);
+    return function () {
+      return setMenuInteraction(function (current) {
+        return current === interaction ? undefined : current;
+      });
+    };
+  }, []);
+  var maxHeight = (0, _popupSizing.useMenuPopupSizing)({
+    target: props.anchorElement,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    maxHeight: (_props$maxHeight = props.maxHeight) !== null && _props$maxHeight !== void 0 ? _props$maxHeight : DEFAULT_MENU_MAX_HEIGHT,
     offset: POPUP_OFFSET[1]
   });
-  var _useIntl = (0, _reactIntl.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
-  var generatedId = (0, _react.useId)();
-  var listId = "".concat(surface.listIdPrefix, "-").concat(generatedId);
-  var menuRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(function () {
-      return {
-        menuOpenId: Symbol('type-ahead-menu-open')
-      };
+  var cancelMenu = (0, _react.useCallback)(function (params) {
+    var _menuInteraction$onCl;
+    menuInteraction === null || menuInteraction === void 0 || (_menuInteraction$onCl = menuInteraction.onClose) === null || _menuInteraction$onCl === void 0 || _menuInteraction$onCl.call(menuInteraction);
+    props.cancel(params);
+  }, [menuInteraction, props.cancel]);
+  var _useState3 = (0, _react.useState)(function () {
+      return Symbol('type-ahead-menu-open');
     }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-    typeAheadSurfaceContext = _useState2[0];
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    menuOpenId = _useState4[0];
   var surfaceContext = (0, _react.useMemo)(function () {
-    return (0, _createSurfaceContext.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 selectedItemIndexRef = (0, _react.useRef)(selectedItemIndex);
+    return (0, _surfaceContext.createRegisteredMenuSurfaceContext)({
+      menuOpenId: menuOpenId,
+      surface: 'typeahead'
+    });
+  }, [menuOpenId]);
   var getComponents = (0, _react.useCallback)(function () {
     var _api$uiControlRegistr;
-    var components = api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(surface.root.key);
+    var components = api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(rootComponent.key);
     return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
-  }, [api, surface.root.key]);
+  }, [api, rootComponent.key]);
   var components = (0, _react.useSyncExternalStore)((_api$uiControlRegistr2 = api === null || api === void 0 || (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 ? void 0 : _api$uiControlRegistr3.actions.subscribe) !== null && _api$uiControlRegistr2 !== void 0 ? _api$uiControlRegistr2 : subscribeToNothing, getComponents, getComponents);
-  var hasSectionOverflowItems = (0, _react.useMemo)(function () {
-    return components.some(function (_ref2) {
-      var key = _ref2.key;
-      return (0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
-    });
-  }, [components]);
-  var menuModel = (0, _react.useMemo)(function () {
-    return (0, _registeredMenuModel.getQuickInsertMenuModel)({
-      components: components,
-      formatMessage: formatMessage,
-      getItemRank: triggerHandler.getRegisteredItemRank,
-      query: query,
-      rootComponent: surface.root,
-      selectCategoryItems: hasSectionOverflowItems ? _registeredMenuModel.selectQuickInsertCategoryItems : undefined,
-      surfaceContext: surfaceContext
+  var root = (0, _react.useMemo)(function () {
+    return components.find(function (_ref) {
+      var key = _ref.key,
+        type = _ref.type,
+        parents = _ref.parents;
+      return key === rootComponent.key && type === rootComponent.type && !(parents !== null && parents !== void 0 && parents.length);
     });
-  }, [components, formatMessage, hasSectionOverflowItems, query, surfaceContext, surface.root, triggerHandler.getRegisteredItemRank]);
-  var rows = (0, _react.useMemo)(function () {
-    return (0, _registeredMenuModel.getQuickInsertMenuRows)(menuModel);
-  }, [menuModel]);
-  var searchResultCount = (0, _react.useMemo)(function () {
-    return menuModel.sections.reduce(function (count, section) {
-      return count + section.filter(function (_ref3) {
-        var key = _ref3.key,
-          type = _ref3.type;
-        return type === 'menu-item' && !(0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
-      }).length;
-    }, 0);
-  }, [menuModel.sections]);
-  var flushSearchAnalytics = (0, _useSearchAnalytics.useQuickInsertSearchAnalytics)({
-    fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent,
-    query: query,
-    resultCount: searchResultCount,
-    surface: 'typeahead'
-  });
-  var closeMenu = (0, _react.useCallback)(function () {
-    flushSearchAnalytics();
+  }, [components, rootComponent]);
+  var Root = root !== null && root !== void 0 && (_root$isHidden = root.isHidden) !== null && _root$isHidden !== void 0 && _root$isHidden.call(root, {
+    surfaceContext: surfaceContext
+  }) ? undefined : root === null || root === void 0 ? void 0 : root.component;
+  // Interaction updates should not recreate the registered component's own props.
+  var menu = (0, _react.useMemo)(function () {
+    return Root && /*#__PURE__*/_react.default.createElement(Root, null, null);
+  }, [Root]);
+  var _useSharedPluginState = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['connectivity'], function (_ref2) {
+      var connectivityState = _ref2.connectivityState;
+      return {
+        isOffline: (0, _isOfflineMode.isOfflineMode)(connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode)
+      };
+    }),
+    isOffline = _useSharedPluginState.isOffline;
+  var select = (0, _react.useCallback)(function (selectItem) {
     onClose();
-  }, [flushSearchAnalytics, onClose]);
-  var _useState5 = (0, _react.useState)(),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    previewActivation = _useState6[0],
-    setPreviewActivation = _useState6[1];
-  var activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.menuModel) === menuModel ? previewActivation.itemKey : undefined;
-  var selectableRowIndexes = (0, _react.useMemo)(function () {
-    return rows.flatMap(function (registration, rowIndex) {
-      return registration.type === 'menu-item' ? [rowIndex] : [];
-    });
-  }, [rows]);
-  var selectableRowKeys = selectableRowIndexes.map(function (index) {
-    var _rows$index;
-    return (_rows$index = rows[index]) === null || _rows$index === void 0 ? void 0 : _rows$index.key;
-  }).join(',');
-  var selectableItemCount = selectableRowIndexes.length + (menuModel.footer ? 1 : 0);
-  (0, _react.useLayoutEffect)(function () {
-    var initialItemIndex = selectableItemCount > 0 ? 0 : -1;
-    selectedItemIndexRef.current = initialItemIndex;
-    setSelectedItemIndex(initialItemIndex);
-  }, [query, selectableItemCount, selectableRowKeys]);
-  (0, _react.useLayoutEffect)(function () {
-    setPreviewActivation(undefined);
-  }, [menuModel, query]);
-  var selectActiveItem = (0, _react.useCallback)(function (_mode) {
-    var rowIndex = selectableRowIndexes[selectedItemIndex];
-    var selectedId = rowIndex !== undefined ? (0, _getTypeAheadItemId.getTypeAheadItemId)(listId, rowIndex) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? (0, _getTypeAheadGlobalViewMoreId.getTypeAheadGlobalViewMoreId)(listId) : undefined;
-    if (selectedId) {
-      var _menuRef$current;
-      (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || (_menuRef$current = _menuRef$current.ownerDocument.getElementById(selectedId)) === null || _menuRef$current === void 0 || _menuRef$current.click();
-    }
-  }, [listId, menuModel.footer, selectableRowIndexes, selectedItemIndex]);
-  var setKeyboardPreview = (0, _react.useCallback)(function (itemIndex) {
-    var rowIndex = selectableRowIndexes[itemIndex];
-    var registration = rowIndex === undefined ? undefined : rows[rowIndex];
-    setPreviewActivation((registration === null || registration === void 0 ? void 0 : registration.type) === 'menu-item' ? {
-      itemKey: registration.key,
-      menuModel: menuModel,
-      source: 'keyboard'
-    } : undefined);
-  }, [menuModel, rows, selectableRowIndexes]);
-  var selectNextItem = (0, _react.useCallback)(function () {
-    var currentIndex = selectedItemIndexRef.current;
-    var nextIndex = selectableItemCount === 0 ? -1 : currentIndex < 0 || currentIndex === selectableItemCount - 1 ? 0 : currentIndex + 1;
-    selectedItemIndexRef.current = nextIndex;
-    setSelectedItemIndex(nextIndex);
-    setKeyboardPreview(nextIndex);
-  }, [selectableItemCount, setKeyboardPreview]);
-  var selectPreviousItem = (0, _react.useCallback)(function () {
-    var currentIndex = selectedItemIndexRef.current;
-    var previousIndex = selectableItemCount === 0 ? -1 : currentIndex <= 0 ? selectableItemCount - 1 : currentIndex - 1;
-    selectedItemIndexRef.current = previousIndex;
-    setSelectedItemIndex(previousIndex);
-    setKeyboardPreview(previousIndex);
-  }, [selectableItemCount, setKeyboardPreview]);
-  var onItemHover = (0, _react.useCallback)(function (itemIndex, itemKey) {
-    selectedItemIndexRef.current = itemIndex;
-    setSelectedItemIndex(itemIndex);
-    setPreviewActivation(function (current) {
-      if ((current === null || current === void 0 ? void 0 : current.itemKey) === itemKey && (current === null || current === void 0 ? void 0 : current.menuModel) === menuModel && (current === null || current === void 0 ? void 0 : current.source) === 'pointer') {
-        return current;
-      }
-      return itemKey ? {
-        itemKey: itemKey,
-        menuModel: menuModel,
-        source: 'pointer'
-      } : undefined;
-    });
-  }, [menuModel]);
-  var onItemLeave = (0, _react.useCallback)(function (itemKey) {
-    setPreviewActivation(function (current) {
-      return (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current;
-    });
-  }, []);
-  var onItemVisibilityChange = (0, _react.useCallback)(function (itemKey, isVisible) {
-    if (!isVisible) {
-      setPreviewActivation(function (current) {
-        return (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current;
+    queueMicrotask(function () {
+      return (0, _insertTypeAheadItem.performTypeAheadSelection)(editorView)({
+        handler: triggerHandler,
+        query: query,
+        selectItem: selectItem
       });
-    }
-  }, []);
-  var typeAheadContextValue = (0, _react.useMemo)(function () {
+    });
+  }, [editorView, onClose, query, triggerHandler]);
+  var registeredMenu = (0, _react.useMemo)(function () {
     return {
-      activePreviewItemKey: activePreviewItemKey,
-      api: api,
+      components: components,
+      onClose: onClose,
+      maxHeight: maxHeight,
+      registerInteraction: registerInteraction,
       editorView: editorView,
-      inputMethod: surface.inputMethod,
-      menuOpenId: typeAheadSurfaceContext.menuOpenId,
-      onClose: closeMenu,
-      popupsMountPoint: popupsMountPoint,
+      getItemRank: triggerHandler.getRegisteredItemRank,
+      isOffline: isOffline,
+      menuOpenId: menuOpenId,
+      portalMountPoint: popupsMountPoint,
+      rootComponent: rootComponent,
       query: query,
-      surfaceContext: surfaceContext,
-      triggerHandler: triggerHandler
+      select: select,
+      surfaceContext: surfaceContext
     };
-  }, [activePreviewItemKey, api, editorView, closeMenu, popupsMountPoint, 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, {
-    activeDescendantId: selectableRowIndexes[selectedItemIndex] !== undefined ? (0, _getTypeAheadItemId.getTypeAheadItemId)(listId, selectableRowIndexes[selectedItemIndex]) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? (0, _getTypeAheadGlobalViewMoreId.getTypeAheadGlobalViewMoreId)(listId) : undefined,
-    cancel: cancel,
+  }, [onClose, maxHeight, registerInteraction, components, editorView, triggerHandler.getRegisteredItemRank, isOffline, menuOpenId, popupsMountPoint, rootComponent, query, select, surfaceContext]);
+  return /*#__PURE__*/_react.default.createElement(_context.RegisteredMenuContext.Provider, {
+    value: registeredMenu
+  }, /*#__PURE__*/_react.default.createElement(_InputQuery.InputQuery, {
+    menuInteraction: menuInteraction,
+    cancel: cancelMenu,
     editorView: editorView,
-    forceFocus: forceFocus,
-    listId: listId,
-    onItemSelect: selectActiveItem,
-    onQueryChange: setQuery,
+    forceFocus: props.forceFocus,
+    onItemSelect: noOp,
+    onQueryChange: props.setQuery,
     onQueryFocus: noOp,
-    onUndoRedo: onUndoRedo,
-    optionCount: selectableItemCount,
-    reopenQuery: reopenQuery,
-    selectNextItem: selectNextItem,
-    selectPreviousItem: selectPreviousItem,
+    onUndoRedo: props.onUndoRedo,
+    optionCount: 0,
+    reopenQuery: props.reopenQuery,
+    selectNextItem: noOp,
+    selectPreviousItem: noOp,
     shouldKeepOpenOnRegisteredMenu: true,
     triggerQueryPrefix: triggerHandler.trigger
-  }), /*#__PURE__*/_react.default.createElement(_Popup.default, {
-    ariaLabel: null,
-    boundariesElement: popupsBoundariesElement,
-    fitHeight: menuHeight,
-    fitWidth: MENU_WIDTH,
+  }), Root && /*#__PURE__*/_react.default.createElement(_Popup.default, {
+    zIndex: _constants.akEditorFloatingDialogZIndex,
+    target: props.anchorElement,
     mountTo: popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    fitHeight: maxHeight,
+    fitWidth: 320,
     offset: POPUP_OFFSET,
-    preventOverflow: true,
-    scrollableElement: popupsScrollableElement,
-    target: anchorElement,
-    zIndex: _constants.akEditorFloatingDialogZIndex
+    ariaLabel: null,
+    preventOverflow: true
   }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: menuRef,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Parent overlays use this class to restore pointer interaction.
-    className: (0, _runtime.ax)([styles.menu, "fabric-editor-typeahead"]),
+    // Legacy host integrations also use this popup selector.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Preserve the typeahead popup selector.
+    className: (0, _runtime.ax)([styles.popup, "fabric-editor-typeahead"]),
     "data-registered-type-ahead-menu": "",
-    "data-testid": "registered-type-ahead-menu"
-  }, /*#__PURE__*/_react.default.createElement(_TypeAheadProvider.TypeAheadProvider, {
-    value: typeAheadContextValue
-  }, /*#__PURE__*/_react.default.createElement(SurfaceProvider, null, /*#__PURE__*/_react.default.createElement(_TypeAheadMenuRenderer.TypeAheadMenuRenderer, {
-    Item: surface.Item,
-    listLabel: surface.listLabel,
-    listId: listId,
-    maxHeight: Math.max(0, menuHeight),
-    model: menuModel,
-    query: query,
-    hasScrollPadding: true,
-    onItemHover: onItemHover,
-    onItemLeave: onItemLeave,
-    onItemVisibilityChange: onItemVisibilityChange,
-    selectedItemIndex: selectedItemIndex
-  }))))));
+    "data-testid": "registered-type-ahead-menu",
+    hidden: !menuInteraction
+  }, menu)));
 };

package/dist/es2019/pm-plugins/commands/insert-type-ahead-item.js

@@ -283,19 +283,15 @@ const executeTypeAheadSelection = view => ({
   view.focus();
 };
 export const performTypeAheadSelection = view => ({
-  inputMethod,
-  selectionHandler,
   handler,
-  query
+  query,
+  selectItem
 }) => {
   executeTypeAheadSelection(view)({
     handler,
     mode: SelectItemMode.SELECTED,
     query,
     sourceListItem: [],
-    selectItem: (_state, insert) => selectionHandler({
-      insert,
-      source: inputMethod
-    })
+    selectItem: (_state, insert) => selectItem(insert)
   });
 };

package/dist/es2019/ui/ContentComponent.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
-import { getTypeAheadSurface } from './registered-menu/typeAheadSurfaces';
 import { TypeAheadMenu } from './TypeAheadMenu';
 export function ContentComponent({
   api,
@@ -32,7 +31,7 @@ export function ContentComponent({
   if (items === undefined || sections === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
     return null;
   }
-  if (getTypeAheadSurface(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id)) {
+  if (triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.registeredMenuKey) {
     return null;
   }
   return /*#__PURE__*/React.createElement(TypeAheadMenu, {

package/dist/es2019/ui/InputQuery.js

@@ -105,12 +105,16 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   onUndoRedo,
   editorView,
   items,
+  inputLabel,
+  menuInteraction,
   listId,
   optionCount,
   shouldKeepOpenOnRegisteredMenu
 }) => {
-  var _ref;
-  const resolvedOptionCount = (_ref = optionCount !== null && optionCount !== void 0 ? optionCount : items === null || items === void 0 ? void 0 : items.length) !== null && _ref !== void 0 ? _ref : 0;
+  var _ref, _ref2, _menuInteraction$opti, _ref3, _menuInteraction$list, _menuInteraction$expa, _ref4, _menuInteraction$labe;
+  const resolvedOptionCount = (_ref = (_ref2 = (_menuInteraction$opti = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.optionCount) !== null && _menuInteraction$opti !== void 0 ? _menuInteraction$opti : optionCount) !== null && _ref2 !== void 0 ? _ref2 : items === null || items === void 0 ? void 0 : items.length) !== null && _ref !== void 0 ? _ref : 0;
+  const resolvedActiveDescendantId = menuInteraction ? menuInteraction.activeDescendantId : activeDescendantId;
+  const resolvedListId = (_ref3 = (_menuInteraction$list = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.listId) !== null && _menuInteraction$list !== void 0 ? _menuInteraction$list : listId) !== null && _ref3 !== void 0 ? _ref3 : TYPE_AHEAD_DECORATION_ELEMENT_ID;
   const ref = useRef(document.createElement('span'));
   const inputRef = useRef(null);
   const [query, setQuery] = useState(null);
@@ -178,7 +182,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         // TODO: ED-14758 - Under the W3C specification, any keycode sent under IME would return a keycode 229
         // event.isComposing can't be used alone as this also included a virtual keyboard under a keyboardless device, therefore, it seems the best practice would be intercepting the event as below.
         // Some suggested the other workaround maybe listen on`keypress` instead of `keydown`
-        if (!event.isComposing && event.which !== 229 && event.keyCode !== 229) {
+        if (!menuInteraction && !event.isComposing && event.which !== 229 && event.keyCode !== 229) {
           if (selectedIndex === -1) {
             /**
              * TODO DTR-1401: (also see ED-17200) There are two options
@@ -197,12 +201,21 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         }
         break;
       case 'Tab':
+        if (menuInteraction) {
+          break;
+        }
         event.shiftKey ? selectPreviousItem() : selectNextItem();
         break;
       case 'ArrowDown':
+        if (menuInteraction) {
+          break;
+        }
         selectNextItem();
         break;
       case 'ArrowUp':
+        if (menuInteraction) {
+          break;
+        }
         selectPreviousItem();
         break;
     }
@@ -210,12 +223,12 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     if (onUndoRedo && undoRedoType && onUndoRedo(undoRedoType)) {
       stopDefault = true;
     }
-    if (isNavigationKey(event) || stopDefault) {
+    if (!menuInteraction && isNavigationKey(event) || stopDefault) {
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsEnabled]);
+  }, [onUndoRedo, menuInteraction, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsEnabled]);
   useLayoutEffect(() => {
     if (!ref.current) {
       return;
@@ -231,6 +244,21 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       onQueryFocus();
     };
     const keyDown = event => {
+      const isComposing = event.isComposing || event.which === 229 || event.keyCode === 229;
+      if (menuInteraction && isComposing) {
+        return;
+      }
+      if (menuInteraction && event.key === 'Tab') {
+        event.shiftKey ? menuInteraction.selectPrevious() : menuInteraction.selectNext();
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      if (menuInteraction !== null && menuInteraction !== void 0 && menuInteraction.onKeyDown(event)) {
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
       const key = keyNameNormalized(event);
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
         var _ref$current3;
@@ -277,11 +305,9 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       const {
         relatedTarget
       } = event;
-
-      // Given the user is changing the focus
-      // When the target is inside the TypeAhead Popup
-      // Then the popup should stay open
-      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`) || shouldKeepOpenOnRegisteredMenu && relatedTarget.closest('[data-registered-type-ahead-menu]'))) {
+      // Given the user is changing focus, keep the popup open when the target belongs to its menu.
+      const isInsideMenu = menuInteraction ? relatedTarget instanceof Node && menuInteraction.containsTarget(relatedTarget) : relatedTarget instanceof HTMLElement && (!!relatedTarget.closest(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`) || shouldKeepOpenOnRegisteredMenu && !!relatedTarget.closest('[data-registered-type-ahead-menu]'));
+      if (isInsideMenu) {
         return;
       }
 
@@ -404,7 +430,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled, shouldKeepOpenOnRegisteredMenu]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled, shouldKeepOpenOnRegisteredMenu, menuInteraction]);
   useLayoutEffect(() => {
     const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {
@@ -439,18 +465,20 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     onKeyUp: onKeyUp,
     tabIndex: -1,
     role: "combobox",
-    "aria-activedescendant": activeDescendantId,
-    "aria-controls": listId !== null && listId !== void 0 ? listId : TYPE_AHEAD_DECORATION_ELEMENT_ID,
+    "aria-activedescendant": resolvedActiveDescendantId,
+    "aria-controls": resolvedListId,
     "aria-autocomplete": "list",
-    "aria-expanded": resolvedOptionCount !== 0,
-    "aria-labelledby": assistiveHintID,
+    "aria-expanded": (_menuInteraction$expa = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.expanded) !== null && _menuInteraction$expa !== void 0 ? _menuInteraction$expa : resolvedOptionCount !== 0,
+    "aria-haspopup": menuInteraction ? 'listbox' : undefined,
+    "aria-label": menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.label,
+    "aria-labelledby": menuInteraction ? undefined : assistiveHintID,
     suppressContentEditableWarning: true,
     "data-query-prefix": triggerQueryPrefix,
     "data-place-holder": intl.formatMessage(typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? jsx("input", {
     ref: inputRef,
     type: "text",
-    "aria-label": intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl))
+    "aria-label": (_ref4 = (_menuInteraction$labe = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.label) !== null && _menuInteraction$labe !== void 0 ? _menuInteraction$labe : inputLabel) !== null && _ref4 !== void 0 ? _ref4 : intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl))
   }) : query), jsx("span", {
     id: assistiveHintID,
     style: {

package/dist/es2019/ui/WrapperTypeAhead.js

@@ -14,7 +14,6 @@ import { useLoadItems } from './hooks/use-load-items';
 import { useOnForceSelect } from './hooks/use-on-force-select';
 import { InputQuery } from './InputQuery';
 import { RegisteredTypeAheadMenu } from './registered-menu/RegisteredTypeAheadMenu';
-import { getTypeAheadSurface } from './registered-menu/typeAheadSurfaces';
 export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   triggerHandler,
   editorView,
@@ -40,8 +39,8 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   const [query, setQuery] = useState(reopenQuery || '');
   const queryRef = useRef(query);
   const editorViewRef = useRef(editorView);
-  const registeredSurface = getTypeAheadSurface(triggerHandler.id);
-  const items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api, intl, !registeredSurface);
+  const registeredMenuKey = triggerHandler.registeredMenuKey;
+  const items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api, intl, !registeredMenuKey);
   useEffect(() => {
     if (!closed && fg('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;
@@ -144,7 +143,7 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   if (!triggerHandler) {
     return null;
   }
-  if (registeredSurface) {
+  if (registeredMenuKey) {
     return /*#__PURE__*/React.createElement(RegisteredTypeAheadMenu, {
       anchorElement: anchorElement,
       api: api,
@@ -159,7 +158,7 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
       query: query,
       reopenQuery: reopenQuery,
       setQuery: setQuery,
-      surface: registeredSurface,
+      registeredMenuKey: registeredMenuKey,
       triggerHandler: triggerHandler
     });
   }