@atlaskit/editor-plugin-table 22.4.1 → 22.4.3

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

@@ -9,6 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _types = require("../types");
 var _consts = require("./consts");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
@@ -132,10 +133,10 @@ var columnControlsDecoration = exports.columnControlsDecoration = function colum
   return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tdisplay: none;\n\t\t\tcursor: pointer;\n\t\t\tposition: absolute;\n\t\t\twidth: 100%;\n\t\t\tleft: 0;\n\t\t\ttop: -", "px;\n\t\t\theight: ", "px;\n\t\t\t/* floating dot for adding column button */\n\t\t\t&::before {\n\t\t\t\tcontent: ' ';\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\theight: ", "px;\n\t\t\t\twidth: ", "px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tpointer-events: none;\n\t\t\t\ttop: 2px;\n\t\t\t\tright: ", ";\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: ' ';\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* floating dot for adding column button - overriding style on last column to avoid scroll */\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",table\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t}\n\n\t\t\t\t&.", " .", "::after {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\tz-index: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",table\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder-left: ", "px solid ", ";\n\t\t\t\t\tleft: -", "px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t}\n\n\t\t\t\t&.", " .", "::after {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\tborder-left: ", "px solid ", ";\n\t\t\t\t\tleft: -", "px;\n\t\t\t\t\tz-index: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", "\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",\n\t\t\t.", "\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t.", "::after {\n\t\t\t\t", ";\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-negative-025, -2px)", columnHeaderButton("\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n        border-top: ").concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n        border-bottom: ").concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n        box-sizing: content-box;\n        height: ").concat(_consts.tableToolbarSize - 1, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _styles.tableCellBorderWidth, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _styles.tableCellBorderWidth, _consts.tableBorderDeleteColor, _styles.tableCellBorderWidth, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected());
 };
 var hoveredDeleteButton = exports.hoveredDeleteButton = function hoveredDeleteButton() {
-  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ".", " {\n\t\t.", ", .", ", .", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t}\n\n\t\t.", " > table {\n\t\t\ttd.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t\tth.", " {\n\t\t\t\tbackground-color: unset;\n\t\t\t}\n\t\t\tth.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderDeleteColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellDeleteColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor);
+  return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ".", " {\n\t\t.", ", .", ", .", " {\n\t\t\t", "\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t}\n\n\t\t.", " > table {\n\t\t\ttd.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t\tth.", " {\n\t\t\t\tbackground-color: unset;\n\t\t\t}\n\t\t\tth.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts.tableBorderDeleteColor, ";"), _types.TableCssClassName.SELECTED_CELL, _consts.tableCellDeleteColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor);
 };
 var hoveredCell = exports.hoveredCell = function hoveredCell() {
-  return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableBorderColor);
+  return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\t", "\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\t", "\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts.tableBorderSelectedColor, ";"), _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts.tableBorderColor, ";"));
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/es2019/nodeviews/TableCell.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
 const DEFAULT_COL_SPAN = 1;
 const DEFAULT_ROW_SPAN = 1;
@@ -28,6 +30,22 @@ const cssVariablePattern = /^VAR\(--.*\)$/;
 export default class TableCell extends TableNodeView {
   constructor(node, view, getPos, eventDispatcher, editorAnalyticsAPI) {
     super(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", () => {
+      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 ? void 0 : (_window$cancelIdleCal = _window.cancelIdleCallback) === null || _window$cancelIdleCal === void 0 ? void 0 : _window$cancelIdleCal.call(_window, this.delayHandle);
+        (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$cancelAnimat = _window2.cancelAnimationFrame) === null || _window2$cancelAnimat === void 0 ? 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)`
@@ -39,14 +57,6 @@ export default class TableCell extends 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", () => {
-      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 ? void 0 : (_window$cancelIdleCal = _window.cancelIdleCallback) === null || _window$cancelIdleCal === void 0 ? void 0 : _window$cancelIdleCal.call(_window, this.delayHandle);
-        (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$cancelAnimat = _window2.cancelAnimationFrame) === null || _window2$cancelAnimat === void 0 ? void 0 : _window2$cancelAnimat.call(_window2, this.delayHandle);
-      }
-    });
     if (cssVariablePattern.test(node.attrs.background)) {
       this.delayHandle = delayUntilIdle(() => {
         const pos = getPos();
@@ -73,6 +83,66 @@ export default class TableCell extends 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.
+   */
+  updateTableEdgeAttrs(node) {
+    const pos = this.getPos();
+    if (pos === undefined) {
+      return;
+    }
+    try {
+      const resolvedPos = this.view.state.doc.resolve(pos);
+
+      // Cell → row → table: depth-1 is the table, depth is the row
+      const tableDepth = resolvedPos.depth - 1;
+      const rowDepth = resolvedPos.depth;
+      if (tableDepth < 0 || rowDepth < 0) {
+        return;
+      }
+      const tableNode = resolvedPos.node(tableDepth);
+      if (tableNode.type.name !== 'table') {
+        return;
+      }
+      const tableMap = TableMap.get(tableNode);
+      const cellStartInTable = pos - resolvedPos.start(tableDepth);
+      const cellRect = tableMap.findCell(cellStartInTable);
+      const reachesTop = cellRect.top === 0;
+      const reachesBottom = cellRect.bottom >= tableMap.height;
+      const reachesLeft = cellRect.left === 0;
+      const 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 {
+      // Position may be stale during document mutations; silently ignore.
+    }
+  }
+  setDataAttr(attr, value) {
+    if (value) {
+      this.dom.setAttribute(attr, 'true');
+    } else {
+      this.dom.removeAttribute(attr);
+    }
+  }
   updateNodeView(node) {
     if (this.node.type !== node.type) {
       return false;
@@ -96,6 +166,9 @@ export default class TableCell extends TableNodeView {
     if (addedAttrs.length || removedAttrs.length) {
       addedAttrs.forEach(([key, value]) => this.dom.setAttribute(key, value || ''));
       removedAttrs.forEach(key => this.dom.removeAttribute(key));
+      if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+        this.updateTableEdgeAttrs(node);
+      }
       return true;
     }
 

package/dist/es2019/nodeviews/table.js

@@ -47,6 +47,35 @@ const handleInlineTableWidth = (table, width) => {
   }
   table.style.setProperty('width', `${width}px`);
 };
+const setDataAttr = (cell, attr, value) => {
+  const hasAttr = cell.hasAttribute(attr);
+  if (value && !hasAttr) {
+    cell.setAttribute(attr, 'true');
+  } else if (!value && hasAttr) {
+    cell.removeAttribute(attr);
+  }
+};
+const refreshRoundedTableEdgeAttrs = (table, tableNode) => {
+  try {
+    const tableMap = TableMap.get(tableNode);
+    const cells = Array.from(table.rows).flatMap(row => Array.from(row.cells));
+    const cellOffsets = Array.from(new Set(tableMap.map));
+    cellOffsets.forEach((cellOffset, cellIndex) => {
+      const cell = cells[cellIndex];
+      if (!cell) {
+        return;
+      }
+      const cellRect = tableMap.findCell(cellOffset);
+      setDataAttr(cell, 'data-reaches-top', cellRect.top === 0);
+      setDataAttr(cell, 'data-reaches-bottom', cellRect.bottom >= tableMap.height);
+      setDataAttr(cell, 'data-reaches-left', cellRect.left === 0);
+      setDataAttr(cell, 'data-reaches-right', cellRect.right >= tableMap.width);
+    });
+  } catch {
+    // Table structure can be transient while ProseMirror normalises transactions.
+    // Keep existing edge attrs if the current shape cannot be mapped safely.
+  }
+};
 export default class TableView extends ReactNodeView {
   constructor(props) {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, undefined,
@@ -214,6 +243,40 @@ export default class TableView extends ReactNodeView {
       }
     }
   }
+  // Each TableCell node view refreshes its own edge attrs when its cell attrs change.
+  // However, when the table's shape changes (e.g. a new row is inserted below the
+  // last row), ProseMirror may reuse the existing neighbouring cells as-is, so those
+  // cells never get a chance to update their edge attrs on their own.
+  //
+  // To cover those cases, we refresh edge attrs from the table node view here.
+  //
+  // The refresh runs on the next animation frame because ReactNodeView.update()
+  // schedules the table's React render via the portal provider. If we read
+  // `this.table.rows` synchronously, we'd still see the previous DOM.
+  scheduleRoundedTableEdgeRefresh(node) {
+    if (this.roundedTableEdgeRefreshHandle !== undefined) {
+      cancelAnimationFrame(this.roundedTableEdgeRefreshHandle);
+    }
+    this.roundedTableEdgeRefreshHandle = requestAnimationFrame(() => {
+      this.roundedTableEdgeRefreshHandle = undefined;
+      if (this.table instanceof HTMLTableElement) {
+        refreshRoundedTableEdgeAttrs(this.table, node);
+      }
+    });
+  }
+  update(node, decorations, innerDecorations, validUpdate) {
+    if (!expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+      return super.update(node, decorations, innerDecorations, validUpdate);
+    }
+    const currentTableMap = TableMap.get(this.node);
+    const nextTableMap = TableMap.get(node);
+    const tableGeometryChanged = currentTableMap.width !== nextTableMap.width || currentTableMap.height !== nextTableMap.height;
+    const didUpdate = super.update(node, decorations, innerDecorations, validUpdate);
+    if (didUpdate && tableGeometryChanged) {
+      this.scheduleRoundedTableEdgeRefresh(node);
+    }
+    return didUpdate;
+  }
   render(props, forwardRef) {
     return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
       forwardRef: forwardRef,
@@ -287,6 +350,10 @@ export default class TableView extends ReactNodeView {
   }
   destroy() {
     var _this$eventDispatcher;
+    if (this.roundedTableEdgeRefreshHandle !== undefined) {
+      cancelAnimationFrame(this.roundedTableEdgeRefreshHandle);
+      this.roundedTableEdgeRefreshHandle = undefined;
+    }
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }

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,342 @@ 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 +1400,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 +1409,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 +1457,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} {