@atlaskit/renderer 92.0.1 → 93.0.0

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

@@ -17,7 +17,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
@@ -40,76 +40,73 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var N40A = colors.N40A;
 var tableStickyPadding = 8;
 exports.tableStickyPadding = tableStickyPadding;
+var fixedTableDivModeToPosition = {
+  stick: 'fixed',
+  'pin-bottom': 'absolute'
+};
 
-// creates a new stacking context and places the div in the same
-// position as the table
-var RelativeTableDiv = _styledComponents.default.div.attrs({
-  style: function style(_ref) {
-    var left = _ref.left,
-        top = _ref.top;
-    return {
-      left: left && left < 0 ? left : undefined,
-      top: top
-    };
-  }
-})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
-
-var FixedTableDiv = _styledComponents.default.div.attrs({
-  style: function style(_ref2) {
-    var top = _ref2.top,
-        wrapperWidth = _ref2.wrapperWidth;
-    return {
-      top: top,
-      width: wrapperWidth
-    };
+var getModeSpecificStyles = function getModeSpecificStyles(mode) {
+  if (mode === 'none') {
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      display: none;\n    "])));
+  } else {
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      position: ", ";\n    "])), fixedTableDivModeToPosition[mode]);
   }
-})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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' : '';
-}, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+};
+
+var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+};
+
+var FixedTableDiv = function FixedTableDiv(props) {
+  var top = props.top,
+      wrapperWidth = props.wrapperWidth,
+      mode = props.mode;
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
+  return (0, _react2.jsx)("div", {
+    css: fixedTableCss
+  }, props.children);
+};
 
 exports.FixedTableDiv = FixedTableDiv;
 
-var StyledDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
-
-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.default.createElement(RelativeTableDiv, {
-    left: left,
-    top: mode === 'pin-bottom' ? top : undefined
-  }, /*#__PURE__*/_react.default.createElement(FixedTableDiv, {
+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 (0, _react2.jsx)("div", {
+    css: {
+      left: left && left < 0 ? left : undefined,
+      top: mode === 'pin-bottom' ? top : undefined,
+      position: 'relative'
+    }
+  }, (0, _react2.jsx)(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
-  }, /*#__PURE__*/_react.default.createElement(StyledDiv, {
+  }, (0, _react2.jsx)("div", {
     className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
     "data-layout": layout,
     style: {
       width: tableWidth
     }
-  }, /*#__PURE__*/_react.default.createElement(StyledDiv, {
-    innerRef: innerRef,
+  }, (0, _react2.jsx)("div", {
+    ref: innerRef,
     className: "".concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER),
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_table.Table, {
+  }, (0, _react2.jsx)(_table.Table, {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,

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

@@ -23,12 +23,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _ui = require("@atlaskit/editor-common/ui");
@@ -49,8 +45,6 @@ var _sticky = require("./table/sticky");
 
 var _table = require("./table/table");
 
-var _templateObject;
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
@@ -152,8 +146,6 @@ var tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 
-var MainTableContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
-
 var canUseLinelength = function canUseLinelength(appearance) {
   return appearance === 'full-page' || appearance === 'mobile';
 };
@@ -348,10 +340,10 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths: columnWidths,
         rowHeight: this.headerRowHeight,
         allowDynamicTextSizing: allowDynamicTextSizing
-      }, [children && children[0]]), /*#__PURE__*/_react.default.createElement(MainTableContainer, {
+      }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_styles.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/cjs/react/utils/performance/RenderTracking.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenderTracking = RenderTracking;
+
+var _react = require("react");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _enums = require("../../../analytics/enums");
+
+function RenderTracking(props) {
+  var debouncedHandleAnalyticsEvent = (0, _react.useMemo)(function () {
+    return (0, _debounce.default)(props.handleAnalyticsEvent, 500);
+  }, [props.handleAnalyticsEvent]);
+  (0, _utils.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: _enums.EVENT_TYPE.OPERATIONAL
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
+  return null;
+}

package/dist/cjs/ui/Expand.js

@@ -19,8 +19,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
@@ -47,28 +45,49 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 Title = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _constants.gridSize)() / 2);
+var titleStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _constants.gridSize)() / 2);
 
-var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: 0;\n  padding-bottom: ", "px;\n"])), _ui.sharedExpandStyles.ContainerStyles, function (props) {
-  return props.expanded ? (0, _constants.gridSize)() : 0;
-});
+var Container = function Container(props) {
+  var paddingBottom = "".concat(props.expanded ? (0, _constants.gridSize)() : 0, "px");
 
-var TitleContainer = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: ", "px;\n  padding-bottom: ", "px;\n"])), _ui.sharedExpandStyles.TitleContainerStyles, (0, _constants.gridSize)(), function (props) {
-  return !props.expanded ? (0, _constants.gridSize)() : 0;
-});
+  var sharedContainerStyles = _ui.sharedExpandStyles.containerStyles(props);
+
+  var styles = function styles(themeProps) {
+    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(themeProps), paddingBottom);
+  };
+
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles
+  }, props), props.children);
+};
+
+var TitleContainer = function TitleContainer(props) {
+  var paddingBottom = "".concat(!props.expanded ? (0, _constants.gridSize)() : 0, "px");
+
+  var styles = function styles(themeProps) {
+    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", "px;\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles(themeProps), (0, _constants.gridSize)(), paddingBottom);
+  };
+
+  return (0, _react2.jsx)("button", (0, _extends2.default)({
+    css: styles
+  }, props), props.children);
+};
 
 TitleContainer.displayName = 'TitleContainerButton';
 
-var ContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  padding-right: ", "px;\n  padding-left: ", "px;\n  visibility: ", ";\n"])), _ui.sharedExpandStyles.ContentStyles, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, function (props) {
-  return props.expanded ? 'visible' : 'hidden';
-});
+var ContentContainer = function ContentContainer(props) {
+  var sharedContentStyles = _ui.sharedExpandStyles.contentStyles(props);
 
-var ExpandLayoutWrapperWithRef = /*#__PURE__*/(0, _react.forwardRef)(function WithRef(props, ref) {
-  // @ts-ignore: incorrect innerRef typing
-  return (0, _react2.jsx)(_ui.ExpandLayoutWrapper, (0, _extends2.default)({}, props, {
-    innerRef: ref
-  }));
-});
+  var visibility = props.expanded ? 'visible' : 'hidden';
+
+  var styles = function styles(themeProps) {
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", "px;\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles(themeProps), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
+  };
+
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles
+  }, props), props.children);
+};
 
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
@@ -145,12 +164,13 @@ function Expand(_ref) {
   }, (0, _react2.jsx)(_tooltip.default, {
     content: label,
     position: "top",
-    tag: ExpandLayoutWrapperWithRef
+    tag: _ui.ExpandLayoutWrapperWithRef
   }, (0, _react2.jsx)(_ui.ExpandIconWrapper, {
     expanded: expanded
   }, (0, _react2.jsx)(_chevronRight.default, {
     label: label
-  }))), (0, _react2.jsx)(Title, {
+  }))), (0, _react2.jsx)("span", {
+    css: titleStyles,
     id: id
   }, title || intl.formatMessage(_ui.expandMessages.expandDefaultTitle))), (0, _react2.jsx)(ContentContainer, {
     expanded: expanded

package/dist/cjs/ui/MediaCard.js

@@ -7,9 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getListOfIdentifiersFromDoc = exports.getClipboardAttrs = exports.MediaCardInternal = exports.MediaCard = exports.CardWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.getListOfIdentifiersFromDoc = exports.getClipboardAttrs = exports.MediaCardInternal = exports.MediaCard = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -39,10 +37,6 @@ var _mediaClient = require("@atlaskit/media-client");
 
 var _utils = require("@atlaskit/editor-common/utils");
 
-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); }
 
 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; }
@@ -383,7 +377,7 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         collectionName: collection,
         occurrenceKey: occurrenceKey
       };
-      return /*#__PURE__*/_react.default.createElement(CardWrapper, getClipboardAttrs({
+      return /*#__PURE__*/_react.default.createElement("div", getClipboardAttrs({
         id: id,
         alt: alt,
         collection: collection,
@@ -413,14 +407,10 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
     }
   }]);
   return MediaCardInternal;
-}(_react.Component);
+}(_react.Component); // Needed for copy & paste
 
-exports.MediaCardInternal = MediaCardInternal;
 
-var CardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""]))); // Needed for copy & paste
-
-
-exports.CardWrapper = CardWrapper;
+exports.MediaCardInternal = MediaCardInternal;
 
 var getClipboardAttrs = function getClipboardAttrs(_ref2) {
   var id = _ref2.id,

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

@@ -7,9 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Renderer = exports.NORMAL_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = void 0;
-exports.RendererWrapper = RendererWrapper;
-exports.default = void 0;
+exports.default = exports.Renderer = exports.NORMAL_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -45,8 +43,6 @@ var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _widthDetector = require("@atlaskit/width-detector");
-
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
 
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
@@ -91,6 +87,8 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
 var _ErrorBoundary = require("./ErrorBoundary");
 
+var _RenderTracking = require("../../react/utils/performance/RenderTracking");
+
 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; }
@@ -119,8 +117,11 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     (0, _classCallCheck2.default)(this, Renderer);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "featureFlags", (0, _memoizeOne.default)(function (featureFlags) {
+      var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags, {
+        objectFlagKeys: ['rendererRenderTracking']
+      });
       return {
-        featureFlags: (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags)
+        featureFlags: normalizedFeatureFlags
       };
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalyticsEvent", function (event) {
@@ -355,6 +356,8 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       };
 
       try {
+        var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+
         var schema = this.getSchema();
 
         var _renderDocument = (0, _.renderDocument)(document, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
@@ -370,7 +373,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           value: this.featureFlags(this.props.featureFlags)
         }, (0, _react2.jsx)(_copyTextProvider.CopyTextProvider, null, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
           value: (0, _links.getActiveHeadingId)(allowHeadingAnchorLinks)
-        }, (0, _react2.jsx)(_ui.LegacyToNextIntlProvider, null, (0, _react2.jsx)(_ui.IntlLegacyFallbackProvider, null, (0, _react2.jsx)(_analyticsContext.default.Provider, {
+        }, (0, _react2.jsx)(_analyticsContext.default.Provider, {
           value: {
             fireAnalyticsEvent: function fireAnalyticsEvent(event) {
               return _this3.fireAnalyticsEvent(event);
@@ -393,11 +396,20 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result)))))))));
-        return truncated ? (0, _react2.jsx)(_truncatedWrapper.TruncatedWrapper, {
+        }, result)))))));
+        var rendererResult = truncated ? (0, _react2.jsx)(_truncatedWrapper.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[_enums.ACTION_SUBJECT.RENDERER];
+        var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && (0, _react2.jsx)(_RenderTracking.RenderTracking, {
+          componentProps: this.props,
+          action: _enums.ACTION.RE_RENDERED,
+          actionSubject: _enums.ACTION_SUBJECT.RENDERER,
+          handleAnalyticsEvent: this.fireAnalyticsEvent,
+          useShallow: rendererRenderTracking.useShallow
+        });
+        return (0, _react2.jsx)(_react.Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
         if (onError) {
           onError(e);
@@ -446,73 +458,50 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
     }
   }, (0, _react2.jsx)(_ui.WithCreateAnalyticsEvent, {
     render: function render(createAnalyticsEvent) {
-      // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
+      // `IntlErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
       return (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
         component: _enums.ACTION_SUBJECT.RENDERER,
         rethrowError: true,
         fallbackComponent: null,
         createAnalyticsEvent: createAnalyticsEvent
-      }, (0, _react2.jsx)(_ui.IntlNextErrorBoundary, null, (0, _react2.jsx)(Renderer, (0, _extends2.default)({}, props, {
+      }, (0, _react2.jsx)(_ui.IntlErrorBoundary, null, (0, _react2.jsx)(Renderer, (0, _extends2.default)({}, props, {
         createAnalyticsEvent: createAnalyticsEvent
       }))));
     }
   }));
 });
 
-var RendererWithIframeFallbackWrapper = /*#__PURE__*/_react.default.memo(function (props) {
+var RendererWrapper = /*#__PURE__*/_react.default.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 = (0, _react2.jsx)(_ui.WidthProvider, {
+  return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper"
   }, (0, _react2.jsx)(_ui.BaseTheme, {
     dynamicTextSizing: dynamicTextSizing,
     baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
-  }, (0, _react2.jsx)(_style.DeprecatedWrapper, {
-    innerRef: innerRef,
-    appearance: appearance,
-    allowNestedHeaderLinks: allowNestedHeaderLinks,
-    allowColumnSorting: !!allowColumnSorting,
+  }, (0, _react2.jsx)("div", {
+    ref: innerRef,
     onClick: onClick,
     onMouseDown: onMouseDown,
-    css: _style.rendererStyles
+    css: (0, _style.rendererStyles)({
+      appearance: appearance,
+      allowNestedHeaderLinks: allowNestedHeaderLinks,
+      allowColumnSorting: !!allowColumnSorting
+    })
   }, children)));
-
-  if (!subscribe) {
-    return (0, _react2.jsx)(_widthDetector.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.
- */
-
-
-function RendererWrapper(props) {
-  return (0, _react2.jsx)(_widthDetector.IframeWrapperConsumer, null, function (_ref) {
-    var subscribe = _ref.subscribe;
-    return (0, _react2.jsx)(RendererWithIframeFallbackWrapper, (0, _extends2.default)({}, 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 = (0, _react.useContext)(_RendererActionsContext.RendererContext);
   var rendererRef = (0, _react.useRef)(null);
   (0, _react.useLayoutEffect)(function () {