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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 30.0.0
+
+### Minor Changes
+
+- [`7e91f3141329d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e91f3141329d) -
+  Decouple Quick Insert menu rendering and interaction from typeahead under the existing
+  `platform_editor_slash_command` experiment.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 29.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 29.0.3
 
 ### Patch Changes

package/dist/cjs/quickInsertPlugin.js

@@ -13,6 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _isSsr = require("@atlaskit/editor-common/is-ssr");
 var _insertBlock = require("@atlaskit/editor-common/messages/insert-block");
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
 var _quickInsertRank = require("@atlaskit/editor-common/quick-insert/quick-insert-rank");
 var _utils = require("@atlaskit/editor-common/quick-insert/utils");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
@@ -44,6 +45,7 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
   var getItemRank = (0, _quickInsertRank.createQuickInsertRankResolver)(options === null || options === void 0 ? void 0 : options.getItemRank);
   var typeAhead = {
     id: _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT,
+    registeredMenuKey: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command') ? _keys.MENU.key : undefined,
     getRegisteredItemRank: getItemRank,
     trigger: '/',
     // Support fullwidth slash (U+FF0F) used by Japanese/CJK keyboards (e.g. typing / on a Japanese keyboard layout)
@@ -85,12 +87,15 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
     } : undefined
   };
   if ((0, _isExperimentEnabled.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((0, _getQuickInsertComponents.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 ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') && (options === null || options === void 0 ? void 0 : options.blockControlButtonEnabled) !== false) {
@@ -149,8 +154,8 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
           return (0, _quickInsertOpenExperience.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/cjs/ui/QuickInsertRecommendedSlot.js

@@ -5,16 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.QuickInsertRecommendedSlot = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _useQuickInsertContext = require("@atlaskit/editor-common/quick-insert/use-quick-insert-context");
-var _excluded = ["index", "getSnapshot"];
 var QuickInsertRecommendedSlot = exports.QuickInsertRecommendedSlot = function QuickInsertRecommendedSlot(_ref) {
-  var index = _ref.index,
-    getSnapshot = _ref.getSnapshot,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var children = _ref.children,
+    parents = _ref.parents,
+    surfaceContext = _ref.surfaceContext,
+    index = _ref.index,
+    getSnapshot = _ref.getSnapshot;
   var _useQuickInsertContex = (0, _useQuickInsertContext.useQuickInsertContext)(),
-    surfaceContext = _useQuickInsertContex.surfaceContext;
-  var item = getSnapshot(surfaceContext)[index];
-  return item !== null && item !== void 0 && item.component ? /*#__PURE__*/_react.default.createElement(item.component, props) : null;
+    menuSurfaceContext = _useQuickInsertContex.surfaceContext;
+  var item = getSnapshot(menuSurfaceContext)[index];
+  return item !== null && item !== void 0 && item.component ? /*#__PURE__*/_react.default.createElement(item.component, {
+    parents: parents,
+    surfaceContext: surfaceContext
+  }, children) : null;
 };

package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowser.js

@@ -16,7 +16,7 @@ var _reactIntl = require("react-intl");
 var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _keys = require("@atlaskit/editor-common/quick-insert/keys");
-var _useSearchAnalytics = require("@atlaskit/editor-common/quick-insert/use-search-analytics");
+var _surfaceContext = require("@atlaskit/editor-common/registered-menu/surface-context");
 var _typeAheadGetMenuFooterSectionKey = require("@atlaskit/editor-common/type-ahead-get-menu-footer-section-key");
 var _typeAheadGetSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-get-section-overflow-item-key");
 var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
@@ -29,6 +29,7 @@ var _modalTitle = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-t
 var _modalTransition = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-transition"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _textField = _interopRequireDefault(require("@atlaskit/textfield/text-field"));
+var _useQuickInsertSearchAnalytics = require("../registered-menu/useQuickInsertSearchAnalytics");
 var _model = require("./model");
 var _RegistryElementBrowserCategories = require("./RegistryElementBrowserCategories");
 var _RegistryElementBrowserFooter = require("./RegistryElementBrowserFooter");
@@ -71,13 +72,34 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     onSelect = _ref.onSelect;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var _useState = (0, _react.useState)({
+  var _useState = (0, _react.useState)(function () {
+      return {
+        isOpen: isOpen,
+        menuOpenId: Symbol('element-browser')
+      };
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    session = _useState2[0],
+    setSession = _useState2[1];
+  if (session.isOpen !== isOpen) {
+    setSession({
+      isOpen: isOpen,
+      menuOpenId: isOpen ? Symbol('element-browser') : session.menuOpenId
+    });
+  }
+  var surfaceContext = (0, _react.useMemo)(function () {
+    return (0, _surfaceContext.createRegisteredMenuSurfaceContext)({
+      menuOpenId: session.menuOpenId,
+      surface: 'element-browser'
+    });
+  }, [session.menuOpenId]);
+  var _useState3 = (0, _react.useState)({
       query: '',
       section: defaultSection
     }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    browserState = _useState2[0],
-    setBrowserState = _useState2[1];
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    browserState = _useState4[0],
+    setBrowserState = _useState4[1];
   var query = browserState.query,
     section = browserState.section,
     selectedRegistration = browserState.selectedRegistration;
@@ -85,6 +107,7 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
   var browserModel = (0, _react.useMemo)(function () {
     var model = (0, _model.createRegistryElementBrowserModel)(components, {
       footerKey: (0, _typeAheadGetMenuFooterSectionKey.getMenuFooterSectionKey)(_keys.MENU.key),
+      surfaceContext: surfaceContext,
       overflowKeys: new Set(components.filter(function (component) {
         return component.type === 'menu-section';
       }).map(function (component) {
@@ -107,7 +130,7 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
         section: effectiveSection
       })
     };
-  }, [components, formatMessage, query, section]);
+  }, [components, formatMessage, query, section, surfaceContext]);
   var model = browserModel.model,
     effectiveSection = browserModel.effectiveSection,
     items = browserModel.items;
@@ -167,7 +190,7 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     }
   }, [browserState.invalidation, isOpen, onClearSelection]);
   var resultCount = items.length || (!isLoading && query.trim() ? (_model$fallbackItems$ = (_model$fallbackItems2 = model.fallbackItems) === null || _model$fallbackItems2 === void 0 ? void 0 : _model$fallbackItems2.length) !== null && _model$fallbackItems$ !== void 0 ? _model$fallbackItems$ : 0 : 0);
-  var flushSearchAnalytics = (0, _useSearchAnalytics.useQuickInsertSearchAnalytics)({
+  var flushSearchAnalytics = (0, _useQuickInsertSearchAnalytics.useQuickInsertSearchAnalytics)({
     query: query,
     resultCount: items.length,
     surface: 'element-browser',
@@ -361,6 +384,7 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     fallbackItems: model.fallbackItems,
     query: query,
     resultsId: resultsId,
+    surfaceContext: surfaceContext,
     section: effectiveSection,
     selectedKey: selectedKey,
     onKeyDown: onKeyDown,

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

@@ -10,8 +10,8 @@ require("./RegistryElementBrowserSearchResults.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
-var _emptyState = require("@atlaskit/editor-common/quick-insert/empty-state");
 var _provider = require("@atlaskit/editor-common/quick-insert/provider");
+var _QuickInsertEmptyState = require("../registered-menu/QuickInsertEmptyState");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // oxlint-disable-next-line eslint/no-redeclare
 
@@ -25,7 +25,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;
@@ -41,15 +42,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.default.createElement(_provider.QuickInsertProvider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Component, undefined, null));
+  }, /*#__PURE__*/_react.default.createElement(Component, {
+    parents: item.registration.parents,
+    surfaceContext: surfaceContext
+  }, null));
 };
 var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchResults = function RegistryElementBrowserSearchResults(_ref2) {
   var editorView = _ref2.editorView,
@@ -63,6 +67,7 @@ var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchRe
     resultsId = _ref2.resultsId,
     section = _ref2.section,
     selectedKey = _ref2.selectedKey,
+    surfaceContext = _ref2.surfaceContext,
     onKeyDown = _ref2.onKeyDown,
     onSelect = _ref2.onSelect;
   var _useIntl = (0, _reactIntl.useIntl)(),
@@ -103,9 +108,10 @@ var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchRe
       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.default.createElement(_emptyState.QuickInsertEmptyState, {
+  })), shouldRenderEmptyState && !hasFallbackItems && query.trim().length > 0 && /*#__PURE__*/_react.default.createElement(_QuickInsertEmptyState.QuickInsertEmptyState, {
     mode: "full"
   }), emptyState && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_yyhyjvu9 _1ul9idpf _1bsb1osq", styles.fallbackMarketplace])

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

@@ -21,16 +21,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) {
@@ -39,8 +37,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((0, _toConsumableArray2.default)(ancestorRanks), [getParentRank(component, parentKey)]);
     if (component.type === 'menu-item') {
       return component.component ? [{
@@ -49,7 +47,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);
   });
 };
 
@@ -61,12 +59,13 @@ var createRegistryElementBrowserModel = exports.createRegistryElementBrowserMode
   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((0, _toConsumableArray2.default)(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 {
@@ -78,7 +77,7 @@ var createRegistryElementBrowserModel = exports.createRegistryElementBrowserMode
   });
   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/cjs/ui/getQuickInsertComponents.js

@@ -6,12 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getQuickInsertComponents = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _keys = require("@atlaskit/editor-common/quick-insert/keys");
-var _menuRoot = require("@atlaskit/editor-common/quick-insert/menu-root");
-var _menuSection = require("@atlaskit/editor-common/quick-insert/menu-section");
 var _messages = require("@atlaskit/editor-common/quick-insert/messages");
 var _rank = require("@atlaskit/editor-common/quick-insert/rank");
 var _typeAheadGetMenuFooterSectionKey = require("@atlaskit/editor-common/type-ahead-get-menu-footer-section-key");
@@ -20,8 +17,8 @@ var _getRecommendedComponents = require("./getRecommendedComponents");
 var _QuickInsertMenuFooterItem = require("./QuickInsertMenuFooterItem");
 var _QuickInsertRecommendedSlot = require("./QuickInsertRecommendedSlot");
 var _QuickInsertSectionOverflowMenuItem = require("./QuickInsertSectionOverflowMenuItem");
-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 _QuickInsertMenuRoot = _interopRequireDefault(require("./registered-menu/QuickInsertMenuRoot"));
+var _QuickInsertMenuSection = require("./registered-menu/QuickInsertMenuSection");
 var categories = [{
   message: _messages.messages.categoryRecommended,
   section: _keys.RECOMMENDED_SECTION
@@ -58,7 +55,7 @@ var createSectionComponent = function createSectionComponent(message) {
     var children = _ref.children;
     var _useIntl = (0, _reactIntl.useIntl)(),
       formatMessage = _useIntl.formatMessage;
-    return /*#__PURE__*/_react.default.createElement(_menuSection.QuickInsertMenuSection, {
+    return /*#__PURE__*/_react.default.createElement(_QuickInsertMenuSection.QuickInsertMenuSection, {
       title: formatMessage(message)
     }, children);
   };
@@ -68,7 +65,10 @@ var getQuickInsertComponents = exports.getQuickInsertComponents = function getQu
   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 = (0, _getRecommendedComponents.createRecommendedSnapshotCache)({
     api: api,
     isRecommendedItem: isRecommendedItem,
@@ -93,21 +93,33 @@ var getQuickInsertComponents = exports.getQuickInsertComponents = function getQu
           surfaceContext = _ref3.surfaceContext;
         return !recommendedSnapshot.getSnapshot(surfaceContext)[index];
       },
-      component: function component(props) {
-        return /*#__PURE__*/_react.default.createElement(_QuickInsertRecommendedSlot.QuickInsertRecommendedSlot, _objectSpread(_objectSpread({}, props), {}, {
+      component: function component(_ref4) {
+        var children = _ref4.children,
+          parents = _ref4.parents,
+          surfaceContext = _ref4.surfaceContext;
+        return /*#__PURE__*/_react.default.createElement(_QuickInsertRecommendedSlot.QuickInsertRecommendedSlot, {
+          parents: parents,
+          surfaceContext: surfaceContext,
           index: index,
           getSnapshot: recommendedSnapshot.getSnapshot
-        }));
+        }, children);
       }
     };
   });
   return [{
     key: _keys.MENU.key,
     type: _keys.MENU.type,
-    component: _menuRoot.QuickInsertMenuRoot
-  }].concat(recommendedSlots, (0, _toConsumableArray2.default)(categories.flatMap(function (_ref4) {
-    var message = _ref4.message,
-      section = _ref4.section;
+    component: function component(_ref5) {
+      var children = _ref5.children;
+      return /*#__PURE__*/_react.default.createElement(_QuickInsertMenuRoot.default, {
+        getItemRank: getItemRank,
+        emptyStateHandler: emptyStateHandler,
+        fireAnalyticsEvent: fireAnalyticsEvent
+      }, children);
+    }
+  }].concat(recommendedSlots, (0, _toConsumableArray2.default)(categories.flatMap(function (_ref6) {
+    var message = _ref6.message,
+      section = _ref6.section;
     return [{
       key: section.key,
       type: section.type,
@@ -118,8 +130,8 @@ var getQuickInsertComponents = exports.getQuickInsertComponents = function getQu
       }],
       component: createSectionComponent(message),
       isHidden: section.key === _keys.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((0, _toConsumableArray2.default)(includeElementBrowserItems && section.key !== _keys.RECOMMENDED_SECTION.key ? [{

package/dist/cjs/ui/getRecommendedComponents.js

@@ -8,9 +8,9 @@ var _error = require("@atlaskit/editor-common/monitoring/error");
 var _getProviderMenuItemKey = require("@atlaskit/editor-common/quick-insert/get-provider-menu-item-key");
 var _isRecommendedItem = require("@atlaskit/editor-common/quick-insert/is-recommended-item");
 var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _surfaceContext = require("@atlaskit/editor-common/registered-menu/surface-context");
 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 _typeAheadSurfaceContext = require("@atlaskit/editor-common/type-ahead-surface-context");
 var MAX_RECOMMENDED_ITEMS = exports.MAX_RECOMMENDED_ITEMS = 5;
 var RECOMMENDED_SLOT_KEY_PREFIX = exports.RECOMMENDED_SLOT_KEY_PREFIX = 'quick-insert-recommended-slot-';
 var isRecommendedSlotKey = exports.isRecommendedSlotKey = function isRecommendedSlotKey(key) {
@@ -82,7 +82,7 @@ var createRecommendedSnapshotCache = exports.createRecommendedSnapshotCache = fu
   var snapshot;
   var getSnapshot = function getSnapshot(surfaceContext) {
     var _surfaceContext$get, _snapshot;
-    var menuOpenId = surfaceContext === null || surfaceContext === void 0 || (_surfaceContext$get = surfaceContext.get(_typeAheadSurfaceContext.TYPE_AHEAD_SURFACE_CONTEXT)) === null || _surfaceContext$get === void 0 ? void 0 : _surfaceContext$get.menuOpenId;
+    var menuOpenId = surfaceContext === null || surfaceContext === void 0 || (_surfaceContext$get = surfaceContext.get(_surfaceContext.REGISTERED_MENU_SURFACE_CONTEXT)) === null || _surfaceContext$get === void 0 ? void 0 : _surfaceContext$get.menuOpenId;
     if (!surfaceContext || !menuOpenId) {
       return [];
     }

package/dist/cjs/ui/registered-menu/QuickInsertEmptyState.compiled.css

@@ -0,0 +1,11 @@
+._zulp1ejb{gap:var(--ds-space-300,24px)}
+._1rjcoahv{padding-block:var(--ds-space-600,3pc)}
+._1rjcxy5q{padding-block:var(--ds-space-400,2pc)}._1bah1h6o{justify-content:center}
+._1bsb1mcy{width:57px}
+._1bsb1osq{width:100%}
+._1bsbtudo{width:76px}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1h39{height:63px}
+._4t3io7ol{height:84px}

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

@@ -0,0 +1,61 @@
+/* QuickInsertEmptyState.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuickInsertEmptyState = void 0;
+require("./QuickInsertEmptyState.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _reactLooselyLazy = require("react-loosely-lazy");
+var _css = require("@atlaskit/css");
+var _messages = require("@atlaskit/editor-common/quick-insert/messages");
+var _box = require("@atlaskit/primitives/compiled/box");
+var _text = require("@atlaskit/primitives/compiled/text");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var NoResultsIllustration = (0, _reactLooselyLazy.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-quick-insert-no-results" */
+    './assets/no-results'));
+  }).then(function (module) {
+    return module.default;
+  });
+});
+var styles = {
+  base: "_zulp1ejb _4cvr1h6o _1e0c1txw _2lx21bp4 _1bah1h6o _1bsb1osq",
+  compact: "_1rjcxy5q",
+  spacious: "_1rjcoahv",
+  inlineIllustration: "_4t3i1h39 _1bsb1mcy",
+  fullIllustration: "_4t3io7ol _1bsbtudo"
+};
+var QuickInsertEmptyState = exports.QuickInsertEmptyState = function QuickInsertEmptyState(_ref) {
+  var mode = _ref.mode,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? mode === 'full' ? 'spacious' : 'compact' : _ref$spacing;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var illustrationSize = mode === 'full' ? {
+    width: 76,
+    height: 84
+  } : {
+    width: 57,
+    height: 63
+  };
+  return /*#__PURE__*/_react.default.createElement(_box.Box, {
+    testId: "quick-insert-empty-state",
+    xcss: (0, _css.cx)(styles.base, styles[spacing])
+  }, /*#__PURE__*/_react.default.createElement(_box.Box, {
+    xcss: mode === 'full' ? styles.fullIllustration : styles.inlineIllustration
+  }, /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(NoResultsIllustration, {
+    width: illustrationSize.width,
+    height: illustrationSize.height
+  }))), /*#__PURE__*/_react.default.createElement(_text.Text, {
+    align: "center"
+  }, formatMessage(_messages.messages.noSearchResults)));
+};