@atlaskit/renderer 124.16.1 → 124.16.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 124.16.3
+
+### Patch Changes
+
+- [`be08843fca604`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be08843fca604) -
+  [EDITOR-3389] Make sure that renderer falls back to 'full-width' if the appearance is 'max' and
+  the experiment is off
+- Updated dependencies
+
+## 124.16.2
+
+### Patch Changes
+
+- [`d3461a5b84b81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d3461a5b84b81) -
+  Suppress i18n errors
+- Updated dependencies
+
 ## 124.16.1
 
 ### Patch Changes

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

@@ -234,12 +234,12 @@ var Colgroup = exports.Colgroup = function Colgroup(props) {
   }
   var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
     isTopLevelRenderer: isTopLevelRenderer,
-    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
+    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment_jira', true, {
       exposure: true
     }),
-    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width')
+    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true))
   }));
   if (!colStyles) {
     return null;

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

@@ -32,6 +32,7 @@ var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
 var _tableNew = require("./tableNew");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -432,6 +433,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
         if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return [isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth, "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
+        } else if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+          return [isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorMaxWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorMaxWidthLayoutWidth, "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
         } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
           return [isRenderWidthValid ? renderWidth : tableContainerWidth, renderWidthCSS];
@@ -450,15 +453,17 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
       var fullWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
       var fullWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
+      var maxWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorMaxWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorMaxWidthLayoutWidth;
+      var maxWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
       var isCommentAppearanceAndTableAlignmentEnabled = (0, _appearance.isCommentAppearance)(rendererAppearance) && allowTableAlignment;
-      var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
+      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
 
       // Setting fixTableSSRResizing to false while FG logic is true in tableNew
       var fixTableSSRResizing = false;
       var tableWidthNew = fixTableSSRResizing ? (0, _nodeWidth.getTableContainerWidth)(tableNode) : tableWidth;
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) && (0, _appearance.isMaxWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
       var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         left = (tableWidth - lineLength) / 2;
@@ -494,7 +499,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       // We can only use CSS to determine the width when we have a known width in container.
       // When appearance is full-page, full-width or comment we use CSS based width calculation.
       // Otherwise it's fixed table width (customized width) or inherit.
-      if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width') && fixTableSSRResizing) {
+      if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max') && fixTableSSRResizing) {
         finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {

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

@@ -25,6 +25,7 @@ var _sticky = require("./table/sticky");
 var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
@@ -404,7 +405,9 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       }) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(_style.FullPagePadding, "px * 2");
       var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
-        if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+        if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+          return "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
+        } else if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
         } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return renderWidthCSS;
@@ -419,10 +422,11 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       // Logic for table alignment in renderer
       var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
       var fullWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
+      var maxWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var isCommentAppearanceAndTableAlignmentEnabled = (0, _appearance.isCommentAppearance)(rendererAppearance) && allowTableAlignment;
-      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
       var tableWidthNew = (0, _nodeWidth.getTableContainerWidth)(tableNode);
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || isCommentAppearanceAndTableAlignmentEnabled);
       var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
@@ -451,7 +455,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       // We can only use CSS to determine the width when we have a known width in container.
       // When appearance is full-page, full-width or comment we use CSS based width calculation.
       // Otherwise it's fixed table width (customized width) or inherit.
-      if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width') {
+      if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
         finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {

package/dist/cjs/react/utils/appearance.js

@@ -3,10 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isFullWidthOrFullPageAppearance = exports.isFullWidthAppearance = exports.isFullPageAppearance = exports.isCommentAppearance = void 0;
+exports.isMaxWidthAppearance = exports.isFullWidthOrFullPageAppearance = exports.isFullWidthAppearance = exports.isFullPageAppearance = exports.isCommentAppearance = void 0;
 var isFullWidthAppearance = exports.isFullWidthAppearance = function isFullWidthAppearance(appearance) {
   return appearance === 'full-width';
 };
+var isMaxWidthAppearance = exports.isMaxWidthAppearance = function isMaxWidthAppearance(appearance) {
+  return appearance === 'max';
+};
 var isFullPageAppearance = exports.isFullPageAppearance = function isFullPageAppearance(appearance) {
   return appearance === 'full-page';
 };
@@ -14,5 +17,5 @@ var isCommentAppearance = exports.isCommentAppearance = function isCommentAppear
   return appearance === 'comment';
 };
 var isFullWidthOrFullPageAppearance = exports.isFullWidthOrFullPageAppearance = function isFullWidthOrFullPageAppearance(appearance) {
-  return isFullPageAppearance(appearance) || isFullWidthAppearance(appearance);
+  return isFullPageAppearance(appearance) || isFullWidthAppearance(appearance) || isMaxWidthAppearance(appearance);
 };

package/dist/cjs/ui/Expand.js

@@ -294,7 +294,9 @@ function Expand(_ref2) {
     className: "".concat(nodeType, "-content-wrapper")
   }, (0, _react.jsx)(_ui.WidthProvider, null, (0, _react.jsx)("div", {
     css: clearNextSiblingMarginTopStyle
-  }), (0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ? (0, _react.jsx)(_react2.Suspense, {
+  }), (0, _platformFeatureFlags.fg)('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ?
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  (0, _react.jsx)(_react2.Suspense, {
     fallback: (0, _react.jsx)("div", null, "Loading...")
   }, (0, _react.jsx)(LazyChildren, null, children)) : null : children))));
 }

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

@@ -69,7 +69,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "0.0.0-development";
+var packageVersion = "124.16.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -780,6 +780,11 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
     adfDocument = props.document;
   var localRef = _react.default.useRef(null);
   var innerRef = props.innerRef || localRef;
+
+  // @see https://hello.jira.atlassian.cloud/browse/EDITOR-3389
+  if (props.appearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', false)) {
+    props.appearance = 'full-width';
+  }
   if (!allowAnnotations) {
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -223,12 +223,12 @@ export const Colgroup = props => {
   const colStyles = renderScaleDownColgroup({
     ...props,
     isTopLevelRenderer,
-    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
+    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {
       exposure: true
     }),
-    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width')
+    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true))
   });
   if (!colStyles) {
     return null;

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

@@ -8,7 +8,7 @@ import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { FullPagePadding } from '../../ui/Renderer/style';
@@ -16,9 +16,10 @@ import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
-import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance, isMaxWidthAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
 import { TableProcessorWithContainerStyles } from './tableNew';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
   exposure: true
 });
@@ -378,6 +379,8 @@ export class TableContainer extends React.Component {
     const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
       if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         return [isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth, `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`];
+      } else if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+        return [isRenderWidthValid ? Math.min(akEditorMaxWidthLayoutWidth, renderWidth) : akEditorMaxWidthLayoutWidth, `min(${akEditorMaxWidthLayoutWidth}px, ${renderWidthCSS})`];
       } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         const tableContainerWidth = getTableContainerWidth(tableNode);
         return [isRenderWidthValid ? renderWidth : tableContainerWidth, renderWidthCSS];
@@ -393,15 +396,17 @@ export class TableContainer extends React.Component {
     const isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
     const fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
     const fullWidthLineLengthCSS = `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`;
+    const maxWidthLineLength = isRenderWidthValid ? Math.min(akEditorMaxWidthLayoutWidth, renderWidth) : akEditorMaxWidthLayoutWidth;
+    const maxWidthLineLengthCSS = `min(${akEditorMaxWidthLayoutWidth}px, ${renderWidthCSS})`;
     const commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
     const isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
-    const lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-    const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
+    const lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
+    const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
 
     // Setting fixTableSSRResizing to false while FG logic is true in tableNew
     const fixTableSSRResizing = false;
     const tableWidthNew = fixTableSSRResizing ? getTableContainerWidth(tableNode) : tableWidth;
-    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && isMaxWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
     let leftCSS;
     if (shouldCalculateLeftForAlignment) {
       left = (tableWidth - lineLength) / 2;
@@ -437,7 +442,7 @@ export class TableContainer extends React.Component {
     // We can only use CSS to determine the width when we have a known width in container.
     // When appearance is full-page, full-width or comment we use CSS based width calculation.
     // Otherwise it's fixed table width (customized width) or inherit.
-    if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width') && fixTableSSRResizing) {
+    if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max') && fixTableSSRResizing) {
       finalTableContainerWidth = allowTableResizing ? `calc(${tableWidthCSS})` : 'inherit';
     }
     if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {

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

@@ -7,13 +7,14 @@ import { FullPagePadding } from '../../ui/Renderer/style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { TableHeader } from './tableCell';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
-import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isFullPageAppearance } from '../utils/appearance';
+import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const stickyContainerBaseStyles = {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   height: "var(--ds-space-250, 20px)",
@@ -348,7 +349,9 @@ export class TableContainer extends React.Component {
     }) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : `100cqw - ${FullPagePadding}px * 2`;
     const renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : `100cqw`;
     const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
-      if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+      if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+        return `min(${akEditorMaxWidthLayoutWidth}px, ${renderWidthCSS})`;
+      } else if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         return `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`;
       } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         return renderWidthCSS;
@@ -363,10 +366,11 @@ export class TableContainer extends React.Component {
     // Logic for table alignment in renderer
     const isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
     const fullWidthLineLengthCSS = `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`;
+    const maxWidthLineLengthCSS = `min(${akEditorMaxWidthLayoutWidth}px, ${renderWidthCSS})`;
     const isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
-    const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
+    const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
     const tableWidthNew = getTableContainerWidth(tableNode);
-    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || isCommentAppearanceAndTableAlignmentEnabled);
     let leftCSS;
     if (shouldCalculateLeftForAlignment) {
       leftCSS = `(${tableWidthCSS} - ${lineLengthCSS}) / 2`;
@@ -395,7 +399,7 @@ export class TableContainer extends React.Component {
     // We can only use CSS to determine the width when we have a known width in container.
     // When appearance is full-page, full-width or comment we use CSS based width calculation.
     // Otherwise it's fixed table width (customized width) or inherit.
-    if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width') {
+    if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
       finalTableContainerWidth = allowTableResizing ? `calc(${tableWidthCSS})` : 'inherit';
     }
     if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {

package/dist/es2019/react/utils/appearance.js

@@ -1,4 +1,5 @@
 export const isFullWidthAppearance = appearance => appearance === 'full-width';
+export const isMaxWidthAppearance = appearance => appearance === 'max';
 export const isFullPageAppearance = appearance => appearance === 'full-page';
 export const isCommentAppearance = appearance => appearance === 'comment';
-export const isFullWidthOrFullPageAppearance = appearance => isFullPageAppearance(appearance) || isFullWidthAppearance(appearance);
+export const isFullWidthOrFullPageAppearance = appearance => isFullPageAppearance(appearance) || isFullWidthAppearance(appearance) || isMaxWidthAppearance(appearance);

package/dist/es2019/ui/Expand.js

@@ -274,7 +274,9 @@ function Expand({
     className: `${nodeType}-content-wrapper`
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
-  }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ? jsx(Suspense, {
+  }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ?
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  jsx(Suspense, {
     fallback: jsx("div", null, "Loading...")
   }, jsx(LazyChildren, null, children)) : null : children))));
 }

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

@@ -55,7 +55,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "0.0.0-development";
+const packageVersion = "124.16.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -767,6 +767,11 @@ const RendererWithAnnotationSelection = props => {
   } = props;
   const localRef = React.useRef(null);
   const innerRef = props.innerRef || localRef;
+
+  // @see https://hello.jira.atlassian.cloud/browse/EDITOR-3389
+  if (props.appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', false)) {
+    props.appearance = 'full-width';
+  }
   if (!allowAnnotations) {
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -228,12 +228,12 @@ export var Colgroup = function Colgroup(props) {
   }
   var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
     isTopLevelRenderer: isTopLevelRenderer,
-    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
+    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {
       exposure: true
     }),
-    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width')
+    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true))
   }));
   if (!colStyles) {
     return null;

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

@@ -19,7 +19,7 @@ import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { FullPagePadding } from '../../ui/Renderer/style';
@@ -27,9 +27,10 @@ import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
-import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance, isMaxWidthAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
 import { TableProcessorWithContainerStyles } from './tableNew';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
   return isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
     exposure: true
@@ -425,6 +426,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
         if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return [isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth, "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
+        } else if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+          return [isRenderWidthValid ? Math.min(akEditorMaxWidthLayoutWidth, renderWidth) : akEditorMaxWidthLayoutWidth, "min(".concat(akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
         } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           var tableContainerWidth = getTableContainerWidth(tableNode);
           return [isRenderWidthValid ? renderWidth : tableContainerWidth, renderWidthCSS];
@@ -443,15 +446,17 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
       var fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
       var fullWidthLineLengthCSS = "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
+      var maxWidthLineLength = isRenderWidthValid ? Math.min(akEditorMaxWidthLayoutWidth, renderWidth) : akEditorMaxWidthLayoutWidth;
+      var maxWidthLineLengthCSS = "min(".concat(akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
       var isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
-      var lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-      var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
+      var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
 
       // Setting fixTableSSRResizing to false while FG logic is true in tableNew
       var fixTableSSRResizing = false;
       var tableWidthNew = fixTableSSRResizing ? getTableContainerWidth(tableNode) : tableWidth;
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && isMaxWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
       var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         left = (tableWidth - lineLength) / 2;
@@ -487,7 +492,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       // We can only use CSS to determine the width when we have a known width in container.
       // When appearance is full-page, full-width or comment we use CSS based width calculation.
       // Otherwise it's fixed table width (customized width) or inherit.
-      if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width') && fixTableSSRResizing) {
+      if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max') && fixTableSSRResizing) {
         finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {

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

@@ -19,13 +19,14 @@ import { FullPagePadding } from '../../ui/Renderer/style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { TableHeader } from './tableCell';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
-import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isFullPageAppearance } from '../utils/appearance';
+import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var stickyContainerBaseStyles = {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   height: "var(--ds-space-250, 20px)",
@@ -398,7 +399,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       }) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(FullPagePadding, "px * 2");
       var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
-        if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+        if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+          return "min(".concat(akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
+        } else if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
         } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return renderWidthCSS;
@@ -413,10 +416,11 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       // Logic for table alignment in renderer
       var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
       var fullWidthLineLengthCSS = "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
+      var maxWidthLineLengthCSS = "min(".concat(akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
-      var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
       var tableWidthNew = getTableContainerWidth(tableNode);
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || isCommentAppearanceAndTableAlignmentEnabled);
       var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
@@ -445,7 +449,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       // We can only use CSS to determine the width when we have a known width in container.
       // When appearance is full-page, full-width or comment we use CSS based width calculation.
       // Otherwise it's fixed table width (customized width) or inherit.
-      if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width') {
+      if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
         finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {

package/dist/esm/react/utils/appearance.js

@@ -1,6 +1,9 @@
 export var isFullWidthAppearance = function isFullWidthAppearance(appearance) {
   return appearance === 'full-width';
 };
+export var isMaxWidthAppearance = function isMaxWidthAppearance(appearance) {
+  return appearance === 'max';
+};
 export var isFullPageAppearance = function isFullPageAppearance(appearance) {
   return appearance === 'full-page';
 };
@@ -8,5 +11,5 @@ export var isCommentAppearance = function isCommentAppearance(appearance) {
   return appearance === 'comment';
 };
 export var isFullWidthOrFullPageAppearance = function isFullWidthOrFullPageAppearance(appearance) {
-  return isFullPageAppearance(appearance) || isFullWidthAppearance(appearance);
+  return isFullPageAppearance(appearance) || isFullWidthAppearance(appearance) || isMaxWidthAppearance(appearance);
 };

package/dist/esm/ui/Expand.js

@@ -285,7 +285,9 @@ function Expand(_ref2) {
     className: "".concat(nodeType, "-content-wrapper")
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
-  }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ? jsx(Suspense, {
+  }), fg('hot-121622_lazy_load_expand_content') ? hasLoadedChildren ?
+  // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+  jsx(Suspense, {
     fallback: jsx("div", null, "Loading...")
   }, jsx(LazyChildren, null, children)) : null : children))));
 }

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

@@ -60,7 +60,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "0.0.0-development";
+var packageVersion = "124.16.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -771,6 +771,11 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
     adfDocument = props.document;
   var localRef = React.useRef(null);
   var innerRef = props.innerRef || localRef;
+
+  // @see https://hello.jira.atlassian.cloud/browse/EDITOR-3389
+  if (props.appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', false)) {
+    props.appearance = 'full-width';
+  }
   if (!allowAnnotations) {
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/types/react/utils/appearance.d.ts

@@ -1,5 +1,6 @@
 import { type RendererAppearance } from '../../ui/Renderer/types';
 export declare const isFullWidthAppearance: (appearance: RendererAppearance) => appearance is "full-width";
+export declare const isMaxWidthAppearance: (appearance: RendererAppearance) => appearance is "max";
 export declare const isFullPageAppearance: (appearance: RendererAppearance) => appearance is "full-page";
 export declare const isCommentAppearance: (appearance: RendererAppearance) => appearance is "comment";
-export declare const isFullWidthOrFullPageAppearance: (appearance: RendererAppearance) => appearance is "full-page" | "full-width";
+export declare const isFullWidthOrFullPageAppearance: (appearance: RendererAppearance) => appearance is "full-page" | "full-width" | "max";

package/dist/types-ts4.5/react/utils/appearance.d.ts

@@ -1,5 +1,6 @@
 import { type RendererAppearance } from '../../ui/Renderer/types';
 export declare const isFullWidthAppearance: (appearance: RendererAppearance) => appearance is "full-width";
+export declare const isMaxWidthAppearance: (appearance: RendererAppearance) => appearance is "max";
 export declare const isFullPageAppearance: (appearance: RendererAppearance) => appearance is "full-page";
 export declare const isCommentAppearance: (appearance: RendererAppearance) => appearance is "comment";
-export declare const isFullWidthOrFullPageAppearance: (appearance: RendererAppearance) => appearance is "full-page" | "full-width";
+export declare const isFullWidthOrFullPageAppearance: (appearance: RendererAppearance) => appearance is "full-page" | "full-width" | "max";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.16.1",
+	"version": "124.16.3",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -54,12 +54,12 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/react-ufo": "^4.15.0",
-		"@atlaskit/smart-card": "^43.8.0",
+		"@atlaskit/smart-card": "^43.9.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.39.0",
-		"@atlaskit/tokens": "^8.1.0",
+		"@atlaskit/tmp-editor-statsig": "^13.40.0",
+		"@atlaskit/tokens": "^8.2.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",