@atlaskit/editor-common 65.0.0 → 66.0.2

package/dist/cjs/ui/Expand/index.js

@@ -7,13 +7,19 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sharedExpandStyles = exports.messages = exports.ExpandLayoutWrapper = exports.ExpandIconWrapper = void 0;
+exports.sharedExpandStyles = exports.messages = exports.expandLayoutWrapperStyle = exports.ExpandLayoutWrapperWithRef = exports.ExpandIconWrapper = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react2 = require("@emotion/react");
+
+var _reactIntlNext = require("react-intl-next");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -23,6 +29,8 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _excluded = ["children"];
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 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); }
@@ -65,53 +73,83 @@ var EXPAND_EXPANDED_BORDER_COLOR = (0, _components.themed)({
   dark: colors.DN50
 });
 
-var ExpandIconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    ", "\n    transition: transform 0.2s ", ";\n  }\n"])), (0, _components.themed)({
-  light: colors.N90,
-  dark: '#d9dde3'
-}), (0, _constants.gridSize)() / 2, colors.N30A, function (props) {
-  return props.expanded ? 'transform: rotate(90deg);' : '';
-}, _editorSharedStyles.akEditorSwoopCubicBezier);
+var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
+  var children = _ref.children,
+      expanded = _ref.expanded;
+  return (0, _react2.jsx)("div", {
+    css: function css(props) {
+      return expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props);
+    }
+  }, children);
+};
 
 exports.ExpandIconWrapper = ExpandIconWrapper;
 
-var ExpandLayoutWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
-
-exports.ExpandLayoutWrapper = ExpandLayoutWrapper;
-var ContainerStyles = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  border-radius: ", "px;\n  min-height: 25px;\n  background: ", ";\n  margin: ", ";\n\n  transition: background 0.3s ", ",\n    border-color 0.3s ", ";\n  padding: ", "px;\n\n  &:hover {\n    border: 1px solid ", ";\n    background: ", ";\n  }\n\n  td > &:first-child {\n    margin-top: 0;\n  }\n"])), function (_ref) {
-  var expanded = _ref.expanded,
-      focused = _ref.focused;
-  var expandedBorderColor = expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR;
-  return focused ? EXPAND_FOCUSED_BORDER_COLOR : expandedBorderColor;
-}, BORDER_RADIUS, function (_ref2) {
-  var expanded = _ref2.expanded;
-  return !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND;
-}, function (props) {
-  return "".concat((0, _constants.gridSize)() / 2 / (0, _constants.fontSize)(), "rem ").concat( // Only only these margins if the expand isn't editable
-  // and is the root level expand.
-  props['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : "0", " 0");
-}, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, _constants.gridSize, (0, _components.themed)({
-  light: colors.N50A,
-  dark: colors.DN50
-}), EXPAND_SELECTED_BACKGROUND);
-var ContentStyles = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), function (_ref3) {
-  var expanded = _ref3.expanded;
-  return (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n      padding-top: ", "px;\n      padding-right: ", "px;\n      padding-left: ", "px;\n      display: table;\n      display: flow-root;\n\n      // The follow rules inside @supports block are added as a part of ED-8893\n      // The fix is targeting mobile bridge on iOS 12 or below,\n      // We should consider remove this fix when we no longer support iOS 12\n      @supports not (display: flow-root) {\n        width: 100%;\n        box-sizing: border-box;\n      }\n\n      ", "\n    "])), expanded ? (0, _constants.gridSize)() : 0, (0, _constants.gridSize)(), (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2, !expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), (0, _components.themed)({
+    light: colors.N90,
+    dark: '#d9dde3'
+  })(props), (0, _constants.gridSize)() / 2, colors.N30A, _editorSharedStyles.akEditorSwoopCubicBezier);
+};
+
+var expandIconWrapperExpandedStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
+var expandLayoutWrapperStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
+exports.expandLayoutWrapperStyle = expandLayoutWrapperStyle;
+var ExpandLayoutWrapperWithRef = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: expandLayoutWrapperStyle
+  }, rest, {
+    ref: ref
+  }), children);
 });
-var TitleInputStyles = (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _components.themed)({
-  light: colors.N200A,
-  dark: colors.DN600
-}), (0, _constants.gridSize)() / 2, (0, _components.themed)({
-  light: colors.N200A,
-  dark: colors.DN600
-}));
-var TitleContainerStyles = (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n  // Prevent browser selection being inside the title container\n  user-select: none;\n\n  &:focus {\n    outline: 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-  light: colors.N300A,
-  dark: colors.DN600
-}));
+exports.ExpandLayoutWrapperWithRef = ExpandLayoutWrapperWithRef;
+
+var containerStyles = function containerStyles(styleProps) {
+  var expanded = styleProps.expanded,
+      focused = styleProps.focused;
+  var marginTop = "".concat((0, _constants.gridSize)() / 2 / (0, _constants.fontSize)(), "rem");
+  var marginBottom = 0; // Only only these margins if the expand isn't editable
+  // and is the root level expand.
+
+  var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : 0;
+  var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
+  return function (themeProps) {
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    &:hover {\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > &:first-child {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
+      light: colors.N50A,
+      dark: colors.DN50
+    })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
+  };
+};
+
+var contentStyles = function contentStyles(styleProps) {
+  return function (themeProps) {
+    return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", "px;\n  padding-right: ", "px;\n  padding-left: ", "px;\n  display: flow-root;\n\n  // The follow rules inside @supports block are added as a part of ED-8893\n  // The fix is targeting mobile bridge on iOS 12 or below,\n  // We should consider remove this fix when we no longer support iOS 12\n  @supports not (display: flow-root) {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  ", "\n"])), styleProps.expanded ? (0, _constants.gridSize)() : 0, (0, _constants.gridSize)(), (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+  };
+};
+
+var titleInputStyles = function titleInputStyles(props) {
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _components.themed)({
+    light: colors.N200A,
+    dark: colors.DN600
+  })(props), (0, _constants.gridSize)() / 2, (0, _components.themed)({
+    light: colors.N200A,
+    dark: colors.DN600
+  })(props));
+};
+
+var titleContainerStyles = function titleContainerStyles(props) {
+  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n  // Prevent browser selection being inside the title container\n  user-select: none;\n\n  &:focus {\n    outline: 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+    light: colors.N300A,
+    dark: colors.DN600
+  })(props));
+};
+
 var sharedExpandStyles = {
-  TitleInputStyles: TitleInputStyles,
-  TitleContainerStyles: TitleContainerStyles,
-  ContainerStyles: ContainerStyles,
-  ContentStyles: ContentStyles
+  titleInputStyles: titleInputStyles,
+  titleContainerStyles: titleContainerStyles,
+  containerStyles: containerStyles,
+  contentStyles: contentStyles
 };
 exports.sharedExpandStyles = sharedExpandStyles;

package/dist/cjs/ui/{IntlNextErrorBoundary → IntlErrorBoundary}/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.REACT_INTL_ERROR_MESSAGE = exports.IntlNextErrorBoundary = void 0;
+exports.REACT_INTL_ERROR_MESSAGE = exports.IntlErrorBoundary = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -38,15 +38,15 @@ var isMissingIntlProviderInAncestryError = function isMissingIntlProviderInAnces
   return err === null || err === void 0 ? void 0 : (_err$toString = err.toString()) === null || _err$toString === void 0 ? void 0 : _err$toString.includes('<IntlProvider> needs to exist in the component ancestry');
 };
 
-var IntlNextErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(IntlNextErrorBoundary, _React$Component);
+var IntlErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(IntlErrorBoundary, _React$Component);
 
-  var _super = _createSuper(IntlNextErrorBoundary);
+  var _super = _createSuper(IntlErrorBoundary);
 
-  function IntlNextErrorBoundary() {
+  function IntlErrorBoundary() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, IntlNextErrorBoundary);
+    (0, _classCallCheck2.default)(this, IntlErrorBoundary);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -59,7 +59,7 @@ var IntlNextErrorBoundary = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(IntlNextErrorBoundary, [{
+  (0, _createClass2.default)(IntlErrorBoundary, [{
     key: "componentDidCatch",
     value: function componentDidCatch(error, errorInfo) {
       // if missing IntlProvider in ancestry, we setup a fallback IntlProvider ourselves
@@ -84,7 +84,7 @@ var IntlNextErrorBoundary = /*#__PURE__*/function (_React$Component) {
       return this.props.children;
     }
   }]);
-  return IntlNextErrorBoundary;
+  return IntlErrorBoundary;
 }(_react.default.Component);
 
-exports.IntlNextErrorBoundary = IntlNextErrorBoundary;
+exports.IntlErrorBoundary = IntlErrorBoundary;

package/dist/cjs/ui/MediaSingle/index.js

@@ -13,6 +13,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -21,6 +23,7 @@ var _grid = require("./grid");
 
 var _styled = require("./styled");
 
+/** @jsx jsx */
 var DEFAULT_IMAGE_WIDTH = 250;
 exports.DEFAULT_IMAGE_WIDTH = DEFAULT_IMAGE_WIDTH;
 var DEFAULT_IMAGE_HEIGHT = 200;
@@ -106,13 +109,15 @@ function MediaSingle(_ref) {
       media = _children[0],
       caption = _children[1];
 
-  return /*#__PURE__*/_react.default.createElement(_styled.MediaSingleWrapper, {
-    innerRef: handleMediaSingleRef,
-    width: width,
-    layout: layout,
-    containerWidth: containerWidth,
-    pctWidth: pctWidth,
-    fullWidthMode: fullWidthMode,
+  return (0, _react2.jsx)("div", {
+    ref: handleMediaSingleRef,
+    css: (0, _styled.MediaSingleDimensionHelper)({
+      width: width,
+      layout: layout,
+      containerWidth: containerWidth,
+      pctWidth: pctWidth,
+      fullWidthMode: fullWidthMode
+    }),
     "data-layout": layout,
     "data-width": pctWidth,
     "data-node-type": nodeType,
@@ -120,7 +125,7 @@ function MediaSingle(_ref) {
       'is-loading': isLoading,
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     })
-  }, /*#__PURE__*/_react.default.createElement(_styled.MediaWrapper, {
+  }, (0, _react2.jsx)(_styled.MediaWrapper, {
     hasFallbackContainer: hasFallbackContainer,
     height: mediaWrapperHeight,
     paddingBottom: paddingBottom

package/dist/cjs/ui/MediaSingle/styled.js

@@ -2,28 +2,29 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaWrapper = exports.MediaSingleWrapper = exports.MediaSingleDimensionHelper = void 0;
+exports.MediaWrapper = exports.MediaSingleDimensionHelper = void 0;
 exports.calcLegacyWidth = calcLegacyWidth;
 exports.calcResizedWidth = calcResizedWidth;
+exports.mediaWrapperStyle = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _breakout = require("../../utils/breakout");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["children"];
 
-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;
 
 function float(layout) {
   switch (layout) {
@@ -150,7 +151,7 @@ var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref) {
       layout = _ref.layout,
       pctWidth = _ref.pctWidth,
       width = _ref.width;
-  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 
 exports.MediaSingleDimensionHelper = MediaSingleDimensionHelper;
@@ -159,20 +160,22 @@ var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   var hasFallbackContainer = _ref2.hasFallbackContainer,
       paddingBottom = _ref2.paddingBottom,
       height = _ref2.height;
-  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '');
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '');
 };
 
-var MediaWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer, function (_ref3) {
-  var hasFallbackContainer = _ref3.hasFallbackContainer;
-  return hasFallbackContainer ? 'absolute' : 'relative';
-}, function (_ref4) {
-  var hasFallbackContainer = _ref4.hasFallbackContainer;
-  return hasFallbackContainer ? 'absolute' : 'relative';
-});
+var mediaWrapperStyle = function mediaWrapperStyle(props) {
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & > div {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
+};
 
-exports.MediaWrapper = MediaWrapper;
+exports.mediaWrapperStyle = mediaWrapperStyle;
 
-var MediaSingleWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), MediaSingleDimensionHelper);
+var MediaWrapper = function MediaWrapper(_ref3) {
+  var children = _ref3.children,
+      rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  return (0, _react2.jsx)("div", {
+    css: mediaWrapperStyle(rest)
+  }, children);
+};
 
-exports.MediaSingleWrapper = MediaSingleWrapper;
+exports.MediaWrapper = MediaWrapper;
 MediaWrapper.displayName = 'WrapperMediaSingle';

package/dist/cjs/ui/Popup/index.js

@@ -51,6 +51,8 @@ var Popup = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(Popup);
 
   function Popup() {
+    var _window;
+
     var _this;
 
     (0, _classCallCheck2.default)(this, Popup);
@@ -77,6 +79,9 @@ var Popup = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResize", function () {
       return _this.scheduledUpdatePosition(_this.props);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resizeObserver", (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(function () {
+      _this.scheduledUpdatePosition(_this.props);
+    }) : undefined);
     return _this;
   }
 
@@ -202,9 +207,14 @@ var Popup = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       window.addEventListener('resize', this.onResize);
       var stick = this.props.stick;
+      this.scrollParentElement = (0, _utils.findOverflowScrollParent)(this.props.target);
+
+      if (this.scrollParentElement && this.resizeObserver) {
+        this.resizeObserver.observe(this.scrollParentElement);
+      }
 
       if (stick) {
-        this.scrollElement = (0, _utils.findOverflowScrollParent)(this.props.target);
+        this.scrollElement = this.scrollParentElement;
       } else {
         this.scrollElement = this.props.scrollableElement;
       }
@@ -222,6 +232,10 @@ var Popup = /*#__PURE__*/function (_React$Component) {
         this.scrollElement.removeEventListener('scroll', this.onResize);
       }
 
+      if (this.scrollParentElement && this.resizeObserver) {
+        this.resizeObserver.unobserve(this.scrollParentElement);
+      }
+
       this.scheduledUpdatePosition.cancel();
     }
   }, {

package/dist/cjs/ui/UnsupportedBlock/index.js

@@ -41,7 +41,7 @@ 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; }
 
-var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,

package/dist/cjs/ui/index.js

@@ -43,10 +43,10 @@ Object.defineProperty(exports, "ExpandIconWrapper", {
     return _Expand.ExpandIconWrapper;
   }
 });
-Object.defineProperty(exports, "ExpandLayoutWrapper", {
+Object.defineProperty(exports, "ExpandLayoutWrapperWithRef", {
   enumerable: true,
   get: function get() {
-    return _Expand.ExpandLayoutWrapper;
+    return _Expand.ExpandLayoutWrapperWithRef;
   }
 });
 Object.defineProperty(exports, "HelperMessage", {
@@ -55,22 +55,10 @@ Object.defineProperty(exports, "HelperMessage", {
     return _Messages.HelperMessage;
   }
 });
-Object.defineProperty(exports, "IntlLegacyFallbackProvider", {
+Object.defineProperty(exports, "IntlErrorBoundary", {
   enumerable: true,
   get: function get() {
-    return _IntlLegacyFallbackProvider.IntlLegacyFallbackProvider;
-  }
-});
-Object.defineProperty(exports, "IntlNextErrorBoundary", {
-  enumerable: true,
-  get: function get() {
-    return _IntlNextErrorBoundary.IntlNextErrorBoundary;
-  }
-});
-Object.defineProperty(exports, "LegacyToNextIntlProvider", {
-  enumerable: true,
-  get: function get() {
-    return _LegacyToNextIntlProvider.LegacyToNextIntlProvider;
+    return _IntlErrorBoundary.IntlErrorBoundary;
   }
 });
 Object.defineProperty(exports, "MediaSingle", {
@@ -94,7 +82,7 @@ Object.defineProperty(exports, "Popup", {
 Object.defineProperty(exports, "REACT_INTL_ERROR_MESSAGE", {
   enumerable: true,
   get: function get() {
-    return _IntlNextErrorBoundary.REACT_INTL_ERROR_MESSAGE;
+    return _IntlErrorBoundary.REACT_INTL_ERROR_MESSAGE;
   }
 });
 Object.defineProperty(exports, "UnsupportedBlock", {
@@ -163,6 +151,12 @@ Object.defineProperty(exports, "clearNextSiblingMarginTopStyle", {
     return _clearNextSiblingMarginTop.clearNextSiblingMarginTopStyle;
   }
 });
+Object.defineProperty(exports, "expandLayoutWrapperStyle", {
+  enumerable: true,
+  get: function get() {
+    return _Expand.expandLayoutWrapperStyle;
+  }
+});
 Object.defineProperty(exports, "expandMessages", {
   enumerable: true,
   get: function get() {
@@ -274,11 +268,7 @@ var _Messages = require("./Messages");
 
 var _clearNextSiblingMarginTop = require("./clear-next-sibling-margin-top");
 
-var _IntlNextErrorBoundary = require("./IntlNextErrorBoundary");
-
-var _IntlLegacyFallbackProvider = require("./IntlLegacyFallbackProvider");
-
-var _LegacyToNextIntlProvider = require("./LegacyToNextIntlProvider");
+var _IntlErrorBoundary = require("./IntlErrorBoundary");
 
 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); }
 

package/dist/cjs/utils/compare-props.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.serializeValue = exports.getShallowPropsDifference = exports.getPropsDifference = exports.getKeysAddedRemovedCommon = exports.getKeys = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var getKeys = Object.keys;
+exports.getKeys = getKeys;
+
+var getKeysAddedRemovedCommon = function getKeysAddedRemovedCommon(object1, object2) {
+  var oldKeys = object1 !== null ? getKeys(object1) : [];
+  var newKeys = object2 !== null ? getKeys(object2) : [];
+  var removed = oldKeys.filter(function (key) {
+    return !newKeys.includes(key);
+  });
+  var added = newKeys.filter(function (key) {
+    return !oldKeys.includes(key);
+  });
+  var common = oldKeys.filter(function (key) {
+    return newKeys.includes(key);
+  });
+  return {
+    added: added,
+    common: common,
+    removed: removed
+  };
+};
+
+exports.getKeysAddedRemovedCommon = getKeysAddedRemovedCommon;
+
+var serializeValue = function serializeValue(value) {
+  var valueType = (0, _typeof2.default)(value);
+
+  if (value === null) {
+    return 'null';
+  } else if (value === undefined) {
+    return 'undefined';
+  } else if (valueType === 'string' || valueType === 'number') {
+    return value;
+  } else if (valueType === 'symbol') {
+    return value.toString();
+  } // Calling toString of function returns whole function text with body.
+  // So, just return function with name.
+  else if (valueType === 'function') {
+    return "function:".concat(value.name);
+  } else if (valueType === 'object') {
+    return {
+      type: 'object',
+      keys: Object.keys(value)
+    };
+  }
+};
+
+exports.serializeValue = serializeValue;
+
+var getPropsDifference = function getPropsDifference(object1, object2) {
+  var curDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var maxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2;
+  var keysToIgnore = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+
+  var _getKeysAddedRemovedC = getKeysAddedRemovedCommon(object1, object2),
+      added = _getKeysAddedRemovedC.added,
+      common = _getKeysAddedRemovedC.common,
+      removed = _getKeysAddedRemovedC.removed;
+
+  var changed = [];
+  common.forEach(function (key) {
+    var value1 = object1[key];
+    var value2 = object2[key];
+    var value1Type = (0, _typeof2.default)(value1);
+    var value2Type = (0, _typeof2.default)(value2); // Do comparision only if values doesn't match (or reference to same object in memory).
+    // Or if key does not exist in keys to ignore.
+
+    if (value1 !== value2 && keysToIgnore.indexOf(key) === -1) {
+      // if both key value are objects and not referencing same object in memory.
+      //  then get recursive difference.
+      if ( /*#__PURE__*/_react.default.isValidElement(value1) || /*#__PURE__*/_react.default.isValidElement(value2)) {
+        changed.push({
+          key: key,
+          reactElementChanged: true
+        });
+      } else if (value1Type === 'object' && value2Type === 'object') {
+        if (curDepth <= maxDepth) {
+          var difference = getPropsDifference(value1, value2, curDepth + 1, maxDepth);
+          changed.push({
+            key: key,
+            difference: difference
+          });
+        } else {
+          changed.push({
+            key: key,
+            maxDepthReached: true
+          });
+        }
+      } else {
+        changed.push({
+          key: key,
+          oldValue: serializeValue(value1),
+          newValue: serializeValue(value2)
+        });
+      }
+    }
+  });
+  return {
+    added: added,
+    changed: changed,
+    removed: removed
+  };
+};
+
+exports.getPropsDifference = getPropsDifference;
+
+var getShallowPropsDifference = function getShallowPropsDifference(object1, object2) {
+  var _getKeysAddedRemovedC2 = getKeysAddedRemovedCommon(object1, object2),
+      added = _getKeysAddedRemovedC2.added,
+      common = _getKeysAddedRemovedC2.common,
+      removed = _getKeysAddedRemovedC2.removed;
+
+  var changed = common.filter(function (key) {
+    return object1[key] !== object2[key];
+  });
+  return {
+    added: added,
+    changed: changed,
+    removed: removed
+  };
+};
+
+exports.getShallowPropsDifference = getShallowPropsDifference;