@atlaskit/renderer 108.1.8 → 108.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 108.2.1
+
+### Patch Changes
+
+- [`1b8397cca2c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b8397cca2c) - [ux] Stop event from bubbling when user clicks on either the copy clipboard button or wrap button for code blocks in renderer view
+
+## 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/codeBlock/components/codeBlockCopyButton.js

@@ -52,7 +52,7 @@ var CopyButton = function CopyButton(_ref) {
       iconBefore: (0, _react.jsx)(_copy.default, {
         label: tooltip
       }),
-      onClick: function onClick() {
+      onClick: function onClick(event) {
         fireAnalyticsEvent({
           action: _enums.ACTION.CLICKED,
           actionSubject: _enums.ACTION_SUBJECT.BUTTON,
@@ -62,6 +62,7 @@ var CopyButton = function CopyButton(_ref) {
         (0, _clipboard.copyTextToClipboard)(content);
         setTooltip(intl.formatMessage(_messages.codeBlockButtonMessages.copiedCodeToClipboard));
         setClassName('copy-to-clipboard clicked');
+        event.stopPropagation();
       },
       spacing: "compact"
     }))));

package/dist/cjs/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -56,7 +56,7 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
         label: ""
       }),
       isSelected: wrapLongLines,
-      onClick: function onClick() {
+      onClick: function onClick(event) {
         fireAnalyticsEvent({
           action: _enums.ACTION.CLICKED,
           actionSubject: _enums.ACTION_SUBJECT.BUTTON,
@@ -67,6 +67,7 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
           eventType: _enums.EVENT_TYPE.UI
         });
         setWrapLongLines(!wrapLongLines);
+        event.stopPropagation();
       },
       spacing: "compact"
     })));

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.1";
 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) {
@@ -107,7 +108,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
       light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
       dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
-    })(themeProps), "var(--ds-radius-100, 3px)", (0, _components.themed)({
+    })(themeProps), "var(--ds-border-radius-100, 3px)", (0, _components.themed)({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, ".concat(colors.DN600, ")")
     })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
@@ -137,7 +138,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), (0, _components.themed)({
       light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
       dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
-    })(themeProps), "var(--ds-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
+    })(themeProps), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
 exports.rendererStyles = rendererStyles;

package/dist/cjs/ui/SortingIcon.js

@@ -23,7 +23,7 @@ var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
   return StatusClassNames;
 }({});
 exports.StatusClassNames = StatusClassNames;
-var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
+var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 var iconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 
 // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001

package/dist/cjs/version.json

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

package/dist/es2019/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -35,7 +35,7 @@ const CopyButton = ({
     iconBefore: jsx(CopyIcon, {
       label: tooltip
     }),
-    onClick: () => {
+    onClick: event => {
       fireAnalyticsEvent({
         action: ACTION.CLICKED,
         actionSubject: ACTION_SUBJECT.BUTTON,
@@ -45,6 +45,7 @@ const CopyButton = ({
       copyTextToClipboard(content);
       setTooltip(intl.formatMessage(codeBlockButtonMessages.copiedCodeToClipboard));
       setClassName('copy-to-clipboard clicked');
+      event.stopPropagation();
     },
     spacing: "compact"
   })))));

package/dist/es2019/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -49,7 +49,7 @@ const CodeBlockWrapButton = ({
       label: ""
     }),
     isSelected: wrapLongLines,
-    onClick: () => {
+    onClick: event => {
       fireAnalyticsEvent({
         action: ACTION.CLICKED,
         actionSubject: ACTION_SUBJECT.BUTTON,
@@ -60,6 +60,7 @@ const CodeBlockWrapButton = ({
         eventType: EVENT_TYPE.UI
       });
       setWrapLongLines(!wrapLongLines);
+      event.stopPropagation();
     },
     spacing: "compact"
   }))));

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.1";
 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 => {
@@ -404,7 +410,7 @@ export const rendererStyles = wrapperProps => theme => {
     light: `var(--ds-background-neutral, ${colors.N30A})`,
     dark: `var(--ds-background-neutral, ${colors.DN70})`
   })(themeProps)};
-        border-radius: ${"var(--ds-radius-100, 3px)"};
+        border-radius: ${"var(--ds-border-radius-100, 3px)"};
         color: ${themed({
     light: `var(--ds-text, ${colors.N800})`,
     dark: `var(--ds-text, ${colors.DN600})`
@@ -640,7 +646,7 @@ export const rendererStyles = wrapperProps => theme => {
         /* stylelint-enable */
 
         position: relative;
-        border-radius: ${"var(--ds-radius-100, 3px)"};
+        border-radius: ${"var(--ds-border-radius-100, 3px)"};
 
         /*
      * The overall renderer has word-wrap: break; which causes issues with

package/dist/es2019/ui/SortingIcon.js

@@ -22,7 +22,7 @@ const buttonStyles = css`
   right: 0;
   top: 0;
   border: 2px solid ${"var(--ds-border, #fff)"};
-  border-radius: ${"var(--ds-radius-100, 4px)"};
+  border-radius: ${"var(--ds-border-radius-100, 4px)"};
   background-color: ${`var(--ds-surface-overlay, ${N20})`};
   justify-content: center;
   align-items: center;

package/dist/es2019/version.json

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

package/dist/esm/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -41,7 +41,7 @@ var CopyButton = function CopyButton(_ref) {
       iconBefore: jsx(CopyIcon, {
         label: tooltip
       }),
-      onClick: function onClick() {
+      onClick: function onClick(event) {
         fireAnalyticsEvent({
           action: ACTION.CLICKED,
           actionSubject: ACTION_SUBJECT.BUTTON,
@@ -51,6 +51,7 @@ var CopyButton = function CopyButton(_ref) {
         copyTextToClipboard(content);
         setTooltip(intl.formatMessage(codeBlockButtonMessages.copiedCodeToClipboard));
         setClassName('copy-to-clipboard clicked');
+        event.stopPropagation();
       },
       spacing: "compact"
     }))));

package/dist/esm/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -48,7 +48,7 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
         label: ""
       }),
       isSelected: wrapLongLines,
-      onClick: function onClick() {
+      onClick: function onClick(event) {
         fireAnalyticsEvent({
           action: ACTION.CLICKED,
           actionSubject: ACTION_SUBJECT.BUTTON,
@@ -59,6 +59,7 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
           eventType: EVENT_TYPE.UI
         });
         setWrapLongLines(!wrapLongLines);
+        event.stopPropagation();
       },
       spacing: "compact"
     })));

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.1";
 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) {
@@ -96,7 +97,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
       light: "var(--ds-background-neutral, ".concat(colors.N30A, ")"),
       dark: "var(--ds-background-neutral, ".concat(colors.DN70, ")")
-    })(themeProps), "var(--ds-radius-100, 3px)", themed({
+    })(themeProps), "var(--ds-border-radius-100, 3px)", themed({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, ".concat(colors.DN600, ")")
     })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
@@ -126,7 +127,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), themed({
       light: "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"),
       dark: "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbarDark, ")")
-    })(themeProps), "var(--ds-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');
+    })(themeProps), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

package/dist/esm/ui/SortingIcon.js

@@ -15,7 +15,7 @@ export var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
   return StatusClassNames;
 }({});
-var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", RendererCssClassName.SORTABLE_COLUMN_ICON);
+var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", RendererCssClassName.SORTABLE_COLUMN_ICON);
 var iconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, RendererCssClassName.SORTABLE_COLUMN_ICON);
 
 // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.1.8",
+	"version": "108.2.1",
 	"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.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^25.8.0",
+    "@atlaskit/adf-schema": "^25.9.0",
     "@atlaskit/adf-utils": "^18.4.0",
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
@@ -56,7 +56,7 @@
     "@atlaskit/status": "^1.3.0",
     "@atlaskit/task-decision": "^17.6.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.6.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -82,6 +82,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/editor-core": "^185.2.0",
     "@atlaskit/editor-test-helpers": "^18.6.0",
+    "@atlaskit/inline-edit": "^12.3.3",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/link-test-helpers": "^4.0.0",
     "@atlaskit/logo": "^13.14.0",
@@ -92,10 +93,12 @@
     "@atlaskit/navigation-next": "^9.0.0",
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/range": "^7.1.0",
+    "@atlaskit/textfield": "^5.5.1",
     "@atlaskit/util-data-test": "^17.8.0",
     "@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 +133,9 @@
   "platform-feature-flags": {
     "platform.editor.sentry-error-monitoring_6bksu": {
       "type": "boolean"
+    },
+    "platform.editor.custom-table-width": {
+      "type": "boolean"
     }
   }
-}
+}