@atlaskit/editor-core 169.0.0 → 170.0.0

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/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,

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

@@ -7,12 +7,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ElementItem = ElementItem;
 exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -21,13 +20,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-
 var _AutoSizer = require("react-virtualized/dist/commonjs/AutoSizer");
 
 var _Collection = require("react-virtualized/dist/commonjs/Collection");
 
-var _item = _interopRequireDefault(require("@atlaskit/item"));
+var _menu = require("@atlaskit/menu");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -69,10 +66,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-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) { (0, _defineProperty2.default)(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; }
-
 function ElementList(_ref) {
   var items = _ref.items,
       mode = _ref.mode,
@@ -165,40 +158,6 @@ function ElementList(_ref) {
   }))));
 }
 
-var getStyles = (0, _memoizeOne.default)(function (mode) {
-  return _objectSpread(_objectSpread({}, mode === _types.Modes.full && {
-    '-ms-flex': 'auto',
-    position: 'relative',
-    boxSizing: 'border-box'
-  }), {}, {
-    height: {
-      default: _constants.ELEMENT_ITEM_HEIGHT
-    },
-    padding: {
-      default: {
-        top: _constants.GRID_SIZE * 1.5,
-        right: _constants.GRID_SIZE * 1.5,
-        bottom: _constants.GRID_SIZE * 1.5,
-        left: _constants.GRID_SIZE * 1.5
-      }
-    },
-    borderRadius: _constants.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: (0, _tokens.token)('color.background.selected', _colors.N20)
-    },
-    hover: {
-      background: (0, _tokens.token)('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)')
-    },
-    active: {
-      background: (0, _tokens.token)('color.background.neutral.subtle.pressed', 'rgb(244, 245, 247)')
-    },
-    beforeItemSpacing: {
-      default: _constants.GRID_SIZE * 1.5
-    }
-  });
-});
 var MemoizedElementItem = /*#__PURE__*/(0, _react.memo)(ElementItem);
 MemoizedElementItem.displayName = 'MemoizedElementItem';
 
@@ -211,11 +170,6 @@ function ElementItem(_ref4) {
       focus = _ref4.focus,
       setFocusedItemIndex = _ref4.setFocusedItemIndex;
   var ref = (0, _useFocus.default)(focus);
-  var theme = (0, _react.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)
@@ -227,33 +181,29 @@ function ElementItem(_ref4) {
     e.stopPropagation();
     setFocusedItemIndex(index);
 
-    if (inlineMode) {
-      onInsertItem(item);
-    }
-  }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
-  var onDoubleClick = (0, _react.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.
-
-  var onKeyPress = (0, _react.useCallback)(function (e) {
-    var SPACE_KEY = 32;
-    var ENTER_KEY = 13;
-
-    if (e.which === ENTER_KEY || e.which === SPACE_KEY) {
-      e.preventDefault();
-      e.stopPropagation();
-      setFocusedItemIndex(index);
-      onInsertItem(item);
+      case 1:
+        if (inlineMode) {
+          onInsertItem(item);
+        }
+
+        break;
+
+      case 2:
+        if (!inlineMode) {
+          onInsertItem(item);
+        }
+
+        break;
+
+      default:
+        return;
     }
-  }, [index, item, onInsertItem, setFocusedItemIndex]);
+  }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
   var icon = item.icon,
       title = item.title,
       description = item.description,
@@ -261,31 +211,25 @@ function ElementItem(_ref4) {
   return (0, _react2.jsx)(_tooltip.default, {
     content: description,
     testId: "element-item-tooltip-".concat(index)
-  }, (0, _react2.jsx)(_item.default, {
+  }, (0, _react2.jsx)(_menu.ButtonItem, {
     onClick: onClick,
-    onDoubleClick: onDoubleClick,
-    elemBefore: (0, _react2.jsx)(ElementBefore, {
+    iconBefore: (0, _react2.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)
   }, (0, _react2.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.
  */
 
@@ -322,8 +266,8 @@ var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
   }, description)));
 });
 var scrollbarStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _constants.SCROLLBAR_WIDTH, _constants.SCROLLBAR_TRACK_COLOR, _constants.SCROLLBAR_THUMB_COLOR, _constants.SCROLLBAR_THUMB_COLOR, _constants.SCROLLBAR_TRACK_COLOR);
-var elementItemsWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _constants.ELEMENT_LIST_PADDING, scrollbarStyle, _constants.ELEMENT_LIST_PADDING, (0, _tokens.token)('color.border.focused', _colors.B100));
-var elementItemWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _constants.ELEMENT_LIST_PADDING, scrollbarStyle, _constants.ELEMENT_LIST_PADDING, (0, _tokens.token)('color.border.focused', _colors.B100));
+var elementItemWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  div {\n    button {\n      height: 75px;\n      align-items: flex-start;\n      padding: 12px 12px 11px;\n    }\n  }\n"])));
 var itemBody = (0, _react2.css)(_templateObject4 || (_templateObject4 = (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  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/cjs/utils/clipboard.js

@@ -2,17 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.checkClipboardTypes = checkClipboardTypes;
-exports.copyToClipboard = void 0;
+exports.copyToClipboard = exports.copyHTMLToClipboard = void 0;
 exports.isPastedFile = isPastedFile;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var clipboard = _interopRequireWildcard(require("clipboard-polyfill"));
+
+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; }
+
 function checkClipboardTypes(type, item) {
   var isDOMStringList = function isDOMStringList(t) {
     return !t.indexOf && !!t.contains;
@@ -107,4 +115,61 @@ var copyToClipboard = /*#__PURE__*/function () {
   };
 }();
 
-exports.copyToClipboard = copyToClipboard;
+exports.copyToClipboard = copyToClipboard;
+
+var copyHTMLToClipboard = /*#__PURE__*/function () {
+  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(htmlToCopy) {
+    var blobInput, data, Clipboard, dt;
+    return _regenerator.default.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);
+  };
+}();
+
+exports.copyHTMLToClipboard = copyHTMLToClipboard;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "169.0.0";
+var version = "170.0.0";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

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

package/dist/es2019/create-editor/create-plugins-list.js

@@ -1,4 +1,4 @@
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin } from '../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin } from '../plugins';
 import { isFullPage as fullPageCheck } from '../utils/is-full-page';
 import { GUTTER_SIZE_MOBILE_IN_PX } from '../plugins/base/pm-plugins/scroll-gutter';
 import { createFeatureFlagsFromProps } from '../plugins/feature-flags-context/feature-flags-from-props';
@@ -359,6 +359,9 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   } // UI only plugins
 
 
+  preset.add([toolbarListsIndentationPlugin, {
+    showIndentationButtons: !!featureFlags.indentationButtonsInTheToolbar
+  }]);
   preset.add([insertBlockPlugin, {
     allowTables: !!props.allowTables,
     allowExpand: isExpandInsertionEnabled(props),
@@ -411,6 +414,10 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
     }]);
   }
 
+  if (featureFlags.floatingToolbarCopyButton) {
+    preset.add(copyButtonPlugin);
+  }
+
   const excludes = new Set();
 
   if (!isCodeBlockAllowed({

package/dist/es2019/plugins/analytics/types/toolbar-button.js

@@ -14,4 +14,6 @@ export let TOOLBAR_ACTION_SUBJECT_ID;
   TOOLBAR_ACTION_SUBJECT_ID["TEXT_FORMATTING_ITALIC"] = "italic";
   TOOLBAR_ACTION_SUBJECT_ID["UNDO"] = "undo";
   TOOLBAR_ACTION_SUBJECT_ID["REDO"] = "redo";
+  TOOLBAR_ACTION_SUBJECT_ID["INDENT"] = "indent";
+  TOOLBAR_ACTION_SUBJECT_ID["OUTDENT"] = "outdent";
 })(TOOLBAR_ACTION_SUBJECT_ID || (TOOLBAR_ACTION_SUBJECT_ID = {}));

package/dist/es2019/plugins/breakout/index.js

@@ -14,6 +14,13 @@ import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
 class BreakoutView {
   constructor(node, view, eventDispatcher) {
     _defineProperty(this, "updateWidth", widthState => {
+      // we skip updating the width of breakout nodes if the editorView dom
+      // element was hidden (to avoid breakout width and button thrashing
+      // when an editor is hidden, re-rendered and unhidden).
+      if (widthState.width === 0) {
+        return;
+      }
+
       const width = calcBreakoutWidth(this.node.attrs.mode, widthState.width);
       let newStyle = `width: ${width}; `;
       const lineLength = widthState.lineLength;

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -131,7 +131,9 @@ class LayoutButton extends React.Component {
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
       stick: true,
-      forcePlacement: true
+      forcePlacement: true,
+      scheduleExtraLayoutUpdates: true,
+      waitForExtraLayoutUpdates: true
     }, jsx("div", {
       css: toolbarButtonWrapper
     }, jsx(ToolbarButton, {

package/dist/es2019/plugins/card/pm-plugins/util/resolve.js

@@ -6,7 +6,12 @@ import { replaceQueuedUrlWithCard, handleFallbackWithAnalytics } from '../doc';
 // Used for all interactions with the EditorCardProvider.
 // ============================================================================ //
 export const resolveWithProvider = (view, outstandingRequests, provider, request, options) => {
-  const handleResolve = provider.resolve(request.url, request.appearance).then(resolvedCard => {
+  // When user manually changes appearance from blue link to smart link, we should respect that,
+  let shouldForceAppearance = // This flag is set to true only in one place atm:
+  // packages/editor/editor-core/src/plugins/card/pm-plugins/doc.ts @ convertHyperlinkToSmartCard
+  // Which is used when user switching from URL to smart link appearance.
+  !!request.shouldReplaceLink;
+  const handleResolve = provider.resolve(request.url, request.appearance, shouldForceAppearance).then(resolvedCard => {
     delete outstandingRequests[request.url];
     return resolvedCard;
   }).then(handleResolved(view, request, options), handleRejected(view, request));