@atlaskit/renderer 118.6.10 → 118.6.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 118.6.11
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 118.6.10
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -4,7 +4,7 @@
         "declaration": true,
         "target": "es5",
         "composite": true,
-        "outDir": "../dist",
+        "outDir": "../../../../../confluence/tsDist/@atlaskit__renderer",
         "rootDir": "../"
     },
     "include": [

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

@@ -11,6 +11,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -24,6 +25,26 @@ var wrapperStyles = (0, _react.css)({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
+var CONTAINER_WITHOUT_GUTTER = "calc(100cqw - ".concat(_editorSharedStyles.akEditorGutterPadding, "px * 2)");
+var getWidth = function getWidth(width, mode) {
+  if ((0, _experiments.editorExperiment)('advanced_layouts', true) && width) {
+    return "min(".concat(width, "px, ").concat(CONTAINER_WITHOUT_GUTTER, ")");
+  } else {
+    if (mode === 'full-width') {
+      return "max(".concat(_editorSharedStyles.akEditorDefaultLayoutWidth, "px, min(").concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(CONTAINER_WITHOUT_GUTTER, "))");
+    }
+    if (mode === 'wide') {
+      return "min(var(--ak-editor--breakout-wide-layout-width), ".concat(CONTAINER_WITHOUT_GUTTER, ")");
+    }
+  }
+};
+
+/**
+ * React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
+ *
+ * @param props - Breakout mark attrs, such as mode (wide or full-width).
+ * @returns The rendered breakout mark as a React element.
+ */
 function Breakout(props) {
   return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
@@ -36,7 +57,10 @@ function Breakout(props) {
       'data-has-width': !!props.width,
       'data-width': props.width
     }, {
-      style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      style: (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? {
+        width: getWidth('width' in props ? props.width : null, props.mode)
+      } : {
         width: (0, _experiments.editorExperiment)('advanced_layouts', true) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         (0, _utils.calcBreakoutWithCustomWidth)(props.mode, 'width' in props ? props.width : null, width) :

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

@@ -24,7 +24,7 @@ var _table2 = require("@atlaskit/editor-common/table");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _ugcTokens = require("@atlaskit/editor-common/ugc-tokens");
 var _getBaseFontSize = require("./get-base-font-size");
-var _css, _css3;
+var _css, _css4;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -139,6 +139,14 @@ var baseStyles = (0, _react.css)((_css = {
 }), (0, _defineProperty2.default)(_css, '& span[data-placeholder]', {
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
 })));
+var akEditorBreakpointForSmallDevice = '1266px';
+
+// Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+var responsiveBreakoutWidth = (0, _react.css)((0, _defineProperty2.default)({
+  '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, "px")
+}, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
+  '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
+}));
 var hideHeadingCopyLinkWrapperStyles = (0, _react.css)({
   '& h1, & h2, & h3, & h4, & h5, & h6': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
     '&:focus-within': {
@@ -476,13 +484,13 @@ var paragraphSharedStyles = (0, _react.css)({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = (0, _react.css)((_css3 = {
+var listsSharedStyles = (0, _react.css)((_css4 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(_styles.listItemCounterPadding, "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)(_css3, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
+}, (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)(_css4, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
   /*
    Ensures list item content adheres to the list's margin instead
    of filling the entire block row. This is important to allow
@@ -514,7 +522,7 @@ var listsSharedStyles = (0, _react.css)((_css3 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css3, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css4, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -1413,7 +1421,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
       (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') &&
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles],
+      (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles, (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? responsiveBreakoutWidth : null],
       "data-testid": testId
     }, children)
   );

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

@@ -62,7 +62,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 = "118.6.10";
+var packageVersion = "118.6.11";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -7,8 +7,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import { css, jsx } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWithCustomWidth, calcBreakoutWidth } from '@atlaskit/editor-common/utils';
-import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fg } from '@atlaskit/platform-feature-flags';
 const wrapperStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   margin: `${blockNodesVerticalMargin} 0`,
@@ -16,6 +17,26 @@ const wrapperStyles = css({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
+const CONTAINER_WITHOUT_GUTTER = `calc(100cqw - ${akEditorGutterPadding}px * 2)`;
+const getWidth = (width, mode) => {
+  if (editorExperiment('advanced_layouts', true) && width) {
+    return `min(${width}px, ${CONTAINER_WITHOUT_GUTTER})`;
+  } else {
+    if (mode === 'full-width') {
+      return `max(${akEditorDefaultLayoutWidth}px, min(${akEditorFullWidthLayoutWidth}px, ${CONTAINER_WITHOUT_GUTTER}))`;
+    }
+    if (mode === 'wide') {
+      return `min(var(--ak-editor--breakout-wide-layout-width), ${CONTAINER_WITHOUT_GUTTER})`;
+    }
+  }
+};
+
+/**
+ * React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
+ *
+ * @param props - Breakout mark attrs, such as mode (wide or full-width).
+ * @returns The rendered breakout mark as a React element.
+ */
 export default function Breakout(props) {
   return jsx(WidthConsumer, null, ({
     width
@@ -28,7 +49,10 @@ export default function Breakout(props) {
     'data-has-width': !!props.width,
     'data-width': props.width
   }, {
-    style: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: fg('platform_breakout_cls') ? {
+      width: getWidth('width' in props ? props.width : null, props.mode)
+    } : {
       width: editorExperiment('advanced_layouts', true) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       calcBreakoutWithCustomWidth(props.mode, 'width' in props ? props.width : null, width) :

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

@@ -11,7 +11,7 @@ import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y
 import { FullPagePadding } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { RendererCssClassName } from '../../consts';
-import { akEditorBlockquoteBorderColor, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -198,6 +198,15 @@ const baseStyles = css({
     color: `var(--ds-text-subtlest, ${N200})`
   }
 });
+const akEditorBreakpointForSmallDevice = '1266px';
+
+// Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+const responsiveBreakoutWidth = css({
+  '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidthSmallViewport}px`,
+  [`@media (min-width: ${akEditorBreakpointForSmallDevice})`]: {
+    '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
+  }
+});
 const hideHeadingCopyLinkWrapperStyles = css({
   '& h1, & h2, & h3, & h4, & h5, & h6': {
     [`.${HeadingAnchorWrapperClassName}`]: {
@@ -1805,7 +1814,7 @@ export const RendererStyleContainer = props => {
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') &&
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles],
+      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, fg('platform_breakout_cls') ? responsiveBreakoutWidth : null],
       "data-testid": testId
     }, children)
   );

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

@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "118.6.10";
+const packageVersion = "118.6.11";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -7,8 +7,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import { css, jsx } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWithCustomWidth, calcBreakoutWidth } from '@atlaskit/editor-common/utils';
-import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fg } from '@atlaskit/platform-feature-flags';
 var wrapperStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   margin: "".concat(blockNodesVerticalMargin, " 0"),
@@ -16,6 +17,26 @@ var wrapperStyles = css({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
+var CONTAINER_WITHOUT_GUTTER = "calc(100cqw - ".concat(akEditorGutterPadding, "px * 2)");
+var getWidth = function getWidth(width, mode) {
+  if (editorExperiment('advanced_layouts', true) && width) {
+    return "min(".concat(width, "px, ").concat(CONTAINER_WITHOUT_GUTTER, ")");
+  } else {
+    if (mode === 'full-width') {
+      return "max(".concat(akEditorDefaultLayoutWidth, "px, min(").concat(akEditorFullWidthLayoutWidth, "px, ").concat(CONTAINER_WITHOUT_GUTTER, "))");
+    }
+    if (mode === 'wide') {
+      return "min(var(--ak-editor--breakout-wide-layout-width), ".concat(CONTAINER_WITHOUT_GUTTER, ")");
+    }
+  }
+};
+
+/**
+ * React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
+ *
+ * @param props - Breakout mark attrs, such as mode (wide or full-width).
+ * @returns The rendered breakout mark as a React element.
+ */
 export default function Breakout(props) {
   return jsx(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
@@ -28,7 +49,10 @@ export default function Breakout(props) {
       'data-has-width': !!props.width,
       'data-width': props.width
     }, {
-      style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      style: fg('platform_breakout_cls') ? {
+        width: getWidth('width' in props ? props.width : null, props.mode)
+      } : {
         width: editorExperiment('advanced_layouts', true) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         calcBreakoutWithCustomWidth(props.mode, 'width' in props ? props.width : null, width) :

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css, _css3;
+var _css, _css4;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -13,7 +13,7 @@ import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y
 import { FullPagePadding } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { RendererCssClassName } from '../../consts';
-import { akEditorBlockquoteBorderColor, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -132,6 +132,14 @@ var baseStyles = css((_css = {
 }), _defineProperty(_css, '& span[data-placeholder]', {
   color: "var(--ds-text-subtlest, ".concat(N200, ")")
 })));
+var akEditorBreakpointForSmallDevice = '1266px';
+
+// Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+var responsiveBreakoutWidth = css(_defineProperty({
+  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidthSmallViewport, "px")
+}, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
+  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
+}));
 var hideHeadingCopyLinkWrapperStyles = css({
   '& h1, & h2, & h3, & h4, & h5, & h6': _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
     '&:focus-within': {
@@ -469,13 +477,13 @@ var paragraphSharedStyles = css({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = css((_css3 = {
+var listsSharedStyles = css((_css4 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(listItemCounterPadding, "px)")
   }
-}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css3, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css4, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
   /*
    Ensures list item content adheres to the list's margin instead
    of filling the entire block row. This is important to allow
@@ -507,7 +515,7 @@ var listsSharedStyles = css((_css3 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), _defineProperty(_defineProperty(_defineProperty(_css3, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), _defineProperty(_defineProperty(_defineProperty(_css4, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -1406,7 +1414,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') &&
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles],
+      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, fg('platform_breakout_cls') ? responsiveBreakoutWidth : null],
       "data-testid": testId
     }, children)
   );

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

@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "118.6.10";
+var packageVersion = "118.6.11";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -5,4 +5,10 @@
 import { jsx } from '@emotion/react';
 import type { BreakoutMarkAttrs } from '@atlaskit/adf-schema';
 import type { MarkProps } from '../types';
+/**
+ * React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
+ *
+ * @param props - Breakout mark attrs, such as mode (wide or full-width).
+ * @returns The rendered breakout mark as a React element.
+ */
 export default function Breakout(props: MarkProps<BreakoutMarkAttrs>): jsx.JSX.Element;

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

@@ -5,4 +5,10 @@
 import { jsx } from '@emotion/react';
 import type { BreakoutMarkAttrs } from '@atlaskit/adf-schema';
 import type { MarkProps } from '../types';
+/**
+ * React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
+ *
+ * @param props - Breakout mark attrs, such as mode (wide or full-width).
+ * @returns The rendered breakout mark as a React element.
+ */
 export default function Breakout(props: MarkProps<BreakoutMarkAttrs>): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "118.6.10",
+	"version": "118.6.11",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/code": "^17.2.0",
-		"@atlaskit/editor-common": "^106.3.0",
+		"@atlaskit/editor-common": "^106.5.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.14.0",
+		"@atlaskit/tmp-editor-statsig": "^6.0.0",
 		"@atlaskit/tokens": "^5.1.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -124,6 +124,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_breakout_cls": {
+			"type": "boolean"
+		},
 		"confluence_frontend_table_scrollbar_ttvc_fix": {
 			"type": "boolean"
 		},