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

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.1.0
+
+### Minor Changes
+
+- [#120472](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120472)
+  [`73c800ab5f2fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/73c800ab5f2fc) -
+  ED-26766 update adf-schema from 47.2.1 to 47.6.0 and adf-schema-json from 1.27.0 to 1.31.0
+
+### Patch Changes
+
+- [#121073](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121073)
+  [`9c197731fcbf8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9c197731fcbf8) -
+  [ux] [ED-26824] When platform_editor_controls is enabled, add 'View more' button to quick
+  insertpopup to open element browser modal
+- Updated dependencies
+
+## 2.0.5
+
+### Patch Changes
+
+- [#121049](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121049)
+  [`0c8ca53dace33`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0c8ca53dace33) -
+  [ux] Uses ViewAllButtonItem from the editor-element-browser package instead of custom Pressable
+  button
+
 ## 2.0.4
 
 ### Patch Changes

package/dist/cjs/ui/TypeAheadList.js

@@ -12,8 +12,10 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
 var _List = require("react-virtualized/dist/commonjs/List");
+var _messages = require("@atlaskit/editor-common/messages");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _menu = require("@atlaskit/menu");
+var _primitives = require("@atlaskit/primitives");
 var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
 var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
@@ -60,7 +62,8 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     decorationElement = _ref2.decorationElement,
     triggerHandler = _ref2.triggerHandler,
     moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
-    api = _ref2.api;
+    api = _ref2.api,
+    showViewMore = _ref2.showViewMore;
   var listRef = (0, _react.useRef)();
   var listContainerRef = (0, _react.useRef)(null);
   var lastVisibleIndexes = (0, _react.useRef)({
@@ -287,13 +290,21 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     return null;
   }
   var menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID;
-  return (0, _react2.jsx)(_menu.MenuGroup, {
-    "aria-label": popupAriaLabel,
-    "aria-relevant": "additions removals"
-  }, (0, _react2.jsx)("div", {
-    id: menuGroupId,
-    ref: listContainerRef
-  }, (0, _react2.jsx)(_List.List, {
+  var EmptyResultView = (0, _react2.jsx)(_primitives.Box, {
+    paddingBlock: "space.150",
+    paddingInline: "space.250"
+  }, (0, _react2.jsx)(_primitives.Text, {
+    align: "center",
+    as: "p"
+  }, intl.formatMessage(_typeAhead.typeAheadListMessages.emptySearchResults)), (0, _react2.jsx)(_primitives.Text, {
+    align: "center",
+    as: "p"
+  }, intl.formatMessage(_typeAhead.typeAheadListMessages.emptySearchResultsSuggestion, {
+    buttonName: (0, _react2.jsx)(_primitives.Text, {
+      weight: "medium"
+    }, intl.formatMessage(_messages.toolbarInsertBlockMessages.viewMore))
+  })));
+  var ListContent = (0, _react2.jsx)(_List.List, {
     rowRenderer: renderRow,
     ref: listRef,
     rowCount: items.length,
@@ -323,7 +334,14 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
         }
       }
     }), moreElementsInQuickInsertViewEnabled && list]
-  }), (0, _react2.jsx)(TypeaheadAssistiveTextPureComponent, {
+  });
+  return (0, _react2.jsx)(_menu.MenuGroup, {
+    "aria-label": popupAriaLabel,
+    "aria-relevant": "additions removals"
+  }, (0, _react2.jsx)("div", {
+    id: menuGroupId,
+    ref: listContainerRef
+  }, !showViewMore || items.length ? ListContent : EmptyResultView, (0, _react2.jsx)(TypeaheadAssistiveTextPureComponent, {
     numberOfResults: items.length.toString()
   })));
 });

package/dist/cjs/ui/TypeAheadMenu.js

@@ -8,6 +8,7 @@ exports.TypeAheadMenu = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _updateSelectedIndex = require("../pm-plugins/commands/update-selected-index");
 var _useItemInsert3 = require("./hooks/use-item-insert");
 var _TypeAheadPopup = require("./TypeAheadPopup");
@@ -77,7 +78,11 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
       return;
     }
   }, [isOpen, query, onItemMatch]);
-  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0 && !errorInfo) {
+
+  // @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');
+  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !showViewMore && items.length === 0 && !errorInfo) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_TypeAheadPopup.TypeAheadPopup, {
@@ -95,6 +100,7 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
     decorationSet: decorationSet,
     isEmptyQuery: !query,
     cancel: cancel,
-    api: api
+    api: api,
+    showViewMore: showViewMore
   });
 });

package/dist/cjs/ui/TypeAheadPopup.js

@@ -20,6 +20,7 @@ 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; }
 /**
@@ -30,6 +31,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
+var VIEWMORE_BUTTON_HEIGHT = 53;
 var DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW = 480;
 var ITEM_PADDING = 12;
 var typeAheadContent = (0, _react2.css)({
@@ -46,6 +48,10 @@ var typeAheadContent = (0, _react2.css)({
 var typeAheadContentOverride = (0, _react2.css)({
   maxHeight: "".concat(DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW, "px")
 });
+var typeAheadWrapperWithViewMoreOverride = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'column'
+});
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,
     triggerHandler = _ref.triggerHandler;
@@ -68,7 +74,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     onItemInsert = props.onItemInsert,
     isEmptyQuery = props.isEmptyQuery,
     cancel = props.cancel,
-    api = props.api;
+    api = props.api,
+    showViewMore = props.showViewMore;
   var ref = (0, _react.useRef)(null);
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
@@ -130,6 +137,12 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     fitHeight = _useState2[0],
     setFitHeight = _useState2[1];
+  var fitHeightWithViewMore = (0, _react.useMemo)(function () {
+    if (showViewMore) {
+      return fitHeight - VIEWMORE_BUTTON_HEIGHT;
+    }
+    return fitHeight;
+  }, [fitHeight, showViewMore]);
   var getFitHeight = (0, _react.useCallback)(function () {
     if (!anchorElement || !popupsMountPoint) {
       return;
@@ -269,6 +282,19 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
       element === null || element === void 0 || element.removeEventListener('keydown', escape);
     };
   }, [ref, cancel]);
+
+  // @ts-ignore
+  var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
+  var onViewMoreClick = (0, _react.useCallback)(function () {
+    // TODO: when clean up, remove config in quick insert plugin
+    // platform/packages/editor/editor-plugin-quick-insert/src/quickInsertPlugin.tsx (typeAhead.openElementBrowserModal)
+    openElementBrowserModal === null || openElementBrowserModal === void 0 || openElementBrowserModal();
+    cancel({
+      addPrefixTrigger: false,
+      setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
+      forceFocusOnEditor: false
+    });
+  }, [openElementBrowserModal, cancel]);
   return (0, _react2.jsx)(_ui.Popup, {
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -281,7 +307,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     ariaLabel: null,
     preventOverflow: true
   }, (0, _react2.jsx)("div", {
-    css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride]
+    css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showViewMore && typeAheadWrapperWithViewMoreOverride]
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0
@@ -296,12 +322,15 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     items: items,
     selectedIndex: selectedIndex,
     onItemClick: onItemInsert,
-    fitHeight: fitHeight,
+    fitHeight: fitHeightWithViewMore,
     editorView: editorView,
     decorationElement: anchorElement,
     triggerHandler: triggerHandler,
     moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
-    api: api
+    api: api,
+    showViewMore: showViewMore
+  }), showViewMore && (0, _react2.jsx)(_ViewMore.ViewMore, {
+    onClick: onViewMoreClick
   }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/cjs/ui/ViewMore.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewMore = void 0;
+var _react = 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"));
+var _menu = require("@atlaskit/menu");
+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)({
+  // 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, ")")
+  }
+});
+var ViewMore = exports.ViewMore = function ViewMore(_ref) {
+  var onClick = _ref.onClick;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return (0, _react.jsx)(_menu.Section, {
+    hasSeparator: true
+  }, (0, _react.jsx)("span", {
+    css: buttonStyles
+  }, (0, _react.jsx)(_menu.ButtonItem, {
+    onClick: onClick,
+    iconBefore: (0, _react.jsx)(_showMoreHorizontalEditorMore.default, {
+      label: ""
+    }),
+    "aria-describedby": formatMessage(_messages.toolbarInsertBlockMessages.viewMore),
+    "data-testid": "quick-insert-view-more-elements-item"
+  }, formatMessage(_messages.toolbarInsertBlockMessages.viewMore))));
+};

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

@@ -10,17 +10,20 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorElementBrowser = require("@atlaskit/editor-element-browser");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../pm-plugins/constants");
 var _TypeAheadErrorFallback = require("../TypeAheadErrorFallback");
-var _ViewAllButton = require("./ViewAllButton");
 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; }
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -32,6 +35,7 @@ var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 520;
 // const DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW = 480;
 
 var ITEM_PADDING = 12;
+var INSERT_PANEL_WIDTH = 320;
 var typeAheadContent = (0, _react2.css)({
   background: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)",
@@ -63,6 +67,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     query = props.query,
     setSelectedItem = props.setSelectedItem;
   var ref = (0, _react.useRef)(null);
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   var startTime = (0, _react.useMemo)(function () {
     return performance.now();
@@ -264,13 +270,39 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
       element === null || element === void 0 || element.removeEventListener('keydown', escape);
     };
   }, [ref, cancel]);
-  var handlePanelOpen = (0, _react.useCallback)(function () {
-    return cancel({
+  var handleViewAllItemsClick = (0, _react.useCallback)(function () {
+    var _api$contextPanel;
+    var showContextPanel = api === null || api === void 0 || (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 || (_api$contextPanel = _api$contextPanel.actions) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.showPanel;
+    if (!showContextPanel || !items) {
+      return;
+    }
+
+    // Opens main editor controls side panel
+    showContextPanel({
+      id: 'editor-element-insert-sidebar-panel',
+      headerComponentElements: {
+        headerLabel: _messages.elementInsertSidePanel.title,
+        HeaderIcon: function HeaderIcon() {
+          return (0, _react2.jsx)(_add.default, {
+            label: formatMessage(_messages.elementInsertSidePanel.title)
+          });
+        }
+      },
+      BodyComponent: function BodyComponent() {
+        return (0, _react2.jsx)(_editorElementBrowser.SideInsertPanel, {
+          items: items,
+          onItemInsert: onItemInsert
+        });
+      }
+    }, 'push', INSERT_PANEL_WIDTH);
+
+    // Closes typeahead
+    cancel({
       addPrefixTrigger: true,
       setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
       forceFocusOnEditor: true
     });
-  }, [cancel]);
+  }, [api, cancel, formatMessage, items, onItemInsert]);
   return (0, _react2.jsx)(_ui.Popup, {
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -295,12 +327,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     items: items,
     onItemInsert: onItemInsert,
     query: query,
-    setSelectedItem: setSelectedItem
-  }), (api === null || api === void 0 ? void 0 : api.contextPanel) && (0, _react2.jsx)(_ViewAllButton.ViewAllButton, {
-    items: items,
-    editorApi: api,
-    onItemInsert: onItemInsert,
-    onPanelOpen: handlePanelOpen
+    setSelectedItem: setSelectedItem,
+    onViewAllItemsClick: Boolean(api === null || api === void 0 ? void 0 : api.contextPanel) ? handleViewAllItemsClick : undefined
   }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/es2019/ui/TypeAheadList.js

@@ -10,8 +10,10 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl, useIntl } from 'react-intl-next';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { List } from 'react-virtualized/dist/commonjs/List';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { MenuGroup } from '@atlaskit/menu';
+import { Text, Box } from '@atlaskit/primitives';
 import { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../pm-plugins/constants';
 import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../pm-plugins/utils';
@@ -49,7 +51,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   decorationElement,
   triggerHandler,
   moreElementsInQuickInsertViewEnabled,
-  api
+  api,
+  showViewMore
 }) => {
   var _decorationElement$qu2;
   const listRef = useRef();
@@ -266,13 +269,21 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     return null;
   }
   const menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector(`[role='combobox']`)) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
-  return jsx(MenuGroup, {
-    "aria-label": popupAriaLabel,
-    "aria-relevant": "additions removals"
-  }, jsx("div", {
-    id: menuGroupId,
-    ref: listContainerRef
-  }, jsx(List, {
+  const EmptyResultView = jsx(Box, {
+    paddingBlock: "space.150",
+    paddingInline: "space.250"
+  }, jsx(Text, {
+    align: "center",
+    as: "p"
+  }, intl.formatMessage(typeAheadListMessages.emptySearchResults)), jsx(Text, {
+    align: "center",
+    as: "p"
+  }, intl.formatMessage(typeAheadListMessages.emptySearchResultsSuggestion, {
+    buttonName: jsx(Text, {
+      weight: "medium"
+    }, intl.formatMessage(messages.viewMore))
+  })));
+  const ListContent = jsx(List, {
     rowRenderer: renderRow,
     ref: listRef,
     rowCount: items.length,
@@ -302,7 +313,14 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
         }
       }
     }), moreElementsInQuickInsertViewEnabled && list]
-  }), jsx(TypeaheadAssistiveTextPureComponent, {
+  });
+  return jsx(MenuGroup, {
+    "aria-label": popupAriaLabel,
+    "aria-relevant": "additions removals"
+  }, jsx("div", {
+    id: menuGroupId,
+    ref: listContainerRef
+  }, !showViewMore || items.length ? ListContent : EmptyResultView, jsx(TypeaheadAssistiveTextPureComponent, {
     numberOfResults: items.length.toString()
   })));
 });

package/dist/es2019/ui/TypeAheadMenu.js

@@ -1,5 +1,6 @@
 import React 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 { updateSelectedIndex } from '../pm-plugins/commands/update-selected-index';
 import { useItemInsert } from './hooks/use-item-insert';
 import { TypeAheadPopup } from './TypeAheadPopup';
@@ -68,7 +69,11 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
       return;
     }
   }, [isOpen, query, onItemMatch]);
-  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0 && !errorInfo) {
+
+  // @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');
+  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || !showViewMore && items.length === 0 && !errorInfo) {
     return null;
   }
   return /*#__PURE__*/React.createElement(TypeAheadPopup, {
@@ -86,6 +91,7 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
     decorationSet: decorationSet,
     isEmptyQuery: !query,
     cancel: cancel,
-    api: api
+    api: api,
+    showViewMore: showViewMore
   });
 });

package/dist/es2019/ui/TypeAheadPopup.js

@@ -17,7 +17,9 @@ 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;
 const ITEM_PADDING = 12;
 const typeAheadContent = css({
@@ -34,6 +36,10 @@ const typeAheadContent = css({
 const typeAheadContentOverride = css({
   maxHeight: `${DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW}px`
 });
+const typeAheadWrapperWithViewMoreOverride = css({
+  display: 'flex',
+  flexDirection: 'column'
+});
 const Highlight = ({
   state,
   triggerHandler
@@ -58,7 +64,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     onItemInsert,
     isEmptyQuery,
     cancel,
-    api
+    api,
+    showViewMore
   } = props;
   const ref = useRef(null);
   const {
@@ -115,6 +122,12 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   triggerHandler]);
   const [fitHeight, setFitHeight] = useState(defaultMenuHeight);
+  const fitHeightWithViewMore = useMemo(() => {
+    if (showViewMore) {
+      return fitHeight - VIEWMORE_BUTTON_HEIGHT;
+    }
+    return fitHeight;
+  }, [fitHeight, showViewMore]);
   const getFitHeight = useCallback(() => {
     if (!anchorElement || !popupsMountPoint) {
       return;
@@ -262,6 +275,19 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', escape);
     };
   }, [ref, cancel]);
+
+  // @ts-ignore
+  const openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
+  const onViewMoreClick = useCallback(() => {
+    // TODO: when clean up, remove config in quick insert plugin
+    // platform/packages/editor/editor-plugin-quick-insert/src/quickInsertPlugin.tsx (typeAhead.openElementBrowserModal)
+    openElementBrowserModal === null || openElementBrowserModal === void 0 ? void 0 : openElementBrowserModal();
+    cancel({
+      addPrefixTrigger: false,
+      setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+      forceFocusOnEditor: false
+    });
+  }, [openElementBrowserModal, cancel]);
   return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -274,7 +300,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     ariaLabel: null,
     preventOverflow: true
   }, jsx("div", {
-    css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride]
+    css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showViewMore && typeAheadWrapperWithViewMoreOverride]
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0
@@ -289,12 +315,15 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     items: items,
     selectedIndex: selectedIndex,
     onItemClick: onItemInsert,
-    fitHeight: fitHeight,
+    fitHeight: fitHeightWithViewMore,
     editorView: editorView,
     decorationElement: anchorElement,
     triggerHandler: triggerHandler,
     moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
-    api: api
+    api: api,
+    showViewMore: showViewMore
+  }), showViewMore && jsx(ViewMore, {
+    onClick: onViewMoreClick
   }))));
 });
 TypeAheadPopup.displayName = 'TypeAheadPopup';

package/dist/es2019/ui/ViewMore.js

@@ -0,0 +1,36 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// 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';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
+import { ButtonItem, Section } from '@atlaskit/menu';
+import { N30 } from '@atlaskit/theme/colors';
+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})`
+  }
+});
+export const ViewMore = ({
+  onClick
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return jsx(Section, {
+    hasSeparator: true
+  }, jsx("span", {
+    css: buttonStyles
+  }, jsx(ButtonItem, {
+    onClick: onClick,
+    iconBefore: jsx(ShowMoreHorizontalIcon, {
+      label: ""
+    }),
+    "aria-describedby": formatMessage(messages.viewMore),
+    "data-testid": "quick-insert-view-more-elements-item"
+  }, formatMessage(messages.viewMore))));
+};