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

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

@@ -1,25 +1,30 @@
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
+import { useIntl } from 'react-intl-next';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { elementInsertSidePanel } from '@atlaskit/editor-common/messages';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
-import { QuickInsertPanel } from '@atlaskit/editor-element-browser';
+import { SideInsertPanel, QuickInsertPanel } from '@atlaskit/editor-element-browser';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import AddIcon from '@atlaskit/icon/core/add';
 import { fg } from '@atlaskit/platform-feature-flags';
 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 { ViewAllButton } from './ViewAllButton';
 const DEFAULT_TYPEAHEAD_MENU_HEIGHT = 520;
 // const DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW = 480;
 
 const ITEM_PADDING = 12;
+const INSERT_PANEL_WIDTH = 320;
 const typeAheadContent = css({
   background: `var(--ds-surface-overlay, ${N0})`,
   borderRadius: "var(--ds-border-radius, 3px)",
@@ -53,6 +58,9 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     setSelectedItem
   } = props;
   const ref = useRef(null);
+  const {
+    formatMessage
+  } = useIntl();
   const defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   const startTime = useMemo(() => performance.now(),
   // In case those props changes
@@ -257,11 +265,37 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', escape);
     };
   }, [ref, cancel]);
-  const handlePanelOpen = useCallback(() => cancel({
-    addPrefixTrigger: true,
-    setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
-    forceFocusOnEditor: true
-  }), [cancel]);
+  const handleViewAllItemsClick = useCallback(() => {
+    var _api$contextPanel, _api$contextPanel$act;
+    const showContextPanel = api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : (_api$contextPanel$act = _api$contextPanel.actions) === null || _api$contextPanel$act === void 0 ? void 0 : _api$contextPanel$act.showPanel;
+    if (!showContextPanel || !items) {
+      return;
+    }
+
+    // Opens main editor controls side panel
+    showContextPanel({
+      id: 'editor-element-insert-sidebar-panel',
+      headerComponentElements: {
+        headerLabel: elementInsertSidePanel.title,
+        HeaderIcon: () => jsx(AddIcon, {
+          label: formatMessage(elementInsertSidePanel.title)
+        })
+      },
+      BodyComponent: () => {
+        return jsx(SideInsertPanel, {
+          items: items,
+          onItemInsert: onItemInsert
+        });
+      }
+    }, 'push', INSERT_PANEL_WIDTH);
+
+    // Closes typeahead
+    cancel({
+      addPrefixTrigger: true,
+      setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+      forceFocusOnEditor: true
+    });
+  }, [api, cancel, formatMessage, items, onItemInsert]);
   return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -286,12 +320,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     items: items,
     onItemInsert: onItemInsert,
     query: query,
-    setSelectedItem: setSelectedItem
-  }), (api === null || api === void 0 ? void 0 : api.contextPanel) && jsx(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/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/esm/ui/modern/TypeAheadPopup.js

@@ -1,26 +1,31 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
+import { useIntl } from 'react-intl-next';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { elementInsertSidePanel } from '@atlaskit/editor-common/messages';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
-import { QuickInsertPanel } from '@atlaskit/editor-element-browser';
+import { SideInsertPanel, QuickInsertPanel } from '@atlaskit/editor-element-browser';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import AddIcon from '@atlaskit/icon/core/add';
 import { fg } from '@atlaskit/platform-feature-flags';
 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 { ViewAllButton } from './ViewAllButton';
 var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 520;
 // const DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW = 480;
 
 var ITEM_PADDING = 12;
+var INSERT_PANEL_WIDTH = 320;
 var typeAheadContent = css({
   background: "var(--ds-surface-overlay, ".concat(N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)",
@@ -52,6 +57,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     query = props.query,
     setSelectedItem = props.setSelectedItem;
   var ref = useRef(null);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   var startTime = useMemo(function () {
     return performance.now();
@@ -253,13 +260,39 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
       element === null || element === void 0 || element.removeEventListener('keydown', escape);
     };
   }, [ref, cancel]);
-  var handlePanelOpen = useCallback(function () {
-    return cancel({
+  var handleViewAllItemsClick = 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: elementInsertSidePanel.title,
+        HeaderIcon: function HeaderIcon() {
+          return jsx(AddIcon, {
+            label: formatMessage(elementInsertSidePanel.title)
+          });
+        }
+      },
+      BodyComponent: function BodyComponent() {
+        return jsx(SideInsertPanel, {
+          items: items,
+          onItemInsert: onItemInsert
+        });
+      }
+    }, 'push', INSERT_PANEL_WIDTH);
+
+    // Closes typeahead
+    cancel({
       addPrefixTrigger: true,
       setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
       forceFocusOnEditor: true
     });
-  }, [cancel]);
+  }, [api, cancel, formatMessage, items, onItemInsert]);
   return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
@@ -284,12 +317,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     items: items,
     onItemInsert: onItemInsert,
     query: query,
-    setSelectedItem: setSelectedItem
-  }), (api === null || api === void 0 ? void 0 : api.contextPanel) && jsx(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/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.4",
+	"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,8 +48,8 @@
 		"@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/tokens": "^4.2.0",
+		"@atlaskit/tmp-editor-statsig": "^3.4.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",

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

@@ -1,76 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ViewAllButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
-var _messages = require("@atlaskit/editor-common/messages");
-var _typeAhead = require("@atlaskit/editor-common/type-ahead");
-var _editorElementBrowser = require("@atlaskit/editor-element-browser");
-var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
-var _primitives = require("@atlaskit/primitives");
-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; }
-var viewAllButtonStyles = (0, _primitives.xcss)({
-  background: "var(--ds-background-input-pressed, #FFFFFF)",
-  position: 'sticky',
-  bottom: '-4px',
-  width: '100%',
-  height: '40px',
-  color: 'color.text.subtle',
-  fontWeight: "var(--ds-font-weight-medium, 500)",
-  ':hover': {
-    textDecoration: 'underline'
-  },
-  ':active': {
-    color: 'color.text'
-  }
-});
-var INSERT_PANEL_WIDTH = 320;
-var ViewAllButton = exports.ViewAllButton = function ViewAllButton(_ref) {
-  var items = _ref.items,
-    editorApi = _ref.editorApi,
-    onItemInsert = _ref.onItemInsert,
-    onPanelOpen = _ref.onPanelOpen;
-  var _useIntl = (0, _reactIntlNext.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
-  var handleClick = (0, _react.useCallback)(function () {
-    var _editorApi$contextPan;
-    var showContextPanel = editorApi === null || editorApi === void 0 || (_editorApi$contextPan = editorApi.contextPanel) === null || _editorApi$contextPan === void 0 || (_editorApi$contextPan = _editorApi$contextPan.actions) === null || _editorApi$contextPan === void 0 ? void 0 : _editorApi$contextPan.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 /*#__PURE__*/_react.default.createElement(_add.default, {
-            label: formatMessage(_messages.elementInsertSidePanel.title)
-          });
-        }
-      },
-      BodyComponent: function BodyComponent() {
-        return /*#__PURE__*/_react.default.createElement(_editorElementBrowser.SideInsertPanel, {
-          items: items,
-          onItemInsert: onItemInsert
-        });
-      }
-    }, 'push', INSERT_PANEL_WIDTH);
-
-    // Closes typeahead
-    if (onPanelOpen) {
-      onPanelOpen();
-    }
-  }, [editorApi, formatMessage, items, onItemInsert, onPanelOpen]);
-  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    xcss: viewAllButtonStyles,
-    onClick: handleClick
-  }, formatMessage(_typeAhead.typeAheadListMessages.viewAllInserts));
-};