@atlaskit/editor-plugin-type-ahead 2.1.0 → 2.1.2

package/dist/es2019/ui/ViewMore.js

@@ -2,6 +2,8 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+import { useEffect, useRef } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
@@ -13,19 +15,61 @@ const buttonStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > button:hover': {
     backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > button:focus': {
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
+    outline: 'none'
   }
 });
 export const ViewMore = ({
-  onClick
+  onClick,
+  isFocused
 }) => {
   const {
     formatMessage
   } = useIntl();
+  const ref = useRef(null);
+  useEffect(() => {
+    if (isFocused && ref.current) {
+      ref.current.focus();
+    }
+  }, [isFocused]);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const {
+      current: element
+    } = ref;
+    const handleEnter = e => {
+      if (e.key === 'Enter') {
+        onClick();
+        // Prevent keydown listener in TypeaheadList from handling Enter pressed
+        e.stopPropagation();
+      } else if (e.key === 'Tab') {
+        // TypeaheadList will try to insert selected item on Tab press
+        // hence stop propagation to prevent that and treat this as noop
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+
+    // Ignored via go/ees005
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleEnter);
+    return () => {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleEnter);
+    };
+  });
   return jsx(Section, {
     hasSeparator: true
   }, jsx("span", {
     css: buttonStyles
   }, jsx(ButtonItem, {
+    ref: ref,
     onClick: onClick,
     iconBefore: jsx(ShowMoreHorizontalIcon, {
       label: ""

package/dist/es2019/ui/WrapperTypeAhead.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { SelectItemMode, TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { updateQuery } from '../pm-plugins/commands/update-query';
 import { itemIsDisabled } from '../pm-plugins/item-is-disabled';
 import { getPluginState, moveSelectedIndex, skipForwardToSafeItem } from '../pm-plugins/utils';
@@ -21,11 +22,14 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
   onUndoRedo,
   api
 }) => {
+  // @ts-ignore
+  const openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
+  const showViewMore = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1');
   const [closed, setClosed] = useState(false);
   const [query, setQuery] = useState(reopenQuery || '');
   const queryRef = useRef(query);
   const editorViewRef = useRef(editorView);
-  const items = useLoadItems(triggerHandler, editorView, query);
+  const items = useLoadItems(triggerHandler, editorView, query, showViewMore);
   useLayoutEffect(() => {
     queryRef.current = query;
   }, [query]);

package/dist/es2019/ui/hooks/use-load-items.js

@@ -3,7 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { updateListError } from '../../pm-plugins/commands/update-list-error';
 import { updateListItem } from '../../pm-plugins/commands/update-list-items';
 const EMPTY_LIST_ITEM = [];
-export const useLoadItems = (triggerHandler, editorView, query) => {
+export const useLoadItems = (triggerHandler, editorView, query, showViewMore) => {
   const [items, setItems] = useState(EMPTY_LIST_ITEM);
   const componentIsMounted = useRef(true);
   const editorViewRef = useRef(editorView);
@@ -25,8 +25,11 @@ export const useLoadItems = (triggerHandler, editorView, query) => {
       if (componentIsMounted.current) {
         setItems(list);
       }
+      const viewMoreItem = {
+        title: 'View more'
+      };
       queueMicrotask(() => {
-        updateListItem(list)(view.state, view.dispatch);
+        updateListItem(showViewMore ? list.concat(viewMoreItem) : list)(view.state, view.dispatch);
       });
     }).catch(e => {
       if (fg('platform_editor_offline_editing_ga')) {

package/dist/es2019/ui/modern/TypeAheadPopup.js

@@ -199,22 +199,31 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
         var _window$getSelection2;
         // Check if new focus point is inside the current editor. If it is not we
         // want to close the typeahead popup regardless of text selection state
-        const focusNode = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode;
+        const currentFocus = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode; // the focusNode is either TextNode, ElementNode
+        // if currentFocus is not HTMLElement, take its parent node as focusNode
+        const focusNode = currentFocus instanceof HTMLElement ? currentFocus : currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.parentNode;
         if (focusNode instanceof HTMLElement) {
           const innerEditor = focusNode.closest('.extension-editable-area');
-          // When there is no related target, we default to not closing the popup
-          let newFocusInsideCurrentEditor = !relatedTarget;
-          if (relatedTarget instanceof HTMLElement) {
-            if (innerEditor) {
-              // check if the new focus is inside inner editor, keep popup opens
-              newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
-            } else {
-              // if the new focus contains current focus node, the popup won't close
-              newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
+          if (innerEditor) {
+            // When there is no related target, we default to not closing the popup
+            let newFocusInsideCurrentEditor = !relatedTarget;
+            if (relatedTarget instanceof HTMLElement) {
+              if (innerEditor) {
+                // check if the new focus is inside inner editor, keep popup opens
+                newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
+              } else {
+                // if the new focus contains current focus node, the popup won't close
+                newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
+              }
+            }
+            if (!isTextSelected && newFocusInsideCurrentEditor) {
+              return;
+            }
+          } else {
+            // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
+            if (!isTextSelected) {
+              return;
             }
-          }
-          if (!isTextSelected && newFocusInsideCurrentEditor) {
-            return;
           }
         }
       } else {

package/dist/esm/ui/TypeAheadList.js

@@ -20,6 +20,7 @@ import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
 import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../pm-plugins/utils';
 import { AssistiveText } from './AssistiveText';
 import { TypeAheadListItem } from './TypeAheadListItem';
+import { ViewMore } from './ViewMore';
 var LIST_ITEM_ESTIMATED_HEIGHT = 64;
 var LIST_WIDTH = 320;
 var list = css({
@@ -53,7 +54,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     triggerHandler = _ref2.triggerHandler,
     moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
     api = _ref2.api,
-    showViewMore = _ref2.showViewMore;
+    showViewMore = _ref2.showViewMore,
+    onViewMoreClick = _ref2.onViewMoreClick;
   var listRef = useRef();
   var listContainerRef = useRef(null);
   var lastVisibleIndexes = useRef({
@@ -62,7 +64,10 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     startIndex: 0,
     stopIndex: 0
   });
-  var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
+
+  // Exclude view more item from the count
+  var itemsLength = showViewMore ? items.length - 1 : items.length;
+  var estimatedHeight = itemsLength * LIST_ITEM_ESTIMATED_HEIGHT;
   var _useState = useState(Math.min(estimatedHeight, fitHeight)),
     _useState2 = _slicedToArray(_useState, 2),
     height = _useState2[0],
@@ -128,7 +133,10 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     // to calculate each height. THen, we can schedule a new frame when this one finishs.
     requestAnimationFrame(function () {
       requestAnimationFrame(function () {
-        var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
+        var isViewMoreSelected = showViewMore && selectedIndex === itemsLength;
+        var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex ||
+        // view more is always visible, hence no scrolling
+        isViewMoreSelected;
 
         //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
         if (!isSelectedItemVisible && selectedIndex !== -1) {
@@ -138,7 +146,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
         }
       });
     });
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
   var _onMouseMove = function onMouseMove(event, index) {
     event.preventDefault();
     event.stopPropagation();
@@ -151,7 +159,10 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     if (!listRef.current) {
       return;
     }
-    var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
+    var isViewMoreSelected = showViewMore && selectedIndex === itemsLength;
+    var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex ||
+    // view more is always visible, hence no scrolling
+    isViewMoreSelected;
 
     //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
     if (!isSelectedItemVisible && selectedIndex !== -1) {
@@ -159,7 +170,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     } else if (selectedIndex === -1) {
       listRef.current.scrollToRow(0);
     }
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
   useLayoutEffect(function () {
     setCache(new CellMeasurerCache({
       fixedWidth: true,
@@ -177,13 +188,15 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     });
   }, [items]);
   useLayoutEffect(function () {
-    var height = Math.min(items.reduce(function (prevValue, currentValue, index) {
+    // Exclude view more item from the count
+    var itemsToRender = showViewMore ? items.slice(0, -1) : items;
+    var height = Math.min(itemsToRender.reduce(function (prevValue, currentValue, index) {
       return prevValue + cache.rowHeight({
         index: index
       });
     }, 0), fitHeight);
     setHeight(height);
-  }, [items, cache, fitHeight]);
+  }, [items, cache, fitHeight, showViewMore]);
   useLayoutEffect(function () {
     if (!listContainerRef.current) {
       return;
@@ -236,7 +249,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 || element.removeEventListener('keydown', handleKeyDown);
     };
-  }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, items.length]);
+  }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, itemsLength]);
   var firstOnlineSupportedRow = useMemo(function () {
     return items.findIndex(function (item) {
       return item.isDisabledOffline !== true;
@@ -266,7 +279,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
       key: items[index].title,
       item: currentItem,
       firstOnlineSupportedIndex: firstOnlineSupportedRow,
-      itemsLength: items.length,
+      itemsLength: itemsLength,
       itemIndex: index,
       selectedIndex: selectedIndex,
       onItemClick: actions.onItemClick,
@@ -296,8 +309,10 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
   })));
   var ListContent = jsx(List, {
     rowRenderer: renderRow,
-    ref: listRef,
-    rowCount: items.length,
+    ref: listRef
+    // Skip rendering the view more button in the list
+    ,
+    rowCount: itemsLength,
     rowHeight: cache.rowHeight,
     onRowsRendered: onItemsRendered,
     width: LIST_WIDTH,
@@ -331,8 +346,11 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
   }, jsx("div", {
     id: menuGroupId,
     ref: listContainerRef
-  }, !showViewMore || items.length ? ListContent : EmptyResultView, jsx(TypeaheadAssistiveTextPureComponent, {
-    numberOfResults: items.length.toString()
+  }, !showViewMore || itemsLength ? ListContent : EmptyResultView, showViewMore && onViewMoreClick && jsx(ViewMore, {
+    onClick: onViewMoreClick,
+    isFocused: selectedIndex === itemsLength
+  }), jsx(TypeaheadAssistiveTextPureComponent, {
+    numberOfResults: itemsLength.toString()
   })));
 });
 export var TypeAheadList = injectIntl(TypeAheadListComponent);

package/dist/esm/ui/TypeAheadListItem.js

@@ -62,7 +62,7 @@ var itemTitle = css({
   lineHeight: '1.4'
 });
 var itemTitleOverride = css({
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
 });
 var itemDescription = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography
@@ -71,7 +71,7 @@ var itemDescription = css({
   marginTop: "var(--ds-space-050, 4px)".concat(";")
 });
 var itemDescriptionOverride = css({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   marginTop: 0
 });
 

package/dist/esm/ui/TypeAheadPopup.js

@@ -18,7 +18,6 @@ import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { TypeAheadErrorFallback } from './TypeAheadErrorFallback';
 import { TypeAheadList } from './TypeAheadList';
-import { ViewMore } from './ViewMore';
 var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
 var VIEWMORE_BUTTON_HEIGHT = 53;
 var DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW = 480;
@@ -209,22 +208,31 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
         var _window$getSelection2;
         // Check if new focus point is inside the current editor. If it is not we
         // want to close the typeahead popup regardless of text selection state
-        var focusNode = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode;
+        var currentFocus = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode; // the focusNode is either TextNode, ElementNode
+        // if currentFocus is not HTMLElement, take its parent node as focusNode
+        var focusNode = currentFocus instanceof HTMLElement ? currentFocus : currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.parentNode;
         if (focusNode instanceof HTMLElement) {
           var innerEditor = focusNode.closest('.extension-editable-area');
-          // When there is no related target, we default to not closing the popup
-          var newFocusInsideCurrentEditor = !relatedTarget;
-          if (relatedTarget instanceof HTMLElement) {
-            if (innerEditor) {
-              // check if the new focus is inside inner editor, keep popup opens
-              newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
-            } else {
-              // if the new focus contains current focus node, the popup won't close
-              newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
+          if (innerEditor) {
+            // When there is no related target, we default to not closing the popup
+            var newFocusInsideCurrentEditor = !relatedTarget;
+            if (relatedTarget instanceof HTMLElement) {
+              if (innerEditor) {
+                // check if the new focus is inside inner editor, keep popup opens
+                newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
+              } else {
+                // if the new focus contains current focus node, the popup won't close
+                newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
+              }
+            }
+            if (!isTextSelected && newFocusInsideCurrentEditor) {
+              return;
+            }
+          } else {
+            // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
+            if (!isTextSelected) {
+              return;
             }
-          }
-          if (!isTextSelected && newFocusInsideCurrentEditor) {
-            return;
           }
         }
       } else {
@@ -317,9 +325,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     triggerHandler: triggerHandler,
     moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
     api: api,
-    showViewMore: showViewMore
-  }), showViewMore && jsx(ViewMore, {
-    onClick: onViewMoreClick
+    showViewMore: showViewMore,
+    onViewMoreClick: onViewMoreClick
   }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/esm/ui/ViewMore.js

@@ -2,6 +2,8 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+import { useEffect, useRef } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
@@ -13,17 +15,57 @@ var buttonStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > button:hover': {
     backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > button:focus': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
+    outline: 'none'
   }
 });
 export var ViewMore = function ViewMore(_ref) {
-  var onClick = _ref.onClick;
+  var onClick = _ref.onClick,
+    isFocused = _ref.isFocused;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (isFocused && ref.current) {
+      ref.current.focus();
+    }
+  }, [isFocused]);
+  useEffect(function () {
+    if (!ref.current) {
+      return;
+    }
+    var element = ref.current;
+    var handleEnter = function handleEnter(e) {
+      if (e.key === 'Enter') {
+        onClick();
+        // Prevent keydown listener in TypeaheadList from handling Enter pressed
+        e.stopPropagation();
+      } else if (e.key === 'Tab') {
+        // TypeaheadList will try to insert selected item on Tab press
+        // hence stop propagation to prevent that and treat this as noop
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+
+    // Ignored via go/ees005
+    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+    element === null || element === void 0 || element.addEventListener('keydown', handleEnter);
+    return function () {
+      // Ignored via go/ees005
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      element === null || element === void 0 || element.removeEventListener('keydown', handleEnter);
+    };
+  });
   return jsx(Section, {
     hasSeparator: true
   }, jsx("span", {
     css: buttonStyles
   }, jsx(ButtonItem, {
+    ref: ref,
     onClick: onClick,
     iconBefore: jsx(ShowMoreHorizontalIcon, {
       label: ""

package/dist/esm/ui/WrapperTypeAhead.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { SelectItemMode, TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { updateQuery } from '../pm-plugins/commands/update-query';
 import { itemIsDisabled as _itemIsDisabled } from '../pm-plugins/item-is-disabled';
 import { getPluginState, moveSelectedIndex, skipForwardToSafeItem } from '../pm-plugins/utils';
@@ -21,6 +22,9 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     reopenQuery = _ref.reopenQuery,
     onUndoRedo = _ref.onUndoRedo,
     api = _ref.api;
+  // @ts-ignore
+  var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
+  var showViewMore = (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1');
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     closed = _useState2[0],
@@ -31,7 +35,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
     setQuery = _useState4[1];
   var queryRef = useRef(query);
   var editorViewRef = useRef(editorView);
-  var items = useLoadItems(triggerHandler, editorView, query);
+  var items = useLoadItems(triggerHandler, editorView, query, showViewMore);
   useLayoutEffect(function () {
     queryRef.current = query;
   }, [query]);

package/dist/esm/ui/hooks/use-load-items.js

@@ -4,7 +4,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { updateListError } from '../../pm-plugins/commands/update-list-error';
 import { updateListItem } from '../../pm-plugins/commands/update-list-items';
 var EMPTY_LIST_ITEM = [];
-export var useLoadItems = function useLoadItems(triggerHandler, editorView, query) {
+export var useLoadItems = function useLoadItems(triggerHandler, editorView, query, showViewMore) {
   var _useState = useState(EMPTY_LIST_ITEM),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
@@ -27,8 +27,11 @@ export var useLoadItems = function useLoadItems(triggerHandler, editorView, quer
       if (componentIsMounted.current) {
         setItems(list);
       }
+      var viewMoreItem = {
+        title: 'View more'
+      };
       queueMicrotask(function () {
-        updateListItem(list)(view.state, view.dispatch);
+        updateListItem(showViewMore ? list.concat(viewMoreItem) : list)(view.state, view.dispatch);
       });
     }).catch(function (e) {
       if (fg('platform_editor_offline_editing_ga')) {

package/dist/esm/ui/modern/TypeAheadPopup.js

@@ -198,22 +198,31 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
         var _window$getSelection2;
         // Check if new focus point is inside the current editor. If it is not we
         // want to close the typeahead popup regardless of text selection state
-        var focusNode = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode;
+        var currentFocus = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode; // the focusNode is either TextNode, ElementNode
+        // if currentFocus is not HTMLElement, take its parent node as focusNode
+        var focusNode = currentFocus instanceof HTMLElement ? currentFocus : currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.parentNode;
         if (focusNode instanceof HTMLElement) {
           var innerEditor = focusNode.closest('.extension-editable-area');
-          // When there is no related target, we default to not closing the popup
-          var newFocusInsideCurrentEditor = !relatedTarget;
-          if (relatedTarget instanceof HTMLElement) {
-            if (innerEditor) {
-              // check if the new focus is inside inner editor, keep popup opens
-              newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
-            } else {
-              // if the new focus contains current focus node, the popup won't close
-              newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
+          if (innerEditor) {
+            // When there is no related target, we default to not closing the popup
+            var newFocusInsideCurrentEditor = !relatedTarget;
+            if (relatedTarget instanceof HTMLElement) {
+              if (innerEditor) {
+                // check if the new focus is inside inner editor, keep popup opens
+                newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
+              } else {
+                // if the new focus contains current focus node, the popup won't close
+                newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
+              }
+            }
+            if (!isTextSelected && newFocusInsideCurrentEditor) {
+              return;
+            }
+          } else {
+            // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
+            if (!isTextSelected) {
+              return;
             }
-          }
-          if (!isTextSelected && newFocusInsideCurrentEditor) {
-            return;
           }
         }
       } else {

package/dist/types/ui/TypeAheadList.d.ts

@@ -20,6 +20,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
     moreElementsInQuickInsertViewEnabled?: boolean | undefined;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
     showViewMore?: boolean | undefined;
+    onViewMoreClick?: (() => void) | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         items: Array<TypeAheadItem>;
@@ -32,5 +33,6 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
         moreElementsInQuickInsertViewEnabled?: boolean | undefined;
         api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
         showViewMore?: boolean | undefined;
+        onViewMoreClick?: (() => void) | undefined;
     } & WrappedComponentProps>;
 };

package/dist/types/ui/ViewMore.d.ts

@@ -1,8 +1,5 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { jsx } from '@emotion/react';
-export declare const ViewMore: ({ onClick, }: {
-    onClick: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+export declare const ViewMore: ({ onClick, isFocused }: {
+    onClick: () => void;
+    isFocused: boolean;
 }) => jsx.JSX.Element;

package/dist/types/ui/hooks/use-load-items.d.ts

@@ -1,3 +1,3 @@
 import type { TypeAheadHandler, TypeAheadItem } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const useLoadItems: (triggerHandler: TypeAheadHandler, editorView: EditorView, query: string) => Array<TypeAheadItem>;
+export declare const useLoadItems: (triggerHandler: TypeAheadHandler, editorView: EditorView, query: string, showViewMore?: boolean) => Array<TypeAheadItem>;

package/dist/types-ts4.5/ui/TypeAheadList.d.ts

@@ -20,6 +20,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
     moreElementsInQuickInsertViewEnabled?: boolean | undefined;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
     showViewMore?: boolean | undefined;
+    onViewMoreClick?: (() => void) | undefined;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         items: Array<TypeAheadItem>;
@@ -32,5 +33,6 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
         moreElementsInQuickInsertViewEnabled?: boolean | undefined;
         api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
         showViewMore?: boolean | undefined;
+        onViewMoreClick?: (() => void) | undefined;
     } & WrappedComponentProps>;
 };

package/dist/types-ts4.5/ui/ViewMore.d.ts

@@ -1,8 +1,5 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { jsx } from '@emotion/react';
-export declare const ViewMore: ({ onClick, }: {
-    onClick: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+export declare const ViewMore: ({ onClick, isFocused }: {
+    onClick: () => void;
+    isFocused: boolean;
 }) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/hooks/use-load-items.d.ts

@@ -1,3 +1,3 @@
 import type { TypeAheadHandler, TypeAheadItem } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const useLoadItems: (triggerHandler: TypeAheadHandler, editorView: EditorView, query: string) => Array<TypeAheadItem>;
+export declare const useLoadItems: (triggerHandler: TypeAheadHandler, editorView: EditorView, query: string, showViewMore?: boolean) => Array<TypeAheadItem>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.1.0",
+	"version": "2.1.2",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^100.5.0",
+		"@atlaskit/editor-common": "^101.1.0",
 		"@atlaskit/editor-element-browser": "^0.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.1.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -47,7 +47,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
-		"@atlaskit/theme": "^17.0.0",
+		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.4.0",
 		"@atlaskit/tokens": "^4.3.0",
 		"@babel/runtime": "^7.0.0",