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

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

@@ -0,0 +1,177 @@
+import { ASK_ROVO_MENU_ITEM, MENU, 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';
+import { getComponentIdentity, resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { QuickInsertSearchResultsSection } from './QuickInsertSearchResultsSection';
+const SEARCH_TOP_MATCH_LIMIT = 5;
+const SEARCH_RESULTS_HEADING = {
+  key: SEARCH_RESULTS_SECTION.key,
+  type: SEARCH_RESULTS_SECTION.type,
+  component: QuickInsertSearchResultsSection,
+  parents: [{
+    key: MENU.key,
+    type: MENU.type,
+    rank: 0
+  }]
+};
+const getParentRank = (component, parentKey) => {
+  var _component$parents$fi, _component$parents, _component$parents$fi2;
+  return (_component$parents$fi = (_component$parents = component.parents) === null || _component$parents === void 0 ? void 0 : (_component$parents$fi2 = _component$parents.find(parent => parent.key === parentKey)) === null || _component$parents$fi2 === void 0 ? void 0 : _component$parents$fi2.rank) !== null && _component$parents$fi !== void 0 ? _component$parents$fi : Number.MAX_SAFE_INTEGER;
+};
+const compareMatchedItems = (a, b) => a.sectionRank - b.sectionRank || a.score - b.score || a.itemRank - b.itemRank || a.sourceIndex - b.sourceIndex || a.identity.localeCompare(b.identity);
+const compareSearchResults = (a, b) => a.score - b.score || a.sectionRank - b.sectionRank || a.itemRank - b.itemRank || a.sourceIndex - b.sourceIndex || a.identity.localeCompare(b.identity);
+const getSearchResults = matches => {
+  const topMatches = Array.from(matches).sort(compareSearchResults).slice(0, SEARCH_TOP_MATCH_LIMIT);
+  const topMatchIdentities = new Set(topMatches.map(({
+    identity
+  }) => identity));
+  const tailMatches = matches.filter(({
+    identity
+  }) => !topMatchIdentities.has(identity));
+  return [...topMatches, ...tailMatches].map(({
+    item
+  }) => item);
+};
+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));
+};
+const buildBrowseSections = ({
+  childrenMap,
+  contentSections,
+  selectCategoryItems,
+  surfaceContext
+}) => {
+  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) {
+      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]);
+    }
+  }
+  return {
+    fallbackItems: [],
+    sections
+  };
+};
+const buildSearchSections = ({
+  childrenMap,
+  components,
+  contentSections,
+  formatMessage,
+  query,
+  root,
+  surfaceContext
+}) => {
+  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)) {
+      var _item$match, _match$score, _sourceIndexByCompone;
+      if (isSectionOverflowItemKey(item.key)) {
+        continue;
+      }
+      const match = (_item$match = item.match) === null || _item$match === void 0 ? void 0 : _item$match.call(item, {
+        formatMessage,
+        query
+      });
+      if (item.match && match === null) {
+        continue;
+      }
+      const candidate = {
+        identity: `${item.type}:${item.key}`,
+        item,
+        itemRank: getParentRank(item, section.key),
+        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)
+      };
+      const existing = matches.get(candidate.identity);
+      if (!existing || compareMatchedItems(candidate, existing) < 0) {
+        matches.set(candidate.identity, candidate);
+      }
+    }
+  }
+  const uniqueMatches = Array.from(matches.values()).sort(compareMatchedItems);
+  const searchResults = getSearchResults(uniqueMatches);
+  if (searchResults.length > 0) {
+    return {
+      fallbackItems: [],
+      sections: [[SEARCH_RESULTS_HEADING, ...searchResults]]
+    };
+  }
+  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: []
+  };
+};
+
+/**
+ * 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.
+ */
+export const getQuickInsertMenuModel = ({
+  components,
+  formatMessage,
+  getItemRank,
+  query,
+  rootComponent,
+  selectCategoryItems,
+  surfaceContext
+}) => {
+  const rankedComponents = applyRegisteredItemRanks(components, getItemRank);
+  const {
+    childrenMap,
+    root,
+    topLevelChildren = []
+  } = resolveSurface(rankedComponents, rootComponent);
+  if (!root || !willComponentRender(root, childrenMap, surfaceContext)) {
+    return {
+      fallbackItems: [],
+      footer: undefined,
+      root: undefined,
+      sections: []
+    };
+  }
+  const renderedSections = topLevelChildren.filter(section => section.type === 'menu-section' && willComponentRender(section, childrenMap, surfaceContext));
+  const footerSection = renderedSections.find(({
+    key
+  }) => isMenuFooterSectionKey(key));
+  const contentSections = renderedSections.filter(({
+    key
+  }) => !isMenuFooterSectionKey(key));
+  const content = query === '' ? buildBrowseSections({
+    childrenMap,
+    contentSections,
+    selectCategoryItems,
+    surfaceContext
+  }) : buildSearchSections({
+    childrenMap,
+    components: rankedComponents,
+    contentSections,
+    formatMessage,
+    query,
+    root,
+    surfaceContext
+  });
+  const footer = footerSection ? getRenderedMenuItems(footerSection, childrenMap, surfaceContext)[0] : undefined;
+  return {
+    ...content,
+    footer,
+    root
+  };
+};

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

@@ -0,0 +1 @@
+export const getQuickInsertMenuItemId = (listId, itemIndex) => `${listId}-${itemIndex}`;

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

@@ -0,0 +1,19 @@
+import { quickInsertProviderMenuItemKey } from '@atlaskit/editor-common/quick-insert/get-provider-menu-item-key';
+const DEFAULT_ITEM_LIMIT = 30;
+const ECOSYSTEM_ITEM_LIMIT = 10;
+const isEcosystemQuickInsertItem = item => quickInsertProviderMenuItemKey.isEcosystem(item.key);
+
+/**
+ * Keeps the initial native and ecosystem results while ensuring ecosystem registrations
+ * remain discoverable beyond the default category item limit.
+ */
+export const selectQuickInsertCategoryItems = items => {
+  let ecosystemItemCount = 0;
+  return items.filter((item, index) => {
+    const isEcosystemItem = isEcosystemQuickInsertItem(item);
+    if (isEcosystemItem) {
+      ecosystemItemCount++;
+    }
+    return index < DEFAULT_ITEM_LIMIT || isEcosystemItem && ecosystemItemCount <= ECOSYSTEM_ITEM_LIMIT;
+  });
+};

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

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics/types/enums';
+const SEARCH_DEBOUNCE_MS = 1000;
+export const useQuickInsertSearchAnalytics = ({
+  query,
+  resultCount,
+  surface,
+  category,
+  isOpen = true,
+  fireAnalyticsEvent
+}) => {
+  const latestOptions = useRef({
+    query,
+    resultCount,
+    surface,
+    category,
+    fireAnalyticsEvent
+  });
+  latestOptions.current = {
+    query,
+    resultCount,
+    surface,
+    category,
+    fireAnalyticsEvent
+  };
+  const pendingSearch = useRef(null);
+  const effectVersion = useRef(0);
+  const flush = useCallback(() => {
+    const pending = pendingSearch.current;
+    if (!pending) {
+      return;
+    }
+    clearTimeout(pending.timer);
+    pendingSearch.current = null;
+    const current = latestOptions.current;
+    if (current.query.trim() !== pending.query || !current.fireAnalyticsEvent) {
+      return;
+    }
+    const attributes = {
+      ...(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
+    };
+    const payload = {
+      action: ACTION.SEARCHED,
+      actionSubject: ACTION_SUBJECT.QUICK_INSERT,
+      eventType: EVENT_TYPE.TRACK,
+      attributes
+    };
+    current.fireAnalyticsEvent(payload);
+  }, []);
+  useEffect(() => {
+    const currentVersion = ++effectVersion.current;
+    if (!isOpen) {
+      flush();
+      return;
+    }
+    const trimmedQuery = query.trim();
+    if (!trimmedQuery) {
+      if (pendingSearch.current) {
+        clearTimeout(pendingSearch.current.timer);
+        pendingSearch.current = null;
+      }
+      return;
+    }
+    if (pendingSearch.current) {
+      clearTimeout(pendingSearch.current.timer);
+    }
+    const timer = setTimeout(flush, SEARCH_DEBOUNCE_MS);
+    pendingSearch.current = {
+      query: trimmedQuery,
+      timer
+    };
+    return () => {
+      if (pendingSearch.current) {
+        clearTimeout(pendingSearch.current.timer);
+      }
+      Promise.resolve().then(() => {
+        // 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/esm/quickInsertPlugin.js

@@ -8,6 +8,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';
@@ -37,6 +38,7 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
   var getItemRank = createQuickInsertRankResolver(options === null || options === void 0 ? void 0 : options.getItemRank);
   var 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)
@@ -78,12 +80,15 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
     } : undefined
   };
   if (isExperimentEnabled('platform_editor_slash_command')) {
-    var _api$uiControlRegistr;
+    var _api$uiControlRegistr, _api$analytics;
     api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getQuickInsertComponents({
       api: api,
-      includeElementBrowserItems: (options === null || options === void 0 ? void 0 : options.enableElementBrowser) === true,
+      getItemRank: 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 || (_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) {
@@ -142,8 +147,8 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
           return getQuickInsertOpenExperiencePlugin({
             refs: refs,
             dispatchAnalyticsEvent: function dispatchAnalyticsEvent(payload) {
-              var _api$analytics;
-              return api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 ? void 0 : _api$analytics.fireAnalyticsEvent(payload);
+              var _api$analytics2;
+              return api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.fireAnalyticsEvent(payload);
             }
           });
         }

package/dist/esm/ui/QuickInsertRecommendedSlot.js

@@ -1,13 +1,16 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["index", "getSnapshot"];
 import React from 'react';
 import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
 export var QuickInsertRecommendedSlot = function QuickInsertRecommendedSlot(_ref) {
-  var index = _ref.index,
-    getSnapshot = _ref.getSnapshot,
-    props = _objectWithoutProperties(_ref, _excluded);
+  var children = _ref.children,
+    parents = _ref.parents,
+    surfaceContext = _ref.surfaceContext,
+    index = _ref.index,
+    getSnapshot = _ref.getSnapshot;
   var _useQuickInsertContex = useQuickInsertContext(),
-    surfaceContext = _useQuickInsertContex.surfaceContext;
-  var item = getSnapshot(surfaceContext)[index];
-  return item !== null && item !== void 0 && item.component ? /*#__PURE__*/React.createElement(item.component, props) : null;
+    menuSurfaceContext = _useQuickInsertContex.surfaceContext;
+  var 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/esm/ui/RegistryElementBrowser/RegistryElementBrowser.js

@@ -11,7 +11,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';
@@ -24,6 +24,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';
@@ -63,13 +64,34 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     onSelect = _ref.onSelect;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var _useState = useState({
+  var _useState = useState(function () {
+      return {
+        isOpen: isOpen,
+        menuOpenId: Symbol('element-browser')
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    session = _useState2[0],
+    setSession = _useState2[1];
+  if (session.isOpen !== isOpen) {
+    setSession({
+      isOpen: isOpen,
+      menuOpenId: isOpen ? Symbol('element-browser') : session.menuOpenId
+    });
+  }
+  var surfaceContext = useMemo(function () {
+    return createRegisteredMenuSurfaceContext({
+      menuOpenId: session.menuOpenId,
+      surface: 'element-browser'
+    });
+  }, [session.menuOpenId]);
+  var _useState3 = useState({
       query: '',
       section: defaultSection
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    browserState = _useState2[0],
-    setBrowserState = _useState2[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    browserState = _useState4[0],
+    setBrowserState = _useState4[1];
   var query = browserState.query,
     section = browserState.section,
     selectedRegistration = browserState.selectedRegistration;
@@ -77,6 +99,7 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
   var browserModel = useMemo(function () {
     var model = createRegistryElementBrowserModel(components, {
       footerKey: getMenuFooterSectionKey(MENU.key),
+      surfaceContext: surfaceContext,
       overflowKeys: new Set(components.filter(function (component) {
         return component.type === 'menu-section';
       }).map(function (component) {
@@ -99,7 +122,7 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
         section: effectiveSection
       })
     };
-  }, [components, formatMessage, query, section]);
+  }, [components, formatMessage, query, section, surfaceContext]);
   var model = browserModel.model,
     effectiveSection = browserModel.effectiveSection,
     items = browserModel.items;
@@ -353,6 +376,7 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     fallbackItems: model.fallbackItems,
     query: query,
     resultsId: resultsId,
+    surfaceContext: surfaceContext,
     section: effectiveSection,
     selectedKey: selectedKey,
     onKeyDown: onKeyDown,

package/dist/esm/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
 
 var resultsGridStyles = null;
@@ -18,7 +17,8 @@ var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
     isOffline = _ref.isOffline,
     isSelected = _ref.isSelected,
     item = _ref.item,
-    onSelect = _ref.onSelect;
+    onSelect = _ref.onSelect,
+    surfaceContext = _ref.surfaceContext;
   var _item$registration = item.registration,
     Component = _item$registration.component,
     key = _item$registration.key;
@@ -34,15 +34,18 @@ var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
       select: function select(handler) {
         return onSelect(key, handler);
       },
-      surface: 'element-browser'
+      surfaceContext: surfaceContext
     };
-  }, [editorView, isOffline, isSelected, item.description, key, onSelect]);
+  }, [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 var RegistryElementBrowserSearchResults = function RegistryElementBrowserSearchResults(_ref2) {
   var editorView = _ref2.editorView,
@@ -56,6 +59,7 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
     resultsId = _ref2.resultsId,
     section = _ref2.section,
     selectedKey = _ref2.selectedKey,
+    surfaceContext = _ref2.surfaceContext,
     onKeyDown = _ref2.onKeyDown,
     onSelect = _ref2.onSelect;
   var _useIntl = useIntl(),
@@ -96,7 +100,8 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
       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"

package/dist/esm/ui/RegistryElementBrowser/model.js

@@ -14,16 +14,14 @@ var compareRanks = function compareRanks(left, right) {
   }
   return 0;
 };
-var isVisible = function isVisible(registration) {
-  var _registration$isHidde;
-  return ((_registration$isHidde = registration.isHidden) === null || _registration$isHidde === void 0 ? void 0 : _registration$isHidde.call(registration)) !== true;
-};
-var getChildren = function getChildren(components, parentKey) {
+var getChildren = function getChildren(components, parentKey, surfaceContext) {
   return components.filter(function (component) {
-    var _component$parents;
-    return isVisible(component) && ((_component$parents = component.parents) === null || _component$parents === void 0 ? void 0 : _component$parents.some(function (parent) {
+    var _component$parents, _component$isHidden;
+    return ((_component$parents = component.parents) === null || _component$parents === void 0 ? void 0 : _component$parents.some(function (parent) {
       return parent.key === parentKey;
-    }));
+    })) && ((_component$isHidden = component.isHidden) === null || _component$isHidden === void 0 ? void 0 : _component$isHidden.call(component, {
+      surfaceContext: surfaceContext
+    })) !== true;
   });
 };
 var getParentRank = function getParentRank(registration, parentKey) {
@@ -32,8 +30,8 @@ var getParentRank = function getParentRank(registration, parentKey) {
     return parent.key === parentKey;
   })) === null || _registration$parents2 === void 0 ? void 0 : _registration$parents2.rank) !== null && _registration$parents !== void 0 ? _registration$parents : Number.MAX_SAFE_INTEGER;
 };
-var _getDescendantItems = function getDescendantItems(components, parentKey, ancestorRanks, sectionKey) {
-  return getChildren(components, parentKey).flatMap(function (component) {
+var _getDescendantItems = function getDescendantItems(components, parentKey, ancestorRanks, sectionKey, surfaceContext) {
+  return getChildren(components, parentKey, surfaceContext).flatMap(function (component) {
     var ranks = [].concat(_toConsumableArray(ancestorRanks), [getParentRank(component, parentKey)]);
     if (component.type === 'menu-item') {
       return component.component ? [{
@@ -42,7 +40,7 @@ var _getDescendantItems = function getDescendantItems(components, parentKey, anc
         sectionKeys: [sectionKey]
       }] : [];
     }
-    return _getDescendantItems(components, component.key, ranks, sectionKey);
+    return _getDescendantItems(components, component.key, ranks, sectionKey, surfaceContext);
   });
 };
 
@@ -54,12 +52,13 @@ export var createRegistryElementBrowserModel = function createRegistryElementBro
   var footerKey = _ref.footerKey,
     overflowKeys = _ref.overflowKeys,
     recommendedSectionKey = _ref.recommendedSectionKey,
-    rootKey = _ref.rootKey;
+    rootKey = _ref.rootKey,
+    surfaceContext = _ref.surfaceContext;
   var excludedKeys = new Set([footerKey, recommendedSectionKey].concat(_toConsumableArray(overflowKeys)));
   var visibleComponents = components.filter(function (component) {
-    return isVisible(component) && !excludedKeys.has(component.key);
+    return !excludedKeys.has(component.key);
   });
-  var sections = getChildren(visibleComponents, rootKey).filter(function (component) {
+  var sections = getChildren(visibleComponents, rootKey, surfaceContext).filter(function (component) {
     return component.type === 'menu-section';
   }).map(function (section) {
     return {
@@ -71,7 +70,7 @@ export var createRegistryElementBrowserModel = function createRegistryElementBro
   });
   var itemByKey = new Map();
   sections.forEach(function (section) {
-    _getDescendantItems(visibleComponents, section.key, [section.rank], section.key).forEach(function (item) {
+    _getDescendantItems(visibleComponents, section.key, [section.rank], section.key, surfaceContext).forEach(function (item) {
       var existing = itemByKey.get(item.registration.key);
       if (!existing) {
         itemByKey.set(item.registration.key, item);

package/dist/esm/ui/getQuickInsertComponents.js

@@ -1,12 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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) { _defineProperty(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; }
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { BLOCK_TEMPLATES_SECTION, CREATE_SECTION, DATA_AND_CHARTS_SECTION, EMBED_SECTION, MEDIA_SECTION, MENU, OTHER_SECTION, RECOMMENDED_SECTION, ROVO_SECTION, STRUCTURE_SECTION, TEXT_FORMATTING_SECTION, VIEW_ALL_ELEMENTS_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
-import { QuickInsertMenuRoot } from '@atlaskit/editor-common/quick-insert/menu-root';
-import { QuickInsertMenuSection } from '@atlaskit/editor-common/quick-insert/menu-section';
 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';
@@ -15,6 +10,8 @@ import { createRecommendedSnapshotCache, MAX_RECOMMENDED_ITEMS, RECOMMENDED_SLOT
 import { QuickInsertMenuFooterItem } from './QuickInsertMenuFooterItem';
 import { QuickInsertRecommendedSlot } from './QuickInsertRecommendedSlot';
 import { QuickInsertSectionOverflowMenuItem } from './QuickInsertSectionOverflowMenuItem';
+import QuickInsertMenuRoot from './registered-menu/QuickInsertMenuRoot';
+import { QuickInsertMenuSection } from './registered-menu/QuickInsertMenuSection';
 var categories = [{
   message: messages.categoryRecommended,
   section: RECOMMENDED_SECTION
@@ -61,7 +58,10 @@ export var getQuickInsertComponents = function getQuickInsertComponents(_ref2) {
   var api = _ref2.api,
     includeElementBrowserItems = _ref2.includeElementBrowserItems,
     isRecommendedItem = _ref2.isRecommendedItem,
-    maxRecommendedItems = _ref2.maxRecommendedItems;
+    maxRecommendedItems = _ref2.maxRecommendedItems,
+    getItemRank = _ref2.getItemRank,
+    emptyStateHandler = _ref2.emptyStateHandler,
+    fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
   var recommendedSnapshot = createRecommendedSnapshotCache({
     api: api,
     isRecommendedItem: isRecommendedItem,
@@ -86,21 +86,33 @@ export var getQuickInsertComponents = function getQuickInsertComponents(_ref2) {
           surfaceContext = _ref3.surfaceContext;
         return !recommendedSnapshot.getSnapshot(surfaceContext)[index];
       },
-      component: function component(props) {
-        return /*#__PURE__*/React.createElement(QuickInsertRecommendedSlot, _objectSpread(_objectSpread({}, props), {}, {
+      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: QuickInsertMenuRoot
-  }].concat(recommendedSlots, _toConsumableArray(categories.flatMap(function (_ref4) {
-    var message = _ref4.message,
-      section = _ref4.section;
+    component: function component(_ref5) {
+      var children = _ref5.children;
+      return /*#__PURE__*/React.createElement(QuickInsertMenuRoot, {
+        getItemRank: getItemRank,
+        emptyStateHandler: emptyStateHandler,
+        fireAnalyticsEvent: fireAnalyticsEvent
+      }, children);
+    }
+  }].concat(recommendedSlots, _toConsumableArray(categories.flatMap(function (_ref6) {
+    var message = _ref6.message,
+      section = _ref6.section;
     return [{
       key: section.key,
       type: section.type,
@@ -111,8 +123,8 @@ export var getQuickInsertComponents = function getQuickInsertComponents(_ref2) {
       }],
       component: createSectionComponent(message),
       isHidden: section.key === RECOMMENDED_SECTION.key ? function () {
-        var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          surfaceContext = _ref5.surfaceContext;
+        var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          surfaceContext = _ref7.surfaceContext;
         return recommendedSnapshot.getSnapshot(surfaceContext).length === 0;
       } : undefined
     }].concat(_toConsumableArray(includeElementBrowserItems && section.key !== RECOMMENDED_SECTION.key ? [{