@atlaskit/renderer 133.16.4 → 133.16.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/renderer
 
+## 133.16.5
+
+### Patch Changes
+
+- [`2e067bdb34b2d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e067bdb34b2d) -
+  Fix a non-resized table inside an Excerpt macro shrinking to only its first columns when rendered
+  on a wide or full-width page. Inside a nested renderer (a macro body) a non-resized table's width
+  is a default layout cap (e.g. 760px/1800px, or a container-query length) taken from the outer
+  renderer's width context, which does not match the macro's own box. Promoting that value to inline
+  `!important` made the table ignore the available space and collapse. Under
+  `platform_nested_table_style_override_2` the renderer now re-asserts the parent stylesheet's
+  intent (`width: 100%`) for these non-resized tables. Explicitly resized tables (with a saved
+  width) are excluded and keep their author-chosen width, preserving the PGXT-10226 Include Page
+  fix; tables nested inside table cells (PGXT-10294) also remain untouched.
+
 ## 133.16.4
 
 ### Patch Changes

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

@@ -420,10 +420,27 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
      * Uses lastComputedStyle (populated during render) rather than reading from
      * element.style, because React may remove properties from the DOM when their
      * values transition to undefined between renders.
+     *
+     * `platform_nested_table_style_override_2` fixes a follow-up regression where a
+     * NON-resized table inside an Excerpt macro (not Excerpt Include) on a
+     * wide/full-width page shrinks to only show its first columns in the renderer.
+     * Inside a nested renderer (a macro body) a non-resized table's computed width
+     * is a default layout cap (760px/1800px, or a `cqw` length for full-page
+     * appearances) taken from the outer renderer's width context. That value does
+     * not match the macro's own box, so promoting it to inline `!important` makes
+     * the table collapse. Such tables have no author-chosen size to preserve, so
+     * under this gate we re-assert the parent stylesheet's intent (fill the box:
+     * `width: 100%; left: 0`) with inline `!important`.
+     *
+     * Explicitly resized tables (`tableNode.attrs.width` set) are excluded and keep
+     * the original PGXT-10226 behavior: their author-chosen width/left is promoted
+     * verbatim so the Include Page macro does not stretch or indent them. The
+     * table-cell short-circuit (PGXT-10294) above also still applies.
      */
   }, {
     key: "applyNestedRendererTableFix",
     value: function applyNestedRendererTableFix() {
+      var _this$props$tableNode;
       if (!this.containerRef || !(0, _platformFeatureFlags.fg)('platform_nested_table_style_override')) {
         return;
       }
@@ -435,6 +452,35 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         left = _this$lastComputedSty.left,
         marginLeft = _this$lastComputedSty.marginLeft;
       var style = this.containerRef.style;
+
+      // A table is "explicitly resized" when the author set a width on the node.
+      // Non-resized tables instead take a default layout cap (e.g. 760px/1800px)
+      // derived from the outer renderer's appearance.
+      var isExplicitlyResized = Boolean((_this$props$tableNode = this.props.tableNode) === null || _this$props$tableNode === void 0 ? void 0 : _this$props$tableNode.attrs.width);
+      if (!isExplicitlyResized && (0, _platformFeatureFlags.fg)('platform_nested_table_style_override_2')) {
+        // PGXT-10421: For a NON-resized table inside a nested renderer (e.g. an
+        // Excerpt macro body), the computed width is a default layout cap
+        // (760px/1800px, or a `cqw` length for full-page appearances) taken from
+        // the *outer* renderer's width context. That value does not match the
+        // macro's own box, so promoting it to inline `!important` makes the table
+        // ignore the available space and collapse to its first columns.
+        //
+        // These tables have no author-chosen size to preserve, so re-assert the
+        // parent stylesheet's intent — fill the available box (`width: 100%`) —
+        // with inline `!important` priority so it survives React re-renders and
+        // wins over the stylesheet rule that leaks into nested renderers.
+        style.setProperty('width', '100%', 'important');
+        style.setProperty('max-width', '100%', 'important');
+        style.setProperty('left', '0', 'important');
+        style.setProperty('margin-left', '0', 'important');
+        return;
+      }
+
+      // PGXT-10226: An explicitly resized table inside a nested renderer (e.g.
+      // Include Page macro) must keep its author-chosen width and position. The
+      // parent stylesheet forces `width: 100% !important; left: 0 !important`,
+      // which would stretch and indent it, so we promote the component's own
+      // computed width/left with inline `!important` to win the cascade.
       style.setProperty('width', width || 'auto', 'important');
       style.setProperty('max-width', '100%', 'important');
       style.setProperty('left', left || 'auto', 'important');

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

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

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

@@ -370,8 +370,25 @@ export class TableContainer extends React.Component {
    * Uses lastComputedStyle (populated during render) rather than reading from
    * element.style, because React may remove properties from the DOM when their
    * values transition to undefined between renders.
+   *
+   * `platform_nested_table_style_override_2` fixes a follow-up regression where a
+   * NON-resized table inside an Excerpt macro (not Excerpt Include) on a
+   * wide/full-width page shrinks to only show its first columns in the renderer.
+   * Inside a nested renderer (a macro body) a non-resized table's computed width
+   * is a default layout cap (760px/1800px, or a `cqw` length for full-page
+   * appearances) taken from the outer renderer's width context. That value does
+   * not match the macro's own box, so promoting it to inline `!important` makes
+   * the table collapse. Such tables have no author-chosen size to preserve, so
+   * under this gate we re-assert the parent stylesheet's intent (fill the box:
+   * `width: 100%; left: 0`) with inline `!important`.
+   *
+   * Explicitly resized tables (`tableNode.attrs.width` set) are excluded and keep
+   * the original PGXT-10226 behavior: their author-chosen width/left is promoted
+   * verbatim so the Include Page macro does not stretch or indent them. The
+   * table-cell short-circuit (PGXT-10294) above also still applies.
    */
   applyNestedRendererTableFix() {
+    var _this$props$tableNode;
     if (!this.containerRef || !fg('platform_nested_table_style_override')) {
       return;
     }
@@ -384,6 +401,35 @@ export class TableContainer extends React.Component {
       marginLeft
     } = this.lastComputedStyle;
     const style = this.containerRef.style;
+
+    // A table is "explicitly resized" when the author set a width on the node.
+    // Non-resized tables instead take a default layout cap (e.g. 760px/1800px)
+    // derived from the outer renderer's appearance.
+    const isExplicitlyResized = Boolean((_this$props$tableNode = this.props.tableNode) === null || _this$props$tableNode === void 0 ? void 0 : _this$props$tableNode.attrs.width);
+    if (!isExplicitlyResized && fg('platform_nested_table_style_override_2')) {
+      // PGXT-10421: For a NON-resized table inside a nested renderer (e.g. an
+      // Excerpt macro body), the computed width is a default layout cap
+      // (760px/1800px, or a `cqw` length for full-page appearances) taken from
+      // the *outer* renderer's width context. That value does not match the
+      // macro's own box, so promoting it to inline `!important` makes the table
+      // ignore the available space and collapse to its first columns.
+      //
+      // These tables have no author-chosen size to preserve, so re-assert the
+      // parent stylesheet's intent — fill the available box (`width: 100%`) —
+      // with inline `!important` priority so it survives React re-renders and
+      // wins over the stylesheet rule that leaks into nested renderers.
+      style.setProperty('width', '100%', 'important');
+      style.setProperty('max-width', '100%', 'important');
+      style.setProperty('left', '0', 'important');
+      style.setProperty('margin-left', '0', 'important');
+      return;
+    }
+
+    // PGXT-10226: An explicitly resized table inside a nested renderer (e.g.
+    // Include Page macro) must keep its author-chosen width and position. The
+    // parent stylesheet forces `width: 100% !important; left: 0 !important`,
+    // which would stretch and indent it, so we promote the component's own
+    // computed width/left with inline `!important` to win the cascade.
     style.setProperty('width', width || 'auto', 'important');
     style.setProperty('max-width', '100%', 'important');
     style.setProperty('left', left || 'auto', 'important');

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

@@ -59,7 +59,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 = "133.16.3";
+const packageVersion = "133.16.4";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -414,10 +414,27 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
      * Uses lastComputedStyle (populated during render) rather than reading from
      * element.style, because React may remove properties from the DOM when their
      * values transition to undefined between renders.
+     *
+     * `platform_nested_table_style_override_2` fixes a follow-up regression where a
+     * NON-resized table inside an Excerpt macro (not Excerpt Include) on a
+     * wide/full-width page shrinks to only show its first columns in the renderer.
+     * Inside a nested renderer (a macro body) a non-resized table's computed width
+     * is a default layout cap (760px/1800px, or a `cqw` length for full-page
+     * appearances) taken from the outer renderer's width context. That value does
+     * not match the macro's own box, so promoting it to inline `!important` makes
+     * the table collapse. Such tables have no author-chosen size to preserve, so
+     * under this gate we re-assert the parent stylesheet's intent (fill the box:
+     * `width: 100%; left: 0`) with inline `!important`.
+     *
+     * Explicitly resized tables (`tableNode.attrs.width` set) are excluded and keep
+     * the original PGXT-10226 behavior: their author-chosen width/left is promoted
+     * verbatim so the Include Page macro does not stretch or indent them. The
+     * table-cell short-circuit (PGXT-10294) above also still applies.
      */
   }, {
     key: "applyNestedRendererTableFix",
     value: function applyNestedRendererTableFix() {
+      var _this$props$tableNode;
       if (!this.containerRef || !fg('platform_nested_table_style_override')) {
         return;
       }
@@ -429,6 +446,35 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         left = _this$lastComputedSty.left,
         marginLeft = _this$lastComputedSty.marginLeft;
       var style = this.containerRef.style;
+
+      // A table is "explicitly resized" when the author set a width on the node.
+      // Non-resized tables instead take a default layout cap (e.g. 760px/1800px)
+      // derived from the outer renderer's appearance.
+      var isExplicitlyResized = Boolean((_this$props$tableNode = this.props.tableNode) === null || _this$props$tableNode === void 0 ? void 0 : _this$props$tableNode.attrs.width);
+      if (!isExplicitlyResized && fg('platform_nested_table_style_override_2')) {
+        // PGXT-10421: For a NON-resized table inside a nested renderer (e.g. an
+        // Excerpt macro body), the computed width is a default layout cap
+        // (760px/1800px, or a `cqw` length for full-page appearances) taken from
+        // the *outer* renderer's width context. That value does not match the
+        // macro's own box, so promoting it to inline `!important` makes the table
+        // ignore the available space and collapse to its first columns.
+        //
+        // These tables have no author-chosen size to preserve, so re-assert the
+        // parent stylesheet's intent — fill the available box (`width: 100%`) —
+        // with inline `!important` priority so it survives React re-renders and
+        // wins over the stylesheet rule that leaks into nested renderers.
+        style.setProperty('width', '100%', 'important');
+        style.setProperty('max-width', '100%', 'important');
+        style.setProperty('left', '0', 'important');
+        style.setProperty('margin-left', '0', 'important');
+        return;
+      }
+
+      // PGXT-10226: An explicitly resized table inside a nested renderer (e.g.
+      // Include Page macro) must keep its author-chosen width and position. The
+      // parent stylesheet forces `width: 100% !important; left: 0 !important`,
+      // which would stretch and indent it, so we promote the component's own
+      // computed width/left with inline `!important` to win the cascade.
       style.setProperty('width', width || 'auto', 'important');
       style.setProperty('max-width', '100%', 'important');
       style.setProperty('left', left || 'auto', 'important');

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

@@ -64,7 +64,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 = "133.16.3";
+var packageVersion = "133.16.4";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/react/nodes/tableNew.d.ts

@@ -104,6 +104,22 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
      * Uses lastComputedStyle (populated during render) rather than reading from
      * element.style, because React may remove properties from the DOM when their
      * values transition to undefined between renders.
+     *
+     * `platform_nested_table_style_override_2` fixes a follow-up regression where a
+     * NON-resized table inside an Excerpt macro (not Excerpt Include) on a
+     * wide/full-width page shrinks to only show its first columns in the renderer.
+     * Inside a nested renderer (a macro body) a non-resized table's computed width
+     * is a default layout cap (760px/1800px, or a `cqw` length for full-page
+     * appearances) taken from the outer renderer's width context. That value does
+     * not match the macro's own box, so promoting it to inline `!important` makes
+     * the table collapse. Such tables have no author-chosen size to preserve, so
+     * under this gate we re-assert the parent stylesheet's intent (fill the box:
+     * `width: 100%; left: 0`) with inline `!important`.
+     *
+     * Explicitly resized tables (`tableNode.attrs.width` set) are excluded and keep
+     * the original PGXT-10226 behavior: their author-chosen width/left is promoted
+     * verbatim so the Include Page macro does not stretch or indent them. The
+     * table-cell short-circuit (PGXT-10294) above also still applies.
      */
     private applyNestedRendererTableFix;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "133.16.4",
+	"version": "133.16.5",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
 		"@atlaskit/status": "^5.7.0",
 		"@atlaskit/task-decision": "^21.7.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^135.0.0",
+		"@atlaskit/tmp-editor-statsig": "^135.1.0",
 		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^23.2.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
@@ -83,7 +83,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.41.0",
+		"@atlaskit/editor-common": "^116.42.0",
 		"@atlaskit/link-provider": "^5.2.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0",
@@ -265,6 +265,9 @@
 		"platform_nested_table_style_override": {
 			"type": "boolean"
 		},
+		"platform_nested_table_style_override_2": {
+			"type": "boolean"
+		},
 		"platform_editor_table_nested_renderer_fix": {
 			"type": "boolean"
 		},