@atlaskit/renderer 126.9.5 → 126.10.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/renderer
 
+## 126.10.0
+
+### Minor Changes
+
+- [`cf045c04cbad9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf045c04cbad9) -
+  [ux] Fix renderer nested table sticky header behaviour and reenable
+
 ## 126.9.5
 
 ### Patch Changes

package/dist/cjs/consts.js

@@ -9,11 +9,22 @@ exports.RendererCssClassName = void 0;
 
 var clPrefix = 'ak-renderer-';
 var RendererCssClassName = exports.RendererCssClassName = {
+  FLEX_CENTER_WRAPPER: "".concat(clPrefix, "flex-center-wrapper"),
   DOCUMENT: "".concat(clPrefix, "document"),
   EXTENSION: "".concat(clPrefix, "extension"),
   EXTENSION_AS_INLINE: "".concat(clPrefix, "extension-as-inline"),
   EXTENSION_CENTER_ALIGN: "".concat(clPrefix, "extension-center-align"),
   EXTENSION_OVERFLOW_CONTAINER: "".concat(clPrefix, "extension-overflow-container"),
+  /** Wrapper for center-aligned extensions/MBE; margin here so it participates in collapse */
+  STICKY_SAFE_CENTER_WRAPPER: "".concat(clPrefix, "sticky-safe-center-wrapper"),
+  /** Wrapper for center-aligned embed card (wide/full-width); margin here so it participates in collapse */
+  EMBED_CARD_CENTER_WRAPPER: "".concat(clPrefix, "embed-card-center-wrapper"),
+  /** Wrapper for center-aligned block card datasource (wide/full-width); margin here so it participates in collapse */
+  BLOCK_CARD_DATASOURCE_CENTER_WRAPPER: "".concat(clPrefix, "block-card-datasource-center-wrapper"),
+  /** Outer flex wrapper for sticky-safe breakout (has vertical margin); zero margin when first in doc */
+  STICKY_SAFE_BREAKOUT_WRAPPER: "".concat(clPrefix, "sticky-safe-breakout-wrapper"),
+  /** Flex item in sticky-safe breakout; zero first/last child margin so flex container height matches legacy */
+  STICKY_SAFE_BREAKOUT_INNER: "".concat(clPrefix, "sticky-safe-breakout-inner"),
   NUMBER_COLUMN: "".concat(clPrefix, "table-number-column"),
   SORTABLE_COLUMN_WRAPPER: "".concat(clPrefix, "tableHeader-sortable-column__wrapper"),
   SORTABLE_COLUMN: "".concat(clPrefix, "tableHeader-sortable-column"),

package/dist/cjs/react/index.js

@@ -434,10 +434,9 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       var isInsideOfBlockNode = (0, _rendererNode.insideBlockNode)(path, node.type.schema);
       var isInsideMultiBodiedExtension = (0, _rendererNode.insideMultiBodiedExtension)(path, node.type.schema);
       var isInsideOfTable = (0, _rendererNode.insideTable)(path, node.type.schema);
-
-      // TODO: EDITOR-3850 - support sticky headers inside breakouts (layouts and expands)
-      var isInsideBreakoutExpand = (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_11', 'isEnabled', true) && (0, _rendererNode.insideBreakoutExpand)(path);
-      var stickyHeaders = !isInsideOfTable && !(0, _rendererNode.insideBreakoutLayout)(path) && !isInsideBreakoutExpand ? this.stickyHeaders : undefined;
+      var isStickySafeCenteringEnabled = (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
+      var isInsideBreakoutExpand = !isStickySafeCenteringEnabled && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_patch_11', 'isEnabled', true) && (0, _rendererNode.insideBreakoutExpand)(path);
+      var stickyHeaders = isStickySafeCenteringEnabled ? !isInsideOfTable ? this.stickyHeaders : undefined : !isInsideOfTable && !(0, _rendererNode.insideBreakoutLayout)(path) && !isInsideBreakoutExpand ? this.stickyHeaders : undefined;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
         columnWidths: (0, _utils.getColumnWidths)(node),

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

@@ -10,19 +10,31 @@ var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _consts = require("../../consts");
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var wrapperStyles = (0, _react.css)({
+// Legacy centering (breaks position: sticky in nested content).
+var legacyWrapperStyles = (0, _react.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(_editorSharedStyles.blockNodesVerticalMargin, " 0"),
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
+var flexWrapperStyles = (0, _react.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(_editorSharedStyles.blockNodesVerticalMargin, " 0")
+});
+
+// Flex item: no vertical margin so flex container height = content height (matches legacy single-wrapper height).
+// flexShrink: 0 so the inner div keeps its width (matches legacy behaviour; flex items default to flex-shrink: 1).
+var innerWrapperStyles = (0, _react.css)({
+  flexShrink: 0
+});
 var getWidth = function getWidth(width, mode) {
   if ((0, _experiments.editorExperiment)('advanced_layouts', true) && width) {
     return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
@@ -48,8 +60,33 @@ var getWidth = function getWidth(width, mode) {
  * @returns The rendered breakout mark as a React element.
  */
 function Breakout(props) {
+  var width = getWidth('width' in props ? props.width : null, props.mode);
+  var useStickySafeCentering = (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
+  if (useStickySafeCentering) {
+    return (0, _react.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: _consts.RendererCssClassName.STICKY_SAFE_BREAKOUT_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER,
+      css: flexWrapperStyles
+    }, (0, _react.jsx)("div", (0, _extends2.default)({
+      css: innerWrapperStyles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: "".concat(_consts.RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " fabric-editor-breakout-mark fabric-editor-block-mark"),
+      "data-mode": props.mode
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, (0, _experiments.editorExperiment)('advanced_layouts', true) && {
+      'data-has-width': !!props.width,
+      'data-width': props.width
+    }, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      style: {
+        width: width
+      }
+    }), props.children));
+  }
   return (0, _react.jsx)("div", (0, _extends2.default)({
-    css: wrapperStyles,
+    css: legacyWrapperStyles,
     "data-mode": props.mode
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -16,16 +16,36 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkDatasource = require("@atlaskit/link-datasource");
 var _ssr = require("@atlaskit/smart-card/ssr");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _colors = require("@atlaskit/theme/colors");
 var _utils = require("@atlaskit/editor-common/utils");
 var _PortalContext = require("../../ui/Renderer/PortalContext");
+var _consts = require("../../consts");
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var datasourceCenterWrapperStyles = (0, _react.css)({
+  marginTop: "var(--ds-space-150, 0.75rem)",
+  marginBottom: "var(--ds-space-150, 0.75rem)"
+});
 var datasourceContainerStyleWithMarginTop = (0, _react.css)({
+  borderRadius: "var(--ds-radius-large, 8px)",
+  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
+  overflow: 'hidden',
+  marginTop: "var(--ds-space-150, 0.75rem)",
+  marginBottom: "var(--ds-space-150, 0.75rem)"
+});
+
+// No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse). Styles from datasourceContainerStyleLegacy
+var datasourceContainerStyleNoVerticalMargin = (0, _react.css)({
+  borderRadius: "var(--ds-radius-large, 8px)",
+  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
+  overflow: 'hidden'
+});
+var datasourceContainerStyleLegacy = (0, _react.css)({
   borderRadius: "var(--ds-radius-large, 8px)",
   border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
   overflow: 'hidden',
@@ -108,8 +128,10 @@ function BlockCard(props) {
         // eslint-disable-next-line react/jsx-props-no-spreading
       }, cardProps), (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
         var width = _ref5.width;
-        return (0, _react.jsx)("div", {
-          css: datasourceContainerStyleWithMarginTop,
+        var useStickySafeCentering = (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
+        var useCenterWrapper = !isNodeNested && useStickySafeCentering;
+        var datasourceDiv = (0, _react.jsx)("div", {
+          css: useCenterWrapper ? datasourceContainerStyleNoVerticalMargin : useStickySafeCentering ? datasourceContainerStyleWithMarginTop : datasourceContainerStyleLegacy,
           "data-testid": "renderer-datasource-table",
           "data-local-id": localId,
           style: {
@@ -124,6 +146,11 @@ function BlockCard(props) {
           wrappedColumnKeys: wrappedColumnKeys && wrappedColumnKeys.length > 0 ? wrappedColumnKeys : undefined,
           url: url
         }));
+        return useCenterWrapper ? (0, _react.jsx)("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+          className: _consts.RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER,
+          css: datasourceCenterWrapperStyles
+        }, datasourceDiv) : datasourceDiv;
       })));
     }
     return (0, _react.jsx)(_inlineCard.default, {

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

@@ -16,8 +16,10 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _fallback = require("./fallback");
+var _consts = require("../../consts");
 var _style = require("../../ui/Renderer/style");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -43,9 +45,15 @@ var embedCardWrapperStyles = (0, _react.css)({
   },
   margin: '0 auto'
 });
+var embedCardCenterWrapperStyles = (0, _react.css)({
+  // Match MediaSingle calcMargin(layout) default for wide/full-width: 24px top/bottom (so wrapper participates in collapse)
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- Matches editor-common MediaSingle calcMargin
+  margin: '24px 0'
+});
 
+// Legacy centering when platform_editor_flex_based_centering is off.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var uIMediaSingleLayoutStyles = (0, _react.css)({
+var uIMediaSingleLayoutStylesLegacy = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
   transform: 'translateX(-50%)'
@@ -150,7 +158,8 @@ function EmbedCardInternal(props) {
       }
     }
     var lineLength = isFullWidth ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? uIMediaSingleLayoutStyles : '';
+    var useStickySafeCentering = (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
+    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? useStickySafeCentering ? undefined : uIMediaSingleLayoutStylesLegacy : '';
     var onError = function onError(_ref4) {
       var err = _ref4.err;
       if (err) {
@@ -199,30 +208,38 @@ function EmbedCardInternal(props) {
       }, cardProps), (0, _react.jsx)(_smartCard.EmbedResizeMessageListener, {
         embedIframeRef: embedIframeRef,
         onHeightUpdate: setLiveHeight
-      }, (0, _react.jsx)(_ui.MediaSingle, {
-        css: uiMediaSingleStyles,
-        layout: layout,
-        width: originalWidth,
-        containerWidth: containerWidth,
-        pctWidth: width,
-        height: originalHeight,
-        fullWidthMode: isFullWidth,
-        nodeType: "embedCard",
-        lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
-        hasFallbackContainer: hasPreview,
-        isInsideOfInlineExtension: isInsideOfInlineExtension
-      }, (0, _react.jsx)("div", {
-        css: embedCardWrapperStyles
-      }, (0, _react.jsx)("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: "embedCardView-content-wrap",
-        "data-embed-card": true,
-        "data-layout": layout,
-        "data-width": width,
-        "data-card-data": data ? JSON.stringify(data) : undefined,
-        "data-card-url": url,
-        "data-card-original-height": originalHeight
-      }, cardComponent)))))
+      }, function () {
+        var useCenterWrapper = (layout === 'full-width' || layout === 'wide') && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
+        var mediaSingle = (0, _react.jsx)(_ui.MediaSingle, {
+          css: uiMediaSingleStyles,
+          layout: layout,
+          width: originalWidth,
+          containerWidth: containerWidth,
+          pctWidth: width,
+          height: originalHeight,
+          fullWidthMode: isFullWidth,
+          nodeType: "embedCard",
+          lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
+          hasFallbackContainer: hasPreview,
+          isInsideOfInlineExtension: isInsideOfInlineExtension
+        }, (0, _react.jsx)("div", {
+          css: embedCardWrapperStyles
+        }, (0, _react.jsx)("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          className: "embedCardView-content-wrap",
+          "data-embed-card": true,
+          "data-layout": layout,
+          "data-width": width,
+          "data-card-data": data ? JSON.stringify(data) : undefined,
+          "data-card-url": url,
+          "data-card-original-height": originalHeight
+        }, cardComponent)));
+        return useCenterWrapper ? (0, _react.jsx)("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+          className: _consts.RendererCssClassName.EMBED_CARD_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER,
+          css: embedCardCenterWrapperStyles
+        }, mediaSingle) : mediaSingle;
+      }()))
     );
   }));
 }

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

@@ -78,7 +78,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
   var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
   var inlineClassName = isInline ? _consts.RendererCssClassName.EXTENSION_AS_INLINE : '';
   if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
-    return (0, _react.jsx)("div", {
+    var extensionDiv = (0, _react.jsx)("div", {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -101,15 +101,20 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       className: overflowContainerClass,
       css: [!(isInsideOfInlineExtension && (0, _expValEquals.expValEquals)('confluence_inline_insert_excerpt_width_bugfix', 'isEnabled', true)) && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
+    return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
+    }, extensionDiv) : extensionDiv;
   }
   return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
     var width = _ref2.width;
-    return (0, _react.jsx)("div", {
+    var extensionDiv = (0, _react.jsx)("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(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         width: isInline ? undefined : ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         (0, _utils.calcBreakoutWidth)(layout, width) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
@@ -125,6 +130,10 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       className: overflowContainerClass,
       css: [!(isInsideOfInlineExtension && (0, _expValEquals.expValEquals)('confluence_inline_insert_excerpt_width_bugfix', 'isEnabled', true)) && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
+    return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
+    }, extensionDiv) : extensionDiv;
   });
 };
 var Extension = function Extension(props) {

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

@@ -31,6 +31,11 @@ var containerStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
   '&:first-child > .ak-renderer-extension': {
     marginTop: 0
+  },
+  // When patch is on, direct child is center wrapper (not extension); same first-child behaviour
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
+  '&:first-child > .ak-renderer-sticky-safe-center-wrapper': {
+    marginTop: 0
   }
 });
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
@@ -166,6 +171,13 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   // 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)) {
+    var _isTopLevel = path.length < 1;
+    var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout) && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
+    var wrapper = (0, _react.jsx)(MultiBodiedExtensionWrapperNext, {
+      layout: layout,
+      path: path,
+      rendererAppearance: rendererAppearance
+    }, renderContent());
     return (0, _react.jsx)("section", {
       css: [containerStyles, containerActiveFrameStyles],
       "data-testid": "multiBodiedExtension--container",
@@ -174,12 +186,13 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       "data-layout": layout,
       "data-local-id": localId,
       "data-node-type": "multiBodiedExtension"
-    }, (0, _react.jsx)(MultiBodiedExtensionWrapperNext, {
-      layout: layout,
-      path: path,
-      rendererAppearance: rendererAppearance
-    }, renderContent()));
+    }, _useCenterWrapper ? (0, _react.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
+    }, wrapper) : wrapper);
   }
+  var isTopLevel = path.length < 1;
+  var useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout) && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
   return (0, _react.jsx)("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
@@ -189,12 +202,16 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     "data-local-id": localId
   }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
     var width = _ref5.width;
-    return (0, _react.jsx)(MultiBodiedExtensionWrapperLegacy, {
+    var wrapper = (0, _react.jsx)(MultiBodiedExtensionWrapperLegacy, {
       layout: layout,
       width: width,
       path: path,
       rendererAppearance: rendererAppearance
     }, renderContent());
+    return useCenterWrapper ? (0, _react.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
+    }, wrapper) : wrapper;
   }));
 };
 var _default = exports.default = MultiBodiedExtension;

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

@@ -29,7 +29,7 @@ var _getBaseFontSize = require("./get-base-font-size");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
-var _css8;
+var _css8, _$concat3, _$concat6;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* 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 */
@@ -996,6 +996,22 @@ var headerSmartCardStyles = (0, _react.css)({
     }
   }
 });
+
+// Flex wrapper for centering without transform (platform_editor_flex_based_centering).
+// flex: 1 1 0% + minWidth: 0 so the wrapper takes full width when it's a flex item (full-width nodes otherwise render narrow).
+// flexShrink: 0 on child so the node keeps size.
+var centerWrapperStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.FLEX_CENTER_WRAPPER), {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  width: '100%',
+  flex: '1 1 0%',
+  minWidth: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& > *': {
+    flexShrink: 0
+  }
+}));
 var baseOtherStylesDuplicateAnchor = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -1041,7 +1057,7 @@ var baseOtherStylesDuplicateAnchor = (0, _react.css)((0, _defineProperty2.defaul
 }), 'div[class^="image-wrap-"] + div[class^="image-wrap-"]', {
   marginLeft: 0,
   marginRight: 0
-}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " >"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "*:not([data-mark-type='fragment']) .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " >"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "*:not([data-mark-type='fragment']) .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
   // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
   // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO - improve inline style logic on table container so important styles aren't required here
@@ -1057,16 +1073,45 @@ var baseOtherStylesDuplicateAnchor = (0, _react.css)((0, _defineProperty2.defaul
   overflowX: 'auto'
 }), "& .".concat(_consts.RendererCssClassName.EXTENSION, ":first-child"), {
   marginTop: 0
-})), ".".concat(_consts.RendererCssClassName.DOCUMENT), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.EXTENSION), {
+}), "& .".concat(_consts.RendererCssClassName.FLEX_CENTER_WRAPPER, ":first-child"), {
+  marginTop: 0
+})), ".".concat(_consts.RendererCssClassName.DOCUMENT), (_$concat3 = {}, (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)(_$concat3, ".".concat(_consts.RendererCssClassName.EXTENSION), {
   marginTop: "".concat(_editorSharedStyles.blockNodesVerticalMargin)
-}), ".".concat(_consts.RendererCssClassName.EXTENSION_CENTER_ALIGN), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  transform: 'translateX(-50%)'
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER), {
+  marginTop: "".concat(_editorSharedStyles.blockNodesVerticalMargin)
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-multiBodiedExtension-container]:first-child .").concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER), {
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(_consts.RendererCssClassName.EXTENSION), {
+  marginTop: 0,
+  marginBottom: 0
+}), ".".concat(_consts.RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " .mediaSingleView-content-wrap"), {
+  marginTop: 0,
+  marginBottom: 0
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " > *:first-child"), {
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(_consts.RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " > .mediaSingleView-content-wrap > *:first-child"), {
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " > .mediaSingleView-content-wrap > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(_consts.RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER, " > div > *:first-child"), {
+  marginTop: 0
+}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat3, ".".concat(_consts.RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER, " > div > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(_consts.RendererCssClassName.EXTENSION, " > *:first-child"), {
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(_consts.RendererCssClassName.EXTENSION, " > *:last-child"), {
+  marginBottom: 0
 }), ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   overflowX: 'auto'
 }), ".".concat(_ui.shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   display: 'flex'
+}))));
+var extensionCenterAlignLegacyStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT), (0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.EXTENSION_CENTER_ALIGN), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
 })));
 var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   '& .UnknownBlock': {
@@ -1113,7 +1158,7 @@ var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
 }), 'div[class^="image-wrap-"] + div[class^="image-wrap-"]', {
   marginLeft: 0,
   marginRight: 0
-}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " >"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "*:not([data-mark-type='fragment']) .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " >"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "*:not([data-mark-type='fragment']) .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
   // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
   // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO - improve inline style logic on table container so important styles aren't required here
@@ -1129,17 +1174,41 @@ var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
   overflowX: 'auto'
 }), "& .".concat(_consts.RendererCssClassName.EXTENSION, ":first-child"), {
   marginTop: 0
-})), ".".concat(_consts.RendererCssClassName.DOCUMENT), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.EXTENSION), {
+}), "& .".concat(_consts.RendererCssClassName.FLEX_CENTER_WRAPPER, ":first-child"), {
+  marginTop: 0
+})), ".".concat(_consts.RendererCssClassName.DOCUMENT), (_$concat6 = {}, (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)(_$concat6, ".".concat(_consts.RendererCssClassName.EXTENSION), {
   marginTop: "".concat(_editorSharedStyles.blockNodesVerticalMargin)
-}), ".".concat(_consts.RendererCssClassName.EXTENSION_CENTER_ALIGN), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  transform: 'translateX(-50%)'
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER), {
+  marginTop: "".concat(_editorSharedStyles.blockNodesVerticalMargin)
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-multiBodiedExtension-container]:first-child .").concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER), {
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(_consts.RendererCssClassName.EXTENSION), {
+  marginTop: 0,
+  marginBottom: 0
+}), ".".concat(_consts.RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " .mediaSingleView-content-wrap"), {
+  marginTop: 0,
+  marginBottom: 0
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " > *:first-child"), {
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(_consts.RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " > .mediaSingleView-content-wrap > *:first-child"), {
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " > .mediaSingleView-content-wrap > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(_consts.RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER, " > div > *:first-child"), {
+  marginTop: 0
+}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat6, ".".concat(_consts.RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER, " > div > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(_consts.RendererCssClassName.EXTENSION, " > *:first-child"), {
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(_consts.RendererCssClassName.EXTENSION, " > *:last-child"), {
+  marginBottom: 0
 }), ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   overflowX: 'auto'
 }), ".".concat(_ui.shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   display: 'flex'
-})));
+}))));
 var alignedHeadingAnchorStyleDuplicateAnchor = (0, _react.css)({
   // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
   // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
@@ -1944,11 +2013,11 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-      (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
+      (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, !(0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
       // this should be placed after baseOtherStyles
       (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), (0, _expValEquals.expValEquals)('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-      (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, 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 && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockOverflowStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2') && syncBlockPatch2Styles],
+      (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, 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 && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockOverflowStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
       "data-testid": testId
     }, children)
   );

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

@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "126.9.4";
+var packageVersion = "126.9.5";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/consts.js

@@ -3,11 +3,22 @@
 
 const clPrefix = 'ak-renderer-';
 export const RendererCssClassName = {
+  FLEX_CENTER_WRAPPER: `${clPrefix}flex-center-wrapper`,
   DOCUMENT: `${clPrefix}document`,
   EXTENSION: `${clPrefix}extension`,
   EXTENSION_AS_INLINE: `${clPrefix}extension-as-inline`,
   EXTENSION_CENTER_ALIGN: `${clPrefix}extension-center-align`,
   EXTENSION_OVERFLOW_CONTAINER: `${clPrefix}extension-overflow-container`,
+  /** Wrapper for center-aligned extensions/MBE; margin here so it participates in collapse */
+  STICKY_SAFE_CENTER_WRAPPER: `${clPrefix}sticky-safe-center-wrapper`,
+  /** Wrapper for center-aligned embed card (wide/full-width); margin here so it participates in collapse */
+  EMBED_CARD_CENTER_WRAPPER: `${clPrefix}embed-card-center-wrapper`,
+  /** Wrapper for center-aligned block card datasource (wide/full-width); margin here so it participates in collapse */
+  BLOCK_CARD_DATASOURCE_CENTER_WRAPPER: `${clPrefix}block-card-datasource-center-wrapper`,
+  /** Outer flex wrapper for sticky-safe breakout (has vertical margin); zero margin when first in doc */
+  STICKY_SAFE_BREAKOUT_WRAPPER: `${clPrefix}sticky-safe-breakout-wrapper`,
+  /** Flex item in sticky-safe breakout; zero first/last child margin so flex container height matches legacy */
+  STICKY_SAFE_BREAKOUT_INNER: `${clPrefix}sticky-safe-breakout-inner`,
   NUMBER_COLUMN: `${clPrefix}table-number-column`,
   SORTABLE_COLUMN_WRAPPER: `${clPrefix}tableHeader-sortable-column__wrapper`,
   SORTABLE_COLUMN: `${clPrefix}tableHeader-sortable-column`,

package/dist/es2019/react/index.js

@@ -400,10 +400,9 @@ export default class ReactSerializer {
     const isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
     const isInsideMultiBodiedExtension = insideMultiBodiedExtension(path, node.type.schema);
     const isInsideOfTable = insideTable(path, node.type.schema);
-
-    // TODO: EDITOR-3850 - support sticky headers inside breakouts (layouts and expands)
-    const isInsideBreakoutExpand = expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && expValEquals('platform_editor_table_sticky_header_patch_11', 'isEnabled', true) && insideBreakoutExpand(path);
-    const stickyHeaders = !isInsideOfTable && !insideBreakoutLayout(path) && !isInsideBreakoutExpand ? this.stickyHeaders : undefined;
+    const isStickySafeCenteringEnabled = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+    const isInsideBreakoutExpand = !isStickySafeCenteringEnabled && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && expValEquals('platform_editor_table_sticky_header_patch_11', 'isEnabled', true) && insideBreakoutExpand(path);
+    const stickyHeaders = isStickySafeCenteringEnabled ? !isInsideOfTable ? this.stickyHeaders : undefined : !isInsideOfTable && !insideBreakoutLayout(path) && !isInsideBreakoutExpand ? this.stickyHeaders : undefined;
     return {
       ...this.getProps(node),
       allowColumnSorting: this.allowColumnSorting,