@atlaskit/renderer 92.0.1 → 93.0.0

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

@@ -4,8 +4,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
+/** @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';
@@ -14,70 +15,70 @@ import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
-// creates a new stacking context and places the div in the same
-// position as the table
-var RelativeTableDiv = styled.div.attrs({
-  style: function style(_ref) {
-    var left = _ref.left,
-        top = _ref.top;
-    return {
-      left: left && left < 0 ? left : undefined,
-      top: top
-    };
-  }
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var FixedTableDiv = styled.div.attrs({
-  style: function style(_ref2) {
-    var top = _ref2.top,
-        wrapperWidth = _ref2.wrapperWidth;
-    return {
-      top: top,
-      width: wrapperWidth
-    };
+var fixedTableDivModeToPosition = {
+  stick: 'fixed',
+  'pin-bottom': 'absolute'
+};
+
+var getModeSpecificStyles = function getModeSpecificStyles(mode) {
+  if (mode === 'none') {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: none;\n    "])));
+  } else {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: ", ";\n    "])), fixedTableDivModeToPosition[mode]);
   }
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  ", ";\n\n  z-index: ", ";\n\n  // Fix this when move we move this to use emotion\n  &&&\n    .", ",\n    &&&\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &&&\n    .", ".right-shadow::after,\n    &&&\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), function (props) {
-  return props.mode === 'stick' ? 'position: fixed' : '';
-}, function (props) {
-  return props.mode === 'pin-bottom' ? 'position: absolute' : '';
-}, function (props) {
-  return props.mode === 'none' ? 'display: none' : '';
-}, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
-var StyledDiv = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
-export var StickyTable = function StickyTable(_ref3) {
-  var top = _ref3.top,
-      left = _ref3.left,
-      mode = _ref3.mode,
-      shadowClassNames = _ref3.shadowClassNames,
-      innerRef = _ref3.innerRef,
-      wrapperWidth = _ref3.wrapperWidth,
-      tableWidth = _ref3.tableWidth,
-      isNumberColumnEnabled = _ref3.isNumberColumnEnabled,
-      layout = _ref3.layout,
-      children = _ref3.children,
-      columnWidths = _ref3.columnWidths,
-      renderWidth = _ref3.renderWidth,
-      allowDynamicTextSizing = _ref3.allowDynamicTextSizing,
-      rowHeight = _ref3.rowHeight;
-  return /*#__PURE__*/React.createElement(RelativeTableDiv, {
-    left: left,
-    top: mode === 'pin-bottom' ? top : undefined
-  }, /*#__PURE__*/React.createElement(FixedTableDiv, {
+};
+
+var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  top: ", "px;\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), top, width, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+};
+
+export var FixedTableDiv = function FixedTableDiv(props) {
+  var top = props.top,
+      wrapperWidth = props.wrapperWidth,
+      mode = props.mode;
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
+  return jsx("div", {
+    css: fixedTableCss
+  }, props.children);
+};
+export var StickyTable = function StickyTable(_ref) {
+  var top = _ref.top,
+      left = _ref.left,
+      mode = _ref.mode,
+      shadowClassNames = _ref.shadowClassNames,
+      innerRef = _ref.innerRef,
+      wrapperWidth = _ref.wrapperWidth,
+      tableWidth = _ref.tableWidth,
+      isNumberColumnEnabled = _ref.isNumberColumnEnabled,
+      layout = _ref.layout,
+      children = _ref.children,
+      columnWidths = _ref.columnWidths,
+      renderWidth = _ref.renderWidth,
+      allowDynamicTextSizing = _ref.allowDynamicTextSizing,
+      rowHeight = _ref.rowHeight;
+  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: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
     "data-layout": layout,
     style: {
       width: tableWidth
     }
-  }, /*#__PURE__*/React.createElement(StyledDiv, {
-    innerRef: innerRef,
+  }, jsx("div", {
+    ref: innerRef,
     className: "".concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER),
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, jsx(Table, {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,

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

@@ -6,16 +6,12 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 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';
@@ -124,8 +120,6 @@ var tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 
-var MainTableContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-
 var canUseLinelength = function canUseLinelength(appearance) {
   return appearance === 'full-page' || appearance === 'mobile';
 };
@@ -330,10 +324,10 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths: columnWidths,
         rowHeight: this.headerRowHeight,
         allowDynamicTextSizing: allowDynamicTextSizing
-      }, [children && children[0]]), /*#__PURE__*/React.createElement(MainTableContainer, {
+      }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(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/esm/react/utils/performance/RenderTracking.js

@@ -0,0 +1,39 @@
+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) {
+  var debouncedHandleAnalyticsEvent = useMemo(function () {
+    return debounce(props.handleAnalyticsEvent, 500);
+  }, [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: function onRender(_ref) {
+      var renderCount = _ref.renderCount,
+          propsDifference = _ref.propsDifference,
+          componentId = _ref.componentId;
+
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        action: props.action,
+        actionSubject: props.actionSubject,
+        attributes: {
+          count: renderCount,
+          propsDifference: propsDifference,
+          componentId: componentId
+        },
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
+  return null;
+}

package/dist/esm/ui/Expand.js

@@ -5,36 +5,59 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @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';
-var Title = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", "px;\n  text-align: left;\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, gridSize() / 2);
-var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  padding: 0;\n  padding-bottom: ", "px;\n"])), sharedExpandStyles.ContainerStyles, function (props) {
-  return props.expanded ? gridSize() : 0;
-});
-var TitleContainer = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  padding: ", "px;\n  padding-bottom: ", "px;\n"])), sharedExpandStyles.TitleContainerStyles, gridSize(), function (props) {
-  return !props.expanded ? gridSize() : 0;
-});
+var titleStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", "px;\n  text-align: left;\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, gridSize() / 2);
+
+var Container = function Container(props) {
+  var paddingBottom = "".concat(props.expanded ? gridSize() : 0, "px");
+  var sharedContainerStyles = sharedExpandStyles.containerStyles(props);
+
+  var styles = function styles(themeProps) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(themeProps), paddingBottom);
+  };
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
+
+var TitleContainer = function TitleContainer(props) {
+  var paddingBottom = "".concat(!props.expanded ? gridSize() : 0, "px");
+
+  var styles = function styles(themeProps) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    padding: ", "px;\n    padding-bottom: ", ";\n  "])), sharedExpandStyles.titleContainerStyles(themeProps), gridSize(), paddingBottom);
+  };
+
+  return jsx("button", _extends({
+    css: styles
+  }, props), props.children);
+};
+
 TitleContainer.displayName = 'TitleContainerButton';
-var ContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  padding-right: ", "px;\n  padding-left: ", "px;\n  visibility: ", ";\n"])), sharedExpandStyles.ContentStyles, gridSize() * 2, gridSize() * 5 - gridSize() / 2, function (props) {
-  return props.expanded ? 'visible' : 'hidden';
-});
-var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function WithRef(props, ref) {
-  // @ts-ignore: incorrect innerRef typing
-  return jsx(ExpandLayoutWrapper, _extends({}, props, {
-    innerRef: ref
-  }));
-});
+
+var ContentContainer = function ContentContainer(props) {
+  var sharedContentStyles = sharedExpandStyles.contentStyles(props);
+  var visibility = props.expanded ? 'visible' : 'hidden';
+
+  var styles = function styles(themeProps) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", ";\n    padding-right: ", "px;\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles(themeProps), gridSize() * 2, gridSize() * 5 - gridSize() / 2, visibility);
+  };
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
 
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
@@ -116,7 +139,8 @@ function Expand(_ref) {
     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/esm/ui/MediaCard.js

@@ -1,4 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -9,8 +8,6 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _templateObject;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 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) { _defineProperty(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; }
@@ -19,13 +16,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-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';
 var mediaIdentifierMap = new Map();
 export var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {
   if (!doc) {
@@ -355,7 +350,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         collectionName: collection,
         occurrenceKey: occurrenceKey
       };
-      return /*#__PURE__*/React.createElement(CardWrapper, getClipboardAttrs({
+      return /*#__PURE__*/React.createElement("div", getClipboardAttrs({
         id: id,
         alt: alt,
         collection: collection,
@@ -386,8 +381,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
   }]);
 
   return MediaCardInternal;
-}(Component);
-export var CardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""]))); // Needed for copy & paste
+}(Component); // Needed for copy & paste
 
 export var getClipboardAttrs = function getClipboardAttrs(_ref2) {
   var id = _ref2.id,

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

@@ -16,22 +16,21 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 /** @jsx jsx */
-import React, { useContext, useLayoutEffect, useRef } from 'react';
+import React, { Fragment, 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 { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 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';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import uuid from 'uuid/v4';
 import { ReactSerializer, renderDocument } from '../../';
-import { DeprecatedWrapper, rendererStyles } from './style';
+import { rendererStyles } from './style';
 import { TruncatedWrapper } from './truncated-wrapper';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
 import { PLATFORM, MODE } from '../../analytics/events';
@@ -49,6 +48,7 @@ import { isInteractiveElement } from './click-to-edit';
 import { RendererContextProvider } from '../../renderer-context';
 import memoizeOne from 'memoize-one';
 import { ErrorBoundary } from './ErrorBoundary';
+import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
@@ -64,8 +64,11 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
     _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "featureFlags", memoizeOne(function (featureFlags) {
+      var normalizedFeatureFlags = normalizeFeatureFlags(featureFlags, {
+        objectFlagKeys: ['rendererRenderTracking']
+      });
       return {
-        featureFlags: normalizeFeatureFlags(featureFlags)
+        featureFlags: normalizedFeatureFlags
       };
     }));
 
@@ -304,6 +307,8 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
       };
 
       try {
+        var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+
         var schema = this.getSchema();
 
         var _renderDocument = renderDocument(document, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
@@ -319,7 +324,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           value: this.featureFlags(this.props.featureFlags)
         }, jsx(CopyTextProvider, null, jsx(ActiveHeaderIdProvider, {
           value: getActiveHeadingId(allowHeadingAnchorLinks)
-        }, jsx(LegacyToNextIntlProvider, null, jsx(IntlLegacyFallbackProvider, null, jsx(AnalyticsContext.Provider, {
+        }, jsx(AnalyticsContext.Provider, {
           value: {
             fireAnalyticsEvent: function fireAnalyticsEvent(event) {
               return _this3.fireAnalyticsEvent(event);
@@ -342,11 +347,20 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result)))))))));
-        return truncated ? jsx(TruncatedWrapper, {
+        }, result)))))));
+        var rendererResult = truncated ? jsx(TruncatedWrapper, {
           height: maxHeight,
           fadeHeight: fadeOutHeight
         }, rendererOutput) : rendererOutput;
+        var rendererRenderTracking = (_this$featureFlags = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags === void 0 ? void 0 : (_this$featureFlags$fe = _this$featureFlags.featureFlags) === null || _this$featureFlags$fe === void 0 ? void 0 : (_this$featureFlags$fe2 = _this$featureFlags$fe.rendererRenderTracking) === null || _this$featureFlags$fe2 === void 0 ? void 0 : _this$featureFlags$fe2[ACTION_SUBJECT.RENDERER];
+        var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && jsx(RenderTracking, {
+          componentProps: this.props,
+          action: ACTION.RE_RENDERED,
+          actionSubject: ACTION_SUBJECT.RENDERER,
+          handleAnalyticsEvent: this.fireAnalyticsEvent,
+          useShallow: rendererRenderTracking.useShallow
+        });
+        return jsx(Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
         if (onError) {
           onError(e);
@@ -393,71 +407,49 @@ var RendererWithAnalytics = /*#__PURE__*/React.memo(function (props) {
     }
   }, jsx(WithCreateAnalyticsEvent, {
     render: function render(createAnalyticsEvent) {
-      // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
+      // `IntlErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
       return jsx(ErrorBoundary, {
         component: ACTION_SUBJECT.RENDERER,
         rethrowError: true,
         fallbackComponent: null,
         createAnalyticsEvent: createAnalyticsEvent
-      }, jsx(IntlNextErrorBoundary, null, jsx(Renderer, _extends({}, props, {
+      }, jsx(IntlErrorBoundary, null, jsx(Renderer, _extends({}, props, {
         createAnalyticsEvent: createAnalyticsEvent
       }))));
     }
   }));
 });
-var RendererWithIframeFallbackWrapper = /*#__PURE__*/React.memo(function (props) {
+var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   var allowColumnSorting = props.allowColumnSorting,
       dynamicTextSizing = props.dynamicTextSizing,
       allowNestedHeaderLinks = props.allowNestedHeaderLinks,
       innerRef = props.innerRef,
       appearance = props.appearance,
       children = props.children,
-      subscribe = props.subscribe,
       onClick = props.onClick,
       onMouseDown = props.onMouseDown;
-  var renderer = jsx(WidthProvider, {
+  return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
   }, jsx(BaseTheme, {
     dynamicTextSizing: dynamicTextSizing,
     baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
-  }, jsx(DeprecatedWrapper, {
-    innerRef: innerRef,
-    appearance: appearance,
-    allowNestedHeaderLinks: allowNestedHeaderLinks,
-    allowColumnSorting: !!allowColumnSorting,
+  }, jsx("div", {
+    ref: innerRef,
     onClick: onClick,
     onMouseDown: onMouseDown,
-    css: rendererStyles
+    css: rendererStyles({
+      appearance: appearance,
+      allowNestedHeaderLinks: allowNestedHeaderLinks,
+      allowColumnSorting: !!allowColumnSorting
+    })
   }, children)));
-
-  if (!subscribe) {
-    return jsx(IframeWidthObserverFallbackWrapper, null, renderer);
-  }
-
-  return renderer;
 });
-/**
- * When the product doesn't provide a IframeWidthObserverFallbackWrapper,
- * we will give one to the renderer,
- *
- * so if we have more than one `WidthProvider` on the content,
- * only one iframe will be created on the older browsers.
- */
-
-export function RendererWrapper(props) {
-  return jsx(IframeWrapperConsumer, null, function (_ref) {
-    var subscribe = _ref.subscribe;
-    return jsx(RendererWithIframeFallbackWrapper, _extends({}, props, {
-      subscribe: subscribe
-    }));
-  });
-}
 
-function RendererActionsInternalUpdater(_ref2) {
-  var children = _ref2.children,
-      doc = _ref2.doc,
-      schema = _ref2.schema,
-      onAnalyticsEvent = _ref2.onAnalyticsEvent;
+function RendererActionsInternalUpdater(_ref) {
+  var children = _ref.children,
+      doc = _ref.doc,
+      schema = _ref.schema,
+      onAnalyticsEvent = _ref.onAnalyticsEvent;
   var actions = useContext(ActionsContext);
   var rendererRef = useRef(null);
   useLayoutEffect(function () {