@atlaskit/renderer 132.5.0 → 132.5.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 132.5.1
+
+### Patch Changes
+
+- [`edeed2f3314cd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/edeed2f3314cd) -
+  Fix rounded table edge interaction overlays
+- Updated dependencies
+
 ## 132.5.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/table/sticky.js

@@ -13,6 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = 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 _table = require("./table");
 var _injectProps = require("../../utils/inject-props");
 /**
@@ -35,6 +36,14 @@ var modeSpecficStyles = {
   })
 };
 
+// increasing specificity to override external renderer wrapper styles targeting div[mode='stick']
+var suppressExternalStickStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Override external renderer wrapper styles targeting div[mode='stick']
+  "&.fixed-table-div-custom-table-resizing[mode='stick']": {
+    background: "var(--ds-surface-overlay, #FFFFFF)"
+  }
+});
+
 // refactored based on fixedTableDivStaticStyles
 // TODO: DSP-4123 - Quality ticket
 var fixedTableDivStaticStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
@@ -74,7 +83,7 @@ var FixedTableDiv = function FixedTableDiv(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
-    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
+    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode], (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && suppressExternalStickStyles],
     style: {
       '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
       width: "".concat(wrapperWidth, "px"),

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

@@ -753,7 +753,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     }
   }]);
 }(_react.default.Component);
-var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNode) {
+var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled) {
   var cellEdgePropsByCellOffset = new Map();
   var cellRightByCellOffset = new Map();
   var occupiedGrid = [];
@@ -785,7 +785,8 @@ var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNo
       cellRightByCellOffset.set(cellOffset, cellRight);
       cellEdgePropsByCellOffset.set(cellOffset, {
         reachesBottom: cellBottom >= tableNode.childCount,
-        reachesLeft: cellLeft === 0,
+        // With number column enabled, PM column 0 is not visually leftmost and must not get `data-reaches-left`.
+        reachesLeft: cellLeft === 0 && !isNumberColumnEnabled,
         reachesRight: false,
         reachesTop: cellTop === 0
       });
@@ -802,12 +803,12 @@ var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNo
   });
   return cellEdgePropsByCellOffset;
 };
-var addTableCellEdgeProps = function addTableCellEdgeProps(rows, tableNode) {
+var addTableCellEdgeProps = function addTableCellEdgeProps(rows, tableNode, isNumberColumnEnabled) {
   try {
     if (!tableNode) {
       return rows;
     }
-    var cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode);
+    var cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled);
     var cellOffset = 0;
     return _react.default.Children.map(rows, function (row, rowIndex) {
       var rowNode = tableNode.child(rowIndex);
@@ -874,10 +875,13 @@ var TableProcessorWithContainerStyles = exports.TableProcessorWithContainerStyle
     (0, _defineProperty2.default)(_this2, "addNumberColumnIndexes", function (rows) {
       var isNumberColumnEnabled = _this2.props.isNumberColumnEnabled;
       var headerRowEnabled = isHeaderRowEnabled(rows);
+      var lastRowIndex = _react.default.Children.count(rows) - 1;
       return _react.default.Children.map(rows, function (row, index) {
         return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(row), {
           isNumberColumnEnabled: isNumberColumnEnabled,
-          index: headerRowEnabled ? index === 0 ? '' : index : index + 1
+          index: headerRowEnabled ? index === 0 ? '' : index : index + 1,
+          isFirstRow: index === 0,
+          isLastRow: index === lastRowIndex
         });
       });
     });
@@ -919,7 +923,7 @@ var TableProcessorWithContainerStyles = exports.TableProcessorWithContainerStyle
         return null;
       }
       var childrenArray = _react.default.Children.toArray(children);
-      var childrenWithTableEdgeProps = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgeProps(childrenArray, tableNode) : childrenArray;
+      var childrenWithTableEdgeProps = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgeProps(childrenArray, tableNode, isNumberColumnEnabled) : childrenArray;
       var orderedChildren = (0, _utils.compose)(this.addNumberColumnIndexes, this.addSortableColumn
       // @ts-expect-error TS2345: Argument of type '(ReactChild | ReactFragment | ReactPortal)[]' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>[]'
       )(childrenWithTableEdgeProps);

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

@@ -75,15 +75,18 @@ var TableRow = exports.default = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props2 = this.props,
         children = _this$props2.children,
-        innerRef = _this$props2.innerRef;
+        innerRef = _this$props2.innerRef,
+        isFirstRow = _this$props2.isFirstRow,
+        isLastRow = _this$props2.isLastRow;
       var childrenArray = _react.default.Children.toArray(children);
       return /*#__PURE__*/_react.default.createElement("tr", {
         ref: innerRef
-      }, this.props.isNumberColumnEnabled &&
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      _react.default.createElement("td", {
-        className: _consts.RendererCssClassName.NUMBER_COLUMN
+      }, this.props.isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("td", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+        className: _consts.RendererCssClassName.NUMBER_COLUMN,
+        "data-reaches-left": true,
+        "data-reaches-top": isFirstRow || undefined,
+        "data-reaches-bottom": isLastRow || undefined
       }, this.props.index), (0, _utils.compose)(this.addSortableColumn, this.addColGroupWidth)(childrenArray));
     }
   }]);

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

@@ -1509,41 +1509,89 @@ var tableSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _define
     }))
   }
 }));
-var roundedTableOuterBorderOverlayStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+var roundedTableOuterBorderOverlayStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, " > table,\n\t.").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
   borderColor: 'transparent',
   position: 'relative',
   '&::after': {
     content: "''",
     position: 'absolute',
-    inset: 0,
+    inset: '-0.5px',
     border: "".concat(_styles.tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)"),
-    borderRadius: "var(--ds-radius-medium, 6px)",
+    borderRadius: "var(--ds-radius-xlarge, 12px)",
     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]': {
+  '> 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]': {
+  '> tbody > tr > th[data-reaches-bottom], > tbody > tr > td[data-reaches-bottom]': {
+    borderBottomColor: 'transparent'
+  },
+  '> 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)"
+    borderTopLeftRadius: "var(--ds-radius-xlarge, 12px)",
+    backgroundClip: 'border-box',
+    clipPath: "inset(0 round ".concat("var(--ds-radius-xlarge, 12px)", " 0 0 0)")
   },
   '> tbody > tr > th[data-reaches-top][data-reaches-right], > tbody > tr > td[data-reaches-top][data-reaches-right]': {
-    borderTopRightRadius: "var(--ds-radius-medium, 6px)"
+    borderTopRightRadius: "var(--ds-radius-xlarge, 12px)",
+    backgroundClip: 'border-box',
+    clipPath: "inset(0 round 0 ".concat("var(--ds-radius-xlarge, 12px)", " 0 0)")
   },
   '> tbody > tr > th[data-reaches-bottom][data-reaches-left], > tbody > tr > td[data-reaches-bottom][data-reaches-left]': {
-    borderBottomLeftRadius: "var(--ds-radius-medium, 6px)"
+    borderBottomLeftRadius: "var(--ds-radius-xlarge, 12px)",
+    backgroundClip: 'border-box',
+    clipPath: "inset(0 round 0 0 0 ".concat("var(--ds-radius-xlarge, 12px)", ")")
   },
   '> tbody > tr > th[data-reaches-bottom][data-reaches-right], > tbody > tr > td[data-reaches-bottom][data-reaches-right]': {
-    borderBottomRightRadius: "var(--ds-radius-medium, 6px)"
+    borderBottomRightRadius: "var(--ds-radius-xlarge, 12px)",
+    backgroundClip: 'border-box',
+    clipPath: "inset(0 round 0 0 ".concat("var(--ds-radius-xlarge, 12px)", " 0)")
+  }
+}), ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER), {
+  borderTopLeftRadius: "var(--ds-radius-xlarge, 12px)",
+  borderTopRightRadius: "var(--ds-radius-xlarge, 12px)",
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0
+}), ".".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  '&::after': {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  '> tbody > tr': {
+    // The sticky table clone sets a row background locally; force it off so
+    // the rounded header cells, not a square row box, own the visible fill.
+    background: 'transparent !important'
+  },
+  '> tbody > tr > th, > tbody > tr > td': {
+    backgroundClip: 'border-box'
+  },
+  '> tbody > tr > th[data-reaches-left], > tbody > tr > td[data-reaches-left]': {
+    borderTopLeftRadius: "var(--ds-radius-xlarge, 12px)",
+    borderBottomLeftRadius: 0,
+    clipPath: "inset(0 round ".concat("var(--ds-radius-xlarge, 12px)", " 0 0 0)")
+  },
+  '> tbody > tr > th[data-reaches-right], > tbody > tr > td[data-reaches-right]': {
+    borderTopRightRadius: "var(--ds-radius-xlarge, 12px)",
+    borderBottomRightRadius: 0,
+    clipPath: "inset(0 round 0 ".concat("var(--ds-radius-xlarge, 12px)", " 0 0)")
+  },
+  '> tbody > tr > th[data-reaches-left][data-reaches-bottom], > tbody > tr > td[data-reaches-left][data-reaches-bottom]': {
+    borderBottomLeftRadius: 0
+  },
+  '> tbody > tr > th[data-reaches-right][data-reaches-bottom], > tbody > tr > td[data-reaches-right][data-reaches-bottom]': {
+    borderBottomRightRadius: 0
+  },
+  '> tbody > tr > th[data-reaches-left]::after, > tbody > tr > td[data-reaches-left]::after': {
+    borderBottomLeftRadius: 0
+  },
+  '> tbody > tr > th[data-reaches-right]::after, > tbody > tr > td[data-reaches-right]::after': {
+    borderBottomRightRadius: 0
   }
 }));
 var tableContentModeStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, ":has(table[data-initial-width-mode=\"content\"])"), {

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

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

package/dist/es2019/react/nodes/table/sticky.js

@@ -8,6 +8,7 @@ import React from 'react';
 import { jsx, css } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export const tableStickyPadding = 8;
@@ -23,6 +24,14 @@ const modeSpecficStyles = {
   })
 };
 
+// increasing specificity to override external renderer wrapper styles targeting div[mode='stick']
+const suppressExternalStickStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Override external renderer wrapper styles targeting div[mode='stick']
+  "&.fixed-table-div-custom-table-resizing[mode='stick']": {
+    background: "var(--ds-surface-overlay, #FFFFFF)"
+  }
+});
+
 // refactored based on fixedTableDivStaticStyles
 // TODO: DSP-4123 - Quality ticket
 const fixedTableDivStaticStyles = css({
@@ -75,7 +84,7 @@ const FixedTableDiv = props => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
-    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
+    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode], expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && suppressExternalStickStyles],
     style: {
       '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
       width: `${wrapperWidth}px`,

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

@@ -694,7 +694,7 @@ export class TableContainer extends React.Component {
     })));
   }
 }
-const getCellEdgePropsByCellOffset = tableNode => {
+const getCellEdgePropsByCellOffset = (tableNode, isNumberColumnEnabled) => {
   const cellEdgePropsByCellOffset = new Map();
   const cellRightByCellOffset = new Map();
   const occupiedGrid = [];
@@ -726,7 +726,8 @@ const getCellEdgePropsByCellOffset = tableNode => {
       cellRightByCellOffset.set(cellOffset, cellRight);
       cellEdgePropsByCellOffset.set(cellOffset, {
         reachesBottom: cellBottom >= tableNode.childCount,
-        reachesLeft: cellLeft === 0,
+        // With number column enabled, PM column 0 is not visually leftmost and must not get `data-reaches-left`.
+        reachesLeft: cellLeft === 0 && !isNumberColumnEnabled,
         reachesRight: false,
         reachesTop: cellTop === 0
       });
@@ -743,12 +744,12 @@ const getCellEdgePropsByCellOffset = tableNode => {
   });
   return cellEdgePropsByCellOffset;
 };
-const addTableCellEdgeProps = (rows, tableNode) => {
+const addTableCellEdgeProps = (rows, tableNode, isNumberColumnEnabled) => {
   try {
     if (!tableNode) {
       return rows;
     }
-    const cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode);
+    const cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled);
     let cellOffset = 0;
     return React.Children.map(rows, (row, rowIndex) => {
       const rowNode = tableNode.child(rowIndex);
@@ -815,10 +816,13 @@ export class TableProcessorWithContainerStyles extends React.Component {
         isNumberColumnEnabled
       } = this.props;
       const headerRowEnabled = isHeaderRowEnabled(rows);
+      const lastRowIndex = React.Children.count(rows) - 1;
       return React.Children.map(rows, (row, index) => {
         return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
           isNumberColumnEnabled,
-          index: headerRowEnabled ? index === 0 ? '' : index : index + 1
+          index: headerRowEnabled ? index === 0 ? '' : index : index + 1,
+          isFirstRow: index === 0,
+          isLastRow: index === lastRowIndex
         });
       });
     });
@@ -856,7 +860,7 @@ export class TableProcessorWithContainerStyles extends React.Component {
       return null;
     }
     const childrenArray = React.Children.toArray(children);
-    const childrenWithTableEdgeProps = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgeProps(childrenArray, tableNode) : childrenArray;
+    const childrenWithTableEdgeProps = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgeProps(childrenArray, tableNode, isNumberColumnEnabled) : childrenArray;
     const orderedChildren = compose(this.addNumberColumnIndexes, this.addSortableColumn
     // @ts-expect-error TS2345: Argument of type '(ReactChild | ReactFragment | ReactPortal)[]' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>[]'
     )(childrenWithTableEdgeProps);

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

@@ -55,16 +55,19 @@ export default class TableRow extends React.Component {
   render() {
     const {
       children,
-      innerRef
+      innerRef,
+      isFirstRow,
+      isLastRow
     } = this.props;
     const childrenArray = React.Children.toArray(children);
     return /*#__PURE__*/React.createElement("tr", {
       ref: innerRef
-    }, this.props.isNumberColumnEnabled &&
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    React.createElement("td", {
-      className: RendererCssClassName.NUMBER_COLUMN
+    }, this.props.isNumberColumnEnabled && /*#__PURE__*/React.createElement("td", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: RendererCssClassName.NUMBER_COLUMN,
+      "data-reaches-left": true,
+      "data-reaches-top": isFirstRow || undefined,
+      "data-reaches-bottom": isLastRow || undefined
     }, this.props.index), compose(this.addSortableColumn, this.addColGroupWidth)(childrenArray));
   }
 }

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

@@ -1896,35 +1896,86 @@ const roundedTableOuterBorderOverlayStyles = css({
     '&::after': {
       content: "''",
       position: 'absolute',
-      inset: 0,
+      inset: '-0.5px',
       border: `${tableCellBorderWidth}px solid ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"}`,
-      borderRadius: "var(--ds-radius-medium, 6px)",
+      borderRadius: "var(--ds-radius-xlarge, 12px)",
       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]': {
+    '> 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]': {
+    '> tbody > tr > th[data-reaches-bottom], > tbody > tr > td[data-reaches-bottom]': {
+      borderBottomColor: 'transparent'
+    },
+    '> 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)"
+      borderTopLeftRadius: "var(--ds-radius-xlarge, 12px)",
+      backgroundClip: 'border-box',
+      clipPath: `inset(0 round ${"var(--ds-radius-xlarge, 12px)"} 0 0 0)`
     },
     '> tbody > tr > th[data-reaches-top][data-reaches-right], > tbody > tr > td[data-reaches-top][data-reaches-right]': {
-      borderTopRightRadius: "var(--ds-radius-medium, 6px)"
+      borderTopRightRadius: "var(--ds-radius-xlarge, 12px)",
+      backgroundClip: 'border-box',
+      clipPath: `inset(0 round 0 ${"var(--ds-radius-xlarge, 12px)"} 0 0)`
     },
     '> tbody > tr > th[data-reaches-bottom][data-reaches-left], > tbody > tr > td[data-reaches-bottom][data-reaches-left]': {
-      borderBottomLeftRadius: "var(--ds-radius-medium, 6px)"
+      borderBottomLeftRadius: "var(--ds-radius-xlarge, 12px)",
+      backgroundClip: 'border-box',
+      clipPath: `inset(0 round 0 0 0 ${"var(--ds-radius-xlarge, 12px)"})`
     },
     '> tbody > tr > th[data-reaches-bottom][data-reaches-right], > tbody > tr > td[data-reaches-bottom][data-reaches-right]': {
-      borderBottomRightRadius: "var(--ds-radius-medium, 6px)"
+      borderBottomRightRadius: "var(--ds-radius-xlarge, 12px)",
+      backgroundClip: 'border-box',
+      clipPath: `inset(0 round 0 0 ${"var(--ds-radius-xlarge, 12px)"} 0)`
+    }
+  },
+  [`.${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky > .${TableSharedCssClassName.TABLE_STICKY_WRAPPER}`]: {
+    borderTopLeftRadius: "var(--ds-radius-xlarge, 12px)",
+    borderTopRightRadius: "var(--ds-radius-xlarge, 12px)",
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  // Keep the cloned sticky header rounded at the top while preserving a square bottom edge.
+  [`.${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky > .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
+    '&::after': {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    '> tbody > tr': {
+      // The sticky table clone sets a row background locally; force it off so
+      // the rounded header cells, not a square row box, own the visible fill.
+      background: 'transparent !important'
+    },
+    '> tbody > tr > th, > tbody > tr > td': {
+      backgroundClip: 'border-box'
+    },
+    '> tbody > tr > th[data-reaches-left], > tbody > tr > td[data-reaches-left]': {
+      borderTopLeftRadius: "var(--ds-radius-xlarge, 12px)",
+      borderBottomLeftRadius: 0,
+      clipPath: `inset(0 round ${"var(--ds-radius-xlarge, 12px)"} 0 0 0)`
+    },
+    '> tbody > tr > th[data-reaches-right], > tbody > tr > td[data-reaches-right]': {
+      borderTopRightRadius: "var(--ds-radius-xlarge, 12px)",
+      borderBottomRightRadius: 0,
+      clipPath: `inset(0 round 0 ${"var(--ds-radius-xlarge, 12px)"} 0 0)`
+    },
+    '> tbody > tr > th[data-reaches-left][data-reaches-bottom], > tbody > tr > td[data-reaches-left][data-reaches-bottom]': {
+      borderBottomLeftRadius: 0
+    },
+    '> tbody > tr > th[data-reaches-right][data-reaches-bottom], > tbody > tr > td[data-reaches-right][data-reaches-bottom]': {
+      borderBottomRightRadius: 0
+    },
+    '> tbody > tr > th[data-reaches-left]::after, > tbody > tr > td[data-reaches-left]::after': {
+      borderBottomLeftRadius: 0
+    },
+    '> tbody > tr > th[data-reaches-right]::after, > tbody > tr > td[data-reaches-right]::after': {
+      borderBottomRightRadius: 0
     }
   }
 });

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

@@ -58,7 +58,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 = "132.4.1";
+const packageVersion = "132.5.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/nodes/table/sticky.js

@@ -11,6 +11,7 @@ import React from 'react';
 import { jsx, css } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
@@ -26,6 +27,14 @@ var modeSpecficStyles = {
   })
 };
 
+// increasing specificity to override external renderer wrapper styles targeting div[mode='stick']
+var suppressExternalStickStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Override external renderer wrapper styles targeting div[mode='stick']
+  "&.fixed-table-div-custom-table-resizing[mode='stick']": {
+    background: "var(--ds-surface-overlay, #FFFFFF)"
+  }
+});
+
 // refactored based on fixedTableDivStaticStyles
 // TODO: DSP-4123 - Quality ticket
 var fixedTableDivStaticStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
@@ -65,7 +74,7 @@ var FixedTableDiv = function FixedTableDiv(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : '',
-    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]],
+    css: [fixedTableDivStaticStyles, modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode], expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && suppressExternalStickStyles],
     style: {
       '--ak-renderer-sticky-header-zindex': stickyHeaderZIndex,
       width: "".concat(wrapperWidth, "px"),

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

@@ -747,7 +747,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 }(React.Component);
-var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNode) {
+var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled) {
   var cellEdgePropsByCellOffset = new Map();
   var cellRightByCellOffset = new Map();
   var occupiedGrid = [];
@@ -779,7 +779,8 @@ var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNo
       cellRightByCellOffset.set(cellOffset, cellRight);
       cellEdgePropsByCellOffset.set(cellOffset, {
         reachesBottom: cellBottom >= tableNode.childCount,
-        reachesLeft: cellLeft === 0,
+        // With number column enabled, PM column 0 is not visually leftmost and must not get `data-reaches-left`.
+        reachesLeft: cellLeft === 0 && !isNumberColumnEnabled,
         reachesRight: false,
         reachesTop: cellTop === 0
       });
@@ -796,12 +797,12 @@ var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNo
   });
   return cellEdgePropsByCellOffset;
 };
-var addTableCellEdgeProps = function addTableCellEdgeProps(rows, tableNode) {
+var addTableCellEdgeProps = function addTableCellEdgeProps(rows, tableNode, isNumberColumnEnabled) {
   try {
     if (!tableNode) {
       return rows;
     }
-    var cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode);
+    var cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled);
     var cellOffset = 0;
     return React.Children.map(rows, function (row, rowIndex) {
       var rowNode = tableNode.child(rowIndex);
@@ -868,10 +869,13 @@ export var TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Com
     _defineProperty(_this2, "addNumberColumnIndexes", function (rows) {
       var isNumberColumnEnabled = _this2.props.isNumberColumnEnabled;
       var headerRowEnabled = isHeaderRowEnabled(rows);
+      var lastRowIndex = React.Children.count(rows) - 1;
       return React.Children.map(rows, function (row, index) {
         return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
           isNumberColumnEnabled: isNumberColumnEnabled,
-          index: headerRowEnabled ? index === 0 ? '' : index : index + 1
+          index: headerRowEnabled ? index === 0 ? '' : index : index + 1,
+          isFirstRow: index === 0,
+          isLastRow: index === lastRowIndex
         });
       });
     });
@@ -913,7 +917,7 @@ export var TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Com
         return null;
       }
       var childrenArray = React.Children.toArray(children);
-      var childrenWithTableEdgeProps = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgeProps(childrenArray, tableNode) : childrenArray;
+      var childrenWithTableEdgeProps = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgeProps(childrenArray, tableNode, isNumberColumnEnabled) : 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>>[]'
       )(childrenWithTableEdgeProps);

package/dist/esm/react/nodes/tableRow.js

@@ -68,15 +68,18 @@ var TableRow = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props2 = this.props,
         children = _this$props2.children,
-        innerRef = _this$props2.innerRef;
+        innerRef = _this$props2.innerRef,
+        isFirstRow = _this$props2.isFirstRow,
+        isLastRow = _this$props2.isLastRow;
       var childrenArray = React.Children.toArray(children);
       return /*#__PURE__*/React.createElement("tr", {
         ref: innerRef
-      }, this.props.isNumberColumnEnabled &&
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      React.createElement("td", {
-        className: RendererCssClassName.NUMBER_COLUMN
+      }, this.props.isNumberColumnEnabled && /*#__PURE__*/React.createElement("td", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+        className: RendererCssClassName.NUMBER_COLUMN,
+        "data-reaches-left": true,
+        "data-reaches-top": isFirstRow || undefined,
+        "data-reaches-bottom": isLastRow || undefined
       }, this.props.index), compose(this.addSortableColumn, this.addColGroupWidth)(childrenArray));
     }
   }]);

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

@@ -1502,41 +1502,89 @@ 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"), {
+var roundedTableOuterBorderOverlayStyles = css(_defineProperty(_defineProperty(_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,
+    inset: '-0.5px',
     border: "".concat(tableCellBorderWidth, "px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)"),
-    borderRadius: "var(--ds-radius-medium, 6px)",
+    borderRadius: "var(--ds-radius-xlarge, 12px)",
     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]': {
+  '> 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]': {
+  '> tbody > tr > th[data-reaches-bottom], > tbody > tr > td[data-reaches-bottom]': {
+    borderBottomColor: 'transparent'
+  },
+  '> 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)"
+    borderTopLeftRadius: "var(--ds-radius-xlarge, 12px)",
+    backgroundClip: 'border-box',
+    clipPath: "inset(0 round ".concat("var(--ds-radius-xlarge, 12px)", " 0 0 0)")
   },
   '> tbody > tr > th[data-reaches-top][data-reaches-right], > tbody > tr > td[data-reaches-top][data-reaches-right]': {
-    borderTopRightRadius: "var(--ds-radius-medium, 6px)"
+    borderTopRightRadius: "var(--ds-radius-xlarge, 12px)",
+    backgroundClip: 'border-box',
+    clipPath: "inset(0 round 0 ".concat("var(--ds-radius-xlarge, 12px)", " 0 0)")
   },
   '> tbody > tr > th[data-reaches-bottom][data-reaches-left], > tbody > tr > td[data-reaches-bottom][data-reaches-left]': {
-    borderBottomLeftRadius: "var(--ds-radius-medium, 6px)"
+    borderBottomLeftRadius: "var(--ds-radius-xlarge, 12px)",
+    backgroundClip: 'border-box',
+    clipPath: "inset(0 round 0 0 0 ".concat("var(--ds-radius-xlarge, 12px)", ")")
   },
   '> tbody > tr > th[data-reaches-bottom][data-reaches-right], > tbody > tr > td[data-reaches-bottom][data-reaches-right]': {
-    borderBottomRightRadius: "var(--ds-radius-medium, 6px)"
+    borderBottomRightRadius: "var(--ds-radius-xlarge, 12px)",
+    backgroundClip: 'border-box',
+    clipPath: "inset(0 round 0 0 ".concat("var(--ds-radius-xlarge, 12px)", " 0)")
+  }
+}), ".".concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky > .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER), {
+  borderTopLeftRadius: "var(--ds-radius-xlarge, 12px)",
+  borderTopRightRadius: "var(--ds-radius-xlarge, 12px)",
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0
+}), ".".concat(TableSharedCssClassName.TABLE_CONTAINER, ".is-sticky > .").concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER, " > table"), {
+  '&::after': {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  '> tbody > tr': {
+    // The sticky table clone sets a row background locally; force it off so
+    // the rounded header cells, not a square row box, own the visible fill.
+    background: 'transparent !important'
+  },
+  '> tbody > tr > th, > tbody > tr > td': {
+    backgroundClip: 'border-box'
+  },
+  '> tbody > tr > th[data-reaches-left], > tbody > tr > td[data-reaches-left]': {
+    borderTopLeftRadius: "var(--ds-radius-xlarge, 12px)",
+    borderBottomLeftRadius: 0,
+    clipPath: "inset(0 round ".concat("var(--ds-radius-xlarge, 12px)", " 0 0 0)")
+  },
+  '> tbody > tr > th[data-reaches-right], > tbody > tr > td[data-reaches-right]': {
+    borderTopRightRadius: "var(--ds-radius-xlarge, 12px)",
+    borderBottomRightRadius: 0,
+    clipPath: "inset(0 round 0 ".concat("var(--ds-radius-xlarge, 12px)", " 0 0)")
+  },
+  '> tbody > tr > th[data-reaches-left][data-reaches-bottom], > tbody > tr > td[data-reaches-left][data-reaches-bottom]': {
+    borderBottomLeftRadius: 0
+  },
+  '> tbody > tr > th[data-reaches-right][data-reaches-bottom], > tbody > tr > td[data-reaches-right][data-reaches-bottom]': {
+    borderBottomRightRadius: 0
+  },
+  '> tbody > tr > th[data-reaches-left]::after, > tbody > tr > td[data-reaches-left]::after': {
+    borderBottomLeftRadius: 0
+  },
+  '> tbody > tr > th[data-reaches-right]::after, > tbody > tr > td[data-reaches-right]::after': {
+    borderBottomRightRadius: 0
   }
 }));
 var tableContentModeStyles = css(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER, ":has(table[data-initial-width-mode=\"content\"])"), {

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

@@ -63,7 +63,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 = "132.4.1";
+var packageVersion = "132.5.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -5,6 +5,8 @@ type Props = {
     children?: React.ReactNode;
     index?: number;
     innerRef?: React.Ref<HTMLTableRowElement>;
+    isFirstRow?: boolean;
+    isLastRow?: boolean;
     isNumberColumnEnabled?: number;
     onSorting?: (columnIndex?: number, currentSortOrdered?: SortOrder) => void;
     tableOrderStatus?: {

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

@@ -5,6 +5,8 @@ type Props = {
     children?: React.ReactNode;
     index?: number;
     innerRef?: React.Ref<HTMLTableRowElement>;
+    isFirstRow?: boolean;
+    isLastRow?: boolean;
     isNumberColumnEnabled?: number;
     onSorting?: (columnIndex?: number, currentSortOrdered?: SortOrder) => void;
     tableOrderStatus?: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "132.5.0",
+	"version": "132.5.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -66,8 +66,8 @@
 		"@atlaskit/status": "^4.1.0",
 		"@atlaskit/task-decision": "^20.2.0",
 		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tmp-editor-statsig": "^99.0.0",
-		"@atlaskit/tokens": "^13.3.0",
+		"@atlaskit/tmp-editor-statsig": "^100.0.0",
+		"@atlaskit/tokens": "^13.4.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -80,7 +80,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.13.0",
+		"@atlaskit/editor-common": "^115.15.0",
 		"@atlaskit/link-provider": "^4.7.0",
 		"@atlaskit/media-core": "^37.1.0",
 		"react": "^18.2.0",