@atlaskit/renderer 132.0.2 → 132.0.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/renderer
 
+## 132.0.4
+
+### Patch Changes
+
+- [`d5787d7affb08`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d5787d7affb08) -
+  Avoid applying nested renderer table style overrides to tables that are already constrained by a
+  table context.
+
+## 132.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 132.0.2
 
 ### Patch Changes

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

@@ -31,6 +31,10 @@ var useMultiBodiedExtensionActions = exports.useMultiBodiedExtensionActions = fu
         return false;
       },
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      reorderChildren: function reorderChildren(_fromIndex, _toIndex) {
+        return false;
+      },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       updateParameters: function updateParameters(_parameters) {
         return false;
       },

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

@@ -224,6 +224,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     (0, _defineProperty2.default)(_this, "updatedLayout", 'custom');
     (0, _defineProperty2.default)(_this, "containerRef", null);
     (0, _defineProperty2.default)(_this, "_isInsideNestedRenderer", null);
+    (0, _defineProperty2.default)(_this, "_isInsideTableCell", null);
     // Stores the last computed style values from render() for use by applyNestedRendererTableFix().
     // This avoids reading from the DOM which can be stale when React removes properties between renders.
     (0, _defineProperty2.default)(_this, "lastComputedStyle", {});
@@ -259,6 +260,10 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
      * to the handleRef prop from the overflow shadow HOC.
      */
     (0, _defineProperty2.default)(_this, "setContainerRef", function (el) {
+      if (_this.containerRef !== el) {
+        _this._isInsideNestedRenderer = null;
+        _this._isInsideTableCell = null;
+      }
       _this.containerRef = el;
       var handleRef = _this.props.handleRef;
       if (typeof handleRef === 'function') {
@@ -374,6 +379,28 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       return false;
     }
 
+    /**
+     * Checks if this table is inside a table cell in the DOM. The result is cached
+     * since a table's position in the DOM tree is stable after mount.
+     */
+  }, {
+    key: "isInsideTableCell",
+    value: function isInsideTableCell() {
+      if (this._isInsideTableCell !== null) {
+        return this._isInsideTableCell;
+      }
+      if (!this.containerRef) {
+        return false;
+      }
+      this._isInsideTableCell = Boolean(this.containerRef.closest('td, th'));
+      return this._isInsideTableCell;
+    }
+  }, {
+    key: "isInsideTableContext",
+    value: function isInsideTableContext() {
+      return Boolean(this.props.isInsideOfTable || this.isInsideTableCell());
+    }
+
     /**
      * For tables inside nested renderers (e.g. Include Page macro), the parent
      * renderer's CSS override forces width:100%!important and left:0!important
@@ -381,6 +408,15 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
      * style.setProperty with 'important' priority on inline styles beats
      * stylesheet !important rules per the CSS cascade.
      *
+     * Tables that are nested inside another table need to remain constrained by
+     * their table-cell context. Do not promote their width to inline !important,
+     * otherwise nested tables rendered through macros such as Excerpt Include can
+     * overflow and overlap adjacent cells.
+     *
+     * Top-level tables in nested renderers still preserve their saved width, but
+     * are capped to their containing block so wide tables do not escape constrained
+     * macro bodies such as Excerpt Include panels.
+     *
      * 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.
@@ -391,7 +427,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       if (!this.containerRef || !(0, _platformFeatureFlags.fg)('platform_nested_table_style_override')) {
         return;
       }
-      if (!this.isInsideNestedRenderer()) {
+      if (!this.isInsideNestedRenderer() || this.isInsideTableContext()) {
         return;
       }
       var _this$lastComputedSty = this.lastComputedStyle,
@@ -400,6 +436,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         marginLeft = _this$lastComputedSty.marginLeft;
       var style = this.containerRef.style;
       style.setProperty('width', width || 'auto', 'important');
+      style.setProperty('max-width', '100%', 'important');
       style.setProperty('left', left || 'auto', 'important');
       style.setProperty('margin-left', marginLeft || '0', 'important');
     }

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

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

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

@@ -25,6 +25,10 @@ export const useMultiBodiedExtensionActions = ({
         return false;
       },
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      reorderChildren(_fromIndex, _toIndex) {
+        return false;
+      },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       updateParameters(_parameters) {
         return false;
       },

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

@@ -188,6 +188,7 @@ export class TableContainer extends React.Component {
     _defineProperty(this, "updatedLayout", 'custom');
     _defineProperty(this, "containerRef", null);
     _defineProperty(this, "_isInsideNestedRenderer", null);
+    _defineProperty(this, "_isInsideTableCell", null);
     // Stores the last computed style values from render() for use by applyNestedRendererTableFix().
     // This avoids reading from the DOM which can be stale when React removes properties between renders.
     _defineProperty(this, "lastComputedStyle", {});
@@ -214,6 +215,10 @@ export class TableContainer extends React.Component {
      * to the handleRef prop from the overflow shadow HOC.
      */
     _defineProperty(this, "setContainerRef", el => {
+      if (this.containerRef !== el) {
+        this._isInsideNestedRenderer = null;
+        this._isInsideTableCell = null;
+      }
       this.containerRef = el;
       const {
         handleRef
@@ -328,6 +333,24 @@ export class TableContainer extends React.Component {
     return false;
   }
 
+  /**
+   * Checks if this table is inside a table cell in the DOM. The result is cached
+   * since a table's position in the DOM tree is stable after mount.
+   */
+  isInsideTableCell() {
+    if (this._isInsideTableCell !== null) {
+      return this._isInsideTableCell;
+    }
+    if (!this.containerRef) {
+      return false;
+    }
+    this._isInsideTableCell = Boolean(this.containerRef.closest('td, th'));
+    return this._isInsideTableCell;
+  }
+  isInsideTableContext() {
+    return Boolean(this.props.isInsideOfTable || this.isInsideTableCell());
+  }
+
   /**
    * For tables inside nested renderers (e.g. Include Page macro), the parent
    * renderer's CSS override forces width:100%!important and left:0!important
@@ -335,6 +358,15 @@ export class TableContainer extends React.Component {
    * style.setProperty with 'important' priority on inline styles beats
    * stylesheet !important rules per the CSS cascade.
    *
+   * Tables that are nested inside another table need to remain constrained by
+   * their table-cell context. Do not promote their width to inline !important,
+   * otherwise nested tables rendered through macros such as Excerpt Include can
+   * overflow and overlap adjacent cells.
+   *
+   * Top-level tables in nested renderers still preserve their saved width, but
+   * are capped to their containing block so wide tables do not escape constrained
+   * macro bodies such as Excerpt Include panels.
+   *
    * 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.
@@ -343,7 +375,7 @@ export class TableContainer extends React.Component {
     if (!this.containerRef || !fg('platform_nested_table_style_override')) {
       return;
     }
-    if (!this.isInsideNestedRenderer()) {
+    if (!this.isInsideNestedRenderer() || this.isInsideTableContext()) {
       return;
     }
     const {
@@ -353,6 +385,7 @@ export class TableContainer extends React.Component {
     } = this.lastComputedStyle;
     const style = this.containerRef.style;
     style.setProperty('width', width || 'auto', 'important');
+    style.setProperty('max-width', '100%', 'important');
     style.setProperty('left', left || 'auto', 'important');
     style.setProperty('margin-left', marginLeft || '0', 'important');
   }

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

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

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

@@ -24,6 +24,10 @@ export var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActi
         return false;
       },
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      reorderChildren: function reorderChildren(_fromIndex, _toIndex) {
+        return false;
+      },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       updateParameters: function updateParameters(_parameters) {
         return false;
       },

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

@@ -218,6 +218,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "updatedLayout", 'custom');
     _defineProperty(_this, "containerRef", null);
     _defineProperty(_this, "_isInsideNestedRenderer", null);
+    _defineProperty(_this, "_isInsideTableCell", null);
     // Stores the last computed style values from render() for use by applyNestedRendererTableFix().
     // This avoids reading from the DOM which can be stale when React removes properties between renders.
     _defineProperty(_this, "lastComputedStyle", {});
@@ -253,6 +254,10 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
      * to the handleRef prop from the overflow shadow HOC.
      */
     _defineProperty(_this, "setContainerRef", function (el) {
+      if (_this.containerRef !== el) {
+        _this._isInsideNestedRenderer = null;
+        _this._isInsideTableCell = null;
+      }
       _this.containerRef = el;
       var handleRef = _this.props.handleRef;
       if (typeof handleRef === 'function') {
@@ -368,6 +373,28 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       return false;
     }
 
+    /**
+     * Checks if this table is inside a table cell in the DOM. The result is cached
+     * since a table's position in the DOM tree is stable after mount.
+     */
+  }, {
+    key: "isInsideTableCell",
+    value: function isInsideTableCell() {
+      if (this._isInsideTableCell !== null) {
+        return this._isInsideTableCell;
+      }
+      if (!this.containerRef) {
+        return false;
+      }
+      this._isInsideTableCell = Boolean(this.containerRef.closest('td, th'));
+      return this._isInsideTableCell;
+    }
+  }, {
+    key: "isInsideTableContext",
+    value: function isInsideTableContext() {
+      return Boolean(this.props.isInsideOfTable || this.isInsideTableCell());
+    }
+
     /**
      * For tables inside nested renderers (e.g. Include Page macro), the parent
      * renderer's CSS override forces width:100%!important and left:0!important
@@ -375,6 +402,15 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
      * style.setProperty with 'important' priority on inline styles beats
      * stylesheet !important rules per the CSS cascade.
      *
+     * Tables that are nested inside another table need to remain constrained by
+     * their table-cell context. Do not promote their width to inline !important,
+     * otherwise nested tables rendered through macros such as Excerpt Include can
+     * overflow and overlap adjacent cells.
+     *
+     * Top-level tables in nested renderers still preserve their saved width, but
+     * are capped to their containing block so wide tables do not escape constrained
+     * macro bodies such as Excerpt Include panels.
+     *
      * 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.
@@ -385,7 +421,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (!this.containerRef || !fg('platform_nested_table_style_override')) {
         return;
       }
-      if (!this.isInsideNestedRenderer()) {
+      if (!this.isInsideNestedRenderer() || this.isInsideTableContext()) {
         return;
       }
       var _this$lastComputedSty = this.lastComputedStyle,
@@ -394,6 +430,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         marginLeft = _this$lastComputedSty.marginLeft;
       var style = this.containerRef.style;
       style.setProperty('width', width || 'auto', 'important');
+      style.setProperty('max-width', '100%', 'important');
       style.setProperty('left', left || 'auto', 'important');
       style.setProperty('margin-left', marginLeft || '0', 'important');
     }

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

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

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

@@ -69,6 +69,7 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     updatedLayout: TableLayout | 'custom';
     private containerRef;
     private _isInsideNestedRenderer;
+    private _isInsideTableCell;
     private lastComputedStyle;
     private resizeObserver;
     private applyResizerChange;
@@ -78,6 +79,12 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
      * The result is cached since a table's position in the DOM tree is stable after mount.
      */
     private isInsideNestedRenderer;
+    /**
+     * Checks if this table is inside a table cell in the DOM. The result is cached
+     * since a table's position in the DOM tree is stable after mount.
+     */
+    private isInsideTableCell;
+    private isInsideTableContext;
     /**
      * For tables inside nested renderers (e.g. Include Page macro), the parent
      * renderer's CSS override forces width:100%!important and left:0!important
@@ -85,6 +92,15 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
      * style.setProperty with 'important' priority on inline styles beats
      * stylesheet !important rules per the CSS cascade.
      *
+     * Tables that are nested inside another table need to remain constrained by
+     * their table-cell context. Do not promote their width to inline !important,
+     * otherwise nested tables rendered through macros such as Excerpt Include can
+     * overflow and overlap adjacent cells.
+     *
+     * Top-level tables in nested renderers still preserve their saved width, but
+     * are capped to their containing block so wide tables do not escape constrained
+     * macro bodies such as Excerpt Include panels.
+     *
      * 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.

package/dist/types-ts4.5/react/nodes/tableNew.d.ts

@@ -69,6 +69,7 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     updatedLayout: TableLayout | 'custom';
     private containerRef;
     private _isInsideNestedRenderer;
+    private _isInsideTableCell;
     private lastComputedStyle;
     private resizeObserver;
     private applyResizerChange;
@@ -78,6 +79,12 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
      * The result is cached since a table's position in the DOM tree is stable after mount.
      */
     private isInsideNestedRenderer;
+    /**
+     * Checks if this table is inside a table cell in the DOM. The result is cached
+     * since a table's position in the DOM tree is stable after mount.
+     */
+    private isInsideTableCell;
+    private isInsideTableContext;
     /**
      * For tables inside nested renderers (e.g. Include Page macro), the parent
      * renderer's CSS override forces width:100%!important and left:0!important
@@ -85,6 +92,15 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
      * style.setProperty with 'important' priority on inline styles beats
      * stylesheet !important rules per the CSS cascade.
      *
+     * Tables that are nested inside another table need to remain constrained by
+     * their table-cell context. Do not promote their width to inline !important,
+     * otherwise nested tables rendered through macros such as Excerpt Include can
+     * overflow and overlap adjacent cells.
+     *
+     * Top-level tables in nested renderers still preserve their saved width, but
+     * are capped to their containing block so wide tables do not escape constrained
+     * macro bodies such as Excerpt Include panels.
+     *
      * 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.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "132.0.2",
+	"version": "132.0.4",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,14 +44,14 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
 		"@atlaskit/editor-smart-link-draggable": "^0.5.0",
-		"@atlaskit/emoji": "^70.15.0",
+		"@atlaskit/emoji": "^70.16.0",
 		"@atlaskit/feature-gate-js-client": "^5.7.0",
 		"@atlaskit/icon": "^35.4.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/link-datasource": "^5.6.0",
 		"@atlaskit/link-extractors": "^2.7.0",
 		"@atlaskit/linking-common": "^9.13.0",
-		"@atlaskit/media-card": "^80.7.0",
+		"@atlaskit/media-card": "^80.8.0",
 		"@atlaskit/media-client": "^36.3.0",
 		"@atlaskit/media-client-react": "^5.2.0",
 		"@atlaskit/media-common": "^13.3.0",
@@ -61,17 +61,17 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.5.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
-		"@atlaskit/react-ufo": "^6.6.0",
+		"@atlaskit/react-ufo": "^6.7.0",
 		"@atlaskit/smart-card": "^44.23.0",
 		"@atlaskit/status": "^4.1.0",
 		"@atlaskit/task-decision": "^20.1.0",
 		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tmp-editor-statsig": "^89.0.0",
-		"@atlaskit/tokens": "^13.1.0",
+		"@atlaskit/tmp-editor-statsig": "^90.1.0",
+		"@atlaskit/tokens": "^13.3.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.20.0",
+		"@compiled/react": "patch:@compiled/react@npm%3A0.20.0#~/.yarn/patches/@compiled-react-npm-0.20.0-a771aa67a6.patch",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
@@ -80,7 +80,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.4.0",
+		"@atlaskit/editor-common": "^115.7.0",
 		"@atlaskit/link-provider": "^4.6.0",
 		"@atlaskit/media-core": "^37.1.0",
 		"react": "^18.2.0",
@@ -98,13 +98,13 @@
 		"@atlaskit/media-core": "^37.1.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^41.2.0",
-		"@atlaskit/mention": "^26.1.0",
+		"@atlaskit/mention": "^26.2.0",
 		"@atlaskit/modal-dialog": "^15.2.0",
 		"@atlaskit/navigation-system": "^9.4.0",
 		"@atlaskit/profilecard": "^25.8.0",
 		"@atlaskit/side-nav-items": "^1.13.0",
 		"@atlaskit/util-data-test": "^18.6.0",
-		"@atlassian/a11y-jest-testing": "^0.11.0",
+		"@atlassian/a11y-jest-testing": "^0.12.0",
 		"@atlassian/a11y-playwright-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",