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

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);
@@ -121,17 +120,31 @@ export var getRegistryElementBrowserItems = function getRegistryElementBrowserIt
   if (!normalizedQuery) {
     return itemsWithDescriptions;
   }
-  return itemsWithDescriptions.flatMap(function (item) {
+  var matches = itemsWithDescriptions.flatMap(function (item) {
     var _item$registration$ma, _item$registration;
     var result = (_item$registration$ma = (_item$registration = item.registration).match) === null || _item$registration$ma === void 0 ? void 0 : _item$registration$ma.call(_item$registration, {
       formatMessage: formatMessage,
+      itemKey: item.registration.key,
       query: normalizedQuery
     });
     return result ? [_objectSpread(_objectSpread({}, item), {}, {
+      priorityGroup: result.priorityGroup !== undefined && Number.isFinite(result.priorityGroup) ? result.priorityGroup : undefined,
       score: Math.min(1, Math.max(0, result.score))
     })] : [];
-  }).sort(function (left, right) {
+  });
+  var prioritized = matches.filter(function (_ref4) {
+    var priorityGroup = _ref4.priorityGroup;
+    return priorityGroup !== undefined;
+  });
+  var unprioritized = matches.filter(function (_ref5) {
+    var priorityGroup = _ref5.priorityGroup;
+    return priorityGroup === undefined;
+  });
+  return [].concat(_toConsumableArray(prioritized.sort(function (left, right) {
+    var _right$priorityGroup, _left$priorityGroup;
+    return ((_right$priorityGroup = right.priorityGroup) !== null && _right$priorityGroup !== void 0 ? _right$priorityGroup : 0) - ((_left$priorityGroup = left.priorityGroup) !== null && _left$priorityGroup !== void 0 ? _left$priorityGroup : 0) || left.score - right.score || compareRanks(left.ranks, right.ranks) || left.registration.key.localeCompare(right.registration.key);
+  })), _toConsumableArray(unprioritized.sort(function (left, right) {
     var _left$ranks$, _right$ranks$;
     return ((_left$ranks$ = left.ranks[0]) !== null && _left$ranks$ !== void 0 ? _left$ranks$ : 0) - ((_right$ranks$ = right.ranks[0]) !== null && _right$ranks$ !== void 0 ? _right$ranks$ : 0) || left.score - right.score || compareRanks(left.ranks, right.ranks) || left.registration.key.localeCompare(right.registration.key);
-  });
+  })));
 };

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 ? [{

package/dist/esm/ui/getRecommendedComponents.js

@@ -2,9 +2,9 @@ import { logException } from '@atlaskit/editor-common/monitoring/error';
 import { quickInsertProviderMenuItemKey } from '@atlaskit/editor-common/quick-insert/get-provider-menu-item-key';
 import { defaultIsRecommendedItem } from '@atlaskit/editor-common/quick-insert/is-recommended-item';
 import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
+import { REGISTERED_MENU_SURFACE_CONTEXT } from '@atlaskit/editor-common/registered-menu/surface-context';
 import { isMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-is-menu-footer-section-key';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
-import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
 export var MAX_RECOMMENDED_ITEMS = 5;
 export var RECOMMENDED_SLOT_KEY_PREFIX = 'quick-insert-recommended-slot-';
 export var isRecommendedSlotKey = function isRecommendedSlotKey(key) {
@@ -76,7 +76,7 @@ export var createRecommendedSnapshotCache = function createRecommendedSnapshotCa
   var snapshot;
   var getSnapshot = function getSnapshot(surfaceContext) {
     var _surfaceContext$get, _snapshot;
-    var menuOpenId = surfaceContext === null || surfaceContext === void 0 || (_surfaceContext$get = surfaceContext.get(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(REGISTERED_MENU_SURFACE_CONTEXT)) === null || _surfaceContext$get === void 0 ? void 0 : _surfaceContext$get.menuOpenId;
     if (!surfaceContext || !menuOpenId) {
       return [];
     }

package/dist/esm/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/esm/ui/registered-menu/QuickInsertEmptyState.js

@@ -0,0 +1,50 @@
+/* QuickInsertEmptyState.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./QuickInsertEmptyState.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { lazy, LazySuspense } from 'react-loosely-lazy';
+import { cx } from '@atlaskit/css';
+import { messages } from '@atlaskit/editor-common/quick-insert/messages';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Text } from '@atlaskit/primitives/compiled/text';
+var NoResultsIllustration = lazy(function () {
+  return import( /* 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"
+};
+export var 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 = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var illustrationSize = mode === 'full' ? {
+    width: 76,
+    height: 84
+  } : {
+    width: 57,
+    height: 63
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: "quick-insert-empty-state",
+    xcss: cx(styles.base, styles[spacing])
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: mode === 'full' ? styles.fullIllustration : styles.inlineIllustration
+  }, /*#__PURE__*/React.createElement(LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(NoResultsIllustration, {
+    width: illustrationSize.width,
+    height: illustrationSize.height
+  }))), /*#__PURE__*/React.createElement(Text, {
+    align: "center"
+  }, formatMessage(messages.noSearchResults)));
+};

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

@@ -0,0 +1,211 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toArray from "@babel/runtime/helpers/toArray";
+var _excluded = ["rows", "selectableItems", "selectedItemIndex", "activeItemKey"];
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages/insert-block';
+import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
+import { useRegisteredMenuContext } from '@atlaskit/editor-common/registered-menu/context';
+import { REGISTERED_MENU_SURFACE_CONTEXT } from '@atlaskit/editor-common/registered-menu/surface-context';
+import { useRegisteredMenu } from '@atlaskit/editor-common/registered-menu/use-registered-menu';
+import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
+import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead/messages';
+import MenuGroup from '@atlaskit/menu/menu-group';
+import { getQuickInsertMenuModel } from './get-quick-insert-menu-model';
+import { getQuickInsertMenuItemId } from './getQuickInsertMenuItemId';
+import { RegisteredQuickInsertMenuItem } from './RegisteredQuickInsertMenuItem';
+import { selectQuickInsertCategoryItems } from './selectQuickInsertCategoryItems';
+import { ToolbarQuickInsertMenu } from './ToolbarQuickInsertMenu';
+import { TypeAheadQuickInsertMenu } from './TypeAheadQuickInsertMenu';
+import { useQuickInsertSearchAnalytics } from './useQuickInsertSearchAnalytics';
+var DEFAULT_MENU_MAX_HEIGHT = 480;
+var isImeEnter = function isImeEnter(event) {
+  return event.isComposing || event.keyCode === 229;
+};
+var QuickInsertMenuRoot = function QuickInsertMenuRoot(_ref) {
+  var _surfaceContext$get, _registeredMenu$maxHe;
+  var emptyStateHandler = _ref.emptyStateHandler,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
+    getItemRank = _ref.getItemRank;
+  var registeredMenu = useRegisteredMenuContext();
+  var _registeredMenu$query = registeredMenu.query,
+    query = _registeredMenu$query === void 0 ? '' : _registeredMenu$query,
+    selectFromHost = registeredMenu.select,
+    surfaceContext = registeredMenu.surfaceContext;
+  var surface = (_surfaceContext$get = surfaceContext.get(REGISTERED_MENU_SURFACE_CONTEXT)) === null || _surfaceContext$get === void 0 ? void 0 : _surfaceContext$get.surface;
+  if (!selectFromHost || !surface || surface === 'element-browser') {
+    throw new Error('QuickInsertMenuRoot requires a selection action and registered menu surface');
+  }
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var components = registeredMenu.components,
+    runtimeItemRank = registeredMenu.getItemRank,
+    rootComponent = registeredMenu.rootComponent;
+  var model = useMemo(function () {
+    return getQuickInsertMenuModel({
+      components: components,
+      formatMessage: formatMessage,
+      getItemRank: runtimeItemRank !== null && runtimeItemRank !== void 0 ? runtimeItemRank : getItemRank,
+      query: query,
+      rootComponent: rootComponent,
+      selectCategoryItems: components.some(function (_ref2) {
+        var key = _ref2.key;
+        return isSectionOverflowItemKey(key);
+      }) ? selectQuickInsertCategoryItems : undefined,
+      surfaceContext: surfaceContext
+    });
+  }, [components, formatMessage, getItemRank, query, rootComponent, runtimeItemRank, surfaceContext]);
+  var resultCount = useMemo(function () {
+    return model.sections.reduce(function (count, _ref3) {
+      var _ref4 = _toArray(_ref3),
+        items = _arrayLikeToArray(_ref4).slice(1);
+      return count + items.filter(function (_ref5) {
+        var key = _ref5.key;
+        return !isSectionOverflowItemKey(key);
+      }).length;
+    }, 0);
+  }, [model.sections]);
+  var flushSearchAnalytics = useQuickInsertSearchAnalytics({
+    surface: surface,
+    fireAnalyticsEvent: fireAnalyticsEvent,
+    query: query,
+    resultCount: resultCount
+  });
+  var selectItem = useCallback(function (selection) {
+    flushSearchAnalytics();
+    selectFromHost(function (insert) {
+      return selection({
+        insert: insert,
+        source: surface === 'toolbar' ? INPUT_METHOD.INSERT_MENU : INPUT_METHOD.QUICK_INSERT
+      });
+    });
+  }, [flushSearchAnalytics, selectFromHost, surface]);
+  var menuContextValue = useMemo(function () {
+    return {
+      editorView: registeredMenu.editorView,
+      isOffline: registeredMenu.isOffline,
+      popupsMountPoint: registeredMenu.portalMountPoint,
+      select: selectItem,
+      surfaceContext: registeredMenu.surfaceContext
+    };
+  }, [registeredMenu.editorView, registeredMenu.isOffline, registeredMenu.portalMountPoint, registeredMenu.surfaceContext, selectItem]);
+  var listLabel = formatMessage(surface === 'typeahead' ? typeAheadListMessages.quickInsertInputLabel : toolbarInsertBlockMessages.insertMenu);
+  var _useRegisteredMenu = useRegisteredMenu({
+      model: model,
+      resetKey: query
+    }),
+    rows = _useRegisteredMenu.rows,
+    selectableItems = _useRegisteredMenu.selectableItems,
+    selectedItemIndex = _useRegisteredMenu.selectedItemIndex,
+    activeItemKey = _useRegisteredMenu.activeItemKey,
+    listEvents = _objectWithoutProperties(_useRegisteredMenu, _excluded);
+  var listId = useId();
+  var _useState = useState({
+      startIndex: -1,
+      stopIndex: -1
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    renderedItems = _useState2[0],
+    setRenderedItems = _useState2[1];
+  var menuRef = useRef(null);
+  var maxHeight = (_registeredMenu$maxHe = registeredMenu.maxHeight) !== null && _registeredMenu$maxHe !== void 0 ? _registeredMenu$maxHe : DEFAULT_MENU_MAX_HEIGHT;
+  var itemCount = selectableItems.length + (model.footer ? 1 : 0);
+  var activeItemId = selectedItemIndex >= 0 && selectedItemIndex < itemCount ? getQuickInsertMenuItemId(listId, selectedItemIndex) : undefined;
+  var isActiveItemMounted = selectedItemIndex >= 0 && selectedItemIndex < itemCount && (selectedItemIndex >= renderedItems.startIndex && selectedItemIndex <= renderedItems.stopIndex || Boolean(model.footer) && selectedItemIndex === itemCount - 1);
+  var selectActiveItem = useCallback(function () {
+    if (isActiveItemMounted && activeItemId) {
+      var _menuRef$current;
+      (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || (_menuRef$current = _menuRef$current.ownerDocument.getElementById(activeItemId)) === null || _menuRef$current === void 0 || _menuRef$current.click();
+    }
+  }, [activeItemId, isActiveItemMounted]);
+  var onMenuKeyDown = useCallback(function (event) {
+    if (event.key === 'ArrowDown') {
+      listEvents.selectNext();
+      return true;
+    }
+    if (event.key === 'ArrowUp') {
+      listEvents.selectPrevious();
+      return true;
+    }
+    if (event.key === 'Enter') {
+      if (isImeEnter(event)) {
+        return false;
+      }
+      selectActiveItem();
+      return true;
+    }
+    return false;
+  }, [listEvents.selectNext, listEvents.selectPrevious, selectActiveItem]);
+  var containsTarget = useCallback(function (target) {
+    var _menuRef$current2;
+    return Boolean((_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.contains(target));
+  }, []);
+  var interaction = useMemo(function () {
+    return {
+      activeDescendantId: isActiveItemMounted ? activeItemId : undefined,
+      containsTarget: containsTarget,
+      expanded: itemCount > 0,
+      label: listLabel,
+      listId: listId,
+      onKeyDown: onMenuKeyDown,
+      onClose: flushSearchAnalytics,
+      optionCount: itemCount,
+      selectNext: listEvents.selectNext,
+      selectPrevious: listEvents.selectPrevious
+    };
+  }, [activeItemId, containsTarget, flushSearchAnalytics, isActiveItemMounted, itemCount, listId, listLabel, listEvents.selectNext, listEvents.selectPrevious, onMenuKeyDown]);
+  useLayoutEffect(function () {
+    if (!model.root) {
+      return;
+    }
+    return registeredMenu.registerInteraction(interaction);
+  }, [model.root, interaction, registeredMenu.registerInteraction]);
+  if (!model.root) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
+    value: menuContextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: menuRef
+  }, /*#__PURE__*/React.createElement(MenuGroup, null, surface === 'typeahead' ? /*#__PURE__*/React.createElement(TypeAheadQuickInsertMenu, {
+    Item: RegisteredQuickInsertMenuItem,
+    activeItemKey: activeItemKey,
+    hasScrollPadding: true,
+    itemCount: itemCount,
+    listId: listId,
+    listLabel: listLabel,
+    maxHeight: maxHeight,
+    model: model,
+    onItemBlur: listEvents.onItemBlur,
+    onItemFocus: listEvents.onItemFocus,
+    onItemHover: listEvents.onItemHover,
+    onItemLeave: listEvents.onItemLeave,
+    onItemVisibilityChange: listEvents.onItemVisibilityChange,
+    onRenderedItemsChange: setRenderedItems,
+    query: query,
+    rows: rows,
+    selectedItemIndex: selectedItemIndex
+  }) : /*#__PURE__*/React.createElement(ToolbarQuickInsertMenu, {
+    Item: RegisteredQuickInsertMenuItem,
+    activePreviewItemKey: activeItemKey,
+    emptyStateHandler: emptyStateHandler,
+    itemCount: itemCount,
+    listId: listId,
+    listLabel: listLabel,
+    maxHeight: maxHeight,
+    model: model,
+    onItemBlur: listEvents.onItemBlur,
+    onItemFocus: listEvents.onItemFocus,
+    onItemHover: listEvents.onItemHover,
+    onItemLeave: listEvents.onItemLeave,
+    onItemVisibilityChange: listEvents.onItemVisibilityChange,
+    onRenderedItemsChange: setRenderedItems,
+    query: query,
+    rows: rows,
+    selectedItemIndex: selectedItemIndex
+  }))));
+};
+export default QuickInsertMenuRoot;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import HeadingItem from '@atlaskit/menu/heading-item';
+import { Box } from '@atlaskit/primitives/compiled/box';
+export var QuickInsertMenuSection = function QuickInsertMenuSection(_ref) {
+  var children = _ref.children,
+    title = _ref.title;
+  return /*#__PURE__*/React.createElement(Box, {
+    role: "group",
+    "aria-label": title
+  }, /*#__PURE__*/React.createElement(Box, {
+    paddingBlockStart: "space.150",
+    paddingBlockEnd: "space.050"
+  }, /*#__PURE__*/React.createElement(HeadingItem, {
+    "aria-hidden": true
+  }, title)), children);
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { messages } from '@atlaskit/editor-common/quick-insert/messages';
+import { QuickInsertMenuSection } from './QuickInsertMenuSection';
+export var QuickInsertSearchResultsSection = function QuickInsertSearchResultsSection(_ref) {
+  var children = _ref.children;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(QuickInsertMenuSection, {
+    title: formatMessage(messages.searchResults)
+  }, children);
+};

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

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

package/dist/esm/ui/registered-menu/ToolbarQuickInsertMenu.compiled.css

@@ -0,0 +1,11 @@
+._15a5nqa1{border-top-style:solid}
+._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._1e0c1txw{display:flex}
+._1i531l7x{border-top-color:var(--ds-border,#0b120e24)}
+._1o9zidpf{flex-shrink:0}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._1tkeidpf{min-height:0}
+._2lx21bp4{flex-direction:column}
+._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}