@atlaskit/editor-plugin-type-ahead 25.0.0 → 25.0.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 25.0.2
+
+### Patch Changes
+
+- [`395ccdc5786c2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/395ccdc5786c2) -
+  Clean up experiment `cc_fd_db_quick_insert_options`
+
+## 25.0.1
+
+### Patch Changes
+
+- [`2f527121e0516`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f527121e0516) -
+  Require deliberate pointer or keyboard activation before displaying registered slash-command
+  previews under `platform_editor_slash_command`. Avoid redundant menu renders when the pointer
+  moves within the active preview row.
+- [`2f527121e0516`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f527121e0516) -
+  Keep active slash-command previews positioned with custom popup hosts such as Whiteboards.
+- Updated dependencies
+
 ## 25.0.0
 
 ### Patch Changes

package/dist/cjs/ui/TypeAheadPopup.js

@@ -15,7 +15,6 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _featureGates = _interopRequireDefault(require("@atlaskit/feature-gate-js-client/feature-gates"));
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analytics2 = require("../pm-plugins/analytics");
@@ -116,9 +115,6 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     }
     var stopTime = performance.now();
     var time = stopTime - startTime;
-
-    // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
-    _featureGates.default.getExperimentValue('cc_fd_db_quick_insert_options', 'isEnabled', false);
     api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
       action: _analytics.ACTION.RENDERED,
       actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,

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

@@ -83,6 +83,7 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     selectedItemIndex = _useState4[0],
     setSelectedItemIndex = _useState4[1];
+  var selectedItemIndexRef = (0, _react.useRef)(selectedItemIndex);
   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(surface.root.key);
@@ -109,6 +110,11 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
     var _menuModel$fallbackIt;
     return [].concat((0, _toConsumableArray2.default)(menuModel.sections.flat()), (0, _toConsumableArray2.default)((_menuModel$fallbackIt = menuModel.fallbackItems) !== null && _menuModel$fallbackIt !== void 0 ? _menuModel$fallbackIt : []));
   }, [menuModel.fallbackItems, menuModel.sections]);
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    previewActivation = _useState6[0],
+    setPreviewActivation = _useState6[1];
+  var activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.menuModel) === menuModel ? previewActivation.itemKey : undefined;
   var selectableRowIndexes = (0, _react.useMemo)(function () {
     return rows.flatMap(function (registration, rowIndex) {
       return registration.type === 'menu-item' ? [rowIndex] : [];
@@ -120,8 +126,13 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
   }).join(',');
   var selectableItemCount = selectableRowIndexes.length + (menuModel.footer ? 1 : 0);
   (0, _react.useLayoutEffect)(function () {
-    setSelectedItemIndex(selectableItemCount > 0 ? 0 : -1);
+    var initialItemIndex = selectableItemCount > 0 ? 0 : -1;
+    selectedItemIndexRef.current = initialItemIndex;
+    setSelectedItemIndex(initialItemIndex);
   }, [query, selectableItemCount, selectableRowKeys]);
+  (0, _react.useLayoutEffect)(function () {
+    setPreviewActivation(undefined);
+  }, [menuModel, query]);
   var selectActiveItem = (0, _react.useCallback)(function (_mode) {
     var rowIndex = selectableRowIndexes[selectedItemIndex];
     var selectedId = rowIndex !== undefined ? (0, _getTypeAheadItemId.getTypeAheadItemId)(listId, rowIndex) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? (0, _getTypeAheadGlobalViewMoreId.getTypeAheadGlobalViewMoreId)(listId) : undefined;
@@ -130,34 +141,69 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
       (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || (_menuRef$current = _menuRef$current.ownerDocument.getElementById(selectedId)) === null || _menuRef$current === void 0 || _menuRef$current.click();
     }
   }, [listId, menuModel.footer, selectableRowIndexes, selectedItemIndex]);
+  var setKeyboardPreview = (0, _react.useCallback)(function (itemIndex) {
+    var rowIndex = selectableRowIndexes[itemIndex];
+    var registration = rowIndex === undefined ? undefined : rows[rowIndex];
+    setPreviewActivation((registration === null || registration === void 0 ? void 0 : registration.type) === 'menu-item' ? {
+      itemKey: registration.key,
+      menuModel: menuModel,
+      source: 'keyboard'
+    } : undefined);
+  }, [menuModel, rows, selectableRowIndexes]);
   var selectNextItem = (0, _react.useCallback)(function () {
-    setSelectedItemIndex(function (currentIndex) {
-      if (selectableItemCount === 0) {
-        return -1;
-      }
-      return currentIndex < 0 || currentIndex === selectableItemCount - 1 ? 0 : currentIndex + 1;
-    });
-  }, [selectableItemCount]);
+    var currentIndex = selectedItemIndexRef.current;
+    var nextIndex = selectableItemCount === 0 ? -1 : currentIndex < 0 || currentIndex === selectableItemCount - 1 ? 0 : currentIndex + 1;
+    selectedItemIndexRef.current = nextIndex;
+    setSelectedItemIndex(nextIndex);
+    setKeyboardPreview(nextIndex);
+  }, [selectableItemCount, setKeyboardPreview]);
   var selectPreviousItem = (0, _react.useCallback)(function () {
-    setSelectedItemIndex(function (currentIndex) {
-      if (selectableItemCount === 0) {
-        return -1;
+    var currentIndex = selectedItemIndexRef.current;
+    var previousIndex = selectableItemCount === 0 ? -1 : currentIndex <= 0 ? selectableItemCount - 1 : currentIndex - 1;
+    selectedItemIndexRef.current = previousIndex;
+    setSelectedItemIndex(previousIndex);
+    setKeyboardPreview(previousIndex);
+  }, [selectableItemCount, 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.menuModel) === menuModel && (current === null || current === void 0 ? void 0 : current.source) === 'pointer') {
+        return current;
       }
-      return currentIndex <= 0 ? selectableItemCount - 1 : currentIndex - 1;
+      return itemKey ? {
+        itemKey: itemKey,
+        menuModel: menuModel,
+        source: 'pointer'
+      } : undefined;
     });
-  }, [selectableItemCount]);
+  }, [menuModel]);
+  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 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 typeAheadContextValue = (0, _react.useMemo)(function () {
     return {
+      activePreviewItemKey: activePreviewItemKey,
       api: api,
       editorView: editorView,
       inputMethod: surface.inputMethod,
       menuOpenId: typeAheadSurfaceContext.menuOpenId,
       onClose: onClose,
+      popupsMountPoint: popupsMountPoint,
       query: query,
       surfaceContext: surfaceContext,
       triggerHandler: triggerHandler
     };
-  }, [api, editorView, onClose, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
+  }, [activePreviewItemKey, api, editorView, onClose, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
   var noOp = (0, _react.useCallback)(function () {}, []);
   var SurfaceProvider = surface.Provider;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputQuery.InputQuery, {
@@ -201,7 +247,9 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
     listId: listId,
     maxHeight: Math.max(0, menuHeight - MENU_VERTICAL_PADDING),
     model: menuModel,
-    onItemHover: setSelectedItemIndex,
+    onItemHover: onItemHover,
+    onItemLeave: onItemLeave,
+    onItemVisibilityChange: onItemVisibilityChange,
     selectedItemIndex: selectedItemIndex
   }))))));
 };

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

@@ -14,12 +14,31 @@ var TypeAheadItemRow = exports.TypeAheadItemRow = function TypeAheadItemRow(_ref
     Item = _ref.Item,
     listId = _ref.listId,
     onItemHover = _ref.onItemHover,
+    onItemLeave = _ref.onItemLeave,
+    onItemVisibilityChange = _ref.onItemVisibilityChange,
     registration = _ref.registration,
-    rowIndex = _ref.rowIndex;
+    rowIndex = _ref.rowIndex,
+    isVisible = _ref.isVisible;
   var onMouseMove = (0, _react.useCallback)(function () {
-    return onItemHover(itemIndex);
-  }, [itemIndex, onItemHover]);
+    return onItemHover(itemIndex, registration.key);
+  }, [itemIndex, onItemHover, registration.key]);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    return onItemLeave(registration.key);
+  }, [onItemLeave, registration.key]);
+  var onBlur = (0, _react.useCallback)(function (event) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      onItemLeave(registration.key);
+    }
+  }, [onItemLeave, registration.key]);
+  (0, _react.useLayoutEffect)(function () {
+    onItemVisibilityChange(registration.key, isVisible);
+    return function () {
+      return onItemVisibilityChange(registration.key, false);
+    };
+  }, [isVisible, onItemVisibilityChange, registration.key]);
   return /*#__PURE__*/_react.default.createElement("div", {
+    onBlur: onBlur,
+    onMouseLeave: onMouseLeave,
     onMouseMove: onMouseMove
   }, /*#__PURE__*/_react.default.createElement(Item, {
     id: (0, _getTypeAheadItemId.getTypeAheadItemId)(listId, rowIndex),

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

@@ -35,6 +35,8 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
     maxHeight = _ref.maxHeight,
     model = _ref.model,
     onItemHover = _ref.onItemHover,
+    onItemLeave = _ref.onItemLeave,
+    onItemVisibilityChange = _ref.onItemVisibilityChange,
     selectedItemIndex = _ref.selectedItemIndex;
   var intl = (0, _reactIntl.useIntl)();
   var listRef = (0, _react.useRef)(null);
@@ -106,6 +108,8 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
     Item: Item,
     listId: listId,
     onItemHover: onItemHover,
+    onItemLeave: onItemLeave,
+    onItemVisibilityChange: onItemVisibilityChange,
     rows: rows,
     selectedItemIndex: selectedItemIndex
   });

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

@@ -18,6 +18,8 @@ var createTypeAheadRowRenderer = exports.createTypeAheadRowRenderer = function c
     Item = _ref.Item,
     listId = _ref.listId,
     onItemHover = _ref.onItemHover,
+    onItemLeave = _ref.onItemLeave,
+    onItemVisibilityChange = _ref.onItemVisibilityChange,
     rows = _ref.rows,
     selectedItemIndex = _ref.selectedItemIndex;
   return function (_ref2) {
@@ -56,6 +58,9 @@ var createTypeAheadRowRenderer = exports.createTypeAheadRowRenderer = function c
         itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
         listId: listId,
         onItemHover: onItemHover,
+        onItemLeave: onItemLeave,
+        onItemVisibilityChange: onItemVisibilityChange,
+        isVisible: isVisible,
         registration: registration,
         rowIndex: index
       }));

package/dist/cjs/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -19,18 +19,21 @@ var TypeAheadQuickInsertItem = exports.TypeAheadQuickInsertItem = function TypeA
   var Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : _PassThrough.PassThrough;
   var contextValue = (0, _react.useMemo)(function () {
     return {
+      activePreviewItemKey: quickInsertContext.activePreviewItemKey,
       editorView: quickInsertContext.editorView,
       isOffline: quickInsertContext.isOffline,
       menuOpenId: quickInsertContext.menuOpenId,
+      popupsMountPoint: quickInsertContext.popupsMountPoint,
       surfaceContext: quickInsertContext.surfaceContext,
       surface: 'typeahead',
       item: {
         id: id,
+        isPreviewActive: quickInsertContext.activePreviewItemKey === registration.key,
         isSelected: isSelected
       },
       select: quickInsertContext.select
     };
-  }, [id, isSelected, quickInsertContext]);
+  }, [id, isSelected, quickInsertContext, registration.key]);
   return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, null, null));

package/dist/cjs/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js

@@ -15,11 +15,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var TypeAheadQuickInsertProvider = exports.TypeAheadQuickInsertProvider = function TypeAheadQuickInsertProvider(_ref) {
   var children = _ref.children;
   var _useTypeAheadContext = (0, _useTypeAheadContext2.useTypeAheadContext)(),
+    activePreviewItemKey = _useTypeAheadContext.activePreviewItemKey,
     api = _useTypeAheadContext.api,
     editorView = _useTypeAheadContext.editorView,
     inputMethod = _useTypeAheadContext.inputMethod,
     menuOpenId = _useTypeAheadContext.menuOpenId,
     onClose = _useTypeAheadContext.onClose,
+    popupsMountPoint = _useTypeAheadContext.popupsMountPoint,
     query = _useTypeAheadContext.query,
     surfaceContext = _useTypeAheadContext.surfaceContext,
     triggerHandler = _useTypeAheadContext.triggerHandler;
@@ -43,18 +45,21 @@ var TypeAheadQuickInsertProvider = exports.TypeAheadQuickInsertProvider = functi
   }, [editorView, inputMethod, onClose, query, triggerHandler]);
   var contextValue = (0, _react.useMemo)(function () {
     return {
+      activePreviewItemKey: activePreviewItemKey,
       editorView: editorView,
       isOffline: isOffline,
       menuOpenId: menuOpenId,
+      popupsMountPoint: popupsMountPoint,
       item: {
         id: 'typeahead-quick-insert',
+        isPreviewActive: false,
         isSelected: false
       },
       surface: 'typeahead',
       select: select,
       surfaceContext: surfaceContext
     };
-  }, [editorView, isOffline, menuOpenId, select, surfaceContext]);
+  }, [activePreviewItemKey, editorView, isOffline, menuOpenId, popupsMountPoint, select, surfaceContext]);
   return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
     value: contextValue
   }, children);

package/dist/es2019/ui/TypeAheadPopup.js

@@ -12,7 +12,6 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
-import FeatureGates from '@atlaskit/feature-gate-js-client/feature-gates';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
@@ -104,9 +103,6 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     }
     const stopTime = performance.now();
     const time = stopTime - startTime;
-
-    // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
-    FeatureGates.getExperimentValue('cc_fd_db_quick_insert_options', 'isEnabled', false);
     api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.fireAnalyticsEvent({
       action: ACTION.RENDERED,
       actionSubject: ACTION_SUBJECT.TYPEAHEAD,

package/dist/es2019/ui/registered-menu/RegisteredTypeAheadMenu.js

@@ -62,6 +62,7 @@ export const RegisteredTypeAheadMenu = ({
   }));
   const surfaceContext = useMemo(() => createSurfaceContext(TYPE_AHEAD_SURFACE_CONTEXT, typeAheadSurfaceContext), [typeAheadSurfaceContext]);
   const [selectedItemIndex, setSelectedItemIndex] = useState(0);
+  const selectedItemIndexRef = useRef(selectedItemIndex);
   const getComponents = useCallback(() => {
     var _api$uiControlRegistr;
     const components = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(surface.root.key);
@@ -83,6 +84,8 @@ export const RegisteredTypeAheadMenu = ({
     var _menuModel$fallbackIt;
     return [...menuModel.sections.flat(), ...((_menuModel$fallbackIt = menuModel.fallbackItems) !== null && _menuModel$fallbackIt !== void 0 ? _menuModel$fallbackIt : [])];
   }, [menuModel.fallbackItems, menuModel.sections]);
+  const [previewActivation, setPreviewActivation] = useState();
+  const activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.menuModel) === menuModel ? previewActivation.itemKey : undefined;
   const selectableRowIndexes = useMemo(() => rows.flatMap((registration, rowIndex) => registration.type === 'menu-item' ? [rowIndex] : []), [rows]);
   const selectableRowKeys = selectableRowIndexes.map(index => {
     var _rows$index;
@@ -90,8 +93,13 @@ export const RegisteredTypeAheadMenu = ({
   }).join(',');
   const selectableItemCount = selectableRowIndexes.length + (menuModel.footer ? 1 : 0);
   useLayoutEffect(() => {
-    setSelectedItemIndex(selectableItemCount > 0 ? 0 : -1);
+    const initialItemIndex = selectableItemCount > 0 ? 0 : -1;
+    selectedItemIndexRef.current = initialItemIndex;
+    setSelectedItemIndex(initialItemIndex);
   }, [query, selectableItemCount, selectableRowKeys]);
+  useLayoutEffect(() => {
+    setPreviewActivation(undefined);
+  }, [menuModel, query]);
   const selectActiveItem = useCallback(_mode => {
     const rowIndex = selectableRowIndexes[selectedItemIndex];
     const selectedId = rowIndex !== undefined ? getTypeAheadItemId(listId, rowIndex) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? getTypeAheadGlobalViewMoreId(listId) : undefined;
@@ -100,32 +108,63 @@ export const RegisteredTypeAheadMenu = ({
       (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$owne = _menuRef$current.ownerDocument.getElementById(selectedId)) === null || _menuRef$current$owne === void 0 ? void 0 : _menuRef$current$owne.click();
     }
   }, [listId, menuModel.footer, selectableRowIndexes, selectedItemIndex]);
+  const setKeyboardPreview = useCallback(itemIndex => {
+    const rowIndex = selectableRowIndexes[itemIndex];
+    const registration = rowIndex === undefined ? undefined : rows[rowIndex];
+    setPreviewActivation((registration === null || registration === void 0 ? void 0 : registration.type) === 'menu-item' ? {
+      itemKey: registration.key,
+      menuModel,
+      source: 'keyboard'
+    } : undefined);
+  }, [menuModel, rows, selectableRowIndexes]);
   const selectNextItem = useCallback(() => {
-    setSelectedItemIndex(currentIndex => {
-      if (selectableItemCount === 0) {
-        return -1;
-      }
-      return currentIndex < 0 || currentIndex === selectableItemCount - 1 ? 0 : currentIndex + 1;
-    });
-  }, [selectableItemCount]);
+    const currentIndex = selectedItemIndexRef.current;
+    const nextIndex = selectableItemCount === 0 ? -1 : currentIndex < 0 || currentIndex === selectableItemCount - 1 ? 0 : currentIndex + 1;
+    selectedItemIndexRef.current = nextIndex;
+    setSelectedItemIndex(nextIndex);
+    setKeyboardPreview(nextIndex);
+  }, [selectableItemCount, setKeyboardPreview]);
   const selectPreviousItem = useCallback(() => {
-    setSelectedItemIndex(currentIndex => {
-      if (selectableItemCount === 0) {
-        return -1;
+    const currentIndex = selectedItemIndexRef.current;
+    const previousIndex = selectableItemCount === 0 ? -1 : currentIndex <= 0 ? selectableItemCount - 1 : currentIndex - 1;
+    selectedItemIndexRef.current = previousIndex;
+    setSelectedItemIndex(previousIndex);
+    setKeyboardPreview(previousIndex);
+  }, [selectableItemCount, setKeyboardPreview]);
+  const onItemHover = useCallback((itemIndex, itemKey) => {
+    selectedItemIndexRef.current = itemIndex;
+    setSelectedItemIndex(itemIndex);
+    setPreviewActivation(current => {
+      if ((current === null || current === void 0 ? void 0 : current.itemKey) === itemKey && (current === null || current === void 0 ? void 0 : current.menuModel) === menuModel && (current === null || current === void 0 ? void 0 : current.source) === 'pointer') {
+        return current;
       }
-      return currentIndex <= 0 ? selectableItemCount - 1 : currentIndex - 1;
+      return itemKey ? {
+        itemKey,
+        menuModel,
+        source: 'pointer'
+      } : undefined;
     });
-  }, [selectableItemCount]);
+  }, [menuModel]);
+  const onItemLeave = useCallback(itemKey => {
+    setPreviewActivation(current => (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current);
+  }, []);
+  const onItemVisibilityChange = useCallback((itemKey, isVisible) => {
+    if (!isVisible) {
+      setPreviewActivation(current => (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current);
+    }
+  }, []);
   const typeAheadContextValue = useMemo(() => ({
+    activePreviewItemKey,
     api,
     editorView,
     inputMethod: surface.inputMethod,
     menuOpenId: typeAheadSurfaceContext.menuOpenId,
     onClose,
+    popupsMountPoint,
     query,
     surfaceContext,
     triggerHandler
-  }), [api, editorView, onClose, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
+  }), [activePreviewItemKey, api, editorView, onClose, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
   const noOp = useCallback(() => {}, []);
   const SurfaceProvider = surface.Provider;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputQuery, {
@@ -169,7 +208,9 @@ export const RegisteredTypeAheadMenu = ({
     listId: listId,
     maxHeight: Math.max(0, menuHeight - MENU_VERTICAL_PADDING),
     model: menuModel,
-    onItemHover: setSelectedItemIndex,
+    onItemHover: onItemHover,
+    onItemLeave: onItemLeave,
+    onItemVisibilityChange: onItemVisibilityChange,
     selectedItemIndex: selectedItemIndex
   }))))));
 };

package/dist/es2019/ui/registered-menu/TypeAheadItemRow.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useLayoutEffect } from 'react';
 import { getTypeAheadItemId } from './getTypeAheadItemId';
 export const TypeAheadItemRow = ({
   isSelected,
@@ -6,11 +6,26 @@ export const TypeAheadItemRow = ({
   Item,
   listId,
   onItemHover,
+  onItemLeave,
+  onItemVisibilityChange,
   registration,
-  rowIndex
+  rowIndex,
+  isVisible
 }) => {
-  const onMouseMove = useCallback(() => onItemHover(itemIndex), [itemIndex, onItemHover]);
+  const onMouseMove = useCallback(() => onItemHover(itemIndex, registration.key), [itemIndex, onItemHover, registration.key]);
+  const onMouseLeave = useCallback(() => onItemLeave(registration.key), [onItemLeave, registration.key]);
+  const onBlur = useCallback(event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      onItemLeave(registration.key);
+    }
+  }, [onItemLeave, registration.key]);
+  useLayoutEffect(() => {
+    onItemVisibilityChange(registration.key, isVisible);
+    return () => onItemVisibilityChange(registration.key, false);
+  }, [isVisible, onItemVisibilityChange, registration.key]);
   return /*#__PURE__*/React.createElement("div", {
+    onBlur: onBlur,
+    onMouseLeave: onMouseLeave,
     onMouseMove: onMouseMove
   }, /*#__PURE__*/React.createElement(Item, {
     id: getTypeAheadItemId(listId, rowIndex),

package/dist/es2019/ui/registered-menu/TypeAheadMenuRenderer.js

@@ -20,6 +20,8 @@ export const TypeAheadMenuRenderer = ({
   maxHeight,
   model,
   onItemHover,
+  onItemLeave,
+  onItemVisibilityChange,
   selectedItemIndex
 }) => {
   var _model$root$component;
@@ -78,6 +80,8 @@ export const TypeAheadMenuRenderer = ({
     Item,
     listId,
     onItemHover,
+    onItemLeave,
+    onItemVisibilityChange,
     rows,
     selectedItemIndex
   });

package/dist/es2019/ui/registered-menu/createTypeAheadRowRenderer.js

@@ -11,6 +11,8 @@ export const createTypeAheadRowRenderer = ({
   Item,
   listId,
   onItemHover,
+  onItemLeave,
+  onItemVisibilityChange,
   rows,
   selectedItemIndex
 }) => ({
@@ -50,6 +52,9 @@ export const createTypeAheadRowRenderer = ({
     itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
     listId: listId,
     onItemHover: onItemHover,
+    onItemLeave: onItemLeave,
+    onItemVisibilityChange: onItemVisibilityChange,
+    isVisible: isVisible,
     registration: registration,
     rowIndex: index
   })));

package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -11,17 +11,20 @@ export const TypeAheadQuickInsertItem = ({
   const quickInsertContext = useQuickInsertContext();
   const Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : PassThrough;
   const contextValue = useMemo(() => ({
+    activePreviewItemKey: quickInsertContext.activePreviewItemKey,
     editorView: quickInsertContext.editorView,
     isOffline: quickInsertContext.isOffline,
     menuOpenId: quickInsertContext.menuOpenId,
+    popupsMountPoint: quickInsertContext.popupsMountPoint,
     surfaceContext: quickInsertContext.surfaceContext,
     surface: 'typeahead',
     item: {
       id,
+      isPreviewActive: quickInsertContext.activePreviewItemKey === registration.key,
       isSelected
     },
     select: quickInsertContext.select
-  }), [id, isSelected, quickInsertContext]);
+  }), [id, isSelected, quickInsertContext, registration.key]);
   return /*#__PURE__*/React.createElement(QuickInsertProvider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Component, null, null));

package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js

@@ -8,11 +8,13 @@ export const TypeAheadQuickInsertProvider = ({
   children
 }) => {
   const {
+    activePreviewItemKey,
     api,
     editorView,
     inputMethod,
     menuOpenId,
     onClose,
+    popupsMountPoint,
     query,
     surfaceContext,
     triggerHandler
@@ -36,17 +38,20 @@ export const TypeAheadQuickInsertProvider = ({
     });
   }, [editorView, inputMethod, onClose, query, triggerHandler]);
   const contextValue = useMemo(() => ({
+    activePreviewItemKey,
     editorView,
     isOffline,
     menuOpenId,
+    popupsMountPoint,
     item: {
       id: 'typeahead-quick-insert',
+      isPreviewActive: false,
       isSelected: false
     },
     surface: 'typeahead',
     select,
     surfaceContext
-  }), [editorView, isOffline, menuOpenId, select, surfaceContext]);
+  }), [activePreviewItemKey, editorView, isOffline, menuOpenId, popupsMountPoint, select, surfaceContext]);
   return /*#__PURE__*/React.createElement(QuickInsertProvider, {
     value: contextValue
   }, children);

package/dist/esm/ui/TypeAheadPopup.js

@@ -13,7 +13,6 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
-import FeatureGates from '@atlaskit/feature-gate-js-client/feature-gates';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
@@ -106,9 +105,6 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     }
     var stopTime = performance.now();
     var time = stopTime - startTime;
-
-    // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
-    FeatureGates.getExperimentValue('cc_fd_db_quick_insert_options', 'isEnabled', false);
     api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
       action: ACTION.RENDERED,
       actionSubject: ACTION_SUBJECT.TYPEAHEAD,

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

@@ -74,6 +74,7 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     selectedItemIndex = _useState4[0],
     setSelectedItemIndex = _useState4[1];
+  var selectedItemIndexRef = useRef(selectedItemIndex);
   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(surface.root.key);
@@ -100,6 +101,11 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
     var _menuModel$fallbackIt;
     return [].concat(_toConsumableArray(menuModel.sections.flat()), _toConsumableArray((_menuModel$fallbackIt = menuModel.fallbackItems) !== null && _menuModel$fallbackIt !== void 0 ? _menuModel$fallbackIt : []));
   }, [menuModel.fallbackItems, menuModel.sections]);
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    previewActivation = _useState6[0],
+    setPreviewActivation = _useState6[1];
+  var activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.menuModel) === menuModel ? previewActivation.itemKey : undefined;
   var selectableRowIndexes = useMemo(function () {
     return rows.flatMap(function (registration, rowIndex) {
       return registration.type === 'menu-item' ? [rowIndex] : [];
@@ -111,8 +117,13 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
   }).join(',');
   var selectableItemCount = selectableRowIndexes.length + (menuModel.footer ? 1 : 0);
   useLayoutEffect(function () {
-    setSelectedItemIndex(selectableItemCount > 0 ? 0 : -1);
+    var initialItemIndex = selectableItemCount > 0 ? 0 : -1;
+    selectedItemIndexRef.current = initialItemIndex;
+    setSelectedItemIndex(initialItemIndex);
   }, [query, selectableItemCount, selectableRowKeys]);
+  useLayoutEffect(function () {
+    setPreviewActivation(undefined);
+  }, [menuModel, query]);
   var selectActiveItem = useCallback(function (_mode) {
     var rowIndex = selectableRowIndexes[selectedItemIndex];
     var selectedId = rowIndex !== undefined ? getTypeAheadItemId(listId, rowIndex) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? getTypeAheadGlobalViewMoreId(listId) : undefined;
@@ -121,34 +132,69 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
       (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || (_menuRef$current = _menuRef$current.ownerDocument.getElementById(selectedId)) === null || _menuRef$current === void 0 || _menuRef$current.click();
     }
   }, [listId, menuModel.footer, selectableRowIndexes, selectedItemIndex]);
+  var setKeyboardPreview = useCallback(function (itemIndex) {
+    var rowIndex = selectableRowIndexes[itemIndex];
+    var registration = rowIndex === undefined ? undefined : rows[rowIndex];
+    setPreviewActivation((registration === null || registration === void 0 ? void 0 : registration.type) === 'menu-item' ? {
+      itemKey: registration.key,
+      menuModel: menuModel,
+      source: 'keyboard'
+    } : undefined);
+  }, [menuModel, rows, selectableRowIndexes]);
   var selectNextItem = useCallback(function () {
-    setSelectedItemIndex(function (currentIndex) {
-      if (selectableItemCount === 0) {
-        return -1;
-      }
-      return currentIndex < 0 || currentIndex === selectableItemCount - 1 ? 0 : currentIndex + 1;
-    });
-  }, [selectableItemCount]);
+    var currentIndex = selectedItemIndexRef.current;
+    var nextIndex = selectableItemCount === 0 ? -1 : currentIndex < 0 || currentIndex === selectableItemCount - 1 ? 0 : currentIndex + 1;
+    selectedItemIndexRef.current = nextIndex;
+    setSelectedItemIndex(nextIndex);
+    setKeyboardPreview(nextIndex);
+  }, [selectableItemCount, setKeyboardPreview]);
   var selectPreviousItem = useCallback(function () {
-    setSelectedItemIndex(function (currentIndex) {
-      if (selectableItemCount === 0) {
-        return -1;
+    var currentIndex = selectedItemIndexRef.current;
+    var previousIndex = selectableItemCount === 0 ? -1 : currentIndex <= 0 ? selectableItemCount - 1 : currentIndex - 1;
+    selectedItemIndexRef.current = previousIndex;
+    setSelectedItemIndex(previousIndex);
+    setKeyboardPreview(previousIndex);
+  }, [selectableItemCount, setKeyboardPreview]);
+  var onItemHover = 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.menuModel) === menuModel && (current === null || current === void 0 ? void 0 : current.source) === 'pointer') {
+        return current;
       }
-      return currentIndex <= 0 ? selectableItemCount - 1 : currentIndex - 1;
+      return itemKey ? {
+        itemKey: itemKey,
+        menuModel: menuModel,
+        source: 'pointer'
+      } : undefined;
     });
-  }, [selectableItemCount]);
+  }, [menuModel]);
+  var onItemLeave = useCallback(function (itemKey) {
+    setPreviewActivation(function (current) {
+      return (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current;
+    });
+  }, []);
+  var onItemVisibilityChange = 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 typeAheadContextValue = useMemo(function () {
     return {
+      activePreviewItemKey: activePreviewItemKey,
       api: api,
       editorView: editorView,
       inputMethod: surface.inputMethod,
       menuOpenId: typeAheadSurfaceContext.menuOpenId,
       onClose: onClose,
+      popupsMountPoint: popupsMountPoint,
       query: query,
       surfaceContext: surfaceContext,
       triggerHandler: triggerHandler
     };
-  }, [api, editorView, onClose, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
+  }, [activePreviewItemKey, api, editorView, onClose, popupsMountPoint, query, surface.inputMethod, surfaceContext, triggerHandler, typeAheadSurfaceContext]);
   var noOp = useCallback(function () {}, []);
   var SurfaceProvider = surface.Provider;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputQuery, {
@@ -192,7 +238,9 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
     listId: listId,
     maxHeight: Math.max(0, menuHeight - MENU_VERTICAL_PADDING),
     model: menuModel,
-    onItemHover: setSelectedItemIndex,
+    onItemHover: onItemHover,
+    onItemLeave: onItemLeave,
+    onItemVisibilityChange: onItemVisibilityChange,
     selectedItemIndex: selectedItemIndex
   }))))));
 };

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useLayoutEffect } from 'react';
 import { getTypeAheadItemId } from './getTypeAheadItemId';
 export var TypeAheadItemRow = function TypeAheadItemRow(_ref) {
   var isSelected = _ref.isSelected,
@@ -6,12 +6,31 @@ export var TypeAheadItemRow = function TypeAheadItemRow(_ref) {
     Item = _ref.Item,
     listId = _ref.listId,
     onItemHover = _ref.onItemHover,
+    onItemLeave = _ref.onItemLeave,
+    onItemVisibilityChange = _ref.onItemVisibilityChange,
     registration = _ref.registration,
-    rowIndex = _ref.rowIndex;
+    rowIndex = _ref.rowIndex,
+    isVisible = _ref.isVisible;
   var onMouseMove = useCallback(function () {
-    return onItemHover(itemIndex);
-  }, [itemIndex, onItemHover]);
+    return onItemHover(itemIndex, registration.key);
+  }, [itemIndex, onItemHover, registration.key]);
+  var onMouseLeave = useCallback(function () {
+    return onItemLeave(registration.key);
+  }, [onItemLeave, registration.key]);
+  var onBlur = useCallback(function (event) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      onItemLeave(registration.key);
+    }
+  }, [onItemLeave, registration.key]);
+  useLayoutEffect(function () {
+    onItemVisibilityChange(registration.key, isVisible);
+    return function () {
+      return onItemVisibilityChange(registration.key, false);
+    };
+  }, [isVisible, onItemVisibilityChange, registration.key]);
   return /*#__PURE__*/React.createElement("div", {
+    onBlur: onBlur,
+    onMouseLeave: onMouseLeave,
     onMouseMove: onMouseMove
   }, /*#__PURE__*/React.createElement(Item, {
     id: getTypeAheadItemId(listId, rowIndex),

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

@@ -26,6 +26,8 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
     maxHeight = _ref.maxHeight,
     model = _ref.model,
     onItemHover = _ref.onItemHover,
+    onItemLeave = _ref.onItemLeave,
+    onItemVisibilityChange = _ref.onItemVisibilityChange,
     selectedItemIndex = _ref.selectedItemIndex;
   var intl = useIntl();
   var listRef = useRef(null);
@@ -97,6 +99,8 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
     Item: Item,
     listId: listId,
     onItemHover: onItemHover,
+    onItemLeave: onItemLeave,
+    onItemVisibilityChange: onItemVisibilityChange,
     rows: rows,
     selectedItemIndex: selectedItemIndex
   });

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

@@ -11,6 +11,8 @@ export var createTypeAheadRowRenderer = function createTypeAheadRowRenderer(_ref
     Item = _ref.Item,
     listId = _ref.listId,
     onItemHover = _ref.onItemHover,
+    onItemLeave = _ref.onItemLeave,
+    onItemVisibilityChange = _ref.onItemVisibilityChange,
     rows = _ref.rows,
     selectedItemIndex = _ref.selectedItemIndex;
   return function (_ref2) {
@@ -49,6 +51,9 @@ export var createTypeAheadRowRenderer = function createTypeAheadRowRenderer(_ref
         itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
         listId: listId,
         onItemHover: onItemHover,
+        onItemLeave: onItemLeave,
+        onItemVisibilityChange: onItemVisibilityChange,
+        isVisible: isVisible,
         registration: registration,
         rowIndex: index
       }));

package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -11,18 +11,21 @@ export var TypeAheadQuickInsertItem = function TypeAheadQuickInsertItem(_ref) {
   var Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : PassThrough;
   var contextValue = useMemo(function () {
     return {
+      activePreviewItemKey: quickInsertContext.activePreviewItemKey,
       editorView: quickInsertContext.editorView,
       isOffline: quickInsertContext.isOffline,
       menuOpenId: quickInsertContext.menuOpenId,
+      popupsMountPoint: quickInsertContext.popupsMountPoint,
       surfaceContext: quickInsertContext.surfaceContext,
       surface: 'typeahead',
       item: {
         id: id,
+        isPreviewActive: quickInsertContext.activePreviewItemKey === registration.key,
         isSelected: isSelected
       },
       select: quickInsertContext.select
     };
-  }, [id, isSelected, quickInsertContext]);
+  }, [id, isSelected, quickInsertContext, registration.key]);
   return /*#__PURE__*/React.createElement(QuickInsertProvider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Component, null, null));

package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js

@@ -7,11 +7,13 @@ import { useTypeAheadContext } from '../useTypeAheadContext';
 export var TypeAheadQuickInsertProvider = function TypeAheadQuickInsertProvider(_ref) {
   var children = _ref.children;
   var _useTypeAheadContext = useTypeAheadContext(),
+    activePreviewItemKey = _useTypeAheadContext.activePreviewItemKey,
     api = _useTypeAheadContext.api,
     editorView = _useTypeAheadContext.editorView,
     inputMethod = _useTypeAheadContext.inputMethod,
     menuOpenId = _useTypeAheadContext.menuOpenId,
     onClose = _useTypeAheadContext.onClose,
+    popupsMountPoint = _useTypeAheadContext.popupsMountPoint,
     query = _useTypeAheadContext.query,
     surfaceContext = _useTypeAheadContext.surfaceContext,
     triggerHandler = _useTypeAheadContext.triggerHandler;
@@ -35,18 +37,21 @@ export var TypeAheadQuickInsertProvider = function TypeAheadQuickInsertProvider(
   }, [editorView, inputMethod, onClose, query, triggerHandler]);
   var contextValue = useMemo(function () {
     return {
+      activePreviewItemKey: activePreviewItemKey,
       editorView: editorView,
       isOffline: isOffline,
       menuOpenId: menuOpenId,
+      popupsMountPoint: popupsMountPoint,
       item: {
         id: 'typeahead-quick-insert',
+        isPreviewActive: false,
         isSelected: false
       },
       surface: 'typeahead',
       select: select,
       surfaceContext: surfaceContext
     };
-  }, [editorView, isOffline, menuOpenId, select, surfaceContext]);
+  }, [activePreviewItemKey, editorView, isOffline, menuOpenId, popupsMountPoint, select, surfaceContext]);
   return /*#__PURE__*/React.createElement(QuickInsertProvider, {
     value: contextValue
   }, children);

package/dist/types/ui/registered-menu/TypeAheadContext.d.ts

@@ -5,11 +5,13 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
 import type { TypeAheadPlugin } from '../../typeAheadPluginType';
 export type TypeAheadContextValue = {
+    activePreviewItemKey?: string;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
     editorView: EditorView;
     inputMethod: INPUT_METHOD.QUICK_INSERT;
     menuOpenId: symbol;
     onClose: () => void;
+    popupsMountPoint?: HTMLElement;
     query: string;
     surfaceContext: SurfaceContext;
     triggerHandler: TypeAheadHandler;

package/dist/types/ui/registered-menu/TypeAheadItemRow.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
 import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
 import type { TypeAheadItemComponent } from './typeAheadMenuTypes';
-export declare const TypeAheadItemRow: ({ isSelected, itemIndex, Item, listId, onItemHover, registration, rowIndex, }: {
+export declare const TypeAheadItemRow: ({ isSelected, itemIndex, Item, listId, onItemHover, onItemLeave, onItemVisibilityChange, registration, rowIndex, isVisible, }: {
     isSelected: boolean;
+    isVisible: boolean;
     Item: TypeAheadItemComponent;
     itemIndex: number;
     listId: string;
-    onItemHover: (itemIndex: number) => void;
+    onItemHover: (itemIndex: number, itemKey: string) => void;
+    onItemLeave: (itemKey: string) => void;
+    onItemVisibilityChange: (itemKey: string, isVisible: boolean) => void;
     registration: RegisterMenuItem;
     rowIndex: number;
 }) => React.JSX.Element;

package/dist/types/ui/registered-menu/TypeAheadMenuRenderer.d.ts

@@ -8,8 +8,10 @@ type Props = {
     listLabel: MessageDescriptor;
     maxHeight: number;
     model: TypeAheadMenuModel;
-    onItemHover: (itemIndex: number) => void;
+    onItemHover: (itemIndex: number, itemKey?: string) => void;
+    onItemLeave: (itemKey: string) => void;
+    onItemVisibilityChange: (itemKey: string, isVisible: boolean) => void;
     selectedItemIndex: number;
 };
-export declare const TypeAheadMenuRenderer: ({ Item, listLabel, listId, maxHeight, model, onItemHover, selectedItemIndex, }: Props) => React.JSX.Element | null;
+export declare const TypeAheadMenuRenderer: ({ Item, listLabel, listId, maxHeight, model, onItemHover, onItemLeave, onItemVisibilityChange, selectedItemIndex, }: Props) => React.JSX.Element | null;
 export {};

package/dist/types/ui/registered-menu/createTypeAheadRowRenderer.d.ts

@@ -2,12 +2,14 @@ import type { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeas
 import type { ListRowRenderer } from 'react-virtualized/dist/commonjs/List';
 import type { RegisterMenuItem, RegisterMenuSection } from '@atlaskit/editor-ui-control-model/types';
 import type { TypeAheadItemComponent } from './typeAheadMenuTypes';
-export declare const createTypeAheadRowRenderer: ({ cache, onMeasured, itemIndexByRowIndex, Item, listId, onItemHover, rows, selectedItemIndex, }: {
+export declare const createTypeAheadRowRenderer: ({ cache, onMeasured, itemIndexByRowIndex, Item, listId, onItemHover, onItemLeave, onItemVisibilityChange, rows, selectedItemIndex, }: {
     cache: CellMeasurerCache;
     Item: TypeAheadItemComponent;
     itemIndexByRowIndex: Map<number, number>;
     listId: string;
-    onItemHover: (itemIndex: number) => void;
+    onItemHover: (itemIndex: number, itemKey: string) => void;
+    onItemLeave: (itemKey: string) => void;
+    onItemVisibilityChange: (itemKey: string, isVisible: boolean) => void;
     onMeasured: () => void;
     rows: Array<RegisterMenuItem | RegisterMenuSection>;
     selectedItemIndex: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "25.0.0",
+	"version": "25.0.2",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,15 +35,15 @@
 		"@atlaskit/heading": "^8.0.0",
 		"@atlaskit/icon": "^38.0.0",
 		"@atlaskit/insm": "^3.0.0",
-		"@atlaskit/mention": "^30.0.0",
+		"@atlaskit/mention": "^30.1.0",
 		"@atlaskit/menu": "^11.0.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/prosemirror-history": "^1.3.0",
 		"@atlaskit/prosemirror-input-rules": "^4.1.0",
-		"@atlaskit/tmp-editor-statsig": "^220.0.0",
-		"@atlaskit/tokens": "^20.1.0",
+		"@atlaskit/tmp-editor-statsig": "^221.0.0",
+		"@atlaskit/tokens": "^20.2.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -54,7 +54,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^128.0.0",
+		"@atlaskit/editor-common": "^128.2.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"