@atlaskit/renderer 108.1.8 → 108.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/renderer
 
+## 108.2.0
+
+### Minor Changes
+
+- [`149b6c14e3e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/149b6c14e3e) - [ux] [ED-17634] Use the table width attribute in the renderer when platform.editor.custom-table-width FF is true
+
+### Patch Changes
+
+- [`406f89ad910`](https://bitbucket.org/atlassian/atlassian-frontend/commits/406f89ad910) - [ux] fix image border missing in renderer when image is linked and also double seperators issue
+
 ## 108.1.8
 
 ### Patch Changes

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

@@ -79,6 +79,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         "data-color": borderColor,
         "data-size": borderWidth,
         style: {
+          width: '100%',
+          height: '100%',
           borderColor: paletteColorValue,
           borderWidth: "".concat(borderWidth, "px"),
           borderStyle: 'solid',

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

@@ -8,12 +8,14 @@ exports.calcScalePercent = exports.Colgroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
 // User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
 var MAX_SCALING_PERCENT = 0.3;
-var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
+var getTableLayoutWidth = function getTableLayoutWidth(layout) {
   switch (layout) {
     case 'full-width':
       return _editorSharedStyles.akEditorFullWidthLayoutWidth;
@@ -55,22 +57,21 @@ var Colgroup = function Colgroup(props) {
   var columnWidths = props.columnWidths,
     layout = props.layout,
     isNumberColumnEnabled = props.isNumberColumnEnabled,
-    renderWidth = props.renderWidth;
+    renderWidth = props.renderWidth,
+    tableNode = props.tableNode;
   if (!columnWidths || !isTableResized(columnWidths)) {
     return null;
   }
-
+  var tableContainerWidth;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && tableNode) {
+    tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
+  } else {
+    tableContainerWidth = getTableLayoutWidth(layout);
+  }
   // @see ED-6056
-  var layoutWidth = getTableLayoutWidth(layout, {
-    containerWidth: renderWidth
-  });
-  var maxTableWidth = renderWidth < layoutWidth ? renderWidth : layoutWidth;
-
-  // If table has a layout of default, it is confined by the defined column width.
-  // renderWidth is better used for breakout tables.
-  // @see ED-6737
+  var maxTableWidth = renderWidth < tableContainerWidth ? renderWidth : tableContainerWidth;
   if (layout === 'default') {
-    renderWidth = Math.min(renderWidth, layoutWidth);
+    renderWidth = Math.min(renderWidth, tableContainerWidth);
   }
   var tableWidth = isNumberColumnEnabled ? _editorSharedStyles.akEditorTableNumberColumnWidth : 0;
   var minTableWidth = tableWidth;

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

@@ -13,7 +13,8 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     columnWidths = _ref.columnWidths,
     layout = _ref.layout,
     renderWidth = _ref.renderWidth,
-    children = _ref.children;
+    children = _ref.children,
+    tableNode = _ref.tableNode;
   return /*#__PURE__*/_react.default.createElement("table", {
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
@@ -21,7 +22,8 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth
+    renderWidth: renderWidth,
+    tableNode: tableNode
   }), /*#__PURE__*/_react.default.createElement("tbody", null, children));
 });
 exports.Table = Table;

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

@@ -18,12 +18,14 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("@atlaskit/editor-common/types");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _style = require("../../ui/Renderer/style");
 var _tableCell = require("./tableCell");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _sticky = require("./table/sticky");
 var _table = require("./table/table");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
@@ -250,12 +252,18 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         renderWidth = _this$props.renderWidth,
         columnWidths = _this$props.columnWidths,
         stickyHeaders = _this$props.stickyHeaders,
-        tableNode = _this$props.tableNode;
+        tableNode = _this$props.tableNode,
+        rendererAppearance = _this$props.rendererAppearance;
       var stickyMode = this.state.stickyMode;
-      var tableWidth = (0, _styles.calcTableWidth)(layout, renderWidth, false);
       var lineLength = _editorSharedStyles.akEditorDefaultLayoutWidth;
+      var tableWidth;
       var left;
-      if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && tableNode) {
+        tableWidth = Math.min((0, _nodeWidth.getTableContainerWidth)(tableNode), renderWidth);
+      } else {
+        tableWidth = (0, _styles.calcTableWidth)(layout, renderWidth, false);
+      }
+      if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
         left = lineLength / 2 - tableWidth / 2;
       }
       var wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
@@ -280,7 +288,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         ref: this.props.handleRef,
         style: {
           width: tableWidth,
-          left: left && left < 0 ? left : undefined
+          left: left
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
@@ -291,7 +299,8 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths: columnWidths,
         layout: layout,
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth
+        renderWidth: renderWidth,
+        tableNode: tableNode
       }, this.grabFirstRowRef(children)))));
     }
   }]);

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.1.8";
+var packageVersion = "108.2.0";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -12,6 +12,7 @@ var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _typography = require("@atlaskit/theme/typography");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -83,7 +84,7 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   if (appearance !== 'full-width') {
     return '';
   }
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .pm-table-container,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n  "])), _editorSharedStyles.akEditorFullWidthLayoutWidth);
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n\n    ", "\n  "])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle(useFragmentMarkBreakoutWidthStylingFix) {
   if (useFragmentMarkBreakoutWidthStylingFix) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.1.8",
+	"version": "108.2.0",
 	"sideEffects": false
 }

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

@@ -60,6 +60,8 @@ export default class Media extends PureComponent {
         "data-color": borderColor,
         "data-size": borderWidth,
         style: {
+          width: '100%',
+          height: '100%',
           borderColor: paletteColorValue,
           borderWidth: `${borderWidth}px`,
           borderStyle: 'solid',

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
 // User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
 const MAX_SCALING_PERCENT = 0.3;
-const getTableLayoutWidth = (layout, opts) => {
+const getTableLayoutWidth = layout => {
   switch (layout) {
     case 'full-width':
       return akEditorFullWidthLayoutWidth;
@@ -47,23 +49,22 @@ export const Colgroup = props => {
     columnWidths,
     layout,
     isNumberColumnEnabled,
-    renderWidth
+    renderWidth,
+    tableNode
   } = props;
   if (!columnWidths || !isTableResized(columnWidths)) {
     return null;
   }
-
+  let tableContainerWidth;
+  if (getBooleanFF('platform.editor.custom-table-width') && tableNode) {
+    tableContainerWidth = getTableContainerWidth(tableNode);
+  } else {
+    tableContainerWidth = getTableLayoutWidth(layout);
+  }
   // @see ED-6056
-  const layoutWidth = getTableLayoutWidth(layout, {
-    containerWidth: renderWidth
-  });
-  const maxTableWidth = renderWidth < layoutWidth ? renderWidth : layoutWidth;
-
-  // If table has a layout of default, it is confined by the defined column width.
-  // renderWidth is better used for breakout tables.
-  // @see ED-6737
+  const maxTableWidth = renderWidth < tableContainerWidth ? renderWidth : tableContainerWidth;
   if (layout === 'default') {
-    renderWidth = Math.min(renderWidth, layoutWidth);
+    renderWidth = Math.min(renderWidth, tableContainerWidth);
   }
   let tableWidth = isNumberColumnEnabled ? akEditorTableNumberColumnWidth : 0;
   let minTableWidth = tableWidth;

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

@@ -6,7 +6,8 @@ export const Table = /*#__PURE__*/React.memo(({
   columnWidths,
   layout,
   renderWidth,
-  children
+  children,
+  tableNode
 }) => {
   return /*#__PURE__*/React.createElement("table", {
     "data-number-column": isNumberColumnEnabled,
@@ -15,6 +16,7 @@ export const Table = /*#__PURE__*/React.memo(({
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth
+    renderWidth: renderWidth,
+    tableNode: tableNode
   }), /*#__PURE__*/React.createElement("tbody", null, children));
 });

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

@@ -5,12 +5,14 @@ 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;
@@ -206,15 +208,21 @@ export class TableContainer extends React.Component {
       renderWidth,
       columnWidths,
       stickyHeaders,
-      tableNode
+      tableNode,
+      rendererAppearance
     } = this.props;
     const {
       stickyMode
     } = this.state;
-    let tableWidth = calcTableWidth(layout, renderWidth, false);
     const lineLength = akEditorDefaultLayoutWidth;
+    let tableWidth;
     let left;
-    if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
+    if (getBooleanFF('platform.editor.custom-table-width') && tableNode) {
+      tableWidth = Math.min(getTableContainerWidth(tableNode), renderWidth);
+    } else {
+      tableWidth = calcTableWidth(layout, renderWidth, false);
+    }
+    if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
       left = lineLength / 2 - tableWidth / 2;
     }
     const wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
@@ -239,7 +247,7 @@ export class TableContainer extends React.Component {
       ref: this.props.handleRef,
       style: {
         width: tableWidth,
-        left: left && left < 0 ? left : undefined
+        left
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
@@ -250,7 +258,8 @@ export class TableContainer extends React.Component {
       columnWidths: columnWidths,
       layout: layout,
       isNumberColumnEnabled: isNumberColumnEnabled,
-      renderWidth: renderWidth
+      renderWidth: renderWidth,
+      tableNode: tableNode
     }, this.grabFirstRowRef(children)))));
   }
 }

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.1.8";
+const packageVersion = "108.2.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -3,6 +3,7 @@ import { themed } from '@atlaskit/theme/components';
 import { fontFamily, fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -267,10 +268,15 @@ const fullWidthStyles = ({
     margin: 0 auto;
 
     .fabric-editor-breakout-mark,
-    .pm-table-container,
     .ak-renderer-extension {
       width: 100% !important;
     }
+
+    ${getBooleanFF('platform.editor.custom-table-width') ? '' : `
+      .pm-table-container {
+        width: 100% !important;
+      }
+    `}
   `;
 };
 const breakoutWidthStyle = useFragmentMarkBreakoutWidthStylingFix => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.1.8",
+	"version": "108.2.0",
 	"sideEffects": false
 }

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

@@ -71,6 +71,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         "data-color": borderColor,
         "data-size": borderWidth,
         style: {
+          width: '100%',
+          height: '100%',
           borderColor: paletteColorValue,
           borderWidth: "".concat(borderWidth, "px"),
           borderStyle: 'solid',

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
 // User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
 var MAX_SCALING_PERCENT = 0.3;
-var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
+var getTableLayoutWidth = function getTableLayoutWidth(layout) {
   switch (layout) {
     case 'full-width':
       return akEditorFullWidthLayoutWidth;
@@ -47,22 +49,21 @@ export var Colgroup = function Colgroup(props) {
   var columnWidths = props.columnWidths,
     layout = props.layout,
     isNumberColumnEnabled = props.isNumberColumnEnabled,
-    renderWidth = props.renderWidth;
+    renderWidth = props.renderWidth,
+    tableNode = props.tableNode;
   if (!columnWidths || !isTableResized(columnWidths)) {
     return null;
   }
-
+  var tableContainerWidth;
+  if (getBooleanFF('platform.editor.custom-table-width') && tableNode) {
+    tableContainerWidth = getTableContainerWidth(tableNode);
+  } else {
+    tableContainerWidth = getTableLayoutWidth(layout);
+  }
   // @see ED-6056
-  var layoutWidth = getTableLayoutWidth(layout, {
-    containerWidth: renderWidth
-  });
-  var maxTableWidth = renderWidth < layoutWidth ? renderWidth : layoutWidth;
-
-  // If table has a layout of default, it is confined by the defined column width.
-  // renderWidth is better used for breakout tables.
-  // @see ED-6737
+  var maxTableWidth = renderWidth < tableContainerWidth ? renderWidth : tableContainerWidth;
   if (layout === 'default') {
-    renderWidth = Math.min(renderWidth, layoutWidth);
+    renderWidth = Math.min(renderWidth, tableContainerWidth);
   }
   var tableWidth = isNumberColumnEnabled ? akEditorTableNumberColumnWidth : 0;
   var minTableWidth = tableWidth;

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

@@ -6,7 +6,8 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     columnWidths = _ref.columnWidths,
     layout = _ref.layout,
     renderWidth = _ref.renderWidth,
-    children = _ref.children;
+    children = _ref.children,
+    tableNode = _ref.tableNode;
   return /*#__PURE__*/React.createElement("table", {
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
@@ -14,6 +15,7 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth
+    renderWidth: renderWidth,
+    tableNode: tableNode
   }), /*#__PURE__*/React.createElement("tbody", null, children));
 });

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

@@ -13,12 +13,14 @@ 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;
@@ -243,12 +245,18 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         renderWidth = _this$props.renderWidth,
         columnWidths = _this$props.columnWidths,
         stickyHeaders = _this$props.stickyHeaders,
-        tableNode = _this$props.tableNode;
+        tableNode = _this$props.tableNode,
+        rendererAppearance = _this$props.rendererAppearance;
       var stickyMode = this.state.stickyMode;
-      var tableWidth = calcTableWidth(layout, renderWidth, false);
       var lineLength = akEditorDefaultLayoutWidth;
+      var tableWidth;
       var left;
-      if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
+      if (getBooleanFF('platform.editor.custom-table-width') && tableNode) {
+        tableWidth = Math.min(getTableContainerWidth(tableNode), renderWidth);
+      } else {
+        tableWidth = calcTableWidth(layout, renderWidth, false);
+      }
+      if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
         left = lineLength / 2 - tableWidth / 2;
       }
       var wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
@@ -273,7 +281,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         ref: this.props.handleRef,
         style: {
           width: tableWidth,
-          left: left && left < 0 ? left : undefined
+          left: left
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
@@ -284,7 +292,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths: columnWidths,
         layout: layout,
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth
+        renderWidth: renderWidth,
+        tableNode: tableNode
       }, this.grabFirstRowRef(children)))));
     }
   }]);

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.1.8";
+var packageVersion = "108.2.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -5,6 +5,7 @@ import { themed } from '@atlaskit/theme/components';
 import { fontFamily, fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -72,7 +73,7 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   if (appearance !== 'full-width') {
     return '';
   }
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .pm-table-container,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n  "])), akEditorFullWidthLayoutWidth);
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n\n    ", "\n  "])), akEditorFullWidthLayoutWidth, getBooleanFF('platform.editor.custom-table-width') ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle(useFragmentMarkBreakoutWidthStylingFix) {
   if (useFragmentMarkBreakoutWidthStylingFix) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.1.8",
+	"version": "108.2.0",
 	"sideEffects": false
 }

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

@@ -4,4 +4,4 @@ export type TableProps = SharedTableProps & {
     innerRef?: React.RefObject<HTMLTableElement>;
     children: React.ReactNode[];
 };
-export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, }: TableProps) => JSX.Element>;
+export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, }: TableProps) => JSX.Element>;

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

@@ -1,7 +1,9 @@
+import { Node as PMNode } from 'prosemirror-model';
 import { TableLayout } from '@atlaskit/adf-schema';
 export type SharedTableProps = {
     columnWidths?: Array<number>;
     layout: TableLayout;
     isNumberColumnEnabled: boolean;
     renderWidth: number;
+    tableNode?: PMNode;
 };

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

@@ -4,4 +4,4 @@ export type TableProps = SharedTableProps & {
     innerRef?: React.RefObject<HTMLTableElement>;
     children: React.ReactNode[];
 };
-export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, }: TableProps) => JSX.Element>;
+export declare const Table: React.MemoExoticComponent<({ innerRef, isNumberColumnEnabled, columnWidths, layout, renderWidth, children, tableNode, }: TableProps) => JSX.Element>;

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

@@ -1,7 +1,9 @@
+import { Node as PMNode } from 'prosemirror-model';
 import { TableLayout } from '@atlaskit/adf-schema';
 export type SharedTableProps = {
     columnWidths?: Array<number>;
     layout: TableLayout;
     isNumberColumnEnabled: boolean;
     renderWidth: number;
+    tableNode?: PMNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.1.8",
+  "version": "108.2.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -96,6 +96,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
     "@types/prosemirror-model": "^1.11.0",
     "@types/prosemirror-transform": "^1.1.0",
@@ -130,6 +131,9 @@
   "platform-feature-flags": {
     "platform.editor.sentry-error-monitoring_6bksu": {
       "type": "boolean"
+    },
+    "platform.editor.custom-table-width": {
+      "type": "boolean"
     }
   }
 }