@atlaskit/renderer 124.15.1 → 124.16.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/renderer
 
+## 124.16.0
+
+### Minor Changes
+
+- [`d2da08dd6c682`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2da08dd6c682) -
+  use css driven width for extension styles in renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 124.15.1
 
 ### Patch Changes

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

@@ -11,6 +11,8 @@ var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRende
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _consts = require("../../consts");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _breakout = require("../utils/breakout");
 var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
 // Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
 var macroHeights = {
@@ -54,6 +56,25 @@ var renderExtension = exports.renderExtension = function renderExtension(content
    */
   var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   var extensionHeight = nodeHeight || viewportSize;
+  if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: options.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        width: isTopLevel ? (0, _breakout.calcBreakoutWidthCss)(layout) : '100%',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        minHeight: extensionHeight && "".concat(extensionHeight, "px")
+      },
+      "data-layout": layout,
+      "data-local-id": localId,
+      "data-testid": "extension--wrapper"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: overflowContainerClass
+    }, content));
+  }
   return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
     var width = _ref2.width;
     return /*#__PURE__*/_react.default.createElement("div", {

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

@@ -15,6 +15,8 @@ var _consts = require("../../consts");
 var _utils = require("@atlaskit/editor-common/utils");
 var _actions = require("./multiBodiedExtension/actions");
 var _context = require("./multiBodiedExtension/context");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _breakout = require("../utils/breakout");
 var _templateObject;
 /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
 /**
@@ -43,7 +45,7 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
-var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
+var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
   var width = _ref3.width,
     path = _ref3.path,
     layout = _ref3.layout,
@@ -56,7 +58,7 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
     },
     "data-layout": layout,
@@ -66,6 +68,29 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
     className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
   }, children));
 };
+var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
+  var path = _ref4.path,
+    layout = _ref4.layout,
+    children = _ref4.children;
+  var isTopLevel = path.length < 1;
+  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+
+  // This hierarchy is copied from regular extension (see extension.tsx)
+  return (0, _react.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
+    style: {
+      width: isTopLevel ?
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      (0, _breakout.calcBreakoutWidthCss)(layout) : '100%'
+    },
+    "data-layout": layout,
+    "data-testid": "multiBodiedExtension--wrapper"
+  }, (0, _react.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
+  }, children));
+};
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var _extensionContext$pri;
   var children = props.children,
@@ -130,6 +155,19 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   // make the frame visible
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   var containerActiveFrameStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+  if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return (0, _react.jsx)("section", {
+      css: [containerStyles, containerActiveFrameStyles],
+      "data-testid": "multiBodiedExtension--container",
+      "data-multiBodiedExtension-container": true,
+      "data-active-child-index": activeChildIndex,
+      "data-layout": layout,
+      "data-local-id": localId
+    }, (0, _react.jsx)(MultiBodiedExtensionWrapperNext, {
+      layout: layout,
+      path: path
+    }, renderContent()));
+  }
   return (0, _react.jsx)("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
@@ -137,9 +175,9 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     "data-active-child-index": activeChildIndex,
     "data-layout": layout,
     "data-local-id": localId
-  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref4) {
-    var width = _ref4.width;
-    return (0, _react.jsx)(MultiBodiedExtensionWrapper, {
+  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
+    var width = _ref5.width;
+    return (0, _react.jsx)(MultiBodiedExtensionWrapperLegacy, {
       layout: layout,
       width: width,
       path: path

package/dist/cjs/react/utils/breakout.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calcBreakoutWidthCss = void 0;
+var calcBreakoutWidthCss = exports.calcBreakoutWidthCss = function calcBreakoutWidthCss(layout) {
+  if (layout === 'full-width') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))';
+  }
+  if (layout === 'wide') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))';
+  }
+  return '100%';
+};

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

@@ -58,7 +58,8 @@ var baseStyles = (0, _react.css)((_css = {
   fontSize: 'var(--ak-renderer-base-font-size)',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.5rem',
-  color: "var(--ds-text, ".concat(_colors.N800, ")")
+  color: "var(--ds-text, ".concat(_colors.N800, ")"),
+  '--ak-editor--full-width-layout-width': "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px")
 }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css, ".".concat(_consts.RendererCssClassName.DOCUMENT, "::after"), {
   // we add a clearfix after ak-renderer-document in order to
   // contain internal floats (such as media images that are "wrap-left")

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

@@ -69,7 +69,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.15.0";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -4,6 +4,8 @@ import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { RendererCssClassName } from '../../consts';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { calcBreakoutWidthCss } from '../utils/breakout';
 const viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
 // Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
 const macroHeights = {
@@ -39,6 +41,25 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
    */
   const viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   const extensionHeight = nodeHeight || viewportSize;
+  if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: options.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: `${RendererCssClassName.EXTENSION} ${options.shadowClassNames} ${centerAlignClass}`,
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        width: isTopLevel ? calcBreakoutWidthCss(layout) : '100%',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        minHeight: extensionHeight && `${extensionHeight}px`
+      },
+      "data-layout": layout,
+      "data-local-id": localId,
+      "data-testid": "extension--wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: overflowContainerClass
+    }, content));
+  }
   return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
     width
   }) => /*#__PURE__*/React.createElement("div", {

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

@@ -13,6 +13,8 @@ import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { calcBreakoutWidthCss } from '../utils/breakout';
 const containerStyles = css({
   // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
@@ -34,7 +36,7 @@ const MultiBodiedExtensionNavigation = ({
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
-const MultiBodiedExtensionWrapper = ({
+const MultiBodiedExtensionWrapperLegacy = ({
   width,
   path,
   layout,
@@ -48,7 +50,7 @@ const MultiBodiedExtensionWrapper = ({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
     style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
     },
     "data-layout": layout,
@@ -58,6 +60,30 @@ const MultiBodiedExtensionWrapper = ({
     className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
   }, children));
 };
+const MultiBodiedExtensionWrapperNext = ({
+  path,
+  layout,
+  children
+}) => {
+  const isTopLevel = path.length < 1;
+  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+
+  // This hierarchy is copied from regular extension (see extension.tsx)
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
+    style: {
+      width: isTopLevel ?
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      calcBreakoutWidthCss(layout) : '100%'
+    },
+    "data-layout": layout,
+    "data-testid": "multiBodiedExtension--wrapper"
+  }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
+  }, children));
+};
 const MultiBodiedExtension = props => {
   var _extensionContext$pri;
   const {
@@ -124,6 +150,19 @@ const MultiBodiedExtension = props => {
 			display: block;
 		}
 	`;
+  if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return jsx("section", {
+      css: [containerStyles, containerActiveFrameStyles],
+      "data-testid": "multiBodiedExtension--container",
+      "data-multiBodiedExtension-container": true,
+      "data-active-child-index": activeChildIndex,
+      "data-layout": layout,
+      "data-local-id": localId
+    }, jsx(MultiBodiedExtensionWrapperNext, {
+      layout: layout,
+      path: path
+    }, renderContent()));
+  }
   return jsx("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
@@ -133,7 +172,7 @@ const MultiBodiedExtension = props => {
     "data-local-id": localId
   }, jsx(WidthConsumer, null, ({
     width
-  }) => jsx(MultiBodiedExtensionWrapper, {
+  }) => jsx(MultiBodiedExtensionWrapperLegacy, {
     layout: layout,
     width: width,
     path: path

package/dist/es2019/react/utils/breakout.js

@@ -0,0 +1,9 @@
+export const calcBreakoutWidthCss = layout => {
+  if (layout === 'full-width') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))';
+  }
+  if (layout === 'wide') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))';
+  }
+  return '100%';
+};

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

@@ -50,6 +50,7 @@ const baseStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.5rem',
   color: `var(--ds-text, ${N800})`,
+  '--ak-editor--full-width-layout-width': `${akEditorFullWidthLayoutWidth}px`,
   [`.${RendererCssClassName.DOCUMENT}::after`]: {
     // we add a clearfix after ak-renderer-document in order to
     // contain internal floats (such as media images that are "wrap-left")

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

@@ -55,7 +55,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "124.15.0";
+const packageVersion = "0.0.0-development";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -4,6 +4,8 @@ import ExtensionRenderer from '../../ui/ExtensionRenderer';
 import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { RendererCssClassName } from '../../consts';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { calcBreakoutWidthCss } from '../utils/breakout';
 var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
 // Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
 var macroHeights = {
@@ -47,6 +49,25 @@ export var renderExtension = function renderExtension(content, layout) {
    */
   var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
   var extensionHeight = nodeHeight || viewportSize;
+  if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: options.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "".concat(RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        width: isTopLevel ? calcBreakoutWidthCss(layout) : '100%',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        minHeight: extensionHeight && "".concat(extensionHeight, "px")
+      },
+      "data-layout": layout,
+      "data-local-id": localId,
+      "data-testid": "extension--wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: overflowContainerClass
+    }, content));
+  }
   return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
     var width = _ref2.width;
     return /*#__PURE__*/React.createElement("div", {

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

@@ -16,6 +16,8 @@ import { RendererCssClassName } from '../../consts';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
 import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { calcBreakoutWidthCss } from '../utils/breakout';
 var containerStyles = css({
   // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
@@ -35,7 +37,7 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
     "data-testid": "multiBodiedExtension-navigation"
   }, children);
 };
-var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
+var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
   var width = _ref3.width,
     path = _ref3.path,
     layout = _ref3.layout,
@@ -48,7 +50,7 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
     },
     "data-layout": layout,
@@ -58,6 +60,29 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
     className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
   }, children));
 };
+var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
+  var path = _ref4.path,
+    layout = _ref4.layout,
+    children = _ref4.children;
+  var isTopLevel = path.length < 1;
+  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+
+  // This hierarchy is copied from regular extension (see extension.tsx)
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
+    style: {
+      width: isTopLevel ?
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      calcBreakoutWidthCss(layout) : '100%'
+    },
+    "data-layout": layout,
+    "data-testid": "multiBodiedExtension--wrapper"
+  }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
+  }, children));
+};
 var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var _extensionContext$pri;
   var children = props.children,
@@ -122,6 +147,19 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   // make the frame visible
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   var containerActiveFrameStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
+  if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    return jsx("section", {
+      css: [containerStyles, containerActiveFrameStyles],
+      "data-testid": "multiBodiedExtension--container",
+      "data-multiBodiedExtension-container": true,
+      "data-active-child-index": activeChildIndex,
+      "data-layout": layout,
+      "data-local-id": localId
+    }, jsx(MultiBodiedExtensionWrapperNext, {
+      layout: layout,
+      path: path
+    }, renderContent()));
+  }
   return jsx("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
@@ -129,9 +167,9 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     "data-active-child-index": activeChildIndex,
     "data-layout": layout,
     "data-local-id": localId
-  }, jsx(WidthConsumer, null, function (_ref4) {
-    var width = _ref4.width;
-    return jsx(MultiBodiedExtensionWrapper, {
+  }, jsx(WidthConsumer, null, function (_ref5) {
+    var width = _ref5.width;
+    return jsx(MultiBodiedExtensionWrapperLegacy, {
       layout: layout,
       width: width,
       path: path

package/dist/esm/react/utils/breakout.js

@@ -0,0 +1,9 @@
+export var calcBreakoutWidthCss = function calcBreakoutWidthCss(layout) {
+  if (layout === 'full-width') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))';
+  }
+  if (layout === 'wide') {
+    return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))';
+  }
+  return '100%';
+};

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

@@ -51,7 +51,8 @@ var baseStyles = css((_css = {
   fontSize: 'var(--ak-renderer-base-font-size)',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.5rem',
-  color: "var(--ds-text, ".concat(N800, ")")
+  color: "var(--ds-text, ".concat(N800, ")"),
+  '--ak-editor--full-width-layout-width': "".concat(akEditorFullWidthLayoutWidth, "px")
 }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, ".".concat(RendererCssClassName.DOCUMENT, "::after"), {
   // we add a clearfix after ak-renderer-document in order to
   // contain internal floats (such as media images that are "wrap-left")

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

@@ -60,7 +60,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.15.0";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/react/utils/breakout.d.ts

@@ -0,0 +1 @@
+export declare const calcBreakoutWidthCss: (layout: "full-width" | "wide" | "default") => "100%" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))";

package/dist/types-ts4.5/react/utils/breakout.d.ts

@@ -0,0 +1 @@
+export declare const calcBreakoutWidthCss: (layout: "full-width" | "wide" | "default") => "100%" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.15.1",
+	"version": "124.16.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -54,13 +54,13 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/react-ufo": "^4.15.0",
-		"@atlaskit/smart-card": "^43.7.0",
+		"@atlaskit/smart-card": "^43.8.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.38.0",
+		"@atlaskit/tmp-editor-statsig": "^13.39.0",
 		"@atlaskit/tokens": "^8.0.0",
-		"@atlaskit/tooltip": "^20.9.0",
+		"@atlaskit/tooltip": "^20.10.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",