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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.1.2
+
+### Patch Changes
+
+- [#122304](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122304)
+  [`55aeeb7141654`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/55aeeb7141654) -
+  [HOT-115591] Fix emoji popup close when scrolling
+- [#122337](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122337)
+  [`2775fb4a3b7d6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2775fb4a3b7d6) -
+  [ux] [ED-26824] Add keyboard support (up/down to navigate, enter to insert) to view more button
+- Updated dependencies
+
 ## 2.1.1
 
 ### Patch Changes

package/dist/cjs/ui/TypeAheadList.js

@@ -21,6 +21,7 @@ var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
 var _AssistiveText = require("./AssistiveText");
 var _TypeAheadListItem = require("./TypeAheadListItem");
+var _ViewMore = require("./ViewMore");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -63,7 +64,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     triggerHandler = _ref2.triggerHandler,
     moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
     api = _ref2.api,
-    showViewMore = _ref2.showViewMore;
+    showViewMore = _ref2.showViewMore,
+    onViewMoreClick = _ref2.onViewMoreClick;
   var listRef = (0, _react.useRef)();
   var listContainerRef = (0, _react.useRef)(null);
   var lastVisibleIndexes = (0, _react.useRef)({
@@ -72,7 +74,10 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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 = (0, _react.useState)(Math.min(estimatedHeight, fitHeight)),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     height = _useState2[0],
@@ -138,7 +143,10 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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) {
@@ -148,7 +156,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
         }
       });
     });
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
   var _onMouseMove = function onMouseMove(event, index) {
     event.preventDefault();
     event.stopPropagation();
@@ -161,7 +169,10 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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) {
@@ -169,7 +180,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     } else if (selectedIndex === -1) {
       listRef.current.scrollToRow(0);
     }
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
   (0, _react.useLayoutEffect)(function () {
     setCache(new _CellMeasurer.CellMeasurerCache({
       fixedWidth: true,
@@ -187,13 +198,15 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     });
   }, [items]);
   (0, _react.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]);
   (0, _react.useLayoutEffect)(function () {
     if (!listContainerRef.current) {
       return;
@@ -246,7 +259,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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 = (0, _react.useMemo)(function () {
     return items.findIndex(function (item) {
       return item.isDisabledOffline !== true;
@@ -276,7 +289,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       key: items[index].title,
       item: currentItem,
       firstOnlineSupportedIndex: firstOnlineSupportedRow,
-      itemsLength: items.length,
+      itemsLength: itemsLength,
       itemIndex: index,
       selectedIndex: selectedIndex,
       onItemClick: actions.onItemClick,
@@ -306,8 +319,10 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
   })));
   var ListContent = (0, _react2.jsx)(_List.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,
@@ -341,8 +356,11 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
   }, (0, _react2.jsx)("div", {
     id: menuGroupId,
     ref: listContainerRef
-  }, !showViewMore || items.length ? ListContent : EmptyResultView, (0, _react2.jsx)(TypeaheadAssistiveTextPureComponent, {
-    numberOfResults: items.length.toString()
+  }, !showViewMore || itemsLength ? ListContent : EmptyResultView, showViewMore && onViewMoreClick && (0, _react2.jsx)(_ViewMore.ViewMore, {
+    onClick: onViewMoreClick,
+    isFocused: selectedIndex === itemsLength
+  }), (0, _react2.jsx)(TypeaheadAssistiveTextPureComponent, {
+    numberOfResults: itemsLength.toString()
   })));
 });
 var TypeAheadList = exports.TypeAheadList = (0, _reactIntlNext.injectIntl)(TypeAheadListComponent);

package/dist/cjs/ui/TypeAheadPopup.js

@@ -20,7 +20,6 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../pm-plugins/constants");
 var _TypeAheadErrorFallback = require("./TypeAheadErrorFallback");
 var _TypeAheadList = require("./TypeAheadList");
-var _ViewMore = require("./ViewMore");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -220,22 +219,31 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
         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 {
@@ -328,9 +336,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     triggerHandler: triggerHandler,
     moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
     api: api,
-    showViewMore: showViewMore
-  }), showViewMore && (0, _react2.jsx)(_ViewMore.ViewMore, {
-    onClick: onViewMoreClick
+    showViewMore: showViewMore,
+    onViewMoreClick: onViewMoreClick
   }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/cjs/ui/ViewMore.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ViewMore = void 0;
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _showMoreHorizontalEditorMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--editor-more"));
@@ -15,25 +16,66 @@ var _colors = require("@atlaskit/theme/colors");
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var buttonStyles = (0, _react.css)({
+var buttonStyles = (0, _react2.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(_colors.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(_colors.N30, ")"),
+    outline: 'none'
   }
 });
 var ViewMore = exports.ViewMore = function ViewMore(_ref) {
-  var onClick = _ref.onClick;
+  var onClick = _ref.onClick,
+    isFocused = _ref.isFocused;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  return (0, _react.jsx)(_menu.Section, {
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (isFocused && ref.current) {
+      ref.current.focus();
+    }
+  }, [isFocused]);
+  (0, _react.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 (0, _react2.jsx)(_menu.Section, {
     hasSeparator: true
-  }, (0, _react.jsx)("span", {
+  }, (0, _react2.jsx)("span", {
     css: buttonStyles
-  }, (0, _react.jsx)(_menu.ButtonItem, {
+  }, (0, _react2.jsx)(_menu.ButtonItem, {
+    ref: ref,
     onClick: onClick,
-    iconBefore: (0, _react.jsx)(_showMoreHorizontalEditorMore.default, {
+    iconBefore: (0, _react2.jsx)(_showMoreHorizontalEditorMore.default, {
       label: ""
     }),
     "aria-describedby": formatMessage(_messages.toolbarInsertBlockMessages.viewMore),

package/dist/cjs/ui/WrapperTypeAhead.js

@@ -9,6 +9,7 @@ exports.WrapperTypeAhead = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _updateQuery = require("../pm-plugins/commands/update-query");
 var _itemIsDisabled2 = require("../pm-plugins/item-is-disabled");
 var _utils = require("../pm-plugins/utils");
@@ -31,6 +32,9 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     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) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT && !!openElementBrowserModal && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     closed = _useState2[0],
@@ -41,7 +45,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
     setQuery = _useState4[1];
   var queryRef = (0, _react.useRef)(query);
   var editorViewRef = (0, _react.useRef)(editorView);
-  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query);
+  var items = (0, _useLoadItems.useLoadItems)(triggerHandler, editorView, query, showViewMore);
   (0, _react.useLayoutEffect)(function () {
     queryRef.current = query;
   }, [query]);

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

@@ -11,7 +11,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _updateListError = require("../../pm-plugins/commands/update-list-error");
 var _updateListItems = require("../../pm-plugins/commands/update-list-items");
 var EMPTY_LIST_ITEM = [];
-var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler, editorView, query) {
+var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler, editorView, query, showViewMore) {
   var _useState = (0, _react.useState)(EMPTY_LIST_ITEM),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     items = _useState2[0],
@@ -34,8 +34,11 @@ var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler,
       if (componentIsMounted.current) {
         setItems(list);
       }
+      var viewMoreItem = {
+        title: 'View more'
+      };
       queueMicrotask(function () {
-        (0, _updateListItems.updateListItem)(list)(view.state, view.dispatch);
+        (0, _updateListItems.updateListItem)(showViewMore ? list.concat(viewMoreItem) : list)(view.state, view.dispatch);
       });
     }).catch(function (e) {
       if ((0, _platformFeatureFlags.fg)('platform_editor_offline_editing_ga')) {

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

@@ -208,22 +208,31 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
         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/es2019/ui/TypeAheadList.js

@@ -19,6 +19,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';
 const LIST_ITEM_ESTIMATED_HEIGHT = 64;
 const LIST_WIDTH = 320;
 const list = css({
@@ -52,7 +53,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   triggerHandler,
   moreElementsInQuickInsertViewEnabled,
   api,
-  showViewMore
+  showViewMore,
+  onViewMoreClick
 }) => {
   var _decorationElement$qu2;
   const listRef = useRef();
@@ -63,7 +65,10 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     startIndex: 0,
     stopIndex: 0
   });
-  const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
+
+  // Exclude view more item from the count
+  const itemsLength = showViewMore ? items.length - 1 : items.length;
+  const estimatedHeight = itemsLength * LIST_ITEM_ESTIMATED_HEIGHT;
   const [height, setHeight] = useState(Math.min(estimatedHeight, fitHeight));
   const [cache, setCache] = useState(new CellMeasurerCache({
     fixedWidth: true,
@@ -118,7 +123,10 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     // to calculate each height. THen, we can schedule a new frame when this one finishs.
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
+        const isViewMoreSelected = showViewMore && selectedIndex === itemsLength;
+        const 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) {
@@ -128,7 +136,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
         }
       });
     });
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
   const onMouseMove = (event, index) => {
     event.preventDefault();
     event.stopPropagation();
@@ -141,7 +149,10 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     if (!listRef.current) {
       return;
     }
-    const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
+    const isViewMoreSelected = showViewMore && selectedIndex === itemsLength;
+    const 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) {
@@ -149,7 +160,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     } else if (selectedIndex === -1) {
       listRef.current.scrollToRow(0);
     }
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
+  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex, itemsLength, showViewMore]);
   useLayoutEffect(() => {
     setCache(new CellMeasurerCache({
       fixedWidth: true,
@@ -167,13 +178,15 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     });
   }, [items]);
   useLayoutEffect(() => {
-    const height = Math.min(items.reduce((prevValue, currentValue, index) => {
+    // Exclude view more item from the count
+    const itemsToRender = showViewMore ? items.slice(0, -1) : items;
+    const height = Math.min(itemsToRender.reduce((prevValue, currentValue, index) => {
       return prevValue + cache.rowHeight({
         index: index
       });
     }, 0), fitHeight);
     setHeight(height);
-  }, [items, cache, fitHeight]);
+  }, [items, cache, fitHeight, showViewMore]);
   useLayoutEffect(() => {
     if (!listContainerRef.current) {
       return;
@@ -228,7 +241,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
     };
-  }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, items.length]);
+  }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, itemsLength]);
   const firstOnlineSupportedRow = useMemo(() => {
     return items.findIndex(item => item.isDisabledOffline !== true);
   }, [items]);
@@ -255,7 +268,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       key: items[index].title,
       item: currentItem,
       firstOnlineSupportedIndex: firstOnlineSupportedRow,
-      itemsLength: items.length,
+      itemsLength: itemsLength,
       itemIndex: index,
       selectedIndex: selectedIndex,
       onItemClick: actions.onItemClick,
@@ -285,8 +298,10 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   })));
   const 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,
@@ -320,8 +335,11 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   }, 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 const TypeAheadList = injectIntl(TypeAheadListComponent);

package/dist/es2019/ui/TypeAheadPopup.js

@@ -17,7 +17,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';
 const DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
 const VIEWMORE_BUTTON_HEIGHT = 53;
 const DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW = 480;
@@ -209,22 +208,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 {
@@ -321,9 +329,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     triggerHandler: triggerHandler,
     moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
     api: api,
-    showViewMore: showViewMore
-  }), showViewMore && jsx(ViewMore, {
-    onClick: onViewMoreClick
+    showViewMore: showViewMore,
+    onViewMoreClick: onViewMoreClick
   }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

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/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.1",
+	"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": "^101.0.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",