@atlaskit/editor-common 64.0.0 → 66.0.1

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

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
@@ -9,12 +11,18 @@ exports.BaseTheme = BaseTheme;
 exports.BaseThemeWrapper = BaseThemeWrapper;
 exports.mapBreakpointToLayoutMaxWidth = mapBreakpointToLayoutMaxWidth;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _styledComponents = require("styled-components");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
+var _components = require("@atlaskit/theme/components");
+
 var _constants = require("@atlaskit/theme/constants");
 
 var _WidthProvider = require("../WidthProvider");
@@ -54,23 +62,31 @@ function BaseThemeWrapper(_ref) {
       dynamicTextSizing = _ref.dynamicTextSizing,
       baseFontSize = _ref.baseFontSize,
       children = _ref.children;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
   var memoizedTheme = (0, _react.useMemo)(function () {
-    return {
+    return (0, _defineProperty2.default)({
       baseFontSize: dynamicTextSizing ? mapBreakpointToFontSize(breakpoint) : baseFontSize || mapBreakpointToFontSize('S'),
       layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : _editorSharedStyles.akEditorDefaultLayoutWidth
-    };
-  }, [breakpoint, dynamicTextSizing, baseFontSize]);
-  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
+    }, _constants.CHANNEL, {
+      mode: mode
+    });
+  }, [breakpoint, dynamicTextSizing, baseFontSize, mode]);
+  return /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
+    theme: memoizedTheme
+  }, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: memoizedTheme
-  }, children);
+  }, children));
 }
 
-function BaseTheme(_ref2) {
-  var children = _ref2.children,
-      dynamicTextSizing = _ref2.dynamicTextSizing,
-      baseFontSize = _ref2.baseFontSize;
-  return /*#__PURE__*/_react.default.createElement(_WidthProvider.WidthConsumer, null, function (_ref3) {
-    var breakpoint = _ref3.breakpoint;
+function BaseTheme(_ref3) {
+  var children = _ref3.children,
+      dynamicTextSizing = _ref3.dynamicTextSizing,
+      baseFontSize = _ref3.baseFontSize;
+  return /*#__PURE__*/_react.default.createElement(_WidthProvider.WidthConsumer, null, function (_ref4) {
+    var breakpoint = _ref4.breakpoint;
     return /*#__PURE__*/_react.default.createElement(BaseThemeWrapper, {
       dynamicTextSizing: dynamicTextSizing,
       breakpoint: breakpoint,

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

@@ -23,9 +23,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -37,9 +37,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var CaptionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), _colors.N400);
-
-var Placeholder = _styledComponents.default.p(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), _colors.N200);
+var captionWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), _colors.N400);
+var placeholderStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), _colors.N200);
 
 var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(CaptionComponent, _React$Component);
@@ -61,10 +60,14 @@ var CaptionComponent = /*#__PURE__*/function (_React$Component) {
           dataAttributes = _this$props.dataAttributes,
           formatMessage = _this$props.intl.formatMessage;
       var showPlaceholder = !selected && !hasContent;
-      return /*#__PURE__*/_react.default.createElement(CaptionWrapper, (0, _extends2.default)({
+      return (0, _react2.jsx)("div", (0, _extends2.default)({
         "data-media-caption": true,
         "data-testid": "media-caption"
-      }, dataAttributes), showPlaceholder ? /*#__PURE__*/_react.default.createElement(Placeholder, null, formatMessage(_messages.messages.placeholder)) : null, children);
+      }, dataAttributes, {
+        css: captionWrapperStyle
+      }), showPlaceholder ? (0, _react2.jsx)("p", {
+        css: placeholderStyle
+      }, formatMessage(_messages.messages.placeholder)) : null, children);
     }
   }]);
   return CaptionComponent;

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/link.js

@@ -5,15 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaLink = void 0;
+exports.mediaLinkStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _templateObject;
 
-var MediaLink = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n"])));
-
-exports.MediaLink = MediaLink;
-MediaLink.displayName = 'MediaLink';
+var mediaLinkStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n"])));
+exports.mediaLinkStyle = mediaLinkStyle;

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/Messages/index.js

@@ -9,9 +9,7 @@ exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
 
@@ -23,34 +21,35 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _templateObject, _templateObject2;
-
-var Message = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), _typography.h200, function (props) {
-  if (props.error) {
-    return _colors.R400;
-  }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-  if (props.valid) {
-    return _colors.G400;
-  }
+var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.R400);
+var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.G400);
 
-  return _colors.N200;
-}, (0, _constants.gridSize)() / 2);
+var messageStyle = function messageStyle(props) {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(props), _colors.N200, (0, _constants.gridSize)() / 2);
+};
 
-var IconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 4px;\n"])));
+var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 4px;\n"])));
 
 var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(Message, null, children);
+  return (0, _react.jsx)("div", {
+    css: messageStyle
+  }, children);
 };
 
 exports.HelperMessage = HelperMessage;
 
 var ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/_react.default.createElement(Message, {
-    error: true
-  }, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
+  return (0, _react.jsx)("div", {
+    css: function css(theme) {
+      return [messageStyle(theme), errorColor];
+    }
+  }, (0, _react.jsx)("span", {
+    css: iconWrapperStyle
+  }, (0, _react.jsx)(_error.default, {
     size: "small",
     label: "error",
     "aria-label": "error"
@@ -61,9 +60,13 @@ exports.ErrorMessage = ErrorMessage;
 
 var ValidMessage = function ValidMessage(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/_react.default.createElement(Message, {
-    valid: true
-  }, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(_success.default, {
+  return (0, _react.jsx)("div", {
+    css: function css(theme) {
+      return [messageStyle(theme), validColor];
+    }
+  }, (0, _react.jsx)("span", {
+    css: iconWrapperStyle
+  }, (0, _react.jsx)(_success.default, {
     size: "small",
     label: "success"
   })), children);

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();
     }
   }, {