@atlaskit/renderer 115.0.6 → 115.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/renderer
 
+## 115.1.0
+
+### Minor Changes
+
+- [#151824](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/151824)
+  [`0828a5f0b032e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0828a5f0b032e) -
+  Extract portal to a context when custom nodeComponents are not passed in.
+
+### Patch Changes
+
+- [#152820](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152820)
+  [`00eda15128c75`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/00eda15128c75) -
+  ED-27923:Fix embeded card width during SSR
+
 ## 115.0.6
 
 ### Patch Changes

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

@@ -18,6 +18,7 @@ var _ssr = require("@atlaskit/smart-card/ssr");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _utils = require("@atlaskit/editor-common/utils");
+var _PortalContext = require("../../ui/Renderer/PortalContext");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -37,9 +38,9 @@ function BlockCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
-    portal = props.portal,
     smartLinks = props.smartLinks,
     isNodeNested = props.isNodeNested;
+  var portal = (0, _PortalContext.usePortal)(props);
   var _ref = smartLinks || {},
     actionOptions = _ref.actionOptions;
   var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);

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

@@ -19,6 +19,7 @@ var _fallback = require("./fallback");
 var _style = require("../../ui/Renderer/style");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _PortalContext = require("../../ui/Renderer/PortalContext");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -38,6 +39,8 @@ var embedCardWrapperStyles = (0, _react.css)({
   },
   margin: '0 auto'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var uIMediaSingleLayoutStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
@@ -48,13 +51,13 @@ function EmbedCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
-    portal = props.portal,
     layout = props.layout,
     width = props.width,
     isInsideOfBlockNode = props.isInsideOfBlockNode,
     rendererAppearance = props.rendererAppearance,
     smartLinks = props.smartLinks,
     isInsideOfInlineExtension = props.isInsideOfInlineExtension;
+  var portal = (0, _PortalContext.usePortal)(props);
   var embedIframeRef = (0, _react2.useRef)(null);
   var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
   var _ref = smartLinks || {},

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

@@ -16,6 +16,7 @@ var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
+var _PortalContext = require("../../ui/Renderer/PortalContext");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -26,8 +27,8 @@ var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
-    portal = props.portal,
     smartLinks = props.smartLinks;
+  var portal = (0, _PortalContext.usePortal)(props);
   var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
   var cardProps = {
     url: url,

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

@@ -141,7 +141,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   var padding = isFullPage ? _style.FullPagePadding * 2 : 0;
   var calcDimensions = (0, _react.useCallback)(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var maxWidth = (0, _coreUtils.isSSR)() && widthAttr && (0, _platformFeatureFlags.fg)('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
+    var maxWidth = (0, _coreUtils.isSSR)() && widthAttr && typeof widthAttr === 'number' && widthType === 'pixel' && (0, _platformFeatureFlags.fg)('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
       width: "".concat(maxWidth, "px"),
@@ -162,7 +162,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       cardDimensions: cardDimensions,
       lineLength: lineLength
     };
-  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr]);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr, widthType]);
   var originalDimensions = (0, _react.useMemo)(function () {
     return {
       width: width,

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePortal = exports.PortalContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var PortalContext = exports.PortalContext = /*#__PURE__*/_react.default.createContext(undefined);
+var usePortal = exports.usePortal = function usePortal() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    portalFromProps = _ref.portal;
+  var portalFromContext = (0, _react.useContext)(PortalContext);
+  if (portalFromProps) {
+    return portalFromProps;
+  }
+  if ((0, _platformFeatureFlags.fg)('cc_complexit_reduce_portal_rerenders')) {
+    return portalFromContext;
+  }
+  return undefined;
+};

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

@@ -9,6 +9,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = void 0
 exports.Renderer = Renderer;
 exports.default = exports.RendererWithAnalytics = exports.RendererFunctionalComponent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
@@ -49,6 +50,8 @@ var _RendererStyleContainer = require("./RendererStyleContainer");
 var _getBaseFontSize = require("./get-base-font-size");
 var _rendererHelper = require("./rendererHelper");
 var _useMemoFromPropsDerivative = require("./useMemoFromPropsDerivative");
+var _PortalContext = require("./PortalContext");
+var _excluded = ["portal"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -60,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "115.0.6";
+var packageVersion = "115.1.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -171,10 +174,6 @@ var handleWrapperOnClick = function handleWrapperOnClick(event, props, mouseDown
     props.eventHandlers.onUnhandledClick(event);
   }
 };
-
-/**
- * Exported due to enzyme test reliance on this component.
- */
 var RendererFunctionalComponent = exports.RendererFunctionalComponent = function RendererFunctionalComponent(props) {
   var createAnalyticsEvent = props.createAnalyticsEvent;
   var mouseDownSelection = (0, _react.useRef)(undefined);
@@ -457,6 +456,29 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
   }
 };
 var RendererFunctionalComponentMemoized = /*#__PURE__*/_react.default.memo(RendererFunctionalComponent);
+var RendererFunctionalComponentWithPortalContext = function RendererFunctionalComponentWithPortalContext(props) {
+  var portal = props.portal,
+    propsWithoutPortal = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return (0, _react2.jsx)(_PortalContext.PortalContext.Provider, {
+    value: portal
+  }, (0, _react2.jsx)(RendererFunctionalComponent, propsWithoutPortal));
+};
+var RendererFunctionalComponentWithPortalContextMemoized = /*#__PURE__*/_react.default.memo(RendererFunctionalComponentWithPortalContext);
+var getRendererComponent = function getRendererComponent(nodeComponents) {
+  // If nodeComponents are provided, for now we don't want to remove portal from props
+  // and use context instead because at this time we cannot guarantee that existing
+  // consumers of Atlaskit Renderer will update to use the new portal context.
+  if (!Boolean(nodeComponents) && (0, _platformFeatureFlags.fg)('cc_complexit_reduce_portal_rerenders')) {
+    if ((0, _platformFeatureFlags.fg)('cc_perf_reduce_rerenders')) {
+      return RendererFunctionalComponentWithPortalContextMemoized;
+    }
+    return RendererFunctionalComponentWithPortalContext;
+  }
+  if ((0, _platformFeatureFlags.fg)('cc_perf_reduce_rerenders')) {
+    return RendererFunctionalComponentMemoized;
+  }
+  return RendererFunctionalComponent;
+};
 function Renderer(props) {
   var _React$useContext = _react.default.useContext(_annotations.AnnotationsPositionContext),
     startPos = _React$useContext.startPos;
@@ -464,7 +486,7 @@ function Renderer(props) {
     isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
   var _ref = (0, _react.useContext)(_ValidationContext.ValidationContext) || {},
     skipValidation = _ref.skipValidation;
-  var RendererComponent = (0, _platformFeatureFlags.fg)('cc_perf_reduce_rerenders') ? RendererFunctionalComponentMemoized : RendererFunctionalComponent;
+  var RendererComponent = getRendererComponent(props.nodeComponents);
   return (0, _react2.jsx)(RendererComponent
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -16,6 +16,7 @@ import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N40 } from '@atlaskit/theme/colors';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
+import { usePortal } from '../../ui/Renderer/PortalContext';
 const datasourceContainerStyle = css({
   borderRadius: `${"var(--ds-border-radius-200, 8px)"}`,
   border: `1px solid ${`var(--ds-border, ${N40})`}`,
@@ -30,10 +31,10 @@ export default function BlockCard(props) {
     url,
     data,
     eventHandlers,
-    portal,
     smartLinks,
     isNodeNested
   } = props;
+  const portal = usePortal(props);
   const {
     actionOptions
   } = smartLinks || {};

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

@@ -16,6 +16,7 @@ import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { usePortal } from '../../ui/Renderer/PortalContext';
 const embedCardWrapperStyles = css({
   width: '100%',
   height: '100%',
@@ -29,6 +30,8 @@ const embedCardWrapperStyles = css({
   },
   margin: '0 auto'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 const uIMediaSingleLayoutStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
@@ -40,7 +43,6 @@ export default function EmbedCard(props) {
     url,
     data,
     eventHandlers,
-    portal,
     layout,
     width,
     isInsideOfBlockNode,
@@ -48,6 +50,7 @@ export default function EmbedCard(props) {
     smartLinks,
     isInsideOfInlineExtension
   } = props;
+  const portal = usePortal(props);
   const embedIframeRef = useRef(null);
   const onClick = getCardClickHandler(eventHandlers, url);
   const {

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

@@ -14,14 +14,15 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+import { usePortal } from '../../ui/Renderer/PortalContext';
 const InlineCard = props => {
   const {
     url,
     data,
     eventHandlers,
-    portal,
     smartLinks
   } = props;
+  const portal = usePortal(props);
   const onClick = getCardClickHandler(eventHandlers, url);
   const cardProps = {
     url,

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

@@ -127,7 +127,7 @@ const MediaSingleWithChildren = props => {
   const padding = isFullPage ? FullPagePadding * 2 : 0;
   const calcDimensions = useCallback(mediaContainerWidth => {
     const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    const maxWidth = isSSR() && widthAttr && fg('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
+    const maxWidth = isSSR() && widthAttr && typeof widthAttr === 'number' && widthType === 'pixel' && fg('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
     const maxHeight = height / width * maxWidth;
     const cardDimensions = {
       width: `${maxWidth}px`,
@@ -148,7 +148,7 @@ const MediaSingleWithChildren = props => {
       cardDimensions,
       lineLength
     };
-  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr]);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr, widthType]);
   const originalDimensions = useMemo(() => ({
     width,
     height

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

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+export const PortalContext = /*#__PURE__*/React.createContext(undefined);
+export const usePortal = ({
+  portal: portalFromProps
+} = {}) => {
+  const portalFromContext = useContext(PortalContext);
+  if (portalFromProps) {
+    return portalFromProps;
+  }
+  if (fg('cc_complexit_reduce_portal_rerenders')) {
+    return portalFromContext;
+  }
+  return undefined;
+};

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

@@ -44,10 +44,11 @@ import { RendererStyleContainer } from './RendererStyleContainer';
 import { getBaseFontSize } from './get-base-font-size';
 import { removeEmptySpaceAroundContent } from './rendererHelper';
 import { useMemoFromPropsDerivative } from './useMemoFromPropsDerivative';
+import { PortalContext } from './PortalContext';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "115.0.6";
+const packageVersion = "115.1.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -160,10 +161,6 @@ const handleWrapperOnClick = (event, props, mouseDownSelection) => {
     props.eventHandlers.onUnhandledClick(event);
   }
 };
-
-/**
- * Exported due to enzyme test reliance on this component.
- */
 export const RendererFunctionalComponent = props => {
   const {
     createAnalyticsEvent
@@ -441,6 +438,31 @@ export const RendererFunctionalComponent = props => {
   }
 };
 const RendererFunctionalComponentMemoized = /*#__PURE__*/React.memo(RendererFunctionalComponent);
+const RendererFunctionalComponentWithPortalContext = props => {
+  const {
+    portal,
+    ...propsWithoutPortal
+  } = props;
+  return jsx(PortalContext.Provider, {
+    value: portal
+  }, jsx(RendererFunctionalComponent, propsWithoutPortal));
+};
+const RendererFunctionalComponentWithPortalContextMemoized = /*#__PURE__*/React.memo(RendererFunctionalComponentWithPortalContext);
+const getRendererComponent = nodeComponents => {
+  // If nodeComponents are provided, for now we don't want to remove portal from props
+  // and use context instead because at this time we cannot guarantee that existing
+  // consumers of Atlaskit Renderer will update to use the new portal context.
+  if (!Boolean(nodeComponents) && fg('cc_complexit_reduce_portal_rerenders')) {
+    if (fg('cc_perf_reduce_rerenders')) {
+      return RendererFunctionalComponentWithPortalContextMemoized;
+    }
+    return RendererFunctionalComponentWithPortalContext;
+  }
+  if (fg('cc_perf_reduce_rerenders')) {
+    return RendererFunctionalComponentMemoized;
+  }
+  return RendererFunctionalComponent;
+};
 export function Renderer(props) {
   const {
     startPos
@@ -451,7 +473,7 @@ export function Renderer(props) {
   const {
     skipValidation
   } = useContext(ValidationContext) || {};
-  const RendererComponent = fg('cc_perf_reduce_rerenders') ? RendererFunctionalComponentMemoized : RendererFunctionalComponent;
+  const RendererComponent = getRendererComponent(props.nodeComponents);
   return jsx(RendererComponent
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -16,6 +16,7 @@ import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N40 } from '@atlaskit/theme/colors';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
+import { usePortal } from '../../ui/Renderer/PortalContext';
 var datasourceContainerStyle = css({
   borderRadius: "var(--ds-border-radius-200, 8px)",
   border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
@@ -29,9 +30,9 @@ export default function BlockCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
-    portal = props.portal,
     smartLinks = props.smartLinks,
     isNodeNested = props.isNodeNested;
+  var portal = usePortal(props);
   var _ref = smartLinks || {},
     actionOptions = _ref.actionOptions;
   var onClick = getCardClickHandler(eventHandlers, url);

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

@@ -17,6 +17,7 @@ import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { usePortal } from '../../ui/Renderer/PortalContext';
 var embedCardWrapperStyles = css({
   width: '100%',
   height: '100%',
@@ -30,6 +31,8 @@ var embedCardWrapperStyles = css({
   },
   margin: '0 auto'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var uIMediaSingleLayoutStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
@@ -40,13 +43,13 @@ export default function EmbedCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
-    portal = props.portal,
     layout = props.layout,
     width = props.width,
     isInsideOfBlockNode = props.isInsideOfBlockNode,
     rendererAppearance = props.rendererAppearance,
     smartLinks = props.smartLinks,
     isInsideOfInlineExtension = props.isInsideOfInlineExtension;
+  var portal = usePortal(props);
   var embedIframeRef = useRef(null);
   var onClick = getCardClickHandler(eventHandlers, url);
   var _ref = smartLinks || {},

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

@@ -14,12 +14,13 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
+import { usePortal } from '../../ui/Renderer/PortalContext';
 var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
-    portal = props.portal,
     smartLinks = props.smartLinks;
+  var portal = usePortal(props);
   var onClick = getCardClickHandler(eventHandlers, url);
   var cardProps = {
     url: url,

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

@@ -130,7 +130,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   var padding = isFullPage ? FullPagePadding * 2 : 0;
   var calcDimensions = useCallback(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var maxWidth = isSSR() && widthAttr && fg('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
+    var maxWidth = isSSR() && widthAttr && typeof widthAttr === 'number' && widthType === 'pixel' && fg('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
       width: "".concat(maxWidth, "px"),
@@ -151,7 +151,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       cardDimensions: cardDimensions,
       lineLength: lineLength
     };
-  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr]);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr, widthType]);
   var originalDimensions = useMemo(function () {
     return {
       width: width,

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

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+export var PortalContext = /*#__PURE__*/React.createContext(undefined);
+export var usePortal = function usePortal() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    portalFromProps = _ref.portal;
+  var portalFromContext = useContext(PortalContext);
+  if (portalFromProps) {
+    return portalFromProps;
+  }
+  if (fg('cc_complexit_reduce_portal_rerenders')) {
+    return portalFromContext;
+  }
+  return undefined;
+};

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

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["portal"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -47,10 +49,11 @@ import { RendererStyleContainer } from './RendererStyleContainer';
 import { getBaseFontSize } from './get-base-font-size';
 import { removeEmptySpaceAroundContent } from './rendererHelper';
 import { useMemoFromPropsDerivative } from './useMemoFromPropsDerivative';
+import { PortalContext } from './PortalContext';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "115.0.6";
+var packageVersion = "115.1.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -161,10 +164,6 @@ var handleWrapperOnClick = function handleWrapperOnClick(event, props, mouseDown
     props.eventHandlers.onUnhandledClick(event);
   }
 };
-
-/**
- * Exported due to enzyme test reliance on this component.
- */
 export var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
   var createAnalyticsEvent = props.createAnalyticsEvent;
   var mouseDownSelection = useRef(undefined);
@@ -447,6 +446,29 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
   }
 };
 var RendererFunctionalComponentMemoized = /*#__PURE__*/React.memo(RendererFunctionalComponent);
+var RendererFunctionalComponentWithPortalContext = function RendererFunctionalComponentWithPortalContext(props) {
+  var portal = props.portal,
+    propsWithoutPortal = _objectWithoutProperties(props, _excluded);
+  return jsx(PortalContext.Provider, {
+    value: portal
+  }, jsx(RendererFunctionalComponent, propsWithoutPortal));
+};
+var RendererFunctionalComponentWithPortalContextMemoized = /*#__PURE__*/React.memo(RendererFunctionalComponentWithPortalContext);
+var getRendererComponent = function getRendererComponent(nodeComponents) {
+  // If nodeComponents are provided, for now we don't want to remove portal from props
+  // and use context instead because at this time we cannot guarantee that existing
+  // consumers of Atlaskit Renderer will update to use the new portal context.
+  if (!Boolean(nodeComponents) && fg('cc_complexit_reduce_portal_rerenders')) {
+    if (fg('cc_perf_reduce_rerenders')) {
+      return RendererFunctionalComponentWithPortalContextMemoized;
+    }
+    return RendererFunctionalComponentWithPortalContext;
+  }
+  if (fg('cc_perf_reduce_rerenders')) {
+    return RendererFunctionalComponentMemoized;
+  }
+  return RendererFunctionalComponent;
+};
 export function Renderer(props) {
   var _React$useContext = React.useContext(AnnotationsPositionContext),
     startPos = _React$useContext.startPos;
@@ -454,7 +476,7 @@ export function Renderer(props) {
     isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
   var _ref = useContext(ValidationContext) || {},
     skipValidation = _ref.skipValidation;
-  var RendererComponent = fg('cc_perf_reduce_rerenders') ? RendererFunctionalComponentMemoized : RendererFunctionalComponent;
+  var RendererComponent = getRendererComponent(props.nodeComponents);
   return jsx(RendererComponent
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/types/ui/Renderer/PortalContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { RendererProps } from '../renderer-props';
+export declare const PortalContext: React.Context<HTMLElement | undefined>;
+export declare const usePortal: ({ portal: portalFromProps, }?: {
+    portal?: RendererProps['portal'];
+}) => HTMLElement | undefined;

package/dist/types/ui/Renderer/index.d.ts

@@ -9,9 +9,6 @@ import type { RendererProps } from '../renderer-props';
 import type { RendererAppearance } from './types';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
-/**
- * Exported due to enzyme test reliance on this component.
- */
 export declare const RendererFunctionalComponent: (props: RendererProps & {
     startPos?: number;
     skipValidation?: boolean;

package/dist/types-ts4.5/ui/Renderer/PortalContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { RendererProps } from '../renderer-props';
+export declare const PortalContext: React.Context<HTMLElement | undefined>;
+export declare const usePortal: ({ portal: portalFromProps, }?: {
+    portal?: RendererProps['portal'];
+}) => HTMLElement | undefined;

package/dist/types-ts4.5/ui/Renderer/index.d.ts

@@ -9,9 +9,6 @@ import type { RendererProps } from '../renderer-props';
 import type { RendererAppearance } from './types';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
-/**
- * Exported due to enzyme test reliance on this component.
- */
 export declare const RendererFunctionalComponent: (props: RendererProps & {
     startPos?: number;
     skipValidation?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "115.0.6",
+	"version": "115.1.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -129,6 +129,9 @@
 		"cc_complexit_fe_improve_table_sorting": {
 			"type": "boolean"
 		},
+		"cc_complexit_reduce_portal_rerenders": {
+			"type": "boolean"
+		},
 		"cc_perf_reduce_rerenders": {
 			"type": "boolean"
 		},