@atlaskit/renderer 133.16.5 → 133.16.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 133.16.6
+
+### Patch Changes
+
+- [`b91c14d4dbad7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b91c14d4dbad7) -
+  Editor; Ensure only the first table row can become a sticky header when the rounded table patch is
+  enabled
+
+  Renderer; Patch table body elements to have rounded corners when overridden by consumers
+
+- Updated dependencies
+
 ## 133.16.5
 
 ### Patch Changes

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

@@ -849,6 +849,53 @@ var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNo
   });
   return cellEdgePropsByCellOffset;
 };
+var isRenderedTableCell = function isRenderedTableCell(element) {
+  var _ref4 = element.props,
+    nodeType = _ref4.nodeType;
+  return nodeType === 'tableCell' || nodeType === 'tableHeader' || element.type === _tableCell.TableCell || element.type === _tableCell.TableHeader;
+};
+var addTableCellEdgePropsThroughWrappers = function addTableCellEdgePropsThroughWrappers(rows, tableNode, isNumberColumnEnabled) {
+  try {
+    if (!tableNode) {
+      return rows;
+    }
+    var cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled);
+    var cellOffset = 0;
+    return _react.default.Children.map(rows, function (row, rowIndex) {
+      var rowNode = tableNode.child(rowIndex);
+      cellOffset += 1;
+      var cellIndex = 0;
+      var _addEdgePropsToRenderedCells = function addEdgePropsToRenderedCells(element) {
+        if (isRenderedTableCell(element)) {
+          var cellNode = rowNode.child(cellIndex);
+          var edgeProps = cellEdgePropsByCellOffset.get(cellOffset);
+          cellIndex += 1;
+          cellOffset += cellNode.nodeSize;
+          return edgeProps ? /*#__PURE__*/_react.default.cloneElement(element, edgeProps) : element;
+        }
+        var _ref5 = element.props,
+          children = _ref5.children;
+        if (children === undefined) {
+          return element;
+        }
+        var childrenWithEdgeProps = _react.default.Children.map(children, function (child) {
+          return /*#__PURE__*/_react.default.isValidElement(child) ? _addEdgePropsToRenderedCells(child) : child;
+        });
+        return /*#__PURE__*/_react.default.cloneElement(element, undefined, childrenWithEdgeProps);
+      };
+      var rowWithEdgeProps = _addEdgePropsToRenderedCells(row);
+      if (cellIndex !== rowNode.childCount) {
+        throw new Error('Rendered table row does not match its document node');
+      }
+      cellOffset += 1;
+      return rowWithEdgeProps;
+    });
+  } catch (_unused) {
+    // Renderer can receive malformed historical ADF. If the table shape cannot
+    // be described safely, keep rendering without rounded edge metadata.
+    return rows;
+  }
+};
 var addTableCellEdgeProps = function addTableCellEdgeProps(rows, tableNode, isNumberColumnEnabled) {
   try {
     if (!tableNode) {
@@ -873,7 +920,7 @@ var addTableCellEdgeProps = function addTableCellEdgeProps(rows, tableNode, isNu
       cellOffset += 1;
       return /*#__PURE__*/_react.default.cloneElement(row, undefined, rowChildren);
     });
-  } catch (_unused) {
+  } catch (_unused2) {
     // Renderer can receive malformed historical ADF. If the table shape cannot
     // be described safely, keep rendering without rounded edge metadata.
     return rows;
@@ -969,7 +1016,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, isNumberColumnEnabled) : childrenArray;
+      var childrenWithTableEdgeProps = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? (0, _expValEquals.expValEquals)('platform_editor_table_q4_patch_5', 'isEnabled', true) ? addTableCellEdgePropsThroughWrappers(childrenArray, tableNode, isNumberColumnEnabled) : 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/ui/Renderer/index.js

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

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

@@ -10,7 +10,7 @@ import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMerged
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { TableHeader } from './tableCell';
+import { TableCell, TableHeader } from './tableCell';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
 import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
@@ -790,6 +790,53 @@ const getCellEdgePropsByCellOffset = (tableNode, isNumberColumnEnabled) => {
   });
   return cellEdgePropsByCellOffset;
 };
+const isRenderedTableCell = element => {
+  const {
+    nodeType
+  } = element.props;
+  return nodeType === 'tableCell' || nodeType === 'tableHeader' || element.type === TableCell || element.type === TableHeader;
+};
+const addTableCellEdgePropsThroughWrappers = (rows, tableNode, isNumberColumnEnabled) => {
+  try {
+    if (!tableNode) {
+      return rows;
+    }
+    const cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled);
+    let cellOffset = 0;
+    return React.Children.map(rows, (row, rowIndex) => {
+      const rowNode = tableNode.child(rowIndex);
+      cellOffset += 1;
+      let cellIndex = 0;
+      const addEdgePropsToRenderedCells = element => {
+        if (isRenderedTableCell(element)) {
+          const cellNode = rowNode.child(cellIndex);
+          const edgeProps = cellEdgePropsByCellOffset.get(cellOffset);
+          cellIndex += 1;
+          cellOffset += cellNode.nodeSize;
+          return edgeProps ? /*#__PURE__*/React.cloneElement(element, edgeProps) : element;
+        }
+        const {
+          children
+        } = element.props;
+        if (children === undefined) {
+          return element;
+        }
+        const childrenWithEdgeProps = React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) ? addEdgePropsToRenderedCells(child) : child);
+        return /*#__PURE__*/React.cloneElement(element, undefined, childrenWithEdgeProps);
+      };
+      const rowWithEdgeProps = addEdgePropsToRenderedCells(row);
+      if (cellIndex !== rowNode.childCount) {
+        throw new Error('Rendered table row does not match its document node');
+      }
+      cellOffset += 1;
+      return rowWithEdgeProps;
+    });
+  } catch {
+    // Renderer can receive malformed historical ADF. If the table shape cannot
+    // be described safely, keep rendering without rounded edge metadata.
+    return rows;
+  }
+};
 const addTableCellEdgeProps = (rows, tableNode, isNumberColumnEnabled) => {
   try {
     if (!tableNode) {
@@ -906,7 +953,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, isNumberColumnEnabled) : childrenArray;
+    const childrenWithTableEdgeProps = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? expValEquals('platform_editor_table_q4_patch_5', 'isEnabled', true) ? addTableCellEdgePropsThroughWrappers(childrenArray, tableNode, isNumberColumnEnabled) : 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/ui/Renderer/index.js

@@ -59,7 +59,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "133.16.4";
+const packageVersion = "133.16.5";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -23,7 +23,7 @@ import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMerged
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { TableHeader } from './tableCell';
+import { TableCell, TableHeader } from './tableCell';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
 import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
@@ -843,6 +843,53 @@ var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNo
   });
   return cellEdgePropsByCellOffset;
 };
+var isRenderedTableCell = function isRenderedTableCell(element) {
+  var _ref4 = element.props,
+    nodeType = _ref4.nodeType;
+  return nodeType === 'tableCell' || nodeType === 'tableHeader' || element.type === TableCell || element.type === TableHeader;
+};
+var addTableCellEdgePropsThroughWrappers = function addTableCellEdgePropsThroughWrappers(rows, tableNode, isNumberColumnEnabled) {
+  try {
+    if (!tableNode) {
+      return rows;
+    }
+    var cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled);
+    var cellOffset = 0;
+    return React.Children.map(rows, function (row, rowIndex) {
+      var rowNode = tableNode.child(rowIndex);
+      cellOffset += 1;
+      var cellIndex = 0;
+      var _addEdgePropsToRenderedCells = function addEdgePropsToRenderedCells(element) {
+        if (isRenderedTableCell(element)) {
+          var cellNode = rowNode.child(cellIndex);
+          var edgeProps = cellEdgePropsByCellOffset.get(cellOffset);
+          cellIndex += 1;
+          cellOffset += cellNode.nodeSize;
+          return edgeProps ? /*#__PURE__*/React.cloneElement(element, edgeProps) : element;
+        }
+        var _ref5 = element.props,
+          children = _ref5.children;
+        if (children === undefined) {
+          return element;
+        }
+        var childrenWithEdgeProps = React.Children.map(children, function (child) {
+          return /*#__PURE__*/React.isValidElement(child) ? _addEdgePropsToRenderedCells(child) : child;
+        });
+        return /*#__PURE__*/React.cloneElement(element, undefined, childrenWithEdgeProps);
+      };
+      var rowWithEdgeProps = _addEdgePropsToRenderedCells(row);
+      if (cellIndex !== rowNode.childCount) {
+        throw new Error('Rendered table row does not match its document node');
+      }
+      cellOffset += 1;
+      return rowWithEdgeProps;
+    });
+  } catch (_unused) {
+    // Renderer can receive malformed historical ADF. If the table shape cannot
+    // be described safely, keep rendering without rounded edge metadata.
+    return rows;
+  }
+};
 var addTableCellEdgeProps = function addTableCellEdgeProps(rows, tableNode, isNumberColumnEnabled) {
   try {
     if (!tableNode) {
@@ -867,7 +914,7 @@ var addTableCellEdgeProps = function addTableCellEdgeProps(rows, tableNode, isNu
       cellOffset += 1;
       return /*#__PURE__*/React.cloneElement(row, undefined, rowChildren);
     });
-  } catch (_unused) {
+  } catch (_unused2) {
     // Renderer can receive malformed historical ADF. If the table shape cannot
     // be described safely, keep rendering without rounded edge metadata.
     return rows;
@@ -963,7 +1010,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, isNumberColumnEnabled) : childrenArray;
+      var childrenWithTableEdgeProps = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? expValEquals('platform_editor_table_q4_patch_5', 'isEnabled', true) ? addTableCellEdgePropsThroughWrappers(childrenArray, tableNode, isNumberColumnEnabled) : 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/ui/Renderer/index.js

@@ -64,7 +64,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "133.16.4";
+var packageVersion = "133.16.5";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "133.16.5",
+	"version": "133.16.6",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
 		"@atlaskit/status": "^5.7.0",
 		"@atlaskit/task-decision": "^21.7.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^135.1.0",
+		"@atlaskit/tmp-editor-statsig": "^135.2.0",
 		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^23.2.0",
 		"@atlaskit/visually-hidden": "^4.2.0",