@atlaskit/renderer 84.0.0 → 86.0.0

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -2,50 +2,28 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getMediaContainerWidth = exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _editorCommon = require("@atlaskit/editor-common");
-
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _style = require("../../../ui/Renderer/style");
-
-var _styles = require("./styles");
-
 var _mediaCommon = require("@atlaskit/media-common");
 
-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); }
+var _ui = require("@atlaskit/editor-common/ui");
 
-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 _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+var _style = require("../../../ui/Renderer/style");
 
-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 _useObservedWidth2 = require("../../hooks/use-observed-width");
+
+var _styles = require("./styles");
 
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
@@ -84,144 +62,160 @@ var getMediaContainerWidth = function getMediaContainerWidth(currentContainerWid
 
 exports.getMediaContainerWidth = getMediaContainerWidth;
 
-var MediaSingle = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(MediaSingle, _Component);
+var MediaSingle = function MediaSingle(props) {
+  var _ref$current;
+
+  var rendererAppearance = props.rendererAppearance,
+      featureFlags = props.featureFlags,
+      isInsideOfBlockNode = props.isInsideOfBlockNode,
+      allowDynamicTextSizing = props.allowDynamicTextSizing,
+      layout = props.layout,
+      children = props.children,
+      pctWidth = props.width;
+  var isCaptionsFlaggedOn = (0, _mediaCommon.getMediaFeatureFlag)('captions', featureFlags);
+
+  var _React$useState = _react.default.useState({
+    width: 0,
+    height: 0
+  }),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      externalImageDimensions = _React$useState2[0],
+      setExternalImageDimensions = _React$useState2[1];
+
+  var ref = _react.default.useRef(null);
+
+  var onExternalImageLoaded = _react.default.useCallback(function (_ref2) {
+    var width = _ref2.width,
+        height = _ref2.height;
+    setExternalImageDimensions({
+      width: width,
+      height: height
+    });
+  }, []);
 
-  var _super = _createSuper(MediaSingle);
+  var observedWidthFlag = (0, _mediaCommon.getMediaFeatureFlag)('observedWidth', featureFlags);
 
-  function MediaSingle(props) {
-    var _this;
+  var _useObservedWidth = (0, _useObservedWidth2.useObservedWidth)((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement, observedWidthFlag),
+      observedWidth = _useObservedWidth.width;
 
-    (0, _classCallCheck2.default)(this, MediaSingle);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExternalImageLoaded", function (_ref2) {
-      var width = _ref2.width,
-          height = _ref2.height;
+  var media;
 
-      _this.setState({
-        width: width,
-        height: height
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isCaptionsFlaggedOn", (0, _mediaCommon.getMediaFeatureFlag)('captions', _this.props.featureFlags));
-    _this.state = {}; // Need to initialize with empty state.
+  var _React$Children$toArr3 = _react.default.Children.toArray(children),
+      _React$Children$toArr4 = (0, _slicedToArray2.default)(_React$Children$toArr3, 2),
+      node = _React$Children$toArr4[0],
+      caption = _React$Children$toArr4[1];
 
-    return _this;
-  }
+  if (!isMediaElement(node)) {
+    var mediaElement = checkForMediaElement(node.props.children);
+
+    if (!mediaElement) {
+      return node;
+    }
 
-  (0, _createClass2.default)(MediaSingle, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+    media = mediaElement;
+  } else {
+    media = node;
+  }
 
-      var props = this.props;
-      var media;
+  var _media$props = media.props,
+      _media$props$width = _media$props.width,
+      width = _media$props$width === void 0 ? DEFAULT_WIDTH : _media$props$width,
+      _media$props$height = _media$props.height,
+      height = _media$props$height === void 0 ? DEFAULT_HEIGHT : _media$props$height,
+      type = _media$props.type;
 
-      var _React$Children$toArr3 = _react.default.Children.toArray(props.children),
-          _React$Children$toArr4 = (0, _slicedToArray2.default)(_React$Children$toArr3, 2),
-          node = _React$Children$toArr4[0],
-          caption = _React$Children$toArr4[1];
+  if (type === 'external') {
+    var stateWidth = externalImageDimensions.width,
+        stateHeight = externalImageDimensions.height;
 
-      if (!isMediaElement(node)) {
-        var mediaElement = checkForMediaElement(node.props.children);
+    if (width === null) {
+      width = stateWidth || DEFAULT_WIDTH;
+    }
 
-        if (!mediaElement) {
-          return node;
-        }
+    if (height === null) {
+      height = stateHeight || DEFAULT_HEIGHT;
+    }
+  }
 
-        media = mediaElement;
+  if (width === null) {
+    width = DEFAULT_WIDTH;
+    height = DEFAULT_HEIGHT;
+  } // TODO: put appearance-based padding into theme instead
+
+
+  var padding = rendererAppearance === 'full-page' ? _style.FullPagePadding * 2 : 0;
+  var isFullWidth = rendererAppearance === 'full-width';
+
+  var calcDimensions = function calcDimensions(mediaContainerWidth, mediaBreakpoint) {
+    var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
+    var breakpoint = mediaBreakpoint || (0, _ui.getBreakpoint)(containerWidth);
+    var maxWidth = containerWidth;
+    var maxHeight = height / width * maxWidth;
+    var cardDimensions = {
+      width: "".concat(maxWidth, "px"),
+      height: "".concat(maxHeight, "px")
+    };
+    var nonFullWidthSize = containerWidth;
+
+    if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
+      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
+
+      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
+        nonFullWidthSize = (0, _ui.mapBreakpointToLayoutMaxWidth)(breakpoint);
+      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
       } else {
-        media = node;
+        nonFullWidthSize = containerWidth - padding;
       }
+    }
 
-      var _media$props = media.props,
-          _media$props$width = _media$props.width,
-          width = _media$props$width === void 0 ? DEFAULT_WIDTH : _media$props$width,
-          _media$props$height = _media$props.height,
-          height = _media$props$height === void 0 ? DEFAULT_HEIGHT : _media$props$height,
-          type = _media$props.type;
-
-      if (type === 'external') {
-        var _this$state = this.state,
-            stateWidth = _this$state.width,
-            stateHeight = _this$state.height;
-
-        if (width === null) {
-          width = stateWidth || DEFAULT_WIDTH;
-        }
-
-        if (height === null) {
-          height = stateHeight || DEFAULT_HEIGHT;
-        }
-      }
+    var minWidth = Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding);
+    var lineLength = isFullWidth ? minWidth : nonFullWidthSize;
+    return {
+      cardDimensions: cardDimensions,
+      lineLength: lineLength,
+      containerWidth: containerWidth
+    };
+  };
+
+  var originalDimensions = {
+    height: height,
+    width: width
+  };
+
+  var renderMediaSingle = function renderMediaSingle(renderWidth, mediaBreakpoint) {
+    var _calcDimensions = calcDimensions(renderWidth, mediaBreakpoint),
+        cardDimensions = _calcDimensions.cardDimensions,
+        lineLength = _calcDimensions.lineLength,
+        containerWidth = _calcDimensions.containerWidth;
+
+    var mediaComponent = /*#__PURE__*/_react.default.cloneElement(media, {
+      resizeMode: 'stretchy-fit',
+      cardDimensions: cardDimensions,
+      originalDimensions: originalDimensions,
+      onExternalImageLoaded: onExternalImageLoaded,
+      disableOverlay: true,
+      featureFlags: featureFlags
+    });
 
-      if (width === null) {
-        width = DEFAULT_WIDTH;
-        height = DEFAULT_HEIGHT;
-      } // TODO: put appearance-based padding into theme instead
-
-
-      var _this$props = this.props,
-          rendererAppearance = _this$props.rendererAppearance,
-          featureFlags = _this$props.featureFlags;
-      var padding = rendererAppearance === 'full-page' ? _style.FullPagePadding * 2 : 0;
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.WidthConsumer, null, function (_ref3) {
-        var widthConsumerValue = _ref3.width,
-            breakpoint = _ref3.breakpoint;
-        var containerWidth = getMediaContainerWidth(widthConsumerValue, props.layout);
-        var _this2$props = _this2.props,
-            isInsideOfBlockNode = _this2$props.isInsideOfBlockNode,
-            allowDynamicTextSizing = _this2$props.allowDynamicTextSizing;
-        var maxWidth = containerWidth;
-        var maxHeight = height / width * maxWidth;
-        var cardDimensions = {
-          width: "".concat(maxWidth, "px"),
-          height: "".concat(maxHeight, "px")
-        };
-        var isFullWidth = rendererAppearance === 'full-width';
-        var nonFullWidthSize = containerWidth;
-
-        if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
-          var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
-
-          if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-            nonFullWidthSize = (0, _editorCommon.mapBreakpointToLayoutMaxWidth)(breakpoint);
-          } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-            nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
-          } else {
-            nonFullWidthSize = containerWidth - padding;
-          }
-        }
-
-        var lineLength = isFullWidth ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-        var originalDimensions = {
-          height: height,
-          width: width
-        };
-
-        var mediaComponent = /*#__PURE__*/_react.default.cloneElement(media, {
-          resizeMode: 'stretchy-fit',
-          cardDimensions: cardDimensions,
-          originalDimensions: originalDimensions,
-          onExternalImageLoaded: _this2.onExternalImageLoaded,
-          disableOverlay: true,
-          featureFlags: featureFlags
-        });
-
-        return /*#__PURE__*/_react.default.createElement(_styles.ExtendedUIMediaSingle, {
-          layout: props.layout,
-          width: width,
-          height: height,
-          lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
-          containerWidth: containerWidth,
-          pctWidth: props.width,
-          fullWidthMode: isFullWidth
-        }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mediaComponent), _this2.isCaptionsFlaggedOn && caption);
-      });
-    }
-  }]);
-  return MediaSingle;
-}(_react.Component);
+    return /*#__PURE__*/_react.default.createElement(_styles.ExtendedUIMediaSingle, {
+      handleMediaSingleRef: ref,
+      layout: layout,
+      width: width,
+      height: height,
+      lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
+      containerWidth: containerWidth,
+      pctWidth: pctWidth,
+      fullWidthMode: isFullWidth
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
+  };
+
+  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
+    var width = _ref3.width,
+        breakpoint = _ref3.breakpoint;
+    return renderMediaSingle(width, breakpoint);
+  });
+};
 
 var _default = (0, _reactIntlNext.injectIntl)(MediaSingle);
 

package/dist/cjs/react/nodes/mediaSingle/styles.js

@@ -11,11 +11,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _templateObject;
 
-var ExtendedUIMediaSingle = (0, _styledComponents.default)(_editorCommon.MediaSingle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " transition: all 0.1s linear;\n"])), function (_ref) {
+var ExtendedUIMediaSingle = (0, _styledComponents.default)(_ui.MediaSingle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " transition: all 0.1s linear;\n"])), function (_ref) {
   var layout = _ref.layout;
   return layout === 'full-width' || layout === 'wide' ? "\n  margin-left: 50%;\n  transform: translateX(-50%);\n  " : "";
 });

package/dist/cjs/react/nodes/mention.js

@@ -21,7 +21,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _mention = require("@atlaskit/editor-common/mention");
 
 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); }
 
@@ -47,16 +47,14 @@ var MentionItem = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           eventHandlers = _this$props.eventHandlers,
           id = _this$props.id,
-          portal = _this$props.portal,
           providers = _this$props.providers,
           text = _this$props.text,
           accessLevel = _this$props.accessLevel;
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.Mention, {
+      return /*#__PURE__*/_react.default.createElement(_mention.Mention, {
         id: id,
         text: text,
         accessLevel: accessLevel,
         providers: providers,
-        portal: portal,
         eventHandlers: eventHandlers && eventHandlers.mention
       });
     }

package/dist/cjs/react/nodes/panel.js

@@ -13,21 +13,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/info"));
-
 var _hint = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/hint"));
 
-var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
-
-var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/error"));
-
-var _note = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/note"));
-
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
-
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _emoji = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/emoji"));
 
@@ -35,6 +25,8 @@ var _emoji2 = _interopRequireDefault(require("./emoji"));
 
 var _theme = require("@atlaskit/theme");
 
+var _icons = require("@atlaskit/editor-common/icons");
+
 var _templateObject;
 
 var PanelStyled = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
@@ -44,17 +36,17 @@ var PanelStyled = _styledComponents.default.div(_templateObject || (_templateObj
 
 
   return "\n      &[data-panel-type=".concat(_adfSchema.PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        ").concat((0, _theme.themed)({
-    dark: _editorCommon.getPanelBackgroundDarkModeColors
+    dark: _styles.getPanelBackgroundDarkModeColors
   }), ";\n      }\n    ");
 });
 
 var panelIcons = {
-  info: _info.default,
-  success: _success.default,
-  note: _note.default,
+  info: _icons.PanelInfoIcon,
+  success: _icons.PanelSuccessIcon,
+  note: _icons.PanelNoteIcon,
   tip: _hint.default,
-  warning: _warning.default,
-  error: _error.default,
+  warning: _icons.PanelWarningIcon,
+  error: _icons.PanelErrorIcon,
   custom: _emoji.default
 };
 
@@ -63,6 +55,8 @@ var Panel = function Panel(props) {
       type = props.panelType,
       panelColor = props.panelColor,
       panelIcon = props.panelIcon,
+      panelIconId = props.panelIconId,
+      panelIconText = props.panelIconText,
       providers = props.providers,
       children = props.children; // only allow custom panel type if flag is set
   // otherwise fall back to info if custom panel is given
@@ -73,6 +67,8 @@ var Panel = function Panel(props) {
     if (panelType === _adfSchema.PanelType.CUSTOM) {
       if (panelIcon && providers) {
         return /*#__PURE__*/_react.default.createElement(_emoji2.default, {
+          id: panelIconId,
+          text: panelIconText,
           shortName: panelIcon,
           providers: providers
         });
@@ -92,19 +88,21 @@ var Panel = function Panel(props) {
 
     if (icon) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: _editorCommon.PanelSharedCssClassName.icon
+        className: _styles.PanelSharedCssClassName.icon
       }, icon);
     }
   };
 
   return /*#__PURE__*/_react.default.createElement(PanelStyled, {
-    className: _editorCommon.PanelSharedCssClassName.prefix,
+    className: _styles.PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
     "data-panel-icon": panelIcon,
+    "data-panel-icon-id": panelIconId,
+    "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor
   }, renderIcon(), /*#__PURE__*/_react.default.createElement("div", {
-    className: _editorCommon.PanelSharedCssClassName.content
+    className: _styles.PanelSharedCssClassName.content
   }, children));
 };
 

package/dist/cjs/react/nodes/status.js

@@ -57,7 +57,8 @@ var Status = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react.default.createElement(_element.Status, {
         text: text,
         color: color,
-        localId: localId
+        localId: localId,
+        role: "presentation"
       }));
     }
   }]);

package/dist/cjs/react/nodes/table/colgroup.js

@@ -9,7 +9,7 @@ exports.calcScalePercent = exports.Colgroup = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -54,7 +54,7 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
   }
 
   return Math.max( // We need to take tableCellBorderWidth, to avoid unneccesary overflow.
-  columnWidth - _editorCommon.tableCellBorderWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _editorCommon.tableCellMinWidth);
+  columnWidth - _styles.tableCellBorderWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
 };
 
 var calcScalePercent = function calcScalePercent(_ref2) {

package/dist/cjs/react/nodes/table/sticky.js

@@ -19,7 +19,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -67,7 +67,7 @@ var FixedTableDiv = _styledComponents.default.div.attrs({
   return props.mode === 'pin-bottom' ? 'position: absolute' : '';
 }, function (props) {
   return props.mode === 'none' ? 'display: none' : '';
-}, _editorSharedStyles.akEditorStickyHeaderZIndex, _editorCommon.TableSharedCssClassName.TABLE_CONTAINER, _editorCommon.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, _editorCommon.TableSharedCssClassName.TABLE_CONTAINER, _editorCommon.TableSharedCssClassName.TABLE_CONTAINER);
+}, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 
 exports.FixedTableDiv = FixedTableDiv;
 
@@ -96,14 +96,14 @@ var StickyTable = function StickyTable(_ref3) {
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
   }, /*#__PURE__*/_react.default.createElement(StyledDiv, {
-    className: "".concat(_editorCommon.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
+    className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
     "data-layout": layout,
     style: {
       width: tableWidth
     }
   }, /*#__PURE__*/_react.default.createElement(StyledDiv, {
     innerRef: innerRef,
-    className: "".concat(_editorCommon.TableSharedCssClassName.TABLE_STICKY_WRAPPER),
+    className: "".concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER),
     style: {
       overflow: 'hidden'
     }

package/dist/cjs/react/nodes/table.js

@@ -29,7 +29,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _ui = require("@atlaskit/editor-common/ui");
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _types = require("@atlaskit/editor-common/types");
 
 var _style = require("../../ui/Renderer/style");
 
@@ -50,13 +56,13 @@ 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 orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
-  if (!tableOrderStatus || tableOrderStatus.order === _editorCommon.SortOrder.NO_ORDER) {
+  if (!tableOrderStatus || tableOrderStatus.order === _types.SortOrder.NO_ORDER) {
     return children;
   }
 
   var order = tableOrderStatus.order,
       columnIndex = tableOrderStatus.columnIndex;
-  var compareNodesInOrder = (0, _editorCommon.createCompareNodes)({
+  var compareNodesInOrder = (0, _utils.createCompareNodes)({
     getInlineCardTextFromStore: function getInlineCardTextFromStore(attrs) {
       var _ref = attrs,
           url = _ref.url;
@@ -68,7 +74,7 @@ var orderChildren = function orderChildren(children, tableNode, smartCardStorage
       return smartCardStorage.get(url) || null;
     }
   }, order);
-  var tableArray = (0, _editorCommon.convertProsemirrorTableNodeToArrayOfRows)(tableNode);
+  var tableArray = (0, _utils.convertProsemirrorTableNodeToArrayOfRows)(tableNode);
   var tableArrayWithChildren = tableArray.map(function (rowNodes, index) {
     return {
       rowNodes: rowNodes,
@@ -281,7 +287,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + _editorCommon.tableMarginTop - _sticky.tableStickyPadding;
+      return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + _styles.tableMarginTop - _sticky.tableStickyPadding;
     }
   }, {
     key: "stickyTop",
@@ -314,7 +320,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
           stickyHeaders = _this$props.stickyHeaders,
           tableNode = _this$props.tableNode;
       var stickyMode = this.state.stickyMode;
-      var tableWidth = (0, _editorCommon.calcTableWidth)(layout, renderWidth, false);
+      var tableWidth = (0, _styles.calcTableWidth)(layout, renderWidth, false);
       var lineLength = (0, _breakoutSsr.calcLineLength)(renderWidth, allowDynamicTextSizing);
       var left;
 
@@ -343,7 +349,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         rowHeight: this.headerRowHeight,
         allowDynamicTextSizing: allowDynamicTextSizing
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement(MainTableContainer, {
-        className: "".concat(_editorCommon.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames),
+        className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames),
         "data-layout": layout,
         innerRef: this.props.handleRef,
         style: {
@@ -351,7 +357,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
           left: left && left < 0 ? left : undefined
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _editorCommon.TableSharedCssClassName.TABLE_NODE_WRAPPER,
+        className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
         onScroll: this.props.stickyHeaders && this.onWrapperScrolled
       }, /*#__PURE__*/_react.default.createElement(_table.Table, {
@@ -394,7 +400,7 @@ var TableProcessor = /*#__PURE__*/function (_React$Component2) {
           smartCardStorage = _this2$props.smartCardStorage;
       var tableOrderStatus = _this2.state.tableOrderStatus;
 
-      if (allowColumnSorting && isHeaderRowEnabled(childrenArray) && tableNode && !(0, _editorCommon.hasMergedCell)(tableNode)) {
+      if (allowColumnSorting && isHeaderRowEnabled(childrenArray) && tableNode && !(0, _utils.hasMergedCell)(tableNode)) {
         return addSortableColumn(orderChildren(childrenArray, tableNode, smartCardStorage, tableOrderStatus), tableOrderStatus, _this2.changeSortOrder);
       }
 
@@ -432,7 +438,7 @@ var TableProcessor = /*#__PURE__*/function (_React$Component2) {
 
       var childrenArray = _react.default.Children.toArray(children);
 
-      var orderedChildren = (0, _editorCommon.compose)(this.addNumberColumnIndexes, this.addSortableColumn)(childrenArray);
+      var orderedChildren = (0, _utils.compose)(this.addNumberColumnIndexes, this.addSortableColumn)(childrenArray);
       return /*#__PURE__*/_react.default.createElement(TableContainer, this.props, orderedChildren);
     } // adds sortable + re-orders children
 
@@ -441,12 +447,12 @@ var TableProcessor = /*#__PURE__*/function (_React$Component2) {
 }(_react.default.Component);
 
 exports.TableProcessor = TableProcessor;
-var TableWithShadows = (0, _editorCommon.overflowShadow)(TableProcessor, {
-  overflowSelector: ".".concat(_editorCommon.TableSharedCssClassName.TABLE_NODE_WRAPPER)
+var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
+  overflowSelector: ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER)
 });
 
 var TableWithWidth = function TableWithWidth(props) {
-  return /*#__PURE__*/_react.default.createElement(_editorCommon.WidthConsumer, null, function (_ref2) {
+  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
     var width = _ref2.width;
     var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
     return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({