@atlaskit/renderer 136.2.3 → 136.2.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 136.2.5
+
+### Patch Changes
+
+- [`4067622b56b33`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4067622b56b33) -
+  Clean up experiment `platform_editor_flex_based_centering`
+- Updated dependencies
+
+## 136.2.4
+
+### Patch Changes
+
+- [`b6733d7c1b79e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b6733d7c1b79e) -
+  [ux] Updated styles for collapsible headings to ensure any element with height set via inline
+  style is not taking space when heading is collapsed.
+- Updated dependencies
+
 ## 136.2.3
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -447,9 +447,7 @@ 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);
-      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, _rendererNode.insideBreakoutExpand)(path);
-      var stickyHeaders = isStickySafeCenteringEnabled ? !isInsideOfTable ? this.stickyHeaders : undefined : !isInsideOfTable && !(0, _rendererNode.insideBreakoutLayout)(path) && !isInsideBreakoutExpand ? this.stickyHeaders : undefined;
+      var stickyHeaders = !isInsideOfTable ? this.stickyHeaders : undefined;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
         columnWidths: (0, _utils.getColumnWidths)(node),

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

@@ -17,14 +17,6 @@ var _consts = require("../../consts");
  */
 /* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
 
-// 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")
@@ -63,32 +55,15 @@ function Breakout(props) {
   var _props$width;
   var breakoutWidth = (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : null;
   var width = getWidth(breakoutWidth, 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: legacyWrapperStyles,
+  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
@@ -100,8 +75,5 @@ function Breakout(props) {
     style: {
       width: width
     }
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "fabric-editor-breakout-mark fabric-editor-block-mark"
-  }), props.children);
+  }), props.children));
 }

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

@@ -18,7 +18,6 @@ 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 _utils2 = require("@atlaskit/editor-common/utils");
 var _PortalContext = require("../../ui/Renderer/PortalContext");
 var _consts = require("../../consts");
@@ -40,22 +39,12 @@ var datasourceContainerStyleWithMarginTop = (0, _react.css)({
   marginBottom: "var(--ds-space-150, 12px)"
 });
 
-// No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse). Styles from datasourceContainerStyleLegacy
+// No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse).
 var datasourceContainerStyleNoVerticalMargin = (0, _react.css)({
   borderRadius: "var(--ds-radius-large, 8px)",
   border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
   overflow: 'hidden'
 });
-var datasourceContainerStyleLegacy = (0, _react.css)({
-  borderRadius: "var(--ds-radius-large, 8px)",
-  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
-  overflow: 'hidden',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  marginBottom: "var(--ds-space-150, 12px)",
-  transform: 'translateX(-50%)',
-  marginTop: "var(--ds-space-150, 12px)"
-});
 function BlockCard(props) {
   var url = props.url,
     data = props.data,
@@ -140,10 +129,9 @@ function BlockCard(props) {
         onClick: onConsumerClick
       }), (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
         var width = _ref5.width;
-        var useStickySafeCentering = (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
-        var useCenterWrapper = !isNodeNested && useStickySafeCentering;
+        var useCenterWrapper = !isNodeNested;
         var datasourceDiv = (0, _react.jsx)("div", {
-          css: useCenterWrapper ? datasourceContainerStyleNoVerticalMargin : useStickySafeCentering ? datasourceContainerStyleWithMarginTop : datasourceContainerStyleLegacy,
+          css: useCenterWrapper ? datasourceContainerStyleNoVerticalMargin : datasourceContainerStyleWithMarginTop,
           "data-testid": "renderer-datasource-table",
           "data-local-id": localId,
           style: {

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

@@ -16,7 +16,6 @@ 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 _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
@@ -52,14 +51,6 @@ var embedCardCenterWrapperStyles = (0, _react.css)({
   // 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 uIMediaSingleLayoutStylesLegacy = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  transform: 'translateX(-50%)'
-});
 function EmbedCardInternal(props) {
   var _smartLinks$frameStyl;
   var url = props.url,
@@ -164,8 +155,6 @@ function EmbedCardInternal(props) {
       }
     }
     var lineLength = isFullWidth ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-    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) {
@@ -221,9 +210,8 @@ function EmbedCardInternal(props) {
         embedIframeRef: embedIframeRef,
         onHeightUpdate: setLiveHeight
       }, function () {
-        var useCenterWrapper = (layout === 'full-width' || layout === 'wide') && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
+        var useCenterWrapper = layout === 'full-width' || layout === 'wide';
         var mediaSingle = (0, _react.jsx)(_ui.MediaSingle, {
-          css: uiMediaSingleStyles,
           layout: layout,
           width: originalWidth,
           containerWidth: containerWidth,

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

@@ -136,7 +136,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!(isInsideOfTable && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
-    return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
+    return centerAlignClass ? (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;
@@ -166,7 +166,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       className: "".concat(_consts.RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!(isInsideOfTable && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
-    return centerAlignClass && (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) ? (0, _react.jsx)("div", {
+    return centerAlignClass ? (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;

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

@@ -181,7 +181,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   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 _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout);
     var wrapper = (0, _react.jsx)(MultiBodiedExtensionWrapperNext, {
       layout: layout,
       path: path,
@@ -201,7 +201,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }, 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);
+  var useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout);
   return (0, _react.jsx)("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",

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

@@ -29,7 +29,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _collapsibleHeadingsDom = require("../collapsible-headings-dom");
-var _css9, _$concat3, _$concat6;
+var _css9, _$concat3, _$concat5;
 /* 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 */
@@ -99,10 +99,17 @@ var baseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProper
   clear: 'both'
 }), ".".concat(_consts.RendererCssClassName.DOCUMENT), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "> [".concat(_collapsibleHeadingsDom.COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, "][hidden='until-found']"), {
   display: 'block',
-  minBlockSize: 0,
-  marginBlock: 0,
-  paddingBlock: 0,
-  borderBlockWidth: 0
+  // `hidden='until-found'` maps to `content-visibility: hidden`, which skips the element's
+  // contents but keeps its own box, sized by its own specified sizes. Everything below
+  // needs `!important` because extension nodes are sized and spaced by declarations that
+  // would otherwise win: an inline `height`/`min-height` reserving macro height (see
+  // `react/nodes/extension.tsx`), and `!important` alignment margins from
+  // `@atlaskit/native-embeds-common`. Without it the collapsed section keeps a visible gap.
+  blockSize: '0 !important',
+  minBlockSize: '0 !important',
+  marginBlock: '0 !important',
+  paddingBlock: '0 !important',
+  borderBlockWidth: '0 !important'
 }), ".".concat(_mediaInline.INLINE_IMAGE_WRAPPER_CLASS_NAME), {
   height: '22px',
   transform: "translateY(-2px)"
@@ -1038,7 +1045,7 @@ var headerSmartCardStyles = (0, _react.css)({
   }
 });
 
-// Flex wrapper for centering without transform (platform_editor_flex_based_centering).
+// Flex wrapper for centering without transform.
 // 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), {
@@ -1141,11 +1148,6 @@ var baseOtherStylesDuplicateAnchor = (0, _react.css)((0, _defineProperty2.defaul
 var hideExtensionStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.EXTENSION, ":has([data-extension-key='hide'])"), {
   marginTop: 0
 }));
-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': {
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -1207,7 +1209,7 @@ var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
   overflowX: 'auto'
 }), "& .".concat(_consts.RendererCssClassName.EXTENSION, ":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), {
+})), ".".concat(_consts.RendererCssClassName.DOCUMENT), (_$concat5 = {}, (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)(_$concat5, ".".concat(_consts.RendererCssClassName.EXTENSION), {
   marginTop: "".concat(_editorSharedStyles.blockNodesVerticalMargin)
 }), ".".concat(_consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(_consts.RendererCssClassName.EXTENSION), {
   marginBottom: 0
@@ -1228,7 +1230,7 @@ var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
   marginBottom: 0
 }), ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   overflowX: 'auto'
-}), (0, _defineProperty2.default)(_$concat6, ".".concat(_ui.shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER), {
+}), (0, _defineProperty2.default)(_$concat5, ".".concat(_ui.shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   display: 'flex'
 }))));
 var alignedHeadingAnchorStyleDuplicateAnchor = (0, _react.css)({
@@ -2289,7 +2291,7 @@ 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, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && ((0, _expValEquals.expValEquals)('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // 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, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
+    (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
     // 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), 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

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

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

package/dist/es2019/react/index.js

@@ -14,7 +14,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { getText } from '../utils';
 import { isAnnotationMark, toReact as markToReact } from './marks';
 import { isCodeMark } from './marks/code';
-import { getNestedUnderNodes, insideBlockNode, insideBreakoutExpand, insideBreakoutLayout, insideMultiBodiedExtension, insideTable } from './renderer-node';
+import { getNestedUnderNodes, insideBlockNode, insideMultiBodiedExtension, insideTable } from './renderer-node';
 import { renderTextSegments } from './utils/render-text-segments';
 import { segmentText } from './utils/segment-text';
 import { getStandaloneBackgroundColorMarks } from './utils/getStandaloneBackgroundColorMarks';
@@ -413,9 +413,7 @@ 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);
-    const isStickySafeCenteringEnabled = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
-    const isInsideBreakoutExpand = !isStickySafeCenteringEnabled && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && insideBreakoutExpand(path);
-    const stickyHeaders = isStickySafeCenteringEnabled ? !isInsideOfTable ? this.stickyHeaders : undefined : !isInsideOfTable && !insideBreakoutLayout(path) && !isInsideBreakoutExpand ? this.stickyHeaders : undefined;
+    const stickyHeaders = !isInsideOfTable ? this.stickyHeaders : undefined;
     return {
       ...this.getProps(node),
       allowColumnSorting: this.allowColumnSorting,

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

@@ -9,15 +9,6 @@ import { akEditorFullWidthLayoutWidth, akEditorMaxLayoutWidth, blockNodesVertica
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { RendererCssClassName } from '../../consts';
-
-// Legacy centering (breaks position: sticky in nested content).
-const legacyWrapperStyles = 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`,
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  transform: 'translateX(-50%)'
-});
 const flexWrapperStyles = 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`
@@ -56,32 +47,15 @@ export default function Breakout(props) {
   var _props$width;
   const breakoutWidth = (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : null;
   const width = getWidth(breakoutWidth, props.mode);
-  const useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
-  if (useStickySafeCentering) {
-    return jsx("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      className: RendererCssClassName.STICKY_SAFE_BREAKOUT_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
-      css: flexWrapperStyles
-    }, jsx("div", _extends({
-      css: innerWrapperStyles
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      ,
-      className: `${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
-    }, 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
-      }
-    }), props.children));
-  }
-  return jsx("div", _extends({
-    css: legacyWrapperStyles,
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: RendererCssClassName.STICKY_SAFE_BREAKOUT_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
+    css: flexWrapperStyles
+  }, jsx("div", _extends({
+    css: innerWrapperStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: `${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
@@ -93,8 +67,5 @@ export default function Breakout(props) {
     style: {
       width
     }
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "fabric-editor-breakout-mark fabric-editor-block-mark"
-  }), props.children);
+  }), props.children));
 }

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

@@ -16,7 +16,6 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { usePortal } from '../../ui/Renderer/PortalContext';
 import { RendererCssClassName } from '../../consts';
@@ -32,22 +31,12 @@ const datasourceContainerStyleWithMarginTop = css({
   marginBottom: `${"var(--ds-space-150, 12px)"}`
 });
 
-// No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse). Styles from datasourceContainerStyleLegacy
+// No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse).
 const datasourceContainerStyleNoVerticalMargin = css({
   borderRadius: `${"var(--ds-radius-large, 8px)"}`,
   border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
   overflow: 'hidden'
 });
-const datasourceContainerStyleLegacy = css({
-  borderRadius: `${"var(--ds-radius-large, 8px)"}`,
-  border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
-  overflow: 'hidden',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  marginBottom: `${"var(--ds-space-150, 12px)"}`,
-  transform: 'translateX(-50%)',
-  marginTop: `${"var(--ds-space-150, 12px)"}`
-});
 export default function BlockCard(props) {
   const {
     url,
@@ -129,10 +118,9 @@ export default function BlockCard(props) {
       }), jsx(WidthConsumer, null, ({
         width
       }) => {
-        const useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
-        const useCenterWrapper = !isNodeNested && useStickySafeCentering;
+        const useCenterWrapper = !isNodeNested;
         const datasourceDiv = jsx("div", {
-          css: useCenterWrapper ? datasourceContainerStyleNoVerticalMargin : useStickySafeCentering ? datasourceContainerStyleWithMarginTop : datasourceContainerStyleLegacy,
+          css: useCenterWrapper ? datasourceContainerStyleNoVerticalMargin : datasourceContainerStyleWithMarginTop,
           "data-testid": "renderer-datasource-table",
           "data-local-id": localId,
           style: {

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

@@ -14,7 +14,6 @@ import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle, WidthCon
 import { akEditorDefaultLayoutWidth, akEditorFullPageNarrowBreakout, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CardErrorBoundary } from './fallback';
 import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
@@ -43,14 +42,6 @@ const embedCardCenterWrapperStyles = css({
   // 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
-const uIMediaSingleLayoutStylesLegacy = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  transform: 'translateX(-50%)'
-});
 function EmbedCardInternal(props) {
   var _smartLinks$frameStyl;
   const {
@@ -151,8 +142,6 @@ function EmbedCardInternal(props) {
       }
     }
     const lineLength = isFullWidth ? Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-    const useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
-    const uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? useStickySafeCentering ? undefined : uIMediaSingleLayoutStylesLegacy : '';
     const onError = ({
       err
     }) => {
@@ -209,9 +198,8 @@ function EmbedCardInternal(props) {
         embedIframeRef: embedIframeRef,
         onHeightUpdate: setLiveHeight
       }, (() => {
-        const useCenterWrapper = (layout === 'full-width' || layout === 'wide') && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+        const useCenterWrapper = layout === 'full-width' || layout === 'wide';
         const mediaSingle = jsx(UIMediaSingle, {
-          css: uiMediaSingleStyles,
           layout: layout,
           width: originalWidth,
           containerWidth: containerWidth,

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

@@ -115,7 +115,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
       css: [!(isInsideOfTable && isExperimentEnabled('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
-    return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
+    return centerAlignClass ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
     }, extensionDiv) : extensionDiv;
@@ -146,7 +146,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       className: `${RendererCssClassName.EXTENSION_INNER_WRAPPER} ${overflowContainerClass}`,
       css: [!(isInsideOfTable && isExperimentEnabled('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
-    return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
+    return centerAlignClass ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
     }, extensionDiv) : extensionDiv;

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

@@ -177,7 +177,7 @@ const MultiBodiedExtension = props => {
 	`;
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
     const isTopLevel = path.length < 1;
-    const useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout) && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+    const useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout);
     const wrapper = jsx(MultiBodiedExtensionWrapperNext, {
       layout: layout,
       path: path,
@@ -197,7 +197,7 @@ const MultiBodiedExtension = props => {
     }, wrapper) : wrapper);
   }
   const isTopLevel = path.length < 1;
-  const useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout) && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+  const useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout);
   return jsx("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",

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

@@ -90,10 +90,17 @@ const baseStyles = css({
   [`.${RendererCssClassName.DOCUMENT}`]: {
     [`> [${COLLAPSED_CONTENT_OWNERS_ATTRIBUTE}][hidden='until-found']`]: {
       display: 'block',
-      minBlockSize: 0,
-      marginBlock: 0,
-      paddingBlock: 0,
-      borderBlockWidth: 0
+      // `hidden='until-found'` maps to `content-visibility: hidden`, which skips the element's
+      // contents but keeps its own box, sized by its own specified sizes. Everything below
+      // needs `!important` because extension nodes are sized and spaced by declarations that
+      // would otherwise win: an inline `height`/`min-height` reserving macro height (see
+      // `react/nodes/extension.tsx`), and `!important` alignment margins from
+      // `@atlaskit/native-embeds-common`. Without it the collapsed section keeps a visible gap.
+      blockSize: '0 !important',
+      minBlockSize: '0 !important',
+      marginBlock: '0 !important',
+      paddingBlock: '0 !important',
+      borderBlockWidth: '0 !important'
     },
     // p, h3, and action items
     [`.${INLINE_IMAGE_WRAPPER_CLASS_NAME}`]: {
@@ -1228,7 +1235,7 @@ const headerSmartCardStyles = css({
   }
 });
 
-// Flex wrapper for centering without transform (platform_editor_flex_based_centering).
+// Flex wrapper for centering without transform.
 // 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.
 const centerWrapperStyles = css({
@@ -1333,7 +1340,7 @@ const baseOtherStylesDuplicateAnchor = css({
     [`.${RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER} .${RendererCssClassName.EXTENSION}`]: {
       marginBottom: 0
     },
-    /* platform_editor_flex_based_centering: embed card center wrapper has margin; zero MediaSingle vertical margin when wrapped so it doesn't double */
+    /* Embed card center wrapper has margin; zero MediaSingle vertical margin when wrapped so it doesn't double */
     [`.${RendererCssClassName.EMBED_CARD_CENTER_WRAPPER} .mediaSingleView-content-wrap`]: {
       marginTop: 0,
       marginBottom: 0
@@ -1369,15 +1376,6 @@ const hideExtensionStyles = css({
     marginTop: 0
   }
 });
-const extensionCenterAlignLegacyStyles = css({
-  [`.${RendererCssClassName.DOCUMENT}`]: {
-    [`.${RendererCssClassName.EXTENSION_CENTER_ALIGN}`]: {
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-      marginLeft: '50%',
-      transform: 'translateX(-50%)'
-    }
-  }
-});
 const baseOtherStyles = css({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -1466,7 +1464,7 @@ const baseOtherStyles = css({
     [`.${RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER} .${RendererCssClassName.EXTENSION}`]: {
       marginBottom: 0
     },
-    /* platform_editor_flex_based_centering: embed card center wrapper has margin; zero MediaSingle vertical margin when wrapped so it doesn't double */
+    /* Embed card center wrapper has margin; zero MediaSingle vertical margin when wrapped so it doesn't double */
     [`.${RendererCssClassName.EMBED_CARD_CENTER_WRAPPER} .mediaSingleView-content-wrap`]: {
       marginTop: 0,
       marginBottom: 0
@@ -2915,7 +2913,7 @@ export const RendererStyleContainer = props => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, !expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
+    fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (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

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

@@ -60,7 +60,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "136.2.2";
+const packageVersion = "136.2.4";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/index.js

@@ -21,7 +21,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { getText } from '../utils';
 import { isAnnotationMark, toReact as markToReact } from './marks';
 import { isCodeMark } from './marks/code';
-import { getNestedUnderNodes, insideBlockNode, insideBreakoutExpand, insideBreakoutLayout, insideMultiBodiedExtension, insideTable } from './renderer-node';
+import { getNestedUnderNodes, insideBlockNode, insideMultiBodiedExtension, insideTable } from './renderer-node';
 import { renderTextSegments } from './utils/render-text-segments';
 import { segmentText } from './utils/segment-text';
 import { getStandaloneBackgroundColorMarks } from './utils/getStandaloneBackgroundColorMarks';
@@ -440,9 +440,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var isInsideOfBlockNode = insideBlockNode(path, node.type.schema);
       var isInsideMultiBodiedExtension = insideMultiBodiedExtension(path, node.type.schema);
       var isInsideOfTable = insideTable(path, node.type.schema);
-      var isStickySafeCenteringEnabled = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
-      var isInsideBreakoutExpand = !isStickySafeCenteringEnabled && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && insideBreakoutExpand(path);
-      var stickyHeaders = isStickySafeCenteringEnabled ? !isInsideOfTable ? this.stickyHeaders : undefined : !isInsideOfTable && !insideBreakoutLayout(path) && !isInsideBreakoutExpand ? this.stickyHeaders : undefined;
+      var stickyHeaders = !isInsideOfTable ? this.stickyHeaders : undefined;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
         columnWidths: getColumnWidths(node),

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

@@ -9,15 +9,6 @@ import { akEditorFullWidthLayoutWidth, akEditorMaxLayoutWidth, blockNodesVertica
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { RendererCssClassName } from '../../consts';
-
-// Legacy centering (breaks position: sticky in nested content).
-var legacyWrapperStyles = 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"),
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  transform: 'translateX(-50%)'
-});
 var flexWrapperStyles = 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")
@@ -56,32 +47,15 @@ export default function Breakout(props) {
   var _props$width;
   var breakoutWidth = (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : null;
   var width = getWidth(breakoutWidth, props.mode);
-  var useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
-  if (useStickySafeCentering) {
-    return jsx("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      className: RendererCssClassName.STICKY_SAFE_BREAKOUT_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
-      css: flexWrapperStyles
-    }, jsx("div", _extends({
-      css: innerWrapperStyles
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      ,
-      className: "".concat(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
-    }, 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 jsx("div", _extends({
-    css: legacyWrapperStyles,
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: RendererCssClassName.STICKY_SAFE_BREAKOUT_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
+    css: flexWrapperStyles
+  }, jsx("div", _extends({
+    css: innerWrapperStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: "".concat(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
@@ -93,8 +67,5 @@ export default function Breakout(props) {
     style: {
       width: width
     }
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "fabric-editor-breakout-mark fabric-editor-block-mark"
-  }), props.children);
+  }), props.children));
 }

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

@@ -16,7 +16,6 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { usePortal } from '../../ui/Renderer/PortalContext';
 import { RendererCssClassName } from '../../consts';
@@ -32,22 +31,12 @@ var datasourceContainerStyleWithMarginTop = css({
   marginBottom: "var(--ds-space-150, 12px)"
 });
 
-// No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse). Styles from datasourceContainerStyleLegacy
+// No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse).
 var datasourceContainerStyleNoVerticalMargin = css({
   borderRadius: "var(--ds-radius-large, 8px)",
   border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
   overflow: 'hidden'
 });
-var datasourceContainerStyleLegacy = css({
-  borderRadius: "var(--ds-radius-large, 8px)",
-  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
-  overflow: 'hidden',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  marginBottom: "var(--ds-space-150, 12px)",
-  transform: 'translateX(-50%)',
-  marginTop: "var(--ds-space-150, 12px)"
-});
 export default function BlockCard(props) {
   var url = props.url,
     data = props.data,
@@ -132,10 +121,9 @@ export default function BlockCard(props) {
         onClick: onConsumerClick
       }), jsx(WidthConsumer, null, function (_ref5) {
         var width = _ref5.width;
-        var useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
-        var useCenterWrapper = !isNodeNested && useStickySafeCentering;
+        var useCenterWrapper = !isNodeNested;
         var datasourceDiv = jsx("div", {
-          css: useCenterWrapper ? datasourceContainerStyleNoVerticalMargin : useStickySafeCentering ? datasourceContainerStyleWithMarginTop : datasourceContainerStyleLegacy,
+          css: useCenterWrapper ? datasourceContainerStyleNoVerticalMargin : datasourceContainerStyleWithMarginTop,
           "data-testid": "renderer-datasource-table",
           "data-local-id": localId,
           style: {

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

@@ -15,7 +15,6 @@ import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle, WidthCon
 import { akEditorDefaultLayoutWidth, akEditorFullPageNarrowBreakout, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CardErrorBoundary } from './fallback';
 import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
@@ -44,14 +43,6 @@ var embedCardCenterWrapperStyles = css({
   // 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 uIMediaSingleLayoutStylesLegacy = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  transform: 'translateX(-50%)'
-});
 function EmbedCardInternal(props) {
   var _smartLinks$frameStyl;
   var url = props.url,
@@ -156,8 +147,6 @@ function EmbedCardInternal(props) {
       }
     }
     var lineLength = isFullWidth ? Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-    var useStickySafeCentering = 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) {
@@ -213,9 +202,8 @@ function EmbedCardInternal(props) {
         embedIframeRef: embedIframeRef,
         onHeightUpdate: setLiveHeight
       }, function () {
-        var useCenterWrapper = (layout === 'full-width' || layout === 'wide') && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+        var useCenterWrapper = layout === 'full-width' || layout === 'wide';
         var mediaSingle = jsx(UIMediaSingle, {
-          css: uiMediaSingleStyles,
           layout: layout,
           width: originalWidth,
           containerWidth: containerWidth,

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

@@ -126,7 +126,7 @@ export var renderExtension = function renderExtension(content, layout) {
       className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!(isInsideOfTable && isExperimentEnabled('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
-    return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
+    return centerAlignClass ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
     }, extensionDiv) : extensionDiv;
@@ -156,7 +156,7 @@ export var renderExtension = function renderExtension(content, layout) {
       className: "".concat(RendererCssClassName.EXTENSION_INNER_WRAPPER, " ").concat(overflowContainerClass),
       css: [!(isInsideOfTable && isExperimentEnabled('platform_editor_table_fit_to_content_patch_1')) && !isInsideOfInlineExtension && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, asInlineAnalytics, content));
-    return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
+    return centerAlignClass ? jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
     }, extensionDiv) : extensionDiv;

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

@@ -173,7 +173,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   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)) {
     var _isTopLevel = path.length < 1;
-    var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout) && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+    var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout);
     var wrapper = jsx(MultiBodiedExtensionWrapperNext, {
       layout: layout,
       path: path,
@@ -193,7 +193,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }, wrapper) : wrapper);
   }
   var isTopLevel = path.length < 1;
-  var useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout) && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+  var useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout);
   return jsx("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css9, _$concat3, _$concat6;
+var _css9, _$concat3, _$concat5;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
@@ -92,10 +92,17 @@ var baseStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProp
   clear: 'both'
 }), ".".concat(RendererCssClassName.DOCUMENT), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "> [".concat(COLLAPSED_CONTENT_OWNERS_ATTRIBUTE, "][hidden='until-found']"), {
   display: 'block',
-  minBlockSize: 0,
-  marginBlock: 0,
-  paddingBlock: 0,
-  borderBlockWidth: 0
+  // `hidden='until-found'` maps to `content-visibility: hidden`, which skips the element's
+  // contents but keeps its own box, sized by its own specified sizes. Everything below
+  // needs `!important` because extension nodes are sized and spaced by declarations that
+  // would otherwise win: an inline `height`/`min-height` reserving macro height (see
+  // `react/nodes/extension.tsx`), and `!important` alignment margins from
+  // `@atlaskit/native-embeds-common`. Without it the collapsed section keeps a visible gap.
+  blockSize: '0 !important',
+  minBlockSize: '0 !important',
+  marginBlock: '0 !important',
+  paddingBlock: '0 !important',
+  borderBlockWidth: '0 !important'
 }), ".".concat(INLINE_IMAGE_WRAPPER_CLASS_NAME), {
   height: '22px',
   transform: "translateY(-2px)"
@@ -1031,7 +1038,7 @@ var headerSmartCardStyles = css({
   }
 });
 
-// Flex wrapper for centering without transform (platform_editor_flex_based_centering).
+// Flex wrapper for centering without transform.
 // 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 = css(_defineProperty({}, ".".concat(RendererCssClassName.FLEX_CENTER_WRAPPER), {
@@ -1134,11 +1141,6 @@ var baseOtherStylesDuplicateAnchor = css(_defineProperty(_defineProperty(_define
 var hideExtensionStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.EXTENSION, ":has([data-extension-key='hide'])"), {
   marginTop: 0
 }));
-var extensionCenterAlignLegacyStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT), _defineProperty({}, ".".concat(RendererCssClassName.EXTENSION_CENTER_ALIGN), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  transform: 'translateX(-50%)'
-})));
 var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -1200,7 +1202,7 @@ var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
   overflowX: 'auto'
 }), "& .".concat(RendererCssClassName.EXTENSION, ":first-child"), {
   marginTop: 0
-})), ".".concat(RendererCssClassName.DOCUMENT), (_$concat6 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat6, ".".concat(RendererCssClassName.EXTENSION), {
+})), ".".concat(RendererCssClassName.DOCUMENT), (_$concat5 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat5, ".".concat(RendererCssClassName.EXTENSION), {
   marginTop: "".concat(blockNodesVerticalMargin)
 }), ".".concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(RendererCssClassName.EXTENSION), {
   marginBottom: 0
@@ -1221,7 +1223,7 @@ var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
   marginBottom: 0
 }), ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   overflowX: 'auto'
-}), _defineProperty(_$concat6, ".".concat(shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
+}), _defineProperty(_$concat5, ".".concat(shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   display: 'flex'
 }))));
 var alignedHeadingAnchorStyleDuplicateAnchor = css({
@@ -2282,7 +2284,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, !expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
+    fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (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

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

@@ -65,7 +65,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "136.2.2";
+var packageVersion = "136.2.4";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "136.2.3",
+	"version": "136.2.5",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -70,7 +70,7 @@
 		"@atlaskit/status": "^5.8.0",
 		"@atlaskit/task-decision": "^21.8.0",
 		"@atlaskit/theme": "^28.1.0",
-		"@atlaskit/tmp-editor-statsig": "^158.0.0",
+		"@atlaskit/tmp-editor-statsig": "^159.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/tooltip": "^24.2.0",
 		"@atlaskit/visually-hidden": "^4.3.0",