@atlaskit/renderer 130.2.4 → 130.2.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 130.2.5
+
+### Patch Changes
+
+- [`c896b4d6c83a3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c896b4d6c83a3) -
+  Fix table column widths being scaled to viewport on first client render in synced blocks by keying
+  off renderWidthProp alone instead of contextWidth
+- Updated dependencies
+
 ## 130.2.4
 
 ### Patch Changes

package/dist/cjs/react/nodes/table/colgroup.js

@@ -139,9 +139,13 @@ var renderSyncBlockColgroup = function renderSyncBlockColgroup(_ref3) {
     return null;
   }
 
-  // SSR / first render before WidthContext measures. Output % of original ADF proportions so
-  // columns are stable — the CSS container query (100cqw) handles actual scaling width.
-  if (contextWidth <= 0 && renderWidthProp <= 0) {
+  // SSR / first client render before WidthObserver measures. Output % of original ADF
+  // proportions so columns are stable — the CSS container query (100cqw) handles actual
+  // scaling width. We key off renderWidthProp alone because WidthProvider initialises with
+  // document.body.offsetWidth (non-zero on the client), so contextWidth > 0 even before
+  // WidthObserver has measured the real container, which would skip this branch and produce
+  // column widths scaled to the full viewport.
+  if (renderWidthProp <= 0) {
     var fullTableWidth = isNumberColumnEnabled ? rawTotalWidth + _editorSharedStyles.akEditorTableNumberColumnWidth : rawTotalWidth;
     return columnWidths.map(function (colWidth) {
       return {
@@ -154,7 +158,29 @@ var renderSyncBlockColgroup = function renderSyncBlockColgroup(_ref3) {
   // getParentNodeWidth() border offset. Fall back to renderWidthProp for the non-CSS path.
   var effectiveRenderWidth = contextWidth > 0 ? contextWidth - 2 : renderWidthProp;
   var availableWidth = getDataColumnWidth(effectiveRenderWidth, isNumberColumnEnabled);
-  return scaleColumnsToWidth(columnWidths, availableWidth);
+
+  // Only scale down if the table is actually wider than the available space.
+  // If the table fits, return original widths with the same tableCellBorderWidth (2px) adjustment
+  // that renderScaleDownColgroup applies via fixColumnWidth's no-scale path.
+  if (availableWidth >= rawTotalWidth) {
+    return columnWidths.map(function (colWidth) {
+      return {
+        width: "".concat(Math.max(colWidth - _styles.tableCellBorderWidth, _styles.tableCellMinWidth), "px")
+      };
+    });
+  }
+
+  // Cap scaling at MAX_SCALING_PERCENT (30%), matching renderScaleDownColgroup's calcScalePercent.
+  //
+  // Both `availableWidth` and `rawTotalWidth` are already in data-column space (number column
+  // excluded via getDataColumnWidth), so `diffPercent = 1 - availableWidth / rawTotalWidth` is
+  // equivalent to calcScalePercent's `numColumnScalePercent` path when isNumberColumnEnabled,
+  // and to the `noNumColumnScalePercent` path otherwise. We express the cap as a target width
+  // (clampedAvailableWidth) rather than a scale-down percentage, but the result is the same:
+  // columns are scaled by at most MAX_SCALING_PERCENT (30%).
+  var diffPercent = 1 - availableWidth / rawTotalWidth;
+  var clampedAvailableWidth = diffPercent <= MAX_SCALING_PERCENT ? availableWidth : Math.floor(rawTotalWidth * (1 - MAX_SCALING_PERCENT));
+  return scaleColumnsToWidth(columnWidths, clampedAvailableWidth);
 };
 var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var _props$tableNode;

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

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

package/dist/es2019/react/nodes/table/colgroup.js

@@ -113,9 +113,13 @@ const renderSyncBlockColgroup = ({
     return null;
   }
 
-  // SSR / first render before WidthContext measures. Output % of original ADF proportions so
-  // columns are stable — the CSS container query (100cqw) handles actual scaling width.
-  if (contextWidth <= 0 && renderWidthProp <= 0) {
+  // SSR / first client render before WidthObserver measures. Output % of original ADF
+  // proportions so columns are stable — the CSS container query (100cqw) handles actual
+  // scaling width. We key off renderWidthProp alone because WidthProvider initialises with
+  // document.body.offsetWidth (non-zero on the client), so contextWidth > 0 even before
+  // WidthObserver has measured the real container, which would skip this branch and produce
+  // column widths scaled to the full viewport.
+  if (renderWidthProp <= 0) {
     const fullTableWidth = isNumberColumnEnabled ? rawTotalWidth + akEditorTableNumberColumnWidth : rawTotalWidth;
     return columnWidths.map(colWidth => ({
       width: `${colWidth / fullTableWidth * 100}%`
@@ -126,7 +130,27 @@ const renderSyncBlockColgroup = ({
   // getParentNodeWidth() border offset. Fall back to renderWidthProp for the non-CSS path.
   const effectiveRenderWidth = contextWidth > 0 ? contextWidth - 2 : renderWidthProp;
   const availableWidth = getDataColumnWidth(effectiveRenderWidth, isNumberColumnEnabled);
-  return scaleColumnsToWidth(columnWidths, availableWidth);
+
+  // Only scale down if the table is actually wider than the available space.
+  // If the table fits, return original widths with the same tableCellBorderWidth (2px) adjustment
+  // that renderScaleDownColgroup applies via fixColumnWidth's no-scale path.
+  if (availableWidth >= rawTotalWidth) {
+    return columnWidths.map(colWidth => ({
+      width: `${Math.max(colWidth - tableCellBorderWidth, tableCellMinWidth)}px`
+    }));
+  }
+
+  // Cap scaling at MAX_SCALING_PERCENT (30%), matching renderScaleDownColgroup's calcScalePercent.
+  //
+  // Both `availableWidth` and `rawTotalWidth` are already in data-column space (number column
+  // excluded via getDataColumnWidth), so `diffPercent = 1 - availableWidth / rawTotalWidth` is
+  // equivalent to calcScalePercent's `numColumnScalePercent` path when isNumberColumnEnabled,
+  // and to the `noNumColumnScalePercent` path otherwise. We express the cap as a target width
+  // (clampedAvailableWidth) rather than a scale-down percentage, but the result is the same:
+  // columns are scaled by at most MAX_SCALING_PERCENT (30%).
+  const diffPercent = 1 - availableWidth / rawTotalWidth;
+  const clampedAvailableWidth = diffPercent <= MAX_SCALING_PERCENT ? availableWidth : Math.floor(rawTotalWidth * (1 - MAX_SCALING_PERCENT));
+  return scaleColumnsToWidth(columnWidths, clampedAvailableWidth);
 };
 const renderScaleDownColgroup = props => {
   var _props$tableNode;

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

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

package/dist/esm/react/nodes/table/colgroup.js

@@ -131,9 +131,13 @@ var renderSyncBlockColgroup = function renderSyncBlockColgroup(_ref3) {
     return null;
   }
 
-  // SSR / first render before WidthContext measures. Output % of original ADF proportions so
-  // columns are stable — the CSS container query (100cqw) handles actual scaling width.
-  if (contextWidth <= 0 && renderWidthProp <= 0) {
+  // SSR / first client render before WidthObserver measures. Output % of original ADF
+  // proportions so columns are stable — the CSS container query (100cqw) handles actual
+  // scaling width. We key off renderWidthProp alone because WidthProvider initialises with
+  // document.body.offsetWidth (non-zero on the client), so contextWidth > 0 even before
+  // WidthObserver has measured the real container, which would skip this branch and produce
+  // column widths scaled to the full viewport.
+  if (renderWidthProp <= 0) {
     var fullTableWidth = isNumberColumnEnabled ? rawTotalWidth + akEditorTableNumberColumnWidth : rawTotalWidth;
     return columnWidths.map(function (colWidth) {
       return {
@@ -146,7 +150,29 @@ var renderSyncBlockColgroup = function renderSyncBlockColgroup(_ref3) {
   // getParentNodeWidth() border offset. Fall back to renderWidthProp for the non-CSS path.
   var effectiveRenderWidth = contextWidth > 0 ? contextWidth - 2 : renderWidthProp;
   var availableWidth = getDataColumnWidth(effectiveRenderWidth, isNumberColumnEnabled);
-  return scaleColumnsToWidth(columnWidths, availableWidth);
+
+  // Only scale down if the table is actually wider than the available space.
+  // If the table fits, return original widths with the same tableCellBorderWidth (2px) adjustment
+  // that renderScaleDownColgroup applies via fixColumnWidth's no-scale path.
+  if (availableWidth >= rawTotalWidth) {
+    return columnWidths.map(function (colWidth) {
+      return {
+        width: "".concat(Math.max(colWidth - tableCellBorderWidth, tableCellMinWidth), "px")
+      };
+    });
+  }
+
+  // Cap scaling at MAX_SCALING_PERCENT (30%), matching renderScaleDownColgroup's calcScalePercent.
+  //
+  // Both `availableWidth` and `rawTotalWidth` are already in data-column space (number column
+  // excluded via getDataColumnWidth), so `diffPercent = 1 - availableWidth / rawTotalWidth` is
+  // equivalent to calcScalePercent's `numColumnScalePercent` path when isNumberColumnEnabled,
+  // and to the `noNumColumnScalePercent` path otherwise. We express the cap as a target width
+  // (clampedAvailableWidth) rather than a scale-down percentage, but the result is the same:
+  // columns are scaled by at most MAX_SCALING_PERCENT (30%).
+  var diffPercent = 1 - availableWidth / rawTotalWidth;
+  var clampedAvailableWidth = diffPercent <= MAX_SCALING_PERCENT ? availableWidth : Math.floor(rawTotalWidth * (1 - MAX_SCALING_PERCENT));
+  return scaleColumnsToWidth(columnWidths, clampedAvailableWidth);
 };
 var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var _props$tableNode;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "130.2.4",
+	"version": "130.2.5",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -79,7 +79,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.5.0",
+		"@atlaskit/editor-common": "^114.6.0",
 		"@atlaskit/link-provider": "^4.3.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",