@atlaskit/renderer 92.0.1 → 93.0.0

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

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { N200, N500, B400 } from '@atlaskit/theme/colors';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import Tooltip from '@atlaskit/tooltip';
@@ -13,12 +15,12 @@ const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+  return jsx("span", _extends({}, rest, {
     className: HeadingAnchorWrapperClassName,
     ref: ref
   }), children);
 });
-const CopyAnchorButton = styled.button`
+const copyAnchorButtonStyles = css`
   display: inline;
   outline: none;
   background-color: transparent;
@@ -72,11 +74,12 @@ class HeadingAnchor extends React.PureComponent {
     });
 
     _defineProperty(this, "renderAnchorButton", () => {
-      return /*#__PURE__*/React.createElement(CopyAnchorButton, {
+      return jsx("button", {
+        css: copyAnchorButtonStyles,
         onMouseLeave: this.resetMessage,
         onClick: this.copyToClipboard,
         "aria-label": this.state.tooltipMessage
-      }, /*#__PURE__*/React.createElement(LinkIcon, {
+      }, jsx(LinkIcon, {
         label: this.getCopyAriaLabel(),
         size: this.props.level > 3 ? 'small' : 'medium',
         primaryColor: this.state.isClicked ? B400 : N200
@@ -97,7 +100,7 @@ class HeadingAnchor extends React.PureComponent {
       // We set the key to the message to ensure it remounts when the message
       // changes, so that it correctly repositions.
       // @see https://ecosystem.atlassian.net/projects/AK/queues/issue/AK-6548
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         tag: CopyAnchorWrapperWithRef,
         content: tooltipMessage,
         position: "top",

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

@@ -1,11 +1,13 @@
-import { default as React } from 'react';
+/** @jsx jsx */
+import { default as React, Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { mapBreakpointToLayoutMaxWidth, getBreakpoint, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { mapBreakpointToLayoutMaxWidth, getBreakpoint, MediaSingle as UIMediaSingle, 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 { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
 const DEFAULT_WIDTH = 250;
 const DEFAULT_HEIGHT = 200;
 
@@ -166,7 +168,9 @@ const MediaSingle = props => {
       disableOverlay: true,
       featureFlags
     });
-    return /*#__PURE__*/React.createElement(ExtendedUIMediaSingle, {
+    const uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
+    return jsx(UIMediaSingle, {
+      css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,
       width: width,
@@ -175,10 +179,10 @@ const MediaSingle = props => {
       containerWidth: containerWidth,
       pctWidth: pctWidth,
       fullWidthMode: isFullWidth
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
+    }, jsx(Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
   };
 
-  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : jsx(WidthConsumer, null, ({
     width,
     breakpoint
   }) => {

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

@@ -1,10 +1,9 @@
-import styled from 'styled-components';
-import { MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
-export const ExtendedUIMediaSingle = styled(UIMediaSingle)`
-  ${({
-  layout
-}) => layout === 'full-width' || layout === 'wide' ? `
+/** @jsx jsx */
+import { css } from '@emotion/react';
+export const uiMediaSingleBaseStyles = css`
+  transition: all 0.1s linear;
+`;
+export const uiMediaSingleLayoutStyles = css`
   margin-left: 50%;
   transform: translateX(-50%);
-  ` : ``} transition: all 0.1s linear;
 `;

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

@@ -1,5 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -10,23 +13,27 @@ import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions be
 import { themed } from '@atlaskit/theme';
 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) {
-    return '';
-  } // Similar to mainDynamicStyles()
 
+const PanelStyled = props => {
+  let styles = themeProps => css``;
 
-  return `
+  if (props['data-panel-type'] === PanelType.CUSTOM && props.backgroundColor) {
+    styles = themeProps => css`
       &[data-panel-type=${PanelType.CUSTOM}] {
         background-color: ${props.backgroundColor};
         ${themed({
-    dark: getPanelBackgroundDarkModeColors
-  })};
+      dark: getPanelBackgroundDarkModeColors
+    })(themeProps)};
       }
     `;
-}}
-`;
+  }
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
+
+PanelStyled.displayName = 'PanelStyled';
 const panelIcons = {
   info: PanelInfoIcon,
   success: PanelSuccessIcon,
@@ -55,7 +62,7 @@ const Panel = props => {
   const getIcon = () => {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return /*#__PURE__*/React.createElement(EmojiItem, {
+        return jsx(EmojiItem, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -67,7 +74,7 @@ const Panel = props => {
     }
 
     const Icon = panelIcons[panelType];
-    return /*#__PURE__*/React.createElement(Icon, {
+    return jsx(Icon, {
       label: `Panel ${panelType}`
     });
   };
@@ -76,13 +83,13 @@ const Panel = props => {
     const icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
   };
 
-  return /*#__PURE__*/React.createElement(PanelStyled, {
+  return jsx(PanelStyled, {
     className: PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
@@ -90,7 +97,7 @@ const Panel = props => {
     "data-panel-icon-id": panelIconId,
     "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor
-  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
+  }, renderIcon(), jsx("div", {
     className: PanelSharedCssClassName.content
   }, children));
 };

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

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
@@ -10,38 +11,30 @@ import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export const tableStickyPadding = 8;
-// creates a new stacking context and places the div in the same
-// position as the table
-const RelativeTableDiv = styled.div.attrs({
-  style: ({
-    left,
-    top
-  }) => ({
-    left: left && left < 0 ? left : undefined,
-    top
-  })
-})`
-  position: relative;
-`;
-export const FixedTableDiv = styled.div.attrs({
-  style: ({
-    top,
-    wrapperWidth
-  }) => ({
-    top,
-    width: wrapperWidth
-  })
-})`
-  ${props => props.mode === 'stick' ? 'position: fixed' : ''};
-  ${props => props.mode === 'pin-bottom' ? 'position: absolute' : ''};
-  ${props => props.mode === 'none' ? 'display: none' : ''};
+const fixedTableDivModeToPosition = {
+  stick: 'fixed',
+  'pin-bottom': 'absolute'
+};
 
-  z-index: ${akEditorStickyHeaderZIndex};
+const getModeSpecificStyles = mode => {
+  if (mode === 'none') {
+    return css`
+      display: none;
+    `;
+  } else {
+    return css`
+      position: ${fixedTableDivModeToPosition[mode]};
+    `;
+  }
+};
 
-  // Fix this when move we move this to use emotion
-  &&&
+const fixedTableDivStaticStyles = (top, width) => css`
+  top: ${top}px;
+  width: ${width}px;
+  z-index: ${akEditorStickyHeaderZIndex};
+  &
     .${TableSharedCssClassName.TABLE_CONTAINER},
-    &&&
+    &
     .${TableSharedCssClassName.TABLE_STICKY_WRAPPER}
     > table {
     margin-top: 0;
@@ -56,15 +49,26 @@ export const FixedTableDiv = styled.div.attrs({
     display: none;
   }
 
-  &&&
+  &
     .${TableSharedCssClassName.TABLE_CONTAINER}.right-shadow::after,
-    &&&
+    &
     .${TableSharedCssClassName.TABLE_CONTAINER}.left-shadow::before {
     top: 0px;
     height: 100%;
   }
 `;
-const StyledDiv = styled.div``;
+
+export const FixedTableDiv = props => {
+  const {
+    top,
+    wrapperWidth,
+    mode
+  } = props;
+  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
+  return jsx("div", {
+    css: fixedTableCss
+  }, props.children);
+};
 export const StickyTable = ({
   top,
   left,
@@ -81,26 +85,29 @@ export const StickyTable = ({
   allowDynamicTextSizing,
   rowHeight
 }) => {
-  return /*#__PURE__*/React.createElement(RelativeTableDiv, {
-    left: left,
-    top: mode === 'pin-bottom' ? top : undefined
-  }, /*#__PURE__*/React.createElement(FixedTableDiv, {
+  return jsx("div", {
+    css: {
+      left: left && left < 0 ? left : undefined,
+      top: mode === 'pin-bottom' ? top : undefined,
+      position: 'relative'
+    }
+  }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
-  }, /*#__PURE__*/React.createElement(StyledDiv, {
+  }, jsx("div", {
     className: `${TableSharedCssClassName.TABLE_CONTAINER} ${shadowClassNames}`,
     "data-layout": layout,
     style: {
       width: tableWidth
     }
-  }, /*#__PURE__*/React.createElement(StyledDiv, {
-    innerRef: innerRef,
+  }, jsx("div", {
+    ref: innerRef,
     className: `${TableSharedCssClassName.TABLE_STICKY_WRAPPER}`,
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, jsx(Table, {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,

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

@@ -1,7 +1,6 @@
 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, 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';
@@ -102,8 +101,6 @@ const tableCanBeSticky = (node, children) => {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 
-const MainTableContainer = styled.div``;
-
 const canUseLinelength = appearance => appearance === 'full-page' || appearance === 'mobile';
 
 export class TableContainer extends React.Component {
@@ -290,10 +287,10 @@ export class TableContainer extends React.Component {
       columnWidths: columnWidths,
       rowHeight: this.headerRowHeight,
       allowDynamicTextSizing: allowDynamicTextSizing
-    }, [children && children[0]]), /*#__PURE__*/React.createElement(MainTableContainer, {
+    }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames}`,
       "data-layout": layout,
-      innerRef: this.props.handleRef,
+      ref: this.props.handleRef,
       style: {
         width: tableWidth,
         left: left && left < 0 ? left : undefined

package/dist/es2019/react/utils/performance/RenderTracking.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import debounce from 'lodash/debounce';
+import { useComponentRenderTracking } from '@atlaskit/editor-common/utils';
+import { EVENT_TYPE } from '../../../analytics/enums';
+export function RenderTracking(props) {
+  const debouncedHandleAnalyticsEvent = useMemo(() => debounce(props.handleAnalyticsEvent, 500), [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: ({
+      renderCount,
+      propsDifference,
+      componentId
+    }) => {
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        action: props.action,
+        actionSubject: props.actionSubject,
+        attributes: {
+          count: renderCount,
+          propsDifference: propsDifference,
+          componentId
+        },
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
+  return null;
+}

package/dist/es2019/ui/Expand.js

@@ -1,20 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import React, { forwardRef, useRef, useCallback } from 'react';
-import { jsx } from '@emotion/react';
-import styled from 'styled-components';
+import React, { useRef, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
-import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, ExpandLayoutWrapper, clearNextSiblingMarginTopStyle } from '@atlaskit/editor-common/ui';
+import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, clearNextSiblingMarginTopStyle, ExpandLayoutWrapperWithRef } from '@atlaskit/editor-common/ui';
 import { akEditorLineHeight, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { PLATFORM, MODE } from '../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics/enums';
 import { injectIntl } from 'react-intl-next';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
 import _uniqueId from 'lodash/uniqueId';
-const Title = styled.span`
+const titleStyles = css`
   outline: none;
   border: none;
   font-size: ${relativeFontSizeToBase16(fontSize())};
@@ -26,29 +25,53 @@ const Title = styled.span`
   padding: 0 0 0 ${gridSize() / 2}px;
   text-align: left;
 `;
-const Container = styled.div`
-  ${sharedExpandStyles.ContainerStyles}
-  padding: 0;
-  padding-bottom: ${props => props.expanded ? gridSize() : 0}px;
-`;
-const TitleContainer = styled.button`
-  ${sharedExpandStyles.TitleContainerStyles}
-  padding: ${gridSize()}px;
-  padding-bottom: ${props => !props.expanded ? gridSize() : 0}px;
-`;
+
+const Container = props => {
+  const paddingBottom = `${props.expanded ? gridSize() : 0}px`;
+  const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
+
+  const styles = themeProps => css`
+    ${sharedContainerStyles(themeProps)}
+    padding: 0;
+    padding-bottom: ${paddingBottom};
+  `;
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
+
+const TitleContainer = props => {
+  const paddingBottom = `${!props.expanded ? gridSize() : 0}px`;
+
+  const styles = themeProps => css`
+    ${sharedExpandStyles.titleContainerStyles(themeProps)}
+    padding: ${gridSize()}px;
+    padding-bottom: ${paddingBottom};
+  `;
+
+  return jsx("button", _extends({
+    css: styles
+  }, props), props.children);
+};
+
 TitleContainer.displayName = 'TitleContainerButton';
-const ContentContainer = styled.div`
-  ${sharedExpandStyles.ContentStyles};
-  padding-right: ${gridSize() * 2}px;
-  padding-left: ${gridSize() * 5 - gridSize() / 2}px;
-  visibility: ${props => props.expanded ? 'visible' : 'hidden'};
-`;
-const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function WithRef(props, ref) {
-  // @ts-ignore: incorrect innerRef typing
-  return jsx(ExpandLayoutWrapper, _extends({}, props, {
-    innerRef: ref
-  }));
-});
+
+const ContentContainer = props => {
+  const sharedContentStyles = sharedExpandStyles.contentStyles(props);
+  const visibility = props.expanded ? 'visible' : 'hidden';
+
+  const styles = themeProps => css`
+    ${sharedContentStyles(themeProps)};
+    padding-right: ${gridSize() * 2}px;
+    padding-left: ${gridSize() * 5 - gridSize() / 2}px;
+    visibility: ${visibility};
+  `;
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
 
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
@@ -115,7 +138,8 @@ function Expand({
     expanded: expanded
   }, jsx(ChevronRightIcon, {
     label: label
-  }))), jsx(Title, {
+  }))), jsx("span", {
+    css: titleStyles,
     id: id
   }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded

package/dist/es2019/ui/MediaCard.js

@@ -1,11 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { filter } from '@atlaskit/adf-utils';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
-import styled from 'styled-components';
 const mediaIdentifierMap = new Map();
 export const getListOfIdentifiersFromDoc = doc => {
   if (!doc) {
@@ -269,7 +267,7 @@ export class MediaCardInternal extends Component {
       collectionName: collection,
       occurrenceKey
     };
-    return /*#__PURE__*/React.createElement(CardWrapper, getClipboardAttrs({
+    return /*#__PURE__*/React.createElement("div", getClipboardAttrs({
       id,
       alt,
       collection,
@@ -298,8 +296,7 @@ export class MediaCardInternal extends Component {
     }));
   }
 
-}
-export const CardWrapper = styled.div``; // Needed for copy & paste
+} // Needed for copy & paste
 
 export const getClipboardAttrs = ({
   id,