@atlaskit/editor-plugin-quick-insert 30.0.2 → 30.0.4

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

@@ -29,6 +29,7 @@ export const TypeAheadQuickInsertMenu = ({
   onRenderedItemsChange,
   query = '',
   selectedItemIndex,
+  selectionSource,
   hasScrollPadding = false
 }) => {
   const footerItemIndex = itemCount - 1;
@@ -53,6 +54,7 @@ export const TypeAheadQuickInsertMenu = ({
     getItemId: getItemId,
     activeItemKey: activeItemKey,
     selectedItemIndex: selectedItemIndex,
+    selectionSource: selectionSource,
     scrollResetKey: query,
     hasScrollPadding: hasScrollPadding,
     scrollTo: "top-on-reset",

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

@@ -1,4 +1,4 @@
-import { ASK_ROVO_MENU_ITEM, MENU, SEARCH_RESULTS_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
+import { ASK_ROVO_MENU_ITEM, MENU, RECOMMENDED_SECTION, SEARCH_RESULTS_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
 import { applyRegisteredItemRanks } from '@atlaskit/editor-common/registered-menu/item-rank';
 import { isMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-is-menu-footer-section-key';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
@@ -30,38 +30,81 @@ const getSearchResults = matches => {
   const topMatchIdentities = new Set(topMatches.map(({
     identity
   }) => identity));
-  const tailMatches = matches.filter(({
+  return [...topMatches, ...matches.filter(({
     identity
-  }) => !topMatchIdentities.has(identity));
-  return [...topMatches, ...tailMatches].map(({
-    item
-  }) => item);
+  }) => !topMatchIdentities.has(identity))];
 };
-const getRenderedMenuItems = (section, childrenMap, surfaceContext) => {
-  var _childrenMap$get;
-  return ((_childrenMap$get = childrenMap.get(getComponentIdentity(section))) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : []).filter(child => child.type === 'menu-item' && willComponentRender(child, childrenMap, surfaceContext));
+
+/** Recommended uses resolved items rather than registered children. */
+const readMenuSections = ({
+  childrenMap,
+  recommendedItems = [],
+  sections,
+  surfaceContext
+}) => {
+  const renderedSections = [];
+  for (const section of sections) {
+    var _section$isHidden, _section$isHidden2, _childrenMap$get;
+    if (section.type !== 'menu-section') {
+      continue;
+    }
+    if (surfaceContext ? (_section$isHidden = section.isHidden) === null || _section$isHidden === void 0 ? void 0 : _section$isHidden.call(section, {
+      surfaceContext
+    }) : (_section$isHidden2 = section.isHidden) === null || _section$isHidden2 === void 0 ? void 0 : _section$isHidden2.call(section)) {
+      continue;
+    }
+    if (section.key === RECOMMENDED_SECTION.key) {
+      renderedSections.push({
+        section,
+        items: recommendedItems
+      });
+      continue;
+    }
+    const children = (_childrenMap$get = childrenMap.get(getComponentIdentity(section))) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : [];
+    const items = [];
+    let viewMoreItem;
+    for (const child of children) {
+      if (child.type !== 'menu-item' || !willComponentRender(child, childrenMap, surfaceContext)) {
+        continue;
+      }
+      if (isSectionOverflowItemKey(child.key)) {
+        viewMoreItem ??= child;
+      } else {
+        items.push(child);
+      }
+    }
+    // Empty registrations are visible leaves; containers need a visible child.
+    if (children.length === 0 || items.length > 0 || viewMoreItem) {
+      renderedSections.push({
+        section,
+        items,
+        viewMoreItem
+      });
+    }
+  }
+  return renderedSections;
+};
+const getOwnerSectionKey = (item, isRecommendedItem) => {
+  var _item$parents$;
+  return isRecommendedItem(item) ? RECOMMENDED_SECTION.key : (_item$parents$ = item.parents[0]) === null || _item$parents$ === void 0 ? void 0 : _item$parents$.key;
 };
 const buildBrowseSections = ({
-  childrenMap,
   contentSections,
-  selectCategoryItems,
-  surfaceContext
+  isRecommendedItem,
+  selectCategoryItems
 }) => {
   const sections = [];
-  for (const section of contentSections) {
-    const children = getRenderedMenuItems(section, childrenMap, surfaceContext);
-    const overflowItems = children.filter(child => isSectionOverflowItemKey(child.key));
-    const viewMoreItem = overflowItems[overflowItems.length - 1];
-    const items = children.filter(child => !isSectionOverflowItemKey(child.key));
-    if (items.length === 0) {
+  for (const {
+    items,
+    section,
+    viewMoreItem
+  } of contentSections) {
+    const ownedItems = items.filter(item => getOwnerSectionKey(item, isRecommendedItem) === section.key);
+    if (ownedItems.length === 0) {
       continue;
     }
-    const selectedItems = viewMoreItem !== undefined && selectCategoryItems !== undefined ? selectCategoryItems(items) : items;
-    if (selectedItems.length < items.length && viewMoreItem !== undefined) {
-      sections.push([section, ...selectedItems, viewMoreItem]);
-    } else {
-      sections.push([section, ...selectedItems]);
-    }
+    const selectedItems = viewMoreItem && selectCategoryItems ? selectCategoryItems(ownedItems) : ownedItems;
+    sections.push([section, ...selectedItems, ...(viewMoreItem && selectedItems.length < ownedItems.length ? [viewMoreItem] : [])]);
   }
   return {
     fallbackItems: [],
@@ -69,38 +112,42 @@ const buildBrowseSections = ({
   };
 };
 const buildSearchSections = ({
-  childrenMap,
   components,
   contentSections,
   formatMessage,
+  isRecommendedItem,
   query,
-  root,
-  surfaceContext
+  root
 }) => {
-  const matches = new Map();
   const sourceIndexByComponent = new Map(components.map((component, index) => [component, index]));
-  for (const section of contentSections) {
-    for (const item of getRenderedMenuItems(section, childrenMap, surfaceContext)) {
+  const matches = new Map();
+  let fallbackItem;
+  for (const {
+    items,
+    section
+  } of contentSections) {
+    const sectionRank = getParentRank(section, root.key);
+    for (const item of items) {
       var _item$match, _match$score, _sourceIndexByCompone;
-      if (isSectionOverflowItemKey(item.key)) {
-        continue;
+      if (item.key === ASK_ROVO_MENU_ITEM.key) {
+        fallbackItem ??= item;
       }
       const match = (_item$match = item.match) === null || _item$match === void 0 ? void 0 : _item$match.call(item, {
         formatMessage,
         itemKey: item.key,
         query
       });
-      if (item.match && match === null) {
+      if (item.match && match === null || getOwnerSectionKey(item, isRecommendedItem) !== section.key) {
         continue;
       }
       const candidate = {
-        identity: `${item.type}:${item.key}`,
+        identity: getComponentIdentity(item),
         item,
         itemRank: getParentRank(item, section.key),
         priorityGroup: (match === null || match === void 0 ? void 0 : match.priorityGroup) !== undefined && Number.isFinite(match.priorityGroup) ? match.priorityGroup : undefined,
         score: Math.min(1, Math.max(0, (_match$score = match === null || match === void 0 ? void 0 : match.score) !== null && _match$score !== void 0 ? _match$score : 0)),
-        sourceIndex: (_sourceIndexByCompone = sourceIndexByComponent.get(item)) !== null && _sourceIndexByCompone !== void 0 ? _sourceIndexByCompone : Number.MAX_SAFE_INTEGER,
-        sectionRank: getParentRank(section, root.key)
+        sectionRank,
+        sourceIndex: (_sourceIndexByCompone = sourceIndexByComponent.get(item)) !== null && _sourceIndexByCompone !== void 0 ? _sourceIndexByCompone : Number.MAX_SAFE_INTEGER
       };
       const existing = matches.get(candidate.identity);
       if (!existing || compareMatchedItems(candidate, existing) < 0) {
@@ -117,23 +164,26 @@ const buildSearchSections = ({
   }) => priorityGroup === undefined);
   const orderedSearchResults = [...prioritizedMatches.sort(comparePrioritizedSearchResults).map(({
     item
-  }) => item), ...getSearchResults(unprioritizedMatches)];
+  }) => item), ...getSearchResults(unprioritizedMatches).map(({
+    item
+  }) => item)];
   if (orderedSearchResults.length > 0) {
     return {
       fallbackItems: [],
       sections: [[SEARCH_RESULTS_HEADING, ...orderedSearchResults]]
     };
   }
-  const fallbackItem = contentSections.flatMap(section => {
-    var _childrenMap$get2;
-    return (_childrenMap$get2 = childrenMap.get(getComponentIdentity(section))) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : [];
-  }).find(component => component.type === ASK_ROVO_MENU_ITEM.type && component.key === ASK_ROVO_MENU_ITEM.key && willComponentRender(component, childrenMap, surfaceContext));
   return {
     fallbackItems: fallbackItem ? [fallbackItem] : [],
     sections: []
   };
 };
 
+/**
+ * Resolves the Recommended items for a browse. Receives the unranked components so a resolver
+ * can look recommendations up by their registered keys.
+ */
+
 /**
  * Builds the registered quick-insert menu model. An empty query browses every
  * category; a non-empty query returns ranked matches. The footer is shared by both.
@@ -142,18 +192,40 @@ export const getQuickInsertMenuModel = ({
   components,
   formatMessage,
   getItemRank,
+  getRecommendedItems,
   query,
   rootComponent,
   selectCategoryItems,
   surfaceContext
 }) => {
+  var _root$isHidden, _root$isHidden2, _contentSections$find;
   const rankedComponents = applyRegisteredItemRanks(components, getItemRank);
   const {
     childrenMap,
     root,
     topLevelChildren = []
   } = resolveSurface(rankedComponents, rootComponent);
-  if (!root || !willComponentRender(root, childrenMap, surfaceContext)) {
+  if (!root || (surfaceContext ? (_root$isHidden = root.isHidden) === null || _root$isHidden === void 0 ? void 0 : _root$isHidden.call(root, {
+    surfaceContext
+  }) : (_root$isHidden2 = root.isHidden) === null || _root$isHidden2 === void 0 ? void 0 : _root$isHidden2.call(root))) {
+    return {
+      fallbackItems: [],
+      footer: undefined,
+      root: undefined,
+      sections: []
+    };
+  }
+  const isBrowse = query === '';
+  const renderedSections = readMenuSections({
+    sections: topLevelChildren,
+    childrenMap,
+    surfaceContext,
+    recommendedItems: isBrowse ? getRecommendedItems === null || getRecommendedItems === void 0 ? void 0 : getRecommendedItems({
+      components,
+      surfaceContext
+    }) : undefined
+  });
+  if (topLevelChildren.length > 0 && renderedSections.length === 0) {
     return {
       fallbackItems: [],
       footer: undefined,
@@ -161,28 +233,29 @@ export const getQuickInsertMenuModel = ({
       sections: []
     };
   }
-  const renderedSections = topLevelChildren.filter(section => section.type === 'menu-section' && willComponentRender(section, childrenMap, surfaceContext));
   const footerSection = renderedSections.find(({
-    key
-  }) => isMenuFooterSectionKey(key));
+    section
+  }) => isMenuFooterSectionKey(section.key));
   const contentSections = renderedSections.filter(({
-    key
-  }) => !isMenuFooterSectionKey(key));
-  const content = query === '' ? buildBrowseSections({
-    childrenMap,
+    section
+  }) => !isMenuFooterSectionKey(section.key) && (isBrowse || section.key !== RECOMMENDED_SECTION.key));
+  const recommendedIdentities = new Set((_contentSections$find = contentSections.find(({
+    section
+  }) => section.key === RECOMMENDED_SECTION.key)) === null || _contentSections$find === void 0 ? void 0 : _contentSections$find.items.map(getComponentIdentity));
+  const isRecommendedItem = item => recommendedIdentities.has(getComponentIdentity(item));
+  const content = isBrowse ? buildBrowseSections({
     contentSections,
-    selectCategoryItems,
-    surfaceContext
+    isRecommendedItem,
+    selectCategoryItems
   }) : buildSearchSections({
-    childrenMap,
     components: rankedComponents,
     contentSections,
     formatMessage,
+    isRecommendedItem,
     query,
-    root,
-    surfaceContext
+    root
   });
-  const footer = footerSection ? getRenderedMenuItems(footerSection, childrenMap, surfaceContext)[0] : undefined;
+  const footer = footerSection === null || footerSection === void 0 ? void 0 : footerSection.items[0];
   return {
     ...content,
     footer,

package/dist/esm/quickInsertPlugin.js

@@ -23,6 +23,7 @@ import { pluginKey } from './pm-plugins/plugin-key';
 import { getBlockControlQuickInsertComponents } from './ui/block-control-quick-insert';
 import { getLegacyCompatibleComponents } from './ui/getLegacyCompatibleComponents';
 import { getQuickInsertComponents } from './ui/getQuickInsertComponents';
+import { createRecommendedItemsResolver } from './ui/getRecommendedComponents';
 import ModalElementBrowser from './ui/ModalElementBrowser';
 import { RegistryElementBrowserContainer } from './ui/RegistryElementBrowser';
 import { getQuickInsertSuggestions, withLayoutQuickInsertPrioritySorting } from './ui/search';
@@ -36,6 +37,10 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
   };
   var typeAheadPrioritySortingFn = withLayoutQuickInsertPrioritySorting(options === null || options === void 0 ? void 0 : options.prioritySortingFn);
   var getItemRank = createQuickInsertRankResolver(options === null || options === void 0 ? void 0 : options.getItemRank);
+  var getRecommendedItems = createRecommendedItemsResolver({
+    isRecommendedItem: options === null || options === void 0 ? void 0 : options.isRecommendedItem,
+    maxRecommendedItems: options === null || options === void 0 ? void 0 : options.maxRecommendedItems
+  });
   var typeAhead = {
     id: TypeAheadAvailableNodes.QUICK_INSERT,
     registeredMenuKey: isExperimentEnabled('platform_editor_slash_command') ? MENU.key : undefined,
@@ -84,8 +89,7 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
     api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getQuickInsertComponents({
       api: api,
       getItemRank: getItemRank,
-      isRecommendedItem: options === null || options === void 0 ? void 0 : options.isRecommendedItem,
-      maxRecommendedItems: options === null || options === void 0 ? void 0 : options.maxRecommendedItems,
+      getRecommendedItems: getRecommendedItems,
       emptyStateHandler: options === null || options === void 0 ? void 0 : options.emptyStateHandler,
       fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent,
       includeElementBrowserItems: (options === null || options === void 0 ? void 0 : options.enableElementBrowser) === true

package/dist/esm/ui/getQuickInsertComponents.js

@@ -6,9 +6,7 @@ import { messages } from '@atlaskit/editor-common/quick-insert/messages';
 import { CATEGORY_VIEW_MORE_RANK, QUICK_INSERT_MENU_RANK } from '@atlaskit/editor-common/quick-insert/rank';
 import { getMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-get-menu-footer-section-key';
 import { getSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-get-section-overflow-item-key';
-import { createRecommendedSnapshotCache, MAX_RECOMMENDED_ITEMS, RECOMMENDED_SLOT_KEY_PREFIX } from './getRecommendedComponents';
 import { QuickInsertMenuFooterItem } from './QuickInsertMenuFooterItem';
-import { QuickInsertRecommendedSlot } from './QuickInsertRecommendedSlot';
 import { QuickInsertSectionOverflowMenuItem } from './QuickInsertSectionOverflowMenuItem';
 import QuickInsertMenuRoot from './registered-menu/QuickInsertMenuRoot';
 import { QuickInsertMenuSection } from './registered-menu/QuickInsertMenuSection';
@@ -57,62 +55,24 @@ var createSectionComponent = function createSectionComponent(message) {
 export var getQuickInsertComponents = function getQuickInsertComponents(_ref2) {
   var api = _ref2.api,
     includeElementBrowserItems = _ref2.includeElementBrowserItems,
-    isRecommendedItem = _ref2.isRecommendedItem,
-    maxRecommendedItems = _ref2.maxRecommendedItems,
     getItemRank = _ref2.getItemRank,
+    getRecommendedItems = _ref2.getRecommendedItems,
     emptyStateHandler = _ref2.emptyStateHandler,
     fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-  var recommendedSnapshot = createRecommendedSnapshotCache({
-    api: api,
-    isRecommendedItem: isRecommendedItem,
-    maxRecommendedItems: maxRecommendedItems
-  });
-  var recommendedSlots = Array.from({
-    length: MAX_RECOMMENDED_ITEMS
-  }, function (_, index) {
-    return {
-      key: "".concat(RECOMMENDED_SLOT_KEY_PREFIX).concat(index),
-      type: 'menu-item',
-      parents: [{
-        key: RECOMMENDED_SECTION.key,
-        type: RECOMMENDED_SECTION.type,
-        rank: index
-      }],
-      match: function match() {
-        return null;
-      },
-      isHidden: function isHidden() {
-        var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          surfaceContext = _ref3.surfaceContext;
-        return !recommendedSnapshot.getSnapshot(surfaceContext)[index];
-      },
-      component: function component(_ref4) {
-        var children = _ref4.children,
-          parents = _ref4.parents,
-          surfaceContext = _ref4.surfaceContext;
-        return /*#__PURE__*/React.createElement(QuickInsertRecommendedSlot, {
-          parents: parents,
-          surfaceContext: surfaceContext,
-          index: index,
-          getSnapshot: recommendedSnapshot.getSnapshot
-        }, children);
-      }
-    };
-  });
   return [{
     key: MENU.key,
     type: MENU.type,
-    component: function component(_ref5) {
-      var children = _ref5.children;
+    component: function component() {
       return /*#__PURE__*/React.createElement(QuickInsertMenuRoot, {
         getItemRank: getItemRank,
+        getRecommendedItems: getRecommendedItems,
         emptyStateHandler: emptyStateHandler,
         fireAnalyticsEvent: fireAnalyticsEvent
-      }, children);
+      });
     }
-  }].concat(recommendedSlots, _toConsumableArray(categories.flatMap(function (_ref6) {
-    var message = _ref6.message,
-      section = _ref6.section;
+  }].concat(_toConsumableArray(categories.flatMap(function (_ref3) {
+    var message = _ref3.message,
+      section = _ref3.section;
     return [{
       key: section.key,
       type: section.type,
@@ -121,12 +81,7 @@ export var getQuickInsertComponents = function getQuickInsertComponents(_ref2) {
         type: MENU.type,
         rank: QUICK_INSERT_MENU_RANK[section.key]
       }],
-      component: createSectionComponent(message),
-      isHidden: section.key === RECOMMENDED_SECTION.key ? function () {
-        var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          surfaceContext = _ref7.surfaceContext;
-        return recommendedSnapshot.getSnapshot(surfaceContext).length === 0;
-      } : undefined
+      component: createSectionComponent(message)
     }].concat(_toConsumableArray(includeElementBrowserItems && section.key !== RECOMMENDED_SECTION.key ? [{
       key: getSectionOverflowItemKey(section.key),
       type: 'menu-item',

package/dist/esm/ui/getRecommendedComponents.js

@@ -1,28 +1,22 @@
 import { logException } from '@atlaskit/editor-common/monitoring/error';
 import { quickInsertProviderMenuItemKey } from '@atlaskit/editor-common/quick-insert/get-provider-menu-item-key';
 import { defaultIsRecommendedItem } from '@atlaskit/editor-common/quick-insert/is-recommended-item';
-import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
-import { REGISTERED_MENU_SURFACE_CONTEXT } from '@atlaskit/editor-common/registered-menu/surface-context';
 import { isMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-is-menu-footer-section-key';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 export var MAX_RECOMMENDED_ITEMS = 5;
-export var RECOMMENDED_SLOT_KEY_PREFIX = 'quick-insert-recommended-slot-';
-export var isRecommendedSlotKey = function isRecommendedSlotKey(key) {
-  return key.startsWith(RECOMMENDED_SLOT_KEY_PREFIX);
-};
 var isRecommendationCandidate = function isRecommendationCandidate(component) {
-  return component.type === 'menu-item' && !isRecommendedSlotKey(component.key) && !isSectionOverflowItemKey(component.key) && !component.parents.some(function (parent) {
+  return component.type === 'menu-item' && !isSectionOverflowItemKey(component.key) && !component.parents.some(function (parent) {
     return isMenuFooterSectionKey(parent.key);
   });
 };
 
-/** Normalises a consumer-supplied limit to the number of available recommended slots. */
+/** Normalises a consumer-supplied limit to the supported number of recommended items. */
 export var resolveMaxRecommendedItems = function resolveMaxRecommendedItems(maxRecommendedItems) {
   if (maxRecommendedItems === undefined || !Number.isFinite(maxRecommendedItems)) {
     return MAX_RECOMMENDED_ITEMS;
   }
   if (maxRecommendedItems > MAX_RECOMMENDED_ITEMS) {
-    void logException(new Error('Quick Insert maxRecommendedItems exceeds the available slots'), {
+    void logException(new Error('Quick Insert maxRecommendedItems exceeds the supported maximum'), {
       location: 'editor-plugin-quick-insert/getRecommendedComponents'
     });
   }
@@ -67,34 +61,21 @@ export var getRecommendedComponents = function getRecommendedComponents(_ref) {
   });
 };
 
-/** Keeps only the current menu-open recommendation snapshot. */
-
-export var createRecommendedSnapshotCache = function createRecommendedSnapshotCache(_ref3) {
-  var api = _ref3.api,
-    isRecommendedItem = _ref3.isRecommendedItem,
+/**
+ * Resolves the Recommended section for a browse-mode menu. Callers memoise per components array,
+ * so the resolver itself keeps no state.
+ */
+export var createRecommendedItemsResolver = function createRecommendedItemsResolver(_ref3) {
+  var isRecommendedItem = _ref3.isRecommendedItem,
     maxRecommendedItems = _ref3.maxRecommendedItems;
-  var snapshot;
-  var getSnapshot = function getSnapshot(surfaceContext) {
-    var _surfaceContext$get, _snapshot;
-    var menuOpenId = surfaceContext === null || surfaceContext === void 0 || (_surfaceContext$get = surfaceContext.get(REGISTERED_MENU_SURFACE_CONTEXT)) === null || _surfaceContext$get === void 0 ? void 0 : _surfaceContext$get.menuOpenId;
-    if (!surfaceContext || !menuOpenId) {
-      return [];
-    }
-    if (((_snapshot = snapshot) === null || _snapshot === void 0 ? void 0 : _snapshot.id) !== menuOpenId) {
-      var _api$uiControlRegistr, _api$uiControlRegistr2;
-      snapshot = {
-        id: menuOpenId,
-        items: getRecommendedComponents({
-          components: (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [],
-          context: surfaceContext,
-          isRecommendedItem: isRecommendedItem,
-          maxRecommendedItems: maxRecommendedItems
-        })
-      };
-    }
-    return snapshot.items;
-  };
-  return {
-    getSnapshot: getSnapshot
+  return function (_ref4) {
+    var components = _ref4.components,
+      surfaceContext = _ref4.surfaceContext;
+    return surfaceContext ? getRecommendedComponents({
+      components: components,
+      context: surfaceContext,
+      isRecommendedItem: isRecommendedItem,
+      maxRecommendedItems: maxRecommendedItems
+    }) : [];
   };
 };

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toArray from "@babel/runtime/helpers/toArray";
-var _excluded = ["rows", "selectableItems", "selectedItemIndex", "activeItemKey"];
+var _excluded = ["rows", "selectableItems", "selectedItemIndex", "activeItemKey", "selectionSource"];
 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; }
 import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -29,7 +29,8 @@ var QuickInsertMenuRoot = function QuickInsertMenuRoot(_ref) {
   var _surfaceContext$get, _registeredMenu$maxHe;
   var emptyStateHandler = _ref.emptyStateHandler,
     fireAnalyticsEvent = _ref.fireAnalyticsEvent,
-    getItemRank = _ref.getItemRank;
+    getItemRank = _ref.getItemRank,
+    getRecommendedItems = _ref.getRecommendedItems;
   var registeredMenu = useRegisteredMenuContext();
   var _registeredMenu$query = registeredMenu.query,
     query = _registeredMenu$query === void 0 ? '' : _registeredMenu$query,
@@ -49,6 +50,7 @@ var QuickInsertMenuRoot = function QuickInsertMenuRoot(_ref) {
       components: components,
       formatMessage: formatMessage,
       getItemRank: runtimeItemRank !== null && runtimeItemRank !== void 0 ? runtimeItemRank : getItemRank,
+      getRecommendedItems: getRecommendedItems,
       query: query,
       rootComponent: rootComponent,
       selectCategoryItems: components.some(function (_ref2) {
@@ -57,7 +59,7 @@ var QuickInsertMenuRoot = function QuickInsertMenuRoot(_ref) {
       }) ? selectQuickInsertCategoryItems : undefined,
       surfaceContext: surfaceContext
     });
-  }, [components, formatMessage, getItemRank, query, rootComponent, runtimeItemRank, surfaceContext]);
+  }, [components, formatMessage, getItemRank, getRecommendedItems, query, rootComponent, runtimeItemRank, surfaceContext]);
   var resultCount = useMemo(function () {
     return model.sections.reduce(function (count, _ref3) {
       var _ref4 = _toArray(_ref3),
@@ -101,6 +103,7 @@ var QuickInsertMenuRoot = function QuickInsertMenuRoot(_ref) {
     selectableItems = _useRegisteredMenu.selectableItems,
     selectedItemIndex = _useRegisteredMenu.selectedItemIndex,
     activeItemKey = _useRegisteredMenu.activeItemKey,
+    selectionSource = _useRegisteredMenu.selectionSource,
     listEvents = _objectWithoutProperties(_useRegisteredMenu, _excluded);
   var listId = useId();
   var _useState = useState({
@@ -187,7 +190,8 @@ var QuickInsertMenuRoot = function QuickInsertMenuRoot(_ref) {
     onRenderedItemsChange: setRenderedItems,
     query: query,
     rows: rows,
-    selectedItemIndex: selectedItemIndex
+    selectedItemIndex: selectedItemIndex,
+    selectionSource: selectionSource
   }) : /*#__PURE__*/React.createElement(ToolbarQuickInsertMenu, {
     Item: RegisteredQuickInsertMenuItem,
     activePreviewItemKey: activeItemKey,
@@ -205,7 +209,8 @@ var QuickInsertMenuRoot = function QuickInsertMenuRoot(_ref) {
     onRenderedItemsChange: setRenderedItems,
     query: query,
     rows: rows,
-    selectedItemIndex: selectedItemIndex
+    selectedItemIndex: selectedItemIndex,
+    selectionSource: selectionSource
   }))));
 };
 export default QuickInsertMenuRoot;

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

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
 import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
 export var RegisteredQuickInsertMenuItem = function RegisteredQuickInsertMenuItem(_ref) {
-  var _registration$compone;
   var id = _ref.id,
     isSelected = _ref.isSelected,
     isActive = _ref.isActive,
@@ -27,8 +26,11 @@ export var RegisteredQuickInsertMenuItem = function RegisteredQuickInsertMenuIte
       surfaceContext: surfaceContext
     };
   }, [editorView, isOffline, popupsMountPoint, select, surfaceContext, isActive, id, isSelected]);
-  var Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : React.Fragment;
+  var Component = registration.component;
   return /*#__PURE__*/React.createElement(QuickInsertProvider, {
     value: value
-  }, /*#__PURE__*/React.createElement(Component, null, null));
+  }, Component ? /*#__PURE__*/React.createElement(Component, {
+    parents: registration.parents,
+    surfaceContext: surfaceContext
+  }, null) : null);
 };

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

@@ -32,7 +32,8 @@ export var ToolbarQuickInsertMenu = function ToolbarQuickInsertMenu(_ref) {
     onItemVisibilityChange = _ref.onItemVisibilityChange,
     onRenderedItemsChange = _ref.onRenderedItemsChange,
     query = _ref.query,
-    selectedItemIndex = _ref.selectedItemIndex;
+    selectedItemIndex = _ref.selectedItemIndex,
+    selectionSource = _ref.selectionSource;
   var footerItemIndex = itemCount - 1;
   var footerItemId = getQuickInsertMenuItemId(listId, footerItemIndex);
   var isEmptySearch = query !== '' && model.sections.length === 0;
@@ -83,6 +84,7 @@ export var ToolbarQuickInsertMenu = function ToolbarQuickInsertMenu(_ref) {
     getItemId: getItemId,
     activeItemKey: activePreviewItemKey,
     selectedItemIndex: selectedItemIndex,
+    selectionSource: selectionSource,
     scrollResetKey: query,
     onItemHover: onItemHover,
     onItemFocus: onItemFocus,

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

@@ -30,6 +30,7 @@ export var TypeAheadQuickInsertMenu = function TypeAheadQuickInsertMenu(_ref) {
     _ref$query = _ref.query,
     query = _ref$query === void 0 ? '' : _ref$query,
     selectedItemIndex = _ref.selectedItemIndex,
+    selectionSource = _ref.selectionSource,
     _ref$hasScrollPadding = _ref.hasScrollPadding,
     hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding;
   var footerItemIndex = itemCount - 1;
@@ -57,6 +58,7 @@ export var TypeAheadQuickInsertMenu = function TypeAheadQuickInsertMenu(_ref) {
     getItemId: getItemId,
     activeItemKey: activeItemKey,
     selectedItemIndex: selectedItemIndex,
+    selectionSource: selectionSource,
     scrollResetKey: query,
     hasScrollPadding: hasScrollPadding,
     scrollTo: "top-on-reset",