@atlaskit/editor-plugin-type-ahead 13.2.1 → 13.2.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 13.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.2.2
+
+### Patch Changes
+
+- [`4bc741a70d678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4bc741a70d678) -
+  Add the first registry-backed Quick Insert slice with Table
+- Updated dependencies
+
 ## 13.2.1
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertTypeAheadItem = void 0;
+exports.performTypeAheadSelection = exports.insertTypeAheadItem = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _steps = require("@atlaskit/adf-schema/steps");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
@@ -202,4 +202,99 @@ var insertTypeAheadItem = exports.insertTypeAheadItem = function insertTypeAhead
     view.dispatch(tr);
     view.focus();
   };
+};
+var executeTypeAheadSelection = function executeTypeAheadSelection(view) {
+  return function (_ref5) {
+    var selectItem = _ref5.selectItem,
+      handler = _ref5.handler,
+      mode = _ref5.mode,
+      query = _ref5.query,
+      sourceListItem = _ref5.sourceListItem;
+    var pluginState = (0, _utils.getPluginState)(view.state);
+    if (!pluginState) {
+      return;
+    }
+    var stats = (pluginState.stats || new _statsModifier.StatsModifier()).serialize();
+    var meta = {
+      mode: mode,
+      query: query,
+      stats: stats,
+      sourceListItem: sourceListItem
+    };
+    var tr = view.state.tr;
+    var trigger = handler.trigger;
+    var text = "".concat(trigger).concat(query);
+    if (mode === _typeAhead.SelectItemMode.SPACE) {
+      text = text.trim().concat(' ');
+    }
+    var selectedIndex = -1;
+    var wasInsertedBySpace = mode === _typeAhead.SelectItemMode.SPACE;
+    var textStartPosition = tr.selection.from;
+    var insertItem = function insertItem(newEditorState) {
+      var insertCallback = createInsertCallback({
+        editorState: newEditorState,
+        query: query,
+        mode: mode,
+        handler: handler,
+        wasInsertedBySpace: wasInsertedBySpace,
+        selectedIndex: selectedIndex,
+        textInserted: text,
+        textStartPosition: textStartPosition
+      });
+      var wasInsertCallbackCalled = false;
+      var insertCallbackProxy = new Proxy(insertCallback, {
+        apply: function apply(target, _thisContext, argumentsList) {
+          wasInsertCallbackCalled = true;
+          return target.apply(void 0, (0, _toConsumableArray2.default)(argumentsList));
+        }
+      });
+      var nextTr = selectItem(newEditorState, insertCallbackProxy, meta);
+      if (!wasInsertCallbackCalled && nextTr) {
+        (0, _prosemirrorHistory.closeHistory)(nextTr);
+        if (!nextTr.getMeta(_key.pluginKey)) {
+          (0, _closeTypeAhead.closeTypeAhead)(nextTr);
+        }
+      }
+      return nextTr || false;
+    };
+    var position = {
+      start: tr.selection.from,
+      end: tr.selection.from + text.length
+    };
+    tr.setMeta(_key.pluginKey, {
+      action: _actions.ACTIONS.INSERT_RAW_QUERY,
+      params: createDeleteRawTextCallback({
+        wasInsertedBySpace: wasInsertedBySpace,
+        selectedIndex: selectedIndex,
+        insertItem: insertItem,
+        position: position,
+        query: query,
+        trigger: trigger
+      })
+    });
+    tr.insertText(text);
+    (0, _prosemirrorHistory.closeHistory)(tr);
+    view.dispatch(tr);
+    view.focus();
+  };
+};
+var performTypeAheadSelection = exports.performTypeAheadSelection = function performTypeAheadSelection(view) {
+  return function (_ref6) {
+    var inputMethod = _ref6.inputMethod,
+      selectionHandler = _ref6.selectionHandler,
+      handler = _ref6.handler,
+      query = _ref6.query;
+    executeTypeAheadSelection(view)({
+      handler: handler,
+      mode: _typeAhead.SelectItemMode.SELECTED,
+      query: query,
+      sourceListItem: [],
+      selectItem: function selectItem(_state, insert) {
+        return selectionHandler({
+          insert: insert,
+          source: inputMethod
+        });
+      }
+    });
+  };
 };

package/dist/cjs/ui/ContentComponent.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ContentComponent = ContentComponent;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _typeAheadSurfaces = require("./registered-menu/typeAheadSurfaces");
 var _TypeAheadMenu = require("./TypeAheadMenu");
 function ContentComponent(_ref) {
   var api = _ref.api,
@@ -36,6 +37,9 @@ function ContentComponent(_ref) {
   if (items === undefined || sections === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
     return null;
   }
+  if ((0, _typeAheadSurfaces.getTypeAheadSurface)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id)) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu.TypeAheadMenu, {
     editorView: editorView,
     popupMountRef: popupMountRef

package/dist/cjs/ui/InputQuery.js

@@ -92,7 +92,9 @@ var getAriaLabel = function getAriaLabel(triggerPrefix, _intl) {
   }
 };
 var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
-  var triggerQueryPrefix = _ref.triggerQueryPrefix,
+  var _ref2;
+  var activeDescendantId = _ref.activeDescendantId,
+    triggerQueryPrefix = _ref.triggerQueryPrefix,
     cancel = _ref.cancel,
     onQueryChange = _ref.onQueryChange,
     onItemSelect = _ref.onItemSelect,
@@ -103,7 +105,11 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     onQueryFocus = _ref.onQueryFocus,
     onUndoRedo = _ref.onUndoRedo,
     editorView = _ref.editorView,
-    items = _ref.items;
+    items = _ref.items,
+    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 ref = (0, _react.useRef)(document.createElement('span'));
   var inputRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
@@ -146,9 +152,9 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
     var text = cleanedInputContent();
     var stopDefault = false;
-    var _ref2 = (0, _utils2.getPluginState)(editorView.state) || {},
-      selectedIndex = _ref2.selectedIndex,
-      removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
+    var _ref3 = (0, _utils2.getPluginState)(editorView.state) || {},
+      selectedIndex = _ref3.selectedIndex,
+      removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
     setInFocus(true);
     switch (key) {
       case ' ':
@@ -235,8 +241,8 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     }
     var browser = (0, _browser.getBrowserInfo)();
     var element = ref.current;
-    var _ref3 = (0, _utils2.getPluginState)(editorView.state) || {},
-      removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
+    var _ref4 = (0, _utils2.getPluginState)(editorView.state) || {},
+      removePrefixTriggerOnCancel = _ref4.removePrefixTriggerOnCancel;
     var onFocusIn = function onFocusIn(_event) {
       onQueryFocus();
     };
@@ -289,7 +295,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       // 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(_constants.TYPE_AHEAD_POPUP_CONTENT_CLASS))) {
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(_constants.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || shouldKeepOpenOnRegisteredMenu && relatedTarget.closest('[data-registered-type-ahead-menu]'))) {
         return;
       }
 
@@ -408,7 +414,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsEnabled, shouldKeepOpenOnRegisteredMenu]);
   (0, _react.useLayoutEffect)(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {
@@ -457,9 +463,10 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     tabIndex: -1,
     onInput: isSearchPlaceholderEnabled ? onInput : undefined,
     role: "combobox",
-    "aria-controls": _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,
+    "aria-activedescendant": activeDescendantId,
+    "aria-controls": listId !== null && listId !== void 0 ? listId : _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,
     "aria-autocomplete": "list",
-    "aria-expanded": items.length !== 0,
+    "aria-expanded": resolvedOptionCount !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
     "data-query-prefix": triggerQueryPrefix
@@ -477,10 +484,10 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       display: 'none'
     }
   }, intl.formatMessage(_typeAhead.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_ui.AssistiveText, {
-    assistiveText: items.length === 0 ? intl.formatMessage(_typeAhead.typeAheadListMessages.noSearchResultsLabel, {
-      itemsLength: items.length
+    assistiveText: resolvedOptionCount === 0 ? intl.formatMessage(_typeAhead.typeAheadListMessages.noSearchResultsLabel, {
+      itemsLength: resolvedOptionCount
     }) : '',
-    isInFocus: items.length === 0 || isInFocus,
+    isInFocus: resolvedOptionCount === 0 || isInFocus,
     id: _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID
   }));
 });

package/dist/cjs/ui/WrapperTypeAhead.js

@@ -22,6 +22,8 @@ var _useItemInsert3 = require("./hooks/use-item-insert");
 var _useLoadItems = require("./hooks/use-load-items");
 var _useOnForceSelect = require("./hooks/use-on-force-select");
 var _InputQuery = require("./InputQuery");
+var _RegisteredTypeAheadMenu = require("./registered-menu/RegisteredTypeAheadMenu");
+var _typeAheadSurfaces = require("./registered-menu/typeAheadSurfaces");
 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 WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.memo(function (_ref) {
   var triggerHandler = _ref.triggerHandler,
@@ -53,7 +55,8 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     setQuery = _useState4[1];
   var queryRef = (0, _react.useRef)(query);
   var editorViewRef = (0, _react.useRef)(editorView);
-  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query, showMoreOptionsButton, api, intl);
+  var registeredSurface = (0, _typeAheadSurfaces.getTypeAheadSurface)(triggerHandler.id);
+  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query, showMoreOptionsButton, api, intl, !registeredSurface);
   (0, _react.useEffect)(function () {
     if (!closed && (0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;
@@ -160,6 +163,25 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
   if (!triggerHandler) {
     return null;
   }
+  if (registeredSurface) {
+    return /*#__PURE__*/_react.default.createElement(_RegisteredTypeAheadMenu.RegisteredTypeAheadMenu, {
+      anchorElement: anchorElement,
+      api: api,
+      cancel: cancel,
+      editorView: editorView,
+      forceFocus: shouldFocusCursorInsideQuery,
+      onClose: closePopup,
+      onUndoRedo: onUndoRedo,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsMountPoint: popupsMountPoint,
+      popupsScrollableElement: popupsScrollableElement,
+      query: query,
+      reopenQuery: reopenQuery,
+      setQuery: setQuery,
+      surface: registeredSurface,
+      triggerHandler: triggerHandler
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_InputQuery.InputQuery, {
     triggerQueryPrefix: triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger,
     onQueryChange: setQuery,

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

@@ -15,6 +15,7 @@ var _updateListItems = require("../../pm-plugins/commands/update-list-items");
 var _buildSectionedResult2 = require("./build-sectioned-result");
 var EMPTY_LIST_ITEM = [];
 var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler, editorView, query, showViewMore, api, intl) {
+  var enabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
   var _useState = (0, _react.useState)(EMPTY_LIST_ITEM),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     items = _useState2[0],
@@ -24,6 +25,10 @@ var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler,
   var latestQueryRef = (0, _react.useRef)(query);
   latestQueryRef.current = query;
   (0, _react.useEffect)(function () {
+    if (!enabled) {
+      setItems(EMPTY_LIST_ITEM);
+      return;
+    }
     var requestQuery = query;
     var isStaleRequest = function isStaleRequest() {
       return latestQueryRef.current !== requestQuery;
@@ -128,7 +133,7 @@ var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler,
     // ignore because EditorView is mutable but we don't want to
     // call loadItems when it changes, only when the query changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggerHandler, query, intl]);
+  }, [triggerHandler, query, intl, enabled]);
   (0, _react.useEffect)(function () {
     return function () {
       componentIsMounted.current = false;

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PassThrough = void 0;
+var PassThrough = exports.PassThrough = function PassThrough(_ref) {
+  var children = _ref.children;
+  return children;
+};

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

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegisteredTypeAheadMenu = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _ui = require("@atlaskit/editor-common/ui");
+var _constants = require("@atlaskit/editor-shared-styles/constants");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _InputQuery = require("../InputQuery");
+var _buildTypeAheadMenuModel = require("./buildTypeAheadMenuModel");
+var _getTypeAheadItemId = require("./getTypeAheadItemId");
+var _PassThrough = require("./PassThrough");
+var _TypeAheadItemRow = require("./TypeAheadItemRow");
+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 POPUP_OFFSET = [0, 8];
+var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
+  var _model$root$component, _model$root;
+  var anchorElement = _ref.anchorElement,
+    api = _ref.api,
+    cancel = _ref.cancel,
+    editorView = _ref.editorView,
+    forceFocus = _ref.forceFocus,
+    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 intl = (0, _reactIntl.useIntl)();
+  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 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 : [];
+  }, [api, surface.root.key]);
+  var model = (0, _react.useMemo)(function () {
+    return (0, _buildTypeAheadMenuModel.buildTypeAheadMenuModel)(components, surface.root);
+  }, [components, surface.root]);
+  var itemKeySignature = model.items.map(function (_ref2) {
+    var key = _ref2.key;
+    return key;
+  }).join(',');
+  (0, _react.useLayoutEffect)(function () {
+    setSelectedItemIndex(model.items.length > 0 ? 0 : -1);
+  }, [itemKeySignature, model.items.length, query]);
+  var selectActiveItem = (0, _react.useCallback)(function (_mode) {
+    var _menuRef$current;
+    if (selectedItemIndex < 0) {
+      return;
+    }
+    (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || (_menuRef$current = _menuRef$current.ownerDocument.getElementById((0, _getTypeAheadItemId.getTypeAheadItemId)(listId, selectedItemIndex))) === null || _menuRef$current === void 0 || _menuRef$current.click();
+  }, [listId, selectedItemIndex]);
+  var selectNextItem = (0, _react.useCallback)(function () {
+    setSelectedItemIndex(function (currentIndex) {
+      if (model.items.length === 0) {
+        return -1;
+      }
+      return currentIndex < 0 || currentIndex === model.items.length - 1 ? 0 : currentIndex + 1;
+    });
+  }, [model.items.length]);
+  var selectPreviousItem = (0, _react.useCallback)(function () {
+    setSelectedItemIndex(function (currentIndex) {
+      if (model.items.length === 0) {
+        return -1;
+      }
+      return currentIndex <= 0 ? model.items.length - 1 : currentIndex - 1;
+    });
+  }, [model.items.length]);
+  var typeAheadContextValue = (0, _react.useMemo)(function () {
+    return {
+      api: api,
+      editorView: editorView,
+      inputMethod: surface.inputMethod,
+      onClose: onClose,
+      query: query,
+      triggerHandler: triggerHandler
+    };
+  }, [api, editorView, onClose, query, surface.inputMethod, triggerHandler]);
+  var noOp = (0, _react.useCallback)(function () {}, []);
+  var RootComponent = (_model$root$component = (_model$root = model.root) === null || _model$root === void 0 ? void 0 : _model$root.component) !== null && _model$root$component !== void 0 ? _model$root$component : _PassThrough.PassThrough;
+  var SurfaceProvider = surface.Provider;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputQuery.InputQuery, {
+    activeDescendantId: selectedItemIndex >= 0 ? (0, _getTypeAheadItemId.getTypeAheadItemId)(listId, selectedItemIndex) : undefined,
+    cancel: cancel,
+    editorView: editorView,
+    forceFocus: forceFocus,
+    listId: listId,
+    onItemSelect: selectActiveItem,
+    onQueryChange: setQuery,
+    onQueryFocus: noOp,
+    onUndoRedo: onUndoRedo,
+    optionCount: model.items.length,
+    reopenQuery: reopenQuery,
+    selectNextItem: selectNextItem,
+    selectPreviousItem: selectPreviousItem,
+    shouldKeepOpenOnRegisteredMenu: true,
+    triggerQueryPrefix: triggerHandler.trigger
+  }), /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    ariaLabel: null,
+    boundariesElement: popupsBoundariesElement,
+    fitWidth: 320,
+    mountTo: popupsMountPoint,
+    offset: POPUP_OFFSET,
+    preventOverflow: true,
+    scrollableElement: popupsScrollableElement,
+    target: anchorElement,
+    zIndex: _constants.akEditorFloatingDialogZIndex
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    ref: menuRef,
+    backgroundColor: "elevation.surface.overlay",
+    "data-registered-type-ahead-menu": "",
+    padding: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_TypeAheadProvider.TypeAheadProvider, {
+    value: typeAheadContextValue
+  }, /*#__PURE__*/_react.default.createElement(SurfaceProvider, null, /*#__PURE__*/_react.default.createElement(RootComponent, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    "aria-label": intl.formatMessage(surface.listLabel),
+    id: listId,
+    role: "listbox"
+  }, model.items.map(function (registration, itemIndex) {
+    return /*#__PURE__*/_react.default.createElement(_TypeAheadItemRow.TypeAheadItemRow, {
+      isSelected: selectedItemIndex === itemIndex,
+      itemIndex: itemIndex,
+      Item: surface.Item,
+      key: "".concat(registration.type, ":").concat(registration.key),
+      listId: listId,
+      onItemHover: setSelectedItemIndex,
+      registration: registration
+    });
+  }))))))));
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadContext = void 0;
+var _react = require("react");
+var TypeAheadContext = exports.TypeAheadContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadItemRow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _getTypeAheadItemId = require("./getTypeAheadItemId");
+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 TypeAheadItemRow = exports.TypeAheadItemRow = function TypeAheadItemRow(_ref) {
+  var isSelected = _ref.isSelected,
+    itemIndex = _ref.itemIndex,
+    Item = _ref.Item,
+    listId = _ref.listId,
+    onItemHover = _ref.onItemHover,
+    registration = _ref.registration;
+  var onMouseMove = (0, _react.useCallback)(function () {
+    return onItemHover(itemIndex);
+  }, [itemIndex, onItemHover]);
+  return /*#__PURE__*/_react.default.createElement(Item, {
+    id: (0, _getTypeAheadItemId.getTypeAheadItemId)(listId, itemIndex),
+    isSelected: isSelected,
+    onMouseMove: onMouseMove,
+    registration: registration
+  });
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadProvider = void 0;
+var _TypeAheadContext = require("./TypeAheadContext");
+var TypeAheadProvider = exports.TypeAheadProvider = _TypeAheadContext.TypeAheadContext.Provider;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildTypeAheadMenuModel = void 0;
+var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
+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) {
+  var _resolveSurface = (0, _surfaceRenderer.resolveSurface)(components, rootComponent),
+    root = _resolveSurface.root,
+    childrenMap = _resolveSurface.childrenMap,
+    topLevelChildren = _resolveSurface.topLevelChildren;
+  var items = [];
+  var _iterator = _createForOfIteratorHelper(topLevelChildren !== null && topLevelChildren !== void 0 ? topLevelChildren : []),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _childrenMap$get;
+      var section = _step.value;
+      if (section.type !== 'menu-section' || !(0, _surfaceRenderer.willComponentRender)(section, childrenMap)) {
+        continue;
+      }
+      var _iterator2 = _createForOfIteratorHelper((_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : []),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var child = _step2.value;
+          if (child.type === 'menu-item' && (0, _surfaceRenderer.willComponentRender)(child, childrenMap)) {
+            items.push(child);
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return {
+    items: items,
+    root: root
+  };
+};

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

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTypeAheadItemId = void 0;
+var getTypeAheadItemId = exports.getTypeAheadItemId = function getTypeAheadItemId(listId, itemIndex) {
+  return "".concat(listId, "--").concat(itemIndex);
+};

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadQuickInsertItem = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _provider = require("@atlaskit/editor-common/quick-insert/provider");
+var _useQuickInsertContext = require("@atlaskit/editor-common/quick-insert/use-quick-insert-context");
+var _PassThrough = require("../PassThrough");
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TypeAheadQuickInsertItem = exports.TypeAheadQuickInsertItem = function TypeAheadQuickInsertItem(_ref) {
+  var _registration$compone;
+  var id = _ref.id,
+    isSelected = _ref.isSelected,
+    onMouseMove = _ref.onMouseMove,
+    registration = _ref.registration;
+  var quickInsertContext = (0, _useQuickInsertContext.useQuickInsertContext)();
+  var Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : _PassThrough.PassThrough;
+  var contextValue = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, quickInsertContext), {}, {
+      item: {
+        id: id,
+        isSelected: isSelected,
+        onMouseMove: onMouseMove
+      }
+    });
+  }, [id, isSelected, onMouseMove, quickInsertContext]);
+  return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(Component, null, null));
+};