@atlaskit/renderer 130.5.0 → 130.5.1

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.2";
+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);

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

@@ -140,7 +140,10 @@ var 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)".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', _defineProperty({}, ".".concat(HeadingAnchorWrapperClassName, " > button"), {
     opacity: 1,
@@ -1498,6 +1501,43 @@ var tableSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defi
     }))
   }
 }));
+var roundedTableOuterBorderOverlayStyles = css(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  borderColor: 'transparent',
+  position: 'relative',
+  '&::after': {
+    content: "''",
+    position: 'absolute',
+    inset: 0,
+    border: "".concat(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 = css(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(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',
@@ -2103,6 +2143,9 @@ var tableFakeBorderStyles = css(_defineProperty(_defineProperty({}, ".".concat(T
   borderLeftColor: 'transparent',
   borderRightColor: 'transparent'
 }));
+var roundedTableFakeBorderOverlayStyles = css(_defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_CONTAINER), _defineProperty({}, ".".concat(TableSharedCssClassName.TABLE_RIGHT_BORDER, ",\n\t\t.").concat(TableSharedCssClassName.TABLE_LEFT_BORDER), {
+  display: 'none'
+})));
 var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.renderer, ", .").concat(BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(SyncBlockSharedCssClassName.error, ", .").concat(SyncBlockSharedCssClassName.loading), {
   borderRadius: "var(--ds-radius-small, 3px)",
   marginTop: "var(--ds-space-075, 6px)",
@@ -2170,7 +2213,7 @@ export var RendererStyleContainer = function 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/esm/ui/Renderer/index.js

@@ -62,7 +62,7 @@ export var 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 = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/react/nodes/tableCell.d.ts

@@ -2,7 +2,13 @@ import React from 'react';
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import type { AnalyticsEventPayload } from '../../analytics/events';
-type CellProps = CellAttributes & {
+export type TableCellEdgeProps = {
+    reachesBottom?: boolean;
+    reachesLeft?: boolean;
+    reachesRight?: boolean;
+    reachesTop?: boolean;
+};
+type CellProps = CellAttributes & TableCellEdgeProps & {
     ariaSort?: string;
     children?: React.ReactNode;
     className?: string;

package/dist/types/react/nodes/tableNew.d.ts

@@ -70,11 +70,13 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     private resizeObserver;
     private applyResizerChange;
     /**
+     * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount.
      *
      * @example
      */
     componentDidMount(): void;
     /**
+     * Updates sticky header wiring and scroll synchronization after prop or state changes.
      *
      * @param prevProps
      * @param prevState
@@ -87,18 +89,19 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     onScroll: () => void;
     onWrapperScrolled: () => void;
     /**
-     *
+     * Calculates the top offset used when the sticky header is pinned to the table bottom.
      */
     get pinTop(): number | undefined;
     /**
-     *
+     * Determines whether sticky header positioning should include the default scroll root offset.
      */
     get shouldAddOverflowParentOffsetTop_DO_NOT_USE(): boolean | null | undefined;
     /**
-     *
+     * Resolves the top position for the sticky header based on the current sticky mode.
      */
     get stickyTop(): number | undefined;
     /**
+     * Renders the table container, sticky header, table content, sticky scrollbar, and synced block borders.
      *
      * @example
      */
@@ -109,16 +112,14 @@ type TableProcessorState = {
     tableOrderStatus?: TableOrderStatus;
 };
 /**
- *
- */
-/**
- *
+ * Processes table children before passing them to the styled table container.
  */
 export declare class TableProcessorWithContainerStyles extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableProcessorState> {
     state: {
         tableOrderStatus: undefined;
     };
     /**
+     * Renders processed table children inside the table container.
      *
      * @example
      */

package/dist/types-ts4.5/react/nodes/tableCell.d.ts

@@ -2,7 +2,13 @@ import React from 'react';
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import type { AnalyticsEventPayload } from '../../analytics/events';
-type CellProps = CellAttributes & {
+export type TableCellEdgeProps = {
+    reachesBottom?: boolean;
+    reachesLeft?: boolean;
+    reachesRight?: boolean;
+    reachesTop?: boolean;
+};
+type CellProps = CellAttributes & TableCellEdgeProps & {
     ariaSort?: string;
     children?: React.ReactNode;
     className?: string;

package/dist/types-ts4.5/react/nodes/tableNew.d.ts

@@ -70,11 +70,13 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     private resizeObserver;
     private applyResizerChange;
     /**
+     * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount.
      *
      * @example
      */
     componentDidMount(): void;
     /**
+     * Updates sticky header wiring and scroll synchronization after prop or state changes.
      *
      * @param prevProps
      * @param prevState
@@ -87,18 +89,19 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     onScroll: () => void;
     onWrapperScrolled: () => void;
     /**
-     *
+     * Calculates the top offset used when the sticky header is pinned to the table bottom.
      */
     get pinTop(): number | undefined;
     /**
-     *
+     * Determines whether sticky header positioning should include the default scroll root offset.
      */
     get shouldAddOverflowParentOffsetTop_DO_NOT_USE(): boolean | null | undefined;
     /**
-     *
+     * Resolves the top position for the sticky header based on the current sticky mode.
      */
     get stickyTop(): number | undefined;
     /**
+     * Renders the table container, sticky header, table content, sticky scrollbar, and synced block borders.
      *
      * @example
      */
@@ -109,16 +112,14 @@ type TableProcessorState = {
     tableOrderStatus?: TableOrderStatus;
 };
 /**
- *
- */
-/**
- *
+ * Processes table children before passing them to the styled table container.
  */
 export declare class TableProcessorWithContainerStyles extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableProcessorState> {
     state: {
         tableOrderStatus: undefined;
     };
     /**
+     * Renders processed table children inside the table container.
      *
      * @example
      */