@atlaskit/editor-core 185.2.5 → 185.2.8

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
-import { Section, ButtonItem } from '@atlaskit/menu';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { borderRadius } from '@atlaskit/theme';
@@ -39,7 +38,7 @@ const InsertMenu = ({
     value: item.value
   }), [onInsert]);
   const quickInsertDropdownItems = dropdownItems.map(transform);
-  const viewMoreItem = showElementBrowserLink && quickInsertDropdownItems.pop();
+  const viewMoreItem = showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
   const onInsertItem = useCallback(item => {
     toggleVisiblity();
     if (!editorView.hasFocus()) {
@@ -71,8 +70,9 @@ const InsertMenu = ({
     showCategories: false
     // On page resize we want the InlineElementBrowser to show updated tools/overflow items
     ,
-    key: quickInsertDropdownItems.length
-  })), [getItems, onInsertItem, quickInsertDropdownItems.length, toggleVisiblity]);
+    key: quickInsertDropdownItems.length,
+    viewMoreItem: viewMoreItem
+  })), [getItems, onInsertItem, quickInsertDropdownItems.length, toggleVisiblity, viewMoreItem]);
   return jsx("div", {
     css: theme => insertMenuWrapper(theme, itemCount)
   }, jsx(WithPluginState, {
@@ -80,29 +80,8 @@ const InsertMenu = ({
       quickInsertState: pluginKey
     },
     render: render
-  }), itemCount > 0 && viewMoreItem && jsx(ViewMore, {
-    item: viewMoreItem
   }));
 };
-const ViewMore = ({
-  item
-}) => {
-  return jsx(Section, {
-    hasSeparator: true
-  }, jsx(ButtonItem, {
-    onClick: item.action,
-    iconBefore: jsx("div", {
-      css: itemBefore
-    }, item.icon()),
-    "aria-describedby": item.title,
-    "data-testid": "view-more-elements-item"
-    // @ts-ignore Overriding Menu styles is not supported
-    ,
-    css: css`
-          padding: 0px 12px;
-        `
-  }, item.title));
-};
 const getSvgIconForItem = ({
   name
 }) => {
@@ -147,15 +126,6 @@ const insertMenuWrapper = (theme, itemCount) => css`
     0 2px 1px ${N30A},
     0 0 20px -6px ${N60A}`})`};
 `;
-const itemBefore = css`
-  width: 40px;
-  height: 40px;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: ${"var(--ds-space-050, 4px)"};
-`;
 const flexWrapperStyles = css`
   display: flex;
   flex: 1;

package/dist/es2019/ui/ElementBrowser/ViewMore.js

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import { useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { Section, ButtonItem } from '@atlaskit/menu';
+const itemBefore = css`
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: ${"var(--ds-space-050, 4px)"};
+`;
+export const ViewMore = ({
+  item,
+  focus
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current && focus) {
+      ref.current.focus();
+    }
+  }, [focus]);
+  return jsx(Section, {
+    hasSeparator: true
+  }, jsx(ButtonItem, {
+    onClick: item.action,
+    iconBefore: jsx("div", {
+      css: itemBefore
+    }, item.icon()),
+    "aria-describedby": item.title,
+    "data-testid": "view-more-elements-item"
+    // @ts-ignore Overriding Menu styles is not supported
+    ,
+    css: css`
+          padding: 0px 12px;
+        `,
+    ref: ref
+  }, item.title));
+};

package/dist/es2019/ui/ElementBrowser/components/StatelessElementBrowser.js

@@ -11,6 +11,7 @@ import ElementSearch from './ElementSearch';
 import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
 import useContainerWidth from '../hooks/use-container-width';
 import useSelectAndFocusOnArrowNavigation from '../hooks/use-select-and-focus-on-arrow-navigation';
+import { ViewMore } from '../ViewMore';
 const wrapper = css`
   width: 100%;
   max-height: inherit;
@@ -109,7 +110,8 @@ const categoryListWrapper = css`
 function StatelessElementBrowser(props) {
   const {
     items,
-    onSelectItem
+    onSelectItem,
+    viewMoreItem
   } = props;
   const {
     containerWidth,
@@ -121,9 +123,10 @@ function StatelessElementBrowser(props) {
     focusedItemIndex,
     setFocusedItemIndex,
     focusOnSearch,
+    focusOnViewMore,
     onKeyDown,
     setFocusOnSearch
-  } = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount);
+  } = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem);
   useEffect(() => {
     fireAnalyticsEvent(props.createAnalyticsEvent)({
       payload: {
@@ -152,7 +155,7 @@ function StatelessElementBrowser(props) {
   /* Only for hitting enter to select item when focused on search bar,
    * The actual enter key press is handled on individual items level.
    */
-  const selectedItem = items[selectedItemIndex];
+  const selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
   const onItemsEnterKeyPress = useCallback(e => {
     if (e.key !== 'Enter') {
       return;
@@ -182,7 +185,9 @@ function StatelessElementBrowser(props) {
     setColumnCount: setColumnCount,
     setFocusOnSearch: setFocusOnSearch,
     onKeyPress: onItemsEnterKeyPress,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    viewMoreItem: viewMoreItem,
+    focusOnViewMore: focusOnViewMore
   })) : jsx(DesktopBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
@@ -208,13 +213,15 @@ function MobileBrowser({
   focusedItemIndex,
   setFocusedItemIndex,
   focusOnSearch,
+  focusOnViewMore,
   setColumnCount,
   setFocusOnSearch,
   onKeyPress,
   onKeyDown,
   searchTerm,
   createAnalyticsEvent,
-  emptyStateHandler
+  emptyStateHandler,
+  viewMoreItem
 }) {
   return jsx("div", {
     css: mobileElementBrowserContainer,
@@ -250,7 +257,10 @@ function MobileBrowser({
     emptyStateHandler: emptyStateHandler,
     selectedCategory: selectedCategory,
     searchTerm: searchTerm
-  })));
+  })), viewMoreItem && jsx(ViewMore, {
+    item: viewMoreItem,
+    focus: focusOnViewMore
+  }));
 }
 function DesktopBrowser({
   showCategories,

package/dist/es2019/ui/ElementBrowser/hooks/use-select-and-focus-on-arrow-navigation.js

@@ -13,6 +13,7 @@ import { useCallback, useEffect, useRef, useReducer } from 'react';
  *      selectedItemIndex,
  *      focusedItemIndex,
  *      focusOnSearch,
+ *      focusOnViewMore,
  *      setFocusedItemIndex,
  *      onKeyDown
  *    } = useSelectAndFocusOnArrowNavigation(list.length - 1, 1);
@@ -56,7 +57,8 @@ const reducer = (state, action) => {
       return {
         ...state,
         focusedItemIndex: undefined,
-        focusOnSearch: true
+        focusOnSearch: true,
+        focusOnViewMore: false
       };
     case ACTIONS.MOVE:
       return moveReducer(state, action);
@@ -64,53 +66,127 @@ const reducer = (state, action) => {
   return state;
 };
 const moveReducer = (state, action) => {
-  const newIndex = state.selectedItemIndex + action.payload.positions;
-
-  // The step payload is only sent for up arrow.
-  // When user presses up arrow on first row, focus on search bar.
-  if (action.payload.step && state.selectedItemIndex < action.payload.step) {
+  const {
+    listSize,
+    canFocusViewMore
+  } = state;
+  if (state.focusOnSearch) {
+    // up arrow
+    if (action.payload.positions && action.payload.positions <= -1) {
+      return {
+        ...state,
+        focusOnSearch: false,
+        focusOnViewMore: !!canFocusViewMore,
+        focusedItemIndex: canFocusViewMore ? undefined : listSize,
+        selectedItemIndex: canFocusViewMore ? undefined : listSize
+      };
+    } else {
+      return {
+        ...state,
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: 0,
+        selectedItemIndex: 0
+      };
+    }
+  }
+  if (state.focusOnViewMore) {
+    // down arrow
+    if (action.payload.positions === 1) {
+      return {
+        ...state,
+        focusOnSearch: true,
+        focusOnViewMore: false,
+        focusedItemIndex: undefined,
+        // if search is focused then select first item.
+        selectedItemIndex: 0
+      };
+    } else {
+      return {
+        ...state,
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: listSize,
+        selectedItemIndex: listSize
+      };
+    }
+  }
+  const newIndex = state.selectedItemIndex ? state.selectedItemIndex + action.payload.positions : action.payload.positions;
+  const safeIndex = ensureSafeIndex(newIndex, state.listSize);
+  // down arrow key is pressed or right arrow key is pressed.
+  if (state.focusedItemIndex !== undefined && action.payload.positions && action.payload.positions >= 1) {
+    // when multi column element browser is open and we are in last
+    //  row then newIndex will be greater than listSize when
+    //  down arrow key is pressed.
+    // Or when last item is focused and down or right arrow key is pressed.
+    const isLastItemFocused = newIndex > listSize;
+    const focusOnSearch = isLastItemFocused && !canFocusViewMore;
+    const focusOnViewMore = isLastItemFocused && !!canFocusViewMore;
+    // if search is focused, then select first item.
+    // otherwise if view more is focused then select item should be undefined.
+    const selectedItemIndex = focusOnSearch ? 0 : focusOnViewMore ? undefined : safeIndex;
     return {
       ...state,
-      focusOnSearch: true,
-      focusedItemIndex: undefined
+      focusOnSearch,
+      focusOnViewMore,
+      selectedItemIndex,
+      focusedItemIndex: isLastItemFocused ? undefined : safeIndex
     };
   }
-  if (newIndex < 0) {
-    return state;
-  }
 
-  // Set focus position to first item when moving forward or backward from searchbar
-  if (state.focusedItemIndex == null || state.focusOnSearch) {
+  // up arrow key is pressed or left arrow key is pressed.
+  if (state.focusedItemIndex !== undefined && action.payload.positions && action.payload.positions <= -1) {
+    // if arrow up key is pressed when focus is in first row,
+    //  or, arrow left key is pressed when first item is focused,
+    //  then newIndex will become less than zero.
+    // In this case, focus search, and, kept previously selected item.
+    const isFirstRowFocused = newIndex < 0;
+    // if focus goes to search then kept last selected item in first row.
+    const selectedItemIndex = isFirstRowFocused ? state.selectedItemIndex : safeIndex;
     return {
       ...state,
-      focusOnSearch: false,
-      focusedItemIndex: 0,
-      selectedItemIndex: 0
+      // focus search if first item is focused on up or left arrow key
+      focusOnSearch: isFirstRowFocused,
+      focusOnViewMore: false,
+      focusedItemIndex: isFirstRowFocused ? undefined : safeIndex,
+      selectedItemIndex
     };
   }
-  const safeIndex = ensureSafeIndex(newIndex, state.listSize);
   return {
     ...state,
-    focusedItemIndex: safeIndex,
-    selectedItemIndex: safeIndex
+    focusOnSearch: false,
+    focusOnViewMore: false,
+    selectedItemIndex: safeIndex,
+    focusedItemIndex: safeIndex
   };
 };
 const initialState = {
   focusOnSearch: true,
+  focusOnViewMore: false,
   selectedItemIndex: 0,
   focusedItemIndex: undefined,
   listSize: 0
 };
-const getInitialState = listSize => initialState => ({
+const getInitialState = (listSize, canFocusViewMore) => initialState => ({
   ...initialState,
-  listSize
+  listSize,
+  canFocusViewMore
 });
-function useSelectAndFocusOnArrowNavigation(listSize, step) {
-  const [state, dispatch] = useReducer(reducer, initialState, getInitialState(listSize));
+function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
+  const [state, dispatch] = useReducer(reducer, initialState, getInitialState(listSize, canFocusViewMore));
+  useEffect(() => {
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: {
+        canFocusViewMore
+      }
+    });
+  }, [canFocusViewMore]);
   const {
     selectedItemIndex,
     focusedItemIndex,
-    focusOnSearch
+    focusOnSearch,
+    focusOnViewMore
   } = state;
   const reset = useCallback(listSize => {
     let payload = {
@@ -126,7 +202,8 @@ function useSelectAndFocusOnArrowNavigation(listSize, step) {
     const payload = {
       focusedItemIndex: index,
       selectedItemIndex: index,
-      focusOnSearch: false
+      focusOnSearch: false,
+      focusOnViewMore: false
     };
     dispatch({
       type: ACTIONS.UPDATE_STATE,
@@ -162,7 +239,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step) {
   const onKeyDown = useCallback(e => {
     const avoidKeysWhileSearching = ['/',
     // While already focused on search bar, let users type in.
-    'ArrowRight', 'ArrowLeft', 'ArrowUp'];
+    'ArrowRight', 'ArrowLeft'];
     if (focusOnSearch && avoidKeysWhileSearching.includes(e.key)) {
       return;
     }
@@ -189,6 +266,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step) {
     selectedItemIndex,
     onKeyDown,
     focusOnSearch,
+    focusOnViewMore,
     setFocusOnSearch,
     focusedItemIndex,
     setFocusedItemIndex: removeFocusFromSearchAndSetOnItem

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "185.2.5";
+export const version = "185.2.8";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.2.5",
+	"version": "185.2.8",
 	"sideEffects": false
 }

package/dist/esm/plugins/block-type/index.js

@@ -7,12 +7,12 @@ import inputRulePlugin from './pm-plugins/input-rule';
 import ToolbarBlockType from './ui/ToolbarBlockType';
 import WithPluginState from '../../ui/WithPluginState';
 import { setBlockTypeWithAnalytics } from './commands';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import * as keymaps from '../../keymaps';
 import { IconHeading, IconQuote } from '../quick-insert/assets';
 import { messages } from './messages';
 import { ToolbarSize } from '../../ui/Toolbar/types';
-var headingPluginOptions = function headingPluginOptions(_ref, isAllowed) {
+var headingPluginOptions = function headingPluginOptions(_ref, isAllowed, editorAnalyticsApi) {
   var formatMessage = _ref.formatMessage;
   if (!isAllowed) {
     return [];
@@ -40,7 +40,7 @@ var headingPluginOptions = function headingPluginOptions(_ref, isAllowed) {
         var tr = insert(state.schema.nodes.heading.createChecked({
           level: level
         }));
-        return addAnalytics(state, tr, {
+        editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
           action: ACTION.FORMATTED,
           actionSubject: ACTION_SUBJECT.TEXT,
           eventType: EVENT_TYPE.TRACK,
@@ -49,12 +49,13 @@ var headingPluginOptions = function headingPluginOptions(_ref, isAllowed) {
             inputMethod: INPUT_METHOD.QUICK_INSERT,
             newHeadingLevel: level
           }
-        });
+        })(tr);
+        return tr;
       }
     };
   });
 };
-var blockquotePluginOptions = function blockquotePluginOptions(_ref2, isAllowed) {
+var blockquotePluginOptions = function blockquotePluginOptions(_ref2, isAllowed, editorAnalyticsApi) {
   var formatMessage = _ref2.formatMessage;
   if (!isAllowed) {
     return [];
@@ -70,7 +71,7 @@ var blockquotePluginOptions = function blockquotePluginOptions(_ref2, isAllowed)
     },
     action: function action(insert, state) {
       var tr = insert(state.schema.nodes.blockquote.createChecked({}, state.schema.nodes.paragraph.createChecked()));
-      return addAnalytics(state, tr, {
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
         action: ACTION.FORMATTED,
         actionSubject: ACTION_SUBJECT.TEXT,
         eventType: EVENT_TYPE.TRACK,
@@ -78,11 +79,12 @@ var blockquotePluginOptions = function blockquotePluginOptions(_ref2, isAllowed)
         attributes: {
           inputMethod: INPUT_METHOD.QUICK_INSERT
         }
-      });
+      })(tr);
+      return tr;
     }
   }];
 };
-var blockTypePlugin = function blockTypePlugin(options) {
+var blockTypePlugin = function blockTypePlugin(options, api) {
   return {
     name: 'blockType',
     nodes: function nodes() {
@@ -166,8 +168,9 @@ var blockTypePlugin = function blockTypePlugin(options) {
     },
     pluginsOptions: {
       quickInsert: function quickInsert(intl) {
+        var _api$dependencies$ana, _api$dependencies$ana2;
         var exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
-        return [].concat(_toConsumableArray(blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1)), _toConsumableArray(headingPluginOptions(intl, exclude.indexOf('heading') === -1)));
+        return [].concat(_toConsumableArray(blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions)), _toConsumableArray(headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 ? void 0 : (_api$dependencies$ana2 = api.dependencies.analytics) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.actions)));
       }
     }
   };

package/dist/esm/ui/ElementBrowser/ElementBrowser.js

@@ -109,7 +109,8 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
         showSearch = _this$props.showSearch,
         showCategories = _this$props.showCategories,
         mode = _this$props.mode,
-        emptyStateHandler = _this$props.emptyStateHandler;
+        emptyStateHandler = _this$props.emptyStateHandler,
+        viewMoreItem = _this$props.viewMoreItem;
       var _this$state2 = this.state,
         categories = _this$state2.categories,
         searchTerm = _this$state2.searchTerm,
@@ -127,7 +128,8 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
         showCategories: showCategories,
         mode: mode,
         searchTerm: searchTerm,
-        emptyStateHandler: emptyStateHandler
+        emptyStateHandler: emptyStateHandler,
+        viewMoreItem: viewMoreItem
       });
     }
   }]);

package/dist/esm/ui/ElementBrowser/InsertMenu.js

@@ -3,11 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2;
 /** @jsx jsx */
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
-import { Section, ButtonItem } from '@atlaskit/menu';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { borderRadius } from '@atlaskit/theme';
@@ -52,7 +51,7 @@ var InsertMenu = function InsertMenu(_ref) {
     };
   }, [onInsert]);
   var quickInsertDropdownItems = dropdownItems.map(transform);
-  var viewMoreItem = showElementBrowserLink && quickInsertDropdownItems.pop();
+  var viewMoreItem = showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
   var onInsertItem = useCallback(function (item) {
     toggleVisiblity();
     if (!editorView.hasFocus()) {
@@ -86,9 +85,10 @@ var InsertMenu = function InsertMenu(_ref) {
       showCategories: false
       // On page resize we want the InlineElementBrowser to show updated tools/overflow items
       ,
-      key: quickInsertDropdownItems.length
+      key: quickInsertDropdownItems.length,
+      viewMoreItem: viewMoreItem
     }));
-  }, [getItems, onInsertItem, quickInsertDropdownItems.length, toggleVisiblity]);
+  }, [getItems, onInsertItem, quickInsertDropdownItems.length, toggleVisiblity, viewMoreItem]);
   return jsx("div", {
     css: function css(theme) {
       return insertMenuWrapper(theme, itemCount);
@@ -98,28 +98,10 @@ var InsertMenu = function InsertMenu(_ref) {
       quickInsertState: pluginKey
     },
     render: render
-  }), itemCount > 0 && viewMoreItem && jsx(ViewMore, {
-    item: viewMoreItem
   }));
 };
-var ViewMore = function ViewMore(_ref3) {
-  var item = _ref3.item;
-  return jsx(Section, {
-    hasSeparator: true
-  }, jsx(ButtonItem, {
-    onClick: item.action,
-    iconBefore: jsx("div", {
-      css: itemBefore
-    }, item.icon()),
-    "aria-describedby": item.title,
-    "data-testid": "view-more-elements-item"
-    // @ts-ignore Overriding Menu styles is not supported
-    ,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          padding: 0px 12px;\n        "])))
-  }, item.title));
-};
-var getSvgIconForItem = function getSvgIconForItem(_ref4) {
-  var name = _ref4.name;
+var getSvgIconForItem = function getSvgIconForItem(_ref3) {
+  var name = _ref3.name;
   var Icon = {
     codeblock: IconCode,
     panel: IconPanel,
@@ -134,8 +116,8 @@ var getSvgIconForItem = function getSvgIconForItem(_ref4) {
     label: ""
   }) : undefined;
 };
-var getInsertMenuHeight = function getInsertMenuHeight(_ref5) {
-  var itemCount = _ref5.itemCount;
+var getInsertMenuHeight = function getInsertMenuHeight(_ref4) {
+  var itemCount = _ref4.itemCount;
   // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
   var EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 112;
   if (itemCount > 0 && itemCount < 6) {
@@ -145,15 +127,14 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref5) {
 };
 
 var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 320px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n"])), getInsertMenuHeight({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 320px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n"])), getInsertMenuHeight({
     itemCount: itemCount
   }), themed({
     light: "var(--ds-surface-overlay, ".concat(N0, ")"),
     dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
   })(theme), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ",\n    0 2px 1px ").concat(N30A, ",\n    0 0 20px -6px ").concat(N60A), ")"));
 };
-var itemBefore = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
-var flexWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
+var flexWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
 var FlexWrapper = function FlexWrapper(props) {
   var children = props.children,
     divProps = _objectWithoutProperties(props, _excluded);

package/dist/esm/ui/ElementBrowser/ViewMore.js

@@ -0,0 +1,31 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+import { useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { Section, ButtonItem } from '@atlaskit/menu';
+var itemBefore = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
+export var ViewMore = function ViewMore(_ref) {
+  var item = _ref.item,
+    focus = _ref.focus;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (ref.current && focus) {
+      ref.current.focus();
+    }
+  }, [focus]);
+  return jsx(Section, {
+    hasSeparator: true
+  }, jsx(ButtonItem, {
+    onClick: item.action,
+    iconBefore: jsx("div", {
+      css: itemBefore
+    }, item.icon()),
+    "aria-describedby": item.title,
+    "data-testid": "view-more-elements-item"
+    // @ts-ignore Overriding Menu styles is not supported
+    ,
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          padding: 0px 12px;\n        "]))),
+    ref: ref
+  }, item.title));
+};