@atlaskit/renderer 118.0.0 → 118.1.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/renderer
 
+## 118.1.1
+
+### Patch Changes
+
+- [#156190](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156190)
+  [`f62c2d1edf517`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f62c2d1edf517) -
+  CCP-6498 Cleanup FG cc_perf_reduce_rerenders
+- [#157481](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157481)
+  [`c8bf1b901208a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c8bf1b901208a) -
+  EDITOR-677 - Renderer - Selecting another annotation with unsaved draft/reply results in multiple
+  discard prompts
+
+## 118.1.0
+
+### Minor Changes
+
+- [#154702](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154702)
+  [`a44461b56d840`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a44461b56d840) -
+  Prop type update for clarity and maintainability
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 118.0.0
 
 ### Major Changes

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -15,6 +16,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
+var _vcMedia = require("@atlaskit/react-ufo/vc-media");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -72,6 +75,7 @@ var MediaGroup = exports.default = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var numChildren = _react.default.Children.count(this.props.children);
       var content;
+      var mediaGroupProps = (0, _platformFeatureFlags.fg)('platform_editor_fix_vc90_bug_with_files') ? _vcMedia.VcMediaWrapperProps : {};
       if (numChildren === 1) {
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -89,10 +93,9 @@ var MediaGroup = exports.default = /*#__PURE__*/function (_PureComponent) {
       } else {
         content = this.renderStrip();
       }
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         className: "MediaGroup"
-      }, content);
+      }, mediaGroupProps), content));
     }
   }, {
     key: "renderSingleFile",

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

@@ -156,7 +156,8 @@ var StickyTable = exports.StickyTable = function StickyTable(_ref) {
       isNumberColumnEnabled: isNumberColumnEnabled,
       renderWidth: renderWidth,
       tableNode: tableNode,
-      rendererAppearance: rendererAppearance
+      rendererAppearance: rendererAppearance,
+      fixTableSSRResizing: fixTableSSRResizing
     },
     /**
      * @see https://product-fabric.atlassian.net/browse/ED-10235

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

@@ -25,7 +25,9 @@ var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     isInsideOfTable = _ref.isInsideOfTable,
     isinsideMultiBodiedExtension = _ref.isinsideMultiBodiedExtension,
     allowTableResizing = _ref.allowTableResizing,
-    isPresentational = _ref.isPresentational;
+    isPresentational = _ref.isPresentational,
+    _ref$fixTableSSRResiz = _ref.fixTableSSRResizing,
+    fixTableSSRResizing = _ref$fixTableSSRResiz === void 0 ? false : _ref$fixTableSSRResiz;
   var tableWidth = tableNode ? (0, _nodeWidth.getTableContainerWidth)(tableNode) : _editorSharedStyles.akEditorDefaultLayoutWidth;
   if (rendererAppearance === 'comment' && allowTableResizing && tableNode && !((_tableNode$attrs = tableNode.attrs) !== null && _tableNode$attrs !== void 0 && _tableNode$attrs.width)) {
     tableWidth = 'inherit';
@@ -48,7 +50,10 @@ var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     "data-table-width": tableWidth,
     "data-layout": tableLayout,
     "data-table-display-mode": tableDisplayMode,
-    ref: innerRef
+    ref: innerRef,
+    style: {
+      marginTop: fixTableSSRResizing ? '0px' : ''
+    }
   }), /*#__PURE__*/_react.default.createElement(_colgroup.Colgroup, {
     columnWidths: columnWidths,
     layout: layout,

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

@@ -29,6 +29,7 @@ var _sticky = require("./table/sticky");
 var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
+var _tableNew = require("./tableNew");
 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; }
@@ -126,7 +127,7 @@ var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 /**
- * Class for Tables in Renderer
+ *
  */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -413,7 +414,9 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       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 fixTableSSRResizing = (0, _platformFeatureFlags.fg)('platform-ssr-table-resize');
+
+      // 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 leftCSS;
@@ -511,8 +514,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         rowHeight: this.state.headerRowHeight,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
-        allowTableResizing: allowTableResizing,
-        fixTableSSRResizing: fixTableSSRResizing
+        allowTableResizing: allowTableResizing
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
@@ -634,6 +636,17 @@ var TableProcessor = exports.TableProcessor = /*#__PURE__*/function (_React$Comp
     }
   }]);
 }(_react.default.Component); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+var TableWithShadowsAndContainerStyles = (0, _ui.overflowShadow)(_tableNew.TableProcessorWithContainerStyles, {
+  /**
+   * The :scope is in reference to table container and we are selecting only
+   * direct children that match the table node wrapper selector, not their
+   * descendants.
+   */
+  overflowSelector: ":scope > .".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER),
+  useShadowObserver: true
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
   /**
    * The :scope is in reference to table container and we are selecting only
@@ -644,26 +657,43 @@ var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
-  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if ((0, _platformFeatureFlags.fg)('platform-ssr-table-resize')) {
     var _props$columnWidths;
-    var width = _ref2.width;
-    var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
     var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
       return total + val;
     }, 0)) || 0;
     if (colWidthsSum || props.allowTableResizing) {
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
+      return /*#__PURE__*/_react.default.createElement(TableWithShadowsAndContainerStyles, props);
+    }
+    return /*#__PURE__*/_react.default.createElement(_tableNew.TableProcessorWithContainerStyles
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+      var _props$columnWidths2;
+      var width = _ref2.width;
+      var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
+      var colWidthsSum = ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce(function (total, val) {
+        return total + val;
+      }, 0)) || 0;
+      if (colWidthsSum || props.allowTableResizing) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
+          renderWidth: renderWidth
+        }, props));
+      }
+      // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+      return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
         renderWidth: renderWidth
+        // Ignored via go/ees005
+        // eslint-disable-next-line react/jsx-props-no-spreading
       }, props));
-    }
-    // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
-    return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
-      renderWidth: renderWidth
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, props));
-  });
+    });
+  }
 };
 var _default = exports.default = (0, _SmartCardStorage.withSmartCardStorage)(TableWithWidth);

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

@@ -13,6 +13,8 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
+var _style = require("../../ui/Renderer/style");
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("@atlaskit/editor-common/types");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -20,7 +22,6 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tableCell = require("./tableCell");
 var _sticky = require("./table/sticky");
 var _table = require("./table/table");
-var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _appearance = require("../utils/appearance");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
 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; } } }; }
@@ -28,20 +29,6 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/enforce-style-prop */
-var getResizerMinWidth = function getResizerMinWidth(node) {
-  var currentColumnCount = getColgroupChildrenLength(node);
-  var minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
-  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
-  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
-  return minColumnWidth + 1;
-};
-var getColgroupChildrenLength = function getColgroupChildrenLength(table) {
-  var map = _tableMap.TableMap.get(table);
-  return map.width;
-};
-var gutterPadding = (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
-var TABLE_MAX_WIDTH = 1800;
-var COLUMN_MIN_WIDTH = 48;
 var isTableResizingEnabled = exports.isTableResizingEnabled = function isTableResizingEnabled(appearance) {
   return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) || (0, _appearance.isCommentAppearance)(appearance) && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
     exposure: true
@@ -133,6 +120,9 @@ var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnable
 var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
+/**
+ * TableContainer renders tables using only CSS-based rules
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Component) {
@@ -259,7 +249,12 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
   (0, _inherits2.default)(TableContainer, _React$Component);
   return (0, _createClass2.default)(TableContainer, [{
     key: "componentDidMount",
-    value: function componentDidMount() {
+    value:
+    /**
+     *
+     * @example
+     */
+    function componentDidMount() {
       this.resizeObserver = new ResizeObserver(this.applyResizerChange);
       if (this.wrapperRef.current) {
         this.resizeObserver.observe(this.wrapperRef.current);
@@ -278,6 +273,13 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapperRef.current);
       }
     }
+
+    /**
+     *
+     * @param prevProps
+     * @param prevState
+     * @example
+     */
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
@@ -304,12 +306,20 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     }
   }, {
     key: "pinTop",
-    get: function get() {
+    get:
+    /**
+     *
+     */
+    function get() {
       if (!this.tableRef.current || !this.stickyHeaderRef.current) {
         return;
       }
       return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + _styles.tableMarginTop - _sticky.tableStickyPadding;
     }
+
+    /**
+     *
+     */
   }, {
     key: "shouldAddOverflowParentOffsetTop_DO_NOT_USE",
     get: function get() {
@@ -319,6 +329,10 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       // THEN we should add the OverflowParent offset top (RETURN TRUE)
       return this.props.stickyHeaders && !!this.props.stickyHeaders.shouldAddDefaultScrollRootOffsetTop_DO_NOT_USE && !!this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE && this.overflowParent && this.overflowParent.id === this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE;
     }
+
+    /**
+     *
+     */
   }, {
     key: "stickyTop",
     get: function get() {
@@ -337,6 +351,11 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
           return undefined;
       }
     }
+
+    /**
+     *
+     * @example
+     */
   }, {
     key: "render",
     value: function render() {
@@ -351,92 +370,92 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
         isInsideOfTable = _this$props.isInsideOfTable,
         isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
+        allowTableAlignment = _this$props.allowTableAlignment,
         allowTableResizing = _this$props.allowTableResizing,
         isPresentational = _this$props.isPresentational;
       var stickyMode = this.state.stickyMode;
-      var getTableWidthAttribute = function getTableWidthAttribute() {
-        // this scenario occurs when there is a full width table within the full width renderer,
-        // in which case the parent container is already the correct size
-        if (rendererAppearance === 'full-width' && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) === TABLE_MAX_WIDTH) {
-          return "100%";
+      var lineLengthFixedWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
+      var updatedLayout;
+      var renderWidthCSS = rendererAppearance === 'full-page' ? "100cqw - ".concat(_style.FullPagePadding, "px * 2") : "100cqw";
+      var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
+        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;
+        } else {
+          // custom width, or width mapped to breakpoint
+          var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
+          return "min(".concat(tableContainerWidth, "px, ").concat(renderWidthCSS, ")");
         }
-        // this scenario occurs when there is a full width table nested within a component (expand, column layout). In these cases
-        // the table should inherit the width of its parent component
-        if (rendererAppearance === 'full-page' && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) === TABLE_MAX_WIDTH && layout === 'align-start') {
-          return "100%";
-        }
-        return "".concat(tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width, "px");
       };
-      var tableWidthAttribute = getTableWidthAttribute();
-      var children = _react.default.Children.toArray(this.props.children);
-      var tableMinWidth;
-      if (tableNode) {
-        tableMinWidth = getResizerMinWidth(tableNode);
+      var tableWidthCSS = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
+
+      // 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 isCommentAppearanceAndTableAlignmentEnabled = (0, _appearance.isCommentAppearance)(rendererAppearance) && allowTableAlignment;
+      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : 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 leftCSS;
+      if (shouldCalculateLeftForAlignment) {
+        leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
+      }
+      if (!shouldCalculateLeftForAlignment && (0, _appearance.isFullPageAppearance)(rendererAppearance)) {
+        // Note tableWidthCSS here is the renderer width
+        // When the screen is super wide we want table to break out.
+        // However if screen is smaller than 760px. We want table align to left.
+        leftCSS = "min(0px, ".concat(lineLengthCSS, " - ").concat(tableWidthCSS, ") / 2");
       }
+      var children = _react.default.Children.toArray(this.props.children);
 
       // Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
       // This check caters for those tables and helps with SSR logic
-      var isFullWidth = rendererAppearance === 'full-width' && layout !== 'full-width';
+      var isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
       if (isFullWidth) {
-        this.updatedLayout = 'full-width';
+        updatedLayout = 'full-width';
         // if table has width explicity set, ensure SSR is handled
       } else if (tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) {
-        this.updatedLayout = 'custom';
+        updatedLayout = 'custom';
       } else {
-        this.updatedLayout = layout;
+        updatedLayout = layout;
       }
+      var finalTableContainerWidth = allowTableResizing ? tableWidthNew : 'inherit';
 
-      // defined in colgroup.tsx:
-      // appearance == comment && allowTableResizing && means it is a comment
-      // appearance == comment && !allowTableResizing && means it is a inline comment
-      // for inline comments, the table should inherit the width of the parent component rather than maintain its own size
-      var isInsideInlineComment = rendererAppearance === 'comment' && !allowTableResizing;
-
-      // These styling removes extra padding for `comment` rendererAppearance.
-      // This is especially relevant for Jira which only uses `comment` appearance and does not need padding.
-      var resizerContainerPadding = rendererAppearance === 'comment' ? 0 : gutterPadding;
-      var resizerItemMaxWidth = rendererAppearance === 'comment' ? isInsideInlineComment ? 'inherit' : "min(100cqw, var(--ak-editor-table-max-width))" : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))";
-      var resizerItemWidth = rendererAppearance === 'comment' ? isInsideInlineComment ? 'inherit' : "min(100cqw, ".concat(tableWidthAttribute, ")") : "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(tableWidthAttribute, ")");
+      // 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') {
+        finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
+      }
+      if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
+        // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
+        // it is most likely a table created before "Support Table in Comments" FF was enabled
+        // and we would see a bug ED-24795. A table created before "Support Table in Comments",
+        // should inhirit the width of the renderer container.
 
-      // full width tables can have either left-aligned or centered layout despite looking centered in the renderer.
-      // in these cases, keep the alignment unset
-      var getTableAlignment = function getTableAlignment() {
-        return isFullWidth && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) === TABLE_MAX_WIDTH ? '' : tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
+        // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
+        // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
+        finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== _editorSharedStyles.akEditorDefaultLayoutWidth ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
+      }
+      if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
+        // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
+        // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
+        // instead of 760 that was set on tableNode when the table had been published.
+        finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
+      }
+      var style = {
+        width: finalTableContainerWidth,
+        left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
+        marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
       };
-      return /*#__PURE__*/_react.default.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        className: "table-alignment-container"
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        ,
-        style: {
-          display: 'flex',
-          justifyContent: getTableAlignment()
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        className: "pm-table-resizer-container"
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        ,
-        style: {
-          width: isInsideInlineComment ? '100%' : "min(calc(100cqw - ".concat(resizerContainerPadding, "px), ").concat(tableWidthAttribute, ")")
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        className: "resizer-item display-handle",
-        style: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-          position: 'relative',
-          userSelect: 'auto',
-          boxSizing: 'border-box'
-        }, '--ak-editor-table-gutter-padding', "".concat(gutterPadding, "px")), '--ak-editor-table-max-width', "".concat(TABLE_MAX_WIDTH, "px")), '--ak-editor-table-min-width', "".concat(tableMinWidth, "px")), "minWidth", 'var(--ak-editor-table-min-width)'), "maxWidth", resizerItemMaxWidth), "width", resizerItemWidth)
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "resizer-hover-zone"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
-        "data-layout": this.updatedLayout,
+        "data-layout": updatedLayout,
         "data-testid": "table-container",
-        ref: this.props.handleRef
+        ref: this.props.handleRef,
+        style: style
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -444,8 +463,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         "data-testid": "sticky-scrollbar-sentinel-top"
       }), stickyHeaders && tableNode && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: 0,
         tableWidth: "inherit",
+        renderWidth: 0,
         layout: layout,
         handleRef: this.props.handleRef,
         shadowClassNames: this.props.shadowClassNames,
@@ -457,7 +476,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         rowHeight: this.state.headerRowHeight,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
-        allowTableResizing: allowTableResizing
+        allowTableResizing: allowTableResizing,
+        fixTableSSRResizing: true
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
@@ -473,8 +493,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         innerRef: this.tableRef,
         columnWidths: columnWidths,
         layout: layout,
-        isNumberColumnEnabled: isNumberColumnEnabled,
         renderWidth: 0,
+        isNumberColumnEnabled: isNumberColumnEnabled,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         isInsideOfBlockNode: isInsideOfBlockNode,
@@ -508,10 +528,13 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
-      }))))));
+      })));
     }
   }]);
 }(_react.default.Component);
+/**
+ *
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var TableProcessorWithContainerStyles = exports.TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Component2) {
@@ -562,7 +585,12 @@ var TableProcessorWithContainerStyles = exports.TableProcessorWithContainerStyle
   (0, _inherits2.default)(TableProcessorWithContainerStyles, _React$Component2);
   return (0, _createClass2.default)(TableProcessorWithContainerStyles, [{
     key: "render",
-    value: function render() {
+    value:
+    /**
+     *
+     * @example
+     */
+    function render() {
       var children = this.props.children;
       if (!children) {
         return null;

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

@@ -63,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "118.0.0";
+var packageVersion = "118.1.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -472,15 +472,9 @@ var getRendererComponent = function getRendererComponent(nodeComponents) {
   // and use context instead because at this time we cannot guarantee that existing
   // consumers of Atlaskit Renderer will update to use the new portal context.
   if (!Boolean(nodeComponents) && (0, _platformFeatureFlags.fg)('cc_complexit_reduce_portal_rerenders')) {
-    if ((0, _platformFeatureFlags.fg)('cc_perf_reduce_rerenders')) {
-      return RendererFunctionalComponentWithPortalContextMemoized;
-    }
-    return RendererFunctionalComponentWithPortalContext;
-  }
-  if ((0, _platformFeatureFlags.fg)('cc_perf_reduce_rerenders')) {
-    return RendererFunctionalComponentMemoized;
+    return RendererFunctionalComponentWithPortalContextMemoized;
   }
-  return RendererFunctionalComponent;
+  return RendererFunctionalComponentMemoized;
 };
 
 /**