@atlaskit/editor-core 167.0.3 → 169.1.0

package/dist/cjs/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarDropdown = ToolbarDropdown;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+
+var _bulletList = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/bullet-list"));
+
+var _keymaps = require("../../../keymaps");
+
+var _DropdownMenu = _interopRequireDefault(require("../../../ui/DropdownMenu"));
+
+var _ToolbarButton = _interopRequireDefault(require("../../../ui/ToolbarButton"));
+
+var _styles = require("../../../ui/styles");
+
+var _messages = require("../../list/messages");
+
+var _messages2 = require("../../indentation/messages");
+
+/** @jsx jsx */
+function ToolbarDropdown(props) {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+      formatMessage = _useIntl.formatMessage;
+
+  var disabled = props.disabled,
+      isReducedSpacing = props.isReducedSpacing,
+      bulletListActive = props.bulletListActive,
+      orderedListActive = props.orderedListActive,
+      popupsMountPoint = props.popupsMountPoint,
+      popupsBoundariesElement = props.popupsBoundariesElement,
+      popupsScrollableElement = props.popupsScrollableElement,
+      onItemActivated = props.onItemActivated;
+
+  var _React$useState = _react2.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      isDropdownOpen = _React$useState2[0],
+      setIsDropdownOpen = _React$useState2[1];
+
+  var labelLists = formatMessage(_messages.messages.lists);
+
+  var onOpenChange = function onOpenChange(attrs) {
+    setIsDropdownOpen(attrs.isDropdownOpen);
+  };
+
+  var handleTriggerClick = function handleTriggerClick() {
+    onOpenChange({
+      isDropdownOpen: !isDropdownOpen
+    });
+  };
+
+  var items = useItems(props);
+
+  var handleOnItemActivated = function handleOnItemActivated(_ref) {
+    var item = _ref.item;
+    setIsDropdownOpen(false);
+    return onItemActivated({
+      editorView: props.editorView,
+      buttonName: item.value.name
+    });
+  };
+
+  return (0, _react.jsx)("span", {
+    css: _styles.wrapperStyle
+  }, (0, _react.jsx)(_DropdownMenu.default, {
+    items: items,
+    onItemActivated: handleOnItemActivated,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen,
+    onOpenChange: onOpenChange,
+    fitHeight: 188,
+    fitWidth: 175,
+    shouldUseDefaultRole: true
+  }, (0, _react.jsx)(_ToolbarButton.default, {
+    spacing: isReducedSpacing ? 'none' : 'default',
+    selected: bulletListActive || orderedListActive,
+    "aria-expanded": isDropdownOpen,
+    "aria-haspopup": true,
+    "aria-label": labelLists,
+    disabled: disabled,
+    onClick: handleTriggerClick,
+    title: labelLists,
+    iconBefore: (0, _react.jsx)("span", {
+      css: _styles.wrapperStyle
+    }, (0, _react.jsx)(_bulletList.default, {
+      label: labelLists
+    }), (0, _react.jsx)("span", {
+      css: _styles.expandIconWrapperStyle
+    }, (0, _react.jsx)(_chevronDown.default, {
+      label: ""
+    })))
+  })), (0, _react.jsx)("span", {
+    css: _styles.separatorStyles
+  }));
+}
+
+function useItems(props) {
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+      formatMessage = _useIntl2.formatMessage;
+
+  var labelUnorderedList = formatMessage(_messages.messages.unorderedList);
+  var labelOrderedList = formatMessage(_messages.messages.orderedList);
+  var items = [{
+    key: 'unorderedList',
+    content: labelUnorderedList,
+    value: {
+      name: 'bullet_list'
+    },
+    isDisabled: props.bulletListDisabled,
+    isActive: Boolean(props.bulletListActive),
+    elemAfter: (0, _react.jsx)("div", {
+      css: _styles.shortcutStyle
+    }, (0, _keymaps.tooltip)(_keymaps.toggleBulletList))
+  }, {
+    key: 'orderedList',
+    content: labelOrderedList,
+    value: {
+      name: 'ordered_list'
+    },
+    isDisabled: props.orderedListDisabled,
+    isActive: Boolean(props.orderedListActive),
+    elemAfter: (0, _react.jsx)("div", {
+      css: _styles.shortcutStyle
+    }, (0, _keymaps.tooltip)(_keymaps.toggleOrderedList))
+  }];
+
+  if (props.showIndentationButtons) {
+    var labelIndent = formatMessage(_messages2.messages.indent);
+    var labelOutdent = formatMessage(_messages2.messages.outdent);
+    items.push({
+      key: 'indent',
+      content: labelIndent,
+      value: {
+        name: 'indent'
+      },
+      isDisabled: true,
+      isActive: false,
+      elemAfter: (0, _react.jsx)("div", {
+        css: _styles.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.indent))
+    }, {
+      key: 'outdent',
+      content: labelOutdent,
+      value: {
+        name: 'outdent'
+      },
+      isDisabled: true,
+      isActive: false,
+      elemAfter: (0, _react.jsx)("div", {
+        css: _styles.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.outdent))
+    });
+  }
+
+  return [{
+    items: items
+  }];
+}

package/dist/cjs/plugins/toolbar-lists-indentation/ui/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ToolbarListsIndentation;
+
+var _react = require("@emotion/react");
+
+var _onItemActivated = require("./onItemActivated");
+
+var _ToolbarDropdown = require("./ToolbarDropdown");
+
+var _Toolbar = require("./Toolbar");
+
+/** @jsx jsx */
+function ToolbarListsIndentation(props) {
+  var disabled = props.disabled,
+      isSmall = props.isSmall,
+      isReducedSpacing = props.isReducedSpacing,
+      bulletListActive = props.bulletListActive,
+      bulletListDisabled = props.bulletListDisabled,
+      orderedListActive = props.orderedListActive,
+      orderedListDisabled = props.orderedListDisabled,
+      showIndentationButtons = props.showIndentationButtons,
+      popupsMountPoint = props.popupsMountPoint,
+      popupsBoundariesElement = props.popupsBoundariesElement,
+      popupsScrollableElement = props.popupsScrollableElement;
+
+  if (isSmall) {
+    return (0, _react.jsx)(_ToolbarDropdown.ToolbarDropdown, {
+      editorView: props.editorView,
+      isReducedSpacing: isReducedSpacing,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      bulletListActive: bulletListActive,
+      bulletListDisabled: bulletListDisabled,
+      showIndentationButtons: showIndentationButtons,
+      orderedListActive: orderedListActive,
+      orderedListDisabled: orderedListDisabled,
+      disabled: disabled,
+      onItemActivated: _onItemActivated.onItemActivated
+    });
+  }
+
+  return (0, _react.jsx)(_Toolbar.Toolbar, {
+    editorView: props.editorView,
+    isReducedSpacing: isReducedSpacing,
+    bulletListActive: bulletListActive,
+    bulletListDisabled: bulletListDisabled,
+    showIndentationButtons: showIndentationButtons,
+    orderedListActive: orderedListActive,
+    orderedListDisabled: orderedListDisabled,
+    disabled: disabled,
+    onItemActivated: _onItemActivated.onItemActivated
+  });
+}

package/dist/cjs/plugins/toolbar-lists-indentation/ui/onItemActivated.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onItemActivated = onItemActivated;
+
+var _commands = require("../../list/commands");
+
+var _analytics = require("../../analytics");
+
+function onItemActivated(_ref) {
+  var buttonName = _ref.buttonName,
+      editorView = _ref.editorView;
+
+  switch (buttonName) {
+    case 'bullet_list':
+      (0, _commands.toggleBulletList)(editorView, _analytics.INPUT_METHOD.TOOLBAR);
+      break;
+
+    case 'ordered_list':
+      (0, _commands.toggleOrderedList)(editorView, _analytics.INPUT_METHOD.TOOLBAR);
+      break;
+
+    case 'indent':
+      editorView.someProp('handleKeyDown', function (handleKeyDown) {
+        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
+          bubbles: true,
+          cancelable: true,
+          key: 'Tab',
+          code: 'Tab'
+        }));
+      });
+      break;
+
+    case 'outdent':
+      editorView.someProp('handleKeyDown', function (handleKeyDown) {
+        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
+          bubbles: true,
+          cancelable: true,
+          shiftKey: true,
+          key: 'Tab',
+          code: 'Tab'
+        }));
+      });
+      break;
+  }
+}

package/dist/cjs/plugins/type-ahead/ui/TypeAheadList.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _item = require("@atlaskit/item");
+var _menu = require("@atlaskit/menu");
 
 var _TypeAheadListItem = require("./TypeAheadListItem");
 
@@ -128,12 +128,11 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
 
   var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
   var height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, fitHeight);
-  return (0, _react2.jsx)(_item.ItemGroup, {
+  return (0, _react2.jsx)(_menu.MenuGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(_messages.typeAheadListMessages.typeAheadResultLabel),
-    "aria-relevant": "additions removals",
-    theme: _TypeAheadListItem.itemTheme
+    "aria-relevant": "additions removals"
   }, (0, _react2.jsx)(_useResizeObserver.ResizeObserverProvider, null, (0, _react2.jsx)(_DynamicHeightListItem.UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
   }, (0, _react2.jsx)(_DynamicHeightListItem.ListItemActionsContext.Provider, {
@@ -152,7 +151,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
     width: LIST_WIDTH,
     height: height,
     overscanCount: 3,
-    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n                    // temporary solution before we migrated off dst/item\n                    & span[class^='ItemParts__Before'] {\n                      margin-right: 12px;\n                    }\n                  "])))
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n                    button {\n                      padding: 12px 12px 11px;\n\n                      span:last-child span:last-child {\n                        white-space: normal;\n                      }\n                    }\n                  "])))
   }, _DynamicHeightListItem.DynamicHeightListItem))))));
 });
 

package/dist/cjs/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -7,12 +7,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.itemTheme = exports.itemIcon = exports.TypeAheadListItem = exports.ITEM_PADDING = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
+exports.itemIcon = exports.TypeAheadListItem = exports.ITEM_PADDING = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
@@ -23,7 +21,7 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _item = _interopRequireWildcard(require("@atlaskit/item"));
+var _menu = require("@atlaskit/menu");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -47,48 +45,17 @@ var ICON_WIDTH = 40;
 exports.ICON_WIDTH = ICON_WIDTH;
 var ITEM_PADDING = 12;
 exports.ITEM_PADDING = ITEM_PADDING;
-var itemTheme = (0, _defineProperty2.default)({}, _item.itemThemeNamespace, {
-  padding: {
-    default: {
-      bottom: ITEM_PADDING,
-      left: ITEM_PADDING,
-      right: ITEM_PADDING,
-      top: ITEM_PADDING
-    }
-  },
-  beforeItemSpacing: {
-    default: function _default() {
-      return ITEM_PADDING;
-    }
-  },
-  borderRadius: function borderRadius() {
-    return 0;
-  },
-  hover: {
-    // background: colors.transparent, transparent is not a thing
-    text: _colors.text,
-    secondaryText: (0, _tokens.token)('color.text.subtlest', _colors.N200)
-  },
-  selected: {
-    background: (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20),
-      dark: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.DN70)
-    }),
-    text: (0, _components.themed)({
-      light: (0, _tokens.token)('color.text', _colors.N800),
-      dark: (0, _tokens.token)('color.text', _colors.DN600)
-    }),
-    secondaryText: (0, _components.themed)({
-      light: (0, _tokens.token)('color.text.subtlest', _colors.N200),
-      dark: (0, _tokens.token)('color.text.subtlest', _colors.DN300)
-    })
-  }
-});
-exports.itemTheme = itemTheme;
 var itemIcon = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, (0, _tokens.token)('color.border', 'rgba(223, 225, 229, 0.5)'), (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
 exports.itemIcon = itemIcon;
 var itemBody = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
-var itemText = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+
+var itemText = function itemText(theme) {
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: initial;\n  color: ", ";\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), (0, _components.themed)({
+    light: (0, _tokens.token)('color.text', _colors.N800),
+    dark: (0, _tokens.token)('color.text', _colors.DN600)
+  })(theme), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+};
+
 var itemAfter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
 var hidden = {
   overflow: 'hidden'
@@ -165,28 +132,27 @@ var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     return customItem;
   }
 
-  return (0, _react2.jsx)(_item.default, {
+  return (0, _react2.jsx)("span", {
+    onMouseMove: onMouseMove
+  }, (0, _react2.jsx)(_menu.ButtonItem, {
     onClick: insertSelectedItem,
-    onMouseMove: onMouseMove,
-    elemBefore: elementIcon,
+    iconBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
     "aria-label": item.title,
     role: "option",
-    theme: itemTheme
+    description: item.description
   }, (0, _react2.jsx)("div", {
     css: itemBody
   }, (0, _react2.jsx)("div", {
     css: itemText
   }, (0, _react2.jsx)("div", {
     className: "item-title"
-  }, item.title), item.description && (0, _react2.jsx)("div", {
-    className: "item-description"
-  }, item.description)), (0, _react2.jsx)("div", {
+  }, item.title)), (0, _react2.jsx)("div", {
     css: itemAfter
   }, item.keyshortcut && (0, _react2.jsx)("div", {
     css: _styles.shortcutStyle
-  }, item.keyshortcut))));
+  }, item.keyshortcut)))));
 };
 
 exports.TypeAheadListItem = TypeAheadListItem;

package/dist/cjs/ui/ConfigPanel/ConfigPanel.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

package/dist/cjs/ui/ConfigPanel/Fields/CustomSelect.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

package/dist/cjs/ui/ConfigPanel/Fields/UserSelect.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = UserSelect;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

package/dist/cjs/ui/ConfigPanel/transformers.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.serialize = exports.findDuplicateFields = exports.deserialize = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,17 +11,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
-var _item = _interopRequireWildcard(require("@atlaskit/item"));
+var _menu = require("@atlaskit/menu");
 
 var _theme = require("@atlaskit/theme");
 
@@ -51,11 +47,7 @@ var _tokens = require("@atlaskit/tokens");
 
 var _excluded = ["children"];
 
-var _templateObject, _templateObject2, _templateObject3;
-
-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 _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var InsertMenu = function InsertMenu(_ref) {
   var editorView = _ref.editorView,
@@ -145,26 +137,17 @@ var InsertMenu = function InsertMenu(_ref) {
 
 var ViewMore = function ViewMore(_ref3) {
   var item = _ref3.item;
-  var onKeyPress = (0, _react.useCallback)(function (e) {
-    var SPACE_KEY = 32;
-    var ENTER_KEY = 13;
-
-    if (e.which === ENTER_KEY || e.which === SPACE_KEY) {
-      // @ts-ignore We manually transformed "view more" to a quickInsert item
-      // action would always toggle the ModalElementBrowser
-      item.action();
-    }
-  }, [item]);
-  return (0, _react2.jsx)(_item.default, {
+  return (0, _react2.jsx)(_menu.Section, {
+    hasSeparator: true
+  }, (0, _react2.jsx)(_menu.ButtonItem, {
     onClick: item.action,
-    elemBefore: (0, _react2.jsx)("div", {
+    iconBefore: (0, _react2.jsx)("div", {
       css: itemBefore
     }, item.icon()),
     "aria-describedby": item.title,
     "data-testid": "view-more-elements-item",
-    onKeyPress: onKeyPress,
-    theme: viewMoreItemTheme
-  }, item.title);
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          padding: 0px 12px;\n        "])))
+  }, item.title));
 };
 
 var getSvgIconForItem = function getSvgIconForItem(_ref4) {
@@ -197,7 +180,7 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref5) {
 };
 
 var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
-  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({
+  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({
     itemCount: itemCount
   }), (0, _components.themed)({
     light: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
@@ -205,18 +188,8 @@ var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
   })(theme), (0, _theme.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "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)(_templateObject2 || (_templateObject2 = (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: ", "px;\n"])), (0, _theme.gridSize)() / 2);
-var PADDING_LEFT = 14;
-var HEIGHT = 40;
-var viewMoreItemTheme = (0, _defineProperty2.default)({}, _item.itemThemeNamespace, {
-  padding: {
-    default: {
-      left: PADDING_LEFT
-    }
-  },
-  height: HEIGHT
-});
-var flexWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
+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: ", "px;\n"])), (0, _theme.gridSize)() / 2);
+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 FlexWrapper = function FlexWrapper(props) {
   var children = props.children,