@atlaskit/editor-plugin-quick-insert 29.0.4 → 30.0.1

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

@@ -0,0 +1,254 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getQuickInsertMenuModel = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _itemRank = require("@atlaskit/editor-common/registered-menu/item-rank");
+var _typeAheadIsMenuFooterSectionKey = require("@atlaskit/editor-common/type-ahead-is-menu-footer-section-key");
+var _typeAheadIsSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-is-section-overflow-item-key");
+var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
+var _QuickInsertSearchResultsSection = require("./QuickInsertSearchResultsSection");
+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; }
+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 SEARCH_TOP_MATCH_LIMIT = 5;
+var SEARCH_RESULTS_HEADING = {
+  key: _keys.SEARCH_RESULTS_SECTION.key,
+  type: _keys.SEARCH_RESULTS_SECTION.type,
+  component: _QuickInsertSearchResultsSection.QuickInsertSearchResultsSection,
+  parents: [{
+    key: _keys.MENU.key,
+    type: _keys.MENU.type,
+    rank: 0
+  }]
+};
+var getParentRank = function getParentRank(component, parentKey) {
+  var _component$parents$fi, _component$parents;
+  return (_component$parents$fi = (_component$parents = component.parents) === null || _component$parents === void 0 || (_component$parents = _component$parents.find(function (parent) {
+    return parent.key === parentKey;
+  })) === null || _component$parents === void 0 ? void 0 : _component$parents.rank) !== null && _component$parents$fi !== void 0 ? _component$parents$fi : Number.MAX_SAFE_INTEGER;
+};
+var compareMatchedItems = function compareMatchedItems(a, b) {
+  return a.sectionRank - b.sectionRank || a.score - b.score || a.itemRank - b.itemRank || a.sourceIndex - b.sourceIndex || a.identity.localeCompare(b.identity);
+};
+var compareSearchResults = function compareSearchResults(a, b) {
+  return a.score - b.score || a.sectionRank - b.sectionRank || a.itemRank - b.itemRank || a.sourceIndex - b.sourceIndex || a.identity.localeCompare(b.identity);
+};
+var comparePrioritizedSearchResults = function comparePrioritizedSearchResults(a, b) {
+  var _b$priorityGroup, _a$priorityGroup;
+  return ((_b$priorityGroup = b.priorityGroup) !== null && _b$priorityGroup !== void 0 ? _b$priorityGroup : 0) - ((_a$priorityGroup = a.priorityGroup) !== null && _a$priorityGroup !== void 0 ? _a$priorityGroup : 0) || compareSearchResults(a, b);
+};
+var getSearchResults = function getSearchResults(matches) {
+  var topMatches = Array.from(matches).sort(compareSearchResults).slice(0, SEARCH_TOP_MATCH_LIMIT);
+  var topMatchIdentities = new Set(topMatches.map(function (_ref) {
+    var identity = _ref.identity;
+    return identity;
+  }));
+  var tailMatches = matches.filter(function (_ref2) {
+    var identity = _ref2.identity;
+    return !topMatchIdentities.has(identity);
+  });
+  return [].concat((0, _toConsumableArray2.default)(topMatches), (0, _toConsumableArray2.default)(tailMatches)).map(function (_ref3) {
+    var item = _ref3.item;
+    return item;
+  });
+};
+var getRenderedMenuItems = function getRenderedMenuItems(section, childrenMap, surfaceContext) {
+  var _childrenMap$get;
+  return ((_childrenMap$get = childrenMap.get((0, _surfaceRenderer.getComponentIdentity)(section))) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : []).filter(function (child) {
+    return child.type === 'menu-item' && (0, _surfaceRenderer.willComponentRender)(child, childrenMap, surfaceContext);
+  });
+};
+var buildBrowseSections = function buildBrowseSections(_ref4) {
+  var childrenMap = _ref4.childrenMap,
+    contentSections = _ref4.contentSections,
+    selectCategoryItems = _ref4.selectCategoryItems,
+    surfaceContext = _ref4.surfaceContext;
+  var sections = [];
+  var _iterator = _createForOfIteratorHelper(contentSections),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var section = _step.value;
+      var children = getRenderedMenuItems(section, childrenMap, surfaceContext);
+      var overflowItems = children.filter(function (child) {
+        return (0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(child.key);
+      });
+      var viewMoreItem = overflowItems[overflowItems.length - 1];
+      var items = children.filter(function (child) {
+        return !(0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(child.key);
+      });
+      if (items.length === 0) {
+        continue;
+      }
+      var selectedItems = viewMoreItem !== undefined && selectCategoryItems !== undefined ? selectCategoryItems(items) : items;
+      if (selectedItems.length < items.length && viewMoreItem !== undefined) {
+        sections.push([section].concat((0, _toConsumableArray2.default)(selectedItems), [viewMoreItem]));
+      } else {
+        sections.push([section].concat((0, _toConsumableArray2.default)(selectedItems)));
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return {
+    fallbackItems: [],
+    sections: sections
+  };
+};
+var buildSearchSections = function buildSearchSections(_ref5) {
+  var childrenMap = _ref5.childrenMap,
+    components = _ref5.components,
+    contentSections = _ref5.contentSections,
+    formatMessage = _ref5.formatMessage,
+    query = _ref5.query,
+    root = _ref5.root,
+    surfaceContext = _ref5.surfaceContext;
+  var matches = new Map();
+  var sourceIndexByComponent = new Map(components.map(function (component, index) {
+    return [component, index];
+  }));
+  var _iterator2 = _createForOfIteratorHelper(contentSections),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var section = _step2.value;
+      var _iterator3 = _createForOfIteratorHelper(getRenderedMenuItems(section, childrenMap, surfaceContext)),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _item$match, _match$score, _sourceIndexByCompone;
+          var item = _step3.value;
+          if ((0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(item.key)) {
+            continue;
+          }
+          var match = (_item$match = item.match) === null || _item$match === void 0 ? void 0 : _item$match.call(item, {
+            formatMessage: formatMessage,
+            itemKey: item.key,
+            query: query
+          });
+          if (item.match && match === null) {
+            continue;
+          }
+          var candidate = {
+            identity: "".concat(item.type, ":").concat(item.key),
+            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)
+          };
+          var existing = matches.get(candidate.identity);
+          if (!existing || compareMatchedItems(candidate, existing) < 0) {
+            matches.set(candidate.identity, candidate);
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var uniqueMatches = Array.from(matches.values()).sort(compareMatchedItems);
+  var prioritizedMatches = uniqueMatches.filter(function (_ref6) {
+    var priorityGroup = _ref6.priorityGroup;
+    return priorityGroup !== undefined;
+  });
+  var unprioritizedMatches = uniqueMatches.filter(function (_ref7) {
+    var priorityGroup = _ref7.priorityGroup;
+    return priorityGroup === undefined;
+  });
+  var orderedSearchResults = [].concat((0, _toConsumableArray2.default)(prioritizedMatches.sort(comparePrioritizedSearchResults).map(function (_ref8) {
+    var item = _ref8.item;
+    return item;
+  })), (0, _toConsumableArray2.default)(getSearchResults(unprioritizedMatches)));
+  if (orderedSearchResults.length > 0) {
+    return {
+      fallbackItems: [],
+      sections: [[SEARCH_RESULTS_HEADING].concat((0, _toConsumableArray2.default)(orderedSearchResults))]
+    };
+  }
+  var fallbackItem = contentSections.flatMap(function (section) {
+    var _childrenMap$get2;
+    return (_childrenMap$get2 = childrenMap.get((0, _surfaceRenderer.getComponentIdentity)(section))) !== null && _childrenMap$get2 !== void 0 ? _childrenMap$get2 : [];
+  }).find(function (component) {
+    return component.type === _keys.ASK_ROVO_MENU_ITEM.type && component.key === _keys.ASK_ROVO_MENU_ITEM.key && (0, _surfaceRenderer.willComponentRender)(component, childrenMap, surfaceContext);
+  });
+  return {
+    fallbackItems: fallbackItem ? [fallbackItem] : [],
+    sections: []
+  };
+};
+
+/**
+ * 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.
+ */
+var getQuickInsertMenuModel = exports.getQuickInsertMenuModel = function getQuickInsertMenuModel(_ref9) {
+  var components = _ref9.components,
+    formatMessage = _ref9.formatMessage,
+    getItemRank = _ref9.getItemRank,
+    query = _ref9.query,
+    rootComponent = _ref9.rootComponent,
+    selectCategoryItems = _ref9.selectCategoryItems,
+    surfaceContext = _ref9.surfaceContext;
+  var rankedComponents = (0, _itemRank.applyRegisteredItemRanks)(components, getItemRank);
+  var _resolveSurface = (0, _surfaceRenderer.resolveSurface)(rankedComponents, rootComponent),
+    childrenMap = _resolveSurface.childrenMap,
+    root = _resolveSurface.root,
+    _resolveSurface$topLe = _resolveSurface.topLevelChildren,
+    topLevelChildren = _resolveSurface$topLe === void 0 ? [] : _resolveSurface$topLe;
+  if (!root || !(0, _surfaceRenderer.willComponentRender)(root, childrenMap, surfaceContext)) {
+    return {
+      fallbackItems: [],
+      footer: undefined,
+      root: undefined,
+      sections: []
+    };
+  }
+  var renderedSections = topLevelChildren.filter(function (section) {
+    return section.type === 'menu-section' && (0, _surfaceRenderer.willComponentRender)(section, childrenMap, surfaceContext);
+  });
+  var footerSection = renderedSections.find(function (_ref0) {
+    var key = _ref0.key;
+    return (0, _typeAheadIsMenuFooterSectionKey.isMenuFooterSectionKey)(key);
+  });
+  var contentSections = renderedSections.filter(function (_ref1) {
+    var key = _ref1.key;
+    return !(0, _typeAheadIsMenuFooterSectionKey.isMenuFooterSectionKey)(key);
+  });
+  var content = query === '' ? buildBrowseSections({
+    childrenMap: childrenMap,
+    contentSections: contentSections,
+    selectCategoryItems: selectCategoryItems,
+    surfaceContext: surfaceContext
+  }) : buildSearchSections({
+    childrenMap: childrenMap,
+    components: rankedComponents,
+    contentSections: contentSections,
+    formatMessage: formatMessage,
+    query: query,
+    root: root,
+    surfaceContext: surfaceContext
+  });
+  var footer = footerSection ? getRenderedMenuItems(footerSection, childrenMap, surfaceContext)[0] : undefined;
+  return _objectSpread(_objectSpread({}, content), {}, {
+    footer: footer,
+    root: root
+  });
+};

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

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

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectQuickInsertCategoryItems = void 0;
+var _getProviderMenuItemKey = require("@atlaskit/editor-common/quick-insert/get-provider-menu-item-key");
+var DEFAULT_ITEM_LIMIT = 30;
+var ECOSYSTEM_ITEM_LIMIT = 10;
+var isEcosystemQuickInsertItem = function isEcosystemQuickInsertItem(item) {
+  return _getProviderMenuItemKey.quickInsertProviderMenuItemKey.isEcosystem(item.key);
+};
+
+/**
+ * Keeps the initial native and ecosystem results while ensuring ecosystem registrations
+ * remain discoverable beyond the default category item limit.
+ */
+var selectQuickInsertCategoryItems = exports.selectQuickInsertCategoryItems = function selectQuickInsertCategoryItems(items) {
+  var ecosystemItemCount = 0;
+  return items.filter(function (item, index) {
+    var isEcosystemItem = isEcosystemQuickInsertItem(item);
+    if (isEcosystemItem) {
+      ecosystemItemCount++;
+    }
+    return index < DEFAULT_ITEM_LIMIT || isEcosystemItem && ecosystemItemCount <= ECOSYSTEM_ITEM_LIMIT;
+  });
+};

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useQuickInsertSearchAnalytics = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _enums = require("@atlaskit/editor-common/analytics/types/enums");
+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 SEARCH_DEBOUNCE_MS = 1000;
+var useQuickInsertSearchAnalytics = exports.useQuickInsertSearchAnalytics = function useQuickInsertSearchAnalytics(_ref) {
+  var query = _ref.query,
+    resultCount = _ref.resultCount,
+    surface = _ref.surface,
+    category = _ref.category,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? true : _ref$isOpen,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent;
+  var latestOptions = (0, _react.useRef)({
+    query: query,
+    resultCount: resultCount,
+    surface: surface,
+    category: category,
+    fireAnalyticsEvent: fireAnalyticsEvent
+  });
+  latestOptions.current = {
+    query: query,
+    resultCount: resultCount,
+    surface: surface,
+    category: category,
+    fireAnalyticsEvent: fireAnalyticsEvent
+  };
+  var pendingSearch = (0, _react.useRef)(null);
+  var effectVersion = (0, _react.useRef)(0);
+  var flush = (0, _react.useCallback)(function () {
+    var pending = pendingSearch.current;
+    if (!pending) {
+      return;
+    }
+    clearTimeout(pending.timer);
+    pendingSearch.current = null;
+    var current = latestOptions.current;
+    if (current.query.trim() !== pending.query || !current.fireAnalyticsEvent) {
+      return;
+    }
+    var attributes = _objectSpread(_objectSpread({}, current.surface === 'element-browser' && current.category !== undefined ? {
+      category: current.category
+    } : {}), {}, {
+      isEmpty: current.resultCount === 0,
+      queryLength: current.query.trim().length,
+      resultCount: current.resultCount,
+      surface: current.surface
+    });
+    var payload = {
+      action: _enums.ACTION.SEARCHED,
+      actionSubject: _enums.ACTION_SUBJECT.QUICK_INSERT,
+      eventType: _enums.EVENT_TYPE.TRACK,
+      attributes: attributes
+    };
+    current.fireAnalyticsEvent(payload);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var currentVersion = ++effectVersion.current;
+    if (!isOpen) {
+      flush();
+      return;
+    }
+    var trimmedQuery = query.trim();
+    if (!trimmedQuery) {
+      if (pendingSearch.current) {
+        clearTimeout(pendingSearch.current.timer);
+        pendingSearch.current = null;
+      }
+      return;
+    }
+    if (pendingSearch.current) {
+      clearTimeout(pendingSearch.current.timer);
+    }
+    var timer = setTimeout(flush, SEARCH_DEBOUNCE_MS);
+    pendingSearch.current = {
+      query: trimmedQuery,
+      timer: timer
+    };
+    return function () {
+      if (pendingSearch.current) {
+        clearTimeout(pendingSearch.current.timer);
+      }
+      Promise.resolve().then(function () {
+        // oxlint-disable-next-line react-hooks/exhaustive-deps -- The live effect version distinguishes dependency cleanup from a real unmount.
+        if (effectVersion.current === currentVersion) {
+          flush();
+        }
+      });
+    };
+  }, [query, surface, category, isOpen, flush]);
+  return flush;
+};

package/dist/es2019/quickInsertPlugin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { isSSR } from '@atlaskit/editor-common/is-ssr';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages/insert-block';
+import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
 import { createQuickInsertRankResolver } from '@atlaskit/editor-common/quick-insert/quick-insert-rank';
 import { memoProcessQuickInsertItems } from '@atlaskit/editor-common/quick-insert/utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
@@ -32,6 +33,7 @@ export const quickInsertPlugin = ({
   const getItemRank = createQuickInsertRankResolver(options === null || options === void 0 ? void 0 : options.getItemRank);
   const typeAhead = {
     id: TypeAheadAvailableNodes.QUICK_INSERT,
+    registeredMenuKey: isExperimentEnabled('platform_editor_slash_command') ? MENU.key : undefined,
     getRegisteredItemRank: getItemRank,
     trigger: '/',
     // Support fullwidth slash (U+FF0F) used by Japanese/CJK keyboards (e.g. typing / on a Japanese keyboard layout)
@@ -73,12 +75,15 @@ export const quickInsertPlugin = ({
     } : undefined
   };
   if (isExperimentEnabled('platform_editor_slash_command')) {
-    var _api$uiControlRegistr;
+    var _api$uiControlRegistr, _api$analytics;
     api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getQuickInsertComponents({
       api,
-      includeElementBrowserItems: (options === null || options === void 0 ? void 0 : options.enableElementBrowser) === true,
+      getItemRank,
       isRecommendedItem: options === null || options === void 0 ? void 0 : options.isRecommendedItem,
-      maxRecommendedItems: options === null || options === void 0 ? void 0 : options.maxRecommendedItems
+      maxRecommendedItems: options === null || options === void 0 ? void 0 : options.maxRecommendedItems,
+      emptyStateHandler: options === null || options === void 0 ? void 0 : options.emptyStateHandler,
+      fireAnalyticsEvent: api === null || api === void 0 ? 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
     }));
   }
   if (isExperimentEnabled('platform_editor_block_control_migration') && (options === null || options === void 0 ? void 0 : options.blockControlButtonEnabled) !== false) {
@@ -130,8 +135,8 @@ export const quickInsertPlugin = ({
         plugin: () => getQuickInsertOpenExperiencePlugin({
           refs,
           dispatchAnalyticsEvent: payload => {
-            var _api$analytics, _api$analytics$action;
-            return api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.fireAnalyticsEvent(payload);
+            var _api$analytics2, _api$analytics2$actio;
+            return api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.fireAnalyticsEvent(payload);
           }
         })
       }];

package/dist/es2019/ui/QuickInsertRecommendedSlot.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
 export const QuickInsertRecommendedSlot = ({
+  children,
+  parents,
+  surfaceContext,
   index,
-  getSnapshot,
-  ...props
+  getSnapshot
 }) => {
   const {
-    surfaceContext
+    surfaceContext: menuSurfaceContext
   } = useQuickInsertContext();
-  const item = getSnapshot(surfaceContext)[index];
-  return item !== null && item !== void 0 && item.component ? /*#__PURE__*/React.createElement(item.component, props) : null;
+  const item = getSnapshot(menuSurfaceContext)[index];
+  return item !== null && item !== void 0 && item.component ? /*#__PURE__*/React.createElement(item.component, {
+    parents: parents,
+    surfaceContext: surfaceContext
+  }, children) : null;
 };

package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowser.js

@@ -7,7 +7,7 @@ import IconButton from '@atlaskit/button/icon/button';
 // eslint-disable-next-line @atlaskit/platform/no-barrel-entry-imports
 import { messages } from '@atlaskit/editor-common/quick-insert';
 import { MENU, RECOMMENDED_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
-import { useQuickInsertSearchAnalytics } from '@atlaskit/editor-common/quick-insert/use-search-analytics';
+import { createRegisteredMenuSurfaceContext } from '@atlaskit/editor-common/registered-menu/surface-context';
 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 Heading from '@atlaskit/heading/heading';
@@ -20,6 +20,7 @@ import ModalTitle from '@atlaskit/modal-dialog/modal-title';
 import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import Textfield from '@atlaskit/textfield/text-field';
+import { useQuickInsertSearchAnalytics } from '../registered-menu/useQuickInsertSearchAnalytics';
 import { createRegistryElementBrowserModel, getInitialRegistryElementBrowserSection, getRegistryElementBrowserItems } from './model';
 import { RegistryElementBrowserCategories } from './RegistryElementBrowserCategories';
 import { RegistryElementBrowserFooter } from './RegistryElementBrowserFooter';
@@ -58,6 +59,20 @@ export const RegistryElementBrowser = ({
   const {
     formatMessage
   } = useIntl();
+  const [session, setSession] = useState(() => ({
+    isOpen,
+    menuOpenId: Symbol('element-browser')
+  }));
+  if (session.isOpen !== isOpen) {
+    setSession({
+      isOpen,
+      menuOpenId: isOpen ? Symbol('element-browser') : session.menuOpenId
+    });
+  }
+  const surfaceContext = useMemo(() => createRegisteredMenuSurfaceContext({
+    menuOpenId: session.menuOpenId,
+    surface: 'element-browser'
+  }), [session.menuOpenId]);
   const [browserState, setBrowserState] = useState({
     query: '',
     section: defaultSection
@@ -71,6 +86,7 @@ export const RegistryElementBrowser = ({
   const browserModel = useMemo(() => {
     const model = createRegistryElementBrowserModel(components, {
       footerKey: getMenuFooterSectionKey(MENU.key),
+      surfaceContext,
       overflowKeys: new Set(components.filter(component => component.type === 'menu-section').map(component => getSectionOverflowItemKey(component.key))),
       recommendedSectionKey: RECOMMENDED_SECTION.key,
       rootKey: MENU.key
@@ -88,7 +104,7 @@ export const RegistryElementBrowser = ({
         section: effectiveSection
       })
     };
-  }, [components, formatMessage, query, section]);
+  }, [components, formatMessage, query, section, surfaceContext]);
   const {
     model,
     effectiveSection,
@@ -338,6 +354,7 @@ export const RegistryElementBrowser = ({
     fallbackItems: model.fallbackItems,
     query: query,
     resultsId: resultsId,
+    surfaceContext: surfaceContext,
     section: effectiveSection,
     selectedKey: selectedKey,
     onKeyDown: onKeyDown,

package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.js

@@ -3,9 +3,8 @@ import "./RegistryElementBrowserSearchResults.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { QuickInsertEmptyState } from '@atlaskit/editor-common/quick-insert/empty-state';
 import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
-
+import { QuickInsertEmptyState } from '../registered-menu/QuickInsertEmptyState';
 // oxlint-disable-next-line eslint/no-redeclare
 
 const resultsGridStyles = null;
@@ -18,7 +17,8 @@ const RegistryElementBrowserItem = ({
   isOffline,
   isSelected,
   item,
-  onSelect
+  onSelect,
+  surfaceContext
 }) => {
   const {
     component: Component,
@@ -33,14 +33,17 @@ const RegistryElementBrowserItem = ({
       isSelected
     },
     select: handler => onSelect(key, handler),
-    surface: 'element-browser'
-  }), [editorView, isOffline, isSelected, item.description, key, onSelect]);
+    surfaceContext
+  }), [editorView, isOffline, isSelected, item.description, key, onSelect, surfaceContext]);
   if (!Component) {
     return null;
   }
   return /*#__PURE__*/React.createElement(QuickInsertProvider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Component, undefined, null));
+  }, /*#__PURE__*/React.createElement(Component, {
+    parents: item.registration.parents,
+    surfaceContext: surfaceContext
+  }, null));
 };
 export const RegistryElementBrowserSearchResults = ({
   editorView,
@@ -53,6 +56,7 @@ export const RegistryElementBrowserSearchResults = ({
   resultsId,
   section,
   selectedKey,
+  surfaceContext,
   onKeyDown,
   onSelect
 }) => {
@@ -94,7 +98,8 @@ export const RegistryElementBrowserSearchResults = ({
     isSelected: selectedKey === item.registration.key,
     item: item,
     key: item.registration.key,
-    onSelect: onSelect
+    onSelect: onSelect,
+    surfaceContext: surfaceContext
   }))), shouldRenderEmptyState && !hasFallbackItems && query.trim().length > 0 && /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
     mode: "full"
   }), emptyState && /*#__PURE__*/React.createElement("div", {