@atlaskit/renderer 128.11.1 → 129.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/renderer
 
+## 129.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 128.11.1
 
 ### Patch Changes

package/dist/cjs/react/nodes/table/content-mode.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTableInContentMode = exports.hasColWidths = void 0;
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+/**
+ * Checks whether any cell in the first row of the table has a colwidth attribute set.
+ *
+ * This mirrors `hasTableColumnBeenResized` from editor-plugin-table's `colgroup.ts`.
+ */
+var hasColWidths = exports.hasColWidths = function hasColWidths(tableNode) {
+  var firstRow = tableNode.content.firstChild;
+  if (!firstRow) {
+    return false;
+  }
+  for (var i = 0; i < firstRow.childCount; i++) {
+    if (firstRow.child(i).attrs.colwidth) {
+      return true;
+    }
+  }
+  return false;
+};
+/**
+ * Mirrors `isContentModeSupported()` from editor-plugin-table's `tableMode.ts`.
+ *
+ * In the editor this checks `allowColumnResizing && allowTableResizing && isFullPageEditor`.
+ * In the renderer there is no separate `allowColumnResizing` flag — `allowTableResizing`
+ * covers both — and `isFullPageEditor` maps to `rendererAppearance === 'full-page'`.
+ */
+var isContentModeSupported = function isContentModeSupported(_ref) {
+  var allowTableResizing = _ref.allowTableResizing,
+    rendererAppearance = _ref.rendererAppearance;
+  return !!allowTableResizing && (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max');
+};
+
+/**
+ * Determines whether a table should render in content mode.
+ *
+ * Content mode tables have no fixed column widths — the browser sizes columns to fit their
+ * content (table-layout: auto). A table is in content mode when:
+ *
+ * 1. The feature is supported (table resizing enabled, full-page appearance)
+ * 2. The table is at the top level of the document (not nested in another table or block node)
+ * 3. The table node exists
+ * 4. `table.attrs.width` is null (no explicit width set by the user)
+ * 5. No cells in the first row have `colwidth` set (table has not been column-resized)
+ * 6. The `platform_editor_table_fit_to_content_auto_convert` experiment is enabled
+ *
+ * This mirrors `isTableInContentMode()` from editor-plugin-table's `tableMode.ts`.
+ *
+ * SSR-safe: `expValEquals` returns false on the server (FeatureGates not initialised),
+ * so content mode is never active during SSR — no hydration mismatch.
+ */
+var isTableInContentMode = exports.isTableInContentMode = function isTableInContentMode(_ref2) {
+  var tableNode = _ref2.tableNode,
+    allowTableResizing = _ref2.allowTableResizing,
+    rendererAppearance = _ref2.rendererAppearance,
+    isTableNested = _ref2.isTableNested;
+  if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+    return false;
+  }
+  if (!tableNode) {
+    return false;
+  }
+  return !isTableNested && isContentModeSupported({
+    allowTableResizing: allowTableResizing,
+    rendererAppearance: rendererAppearance
+  }) && tableNode.attrs.width === null && !hasColWidths(tableNode) && tableNode.attrs.layout === 'align-start';
+};

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

@@ -11,6 +11,8 @@ var _colgroup = require("./colgroup");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _contentMode = require("./content-mode");
 var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
   var _tableNode$attrs;
   var innerRef = _ref.innerRef,
@@ -53,6 +55,12 @@ var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
   }
   var tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
   var tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;
+  var isContentMode = (0, _contentMode.isTableInContentMode)({
+    tableNode: tableNode,
+    allowTableResizing: allowTableResizing,
+    rendererAppearance: rendererAppearance,
+    isTableNested: isInsideOfBlockNode || isInsideOfTable
+  }) && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
   return /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_renderer_isPresentational') && {
     role: isPresentational ? 'presentation' : undefined
   }, {
@@ -61,6 +69,7 @@ var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     "data-table-width": tableWidth,
     "data-layout": tableLayout,
     "data-table-display-mode": tableDisplayMode,
+    "data-initial-width-mode": isContentMode ? 'content' : undefined,
     ref: innerRef,
     style: {
       marginTop: fixTableSSRResizing ? '0px' : ''

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

@@ -33,6 +33,9 @@ var _appearance = require("../utils/appearance");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
 var _tableNew = require("./tableNew");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _contentMode = require("./table/content-mode");
+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) { (0, _defineProperty2.default)(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; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -518,19 +521,29 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         // instead of 760 that was set on tableNode when the table had been published.
         finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
       }
+      var isContentModeTable = (0, _contentMode.isTableInContentMode)({
+        tableNode: tableNode,
+        allowTableResizing: allowTableResizing,
+        rendererAppearance: rendererAppearance,
+        isTableNested: isInsideOfBlockNode || isInsideOfTable
+      }) && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
       var style;
       if (fixTableSSRResizing) {
-        style = {
+        style = _objectSpread(_objectSpread({}, isContentModeTable && {
+          '--renderer-table-max-width': renderWidthCSS
+        }), {}, {
           width: finalTableContainerWidth,
           left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
           marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
-        };
+        });
       } else {
-        style = {
+        style = _objectSpread(_objectSpread({}, isContentModeTable && {
+          '--renderer-table-max-width': "".concat(renderWidth, "px")
+        }), {}, {
           width: finalTableContainerWidth,
           left: left,
           marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
-        };
+        });
       }
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -26,6 +26,7 @@ var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _contentMode = require("./table/content-mode");
 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) { (0, _defineProperty2.default)(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; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
@@ -477,11 +478,19 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         // instead of 760 that was set on tableNode when the table had been published.
         finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
-      var style = {
+      var isContentModeTable = (0, _contentMode.isTableInContentMode)({
+        tableNode: tableNode,
+        allowTableResizing: allowTableResizing,
+        rendererAppearance: rendererAppearance,
+        isTableNested: isInsideOfBlockNode || isInsideOfTable
+      }) && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
+      var style = _objectSpread(_objectSpread({}, isContentModeTable && {
+        '--renderer-table-max-width': renderWidthCSS
+      }), {}, {
         width: finalTableContainerWidth,
         left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
         marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
-      };
+      });
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),

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

@@ -1460,6 +1460,10 @@ var tableSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _define
   '&[data-autosize="true"]': {
     tableLayout: 'auto'
   },
+  '&[data-initial-width-mode="content"]': {
+    tableLayout: 'auto',
+    width: 'auto'
+  },
   '*': {
     boxSizing: 'border-box'
   },
@@ -1500,6 +1504,14 @@ var tableSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _define
     }))
   }
 }));
+var tableContentModeStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ":has(table[data-initial-width-mode=\"content\"])"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: 'max-content !important',
+  maxWidth: 'var(--renderer-table-max-width)'
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " table[data-initial-width-mode=\"content\"] > colgroup > col"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: 'unset !important'
+}));
 var tableRendererHeaderStylesForTableCellOnly = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t\t.").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t\t.").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   '> tbody > tr > th, > tbody > tr > td': {
     minWidth: "".concat(_styles.tableCellMinWidth, "px"),
@@ -2063,7 +2075,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // 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
-    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && isInsideSyncBlock && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && isInsideSyncBlock && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

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

package/dist/es2019/react/nodes/table/content-mode.js

@@ -0,0 +1,67 @@
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+/**
+ * Checks whether any cell in the first row of the table has a colwidth attribute set.
+ *
+ * This mirrors `hasTableColumnBeenResized` from editor-plugin-table's `colgroup.ts`.
+ */
+export const hasColWidths = tableNode => {
+  const firstRow = tableNode.content.firstChild;
+  if (!firstRow) {
+    return false;
+  }
+  for (let i = 0; i < firstRow.childCount; i++) {
+    if (firstRow.child(i).attrs.colwidth) {
+      return true;
+    }
+  }
+  return false;
+};
+/**
+ * Mirrors `isContentModeSupported()` from editor-plugin-table's `tableMode.ts`.
+ *
+ * In the editor this checks `allowColumnResizing && allowTableResizing && isFullPageEditor`.
+ * In the renderer there is no separate `allowColumnResizing` flag — `allowTableResizing`
+ * covers both — and `isFullPageEditor` maps to `rendererAppearance === 'full-page'`.
+ */
+const isContentModeSupported = ({
+  allowTableResizing,
+  rendererAppearance
+}) => {
+  return !!allowTableResizing && (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max');
+};
+
+/**
+ * Determines whether a table should render in content mode.
+ *
+ * Content mode tables have no fixed column widths — the browser sizes columns to fit their
+ * content (table-layout: auto). A table is in content mode when:
+ *
+ * 1. The feature is supported (table resizing enabled, full-page appearance)
+ * 2. The table is at the top level of the document (not nested in another table or block node)
+ * 3. The table node exists
+ * 4. `table.attrs.width` is null (no explicit width set by the user)
+ * 5. No cells in the first row have `colwidth` set (table has not been column-resized)
+ * 6. The `platform_editor_table_fit_to_content_auto_convert` experiment is enabled
+ *
+ * This mirrors `isTableInContentMode()` from editor-plugin-table's `tableMode.ts`.
+ *
+ * SSR-safe: `expValEquals` returns false on the server (FeatureGates not initialised),
+ * so content mode is never active during SSR — no hydration mismatch.
+ */
+export const isTableInContentMode = ({
+  tableNode,
+  allowTableResizing,
+  rendererAppearance,
+  isTableNested
+}) => {
+  if (!expValEqualsNoExposure('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+    return false;
+  }
+  if (!tableNode) {
+    return false;
+  }
+  return !isTableNested && isContentModeSupported({
+    allowTableResizing,
+    rendererAppearance
+  }) && tableNode.attrs.width === null && !hasColWidths(tableNode) && tableNode.attrs.layout === 'align-start';
+};

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

@@ -4,6 +4,8 @@ import { Colgroup, colWidthSum } from './colgroup';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isTableInContentMode } from './content-mode';
 export const Table = /*#__PURE__*/React.memo(({
   innerRef,
   isNumberColumnEnabled,
@@ -45,6 +47,12 @@ export const Table = /*#__PURE__*/React.memo(({
   }
   const tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
   const tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;
+  const isContentMode = isTableInContentMode({
+    tableNode,
+    allowTableResizing,
+    rendererAppearance,
+    isTableNested: isInsideOfBlockNode || isInsideOfTable
+  }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
   return /*#__PURE__*/React.createElement("table", _extends({}, fg('platform_renderer_isPresentational') && {
     role: isPresentational ? 'presentation' : undefined
   }, {
@@ -53,6 +61,7 @@ export const Table = /*#__PURE__*/React.memo(({
     "data-table-width": tableWidth,
     "data-layout": tableLayout,
     "data-table-display-mode": tableDisplayMode,
+    "data-initial-width-mode": isContentMode ? 'content' : undefined,
     ref: innerRef,
     style: {
       marginTop: fixTableSSRResizing ? '0px' : ''

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

@@ -20,6 +20,7 @@ import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFul
 import { TableStickyScrollbar } from './TableStickyScrollbar';
 import { TableProcessorWithContainerStyles } from './tableNew';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isTableInContentMode } from './table/content-mode';
 export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance);
 export const isStickyScrollbarEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) && editorExperiment('platform_renderer_table_sticky_scrollbar', true, {
   exposure: true
@@ -461,15 +462,27 @@ export class TableContainer extends React.Component {
       // instead of 760 that was set on tableNode when the table had been published.
       finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? fixTableSSRResizing ? `calc(${tableWidthCSS})` : tableWidth : 'inherit';
     }
+    const isContentModeTable = isTableInContentMode({
+      tableNode,
+      allowTableResizing,
+      rendererAppearance,
+      isTableNested: isInsideOfBlockNode || isInsideOfTable
+    }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
     let style;
     if (fixTableSSRResizing) {
       style = {
+        ...(isContentModeTable && {
+          '--renderer-table-max-width': renderWidthCSS
+        }),
         width: finalTableContainerWidth,
         left: leftCSS ? `calc(${leftCSS})` : undefined,
         marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? `calc(-1 * (${leftCSS}))` : undefined
       };
     } else {
       style = {
+        ...(isContentModeTable && {
+          '--renderer-table-max-width': `${renderWidth}px`
+        }),
         width: finalTableContainerWidth,
         left: left,
         marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined

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

@@ -15,6 +15,7 @@ import { Table } from './table/table';
 import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isTableInContentMode } from './table/content-mode';
 const stickyContainerBaseStyles = {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   height: "var(--ds-space-250, 20px)",
@@ -421,7 +422,16 @@ export class TableContainer extends React.Component {
       // instead of 760 that was set on tableNode when the table had been published.
       finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? `calc(${tableWidthCSS})` : 'inherit';
     }
+    const isContentModeTable = isTableInContentMode({
+      tableNode,
+      allowTableResizing,
+      rendererAppearance,
+      isTableNested: isInsideOfBlockNode || isInsideOfTable
+    }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
     const style = {
+      ...(isContentModeTable && {
+        '--renderer-table-max-width': renderWidthCSS
+      }),
       width: finalTableContainerWidth,
       left: leftCSS ? `calc(${leftCSS})` : undefined,
       marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? `calc(-1 * (${leftCSS}))` : undefined

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

@@ -1766,6 +1766,10 @@ const tableSharedStyle = css({
     '&[data-autosize="true"]': {
       tableLayout: 'auto'
     },
+    '&[data-initial-width-mode="content"]': {
+      tableLayout: 'auto',
+      width: 'auto'
+    },
     '*': {
       boxSizing: 'border-box'
     },
@@ -1878,6 +1882,19 @@ const tableSharedStyle = css({
     }
   }
 });
+const tableContentModeStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  [`.${RendererCssClassName.DOCUMENT} .${TableSharedCssClassName.TABLE_CONTAINER}:has(table[data-initial-width-mode="content"])`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    width: 'max-content !important',
+    maxWidth: 'var(--renderer-table-max-width)'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  [`.${RendererCssClassName.DOCUMENT} table[data-initial-width-mode="content"] > colgroup > col`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    width: 'unset !important'
+  }
+});
 const tableRendererHeaderStylesForTableCellOnly = css({
   [`.${TableSharedCssClassName.TABLE_CONTAINER} > table,
 		.${TableSharedCssClassName.TABLE_NODE_WRAPPER} > table,
@@ -2612,7 +2629,7 @@ export const RendererStyleContainer = props => {
     // 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
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock && fg('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock && fg('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

package/dist/esm/react/nodes/table/content-mode.js

@@ -0,0 +1,65 @@
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+/**
+ * Checks whether any cell in the first row of the table has a colwidth attribute set.
+ *
+ * This mirrors `hasTableColumnBeenResized` from editor-plugin-table's `colgroup.ts`.
+ */
+export var hasColWidths = function hasColWidths(tableNode) {
+  var firstRow = tableNode.content.firstChild;
+  if (!firstRow) {
+    return false;
+  }
+  for (var i = 0; i < firstRow.childCount; i++) {
+    if (firstRow.child(i).attrs.colwidth) {
+      return true;
+    }
+  }
+  return false;
+};
+/**
+ * Mirrors `isContentModeSupported()` from editor-plugin-table's `tableMode.ts`.
+ *
+ * In the editor this checks `allowColumnResizing && allowTableResizing && isFullPageEditor`.
+ * In the renderer there is no separate `allowColumnResizing` flag — `allowTableResizing`
+ * covers both — and `isFullPageEditor` maps to `rendererAppearance === 'full-page'`.
+ */
+var isContentModeSupported = function isContentModeSupported(_ref) {
+  var allowTableResizing = _ref.allowTableResizing,
+    rendererAppearance = _ref.rendererAppearance;
+  return !!allowTableResizing && (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max');
+};
+
+/**
+ * Determines whether a table should render in content mode.
+ *
+ * Content mode tables have no fixed column widths — the browser sizes columns to fit their
+ * content (table-layout: auto). A table is in content mode when:
+ *
+ * 1. The feature is supported (table resizing enabled, full-page appearance)
+ * 2. The table is at the top level of the document (not nested in another table or block node)
+ * 3. The table node exists
+ * 4. `table.attrs.width` is null (no explicit width set by the user)
+ * 5. No cells in the first row have `colwidth` set (table has not been column-resized)
+ * 6. The `platform_editor_table_fit_to_content_auto_convert` experiment is enabled
+ *
+ * This mirrors `isTableInContentMode()` from editor-plugin-table's `tableMode.ts`.
+ *
+ * SSR-safe: `expValEquals` returns false on the server (FeatureGates not initialised),
+ * so content mode is never active during SSR — no hydration mismatch.
+ */
+export var isTableInContentMode = function isTableInContentMode(_ref2) {
+  var tableNode = _ref2.tableNode,
+    allowTableResizing = _ref2.allowTableResizing,
+    rendererAppearance = _ref2.rendererAppearance,
+    isTableNested = _ref2.isTableNested;
+  if (!expValEqualsNoExposure('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true)) {
+    return false;
+  }
+  if (!tableNode) {
+    return false;
+  }
+  return !isTableNested && isContentModeSupported({
+    allowTableResizing: allowTableResizing,
+    rendererAppearance: rendererAppearance
+  }) && tableNode.attrs.width === null && !hasColWidths(tableNode) && tableNode.attrs.layout === 'align-start';
+};

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

@@ -4,6 +4,8 @@ import { Colgroup, colWidthSum } from './colgroup';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isTableInContentMode } from './content-mode';
 export var Table = /*#__PURE__*/React.memo(function (_ref) {
   var _tableNode$attrs;
   var innerRef = _ref.innerRef,
@@ -46,6 +48,12 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
   }
   var tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
   var tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;
+  var isContentMode = isTableInContentMode({
+    tableNode: tableNode,
+    allowTableResizing: allowTableResizing,
+    rendererAppearance: rendererAppearance,
+    isTableNested: isInsideOfBlockNode || isInsideOfTable
+  }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
   return /*#__PURE__*/React.createElement("table", _extends({}, fg('platform_renderer_isPresentational') && {
     role: isPresentational ? 'presentation' : undefined
   }, {
@@ -54,6 +62,7 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     "data-table-width": tableWidth,
     "data-layout": tableLayout,
     "data-table-display-mode": tableDisplayMode,
+    "data-initial-width-mode": isContentMode ? 'content' : undefined,
     ref: innerRef,
     style: {
       marginTop: fixTableSSRResizing ? '0px' : ''

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

@@ -6,6 +6,8 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -31,6 +33,7 @@ import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFul
 import { TableStickyScrollbar } from './TableStickyScrollbar';
 import { TableProcessorWithContainerStyles } from './tableNew';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isTableInContentMode } from './table/content-mode';
 export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
   return isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance);
 };
@@ -511,19 +514,29 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         // instead of 760 that was set on tableNode when the table had been published.
         finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
       }
+      var isContentModeTable = isTableInContentMode({
+        tableNode: tableNode,
+        allowTableResizing: allowTableResizing,
+        rendererAppearance: rendererAppearance,
+        isTableNested: isInsideOfBlockNode || isInsideOfTable
+      }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
       var style;
       if (fixTableSSRResizing) {
-        style = {
+        style = _objectSpread(_objectSpread({}, isContentModeTable && {
+          '--renderer-table-max-width': renderWidthCSS
+        }), {}, {
           width: finalTableContainerWidth,
           left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
           marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
-        };
+        });
       } else {
-        style = {
+        style = _objectSpread(_objectSpread({}, isContentModeTable && {
+          '--renderer-table-max-width': "".concat(renderWidth, "px")
+        }), {}, {
           width: finalTableContainerWidth,
           left: left,
           marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
-        };
+        });
       }
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -27,6 +27,7 @@ import { Table } from './table/table';
 import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isTableInContentMode } from './table/content-mode';
 var stickyContainerBaseStyles = {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   height: "var(--ds-space-250, 20px)",
@@ -471,11 +472,19 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         // instead of 760 that was set on tableNode when the table had been published.
         finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
-      var style = {
+      var isContentModeTable = isTableInContentMode({
+        tableNode: tableNode,
+        allowTableResizing: allowTableResizing,
+        rendererAppearance: rendererAppearance,
+        isTableNested: isInsideOfBlockNode || isInsideOfTable
+      }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
+      var style = _objectSpread(_objectSpread({}, isContentModeTable && {
+        '--renderer-table-max-width': renderWidthCSS
+      }), {}, {
         width: finalTableContainerWidth,
         left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
         marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
-      };
+      });
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),

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

@@ -1453,6 +1453,10 @@ var tableSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defi
   '&[data-autosize="true"]': {
     tableLayout: 'auto'
   },
+  '&[data-initial-width-mode="content"]': {
+    tableLayout: 'auto',
+    width: 'auto'
+  },
   '*': {
     boxSizing: 'border-box'
   },
@@ -1493,6 +1497,14 @@ var tableSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defi
     }))
   }
 }));
+var tableContentModeStyles = css(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER, ":has(table[data-initial-width-mode=\"content\"])"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: 'max-content !important',
+  maxWidth: 'var(--renderer-table-max-width)'
+}), ".".concat(RendererCssClassName.DOCUMENT, " table[data-initial-width-mode=\"content\"] > colgroup > col"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: 'unset !important'
+}));
 var tableRendererHeaderStylesForTableCellOnly = css(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   '> tbody > tr > th, > tbody > tr > td': {
     minWidth: "".concat(tableCellMinWidth, "px"),
@@ -2056,7 +2068,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     // 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
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock && fg('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock && fg('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

package/dist/types/react/nodes/table/content-mode.d.ts

@@ -0,0 +1,34 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { RendererAppearance } from '../../../ui/Renderer/types';
+/**
+ * Checks whether any cell in the first row of the table has a colwidth attribute set.
+ *
+ * This mirrors `hasTableColumnBeenResized` from editor-plugin-table's `colgroup.ts`.
+ */
+export declare const hasColWidths: (tableNode: PMNode) => boolean;
+type ContentModeOptions = {
+    allowTableResizing?: boolean;
+    isTableNested?: boolean;
+    rendererAppearance?: RendererAppearance;
+    tableNode: PMNode | undefined;
+};
+/**
+ * Determines whether a table should render in content mode.
+ *
+ * Content mode tables have no fixed column widths — the browser sizes columns to fit their
+ * content (table-layout: auto). A table is in content mode when:
+ *
+ * 1. The feature is supported (table resizing enabled, full-page appearance)
+ * 2. The table is at the top level of the document (not nested in another table or block node)
+ * 3. The table node exists
+ * 4. `table.attrs.width` is null (no explicit width set by the user)
+ * 5. No cells in the first row have `colwidth` set (table has not been column-resized)
+ * 6. The `platform_editor_table_fit_to_content_auto_convert` experiment is enabled
+ *
+ * This mirrors `isTableInContentMode()` from editor-plugin-table's `tableMode.ts`.
+ *
+ * SSR-safe: `expValEquals` returns false on the server (FeatureGates not initialised),
+ * so content mode is never active during SSR — no hydration mismatch.
+ */
+export declare const isTableInContentMode: ({ tableNode, allowTableResizing, rendererAppearance, isTableNested, }: ContentModeOptions) => boolean;
+export {};

package/dist/types-ts4.5/react/nodes/table/content-mode.d.ts

@@ -0,0 +1,34 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { RendererAppearance } from '../../../ui/Renderer/types';
+/**
+ * Checks whether any cell in the first row of the table has a colwidth attribute set.
+ *
+ * This mirrors `hasTableColumnBeenResized` from editor-plugin-table's `colgroup.ts`.
+ */
+export declare const hasColWidths: (tableNode: PMNode) => boolean;
+type ContentModeOptions = {
+    allowTableResizing?: boolean;
+    isTableNested?: boolean;
+    rendererAppearance?: RendererAppearance;
+    tableNode: PMNode | undefined;
+};
+/**
+ * Determines whether a table should render in content mode.
+ *
+ * Content mode tables have no fixed column widths — the browser sizes columns to fit their
+ * content (table-layout: auto). A table is in content mode when:
+ *
+ * 1. The feature is supported (table resizing enabled, full-page appearance)
+ * 2. The table is at the top level of the document (not nested in another table or block node)
+ * 3. The table node exists
+ * 4. `table.attrs.width` is null (no explicit width set by the user)
+ * 5. No cells in the first row have `colwidth` set (table has not been column-resized)
+ * 6. The `platform_editor_table_fit_to_content_auto_convert` experiment is enabled
+ *
+ * This mirrors `isTableInContentMode()` from editor-plugin-table's `tableMode.ts`.
+ *
+ * SSR-safe: `expValEquals` returns false on the server (FeatureGates not initialised),
+ * so content mode is never active during SSR — no hydration mismatch.
+ */
+export declare const isTableInContentMode: ({ tableNode, allowTableResizing, rendererAppearance, isTableNested, }: ContentModeOptions) => boolean;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "128.11.1",
+	"version": "129.0.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.4.0",
+		"@atlaskit/adf-schema": "^52.5.0",
 		"@atlaskit/adf-utils": "^19.27.0",
 		"@atlaskit/afm-i18n-platform-editor-renderer": "2.10.0",
 		"@atlaskit/analytics-listeners": "^10.0.0",
@@ -39,27 +39,27 @@
 		"@atlaskit/editor-smart-link-draggable": "^0.5.0",
 		"@atlaskit/emoji": "^70.0.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
-		"@atlaskit/icon": "^34.1.0",
+		"@atlaskit/icon": "^34.2.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/link-datasource": "^5.0.0",
 		"@atlaskit/link-extractors": "^2.4.0",
 		"@atlaskit/linking-common": "^9.11.0",
-		"@atlaskit/media-card": "^79.16.0",
+		"@atlaskit/media-card": "^80.0.0",
 		"@atlaskit/media-client": "^36.0.0",
 		"@atlaskit/media-client-react": "^5.0.0",
 		"@atlaskit/media-common": "^13.0.0",
 		"@atlaskit/media-filmstrip": "^51.2.0",
-		"@atlaskit/media-ui": "^28.7.0",
-		"@atlaskit/media-viewer": "^52.9.0",
+		"@atlaskit/media-ui": "^29.0.0",
+		"@atlaskit/media-viewer": "^53.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
-		"@atlaskit/react-ufo": "^5.13.0",
+		"@atlaskit/react-ufo": "^5.14.0",
 		"@atlaskit/smart-card": "^44.0.0",
 		"@atlaskit/status": "^4.0.0",
 		"@atlaskit/task-decision": "^20.0.0",
-		"@atlaskit/theme": "^23.0.0",
-		"@atlaskit/tmp-editor-statsig": "^62.2.0",
+		"@atlaskit/theme": "^23.1.0",
+		"@atlaskit/tmp-editor-statsig": "^62.4.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -73,7 +73,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.21.0",
+		"@atlaskit/editor-common": "^113.0.0",
 		"@atlaskit/link-provider": "^4.3.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -88,11 +88,11 @@
 		"@atlaskit/link-test-helpers": "^10.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
-		"@atlaskit/media-test-helpers": "^40.0.0",
+		"@atlaskit/media-test-helpers": "^41.0.0",
 		"@atlaskit/mention": "^25.0.0",
 		"@atlaskit/modal-dialog": "^14.15.0",
 		"@atlaskit/navigation-system": "^7.3.0",
-		"@atlaskit/profilecard": "^24.49.0",
+		"@atlaskit/profilecard": "^25.0.0",
 		"@atlaskit/side-nav-items": "^1.13.0",
 		"@atlaskit/util-data-test": "^18.5.0",
 		"@atlassian/a11y-jest-testing": "^0.11.0",