@atlaskit/renderer 130.4.2 → 130.5.1

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);
   }
 }

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

@@ -182,7 +182,10 @@ const headingAnchorStylesDuplicateAnchor = 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)"}, ${"var(--ds-duration-medium, 0.2s)"}`,
+          transitionTimingFunction: `${"var(--ds-easing-out-practical, ease)"}, ${"var(--ds-easing-out-practical, ease)"}`,
+          transitionDelay: '0s, 0s'
         }
       },
       '&:hover': {
@@ -1883,6 +1886,47 @@ const tableSharedStyle = css({
     }
   }
 });
+const roundedTableOuterBorderOverlayStyles = css({
+  [`.${TableSharedCssClassName.TABLE_CONTAINER} > table,
+	.${TableSharedCssClassName.TABLE_NODE_WRAPPER} > table,
+	.${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
+    borderColor: 'transparent',
+    position: 'relative',
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      inset: 0,
+      border: `${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)"
+    }
+  }
+});
 const tableContentModeStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   [`.${RendererCssClassName.DOCUMENT} .${TableSharedCssClassName.TABLE_CONTAINER}:has(table[data-initial-width-mode="content"])`]: {
@@ -2690,6 +2734,14 @@ const tableFakeBorderStyles = css({
     borderRightColor: 'transparent'
   }
 });
+const roundedTableFakeBorderOverlayStyles = css({
+  [`.${TableSharedCssClassName.TABLE_CONTAINER}`]: {
+    [`.${TableSharedCssClassName.TABLE_RIGHT_BORDER},
+		.${TableSharedCssClassName.TABLE_LEFT_BORDER}`]: {
+      display: 'none'
+    }
+  }
+});
 const syncBlockStyles = css({
   [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
     borderRadius: "var(--ds-radius-small, 3px)",
@@ -2767,7 +2819,7 @@ export const RendererStyleContainer = props => {
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (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
-    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (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' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? expValEquals('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock && fg('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_9') && tableFakeBorderStyles, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
+    fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (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' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? expValEquals('platform_editor_emojis_in_renderer_smart_links', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStylesNew : scaledEmojiStylesNew : isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, centerWrapperStyles, editorExperiment('platform_synced_block', true) && isInsideSyncBlock && fg('platform_synced_block_patch_9') ? syncBlockRendererStyles : null, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_9') && tableFakeBorderStyles, isInsideSyncBlock && editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_9') ? expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId
   }, children);
 };

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

@@ -57,7 +57,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "130.4.1";
+const packageVersion = "0.0.0-development";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/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';
 var IgnoreSorting = ['LABEL', 'INPUT'];
 var nextStatusOrder = function nextStatusOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -37,16 +38,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 (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
@@ -140,7 +151,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
@@ -167,7 +182,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/esm/react/nodes/tableNew.js

@@ -319,6 +319,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value:
     /**
+     * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount.
      *
      * @example
      */
@@ -343,6 +344,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
 
     /**
+     * Updates sticky header wiring and scroll synchronization after prop or state changes.
      *
      * @param prevProps
      * @param prevState
@@ -376,7 +378,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     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) {
@@ -386,7 +388,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
 
     /**
-     *
+     * Determines whether sticky header positioning should include the default scroll root offset.
      */
   }, {
     key: "shouldAddOverflowParentOffsetTop_DO_NOT_USE",
@@ -399,7 +401,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
 
     /**
-     *
+     * Resolves the top position for the sticky header based on the current sticky mode.
      */
   }, {
     key: "stickyTop",
@@ -421,6 +423,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
 
     /**
+     * Renders the table container, sticky header, table content, sticky scrollbar, and synced block borders.
      *
      * @example
      */
@@ -611,14 +614,91 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 }(React.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.Children.map(rows, function (row, rowIndex) {
+      var rowNode = tableNode.child(rowIndex);
+      cellOffset += 1;
+      var cellIndex = 0;
+      var rowChildren = React.Children.map(row.props.children, function (child) {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
+          return child;
+        }
+        var cellNode = rowNode.child(cellIndex);
+        var 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 (_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
-/**
- *
- */
 export var TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Component2) {
   function TableProcessorWithContainerStyles() {
     var _this2;
@@ -669,22 +749,63 @@ export var TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Com
     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.Children.toArray(children);
+      var childrenWithTableEdgeProps = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgeProps(childrenArray, tableNode) : childrenArray;
       var 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);
     }
   }]);
 }(React.Component);