@atlaskit/editor-common 63.0.1 → 66.0.0

package/dist/es2019/styles/shared/table.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { DN20 } from '@atlaskit/theme/colors';
@@ -26,7 +26,8 @@ export const TableSharedCssClassName = {
   TABLE_CELL_WRAPPER: tableCellSelector,
   TABLE_HEADER_CELL_WRAPPER: tableHeaderSelector
 };
-const tableSharedStyle = css`
+
+const tableSharedStyle = props => css`
   .${TableSharedCssClassName.TABLE_CONTAINER} {
     position: relative;
     margin: 0 auto ${tableMarginBottom}px;
@@ -43,17 +44,25 @@ const tableSharedStyle = css`
     padding-left: ${akEditorTableNumberColumnWidth - 1}px;
     clear: both;
   }
+  .${TableSharedCssClassName.TABLE_NODE_WRAPPER} > table {
+    margin: ${tableMarginTop}px 0 0 0;
+  }
+
+  .${TableSharedCssClassName.TABLE_CONTAINER} > table,
+  .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table {
+    margin: ${tableMarginTop}px ${tableMarginSides}px 0 0;
+  }
+
   /* avoid applying styles to nested tables (possible via extensions) */
   .${TableSharedCssClassName.TABLE_CONTAINER} > table,
   .${TableSharedCssClassName.TABLE_NODE_WRAPPER} > table,
   .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table {
     border-collapse: collapse;
-    margin: ${tableMarginTop}px ${tableMarginSides}px 0 0;
     border: ${tableCellBorderWidth}px solid
       ${themed({
   light: akEditorTableBorder,
   dark: akEditorTableBorderDark
-})};
+})(props)};
     table-layout: fixed;
     font-size: 1em;
     width: 100%;
@@ -85,7 +94,7 @@ const tableSharedStyle = css`
           ${themed({
   light: akEditorTableBorder,
   dark: akEditorTableBorderDark
-})};
+})(props)};
         border-right-width: 0;
         border-bottom-width: 0;
         padding: ${tableCellPadding}px;
@@ -94,7 +103,7 @@ const tableSharedStyle = css`
 
         ${themed({
   dark: getTableCellBackgroundDarkModeColors
-})};
+})(props)};
 
         > *:first-child {
           margin-top: 0;
@@ -117,7 +126,7 @@ const tableSharedStyle = css`
         background-color: ${themed({
   light: akEditorTableToolbar,
   dark: akEditorTableToolbarDark
-})};
+})(props)};
         text-align: left;
 
         /* only apply this styling to codeblocks in default background headercells */
@@ -128,7 +137,7 @@ const tableSharedStyle = css`
   background: themed({
     light: 'rgb(235, 237, 240)',
     dark: 'rgb(36, 47, 66)'
-  }),
+  })(props),
   width: `${gridSize()}px`
 })};
             background-attachment: local, scroll, scroll;
@@ -136,13 +145,13 @@ const tableSharedStyle = css`
             background-color: ${themed({
   light: 'rgb(235, 237, 240)',
   dark: 'rgb(36, 47, 66)'
-})};
+})(props)};
 
             .line-number-gutter {
               background-color: ${themed({
   light: 'rgb(226, 229, 233)',
   dark: DN20
-})};
+})(props)};
             }
 
             /* this is only relevant to the element taken care of by renderer */
@@ -151,20 +160,20 @@ const tableSharedStyle = css`
   background: themed({
     light: 'rgb(235, 237, 240)',
     dark: 'rgb(36, 47, 66)'
-  }),
+  })(props),
   width: `${gridSize()}px`
 })}!important;
 
               background-color: ${themed({
   light: 'rgb(235, 237, 240)',
   dark: 'rgb(36, 47, 66)'
-})}!important;
+})(props)}!important;
 
               // selector lives inside @atlaskit/code
               --ds--code--line-number-bg-color: ${themed({
   light: 'rgb(226, 229, 233)',
   dark: DN20
-})};
+})(props)};
             }
           }
         }
@@ -172,6 +181,7 @@ const tableSharedStyle = css`
     }
   }
 `;
+
 export const calcTableWidth = (layout, containerWidth, addControllerPadding = true) => {
   switch (layout) {
     case 'full-width':

package/dist/es2019/styles/shared/task-decision.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
 export const TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap'

package/dist/es2019/styles/shared/text-color.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 export const textColorStyles = css`
   .fabric-text-color-mark {
     color: var(--custom-text-color, inherit);

package/dist/es2019/styles/shared/whitespace.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 const whitespaceSharedStyles = css`
   word-wrap: break-word;
   white-space: pre-wrap;

package/dist/es2019/types/collab.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,9 @@
 import React, { useMemo } from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider as DeprecatedThemeProvider } from 'styled-components';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { fontSize } from '@atlaskit/theme/constants';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
 import { WidthConsumer } from '../WidthProvider';
 
 function mapBreakpointToFontSize(breakpoint) {
@@ -35,13 +37,22 @@ export function BaseThemeWrapper({
   baseFontSize,
   children
 }) {
+  const {
+    mode
+  } = useGlobalTheme();
   const memoizedTheme = useMemo(() => ({
     baseFontSize: dynamicTextSizing ? mapBreakpointToFontSize(breakpoint) : baseFontSize || mapBreakpointToFontSize('S'),
-    layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : akEditorDefaultLayoutWidth
-  }), [breakpoint, dynamicTextSizing, baseFontSize]);
+    layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : akEditorDefaultLayoutWidth,
+    // Below is used for editor dark mode.
+    [CHANNEL]: {
+      mode
+    }
+  }), [breakpoint, dynamicTextSizing, baseFontSize, mode]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
-  }, children);
+  }, /*#__PURE__*/React.createElement(DeprecatedThemeProvider, {
+    theme: memoizedTheme
+  }, children));
 }
 export function BaseTheme({
   children,

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

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
-const CaptionWrapper = styled.div`
+const captionWrapperStyle = css`
   margin-top: 8px;
   text-align: center;
   position: relative;
   color: ${N400};
 `;
-const Placeholder = styled.p`
+const placeholderStyle = css`
   color: ${N200};
   position: absolute;
   top: 0;
@@ -28,10 +30,14 @@ export class CaptionComponent extends React.Component {
       }
     } = this.props;
     const showPlaceholder = !selected && !hasContent;
-    return /*#__PURE__*/React.createElement(CaptionWrapper, _extends({
+    return jsx("div", _extends({
       "data-media-caption": true,
       "data-testid": "media-caption"
-    }, dataAttributes), showPlaceholder ? /*#__PURE__*/React.createElement(Placeholder, null, formatMessage(messages.placeholder)) : null, children);
+    }, dataAttributes, {
+      css: captionWrapperStyle
+    }), showPlaceholder ? jsx("p", {
+      css: placeholderStyle
+    }, formatMessage(messages.placeholder)) : null, children);
   }
 
 }

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

@@ -1,5 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React, { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
-import styled, { css } from 'styled-components';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -38,13 +42,22 @@ const EXPAND_EXPANDED_BORDER_COLOR = themed({
   light: colors.N40A,
   dark: colors.DN50
 });
-export const ExpandIconWrapper = styled.div`
+export const ExpandIconWrapper = ({
+  children,
+  expanded
+}) => {
+  return jsx("div", {
+    css: props => expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props)
+  }, children);
+};
+
+const expandIconWrapperStyle = props => css`
   cursor: pointer;
   display: flex;
   color: ${themed({
   light: colors.N90,
   dark: '#d9dde3'
-})};
+})(props)};
   border-radius: ${gridSize() / 2}px;
   width: 24px;
   height: 24px;
@@ -54,69 +67,85 @@ export const ExpandIconWrapper = styled.div`
   }
 
   svg {
-    ${props => props.expanded ? 'transform: rotate(90deg);' : ''}
     transition: transform 0.2s ${akEditorSwoopCubicBezier};
   }
 `;
-export const ExpandLayoutWrapper = styled.div`
+
+const expandIconWrapperExpandedStyle = css`
+  svg {
+    transform: rotate(90deg);
+  }
+`;
+export const expandLayoutWrapperStyle = css`
   width: ${gridSize() * 3}px;
   height: ${gridSize() * 3}px;
 `;
-const ContainerStyles = css`
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${({
-  expanded,
-  focused
-}) => {
-  const expandedBorderColor = expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR;
-  return focused ? EXPAND_FOCUSED_BORDER_COLOR : expandedBorderColor;
-}};
-  border-radius: ${BORDER_RADIUS}px;
-  min-height: 25px;
-  background: ${({
-  expanded
-}) => !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND};
-  margin: ${props => `${gridSize() / 2 / fontSize()}rem ${// Only only these margins if the expand isn't editable
-// and is the root level expand.
-props['data-node-type'] === 'expand' ? `-${akLayoutGutterOffset}px` : `0`} 0`};
+export const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx("div", _extends({
+    css: expandLayoutWrapperStyle
+  }, rest, {
+    ref: ref
+  }), children);
+});
 
-  transition: background 0.3s ${akEditorSwoopCubicBezier},
-    border-color 0.3s ${akEditorSwoopCubicBezier};
-  padding: ${gridSize}px;
+const containerStyles = styleProps => {
+  const {
+    expanded,
+    focused
+  } = styleProps;
+  const marginTop = `${gridSize() / 2 / fontSize()}rem`;
+  const marginBottom = 0; // Only only these margins if the expand isn't editable
+  // and is the root level expand.
 
-  &:hover {
-    border: 1px solid ${themed({
-  light: colors.N50A,
-  dark: colors.DN50
-})};
-    background: ${EXPAND_SELECTED_BACKGROUND};
-  }
+  const marginHorizontal = styleProps['data-node-type'] === 'expand' ? `-${akLayoutGutterOffset}px` : 0;
+  const margin = `${marginTop} ${marginHorizontal} ${marginBottom}`;
+  return themeProps => css`
+    border-width: 1px;
+    border-style: solid;
+    border-color: ${focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR};
+    border-radius: ${BORDER_RADIUS}px;
+    min-height: 25px;
+    background: ${!expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps)};
+    margin: ${margin};
+
+    transition: background 0.3s ${akEditorSwoopCubicBezier},
+      border-color 0.3s ${akEditorSwoopCubicBezier};
+    padding: ${gridSize()}px;
+
+    &:hover {
+      border: 1px solid
+        ${themed({
+    light: colors.N50A,
+    dark: colors.DN50
+  })(themeProps)};
+      background: ${EXPAND_SELECTED_BACKGROUND(themeProps)};
+    }
 
-  td > &:first-child {
-    margin-top: 0;
+    td > &:first-child {
+      margin-top: 0;
+    }
+  `;
+};
+
+const contentStyles = styleProps => themeProps => css`
+  padding-top: ${styleProps.expanded ? gridSize() : 0}px;
+  padding-right: ${gridSize()}px;
+  padding-left: ${gridSize() * 4 - gridSize() / 2}px;
+  display: flow-root;
+
+  // The follow rules inside @supports block are added as a part of ED-8893
+  // The fix is targeting mobile bridge on iOS 12 or below,
+  // We should consider remove this fix when we no longer support iOS 12
+  @supports not (display: flow-root) {
+    width: 100%;
+    box-sizing: border-box;
   }
-`;
-const ContentStyles = css`
-  ${({
-  expanded
-}) => {
-  return css`
-      padding-top: ${expanded ? gridSize() : 0}px;
-      padding-right: ${gridSize()}px;
-      padding-left: ${gridSize() * 4 - gridSize() / 2}px;
-      display: table;
-      display: flow-root;
-
-      // The follow rules inside @supports block are added as a part of ED-8893
-      // The fix is targeting mobile bridge on iOS 12 or below,
-      // We should consider remove this fix when we no longer support iOS 12
-      @supports not (display: flow-root) {
-        width: 100%;
-        box-sizing: border-box;
-      }
-
-      ${!expanded ? `
+
+  ${!styleProps.expanded ? `
         .expand-content-wrapper, .nestedExpand-content-wrapper {
           /* We visually hide the content here to preserve the content during copy+paste */
           width: 100%;
@@ -128,10 +157,9 @@ const ContentStyles = css`
           user-select: none;
         }
       ` : ''}
-    `;
-}};
 `;
-const TitleInputStyles = css`
+
+const titleInputStyles = props => css`
   outline: none;
   border: none;
   font-size: ${relativeFontSizeToBase16(fontSize())};
@@ -140,7 +168,7 @@ const TitleInputStyles = css`
   color: ${themed({
   light: colors.N200A,
   dark: colors.DN600
-})};
+})(props)};
   background: transparent;
   display: flex;
   flex: 1;
@@ -152,10 +180,11 @@ const TitleInputStyles = css`
     color: ${themed({
   light: colors.N200A,
   dark: colors.DN600
-})};
+})(props)};
   }
 `;
-const TitleContainerStyles = css`
+
+const titleContainerStyles = props => css`
   padding: 0;
   display: flex;
   align-items: flex-start;
@@ -166,7 +195,7 @@ const TitleContainerStyles = css`
   color: ${themed({
   light: colors.N300A,
   dark: colors.DN600
-})};
+})(props)};
   overflow: hidden;
   cursor: pointer;
   // Prevent browser selection being inside the title container
@@ -176,9 +205,10 @@ const TitleContainerStyles = css`
     outline: 0;
   }
 `;
+
 export const sharedExpandStyles = {
-  TitleInputStyles,
-  TitleContainerStyles,
-  ContainerStyles,
-  ContentStyles
+  titleInputStyles,
+  titleContainerStyles,
+  containerStyles,
+  contentStyles
 };

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

@@ -9,7 +9,7 @@ const isMissingIntlProviderInAncestryError = err => {
   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');
 };
 
-export class IntlNextErrorBoundary extends React.Component {
+export class IntlErrorBoundary extends React.Component {
   constructor(...args) {
     super(...args);
 

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

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { calcPxFromPct } from './grid';
-import { MediaSingleWrapper, MediaWrapper } from './styled';
+import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
 export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
@@ -21,7 +23,8 @@ export default function MediaSingle({
   nodeType = 'mediaSingle',
   fullWidthMode,
   lineLength,
-  hasFallbackContainer = true
+  hasFallbackContainer = true,
+  handleMediaSingleRef
 }) {
   const children = React.Children.toArray(propsChildren);
 
@@ -73,12 +76,15 @@ export default function MediaSingle({
   }
 
   const [media, caption] = children;
-  return /*#__PURE__*/React.createElement(MediaSingleWrapper, {
-    width: width,
-    layout: layout,
-    containerWidth: containerWidth,
-    pctWidth: pctWidth,
-    fullWidthMode: fullWidthMode,
+  return jsx("div", {
+    ref: handleMediaSingleRef,
+    css: MediaSingleDimensionHelper({
+      width,
+      layout,
+      containerWidth,
+      pctWidth,
+      fullWidthMode
+    }),
     "data-layout": layout,
     "data-width": pctWidth,
     "data-node-type": nodeType,
@@ -86,7 +92,7 @@ export default function MediaSingle({
       'is-loading': isLoading,
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     })
-  }, /*#__PURE__*/React.createElement(MediaWrapper, {
+  }, jsx(MediaWrapper, {
     hasFallbackContainer: hasFallbackContainer,
     height: mediaWrapperHeight,
     paddingBottom: paddingBottom

package/dist/es2019/ui/MediaSingle/link.js

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-export const MediaLink = styled.a`
+import { css } from '@emotion/react';
+export const mediaLinkStyle = css`
   position: absolute;
   background: transparent;
   top: 0;
@@ -9,5 +9,4 @@ export const MediaLink = styled.a`
   cursor: pointer;
   width: 100%;
   height: 100%;
-`;
-MediaLink.displayName = 'MediaLink';
+`;

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

@@ -1,4 +1,6 @@
-import styled, { css } from 'styled-components';
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 
@@ -156,24 +158,20 @@ const RenderFallbackContainer = ({
   ` : ''}
 `;
 
-export const MediaWrapper = styled.div`
+export const mediaWrapperStyle = props => css`
   position: relative;
 
-  ${RenderFallbackContainer}
+  ${RenderFallbackContainer(props)}
 
   /* Editor */
   & > figure {
-    position: ${({
-  hasFallbackContainer
-}) => hasFallbackContainer ? 'absolute' : 'relative'};
+    position: ${props.hasFallbackContainer ? 'absolute' : 'relative'};
     height: 100%;
     width: 100%;
   }
 
   & > div {
-    position: ${({
-  hasFallbackContainer
-}) => hasFallbackContainer ? 'absolute' : 'relative'};
+    position: ${props.hasFallbackContainer ? 'absolute' : 'relative'};
     height: 100%;
     width: 100%;
   }
@@ -192,7 +190,10 @@ export const MediaWrapper = styled.div`
     }
   }
 `;
-export const MediaSingleWrapper = styled.div`
-  ${MediaSingleDimensionHelper};
-`;
+export const MediaWrapper = ({
+  children,
+  ...rest
+}) => jsx("div", {
+  css: mediaWrapperStyle(rest)
+}, children);
 MediaWrapper.displayName = 'WrapperMediaSingle';

package/dist/es2019/ui/Mention/index.js

@@ -11,7 +11,6 @@ export default class Mention extends PureComponent {
         accessLevel,
         eventHandlers,
         id,
-        portal,
         text
       } = this.props;
       const {
@@ -24,8 +23,7 @@ export default class Mention extends PureComponent {
         accessLevel: accessLevel,
         eventHandlers: eventHandlers,
         mentionProvider: mentionProvider,
-        profilecardProvider: profilecardProvider,
-        portal: portal
+        profilecardProvider: profilecardProvider
       });
     });