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

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

@@ -7,6 +7,7 @@ import { getDocument } from '@atlaskit/browser-apis';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages/insert-block';
 import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
 import { getQuickInsertMenuModel, getQuickInsertMenuRows, selectQuickInsertCategoryItems } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
+import { useQuickInsertSearchAnalytics } from '@atlaskit/editor-common/quick-insert/use-search-analytics';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
@@ -21,6 +22,7 @@ const styles = {
 export const RegisteredInsertMenu = ({
   components,
   emptyStateHandler,
+  fireAnalyticsEvent,
   getItemRank,
   editorView,
   isOffline,
@@ -38,6 +40,7 @@ export const RegisteredInsertMenu = ({
   const [menuOpenId] = useState(() => Symbol('registered-insert-menu-open'));
   const [query, setQuery] = useState('');
   const [selectedItemIndex, setSelectedItemIndex] = useState(0);
+  const selectedItemIndexRef = useRef(selectedItemIndex);
   const [renderedItems, setRenderedItems] = useState({
     startIndex: -1,
     stopIndex: -1
@@ -65,22 +68,102 @@ export const RegisteredInsertMenu = ({
     selectCategoryItems: hasSectionOverflowItems ? selectQuickInsertCategoryItems : undefined,
     surfaceContext
   }), [components, formatMessage, getItemRank, hasSectionOverflowItems, query, surfaceContext]);
+  const [previewActivation, setPreviewActivation] = useState();
+  const activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.model) === model ? previewActivation.itemKey : undefined;
+  const searchResultCount = useMemo(() => model.sections.reduce((count, section) => count + section.filter(({
+    key,
+    type
+  }) => type === 'menu-item' && !isSectionOverflowItemKey(key)).length, 0), [model.sections]);
+  const flushSearchAnalytics = useQuickInsertSearchAnalytics({
+    fireAnalyticsEvent,
+    query,
+    resultCount: searchResultCount,
+    surface: 'toolbar'
+  });
+  const closeWithAnalytics = useCallback(() => {
+    flushSearchAnalytics();
+    onClose();
+  }, [flushSearchAnalytics, onClose]);
+  const selectWithAnalytics = useCallback(() => {
+    flushSearchAnalytics();
+    onSelect();
+  }, [flushSearchAnalytics, onSelect]);
   const selectableItems = useMemo(() => getQuickInsertMenuRows(model).filter(row => row.type === 'menu-item'), [model]);
   const itemCount = selectableItems.length + (model.footer ? 1 : 0);
   const selectableItemKeys = useMemo(() => [...selectableItems, ...(model.footer ? [model.footer] : [])].map(({
     key
   }) => key).join(','), [model.footer, selectableItems]);
   useLayoutEffect(() => {
-    setSelectedItemIndex(itemCount > 0 ? 0 : -1);
+    const initialItemIndex = itemCount > 0 ? 0 : -1;
+    selectedItemIndexRef.current = initialItemIndex;
+    setSelectedItemIndex(initialItemIndex);
   }, [itemCount, query, selectableItemKeys]);
+  useLayoutEffect(() => {
+    setPreviewActivation(undefined);
+  }, [model, query]);
   const isActiveItemMounted = selectedItemIndex >= 0 && selectedItemIndex < itemCount && (selectedItemIndex >= renderedItems.startIndex && selectedItemIndex <= renderedItems.stopIndex || Boolean(model.footer) && selectedItemIndex === itemCount - 1);
   const activeItemId = `${listId}-${selectedItemIndex}`;
+  const setKeyboardPreview = useCallback(itemIndex => {
+    const item = selectableItems[itemIndex];
+    setPreviewActivation(item ? {
+      itemKey: item.key,
+      model,
+      source: 'keyboard'
+    } : undefined);
+  }, [model, selectableItems]);
   const selectNextItem = useCallback(() => {
-    setSelectedItemIndex(index => itemCount === 0 ? -1 : (index + 1) % itemCount);
-  }, [itemCount]);
+    const currentIndex = selectedItemIndexRef.current;
+    const nextIndex = itemCount === 0 ? -1 : currentIndex < 0 ? 0 : (currentIndex + 1) % itemCount;
+    selectedItemIndexRef.current = nextIndex;
+    setSelectedItemIndex(nextIndex);
+    setKeyboardPreview(nextIndex);
+  }, [itemCount, setKeyboardPreview]);
   const selectPreviousItem = useCallback(() => {
-    setSelectedItemIndex(index => itemCount === 0 ? -1 : index <= 0 ? itemCount - 1 : index - 1);
-  }, [itemCount]);
+    const currentIndex = selectedItemIndexRef.current;
+    const previousIndex = itemCount === 0 ? -1 : currentIndex <= 0 ? itemCount - 1 : currentIndex - 1;
+    selectedItemIndexRef.current = previousIndex;
+    setSelectedItemIndex(previousIndex);
+    setKeyboardPreview(previousIndex);
+  }, [itemCount, 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.model) === model && (current === null || current === void 0 ? void 0 : current.source) === 'pointer') {
+        return current;
+      }
+      return itemKey ? {
+        itemKey,
+        model,
+        source: 'pointer'
+      } : undefined;
+    });
+  }, [model]);
+  const onItemFocus = 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.model) === model) {
+        return current;
+      }
+      return itemKey ? {
+        itemKey,
+        model,
+        source: 'keyboard'
+      } : undefined;
+    });
+  }, [model]);
+  const onItemLeave = useCallback(itemKey => {
+    setPreviewActivation(current => (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current);
+  }, []);
+  const onItemBlur = useCallback(itemKey => {
+    setPreviewActivation(current => (current === null || current === void 0 ? void 0 : 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 selectActiveItem = useCallback(() => {
     if (isActiveItemMounted) {
       var _getDocument, _getDocument$getEleme;
@@ -89,12 +172,11 @@ export const RegisteredInsertMenu = ({
   }, [activeItemId, isActiveItemMounted]);
   const onQueryChange = useCallback(event => {
     setQuery(event.currentTarget.value);
-    setSelectedItemIndex(0);
   }, []);
   const onKeyDown = useCallback(event => {
     if (event.key === 'Escape') {
       event.preventDefault();
-      onClose();
+      closeWithAnalytics();
       return;
     }
 
@@ -118,7 +200,7 @@ export const RegisteredInsertMenu = ({
         selectActiveItem();
         break;
     }
-  }, [onClose, selectActiveItem, selectNextItem, selectPreviousItem]);
+  }, [closeWithAnalytics, selectActiveItem, selectNextItem, selectPreviousItem]);
   return /*#__PURE__*/React.createElement(Box, {
     "data-keyboard-navigation-independent": "",
     testId: "registered-insert-menu",
@@ -145,11 +227,16 @@ export const RegisteredInsertMenu = ({
     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/es2019/ui/registered-insert-menu/RegisteredInsertMenuContent.js

@@ -1,8 +1,10 @@
-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';
+const EMPTY_COMPONENTS = [];
+const subscribeToNothing = () => () => {};
 const RegisteredInsertMenuContainer = ({
   children
 }) => {
@@ -22,12 +24,13 @@ export const RegisteredInsertMenuContent = ({
   onSelect,
   target
 }) => {
-  var _api$quickInsert, _api$quickInsert$shar, _api$quickInsert2, _api$quickInsert2$sha;
-  // Keep registrations stable while the open menu is searched or navigated.
-  const [components] = useState(() => {
-    var _api$uiControlRegistr, _api$uiControlRegistr2;
-    return (_api$uiControlRegistr = api === null || api === void 0 ? 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 : [];
-  });
+  var _api$uiControlRegistr2, _api$uiControlRegistr3, _api$quickInsert, _api$quickInsert$shar, _api$analytics, _api$quickInsert2, _api$quickInsert2$sha;
+  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(MENU.key);
+    return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
+  }, [api]);
+  const components = useSyncExternalStore((_api$uiControlRegistr2 = api === null || api === void 0 ? 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);
   const onClickOutside = useCallback(event => {
     if (event.target instanceof Node && target !== null && target !== void 0 && target.contains(event.target)) {
       return;
@@ -40,6 +43,7 @@ export const RegisteredInsertMenuContent = ({
     components: components,
     editorView: editorView,
     emptyStateHandler: api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : (_api$quickInsert$shar = _api$quickInsert.sharedState.currentState()) === null || _api$quickInsert$shar === void 0 ? void 0 : _api$quickInsert$shar.emptyStateHandler,
+    fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent,
     getItemRank: api === null || api === void 0 ? void 0 : (_api$quickInsert2 = api.quickInsert) === null || _api$quickInsert2 === void 0 ? void 0 : (_api$quickInsert2$sha = _api$quickInsert2.sharedState.currentState()) === null || _api$quickInsert2$sha === void 0 ? void 0 : _api$quickInsert2$sha.getItemRank,
     isOffline: isOffline,
     maxHeight: maxHeight,

package/dist/es2019/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 const RegisteredInsertMenuPreviewContext = /*#__PURE__*/createContext(undefined);
 export const RegisteredInsertMenuItem = ({
   editorView,
   id,
@@ -14,6 +16,8 @@ export const RegisteredInsertMenuItem = ({
 }) => {
   var _registration$compone;
   const Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : React.Fragment;
+  const activePreviewItemKey = useContext(RegisteredInsertMenuPreviewContext);
+  const isPreviewActive = activePreviewItemKey === registration.key;
   const select = useCallback(selectionHandler => {
     // Close first so a registered item may safely focus the editor or open its picker.
     onClose();
@@ -36,13 +40,14 @@ export const RegisteredInsertMenuItem = ({
     isOffline,
     item: {
       id,
+      isPreviewActive,
       isSelected
     },
     menuOpenId,
     select,
     surface: 'toolbar',
     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/es2019/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/es2019/ui/registered-insert-menu/RegisteredInsertMenuList.js

@@ -5,10 +5,11 @@ import { ax, ix } from "@compiled/react/runtime";
 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';
 const ESTIMATED_ROW_HEIGHT = 44;
 // 44px item + 1px separator.
 const MENU_FOOTER_HEIGHT = 45;
@@ -21,7 +22,46 @@ const listAriaProps = {
 const 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"
+};
+const RegisteredInsertMenuItemRow = ({
+  editorView,
+  id,
+  isOffline,
+  isSelected,
+  itemIndex,
+  menuOpenId,
+  onClose,
+  onItemFocus,
+  onItemBlur,
+  onItemHover,
+  onItemLeave,
+  registration,
+  surfaceContext
+}) => {
+  useLayoutEffect(() => () => onItemLeave(registration.key), [onItemLeave, registration.key]);
+  const onBlur = useCallback(event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      onItemBlur(registration.key);
+    }
+  }, [onItemBlur, registration.key]);
+  return /*#__PURE__*/React.createElement("div", {
+    onBlur: onBlur,
+    onFocus: () => onItemFocus(itemIndex, registration.key),
+    onMouseLeave: () => onItemLeave(registration.key),
+    onMouseMove: () => 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 const RegisteredInsertMenuList = ({
   editorView,
@@ -33,11 +73,16 @@ export const RegisteredInsertMenuList = ({
   menuOpenId,
   model,
   onClose,
+  onItemFocus,
+  onItemBlur,
   query,
   onItemHover,
+  onItemLeave,
+  onItemVisibilityChange,
   onRenderedItemsChange,
   selectedItemIndex,
-  surfaceContext
+  surfaceContext,
+  activePreviewItemKey
 }) => {
   var _model$root$component, _model$root;
   const 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;
@@ -84,16 +129,31 @@ export const RegisteredInsertMenuList = ({
   }, [cache, rowKeySignature]);
   const onRowsRendered = useCallback(({
     overscanStartIndex,
-    overscanStopIndex
+    overscanStopIndex,
+    startIndex,
+    stopIndex
   }) => {
     var _indexes$, _indexes;
+    if (activePreviewItemKey) {
+      const previewRowIndex = rows.findIndex(({
+        key
+      }) => key === activePreviewItemKey);
+      if (previewRowIndex < startIndex || previewRowIndex > stopIndex) {
+        onItemVisibilityChange(activePreviewItemKey, false);
+      }
+    }
     updateHeight();
     const indexes = [...itemIndexByRowIndex].filter(([rowIndex]) => rowIndex >= overscanStartIndex && rowIndex <= overscanStopIndex).map(([, itemIndex]) => 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]);
+  }, [activePreviewItemKey, itemIndexByRowIndex, onItemVisibilityChange, onRenderedItemsChange, rows, updateHeight]);
+  const onScrollableContentScroll = useCallback(event => {
+    if (event.target === event.currentTarget && activePreviewItemKey) {
+      onItemVisibilityChange(activePreviewItemKey, false);
+    }
+  }, [activePreviewItemKey, onItemVisibilityChange]);
   const renderRow = useCallback(({
     index,
     key,
@@ -106,19 +166,21 @@ export const RegisteredInsertMenuList = ({
       return null;
     }
     const itemIndex = itemIndexByRowIndex.get(index);
-    const 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: () => onItemHover(itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0),
-      onMouseMove: () => onItemHover(itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0)
-    }, /*#__PURE__*/React.createElement(RegisteredInsertMenuItem, {
+    const 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: `${listId}-${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,
@@ -132,19 +194,30 @@ export const RegisteredInsertMenuList = ({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: style
-    }, rowContent));
-  }, [cache, editorView, isOffline, itemIndexByRowIndex, listId, menuOpenId, onClose, onItemHover, rows, selectedItemIndex, surfaceContext]);
+    }, /*#__PURE__*/React.createElement(Box, {
+      paddingBlockEnd: index === rows.length - 1 ? 'space.100' : undefined
+    }, rowContent)));
+  }, [cache, editorView, isOffline, itemIndexByRowIndex, listId, menuOpenId, onClose, onItemFocus, onItemBlur, onItemHover, onItemLeave, rows, selectedItemIndex, surfaceContext]);
   const footerItemIndex = itemIndexByRowIndex.size;
   const footerItemId = `${listId}-${footerItemIndex}`;
   const hasExternalControls = model.fallbackItems !== undefined && emptyStateHandler !== undefined;
+  const hasNoSearchResults = query !== '' && rows.length === 0;
+  const externalControls = hasExternalControls && emptyStateHandler ? emptyStateHandler({
+    mode: 'inline',
+    searchTerm: query,
+    showNoResultsMessage: false
+  }) : null;
+  const showFooterDivider = !hasNoSearchResults || Boolean(externalControls);
   const listMaxHeight = Math.max(0, maxHeight - MENU_SEARCH_HEIGHT - (model.footer ? MENU_FOOTER_HEIGHT : 0));
   const contentStyle = {
     maxHeight: Math.max(0, maxHeight - MENU_SEARCH_HEIGHT)
   };
   const onFooterItemHover = useCallback(() => onItemHover(footerItemIndex), [footerItemIndex, onItemHover]);
+  const onFooterItemFocus = useCallback(() => onItemFocus(footerItemIndex), [footerItemIndex, onItemFocus]);
   const 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,
@@ -159,11 +232,14 @@ export const RegisteredInsertMenuList = ({
   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,
@@ -185,9 +261,11 @@ export const RegisteredInsertMenuList = ({
     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/esm/ui/registered-insert-menu/RegisteredInsertMenu.js

@@ -9,6 +9,7 @@ import { getDocument } from '@atlaskit/browser-apis';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages/insert-block';
 import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
 import { getQuickInsertMenuModel, getQuickInsertMenuRows, selectQuickInsertCategoryItems } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
+import { useQuickInsertSearchAnalytics } from '@atlaskit/editor-common/quick-insert/use-search-analytics';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
 import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
@@ -23,6 +24,7 @@ var styles = {
 export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
   var components = _ref.components,
     emptyStateHandler = _ref.emptyStateHandler,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
     getItemRank = _ref.getItemRank,
     editorView = _ref.editorView,
     isOffline = _ref.isOffline,
@@ -49,6 +51,7 @@ export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     selectedItemIndex = _useState6[0],
     setSelectedItemIndex = _useState6[1];
+  var selectedItemIndexRef = useRef(selectedItemIndex);
   var _useState7 = useState({
       startIndex: -1,
       stopIndex: -1
@@ -86,6 +89,34 @@ export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
       surfaceContext: surfaceContext
     });
   }, [components, formatMessage, getItemRank, hasSectionOverflowItems, query, surfaceContext]);
+  var _useState9 = useState(),
+    _useState0 = _slicedToArray(_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 = 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' && !isSectionOverflowItemKey(key);
+      }).length;
+    }, 0);
+  }, [model.sections]);
+  var flushSearchAnalytics = useQuickInsertSearchAnalytics({
+    fireAnalyticsEvent: fireAnalyticsEvent,
+    query: query,
+    resultCount: searchResultCount,
+    surface: 'toolbar'
+  });
+  var closeWithAnalytics = useCallback(function () {
+    flushSearchAnalytics();
+    onClose();
+  }, [flushSearchAnalytics, onClose]);
+  var selectWithAnalytics = useCallback(function () {
+    flushSearchAnalytics();
+    onSelect();
+  }, [flushSearchAnalytics, onSelect]);
   var selectableItems = useMemo(function () {
     return getQuickInsertMenuRows(model).filter(function (row) {
       return row.type === 'menu-item';
@@ -93,26 +124,88 @@ export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
   }, [model]);
   var itemCount = selectableItems.length + (model.footer ? 1 : 0);
   var selectableItemKeys = useMemo(function () {
-    return [].concat(_toConsumableArray(selectableItems), _toConsumableArray(model.footer ? [model.footer] : [])).map(function (_ref3) {
-      var key = _ref3.key;
+    return [].concat(_toConsumableArray(selectableItems), _toConsumableArray(model.footer ? [model.footer] : [])).map(function (_ref4) {
+      var key = _ref4.key;
       return key;
     }).join(',');
   }, [model.footer, selectableItems]);
   useLayoutEffect(function () {
-    setSelectedItemIndex(itemCount > 0 ? 0 : -1);
+    var initialItemIndex = itemCount > 0 ? 0 : -1;
+    selectedItemIndexRef.current = initialItemIndex;
+    setSelectedItemIndex(initialItemIndex);
   }, [itemCount, query, selectableItemKeys]);
+  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 = useCallback(function (itemIndex) {
+    var item = selectableItems[itemIndex];
+    setPreviewActivation(item ? {
+      itemKey: item.key,
+      model: model,
+      source: 'keyboard'
+    } : undefined);
+  }, [model, selectableItems]);
   var selectNextItem = 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 = 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 = 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 = 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 = useCallback(function (itemKey) {
+    setPreviewActivation(function (current) {
+      return (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current;
+    });
+  }, []);
+  var onItemBlur = useCallback(function (itemKey) {
+    setPreviewActivation(function (current) {
+      return (current === null || current === void 0 ? void 0 : current.itemKey) === itemKey ? undefined : current;
     });
-  }, [itemCount]);
+  }, []);
+  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 selectActiveItem = useCallback(function () {
     if (isActiveItemMounted) {
       var _getDocument;
@@ -121,12 +214,11 @@ export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
   }, [activeItemId, isActiveItemMounted]);
   var onQueryChange = useCallback(function (event) {
     setQuery(event.currentTarget.value);
-    setSelectedItemIndex(0);
   }, []);
   var onKeyDown = useCallback(function (event) {
     if (event.key === 'Escape') {
       event.preventDefault();
-      onClose();
+      closeWithAnalytics();
       return;
     }
 
@@ -150,7 +242,7 @@ export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
         selectActiveItem();
         break;
     }
-  }, [onClose, selectActiveItem, selectNextItem, selectPreviousItem]);
+  }, [closeWithAnalytics, selectActiveItem, selectNextItem, selectPreviousItem]);
   return /*#__PURE__*/React.createElement(Box, {
     "data-keyboard-navigation-independent": "",
     testId: "registered-insert-menu",
@@ -177,11 +269,16 @@ export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
     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
   }));
 };