@atlaskit/renderer 84.1.0 → 87.0.0

package/dist/es2019/react/nodes/embedCard.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo, useContext, useState, useRef } from 'react';
 import { Card, Context as CardContext, EmbedResizeMessageListener } from '@atlaskit/smart-card';
-import { WidthConsumer, mapBreakpointToLayoutMaxWidth, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common';
+import { WidthConsumer, mapBreakpointToLayoutMaxWidth, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, getAkEditorFullPageMaxWidth } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';

package/dist/es2019/react/nodes/emoji.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PureComponent } from 'react';
-import { Emoji } from '@atlaskit/editor-common';
+import { Emoji } from '@atlaskit/editor-common/emoji';
 export default class EmojiItem extends PureComponent {
   render() {
     const {

package/dist/es2019/react/nodes/extension.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
-import { calcBreakoutWidth, overflowShadow, WidthConsumer } from '@atlaskit/editor-common';
+import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { RendererCssClassName } from '../../consts';
 export const renderExtension = (content, layout, options = {}, removeOverflow) => {
   const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : ''; // by default, we assume the extension is at top level, (direct child of doc node)

package/dist/es2019/react/nodes/heading-anchor.js

@@ -39,11 +39,19 @@ class HeadingAnchor extends React.PureComponent {
 
     _defineProperty(this, "setTooltipState", (message, isClicked = false) => {
       this.setState({
+        // TODO: ED-14403 investigate why this does not translate
         tooltipMessage: this.props.intl.formatMessage(message),
         isClicked
       });
     });
 
+    _defineProperty(this, "getCopyAriaLabel", () => {
+      const {
+        copyAriaLabel
+      } = headingAnchorLinkMessages;
+      return this.props.intl.formatMessage(copyAriaLabel);
+    });
+
     _defineProperty(this, "copyToClipboard", async event => {
       const {
         copiedHeadingLinkToClipboard,
@@ -66,9 +74,10 @@ class HeadingAnchor extends React.PureComponent {
     _defineProperty(this, "renderAnchorButton", () => {
       return /*#__PURE__*/React.createElement(CopyAnchorButton, {
         onMouseLeave: this.resetMessage,
-        onClick: this.copyToClipboard
+        onClick: this.copyToClipboard,
+        "aria-label": this.state.tooltipMessage
       }, /*#__PURE__*/React.createElement(LinkIcon, {
-        label: "copy",
+        label: this.getCopyAriaLabel(),
         size: this.props.level > 3 ? 'small' : 'medium',
         primaryColor: this.state.isClicked ? B400 : N200
       }));

package/dist/es2019/react/nodes/index.js

@@ -1,7 +1,7 @@
+import Loadable from 'react-loadable';
 import Blockquote from './blockquote';
 import BodiedExtension from './bodiedExtension';
 import BulletList from './bulletList';
-import DecisionList from './decisionList';
 import Doc, { DocWithSelectAllTrap } from './doc';
 import Extension from './extension';
 import HardBreak from './hardBreak';
@@ -10,33 +10,40 @@ import InlineExtension from './inlineExtension';
 import LayoutSection from './layoutSection';
 import LayoutColumn from './layoutColumn';
 import ListItem from './listItem';
-import MediaSingle from './mediaSingle';
 import Caption from './caption';
 import OrderedList from './orderedList';
-import Panel from './panel';
 import Paragraph from './paragraph';
 import Placeholder from './placeholder';
 import Rule from './rule';
-import TaskList from './taskList';
 import Table from './table';
 import { TableCell, TableHeader } from './tableCell';
 import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
-import Loadable from 'react-loadable';
-import EmbedCard from './embedCard';
-import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common';
+import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
 const CodeBlock = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_CodeBlock" */
   './codeBlock').then(mod => mod.default),
   loading: () => null
 });
+const TaskList = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_TaskList" */
+  './taskList').then(mod => mod.default),
+  loading: () => null
+});
 const TaskItem = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_TaskItem" */
   './taskItem').then(mod => mod.default),
   loading: () => null
 });
+const DecisionList = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_DecisionList" */
+  './decisionList').then(mod => mod.default),
+  loading: () => null
+});
 const DecisionItem = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_DecisionItem" */
@@ -61,6 +68,18 @@ const Emoji = Loadable({
   './emoji').then(mod => mod.default),
   loading: () => null
 });
+const Panel = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_Panel" */
+  './panel').then(mod => mod.default),
+  loading: () => null
+});
+const EmbedCard = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_EmbedCard" */
+  './embedCard').then(mod => mod.default),
+  loading: () => null
+});
 const InlineCard = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_InlineCard" */
@@ -91,6 +110,12 @@ const MediaInline = Loadable({
   './mediaInline').then(mod => mod.default),
   loading: () => null
 });
+const MediaSingle = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_MediaSingle" */
+  './mediaSingle').then(mod => mod.default),
+  loading: () => null
+});
 const Mention = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_Mention" */

package/dist/es2019/react/nodes/inlineCard.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { Card } from '@atlaskit/smart-card';
-import { UnsupportedInline } from '@atlaskit/editor-common';
+import { CardSSR } from '@atlaskit/smart-card/ssr';
+import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
@@ -11,7 +12,8 @@ const InlineCard = props => {
     url,
     data,
     eventHandlers,
-    portal
+    portal,
+    smartLinks
   } = props;
   const onClick = getCardClickHandler(eventHandlers, url);
   const cardProps = {
@@ -20,6 +22,14 @@ const InlineCard = props => {
     onClick,
     container: portal
   };
+
+  if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
+    return /*#__PURE__*/React.createElement(CardSSR, {
+      appearance: "inline",
+      url: url
+    });
+  }
+
   return /*#__PURE__*/React.createElement("span", {
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,

package/dist/es2019/react/nodes/layoutColumn.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WidthProvider, ClearNextSiblingMarginTop } from '@atlaskit/editor-common';
+import { WidthProvider, ClearNextSiblingMarginTop } from '@atlaskit/editor-common/ui';
 export default function LayoutSection(props) {
   return /*#__PURE__*/React.createElement("div", {
     "data-layout-column": true,

package/dist/es2019/react/nodes/media.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
-import { WithProviders, MediaLink } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { MediaLink } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../ui/MediaCard';
 import { getEventHandler } from '../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics/enums';

package/dist/es2019/react/nodes/mediaInline.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { MediaInlineCard } from '@atlaskit/media-card';
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 export const RenderMediaInline = props => {
   const {
     mediaProvider

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

@@ -1,11 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { mapBreakpointToLayoutMaxWidth, WidthConsumer } from '@atlaskit/editor-common';
-import { akEditorFullWidthLayoutWidth, getAkEditorFullPageMaxWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { Component, default as React } from 'react';
+import { default as React } from 'react';
 import { injectIntl } from 'react-intl-next';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { mapBreakpointToLayoutMaxWidth, getBreakpoint, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { akEditorFullWidthLayoutWidth, getAkEditorFullPageMaxWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
+import { useObservedWidth } from '../../hooks/use-observed-width';
 import { ExtendedUIMediaSingle } from './styles';
-import { getMediaFeatureFlag } from '@atlaskit/media-common';
 const DEFAULT_WIDTH = 250;
 const DEFAULT_HEIGHT = 200;
 
@@ -39,131 +39,151 @@ export const getMediaContainerWidth = (currentContainerWidth, layout) => {
   return !currentContainerWidth && layout !== 'full-width' && layout !== 'wide' ? akEditorDefaultLayoutWidth : currentContainerWidth;
 };
 
-class MediaSingle extends Component {
-  constructor(props) {
-    super(props);
+const MediaSingle = props => {
+  var _ref$current;
 
-    _defineProperty(this, "onExternalImageLoaded", ({
+  const {
+    rendererAppearance,
+    featureFlags,
+    isInsideOfBlockNode,
+    allowDynamicTextSizing,
+    layout,
+    children,
+    width: pctWidth
+  } = props;
+  const isCaptionsFlaggedOn = getMediaFeatureFlag('captions', featureFlags);
+  const [externalImageDimensions, setExternalImageDimensions] = React.useState({
+    width: 0,
+    height: 0
+  });
+  const ref = React.useRef(null);
+  const onExternalImageLoaded = React.useCallback(({
+    width,
+    height
+  }) => {
+    setExternalImageDimensions({
       width,
       height
-    }) => {
-      this.setState({
-        width,
-        height
-      });
     });
+  }, []);
+  const observedWidthFlag = getMediaFeatureFlag('observedWidth', featureFlags);
+  const {
+    width: observedWidth
+  } = useObservedWidth((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement, observedWidthFlag);
+  let media;
+  const [node, caption] = React.Children.toArray(children);
 
-    _defineProperty(this, "isCaptionsFlaggedOn", getMediaFeatureFlag('captions', this.props.featureFlags));
+  if (!isMediaElement(node)) {
+    const mediaElement = checkForMediaElement(node.props.children);
 
-    this.state = {}; // Need to initialize with empty state.
-  }
+    if (!mediaElement) {
+      return node;
+    }
 
-  render() {
-    const {
-      props
-    } = this;
-    let media;
-    const [node, caption] = React.Children.toArray(props.children);
+    media = mediaElement;
+  } else {
+    media = node;
+  }
 
-    if (!isMediaElement(node)) {
-      const mediaElement = checkForMediaElement(node.props.children);
+  let {
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    type
+  } = media.props;
 
-      if (!mediaElement) {
-        return node;
-      }
+  if (type === 'external') {
+    const {
+      width: stateWidth,
+      height: stateHeight
+    } = externalImageDimensions;
 
-      media = mediaElement;
-    } else {
-      media = node;
+    if (width === null) {
+      width = stateWidth || DEFAULT_WIDTH;
     }
 
-    let {
-      width = DEFAULT_WIDTH,
-      height = DEFAULT_HEIGHT,
-      type
-    } = media.props;
-
-    if (type === 'external') {
-      const {
-        width: stateWidth,
-        height: stateHeight
-      } = this.state;
-
-      if (width === null) {
-        width = stateWidth || DEFAULT_WIDTH;
-      }
+    if (height === null) {
+      height = stateHeight || DEFAULT_HEIGHT;
+    }
+  }
 
-      if (height === null) {
-        height = stateHeight || DEFAULT_HEIGHT;
+  if (width === null) {
+    width = DEFAULT_WIDTH;
+    height = DEFAULT_HEIGHT;
+  } // TODO: put appearance-based padding into theme instead
+
+
+  const padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
+  const isFullWidth = rendererAppearance === 'full-width';
+
+  const calcDimensions = (mediaContainerWidth, mediaBreakpoint) => {
+    const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
+    const breakpoint = mediaBreakpoint || getBreakpoint(containerWidth);
+    const maxWidth = containerWidth;
+    const maxHeight = height / width * maxWidth;
+    const cardDimensions = {
+      width: `${maxWidth}px`,
+      height: `${maxHeight}px`
+    };
+    let nonFullWidthSize = containerWidth;
+
+    if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
+      const isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+
+      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
+        nonFullWidthSize = mapBreakpointToLayoutMaxWidth(breakpoint);
+      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+      } else {
+        nonFullWidthSize = containerWidth - padding;
       }
     }
 
-    if (width === null) {
-      width = DEFAULT_WIDTH;
-      height = DEFAULT_HEIGHT;
-    } // TODO: put appearance-based padding into theme instead
-
-
+    const minWidth = Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding);
+    const lineLength = isFullWidth ? minWidth : nonFullWidthSize;
+    return {
+      cardDimensions,
+      lineLength,
+      containerWidth
+    };
+  };
+
+  const originalDimensions = {
+    height,
+    width
+  };
+
+  const renderMediaSingle = (renderWidth, mediaBreakpoint) => {
     const {
-      rendererAppearance,
+      cardDimensions,
+      lineLength,
+      containerWidth
+    } = calcDimensions(renderWidth, mediaBreakpoint);
+    const mediaComponent = /*#__PURE__*/React.cloneElement(media, {
+      resizeMode: 'stretchy-fit',
+      cardDimensions,
+      originalDimensions,
+      onExternalImageLoaded,
+      disableOverlay: true,
       featureFlags
-    } = this.props;
-    const padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
-    return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
-      width: widthConsumerValue,
-      breakpoint
-    }) => {
-      const containerWidth = getMediaContainerWidth(widthConsumerValue, props.layout);
-      const {
-        isInsideOfBlockNode,
-        allowDynamicTextSizing
-      } = this.props;
-      const maxWidth = containerWidth;
-      const maxHeight = height / width * maxWidth;
-      const cardDimensions = {
-        width: `${maxWidth}px`,
-        height: `${maxHeight}px`
-      };
-      const isFullWidth = rendererAppearance === 'full-width';
-      let nonFullWidthSize = containerWidth;
-
-      if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
-        const isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
-
-        if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-          nonFullWidthSize = mapBreakpointToLayoutMaxWidth(breakpoint);
-        } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-          nonFullWidthSize = getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
-        } else {
-          nonFullWidthSize = containerWidth - padding;
-        }
-      }
-
-      const lineLength = isFullWidth ? Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-      const originalDimensions = {
-        height,
-        width
-      };
-      const mediaComponent = /*#__PURE__*/React.cloneElement(media, {
-        resizeMode: 'stretchy-fit',
-        cardDimensions,
-        originalDimensions,
-        onExternalImageLoaded: this.onExternalImageLoaded,
-        disableOverlay: true,
-        featureFlags: featureFlags
-      });
-      return /*#__PURE__*/React.createElement(ExtendedUIMediaSingle, {
-        layout: props.layout,
-        width: width,
-        height: height,
-        lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
-        containerWidth: containerWidth,
-        pctWidth: props.width,
-        fullWidthMode: isFullWidth
-      }, /*#__PURE__*/React.createElement(React.Fragment, null, mediaComponent), this.isCaptionsFlaggedOn && caption);
     });
-  }
-
-}
+    return /*#__PURE__*/React.createElement(ExtendedUIMediaSingle, {
+      handleMediaSingleRef: ref,
+      layout: layout,
+      width: width,
+      height: height,
+      lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
+      containerWidth: containerWidth,
+      pctWidth: pctWidth,
+      fullWidthMode: isFullWidth
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
+  };
+
+  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+    width,
+    breakpoint
+  }) => {
+    return renderMediaSingle(width, breakpoint);
+  });
+};
 
 export default injectIntl(MediaSingle);

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { MediaSingle as UIMediaSingle } from '@atlaskit/editor-common';
+import { MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 export const ExtendedUIMediaSingle = styled(UIMediaSingle)`
   ${({
   layout

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

@@ -1,12 +1,11 @@
 import React from 'react';
 import { PureComponent } from 'react';
-import { Mention } from '@atlaskit/editor-common';
+import { Mention } from '@atlaskit/editor-common/mention';
 export default class MentionItem extends PureComponent {
   render() {
     const {
       eventHandlers,
       id,
-      portal,
       providers,
       text,
       accessLevel
@@ -16,7 +15,6 @@ export default class MentionItem extends PureComponent {
       text: text,
       accessLevel: accessLevel,
       providers: providers,
-      portal: portal,
       eventHandlers: eventHandlers && eventHandlers.mention
     });
   }

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

@@ -1,19 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
-import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
-import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
-import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
-import NoteIcon from '@atlaskit/icon/glyph/editor/note';
-import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
 import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { themed } from '@atlaskit/theme';
-import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common';
+import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common/styles';
+import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 const PanelStyled = styled.div`
   ${props => {
   if (props['data-panel-type'] !== PanelType.CUSTOM || !props.backgroundColor) {
@@ -32,12 +28,12 @@ const PanelStyled = styled.div`
 }}
 `;
 const panelIcons = {
-  info: InfoIcon,
-  success: SuccessIcon,
-  note: NoteIcon,
+  info: PanelInfoIcon,
+  success: PanelSuccessIcon,
+  note: PanelNoteIcon,
   tip: TipIcon,
-  warning: WarningIcon,
-  error: ErrorIcon,
+  warning: PanelWarningIcon,
+  error: PanelErrorIcon,
   custom: EmojiIcon
 };
 
@@ -47,6 +43,8 @@ const Panel = props => {
     panelType: type,
     panelColor,
     panelIcon,
+    panelIconId,
+    panelIconText,
     providers,
     children
   } = props; // only allow custom panel type if flag is set
@@ -58,6 +56,8 @@ const Panel = props => {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
         return /*#__PURE__*/React.createElement(EmojiItem, {
+          id: panelIconId,
+          text: panelIconText,
           shortName: panelIcon,
           providers: providers
         });
@@ -87,6 +87,8 @@ const Panel = props => {
     "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.createElement("div", {
     className: PanelSharedCssClassName.content

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

@@ -16,7 +16,8 @@ export default class Status extends PureComponent {
     }, /*#__PURE__*/React.createElement(AkStatus, {
       text: text,
       color: color,
-      localId: localId
+      localId: localId,
+      role: "presentation"
     }));
   }
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common';
+import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { calcLineLength } from '../../../ui/Renderer/breakout-ssr';
 // we allow scaling down column widths by no more than 15%

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { TableSharedCssClassName } from '@atlaskit/editor-common';
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
 const {

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

@@ -2,7 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import styled from 'styled-components';
-import { calcTableWidth, WidthConsumer, TableSharedCssClassName, overflowShadow, createCompareNodes, SortOrder, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose, tableMarginTop } from '@atlaskit/editor-common';
+import { calcTableWidth, TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
+import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
+import { SortOrder } from '@atlaskit/editor-common/types';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';