@atlaskit/renderer 108.11.13 → 108.11.15

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/renderer
 
+## 108.11.15
+
+### Patch Changes
+
+- [`2325dd0eb57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2325dd0eb57) - fix width issue on initial load
+
+## 108.11.14
+
+### Patch Changes
+
+- [`aeb5c9a01e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aeb5c9a01e8) - Delete adf-schema from AFE and rely on npm package for adf-schema
+- [`4b4dcfe0bba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4b4dcfe0bba) - Delete adf-schema, use published version
+
 ## 108.11.13
 
 ### Patch Changes
@@ -4927,14 +4940,14 @@ Remove applicationCard node and action mark
 
 ## 29.2.2
 
-- [patch][f3d067d" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f3d067d"
+- [patch][f3d067d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f3d067d"
   d):
 
   - Fix font size for numbered column in tables with dynamic text sizing
 
 ## 29.2.1
 
-- [patch][8636991" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/8636991"
+- [patch][8636991](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/8636991"
   d):
 
   - ED-5518: fix numbered column with merged rows

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

@@ -300,8 +300,20 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
       var lineLength = _editorSharedStyles.akEditorDefaultLayoutWidth;
       var tableWidth;
       var left;
+      var updatedLayout;
+
+      // The tableWidth and left offset logic below must stay aligned with the `breakout-ssr.tsx` logic
+      // Please consider changes below carefully to not negatively impact SSR
+      // `renderWidth` cannot be depended on during SSR
+      var isRenderWidthValid = !!renderWidth && renderWidth > 0;
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance) {
-        return rendererAppearance === 'full-width' && !tableNode.attrs.width ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : Math.min((0, _nodeWidth.getTableContainerWidth)(tableNode), renderWidth);
+        if (rendererAppearance === 'full-width' && !tableNode.attrs.width) {
+          return isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+        } else {
+          // custom width, or width mapped to breakpoint
+          var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
+          return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
+        }
       };
       if (isTableResizingEnabled(rendererAppearance) && tableNode) {
         tableWidth = calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance);
@@ -312,6 +324,18 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         left = lineLength / 2 - tableWidth / 2;
       }
       var children = _react.default.Children.toArray(this.props.children);
+
+      // Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
+      // This check caters for those tables and helps with SSR logic
+      var isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
+      var hasCustomWidth = isTableResizingEnabled(rendererAppearance) && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width);
+      if (isFullWidth) {
+        updatedLayout = 'full-width';
+      } else if (hasCustomWidth) {
+        updatedLayout = 'custom';
+      } else {
+        updatedLayout = layout;
+      }
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
         tableWidth: tableWidth,
@@ -329,7 +353,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
-        "data-layout": layout,
+        "data-layout": updatedLayout,
         ref: this.props.handleRef,
         style: {
           width: tableWidth,
@@ -435,23 +459,27 @@ var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
-  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
-    var _props$columnWidths;
-    var width = _ref2.width;
-    var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
-    var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
-      return total + val;
-    }, 0)) || 0;
-    if (colWidthsSum || (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx') && isTableResizingEnabled(props.rendererAppearance)) {
-      return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
+  return (
+    /*#__PURE__*/
+    // Remember, `width` will be 0 during SSR
+    _react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+      var _props$columnWidths;
+      var width = _ref2.width;
+      var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
+      var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
+        return total + val;
+      }, 0)) || 0;
+      if (colWidthsSum || (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx') && isTableResizingEnabled(props.rendererAppearance)) {
+        return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
+          renderWidth: renderWidth
+        }, props));
+      }
+      // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+      return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
         renderWidth: renderWidth
       }, props));
-    }
-    // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
-    return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
-      renderWidth: renderWidth
-    }, props));
-  });
+    })
+  );
 };
 var _default = (0, _SmartCardStorage.withSmartCardStorage)(TableWithWidth);
 exports.default = _default;

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -42,7 +42,7 @@ var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.string
 exports.breakoutInlineScriptContext = breakoutInlineScriptContext;
 function applyBreakoutAfterSSR(id, breakoutConsts) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
-  var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
+  var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
     if (!element) {
       return;
@@ -68,12 +68,18 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
       }
       if (item.target.classList.contains('ak-renderer-document')) {
         item.addedNodes.forEach(function (maybeNode) {
+          var width;
           var node = maybeNode;
           var mode = node.dataset.mode || node.dataset.layout || '';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-          var width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          if (node.classList.contains('pm-table-container') && mode === 'custom') {
+            var effectiveWidth = renderer.offsetWidth - breakoutConsts.padding;
+            width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
+          } else {
+            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          }
           if (node.style.width === width) {
             return;
           }
@@ -82,11 +88,13 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
           // Tables require some special logic, as they are not using common css transform approach,
           // because it breaks with sticky headers. This logic is copied from a table node:
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-          if (node.classList.contains('pm-table-container')) {
+          if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
             var lineLength = breakoutConsts.calcLineLength();
             var left = lineLength / 2 - parseInt(width) / 2;
-            if (left < 0) {
+            if (left < 0 && parseInt(width) > lineLength) {
               node.style.left = left + 'px';
+            } else {
+              node.style.left = '';
             }
           }
         });

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.11.13";
+var packageVersion = "108.11.15";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -468,7 +468,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     onMouseDown = props.onMouseDown,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock;
   return (0, _react2.jsx)(_ui.WidthProvider, {
-    className: "ak-renderer-wrapper"
+    className: "ak-renderer-wrapper is-".concat(appearance),
+    "data-appearance": appearance
   }, (0, _react2.jsx)(_ui.BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
   }, (0, _react2.jsx)("div", {

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

@@ -5,10 +5,9 @@ import { calcTableWidth, TableSharedCssClassName, tableMarginTop } from '@atlask
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
@@ -247,8 +246,20 @@ export class TableContainer extends React.Component {
     const lineLength = akEditorDefaultLayoutWidth;
     let tableWidth;
     let left;
+    let updatedLayout;
+
+    // The tableWidth and left offset logic below must stay aligned with the `breakout-ssr.tsx` logic
+    // Please consider changes below carefully to not negatively impact SSR
+    // `renderWidth` cannot be depended on during SSR
+    const isRenderWidthValid = !!renderWidth && renderWidth > 0;
     const calcDefaultLayoutWidthByAppearance = (tableNode, rendererAppearance) => {
-      return rendererAppearance === 'full-width' && !tableNode.attrs.width ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : Math.min(getTableContainerWidth(tableNode), renderWidth);
+      if (rendererAppearance === 'full-width' && !tableNode.attrs.width) {
+        return isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+      } else {
+        // custom width, or width mapped to breakpoint
+        const tableContainerWidth = getTableContainerWidth(tableNode);
+        return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
+      }
     };
     if (isTableResizingEnabled(rendererAppearance) && tableNode) {
       tableWidth = calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance);
@@ -259,6 +270,18 @@ export class TableContainer extends React.Component {
       left = lineLength / 2 - tableWidth / 2;
     }
     const children = React.Children.toArray(this.props.children);
+
+    // Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
+    // This check caters for those tables and helps with SSR logic
+    const isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
+    const hasCustomWidth = isTableResizingEnabled(rendererAppearance) && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width);
+    if (isFullWidth) {
+      updatedLayout = 'full-width';
+    } else if (hasCustomWidth) {
+      updatedLayout = 'custom';
+    } else {
+      updatedLayout = layout;
+    }
     return /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
       isNumberColumnEnabled: isNumberColumnEnabled,
       tableWidth: tableWidth,
@@ -276,7 +299,7 @@ export class TableContainer extends React.Component {
       rendererAppearance: rendererAppearance
     }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
-      "data-layout": layout,
+      "data-layout": updatedLayout,
       ref: this.props.handleRef,
       style: {
         width: tableWidth,
@@ -372,7 +395,10 @@ const TableWithShadows = overflowShadow(TableProcessor, {
   overflowSelector: `.${TableSharedCssClassName.TABLE_NODE_WRAPPER}`,
   useShadowObserver: true
 });
-const TableWithWidth = props => /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+const TableWithWidth = props =>
+/*#__PURE__*/
+// Remember, `width` will be 0 during SSR
+React.createElement(WidthConsumer, null, ({
   width
 }) => {
   var _props$columnWidths;

package/dist/es2019/ui/Renderer/breakout-ssr.js

@@ -45,7 +45,7 @@ export const breakoutInlineScriptContext = `
 `;
 function applyBreakoutAfterSSR(id, breakoutConsts) {
   const MEDIA_NODE_TYPE = 'mediaSingle';
-  const WIDE_LAYOUT_MODES = ['full-width', 'wide'];
+  const WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
     if (!element) {
       return;
@@ -71,12 +71,18 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
       }
       if (item.target.classList.contains('ak-renderer-document')) {
         item.addedNodes.forEach(maybeNode => {
+          let width;
           const node = maybeNode;
           const mode = node.dataset.mode || node.dataset.layout || '';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-          const width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          if (node.classList.contains('pm-table-container') && mode === 'custom') {
+            const effectiveWidth = renderer.offsetWidth - breakoutConsts.padding;
+            width = `${Math.min(parseInt(node.style.width), effectiveWidth)}px`;
+          } else {
+            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          }
           if (node.style.width === width) {
             return;
           }
@@ -85,11 +91,13 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
           // Tables require some special logic, as they are not using common css transform approach,
           // because it breaks with sticky headers. This logic is copied from a table node:
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-          if (node.classList.contains('pm-table-container')) {
+          if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
             const lineLength = breakoutConsts.calcLineLength();
             const left = lineLength / 2 - parseInt(width) / 2;
-            if (left < 0) {
+            if (left < 0 && parseInt(width) > lineLength) {
               node.style.left = left + 'px';
+            } else {
+              node.style.left = '';
             }
           }
         });

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.11.13";
+const packageVersion = "108.11.15";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -440,7 +440,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     useBlockRenderForCodeBlock
   } = props;
   return jsx(WidthProvider, {
-    className: "ak-renderer-wrapper"
+    className: `ak-renderer-wrapper is-${appearance}`,
+    "data-appearance": appearance
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx("div", {

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

@@ -16,10 +16,9 @@ import { calcTableWidth, TableSharedCssClassName, tableMarginTop } from '@atlask
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
@@ -293,8 +292,20 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var lineLength = akEditorDefaultLayoutWidth;
       var tableWidth;
       var left;
+      var updatedLayout;
+
+      // The tableWidth and left offset logic below must stay aligned with the `breakout-ssr.tsx` logic
+      // Please consider changes below carefully to not negatively impact SSR
+      // `renderWidth` cannot be depended on during SSR
+      var isRenderWidthValid = !!renderWidth && renderWidth > 0;
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance) {
-        return rendererAppearance === 'full-width' && !tableNode.attrs.width ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : Math.min(getTableContainerWidth(tableNode), renderWidth);
+        if (rendererAppearance === 'full-width' && !tableNode.attrs.width) {
+          return isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+        } else {
+          // custom width, or width mapped to breakpoint
+          var tableContainerWidth = getTableContainerWidth(tableNode);
+          return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
+        }
       };
       if (isTableResizingEnabled(rendererAppearance) && tableNode) {
         tableWidth = calcDefaultLayoutWidthByAppearance(tableNode, rendererAppearance);
@@ -305,6 +316,18 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         left = lineLength / 2 - tableWidth / 2;
       }
       var children = React.Children.toArray(this.props.children);
+
+      // Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
+      // This check caters for those tables and helps with SSR logic
+      var isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
+      var hasCustomWidth = isTableResizingEnabled(rendererAppearance) && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width);
+      if (isFullWidth) {
+        updatedLayout = 'full-width';
+      } else if (hasCustomWidth) {
+        updatedLayout = 'custom';
+      } else {
+        updatedLayout = layout;
+      }
       return /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
         tableWidth: tableWidth,
@@ -322,7 +345,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
-        "data-layout": layout,
+        "data-layout": updatedLayout,
         ref: this.props.handleRef,
         style: {
           width: tableWidth,
@@ -426,22 +449,26 @@ var TableWithShadows = overflowShadow(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
-    var _props$columnWidths;
-    var width = _ref2.width;
-    var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
-    var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
-      return total + val;
-    }, 0)) || 0;
-    if (colWidthsSum || getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx') && isTableResizingEnabled(props.rendererAppearance)) {
-      return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+  return (
+    /*#__PURE__*/
+    // Remember, `width` will be 0 during SSR
+    React.createElement(WidthConsumer, null, function (_ref2) {
+      var _props$columnWidths;
+      var width = _ref2.width;
+      var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
+      var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
+        return total + val;
+      }, 0)) || 0;
+      if (colWidthsSum || getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx') && isTableResizingEnabled(props.rendererAppearance)) {
+        return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+          renderWidth: renderWidth
+        }, props));
+      }
+      // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+      return /*#__PURE__*/React.createElement(TableProcessor, _extends({
         renderWidth: renderWidth
       }, props));
-    }
-    // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
-    return /*#__PURE__*/React.createElement(TableProcessor, _extends({
-      renderWidth: renderWidth
-    }, props));
-  });
+    })
+  );
 };
 export default withSmartCardStorage(TableWithWidth);

package/dist/esm/ui/Renderer/breakout-ssr.js

@@ -33,7 +33,7 @@ export function createBreakoutInlineScript(id) {
 export var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n");
 function applyBreakoutAfterSSR(id, breakoutConsts) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
-  var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
+  var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
     if (!element) {
       return;
@@ -59,12 +59,18 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
       }
       if (item.target.classList.contains('ak-renderer-document')) {
         item.addedNodes.forEach(function (maybeNode) {
+          var width;
           var node = maybeNode;
           var mode = node.dataset.mode || node.dataset.layout || '';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
-          var width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          if (node.classList.contains('pm-table-container') && mode === 'custom') {
+            var effectiveWidth = renderer.offsetWidth - breakoutConsts.padding;
+            width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
+          } else {
+            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          }
           if (node.style.width === width) {
             return;
           }
@@ -73,11 +79,13 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
           // Tables require some special logic, as they are not using common css transform approach,
           // because it breaks with sticky headers. This logic is copied from a table node:
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-          if (node.classList.contains('pm-table-container')) {
+          if (node.classList.contains('pm-table-container') && !renderer.classList.contains('is-full-width')) {
             var lineLength = breakoutConsts.calcLineLength();
             var left = lineLength / 2 - parseInt(width) / 2;
-            if (left < 0) {
+            if (left < 0 && parseInt(width) > lineLength) {
               node.style.left = left + 'px';
+            } else {
+              node.style.left = '';
             }
           }
         });

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.11.13";
+var packageVersion = "108.11.15";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -457,7 +457,8 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     onMouseDown = props.onMouseDown,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock;
   return jsx(WidthProvider, {
-    className: "ak-renderer-wrapper"
+    className: "ak-renderer-wrapper is-".concat(appearance),
+    "data-appearance": appearance
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx("div", {

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

@@ -49,7 +49,7 @@ declare const BlockCard: React.ComponentType<{
     url?: string | undefined;
     data?: object | undefined;
     eventHandlers?: import("@atlaskit/editor-common/ui").EventHandlers | undefined;
-    datasource?: import("@atlaskit/adf-schema/schema").DatasourceAttributeProperties | undefined;
+    datasource?: import("@atlaskit/adf-schema").DatasourceAttributeProperties | undefined;
     portal?: HTMLElement | undefined;
     rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     smartLinks?: import("../../types/smartLinksOptions").SmartLinksOptions | undefined;

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

@@ -49,7 +49,7 @@ declare const BlockCard: React.ComponentType<{
     url?: string | undefined;
     data?: object | undefined;
     eventHandlers?: import("@atlaskit/editor-common/ui").EventHandlers | undefined;
-    datasource?: import("@atlaskit/adf-schema/schema").DatasourceAttributeProperties | undefined;
+    datasource?: import("@atlaskit/adf-schema").DatasourceAttributeProperties | undefined;
     portal?: HTMLElement | undefined;
     rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     smartLinks?: import("../../types/smartLinksOptions").SmartLinksOptions | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.11.13",
+  "version": "108.11.15",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,21 +24,21 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "28.1.2",
+    "@atlaskit/adf-schema": "^29.1.0",
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.10.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^74.58.0",
+    "@atlaskit/editor-common": "^74.59.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.6.0",
     "@atlaskit/emoji": "^67.5.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/link-datasource": "^1.0.0",
+    "@atlaskit/link-datasource": "^1.1.0",
     "@atlaskit/media-card": "^76.2.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/media-common": "^9.0.0",
@@ -46,11 +46,11 @@
     "@atlaskit/media-ui": "^24.0.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/smart-card": "^26.23.0",
+    "@atlaskit/smart-card": "^26.25.0",
     "@atlaskit/status": "^1.3.0",
     "@atlaskit/task-decision": "^17.8.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.21.0",
+    "@atlaskit/tokens": "^1.22.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -71,7 +71,7 @@
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/css-reset": "^6.5.0",
     "@atlaskit/link-provider": "^1.6.0",
-    "@atlaskit/link-test-helpers": "^6.0.0",
+    "@atlaskit/link-test-helpers": "^6.1.0",
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/media-test-helpers": "^33.0.0",