@atlaskit/editor-core 169.0.0 → 170.0.0

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/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/utils/clipboard.js

@@ -1,5 +1,6 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as clipboard from 'clipboard-polyfill';
 export function checkClipboardTypes(type, item) {
   var isDOMStringList = function isDOMStringList(t) {
     return !t.indexOf && !!t.contains;
@@ -91,4 +92,58 @@ export var copyToClipboard = /*#__PURE__*/function () {
   return function copyToClipboard(_x) {
     return _ref2.apply(this, arguments);
   };
+}();
+export var copyHTMLToClipboard = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(htmlToCopy) {
+    var blobInput, data, Clipboard, dt;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(isClipboardApiSupported() && typeof ClipboardItem !== 'undefined')) {
+              _context2.next = 12;
+              break;
+            }
+
+            _context2.prev = 1;
+            blobInput = new Blob([htmlToCopy], {
+              type: 'text/html'
+            }); // @ts-ignore
+
+            data = [new ClipboardItem({
+              'text/html': blobInput
+            })]; // @ts-ignore
+
+            navigator.clipboard.write(data);
+            _context2.next = 10;
+            break;
+
+          case 7:
+            _context2.prev = 7;
+            _context2.t0 = _context2["catch"](1);
+            throw new Error('Clipboard api is not supported');
+
+          case 10:
+            _context2.next = 16;
+            break;
+
+          case 12:
+            // At the time of development, Firefox doesn't support ClipboardItem API
+            // Hence of use of this polyfill
+            Clipboard = clipboard;
+            dt = new Clipboard.DT();
+            dt.setData('text/html', htmlToCopy);
+            Clipboard.write(dt);
+
+          case 16:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[1, 7]]);
+  }));
+
+  return function copyHTMLToClipboard(_x2) {
+    return _ref3.apply(this, arguments);
+  };
 }();

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "169.0.0";
+export var version = "170.0.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

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

package/dist/types/plugins/analytics/types/toolbar-button.d.ts

@@ -13,7 +13,9 @@ export declare enum TOOLBAR_ACTION_SUBJECT_ID {
     TEXT_FORMATTING_STRONG = "strong",
     TEXT_FORMATTING_ITALIC = "italic",
     UNDO = "undo",
-    REDO = "redo"
+    REDO = "redo",
+    INDENT = "indent",
+    OUTDENT = "outdent"
 }
 declare type ToolbarButtonClickedAEP = UIAEP<ACTION.CLICKED, ACTION_SUBJECT.TOOLBAR_BUTTON, undefined, {}, undefined>;
 export declare type ToolbarEventPayload = ToolbarButtonClickedAEP;

package/dist/types/plugins/card/styles.d.ts

@@ -1 +1,2 @@
+export declare const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = "card-floating-toolbar--link-picker";
 export declare const smartCardStyles: import("@emotion/react").SerializedStyles;

package/dist/types/plugins/copy-button/commands.d.ts

@@ -0,0 +1,4 @@
+import { Command } from '../../types';
+import { NodeType } from 'prosemirror-model';
+export declare const copy: (nodeType: NodeType) => Command;
+export declare const resetCopiedState: (nodeType: NodeType, onMouseLeave?: Command | undefined) => Command;

package/dist/types/plugins/copy-button/index.d.ts

@@ -0,0 +1,3 @@
+import { EditorPlugin } from '../../types';
+declare const copyButtonPlugin: () => EditorPlugin;
+export default copyButtonPlugin;

package/dist/types/plugins/copy-button/pm-plugins/main.d.ts

@@ -0,0 +1,3 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare function copyButtonPlugin(): SafePlugin<any, any>;
+export default copyButtonPlugin;

package/dist/types/plugins/copy-button/pm-plugins/plugin-key.d.ts

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export declare const pluginKey: PluginKey<any, any>;

package/dist/types/plugins/copy-button/utils.d.ts

@@ -0,0 +1,7 @@
+import { NodeType } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import { IntlShape } from 'react-intl-next';
+import { Command } from '../../../src/types';
+import { FloatingToolbarItem } from '../floating-toolbar/types';
+export declare const getCopyButtonConfig: (state: EditorState, formatMessage: IntlShape['formatMessage'], nodeType: NodeType, onMouseEnter?: Command | undefined, onMouseLeave?: Command | undefined) => FloatingToolbarItem<Command>;
+export declare const showCopyButton: (state?: EditorState<any> | undefined) => import("prosemirror-state").Plugin<any, any> | undefined;

package/dist/types/plugins/indentation/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    indent: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    outdent: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/plugins/index.d.ts

@@ -17,6 +17,7 @@ export { default as insertBlockPlugin } from './insert-block';
 export { default as jiraIssuePlugin } from './jira-issue';
 export { default as layoutPlugin } from './layout';
 export { default as listPlugin } from './list';
+export { default as toolbarListsIndentationPlugin } from './toolbar-lists-indentation';
 export { default as macroPlugin } from './macro';
 export { default as maxContentSizePlugin } from './max-content-size';
 export { default as mediaPlugin } from './media';
@@ -66,3 +67,4 @@ export { default as avatarGroupPlugin } from './avatar-group';
 export { default as viewUpdateSubscriptionPlugin } from './view-update-subscription';
 export { default as beforePrimaryToolbarPlugin } from './before-primaryToolbar';
 export { default as codeBidiWarningPlugin } from './code-bidi-warning';
+export { default as copyButtonPlugin } from './copy-button';

package/dist/types/plugins/panel/toolbar.d.ts

@@ -9,5 +9,5 @@ import { PanelType } from '@atlaskit/adf-schema';
 export declare const panelIconMap: {
     [key in Exclude<PanelType, PanelType.CUSTOM>]: EmojiInfo;
 };
-export declare const getToolbarItems: (formatMessage: IntlShape['formatMessage'], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, activePanelType?: string | undefined, activePanelColor?: string | undefined, activePanelIcon?: string | undefined) => FloatingToolbarItem<Command>[];
+export declare const getToolbarItems: (formatMessage: IntlShape['formatMessage'], panelNodeType: NodeType, isCustomPanelEnabled: boolean, isCustomPanelEditable: boolean, providerFactory: ProviderFactory, activePanelType?: string | undefined, activePanelColor?: string | undefined, activePanelIcon?: string | undefined, state?: EditorState<any> | undefined) => FloatingToolbarItem<Command>[];
 export declare const getToolbarConfig: (state: EditorState, intl: IntlShape, options: PanelPluginOptions | undefined, providerFactory: ProviderFactory) => FloatingToolbarConfig | undefined;

package/dist/types/plugins/table/commands/hover.d.ts

@@ -2,7 +2,7 @@ import { CellColumnPositioning } from '../types';
 export declare const hoverMergedCells: () => import("../../..").Command;
 export declare const hoverColumns: (hoveredColumns: number[], isInDanger?: boolean | undefined) => import("../../..").Command;
 export declare const hoverRows: (hoveredRows: number[], isInDanger?: boolean | undefined) => import("../../..").Command;
-export declare const hoverTable: (isInDanger?: boolean | undefined) => import("../../..").Command;
+export declare const hoverTable: (isInDanger?: boolean | undefined, isSelected?: boolean | undefined) => import("../../..").Command;
 export declare const clearHoverSelection: () => import("../../..").Command;
 export declare const showResizeHandleLine: (cellColumnPositioning: CellColumnPositioning) => import("../../..").Command;
 export declare const hideResizeHandleLine: () => import("../../..").Command;

package/dist/types/plugins/table/utils/decoration.d.ts

@@ -5,7 +5,7 @@ import { Cell, CellColumnPositioning, TableDecorations } from '../types';
 export declare const findColumnControlSelectedDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const findControlsHoverDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const createCellHoverDecoration: (cells: Cell[], type: 'warning') => Decoration[];
-export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', danger?: boolean | undefined) => Decoration[];
+export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', danger?: boolean | undefined, selected?: boolean | undefined) => Decoration[];
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;

package/dist/types/plugins/text-formatting/utils.d.ts

@@ -15,6 +15,6 @@ export declare const markActive: (state: EditorState, mark: PMMark) => boolean;
  */
 export declare const anyMarkActive: (state: EditorState, markType: MarkType) => boolean;
 export declare const checkFormattingIsPresent: (state: EditorState) => boolean;
-export declare const usePreviousObjectState: (value: any) => MenuIconItem[];
+export declare const usePreviousObjectState: (value: MenuIconItem[]) => MenuIconItem[];
 export declare const compareItemsArrays: (items: MenuIconItem[], prevItems: MenuIconItem[]) => MenuIconItem[];
 export declare const isArrayContainsContent: (items: MenuIconItem[], content: string) => boolean;

package/dist/types/plugins/toolbar-lists-indentation/index.d.ts

@@ -0,0 +1,5 @@
+import { EditorPlugin } from '../../types';
+declare const toolbarListsIndentationPlugin: ({ showIndentationButtons, }: {
+    showIndentationButtons: boolean;
+}) => EditorPlugin;
+export default toolbarListsIndentationPlugin;