@atlaskit/editor-core 185.2.5 → 185.2.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 185.2.8
+
+### Patch Changes
+
+- [`af998742600`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af998742600) - [ux] ED-18059 Updated arrow key navigation within insert menu and element browser.
+
+## 185.2.7
+
+### Patch Changes
+
+- [`1259df9a9ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1259df9a9ef) - converted some of block-type's analytics to use new EditorAnalyticsAPI
+
 ## 185.2.5
 
 ### Patch Changes

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

@@ -21,14 +21,14 @@ var _inputRule = _interopRequireDefault(require("./pm-plugins/input-rule"));
 var _ToolbarBlockType = _interopRequireDefault(require("./ui/ToolbarBlockType"));
 var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
 var _commands = require("./commands");
-var _analytics = require("../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var keymaps = _interopRequireWildcard(require("../../keymaps"));
 var _assets = require("../quick-insert/assets");
 var _messages = require("./messages");
 var _types = require("../../ui/Toolbar/types");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var headingPluginOptions = function headingPluginOptions(_ref, isAllowed) {
+var headingPluginOptions = function headingPluginOptions(_ref, isAllowed, editorAnalyticsApi) {
   var formatMessage = _ref.formatMessage;
   if (!isAllowed) {
     return [];
@@ -56,7 +56,7 @@ var headingPluginOptions = function headingPluginOptions(_ref, isAllowed) {
         var tr = insert(state.schema.nodes.heading.createChecked({
           level: level
         }));
-        return (0, _analytics.addAnalytics)(state, tr, {
+        editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
           action: _analytics.ACTION.FORMATTED,
           actionSubject: _analytics.ACTION_SUBJECT.TEXT,
           eventType: _analytics.EVENT_TYPE.TRACK,
@@ -65,12 +65,13 @@ var headingPluginOptions = function headingPluginOptions(_ref, isAllowed) {
             inputMethod: _analytics.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 [];
@@ -86,7 +87,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 (0, _analytics.addAnalytics)(state, tr, {
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
         action: _analytics.ACTION.FORMATTED,
         actionSubject: _analytics.ACTION_SUBJECT.TEXT,
         eventType: _analytics.EVENT_TYPE.TRACK,
@@ -94,11 +95,12 @@ var blockquotePluginOptions = function blockquotePluginOptions(_ref2, isAllowed)
         attributes: {
           inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
         }
-      });
+      })(tr);
+      return tr;
     }
   }];
 };
-var blockTypePlugin = function blockTypePlugin(options) {
+var blockTypePlugin = function blockTypePlugin(options, api) {
   return {
     name: 'blockType',
     nodes: function nodes() {
@@ -182,8 +184,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((0, _toConsumableArray2.default)(blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1)), (0, _toConsumableArray2.default)(headingPluginOptions(intl, exclude.indexOf('heading') === -1)));
+        return [].concat((0, _toConsumableArray2.default)(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)), (0, _toConsumableArray2.default)(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/cjs/ui/ElementBrowser/ElementBrowser.js

@@ -119,7 +119,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,
@@ -137,7 +138,8 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
         showCategories: showCategories,
         mode: mode,
         searchTerm: searchTerm,
-        emptyStateHandler: emptyStateHandler
+        emptyStateHandler: emptyStateHandler,
+        viewMoreItem: viewMoreItem
       });
     }
   }]);

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

@@ -11,7 +11,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _menu = require("@atlaskit/menu");
 var _theme = require("@atlaskit/theme");
 var _components = require("@atlaskit/theme/components");
 var _colors = require("@atlaskit/theme/colors");
@@ -24,7 +23,7 @@ var _commands = require("../../plugins/quick-insert/commands");
 var _ElementBrowserLoader = _interopRequireDefault(require("./components/ElementBrowserLoader"));
 var _constants = require("./constants");
 var _excluded = ["children"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2;
 /** @jsx jsx */
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -59,7 +58,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 = (0, _react.useCallback)(function (item) {
     toggleVisiblity();
     if (!editorView.hasFocus()) {
@@ -93,9 +92,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 (0, _react2.jsx)("div", {
     css: function css(theme) {
       return insertMenuWrapper(theme, itemCount);
@@ -105,28 +105,10 @@ var InsertMenu = function InsertMenu(_ref) {
       quickInsertState: _pluginKey.pluginKey
     },
     render: render
-  }), itemCount > 0 && viewMoreItem && (0, _react2.jsx)(ViewMore, {
-    item: viewMoreItem
   }));
 };
-var ViewMore = function ViewMore(_ref3) {
-  var item = _ref3.item;
-  return (0, _react2.jsx)(_menu.Section, {
-    hasSeparator: true
-  }, (0, _react2.jsx)(_menu.ButtonItem, {
-    onClick: item.action,
-    iconBefore: (0, _react2.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: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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: _assets.IconCode,
     panel: _assets.IconPanel,
@@ -141,8 +123,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) {
@@ -152,15 +134,14 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref5) {
 };
 
 var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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
   }), (0, _components.themed)({
     light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
     dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
   })(theme), (0, _theme.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ",\n    0 2px 1px ").concat(_colors.N30A, ",\n    0 0 20px -6px ").concat(_colors.N60A), ")"));
 };
-var itemBefore = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
+var flexWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _objectWithoutProperties2.default)(props, _excluded);

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewMore = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _menu = require("@atlaskit/menu");
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+var itemBefore = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 ViewMore = function ViewMore(_ref) {
+  var item = _ref.item,
+    focus = _ref.focus;
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (ref.current && focus) {
+      ref.current.focus();
+    }
+  }, [focus]);
+  return (0, _react2.jsx)(_menu.Section, {
+    hasSeparator: true
+  }, (0, _react2.jsx)(_menu.ButtonItem, {
+    onClick: item.action,
+    iconBefore: (0, _react2.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: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          padding: 0px 12px;\n        "]))),
+    ref: ref
+  }, item.title));
+};
+exports.ViewMore = ViewMore;

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

@@ -20,6 +20,7 @@ var _ElementSearch = _interopRequireDefault(require("./ElementSearch"));
 var _constants = require("../constants");
 var _useContainerWidth2 = _interopRequireDefault(require("../hooks/use-container-width"));
 var _useSelectAndFocusOnArrowNavigation = _interopRequireDefault(require("../hooks/use-select-and-focus-on-arrow-navigation"));
+var _ViewMore = require("../ViewMore");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -41,7 +42,8 @@ var mobileCategoryListWrapper = (0, _react2.css)(_templateObject14 || (_template
 var categoryListWrapper = (0, _react2.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: 0;\n  margin-top: ", "px;\n  flex-direction: column;\n"])), mobileCategoryListWrapper, _constants.GRID_SIZE * 3);
 function StatelessElementBrowser(props) {
   var items = props.items,
-    onSelectItem = props.onSelectItem;
+    onSelectItem = props.onSelectItem,
+    viewMoreItem = props.viewMoreItem;
   var _useContainerWidth = (0, _useContainerWidth2.default)(),
     containerWidth = _useContainerWidth.containerWidth,
     ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
@@ -49,11 +51,12 @@ function StatelessElementBrowser(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     columnCount = _useState2[0],
     setColumnCount = _useState2[1];
-  var _useSelectAndFocusOnA = (0, _useSelectAndFocusOnArrowNavigation.default)(items.length - 1, columnCount),
+  var _useSelectAndFocusOnA = (0, _useSelectAndFocusOnArrowNavigation.default)(items.length - 1, columnCount, !!viewMoreItem),
     selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
     focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
     setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
     focusOnSearch = _useSelectAndFocusOnA.focusOnSearch,
+    focusOnViewMore = _useSelectAndFocusOnA.focusOnViewMore,
     onKeyDown = _useSelectAndFocusOnA.onKeyDown,
     setFocusOnSearch = _useSelectAndFocusOnA.setFocusOnSearch;
   (0, _react.useEffect)(function () {
@@ -84,7 +87,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.
    */
-  var selectedItem = items[selectedItemIndex];
+  var selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
   var onItemsEnterKeyPress = (0, _react.useCallback)(function (e) {
     if (e.key !== 'Enter') {
       return;
@@ -114,7 +117,9 @@ function StatelessElementBrowser(props) {
     setColumnCount: setColumnCount,
     setFocusOnSearch: setFocusOnSearch,
     onKeyPress: onItemsEnterKeyPress,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    viewMoreItem: viewMoreItem,
+    focusOnViewMore: focusOnViewMore
   })) : (0, _react2.jsx)(DesktopBrowser, (0, _extends2.default)({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
@@ -140,13 +145,15 @@ function MobileBrowser(_ref) {
     focusedItemIndex = _ref.focusedItemIndex,
     setFocusedItemIndex = _ref.setFocusedItemIndex,
     focusOnSearch = _ref.focusOnSearch,
+    focusOnViewMore = _ref.focusOnViewMore,
     setColumnCount = _ref.setColumnCount,
     setFocusOnSearch = _ref.setFocusOnSearch,
     onKeyPress = _ref.onKeyPress,
     onKeyDown = _ref.onKeyDown,
     searchTerm = _ref.searchTerm,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
-    emptyStateHandler = _ref.emptyStateHandler;
+    emptyStateHandler = _ref.emptyStateHandler,
+    viewMoreItem = _ref.viewMoreItem;
   return (0, _react2.jsx)("div", {
     css: mobileElementBrowserContainer,
     onKeyPress: onKeyPress,
@@ -181,7 +188,10 @@ function MobileBrowser(_ref) {
     emptyStateHandler: emptyStateHandler,
     selectedCategory: selectedCategory,
     searchTerm: searchTerm
-  })));
+  })), viewMoreItem && (0, _react2.jsx)(_ViewMore.ViewMore, {
+    item: viewMoreItem,
+    focus: focusOnViewMore
+  }));
 }
 function DesktopBrowser(_ref2) {
   var showCategories = _ref2.showCategories,

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

@@ -23,6 +23,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  *      selectedItemIndex,
  *      focusedItemIndex,
  *      focusOnSearch,
+ *      focusOnViewMore,
  *      setFocusedItemIndex,
  *      onKeyDown
  *    } = useSelectAndFocusOnArrowNavigation(list.length - 1, 1);
@@ -62,7 +63,8 @@ var reducer = function reducer(state, action) {
     case ACTIONS.FOCUS_SEARCH:
       return _objectSpread(_objectSpread({}, state), {}, {
         focusedItemIndex: undefined,
-        focusOnSearch: true
+        focusOnSearch: true,
+        focusOnViewMore: false
       });
     case ACTIONS.MOVE:
       return moveReducer(state, action);
@@ -70,55 +72,123 @@ var reducer = function reducer(state, action) {
   return state;
 };
 var moveReducer = function moveReducer(state, action) {
-  var 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) {
+  var listSize = state.listSize,
+    canFocusViewMore = state.canFocusViewMore;
+  if (state.focusOnSearch) {
+    // up arrow
+    if (action.payload.positions && action.payload.positions <= -1) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: !!canFocusViewMore,
+        focusedItemIndex: canFocusViewMore ? undefined : listSize,
+        selectedItemIndex: canFocusViewMore ? undefined : listSize
+      });
+    } else {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: 0,
+        selectedItemIndex: 0
+      });
+    }
+  }
+  if (state.focusOnViewMore) {
+    // down arrow
+    if (action.payload.positions === 1) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: true,
+        focusOnViewMore: false,
+        focusedItemIndex: undefined,
+        // if search is focused then select first item.
+        selectedItemIndex: 0
+      });
+    } else {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: listSize,
+        selectedItemIndex: listSize
+      });
+    }
+  }
+  var newIndex = state.selectedItemIndex ? state.selectedItemIndex + action.payload.positions : action.payload.positions;
+  var 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.
+    var isLastItemFocused = newIndex > listSize;
+    var focusOnSearch = isLastItemFocused && !canFocusViewMore;
+    var focusOnViewMore = isLastItemFocused && !!canFocusViewMore;
+    // if search is focused, then select first item.
+    // otherwise if view more is focused then select item should be undefined.
+    var selectedItemIndex = focusOnSearch ? 0 : focusOnViewMore ? undefined : safeIndex;
     return _objectSpread(_objectSpread({}, state), {}, {
-      focusOnSearch: true,
-      focusedItemIndex: undefined
+      focusOnSearch: focusOnSearch,
+      focusOnViewMore: focusOnViewMore,
+      selectedItemIndex: 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.
+    var isFirstRowFocused = newIndex < 0;
+    // if focus goes to search then kept last selected item in first row.
+    var _selectedItemIndex = isFirstRowFocused ? state.selectedItemIndex : safeIndex;
     return _objectSpread(_objectSpread({}, 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: _selectedItemIndex
     });
   }
-  var safeIndex = ensureSafeIndex(newIndex, state.listSize);
   return _objectSpread(_objectSpread({}, state), {}, {
-    focusedItemIndex: safeIndex,
-    selectedItemIndex: safeIndex
+    focusOnSearch: false,
+    focusOnViewMore: false,
+    selectedItemIndex: safeIndex,
+    focusedItemIndex: safeIndex
   });
 };
 var initialState = {
   focusOnSearch: true,
+  focusOnViewMore: false,
   selectedItemIndex: 0,
   focusedItemIndex: undefined,
   listSize: 0
 };
-var getInitialState = function getInitialState(listSize) {
+var getInitialState = function getInitialState(listSize, canFocusViewMore) {
   return function (initialState) {
     return _objectSpread(_objectSpread({}, initialState), {}, {
-      listSize: listSize
+      listSize: listSize,
+      canFocusViewMore: canFocusViewMore
     });
   };
 };
-function useSelectAndFocusOnArrowNavigation(listSize, step) {
-  var _useReducer = (0, _react.useReducer)(reducer, initialState, getInitialState(listSize)),
+function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
+  var _useReducer = (0, _react.useReducer)(reducer, initialState, getInitialState(listSize, canFocusViewMore)),
     _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
+  (0, _react.useEffect)(function () {
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: {
+        canFocusViewMore: canFocusViewMore
+      }
+    });
+  }, [canFocusViewMore]);
   var selectedItemIndex = state.selectedItemIndex,
     focusedItemIndex = state.focusedItemIndex,
-    focusOnSearch = state.focusOnSearch;
+    focusOnSearch = state.focusOnSearch,
+    focusOnViewMore = state.focusOnViewMore;
   var reset = (0, _react.useCallback)(function (listSize) {
     var payload = _objectSpread(_objectSpread({}, initialState), {}, {
       listSize: listSize
@@ -132,7 +202,8 @@ function useSelectAndFocusOnArrowNavigation(listSize, step) {
     var payload = {
       focusedItemIndex: index,
       selectedItemIndex: index,
-      focusOnSearch: false
+      focusOnSearch: false,
+      focusOnViewMore: false
     };
     dispatch({
       type: ACTIONS.UPDATE_STATE,
@@ -168,7 +239,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step) {
   var onKeyDown = (0, _react.useCallback)(function (e) {
     var avoidKeysWhileSearching = ['/',
     // While already focused on search bar, let users type in.
-    'ArrowRight', 'ArrowLeft', 'ArrowUp'];
+    'ArrowRight', 'ArrowLeft'];
     if (focusOnSearch && avoidKeysWhileSearching.includes(e.key)) {
       return;
     }
@@ -195,6 +266,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step) {
     selectedItemIndex: selectedItemIndex,
     onKeyDown: onKeyDown,
     focusOnSearch: focusOnSearch,
+    focusOnViewMore: focusOnViewMore,
     setFocusOnSearch: setFocusOnSearch,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: removeFocusFromSearchAndSetOnItem

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "185.2.5";
+var version = "185.2.8";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

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

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

@@ -6,14 +6,14 @@ 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';
 const headingPluginOptions = ({
   formatMessage
-}, isAllowed) => {
+}, isAllowed, editorAnalyticsApi) => {
   if (!isAllowed) {
     return [];
   }
@@ -38,7 +38,7 @@ const headingPluginOptions = ({
         const tr = insert(state.schema.nodes.heading.createChecked({
           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,
@@ -47,14 +47,15 @@ const headingPluginOptions = ({
             inputMethod: INPUT_METHOD.QUICK_INSERT,
             newHeadingLevel: level
           }
-        });
+        })(tr);
+        return tr;
       }
     };
   });
 };
 const blockquotePluginOptions = ({
   formatMessage
-}, isAllowed) => {
+}, isAllowed, editorAnalyticsApi) => {
   if (!isAllowed) {
     return [];
   }
@@ -67,7 +68,7 @@ const blockquotePluginOptions = ({
     icon: () => /*#__PURE__*/React.createElement(IconQuote, null),
     action(insert, state) {
       const 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,
@@ -75,11 +76,12 @@ const blockquotePluginOptions = ({
         attributes: {
           inputMethod: INPUT_METHOD.QUICK_INSERT
         }
-      });
+      })(tr);
+      return tr;
     }
   }];
 };
-const blockTypePlugin = options => ({
+const blockTypePlugin = (options, api) => ({
   name: 'blockType',
   nodes() {
     const nodes = [{
@@ -157,8 +159,9 @@ const blockTypePlugin = options => ({
   },
   pluginsOptions: {
     quickInsert: intl => {
+      var _api$dependencies$ana, _api$dependencies$ana2;
       const exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
-      return [...blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1), ...headingPluginOptions(intl, exclude.indexOf('heading') === -1)];
+      return [...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), ...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/es2019/ui/ElementBrowser/ElementBrowser.js

@@ -85,7 +85,8 @@ export default class ElementBrowser extends PureComponent {
       showSearch,
       showCategories,
       mode,
-      emptyStateHandler
+      emptyStateHandler,
+      viewMoreItem
     } = this.props;
     const {
       categories,
@@ -105,7 +106,8 @@ export default class ElementBrowser extends PureComponent {
       showCategories: showCategories,
       mode: mode,
       searchTerm: searchTerm,
-      emptyStateHandler: emptyStateHandler
+      emptyStateHandler: emptyStateHandler,
+      viewMoreItem: viewMoreItem
     });
   }
 }