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

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

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _enums = require("@atlaskit/editor-common/analytics/types/enums");
+var _insertBlock = require("@atlaskit/editor-common/messages/insert-block");
+var _provider = require("@atlaskit/editor-common/quick-insert/provider");
+var _context = require("@atlaskit/editor-common/registered-menu/context");
+var _surfaceContext = require("@atlaskit/editor-common/registered-menu/surface-context");
+var _useRegisteredMenu2 = require("@atlaskit/editor-common/registered-menu/use-registered-menu");
+var _typeAheadIsSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-is-section-overflow-item-key");
+var _messages = require("@atlaskit/editor-common/type-ahead/messages");
+var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
+var _getQuickInsertMenuModel = require("./get-quick-insert-menu-model");
+var _getQuickInsertMenuItemId = require("./getQuickInsertMenuItemId");
+var _RegisteredQuickInsertMenuItem = require("./RegisteredQuickInsertMenuItem");
+var _selectQuickInsertCategoryItems = require("./selectQuickInsertCategoryItems");
+var _ToolbarQuickInsertMenu = require("./ToolbarQuickInsertMenu");
+var _TypeAheadQuickInsertMenu = require("./TypeAheadQuickInsertMenu");
+var _useQuickInsertSearchAnalytics = require("./useQuickInsertSearchAnalytics");
+var _excluded = ["rows", "selectableItems", "selectedItemIndex", "activeItemKey"];
+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); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var 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 = (0, _context.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(_surfaceContext.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 = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var components = registeredMenu.components,
+    runtimeItemRank = registeredMenu.getItemRank,
+    rootComponent = registeredMenu.rootComponent;
+  var model = (0, _react.useMemo)(function () {
+    return (0, _getQuickInsertMenuModel.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 (0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
+      }) ? _selectQuickInsertCategoryItems.selectQuickInsertCategoryItems : undefined,
+      surfaceContext: surfaceContext
+    });
+  }, [components, formatMessage, getItemRank, query, rootComponent, runtimeItemRank, surfaceContext]);
+  var resultCount = (0, _react.useMemo)(function () {
+    return model.sections.reduce(function (count, _ref3) {
+      var _ref4 = (0, _toArray2.default)(_ref3),
+        items = _arrayLikeToArray(_ref4).slice(1);
+      return count + items.filter(function (_ref5) {
+        var key = _ref5.key;
+        return !(0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
+      }).length;
+    }, 0);
+  }, [model.sections]);
+  var flushSearchAnalytics = (0, _useQuickInsertSearchAnalytics.useQuickInsertSearchAnalytics)({
+    surface: surface,
+    fireAnalyticsEvent: fireAnalyticsEvent,
+    query: query,
+    resultCount: resultCount
+  });
+  var selectItem = (0, _react.useCallback)(function (selection) {
+    flushSearchAnalytics();
+    selectFromHost(function (insert) {
+      return selection({
+        insert: insert,
+        source: surface === 'toolbar' ? _enums.INPUT_METHOD.INSERT_MENU : _enums.INPUT_METHOD.QUICK_INSERT
+      });
+    });
+  }, [flushSearchAnalytics, selectFromHost, surface]);
+  var menuContextValue = (0, _react.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' ? _messages.typeAheadListMessages.quickInsertInputLabel : _insertBlock.toolbarInsertBlockMessages.insertMenu);
+  var _useRegisteredMenu = (0, _useRegisteredMenu2.useRegisteredMenu)({
+      model: model,
+      resetKey: query
+    }),
+    rows = _useRegisteredMenu.rows,
+    selectableItems = _useRegisteredMenu.selectableItems,
+    selectedItemIndex = _useRegisteredMenu.selectedItemIndex,
+    activeItemKey = _useRegisteredMenu.activeItemKey,
+    listEvents = (0, _objectWithoutProperties2.default)(_useRegisteredMenu, _excluded);
+  var listId = (0, _react.useId)();
+  var _useState = (0, _react.useState)({
+      startIndex: -1,
+      stopIndex: -1
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    renderedItems = _useState2[0],
+    setRenderedItems = _useState2[1];
+  var menuRef = (0, _react.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 ? (0, _getQuickInsertMenuItemId.getQuickInsertMenuItemId)(listId, selectedItemIndex) : undefined;
+  var isActiveItemMounted = selectedItemIndex >= 0 && selectedItemIndex < itemCount && (selectedItemIndex >= renderedItems.startIndex && selectedItemIndex <= renderedItems.stopIndex || Boolean(model.footer) && selectedItemIndex === itemCount - 1);
+  var selectActiveItem = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!model.root) {
+      return;
+    }
+    return registeredMenu.registerInteraction(interaction);
+  }, [model.root, interaction, registeredMenu.registerInteraction]);
+  if (!model.root) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
+    value: menuContextValue
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: menuRef
+  }, /*#__PURE__*/_react.default.createElement(_menuGroup.default, null, surface === 'typeahead' ? /*#__PURE__*/_react.default.createElement(_TypeAheadQuickInsertMenu.TypeAheadQuickInsertMenu, {
+    Item: _RegisteredQuickInsertMenuItem.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.default.createElement(_ToolbarQuickInsertMenu.ToolbarQuickInsertMenu, {
+    Item: _RegisteredQuickInsertMenuItem.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
+  }))));
+};
+var _default = exports.default = QuickInsertMenuRoot;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuickInsertMenuSection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _headingItem = _interopRequireDefault(require("@atlaskit/menu/heading-item"));
+var _box = require("@atlaskit/primitives/compiled/box");
+var QuickInsertMenuSection = exports.QuickInsertMenuSection = function QuickInsertMenuSection(_ref) {
+  var children = _ref.children,
+    title = _ref.title;
+  return /*#__PURE__*/_react.default.createElement(_box.Box, {
+    role: "group",
+    "aria-label": title
+  }, /*#__PURE__*/_react.default.createElement(_box.Box, {
+    paddingBlockStart: "space.150",
+    paddingBlockEnd: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_headingItem.default, {
+    "aria-hidden": true
+  }, title)), children);
+};

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuickInsertSearchResultsSection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/quick-insert/messages");
+var _QuickInsertMenuSection = require("./QuickInsertMenuSection");
+var QuickInsertSearchResultsSection = exports.QuickInsertSearchResultsSection = function QuickInsertSearchResultsSection(_ref) {
+  var children = _ref.children;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_QuickInsertMenuSection.QuickInsertMenuSection, {
+    title: formatMessage(_messages.messages.searchResults)
+  }, children);
+};

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegisteredQuickInsertMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _provider = require("@atlaskit/editor-common/quick-insert/provider");
+var _useQuickInsertContext = require("@atlaskit/editor-common/quick-insert/use-quick-insert-context");
+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); }
+var RegisteredQuickInsertMenuItem = exports.RegisteredQuickInsertMenuItem = function RegisteredQuickInsertMenuItem(_ref) {
+  var _registration$compone;
+  var id = _ref.id,
+    isSelected = _ref.isSelected,
+    isActive = _ref.isActive,
+    registration = _ref.registration;
+  var _useQuickInsertContex = (0, _useQuickInsertContext.useQuickInsertContext)(),
+    editorView = _useQuickInsertContex.editorView,
+    isOffline = _useQuickInsertContex.isOffline,
+    popupsMountPoint = _useQuickInsertContex.popupsMountPoint,
+    select = _useQuickInsertContex.select,
+    surfaceContext = _useQuickInsertContex.surfaceContext;
+  var value = (0, _react.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.default.Fragment;
+  return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
+    value: value
+  }, /*#__PURE__*/_react.default.createElement(Component, null, null));
+};

package/dist/cjs/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)}

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

@@ -0,0 +1,128 @@
+/* ToolbarQuickInsertMenu.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarQuickInsertMenu = void 0;
+require("./ToolbarQuickInsertMenu.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _list = require("@atlaskit/editor-common/registered-menu/list");
+var _box = require("@atlaskit/primitives/compiled/box");
+var _getQuickInsertMenuItemId = require("./getQuickInsertMenuItemId");
+var _QuickInsertEmptyState = require("./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); }
+var MENU_FOOTER_HEIGHT = 45;
+var LIST_WIDTH = 350;
+var styles = {
+  content: "_1e0c1txw _2lx21bp4 _1tkeidpf",
+  scrollable: "_16jlkb7n _1tkeidpf _18m91wug",
+  footer: "_1o9zidpf",
+  externalControls: "_1i531l7x _15a5nqa1 _uwhke4h9 _1q51u2gc _85i5u2gc",
+  footerDivider: "_1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf"
+};
+var ToolbarQuickInsertMenu = exports.ToolbarQuickInsertMenu = function ToolbarQuickInsertMenu(_ref) {
+  var Item = _ref.Item,
+    model = _ref.model,
+    emptyStateHandler = _ref.emptyStateHandler,
+    listLabel = _ref.listLabel,
+    activePreviewItemKey = _ref.activePreviewItemKey,
+    itemCount = _ref.itemCount,
+    listId = _ref.listId,
+    maxHeight = _ref.maxHeight,
+    rows = _ref.rows,
+    onItemBlur = _ref.onItemBlur,
+    onItemFocus = _ref.onItemFocus,
+    onItemHover = _ref.onItemHover,
+    onItemLeave = _ref.onItemLeave,
+    onItemVisibilityChange = _ref.onItemVisibilityChange,
+    onRenderedItemsChange = _ref.onRenderedItemsChange,
+    query = _ref.query,
+    selectedItemIndex = _ref.selectedItemIndex;
+  var footerItemIndex = itemCount - 1;
+  var footerItemId = (0, _getQuickInsertMenuItemId.getQuickInsertMenuItemId)(listId, footerItemIndex);
+  var isEmptySearch = query !== '' && model.sections.length === 0;
+  var hasNoSearchResults = model.sections.length === 0 && model.fallbackItems.length === 0;
+  var externalControls = isEmptySearch ? emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
+    mode: 'inline',
+    searchTerm: query,
+    showNoResultsMessage: false
+  }) : null;
+  var onFooterItemFocus = (0, _react.useCallback)(function () {
+    return onItemFocus(footerItemIndex);
+  }, [footerItemIndex, onItemFocus]);
+  var onFooterItemHover = (0, _react.useCallback)(function () {
+    return onItemHover(footerItemIndex);
+  }, [footerItemIndex, onItemHover]);
+  var listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
+  var contentStyle = {
+    maxHeight: maxHeight
+  };
+  var getItemId = (0, _react.useCallback)(function (_ref2) {
+    var itemIndex = _ref2.itemIndex;
+    return (0, _getQuickInsertMenuItemId.getQuickInsertMenuItemId)(listId, itemIndex);
+  }, [listId]);
+  var onScrollableContentScroll = (0, _react.useCallback)(function (event) {
+    if (event.target === event.currentTarget && activePreviewItemKey) {
+      onItemVisibilityChange(activePreviewItemKey, false);
+    }
+  }, [activePreviewItemKey, onItemVisibilityChange]);
+  if (!model.root) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_box.Box, {
+    xcss: styles.content,
+    style: contentStyle
+  }, /*#__PURE__*/_react.default.createElement(_box.Box, {
+    xcss: styles.scrollable,
+    onScroll: onScrollableContentScroll
+  }, /*#__PURE__*/_react.default.createElement(_box.Box, {
+    "aria-label": listLabel,
+    "aria-owns": model.footer ? footerItemId : undefined,
+    id: listId,
+    role: "listbox"
+  }, rows.length > 0 && /*#__PURE__*/_react.default.createElement(_list.RegisteredMenuList, {
+    rows: rows,
+    Item: Item,
+    width: LIST_WIDTH,
+    maxHeight: listMaxHeight,
+    getItemId: getItemId,
+    activeItemKey: activePreviewItemKey,
+    selectedItemIndex: selectedItemIndex,
+    scrollResetKey: query,
+    onItemHover: onItemHover,
+    onItemFocus: onItemFocus,
+    onItemBlur: onItemBlur,
+    onItemLeave: onItemLeave,
+    onItemVisibilityChange: onItemVisibilityChange,
+    onRenderedItemsChange: onRenderedItemsChange,
+    role: "group",
+    tabIndex: null,
+    omitAriaReadonly: true,
+    lastRowPadding: "space.100",
+    scrollTo: "top-on-reset"
+  })), query !== '' && hasNoSearchResults && /*#__PURE__*/_react.default.createElement(_QuickInsertEmptyState.QuickInsertEmptyState, {
+    mode: "inline"
+  }), externalControls && /*#__PURE__*/_react.default.createElement(_box.Box, {
+    testId: "registered-insert-menu-external-controls",
+    xcss: styles.externalControls
+  }, externalControls)), model.footer && /*#__PURE__*/_react.default.createElement(_box.Box, {
+    xcss: styles.footer
+  }, /*#__PURE__*/_react.default.createElement(_box.Box, {
+    testId: "registered-insert-menu-footer",
+    xcss: styles.footer
+  }, !isEmptySearch || !hasNoSearchResults || Boolean(externalControls) ? /*#__PURE__*/_react.default.createElement(_box.Box, {
+    "aria-hidden": "true",
+    xcss: styles.footerDivider
+  }) : null, /*#__PURE__*/_react.default.createElement(_box.Box, {
+    onFocus: onFooterItemFocus,
+    onMouseMove: onFooterItemHover
+  }, /*#__PURE__*/_react.default.createElement(Item, {
+    id: footerItemId,
+    isSelected: selectedItemIndex === footerItemIndex,
+    isActive: false,
+    registration: model.footer
+  })))));
+};

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

@@ -0,0 +1,3 @@
+._15a5nqa1{border-top-style:solid}
+._1i531l7x{border-top-color:var(--ds-border,#0b120e24)}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

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

@@ -0,0 +1,90 @@
+/* TypeAheadQuickInsertMenu.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypeAheadQuickInsertMenu = void 0;
+require("./TypeAheadQuickInsertMenu.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _list = require("@atlaskit/editor-common/registered-menu/list");
+var _box = require("@atlaskit/primitives/compiled/box");
+var _getQuickInsertMenuItemId = require("./getQuickInsertMenuItemId");
+var _QuickInsertEmptyState = require("./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); }
+var LIST_WIDTH = 320;
+var MENU_FOOTER_HEIGHT = 45;
+var MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING = 51;
+var styles = {
+  footer: "_1i531l7x _15a5nqa1 _uwhke4h9"
+};
+var TypeAheadQuickInsertMenu = exports.TypeAheadQuickInsertMenu = function TypeAheadQuickInsertMenu(_ref) {
+  var Item = _ref.Item,
+    rows = _ref.rows,
+    activeItemKey = _ref.activeItemKey,
+    itemCount = _ref.itemCount,
+    listId = _ref.listId,
+    listLabel = _ref.listLabel,
+    maxHeight = _ref.maxHeight,
+    model = _ref.model,
+    onItemFocus = _ref.onItemFocus,
+    onItemBlur = _ref.onItemBlur,
+    onItemHover = _ref.onItemHover,
+    onItemLeave = _ref.onItemLeave,
+    onItemVisibilityChange = _ref.onItemVisibilityChange,
+    onRenderedItemsChange = _ref.onRenderedItemsChange,
+    _ref$query = _ref.query,
+    query = _ref$query === void 0 ? '' : _ref$query,
+    selectedItemIndex = _ref.selectedItemIndex,
+    _ref$hasScrollPadding = _ref.hasScrollPadding,
+    hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding;
+  var footerItemIndex = itemCount - 1;
+  var onFooterItemHover = (0, _react.useCallback)(function () {
+    return onItemHover(footerItemIndex);
+  }, [footerItemIndex, onItemHover]);
+  var getItemId = (0, _react.useCallback)(function (_ref2) {
+    var itemIndex = _ref2.itemIndex;
+    return (0, _getQuickInsertMenuItemId.getQuickInsertMenuItemId)(listId, itemIndex);
+  }, [listId]);
+  if (!model.root) {
+    return null;
+  }
+  var listMaxHeight = Math.max(0, maxHeight - (model.footer ? hasScrollPadding ? MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING : MENU_FOOTER_HEIGHT : 0));
+  var hasListboxContent = rows.length > 0 || model.footer !== undefined;
+  return /*#__PURE__*/_react.default.createElement(_box.Box, {
+    "aria-label": hasListboxContent ? listLabel : undefined,
+    id: listId,
+    role: hasListboxContent ? 'listbox' : undefined
+  }, rows.length > 0 ? /*#__PURE__*/_react.default.createElement(_list.RegisteredMenuList, {
+    rows: rows,
+    Item: Item,
+    width: LIST_WIDTH,
+    maxHeight: listMaxHeight,
+    getItemId: getItemId,
+    activeItemKey: activeItemKey,
+    selectedItemIndex: selectedItemIndex,
+    scrollResetKey: query,
+    hasScrollPadding: hasScrollPadding,
+    scrollTo: "top-on-reset",
+    onItemFocus: onItemFocus,
+    onItemBlur: onItemBlur,
+    onItemHover: onItemHover,
+    onItemLeave: onItemLeave,
+    onItemVisibilityChange: onItemVisibilityChange,
+    onRenderedItemsChange: onRenderedItemsChange
+  }) : query !== '' && /*#__PURE__*/_react.default.createElement(_QuickInsertEmptyState.QuickInsertEmptyState, {
+    mode: "inline",
+    spacing: "spacious"
+  }), model.footer && /*#__PURE__*/_react.default.createElement(_box.Box, {
+    onMouseMove: onFooterItemHover,
+    paddingBlockEnd: hasScrollPadding ? 'space.075' : undefined,
+    xcss: styles.footer
+  }, /*#__PURE__*/_react.default.createElement(Item, {
+    id: (0, _getQuickInsertMenuItemId.getQuickInsertMenuItemId)(listId, footerItemIndex),
+    isSelected: selectedItemIndex === footerItemIndex,
+    isActive: false,
+    registration: model.footer
+  })));
+};

package/dist/cjs/ui/registered-menu/assets/no-results.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NoResultsIllustration;
+var _react = _interopRequireDefault(require("react"));
+function NoResultsIllustration(_ref) {
+  var height = _ref.height,
+    width = _ref.width;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 57 63",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#dddee1",
+    d: "M23.5 49.223c-5.196 0-10.166-1.955-14.442-5.814a30 30 0 0 1-3.545-3.85 29.6 29.6 0 0 1-2.868-4.456c-4.56-8.775-3.179-18.124 3.79-25.647a32.6 32.6 0 0 1 3.942-3.593 32 32 0 0 1 4.287-2.81c9.017-4.89 18.424-3.869 25.803 2.8a30.3 30.3 0 0 1 3.59 3.897 29.7 29.7 0 0 1 2.837 4.396C51.5 22.96 50.12 32.324 43.106 39.83a31.5 31.5 0 0 1-3.797 3.442 33 33 0 0 1-4.468 2.912c-3.777 2.03-7.62 3.036-11.341 3.036zm2.478-44.539c-2.957 0-6.02.824-9.082 2.489a28 28 0 0 0-3.658 2.396 27.5 27.5 0 0 0-3.37 3.07C4.24 18.711 3.15 25.92 6.798 32.941a25 25 0 0 0 2.42 3.75 25 25 0 0 0 2.981 3.24c5.866 5.299 13.119 6.054 20.427 2.13a27.4 27.4 0 0 0 3.818-2.492 27.5 27.5 0 0 0 3.24-2.936c5.658-6.054 6.741-13.27 3.06-20.318a25 25 0 0 0-2.39-3.698 25.3 25.3 0 0 0-3.021-3.289c-3.418-3.086-7.288-4.645-11.348-4.645z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#dddee1",
+    d: "M42.822 42.291c-1.21-1.685-2.509-1.675-3.777-.694-1.19.92-1.507 2.164-.24 3.801l1.45 1.873 4.017-3.107z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#dddee1",
+    d: "m45.28 43.385-6.03 4.663 11.332 14.657 6.03-4.663z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#b7b9be",
+    d: "m44.31 44.134-4.091 3.163 3.843 4.97 4.091-3.163z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#dddee1",
+    d: "M26.834 30.328h-3.42v-.217c-.116-2.432 1.264-5.066 3.227-6.143l.037-.02q.08-.042.154-.093c1.071-.69 1.68-1.88 1.643-3.189-.037-1.298-.707-2.439-1.791-3.052a4.5 4.5 0 0 0-2.21-.592c-2.315 0-4.198 1.897-4.198 4.229h-3.42c0-4.23 3.417-7.672 7.618-7.672a7.9 7.9 0 0 1 3.884 1.033c2.14 1.211 3.462 3.437 3.534 5.955.073 2.53-1.125 4.84-3.203 6.18q-.211.139-.424.251c-.815.458-1.497 1.868-1.434 2.97zM24.795 32.303a3.4 3.4 0 0 1 1.096-.004c1.115.183 2.021.965 2.241 2.182l.002.01.002.009a3.4 3.4 0 0 1-.002 1.103v.004c-.216 1.23-1.136 2.009-2.247 2.19a3.417 3.417 0 0 1-1.085-.003c-1.117-.18-2.027-.961-2.249-2.179l-.002-.01-.001-.01a3.3 3.3 0 0 1 0-1.095l.002-.01.001-.01c.223-1.223 1.137-1.992 2.24-2.177z"
+  }));
+}