@atlaskit/renderer 130.5.0 → 130.5.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 130.5.1
+
+### Patch Changes
+
+- [`3a69722c61c6a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a69722c61c6a) -
+  Add rounded corners to table node in editor. This works by hiding the actual table border and
+  adding a pseudo element with rounded corners.
+- Updated dependencies
+
 ## 130.5.0
 
 ### Minor Changes

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

@@ -17,6 +17,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _consts = require("../../consts");
 var _reactIntl = require("react-intl");
 var _messages = require("../../messages");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var IgnoreSorting = ['LABEL', 'INPUT'];
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -44,16 +45,26 @@ var getSortOrderLabel = function getSortOrderLabel(intl, currentSortOrder) {
       return intl.formatMessage(noneSortingLabel);
   }
 };
-
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var getDataAttributes = function getDataAttributes(colwidth, background) {
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+var getDataAttributes = function getDataAttributes(colwidth, background, cellEdgeProps) {
   var attrs = {};
   if (colwidth) {
     attrs['data-colwidth'] = colwidth.join(',');
   }
+  if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+    if (cellEdgeProps !== null && cellEdgeProps !== void 0 && cellEdgeProps.reachesTop) {
+      attrs['data-reaches-top'] = true;
+    }
+    if (cellEdgeProps !== null && cellEdgeProps !== void 0 && cellEdgeProps.reachesBottom) {
+      attrs['data-reaches-bottom'] = true;
+    }
+    if (cellEdgeProps !== null && cellEdgeProps !== void 0 && cellEdgeProps.reachesLeft) {
+      attrs['data-reaches-left'] = true;
+    }
+    if (cellEdgeProps !== null && cellEdgeProps !== void 0 && cellEdgeProps.reachesRight) {
+      attrs['data-reaches-right'] = true;
+    }
+  }
+
   /**
    * Storing hex code in data-cell-background because
    *  we want to have DST token (css variable) or
@@ -147,7 +158,11 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
       colspan = props.colspan,
       background = props.background,
       offsetTop = props.offsetTop,
-      ariaSort = props.ariaSort;
+      ariaSort = props.ariaSort,
+      reachesTop = props.reachesTop,
+      reachesBottom = props.reachesBottom,
+      reachesLeft = props.reachesLeft,
+      reachesRight = props.reachesRight;
 
     // This is used to set the background color of the cell
     // to a dark mode color in mobile dark mode
@@ -174,7 +189,12 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
       className: className
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-    }, getDataAttributes(colwidth, background), {
+    }, getDataAttributes(colwidth, background, {
+      reachesTop: reachesTop,
+      reachesBottom: reachesBottom,
+      reachesLeft: reachesLeft,
+      reachesRight: reachesRight
+    }), {
       "aria-sort": ariaSort
     }), children);
   };

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

@@ -325,6 +325,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     key: "componentDidMount",
     value:
     /**
+     * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount.
      *
      * @example
      */
@@ -349,6 +350,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     }
 
     /**
+     * Updates sticky header wiring and scroll synchronization after prop or state changes.
      *
      * @param prevProps
      * @param prevState
@@ -382,7 +384,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     key: "pinTop",
     get:
     /**
-     *
+     * Calculates the top offset used when the sticky header is pinned to the table bottom.
      */
     function get() {
       if (!this.tableRef.current || !this.stickyHeaderRef.current) {
@@ -392,7 +394,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     }
 
     /**
-     *
+     * Determines whether sticky header positioning should include the default scroll root offset.
      */
   }, {
     key: "shouldAddOverflowParentOffsetTop_DO_NOT_USE",
@@ -405,7 +407,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     }
 
     /**
-     *
+     * Resolves the top position for the sticky header based on the current sticky mode.
      */
   }, {
     key: "stickyTop",
@@ -427,6 +429,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     }
 
     /**
+     * Renders the table container, sticky header, table content, sticky scrollbar, and synced block borders.
      *
      * @example
      */
@@ -617,14 +620,91 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     }
   }]);
 }(_react.default.Component);
+var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNode) {
+  var cellEdgePropsByCellOffset = new Map();
+  var cellRightByCellOffset = new Map();
+  var occupiedGrid = [];
+  var tableWidth = 0;
+  var cellOffset = 0;
+  tableNode.forEach(function (rowNode, _rowOffset, rowIndex) {
+    var _occupiedGrid$rowInde;
+    occupiedGrid[rowIndex] = (_occupiedGrid$rowInde = occupiedGrid[rowIndex]) !== null && _occupiedGrid$rowInde !== void 0 ? _occupiedGrid$rowInde : [];
+    var columnIndex = 0;
+    cellOffset += 1;
+    rowNode.forEach(function (cellNode) {
+      while (occupiedGrid[rowIndex][columnIndex]) {
+        columnIndex += 1;
+      }
+      var colspan = cellNode.attrs.colspan || 1;
+      var rowspan = cellNode.attrs.rowspan || 1;
+      var cellLeft = columnIndex;
+      var cellRight = cellLeft + colspan;
+      var cellTop = rowIndex;
+      var cellBottom = cellTop + rowspan;
+      for (var row = cellTop; row < cellBottom; row += 1) {
+        var _occupiedGrid$row;
+        occupiedGrid[row] = (_occupiedGrid$row = occupiedGrid[row]) !== null && _occupiedGrid$row !== void 0 ? _occupiedGrid$row : [];
+        for (var column = cellLeft; column < cellRight; column += 1) {
+          occupiedGrid[row][column] = true;
+        }
+      }
+      tableWidth = Math.max(tableWidth, cellRight);
+      cellRightByCellOffset.set(cellOffset, cellRight);
+      cellEdgePropsByCellOffset.set(cellOffset, {
+        reachesBottom: cellBottom >= tableNode.childCount,
+        reachesLeft: cellLeft === 0,
+        reachesRight: false,
+        reachesTop: cellTop === 0
+      });
+      columnIndex = cellRight;
+      cellOffset += cellNode.nodeSize;
+    });
+    cellOffset += 1;
+  });
+  cellRightByCellOffset.forEach(function (cellRight, currentCellOffset) {
+    var edgeProps = cellEdgePropsByCellOffset.get(currentCellOffset);
+    if (edgeProps) {
+      edgeProps.reachesRight = cellRight >= tableWidth;
+    }
+  });
+  return cellEdgePropsByCellOffset;
+};
+var addTableCellEdgeProps = function addTableCellEdgeProps(rows, tableNode) {
+  try {
+    if (!tableNode) {
+      return rows;
+    }
+    var cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode);
+    var cellOffset = 0;
+    return _react.default.Children.map(rows, function (row, rowIndex) {
+      var rowNode = tableNode.child(rowIndex);
+      cellOffset += 1;
+      var cellIndex = 0;
+      var rowChildren = _react.default.Children.map(row.props.children, function (child) {
+        if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+          return child;
+        }
+        var cellNode = rowNode.child(cellIndex);
+        var edgeProps = cellEdgePropsByCellOffset.get(cellOffset);
+        cellIndex += 1;
+        cellOffset += cellNode.nodeSize;
+        return edgeProps ? /*#__PURE__*/_react.default.cloneElement(child, edgeProps) : child;
+      });
+      cellOffset += 1;
+      return /*#__PURE__*/_react.default.cloneElement(row, undefined, rowChildren);
+    });
+  } catch (_unused) {
+    // Renderer can receive malformed historical ADF. If the table shape cannot
+    // be described safely, keep rendering without rounded edge metadata.
+    return rows;
+  }
+};
+
 /**
- *
+ * Processes table children before passing them to the styled table container.
  */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
-/**
- *
- */
 var TableProcessorWithContainerStyles = exports.TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Component2) {
   function TableProcessorWithContainerStyles() {
     var _this2;
@@ -675,22 +755,63 @@ var TableProcessorWithContainerStyles = exports.TableProcessorWithContainerStyle
     key: "render",
     value:
     /**
+     * Renders processed table children inside the table container.
      *
      * @example
      */
     function render() {
-      var children = this.props.children;
+      var _this$props2 = this.props,
+        allowColumnSorting = _this$props2.allowColumnSorting,
+        allowFixedColumnWidthOption = _this$props2.allowFixedColumnWidthOption,
+        allowTableAlignment = _this$props2.allowTableAlignment,
+        allowTableResizing = _this$props2.allowTableResizing,
+        children = _this$props2.children,
+        columnWidths = _this$props2.columnWidths,
+        disableTableOverflowShadow = _this$props2.disableTableOverflowShadow,
+        handleRef = _this$props2.handleRef,
+        isinsideMultiBodiedExtension = _this$props2.isinsideMultiBodiedExtension,
+        isInsideOfBlockNode = _this$props2.isInsideOfBlockNode,
+        isInsideOfTable = _this$props2.isInsideOfTable,
+        isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
+        isPresentational = _this$props2.isPresentational,
+        layout = _this$props2.layout,
+        rendererAppearance = _this$props2.rendererAppearance,
+        renderWidth = _this$props2.renderWidth,
+        shadowClassNames = _this$props2.shadowClassNames,
+        smartCardStorage = _this$props2.smartCardStorage,
+        stickyHeaders = _this$props2.stickyHeaders,
+        tabIndex = _this$props2.tabIndex,
+        tableNode = _this$props2.tableNode;
       if (!children) {
         return null;
       }
       var childrenArray = _react.default.Children.toArray(children);
+      var childrenWithTableEdgeProps = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgeProps(childrenArray, tableNode) : childrenArray;
       var orderedChildren = (0, _utils.compose)(this.addNumberColumnIndexes, this.addSortableColumn
       // @ts-expect-error TS2345: Argument of type '(ReactChild | ReactFragment | ReactPortal)[]' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>[]'
-      )(childrenArray);
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/_react.default.createElement(TableContainer, this.props, orderedChildren);
+      )(childrenWithTableEdgeProps);
+      return /*#__PURE__*/_react.default.createElement(TableContainer, {
+        allowColumnSorting: allowColumnSorting,
+        allowFixedColumnWidthOption: allowFixedColumnWidthOption,
+        allowTableAlignment: allowTableAlignment,
+        allowTableResizing: allowTableResizing,
+        columnWidths: columnWidths,
+        disableTableOverflowShadow: disableTableOverflowShadow,
+        handleRef: handleRef,
+        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+        isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfTable: isInsideOfTable,
+        isNumberColumnEnabled: isNumberColumnEnabled,
+        isPresentational: isPresentational,
+        layout: layout,
+        rendererAppearance: rendererAppearance,
+        renderWidth: renderWidth,
+        shadowClassNames: shadowClassNames,
+        smartCardStorage: smartCardStorage,
+        stickyHeaders: stickyHeaders,
+        tabIndex: tabIndex,
+        tableNode: tableNode
+      }, orderedChildren);
     }
   }]);
 }(_react.default.Component);

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

@@ -147,7 +147,10 @@ var headingAnchorStylesDuplicateAnchor = (0, _react.css)({
     '> button': {
       opacity: 0,
       transform: 'translate(-8px, 0px)',
-      transition: 'opacity 0.2s ease 0s, transform 0.2s ease 0s'
+      transitionProperty: 'opacity, transform',
+      transitionDuration: "var(--ds-duration-medium, 0.2s)".concat(", ", "var(--ds-duration-medium, 0.2s)"),
+      transitionTimingFunction: "var(--ds-easing-out-practical, ease)".concat(", ", "var(--ds-easing-out-practical, ease)"),
+      transitionDelay: '0s, 0s'
     }
   }), '&:hover', (0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName, " > button"), {
     opacity: 1,
@@ -1505,6 +1508,43 @@ var tableSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _define
     }))
   }
 }));
+var roundedTableOuterBorderOverlayStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  borderColor: 'transparent',
+  position: 'relative',
+  '&::after': {
+    content: "''",
+    position: 'absolute',
+    inset: 0,
+    border: "".concat(_styles.tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)"),
+    borderRadius: "var(--ds-radius-medium, 6px)",
+    pointerEvents: 'none',
+    zIndex: 1
+  },
+  '> tbody > tr:first-of-type > th, > tbody > tr:first-of-type > td, > tbody > tr > th[data-reaches-top], > tbody > tr > td[data-reaches-top]': {
+    borderTopColor: 'transparent'
+  },
+  '> tbody > tr > th:first-child, > tbody > tr > td:first-child, > tbody > tr > th[data-reaches-left], > tbody > tr > td[data-reaches-left]': {
+    borderLeftColor: 'transparent'
+  },
+  '> tbody > tr > th[data-reaches-right], > tbody > tr > td[data-reaches-right]': {
+    borderRightColor: 'transparent'
+  },
+  '> tbody > tr > th[data-reaches-bottom], > tbody > tr > td[data-reaches-bottom]': {
+    borderBottomColor: 'transparent'
+  },
+  '> tbody > tr > th[data-reaches-top][data-reaches-left], > tbody > tr > td[data-reaches-top][data-reaches-left]': {
+    borderTopLeftRadius: "var(--ds-radius-medium, 6px)"
+  },
+  '> tbody > tr > th[data-reaches-top][data-reaches-right], > tbody > tr > td[data-reaches-top][data-reaches-right]': {
+    borderTopRightRadius: "var(--ds-radius-medium, 6px)"
+  },
+  '> tbody > tr > th[data-reaches-bottom][data-reaches-left], > tbody > tr > td[data-reaches-bottom][data-reaches-left]': {
+    borderBottomLeftRadius: "var(--ds-radius-medium, 6px)"
+  },
+  '> tbody > tr > th[data-reaches-bottom][data-reaches-right], > tbody > tr > td[data-reaches-bottom][data-reaches-right]': {
+    borderBottomRightRadius: "var(--ds-radius-medium, 6px)"
+  }
+}));
 var tableContentModeStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ":has(table[data-initial-width-mode=\"content\"])"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   width: 'max-content !important',
@@ -2110,6 +2150,9 @@ var tableFakeBorderStyles = (0, _react.css)((0, _defineProperty2.default)((0, _d
   borderLeftColor: 'transparent',
   borderRightColor: 'transparent'
 }));
+var roundedTableFakeBorderOverlayStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t.").concat(_styles.TableSharedCssClassName.TABLE_LEFT_BORDER), {
+  display: 'none'
+})));
 var syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.error, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
   borderRadius: "var(--ds-radius-small, 3px)",
   marginTop: "var(--ds-space-075, 6px)",
@@ -2177,7 +2220,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // this should be placed after baseOtherStyles
     (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
     // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? (0, _expValEquals.expValEquals)('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && isInsideSyncBlock && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') && tableFakeBorderStyles, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? (0, _expValEquals.expValEquals)('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && isInsideSyncBlock && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') && tableFakeBorderStyles, isInsideSyncBlock && (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') ? (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "130.4.2";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -10,6 +10,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { RendererCssClassName } from '../../consts';
 import { useIntl } from 'react-intl';
 import { tableCellMessages } from '../../messages';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const IgnoreSorting = ['LABEL', 'INPUT'];
 const nextStatusOrder = currentSortOrder => {
   switch (currentSortOrder) {
@@ -39,16 +40,26 @@ const getSortOrderLabel = (intl, currentSortOrder) => {
       return intl.formatMessage(noneSortingLabel);
   }
 };
-
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getDataAttributes = (colwidth, background) => {
-  // Ignored via go/ees005
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getDataAttributes = (colwidth, background, cellEdgeProps) => {
   const attrs = {};
   if (colwidth) {
     attrs['data-colwidth'] = colwidth.join(',');
   }
+  if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+    if (cellEdgeProps !== null && cellEdgeProps !== void 0 && cellEdgeProps.reachesTop) {
+      attrs['data-reaches-top'] = true;
+    }
+    if (cellEdgeProps !== null && cellEdgeProps !== void 0 && cellEdgeProps.reachesBottom) {
+      attrs['data-reaches-bottom'] = true;
+    }
+    if (cellEdgeProps !== null && cellEdgeProps !== void 0 && cellEdgeProps.reachesLeft) {
+      attrs['data-reaches-left'] = true;
+    }
+    if (cellEdgeProps !== null && cellEdgeProps !== void 0 && cellEdgeProps.reachesRight) {
+      attrs['data-reaches-right'] = true;
+    }
+  }
+
   /**
    * Storing hex code in data-cell-background because
    *  we want to have DST token (css variable) or
@@ -145,7 +156,11 @@ const getWithCellProps = WrapperComponent => {
       colspan,
       background,
       offsetTop,
-      ariaSort
+      ariaSort,
+      reachesTop,
+      reachesBottom,
+      reachesLeft,
+      reachesRight
     } = props;
 
     // This is used to set the background color of the cell
@@ -173,7 +188,12 @@ const getWithCellProps = WrapperComponent => {
       className: className
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-    }, getDataAttributes(colwidth, background), {
+    }, getDataAttributes(colwidth, background, {
+      reachesTop,
+      reachesBottom,
+      reachesLeft,
+      reachesRight
+    }), {
       "aria-sort": ariaSort
     }), children);
   };

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

@@ -278,6 +278,7 @@ export class TableContainer extends React.Component {
     });
   }
   /**
+   * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount.
    *
    * @example
    */
@@ -302,6 +303,7 @@ export class TableContainer extends React.Component {
   }
 
   /**
+   * Updates sticky header wiring and scroll synchronization after prop or state changes.
    *
    * @param prevProps
    * @param prevState
@@ -330,7 +332,7 @@ export class TableContainer extends React.Component {
     }
   }
   /**
-   *
+   * Calculates the top offset used when the sticky header is pinned to the table bottom.
    */
   get pinTop() {
     if (!this.tableRef.current || !this.stickyHeaderRef.current) {
@@ -340,7 +342,7 @@ export class TableContainer extends React.Component {
   }
 
   /**
-   *
+   * Determines whether sticky header positioning should include the default scroll root offset.
    */
   get shouldAddOverflowParentOffsetTop_DO_NOT_USE() {
     // IF the StickyHeaderConfig specifies that the default scroll root offsetTop should be added
@@ -351,7 +353,7 @@ export class TableContainer extends React.Component {
   }
 
   /**
-   *
+   * Resolves the top position for the sticky header based on the current sticky mode.
    */
   get stickyTop() {
     switch (this.state.stickyMode) {
@@ -371,6 +373,7 @@ export class TableContainer extends React.Component {
   }
 
   /**
+   * Renders the table container, sticky header, table content, sticky scrollbar, and synced block borders.
    *
    * @example
    */
@@ -565,14 +568,91 @@ export class TableContainer extends React.Component {
     })));
   }
 }
+const getCellEdgePropsByCellOffset = tableNode => {
+  const cellEdgePropsByCellOffset = new Map();
+  const cellRightByCellOffset = new Map();
+  const occupiedGrid = [];
+  let tableWidth = 0;
+  let cellOffset = 0;
+  tableNode.forEach((rowNode, _rowOffset, rowIndex) => {
+    var _occupiedGrid$rowInde;
+    occupiedGrid[rowIndex] = (_occupiedGrid$rowInde = occupiedGrid[rowIndex]) !== null && _occupiedGrid$rowInde !== void 0 ? _occupiedGrid$rowInde : [];
+    let columnIndex = 0;
+    cellOffset += 1;
+    rowNode.forEach(cellNode => {
+      while (occupiedGrid[rowIndex][columnIndex]) {
+        columnIndex += 1;
+      }
+      const colspan = cellNode.attrs.colspan || 1;
+      const rowspan = cellNode.attrs.rowspan || 1;
+      const cellLeft = columnIndex;
+      const cellRight = cellLeft + colspan;
+      const cellTop = rowIndex;
+      const cellBottom = cellTop + rowspan;
+      for (let row = cellTop; row < cellBottom; row += 1) {
+        var _occupiedGrid$row;
+        occupiedGrid[row] = (_occupiedGrid$row = occupiedGrid[row]) !== null && _occupiedGrid$row !== void 0 ? _occupiedGrid$row : [];
+        for (let column = cellLeft; column < cellRight; column += 1) {
+          occupiedGrid[row][column] = true;
+        }
+      }
+      tableWidth = Math.max(tableWidth, cellRight);
+      cellRightByCellOffset.set(cellOffset, cellRight);
+      cellEdgePropsByCellOffset.set(cellOffset, {
+        reachesBottom: cellBottom >= tableNode.childCount,
+        reachesLeft: cellLeft === 0,
+        reachesRight: false,
+        reachesTop: cellTop === 0
+      });
+      columnIndex = cellRight;
+      cellOffset += cellNode.nodeSize;
+    });
+    cellOffset += 1;
+  });
+  cellRightByCellOffset.forEach((cellRight, currentCellOffset) => {
+    const edgeProps = cellEdgePropsByCellOffset.get(currentCellOffset);
+    if (edgeProps) {
+      edgeProps.reachesRight = cellRight >= tableWidth;
+    }
+  });
+  return cellEdgePropsByCellOffset;
+};
+const addTableCellEdgeProps = (rows, tableNode) => {
+  try {
+    if (!tableNode) {
+      return rows;
+    }
+    const cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode);
+    let cellOffset = 0;
+    return React.Children.map(rows, (row, rowIndex) => {
+      const rowNode = tableNode.child(rowIndex);
+      cellOffset += 1;
+      let cellIndex = 0;
+      const rowChildren = React.Children.map(row.props.children, child => {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
+          return child;
+        }
+        const cellNode = rowNode.child(cellIndex);
+        const edgeProps = cellEdgePropsByCellOffset.get(cellOffset);
+        cellIndex += 1;
+        cellOffset += cellNode.nodeSize;
+        return edgeProps ? /*#__PURE__*/React.cloneElement(child, edgeProps) : child;
+      });
+      cellOffset += 1;
+      return /*#__PURE__*/React.cloneElement(row, undefined, rowChildren);
+    });
+  } catch {
+    // Renderer can receive malformed historical ADF. If the table shape cannot
+    // be described safely, keep rendering without rounded edge metadata.
+    return rows;
+  }
+};
+
 /**
- *
+ * Processes table children before passing them to the styled table container.
  */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
-/**
- *
- */
 export class TableProcessorWithContainerStyles extends React.Component {
   constructor(...args) {
     super(...args);
@@ -618,23 +698,63 @@ export class TableProcessorWithContainerStyles extends React.Component {
     });
   }
   /**
+   * Renders processed table children inside the table container.
    *
    * @example
    */
   render() {
     const {
-      children
+      allowColumnSorting,
+      allowFixedColumnWidthOption,
+      allowTableAlignment,
+      allowTableResizing,
+      children,
+      columnWidths,
+      disableTableOverflowShadow,
+      handleRef,
+      isinsideMultiBodiedExtension,
+      isInsideOfBlockNode,
+      isInsideOfTable,
+      isNumberColumnEnabled,
+      isPresentational,
+      layout,
+      rendererAppearance,
+      renderWidth,
+      shadowClassNames,
+      smartCardStorage,
+      stickyHeaders,
+      tabIndex,
+      tableNode
     } = this.props;
     if (!children) {
       return null;
     }
     const childrenArray = React.Children.toArray(children);
+    const childrenWithTableEdgeProps = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgeProps(childrenArray, tableNode) : childrenArray;
     const orderedChildren = compose(this.addNumberColumnIndexes, this.addSortableColumn
     // @ts-expect-error TS2345: Argument of type '(ReactChild | ReactFragment | ReactPortal)[]' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>[]'
-    )(childrenArray);
-
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return /*#__PURE__*/React.createElement(TableContainer, this.props, orderedChildren);
+    )(childrenWithTableEdgeProps);
+    return /*#__PURE__*/React.createElement(TableContainer, {
+      allowColumnSorting: allowColumnSorting,
+      allowFixedColumnWidthOption: allowFixedColumnWidthOption,
+      allowTableAlignment: allowTableAlignment,
+      allowTableResizing: allowTableResizing,
+      columnWidths: columnWidths,
+      disableTableOverflowShadow: disableTableOverflowShadow,
+      handleRef: handleRef,
+      isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+      isInsideOfBlockNode: isInsideOfBlockNode,
+      isInsideOfTable: isInsideOfTable,
+      isNumberColumnEnabled: isNumberColumnEnabled,
+      isPresentational: isPresentational,
+      layout: layout,
+      rendererAppearance: rendererAppearance,
+      renderWidth: renderWidth,
+      shadowClassNames: shadowClassNames,
+      smartCardStorage: smartCardStorage,
+      stickyHeaders: stickyHeaders,
+      tabIndex: tabIndex,
+      tableNode: tableNode
+    }, orderedChildren);
   }
 }