@atlaskit/editor-core 167.0.3 → 169.1.0

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

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { onItemActivated } from './onItemActivated';
+import { ToolbarDropdown } from './ToolbarDropdown';
+import { Toolbar } from './Toolbar';
+export default 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 jsx(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
+    });
+  }
+
+  return jsx(Toolbar, {
+    editorView: props.editorView,
+    isReducedSpacing: isReducedSpacing,
+    bulletListActive: bulletListActive,
+    bulletListDisabled: bulletListDisabled,
+    showIndentationButtons: showIndentationButtons,
+    orderedListActive: orderedListActive,
+    orderedListDisabled: orderedListDisabled,
+    disabled: disabled,
+    onItemActivated: onItemActivated
+  });
+}

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

@@ -0,0 +1,39 @@
+import { toggleBulletList, toggleOrderedList } from '../../list/commands';
+import { INPUT_METHOD } from '../../analytics';
+export function onItemActivated(_ref) {
+  var buttonName = _ref.buttonName,
+      editorView = _ref.editorView;
+
+  switch (buttonName) {
+    case 'bullet_list':
+      toggleBulletList(editorView, INPUT_METHOD.TOOLBAR);
+      break;
+
+    case 'ordered_list':
+      toggleOrderedList(editorView, 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/esm/plugins/type-ahead/ui/TypeAheadList.js

@@ -4,10 +4,9 @@ var _templateObject;
 
 /** @jsx jsx */
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { jsx, css } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-import { ItemGroup } from '@atlaskit/item';
-import { ICON_HEIGHT, itemTheme, ITEM_PADDING } from './TypeAheadListItem';
+import { jsx, css } from '@emotion/react';
+import { MenuGroup } from '@atlaskit/menu';
+import { ICON_HEIGHT, ITEM_PADDING } from './TypeAheadListItem';
 import { VariableSizeList as List } from 'react-window';
 import { ResizeObserverProvider } from './hooks/use-resize-observer';
 import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
@@ -104,12 +103,11 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
 
   var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
   var height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, fitHeight);
-  return jsx(ItemGroup, {
+  return jsx(MenuGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
-    "aria-relevant": "additions removals",
-    theme: itemTheme
+    "aria-relevant": "additions removals"
   }, jsx(ResizeObserverProvider, null, jsx(UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
   }, jsx(ListItemActionsContext.Provider, {
@@ -128,7 +126,7 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
     width: LIST_WIDTH,
     height: height,
     overscanCount: 3,
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    // temporary solution before we migrated off dst/item\n                    & span[class^='ItemParts__Before'] {\n                      margin-right: 12px;\n                    }\n                  "])))
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    button {\n                      padding: 12px 12px 11px;\n\n                      span:last-child span:last-child {\n                        white-space: normal;\n                      }\n                    }\n                  "])))
   }, DynamicHeightListItem))))));
 });
 export var TypeAheadList = injectIntl(TypeAheadListComponent);

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

@@ -1,16 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
 import { css, jsx } from '@emotion/react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { DN600, N200, N800 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-import Item, { itemThemeNamespace } from '@atlaskit/item';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { ButtonItem } from '@atlaskit/menu';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import IconFallback from '../../quick-insert/assets/fallback';
 import { shortcutStyle } from '../../../ui/styles';
@@ -19,46 +17,16 @@ import { token } from '@atlaskit/tokens';
 export var ICON_HEIGHT = 40;
 export var ICON_WIDTH = 40;
 export var ITEM_PADDING = 12;
-export var itemTheme = _defineProperty({}, 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: colorsText,
-    secondaryText: token('color.text.subtlest', N200)
-  },
-  selected: {
-    background: themed({
-      light: token('color.background.neutral.subtle.hovered', N20),
-      dark: token('color.background.neutral.subtle.hovered', DN70)
-    }),
-    text: themed({
-      light: token('color.text', N800),
-      dark: token('color.text', DN600)
-    }),
-    secondaryText: themed({
-      light: token('color.text.subtlest', N200),
-      dark: token('color.text.subtlest', DN300)
-    })
-  }
-});
 export var itemIcon = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, token('color.border', 'rgba(223, 225, 229, 0.5)'), borderRadius(), ICON_WIDTH, ICON_HEIGHT);
 var itemBody = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
-var itemText = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), relativeFontSizeToBase16(11.67), token('color.text.subtlest', N200));
+
+var itemText = function itemText(theme) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: initial;\n  color: ", ";\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), themed({
+    light: token('color.text', N800),
+    dark: token('color.text', DN600)
+  })(theme), relativeFontSizeToBase16(11.67), token('color.text.subtlest', N200));
+};
+
 var itemAfter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
 var hidden = {
   overflow: 'hidden'
@@ -134,26 +102,25 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     return customItem;
   }
 
-  return jsx(Item, {
+  return jsx("span", {
+    onMouseMove: onMouseMove
+  }, jsx(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
   }, jsx("div", {
     css: itemBody
   }, jsx("div", {
     css: itemText
   }, jsx("div", {
     className: "item-title"
-  }, item.title), item.description && jsx("div", {
-    className: "item-description"
-  }, item.description)), jsx("div", {
+  }, item.title)), jsx("div", {
     css: itemAfter
   }, item.keyshortcut && jsx("div", {
     css: shortcutStyle
-  }, item.keyshortcut))));
+  }, item.keyshortcut)))));
 };

package/dist/esm/ui/ConfigPanel/ConfigPanel.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -8,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../messages';

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

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["value"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 

package/dist/esm/ui/ConfigPanel/FormErrorBoundary.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -7,6 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

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

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
@@ -11,6 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { isFieldset, isDateRange, isTabGroup, isTabField, isExpand, getFieldSerializer, getFieldDeserializer } from '@atlaskit/editor-common/extensions';
 import { getNameFromDuplicateField, isDuplicateField } from './utils';
 

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

@@ -1,17 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children"];
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import Item, { itemThemeNamespace } from '@atlaskit/item'; // AFP-2532 TODO: Fix automatic suppressions below
+import { Section, ButtonItem } from '@atlaskit/menu'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { borderRadius, gridSize } from '@atlaskit/theme';
@@ -115,26 +113,17 @@ var InsertMenu = function InsertMenu(_ref) {
 
 var ViewMore = function ViewMore(_ref3) {
   var item = _ref3.item;
-  var onKeyPress = 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 jsx(Item, {
+  return jsx(Section, {
+    hasSeparator: true
+  }, jsx(ButtonItem, {
     onClick: item.action,
-    elemBefore: jsx("div", {
+    iconBefore: jsx("div", {
       css: itemBefore
     }, item.icon()),
     "aria-describedby": item.title,
     "data-testid": "view-more-elements-item",
-    onKeyPress: onKeyPress,
-    theme: viewMoreItemTheme
-  }, item.title);
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          padding: 0px 12px;\n        "])))
+  }, item.title));
 };
 
 var getSvgIconForItem = function getSvgIconForItem(_ref4) {
@@ -167,7 +156,7 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref5) {
 };
 
 var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
-  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({
+  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({
     itemCount: itemCount
   }), themed({
     light: token('elevation.surface.overlay', N0),
@@ -175,20 +164,8 @@ var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
   })(theme), borderRadius(), token('elevation.shadow.overlay', "0 0 0 1px ".concat(N30A, ",\n    0 2px 1px ").concat(N30A, ",\n    0 0 20px -6px ").concat(N60A)));
 };
 
-var itemBefore = css(_templateObject2 || (_templateObject2 = _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: ", "px;\n"])), gridSize() / 2);
-var PADDING_LEFT = 14;
-var HEIGHT = 40;
-
-var viewMoreItemTheme = _defineProperty({}, itemThemeNamespace, {
-  padding: {
-    default: {
-      left: PADDING_LEFT
-    }
-  },
-  height: HEIGHT
-});
-
-var flexWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
+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: ", "px;\n"])), gridSize() / 2);
+var flexWrapperStyles = css(_templateObject4 || (_templateObject4 = _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,

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

@@ -1,5 +1,4 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
@@ -7,19 +6,13 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "searchTerm"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /** @jsx jsx */
 import React, { Fragment, memo, useCallback, useEffect, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
-import memoizeOne from 'memoize-one';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { Collection } from 'react-virtualized/dist/commonjs/Collection';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import Item from '@atlaskit/item';
-import { B100, N20, N200 } from '@atlaskit/theme/colors';
+import { ButtonItem } from '@atlaskit/menu';
+import { B100, N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
@@ -28,7 +21,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../..
 import IconFallback from '../../../../plugins/quick-insert/assets/fallback';
 import { itemIcon } from '../../../../plugins/type-ahead/ui/TypeAheadListItem';
 import { shortcutStyle } from '../../../styles';
-import { ELEMENT_ITEM_HEIGHT, ELEMENT_LIST_PADDING, GRID_SIZE, SCROLLBAR_THUMB_COLOR, SCROLLBAR_TRACK_COLOR, SCROLLBAR_WIDTH } from '../../constants';
+import { ELEMENT_LIST_PADDING, SCROLLBAR_THUMB_COLOR, SCROLLBAR_TRACK_COLOR, SCROLLBAR_WIDTH } from '../../constants';
 import useContainerWidth from '../../hooks/use-container-width';
 import useFocus from '../../hooks/use-focus';
 import { Modes } from '../../types';
@@ -128,44 +121,9 @@ function ElementList(_ref) {
   }))));
 }
 
-var getStyles = memoizeOne(function (mode) {
-  return _objectSpread(_objectSpread({}, mode === Modes.full && {
-    '-ms-flex': 'auto',
-    position: 'relative',
-    boxSizing: 'border-box'
-  }), {}, {
-    height: {
-      default: ELEMENT_ITEM_HEIGHT
-    },
-    padding: {
-      default: {
-        top: GRID_SIZE * 1.5,
-        right: GRID_SIZE * 1.5,
-        bottom: GRID_SIZE * 1.5,
-        left: GRID_SIZE * 1.5
-      }
-    },
-    borderRadius: GRID_SIZE / 2,
-    // TODO: apply a different background for when a selected item is hovered.
-    // Not possible due to current implementation of @atlaskit/item component.
-    selected: {
-      background: token('color.background.selected', N20)
-    },
-    hover: {
-      background: token('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)')
-    },
-    active: {
-      background: token('color.background.neutral.subtle.pressed', 'rgb(244, 245, 247)')
-    },
-    beforeItemSpacing: {
-      default: GRID_SIZE * 1.5
-    }
-  });
-});
 var MemoizedElementItem = /*#__PURE__*/memo(ElementItem);
 MemoizedElementItem.displayName = 'MemoizedElementItem';
-
-function ElementItem(_ref4) {
+export function ElementItem(_ref4) {
   var inlineMode = _ref4.inlineMode,
       selected = _ref4.selected,
       item = _ref4.item,
@@ -174,11 +132,6 @@ function ElementItem(_ref4) {
       focus = _ref4.focus,
       setFocusedItemIndex = _ref4.setFocusedItemIndex;
   var ref = useFocus(focus);
-  var theme = useMemo(function () {
-    return {
-      '@atlaskit-shared-theme/item': getStyles(inlineMode ? 'inline' : 'full')
-    };
-  }, [inlineMode]);
   /**
    * Note: props.onSelectItem(item) is not called here as the StatelessElementBrowser's
    * useEffect would trigger it on selectedItemIndex change. (Line 106-110)
@@ -190,33 +143,29 @@ function ElementItem(_ref4) {
     e.stopPropagation();
     setFocusedItemIndex(index);
 
-    if (inlineMode) {
-      onInsertItem(item);
-    }
-  }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
-  var onDoubleClick = useCallback(function (e) {
-    if (inlineMode) {
-      return;
-    }
+    switch (e.nativeEvent.detail) {
+      case 0:
+        onInsertItem(item);
+        break;
 
-    e.preventDefault();
-    e.stopPropagation();
-    setFocusedItemIndex(index);
-    onInsertItem(item);
-  }, [inlineMode, setFocusedItemIndex, index, onInsertItem, item]); // After tabbing we wanna select the item on enter/space key press from item level,
-  // preventing the default top level component behavior.
+      case 1:
+        if (inlineMode) {
+          onInsertItem(item);
+        }
+
+        break;
 
-  var onKeyPress = useCallback(function (e) {
-    var SPACE_KEY = 32;
-    var ENTER_KEY = 13;
+      case 2:
+        if (!inlineMode) {
+          onInsertItem(item);
+        }
 
-    if (e.which === ENTER_KEY || e.which === SPACE_KEY) {
-      e.preventDefault();
-      e.stopPropagation();
-      setFocusedItemIndex(index);
-      onInsertItem(item);
+        break;
+
+      default:
+        return;
     }
-  }, [index, item, onInsertItem, setFocusedItemIndex]);
+  }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
   var icon = item.icon,
       title = item.title,
       description = item.description,
@@ -224,35 +173,28 @@ function ElementItem(_ref4) {
   return jsx(Tooltip, {
     content: description,
     testId: "element-item-tooltip-".concat(index)
-  }, jsx(Item, {
+  }, jsx(ButtonItem, {
     onClick: onClick,
-    onDoubleClick: onDoubleClick,
-    elemBefore: jsx(ElementBefore, {
+    iconBefore: jsx(ElementBefore, {
       icon: icon,
       title: title
     }),
     isSelected: selected,
     "aria-describedby": title,
-    innerRef: ref,
-    onKeyPress: onKeyPress,
-    "data-testid": "element-item-".concat(index),
-    tabIndex: 0,
-    style: inlineMode ? null : itemStyleOverrides,
-    theme: theme
+    ref: ref,
+    testId: "element-item-".concat(index)
   }, jsx(ItemContent, {
+    style: inlineMode ? null : itemStyleOverrides,
+    tabIndex: 0,
     title: title,
     description: description,
     keyshortcut: keyshortcut
   })));
 }
 /**
- * Some properties (specified in 'BaseItem' packages/design-system/item/src/styled/Item.js) cannot be changed with
- * ThemeProvider as they are of higher specificity.
- *
  * Inline mode should use the existing Align-items:center value.
  */
 
-
 var itemStyleOverrides = {
   alignItems: 'flex-start'
 };
@@ -285,8 +227,8 @@ var ItemContent = /*#__PURE__*/memo(function (_ref6) {
   }, description)));
 });
 var scrollbarStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ::-webkit-scrollbar {\n    width: ", "px;\n  }\n  ::-webkit-scrollbar-track-piece {\n    background: ", ";\n  }\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  /** Firefox **/\n  scrollbar-color: ", " ", ";\n\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n"])), SCROLLBAR_WIDTH, SCROLLBAR_TRACK_COLOR, SCROLLBAR_THUMB_COLOR, SCROLLBAR_THUMB_COLOR, SCROLLBAR_TRACK_COLOR);
-var elementItemsWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    ", ";\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: 4px;\n    }\n  }\n\n  // temporary solution before we migrated off dst/item\n  & span[class^='ItemParts__Before'] {\n    margin-right: 12px;\n  }\n"])), ELEMENT_LIST_PADDING, scrollbarStyle, ELEMENT_LIST_PADDING, token('color.border.focused', B100));
-var elementItemWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /**\n     * Since we are using \"Item\" component's content itself for description,\n     * the height of description overflows the parent container padding/margin.\n     * manually setting it to take 100% of parent.\n     */\n  span {\n    span:nth-of-type(2) {\n      max-height: 100%;\n    }\n  }\n"])));
+var elementItemsWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    ", ";\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: 4px;\n    }\n  }\n"])), ELEMENT_LIST_PADDING, scrollbarStyle, ELEMENT_LIST_PADDING, token('color.border.focused', B100));
+var elementItemWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  div {\n    button {\n      height: 75px;\n      align-items: flex-start;\n      padding: 12px 12px 11px;\n    }\n  }\n"])));
 var itemBody = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  width: 100%;\n\n  margin-top: -2px; // Fixes the Item Icon and text's alignment issue\n"])));
 /*
  * -webkit-line-clamp is also supported by firefox 🎉

package/dist/esm/ui/LinkSearch/index.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -7,6 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/ui/ToolbarFeedback/index.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -7,6 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 

package/dist/esm/utils/action.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { Selection } from 'prosemirror-state';
 import { pluginKey as extensionPluginKey } from '../plugins/extension/plugin-key';
 import { forceAutoSave } from '../plugins/extension/commands';