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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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

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/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))));
+};

package/dist/esm/ui/TypeAheadList.js

@@ -11,8 +11,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';
@@ -50,7 +52,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
     decorationElement = _ref2.decorationElement,
     triggerHandler = _ref2.triggerHandler,
     moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
-    api = _ref2.api;
+    api = _ref2.api,
+    showViewMore = _ref2.showViewMore;
   var listRef = useRef();
   var listContainerRef = useRef(null);
   var lastVisibleIndexes = useRef({
@@ -277,13 +280,21 @@ var TypeAheadListComponent = /*#__PURE__*/React.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')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
-  return jsx(MenuGroup, {
-    "aria-label": popupAriaLabel,
-    "aria-relevant": "additions removals"
-  }, jsx("div", {
-    id: menuGroupId,
-    ref: listContainerRef
-  }, jsx(List, {
+  var 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))
+  })));
+  var ListContent = jsx(List, {
     rowRenderer: renderRow,
     ref: listRef,
     rowCount: items.length,
@@ -313,7 +324,14 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
         }
       }
     }), 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/esm/ui/TypeAheadMenu.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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';
@@ -70,7 +71,11 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
       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) === 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, {
@@ -88,6 +93,7 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     decorationSet: decorationSet,
     isEmptyQuery: !query,
     cancel: cancel,
-    api: api
+    api: api,
+    showViewMore: showViewMore
   });
 });

package/dist/esm/ui/TypeAheadPopup.js

@@ -18,7 +18,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';
 var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
+var VIEWMORE_BUTTON_HEIGHT = 53;
 var DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW = 480;
 var ITEM_PADDING = 12;
 var typeAheadContent = css({
@@ -35,6 +37,10 @@ var typeAheadContent = css({
 var typeAheadContentOverride = css({
   maxHeight: "".concat(DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW, "px")
 });
+var typeAheadWrapperWithViewMoreOverride = css({
+  display: 'flex',
+  flexDirection: 'column'
+});
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,
     triggerHandler = _ref.triggerHandler;
@@ -57,7 +63,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     onItemInsert = props.onItemInsert,
     isEmptyQuery = props.isEmptyQuery,
     cancel = props.cancel,
-    api = props.api;
+    api = props.api,
+    showViewMore = props.showViewMore;
   var ref = useRef(null);
   var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
     featureFlagsState = _useSharedPluginState.featureFlagsState;
@@ -119,6 +126,12 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     _useState2 = _slicedToArray(_useState, 2),
     fitHeight = _useState2[0],
     setFitHeight = _useState2[1];
+  var fitHeightWithViewMore = useMemo(function () {
+    if (showViewMore) {
+      return fitHeight - VIEWMORE_BUTTON_HEIGHT;
+    }
+    return fitHeight;
+  }, [fitHeight, showViewMore]);
   var getFitHeight = useCallback(function () {
     if (!anchorElement || !popupsMountPoint) {
       return;
@@ -258,6 +271,19 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
       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 = 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: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+      forceFocusOnEditor: false
+    });
+  }, [openElementBrowserModal, cancel]);
   return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -270,7 +296,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (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
@@ -285,12 +311,15 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (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/esm/ui/ViewMore.js

@@ -0,0 +1,34 @@
+/**
+ * @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';
+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, ")")
+  }
+});
+export var ViewMore = function ViewMore(_ref) {
+  var onClick = _ref.onClick;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  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))));
+};

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

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

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

@@ -30,6 +30,7 @@ type TypeAheadPopupProps = {
         forceFocusOnEditor: boolean;
     }) => void;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+    showViewMore?: boolean;
 };
 export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
 export {};

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

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

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

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

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

@@ -30,6 +30,7 @@ type TypeAheadPopupProps = {
         forceFocusOnEditor: boolean;
     }) => void;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+    showViewMore?: boolean;
 };
 export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
 export {};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.0.5",
+	"version": "2.1.0",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,10 +33,10 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/editor-common": "^100.4.0",
+		"@atlaskit/adf-schema": "^47.6.0",
+		"@atlaskit/editor-common": "^100.5.0",
 		"@atlaskit/editor-element-browser": "^0.1.0",
-		"@atlaskit/editor-plugin-analytics": "^2.0.0",
+		"@atlaskit/editor-plugin-analytics": "^2.1.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
 		"@atlaskit/editor-plugin-context-panel": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.3.0",
+		"@atlaskit/tmp-editor-statsig": "^3.4.0",
 		"@atlaskit/tokens": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",