@atlaskit/editor-plugin-table 42.3.8 → 42.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 42.4.0
+
+### Minor Changes
+
+- [`c8289f4e731b6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c8289f4e731b6) -
+  Keep sticky table header columns aligned when the row under the header has merged cells (behind
+  platform_editor_sticky_header_merged_row_width_exp)
+
+## 42.3.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 42.3.8
 
 ### Patch Changes

package/compass.yml

@@ -35,7 +35,7 @@ customFields:
     value: true
   - name: Reviewer Selection Mechanism
     type: text
-    value: random(2)
+    value: randomTZIgnored(2)
   - name: Required Reviewer Approvals
     type: number
     value: 1

package/dist/cjs/pm-plugins/utils/column-controls.js

@@ -11,6 +11,7 @@ var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _getSelectionRect = require("@atlaskit/editor-tables/utils/get-selection-rect");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _consts = require("../../ui/consts");
 var getColumnsWidths = exports.getColumnsWidths = function getColumnsWidths(view) {
   var selection = view.state.selection;
@@ -189,10 +190,43 @@ var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
     return width * (cellColWidth / totalCalculatedCellWidth);
   });
 };
+var splitCellWidthEvenly = function splitCellWidthEvenly(_ref2) {
+  var width = _ref2.width,
+    colspan = _ref2.colspan;
+  return new Array(colspan).fill(width / colspan);
+};
+
+/**
+ * Splits a merged cell by its `data-colwidth` ratios only when they describe every spanned column
+ * with a positive width. Missing or zero entries (null colwidths serialise as empty strings and
+ * padded ones as 0) would collapse or shift columns, so those cells are split evenly instead.
+ */
+var splitCellWidthByValidColwidth = function splitCellWidthByValidColwidth(cell) {
+  var _cell$colwidth$split$, _cell$colwidth;
+  var colwidths = (_cell$colwidth$split$ = (_cell$colwidth = cell.colwidth) === null || _cell$colwidth === void 0 ? void 0 : _cell$colwidth.split(',').map(Number)) !== null && _cell$colwidth$split$ !== void 0 ? _cell$colwidth$split$ : [];
+  var isUsable = colwidths.length === cell.colspan && colwidths.every(function (colwidth) {
+    return Number.isFinite(colwidth) && colwidth > 0;
+  });
+  return isUsable ? getRelativeDomCellWidths(cell) : splitCellWidthEvenly(cell);
+};
+
+/**
+ * A merged cell spans several columns, so its width cannot tell the sticky header how wide each
+ * column is. Returns the first row from `startRow` onwards with exactly one cell per column. In a
+ * valid table such a row has no merged cells, and rows overlapped by a rowspan from above have
+ * fewer cells, so the cell count alone identifies it.
+ */
+var findFirstRowWithOneCellPerColumn = function findFirstRowWithOneCellPerColumn(startRow, columnCount) {
+  var row = startRow;
+  while (row && row.childElementCount !== columnCount) {
+    row = row.nextElementSibling;
+  }
+  return row;
+};
 var colWidthsForRow = exports.colWidthsForRow = function colWidthsForRow(tr) {
-  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref2$useColwidthRati = _ref2.useColwidthRatios,
-    useColwidthRatios = _ref2$useColwidthRati === void 0 ? false : _ref2$useColwidthRati;
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref3$useColwidthRati = _ref3.useColwidthRatios,
+    useColwidthRatios = _ref3$useColwidthRati === void 0 ? false : _ref3$useColwidthRati;
   // get the colspans
   var rowColSpans = (0, _dom.maphElem)(tr, function (cell) {
     return Number(cell.getAttribute('colspan') || 1 /* default to span of 1 */);
@@ -206,7 +240,20 @@ var colWidthsForRow = exports.colWidthsForRow = function colWidthsForRow(tr) {
   //
   // prefer copying the widths via the DOM
   // or inferring from the next row if one exists
-  var copyTarget = tr.nextElementSibling || tr;
+  var nextRow = tr.nextElementSibling;
+  var copyTarget = nextRow || tr;
+  var splitCellWidth = useColwidthRatios ? getRelativeDomCellWidths : splitCellWidthEvenly;
+  if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_sticky_header_merged_row_width_exp')) {
+    var columnCount = rowColSpans.reduce(function (acc, val) {
+      return acc + val;
+    }, 0);
+    var rowWithOneCellPerColumn = findFirstRowWithOneCellPerColumn(nextRow, columnCount);
+    if (rowWithOneCellPerColumn) {
+      copyTarget = rowWithOneCellPerColumn;
+    } else {
+      splitCellWidth = splitCellWidthByValidColwidth;
+    }
+  }
   if (copyTarget) {
     // either from the first row while it's still in the table
     var cellInfos = (0, _dom.maphElem)(copyTarget, function (cell) {
@@ -220,7 +267,7 @@ var colWidthsForRow = exports.colWidthsForRow = function colWidthsForRow(tr) {
     // reverse engineer cell widths from table widths
     var domBasedCellWidths = [];
     cellInfos.map(function (cell) {
-      domBasedCellWidths.push.apply(domBasedCellWidths, (0, _toConsumableArray2.default)(useColwidthRatios ? getRelativeDomCellWidths(cell) : new Array(cell.colspan).fill(cell.width / cell.colspan)));
+      domBasedCellWidths.push.apply(domBasedCellWidths, (0, _toConsumableArray2.default)(splitCellWidth(cell)));
     });
     if (cellInfos.reduce(function (acc, cell) {
       return acc + cell.width;

package/dist/cjs/ui/TableMenu/column/items/SortDecreasingItem.js

@@ -1,4 +1,4 @@
-/* SortDecreasingItem.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* SortDecreasingItem.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/TableMenu/column/items/SortIncreasingItem.js

@@ -1,4 +1,4 @@
-/* SortIncreasingItem.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* SortIncreasingItem.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -1,4 +1,4 @@
-/* BackgroundColorItem.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* BackgroundColorItem.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/es2019/pm-plugins/utils/column-controls.js

@@ -3,6 +3,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils/get-selection-rect';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { tableDeleteButtonSize } from '../../ui/consts';
 export const getColumnsWidths = view => {
   const {
@@ -172,6 +173,36 @@ const getRelativeDomCellWidths = ({
   const totalCalculatedCellWidth = cellColWidths.reduce((acc, cellColWidth) => acc + cellColWidth, 0);
   return cellColWidths.map(cellColWidth => width * (cellColWidth / totalCalculatedCellWidth));
 };
+const splitCellWidthEvenly = ({
+  width,
+  colspan
+}) => new Array(colspan).fill(width / colspan);
+
+/**
+ * Splits a merged cell by its `data-colwidth` ratios only when they describe every spanned column
+ * with a positive width. Missing or zero entries (null colwidths serialise as empty strings and
+ * padded ones as 0) would collapse or shift columns, so those cells are split evenly instead.
+ */
+const splitCellWidthByValidColwidth = cell => {
+  var _cell$colwidth$split$, _cell$colwidth;
+  const colwidths = (_cell$colwidth$split$ = (_cell$colwidth = cell.colwidth) === null || _cell$colwidth === void 0 ? void 0 : _cell$colwidth.split(',').map(Number)) !== null && _cell$colwidth$split$ !== void 0 ? _cell$colwidth$split$ : [];
+  const isUsable = colwidths.length === cell.colspan && colwidths.every(colwidth => Number.isFinite(colwidth) && colwidth > 0);
+  return isUsable ? getRelativeDomCellWidths(cell) : splitCellWidthEvenly(cell);
+};
+
+/**
+ * A merged cell spans several columns, so its width cannot tell the sticky header how wide each
+ * column is. Returns the first row from `startRow` onwards with exactly one cell per column. In a
+ * valid table such a row has no merged cells, and rows overlapped by a rowspan from above have
+ * fewer cells, so the cell count alone identifies it.
+ */
+const findFirstRowWithOneCellPerColumn = (startRow, columnCount) => {
+  let row = startRow;
+  while (row && row.childElementCount !== columnCount) {
+    row = row.nextElementSibling;
+  }
+  return row;
+};
 export const colWidthsForRow = (tr, {
   useColwidthRatios = false
 } = {}) => {
@@ -186,7 +217,18 @@ export const colWidthsForRow = (tr, {
   //
   // prefer copying the widths via the DOM
   // or inferring from the next row if one exists
-  const copyTarget = tr.nextElementSibling || tr;
+  const nextRow = tr.nextElementSibling;
+  let copyTarget = nextRow || tr;
+  let splitCellWidth = useColwidthRatios ? getRelativeDomCellWidths : splitCellWidthEvenly;
+  if (isExperimentEnabled('platform_editor_sticky_header_merged_row_width_exp')) {
+    const columnCount = rowColSpans.reduce((acc, val) => acc + val, 0);
+    const rowWithOneCellPerColumn = findFirstRowWithOneCellPerColumn(nextRow, columnCount);
+    if (rowWithOneCellPerColumn) {
+      copyTarget = rowWithOneCellPerColumn;
+    } else {
+      splitCellWidth = splitCellWidthByValidColwidth;
+    }
+  }
   if (copyTarget) {
     // either from the first row while it's still in the table
     const cellInfos = maphElem(copyTarget, cell => ({
@@ -198,7 +240,7 @@ export const colWidthsForRow = (tr, {
     // reverse engineer cell widths from table widths
     const domBasedCellWidths = [];
     cellInfos.map(cell => {
-      domBasedCellWidths.push(...(useColwidthRatios ? getRelativeDomCellWidths(cell) : new Array(cell.colspan).fill(cell.width / cell.colspan)));
+      domBasedCellWidths.push(...splitCellWidth(cell));
     });
     if (cellInfos.reduce((acc, cell) => acc + cell.width, 0) !== 0) {
       const newWidths = mapTableColwidthsToRow(rowColSpans, domBasedCellWidths);

package/dist/es2019/ui/TableMenu/column/items/SortDecreasingItem.js

@@ -1,4 +1,4 @@
-/* SortDecreasingItem.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* SortDecreasingItem.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./SortDecreasingItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/TableMenu/column/items/SortIncreasingItem.js

@@ -1,4 +1,4 @@
-/* SortIncreasingItem.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* SortIncreasingItem.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./SortIncreasingItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -1,4 +1,4 @@
-/* BackgroundColorItem.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* BackgroundColorItem.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./BackgroundColorItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useMemo } from 'react';

package/dist/esm/pm-plugins/utils/column-controls.js

@@ -4,6 +4,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils/get-selection-rect';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { tableDeleteButtonSize } from '../../ui/consts';
 export var getColumnsWidths = function getColumnsWidths(view) {
   var selection = view.state.selection;
@@ -182,10 +183,43 @@ var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
     return width * (cellColWidth / totalCalculatedCellWidth);
   });
 };
+var splitCellWidthEvenly = function splitCellWidthEvenly(_ref2) {
+  var width = _ref2.width,
+    colspan = _ref2.colspan;
+  return new Array(colspan).fill(width / colspan);
+};
+
+/**
+ * Splits a merged cell by its `data-colwidth` ratios only when they describe every spanned column
+ * with a positive width. Missing or zero entries (null colwidths serialise as empty strings and
+ * padded ones as 0) would collapse or shift columns, so those cells are split evenly instead.
+ */
+var splitCellWidthByValidColwidth = function splitCellWidthByValidColwidth(cell) {
+  var _cell$colwidth$split$, _cell$colwidth;
+  var colwidths = (_cell$colwidth$split$ = (_cell$colwidth = cell.colwidth) === null || _cell$colwidth === void 0 ? void 0 : _cell$colwidth.split(',').map(Number)) !== null && _cell$colwidth$split$ !== void 0 ? _cell$colwidth$split$ : [];
+  var isUsable = colwidths.length === cell.colspan && colwidths.every(function (colwidth) {
+    return Number.isFinite(colwidth) && colwidth > 0;
+  });
+  return isUsable ? getRelativeDomCellWidths(cell) : splitCellWidthEvenly(cell);
+};
+
+/**
+ * A merged cell spans several columns, so its width cannot tell the sticky header how wide each
+ * column is. Returns the first row from `startRow` onwards with exactly one cell per column. In a
+ * valid table such a row has no merged cells, and rows overlapped by a rowspan from above have
+ * fewer cells, so the cell count alone identifies it.
+ */
+var findFirstRowWithOneCellPerColumn = function findFirstRowWithOneCellPerColumn(startRow, columnCount) {
+  var row = startRow;
+  while (row && row.childElementCount !== columnCount) {
+    row = row.nextElementSibling;
+  }
+  return row;
+};
 export var colWidthsForRow = function colWidthsForRow(tr) {
-  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref2$useColwidthRati = _ref2.useColwidthRatios,
-    useColwidthRatios = _ref2$useColwidthRati === void 0 ? false : _ref2$useColwidthRati;
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref3$useColwidthRati = _ref3.useColwidthRatios,
+    useColwidthRatios = _ref3$useColwidthRati === void 0 ? false : _ref3$useColwidthRati;
   // get the colspans
   var rowColSpans = maphElem(tr, function (cell) {
     return Number(cell.getAttribute('colspan') || 1 /* default to span of 1 */);
@@ -199,7 +233,20 @@ export var colWidthsForRow = function colWidthsForRow(tr) {
   //
   // prefer copying the widths via the DOM
   // or inferring from the next row if one exists
-  var copyTarget = tr.nextElementSibling || tr;
+  var nextRow = tr.nextElementSibling;
+  var copyTarget = nextRow || tr;
+  var splitCellWidth = useColwidthRatios ? getRelativeDomCellWidths : splitCellWidthEvenly;
+  if (isExperimentEnabled('platform_editor_sticky_header_merged_row_width_exp')) {
+    var columnCount = rowColSpans.reduce(function (acc, val) {
+      return acc + val;
+    }, 0);
+    var rowWithOneCellPerColumn = findFirstRowWithOneCellPerColumn(nextRow, columnCount);
+    if (rowWithOneCellPerColumn) {
+      copyTarget = rowWithOneCellPerColumn;
+    } else {
+      splitCellWidth = splitCellWidthByValidColwidth;
+    }
+  }
   if (copyTarget) {
     // either from the first row while it's still in the table
     var cellInfos = maphElem(copyTarget, function (cell) {
@@ -213,7 +260,7 @@ export var colWidthsForRow = function colWidthsForRow(tr) {
     // reverse engineer cell widths from table widths
     var domBasedCellWidths = [];
     cellInfos.map(function (cell) {
-      domBasedCellWidths.push.apply(domBasedCellWidths, _toConsumableArray(useColwidthRatios ? getRelativeDomCellWidths(cell) : new Array(cell.colspan).fill(cell.width / cell.colspan)));
+      domBasedCellWidths.push.apply(domBasedCellWidths, _toConsumableArray(splitCellWidth(cell)));
     });
     if (cellInfos.reduce(function (acc, cell) {
       return acc + cell.width;

package/dist/esm/ui/TableMenu/column/items/SortDecreasingItem.js

@@ -1,4 +1,4 @@
-/* SortDecreasingItem.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* SortDecreasingItem.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./SortDecreasingItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/TableMenu/column/items/SortIncreasingItem.js

@@ -1,4 +1,4 @@
-/* SortIncreasingItem.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* SortIncreasingItem.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./SortIncreasingItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -1,4 +1,4 @@
-/* BackgroundColorItem.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* BackgroundColorItem.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./BackgroundColorItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useMemo } from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "42.3.8",
+	"version": "42.4.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,7 +21,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^57.7.0",
-		"@atlaskit/button": "^25.7.0",
+		"@atlaskit/button": "^25.8.0",
 		"@atlaskit/custom-steps": "^1.1.0",
 		"@atlaskit/editor-palette": "^3.5.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^30.0.0",
@@ -29,7 +29,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^30.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^30.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^32.0.0",
-		"@atlaskit/editor-plugin-extension": "33.0.17",
+		"@atlaskit/editor-plugin-extension": "33.0.18",
 		"@atlaskit/editor-plugin-guideline": "^30.0.0",
 		"@atlaskit/editor-plugin-interaction": "^44.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^27.0.0",
@@ -53,9 +53,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^3.0.0",
 		"@atlaskit/primitives": "^22.7.0",
-		"@atlaskit/tmp-editor-statsig": "^260.0.0",
+		"@atlaskit/tmp-editor-statsig": "^261.0.0",
 		"@atlaskit/toggle": "^17.3.0",
-		"@atlaskit/tokens": "^20.10.0",
+		"@atlaskit/tokens": "^20.11.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
@@ -68,7 +68,7 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^134.9.0",
+		"@atlaskit/editor-common": "^134.16.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -107,7 +107,7 @@
 		}
 	},
 	"devDependencies": {
-		"@atlaskit/editor-common": "^134.9.0",
+		"@atlaskit/editor-common": "^134.16.0",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"react-intl": "^7.0.0"