@atlaskit/editor-plugin-insert-block 30.0.4 → 31.0.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 31.0.0
+
+### Patch 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.
+- Updated dependencies
+
+## 30.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 30.0.4
 
 ### Patch Changes

package/dist/cjs/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.BlockInsertElementBrowser = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Popup = _interopRequireDefault(require("@atlaskit/editor-common/Popup"));
-var _useMenuPopupSizing = require("@atlaskit/editor-common/quick-insert/use-menu-popup-sizing");
+var _popupSizing = require("@atlaskit/editor-common/registered-menu/popup-sizing");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _InsertMenu = _interopRequireWildcard(require("../ElementBrowser/InsertMenu"));
 var _RegisteredInsertMenuContent = require("../registered-insert-menu/RegisteredInsertMenuContent");
@@ -22,7 +22,7 @@ var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function Blo
   var togglePlusMenuVisibility = props.togglePlusMenuVisibility,
     plusButtonRef = props.plusButtonRef;
   var isRegisteredMenu = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
-  var menuHeight = (0, _useMenuPopupSizing.useMenuPopupSizing)({
+  var menuHeight = (0, _popupSizing.useMenuPopupSizing)({
     target: plusButtonRef,
     boundariesElement: props.popupsBoundariesElement,
     scrollableElement: props.popupsScrollableElement,

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertButton.js

@@ -13,7 +13,7 @@ var _isOfflineMode = require("@atlaskit/editor-common/connectivity/isOfflineMode
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _insertBlock = require("@atlaskit/editor-common/messages/insert-block");
 var _Popup = _interopRequireDefault(require("@atlaskit/editor-common/Popup"));
-var _useMenuPopupSizing = require("@atlaskit/editor-common/quick-insert/use-menu-popup-sizing");
+var _popupSizing = require("@atlaskit/editor-common/registered-menu/popup-sizing");
 var _context = require("@atlaskit/editor-common/toolbar/context");
 var _keys = require("@atlaskit/editor-common/toolbar/keys");
 var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
@@ -48,7 +48,7 @@ var RegisteredInsertButton = exports.RegisteredInsertButton = function Registere
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   var buttonRef = (0, _react.useRef)(null);
-  var menuHeight = (0, _useMenuPopupSizing.useMenuPopupSizing)({
+  var menuHeight = (0, _popupSizing.useMenuPopupSizing)({
     target: buttonRef.current,
     boundariesElement: popupsBoundariesElement,
     scrollableElement: popupsScrollableElement,

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenu.compiled.css

@@ -3,6 +3,7 @@
 ._18m915vq{overflow-y:hidden}
 ._1bsb1edt{width:350px}
 ._1e0c1txw{display:flex}
+._1e0cglyw{display:none}
 ._1o9zidpf{flex-shrink:0}
 ._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo15vq{overflow-x:hidden}

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenu.js

@@ -9,285 +9,160 @@ Object.defineProperty(exports, "__esModule", {
 exports.RegisteredInsertMenu = void 0;
 require("./RegisteredInsertMenu.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
-var _browserApis = require("@atlaskit/browser-apis");
+var _insert = require("@atlaskit/editor-common/insert");
 var _insertBlock = require("@atlaskit/editor-common/messages/insert-block");
 var _keys = require("@atlaskit/editor-common/quick-insert/keys");
-var _registeredMenuModel = require("@atlaskit/editor-common/quick-insert/registered-menu-model");
-var _useSearchAnalytics = require("@atlaskit/editor-common/quick-insert/use-search-analytics");
-var _typeAheadIsSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-is-section-overflow-item-key");
-var _typeAheadSurfaceContext = require("@atlaskit/editor-common/type-ahead-surface-context");
-var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
+var _context = require("@atlaskit/editor-common/registered-menu/context");
+var _surfaceContext = require("@atlaskit/editor-common/registered-menu/surface-context");
+var _messages = require("@atlaskit/editor-common/type-ahead/messages");
 var _box = require("@atlaskit/primitives/compiled/box");
 var _textField = _interopRequireDefault(require("@atlaskit/textfield/text-field"));
-var _RegisteredInsertMenuList = require("./RegisteredInsertMenuList");
 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 DEFAULT_MENU_MAX_HEIGHT = 520;
+var SEARCH_HEIGHT = 64;
 var styles = {
   menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _16qs130s _1e0c1txw _2lx21bp4 _1bsb1edt",
+  hidden: "_1e0cglyw",
   search: "_18zrutpp _1o9zidpf _1q51utpp _85i5u2gc"
 };
-var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
-  var components = _ref.components,
-    emptyStateHandler = _ref.emptyStateHandler,
-    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
-    getItemRank = _ref.getItemRank,
-    editorView = _ref.editorView,
-    isOffline = _ref.isOffline,
-    _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? DEFAULT_MENU_MAX_HEIGHT : _ref$maxHeight,
-    onClose = _ref.onClose,
-    onSelect = _ref.onSelect;
-  var menuStyle = {
-    maxHeight: maxHeight
-  };
+var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredInsertMenu(props) {
+  var _props$maxHeight, _interaction$expanded;
+  var components = props.components,
+    editorView = props.editorView,
+    isOffline = props.isOffline,
+    onSelect = props.onSelect;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var listId = (0, _react.useId)();
-  var _useState = (0, _react.useState)(function () {
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    interaction = _useState2[0],
+    setInteraction = _useState2[1];
+  var registerInteraction = (0, _react.useCallback)(function (next) {
+    setInteraction(next);
+    return function () {
+      return setInteraction(function (current) {
+        return current === next ? undefined : current;
+      });
+    };
+  }, []);
+  var searchRef = (0, _react.useRef)(null);
+  var hasInteraction = Boolean(interaction);
+  (0, _react.useLayoutEffect)(function () {
+    if (hasInteraction) {
+      var _searchRef$current;
+      (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus({
+        preventScroll: true
+      });
+    }
+  }, [hasInteraction]);
+  var maxHeight = (_props$maxHeight = props.maxHeight) !== null && _props$maxHeight !== void 0 ? _props$maxHeight : DEFAULT_MENU_MAX_HEIGHT;
+  var menuStyle = (0, _react.useMemo)(function () {
+    return {
+      maxHeight: maxHeight
+    };
+  }, [maxHeight]);
+  var _useState3 = (0, _react.useState)(function () {
       return Symbol('registered-insert-menu-open');
     }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-    menuOpenId = _useState2[0];
-  var _useState3 = (0, _react.useState)(''),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    query = _useState4[0],
-    setQuery = _useState4[1];
-  var _useState5 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    menuOpenId = _useState4[0];
+  var _useState5 = (0, _react.useState)(''),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    selectedItemIndex = _useState6[0],
-    setSelectedItemIndex = _useState6[1];
-  var selectedItemIndexRef = (0, _react.useRef)(selectedItemIndex);
-  var _useState7 = (0, _react.useState)({
-      startIndex: -1,
-      stopIndex: -1
-    }),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    renderedItems = _useState8[0],
-    setRenderedItems = _useState8[1];
-  var searchRef = (0, _react.useRef)(null);
-  (0, _react.useLayoutEffect)(function () {
-    var _searchRef$current;
-    // Popup positions on the next frame; focusing must not scroll to its initial location.
-    (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus({
-      preventScroll: true
-    });
-  }, []);
+    query = _useState6[0],
+    setQuery = _useState6[1];
   var surfaceContext = (0, _react.useMemo)(function () {
-    return (0, _createSurfaceContext.createSurfaceContext)(_typeAheadSurfaceContext.TYPE_AHEAD_SURFACE_CONTEXT, {
-      menuOpenId: menuOpenId
+    return (0, _surfaceContext.createRegisteredMenuSurfaceContext)({
+      menuOpenId: menuOpenId,
+      surface: 'toolbar'
     });
   }, [menuOpenId]);
-  var hasSectionOverflowItems = (0, _react.useMemo)(function () {
-    return components.some(function (_ref2) {
-      var key = _ref2.key;
-      return (0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
-    });
+  var Root = (0, _react.useMemo)(function () {
+    var _components$find;
+    return (_components$find = components.find(function (_ref) {
+      var key = _ref.key,
+        type = _ref.type,
+        parents = _ref.parents;
+      return key === _keys.MENU.key && type === _keys.MENU.type && !(parents !== null && parents !== void 0 && parents.length);
+    })) === null || _components$find === void 0 ? void 0 : _components$find.component;
   }, [components]);
-  var model = (0, _react.useMemo)(function () {
-    return (0, _registeredMenuModel.getQuickInsertMenuModel)({
-      components: components,
-      formatMessage: formatMessage,
-      getItemRank: getItemRank,
-      query: query,
-      rootComponent: _keys.MENU,
-      selectCategoryItems: hasSectionOverflowItems ? _registeredMenuModel.selectQuickInsertCategoryItems : undefined,
-      surfaceContext: surfaceContext
-    });
-  }, [components, formatMessage, getItemRank, hasSectionOverflowItems, query, surfaceContext]);
-  var _useState9 = (0, _react.useState)(),
-    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    previewActivation = _useState0[0],
-    setPreviewActivation = _useState0[1];
-  var activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.model) === model ? previewActivation.itemKey : undefined;
-  var searchResultCount = (0, _react.useMemo)(function () {
-    return model.sections.reduce(function (count, section) {
-      return count + section.filter(function (_ref3) {
-        var key = _ref3.key,
-          type = _ref3.type;
-        return type === 'menu-item' && !(0, _typeAheadIsSectionOverflowItemKey.isSectionOverflowItemKey)(key);
-      }).length;
-    }, 0);
-  }, [model.sections]);
-  var flushSearchAnalytics = (0, _useSearchAnalytics.useQuickInsertSearchAnalytics)({
-    fireAnalyticsEvent: fireAnalyticsEvent,
-    query: query,
-    resultCount: searchResultCount,
-    surface: 'toolbar'
-  });
-  var closeWithAnalytics = (0, _react.useCallback)(function () {
-    flushSearchAnalytics();
-    onClose();
-  }, [flushSearchAnalytics, onClose]);
-  var selectWithAnalytics = (0, _react.useCallback)(function () {
-    flushSearchAnalytics();
+  // Interaction updates should not recreate the registered component's own props.
+  var menu = (0, _react.useMemo)(function () {
+    return Root && /*#__PURE__*/_react.default.createElement(Root, null, null);
+  }, [Root]);
+  var select = (0, _react.useCallback)(function (selection) {
     onSelect();
-  }, [flushSearchAnalytics, onSelect]);
-  var selectableItems = (0, _react.useMemo)(function () {
-    return (0, _registeredMenuModel.getQuickInsertMenuRows)(model).filter(function (row) {
-      return row.type === 'menu-item';
-    });
-  }, [model]);
-  var itemCount = selectableItems.length + (model.footer ? 1 : 0);
-  var selectableItemKeys = (0, _react.useMemo)(function () {
-    return [].concat((0, _toConsumableArray2.default)(selectableItems), (0, _toConsumableArray2.default)(model.footer ? [model.footer] : [])).map(function (_ref4) {
-      var key = _ref4.key;
-      return key;
-    }).join(',');
-  }, [model.footer, selectableItems]);
-  (0, _react.useLayoutEffect)(function () {
-    var initialItemIndex = itemCount > 0 ? 0 : -1;
-    selectedItemIndexRef.current = initialItemIndex;
-    setSelectedItemIndex(initialItemIndex);
-  }, [itemCount, query, selectableItemKeys]);
-  (0, _react.useLayoutEffect)(function () {
-    setPreviewActivation(undefined);
-  }, [model, query]);
-  var isActiveItemMounted = selectedItemIndex >= 0 && selectedItemIndex < itemCount && (selectedItemIndex >= renderedItems.startIndex && selectedItemIndex <= renderedItems.stopIndex || Boolean(model.footer) && selectedItemIndex === itemCount - 1);
-  var activeItemId = "".concat(listId, "-").concat(selectedItemIndex);
-  var setKeyboardPreview = (0, _react.useCallback)(function (itemIndex) {
-    var item = selectableItems[itemIndex];
-    setPreviewActivation(item ? {
-      itemKey: item.key,
-      model: model,
-      source: 'keyboard'
-    } : undefined);
-  }, [model, selectableItems]);
-  var selectNextItem = (0, _react.useCallback)(function () {
-    var currentIndex = selectedItemIndexRef.current;
-    var nextIndex = itemCount === 0 ? -1 : currentIndex < 0 ? 0 : (currentIndex + 1) % itemCount;
-    selectedItemIndexRef.current = nextIndex;
-    setSelectedItemIndex(nextIndex);
-    setKeyboardPreview(nextIndex);
-  }, [itemCount, setKeyboardPreview]);
-  var selectPreviousItem = (0, _react.useCallback)(function () {
-    var currentIndex = selectedItemIndexRef.current;
-    var previousIndex = itemCount === 0 ? -1 : currentIndex <= 0 ? itemCount - 1 : currentIndex - 1;
-    selectedItemIndexRef.current = previousIndex;
-    setSelectedItemIndex(previousIndex);
-    setKeyboardPreview(previousIndex);
-  }, [itemCount, setKeyboardPreview]);
-  var onItemHover = (0, _react.useCallback)(function (itemIndex, itemKey) {
-    selectedItemIndexRef.current = itemIndex;
-    setSelectedItemIndex(itemIndex);
-    setPreviewActivation(function (current) {
-      if ((current === null || current === void 0 ? void 0 : current.itemKey) === itemKey && (current === null || current === void 0 ? void 0 : current.model) === model && (current === null || current === void 0 ? void 0 : current.source) === 'pointer') {
-        return current;
-      }
-      return itemKey ? {
-        itemKey: itemKey,
-        model: model,
-        source: 'pointer'
-      } : undefined;
-    });
-  }, [model]);
-  var onItemFocus = (0, _react.useCallback)(function (itemIndex, itemKey) {
-    selectedItemIndexRef.current = itemIndex;
-    setSelectedItemIndex(itemIndex);
-    setPreviewActivation(function (current) {
-      if ((current === null || current === void 0 ? void 0 : current.itemKey) === itemKey && (current === null || current === void 0 ? void 0 : current.model) === model) {
-        return current;
+    queueMicrotask(function () {
+      var state = editorView.state;
+      var insert = function insert(content) {
+        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        return (0, _insert.insertSelectedItem)(content, options)(state, state.tr, state.selection.head);
+      };
+      var transaction = selection(insert);
+      if (transaction) {
+        editorView.dispatch(transaction);
       }
-      return itemKey ? {
-        itemKey: itemKey,
-        model: model,
-        source: 'keyboard'
-      } : undefined;
-    });
-  }, [model]);
-  var onItemLeave = (0, _react.useCallback)(function (itemKey) {
-    setPreviewActivation(function (current) {
-      return (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current;
-    });
-  }, []);
-  var onItemBlur = (0, _react.useCallback)(function (itemKey) {
-    setPreviewActivation(function (current) {
-      return (current === null || current === void 0 ? void 0 : current.itemKey) === itemKey ? undefined : current;
     });
-  }, []);
-  var onItemVisibilityChange = (0, _react.useCallback)(function (itemKey, isVisible) {
-    if (!isVisible) {
-      setPreviewActivation(function (current) {
-        return (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current;
-      });
-    }
-  }, []);
-  var selectActiveItem = (0, _react.useCallback)(function () {
-    if (isActiveItemMounted) {
-      var _getDocument;
-      (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 || (_getDocument = _getDocument.getElementById(activeItemId)) === null || _getDocument === void 0 || _getDocument.click();
-    }
-  }, [activeItemId, isActiveItemMounted]);
+  }, [editorView, onSelect]);
+  var registeredMenu = (0, _react.useMemo)(function () {
+    return {
+      components: components,
+      onClose: props.onClose,
+      maxHeight: Math.max(0, maxHeight - SEARCH_HEIGHT),
+      registerInteraction: registerInteraction,
+      editorView: editorView,
+      isOffline: isOffline,
+      menuOpenId: menuOpenId,
+      rootComponent: _keys.MENU,
+      query: query,
+      select: select,
+      surfaceContext: surfaceContext
+    };
+  }, [components, props.onClose, maxHeight, registerInteraction, editorView, isOffline, menuOpenId, query, select, surfaceContext]);
   var onQueryChange = (0, _react.useCallback)(function (event) {
-    setQuery(event.currentTarget.value);
+    return setQuery(event.currentTarget.value);
   }, []);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === 'Escape') {
+      var _interaction$onClose;
       event.preventDefault();
-      closeWithAnalytics();
+      interaction === null || interaction === void 0 || (_interaction$onClose = interaction.onClose) === null || _interaction$onClose === void 0 || _interaction$onClose.call(interaction);
+      props.onClose();
       return;
     }
-
-    // The search field owns the composite's arrow-key and Enter behaviour. Other
-    // focusable controls, including consumer-provided empty-state content, need
-    // to retain their native keyboard behaviour.
-    if (event.target !== searchRef.current) {
+    // Some IME key events report 229 without setting isComposing. Let the input finish
+    // composing text before handling menu navigation or selection.
+    if (event.target !== searchRef.current || event.nativeEvent.isComposing || event.keyCode === 229) {
       return;
     }
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        selectNextItem();
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        selectPreviousItem();
-        break;
-      case 'Enter':
-        event.preventDefault();
-        selectActiveItem();
-        break;
+    if (interaction !== null && interaction !== void 0 && interaction.onKeyDown(event.nativeEvent)) {
+      event.preventDefault();
     }
-  }, [closeWithAnalytics, selectActiveItem, selectNextItem, selectPreviousItem]);
-  return /*#__PURE__*/_react.default.createElement(_box.Box, {
-    "data-keyboard-navigation-independent": "",
-    testId: "registered-insert-menu",
+  }, [interaction, props.onClose]);
+  return /*#__PURE__*/_react.default.createElement(_context.RegisteredMenuContext.Provider, {
+    value: registeredMenu
+  }, Root && /*#__PURE__*/_react.default.createElement("div", {
+    "data-registered-insert-menu-root": "",
     onKeyDownCapture: onKeyDown,
-    xcss: styles.menu,
-    style: menuStyle
+    "data-keyboard-navigation-independent": "",
+    "data-testid": "registered-insert-menu",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- The popup supplies the available height at runtime.
+    style: menuStyle,
+    className: (0, _runtime.ax)([styles.menu, !interaction && styles.hidden])
   }, /*#__PURE__*/_react.default.createElement(_box.Box, {
     xcss: styles.search
   }, /*#__PURE__*/_react.default.createElement(_textField.default, {
-    "aria-activedescendant": isActiveItemMounted ? activeItemId : undefined,
-    "aria-controls": listId,
-    "aria-expanded": "true",
-    placeholder: "Search",
+    "aria-label": (interaction === null || interaction === void 0 ? void 0 : interaction.label) || formatMessage(_insertBlock.toolbarInsertBlockMessages.insertMenu),
+    "aria-activedescendant": interaction === null || interaction === void 0 ? void 0 : interaction.activeDescendantId,
+    "aria-controls": interaction === null || interaction === void 0 ? void 0 : interaction.listId,
+    "aria-expanded": (_interaction$expanded = interaction === null || interaction === void 0 ? void 0 : interaction.expanded) !== null && _interaction$expanded !== void 0 ? _interaction$expanded : false,
+    "aria-autocomplete": "list",
+    placeholder: formatMessage(_messages.typeAheadListMessages.quickInsertInputPlaceholderLabel),
     ref: searchRef,
     role: "combobox",
     value: query,
     onChange: onQueryChange
-  })), /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuList.RegisteredInsertMenuList, {
-    editorView: editorView,
-    emptyStateHandler: emptyStateHandler,
-    isOffline: isOffline,
-    listId: listId,
-    listLabel: formatMessage(_insertBlock.toolbarInsertBlockMessages.insertMenu),
-    maxHeight: maxHeight,
-    menuOpenId: menuOpenId,
-    model: model,
-    onClose: selectWithAnalytics,
-    onItemFocus: onItemFocus,
-    onItemHover: onItemHover,
-    onItemBlur: onItemBlur,
-    onItemLeave: onItemLeave,
-    onItemVisibilityChange: onItemVisibilityChange,
-    onRenderedItemsChange: setRenderedItems,
-    query: query,
-    selectedItemIndex: selectedItemIndex,
-    surfaceContext: surfaceContext,
-    activePreviewItemKey: activePreviewItemKey
-  }));
+  })), menu));
 };

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenuContent.js

@@ -25,7 +25,7 @@ var RegisteredInsertMenuContainer = function RegisteredInsertMenuContainer(_ref)
 };
 var RegisteredInsertMenuWithListeners = (0, _withOuterListeners.default)(RegisteredInsertMenuContainer);
 var RegisteredInsertMenuContent = exports.RegisteredInsertMenuContent = function RegisteredInsertMenuContent(_ref2) {
-  var _api$uiControlRegistr2, _api$uiControlRegistr3, _api$quickInsert, _api$analytics, _api$quickInsert2;
+  var _api$uiControlRegistr2, _api$uiControlRegistr3;
   var api = _ref2.api,
     editorView = _ref2.editorView,
     isOffline = _ref2.isOffline,
@@ -51,9 +51,6 @@ var RegisteredInsertMenuContent = exports.RegisteredInsertMenuContent = function
   }, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenu.RegisteredInsertMenu, {
     components: components,
     editorView: editorView,
-    emptyStateHandler: api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || (_api$quickInsert = _api$quickInsert.sharedState.currentState()) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.emptyStateHandler,
-    fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent,
-    getItemRank: api === null || api === void 0 || (_api$quickInsert2 = api.quickInsert) === null || _api$quickInsert2 === void 0 || (_api$quickInsert2 = _api$quickInsert2.sharedState.currentState()) === null || _api$quickInsert2 === void 0 ? void 0 : _api$quickInsert2.getItemRank,
     isOffline: isOffline,
     maxHeight: maxHeight,
     onClose: onClose,

package/dist/es2019/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import Popup from '@atlaskit/editor-common/Popup';
-import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
+import { useMenuPopupSizing } from '@atlaskit/editor-common/registered-menu/popup-sizing';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
 import { RegisteredInsertMenuContent } from '../registered-insert-menu/RegisteredInsertMenuContent';

package/dist/es2019/ui/registered-insert-menu/RegisteredInsertButton.js

@@ -4,7 +4,7 @@ import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMod
 import { getAriaKeyshortcuts, insertElements, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages/insert-block';
 import Popup from '@atlaskit/editor-common/Popup';
-import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
+import { useMenuPopupSizing } from '@atlaskit/editor-common/registered-menu/popup-sizing';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar/context';
 import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar/keys';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';

package/dist/es2019/ui/registered-insert-menu/RegisteredInsertMenu.compiled.css

@@ -3,6 +3,7 @@
 ._18m915vq{overflow-y:hidden}
 ._1bsb1edt{width:350px}
 ._1e0c1txw{display:flex}
+._1e0cglyw{display:none}
 ._1o9zidpf{flex-shrink:0}
 ._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo15vq{overflow-x:hidden}