@atlaskit/editor-plugin-insert-block 28.0.4 → 28.0.6

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 28.0.6
+
+### Patch Changes
+
+- [`f93da47c0d069`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f93da47c0d069) -
+  Add shared illustrated empty states and search outcome analytics for registered slash, Plus and
+  Element Browser searches under platform_editor_slash_command. Refresh resolved registrations on
+  search edits and retain eligible Ask Rovo and host Marketplace recovery. Remove duplicate top
+  spacing in the Plus menu and show its previews only for directly hovered or keyboard-selected
+  items. Subscribe all three registered entry points to live registry updates and rebuild their
+  models on search changes, keeping selection and category state valid as items arrive or disappear.
+  Omit the Plus footer divider when only the generic empty state is shown.
+- Updated dependencies
+
+## 28.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 28.0.4
 
 ### Patch Changes

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

@@ -17,6 +17,7 @@ var _browserApis = require("@atlaskit/browser-apis");
 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");
@@ -32,6 +33,7 @@ var styles = {
 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,
@@ -58,6 +60,7 @@ var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredIns
     _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
@@ -95,6 +98,34 @@ var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredIns
       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();
+    onSelect();
+  }, [flushSearchAnalytics, onSelect]);
   var selectableItems = (0, _react.useMemo)(function () {
     return (0, _registeredMenuModel.getQuickInsertMenuRows)(model).filter(function (row) {
       return row.type === 'menu-item';
@@ -102,26 +133,88 @@ var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredIns
   }, [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 (_ref3) {
-      var key = _ref3.key;
+    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 () {
-    setSelectedItemIndex(itemCount > 0 ? 0 : -1);
+    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 () {
-    setSelectedItemIndex(function (index) {
-      return itemCount === 0 ? -1 : (index + 1) % itemCount;
-    });
-  }, [itemCount]);
+    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 () {
-    setSelectedItemIndex(function (index) {
-      return itemCount === 0 ? -1 : index <= 0 ? itemCount - 1 : index - 1;
+    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;
+      }
+      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;
     });
-  }, [itemCount]);
+  }, []);
+  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;
@@ -130,12 +223,11 @@ var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredIns
   }, [activeItemId, isActiveItemMounted]);
   var onQueryChange = (0, _react.useCallback)(function (event) {
     setQuery(event.currentTarget.value);
-    setSelectedItemIndex(0);
   }, []);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === 'Escape') {
       event.preventDefault();
-      onClose();
+      closeWithAnalytics();
       return;
     }
 
@@ -159,7 +251,7 @@ var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredIns
         selectActiveItem();
         break;
     }
-  }, [onClose, selectActiveItem, selectNextItem, selectPreviousItem]);
+  }, [closeWithAnalytics, selectActiveItem, selectNextItem, selectPreviousItem]);
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     "data-keyboard-navigation-independent": "",
     testId: "registered-insert-menu",
@@ -186,11 +278,16 @@ var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredIns
     maxHeight: maxHeight,
     menuOpenId: menuOpenId,
     model: model,
-    onClose: onSelect,
-    onItemHover: setSelectedItemIndex,
+    onClose: selectWithAnalytics,
+    onItemFocus: onItemFocus,
+    onItemHover: onItemHover,
+    onItemBlur: onItemBlur,
+    onItemLeave: onItemLeave,
+    onItemVisibilityChange: onItemVisibilityChange,
     onRenderedItemsChange: setRenderedItems,
     query: query,
     selectedItemIndex: selectedItemIndex,
-    surfaceContext: surfaceContext
+    surfaceContext: surfaceContext,
+    activePreviewItemKey: activePreviewItemKey
   }));
 };

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

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RegisteredInsertMenuContent = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _keys = require("@atlaskit/editor-common/quick-insert/keys");
 var _ui = require("@atlaskit/editor-common/ui");
 var _withOuterListeners = _interopRequireDefault(require("@atlaskit/editor-common/with-outer-listeners"));
 var _RegisteredInsertMenu = require("./RegisteredInsertMenu");
 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 EMPTY_COMPONENTS = [];
+var subscribeToNothing = function subscribeToNothing() {
+  return function () {};
+};
 var RegisteredInsertMenuContainer = function RegisteredInsertMenuContainer(_ref) {
   var children = _ref.children;
   var setOutsideClickTargetRef = (0, _react.useContext)(_ui.PlainOutsideClickTargetRefContext);
@@ -22,7 +25,7 @@ var RegisteredInsertMenuContainer = function RegisteredInsertMenuContainer(_ref)
 };
 var RegisteredInsertMenuWithListeners = (0, _withOuterListeners.default)(RegisteredInsertMenuContainer);
 var RegisteredInsertMenuContent = exports.RegisteredInsertMenuContent = function RegisteredInsertMenuContent(_ref2) {
-  var _api$quickInsert, _api$quickInsert2;
+  var _api$uiControlRegistr2, _api$uiControlRegistr3, _api$quickInsert, _api$analytics, _api$quickInsert2;
   var api = _ref2.api,
     editorView = _ref2.editorView,
     isOffline = _ref2.isOffline,
@@ -31,13 +34,12 @@ var RegisteredInsertMenuContent = exports.RegisteredInsertMenuContent = function
     onDismiss = _ref2.onDismiss,
     onSelect = _ref2.onSelect,
     target = _ref2.target;
-  // Keep registrations stable while the open menu is searched or navigated.
-  var _useState = (0, _react.useState)(function () {
-      var _api$uiControlRegistr, _api$uiControlRegistr2;
-      return (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_keys.MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-    components = _useState2[0];
+  var getComponents = (0, _react.useCallback)(function () {
+    var _api$uiControlRegistr;
+    var components = api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(_keys.MENU.key);
+    return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
+  }, [api]);
+  var components = (0, _react.useSyncExternalStore)((_api$uiControlRegistr2 = api === null || api === void 0 || (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 ? void 0 : _api$uiControlRegistr3.actions.subscribe) !== null && _api$uiControlRegistr2 !== void 0 ? _api$uiControlRegistr2 : subscribeToNothing, getComponents, getComponents);
   var onClickOutside = (0, _react.useCallback)(function (event) {
     if (event.target instanceof Node && target !== null && target !== void 0 && target.contains(event.target)) {
       return;
@@ -50,6 +52,7 @@ var RegisteredInsertMenuContent = exports.RegisteredInsertMenuContent = function
     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,

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

@@ -4,12 +4,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RegisteredInsertMenuItem = void 0;
+exports.RegisteredInsertMenuPreviewContext = exports.RegisteredInsertMenuItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _enums = require("@atlaskit/editor-common/analytics/types/enums");
 var _insert = require("@atlaskit/editor-common/insert");
 var _provider = require("@atlaskit/editor-common/quick-insert/provider");
 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); }
+// Preview updates must remain live while react-virtualized caches row elements during scrolling.
+var RegisteredInsertMenuPreviewContext = exports.RegisteredInsertMenuPreviewContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var RegisteredInsertMenuItem = exports.RegisteredInsertMenuItem = function RegisteredInsertMenuItem(_ref) {
   var _registration$compone;
   var editorView = _ref.editorView,
@@ -21,6 +23,8 @@ var RegisteredInsertMenuItem = exports.RegisteredInsertMenuItem = function Regis
     registration = _ref.registration,
     surfaceContext = _ref.surfaceContext;
   var Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : _react.default.Fragment;
+  var activePreviewItemKey = (0, _react.useContext)(RegisteredInsertMenuPreviewContext);
+  var isPreviewActive = activePreviewItemKey === registration.key;
   var select = (0, _react.useCallback)(function (selectionHandler) {
     // Close first so a registered item may safely focus the editor or open its picker.
     onClose();
@@ -45,6 +49,7 @@ var RegisteredInsertMenuItem = exports.RegisteredInsertMenuItem = function Regis
       isOffline: isOffline,
       item: {
         id: id,
+        isPreviewActive: isPreviewActive,
         isSelected: isSelected
       },
       menuOpenId: menuOpenId,
@@ -52,7 +57,7 @@ var RegisteredInsertMenuItem = exports.RegisteredInsertMenuItem = function Regis
       surface: 'toolbar',
       surfaceContext: surfaceContext
     };
-  }, [editorView, id, isOffline, isSelected, menuOpenId, select, surfaceContext]);
+  }, [editorView, id, isOffline, isPreviewActive, isSelected, menuOpenId, select, surfaceContext]);
   return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, null, null));

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

@@ -4,6 +4,8 @@
 ._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-insert-menu/RegisteredInsertMenuList.js

@@ -15,6 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
 var _List = require("react-virtualized/dist/commonjs/List");
+var _emptyState = require("@atlaskit/editor-common/quick-insert/empty-state");
 var _registeredMenuModel = require("@atlaskit/editor-common/quick-insert/registered-menu-model");
 var _useMenuListHeight2 = require("@atlaskit/editor-common/quick-insert/use-menu-list-height");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -35,24 +36,77 @@ var listAriaProps = {
 var styles = {
   content: "_1e0c1txw _2lx21bp4 _1tkeidpf",
   scrollable: "_16jlkb7n _1tkeidpf _18m91wug",
-  footer: "_1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf"
+  footer: "_1o9zidpf",
+  footerWithDivider: "_1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf",
+  externalControls: "_1i531l7x _15a5nqa1 _uwhke4h9 _1q51u2gc _85i5u2gc"
 };
-var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
-  var _model$root$component, _model$root;
+var RegisteredInsertMenuItemRow = function RegisteredInsertMenuItemRow(_ref) {
   var editorView = _ref.editorView,
-    emptyStateHandler = _ref.emptyStateHandler,
+    id = _ref.id,
     isOffline = _ref.isOffline,
-    listId = _ref.listId,
-    listLabel = _ref.listLabel,
-    maxHeight = _ref.maxHeight,
+    isSelected = _ref.isSelected,
+    itemIndex = _ref.itemIndex,
     menuOpenId = _ref.menuOpenId,
-    model = _ref.model,
     onClose = _ref.onClose,
-    query = _ref.query,
+    onItemFocus = _ref.onItemFocus,
+    onItemBlur = _ref.onItemBlur,
     onItemHover = _ref.onItemHover,
-    onRenderedItemsChange = _ref.onRenderedItemsChange,
-    selectedItemIndex = _ref.selectedItemIndex,
+    onItemLeave = _ref.onItemLeave,
+    registration = _ref.registration,
     surfaceContext = _ref.surfaceContext;
+  (0, _react.useLayoutEffect)(function () {
+    return function () {
+      return onItemLeave(registration.key);
+    };
+  }, [onItemLeave, registration.key]);
+  var onBlur = (0, _react.useCallback)(function (event) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      onItemBlur(registration.key);
+    }
+  }, [onItemBlur, registration.key]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onBlur: onBlur,
+    onFocus: function onFocus() {
+      return onItemFocus(itemIndex, registration.key);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return onItemLeave(registration.key);
+    },
+    onMouseMove: function onMouseMove() {
+      return onItemHover(itemIndex, registration.key);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuItem.RegisteredInsertMenuItem, {
+    editorView: editorView,
+    id: id,
+    isOffline: isOffline,
+    isSelected: isSelected,
+    menuOpenId: menuOpenId,
+    onClose: onClose,
+    registration: registration,
+    surfaceContext: surfaceContext
+  }));
+};
+var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref2) {
+  var _model$root$component, _model$root;
+  var editorView = _ref2.editorView,
+    emptyStateHandler = _ref2.emptyStateHandler,
+    isOffline = _ref2.isOffline,
+    listId = _ref2.listId,
+    listLabel = _ref2.listLabel,
+    maxHeight = _ref2.maxHeight,
+    menuOpenId = _ref2.menuOpenId,
+    model = _ref2.model,
+    onClose = _ref2.onClose,
+    onItemFocus = _ref2.onItemFocus,
+    onItemBlur = _ref2.onItemBlur,
+    query = _ref2.query,
+    onItemHover = _ref2.onItemHover,
+    onItemLeave = _ref2.onItemLeave,
+    onItemVisibilityChange = _ref2.onItemVisibilityChange,
+    onRenderedItemsChange = _ref2.onRenderedItemsChange,
+    selectedItemIndex = _ref2.selectedItemIndex,
+    surfaceContext = _ref2.surfaceContext,
+    activePreviewItemKey = _ref2.activePreviewItemKey;
   var Root = (_model$root$component = (_model$root = model.root) === null || _model$root === void 0 ? void 0 : _model$root.component) !== null && _model$root$component !== void 0 ? _model$root$component : _react.default.Fragment;
   var listRef = (0, _react.useRef)(null);
   var setListRef = (0, _react.useCallback)(function (list) {
@@ -97,9 +151,9 @@ var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function Regis
     return -1;
   }, [itemIndexByRowIndex, selectedItemIndex]);
   var rowKeySignature = (0, _react.useMemo)(function () {
-    return rows.map(function (_ref2) {
-      var key = _ref2.key,
-        type = _ref2.type;
+    return rows.map(function (_ref3) {
+      var key = _ref3.key,
+        type = _ref3.type;
       return "".concat(type, ":").concat(key);
     }).join('\0');
   }, [rows]);
@@ -112,61 +166,75 @@ var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function Regis
     (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.recomputeRowHeights();
     (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.scrollToPosition(0);
   }, [cache, rowKeySignature]);
-  var onRowsRendered = (0, _react.useCallback)(function (_ref3) {
+  var onRowsRendered = (0, _react.useCallback)(function (_ref4) {
     var _indexes$, _indexes;
-    var overscanStartIndex = _ref3.overscanStartIndex,
-      overscanStopIndex = _ref3.overscanStopIndex;
+    var overscanStartIndex = _ref4.overscanStartIndex,
+      overscanStopIndex = _ref4.overscanStopIndex,
+      startIndex = _ref4.startIndex,
+      stopIndex = _ref4.stopIndex;
+    if (activePreviewItemKey) {
+      var previewRowIndex = rows.findIndex(function (_ref5) {
+        var key = _ref5.key;
+        return key === activePreviewItemKey;
+      });
+      if (previewRowIndex < startIndex || previewRowIndex > stopIndex) {
+        onItemVisibilityChange(activePreviewItemKey, false);
+      }
+    }
     updateHeight();
-    var indexes = (0, _toConsumableArray2.default)(itemIndexByRowIndex).filter(function (_ref4) {
-      var _ref5 = (0, _slicedToArray2.default)(_ref4, 1),
-        rowIndex = _ref5[0];
+    var indexes = (0, _toConsumableArray2.default)(itemIndexByRowIndex).filter(function (_ref6) {
+      var _ref7 = (0, _slicedToArray2.default)(_ref6, 1),
+        rowIndex = _ref7[0];
       return rowIndex >= overscanStartIndex && rowIndex <= overscanStopIndex;
-    }).map(function (_ref6) {
-      var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
-        itemIndex = _ref7[1];
+    }).map(function (_ref8) {
+      var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
+        itemIndex = _ref9[1];
       return itemIndex;
     });
     onRenderedItemsChange({
       startIndex: (_indexes$ = indexes[0]) !== null && _indexes$ !== void 0 ? _indexes$ : -1,
       stopIndex: (_indexes = indexes[indexes.length - 1]) !== null && _indexes !== void 0 ? _indexes : -1
     });
-  }, [itemIndexByRowIndex, onRenderedItemsChange, updateHeight]);
-  var renderRow = (0, _react.useCallback)(function (_ref8) {
+  }, [activePreviewItemKey, itemIndexByRowIndex, onItemVisibilityChange, onRenderedItemsChange, rows, updateHeight]);
+  var onScrollableContentScroll = (0, _react.useCallback)(function (event) {
+    if (event.target === event.currentTarget && activePreviewItemKey) {
+      onItemVisibilityChange(activePreviewItemKey, false);
+    }
+  }, [activePreviewItemKey, onItemVisibilityChange]);
+  var renderRow = (0, _react.useCallback)(function (_ref0) {
     var _registration$compone;
-    var index = _ref8.index,
-      key = _ref8.key,
-      parent = _ref8.parent,
-      style = _ref8.style;
+    var index = _ref0.index,
+      key = _ref0.key,
+      parent = _ref0.parent,
+      style = _ref0.style;
     var registration = rows[index];
     if (!registration) {
       return null;
     }
     var itemIndex = itemIndexByRowIndex.get(index);
-    var rowContent = registration.type === 'menu-section' ? ( /*#__PURE__*/_react.default.createElement((_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : _react.default.Fragment, null, null)) : /*#__PURE__*/_react.default.createElement("div", {
-      onFocus: function onFocus() {
-        return onItemHover(itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0);
-      },
-      onMouseMove: function onMouseMove() {
-        return onItemHover(itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuItem.RegisteredInsertMenuItem, {
+    var rowContent = registration.type === 'menu-section' ? ( /*#__PURE__*/_react.default.createElement((_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : _react.default.Fragment, null, null)) : /*#__PURE__*/_react.default.createElement(RegisteredInsertMenuItemRow, {
       editorView: editorView,
       id: "".concat(listId, "-").concat(itemIndex),
       isOffline: isOffline,
       isSelected: itemIndex === selectedItemIndex,
+      itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
       menuOpenId: menuOpenId,
       onClose: onClose,
+      onItemFocus: onItemFocus,
+      onItemBlur: onItemBlur,
+      onItemHover: onItemHover,
+      onItemLeave: onItemLeave,
       registration: registration,
       surfaceContext: surfaceContext
-    }));
+    });
     return /*#__PURE__*/_react.default.createElement(_CellMeasurer.CellMeasurer, {
       key: key,
       cache: cache,
       parent: parent,
       columnIndex: 0,
       rowIndex: index
-    }, function (_ref9) {
-      var registerChild = _ref9.registerChild;
+    }, function (_ref1) {
+      var registerChild = _ref1.registerChild;
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: function ref(element) {
           return registerChild === null || registerChild === void 0 ? void 0 : registerChild(element !== null && element !== void 0 ? element : undefined);
@@ -174,12 +242,21 @@ var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function Regis
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         ,
         style: style
-      }, rowContent);
+      }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        paddingBlockEnd: index === rows.length - 1 ? 'space.100' : undefined
+      }, rowContent));
     });
-  }, [cache, editorView, isOffline, itemIndexByRowIndex, listId, menuOpenId, onClose, onItemHover, rows, selectedItemIndex, surfaceContext]);
+  }, [cache, editorView, isOffline, itemIndexByRowIndex, listId, menuOpenId, onClose, onItemFocus, onItemBlur, onItemHover, onItemLeave, rows, selectedItemIndex, surfaceContext]);
   var footerItemIndex = itemIndexByRowIndex.size;
   var footerItemId = "".concat(listId, "-").concat(footerItemIndex);
   var hasExternalControls = model.fallbackItems !== undefined && emptyStateHandler !== undefined;
+  var hasNoSearchResults = query !== '' && rows.length === 0;
+  var externalControls = hasExternalControls && emptyStateHandler ? emptyStateHandler({
+    mode: 'inline',
+    searchTerm: query,
+    showNoResultsMessage: false
+  }) : null;
+  var showFooterDivider = !hasNoSearchResults || Boolean(externalControls);
   var listMaxHeight = Math.max(0, maxHeight - MENU_SEARCH_HEIGHT - (model.footer ? MENU_FOOTER_HEIGHT : 0));
   var contentStyle = {
     maxHeight: Math.max(0, maxHeight - MENU_SEARCH_HEIGHT)
@@ -187,9 +264,13 @@ var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function Regis
   var onFooterItemHover = (0, _react.useCallback)(function () {
     return onItemHover(footerItemIndex);
   }, [footerItemIndex, onItemHover]);
+  var onFooterItemFocus = (0, _react.useCallback)(function () {
+    return onItemFocus(footerItemIndex);
+  }, [footerItemIndex, onItemFocus]);
   var footer = model.footer ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.footer,
-    onFocus: onFooterItemHover,
+    testId: "registered-insert-menu-footer",
+    xcss: showFooterDivider ? styles.footerWithDivider : styles.footer,
+    onFocus: onFooterItemFocus,
     onMouseMove: onFooterItemHover
   }, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuItem.RegisteredInsertMenuItem, {
     editorView: editorView,
@@ -204,11 +285,14 @@ var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function Regis
   if (!model.root) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+  return /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuItem.RegisteredInsertMenuPreviewContext.Provider, {
+    value: activePreviewItemKey
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.content,
     style: contentStyle
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.scrollable
+    xcss: styles.scrollable,
+    onScroll: onScrollableContentScroll
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     "aria-label": listLabel,
     "aria-owns": model.footer ? footerItemId : undefined,
@@ -230,9 +314,11 @@ var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function Regis
     scrollToAlignment: "auto",
     scrollToIndex: selectedRowIndex,
     width: LIST_WIDTH
-  }))), hasExternalControls && /*#__PURE__*/_react.default.createElement(_compiled.Box, null, emptyStateHandler({
-    mode: 'inline',
-    searchTerm: query,
-    showNoResultsMessage: false
-  }))), footer));
+  }))), hasNoSearchResults && /*#__PURE__*/_react.default.createElement(_emptyState.QuickInsertEmptyState, {
+    mode: "inline",
+    spacing: "compact"
+  }), externalControls && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    testId: "registered-insert-menu-external-controls",
+    xcss: styles.externalControls
+  }, externalControls)), footer)));
 };