@atlaskit/editor-plugin-table 22.4.2 → 22.4.4

package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js

@@ -2,7 +2,6 @@ import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { updateColumnWidths } from '../../transforms/column-width';
 import { getTableWidth } from '../../utils/nodes';
 import { getLayoutSize } from '../utils/misc';
@@ -165,7 +164,7 @@ export const scaleTable = (tableRef, options, domAtPos, api, isTableScalingEnabl
     // table's outer width to exceed the colgroup width by 1px. Subtract 1px from the
     // parentWidth here so that the scaled colgroup fits within the sync-block
     // container without overflowing.
-    const isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, `.${BodiedSyncBlockSharedCssClassName.content}`)) && fg('platform_synced_block_patch_9');
+    const isNestedInBodiedSyncBlock = !!((_tableRef$closest = tableRef.closest) !== null && _tableRef$closest !== void 0 && _tableRef$closest.call(tableRef, `.${BodiedSyncBlockSharedCssClassName.content}`));
     const BORDER_COLLAPSE_WIDTH_PX = 1;
     const adjustedParentWidth = isNestedInBodiedSyncBlock ? parentWidth - BORDER_COLLAPSE_WIDTH_PX : parentWidth;
     resizeState = scaleWithParent(tableRef, adjustedParentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);

package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js

@@ -60,9 +60,9 @@ export default class NumberColumn extends Component {
         style: {
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
-          borderLeft:
+          borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ?
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined,
+          `1px solid ${tableBorderColor}` : undefined,
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
           visibility: 'hidden' // Ensure the column is not visible during SSR
         },
@@ -75,9 +75,9 @@ export default class NumberColumn extends Component {
       style: {
         // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
-        borderLeft:
+        borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined,
+        `1px solid ${tableBorderColor}` : undefined,
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         visibility: 'visible'
       },

package/dist/es2019/ui/common-styles.js

@@ -218,22 +218,443 @@ const tableStickyHeaderFirefoxFixStyle = () => {
 		`;
   }
 };
-const activeCellHighlightStyles = () => {
-  return css`
-		.${ClassName.TABLE_NODE_WRAPPER} {
-			td.${ClassName.TABLE_CELL}.${ClassName.ACTIVE_CURSOR_CELL}::after,
-				th.${ClassName.TABLE_HEADER_CELL}.${ClassName.ACTIVE_CURSOR_CELL}::after {
-				border: 1px solid ${"var(--ds-border-selected, #1868DB)"};
-				box-shadow: ${"var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)"};
+const roundedTableCellCornerStyles = () => css`
+	.${ClassName.TABLE_NODE_WRAPPER} > table {
+		/* Round table corner cells (including merged cells that span to the edge)
+		   and their interaction overlays. The data-reaches-* attributes are set by the
+		   TableCell node view based on each cell's position + rowspan/colspan. */
+		> tbody > tr > td[data-reaches-top][data-reaches-left],
+		> tbody > tr > th[data-reaches-top][data-reaches-left] {
+			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
+
+			&::after,
+			&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
+				&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+				border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
+			}
+		}
+
+		> tbody > tr > td[data-reaches-top][data-reaches-right],
+		> tbody > tr > th[data-reaches-top][data-reaches-right] {
+			border-top-right-radius: ${"var(--ds-radius-medium, 6px)"};
+
+			&::after,
+			&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
+				&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+				border-top-right-radius: ${"var(--ds-radius-medium, 6px)"};
+			}
+		}
+
+		> tbody > tr > td[data-reaches-bottom][data-reaches-left],
+		> tbody > tr > th[data-reaches-bottom][data-reaches-left] {
+			border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
+
+			&::after,
+			&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
+				&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+				border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
+			}
+		}
+
+		> tbody > tr > td[data-reaches-bottom][data-reaches-right],
+		> tbody > tr > th[data-reaches-bottom][data-reaches-right] {
+			border-bottom-right-radius: ${"var(--ds-radius-medium, 6px)"};
+
+			&::after,
+			&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
+				&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+				border-bottom-right-radius: ${"var(--ds-radius-medium, 6px)"};
+			}
+		}
+	}
+`;
+const roundedTableInteractionOverlayStyles = () => css`
+	.${ClassName.TABLE_NODE_WRAPPER} > table {
+		/* Active-cell highlight base properties (replaces activeCellHighlightStyles).
+		   width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%,
+		   so that left/right/top/bottom determine the size instead. */
+		td.${ClassName.TABLE_CELL}.${ClassName.ACTIVE_CURSOR_CELL}::after,
+			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.ACTIVE_CURSOR_CELL}::after {
+			border: 1px solid ${"var(--ds-border-selected, #1868DB)"};
+			box-shadow: ${"var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)"};
+			content: '';
+			position: absolute;
+			top: -1px;
+			left: -1px;
+			right: -1px;
+			bottom: -1px;
+			width: auto;
+			height: auto;
+			z-index: ${akEditorSmallZIndex};
+			pointer-events: none;
+		}
+
+		/* Normalize selected/hover/danger overlays to the same box model as active-cell.
+		   width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%. */
+		td.${ClassName.HOVERED_CELL}::after,
+			td.${ClassName.SELECTED_CELL}::after,
+			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.SELECTED_CELL}::after,
+			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL}::after,
+			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL_IN_DANGER}::after,
+			td.${ClassName.TABLE_CELL}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+			left: -1px;
+			right: -1px;
+			top: -1px;
+			bottom: -1px;
+			width: auto;
+			height: auto;
+		}
+
+		/* Active-cell overlays: clamp outer sides using data-reaches-* attributes.
+		   Internal sides keep -1px overlap; true outer edges are clamped to 0. */
+		> tbody
+			> tr
+			> td[data-reaches-top].${ClassName.ACTIVE_CURSOR_CELL}::after,
+			> tbody
+			> tr
+			> th[data-reaches-top].${ClassName.ACTIVE_CURSOR_CELL}::after {
+			top: 0;
+		}
+
+		> tbody
+			> tr
+			> td[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL}::after,
+			> tbody
+			> tr
+			> th[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL}::after {
+			left: 0;
+		}
+
+		> tbody
+			> tr
+			> td[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL}::after,
+			> tbody
+			> tr
+			> th[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL}::after {
+			right: 0;
+		}
+
+		> tbody
+			> tr
+			> td[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL}::after,
+			> tbody
+			> tr
+			> th[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL}::after {
+			bottom: 0;
+		}
+
+		/* Selected/hover/active overlays: clamp outer left side and draw overlay border. */
+		> tbody
+			> tr
+			> td[data-reaches-left].${ClassName.SELECTED_CELL},
+			> tbody
+			> tr
+			> th[data-reaches-left].${ClassName.SELECTED_CELL},
+			> tbody
+			> tr
+			> td[data-reaches-left].${ClassName.HOVERED_CELL},
+			> tbody
+			> tr
+			> th[data-reaches-left].${ClassName.HOVERED_CELL},
+			> tbody
+			> tr
+			> td[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL},
+			> tbody
+			> tr
+			> th[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL} {
+			border-left-color: transparent;
+
+			&::after {
+				left: 0;
+				border-left-color: ${tableBorderSelectedColor};
+			}
+		}
+
+		/* Danger/delete overlays: clamp outer left side. */
+		> tbody
+			> tr
+			> td[data-reaches-left].${ClassName.HOVERED_CELL_IN_DANGER},
+			> tbody
+			> tr
+			> th[data-reaches-left].${ClassName.HOVERED_CELL_IN_DANGER} {
+			border-left-color: transparent;
+
+			&::after {
+				left: 0;
+				border-left-color: ${tableBorderDeleteColor};
+			}
+		}
+
+		/* Selected/hover/active overlays: clamp outer right side. */
+		> tbody
+			> tr
+			> td[data-reaches-right].${ClassName.SELECTED_CELL},
+			> tbody
+			> tr
+			> th[data-reaches-right].${ClassName.SELECTED_CELL},
+			> tbody
+			> tr
+			> td[data-reaches-right].${ClassName.HOVERED_CELL},
+			> tbody
+			> tr
+			> th[data-reaches-right].${ClassName.HOVERED_CELL},
+			> tbody
+			> tr
+			> td[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL},
+			> tbody
+			> tr
+			> th[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL} {
+			border-right-color: transparent;
+
+			&::after {
+				right: 0;
+				border-right-color: ${tableBorderSelectedColor};
+			}
+		}
+
+		/* Danger/delete overlays: clamp outer right side. */
+		> tbody
+			> tr
+			> td[data-reaches-right].${ClassName.HOVERED_CELL_IN_DANGER},
+			> tbody
+			> tr
+			> th[data-reaches-right].${ClassName.HOVERED_CELL_IN_DANGER} {
+			border-right-color: transparent;
+
+			&::after {
+				right: 0;
+				border-right-color: ${tableBorderDeleteColor};
+			}
+		}
+
+		/* Selected/hover/active overlays: clamp outer bottom side. */
+		> tbody
+			> tr
+			> td[data-reaches-bottom].${ClassName.SELECTED_CELL},
+			> tbody
+			> tr
+			> th[data-reaches-bottom].${ClassName.SELECTED_CELL},
+			> tbody
+			> tr
+			> td[data-reaches-bottom].${ClassName.HOVERED_CELL},
+			> tbody
+			> tr
+			> th[data-reaches-bottom].${ClassName.HOVERED_CELL},
+			> tbody
+			> tr
+			> td[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL},
+			> tbody
+			> tr
+			> th[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL} {
+			border-bottom-color: transparent;
+
+			&::after {
+				border-bottom-color: ${tableBorderSelectedColor};
+			}
+		}
+
+		/* Danger/delete overlays: clamp outer bottom side. */
+		> tbody
+			> tr
+			> td[data-reaches-bottom].${ClassName.HOVERED_CELL_IN_DANGER},
+			> tbody
+			> tr
+			> th[data-reaches-bottom].${ClassName.HOVERED_CELL_IN_DANGER} {
+			border-bottom-color: transparent;
+
+			&::after {
+				border-bottom-color: ${tableBorderDeleteColor};
+			}
+		}
+	}
+`;
+const roundedTableNumberedColumnStyles = () => css`
+	/* Numbered columns are separate, so they need their own rounded edge owner. */
+	.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
+		/* Override the inline/container left border and replace it with one rounded pseudo-border. */
+		> .${ClassName.ROW_CONTROLS_WRAPPER}
+			.${ClassName.NUMBERED_COLUMN},
+			> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
+			.${ClassName.NUMBERED_COLUMN} {
+			position: relative;
+			border-left: 0;
+
+			&::before {
 				content: '';
 				position: absolute;
-				inset: -1px;
-				z-index: ${akEditorSmallZIndex};
+				top: 0;
+				left: 0;
+				bottom: 0;
+				width: 100%;
+				border-left: 1px solid ${tableBorderColor};
+				border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
+				border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
 				pointer-events: none;
+				z-index: ${akEditorUnitZIndex};
 			}
 		}
-	`;
-};
+
+		/* Prevent individual number buttons from drawing a straight left border. */
+		> .${ClassName.ROW_CONTROLS_WRAPPER}
+			.${ClassName.NUMBERED_COLUMN_BUTTON},
+			> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
+			.${ClassName.NUMBERED_COLUMN_BUTTON} {
+			border-left-color: transparent;
+		}
+
+		> .${ClassName.ROW_CONTROLS_WRAPPER}
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER},
+			> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER},
+			> .${ClassName.ROW_CONTROLS_WRAPPER}
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE},
+			> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE},
+			> .${ClassName.ROW_CONTROLS_WRAPPER}
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.active,
+			> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.active {
+			border-left-color: transparent;
+		}
+
+		/* When numbered column is present, the visual left edge belongs to the number column widget.
+		   Zero out any left-side border-radius on the cell and its overlays/pseudo-borders —
+		   but leave right-side radii untouched so right-edge cells still round correctly. */
+		.${ClassName.TABLE_NODE_WRAPPER} > table > tbody > tr > th[data-reaches-top][data-reaches-left],
+		.${ClassName.TABLE_NODE_WRAPPER}
+			> table
+			> tbody
+			> tr
+			> td[data-reaches-top][data-reaches-left] {
+			border-top-left-radius: 0;
+
+			&::after,
+			&::before {
+				border-top-left-radius: 0;
+			}
+		}
+
+		.${ClassName.TABLE_NODE_WRAPPER}
+			> table
+			> tbody
+			> tr
+			> th[data-reaches-bottom][data-reaches-left],
+		.${ClassName.TABLE_NODE_WRAPPER}
+			> table
+			> tbody
+			> tr
+			> td[data-reaches-bottom][data-reaches-left] {
+			border-bottom-left-radius: 0;
+
+			&::after,
+			&::before {
+				border-bottom-left-radius: 0;
+			}
+		}
+
+		/* Preserve rounded numbered-column corners across normal, active, and danger states. */
+		.${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
+			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
+		}
+
+		.${ClassName.NUMBERED_COLUMN_BUTTON}:last-of-type {
+			border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
+		}
+
+		.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER}:first-of-type,
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE}:first-of-type,
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.active:first-of-type {
+			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
+		}
+
+		.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER}:last-of-type,
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE}:last-of-type,
+			.${ClassName.NUMBERED_COLUMN_BUTTON}.active:last-of-type {
+			border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
+		}
+
+		.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER}:first-of-type::after {
+			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
+		}
+
+		.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER}:last-of-type::after {
+			border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
+		}
+
+		/* Sticky numbered-column mask also needs the same top-left radius. */
+		.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW}
+			tr
+			th[data-reaches-top][data-reaches-left]::before {
+			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
+		}
+	}
+`;
+const roundedTableStickyHeaderStyles = () => css`
+	/* Sticky header rows have independent border/shadow/mask painting, so patch the sticky-only painters too. */
+	.${ClassName.TABLE_NODE_WRAPPER}
+		> table
+		> tbody
+		> tr.${ClassName.NATIVE_STICKY},
+		.${ClassName.TABLE_NODE_WRAPPER}
+		> table.${ClassName.TABLE_STICKY}
+		> tbody
+		> tr.sticky {
+		> th[data-reaches-left],
+		> td[data-reaches-left] {
+			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
+
+			&::after,
+			&::before {
+				border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
+			}
+		}
+
+		> td[data-reaches-right],
+		> th[data-reaches-right] {
+			border-top-right-radius: ${"var(--ds-radius-medium, 6px)"};
+
+			&::after,
+			&::before {
+				border-top-right-radius: ${"var(--ds-radius-medium, 6px)"};
+			}
+		}
+	}
+
+	.${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
+		border-left-color: transparent;
+	}
+
+	.${ClassName.TABLE_CONTAINER}[data-number-column='true'] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr th[data-reaches-top][data-reaches-left]::before,
+	.${ClassName.TABLE_CONTAINER}[data-number-column='true'] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr.${ClassName.NATIVE_STICKY} th[data-reaches-left]::before,
+	.${ClassName.TABLE_CONTAINER}[data-number-column='true'] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} .${ClassName.NATIVE_STICKY_ACTIVE} th[data-reaches-left]::before {
+		border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
+		clip-path: inset(0 0 0 0 round ${"var(--ds-radius-medium, 6px)"} 0 0 0);
+		box-shadow: none !important;
+	}
+
+	.${ClassName.TABLE_NODE_WRAPPER}
+		> table
+		> tbody
+		> tr.${ClassName.NATIVE_STICKY},
+		.${ClassName.TABLE_NODE_WRAPPER}
+		> table.${ClassName.TABLE_STICKY}
+		> tbody
+		> tr.sticky {
+		box-shadow: none !important;
+	}
+
+	.${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}:has(tr.sticky)
+		.${ClassName.NUMBERED_COLUMN}
+		.${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
+		box-shadow: none !important;
+	}
+`;
+const roundedTableOverrides = () => css`
+	${roundedTableCellCornerStyles()}
+	${roundedTableInteractionOverlayStyles()}
+	${roundedTableNumberedColumnStyles()}
+	${roundedTableStickyHeaderStyles()}
+`;
 const baseTableStylesWithoutSharedStyle = props => css`
 	${columnControlsLineMarker()};
 	${hoveredDeleteButton()};
@@ -1080,7 +1501,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 			pointer-events: none;
 		}
 		.${ClassName.SELECTED_CELL} {
-			border: 1px solid ${tableBorderSelectedColor};
+			${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : `border: 1px solid ${tableBorderSelectedColor};`}
 		}
 		.${ClassName.SELECTED_CELL}::after {
 			background: ${tableCellSelectedColor};
@@ -1089,8 +1510,8 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		/* Override border colors for danger state */
 		th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL_IN_DANGER},
 			td.${ClassName.TABLE_CELL}.${ClassName.HOVERED_CELL_IN_DANGER} {
-			border-left-color: ${tableBorderDeleteColor};
-			border-top-color: ${tableBorderDeleteColor};
+			${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : `border-left-color: ${tableBorderDeleteColor};
+			border-top-color: ${tableBorderDeleteColor};`}
 			&::after {
 				height: 100%;
 				width: 100%;
@@ -1137,8 +1558,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		}
 	}
 
-	/* Active cursor cell highlight */
-	${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? activeCellHighlightStyles() : ''}
+	${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableOverrides() : ''}
 
 	/* override for DnD controls */
 	.${ClassName.DRAG_ROW_CONTROLS_WRAPPER} {

package/dist/es2019/ui/ui-styles.js

@@ -3,6 +3,7 @@
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = cssString => css`
@@ -531,7 +532,7 @@ export const columnControlsDecoration = () => {
 export const hoveredDeleteButton = () => css`
 	.${ClassName.TABLE_CONTAINER}.${ClassName.HOVERED_DELETE_BUTTON} {
 		.${ClassName.SELECTED_CELL}, .${ClassName.COLUMN_SELECTED}, .${ClassName.HOVERED_CELL} {
-			border: 1px solid ${tableBorderDeleteColor};
+			${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : `border: 1px solid ${tableBorderDeleteColor};`}
 		}
 		.${ClassName.SELECTED_CELL}::after {
 			background: ${tableCellDeleteColor};
@@ -557,11 +558,11 @@ export const hoveredCell = () => css`
 		.${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
 		.${ClassName.HOVERED_CELL} {
 			position: relative;
-			border: 1px solid ${tableBorderSelectedColor};
+			${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : `border: 1px solid ${tableBorderSelectedColor};`}
 		}
 		.${ClassName.HOVERED_CELL}.${ClassName.HOVERED_NO_HIGHLIGHT} {
 			position: relative;
-			border: 1px solid ${tableBorderColor};
+			${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : `border: 1px solid ${tableBorderColor};`}
 		}
 	}
 `;

package/dist/esm/nodeviews/TableCell.js

@@ -9,6 +9,8 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { TableMap } from '@atlaskit/editor-tables';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import TableNodeView from './TableNodeViewBase';
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
@@ -42,6 +44,22 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
     var _this;
     _classCallCheck(this, TableCell);
     _this = _callSuper(this, TableCell, [node, view, getPos, eventDispatcher]);
+    /** Cached edge state to avoid redundant DOM writes. */
+    _defineProperty(_this, "prevReachesTop", false);
+    _defineProperty(_this, "prevReachesBottom", false);
+    _defineProperty(_this, "prevReachesLeft", false);
+    _defineProperty(_this, "prevReachesRight", false);
+    _defineProperty(_this, "destroy", function () {
+      if (_this.delayHandle && typeof window !== 'undefined') {
+        var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
+        // eslint-disable-next-line compat/compat
+        (_window = window) === null || _window === void 0 || (_window$cancelIdleCal = _window.cancelIdleCallback) === null || _window$cancelIdleCal === void 0 || _window$cancelIdleCal.call(_window, _this.delayHandle);
+        (_window2 = window) === null || _window2 === void 0 || (_window2$cancelAnimat = _window2.cancelAnimationFrame) === null || _window2$cancelAnimat === void 0 || _window2$cancelAnimat.call(_window2, _this.delayHandle);
+      }
+    });
+    if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+      _this.updateTableEdgeAttrs(node);
+    }
 
     // CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
     // Obviously design tokens can't be inverted and so it would result in `VAR(--DS-BACKGROUND-ACCENT-GRAY-SUBTLEST, #F4F5F7)`
@@ -53,14 +71,6 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
     // This is a workaround to fix those cases on the fly. Note it is super specific on purpose
     // so that it just fixes the heading token (other tokens should be unaffected)
     // At some point in the future
-    _defineProperty(_this, "destroy", function () {
-      if (_this.delayHandle && typeof window !== 'undefined') {
-        var _window, _window$cancelIdleCal, _window2, _window2$cancelAnimat;
-        // eslint-disable-next-line compat/compat
-        (_window = window) === null || _window === void 0 || (_window$cancelIdleCal = _window.cancelIdleCallback) === null || _window$cancelIdleCal === void 0 || _window$cancelIdleCal.call(_window, _this.delayHandle);
-        (_window2 = window) === null || _window2 === void 0 || (_window2$cancelAnimat = _window2.cancelAnimationFrame) === null || _window2$cancelAnimat === void 0 || _window2$cancelAnimat.call(_window2, _this.delayHandle);
-      }
-    });
     if (cssVariablePattern.test(node.attrs.background)) {
       _this.delayHandle = delayUntilIdle(function () {
         var pos = getPos();
@@ -91,6 +101,70 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
       }
       return didUpdate;
     }
+
+    /**
+     * Detects whether this cell visually reaches the bottom or right edge of the table
+     * (accounting for rowspan/colspan) and sets data attributes so CSS can apply
+     * rounded corners and transparent borders to merged cells that span to the table edges.
+     */
+  }, {
+    key: "updateTableEdgeAttrs",
+    value: function updateTableEdgeAttrs(node) {
+      var pos = this.getPos();
+      if (pos === undefined) {
+        return;
+      }
+      try {
+        var resolvedPos = this.view.state.doc.resolve(pos);
+
+        // Cell → row → table: depth-1 is the table, depth is the row
+        var tableDepth = resolvedPos.depth - 1;
+        var rowDepth = resolvedPos.depth;
+        if (tableDepth < 0 || rowDepth < 0) {
+          return;
+        }
+        var tableNode = resolvedPos.node(tableDepth);
+        if (tableNode.type.name !== 'table') {
+          return;
+        }
+        var tableMap = TableMap.get(tableNode);
+        var cellStartInTable = pos - resolvedPos.start(tableDepth);
+        var cellRect = tableMap.findCell(cellStartInTable);
+        var reachesTop = cellRect.top === 0;
+        var reachesBottom = cellRect.bottom >= tableMap.height;
+        var reachesLeft = cellRect.left === 0;
+        var reachesRight = cellRect.right >= tableMap.width;
+
+        // Only touch DOM attributes that actually changed
+        if (reachesTop !== this.prevReachesTop) {
+          this.prevReachesTop = reachesTop;
+          this.setDataAttr('data-reaches-top', reachesTop);
+        }
+        if (reachesBottom !== this.prevReachesBottom) {
+          this.prevReachesBottom = reachesBottom;
+          this.setDataAttr('data-reaches-bottom', reachesBottom);
+        }
+        if (reachesLeft !== this.prevReachesLeft) {
+          this.prevReachesLeft = reachesLeft;
+          this.setDataAttr('data-reaches-left', reachesLeft);
+        }
+        if (reachesRight !== this.prevReachesRight) {
+          this.prevReachesRight = reachesRight;
+          this.setDataAttr('data-reaches-right', reachesRight);
+        }
+      } catch (_unused) {
+        // Position may be stale during document mutations; silently ignore.
+      }
+    }
+  }, {
+    key: "setDataAttr",
+    value: function setDataAttr(attr, value) {
+      if (value) {
+        this.dom.setAttribute(attr, 'true');
+      } else {
+        this.dom.removeAttribute(attr);
+      }
+    }
   }, {
     key: "updateNodeView",
     value: function updateNodeView(node) {
@@ -130,6 +204,9 @@ var TableCell = /*#__PURE__*/function (_TableNodeView) {
         removedAttrs.forEach(function (key) {
           return _this2.dom.removeAttribute(key);
         });
+        if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+          this.updateTableEdgeAttrs(node);
+        }
         return true;
       }