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

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

@@ -1,229 +1,141 @@
 /* RegisteredTypeAheadMenu.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./RegisteredTypeAheadMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
-import { useIntl } from 'react-intl';
+import React, { useCallback, useMemo, useState, useSyncExternalStore } from 'react';
+import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMode';
 import Popup from '@atlaskit/editor-common/Popup';
-import { getQuickInsertMenuModel, getQuickInsertMenuRows, selectQuickInsertCategoryItems } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
-import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
-import { useQuickInsertSearchAnalytics } from '@atlaskit/editor-common/quick-insert/use-search-analytics';
-import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
-import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
+import { RegisteredMenuContext } from '@atlaskit/editor-common/registered-menu/context';
+import { useMenuPopupSizing } from '@atlaskit/editor-common/registered-menu/popup-sizing';
+import { createRegisteredMenuSurfaceContext } from '@atlaskit/editor-common/registered-menu/surface-context';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
-import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+import { performTypeAheadSelection } from '../../pm-plugins/commands/insert-type-ahead-item';
 import { InputQuery } from '../InputQuery';
-import { getTypeAheadGlobalViewMoreId } from './getTypeAheadGlobalViewMoreId';
-import { getTypeAheadItemId } from './getTypeAheadItemId';
-import { TypeAheadMenuRenderer } from './TypeAheadMenuRenderer';
-import { TypeAheadProvider } from './TypeAheadProvider';
-const styles = {
-  menu: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _16qs130s _1q51idpf _85i5idpf _1bsbnklw"
-};
 const DEFAULT_MENU_MAX_HEIGHT = 480;
-const MENU_WIDTH = 320;
 const POPUP_OFFSET = [0, 8];
+const styles = {
+  popup: "_19itglyw _2rko1mok _1reo15vq _18m915vq _bfhk1bhr _r06hglyw _vchhusvi _1q51idpf _85i5idpf _16qs130s _1bsbnklw"
+};
 const EMPTY_COMPONENTS = [];
 const subscribeToNothing = () => () => {};
-export const RegisteredTypeAheadMenu = ({
-  anchorElement,
-  api,
-  cancel,
-  editorView,
-  forceFocus,
-  maxHeight = DEFAULT_MENU_MAX_HEIGHT,
-  onClose,
-  onUndoRedo,
-  popupsBoundariesElement,
-  popupsMountPoint,
-  popupsScrollableElement,
-  query,
-  reopenQuery,
-  setQuery,
-  surface,
-  triggerHandler
-}) => {
-  var _api$uiControlRegistr2, _api$uiControlRegistr3, _api$analytics;
-  const menuHeight = useMenuPopupSizing({
-    target: anchorElement,
-    boundariesElement: popupsBoundariesElement,
-    scrollableElement: popupsScrollableElement,
-    maxHeight,
+const noOp = () => {};
+export const RegisteredTypeAheadMenu = props => {
+  var _props$maxHeight, _api$uiControlRegistr2, _api$uiControlRegistr3, _root$isHidden;
+  const {
+    api,
+    registeredMenuKey,
+    query,
+    editorView,
+    onClose,
+    triggerHandler,
+    popupsMountPoint
+  } = props;
+  const rootComponent = useMemo(() => ({
+    key: registeredMenuKey,
+    type: 'menu'
+  }), [registeredMenuKey]);
+  const [menuInteraction, setMenuInteraction] = useState();
+  const registerInteraction = useCallback(interaction => {
+    setMenuInteraction(interaction);
+    return () => setMenuInteraction(current => current === interaction ? undefined : current);
+  }, []);
+  const maxHeight = 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]
   });
-  const {
-    formatMessage
-  } = useIntl();
-  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 selectedItemIndexRef = useRef(selectedItemIndex);
+  const cancelMenu = useCallback(params => {
+    var _menuInteraction$onCl;
+    menuInteraction === null || menuInteraction === void 0 ? void 0 : (_menuInteraction$onCl = menuInteraction.onClose) === null || _menuInteraction$onCl === void 0 ? void 0 : _menuInteraction$onCl.call(menuInteraction);
+    props.cancel(params);
+  }, [menuInteraction, props.cancel]);
+  const [menuOpenId] = useState(() => Symbol('type-ahead-menu-open'));
+  const surfaceContext = useMemo(() => createRegisteredMenuSurfaceContext({
+    menuOpenId,
+    surface: 'typeahead'
+  }), [menuOpenId]);
   const getComponents = useCallback(() => {
     var _api$uiControlRegistr;
-    const components = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(surface.root.key);
+    const components = api === null || api === void 0 ? 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]);
   const components = useSyncExternalStore((_api$uiControlRegistr2 = api === null || api === void 0 ? 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);
-  const hasSectionOverflowItems = useMemo(() => components.some(({
-    key
-  }) => isSectionOverflowItemKey(key)), [components]);
-  const menuModel = useMemo(() => getQuickInsertMenuModel({
-    components,
-    formatMessage,
-    getItemRank: triggerHandler.getRegisteredItemRank,
-    query,
-    rootComponent: surface.root,
-    selectCategoryItems: hasSectionOverflowItems ? selectQuickInsertCategoryItems : undefined,
-    surfaceContext
-  }), [components, formatMessage, hasSectionOverflowItems, query, surfaceContext, surface.root, triggerHandler.getRegisteredItemRank]);
-  const rows = useMemo(() => getQuickInsertMenuRows(menuModel), [menuModel]);
-  const searchResultCount = useMemo(() => menuModel.sections.reduce((count, section) => count + section.filter(({
+  const root = useMemo(() => components.find(({
     key,
-    type
-  }) => type === 'menu-item' && !isSectionOverflowItemKey(key)).length, 0), [menuModel.sections]);
-  const flushSearchAnalytics = useQuickInsertSearchAnalytics({
-    fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent,
-    query,
-    resultCount: searchResultCount,
-    surface: 'typeahead'
-  });
-  const closeMenu = useCallback(() => {
-    flushSearchAnalytics();
+    type,
+    parents
+  }) => key === rootComponent.key && type === rootComponent.type && !(parents !== null && parents !== void 0 && parents.length)), [components, rootComponent]);
+  const Root = root !== null && root !== void 0 && (_root$isHidden = root.isHidden) !== null && _root$isHidden !== void 0 && _root$isHidden.call(root, {
+    surfaceContext
+  }) ? undefined : root === null || root === void 0 ? void 0 : root.component;
+  // Interaction updates should not recreate the registered component's own props.
+  const menu = useMemo(() => Root && /*#__PURE__*/React.createElement(Root, null, null), [Root]);
+  const {
+    isOffline
+  } = useSharedPluginStateWithSelector(api, ['connectivity'], ({
+    connectivityState
+  }) => ({
+    isOffline: isOfflineMode(connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode)
+  }));
+  const select = useCallback(selectItem => {
     onClose();
-  }, [flushSearchAnalytics, onClose]);
-  const [previewActivation, setPreviewActivation] = useState();
-  const activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.menuModel) === menuModel ? previewActivation.itemKey : undefined;
-  const selectableRowIndexes = useMemo(() => rows.flatMap((registration, rowIndex) => registration.type === 'menu-item' ? [rowIndex] : []), [rows]);
-  const selectableRowKeys = selectableRowIndexes.map(index => {
-    var _rows$index;
-    return (_rows$index = rows[index]) === null || _rows$index === void 0 ? void 0 : _rows$index.key;
-  }).join(',');
-  const selectableItemCount = selectableRowIndexes.length + (menuModel.footer ? 1 : 0);
-  useLayoutEffect(() => {
-    const initialItemIndex = selectableItemCount > 0 ? 0 : -1;
-    selectedItemIndexRef.current = initialItemIndex;
-    setSelectedItemIndex(initialItemIndex);
-  }, [query, selectableItemCount, selectableRowKeys]);
-  useLayoutEffect(() => {
-    setPreviewActivation(undefined);
-  }, [menuModel, query]);
-  const selectActiveItem = useCallback(_mode => {
-    const rowIndex = selectableRowIndexes[selectedItemIndex];
-    const selectedId = rowIndex !== undefined ? getTypeAheadItemId(listId, rowIndex) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? getTypeAheadGlobalViewMoreId(listId) : undefined;
-    if (selectedId) {
-      var _menuRef$current, _menuRef$current$owne;
-      (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$owne = _menuRef$current.ownerDocument.getElementById(selectedId)) === null || _menuRef$current$owne === void 0 ? void 0 : _menuRef$current$owne.click();
-    }
-  }, [listId, menuModel.footer, selectableRowIndexes, selectedItemIndex]);
-  const setKeyboardPreview = useCallback(itemIndex => {
-    const rowIndex = selectableRowIndexes[itemIndex];
-    const registration = rowIndex === undefined ? undefined : rows[rowIndex];
-    setPreviewActivation((registration === null || registration === void 0 ? void 0 : registration.type) === 'menu-item' ? {
-      itemKey: registration.key,
-      menuModel,
-      source: 'keyboard'
-    } : undefined);
-  }, [menuModel, rows, selectableRowIndexes]);
-  const selectNextItem = useCallback(() => {
-    const currentIndex = selectedItemIndexRef.current;
-    const nextIndex = selectableItemCount === 0 ? -1 : currentIndex < 0 || currentIndex === selectableItemCount - 1 ? 0 : currentIndex + 1;
-    selectedItemIndexRef.current = nextIndex;
-    setSelectedItemIndex(nextIndex);
-    setKeyboardPreview(nextIndex);
-  }, [selectableItemCount, setKeyboardPreview]);
-  const selectPreviousItem = useCallback(() => {
-    const currentIndex = selectedItemIndexRef.current;
-    const previousIndex = selectableItemCount === 0 ? -1 : currentIndex <= 0 ? selectableItemCount - 1 : currentIndex - 1;
-    selectedItemIndexRef.current = previousIndex;
-    setSelectedItemIndex(previousIndex);
-    setKeyboardPreview(previousIndex);
-  }, [selectableItemCount, setKeyboardPreview]);
-  const onItemHover = useCallback((itemIndex, itemKey) => {
-    selectedItemIndexRef.current = itemIndex;
-    setSelectedItemIndex(itemIndex);
-    setPreviewActivation(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,
-        menuModel,
-        source: 'pointer'
-      } : undefined;
-    });
-  }, [menuModel]);
-  const onItemLeave = useCallback(itemKey => {
-    setPreviewActivation(current => (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current);
-  }, []);
-  const onItemVisibilityChange = useCallback((itemKey, isVisible) => {
-    if (!isVisible) {
-      setPreviewActivation(current => (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current);
-    }
-  }, []);
-  const typeAheadContextValue = useMemo(() => ({
-    activePreviewItemKey,
-    api,
+    queueMicrotask(() => performTypeAheadSelection(editorView)({
+      handler: triggerHandler,
+      query,
+      selectItem
+    }));
+  }, [editorView, onClose, query, triggerHandler]);
+  const registeredMenu = useMemo(() => ({
+    components,
+    onClose,
+    maxHeight,
+    registerInteraction,
     editorView,
-    inputMethod: surface.inputMethod,
-    menuOpenId: typeAheadSurfaceContext.menuOpenId,
-    onClose: closeMenu,
-    popupsMountPoint,
+    getItemRank: triggerHandler.getRegisteredItemRank,
+    isOffline,
+    menuOpenId,
+    portalMountPoint: popupsMountPoint,
+    rootComponent,
     query,
-    surfaceContext,
-    triggerHandler
-  }), [activePreviewItemKey, api, editorView, closeMenu, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
-  const noOp = useCallback(() => {}, []);
-  const SurfaceProvider = surface.Provider;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputQuery, {
-    activeDescendantId: selectableRowIndexes[selectedItemIndex] !== undefined ? getTypeAheadItemId(listId, selectableRowIndexes[selectedItemIndex]) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? getTypeAheadGlobalViewMoreId(listId) : undefined,
-    cancel: cancel,
+    select,
+    surfaceContext
+  }), [onClose, maxHeight, registerInteraction, components, editorView, triggerHandler.getRegisteredItemRank, isOffline, menuOpenId, popupsMountPoint, rootComponent, query, select, surfaceContext]);
+  return /*#__PURE__*/React.createElement(RegisteredMenuContext.Provider, {
+    value: registeredMenu
+  }, /*#__PURE__*/React.createElement(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.createElement(Popup, {
-    ariaLabel: null,
-    boundariesElement: popupsBoundariesElement,
-    fitHeight: menuHeight,
-    fitWidth: MENU_WIDTH,
+  }), Root && /*#__PURE__*/React.createElement(Popup, {
+    zIndex: 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: akEditorFloatingDialogZIndex
+    ariaLabel: null,
+    preventOverflow: true
   }, /*#__PURE__*/React.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: 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: ax([styles.popup, "fabric-editor-typeahead"]),
     "data-registered-type-ahead-menu": "",
-    "data-testid": "registered-type-ahead-menu"
-  }, /*#__PURE__*/React.createElement(TypeAheadProvider, {
-    value: typeAheadContextValue
-  }, /*#__PURE__*/React.createElement(SurfaceProvider, null, /*#__PURE__*/React.createElement(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/esm/pm-plugins/commands/insert-type-ahead-item.js

@@ -273,20 +273,16 @@ var executeTypeAheadSelection = function executeTypeAheadSelection(view) {
 };
 export var performTypeAheadSelection = function performTypeAheadSelection(view) {
   return function (_ref6) {
-    var inputMethod = _ref6.inputMethod,
-      selectionHandler = _ref6.selectionHandler,
-      handler = _ref6.handler,
-      query = _ref6.query;
+    var handler = _ref6.handler,
+      query = _ref6.query,
+      _selectItem = _ref6.selectItem;
     executeTypeAheadSelection(view)({
       handler: handler,
       mode: SelectItemMode.SELECTED,
       query: query,
       sourceListItem: [],
       selectItem: function selectItem(_state, insert) {
-        return selectionHandler({
-          insert: insert,
-          source: inputMethod
-        });
+        return _selectItem(insert);
       }
     });
   };

package/dist/esm/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(_ref) {
   var api = _ref.api,
@@ -30,7 +29,7 @@ export function ContentComponent(_ref) {
   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/esm/ui/InputQuery.js

@@ -93,7 +93,7 @@ export var scheduleFocusAfterAttachment = function scheduleFocusAfterAttachment(
   };
 };
 export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
-  var _ref2;
+  var _ref2, _ref3, _menuInteraction$opti, _ref4, _menuInteraction$list, _menuInteraction$expa, _ref7, _menuInteraction$labe;
   var activeDescendantId = _ref.activeDescendantId,
     triggerQueryPrefix = _ref.triggerQueryPrefix,
     cancel = _ref.cancel,
@@ -107,10 +107,14 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     onUndoRedo = _ref.onUndoRedo,
     editorView = _ref.editorView,
     items = _ref.items,
+    inputLabel = _ref.inputLabel,
+    menuInteraction = _ref.menuInteraction,
     listId = _ref.listId,
     optionCount = _ref.optionCount,
     shouldKeepOpenOnRegisteredMenu = _ref.shouldKeepOpenOnRegisteredMenu;
-  var resolvedOptionCount = (_ref2 = optionCount !== null && optionCount !== void 0 ? optionCount : items === null || items === void 0 ? void 0 : items.length) !== null && _ref2 !== void 0 ? _ref2 : 0;
+  var resolvedOptionCount = (_ref2 = (_ref3 = (_menuInteraction$opti = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.optionCount) !== null && _menuInteraction$opti !== void 0 ? _menuInteraction$opti : optionCount) !== null && _ref3 !== void 0 ? _ref3 : items === null || items === void 0 ? void 0 : items.length) !== null && _ref2 !== void 0 ? _ref2 : 0;
+  var resolvedActiveDescendantId = menuInteraction ? menuInteraction.activeDescendantId : activeDescendantId;
+  var resolvedListId = (_ref4 = (_menuInteraction$list = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.listId) !== null && _menuInteraction$list !== void 0 ? _menuInteraction$list : listId) !== null && _ref4 !== void 0 ? _ref4 : TYPE_AHEAD_DECORATION_ELEMENT_ID;
   var ref = useRef(document.createElement('span'));
   var inputRef = useRef(null);
   var _useState = useState(null),
@@ -138,9 +142,9 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
     var text = cleanedInputContent();
     var stopDefault = false;
-    var _ref3 = getPluginState(editorView.state) || {},
-      selectedIndex = _ref3.selectedIndex,
-      removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
+    var _ref5 = getPluginState(editorView.state) || {},
+      selectedIndex = _ref5.selectedIndex,
+      removePrefixTriggerOnCancel = _ref5.removePrefixTriggerOnCancel;
     setInFocus(true);
     switch (key) {
       case ' ':
@@ -183,7 +187,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         // 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
@@ -202,12 +206,21 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         }
         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;
     }
@@ -215,24 +228,39 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     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(function () {
     if (!ref.current) {
       return;
     }
     var browser = getBrowserInfo();
     var element = ref.current;
-    var _ref4 = getPluginState(editorView.state) || {},
-      removePrefixTriggerOnCancel = _ref4.removePrefixTriggerOnCancel;
+    var _ref6 = getPluginState(editorView.state) || {},
+      removePrefixTriggerOnCancel = _ref6.removePrefixTriggerOnCancel;
     var onFocusIn = function onFocusIn(_event) {
       onQueryFocus();
     };
     var keyDown = function keyDown(event) {
+      var 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;
+      }
       var key = keyNameNormalized(event);
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
         var _ref$current3;
@@ -277,11 +305,9 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var onFocusOut = function onFocusOut(event) {
       var _window$getSelection;
       var relatedTarget = event.relatedTarget;
-
-      // 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(".".concat(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.
+      var isInsideMenu = menuInteraction ? relatedTarget instanceof Node && menuInteraction.containsTarget(relatedTarget) : relatedTarget instanceof HTMLElement && (!!relatedTarget.closest(".".concat(TYPE_AHEAD_POPUP_CONTENT_CLASS)) || shouldKeepOpenOnRegisteredMenu && !!relatedTarget.closest('[data-registered-type-ahead-menu]'));
+      if (isInsideMenu) {
         return;
       }
 
@@ -400,7 +426,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled, shouldKeepOpenOnRegisteredMenu]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled, shouldKeepOpenOnRegisteredMenu, menuInteraction]);
   useLayoutEffect(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {
@@ -435,18 +461,20 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     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": (_ref7 = (_menuInteraction$labe = menuInteraction === null || menuInteraction === void 0 ? void 0 : menuInteraction.label) !== null && _menuInteraction$labe !== void 0 ? _menuInteraction$labe : inputLabel) !== null && _ref7 !== void 0 ? _ref7 : intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl))
   }) : query), jsx("span", {
     id: assistiveHintID,
     style: {

package/dist/esm/ui/WrapperTypeAhead.js

@@ -15,7 +15,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 var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
   var triggerHandler = _ref.triggerHandler,
     editorView = _ref.editorView,
@@ -46,8 +45,8 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     setQuery = _useState4[1];
   var queryRef = useRef(query);
   var editorViewRef = useRef(editorView);
-  var registeredSurface = getTypeAheadSurface(triggerHandler.id);
-  var items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api, intl, !registeredSurface);
+  var registeredMenuKey = triggerHandler.registeredMenuKey;
+  var items = useLoadItems(triggerHandler, editorView, query, showMoreOptionsButton, api, intl, !registeredMenuKey);
   useEffect(function () {
     if (!closed && fg('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;
@@ -154,7 +153,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
   if (!triggerHandler) {
     return null;
   }
-  if (registeredSurface) {
+  if (registeredMenuKey) {
     return /*#__PURE__*/React.createElement(RegisteredTypeAheadMenu, {
       anchorElement: anchorElement,
       api: api,
@@ -169,7 +168,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
       query: query,
       reopenQuery: reopenQuery,
       setQuery: setQuery,
-      surface: registeredSurface,
+      registeredMenuKey: registeredMenuKey,
       triggerHandler: triggerHandler
     });
   }