@atlaskit/renderer 91.0.0 → 92.0.0

package/dist/cjs/ui/annotations/draft/component.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
 
 var _types = require("../types");
 
@@ -23,20 +27,26 @@ var _position = require("./position");
 
 var _dom = require("./dom");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _templateObject;
 
-var DraftAnnotation = _styledComponents.default.mark(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), _styles.AnnotationSharedCSSByState.focus);
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var markStyles = function markStyles(props) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)(props).focus);
+};
 
 var AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,
       children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(DraftAnnotation, (0, _extends2.default)({
+  return (0, _react2.jsx)("mark", (0, _extends2.default)({
     "data-renderer-mark": true
-  }, (0, _dom.dataAttributes)(draftPosition)), children);
+  }, (0, _dom.dataAttributes)(draftPosition), {
+    css: markStyles
+  }), children);
 };
 
 exports.AnnotationDraft = AnnotationDraft;
@@ -66,13 +76,13 @@ var applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
   var annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
   return texts.map(function (value, index) {
     if (annotateIndex === index) {
-      return /*#__PURE__*/_react.default.createElement(AnnotationDraft, {
+      return (0, _react2.jsx)(AnnotationDraft, {
         key: index,
         draftPosition: draftPosition
       }, value);
     }
 
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    return (0, _react2.jsx)(_react.default.Fragment, {
       key: index
     }, value);
   });
@@ -103,11 +113,11 @@ var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   }, [nextDraftPosition, textPosition]);
 
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+    return (0, _react2.jsx)(_react.Fragment, null, children);
   }
 
   if (shouldApplyAnnotationAt === _types.InsertDraftPosition.AROUND_TEXT) {
-    return /*#__PURE__*/_react.default.createElement(AnnotationDraft, {
+    return (0, _react2.jsx)(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
     }, children);
@@ -117,7 +127,7 @@ var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   var texts = (0, _text.splitText)(children, offsets);
 
   if (!texts) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+    return (0, _react2.jsx)(_react.Fragment, null, children);
   }
 
   var components = applyAnnotationOnText({
@@ -125,7 +135,7 @@ var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
     shouldApplyAnnotationAt: shouldApplyAnnotationAt,
     draftPosition: nextDraftPosition
   });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, components);
+  return (0, _react2.jsx)(_react.Fragment, null, components);
 };
 
 exports.TextWithAnnotationDraft = TextWithAnnotationDraft;

package/dist/cjs/ui/annotations/element/mark.js

@@ -19,12 +19,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _templateObject;
 
 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); }
@@ -35,7 +35,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var MarkStyled = _styledComponents.default.mark(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, _styles.AnnotationSharedCSSByState.blur, _styles.AnnotationSharedCSSByState.focus);
+var markStyles = function markStyles(props) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)(props).blur, (0, _styles.AnnotationSharedCSSByState)(props).focus);
+};
 
 var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
@@ -70,10 +72,12 @@ var MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return /*#__PURE__*/_react.default.createElement(MarkStyled, (0, _extends2.default)({
+  return (0, _react2.jsx)("mark", (0, _extends2.default)({
     id: id,
     onClick: onMarkClick
-  }, accessibility, overriddenData), children);
+  }, accessibility, overriddenData, {
+    css: markStyles
+  }), children);
 };
 
 exports.MarkComponent = MarkComponent;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "91.0.0",
+	"version": "92.0.0",
 	"sideEffects": false
 }

package/dist/es2019/analytics/enums.js

@@ -12,6 +12,7 @@ export let ACTION;
 (function (ACTION) {
   ACTION["STARTED"] = "started";
   ACTION["RENDERED"] = "rendered";
+  ACTION["RENDERER_TTI"] = "tti";
   ACTION["CRASHED"] = "unhandledErrorCaught";
   ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
   ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";

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

@@ -1,6 +1,6 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, DN50 } from '@atlaskit/theme/colors';
@@ -10,6 +10,23 @@ import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
+const codeBlockStyle = props => css`
+    tab-size: 4;
+    [data-ds--code--code-block] {
+      font-size: ${relativeFontSizeToBase16(fontSize())};
+      line-height: 1.5rem;
+      background-image: ${overflowShadow({
+  background: themed({
+    light: N20,
+    dark: DN50
+  })(props),
+  width: `${gridSize()}px`
+})};
+      background-attachment: local, scroll, scroll;
+      background-position: 100% 0, 100% 0, 0 0;
+
+  `;
+
 function CodeBlock(props) {
   const {
     text,
@@ -20,11 +37,12 @@ function CodeBlock(props) {
   const featureFlags = useFeatureFlags();
   const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   const className = ['code-block', props.className].join(' ');
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, allowCopyToClipboard ? /*#__PURE__*/React.createElement(CopyButton, {
+  return jsx("div", {
+    className: className,
+    css: codeBlockStyle
+  }, allowCopyToClipboard ? jsx(CopyButton, {
     content: text
-  }) : null, /*#__PURE__*/React.createElement(AkCodeBlock, {
+  }) : null, jsx(AkCodeBlock, {
     language: language,
     text: text,
     codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
@@ -33,20 +51,4 @@ function CodeBlock(props) {
   }));
 }
 
-const IntlCodeBlock = injectIntl(CodeBlock);
-export default styled(IntlCodeBlock)`
-  tab-size: 4;
-  [data-ds--code--code-block] {
-    font-size: ${relativeFontSizeToBase16(fontSize())};
-    line-height: 1.5rem;
-    background-image: ${overflowShadow({
-  background: themed({
-    light: N20,
-    dark: DN50
-  }),
-  width: `${gridSize()}px`
-})};
-    background-attachment: local, scroll, scroll;
-    background-position: 100% 0, 100% 0, 0 0;
-  }
-`;
+export default injectIntl(CodeBlock);

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

@@ -32,14 +32,16 @@ function Heading(props) {
     headingId,
     dataAttributes,
     allowHeadingAnchorLinks,
-    marks
+    marks,
+    invisible
   } = props;
   const HX = `h${props.level}`;
   const showAnchorLink = !!props.showAnchorLink;
   const isRightAligned = hasRightAlignmentMark(marks);
   const enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
+  const headingIdToUse = invisible ? undefined : headingId;
   return /*#__PURE__*/React.createElement(HX, _extends({
-    id: headingId
+    id: headingIdToUse
   }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && /*#__PURE__*/React.createElement(CopyTextConsumer, null, ({
     copyTextToClipboard
   }) => {

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

@@ -1,11 +1,15 @@
+/** @jsx jsx */
 import React from 'react';
-import { WidthProvider, ClearNextSiblingMarginTop } from '@atlaskit/editor-common/ui';
+import { jsx } from '@emotion/react';
+import { WidthProvider, clearNextSiblingMarginTopStyle } from '@atlaskit/editor-common/ui';
 export default function LayoutSection(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-layout-column": true,
     "data-column-width": props.width,
     style: {
       flexBasis: `${props.width}%`
     }
-  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement(ClearNextSiblingMarginTop, null), props.children));
+  }, jsx(WidthProvider, null, jsx("div", {
+    css: clearNextSiblingMarginTopStyle
+  }), props.children));
 }

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

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { MediaLink } from '@atlaskit/editor-common/ui';
+import { mediaLinkStyle } 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';
@@ -29,7 +32,7 @@ export default class Media extends PureComponent {
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       const eventHandlers = linkHref ? undefined : this.props.eventHandlers;
       const shouldOpenMediaViewer = !linkHref && allowMediaViewer;
-      const mediaComponent = /*#__PURE__*/React.createElement(MediaCard, _extends({
+      const mediaComponent = jsx(MediaCard, _extends({
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
@@ -40,11 +43,12 @@ export default class Media extends PureComponent {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
       }));
-      return linkHref ? /*#__PURE__*/React.createElement(MediaLink, {
+      return linkHref ? jsx("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: this.handleMediaLinkClick,
-        "data-block-link": linkHref
+        "data-block-link": linkHref,
+        css: mediaLinkStyle
       }, mediaComponent) : mediaComponent;
     });
 
@@ -88,7 +92,7 @@ export default class Media extends PureComponent {
       return this.renderCard();
     }
 
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return jsx(WithProviders, {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providers,
       renderNode: this.renderCard

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

@@ -8,6 +8,7 @@ const {
 } = colors;
 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
@@ -37,9 +38,10 @@ export const FixedTableDiv = styled.div.attrs({
 
   z-index: ${akEditorStickyHeaderZIndex};
 
-  &
+  // Fix this when move we move this to use emotion
+  &&&
     .${TableSharedCssClassName.TABLE_CONTAINER},
-    &
+    &&&
     .${TableSharedCssClassName.TABLE_STICKY_WRAPPER}
     > table {
     margin-top: 0;
@@ -54,9 +56,9 @@ export const FixedTableDiv = styled.div.attrs({
     display: none;
   }
 
-  &
+  &&&
     .${TableSharedCssClassName.TABLE_CONTAINER}.right-shadow::after,
-    &
+    &&&
     .${TableSharedCssClassName.TABLE_CONTAINER}.left-shadow::before {
     top: 0px;
     height: 100%;
@@ -104,7 +106,16 @@ export const StickyTable = ({
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
     allowDynamicTextSizing: allowDynamicTextSizing
-  }, children)))));
+  },
+  /**
+   * @see https://product-fabric.atlassian.net/browse/ED-10235
+   * We pass prop 'invisible' to our table's children nodes meaning
+   * they exist inside of the 'invisible' duplicated table component that
+   * enables sticky headers.
+   */
+  recursivelyInjectProps(children, {
+    invisible: true
+  }))))));
 };
 export class OverflowParent {
   constructor(ref) {

package/dist/es2019/react/utils/inject-props.js

@@ -0,0 +1,24 @@
+import React from 'react';
+/**
+ * Helper function to recursively injects props to
+ * all valid children react nodes.
+ */
+
+export function recursivelyInjectProps(children, propsToInject) {
+  return React.Children.toArray(children).map(child => {
+    // Cannot add a prop to an invalid element, so just return the child
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    } // Recursive call if child has nested children
+
+
+    if (child.props.children) {
+      child = /*#__PURE__*/React.cloneElement(child, {
+        children: recursivelyInjectProps(child.props.children, propsToInject)
+      });
+    } // Add props to react child node
+
+
+    return /*#__PURE__*/React.cloneElement(child, propsToInject);
+  });
+}

package/dist/es2019/ui/Expand.js

@@ -1,10 +1,13 @@
 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 { 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, ClearNextSiblingMarginTop } from '@atlaskit/editor-common/ui';
+import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, ExpandLayoutWrapper, clearNextSiblingMarginTopStyle } 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';
@@ -42,7 +45,7 @@ const ContentContainer = styled.div`
 `;
 const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function WithRef(props, ref) {
   // @ts-ignore: incorrect innerRef typing
-  return /*#__PURE__*/React.createElement(ExpandLayoutWrapper, _extends({}, props, {
+  return jsx(ExpandLayoutWrapper, _extends({}, props, {
     innerRef: ref
   }));
 });
@@ -80,16 +83,16 @@ function Expand({
   } = useRef(_uniqueId('expand-title-'));
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
-  return /*#__PURE__*/React.createElement(Container, {
+  return jsx(Container, {
     "data-node-type": nodeType,
     "data-title": title,
     "data-expanded": expanded,
     expanded: expanded,
     focused: focused
-  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? /*#__PURE__*/React.createElement(ActiveHeaderIdConsumer, {
+  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? jsx(ActiveHeaderIdConsumer, {
     nestedHeaderIds: nestedHeaderIds,
     onNestedHeaderIdMatch: () => setExpanded(true)
-  }) : null, /*#__PURE__*/React.createElement(TitleContainer, {
+  }) : null, jsx(TitleContainer, {
     onClick: e => {
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
@@ -104,21 +107,23 @@ function Expand({
     "aria-expanded": expanded,
     contentEditable: false,
     expanded: expanded
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, jsx(Tooltip, {
     content: label,
     position: "top",
     tag: ExpandLayoutWrapperWithRef
-  }, /*#__PURE__*/React.createElement(ExpandIconWrapper, {
+  }, jsx(ExpandIconWrapper, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+  }, jsx(ChevronRightIcon, {
     label: label
-  }))), /*#__PURE__*/React.createElement(Title, {
+  }))), jsx(Title, {
     id: id
-  }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), /*#__PURE__*/React.createElement(ContentContainer, {
+  }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: `${nodeType}-content-wrapper`
-  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement(ClearNextSiblingMarginTop, null), children))));
+  }, jsx(WidthProvider, null, jsx("div", {
+    css: clearNextSiblingMarginTopStyle
+  }), children))));
 }
 
 export default injectIntl(Expand);

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

@@ -1,12 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React, { useContext, useLayoutEffect, useRef } from 'react';
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema';
 import { reduce } from '@atlaskit/adf-utils';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, LegacyToNextIntlProvider, IntlLegacyFallbackProvider, IntlNextErrorBoundary } from '@atlaskit/editor-common/ui';
-import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking } from '@atlaskit/editor-common/utils';
+import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI } from '@atlaskit/editor-common/utils';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { IframeWidthObserverFallbackWrapper, IframeWrapperConsumer } from '@atlaskit/width-detector';
@@ -14,7 +17,7 @@ import { FabricChannel } from '@atlaskit/analytics-listeners';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import uuid from 'uuid/v4';
 import { ReactSerializer, renderDocument } from '../../';
-import { Wrapper } from './style';
+import { DeprecatedWrapper, rendererStyles } from './style';
 import { TruncatedWrapper } from './truncated-wrapper';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
 import { PLATFORM, MODE } from '../../analytics/events';
@@ -80,6 +83,22 @@ export class Renderer extends PureComponent {
     this.editorRef = props.innerRef || /*#__PURE__*/React.createRef();
     this.id = uuid();
     startMeasure(`Renderer Render Time: ${this.id}`);
+    const _featureFlags = this.featureFlags(this.props.featureFlags).featureFlags;
+
+    if (_featureFlags !== null && _featureFlags !== void 0 && _featureFlags.rendererTtiTracking) {
+      measureTTI((tti, ttiFromInvocation, canceled) => {
+        this.fireAnalyticsEvent({
+          action: ACTION.RENDERER_TTI,
+          actionSubject: ACTION_SUBJECT.RENDERER,
+          attributes: {
+            tti,
+            ttiFromInvocation,
+            canceled
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      });
+    }
   }
 
   anchorLinkAnalytics() {
@@ -268,15 +287,15 @@ export class Renderer extends PureComponent {
         onComplete(stat);
       }
 
-      const rendererOutput = /*#__PURE__*/React.createElement(RendererContextProvider, {
+      const rendererOutput = jsx(RendererContextProvider, {
         value: this.featureFlags(this.props.featureFlags)
-      }, /*#__PURE__*/React.createElement(CopyTextProvider, null, /*#__PURE__*/React.createElement(ActiveHeaderIdProvider, {
+      }, jsx(CopyTextProvider, null, jsx(ActiveHeaderIdProvider, {
         value: getActiveHeadingId(allowHeadingAnchorLinks)
-      }, /*#__PURE__*/React.createElement(LegacyToNextIntlProvider, null, /*#__PURE__*/React.createElement(IntlLegacyFallbackProvider, null, /*#__PURE__*/React.createElement(AnalyticsContext.Provider, {
+      }, jsx(LegacyToNextIntlProvider, null, jsx(IntlLegacyFallbackProvider, null, jsx(AnalyticsContext.Provider, {
         value: {
           fireAnalyticsEvent: event => this.fireAnalyticsEvent(event)
         }
-      }, /*#__PURE__*/React.createElement(SmartCardStorageProvider, null, /*#__PURE__*/React.createElement(RendererWrapper, {
+      }, jsx(SmartCardStorageProvider, null, jsx(RendererWrapper, {
         appearance: appearance,
         dynamicTextSizing: !!allowDynamicTextSizing,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
@@ -287,14 +306,14 @@ export class Renderer extends PureComponent {
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
         onMouseDown: this.onMouseDownEditView
-      }, enableSsrInlineScripts ? /*#__PURE__*/React.createElement(BreakoutSSRInlineScript, {
+      }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, {
         allowDynamicTextSizing: !!allowDynamicTextSizing
-      }) : null, /*#__PURE__*/React.createElement(RendererActionsInternalUpdater, {
+      }) : null, jsx(RendererActionsInternalUpdater, {
         doc: pmDoc,
         schema: schema,
         onAnalyticsEvent: this.fireAnalyticsEvent
       }, result)))))))));
-      return truncated ? /*#__PURE__*/React.createElement(TruncatedWrapper, {
+      return truncated ? jsx(TruncatedWrapper, {
         height: maxHeight,
         fadeHeight: fadeOutHeight
       }, rendererOutput) : rendererOutput;
@@ -303,7 +322,7 @@ export class Renderer extends PureComponent {
         onError(e);
       }
 
-      return /*#__PURE__*/React.createElement(RendererWrapper, {
+      return jsx(RendererWrapper, {
         appearance: appearance,
         dynamicTextSizing: !!allowDynamicTextSizing,
         allowCopyToClipboard: allowCopyToClipboard,
@@ -311,7 +330,7 @@ export class Renderer extends PureComponent {
         allowColumnSorting: allowColumnSorting,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         onClick: handleWrapperOnClick
-      }, /*#__PURE__*/React.createElement(UnsupportedBlock, null));
+      }, jsx(UnsupportedBlock, null));
     }
   }
 
@@ -332,7 +351,7 @@ export class Renderer extends PureComponent {
   }
 
 }
-const RendererWithAnalytics = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(FabricEditorAnalyticsContext, {
+const RendererWithAnalytics = /*#__PURE__*/React.memo(props => jsx(FabricEditorAnalyticsContext, {
   data: {
     appearance: getAnalyticsAppearance(props.appearance),
     packageName: name,
@@ -340,15 +359,15 @@ const RendererWithAnalytics = /*#__PURE__*/React.memo(props => /*#__PURE__*/Reac
     componentName: 'renderer',
     editorSessionId: uuid()
   }
-}, /*#__PURE__*/React.createElement(WithCreateAnalyticsEvent, {
+}, jsx(WithCreateAnalyticsEvent, {
   render: createAnalyticsEvent => {
     // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    return jsx(ErrorBoundary, {
       component: ACTION_SUBJECT.RENDERER,
       rethrowError: true,
       fallbackComponent: null,
       createAnalyticsEvent: createAnalyticsEvent
-    }, /*#__PURE__*/React.createElement(IntlNextErrorBoundary, null, /*#__PURE__*/React.createElement(Renderer, _extends({}, props, {
+    }, jsx(IntlNextErrorBoundary, null, jsx(Renderer, _extends({}, props, {
       createAnalyticsEvent: createAnalyticsEvent
     }))));
   }
@@ -365,22 +384,23 @@ const RendererWithIframeFallbackWrapper = /*#__PURE__*/React.memo(props => {
     onClick,
     onMouseDown
   } = props;
-  const renderer = /*#__PURE__*/React.createElement(WidthProvider, {
+  const renderer = jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
-  }, /*#__PURE__*/React.createElement(BaseTheme, {
+  }, jsx(BaseTheme, {
     dynamicTextSizing: dynamicTextSizing,
     baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
-  }, /*#__PURE__*/React.createElement(Wrapper, {
+  }, jsx(DeprecatedWrapper, {
     innerRef: innerRef,
     appearance: appearance,
     allowNestedHeaderLinks: allowNestedHeaderLinks,
     allowColumnSorting: !!allowColumnSorting,
     onClick: onClick,
-    onMouseDown: onMouseDown
+    onMouseDown: onMouseDown,
+    css: rendererStyles
   }, children)));
 
   if (!subscribe) {
-    return /*#__PURE__*/React.createElement(IframeWidthObserverFallbackWrapper, null, renderer);
+    return jsx(IframeWidthObserverFallbackWrapper, null, renderer);
   }
 
   return renderer;
@@ -394,9 +414,9 @@ const RendererWithIframeFallbackWrapper = /*#__PURE__*/React.memo(props => {
  */
 
 export function RendererWrapper(props) {
-  return /*#__PURE__*/React.createElement(IframeWrapperConsumer, null, ({
+  return jsx(IframeWrapperConsumer, null, ({
     subscribe
-  }) => /*#__PURE__*/React.createElement(RendererWithIframeFallbackWrapper, _extends({}, props, {
+  }) => jsx(RendererWithIframeFallbackWrapper, _extends({}, props, {
     subscribe: subscribe
   })));
 }
@@ -430,16 +450,16 @@ const RendererWithAnnotationSelection = props => {
   const innerRef = props.innerRef || localRef;
 
   if (!allowAnnotations) {
-    return /*#__PURE__*/React.createElement(RendererWithAnalytics, _extends({
+    return jsx(RendererWithAnalytics, _extends({
       innerRef: innerRef
     }, props));
   }
 
-  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement(AnnotationsWrapper, {
+  return jsx(RendererActionsContext, null, jsx(AnnotationsWrapper, {
     rendererRef: innerRef,
     adfDocument: adfDocument,
     annotationProvider: props.annotationProvider
-  }, /*#__PURE__*/React.createElement(RendererWithAnalytics, _extends({
+  }, jsx(RendererWithAnalytics, _extends({
     innerRef: innerRef
   }, props))));
 };