@atlaskit/editor-plugin-insert-block 28.0.5 → 29.0.0

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

@@ -1,9 +1,12 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useSyncExternalStore } from 'react';
 import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
 import { PlainOutsideClickTargetRefContext } from '@atlaskit/editor-common/ui';
 import withOuterListeners from '@atlaskit/editor-common/with-outer-listeners';
 import { RegisteredInsertMenu } from './RegisteredInsertMenu';
+var EMPTY_COMPONENTS = [];
+var subscribeToNothing = function subscribeToNothing() {
+  return function () {};
+};
 var RegisteredInsertMenuContainer = function RegisteredInsertMenuContainer(_ref) {
   var children = _ref.children;
   var setOutsideClickTargetRef = useContext(PlainOutsideClickTargetRefContext);
@@ -13,7 +16,7 @@ var RegisteredInsertMenuContainer = function RegisteredInsertMenuContainer(_ref)
 };
 var RegisteredInsertMenuWithListeners = withOuterListeners(RegisteredInsertMenuContainer);
 export var 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,
@@ -22,13 +25,12 @@ export var RegisteredInsertMenuContent = function RegisteredInsertMenuContent(_r
     onDismiss = _ref2.onDismiss,
     onSelect = _ref2.onSelect,
     target = _ref2.target;
-  // Keep registrations stable while the open menu is searched or navigated.
-  var _useState = 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(MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-    }),
-    _useState2 = _slicedToArray(_useState, 1),
-    components = _useState2[0];
+  var getComponents = 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(MENU.key);
+    return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
+  }, [api]);
+  var components = 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 = useCallback(function (event) {
     if (event.target instanceof Node && target !== null && target !== void 0 && target.contains(event.target)) {
       return;
@@ -41,6 +43,7 @@ export var RegisteredInsertMenuContent = function RegisteredInsertMenuContent(_r
     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/esm/ui/registered-insert-menu/RegisteredInsertMenuItem.js

@@ -1,7 +1,9 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
 import { insertSelectedItem } from '@atlaskit/editor-common/insert';
 import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
+// Preview updates must remain live while react-virtualized caches row elements during scrolling.
+export var RegisteredInsertMenuPreviewContext = /*#__PURE__*/createContext(undefined);
 export var RegisteredInsertMenuItem = function RegisteredInsertMenuItem(_ref) {
   var _registration$compone;
   var editorView = _ref.editorView,
@@ -13,6 +15,8 @@ export var RegisteredInsertMenuItem = function RegisteredInsertMenuItem(_ref) {
     registration = _ref.registration,
     surfaceContext = _ref.surfaceContext;
   var Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : React.Fragment;
+  var activePreviewItemKey = useContext(RegisteredInsertMenuPreviewContext);
+  var isPreviewActive = activePreviewItemKey === registration.key;
   var select = useCallback(function (selectionHandler) {
     // Close first so a registered item may safely focus the editor or open its picker.
     onClose();
@@ -37,6 +41,7 @@ export var RegisteredInsertMenuItem = function RegisteredInsertMenuItem(_ref) {
       isOffline: isOffline,
       item: {
         id: id,
+        isPreviewActive: isPreviewActive,
         isSelected: isSelected
       },
       menuOpenId: menuOpenId,
@@ -44,7 +49,7 @@ export var RegisteredInsertMenuItem = function RegisteredInsertMenuItem(_ref) {
       surface: 'toolbar',
       surfaceContext: surfaceContext
     };
-  }, [editorView, id, isOffline, isSelected, menuOpenId, select, surfaceContext]);
+  }, [editorView, id, isOffline, isPreviewActive, isSelected, menuOpenId, select, surfaceContext]);
   return /*#__PURE__*/React.createElement(QuickInsertProvider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Component, null, null));

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

@@ -10,10 +10,11 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { List } from 'react-virtualized/dist/commonjs/List';
+import { QuickInsertEmptyState } from '@atlaskit/editor-common/quick-insert/empty-state';
 import { getQuickInsertMenuRows } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
 import { useMenuListHeight } from '@atlaskit/editor-common/quick-insert/use-menu-list-height';
 import { Box } from '@atlaskit/primitives/compiled';
-import { RegisteredInsertMenuItem } from './RegisteredInsertMenuItem';
+import { RegisteredInsertMenuItem, RegisteredInsertMenuPreviewContext } from './RegisteredInsertMenuItem';
 var ESTIMATED_ROW_HEIGHT = 44;
 // 44px item + 1px separator.
 var MENU_FOOTER_HEIGHT = 45;
@@ -26,24 +27,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"
 };
-export var 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;
+  useLayoutEffect(function () {
+    return function () {
+      return onItemLeave(registration.key);
+    };
+  }, [onItemLeave, registration.key]);
+  var onBlur = useCallback(function (event) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      onItemBlur(registration.key);
+    }
+  }, [onItemBlur, registration.key]);
+  return /*#__PURE__*/React.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.createElement(RegisteredInsertMenuItem, {
+    editorView: editorView,
+    id: id,
+    isOffline: isOffline,
+    isSelected: isSelected,
+    menuOpenId: menuOpenId,
+    onClose: onClose,
+    registration: registration,
+    surfaceContext: surfaceContext
+  }));
+};
+export var 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.Fragment;
   var listRef = useRef(null);
   var setListRef = useCallback(function (list) {
@@ -88,9 +142,9 @@ export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
     return -1;
   }, [itemIndexByRowIndex, selectedItemIndex]);
   var rowKeySignature = 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]);
@@ -103,61 +157,75 @@ export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
     (_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 = useCallback(function (_ref3) {
+  var onRowsRendered = 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 = _toConsumableArray(itemIndexByRowIndex).filter(function (_ref4) {
-      var _ref5 = _slicedToArray(_ref4, 1),
-        rowIndex = _ref5[0];
+    var indexes = _toConsumableArray(itemIndexByRowIndex).filter(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 1),
+        rowIndex = _ref7[0];
       return rowIndex >= overscanStartIndex && rowIndex <= overscanStopIndex;
-    }).map(function (_ref6) {
-      var _ref7 = _slicedToArray(_ref6, 2),
-        itemIndex = _ref7[1];
+    }).map(function (_ref8) {
+      var _ref9 = _slicedToArray(_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 = useCallback(function (_ref8) {
+  }, [activePreviewItemKey, itemIndexByRowIndex, onItemVisibilityChange, onRenderedItemsChange, rows, updateHeight]);
+  var onScrollableContentScroll = useCallback(function (event) {
+    if (event.target === event.currentTarget && activePreviewItemKey) {
+      onItemVisibilityChange(activePreviewItemKey, false);
+    }
+  }, [activePreviewItemKey, onItemVisibilityChange]);
+  var renderRow = 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.createElement((_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : React.Fragment, null, null)) : /*#__PURE__*/React.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.createElement(RegisteredInsertMenuItem, {
+    var rowContent = registration.type === 'menu-section' ? ( /*#__PURE__*/React.createElement((_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : React.Fragment, null, null)) : /*#__PURE__*/React.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.createElement(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.createElement("div", {
         ref: function ref(element) {
           return registerChild === null || registerChild === void 0 ? void 0 : registerChild(element !== null && element !== void 0 ? element : undefined);
@@ -165,12 +233,21 @@ export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         ,
         style: style
-      }, rowContent);
+      }, /*#__PURE__*/React.createElement(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)
@@ -178,9 +255,13 @@ export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
   var onFooterItemHover = useCallback(function () {
     return onItemHover(footerItemIndex);
   }, [footerItemIndex, onItemHover]);
+  var onFooterItemFocus = useCallback(function () {
+    return onItemFocus(footerItemIndex);
+  }, [footerItemIndex, onItemFocus]);
   var footer = model.footer ? /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.footer,
-    onFocus: onFooterItemHover,
+    testId: "registered-insert-menu-footer",
+    xcss: showFooterDivider ? styles.footerWithDivider : styles.footer,
+    onFocus: onFooterItemFocus,
     onMouseMove: onFooterItemHover
   }, /*#__PURE__*/React.createElement(RegisteredInsertMenuItem, {
     editorView: editorView,
@@ -195,11 +276,14 @@ export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
   if (!model.root) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(RegisteredInsertMenuPreviewContext.Provider, {
+    value: activePreviewItemKey
+  }, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.content,
     style: contentStyle
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.scrollable
+    xcss: styles.scrollable,
+    onScroll: onScrollableContentScroll
   }, /*#__PURE__*/React.createElement(Box, {
     "aria-label": listLabel,
     "aria-owns": model.footer ? footerItemId : undefined,
@@ -221,9 +305,11 @@ export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
     scrollToAlignment: "auto",
     scrollToIndex: selectedRowIndex,
     width: LIST_WIDTH
-  }))), hasExternalControls && /*#__PURE__*/React.createElement(Box, null, emptyStateHandler({
-    mode: 'inline',
-    searchTerm: query,
-    showNoResultsMessage: false
-  }))), footer));
+  }))), hasNoSearchResults && /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
+    mode: "inline",
+    spacing: "compact"
+  }), externalControls && /*#__PURE__*/React.createElement(Box, {
+    testId: "registered-insert-menu-external-controls",
+    xcss: styles.externalControls
+  }, externalControls)), footer)));
 };

package/dist/types/ui/registered-insert-menu/RegisteredInsertMenu.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics/api';
 import type { RegisteredItemRankResolver } from '@atlaskit/editor-common/type-ahead/item-rank';
 import type { EmptyStateHandler } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -7,11 +8,12 @@ type Props = {
     components: RegisterComponent[];
     editorView: EditorView;
     emptyStateHandler?: EmptyStateHandler;
+    fireAnalyticsEvent?: EditorAnalyticsAPI['fireAnalyticsEvent'];
     getItemRank?: RegisteredItemRankResolver;
     isOffline: boolean;
     maxHeight?: number;
     onClose: () => void;
     onSelect: () => void;
 };
-export declare const RegisteredInsertMenu: ({ components, emptyStateHandler, getItemRank, editorView, isOffline, maxHeight, onClose, onSelect, }: Props) => React.JSX.Element;
+export declare const RegisteredInsertMenu: ({ components, emptyStateHandler, fireAnalyticsEvent, getItemRank, editorView, isOffline, maxHeight, onClose, onSelect, }: Props) => React.JSX.Element;
 export {};

package/dist/types/ui/registered-insert-menu/RegisteredInsertMenuItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SurfaceContext, RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
+export declare const RegisteredInsertMenuPreviewContext: React.Context<string | undefined>;
 type Props = {
     editorView: EditorView;
     id: string;

package/dist/types/ui/registered-insert-menu/RegisteredInsertMenuList.d.ts

@@ -4,6 +4,7 @@ import type { EmptyStateHandler } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
 type Props = {
+    activePreviewItemKey?: string;
     editorView: EditorView;
     emptyStateHandler?: EmptyStateHandler;
     isOffline: boolean;
@@ -13,7 +14,11 @@ type Props = {
     menuOpenId: symbol;
     model: QuickInsertMenuModel;
     onClose: () => void;
-    onItemHover: (index: number) => void;
+    onItemBlur: (itemKey: string) => void;
+    onItemFocus: (index: number, itemKey?: string) => void;
+    onItemHover: (index: number, itemKey?: string) => void;
+    onItemLeave: (itemKey: string) => void;
+    onItemVisibilityChange: (itemKey: string, isVisible: boolean) => void;
     onRenderedItemsChange: (range: {
         startIndex: number;
         stopIndex: number;
@@ -22,5 +27,5 @@ type Props = {
     selectedItemIndex: number;
     surfaceContext: SurfaceContext;
 };
-export declare const RegisteredInsertMenuList: ({ editorView, emptyStateHandler, isOffline, listId, listLabel, maxHeight, menuOpenId, model, onClose, query, onItemHover, onRenderedItemsChange, selectedItemIndex, surfaceContext, }: Props) => React.JSX.Element | null;
+export declare const RegisteredInsertMenuList: ({ editorView, emptyStateHandler, isOffline, listId, listLabel, maxHeight, menuOpenId, model, onClose, onItemFocus, onItemBlur, query, onItemHover, onItemLeave, onItemVisibilityChange, onRenderedItemsChange, selectedItemIndex, surfaceContext, activePreviewItemKey, }: Props) => React.JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "28.0.5",
+	"version": "29.0.0",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -23,44 +23,44 @@
 	"dependencies": {
 		"@atlaskit/browser-apis": "^1.2.0",
 		"@atlaskit/css": "^1.1.0",
-		"@atlaskit/editor-plugin-analytics": "^27.0.0",
-		"@atlaskit/editor-plugin-block-type": "^31.0.0",
-		"@atlaskit/editor-plugin-code-block": "^29.0.0",
-		"@atlaskit/editor-plugin-connectivity": "^27.0.0",
-		"@atlaskit/editor-plugin-date": "^29.0.0",
-		"@atlaskit/editor-plugin-emoji": "^28.0.0",
-		"@atlaskit/editor-plugin-expand": "^28.0.0",
-		"@atlaskit/editor-plugin-extension": "^30.0.0",
-		"@atlaskit/editor-plugin-feature-flags": "^26.0.0",
-		"@atlaskit/editor-plugin-hyperlink": "^29.0.0",
-		"@atlaskit/editor-plugin-image-upload": "^27.0.0",
-		"@atlaskit/editor-plugin-layout": "^28.0.0",
-		"@atlaskit/editor-plugin-media": "^29.0.0",
-		"@atlaskit/editor-plugin-media-insert": "^45.0.0",
-		"@atlaskit/editor-plugin-mentions": "^29.0.0",
-		"@atlaskit/editor-plugin-metrics": "^28.0.0",
-		"@atlaskit/editor-plugin-panel": "^29.0.0",
-		"@atlaskit/editor-plugin-placeholder-text": "^28.0.0",
-		"@atlaskit/editor-plugin-primary-toolbar": "^28.0.0",
-		"@atlaskit/editor-plugin-quick-insert": "^27.0.0",
-		"@atlaskit/editor-plugin-rule": "^27.0.0",
-		"@atlaskit/editor-plugin-status": "^28.0.0",
-		"@atlaskit/editor-plugin-table": "^39.0.0",
-		"@atlaskit/editor-plugin-tasks-and-decisions": "^30.0.0",
-		"@atlaskit/editor-plugin-toolbar": "^24.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^28.0.0",
-		"@atlaskit/editor-plugin-ui-control-registry": "^21.0.0",
+		"@atlaskit/editor-plugin-analytics": "^28.0.0",
+		"@atlaskit/editor-plugin-block-type": "^32.0.0",
+		"@atlaskit/editor-plugin-code-block": "^30.0.0",
+		"@atlaskit/editor-plugin-connectivity": "^28.0.0",
+		"@atlaskit/editor-plugin-date": "^30.0.0",
+		"@atlaskit/editor-plugin-emoji": "^29.0.0",
+		"@atlaskit/editor-plugin-expand": "^29.0.0",
+		"@atlaskit/editor-plugin-extension": "^31.0.0",
+		"@atlaskit/editor-plugin-feature-flags": "^27.0.0",
+		"@atlaskit/editor-plugin-hyperlink": "^30.0.0",
+		"@atlaskit/editor-plugin-image-upload": "^28.0.0",
+		"@atlaskit/editor-plugin-layout": "^29.0.0",
+		"@atlaskit/editor-plugin-media": "^30.0.0",
+		"@atlaskit/editor-plugin-media-insert": "^46.0.0",
+		"@atlaskit/editor-plugin-mentions": "^30.0.0",
+		"@atlaskit/editor-plugin-metrics": "^29.0.0",
+		"@atlaskit/editor-plugin-panel": "^30.0.0",
+		"@atlaskit/editor-plugin-placeholder-text": "^29.0.0",
+		"@atlaskit/editor-plugin-primary-toolbar": "^29.0.0",
+		"@atlaskit/editor-plugin-quick-insert": "^28.0.0",
+		"@atlaskit/editor-plugin-rule": "^28.0.0",
+		"@atlaskit/editor-plugin-status": "^29.0.0",
+		"@atlaskit/editor-plugin-table": "^40.0.0",
+		"@atlaskit/editor-plugin-tasks-and-decisions": "^31.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^25.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^29.0.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^22.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
-		"@atlaskit/editor-shared-styles": "^4.4.0",
+		"@atlaskit/editor-shared-styles": "^4.5.0",
 		"@atlaskit/editor-toolbar": "^2.8.0",
 		"@atlaskit/editor-toolbar-model": "^1.2.0",
 		"@atlaskit/editor-ui-control-model": "^2.10.0",
-		"@atlaskit/emoji": "^72.5.0",
+		"@atlaskit/emoji": "^73.0.0",
 		"@atlaskit/icon": "^38.0.0",
 		"@atlaskit/icon-lab": "^7.11.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
-		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/primitives": "^22.6.0",
 		"@atlaskit/textfield": "^10.2.0",
 		"@atlaskit/tmp-editor-statsig": "^240.0.0",
 		"@atlaskit/tokens": "^20.6.0",
@@ -72,7 +72,7 @@
 		"react-virtualized": "^9.22.6"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^131.2.0",
+		"@atlaskit/editor-common": "^132.0.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"